@cat-factory/app 0.308.0 → 0.310.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,20 +247,22 @@ 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
+          <UTextarea
             v-model="feedback"
-            rows="3"
+            :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"
+            size="sm"
+            class="w-full"
+            :ui="{ base: 'resize-y' }"
           />
-          <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 +308,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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
+import type { TableColumn } from '@nuxt/ui'
 import type { KaizenGrading } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
 
@@ -48,6 +49,16 @@ function statusLabel(g: KaizenGrading): string {
   if (g.status === 'failed') return t('kaizen.status.failed')
   return g.grade != null ? t('kaizen.gradeValue', { grade: g.grade }) : t('kaizen.status.graded')
 }
+
+// Column definitions rather than hand-written `<th>`s, so the header typography comes from the
+// table theme and is the same one every other table in the SPA renders.
+const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
+  { id: 'when', header: t('kaizen.history.col.when') },
+  { id: 'agent', header: t('kaizen.history.col.agent') },
+  { id: 'model', header: t('kaizen.history.col.model') },
+  { id: 'grade', header: t('kaizen.history.col.grade') },
+  { id: 'recommendations', header: t('kaizen.history.col.recommendations') },
+])
 </script>
 
 <template>
@@ -107,7 +118,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 +141,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,
@@ -155,59 +166,62 @@ function statusLabel(g: KaizenGrading): string {
               <UIcon name="i-lucide-history" class="h-4 w-4 text-app-hue-teal" />
               {{ t('kaizen.history.title') }}
             </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">
-                  <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>
-                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.model') }}</th>
-                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.grade') }}</th>
-                    <th class="px-3 py-2 font-medium">
-                      {{ t('kaizen.history.col.recommendations') }}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-default/70">
-                  <tr v-for="g in kaizen.history" :key="g.id" class="align-top">
-                    <td class="whitespace-nowrap px-3 py-2 text-dimmed">
-                      {{ when(g.createdAt) }}
-                    </td>
-                    <td class="px-3 py-2">
-                      <span class="flex items-center gap-1.5">
-                        <UIcon
-                          :name="meta(g.agentKind).icon"
-                          class="h-3.5 w-3.5"
-                          :style="{ color: meta(g.agentKind).color }"
-                        />
-                        <span class="text-default">{{ meta(g.agentKind).label }}</span>
-                        <span class="text-app-600">{{
-                          t('kaizen.promptVersion', { version: g.promptVersion })
-                        }}</span>
-                      </span>
-                    </td>
-                    <td class="max-w-[12rem] truncate px-3 py-2 text-muted" :title="g.model">
-                      {{ g.model }}
-                    </td>
-                    <td class="whitespace-nowrap px-3 py-2 font-semibold" :class="gradeTone(g)">
-                      {{ statusLabel(g) }}
-                    </td>
-                    <td class="px-3 py-2 text-muted">
-                      <ul v-if="g.recommendations.length" class="list-disc space-y-0.5 ps-4">
-                        <li v-for="(r, i) in g.recommendations" :key="i">{{ r }}</li>
-                      </ul>
-                      <span v-else-if="g.status === 'complete'" class="text-app-600">—</span>
-                      <span v-else-if="g.error" class="text-app-error-400/80">{{ g.error }}</span>
-                    </td>
-                  </tr>
-                  <tr v-if="kaizen.history.length === 0">
-                    <td colspan="5" class="px-3 py-6 text-center text-app-600">
-                      {{ t('kaizen.history.empty') }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            <UTable
+              :data="kaizen.history"
+              :columns="historyColumns"
+              :ui="{
+                root: 'overflow-hidden rounded-lg border border-default',
+                base: 'text-xs',
+                th: 'px-3 py-2',
+                td: 'px-3 py-2 text-xs whitespace-normal',
+                tr: 'align-top',
+              }"
+            >
+              <template #when-cell="{ row }">
+                <span class="whitespace-nowrap text-dimmed">{{
+                  when(row.original.createdAt)
+                }}</span>
+              </template>
+              <template #agent-cell="{ row }">
+                <span class="flex items-center gap-1.5">
+                  <UIcon
+                    :name="meta(row.original.agentKind).icon"
+                    class="h-3.5 w-3.5"
+                    :style="{ color: meta(row.original.agentKind).color }"
+                  />
+                  <span class="text-default">{{ meta(row.original.agentKind).label }}</span>
+                  <span class="text-app-600">{{
+                    t('kaizen.promptVersion', { version: row.original.promptVersion })
+                  }}</span>
+                </span>
+              </template>
+              <template #model-cell="{ row }">
+                <span class="block max-w-[12rem] truncate text-muted" :title="row.original.model">
+                  {{ row.original.model }}
+                </span>
+              </template>
+              <template #grade-cell="{ row }">
+                <span class="whitespace-nowrap font-semibold" :class="gradeTone(row.original)">
+                  {{ statusLabel(row.original) }}
+                </span>
+              </template>
+              <template #recommendations-cell="{ row }">
+                <div class="text-muted">
+                  <ul v-if="row.original.recommendations.length" class="list-disc space-y-0.5 ps-4">
+                    <li v-for="(r, i) in row.original.recommendations" :key="i">{{ r }}</li>
+                  </ul>
+                  <span v-else-if="row.original.status === 'complete'" class="text-app-600">
+                    &mdash;
+                  </span>
+                  <span v-else-if="row.original.error" class="text-app-error-400/80">
+                    {{ row.original.error }}
+                  </span>
+                </div>
+              </template>
+              <template #empty>
+                <span class="text-app-600">{{ t('kaizen.history.empty') }}</span>
+              </template>
+            </UTable>
           </section>
         </div>
       </div>

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"