@cat-factory/app 0.307.1 → 0.309.0

package/app/components/environments/steps/EnvReviewStep.vue

@@ -14,6 +14,7 @@ import type {
 } from '@cat-factory/contracts'
 import JourneyStepNav from '~/components/environments/steps/JourneyStepNav.vue'
 import { useEnvironmentWizardTarget } from '~/modular/journeys/environmentSetup.frame'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   input: { frameId: string | null }
@@ -114,7 +115,7 @@ const canLeaveReview = computed(
     <div class="flex items-center justify-between gap-2">
       <div class="min-w-0">
         <p class="text-sm font-medium text-default">{{ store.targetFrame?.title }}</p>
-        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.review.detectHint') }}</p>
+        <p class="text-2xs text-dimmed">{{ t('environmentWizard.review.detectHint') }}</p>
       </div>
       <UButton
         size="xs"
@@ -130,12 +131,12 @@ const canLeaveReview = computed(
       </UButton>
     </div>
 
-    <p v-if="!store.hasRepo" class="text-[12px] text-app-warning-300/80">
+    <p v-if="!store.hasRepo" class="text-xs text-app-warning-300/80">
       {{ t('environmentWizard.review.noRepo') }}
     </p>
     <p
       v-else-if="store.detectError"
-      class="text-[12px] text-app-error-300/80"
+      class="text-xs text-app-error-300/80"
       data-testid="env-setup-detect-error"
     >
       {{ t('environmentWizard.review.detectError') }}
@@ -149,7 +150,7 @@ const canLeaveReview = computed(
       >
         <p
           v-if="repoCliHint"
-          class="mb-2 flex items-start gap-1.5 text-[11px] text-primary"
+          class="mb-2 flex items-start gap-1.5 text-2xs text-primary"
           data-testid="env-setup-cli-nudge"
         >
           <UIcon name="i-lucide-lightbulb" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
@@ -157,10 +158,10 @@ const canLeaveReview = computed(
         </p>
         <div class="flex items-center justify-between gap-2">
           <div class="min-w-0">
-            <p class="text-[12px] font-medium text-toned">
+            <p class="text-xs font-medium text-toned">
               {{ t('environmentWizard.analysis.title') }}
             </p>
-            <p class="text-[11px] text-dimmed">{{ t('environmentWizard.analysis.hint') }}</p>
+            <p class="text-2xs text-dimmed">{{ t('environmentWizard.analysis.hint') }}</p>
           </div>
           <UButton
             size="xs"
@@ -177,14 +178,14 @@ const canLeaveReview = computed(
         </div>
         <p
           v-if="!store.canAnalyze"
-          class="mt-2 text-[11px] text-dimmed"
+          class="mt-2 text-2xs text-dimmed"
           data-testid="env-setup-analysis-unavailable"
         >
           {{ t('environmentWizard.analysis.unavailable') }}
         </p>
         <p
           v-else-if="store.analysisStatus === 'failed'"
-          class="mt-2 text-[11px] text-app-error-300/80"
+          class="mt-2 text-2xs text-app-error-300/80"
         >
           {{ t('environmentWizard.analysis.failed') }}
         </p>
@@ -193,7 +194,7 @@ const canLeaveReview = computed(
           class="mt-2 space-y-2"
           data-testid="env-setup-analysis-ready"
         >
-          <p v-if="store.merged?.summary" class="text-[11px] leading-snug text-muted">
+          <p v-if="store.merged?.summary" class="text-2xs leading-snug text-muted">
             {{ store.merged.summary }}
           </p>
           <UButton
@@ -211,9 +212,9 @@ const canLeaveReview = computed(
 
       <!-- per-field provenance -->
       <div v-if="store.merged?.fields.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.provenanceTitle') }}
-        </p>
+        </SectionLabel>
         <div class="flex flex-wrap gap-1.5">
           <UBadge
             v-for="f in store.merged.fields"
@@ -261,9 +262,9 @@ const canLeaveReview = computed(
 
       <!-- compose file layering -->
       <div v-if="composeFileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.composeFiles') }}
-        </p>
+        </SectionLabel>
         <div class="flex flex-wrap gap-1.5">
           <UButton
             v-for="c in composeFileCandidates"
@@ -275,16 +276,16 @@ const canLeaveReview = computed(
             :data-testid="`env-setup-file-${c.name}`"
             @click="store.toggleComposeFile(c.path)"
           >
-            {{ c.name }}<span v-if="c.os" class="ms-1 text-[9px] opacity-70">{{ c.os }}</span>
+            {{ c.name }}<span v-if="c.os" class="ms-1 text-3xs opacity-70">{{ c.os }}</span>
           </UButton>
         </div>
       </div>
 
       <!-- compose profiles -->
       <div v-if="profileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.profiles') }}
-        </p>
+        </SectionLabel>
         <div class="flex flex-wrap gap-1.5">
           <UButton
             v-for="c in profileCandidates"
@@ -303,16 +304,16 @@ const canLeaveReview = computed(
 
       <!-- seed dumps -->
       <div v-if="seedDumpCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.seedDumps') }}
-        </p>
+        </SectionLabel>
         <div class="space-y-1">
           <div
             v-for="c in seedDumpCandidates"
             :key="c.path"
-            class="flex items-center justify-between gap-2 rounded border border-default bg-default/40 px-2 py-1"
+            class="flex items-center justify-between gap-2 rounded-sm border border-default bg-default/40 px-2 py-1"
           >
-            <span class="truncate text-[11px] text-toned">{{ c.path }}</span>
+            <span class="truncate text-2xs text-toned">{{ c.path }}</span>
             <UButton
               size="xs"
               :color="seedAdded(c.path) ? 'success' : 'neutral'"
@@ -348,12 +349,12 @@ const canLeaveReview = computed(
           <UTextarea
             v-model="rawText"
             :rows="10"
-            class="w-full font-mono text-[11px]"
+            class="w-full font-mono text-2xs"
             data-testid="env-setup-raw-text"
           />
           <p
             v-if="rawError"
-            class="text-[11px] text-app-error-300/80"
+            class="text-2xs text-app-error-300/80"
             data-testid="env-setup-raw-error"
           >
             {{ rawError }}

package/app/components/environments/steps/EnvSaveStep.vue

@@ -31,7 +31,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       <UInput v-model="store.handlerLabel" class="w-full" data-testid="env-setup-handler-label" />
     </UFormField>
 
-    <div class="rounded-md border border-default bg-default/40 p-3 text-[12px] text-toned">
+    <div class="rounded-md border border-default bg-default/40 p-3 text-xs text-toned">
       <p>
         {{
           t('environmentWizard.save.summary', {
@@ -44,7 +44,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
 
     <p
       v-if="store.saveError"
-      class="text-[12px] text-app-error-300/80"
+      class="text-xs text-app-error-300/80"
       data-testid="env-setup-save-error"
     >
       {{ store.saveError }}
@@ -66,7 +66,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
     <!-- saved: confirmation + optional trial provision -->
     <template v-else>
       <div
-        class="flex items-center gap-2 rounded-md border border-app-success-800/50 bg-app-success-950/30 p-2 text-[12px] text-app-success-200"
+        class="flex items-center gap-2 rounded-md border border-app-success-800/50 bg-app-success-950/30 p-2 text-xs text-app-success-200"
         data-testid="env-setup-saved"
       >
         <UIcon name="i-lucide-check-circle" class="h-4 w-4" />
@@ -74,7 +74,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       </div>
 
       <div class="flex items-center justify-between gap-2">
-        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.trial.hint') }}</p>
+        <p class="text-2xs text-dimmed">{{ t('environmentWizard.trial.hint') }}</p>
         <UButton
           size="xs"
           variant="soft"
@@ -88,7 +88,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
           {{ t('environmentWizard.trial.run') }}
         </UButton>
       </div>
-      <p v-if="store.trialError" class="text-[11px] text-app-error-300/80">
+      <p v-if="store.trialError" class="text-2xs text-app-error-300/80">
         {{ store.trialError }}
       </p>
       <ProvisioningLogsDrawer v-if="store.trialStarted" subsystem="environment" />

package/app/components/focus/BlockFocusView.vue

@@ -6,6 +6,7 @@ import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
 import IconButton from '~/components/common/IconButton.vue'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -203,9 +204,9 @@ function openApprovalFor(approvalId: string) {
       >
         <div class="mb-4 flex items-center gap-2">
           <UIcon name="i-lucide-workflow" class="h-4 w-4 text-dimmed" />
-          <h2 class="text-sm font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h2">
             {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
-          </h2>
+          </SectionLabel>
         </div>
 
         <PipelineProgress
@@ -226,30 +227,30 @@ function openApprovalFor(approvalId: string) {
       <!-- side: details -->
       <aside class="space-y-4 overflow-auto rounded-2xl border border-default bg-default/60 p-5">
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel class="mb-1">
             {{ t('focus.description') }}
-          </div>
+          </SectionLabel>
           <p class="text-sm text-toned">{{ block.description }}</p>
         </div>
         <div v-if="instance">
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel class="mb-1">
             {{ t('focus.overallProgress') }}
-          </div>
+          </SectionLabel>
           <UProgress :model-value="Math.round(block.progress * 100)" />
-          <div class="mt-1 text-[11px] text-muted">
+          <div class="mt-1 text-2xs text-muted">
             {{ n(block.progress, 'percent') }}
           </div>
         </div>
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel class="mb-1">
             {{ t('focus.dependencies') }}
-          </div>
+          </SectionLabel>
           <div v-if="deps.length" class="flex flex-wrap gap-1">
             <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
               {{ d.title }}
             </UBadge>
           </div>
-          <div v-else class="text-[11px] text-dimmed">{{ t('focus.noDependencies') }}</div>
+          <div v-else class="text-2xs text-dimmed">{{ t('focus.noDependencies') }}</div>
         </div>
       </aside>
     </div>

package/app/components/followUp/FollowUpWindow.vue

@@ -162,7 +162,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
       >
         <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('followUp.empty.title') }}</p>
-        <p class="max-w-sm text-[11px] text-dimmed">
+        <p class="max-w-sm text-2xs text-dimmed">
           {{ t('followUp.empty.hint') }}
         </p>
       </div>
@@ -170,7 +170,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
       <div v-else class="space-y-3">
         <p
           v-if="followUps.error"
-          class="rounded-md bg-app-error-500/10 px-3 py-2 text-[12px] text-app-error-300"
+          class="rounded-md bg-app-error-500/10 px-3 py-2 text-xs text-app-error-300"
         >
           {{ followUps.error }}
         </p>
@@ -189,21 +189,21 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
             />
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
-                <h3 class="min-w-0 flex-1 truncate text-[13px] font-medium text-app-100">
+                <h3 class="min-w-0 flex-1 truncate text-sm font-medium text-app-100">
                   {{ item.title }}
                 </h3>
                 <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
                   {{ t(STATUS_LABEL_KEYS[item.status]) }}
                 </UBadge>
               </div>
-              <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-toned">
+              <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-xs text-toned">
                 {{ item.detail }}
               </p>
-              <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-muted">
+              <p v-if="item.suggestedAction" class="mt-1 text-2xs text-muted">
                 <span class="text-dimmed">{{ t('followUp.suggested') }}</span>
                 {{ item.suggestedAction }}
               </p>
-              <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
+              <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-2xs">
                 <a
                   :href="item.ticketUrl"
                   target="_blank"
@@ -213,7 +213,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
                   {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
                 </a>
               </p>
-              <p v-if="hasRecordedAnswer(item)" class="mt-1 text-[11px] text-toned">
+              <p v-if="hasRecordedAnswer(item)" class="mt-1 text-2xs text-toned">
                 <span class="text-dimmed">
                   {{
                     item.status === 'closed' ? t('followUp.yourRuling') : t('followUp.yourAnswer')
@@ -223,7 +223,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
               </p>
               <!-- A decision that was made and then thrown away when the budget ran out. It must
                    not read like one the Coder acted on. -->
-              <p v-if="item.sendBackDropped" class="mt-1 text-[11px] text-app-warning-300">
+              <p v-if="item.sendBackDropped" class="mt-1 text-2xs text-app-warning-300">
                 {{ t('followUp.sendBackDropped') }}
               </p>
 
@@ -235,7 +235,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
                     v-model="drafts[item.id]"
                     rows="2"
                     :placeholder="t('followUp.answerPlaceholder')"
-                    class="w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-info-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-info-500/60"
+                    class="w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-info-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-info-500/60"
                   />
                   <!-- Wraps, like the follow-up row below: three buttons whose labels are two
                        words each in English are one long line in most of the other locales, and
@@ -323,7 +323,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
     </div>
 
     <footer
-      class="flex items-center justify-between border-t border-default px-5 py-2.5 text-[11px] text-muted"
+      class="flex items-center justify-between border-t border-default px-5 py-2.5 text-2xs text-muted"
     >
       <span>
         {{

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -166,7 +166,7 @@ const { requestClose } = useUnsavedGuard({
       >
         <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
         <p class="text-sm">{{ t('forkDecision.proposing.title') }}</p>
-        <p class="max-w-sm text-[11px] text-dimmed">
+        <p class="max-w-sm text-2xs text-dimmed">
           {{ t('forkDecision.proposing.hint') }}
         </p>
       </div>
@@ -176,10 +176,10 @@ const { requestClose } = useUnsavedGuard({
         v-else-if="status === 'single_path'"
         class="rounded-xl border border-default bg-default/60 px-4 py-3 text-toned"
       >
-        <p class="text-[13px] font-medium text-app-100">
+        <p class="text-sm font-medium text-app-100">
           {{ t('forkDecision.singlePath.title') }}
         </p>
-        <p v-if="state?.singlePathReason" class="mt-1 text-[12px]">
+        <p v-if="state?.singlePathReason" class="mt-1 text-xs">
           {{ state.singlePathReason }}
         </p>
       </div>
@@ -189,16 +189,16 @@ const { requestClose } = useUnsavedGuard({
         v-else-if="status === 'chosen'"
         class="rounded-xl border border-app-secondary-500/40 bg-default/60 px-4 py-3 text-toned"
       >
-        <p class="text-[13px] font-medium text-app-secondary-200">
+        <p class="text-sm font-medium text-app-secondary-200">
           {{ t('forkDecision.chosen.title') }}
         </p>
-        <p v-if="state?.chosen?.custom" class="mt-1 whitespace-pre-wrap text-[12px]">
+        <p v-if="state?.chosen?.custom" class="mt-1 whitespace-pre-wrap text-xs">
           {{ state.chosen.custom }}
         </p>
-        <p v-else-if="state?.chosen?.forkId" class="mt-1 text-[12px]">
+        <p v-else-if="state?.chosen?.forkId" class="mt-1 text-xs">
           {{ forks.find((f) => f.id === state?.chosen?.forkId)?.title }}
         </p>
-        <p v-if="state?.chosen?.note" class="mt-1 text-[11px] text-muted">
+        <p v-if="state?.chosen?.note" class="mt-1 text-2xs text-muted">
           {{ t('forkDecision.chosen.note', { note: state.chosen.note }) }}
         </p>
       </div>
@@ -207,15 +207,12 @@ const { requestClose } = useUnsavedGuard({
       <div v-else-if="interactive" class="space-y-3">
         <p
           v-if="forkDecision.error"
-          class="rounded-md bg-app-error-500/10 px-3 py-2 text-[12px] text-app-error-300"
+          class="rounded-md bg-app-error-500/10 px-3 py-2 text-xs text-app-error-300"
         >
           {{ forkDecision.error }}
         </p>
 
-        <p
-          v-if="state?.seamSummary"
-          class="rounded-md bg-elevated/50 px-3 py-2 text-[12px] text-toned"
-        >
+        <p v-if="state?.seamSummary" class="rounded-md bg-elevated/50 px-3 py-2 text-xs text-toned">
           <span class="text-dimmed">{{ t('forkDecision.seam') }}</span>
           {{ state.seamSummary }}
         </p>
@@ -242,29 +239,29 @@ const { requestClose } = useUnsavedGuard({
             />
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
-                <h3 class="min-w-0 flex-1 text-[13px] font-medium text-app-100">
+                <h3 class="min-w-0 flex-1 text-sm font-medium text-app-100">
                   {{ fork.title }}
                 </h3>
                 <UBadge v-if="fork.recommended" color="primary" variant="subtle" size="sm">
                   {{ t('forkDecision.recommended') }}
                 </UBadge>
               </div>
-              <p v-if="fork.summary" class="mt-0.5 text-[12px] text-muted">
+              <p v-if="fork.summary" class="mt-0.5 text-xs text-muted">
                 {{ fork.summary }}
               </p>
-              <p class="mt-1.5 whitespace-pre-wrap text-[12px] text-toned">
+              <p class="mt-1.5 whitespace-pre-wrap text-xs text-toned">
                 {{ fork.approach }}
               </p>
               <ul v-if="fork.tradeoffs.length" class="mt-1.5 space-y-0.5">
                 <li
                   v-for="(tr, i) in fork.tradeoffs"
                   :key="i"
-                  class="flex gap-1.5 text-[11px] text-muted"
+                  class="flex gap-1.5 text-2xs text-muted"
                 >
                   <span class="text-app-600">•</span>{{ tr }}
                 </li>
               </ul>
-              <p v-if="fork.riskNotes" class="mt-1.5 text-[11px] text-app-warning-300/90">
+              <p v-if="fork.riskNotes" class="mt-1.5 text-2xs text-app-warning-300/90">
                 <span class="text-app-warning-500/70">{{ t('forkDecision.riskNotes') }}</span>
                 {{ fork.riskNotes }}
               </p>
@@ -283,7 +280,7 @@ const { requestClose } = useUnsavedGuard({
         >
           <label class="flex cursor-pointer items-center gap-2" @click="selected = 'custom'">
             <input type="radio" class="accent-app-secondary-500" :checked="selected === 'custom'" />
-            <span class="text-[13px] font-medium text-app-100">{{
+            <span class="text-sm font-medium text-app-100">{{
               t('forkDecision.custom.title')
             }}</span>
           </label>
@@ -292,25 +289,25 @@ const { requestClose } = useUnsavedGuard({
             data-testid="fork-custom-input"
             rows="3"
             :placeholder="t('forkDecision.custom.placeholder')"
-            class="mt-2 w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-secondary-500/60"
+            class="mt-2 w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-secondary-500/60"
             @focus="selected = 'custom'"
           />
         </article>
 
         <!-- Optional steering note -->
         <div>
-          <label class="mb-1 block text-[11px] text-muted">{{ t('forkDecision.noteLabel') }}</label>
+          <label class="mb-1 block text-2xs text-muted">{{ t('forkDecision.noteLabel') }}</label>
           <input
             v-model="note"
             type="text"
             :placeholder="t('forkDecision.notePlaceholder')"
-            class="w-full rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none"
+            class="w-full rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none"
           />
         </div>
 
         <!-- Grounded chat: ask about the forks before deciding. -->
         <section class="rounded-xl border border-default bg-default/40 px-4 py-3">
-          <p class="text-[11px] font-medium text-muted">
+          <p class="text-2xs font-medium text-muted">
             {{ t('forkDecision.chat.title') }}
           </p>
           <div v-if="chat.length || answering" class="mt-2 max-h-64 space-y-2 overflow-y-auto pr-1">
@@ -322,7 +319,7 @@ const { requestClose } = useUnsavedGuard({
               :class="msg.role === 'human' ? 'justify-end' : 'justify-start'"
             >
               <p
-                class="max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-1.5 text-[12px]"
+                class="max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-1.5 text-xs"
                 :class="
                   msg.role === 'human'
                     ? 'bg-app-secondary-500/15 text-app-secondary-100'
@@ -334,14 +331,14 @@ const { requestClose } = useUnsavedGuard({
             </div>
             <div v-if="answering" class="flex justify-start">
               <p
-                class="flex items-center gap-1.5 rounded-lg bg-elevated/70 px-3 py-1.5 text-[12px] text-muted"
+                class="flex items-center gap-1.5 rounded-lg bg-elevated/70 px-3 py-1.5 text-xs text-muted"
               >
                 <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
                 {{ t('forkDecision.chat.thinking') }}
               </p>
             </div>
           </div>
-          <p v-else class="mt-1 text-[11px] text-dimmed">
+          <p v-else class="mt-1 text-2xs text-dimmed">
             {{ t('forkDecision.chat.hint') }}
           </p>
           <div class="mt-2 flex items-end gap-2">
@@ -355,7 +352,7 @@ const { requestClose } = useUnsavedGuard({
                   ? t('forkDecision.chat.budgetSpent')
                   : t('forkDecision.chat.placeholder')
               "
-              class="min-h-0 flex-1 resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none disabled:opacity-50"
+              class="min-h-0 flex-1 resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-xs text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none disabled:opacity-50"
               @keydown.enter.exact.prevent="onSend"
             />
             <UButton

package/app/components/foundational/FoundationalContractSummary.vue

@@ -25,7 +25,7 @@ const { t, n } = useI18n()
 
 <template>
   <div v-if="contracts.length" class="mt-1 flex flex-col gap-1">
-    <div v-for="c in contracts" :key="c.contractId" class="text-[11px] text-dimmed">
+    <div v-for="c in contracts" :key="c.contractId" class="text-2xs text-dimmed">
       <span class="text-muted">{{ c.title }}</span>
       <span class="ms-1">({{ formatLabel[c.format] }}, {{ n(c.size) }})</span>
       <span v-if="c.operations.length" class="ms-1 font-mono text-dimmed">
@@ -42,7 +42,7 @@ const { t, n } = useI18n()
       </span>
     </div>
   </div>
-  <p v-else class="mt-1 text-[11px] text-app-warning-500/80">
+  <p v-else class="mt-1 text-2xs text-app-warning-500/80">
     {{ t('foundational.contracts.none') }}
   </p>
 </template>

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -92,7 +92,7 @@ async function suppress(serviceId: string) {
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm font-medium text-app-100">
             {{ s.name }}
-            <code class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
+            <code class="ms-1 text-2xs text-dimmed">{{ s.id }}</code>
           </p>
           <p class="text-xs text-muted">{{ s.summary }}</p>
           <div v-if="s.capabilities.length" class="mt-1 flex flex-wrap gap-1">
@@ -124,11 +124,11 @@ async function suppress(serviceId: string) {
               :key="doc.contractId"
               class="rounded-md border border-default bg-app-950/60 p-2"
             >
-              <p class="mb-1 text-[11px] text-muted">
+              <p class="mb-1 text-2xs text-muted">
                 {{ doc.title }}
                 <span v-if="doc.path" class="ms-1 font-mono text-app-600">{{ doc.path }}</span>
               </p>
-              <pre class="max-h-64 overflow-auto text-[11px] text-toned">{{ doc.body }}</pre>
+              <pre class="max-h-64 overflow-auto text-2xs text-toned">{{ doc.body }}</pre>
             </div>
           </div>
         </div>

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -189,7 +189,7 @@ async function remove(service: FoundationalService) {
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm font-medium text-app-100">
             {{ s.name }}
-            <code class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
+            <code class="ms-1 text-2xs text-dimmed">{{ s.id }}</code>
           </p>
           <p class="text-xs text-muted">{{ s.summary }}</p>
           <div v-if="s.capabilities.length" class="mt-1 flex flex-wrap gap-1">
@@ -198,7 +198,7 @@ async function remove(service: FoundationalService) {
             </UBadge>
           </div>
           <FoundationalContractSummary :contracts="s.contracts" :format-label="formatLabel" />
-          <p v-if="s.sourceId" class="mt-1 text-[11px] text-dimmed">
+          <p v-if="s.sourceId" class="mt-1 text-2xs text-dimmed">
             {{ t('foundational.registry.fromSource', { path: s.sourcePath ?? '' }) }}
           </p>
         </div>
@@ -274,7 +274,7 @@ async function remove(service: FoundationalService) {
           <p class="text-xs font-medium text-toned">
             {{ t('foundational.registry.contractsTitle') }}
           </p>
-          <p class="mb-2 text-[11px] text-dimmed">
+          <p class="mb-2 text-2xs text-dimmed">
             {{
               draft.contractsTouched
                 ? t('foundational.registry.contractsReplace')

package/app/components/foundational/FoundationalSuppressions.vue

@@ -73,10 +73,10 @@ async function restore(serviceId: string) {
       <div class="min-w-0 flex-1">
         <p class="truncate text-sm text-toned">
           {{ s.name || s.id }}
-          <code v-if="s.name" class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
+          <code v-if="s.name" class="ms-1 text-2xs text-dimmed">{{ s.id }}</code>
         </p>
         <p v-if="s.summary" class="text-xs text-dimmed">{{ s.summary }}</p>
-        <p v-if="!s.inherited" class="text-[11px] text-dimmed">
+        <p v-if="!s.inherited" class="text-2xs text-dimmed">
           {{ t('foundational.suppressions.shadowsNothing') }}
         </p>
       </div>

package/app/components/fragments/FragmentLibraryManager.vue

@@ -654,7 +654,7 @@ async function unlinkSource(id: string) {
             >
               {{ t('fragments.catalog.live', { source: f.documentRef.source }) }}
             </UBadge>
-            <span class="ms-auto font-mono text-[11px] text-dimmed">{{ f.id }}</span>
+            <span class="ms-auto font-mono text-2xs text-dimmed">{{ f.id }}</span>
           </div>
           <p class="mt-1 text-sm text-muted">{{ f.summary }}</p>
           <div v-if="f.tags?.length" class="mt-1 flex flex-wrap gap-1">
@@ -859,7 +859,7 @@ async function unlinkSource(id: string) {
               </UBadge>
             </div>
             <p class="text-sm text-muted">{{ f.summary }}</p>
-            <p v-if="f.resolvedAt" class="text-[11px] text-dimmed">
+            <p v-if="f.resolvedAt" class="text-2xs text-dimmed">
               {{
                 t('fragments.documents.lastResolved', { date: d(new Date(f.resolvedAt), 'long') })
               }}
@@ -942,7 +942,7 @@ async function unlinkSource(id: string) {
                   <div
                     v-for="staged in stagedDocRefs"
                     :key="staged.path"
-                    class="flex items-center gap-1.5 rounded bg-elevated/60 px-2 py-1 text-xs text-toned"
+                    class="flex items-center gap-1.5 rounded-sm bg-elevated/60 px-2 py-1 text-xs text-toned"
                   >
                     <UIcon name="i-lucide-file-code-2" class="h-3.5 w-3.5 shrink-0 text-primary" />
                     <span class="truncate">{{ staged.path }}</span>