@cat-factory/app 0.308.0 → 0.310.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,39 +269,48 @@ 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()">
+            <UButton
+              color="neutral"
+              variant="link"
+              class="p-0 text-2xs underline"
+              @click="ui.openGitHub()"
+            >
               {{ t('settings.issueTracker.filing.githubHintLink') }}
-            </button>
+            </UButton>
           </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')">
+            <UButton
+              color="neutral"
+              variant="link"
+              class="p-0 text-2xs underline"
+              @click="ui.openTaskConnect('jira')"
+            >
               {{ t('settings.issueTracker.filing.connectLink') }}
-            </button>
+            </UButton>
           </template>
         </i18n-t>
       </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>
-            <button class="underline" @click="ui.openTaskConnect('linear')">
+            <UButton
+              color="neutral"
+              variant="link"
+              class="p-0 text-2xs underline"
+              @click="ui.openTaskConnect('linear')"
+            >
               {{ t('settings.issueTracker.filing.connectLink') }}
-            </button>
+            </UButton>
           </template>
         </i18n-t>
       </p>
@@ -313,7 +322,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 +349,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 +362,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 +379,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 +390,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,8 @@ 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'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -301,7 +303,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 +318,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,18 +327,18 @@ 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>
           <div class="flex items-center gap-1">
-            <UButton
+            <IconButton
               icon="i-lucide-pencil"
               color="neutral"
               variant="ghost"
               size="xs"
               :disabled="busy"
-              :title="t('settings.localModelEndpoints.edit')"
+              :label="t('settings.localModelEndpoints.edit')"
               @click="selectRunner(e.provider)"
             />
             <UButton
@@ -352,13 +354,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 +417,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 +437,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,8 @@ 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'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -330,13 +332,13 @@ async function save() {
           >
             {{ t('settings.modelConfiguration.back') }}
           </UButton>
-          <UButton
+          <IconButton
             icon="i-lucide-x"
             color="neutral"
             variant="ghost"
             size="sm"
             :class="editor ? '' : 'ms-auto'"
-            :title="t('settings.modelConfiguration.closeEsc')"
+            :label="t('settings.modelConfiguration.closeEsc')"
             @click="
               () => {
                 open = false
@@ -390,32 +392,32 @@ async function save() {
                       {{ t('settings.modelConfiguration.list.default') }}
                     </UBadge>
                     <div class="ms-auto flex items-center gap-1">
-                      <UButton
+                      <IconButton
                         v-if="!p.isDefault"
                         size="xs"
                         variant="ghost"
                         color="neutral"
                         icon="i-lucide-star"
                         :loading="busy"
-                        :title="t('settings.modelConfiguration.list.setDefaultTitle')"
+                        :label="t('settings.modelConfiguration.list.setDefaultTitle')"
                         @click="setDefault(p)"
                       />
-                      <UButton
+                      <IconButton
                         size="xs"
                         variant="ghost"
                         color="neutral"
                         icon="i-lucide-pencil"
-                        :title="t('settings.modelConfiguration.list.editTitle')"
+                        :label="t('settings.modelConfiguration.list.editTitle')"
                         @click="startEdit(p)"
                       />
-                      <UButton
+                      <IconButton
                         size="xs"
                         variant="ghost"
                         color="error"
                         icon="i-lucide-trash-2"
                         :disabled="p.isDefault"
                         :loading="busy"
-                        :title="
+                        :label="
                           p.isDefault
                             ? t('settings.modelConfiguration.list.deleteDisabledTitle')
                             : t('settings.modelConfiguration.list.deleteTitle')
@@ -424,7 +426,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 +462,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 +474,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 +512,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>