@cat-factory/app 0.307.1 → 0.309.0

package/app/components/ralph/RalphLoopResultView.vue

@@ -10,6 +10,7 @@ import type { RalphStepState } from '~/types/execution'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -145,26 +146,26 @@ const STATUS_META = computed<
 
         <template v-else>
           <!-- The completion criterion. -->
-          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-1.5">
             {{ t('ralph.validationCommand') }}
-          </h3>
+          </SectionLabel>
           <div class="relative rounded-md border border-default bg-app-950/60 px-3 py-2">
             <CopyButton :text="ralph.validationCommand" class="absolute end-1 top-1" />
-            <code class="block whitespace-pre-wrap pe-8 font-mono text-[12px] text-default">{{
+            <code class="block whitespace-pre-wrap pe-8 font-mono text-xs text-default">{{
               ralph.validationCommand
             }}</code>
           </div>
 
           <!-- The most recent validation output. -->
           <template v-if="ralph.lastValidationTail">
-            <h3 class="mb-1.5 mt-4 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1.5 mt-4">
               {{ t('ralph.lastOutput', { exit: ralph.lastExitCode ?? '?' }) }}
-            </h3>
+            </SectionLabel>
             <div class="relative rounded-md border border-default bg-app-950/60 px-3 py-2">
               <CopyButton :text="ralph.lastValidationTail" class="absolute end-1 top-1" />
-              <pre
-                class="whitespace-pre-wrap pe-8 font-mono text-[11px] leading-relaxed text-muted"
-                >{{ ralph.lastValidationTail }}</pre>
+              <pre class="whitespace-pre-wrap pe-8 font-mono text-2xs leading-relaxed text-muted">{{
+                ralph.lastValidationTail
+              }}</pre>
             </div>
           </template>
 
@@ -173,7 +174,7 @@ const STATUS_META = computed<
             :href="prUrl"
             target="_blank"
             rel="noopener"
-            class="mt-3 inline-flex items-center gap-1 text-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
+            class="mt-3 inline-flex items-center gap-1 text-xs text-app-info-300 hover:text-app-info-200 hover:underline"
           >
             {{ t('ralph.viewPr') }}
             <UIcon name="i-lucide-external-link" class="h-3 w-3" />
@@ -183,7 +184,7 @@ const STATUS_META = computed<
                the sidebar (e.g. "3 of 20") reads as an unexplained abandonment. -->
           <p
             v-if="status === 'stalled'"
-            class="mt-3 rounded-md border border-app-error-900/60 bg-app-error-950/30 px-3 py-2 text-[12px] leading-relaxed text-app-error-200"
+            class="mt-3 rounded-md border border-app-error-900/60 bg-app-error-950/30 px-3 py-2 text-xs leading-relaxed text-app-error-200"
             data-testid="ralph-stalled-note"
           >
             {{ t('ralph.stalledNote') }}
@@ -191,14 +192,14 @@ const STATUS_META = computed<
 
           <!-- Iteration history: what each pass produced and whether its validation passed. -->
           <section v-if="attempts.length" class="mt-5">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('ralph.iterationsHeading') }}
-            </h3>
+            </SectionLabel>
             <!-- The log is capped (it rides the run's detail blob); say so rather than letting a
                  long loop's partial history read as if those iterations never ran. -->
             <p
               v-if="droppedAttempts"
-              class="mb-2 text-[11px] text-dimmed"
+              class="mb-2 text-2xs text-dimmed"
               data-testid="ralph-iterations-truncated"
             >
               {{ t('ralph.iterationsTruncated', { count: droppedAttempts }, droppedAttempts) }}
@@ -216,23 +217,21 @@ const STATUS_META = computed<
                     class="h-3.5 w-3.5"
                     :class="a.validationPassed ? 'text-app-success-400' : 'text-app-error-400'"
                   />
-                  <span class="text-[12px] font-medium text-default">
+                  <span class="text-xs font-medium text-default">
                     {{ t('ralph.iteration', { number: a.attempt }) }}
                   </span>
-                  <span class="text-[11px] text-dimmed">
+                  <span class="text-2xs text-dimmed">
                     {{
                       a.validationPassed
                         ? t('ralph.iterationPassed')
                         : t('ralph.iterationFailed', { exit: a.exitCode ?? '?' })
                     }}
                   </span>
-                  <span class="ms-auto text-[10px] text-app-600">{{
-                    d(new Date(a.at), 'long')
-                  }}</span>
+                  <span class="ms-auto text-3xs text-app-600">{{ d(new Date(a.at), 'long') }}</span>
                 </div>
                 <p
                   v-if="a.summary"
-                  class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted"
+                  class="mt-1 whitespace-pre-wrap text-xs leading-relaxed text-muted"
                 >
                   {{ a.summary }}
                 </p>
@@ -246,10 +245,10 @@ const STATUS_META = computed<
         class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="ralph">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-2">
             {{ t('ralph.sidebar.state') }}
-          </h4>
-          <div class="flex items-center gap-2 text-[13px]">
+          </SectionLabel>
+          <div class="flex items-center gap-2 text-sm">
             <UIcon
               :name="STATUS_META[status].icon"
               class="h-4 w-4"
@@ -259,10 +258,10 @@ const STATUS_META = computed<
           </div>
         </div>
         <div v-if="ralph">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('ralph.sidebar.iterations') }}
-          </h4>
-          <p class="text-[12px] text-toned" data-testid="ralph-iteration-count">
+          </SectionLabel>
+          <p class="text-xs text-toned" data-testid="ralph-iteration-count">
             {{ t('ralph.sidebar.count', { attempts: ralph.attempts, max: ralph.maxIterations }) }}
           </p>
         </div>
@@ -275,7 +274,7 @@ const STATUS_META = computed<
           :run-failed="instance?.status === 'failed'"
           :failure-at="instance?.failure?.occurredAt"
         />
-        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
+        <p class="mt-auto text-3xs leading-relaxed text-app-600">
           {{ t('ralph.sidebar.footer') }}
         </p>
       </aside>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -28,6 +28,7 @@ import type {
   ReviewItemSeverity,
   ReviewItemStatus,
 } from '~/types/requirements'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const requirements = useRequirementsStore()
@@ -806,11 +807,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   </span>
                   <span class="h-px flex-1 bg-accented" />
                 </div>
-                <p class="mt-0.5 text-[11px] text-dimmed">{{ CLASS_HINTS[group] }}</p>
+                <p class="mt-0.5 text-2xs text-dimmed">{{ CLASS_HINTS[group] }}</p>
               </div>
               <div v-if="startsAttentionGroup(index)" class="flex items-center gap-2 pt-1">
                 <span
-                  class="text-[11px] font-semibold uppercase tracking-wide"
+                  class="text-2xs font-semibold uppercase tracking-wide"
                   :class="ATTENTION_LABEL_COLOR[attention]"
                 >
                   {{ ATTENTION_LABELS[attention] }}
@@ -873,9 +874,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('requirements.answerLabel') }}
-                      </span>
+                      </SectionLabel>
                       <p class="whitespace-pre-line">{{ item.reply }}</p>
                     </div>
 
@@ -964,7 +965,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                         />
                         <p
                           v-if="isUserAnswered(item)"
-                          class="mt-1 flex items-center gap-1 text-[11px] text-app-success-400"
+                          class="mt-1 flex items-center gap-1 text-2xs text-app-success-400"
                         >
                           <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
                           {{ t('requirements.userAnswered') }}
@@ -1093,7 +1094,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                             :placeholder="t('requirements.guidancePlaceholder')"
                             :disabled="frozen"
                           />
-                          <p class="mt-1 flex items-center gap-1 text-[11px] text-primary/80">
+                          <p class="mt-1 flex items-center gap-1 text-2xs text-primary/80">
                             <UIcon name="i-lucide-wand-2" class="h-3 w-3 shrink-0" />
                             {{ t('requirements.guidanceHint') }}
                           </p>
@@ -1101,7 +1102,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                       </template>
 
                       <!-- DISMISS: nothing to fill in — a short note explains the effect -->
-                      <p v-else class="mt-2 text-[11px] text-dimmed">
+                      <p v-else class="mt-2 text-2xs text-dimmed">
                         {{ t('requirements.dismissedHint') }}
                       </p>
                     </template>
@@ -1116,7 +1117,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                    off-screen); the per-heading toggles below still work when it's expanded. -->
           <section v-if="outline" class="mt-6 border-t border-default pt-5">
             <button
-              class="mb-3 flex w-full items-center gap-1.5 text-[11px] text-app-success-400"
+              class="mb-3 flex w-full items-center gap-1.5 text-2xs text-app-success-400"
               @click="toggleDoc"
             >
               <UIcon
@@ -1157,7 +1158,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>
@@ -1277,7 +1278,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('requirements.actions.incorporateAnswers') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('requirements.help.canProceed') }}
               </template>
@@ -1341,14 +1342,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('requirements.actions.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               {{ t('requirements.help.merged') }}
             </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('requirements.settledFooter') }}
           </div>

package/app/components/riskPolicy/RiskPolicyPicker.vue

@@ -142,7 +142,7 @@ function choose(id: string) {
           <li>
             <button
               type="button"
-              class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm"
+              class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm"
               :class="[
                 refused.has('') ? 'cursor-not-allowed opacity-50' : 'hover:bg-elevated/60',
                 modelValue ? 'text-toned' : 'text-app-100',
@@ -169,7 +169,7 @@ function choose(id: string) {
           <li v-for="p in options" :key="p.id">
             <button
               type="button"
-              class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm"
+              class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm"
               :class="[
                 refused.has(p.id) ? 'cursor-not-allowed opacity-50' : 'hover:bg-elevated/60',
                 modelValue === p.id ? 'text-app-100' : 'text-toned',
@@ -200,17 +200,17 @@ function choose(id: string) {
           <template v-if="preview.policy">
             <p
               v-if="previewRefusal"
-              class="mb-2 text-[11px] leading-snug text-app-warning-400"
+              class="mb-2 text-2xs leading-snug text-app-warning-400"
               data-testid="risk-policy-refusal"
             >
               {{ t(`riskPolicy.picker.refused.${previewRefusal}`) }}
             </p>
-            <p v-if="preview.viaWorkspaceDefault" class="mb-2 text-[11px] leading-snug text-dimmed">
+            <p v-if="preview.viaWorkspaceDefault" class="mb-2 text-2xs leading-snug text-dimmed">
               {{ t('riskPolicy.picker.workspaceDefaultCaption') }}
             </p>
             <RiskPolicyPreview :policy="preview.policy" />
           </template>
-          <div v-else class="text-[12px] leading-snug text-dimmed">
+          <div v-else class="text-xs leading-snug text-dimmed">
             {{ t('riskPolicy.picker.noneHint') }}
           </div>
         </div>

package/app/components/riskPolicy/RiskPolicyPreview.vue

@@ -10,6 +10,7 @@
 import { computed } from 'vue'
 import type { RiskPolicy, WorkspaceRole } from '~/types/merge'
 import { riskPolicyCeilings, rolePolicySummary, type RiskPolicyAxis } from '~/utils/riskPolicy'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ policy: RiskPolicy }>()
 const { t, n } = useI18n()
@@ -56,15 +57,15 @@ const ceilings = computed(() =>
 
     <!-- the three ceilings, grouped under one heading that names what they are -->
     <div v-if="policy.autoMergeEnabled">
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-git-merge" class="h-3 w-3" />
         {{ t('riskPolicy.preview.autoMergeHeading') }}
-      </div>
+      </SectionLabel>
       <dl class="space-y-1">
         <div
           v-for="c in ceilings"
           :key="c.axis"
-          class="flex items-baseline justify-between gap-3 rounded bg-elevated/70 px-1.5 py-0.5 text-[12px]"
+          class="flex items-baseline justify-between gap-3 rounded-sm bg-elevated/70 px-1.5 py-0.5 text-xs"
         >
           <dt class="text-toned">{{ c.label }}</dt>
           <dd class="tabular-nums text-app-100">
@@ -72,43 +73,43 @@ const ceilings = computed(() =>
           </dd>
         </div>
       </dl>
-      <p class="mt-1.5 text-[12px] leading-snug text-muted">
+      <p class="mt-1.5 text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.autoMergeExplainer') }}
       </p>
     </div>
     <div v-else>
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-user-check" class="h-3 w-3" />
         {{ t('riskPolicy.preview.manualHeading') }}
-      </div>
-      <p class="text-[12px] leading-snug text-muted">
+      </SectionLabel>
+      <p class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.manualExplainer') }}
       </p>
     </div>
 
     <!-- Who started the run changes what may land, on a policy that says so. -->
     <div v-if="roleLayer.any" data-testid="risk-policy-preview-roles">
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-users" class="h-3 w-3" />
         {{ t('riskPolicy.preview.roleHeading') }}
-      </div>
-      <p v-if="roleLayer.sandboxed" class="text-[12px] leading-snug text-muted">
+      </SectionLabel>
+      <p v-if="roleLayer.sandboxed" class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.roleSandboxed', { roles: roleLayer.sandboxed }) }}
       </p>
-      <p v-if="roleLayer.scoped" class="text-[12px] leading-snug text-muted">
+      <p v-if="roleLayer.scoped" class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.roleScoped', { roles: roleLayer.scoped }) }}
       </p>
-      <p v-if="roleLayer.narrowed" class="text-[12px] leading-snug text-muted">
+      <p v-if="roleLayer.narrowed" class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.roleNarrowed', { roles: roleLayer.narrowed }) }}
       </p>
     </div>
 
     <div>
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-wrench" class="h-3 w-3" />
         {{ t('riskPolicy.preview.ciHeading') }}
-      </div>
-      <p class="text-[12px] leading-snug text-muted">
+      </SectionLabel>
+      <p class="text-xs leading-snug text-muted">
         {{
           t('riskPolicy.preview.ciAttempts', { count: policy.ciMaxAttempts }, policy.ciMaxAttempts)
         }}

package/app/components/sandbox/SandboxPanel.vue

@@ -15,6 +15,7 @@ import type {
   SandboxRun,
   SandboxUnsupportedReason,
 } from '~/types/sandbox'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const store = useSandboxStore()
@@ -317,9 +318,9 @@ async function archive(prompt: SandboxPromptVersion) {
         <div v-if="tab === 'experiments'" class="grid gap-4 lg:grid-cols-2">
           <!-- builder -->
           <div class="space-y-3 rounded-lg border border-muted bg-default/40 p-3">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="p">
               {{ t('sandbox.builder.title') }}
-            </p>
+            </SectionLabel>
 
             <UFormField :label="t('sandbox.builder.agent')">
               <USelect
@@ -331,7 +332,7 @@ async function archive(prompt: SandboxPromptVersion) {
               <p
                 v-for="excluded in unrunnableAgentKinds"
                 :key="excluded.agentKind"
-                class="mt-1 text-[11px] leading-snug text-dimmed"
+                class="mt-1 text-2xs leading-snug text-dimmed"
               >
                 <span class="font-medium text-muted">{{ excluded.label }}:</span>
                 {{
@@ -343,9 +344,9 @@ async function archive(prompt: SandboxPromptVersion) {
             </UFormField>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel as="span" class="mb-1 block">
                 {{ t('sandbox.builder.promptVersions') }}
-              </span>
+              </SectionLabel>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="p in kindPrompts"
@@ -375,9 +376,9 @@ async function archive(prompt: SandboxPromptVersion) {
             </div>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel as="span" class="mb-1 block">
                 {{ t('sandbox.builder.models') }}
-              </span>
+              </SectionLabel>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="m in store.selectableModels"
@@ -399,9 +400,9 @@ async function archive(prompt: SandboxPromptVersion) {
             </div>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel as="span" class="mb-1 block">
                 {{ t('sandbox.builder.fixtures') }}
-              </span>
+              </SectionLabel>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="f in kindFixtures"
@@ -486,7 +487,7 @@ async function archive(prompt: SandboxPromptVersion) {
                       @click="selectedRun = run"
                     >
                       <td class="py-1 pe-2 text-toned">{{ run.promptLabel }}</td>
-                      <td class="py-1 pe-2 font-mono text-[11px] text-muted">
+                      <td class="py-1 pe-2 font-mono text-2xs text-muted">
                         {{ run.model }}
                       </td>
                       <td class="py-1 pe-2 text-muted">{{ fixtureName }}</td>
@@ -521,21 +522,21 @@ async function archive(prompt: SandboxPromptVersion) {
 
               <!-- selected cell output -->
               <div v-if="selectedRun" class="mt-3 border-t border-default pt-2">
-                <p class="mb-1 text-[11px] uppercase tracking-wide text-dimmed">
+                <SectionLabel as="p" class="mb-1">
                   {{ selectedRun.promptLabel }} · {{ selectedRun.model }}
-                </p>
+                </SectionLabel>
                 <p v-if="selectedRun.error" class="text-xs text-app-error-400">
                   {{ selectedRun.error }}
                 </p>
                 <pre
                   v-if="selectedRun.outputText"
-                  class="max-h-48 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-2 text-[11px] text-toned"
+                  class="max-h-48 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/60 p-2 text-2xs text-toned"
                   >{{ selectedRun.outputText }}</pre>
                 <div v-if="gradeByRun.get(selectedRun.id)" class="mt-2 space-y-0.5">
                   <p
                     v-for="d in gradeByRun.get(selectedRun.id)!.scores"
                     :key="d.key"
-                    class="text-[11px] text-muted"
+                    class="text-2xs text-muted"
                   >
                     <span :class="scoreColor(d.score)" class="font-semibold">{{ d.score }}</span>
                     <span class="ms-1 text-toned">{{ d.key }}</span>
@@ -545,9 +546,9 @@ async function archive(prompt: SandboxPromptVersion) {
               </div>
             </div>
 
-            <p class="text-[11px] uppercase tracking-wide text-dimmed">
+            <SectionLabel as="p">
               {{ t('sandbox.results.past') }}
-            </p>
+            </SectionLabel>
             <div class="max-h-56 space-y-1 overflow-auto">
               <button
                 v-for="x in store.experiments"
@@ -591,7 +592,7 @@ async function archive(prompt: SandboxPromptVersion) {
                     }}
                   </UBadge>
                 </div>
-                <span class="text-[11px] text-dimmed">{{ p.agentKind }}</span>
+                <span class="text-2xs text-dimmed">{{ p.agentKind }}</span>
               </div>
               <div class="flex items-center gap-1">
                 <UButton
@@ -632,13 +633,13 @@ async function archive(prompt: SandboxPromptVersion) {
           </div>
 
           <div v-if="editing" class="space-y-2 rounded-lg border border-muted bg-default/40 p-3">
-            <p class="text-[11px] uppercase tracking-wide text-dimmed">
+            <SectionLabel as="p">
               {{
                 editing.origin === 'baseline'
                   ? t('sandbox.prompts.forkOf', { name: editing.name })
                   : t('sandbox.prompts.newVersionOf', { name: editing.name })
               }}
-            </p>
+            </SectionLabel>
             <UTextarea v-model="editText" :rows="16" class="w-full font-mono text-xs" autoresize />
             <div class="flex justify-end gap-2">
               <UButton
@@ -690,7 +691,7 @@ async function archive(prompt: SandboxPromptVersion) {
                 </UBadge>
               </div>
             </div>
-            <p v-if="f.objective?.kind === 'findings'" class="mt-0.5 text-[11px] text-dimmed">
+            <p v-if="f.objective?.kind === 'findings'" class="mt-0.5 text-2xs text-dimmed">
               {{
                 t(
                   'sandbox.fixtures.expectations',

package/app/components/settings/ApiTokensPanel.vue

@@ -259,7 +259,7 @@ async function revokeToken(key: PublicApiKey) {
                   {{ boundLabel(key) }}
                 </UBadge>
               </div>
-              <div class="text-[11px] text-dimmed">
+              <div class="text-2xs text-dimmed">
                 {{
                   t('settings.apiTokens.list.created', {
                     date: d(new Date(key.createdAt), 'short'),

package/app/components/settings/BudgetSettings.vue

@@ -5,6 +5,7 @@
 // operator sets a hard cap env var, the account/user input cannot exceed it and the cap is
 // shown here. See docs/initiatives/tiered-budgets.md.
 import { computed, reactive, ref, watch, type Ref } from 'vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t, n } = useI18n()
 const toast = useToast()
@@ -122,7 +123,7 @@ function saveUser() {
 
 <template>
   <div class="space-y-8">
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{ t('settings.workspaceSettings.budget.body') }}
     </p>
 
@@ -133,9 +134,9 @@ function saveUser() {
       </h3>
       <div class="grid grid-cols-2 gap-3">
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
-          </span>
+          </SectionLabel>
           <UInput
             v-model="wsDraft.spendMonthlyLimit"
             type="number"
@@ -145,9 +146,9 @@ function saveUser() {
           />
         </label>
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ t('settings.workspaceSettings.budget.currency') }}
-          </span>
+          </SectionLabel>
           <UInput
             v-model="wsDraft.spendCurrency"
             placeholder="EUR"
@@ -157,7 +158,7 @@ function saveUser() {
           />
         </label>
       </div>
-      <div v-if="workspace.spend" class="text-[11px] text-muted">
+      <div v-if="workspace.spend" class="text-2xs text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.spend.costSpent, workspace.spend.currency),
@@ -183,13 +184,13 @@ function saveUser() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.budget.account') }}
       </h3>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('settings.workspaceSettings.budget.accountBody') }}
       </p>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model="accountDraft"
           type="number"
@@ -202,13 +203,13 @@ function saveUser() {
       </label>
       <p
         v-if="accountCap != null"
-        class="text-[11px]"
+        class="text-2xs"
         :class="accountOverCap ? 'text-app-error-400' : 'text-app-warning-400'"
       >
         {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(accountCap) }) }}
         <span class="text-dimmed">({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span>
       </p>
-      <div v-if="workspace.accountSpend" class="text-[11px] text-muted">
+      <div v-if="workspace.accountSpend" class="text-2xs text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.accountSpend.costSpent),
@@ -216,7 +217,7 @@ function saveUser() {
           })
         }}
       </div>
-      <p v-if="!canEditAccount" class="text-[11px] text-dimmed">
+      <p v-if="!canEditAccount" class="text-2xs text-dimmed">
         {{ t('settings.workspaceSettings.budget.adminOnly') }}
       </p>
       <div v-if="canEditAccount" class="flex justify-end">
@@ -238,13 +239,13 @@ function saveUser() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.budget.user') }}
       </h3>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('settings.workspaceSettings.budget.userBody') }}
       </p>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model="userDraft"
           type="number"
@@ -256,13 +257,13 @@ function saveUser() {
       </label>
       <p
         v-if="userCap != null"
-        class="text-[11px]"
+        class="text-2xs"
         :class="userOverCap ? 'text-app-error-400' : 'text-app-warning-400'"
       >
         {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(userCap) }) }}
         <span class="text-dimmed">({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span>
       </p>
-      <div v-if="workspace.userSpend" class="text-[11px] text-muted">
+      <div v-if="workspace.userSpend" class="text-2xs text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.userSpend.costSpent),