@cat-factory/app 0.308.0 → 0.309.0

package/app/components/judge/JudgeResultView.vue

@@ -13,6 +13,7 @@ import type { JudgeFinding, JudgeStepState } from '~/types/execution'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -162,23 +163,23 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
           class="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-default bg-app-950/40 px-3 py-2.5"
           data-testid="judge-score"
         >
-          <span class="text-[13px] font-semibold text-app-100">
+          <span class="text-sm font-semibold text-app-100">
             {{ score === null ? t('judge.notScored') : n(score, 'percent') }}
           </span>
           <span
             v-if="threshold !== null"
-            class="text-[12px] text-muted"
+            class="text-xs text-muted"
             :title="t('judge.thresholdHint')"
           >
             {{ t('judge.threshold', { threshold: n(threshold, 'percent') }) }}
           </span>
-          <span v-if="judge.disposition" class="text-[12px] text-muted">
+          <span v-if="judge.disposition" class="text-xs text-muted">
             · {{ DISPOSITION_LABELS[judge.disposition] }}
           </span>
-          <span v-if="judge.rubricOverridden" class="text-[11px] text-app-secondary-300">
+          <span v-if="judge.rubricOverridden" class="text-2xs text-app-secondary-300">
             · {{ t('judge.rubricOverridden') }}
           </span>
-          <span v-if="(judge.maxBounces ?? 0) > 0" class="text-[11px] text-dimmed">
+          <span v-if="(judge.maxBounces ?? 0) > 0" class="text-2xs text-dimmed">
             ·
             {{ t('judge.reworkRounds', { spent: judge.bounces ?? 0, budget: judge.maxBounces }) }}
           </span>
@@ -189,7 +190,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
              name doesn't, and being overridden by the task's own choice is the normal outcome. -->
         <p
           v-if="judge.modelPin?.status === 'unavailable'"
-          class="mt-2 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 px-3 py-2 text-[12px] leading-relaxed text-app-warning-200"
+          class="mt-2 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 px-3 py-2 text-xs leading-relaxed text-app-warning-200"
           data-testid="judge-model-pin"
         >
           {{ t('judge.modelPinUnavailable', { model: judge.modelPin.requested }) }}
@@ -199,7 +200,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
              like a clean pass. -->
         <p
           v-if="judge.note"
-          class="mt-2 rounded-md border border-default bg-app-950/40 px-3 py-2 text-[12px] leading-relaxed text-muted"
+          class="mt-2 rounded-md border border-default bg-app-950/40 px-3 py-2 text-xs leading-relaxed text-muted"
         >
           {{ judge.note }}
         </p>
@@ -210,14 +211,14 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
           <CopyButton :text="verdict.summary" class="absolute end-1 top-1" />
           <MarkdownProse
             :text="verdict.summary"
-            class="pe-8 text-[13px] leading-relaxed text-default"
+            class="pe-8 text-sm leading-relaxed text-default"
           />
         </div>
 
         <section v-if="findings.length" class="mt-4">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('judge.findingsHeading') }}
-          </h3>
+          </SectionLabel>
           <ul class="flex flex-col gap-2">
             <li
               v-for="(finding, i) in findings"
@@ -227,20 +228,18 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
             >
               <div class="flex flex-wrap items-center gap-2">
                 <span
-                  class="rounded border px-1.5 py-0.5 text-[10px] uppercase tracking-wide"
+                  class="rounded-sm border px-1.5 py-0.5 text-3xs uppercase tracking-wide"
                   :class="SEVERITY_CLASSES[finding.severity]"
                 >
                   {{ SEVERITY_LABELS[finding.severity] }}
                 </span>
-                <span class="text-[13px] font-medium text-app-100">{{ finding.title }}</span>
-                <code v-if="finding.where" class="text-[11px] text-dimmed">{{
-                  finding.where
-                }}</code>
+                <span class="text-sm font-medium text-app-100">{{ finding.title }}</span>
+                <code v-if="finding.where" class="text-2xs text-dimmed">{{ finding.where }}</code>
               </div>
               <MarkdownProse
                 v-if="finding.detail"
                 :text="finding.detail"
-                class="mt-1 text-[12px] leading-relaxed text-muted"
+                class="mt-1 text-xs leading-relaxed text-muted"
               />
             </li>
           </ul>
@@ -248,10 +247,10 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
 
         <!-- The decision. Only shown while the run is actually parked on this verdict. -->
         <section v-if="awaiting" class="mt-5" data-testid="judge-decision">
-          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-1.5">
             {{ t('judge.decisionHeading') }}
-          </h3>
-          <p class="mb-2 text-[11px] leading-relaxed text-dimmed">
+          </SectionLabel>
+          <p class="mb-2 text-2xs leading-relaxed text-dimmed">
             {{ t('judge.decisionDescription') }}
           </p>
           <textarea
@@ -259,9 +258,9 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
             rows="3"
             :disabled="busy"
             :placeholder="t('judge.feedbackPlaceholder')"
-            class="w-full resize-y rounded-md border border-default bg-app-950/60 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-warning-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
+            class="w-full resize-y rounded-md border border-default bg-app-950/60 px-3 py-2 text-sm text-default placeholder:text-app-600 focus:border-app-warning-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
           />
-          <p v-if="judgeStore.error" class="mt-2 text-[12px] text-app-error-300">
+          <p v-if="judgeStore.error" class="mt-2 text-xs text-app-error-300">
             {{ judgeStore.error }}
           </p>
           <div class="mt-2 flex flex-wrap justify-end gap-2">
@@ -307,21 +306,21 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
 
         <!-- The round history: a looping judge must not be a black box (the gate-attempt rule). -->
         <section v-if="rounds.length > 1" class="mt-5">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('judge.roundsHeading') }}
-          </h3>
+          </SectionLabel>
           <ul class="flex flex-col gap-1.5">
             <li
               v-for="round in rounds"
               :key="round.round"
-              class="flex flex-wrap items-center gap-2 rounded-md border border-default bg-app-950/40 px-3 py-1.5 text-[12px] text-toned"
+              class="flex flex-wrap items-center gap-2 rounded-md border border-default bg-app-950/40 px-3 py-1.5 text-xs text-toned"
               data-testid="judge-round"
               :data-round-disposition="round.disposition"
             >
               <span class="text-dimmed">{{ t('judge.round', { round: round.round }) }}</span>
               <span class="font-medium text-app-100">{{ n(round.verdict.score, 'percent') }}</span>
               <span class="text-muted">{{ DISPOSITION_LABELS[round.disposition] }}</span>
-              <code v-if="round.model" class="text-[11px] text-dimmed">{{ round.model }}</code>
+              <code v-if="round.model" class="text-2xs text-dimmed">{{ round.model }}</code>
             </li>
           </ul>
         </section>

package/app/components/kaizen/KaizenPanel.vue

@@ -107,7 +107,7 @@ function statusLabel(g: KaizenGrading): string {
                 t('kaizen.verifiedCombos.count', { count: kaizen.verifiedCount })
               }}</span>
             </h2>
-            <p class="mb-3 text-[11px] text-dimmed">
+            <p class="mb-3 text-2xs text-dimmed">
               {{ t('kaizen.verifiedCombos.hint') }}
             </p>
             <ul class="space-y-2">
@@ -130,11 +130,11 @@ function statusLabel(g: KaizenGrading): string {
                     name="i-lucide-badge-check"
                     class="ms-auto h-3.5 w-3.5 text-app-success-400"
                   />
-                  <span v-else class="ms-auto text-[11px] text-dimmed">
+                  <span v-else class="ms-auto text-2xs text-dimmed">
                     {{ t('kaizen.verifiedCombos.progress', { count: c.consecutiveHighGrades }) }}
                   </span>
                 </div>
-                <div class="mt-1 truncate text-[11px] text-dimmed" :title="c.model">
+                <div class="mt-1 truncate text-2xs text-dimmed" :title="c.model">
                   {{
                     t('kaizen.verifiedCombos.modelPrompt', {
                       model: c.model,
@@ -157,7 +157,7 @@ function statusLabel(g: KaizenGrading): string {
             </h2>
             <div class="overflow-hidden rounded-lg border border-default">
               <table class="w-full text-start text-xs">
-                <thead class="bg-default/60 text-[11px] uppercase tracking-wide text-dimmed">
+                <thead class="bg-default/60 text-2xs uppercase tracking-wide text-dimmed">
                   <tr>
                     <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.when') }}</th>
                     <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.agent') }}</th>

package/app/components/kaizen/KaizenStepStatus.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Per-step Kaizen grading status, shown inside the run window (NOT on the board). Reads
 // the grading for this run's step from the kaizen store, lazily loading the run's
@@ -68,29 +69,29 @@ const tone = computed(() => {
       </span>
     </div>
 
-    <p v-if="grading.status === 'scheduled'" class="mt-2 text-[11px] text-dimmed">
+    <p v-if="grading.status === 'scheduled'" class="mt-2 text-2xs text-dimmed">
       {{ t('kaizen.scheduledHint') }}
     </p>
 
     <template v-else-if="grading.status === 'complete'">
       <p v-if="grading.summary" class="mt-2 text-xs text-toned">{{ grading.summary }}</p>
       <div v-if="grading.recommendations.length" class="mt-2">
-        <p class="text-[11px] font-medium uppercase tracking-wide text-dimmed">
+        <SectionLabel as="p">
           {{ t('kaizen.recommendations') }}
-        </p>
+        </SectionLabel>
         <ul class="mt-1 list-disc space-y-0.5 ps-4 text-xs text-toned">
           <li v-for="(r, i) in grading.recommendations" :key="i">{{ r }}</li>
         </ul>
       </div>
-      <p v-else class="mt-2 text-[11px] text-app-success-400/80">
+      <p v-else class="mt-2 text-2xs text-app-success-400/80">
         {{ t('kaizen.noImprovements') }}
       </p>
-      <p v-if="grading.graderModel" class="mt-2 text-[10px] text-app-600">
+      <p v-if="grading.graderModel" class="mt-2 text-3xs text-app-600">
         {{ t('kaizen.gradedBy', { model: grading.graderModel }) }}
       </p>
     </template>
 
-    <p v-else-if="grading.status === 'failed'" class="mt-2 text-[11px] text-app-error-400/80">
+    <p v-else-if="grading.status === 'failed'" class="mt-2 text-2xs text-app-error-400/80">
       {{ grading.error ?? t('kaizen.failedFallback') }}
     </p>
   </section>

package/app/components/layout/AccountAuditLog.vue

@@ -117,7 +117,7 @@ function timestamp(at: number): string {
       <li
         v-for="event in events"
         :key="event.id"
-        class="rounded border border-default bg-default/40 px-3 py-2"
+        class="rounded-sm border border-default bg-default/40 px-3 py-2"
       >
         <div class="flex flex-wrap items-baseline gap-x-2">
           <span class="font-medium text-highlighted">{{ actor(event) }}</span>

package/app/components/layout/AccountDeploymentSettings.vue

@@ -435,7 +435,7 @@ async function clearWeb() {
   <div v-if="store.available !== false" class="space-y-6">
     <div>
       <h3 class="mb-1 font-semibold text-highlighted">{{ t('layout.accountDeployment.title') }}</h3>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('layout.accountDeployment.intro') }}
       </p>
     </div>
@@ -458,7 +458,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('layout.accountDeployment.slack.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -519,7 +519,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('layout.accountDeployment.linear.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -580,7 +580,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('layout.accountDeployment.figma.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -637,7 +637,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('layout.accountDeployment.web.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -706,16 +706,16 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('layout.accountDeployment.contentStorage.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
         <USelect v-model="csBackend" :items="backendItems" value-key="value" size="sm" />
       </div>
-      <p v-if="selectedCustomStore?.summary" class="text-[11px] text-muted">
+      <p v-if="selectedCustomStore?.summary" class="text-2xs text-muted">
         {{ selectedCustomStore.summary }}
       </p>
-      <p v-if="unregisteredStoreId" class="text-[11px] text-app-warning-400">
+      <p v-if="unregisteredStoreId" class="text-2xs text-app-warning-400">
         {{
           t('layout.accountDeployment.contentStorage.unregisteredStoreWarning', {
             store: unregisteredStoreId,
@@ -762,7 +762,7 @@ async function clearWeb() {
           size="sm"
         />
         <div class="flex items-center gap-2">
-          <span class="text-[11px] text-muted">
+          <span class="text-2xs text-muted">
             {{ t('layout.accountDeployment.contentStorage.accessKeys') }}
           </span>
           <UBadge
@@ -789,7 +789,7 @@ async function clearWeb() {
             size="sm"
           />
         </div>
-        <p class="text-[11px] text-muted">
+        <p class="text-2xs text-muted">
           {{ t('layout.accountDeployment.contentStorage.keysHint') }}
         </p>
       </template>

package/app/components/layout/AccountFailureKindRules.vue

@@ -144,10 +144,10 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
 
 <template>
   <div class="space-y-2" data-testid="platform-alert-failure-kinds">
-    <label class="text-[11px] font-medium text-toned">
+    <label class="text-2xs font-medium text-toned">
       {{ t('settings.platformAlerts.failureKinds.label') }}
     </label>
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{ t('settings.platformAlerts.failureKinds.description') }}
     </p>
 
@@ -159,7 +159,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
         data-testid="platform-alert-failure-kinds-override"
         @update:model-value="setOverriding(!!$event)"
       />
-      <p class="ps-6 text-[11px] text-muted">
+      <p class="ps-6 text-2xs text-muted">
         {{ t('settings.platformAlerts.failureKinds.overrideHint') }}
       </p>
     </div>
@@ -167,7 +167,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
     <template v-if="overriding">
       <p
         v-if="rules.length === 0"
-        class="text-[11px] text-dimmed"
+        class="text-2xs text-dimmed"
         data-testid="platform-alert-failure-kinds-empty"
       >
         {{ t('settings.platformAlerts.failureKinds.empty') }}
@@ -180,7 +180,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
         :data-testid="`platform-alert-failure-kind-row-${index}`"
       >
         <div class="space-y-1">
-          <label class="block text-[11px] text-toned">
+          <label class="block text-2xs text-toned">
             {{ t('settings.platformAlerts.failureKinds.kindLabel') }}
           </label>
           <USelect
@@ -193,7 +193,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
           />
         </div>
         <div class="space-y-1">
-          <label class="block text-[11px] text-toned">
+          <label class="block text-2xs text-toned">
             {{ t('settings.platformAlerts.failureKinds.shareLabel') }}
           </label>
           <UInput
@@ -204,12 +204,12 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
             :data-testid="`platform-alert-failure-share-${index}`"
             @update:model-value="setShare(index, String($event))"
           />
-          <p v-if="index === 0" class="text-[11px] text-dimmed">
+          <p v-if="index === 0" class="text-2xs text-dimmed">
             {{ t('settings.platformAlerts.failureKinds.shareHint') }}
           </p>
         </div>
         <div class="space-y-1">
-          <label class="block text-[11px] text-toned">
+          <label class="block text-2xs text-toned">
             {{ t('settings.platformAlerts.failureKinds.minCountLabel') }}
           </label>
           <UInput
@@ -235,7 +235,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
 
       <p
         v-if="faults.tooMany"
-        class="text-[11px] text-app-warning-300"
+        class="text-2xs text-app-warning-300"
         data-testid="platform-alert-failure-kinds-too-many"
       >
         {{
@@ -244,14 +244,14 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
       </p>
       <p
         v-else-if="duplicateKinds.size > 0"
-        class="text-[11px] text-app-warning-300"
+        class="text-2xs text-app-warning-300"
         data-testid="platform-alert-failure-kinds-duplicate"
       >
         {{ t('settings.platformAlerts.failureKinds.duplicateKind') }}
       </p>
       <p
         v-else-if="faults.rows.length > 0"
-        class="text-[11px] text-app-warning-300"
+        class="text-2xs text-app-warning-300"
         data-testid="platform-alert-failure-kinds-invalid"
       >
         {{
@@ -272,12 +272,12 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
       </UButton>
       <p
         v-if="nextFreeKind === undefined"
-        class="text-[11px] text-dimmed"
+        class="text-2xs text-dimmed"
         data-testid="platform-alert-failure-kinds-all-covered"
       >
         {{ t('settings.platformAlerts.failureKinds.allKindsCovered') }}
       </p>
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{ t('settings.platformAlerts.failureKinds.minCountHint') }}
       </p>
     </template>

package/app/components/layout/AccountFoundationalSettings.vue

@@ -12,7 +12,7 @@ const { t } = useI18n()
 <template>
   <div class="space-y-6 text-sm">
     <section>
-      <p class="mb-3 text-[11px] text-muted">
+      <p class="mb-3 text-2xs text-muted">
         {{ t('layout.accountFoundational.intro') }}
       </p>
       <FoundationalServiceManager

package/app/components/layout/AccountFragmentSettings.vue

@@ -22,7 +22,7 @@ const viaWorkspaceId = computed(() => {
 <template>
   <div class="space-y-6 text-sm">
     <section>
-      <p class="mb-3 text-[11px] text-muted">
+      <p class="mb-3 text-2xs text-muted">
         {{ t('layout.accountFragments.intro') }}
       </p>
       <FragmentLibraryManager

package/app/components/layout/AccountModelPolicySettings.vue

@@ -153,19 +153,19 @@ async function save() {
   >
     <div>
       <h4 class="text-sm font-semibold text-default">{{ t('settings.modelPolicy.title') }}</h4>
-      <p class="text-[11px] text-muted">{{ t('settings.modelPolicy.description') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.modelPolicy.description') }}</p>
     </div>
 
     <!-- Region + apply-preset templates -->
     <div class="space-y-2">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{ t('settings.modelPolicy.regionLabel') }}
       </label>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
         <USelect v-model="region" :items="regionItems" value-key="value" size="sm" />
       </div>
       <div v-if="regionPresets.length" class="flex flex-wrap items-center gap-2">
-        <span class="text-[11px] text-muted">{{ t('settings.modelPolicy.applyPreset') }}</span>
+        <span class="text-2xs text-muted">{{ t('settings.modelPolicy.applyPreset') }}</span>
         <UButton
           v-for="preset in regionPresets"
           :key="preset.id"
@@ -183,7 +183,7 @@ async function save() {
 
     <!-- Mode -->
     <div class="space-y-2">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{ t('settings.modelPolicy.modeLabel') }}
       </label>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -193,7 +193,7 @@ async function save() {
 
     <!-- Families -->
     <div v-if="mode !== 'off'" class="space-y-2">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{
           mode === 'blocklist'
             ? t('settings.modelPolicy.familiesBlockLabel')
@@ -214,10 +214,10 @@ async function save() {
 
     <!-- Trusted (residency-guaranteed) routes -->
     <div v-if="mode !== 'off'" class="space-y-2">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{ t('settings.modelPolicy.trustedLabel') }}
       </label>
-      <p class="text-[11px] text-muted">{{ t('settings.modelPolicy.trustedHint') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.modelPolicy.trustedHint') }}</p>
       <div class="grid grid-cols-2 gap-1 sm:grid-cols-4">
         <UCheckbox
           v-for="provider in TRUSTED_PROVIDERS"

package/app/components/layout/AccountPlatformAlertSettings.vue

@@ -267,7 +267,7 @@ const hasOverrides = computed(
       <h4 class="text-sm font-semibold text-default">
         {{ t('settings.platformAlerts.title') }}
       </h4>
-      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.description') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.platformAlerts.description') }}</p>
     </div>
 
     <!--
@@ -282,11 +282,11 @@ const hasOverrides = computed(
         :label="t('settings.platformAlerts.muteLabel')"
         data-testid="platform-alerts-mute"
       />
-      <p class="ps-6 text-[11px] text-muted">{{ t('settings.platformAlerts.muteHint') }}</p>
+      <p class="ps-6 text-2xs text-muted">{{ t('settings.platformAlerts.muteHint') }}</p>
     </div>
 
     <div class="space-y-1">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{ t('settings.platformAlerts.windowLabel') }}
       </label>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -298,17 +298,17 @@ const hasOverrides = computed(
           data-testid="platform-alerts-window"
         />
       </div>
-      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.windowHint') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.platformAlerts.windowHint') }}</p>
     </div>
 
     <div class="space-y-2">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{ t('settings.platformAlerts.thresholdsLabel') }}
       </label>
-      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.inheritHint') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.platformAlerts.inheritHint') }}</p>
       <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
         <div v-for="th in THRESHOLDS" :key="th.field" class="space-y-1">
-          <label class="block text-[11px] text-toned" :for="`platform-alert-${th.field}`">
+          <label class="block text-2xs text-toned" :for="`platform-alert-${th.field}`">
             {{ thresholdLabels[th.field] }}
           </label>
           <UInput
@@ -320,7 +320,7 @@ const hasOverrides = computed(
             :placeholder="t('settings.platformAlerts.inheritPlaceholder')"
             :data-testid="`platform-alert-${th.field}`"
           />
-          <p class="text-[11px] leading-snug text-dimmed">{{ thresholdHints[th.field] }}</p>
+          <p class="text-2xs leading-snug text-dimmed">{{ thresholdHints[th.field] }}</p>
         </div>
       </div>
     </div>

package/app/components/layout/AccountRiskPolicySettings.vue

@@ -99,9 +99,9 @@ async function create(input: CreateRiskPolicyInput) {
 
 <template>
   <div class="space-y-4 text-sm" data-testid="account-risk-policy-panel">
-    <p class="text-[11px] text-muted">{{ t('layout.accountRiskPolicies.intro') }}</p>
+    <p class="text-2xs text-muted">{{ t('layout.accountRiskPolicies.intro') }}</p>
 
-    <p v-if="!store.loading && policies.length === 0" class="text-[11px] text-dimmed">
+    <p v-if="!store.loading && policies.length === 0" class="text-2xs text-dimmed">
       {{ t('layout.accountRiskPolicies.empty') }}
     </p>
 

package/app/components/layout/AccountRunCredentialSettings.vue

@@ -62,7 +62,7 @@ async function save() {
     <h3 class="text-sm font-semibold text-default">
       {{ t('settings.runCredentialPolicy.heading') }}
     </h3>
-    <p class="text-[11px] text-muted">{{ t('settings.runCredentialPolicy.body') }}</p>
+    <p class="text-2xs text-muted">{{ t('settings.runCredentialPolicy.body') }}</p>
 
     <label class="flex items-center gap-2">
       <USwitch v-model="forbid" size="sm" data-testid="account-forbid-initiator-pat" />
@@ -71,10 +71,10 @@ async function save() {
 
     <!-- What the choice actually costs, stated at the point of choosing rather than discovered
          later: attribution is a real feature, and turning this on is what trades it away. -->
-    <p v-if="forbid" class="text-[11px] text-app-warning-300">
+    <p v-if="forbid" class="text-2xs text-app-warning-300">
       {{ t('settings.runCredentialPolicy.onHint') }}
     </p>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ t('settings.runCredentialPolicy.offHint') }}
     </p>
 

package/app/components/layout/AccountSkillSettings.vue

@@ -12,7 +12,7 @@ const { t } = useI18n()
 <template>
   <div class="space-y-6 text-sm">
     <section>
-      <p class="mb-3 text-[11px] text-muted">
+      <p class="mb-3 text-2xs text-muted">
         {{ t('layout.accountSkills.intro') }}
       </p>
       <SkillLibraryManager :account-id="props.accountId" />

package/app/components/layout/AccountTeamSettings.vue

@@ -240,6 +240,9 @@ async function disconnectEmail() {
             class="w-44"
             @update:model-value="(r: AccountRole[]) => updateMemberRoles(m.userId, r)"
           />
+          <!-- The roles a member HOLDS, read-only where the select would be: the row's data, not
+               a heading over it, so it keeps its own classes rather than adopting the eyebrow
+               recipe (`common/SectionLabel.vue`). -->
           <span v-else class="text-xs uppercase tracking-wide text-muted">
             {{ m.roles.join(', ') }}
           </span>
@@ -290,6 +293,7 @@ async function disconnectEmail() {
         >
           <span class="truncate">{{ inv.email }}</span>
           <span class="flex items-center gap-2 text-xs">
+            <!-- The invitation's STATE, which is what this row is about. Not an eyebrow. -->
             <span class="uppercase tracking-wide text-muted">
               {{ invitationStatusLabel(inv.status) }}
             </span>

package/app/components/layout/AiProvidersBanner.vue

@@ -85,7 +85,7 @@ const show = computed(() => showSetup.value || showPreset.value)
                 @click="ui.dismissAiPresetMismatch()"
               />
             </div>
-            <p class="mt-1 text-[13px] text-app-warning-200/90">
+            <p class="mt-1 text-sm text-app-warning-200/90">
               {{ t('layout.aiProvidersBanner.preset.body') }}
             </p>
             <div class="mt-3">

package/app/components/layout/AppearanceSwitcher.vue

@@ -96,7 +96,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
     >
       <UIcon :name="MODE_ICONS[preference]" 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('appearance.switcher') }}
         </div>
         <div class="truncate text-xs font-medium text-highlighted">{{ summary }}</div>