@cat-factory/app 0.308.0 → 0.310.0

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,19 +240,20 @@ 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">
                 <template #link>
-                  <a
-                    href="https://openrouter.ai/keys"
+                  <ULink
+                    raw
+                    to="https://openrouter.ai/keys"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="text-primary underline"
-                    >{{ t('settings.openRouterCatalog.step1Link') }}</a
+                    >{{ t('settings.openRouterCatalog.step1Link') }}</ULink
                   >
                 </template>
               </i18n-t>
@@ -363,7 +365,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 +373,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',

package/app/components/settings/ProviderManifestEditor.vue

@@ -22,6 +22,7 @@ import type { ProviderConnectionKind } from '~/types/providerConnections'
 import ConnectionWarnings from '~/components/settings/ConnectionWarnings.vue'
 import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   kind: ProviderConnectionKind
@@ -197,9 +198,9 @@ function onSave() {
 
 <template>
   <div class="space-y-3 rounded-lg border border-dashed border-muted p-3">
-    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+    <SectionLabel as="p">
       {{ t('settings.providerConnection.manifestEditor.title') }}
-    </p>
+    </SectionLabel>
 
     <UFormField
       :label="t('settings.providerConnection.manifestEditor.jsonLabel')"
@@ -214,7 +215,7 @@ function onSave() {
       />
     </UFormField>
 
-    <p v-if="!savedManifest && !jsonError && !schemaError" class="text-[11px] text-dimmed">
+    <p v-if="!savedManifest && !jsonError && !schemaError" class="text-2xs text-dimmed">
       {{ t('settings.providerConnection.manifestEditor.starterHint') }}
     </p>
 
@@ -236,16 +237,16 @@ function onSave() {
 
     <!-- Secret sub-form: one write-only input per secret key the manifest references. -->
     <div class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{ t('settings.providerConnection.manifestEditor.secretsLabel') }}
-      </p>
-      <p v-if="!secretKeys.length" class="text-[11px] text-dimmed">
+      </SectionLabel>
+      <p v-if="!secretKeys.length" class="text-2xs text-dimmed">
         {{ t('settings.providerConnection.manifestEditor.noSecrets') }}
       </p>
       <template v-else-if="connected">
         <p
           v-if="storedSecretKeys && storedSecretKeys.length"
-          class="text-[11px] text-muted"
+          class="text-2xs text-muted"
           data-testid="manifest-editor-stored"
         >
           {{
@@ -254,7 +255,7 @@ function onSave() {
             })
           }}
         </p>
-        <p class="text-[11px] text-app-warning-300/80">
+        <p class="text-2xs text-app-warning-300/80">
           {{ t('settings.providerConnection.manifestEditor.reenterSecrets') }}
         </p>
       </template>

package/app/components/settings/ProviderPreferenceEditor.vue

@@ -26,6 +26,8 @@ import {
   moveFlavor,
   subscriptionOverridesOrder,
 } from '~/components/settings/ProviderPreferenceEditor.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   /** The preset's stored order; empty/absent ⇒ the deployment's default order. */
@@ -90,9 +92,9 @@ function reset() {
 <template>
   <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.routeOrder.label') }}
-      </span>
+      </SectionLabel>
       <UButton
         v-if="isCustom"
         size="xs"
@@ -105,7 +107,7 @@ function reset() {
         {{ t('settings.modelConfiguration.routeOrder.reset') }}
       </UButton>
     </div>
-    <p class="mb-2 text-[11px] leading-relaxed text-dimmed">
+    <p class="mb-2 text-2xs leading-relaxed text-dimmed">
       {{
         isCustom
           ? t('settings.modelConfiguration.routeOrder.customHint')
@@ -118,7 +120,7 @@ function reset() {
          route a connected plan quietly overrules is the one thing this control must not do. -->
     <p
       v-if="subscriptionWins"
-      class="mb-2 text-[11px] leading-relaxed text-app-warning-400/90"
+      class="mb-2 text-2xs leading-relaxed text-app-warning-400/90"
       data-testid="preset-route-order-subscription-warning"
     >
       {{ t('settings.modelConfiguration.routeOrder.subscriptionOverrideHint') }}
@@ -128,7 +130,7 @@ function reset() {
          answering a different question than this order asks. -->
     <p
       v-if="badgesShowAnotherOrder"
-      class="mb-2 text-[11px] leading-relaxed text-dimmed"
+      class="mb-2 text-2xs leading-relaxed text-dimmed"
       data-testid="preset-route-order-badge-hint"
     >
       {{ t('settings.modelConfiguration.routeOrder.badgesUseDefaultPresetHint') }}
@@ -144,33 +146,31 @@ function reset() {
         :data-testid="`preset-route-${flavor}`"
       >
         <span
-          class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-elevated text-[10px] font-semibold text-muted"
+          class="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm bg-elevated text-3xs font-semibold text-muted"
         >
           {{ index + 1 }}
         </span>
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm text-default">{{ t(ROUTE_LABELS[flavor]) }}</p>
-          <p class="truncate text-[11px] text-dimmed">{{ t(ROUTE_HINTS[flavor]) }}</p>
+          <p class="truncate text-2xs text-dimmed">{{ t(ROUTE_HINTS[flavor]) }}</p>
         </div>
         <div class="flex shrink-0 items-center gap-1">
-          <UButton
+          <IconButton
             size="xs"
             variant="ghost"
             color="neutral"
             icon="i-lucide-chevron-up"
             :disabled="index === 0"
-            :title="t('settings.modelConfiguration.routeOrder.moveUp')"
-            :aria-label="t('settings.modelConfiguration.routeOrder.moveUp')"
+            :label="t('settings.modelConfiguration.routeOrder.moveUp')"
             @click="move(index, -1)"
           />
-          <UButton
+          <IconButton
             size="xs"
             variant="ghost"
             color="neutral"
             icon="i-lucide-chevron-down"
             :disabled="index === order.length - 1"
-            :title="t('settings.modelConfiguration.routeOrder.moveDown')"
-            :aria-label="t('settings.modelConfiguration.routeOrder.moveDown')"
+            :label="t('settings.modelConfiguration.routeOrder.moveDown')"
             @click="move(index, 1)"
           />
         </div>

package/app/components/settings/RiskPolicyCreateForm.vue

@@ -10,6 +10,7 @@ import {
   blankRiskPolicyDraft,
   forkGatingFromDraft,
 } from '~/utils/riskPolicyDraft'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ busy: boolean }>()
 
@@ -56,14 +57,14 @@ function submit() {
 
 <template>
   <div class="rounded-lg border border-dashed border-muted p-3">
-    <p class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-muted">
+    <SectionLabel as="p" class="mb-2">
       {{ t('settings.riskPolicy.newPreset') }}
-    </p>
+    </SectionLabel>
     <div class="flex flex-wrap items-end gap-3">
       <label class="block min-w-40 flex-1">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.name') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model="draft.name"
           size="sm"
@@ -71,11 +72,12 @@ function submit() {
           data-testid="risk-policy-create-name"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.complexity') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxComplexity"
           type="number"
           :min="0"
@@ -84,11 +86,12 @@ function submit() {
           data-testid="risk-policy-create-complexity"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.risk') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxRisk"
           type="number"
           :min="0"
@@ -97,11 +100,12 @@ function submit() {
           data-testid="risk-policy-create-risk"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.impact') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxImpact"
           type="number"
           :min="0"
@@ -110,17 +114,25 @@ function submit() {
           data-testid="risk-policy-create-impact"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.ciFix') }}
-        </span>
-        <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
+        </SectionLabel>
+        <UInput
+          class="w-20"
+          v-model.number="draft.ciMaxAttempts"
+          type="number"
+          :min="0"
+          :max="50"
+          size="sm"
+        />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.reqIter') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxRequirementIterations"
           type="number"
           :min="1"
@@ -128,11 +140,12 @@ function submit() {
           size="sm"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.companionRework') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.companionMaxReworks"
           type="number"
           :min="0"
@@ -140,11 +153,12 @@ function submit() {
           size="sm"
         />
       </label>
-      <label class="block w-32">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.autoPass') }}
-        </span>
+        </SectionLabel>
         <USelect
+          class="w-32"
           v-model="draft.maxRequirementConcernAllowed"
           :items="concernOptions"
           value-key="value"

package/app/components/settings/RiskPolicyEditorRow.vue

@@ -23,6 +23,8 @@ import {
 import { RISK_POLICY_AXES, RISK_POLICY_CEILING_FIELD } from '~/utils/riskPolicy'
 import MergeClassRulesEditor from '~/components/settings/MergeClassRulesEditor.vue'
 import MergeRolePolicyEditor from '~/components/settings/MergeRolePolicyEditor.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   policy: RiskPolicyLibraryEntry
@@ -143,22 +145,22 @@ const deleteBlocked = computed(
           {{ t('settings.riskPolicy.makeDefault') }}
         </UButton>
       </template>
-      <UButton
+      <IconButton
         color="error"
         variant="ghost"
         size="xs"
         icon="i-lucide-trash-2"
         :disabled="deleteBlocked || busy?.startsWith(policy.id)"
-        :title="deleteBlockedReason"
+        :label="deleteBlockedReason"
         @click="emit('remove')"
       />
     </div>
 
     <div class="grid grid-cols-1 gap-3 sm:grid-cols-4">
       <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t(CEILING_LABEL_KEYS[axis]) }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft[RISK_POLICY_CEILING_FIELD[axis]]"
           type="number"
@@ -168,15 +170,15 @@ const deleteBlocked = computed(
         />
       </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.riskPolicy.field.ciMaxAttempts') }}
-        </span>
+        </SectionLabel>
         <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
       </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.riskPolicy.field.maxRequirementIterations') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft.maxRequirementIterations"
           type="number"
@@ -186,9 +188,9 @@ const deleteBlocked = computed(
         />
       </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.riskPolicy.field.companionMaxReworks') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft.companionMaxReworks"
           type="number"
@@ -198,9 +200,9 @@ const deleteBlocked = computed(
         />
       </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.riskPolicy.field.maxRequirementConcernAllowed') }}
-        </span>
+        </SectionLabel>
         <USelect
           v-model="draft.maxRequirementConcernAllowed"
           :items="concernOptions"
@@ -245,9 +247,9 @@ const deleteBlocked = computed(
       />
       <div v-if="draft.forkEnabled" class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-4">
         <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ t(FORK_FLOOR_LABEL_KEYS[axis]) }}
-          </span>
+          </SectionLabel>
           <UInput
             v-model.number="draft[FORK_FLOOR_FIELD[axis]]"
             type="number"
@@ -257,9 +259,9 @@ const deleteBlocked = computed(
           />
         </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.riskPolicy.forkDecision.onMissingLabel') }}
-          </span>
+          </SectionLabel>
           <USelect v-model="draft.forkOnMissing" :items="onMissingOptions" size="sm" />
         </label>
       </div>
@@ -283,9 +285,9 @@ const deleteBlocked = computed(
            on an attended policy would be a control over a decision this policy never makes. It is
            not hidden as an "advanced override" — it is inert, which is a different thing. -->
       <label v-if="draft.unattended" class="mt-3 block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.autoAnswer.label') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft.minAutoAnswerConfidence"
           type="number"
@@ -294,7 +296,7 @@ const deleteBlocked = computed(
           size="sm"
           data-testid="risk-policy-auto-answer-floor"
         />
-        <span class="mt-1 block text-[11px] text-dimmed">
+        <span class="mt-1 block text-2xs text-dimmed">
           {{ t('settings.riskPolicy.autoAnswer.hint') }}
         </span>
       </label>

package/app/components/settings/RiskPolicyHealthModal.vue

@@ -64,7 +64,7 @@ const reseedableCount = computed(
               {{ t('riskPolicy.health.newHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">{{ t('riskPolicy.health.newDescription') }}</p>
+          <p class="text-2xs text-dimmed">{{ t('riskPolicy.health.newDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="i in newPresets"
@@ -99,7 +99,7 @@ const reseedableCount = computed(
               {{ t('riskPolicy.health.updatesHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('riskPolicy.health.updatesDescription') }}
           </p>
           <ul class="space-y-2">
@@ -110,7 +110,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('riskPolicy.health.versionAvailable', {
                       from: i.fromVersion ?? 0,

package/app/components/settings/RiskPolicyPanel.vue

@@ -13,6 +13,7 @@ import { riskPolicyCopyName } from '~/utils/riskPolicy'
 import RiskPolicyCreateForm from '~/components/settings/RiskPolicyCreateForm.vue'
 import RiskPolicyEditorRow from '~/components/settings/RiskPolicyEditorRow.vue'
 import RiskPolicyInheritedRow from '~/components/settings/RiskPolicyInheritedRow.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 
@@ -179,10 +180,10 @@ function unhide(presetId: string) {
     <!-- Inherited FIRST: they are the org's posture, and a board reading its own list wants to see
          what it is working from before what it has changed. -->
     <section v-if="inherited.length > 0" class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{ t('settings.riskPolicy.inherited.heading') }}
-      </p>
-      <p class="text-[11px] text-dimmed">{{ t('settings.riskPolicy.inherited.hint') }}</p>
+      </SectionLabel>
+      <p class="text-2xs text-dimmed">{{ t('settings.riskPolicy.inherited.hint') }}</p>
       <RiskPolicyInheritedRow
         v-for="policy in inherited"
         :key="policy.id"
@@ -194,12 +195,9 @@ function unhide(presetId: string) {
     </section>
 
     <section class="space-y-4">
-      <p
-        v-if="inherited.length > 0"
-        class="text-[11px] font-semibold uppercase tracking-wide text-muted"
-      >
+      <SectionLabel v-if="inherited.length > 0" as="p">
         {{ t('settings.riskPolicy.own.heading') }}
-      </p>
+      </SectionLabel>
       <RiskPolicyEditorRow
         v-for="policy in own"
         :key="policy.id"
@@ -217,10 +215,10 @@ function unhide(presetId: string) {
          whether it still shadows an account policy: one whose policy the account has since withdrawn
          withholds nothing, and reading it as a live opt-out would misstate what the board is doing. -->
     <section v-if="store.suppressions.length > 0 || suppressionsFailed" class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{ t('settings.riskPolicy.hidden.heading') }}
-      </p>
-      <p v-if="suppressionsFailed" class="text-[11px] text-app-warning-400">
+      </SectionLabel>
+      <p v-if="suppressionsFailed" class="text-2xs text-app-warning-400">
         {{ t('settings.riskPolicy.hidden.loadFailed') }}
       </p>
       <div
@@ -230,8 +228,8 @@ function unhide(presetId: string) {
         data-testid="risk-policy-hidden-row"
         :data-policy-id="entry.id"
       >
-        <span class="flex-1 truncate text-[12px] text-toned">{{ entry.name }}</span>
-        <span v-if="!entry.inherited" class="text-[11px] text-dimmed">
+        <span class="flex-1 truncate text-xs text-toned">{{ entry.name }}</span>
+        <span v-if="!entry.inherited" class="text-2xs text-dimmed">
           {{ t('settings.riskPolicy.hidden.withdrawn') }}
         </span>
         <UButton