@cat-factory/app 0.308.0 → 0.309.0

package/app/components/settings/IssueTrackerPanel.vue

@@ -204,7 +204,7 @@ async function checkSetup(source: TaskSourceKind) {
         <h3 class="text-sm font-semibold text-default">
           {{ t('settings.issueTracker.filing.heading') }}
         </h3>
-        <p class="mt-1 text-[11px] text-muted">
+        <p class="mt-1 text-2xs text-muted">
           <i18n-t keypath="settings.issueTracker.filing.description" tag="span" scope="global">
             <template #none>
               <span class="text-toned">{{ t('settings.issueTracker.filing.none') }}</span>
@@ -269,10 +269,7 @@ async function checkSetup(source: TaskSourceKind) {
       </div>
 
       <!-- Inline readiness hints for the picked tracker. -->
-      <p
-        v-if="trackerKind === 'github' && !githubAvailable"
-        class="text-[11px] text-app-warning-400"
-      >
+      <p v-if="trackerKind === 'github' && !githubAvailable" class="text-2xs text-app-warning-400">
         <i18n-t keypath="settings.issueTracker.filing.githubHint" tag="span" scope="global">
           <template #link>
             <button class="underline" @click="ui.openGitHub()">
@@ -281,10 +278,7 @@ async function checkSetup(source: TaskSourceKind) {
           </template>
         </i18n-t>
       </p>
-      <p
-        v-else-if="trackerKind === 'jira' && !jiraConnected"
-        class="text-[11px] text-app-warning-400"
-      >
+      <p v-else-if="trackerKind === 'jira' && !jiraConnected" class="text-2xs text-app-warning-400">
         <i18n-t keypath="settings.issueTracker.filing.jiraHint" tag="span" scope="global">
           <template #link>
             <button class="underline" @click="ui.openTaskConnect('jira')">
@@ -295,7 +289,7 @@ async function checkSetup(source: TaskSourceKind) {
       </p>
       <p
         v-else-if="trackerKind === 'linear' && !linearConnected"
-        class="text-[11px] text-app-warning-400"
+        class="text-2xs text-app-warning-400"
       >
         <i18n-t keypath="settings.issueTracker.filing.linearHint" tag="span" scope="global">
           <template #link>
@@ -313,7 +307,7 @@ async function checkSetup(source: TaskSourceKind) {
       >
         <UInput v-model="jiraProjectKey" placeholder="ENG" size="sm" class="w-full" />
         <template #help>
-          <span class="text-[11px] text-dimmed">
+          <span class="text-2xs text-dimmed">
             {{ t('settings.issueTracker.filing.jiraProjectKeyHelp') }}
           </span>
         </template>
@@ -340,7 +334,7 @@ async function checkSetup(source: TaskSourceKind) {
         />
         <UInput v-else v-model="linearTeamId" placeholder="team_…" size="sm" class="w-full" />
         <template #help>
-          <span class="text-[11px] text-dimmed">
+          <span class="text-2xs text-dimmed">
             {{ t('settings.issueTracker.filing.linearTeamIdHelp') }}
           </span>
         </template>
@@ -353,7 +347,7 @@ async function checkSetup(source: TaskSourceKind) {
         <h3 class="text-sm font-semibold text-default">
           {{ t('settings.issueTracker.linking.heading') }}
         </h3>
-        <p class="mt-1 text-[11px] text-muted">
+        <p class="mt-1 text-2xs text-muted">
           {{ t('settings.issueTracker.linking.description') }}
         </p>
       </div>
@@ -370,7 +364,7 @@ async function checkSetup(source: TaskSourceKind) {
         @remedy="openRemedy(source)"
       />
 
-      <p v-if="tasks.sources.length === 0" class="text-[11px] text-dimmed">
+      <p v-if="tasks.sources.length === 0" class="text-2xs text-dimmed">
         {{ t('settings.issueTracker.linking.none') }}
       </p>
     </section>
@@ -381,7 +375,7 @@ async function checkSetup(source: TaskSourceKind) {
         <h3 class="text-sm font-semibold text-default">
           {{ t('settings.issueTracker.writeback.heading') }}
         </h3>
-        <p class="mt-1 text-[11px] text-muted">
+        <p class="mt-1 text-2xs text-muted">
           <i18n-t keypath="settings.issueTracker.writeback.description" tag="span" scope="global">
             <template #done>
               <span class="text-toned">{{ t('settings.issueTracker.writeback.done') }}</span>

package/app/components/settings/KubernetesEngineForm.vue

@@ -17,6 +17,7 @@ import type {
 } from '@cat-factory/contracts'
 import { isKubernetesUrlSource } from '@cat-factory/contracts'
 import type { K3sSetupPrefill } from '~/stores/ui'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The kube branch of the discriminated handler config this form produces (the `local-k3s` /
 // `remote-kubernetes` engines share `kubernetesEngineConfigSchema`). Emitting this typed
@@ -369,17 +370,17 @@ async function copyAutoSetupCommand() {
 
 <template>
   <div class="rounded-lg border border-dashed border-muted p-3 space-y-3">
-    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+    <SectionLabel as="p">
       {{
         connected
           ? t('settings.providerConnection.form.updateConfiguration')
           : t('settings.providerConnection.form.connect')
       }}
-    </p>
+    </SectionLabel>
 
     <p
       v-if="engine === 'local-k3s'"
-      class="rounded-md border border-app-info-500/30 bg-app-info-500/10 p-2 text-[11px] text-app-info-200"
+      class="rounded-md border border-app-info-500/30 bg-app-info-500/10 p-2 text-2xs text-app-info-200"
     >
       {{ t('settings.infrastructure.kubernetesEngine.localK3sHint') }}
     </p>
@@ -391,16 +392,16 @@ async function copyAutoSetupCommand() {
       v-if="engine === 'local-k3s'"
       class="rounded-md border border-muted bg-default/40 p-2 space-y-1.5"
     >
-      <p class="flex items-center gap-1.5 text-[11px] font-semibold text-toned">
+      <p class="flex items-center gap-1.5 text-2xs font-semibold text-toned">
         <UIcon name="i-lucide-wand-2" class="h-3.5 w-3.5 text-muted" />
         {{ t('settings.infrastructure.kubernetesEngine.autoSetup.title') }}
       </p>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('settings.infrastructure.kubernetesEngine.autoSetup.description') }}
       </p>
       <div class="flex items-center gap-1.5">
         <code
-          class="flex-1 rounded bg-app-950 px-2 py-1 font-mono text-[11px] text-default select-all"
+          class="flex-1 rounded-sm bg-app-950 px-2 py-1 font-mono text-2xs text-default select-all"
         >
           {{ AUTO_SETUP_COMMAND }}
         </code>
@@ -438,7 +439,7 @@ async function copyAutoSetupCommand() {
       "
     >
       <template v-if="tokenStored" #hint>
-        <span class="inline-flex items-center gap-1 text-[11px] text-app-success-400">
+        <span class="inline-flex items-center gap-1 text-2xs text-app-success-400">
           <UIcon name="i-lucide-check-circle-2" class="h-3.5 w-3.5" />
           {{ t('settings.infrastructure.kubernetesEngine.tokenSaved') }}
         </span>
@@ -457,7 +458,7 @@ async function copyAutoSetupCommand() {
            and the operator may legitimately overrule it. -->
       <p
         v-if="tokenProblem"
-        class="mt-1 text-[11px]"
+        class="mt-1 text-2xs"
         :class="tokenBlocking ? 'text-app-error-400' : 'text-app-warning-400'"
         data-testid="service-account-token-problem"
       >

package/app/components/settings/KubernetesEnvironmentForm.vue

@@ -15,6 +15,7 @@ import ConnectionWarnings from '~/components/settings/ConnectionWarnings.vue'
 import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import type { ProviderConnection } from '~/types/providerConnections'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   connection: ProviderConnection | null
@@ -264,13 +265,13 @@ function optional(label: string): string {
 
 <template>
   <div class="rounded-lg border border-dashed border-muted p-3 space-y-3">
-    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+    <SectionLabel as="p">
       {{
         connection?.kind === 'kubernetes'
           ? t('settings.providerConnection.form.updateConfiguration')
           : t('settings.providerConnection.form.connect')
       }}
-    </p>
+    </SectionLabel>
 
     <UFormField :label="t('settings.providerConnection.kubernetesEnv.label')">
       <UInput
@@ -295,7 +296,7 @@ function optional(label: string): string {
            and the operator may legitimately overrule it. -->
       <p
         v-if="tokenProblem"
-        class="mt-1 text-[11px]"
+        class="mt-1 text-2xs"
         :class="tokenBlocking ? 'text-app-error-400' : 'text-app-warning-400'"
         data-testid="service-account-token-problem"
       >

package/app/components/settings/LocalContainerPoolSettings.vue

@@ -93,7 +93,7 @@ async function save() {
         <i18n-t
           keypath="settings.localMode.pool.description"
           tag="p"
-          class="text-[11px] text-muted"
+          class="text-2xs text-muted"
           scope="global"
         >
           <template #appleContainer>
@@ -141,7 +141,7 @@ async function save() {
         <h4 class="text-sm font-semibold text-default">
           {{ t('settings.localMode.checkout.heading') }}
         </h4>
-        <p class="text-[11px] text-muted">
+        <p class="text-2xs text-muted">
           {{ t('settings.localMode.checkout.description') }}
         </p>
       </div>

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -17,6 +17,7 @@ import {
 } from '~/types/localModels'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -301,7 +302,7 @@ async function remove(p: LocalRunner) {
           <div>
             <span class="font-medium text-default">{{ e.label }}</span>
             <span class="ms-2 text-xs text-dimmed">{{ LOCAL_RUNNER_LABELS[e.provider] }}</span>
-            <div class="text-[11px] text-dimmed">
+            <div class="text-2xs text-dimmed">
               {{ e.baseUrl }} ·
               {{
                 t(
@@ -316,7 +317,7 @@ async function remove(p: LocalRunner) {
             </div>
             <!-- A row whose URL the deployment no longer permits: its models are withheld
                  from the picker, so this is the only place that can say why. -->
-            <div v-if="e.urlBlockedReason" class="mt-1 text-[11px] text-app-warning-400">
+            <div v-if="e.urlBlockedReason" class="mt-1 text-2xs text-app-warning-400">
               {{ t('settings.localModelEndpoints.blocked') }}
               <span class="block text-app-warning-300/70">{{
                 urlReasonText(e.urlBlockedReason)
@@ -325,7 +326,7 @@ async function remove(p: LocalRunner) {
             <!-- Part of the stored model list could not be read and was discarded. Without this
                  the shortened list reads exactly like a runner nothing was ever enabled on, and
                  only one of those is fixed by re-ticking. -->
-            <div v-if="e.unreadableModels" class="mt-1 text-[11px] text-app-warning-400">
+            <div v-if="e.unreadableModels" class="mt-1 text-2xs text-app-warning-400">
               {{ t('settings.localModelEndpoints.modelsDiscarded') }}
             </div>
           </div>
@@ -352,13 +353,13 @@ async function remove(p: LocalRunner) {
 
         <!-- add / edit form -->
         <div class="rounded-lg border border-dashed border-muted p-3 space-y-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="p">
             {{
               existing
                 ? t('settings.localModelEndpoints.editRunner')
                 : t('settings.localModelEndpoints.addRunner')
             }}
-          </p>
+          </SectionLabel>
 
           <div class="flex flex-wrap items-end gap-3">
             <UFormField :label="t('settings.localModelEndpoints.runnerType')">
@@ -415,7 +416,7 @@ async function remove(p: LocalRunner) {
             </UButton>
             <span v-if="testError" class="text-xs text-app-error-400">
               {{ testError }}
-              <span v-if="testErrorDetail" class="block text-[11px] text-app-error-300/70">{{
+              <span v-if="testErrorDetail" class="block text-2xs text-app-error-300/70">{{
                 testErrorDetail
               }}</span>
             </span>
@@ -435,10 +436,10 @@ async function remove(p: LocalRunner) {
 
           <!-- discovered models multi-select, each with its declared image support -->
           <div v-if="discovered.length" class="space-y-1.5">
-            <span class="block text-[10px] uppercase tracking-wide text-dimmed">
+            <SectionLabel as="span" class="block">
               {{ t('settings.localModelEndpoints.enableModels') }}
-            </span>
-            <p class="text-[11px] text-dimmed">
+            </SectionLabel>
+            <p class="text-2xs text-dimmed">
               {{ t('settings.localModelEndpoints.imageInputHint') }}
             </p>
             <div class="space-y-1.5">

package/app/components/settings/MergeClassRulesEditor.vue

@@ -10,6 +10,7 @@
 import { computed } from 'vue'
 import { autoMergeShare, frictionlessShare, RULEABLE_CHANGE_CLASSES } from '@cat-factory/contracts'
 import type { MergeClassRule, MergeClassRules } from '~/types/merge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The preset's current rules; an absent class means "use the score ceilings". */
@@ -83,13 +84,13 @@ function setRule(changeClass: (typeof RULEABLE_CHANGE_CLASSES)[number], rule: Me
 <template>
   <div data-testid="merge-class-rules" class="space-y-2">
     <div>
-      <span class="block text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel as="span" class="block">
         {{ t('settings.riskPolicy.classRules.heading') }}
-      </span>
-      <p class="mt-0.5 text-[11px] leading-snug text-dimmed">
+      </SectionLabel>
+      <p class="mt-0.5 text-2xs leading-snug text-dimmed">
         {{ t('settings.riskPolicy.classRules.help') }}
       </p>
-      <p v-if="!autoMergeEnabled" class="mt-1 text-[11px] leading-snug text-app-warning-400/90">
+      <p v-if="!autoMergeEnabled" class="mt-1 text-2xs leading-snug text-app-warning-400/90">
         {{ t('settings.riskPolicy.classRules.autoMergeOffWarning') }}
       </p>
     </div>
@@ -111,7 +112,7 @@ function setRule(changeClass: (typeof RULEABLE_CHANGE_CLASSES)[number], rule: Me
         :data-testid="`merge-class-rule-${row.changeClass}`"
         @update:model-value="setRule(row.changeClass, $event as MergeClassRule)"
       />
-      <span class="text-[11px] text-dimmed" :data-testid="`merge-class-record-${row.changeClass}`">
+      <span class="text-2xs text-dimmed" :data-testid="`merge-class-record-${row.changeClass}`">
         <template v-if="row.merged === 0">
           {{ t('settings.riskPolicy.classRules.noData') }}
         </template>

package/app/components/settings/MergeRolePolicyEditor.vue

@@ -34,6 +34,7 @@ import {
   toggleSubmissionClass,
   type RoleRuleSelection,
 } from '~/components/settings/MergeRolePolicyEditor.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The preset's per-role narrowing map; a role with no entry is exactly the base rules. */
@@ -162,10 +163,10 @@ function setSubmissionClass(
 <template>
   <div data-testid="merge-role-policy" class="space-y-2">
     <div>
-      <span class="block text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel as="span" class="block">
         {{ t('settings.riskPolicy.roleRules.heading') }}
-      </span>
-      <p class="mt-0.5 text-[11px] leading-snug text-dimmed">
+      </SectionLabel>
+      <p class="mt-0.5 text-2xs leading-snug text-dimmed">
         {{ t('settings.riskPolicy.roleRules.help') }}
       </p>
       <!-- Auto-merge off already sends every pull request to a human, so the per-class narrowing
@@ -173,7 +174,7 @@ function setSubmissionClass(
            MANUAL merge as well, which is the one thing the master switch leaves open. -->
       <p
         v-if="!autoMergeEnabled"
-        class="mt-1 text-[11px] leading-snug text-app-warning-400/90"
+        class="mt-1 text-2xs leading-snug text-app-warning-400/90"
         data-testid="merge-role-auto-merge-off"
       >
         {{ t('settings.riskPolicy.roleRules.autoMergeOffWarning') }}
@@ -218,7 +219,7 @@ function setSubmissionClass(
              only, and a role can land nothing at all while showing "No class limits". -->
         <span
           v-if="group.submissionScoped"
-          class="text-[11px] text-app-warning-400/90"
+          class="text-2xs text-app-warning-400/90"
           :data-testid="`merge-role-submission-badge-${group.role}`"
         >
           {{ t('settings.riskPolicy.roleRules.submissionBadge') }}
@@ -230,7 +231,7 @@ function setSubmissionClass(
            row says which of the three is actually governing. -->
       <p
         v-if="group.sandboxed"
-        class="mt-1 text-[11px] leading-snug text-app-warning-400/90"
+        class="mt-1 text-2xs leading-snug text-app-warning-400/90"
         :data-testid="`merge-role-sandbox-note-${group.role}`"
       >
         {{ t('settings.riskPolicy.roleRules.sandboxNote') }}
@@ -249,7 +250,7 @@ function setSubmissionClass(
             :data-testid="`merge-role-submission-${group.role}`"
             @update:model-value="setSubmissionScoped(group.role, $event)"
           />
-          <p class="text-[11px] leading-snug text-dimmed">
+          <p class="text-2xs leading-snug text-dimmed">
             {{ t('settings.riskPolicy.roleRules.submissionHelp') }}
           </p>
           <div v-if="group.submissionScoped" class="flex flex-wrap gap-x-4 gap-y-1">
@@ -268,7 +269,7 @@ function setSubmissionClass(
                does rather than reading as a switch somebody forgot to fill in. -->
           <p
             v-if="group.submissionScoped && !group.submissionRows.some((r) => r.allowed)"
-            class="text-[11px] leading-snug text-app-warning-400/90"
+            class="text-2xs leading-snug text-app-warning-400/90"
             :data-testid="`merge-role-submission-none-${group.role}`"
           >
             {{ t('settings.riskPolicy.roleRules.submissionNone') }}
@@ -276,10 +277,10 @@ function setSubmissionClass(
         </div>
 
         <div class="space-y-1.5 border-t border-default/70 pt-2">
-          <p class="text-[11px] leading-snug text-dimmed">
+          <p class="text-2xs leading-snug text-dimmed">
             {{ t('settings.riskPolicy.roleRules.classHeading') }}
           </p>
-          <p v-if="!anyBaseRule" class="text-[11px] leading-snug text-dimmed">
+          <p v-if="!anyBaseRule" class="text-2xs leading-snug text-dimmed">
             {{ t('settings.riskPolicy.roleRules.baseHint') }}
           </p>
           <div
@@ -302,12 +303,12 @@ function setSubmissionClass(
               "
             />
             <!-- Nothing left to narrow: the base rule already routes this class to a human. -->
-            <span v-if="row.items.length === 1" class="text-[11px] text-dimmed">
+            <span v-if="row.items.length === 1" class="text-2xs text-dimmed">
               {{ t('settings.riskPolicy.roleRules.alreadyStrictest') }}
             </span>
             <span
               v-else-if="row.redundant"
-              class="text-[11px] text-app-warning-400/90"
+              class="text-2xs text-app-warning-400/90"
               :data-testid="`merge-role-redundant-${group.role}-${row.changeClass}`"
             >
               {{ t('settings.riskPolicy.roleRules.redundant') }}

package/app/components/settings/ModelConfigurationPanel.vue

@@ -22,6 +22,7 @@ import { cachingLabel, contextLabel, costLabel, displayFlavor, isSelectable } fr
 import ConsensusGroupsSection from '~/components/settings/ConsensusGroupsSection.vue'
 import ProviderPreferenceEditor from '~/components/settings/ProviderPreferenceEditor.vue'
 import { showOverrideField } from '~/utils/uiMode'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -424,7 +425,7 @@ async function save() {
                       />
                     </div>
                   </div>
-                  <div class="mt-1.5 text-[11px] text-muted">
+                  <div class="mt-1.5 text-2xs text-muted">
                     {{ t('settings.modelConfiguration.list.basePrefix') }}
                     <span class="text-toned">{{ modelLabel(p.baseModelId) }}</span>
                     <span v-if="Object.keys(p.overrides).length">
@@ -460,11 +461,9 @@ async function save() {
             <template v-else>
               <div class="space-y-4 rounded-xl border border-default bg-default/50 p-4">
                 <div>
-                  <label
-                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted"
-                  >
+                  <SectionLabel as="label" class="mb-1 block">
                     {{ t('settings.modelConfiguration.editor.nameLabel') }}
-                  </label>
+                  </SectionLabel>
                   <UInput
                     v-model="editor.name"
                     :placeholder="t('settings.modelConfiguration.editor.namePlaceholder')"
@@ -474,11 +473,9 @@ async function save() {
                 </div>
 
                 <div>
-                  <label
-                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted"
-                  >
+                  <SectionLabel as="label" class="mb-1 block">
                     {{ t('settings.modelConfiguration.editor.baseModelLabel') }}
-                  </label>
+                  </SectionLabel>
                   <UDropdownMenu
                     :items="baseMenu"
                     :ui="{ content: 'max-h-80 overflow-y-auto z-[60]' }"
@@ -514,9 +511,9 @@ async function save() {
 
               <div>
                 <div class="mb-1 flex items-start justify-between gap-3">
-                  <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+                  <SectionLabel as="span">
                     {{ t('settings.modelConfiguration.editor.perAgentOverrides') }}
-                  </span>
+                  </SectionLabel>
                   <AgentTierSelect class="w-56 shrink-0" :hidden-count="hiddenByTier" />
                 </div>
                 <UInput

package/app/components/settings/ModelPresetHealthModal.vue

@@ -73,7 +73,7 @@ const reseedableCount = computed(
               {{ t('modelPreset.health.newHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">{{ t('modelPreset.health.newDescription') }}</p>
+          <p class="text-2xs text-dimmed">{{ t('modelPreset.health.newDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="i in newPresets"
@@ -108,7 +108,7 @@ const reseedableCount = computed(
               {{ t('modelPreset.health.updatesHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('modelPreset.health.updatesDescription') }}
           </p>
           <ul class="space-y-2">
@@ -119,7 +119,7 @@ const reseedableCount = computed(
             >
               <div class="min-w-0">
                 <span class="truncate text-sm font-medium text-app-100">{{ i.name }}</span>
-                <p class="text-[11px] text-app-warning-400/80">
+                <p class="text-2xs text-app-warning-400/80">
                   {{
                     t('modelPreset.health.versionAvailable', {
                       from: i.fromVersion ?? 0,

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -236,7 +236,7 @@ const connectedLabel = computed(() => {
               }}
             </UBadge>
           </div>
-          <p class="text-[11px] text-muted">
+          <p class="text-2xs text-muted">
             {{ t('settings.observabilityConnection.incident.description') }}
           </p>
 

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -11,6 +11,7 @@ import { computed, ref, watch } from 'vue'
 import type { OpenRouterModelMeta } from '~/types/openrouter'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -239,9 +240,9 @@ function manageKeys() {
           v-if="!keyConnected"
           class="space-y-3 rounded-lg border border-muted bg-default/60 p-4"
         >
-          <h4 class="text-xs font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4">
             {{ t('settings.openRouterCatalog.connectHeading') }}
-          </h4>
+          </SectionLabel>
           <ol class="list-decimal space-y-1 ps-5 text-sm text-toned">
             <li>
               <i18n-t keypath="settings.openRouterCatalog.step1" tag="span" scope="global">
@@ -363,7 +364,7 @@ function manageKeys() {
               />
               <span class="min-w-0 flex-1">
                 <span class="block truncate text-default">{{ m.name }}</span>
-                <span class="block truncate font-mono text-[11px] text-dimmed">{{ m.id }}</span>
+                <span class="block truncate font-mono text-2xs text-dimmed">{{ m.id }}</span>
                 <!--
                   A withdrawal date is the one fact about a model that fails SILENTLY: past it the
                   route simply stops answering and the run falls through to whatever the picker
@@ -371,11 +372,11 @@ function manageKeys() {
                 -->
                 <span
                   v-if="m.expirationDate"
-                  class="block truncate text-[11px] text-app-warning-400"
+                  class="block truncate text-2xs text-app-warning-400"
                   >{{ t('settings.openRouterCatalog.retiresOn', { date: m.expirationDate }) }}</span
                 >
               </span>
-              <span class="shrink-0 text-end text-[11px] text-dimmed">
+              <span class="shrink-0 text-end text-2xs text-dimmed">
                 <span v-if="m.contextLength" class="block">{{
                   contextLabel(m.contextLength)
                 }}</span>

package/app/components/settings/PackageRegistriesPanel.vue

@@ -115,7 +115,7 @@ async function removeEntry(entryId: string) {
         <div class="min-w-0 space-y-1">
           <div class="flex items-center gap-2">
             <span class="text-sm font-medium">{{ vendorLabel(entry.vendor) }}</span>
-            <span class="text-[11px] text-dimmed">
+            <span class="text-2xs text-dimmed">
               {{ t('settings.packageRegistries.list.tokenTail', { tail: entry.tokenTail }) }}
             </span>
           </div>
@@ -132,7 +132,7 @@ async function removeEntry(entryId: string) {
             <!-- An entry with no scopes authenticates its host without routing any scope to
                  it (the deliberate mixed public/private setup) — say so, or the row reads as
                  half-configured. -->
-            <span v-if="!entry.scopes.length" class="text-[11px] text-dimmed">
+            <span v-if="!entry.scopes.length" class="text-2xs text-dimmed">
               {{ t('settings.packageRegistries.list.noScopes') }}
             </span>
           </div>
@@ -164,7 +164,7 @@ async function removeEntry(entryId: string) {
           data-testid="package-registry-vendor"
         />
       </UFormField>
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{ t('settings.packageRegistries.add.host', { host: vendorHost }) }}
       </p>
 
@@ -197,7 +197,7 @@ async function removeEntry(entryId: string) {
       </div>
       <!-- Why leaving this empty is often the RIGHT answer — a scope mapping is all-or-nothing,
            so an org publishing some of its `@org` packages publicly breaks under one. -->
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{ t('settings.packageRegistries.add.scopesNote') }}
       </p>
 

package/app/components/settings/ProviderConnectionTab.vue

@@ -19,6 +19,7 @@ import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.v
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 import ProviderManifestEditor from '~/components/settings/ProviderManifestEditor.vue'
 import KubernetesEnvironmentForm from '~/components/settings/KubernetesEnvironmentForm.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   kind: ProviderConnectionKind
@@ -383,7 +384,7 @@ function fieldHelp(key: string): string | undefined {
     >
       <div>
         <span class="font-medium text-default">{{ connection.label }}</span>
-        <div class="text-[11px] text-app-success-400">
+        <div class="text-2xs text-app-success-400">
           {{ t('settings.providerConnection.connectedAt', { baseUrl: connection.baseUrl }) }}
         </div>
       </div>
@@ -426,14 +427,14 @@ function fieldHelp(key: string): string | undefined {
 
     <!-- NATIVE provider: the friendly, descriptor-driven flat field form. -->
     <div v-else-if="isNative" class="rounded-lg border border-dashed border-muted p-3 space-y-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{
           connection
             ? t('settings.providerConnection.form.updateConfiguration')
             : t('settings.providerConnection.form.connect')
         }}
-      </p>
-      <p v-if="connection && hasSecretFields" class="text-[11px] text-app-warning-300/80">
+      </SectionLabel>
+      <p v-if="connection && hasSecretFields" class="text-2xs text-app-warning-300/80">
         {{
           t(
             'settings.providerConnection.form.reenterSecrets',