@cat-factory/app 0.308.0 → 0.310.0

package/app/components/panels/inspector/ServiceValidationConfig.vue

@@ -234,7 +234,7 @@ async function clear() {
         />
       </UFormField>
 
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{ t('inspector.validationChecks.hint') }}
       </p>
 
@@ -273,7 +273,7 @@ async function clear() {
         />
       </div>
 
-      <p v-if="rows.length === 0" class="text-[11px] text-dimmed" data-testid="validation-empty">
+      <p v-if="rows.length === 0" class="text-2xs text-dimmed" data-testid="validation-empty">
         {{ t('inspector.validationChecks.empty') }}
       </p>
 

package/app/components/panels/inspector/TaskAgentConfig.vue

@@ -58,7 +58,7 @@ function setValue(id: string, value: string) {
   >
     <div v-for="d in descriptors" :key="d.id" class="space-y-1">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] text-muted">{{ d.label }}</span>
+        <span class="text-2xs text-muted">{{ d.label }}</span>
         <div class="flex items-center gap-1.5">
           <UIcon
             v-if="isFrozen(d.agentKind)"
@@ -81,7 +81,7 @@ function setValue(id: string, value: string) {
           {{ opt.label }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">{{ d.description }}</p>
+      <p class="text-2xs leading-snug text-dimmed">{{ d.description }}</p>
     </div>
   </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskAprioriBranches.vue

@@ -15,6 +15,7 @@
 // mint the user's branch name across every involved repo).
 import { aprioriWorkingBranch } from '@cat-factory/contracts'
 import type { AprioriBranch, Block } from '~/types/domain'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -150,9 +151,9 @@ function removeDisabled(entry: AprioriBranch): boolean {
 <template>
   <div v-if="repo" data-testid="apriori-branches">
     <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('inspector.aprioriBranches.title') }}
-      </span>
+      </SectionLabel>
     </div>
 
     <!-- Attached branches: one row each — name, mode badge + toggle, remove. -->
@@ -220,14 +221,14 @@ function removeDisabled(entry: AprioriBranch): boolean {
       class="w-full"
       data-testid="apriori-branch-search"
     />
-    <div v-else class="text-[11px] text-dimmed">
+    <div v-else class="text-2xs text-dimmed">
       {{ t('inspector.aprioriBranches.connectFirst') }}
     </div>
 
     <!-- A protected branch pushed to by the run is likely to be rejected — warn, don't block. -->
     <div
       v-if="workingName && isProtected(workingName)"
-      class="mt-1.5 flex items-start gap-1.5 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-[11px] text-app-warning-200/90"
+      class="mt-1.5 flex items-start gap-1.5 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-2xs text-app-warning-200/90"
       data-testid="apriori-branch-protected-warning"
     >
       <UIcon
@@ -237,7 +238,7 @@ function removeDisabled(entry: AprioriBranch): boolean {
       <span>{{ t('inspector.aprioriBranches.protectedWarning', { branch: workingName }) }}</span>
     </div>
 
-    <div class="mt-1 text-[11px] text-dimmed">
+    <div class="mt-1 text-2xs text-dimmed">
       {{ t('inspector.aprioriBranches.hint') }}
       <template v-if="isMultiRepo">
         {{ t('inspector.aprioriBranches.multiRepoHint') }}

package/app/components/panels/inspector/TaskDependencies.vue

@@ -86,7 +86,7 @@ async function removeDep(dep: Block) {
       icon="i-lucide-git-branch"
       :title="t('inspector.dependencies.empty')"
     />
-    <div v-if="!runnable" class="text-[10px] text-app-warning-400">
+    <div v-if="!runnable" class="text-3xs text-app-warning-400">
       {{ t('inspector.dependencies.blocked') }}
     </div>
   </InspectorSection>

package/app/components/panels/inspector/TaskEstimateBadge.vue

@@ -79,12 +79,8 @@ function barClass(n: number): string {
     default-open
   >
     <div class="space-y-1.5 rounded-lg border border-default bg-default/40 p-2.5">
-      <p class="text-[11px] text-dimmed" data-testid="task-estimate-basis">{{ basisLabel }}</p>
-      <p
-        v-if="supersededLabel"
-        class="text-[11px] text-dimmed"
-        data-testid="task-estimate-superseded"
-      >
+      <p class="text-2xs text-dimmed" data-testid="task-estimate-basis">{{ basisLabel }}</p>
+      <p v-if="supersededLabel" class="text-2xs text-dimmed" data-testid="task-estimate-superseded">
         {{ supersededLabel }}
       </p>
       <div v-for="axis in AXES" :key="axis.key" class="flex items-center gap-2">
@@ -98,7 +94,7 @@ function barClass(n: number): string {
         </div>
         <span
           v-if="axis.was"
-          class="shrink-0 text-[11px] tabular-nums text-dimmed"
+          class="shrink-0 text-2xs tabular-nums text-dimmed"
           :data-testid="`task-estimate-was-${axis.key}`"
           >{{ t('inspector.estimate.was', { value: axis.was }) }}</span
         >

package/app/components/panels/inspector/TaskExecution.vue

@@ -22,6 +22,7 @@ import MergeEffortChips from '~/components/merge/MergeEffortChips.vue'
 import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 import { inputGateNoticeFor } from '~/utils/inputGate'
 import { composeRunOutcome, hasOutcomeToShow } from '~/utils/runOutcome'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -306,9 +307,9 @@ async function mergePr() {
     <div v-if="instance">
       <div class="mb-1 flex items-center justify-between">
         <span class="flex min-w-0 items-center gap-1.5">
-          <span class="truncate text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="span" class="truncate">
             {{ instance.pipelineName }}
-          </span>
+          </SectionLabel>
           <!-- A sandboxed run looks exactly like one that simply has not reached the merge yet,
                right up until it stops there, so it says what it is from the start. -->
           <UBadge
@@ -385,9 +386,10 @@ async function mergePr() {
           <div class="flex items-center gap-2">
             <!-- Every agent is clickable: it opens the step-detail overlay (timing,
                  model, subtasks + the prose output when there is one). -->
-            <button
-              type="button"
-              class="flex min-w-0 cursor-pointer items-center gap-2 text-start transition hover:text-highlighted"
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex min-w-0 cursor-pointer items-center gap-2 p-0 text-start transition hover:bg-transparent hover:text-highlighted"
               data-testid="run-step-open"
               :title="
                 stepHasOutput(s)
@@ -406,7 +408,7 @@ async function mergePr() {
               </span>
               <span
                 v-if="isCompanionKind(s.agentKind)"
-                class="shrink-0 rounded bg-accented/60 px-1 text-[9px] font-medium uppercase tracking-wide text-toned"
+                class="shrink-0 rounded-sm bg-accented/60 px-1 text-3xs font-medium uppercase tracking-wide text-toned"
                 :title="t('inspector.execution.companionTooltip')"
               >
                 {{ t('inspector.execution.companion') }}
@@ -415,10 +417,10 @@ async function mergePr() {
                 :name="stepHasOutput(s) ? 'i-lucide-book-open-text' : 'i-lucide-info'"
                 class="h-3.5 w-3.5 shrink-0 text-dimmed"
               />
-            </button>
+            </UButton>
             <span
               v-if="s.subtasks && s.subtasks.total > 0"
-              class="ms-auto font-mono text-[10px] tabular-nums text-toned"
+              class="ms-auto font-mono text-3xs tabular-nums text-toned"
               data-testid="run-subtasks"
               :title="
                 s.subtasks.inProgress > 0
@@ -436,7 +438,7 @@ async function mergePr() {
               {{ s.subtasks.completed }}/{{ s.subtasks.total }}
             </span>
             <span
-              class="inline-flex items-center gap-1 text-[10px]"
+              class="inline-flex items-center gap-1 text-3xs"
               :class="[
                 stepFailed(s) ? 'text-app-error-400' : 'text-muted',
                 { 'ms-auto': !s.subtasks },
@@ -467,7 +469,7 @@ async function mergePr() {
                  indicator, NOT a "Review" gate (the human is summoned only if needed) -->
             <span
               v-else-if="reviews.isBackground(s.agentKind, block.id) && reviewStage"
-              class="inline-flex shrink-0 items-center gap-1 text-[10px] text-primary"
+              class="inline-flex shrink-0 items-center gap-1 text-3xs text-primary"
             >
               <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
               {{ reviewStageLabel }}
@@ -560,7 +562,7 @@ async function mergePr() {
           </div>
           <div
             v-if="s.model"
-            class="mt-0.5 flex items-center gap-1 ps-6 text-[10px] text-dimmed"
+            class="mt-0.5 flex items-center gap-1 ps-6 text-3xs text-dimmed"
             :title="s.model"
           >
             <UIcon name="i-lucide-cpu" class="h-3 w-3" />
@@ -569,7 +571,7 @@ async function mergePr() {
           <!-- Prompt-fragment standards the library selected for this step. -->
           <div
             v-if="s.selectedFragmentIds && s.selectedFragmentIds.length"
-            class="mt-0.5 flex flex-wrap items-center gap-1 ps-6 text-[10px] text-dimmed"
+            class="mt-0.5 flex flex-wrap items-center gap-1 ps-6 text-3xs text-dimmed"
             :title="
               t('inspector.execution.fragmentsTooltip', {
                 fragments: s.selectedFragmentIds.join(', '),
@@ -589,7 +591,7 @@ async function mergePr() {
                completed/skipped, so it's clear whether a fix pass ran. -->
           <div
             v-if="gateCompanionFor(s, runFailed)"
-            class="mt-0.5 flex items-center gap-1.5 ps-6 text-[10px]"
+            class="mt-0.5 flex items-center gap-1.5 ps-6 text-3xs"
           >
             <UIcon
               :name="agentKindMeta(gateCompanionFor(s, runFailed)!.kind).icon"
@@ -641,9 +643,9 @@ async function mergePr() {
 
     <!-- Open PR: link straight to it on GitHub -->
     <div v-if="pr" class="space-y-2">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('inspector.execution.pullRequest') }}
-      </span>
+      </SectionLabel>
       <UButton
         :to="pr.url"
         target="_blank"
@@ -663,7 +665,7 @@ async function mergePr() {
           </UBadge>
         </span>
       </UButton>
-      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-[10px] text-dimmed">
+      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-3xs text-dimmed">
         <UIcon name="i-lucide-git-branch" class="h-3 w-3 shrink-0" />
         <span class="truncate" :title="pr.branch">{{ pr.branch }}</span>
       </p>

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -9,6 +9,7 @@ import InspectorSection from '~/components/panels/inspector/InspectorSection.vue
 import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import TaskAprioriBranches from '~/components/panels/inspector/TaskAprioriBranches.vue'
 import DocReferenceRepos from '~/components/panels/inspector/DocReferenceRepos.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -283,9 +284,9 @@ const technicalLabel = computed(() => {
     <!-- pipeline -->
     <div>
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.pipeline') }}
-        </span>
+        </SectionLabel>
         <PipelinePicker
           :model-value="block.pipelineId ?? ''"
           :options="selectablePipelines"
@@ -314,10 +315,10 @@ const technicalLabel = computed(() => {
           {{ selectedPipeline.name }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.pipelineEmpty') }}
       </div>
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.runSettings.pipelineHint') }}
       </p>
     </div>
@@ -325,9 +326,9 @@ const technicalLabel = computed(() => {
     <!-- merge policy preset (advanced, or basic with an override already set) -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.riskPolicyId)">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.mergePolicy') }}
-        </span>
+        </SectionLabel>
         <RiskPolicyPicker
           :model-value="block.riskPolicyId ?? ''"
           :options="riskPolicies.presets"
@@ -347,7 +348,7 @@ const technicalLabel = computed(() => {
           </template>
         </RiskPolicyPicker>
       </div>
-      <div v-if="selectedPreset" class="text-[11px] text-muted">
+      <div v-if="selectedPreset" class="text-2xs text-muted">
         <i18n-t
           v-if="selectedPreset.autoMergeEnabled"
           keypath="inspector.runSettings.riskPolicyDetail"
@@ -373,10 +374,10 @@ const technicalLabel = computed(() => {
           t('inspector.runSettings.workspaceDefaultParen')
         }}</span>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.riskPolicyEmpty') }}
       </div>
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.runSettings.mergePolicyHint') }}
       </p>
     </div>
@@ -384,9 +385,9 @@ const technicalLabel = computed(() => {
     <!-- model preset (advanced, or basic with an override already set) -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.modelPresetId)">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.modelPreset') }}
-        </span>
+        </SectionLabel>
         <UDropdownMenu :items="modelPresetMenu">
           <UButton
             size="xs"
@@ -397,7 +398,7 @@ const technicalLabel = computed(() => {
           />
         </UDropdownMenu>
       </div>
-      <div v-if="selectedModelPreset" class="text-[11px] text-muted">
+      <div v-if="selectedModelPreset" class="text-2xs text-muted">
         <span class="text-toned">{{ selectedModelPreset.name }}</span>
         {{ t('inspector.runSettings.modelPresetBase', { model: selectedModelPreset.baseModelId })
         }}<span v-if="Object.keys(selectedModelPreset.overrides).length">{{
@@ -412,12 +413,12 @@ const technicalLabel = computed(() => {
           t('inspector.runSettings.workspaceDefaultParen')
         }}</span>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.modelPresetEmpty') }}
       </div>
       <div
         v-if="unavailablePresetModels.length"
-        class="mt-2 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-[11px] text-app-warning-200/90"
+        class="mt-2 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-2xs text-app-warning-200/90"
       >
         <div class="flex items-start gap-1.5">
           <UIcon
@@ -433,23 +434,27 @@ const technicalLabel = computed(() => {
               </i18n-t>
             </p>
             <div class="mt-1.5 flex flex-wrap gap-2">
-              <button
-                class="font-medium text-app-warning-100 underline-offset-2 hover:underline"
+              <UButton
+                color="neutral"
+                variant="link"
+                class="p-0 text-xs font-medium text-app-warning-100 underline-offset-2 hover:underline"
                 @click="ui.openModelConfig()"
               >
                 {{ t('inspector.runSettings.editPresets') }}
-              </button>
-              <button
-                class="font-medium text-app-warning-100 underline-offset-2 hover:underline"
+              </UButton>
+              <UButton
+                color="neutral"
+                variant="link"
+                class="p-0 text-xs font-medium text-app-warning-100 underline-offset-2 hover:underline"
                 @click="ui.openVendorCredentials()"
               >
                 {{ t('inspector.runSettings.configureVendors') }}
-              </button>
+              </UButton>
             </div>
           </div>
         </div>
       </div>
-      <p class="mt-1 text-[11px] text-dimmed">
+      <p class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.modelPresetHint') }}
         {{ t('inspector.runSettings.modelPresetChangeHint') }}
       </p>
@@ -458,9 +463,9 @@ const technicalLabel = computed(() => {
     <!-- technical label (tri-state) — unset lets the engine infer it -->
     <div v-if="showOverrideField(uiMode.isAdvanced, block.technical)">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.taskKind') }}
-        </span>
+        </SectionLabel>
         <UDropdownMenu :items="technicalMenu">
           <UButton
             size="xs"
@@ -473,7 +478,7 @@ const technicalLabel = computed(() => {
           </UButton>
         </UDropdownMenu>
       </div>
-      <div class="text-[11px] text-dimmed">
+      <div class="text-2xs text-dimmed">
         <template v-if="block.technical === true">
           {{ t('inspector.runSettings.technicalHint.technical') }}
         </template>
@@ -489,9 +494,9 @@ const technicalLabel = computed(() => {
     <!-- involved services: connected services this task spans (envs + possible code changes) -->
     <div data-testid="involved-services">
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.involvedServices') }}
-        </span>
+        </SectionLabel>
       </div>
       <div v-if="connectedServices.length" class="space-y-1">
         <UCheckbox
@@ -504,7 +509,7 @@ const technicalLabel = computed(() => {
           @update:model-value="(v: boolean | 'indeterminate') => toggleInvolved(s.id, v === true)"
         />
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.involvedServicesEmpty') }}
       </div>
       <div v-if="staleInvolvedServices.length" class="mt-1 flex flex-wrap gap-1">
@@ -519,7 +524,7 @@ const technicalLabel = computed(() => {
           {{ board.getBlock(id)?.title ?? id }}
         </UBadge>
       </div>
-      <div class="mt-1 text-[11px] text-dimmed">
+      <div class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.involvedServicesHint') }}
       </div>
     </div>
@@ -543,15 +548,13 @@ const technicalLabel = computed(() => {
       "
     >
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.issueWriteback') }}
-        </span>
+        </SectionLabel>
       </div>
       <div class="space-y-1.5">
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-muted">{{
-            t('inspector.runSettings.commentOnPrOpen')
-          }}</span>
+          <span class="text-2xs text-muted">{{ t('inspector.runSettings.commentOnPrOpen') }}</span>
           <UDropdownMenu :items="writebackMenu(setCommentOnPrOpen)">
             <UButton
               size="xs"
@@ -564,7 +567,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-muted">{{ t('inspector.runSettings.closeOnMerge') }}</span>
+          <span class="text-2xs text-muted">{{ t('inspector.runSettings.closeOnMerge') }}</span>
           <UDropdownMenu :items="writebackMenu(setResolveOnMerge)">
             <UButton
               size="xs"
@@ -577,9 +580,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[11px] text-muted">{{
-            t('inspector.runSettings.questionsOnPark')
-          }}</span>
+          <span class="text-2xs text-muted">{{ t('inspector.runSettings.questionsOnPark') }}</span>
           <UDropdownMenu :items="writebackMenu(setQuestionsOnPark)">
             <UButton
               size="xs"
@@ -592,7 +593,7 @@ const technicalLabel = computed(() => {
           </UDropdownMenu>
         </div>
       </div>
-      <div class="mt-1 text-[11px] text-dimmed">
+      <div class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.writebackHint') }}
       </div>
     </div>
@@ -600,9 +601,9 @@ const technicalLabel = computed(() => {
     <!-- responsible product person -->
     <div>
       <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.responsibleProduct') }}
-        </span>
+        </SectionLabel>
         <UDropdownMenu :items="responsibleMenu">
           <UButton
             size="xs"
@@ -624,7 +625,7 @@ const technicalLabel = computed(() => {
           {{ responsibleLabel }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
-      <div v-else class="text-[11px] text-dimmed">
+      <div v-else class="text-2xs text-dimmed">
         {{ t('inspector.runSettings.responsibleEmpty') }}
       </div>
     </div>
@@ -632,16 +633,16 @@ const technicalLabel = computed(() => {
     <!-- auto-start dependents: when this task merges, start the tasks that depend on it -->
     <div>
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('inspector.runSettings.autoStartDependents') }}
-        </span>
+        </SectionLabel>
         <USwitch
           size="sm"
           :model-value="block.autoStartDependents ?? false"
           @update:model-value="setAutoStartDependents"
         />
       </div>
-      <div class="mt-1 text-[11px] text-dimmed">
+      <div class="mt-1 text-2xs text-dimmed">
         {{ t('inspector.runSettings.autoStartHint') }}
       </div>
     </div>

package/app/components/panels/inspector/TaskStructure.vue

@@ -2,6 +2,7 @@
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -83,9 +84,9 @@ function setFragments(ids: string[]) {
   <InspectorSection :title="t('inspector.structure.title')" :hint="t('inspector.structure.hint')">
     <!-- module assignment -->
     <div>
-      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel class="mb-1">
         {{ t('inspector.structure.module') }}
-      </div>
+      </SectionLabel>
       <USelectMenu
         :model-value="selectedModule"
         :items="moduleOptions"
@@ -99,7 +100,7 @@ function setFragments(ids: string[]) {
         @update:model-value="setModule"
         @create="setModule"
       />
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.structure.moduleHint') }}
       </p>
     </div>
@@ -113,7 +114,7 @@ function setFragments(ids: string[]) {
         :empty-text="t('inspector.structure.bestPracticesEmpty')"
         @update:model-value="setFragments"
       />
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('inspector.structure.bestPracticesHint') }}
       </p>
     </div>

package/app/components/pipeline/AgentPromptEditor.vue

@@ -10,6 +10,7 @@ import {
   isRevisionConflict,
   saveIntent,
 } from '~/components/pipeline/AgentPromptEditor.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The per-workspace system-prompt editor for ONE agent kind, opened from the pipeline builder
 // (where the kinds are actually chosen). It edits the SHIPPED track prompt only: the platform
@@ -192,14 +193,14 @@ function revisionLabel(revision: AgentPromptRevision): string {
         <!-- The workspace-wide output ceiling for this kind. Same per-agent-kind scope as the
              prompt below it; saves on change, since there is no revision log to commit to. -->
         <div class="flex flex-wrap items-center gap-2">
-          <span class="text-[11px] text-muted">{{ t('pipeline.outputBudget.kindLabel') }}</span>
+          <span class="text-2xs text-muted">{{ t('pipeline.outputBudget.kindLabel') }}</span>
           <OutputBudgetInput
             class="w-32"
             :model-value="budget"
             :disabled="agentSettings.saving"
             @update:model-value="saveBudget"
           />
-          <span class="text-[10px] text-dimmed">
+          <span class="text-3xs text-dimmed">
             {{ t('pipeline.outputBudget.kindHint') }}
           </span>
         </div>
@@ -207,7 +208,7 @@ function revisionLabel(revision: AgentPromptRevision): string {
         <!-- What the platform appends is SHOWN, not described. A prose summary of it is copy
              that silently goes stale the moment a directive is added, and a user who does not
              know what is already there writes a prompt that fights it. -->
-        <p v-if="directives" class="text-[11px] leading-relaxed text-dimmed">
+        <p v-if="directives" class="text-2xs leading-relaxed text-dimmed">
           {{ t('agentPrompt.managedNotice') }}
           <UButton
             variant="link"
@@ -222,11 +223,11 @@ function revisionLabel(revision: AgentPromptRevision): string {
           v-if="directives && showDirectives"
           class="rounded-md border border-default bg-app-950/60 p-2"
         >
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('agentPrompt.appendedHeading') }}
-          </h4>
+          </SectionLabel>
           <pre
-            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-toned"
+            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-2xs text-toned"
             >{{ directives.trim() }}</pre>
         </div>
 
@@ -278,25 +279,25 @@ function revisionLabel(revision: AgentPromptRevision): string {
           >
             {{ showBuiltin ? t('agentPrompt.hideBuiltin') : t('agentPrompt.showBuiltin') }}
           </UButton>
-          <span v-if="restoredFrom !== undefined" class="text-[11px] text-muted">
+          <span v-if="restoredFrom !== undefined" class="text-2xs text-muted">
             {{ t('agentPrompt.restoringFrom', { n: restoredFrom }) }}
           </span>
         </div>
 
         <div v-if="showBuiltin" class="rounded-md border border-default bg-app-950/60 p-2">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('agentPrompt.builtinHeading') }}
-          </h4>
+          </SectionLabel>
           <pre
-            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-toned"
+            class="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-2xs text-toned"
             >{{ detail.builtinText }}</pre>
         </div>
 
         <div>
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('agentPrompt.historyHeading') }}
-          </h4>
-          <p v-if="!detail.revisions.length" class="text-[11px] text-dimmed">
+          </SectionLabel>
+          <p v-if="!detail.revisions.length" class="text-2xs text-dimmed">
             {{ t('agentPrompt.historyEmpty') }}
           </p>
           <ul v-else class="max-h-52 divide-y divide-default overflow-y-auto text-xs">
@@ -316,7 +317,7 @@ function revisionLabel(revision: AgentPromptRevision): string {
               <span class="min-w-0 flex-1 truncate text-toned">
                 {{ revisionLabel(revision) }}
               </span>
-              <span class="shrink-0 text-[11px] text-dimmed">
+              <span class="shrink-0 text-2xs text-dimmed">
                 {{ d(new Date(revision.createdAt), 'short') }}
               </span>
               <UButton