@cat-factory/app 0.307.1 → 0.309.0

package/app/components/bootstrap/BootstrapModal.vue

@@ -21,6 +21,7 @@ import {
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import { appInstallationManageUrl, newRepoUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const bootstrap = useBootstrapStore()
@@ -648,9 +649,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- launch -->
         <section class="space-y-4">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3">
             {{ t('bootstrap.section.newRepo') }}
-          </h3>
+          </SectionLabel>
 
           <UFormField :label="t('bootstrap.target.label')" required>
             <URadioGroup v-model="target" :items="targetItems" />
@@ -912,9 +913,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- recent jobs -->
         <section v-if="agentRuns.bootstrapJobs.length" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3">
             {{ t('bootstrap.recent.title') }}
-          </h3>
+          </SectionLabel>
           <div
             v-for="job in agentRuns.bootstrapJobs.slice(0, 5)"
             :key="job.id"
@@ -922,7 +923,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <div class="min-w-0">
               <div class="truncate text-default">{{ job.repoName }}</div>
-              <div class="truncate text-[11px] text-dimmed">
+              <div class="truncate text-2xs text-dimmed">
                 {{
                   job.referenceArchitectureName
                     ? t('bootstrap.recent.fromArch', { name: job.referenceArchitectureName })
@@ -935,7 +936,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.repoUrl"
                 :to="job.repoUrl"
                 target="_blank"
-                class="text-[11px] text-primary hover:underline"
+                class="text-2xs text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.open') }}
               </ULink>
@@ -947,7 +948,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.prUrl"
                 :to="job.prUrl"
                 target="_blank"
-                class="text-[11px] text-primary hover:underline"
+                class="text-2xs text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.openPr') }}
               </ULink>
@@ -963,9 +964,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
         <!-- reference architecture management -->
         <section class="space-y-3">
           <div class="flex items-center justify-between">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('bootstrap.arch.title') }}
-            </h3>
+            </SectionLabel>
             <UButton
               size="xs"
               color="neutral"
@@ -984,7 +985,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <div class="min-w-0">
               <div class="truncate text-sm text-default">{{ a.name }}</div>
-              <div class="truncate text-[11px] text-dimmed">{{ a.repoOwner }}/{{ a.repoName }}</div>
+              <div class="truncate text-2xs text-dimmed">{{ a.repoOwner }}/{{ a.repoName }}</div>
             </div>
             <div class="flex items-center gap-1">
               <UButton

package/app/components/bootstrap/BootstrapRunSteps.vue

@@ -34,7 +34,7 @@ function stateLabel(state: BootstrapStepState): string {
     <li
       v-for="step in steps"
       :key="step.id"
-      class="flex items-start gap-1.5 text-[11px]"
+      class="flex items-start gap-1.5 text-2xs"
       :data-step="step.id"
       :data-state="step.state"
     >

package/app/components/brainstorm/BrainstormWindow.vue

@@ -19,6 +19,7 @@ import type {
   ReviewItemSeverity,
   ReviewItemStatus,
 } from '~/types/brainstorm'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const brainstorm = useBrainstormStore()
@@ -384,9 +385,9 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     v-if="item.reply"
                     class="mt-2 max-w-3xl rounded-md border-s-2 border-muted bg-app-950/40 px-3 py-1.5 text-sm text-toned"
                   >
-                    <span class="text-[10px] uppercase tracking-wide text-dimmed">
+                    <SectionLabel as="span">
                       {{ t('brainstorm.yourChoice') }}
-                    </span>
+                    </SectionLabel>
                     <p class="whitespace-pre-line">{{ item.reply }}</p>
                   </div>
 
@@ -454,7 +455,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 
           <!-- converged document: the standard-format direction -->
           <section v-if="outline" class="mt-6 border-t border-default pt-5">
-            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-app-success-400">
+            <div class="mb-3 flex items-center gap-1.5 text-2xs text-app-success-400">
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">
                 {{ incorporated ? docNoun : t('brainstorm.docDraft', { doc: docNoun }) }}
@@ -482,7 +483,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
               </button>
               <div
                 v-show="!s.title || !collapsed[s.id]"
-                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-toned"
+                class="reader-prose mt-1 ps-5.5 text-sm leading-relaxed text-toned"
                 v-html="s.bodyHtml"
               />
             </div>
@@ -541,7 +542,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('brainstorm.incorporateChoices') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('brainstorm.hint.allDismissed') }}
               </template>
@@ -603,14 +604,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('brainstorm.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               {{ t('brainstorm.mergedHint') }}
             </p>
           </div>
 
           <div
             v-if="session && incorporated"
-            class="border-t border-default pt-4 text-[11px] leading-relaxed text-dimmed"
+            class="border-t border-default pt-4 text-2xs leading-relaxed text-dimmed"
           >
             {{ t('brainstorm.incorporatedFooter') }}
           </div>

package/app/components/bugFishing/BugFishingWindow.vue

@@ -28,6 +28,7 @@ import type { BugFishingFinding, BugFishingSeverity, BugFishingStepState } from
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -263,12 +264,12 @@ const PHASE_ICON: Record<string, string> = {
         data-testid="bug-fishing-phases"
         class="w-60 shrink-0 overflow-y-auto border-r border-default px-3 py-4"
       >
-        <p class="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="p" class="mb-2 px-1">
           {{ t('bugFishing.phases.heading') }}
-        </p>
+        </SectionLabel>
         <button
           type="button"
-          class="mb-1 w-full rounded-md px-2 py-1.5 text-left text-[12px]"
+          class="mb-1 w-full rounded-md px-2 py-1.5 text-left text-xs"
           :class="
             selectedPassKey === null
               ? 'bg-elevated text-app-100'
@@ -283,7 +284,7 @@ const PHASE_ICON: Record<string, string> = {
         <div v-for="group in territoryGroups" :key="group.id ?? 'whole'" class="mb-2">
           <p
             v-if="group.label"
-            class="mb-1 mt-2 truncate px-1 text-[10px] font-semibold uppercase tracking-wide text-app-info-400/80"
+            class="mb-1 mt-2 truncate px-1 text-3xs font-semibold uppercase tracking-wide text-app-info-400/80"
             :title="group.label"
           >
             {{ group.label }}
@@ -312,8 +313,8 @@ const PHASE_ICON: Record<string, string> = {
                   }"
                 />
                 <span class="min-w-0 flex-1">
-                  <span class="block truncate text-[12px]">{{ phase.title }}</span>
-                  <span class="block text-[10px] text-dimmed">
+                  <span class="block truncate text-xs">{{ phase.title }}</span>
+                  <span class="block text-3xs text-dimmed">
                     {{
                       phase.status === 'completed' || phase.status === 'failed'
                         ? t('bugFishing.phases.found', { count: phaseFindingCount(phase) })
@@ -335,7 +336,7 @@ const PHASE_ICON: Record<string, string> = {
                         :style="{ width: `${coverageShare(phase)}%` }"
                       />
                     </span>
-                    <span class="mt-0.5 block text-[10px] text-app-600">
+                    <span class="mt-0.5 block text-3xs text-app-600">
                       {{ t('bugFishing.coverage.share', { percent: coverageShare(phase) }) }}
                     </span>
                   </span>
@@ -354,18 +355,18 @@ const PHASE_ICON: Record<string, string> = {
           v-if="selectedPhase"
           class="mb-4 rounded-lg border border-default bg-default/40 px-3 py-2.5"
         >
-          <p class="text-[11px] text-muted">{{ selectedPhase.goal }}</p>
+          <p class="text-2xs text-muted">{{ selectedPhase.goal }}</p>
           <p
             v-if="selectedPhase.status === 'failed'"
             data-testid="bug-fishing-phase-failed"
-            class="mt-2 text-[12px] text-app-warning-300"
+            class="mt-2 text-xs text-app-warning-300"
           >
             {{ t('bugFishing.phases.failedNote', { reason: selectedPhase.failureReason ?? '' }) }}
           </p>
           <MarkdownProse
             v-else-if="selectedPhase.summary"
             :text="selectedPhase.summary"
-            class="mt-2 max-w-3xl text-[12px]"
+            class="mt-2 max-w-3xl text-xs"
           />
         </div>
 
@@ -374,7 +375,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="fishing"
           data-testid="bug-fishing-in-progress"
-          class="mb-4 flex items-center gap-2 rounded-lg border border-app-info-500/25 bg-app-info-500/5 px-3 py-2 text-[12px] text-app-info-200"
+          class="mb-4 flex items-center gap-2 rounded-lg border border-app-info-500/25 bg-app-info-500/5 px-3 py-2 text-xs text-app-info-200"
         >
           <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
           <span>
@@ -395,7 +396,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="plan && (unfished.length > 0 || plan.treeTruncated || plan.surveyUnavailableReason)"
           data-testid="bug-fishing-plan"
-          class="mb-4 rounded-lg border border-app-warning-500/25 bg-app-warning-500/5 px-3 py-2 text-[12px] text-app-warning-200"
+          class="mb-4 rounded-lg border border-app-warning-500/25 bg-app-warning-500/5 px-3 py-2 text-xs text-app-warning-200"
         >
           <p v-if="plan.surveyUnavailableReason" data-testid="bug-fishing-survey-unavailable">
             {{ t('bugFishing.plan.surveyUnavailable', { reason: plan.surveyUnavailableReason }) }}
@@ -412,7 +413,7 @@ const PHASE_ICON: Record<string, string> = {
                 })
               }}
             </p>
-            <ul class="mt-1 space-y-0.5 text-[11px] text-app-warning-200/80">
+            <ul class="mt-1 space-y-0.5 text-2xs text-app-warning-200/80">
               <li v-for="cell in unfished" :key="`${cell.territoryId}::${cell.phaseId}`">
                 {{
                   t('bugFishing.plan.unfishedCell', {
@@ -432,7 +433,7 @@ const PHASE_ICON: Record<string, string> = {
           data-testid="bug-fishing-pipeline"
           class="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-default bg-default/40 px-3 py-2"
         >
-          <span class="text-[11px] text-muted">{{ t('bugFishing.fixPipeline.label') }}</span>
+          <span class="text-2xs text-muted">{{ t('bugFishing.fixPipeline.label') }}</span>
           <USelectMenu
             v-model="pipelineOverride"
             :items="pipelineOptions"
@@ -440,22 +441,22 @@ const PHASE_ICON: Record<string, string> = {
             size="xs"
             class="min-w-52"
           />
-          <span class="text-[11px] text-dimmed">
+          <span class="text-2xs text-dimmed">
             {{ t('bugFishing.fixPipeline.hint', { pipeline: effectivePipelineName ?? '—' }) }}
           </span>
         </div>
 
         <div class="mb-2 flex items-center justify-between">
-          <p class="text-[11px] text-muted">
+          <p class="text-2xs text-muted">
             {{ t('bugFishing.counts', { untriaged: untriagedCount, spawned: spawnedCount }) }}
           </p>
-          <label class="flex items-center gap-1.5 text-[11px] text-muted">
+          <label class="flex items-center gap-1.5 text-2xs text-muted">
             <input v-model="showTriaged" type="checkbox" class="accent-app-info-500" />
             {{ t('bugFishing.showTriaged') }}
           </label>
         </div>
 
-        <p v-if="bugFishing.error" class="mb-3 text-[12px] text-app-error-300">
+        <p v-if="bugFishing.error" class="mb-3 text-xs text-app-error-300">
           {{ bugFishing.error }}
         </p>
 
@@ -465,7 +466,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="visibleFindings.length === 0"
           data-testid="bug-fishing-empty"
-          class="rounded-lg border border-default bg-default/40 px-4 py-8 text-center text-[12px] text-muted"
+          class="rounded-lg border border-default bg-default/40 px-4 py-8 text-center text-xs text-muted"
         >
           {{
             findings.length === 0
@@ -484,35 +485,35 @@ const PHASE_ICON: Record<string, string> = {
           >
             <div class="flex flex-wrap items-center gap-2">
               <span
-                class="rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase"
+                class="rounded-sm border px-1.5 py-0.5 text-3xs font-semibold uppercase"
                 :class="SEVERITY_CLASS[finding.severity]"
               >
                 {{ t(`bugFishing.severity.${finding.severity}`) }}
               </span>
-              <span class="rounded bg-elevated px-1.5 py-0.5 text-[10px] text-toned">
+              <span class="rounded-sm bg-elevated px-1.5 py-0.5 text-3xs text-toned">
                 {{ t(`bugFishing.kind.${finding.kind}`) }}
               </span>
-              <span class="text-[10px] text-dimmed">
+              <span class="text-3xs text-dimmed">
                 {{ t(`bugFishing.confidence.${finding.confidence}`) }}
               </span>
               <span
-                class="min-w-0 flex-1 text-[13px] text-app-100"
+                class="min-w-0 flex-1 text-sm text-app-100"
                 :class="{ 'line-through': finding.dismissed }"
               >
                 {{ finding.title }}
               </span>
             </div>
 
-            <p v-if="finding.path" class="mt-1 font-mono text-[11px] text-dimmed">
+            <p v-if="finding.path" class="mt-1 font-mono text-2xs text-dimmed">
               {{ finding.path }}<span v-if="finding.line">:{{ finding.line }}</span>
             </p>
 
-            <MarkdownProse :text="finding.detail" class="mt-2 max-w-3xl text-[12px]" />
+            <MarkdownProse :text="finding.detail" class="mt-2 max-w-3xl text-xs" />
 
-            <div v-if="finding.failureScenario" class="mt-2 text-[12px] text-toned">
-              <span class="text-[10px] font-semibold uppercase tracking-wide text-dimmed">
+            <div v-if="finding.failureScenario" class="mt-2 text-xs text-toned">
+              <SectionLabel as="span">
                 {{ t('bugFishing.finding.failureScenario') }}
-              </span>
+              </SectionLabel>
               <MarkdownProse :text="finding.failureScenario" class="mt-0.5 max-w-3xl" />
             </div>
 
@@ -520,17 +521,17 @@ const PHASE_ICON: Record<string, string> = {
                  apart: a finding that cannot point at the code it describes is speculating, and
                  that should be visible without reading the prose for it. -->
             <details v-if="finding.evidence" class="mt-2">
-              <summary class="cursor-pointer text-[11px] text-muted hover:text-default">
+              <summary class="cursor-pointer text-2xs text-muted hover:text-default">
                 {{ t('bugFishing.finding.evidence') }}
               </summary>
-              <MarkdownProse :text="finding.evidence" class="mt-1 max-w-3xl text-[12px]" />
+              <MarkdownProse :text="finding.evidence" class="mt-1 max-w-3xl text-xs" />
             </details>
 
             <details v-if="finding.suggestedFix" class="mt-1">
-              <summary class="cursor-pointer text-[11px] text-muted hover:text-default">
+              <summary class="cursor-pointer text-2xs text-muted hover:text-default">
                 {{ t('bugFishing.finding.suggestedFix') }}
               </summary>
-              <MarkdownProse :text="finding.suggestedFix" class="mt-1 max-w-3xl text-[12px]" />
+              <MarkdownProse :text="finding.suggestedFix" class="mt-1 max-w-3xl text-xs" />
             </details>
 
             <!-- Already marked: say what was created and let the reader follow it. The three
@@ -540,7 +541,7 @@ const PHASE_ICON: Record<string, string> = {
             <div
               v-if="finding.spawn?.status === 'spawned'"
               data-testid="bug-fishing-finding-spawned"
-              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-app-success-300"
+              class="mt-2 flex flex-wrap items-center gap-2 text-2xs text-app-success-300"
             >
               <UIcon name="i-lucide-check-circle-2" class="h-3.5 w-3.5" />
               <span>
@@ -566,7 +567,7 @@ const PHASE_ICON: Record<string, string> = {
             <div
               v-else-if="finding.spawn?.status === 'pending'"
               data-testid="bug-fishing-finding-spawning"
-              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-muted"
+              class="mt-2 flex flex-wrap items-center gap-2 text-2xs text-muted"
             >
               <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
               <span>{{ t('bugFishing.finding.spawning') }}</span>
@@ -577,7 +578,7 @@ const PHASE_ICON: Record<string, string> = {
             <p
               v-else-if="finding.spawn?.status === 'failed'"
               data-testid="bug-fishing-finding-spawn-failed"
-              class="mt-2 max-w-3xl text-[11px] text-app-warning-300"
+              class="mt-2 max-w-3xl text-2xs text-app-warning-300"
             >
               {{
                 t('bugFishing.finding.spawnFailed', {
@@ -623,7 +624,7 @@ const PHASE_ICON: Record<string, string> = {
       v-if="awaiting"
       class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{
           untriagedCount > 0
             ? t('bugFishing.footer.parkedWithUntriaged', { count: untriagedCount })

package/app/components/clarity/ClarityReviewWindow.vue

@@ -19,6 +19,7 @@ import type {
   ReviewItemSeverity,
   ReviewItemStatus,
 } from '~/types/clarity'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const clarity = useClarityStore()
@@ -424,9 +425,9 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
                     class="mt-2 max-w-3xl rounded-md border-s-2 border-muted bg-app-950/40 px-3 py-1.5 text-sm text-toned"
                   >
-                    <span class="text-[10px] uppercase tracking-wide text-dimmed">
+                    <SectionLabel as="span">
                       {{ t('clarity.answerLabel') }}
-                    </span>
+                    </SectionLabel>
                     <p class="whitespace-pre-line">{{ item.reply }}</p>
                   </div>
 
@@ -480,7 +481,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 
           <!-- clarified document: the standard-format bug report -->
           <section v-if="outline" class="mt-6 border-t border-default pt-5">
-            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-app-success-400">
+            <div class="mb-3 flex items-center gap-1.5 text-2xs text-app-success-400">
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">
                 {{ incorporated ? t('clarity.docHeading') : t('clarity.docHeadingDraft') }}
@@ -508,7 +509,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
               </button>
               <div
                 v-show="!s.title || !collapsed[s.id]"
-                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-toned"
+                class="reader-prose mt-1 ps-5.5 text-sm leading-relaxed text-toned"
                 v-html="s.bodyHtml"
               />
             </div>
@@ -574,7 +575,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('clarity.incorporateAnswers') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('clarity.hint.proceed') }}
               </template>
@@ -636,14 +637,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('clarity.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               {{ t('clarity.redoHint') }}
             </p>
           </div>
 
           <div
             v-if="review && incorporated"
-            class="border-t border-default pt-4 text-[11px] leading-relaxed text-dimmed"
+            class="border-t border-default pt-4 text-2xs leading-relaxed text-dimmed"
           >
             {{ t('clarity.incorporatedFooter') }}
           </div>

package/app/components/common/AsyncViewError.vue

@@ -19,7 +19,7 @@ function reload() {
         <UIcon name="i-lucide-unplug" class="h-4 w-4 shrink-0 text-app-warning-400" />
         {{ t('errors.asyncView.title') }}
       </div>
-      <p class="mt-2 text-[12px] leading-relaxed text-muted">
+      <p class="mt-2 text-xs leading-relaxed text-muted">
         {{ t('errors.asyncView.body') }}
       </p>
       <UButton class="mt-4" color="primary" variant="soft" size="xs" @click="reload">

package/app/components/common/ClarificationItem.vue

@@ -51,16 +51,16 @@ const draft = computed({
 <template>
   <div class="rounded-lg border border-default bg-app-950/40 p-3" data-testid="clarification-item">
     <div class="flex items-start justify-between gap-2">
-      <p class="text-[13px] font-medium text-default">{{ prompt }}</p>
+      <p class="text-sm font-medium text-default">{{ prompt }}</p>
       <slot name="badges" />
     </div>
-    <p v-if="detail" class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted">
+    <p v-if="detail" class="mt-1 whitespace-pre-wrap text-xs leading-relaxed text-muted">
       {{ detail }}
     </p>
 
     <!-- dismissed: a "not relevant" chip + reopen -->
     <div v-if="dismissed" class="mt-2 flex items-center justify-between gap-2">
-      <span class="inline-flex items-center gap-1 text-[11px] text-dimmed">
+      <span class="inline-flex items-center gap-1 text-2xs text-dimmed">
         <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />{{ t('clarification.dismissed') }}
       </span>
       <UButton
@@ -79,7 +79,7 @@ const draft = computed({
     <!-- a recommendation is being requested/generated: a working chip, no answer box -->
     <div
       v-else-if="requested"
-      class="mt-2 inline-flex items-center gap-1 text-[11px] text-primary"
+      class="mt-2 inline-flex items-center gap-1 text-2xs text-primary"
       data-testid="clarification-requested"
     >
       <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
@@ -131,10 +131,10 @@ const draft = computed({
         class="mt-2 rounded-md border border-primary/50 bg-primary/10 p-2"
         data-testid="clarification-recommendation"
       >
-        <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-primary">
+        <div class="mb-1 flex items-center gap-1 text-3xs uppercase tracking-wide text-primary">
           <UIcon name="i-lucide-wand-2" class="h-3 w-3" />{{ t('clarification.suggestion') }}
         </div>
-        <p class="whitespace-pre-wrap text-[12px] text-default">{{ recommendation }}</p>
+        <p class="whitespace-pre-wrap text-xs text-default">{{ recommendation }}</p>
         <UButton
           class="mt-1.5"
           size="xs"

package/app/components/common/DescriptorFields.vue

@@ -112,7 +112,7 @@ function selectItems(field: DescriptorField) {
            testid that would have to be slugified to be selectable. -->
       <p
         v-if="caption"
-        class="-mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted"
+        class="-mb-1 text-2xs font-semibold uppercase tracking-wide text-muted"
         :class="{ 'pt-2': startsGroup }"
         :data-testid="`${testidPrefix}-section`"
       >

package/app/components/common/EmptyState.vue

@@ -25,7 +25,7 @@ withDefaults(
     <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-muted">
       {{ title }}
     </p>
-    <p v-if="description" :class="compact ? 'text-[11px]' : 'text-xs'" class="max-w-xs">
+    <p v-if="description" :class="compact ? 'text-2xs' : 'text-xs'" class="max-w-xs">
       {{ description }}
     </p>
     <div v-if="$slots.default" :class="compact ? 'mt-1' : 'mt-2'">

package/app/components/common/InterviewGateNotice.vue

@@ -25,15 +25,15 @@ defineProps<{
     :data-testid="testid"
   >
     <UIcon name="i-lucide-loader-circle" class="h-5 w-5 animate-spin text-primary" />
-    <p class="text-[13px] text-default">{{ title }}</p>
-    <p class="text-[12px] text-muted">{{ hint }}</p>
+    <p class="text-sm text-default">{{ title }}</p>
+    <p class="text-xs text-muted">{{ hint }}</p>
   </div>
   <div
     v-else
     class="rounded-lg border border-app-error-900/60 bg-app-error-950/20 p-4 text-center"
     :data-testid="testid"
   >
-    <p class="text-[13px] text-app-error-200">{{ title }}</p>
-    <p class="mt-1 text-[12px] text-muted">{{ hint }}</p>
+    <p class="text-sm text-app-error-200">{{ title }}</p>
+    <p class="mt-1 text-xs text-muted">{{ hint }}</p>
   </div>
 </template>

package/app/components/common/MarkdownProse.vue

@@ -55,7 +55,11 @@ const html = computed(() => renderMarkdown(props.text))
   font-style: italic;
 }
 .cf-prose :deep(code) {
-  border-radius: 0.25rem;
+  /* `--ui-radius` rather than `--radius-sm`: Nuxt UI declares the `--radius-*` scale in a
+   * `@theme default inline` block, so Tailwind emits those only when the COMPILED stylesheet
+   * graph references them. This scoped block is not part of that compile, and `--ui-radius` is
+   * an ordinary custom property on `:root`. `--radius-sm` is `var(--ui-radius)` (prose.css). */
+  border-radius: var(--ui-radius);
   background: var(--ui-bg-elevated);
   padding: 0.1rem 0.3rem;
   font-family: var(--font-mono);
@@ -65,7 +69,9 @@ const html = computed(() => renderMarkdown(props.text))
 .cf-prose :deep(pre) {
   margin: 0.6rem 0;
   overflow: auto;
-  border-radius: 0.5rem;
+  /* `--radius-lg` is `calc(var(--ui-radius) * 2)`; see the note on `code` above for why this
+   * block cannot name the scale variable. */
+  border-radius: calc(var(--ui-radius) * 2);
   background: var(--app-bg-canvas);
   padding: 0.75rem 0.9rem;
 }

package/app/components/common/SectionLabel.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// The one section "eyebrow": the small uppercase label that titles a group inside a panel, a
+// result window, an inspector section or a dropdown (issue #2248).
+//
+// The recipe:
+//
+//   text-2xs  font-semibold  uppercase  tracking-wide  text-muted
+//
+// Those five are the whole component and are NOT overridable. A caller that wants a different
+// size or colour wants a different thing, not a variant of this one.
+//
+// The colour is `text-muted`, not `text-dimmed`, for contrast: at this size `text-dimmed` is 2.63:1
+// on a light surface, under WCAG AA's 4.5:1 and under the 3:1 large-text floor. `text-muted` is
+// 4.76:1. Do not "correct" it to the fainter token.
+//
+// A label that merely SHARES the uppercase styling is not this component: a pill or chip carrying
+// a fill and a radius, an accent-coloured label signalling state or category, or a metadata row
+// (`board/nodes/BlockNode.vue`'s composition line) that states counts rather than titling the
+// block after it. Nor is a caption INSIDE a control: a switcher trigger's "Language" line above its
+// value, a slider's end labels. A caption names part of the control and titles nothing after it.
+// Those keep their own classes on a named step.
+//
+// What a caller DOES control:
+//   - `as`, the element. The default `div` suits a label that titles a region without being a
+//     document heading; pass `h3` / `h4` when the section is a real heading, `label` with an `:id`
+//     when it names a field. A collapsing section is a `UButton` around `as="span"`: the button
+//     owns the focus ring and the disabled state, which a raw `as="button"` would not have.
+//   - Layout, through the ordinary `class` attribute (`mb-2`, `px-2 pt-2`), which Vue merges onto
+//     the root. Spacing is the caller's business because it belongs to the surrounding block.
+//   - Every other attribute and listener, which fall through to the root element.
+withDefaults(defineProps<{ as?: string }>(), { as: 'div' })
+</script>
+
+<template>
+  <component :is="as" class="text-2xs font-semibold uppercase tracking-wide text-muted">
+    <slot />
+  </component>
+</template>