@cat-factory/app 0.307.1 → 0.309.0

package/app/components/pipeline/BinaryOutputStepPicker.vue

@@ -473,7 +473,7 @@ const declaredFormats = computed(() => {
 <template>
   <div class="ms-6 flex flex-col gap-1.5" data-testid="binary-output-picker">
     <div class="flex items-center gap-2">
-      <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryOutputStorage') }}</span>
+      <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryOutputStorage') }}</span>
       <USelect
         class="w-56"
         :model-value="config?.storageServiceId ?? ''"
@@ -488,7 +488,7 @@ const declaredFormats = computed(() => {
     </div>
 
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryOutputContext') }}</span>
+      <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryOutputContext') }}</span>
       <USelectMenu
         class="w-56"
         multiple
@@ -503,9 +503,7 @@ const declaredFormats = computed(() => {
     </div>
 
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-dimmed">{{
-        t('pipeline.builder.binaryOutputGenerators')
-      }}</span>
+      <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryOutputGenerators') }}</span>
       <USelectMenu
         class="w-56"
         multiple
@@ -521,9 +519,7 @@ const declaredFormats = computed(() => {
     </div>
 
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-dimmed">{{
-        t('pipeline.builder.binaryOutputModalities')
-      }}</span>
+      <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryOutputModalities') }}</span>
       <USelectMenu
         class="w-56"
         multiple
@@ -541,9 +537,7 @@ const declaredFormats = computed(() => {
          under them. Both tiers: like the rest of this picker it is not an override of a default —
          a format nobody stated is a format the run does not check. -->
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-dimmed">{{
-        t('pipeline.builder.binaryOutputMediaTypes')
-      }}</span>
+      <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryOutputMediaTypes') }}</span>
       <UInput
         class="w-56"
         :model-value="mediaTypeText"
@@ -556,7 +550,7 @@ const declaredFormats = computed(() => {
     </div>
     <p
       v-if="config?.storageServiceId && declaredFormats.length"
-      class="ms-1 text-[10px] text-dimmed"
+      class="ms-1 text-3xs text-dimmed"
       data-testid="binary-output-declared-formats"
     >
       {{
@@ -572,7 +566,7 @@ const declaredFormats = computed(() => {
          option nobody stated is an option the run does not apply. -->
     <template v-if="config?.storageServiceId">
       <div v-if="offers('reference-image')" class="flex items-start gap-2">
-        <span class="mt-1 text-[10px] text-dimmed">{{
+        <span class="mt-1 text-3xs text-dimmed">{{
           t('pipeline.builder.binaryReferenceImages')
         }}</span>
         <UTextarea
@@ -588,7 +582,7 @@ const declaredFormats = computed(() => {
       </div>
       <p
         v-if="unusableReferences.length"
-        class="ms-1 text-[10px] text-app-warning-400"
+        class="ms-1 text-3xs text-app-warning-400"
         data-testid="binary-output-reference-unusable"
       >
         {{
@@ -599,7 +593,7 @@ const declaredFormats = computed(() => {
       </p>
 
       <div v-if="offers('instruction-edit') || offers('mask-edit')" class="flex items-center gap-2">
-        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryEditMode') }}</span>
+        <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryEditMode') }}</span>
         <USelect
           class="w-56"
           size="xs"
@@ -618,9 +612,7 @@ const declaredFormats = computed(() => {
         />
       </div>
       <div v-if="generation.edit" class="flex items-center gap-2">
-        <span class="text-[10px] text-dimmed">{{
-          t('pipeline.builder.binaryEditInstruction')
-        }}</span>
+        <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryEditInstruction') }}</span>
         <UInput
           class="w-56"
           size="xs"
@@ -636,9 +628,7 @@ const declaredFormats = computed(() => {
       </div>
 
       <div v-if="offers('negative-prompt')" class="flex items-center gap-2">
-        <span class="text-[10px] text-dimmed">{{
-          t('pipeline.builder.binaryNegativePrompt')
-        }}</span>
+        <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryNegativePrompt') }}</span>
         <UInput
           class="w-56"
           size="xs"
@@ -652,7 +642,7 @@ const declaredFormats = computed(() => {
       </div>
 
       <div v-if="offers('aspect-ratio')" class="flex items-center gap-2">
-        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryAspectRatio') }}</span>
+        <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryAspectRatio') }}</span>
         <UInput
           class="w-56"
           size="xs"
@@ -670,7 +660,7 @@ const declaredFormats = computed(() => {
            exists to remove. -->
       <div v-if="offers('exact-size')" class="flex flex-col gap-1">
         <div class="flex items-center gap-2">
-          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryOutputSize') }}</span>
+          <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryOutputSize') }}</span>
           <UInput
             class="w-24"
             type="number"
@@ -680,7 +670,7 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-size-width"
             @change="setOutputSize('width', ($event.target as HTMLInputElement).value)"
           />
-          <span class="text-[10px] text-dimmed">×</span>
+          <span class="text-3xs text-dimmed">×</span>
           <UInput
             class="w-24"
             type="number"
@@ -696,7 +686,7 @@ const declaredFormats = computed(() => {
              that does not carry the requirement. -->
         <p
           v-if="outputSizeIncomplete"
-          class="text-[10px] text-app-warning-400"
+          class="text-3xs text-app-warning-400"
           data-testid="binary-output-size-incomplete"
         >
           {{ t('pipeline.builder.binaryOutputSizeIncomplete') }}
@@ -704,7 +694,7 @@ const declaredFormats = computed(() => {
       </div>
 
       <div v-if="offers('seed')" class="flex items-center gap-2">
-        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binarySeed') }}</span>
+        <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binarySeed') }}</span>
         <UInput
           class="w-56"
           type="number"
@@ -731,7 +721,7 @@ const declaredFormats = computed(() => {
               setGeneration({ transparentBackground: $event ? true : undefined })
             "
           />
-          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryTransparent') }}</span>
+          <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryTransparent') }}</span>
         </label>
         <label v-if="offers('tileable')" class="flex items-center gap-1.5">
           <UCheckbox
@@ -739,7 +729,7 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-tileable"
             @update:model-value="setGeneration({ tileable: $event ? true : undefined })"
           />
-          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryTileable') }}</span>
+          <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryTileable') }}</span>
         </label>
         <label v-if="offers('upscale')" class="flex items-center gap-1.5">
           <UCheckbox
@@ -747,7 +737,7 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-upscale"
             @update:model-value="setGeneration({ upscale: $event ? 2 : undefined })"
           />
-          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryUpscale') }}</span>
+          <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryUpscale') }}</span>
         </label>
       </div>
 
@@ -759,10 +749,10 @@ const declaredFormats = computed(() => {
           data-testid="binary-output-comparison"
           @update:model-value="setComparison($event === true)"
         />
-        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryComparison') }}</span>
+        <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryComparison') }}</span>
       </label>
       <div v-if="config.comparison" class="ms-6 flex flex-wrap items-center gap-3">
-        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryPerGenerator') }}</span>
+        <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryPerGenerator') }}</span>
         <USelect
           class="w-20"
           size="xs"
@@ -777,12 +767,12 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-multi-select"
             @update:model-value="setMultiSelect($event === true)"
           />
-          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryMultiSelect') }}</span>
+          <span class="text-3xs text-dimmed">{{ t('pipeline.builder.binaryMultiSelect') }}</span>
         </label>
       </div>
       <p
         v-if="comparisonUnreachable"
-        class="text-[10px] text-app-warning-400"
+        class="text-3xs text-app-warning-400"
         data-testid="binary-output-comparison-unreachable"
       >
         {{ t('pipeline.builder.binaryComparisonUnreachable') }}
@@ -794,25 +784,25 @@ const declaredFormats = computed(() => {
          an untagged one, and a lost CONTEXT service is not a lost storage target. -->
     <p
       v-if="has('catalog_unavailable')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-unavailable"
     >
       {{ t('pipeline.builder.binaryOutputUnavailable') }}
     </p>
     <p
       v-else-if="has('no_storage_service')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-no-storage"
     >
       {{ t('pipeline.builder.binaryOutputNoStorage', { capability: ASSET_STORAGE_CAPABILITY }) }}
     </p>
-    <p v-if="has('unknown_service')" class="text-[10px] text-app-warning-400">
+    <p v-if="has('unknown_service')" class="text-3xs text-app-warning-400">
       {{ t('pipeline.builder.binaryOutputMissing') }}
     </p>
-    <p v-if="has('not_storage_capable')" class="text-[10px] text-app-warning-400">
+    <p v-if="has('not_storage_capable')" class="text-3xs text-app-warning-400">
       {{ t('pipeline.builder.binaryOutputNotStorage', { capability: ASSET_STORAGE_CAPABILITY }) }}
     </p>
-    <p v-if="has('unknown_context_service')" class="text-[10px] text-app-warning-400">
+    <p v-if="has('unknown_context_service')" class="text-3xs text-app-warning-400">
       {{
         t('pipeline.builder.binaryOutputContextMissing', {
           ids: pick.unknownContextIds.join(', '),
@@ -826,14 +816,14 @@ const declaredFormats = computed(() => {
          it says so and stops, exactly as run admission does. -->
     <p
       v-if="has('generators_unavailable')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-generators-unavailable"
     >
       {{ t('pipeline.builder.binaryOutputGeneratorsUnavailable') }}
     </p>
     <p
       v-if="has('unknown_generator')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-unknown-generator"
     >
       {{
@@ -844,7 +834,7 @@ const declaredFormats = computed(() => {
     </p>
     <p
       v-if="has('modality_uncovered')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-modality-uncovered"
     >
       {{
@@ -855,7 +845,7 @@ const declaredFormats = computed(() => {
     </p>
     <p
       v-if="has('media_type_uncovered')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-media-type-uncovered"
     >
       {{
@@ -870,7 +860,7 @@ const declaredFormats = computed(() => {
          would send someone editing a selection that is fine. -->
     <p
       v-if="has('media_type_unverifiable')"
-      class="text-[10px] text-dimmed"
+      class="text-3xs text-dimmed"
       data-testid="binary-output-media-type-unverifiable"
     >
       {{
@@ -886,7 +876,7 @@ const declaredFormats = computed(() => {
          mismatch. Silence here is what turned it into a surprise at the door. -->
     <p
       v-if="has('generator_harness_required')"
-      class="text-[10px] text-dimmed"
+      class="text-3xs text-dimmed"
       data-testid="binary-output-generator-harness"
     >
       {{ t('pipeline.builder.binaryOutputGeneratorHarness', { generators: harnessServedSummary }) }}
@@ -897,14 +887,14 @@ const declaredFormats = computed(() => {
          line carries is the step's own prompt, which is the field right beside it. -->
     <p
       v-if="has('generator_overlap')"
-      class="text-[10px] text-dimmed"
+      class="text-3xs text-dimmed"
       data-testid="binary-output-generator-overlap"
     >
       {{ t('pipeline.builder.binaryOutputGeneratorOverlap', { overlaps: overlapSummary }) }}
     </p>
     <p
       v-if="has('capability_unsupported')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-capability-unsupported"
     >
       {{
@@ -919,7 +909,7 @@ const declaredFormats = computed(() => {
     <p
       v-for="value in pick.unacceptedValues"
       :key="value.option"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-value-unaccepted"
     >
       {{
@@ -935,7 +925,7 @@ const declaredFormats = computed(() => {
          two values on this form. -->
     <p
       v-if="has('output_size_ambiguous')"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-size-ambiguous"
     >
       {{
@@ -950,7 +940,7 @@ const declaredFormats = computed(() => {
          selections in the product. -->
     <p
       v-if="has('capability_unverifiable')"
-      class="text-[10px] text-dimmed"
+      class="text-3xs text-dimmed"
       data-testid="binary-output-capability-unverifiable"
     >
       {{
@@ -965,7 +955,7 @@ const declaredFormats = computed(() => {
     <p
       v-for="value in pick.partiallyAcceptedValues"
       :key="value.option"
-      class="text-[10px] text-dimmed"
+      class="text-3xs text-dimmed"
       data-testid="binary-output-value-partial"
     >
       {{
@@ -980,7 +970,7 @@ const declaredFormats = computed(() => {
          another has not said what it takes, so the step starts and is served by the second. -->
     <p
       v-if="has('option_value_unverifiable')"
-      class="text-[10px] text-dimmed"
+      class="text-3xs text-dimmed"
       data-testid="binary-output-value-unverifiable"
     >
       {{
@@ -991,7 +981,7 @@ const declaredFormats = computed(() => {
     </p>
     <p
       v-if="unusableMediaTypes.length"
-      class="text-[10px] text-app-warning-400"
+      class="text-3xs text-app-warning-400"
       data-testid="binary-output-media-type-unusable"
     >
       {{

package/app/components/pipeline/EstimateThresholdFields.vue

@@ -54,7 +54,7 @@ function commit(axis: EstimateAxis, raw: string) {
 
 <template>
   <div class="flex flex-wrap items-center gap-2 border-t border-default pt-2">
-    <span class="text-[10px] text-dimmed" :title="t(OUTCOME_HINT_KEYS[outcome])">
+    <span class="text-3xs text-dimmed" :title="t(OUTCOME_HINT_KEYS[outcome])">
       {{ t('pipeline.builder.runWhenAny') }}
     </span>
     <template v-for="f in fields" :key="f.axis">
@@ -66,7 +66,7 @@ function commit(axis: EstimateAxis, raw: string) {
         min="0"
         max="1"
         step="0.1"
-        class="w-14 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
+        class="w-14 rounded-sm border border-muted bg-default px-1.5 py-0.5 text-app-100"
         @change="commit(f.axis, ($event.target as HTMLInputElement).value)"
       />
     </template>

package/app/components/pipeline/GateConfigFields.vue

@@ -119,7 +119,7 @@ const gateFieldValues = computed<DescriptorFieldValues>({
       v-if="gated"
       class="space-y-2 rounded-md border border-app-warning-800/40 bg-app-warning-950/10 p-2"
     >
-      <div class="flex flex-wrap items-center gap-2 text-[10px]">
+      <div class="flex flex-wrap items-center gap-2 text-3xs">
         <span class="text-dimmed">{{ t('pipeline.gateConfig.approversLabel') }}</span>
         <label
           v-for="role in APPROVER_ROLES"
@@ -136,7 +136,7 @@ const gateFieldValues = computed<DescriptorFieldValues>({
         </label>
       </div>
 
-      <div class="flex flex-wrap items-center gap-2 text-[10px]">
+      <div class="flex flex-wrap items-center gap-2 text-3xs">
         <span class="text-dimmed">{{ t('pipeline.gateConfig.namedApproversLabel') }}</span>
         <USelectMenu
           class="w-64"
@@ -151,7 +151,7 @@ const gateFieldValues = computed<DescriptorFieldValues>({
         />
       </div>
 
-      <div class="flex flex-wrap items-center gap-2 text-[10px]">
+      <div class="flex flex-wrap items-center gap-2 text-3xs">
         <label class="text-dimmed" :title="t('pipeline.gateConfig.requiredApprovalsHint')">
           {{ t('pipeline.gateConfig.requiredApprovalsLabel') }}
         </label>
@@ -161,14 +161,14 @@ const gateFieldValues = computed<DescriptorFieldValues>({
           min="1"
           :max="MAX_GATE_APPROVALS"
           step="1"
-          class="w-14 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
+          class="w-14 rounded-sm border border-muted bg-default px-1.5 py-0.5 text-app-100"
           data-testid="gate-required-approvals"
           @change="setRequiredApprovals(($event.target as HTMLInputElement).value)"
         />
         <span class="text-dimmed">{{ t('pipeline.gateConfig.requiredApprovalsHint') }}</span>
       </div>
 
-      <p v-if="!config.approvers" class="text-[10px] text-dimmed">
+      <p v-if="!config.approvers" class="text-3xs text-dimmed">
         {{ t('pipeline.gateConfig.anyoneHint') }}
       </p>
     </div>
@@ -179,7 +179,7 @@ const gateFieldValues = computed<DescriptorFieldValues>({
       v-if="gateFields?.length"
       class="space-y-2 rounded-md border border-default bg-default/40 p-2"
     >
-      <p class="text-[10px] text-dimmed">{{ t('pipeline.gateConfig.gateParametersLabel') }}</p>
+      <p class="text-3xs text-dimmed">{{ t('pipeline.gateConfig.gateParametersLabel') }}</p>
       <DescriptorFields
         v-model="gateFieldValues"
         :fields="gateFields"

package/app/components/pipeline/IterationCapPrompt.vue

@@ -38,7 +38,7 @@ const emit = defineEmits<{ resolve: [choice: IterationCapChoice] }>()
       <UIcon name="i-lucide-alert-triangle" class="h-5 w-5 shrink-0" />
       {{ heading }}
     </div>
-    <p class="mt-1 text-[12px] text-app-warning-200/80">{{ detail }}</p>
+    <p class="mt-1 text-xs text-app-warning-200/80">{{ detail }}</p>
     <div class="mt-3 flex flex-wrap gap-2">
       <UButton
         color="primary"

package/app/components/pipeline/PipelineBuilder.vue

@@ -28,6 +28,7 @@ import {
   mayCarrySkipAxis,
 } from '~/utils/catalog'
 import type { ConsensusStrategy } from '~/types/consensus'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 type DraftUnit = { index: number; kind: AgentKind; companionIndex: number | null }
 
@@ -423,9 +424,9 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
           data-testid="pipeline-builder-palette"
         >
           <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
-            <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('pipeline.builder.agentPalette') }}
-            </h3>
+            </SectionLabel>
             <UButton
               color="primary"
               variant="soft"
@@ -447,9 +448,9 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
           data-testid="pipeline-builder-draft"
         >
           <div class="mb-2 flex items-center justify-between gap-2">
-            <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('pipeline.builder.pipeline') }}
-            </h3>
+            </SectionLabel>
             <UButton
               color="neutral"
               variant="soft"
@@ -497,7 +498,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
             <input
               v-model="newLabel"
               :placeholder="t('pipeline.builder.labelPlaceholder')"
-              class="w-20 rounded border border-muted bg-default px-1.5 py-0.5 text-[11px] text-default focus:w-28"
+              class="w-20 rounded-sm border border-muted bg-default px-1.5 py-0.5 text-2xs text-default focus:w-28"
               @keydown.enter.prevent="addLabel"
               @blur="addLabel"
             />
@@ -508,7 +509,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
           <p
             v-for="warning in draftWarnings"
             :key="warning.key"
-            class="mb-2 flex items-center gap-1.5 rounded-md border border-app-warning-800/50 bg-app-warning-950/30 px-2 py-1 text-[11px] text-app-warning-300"
+            class="mb-2 flex items-center gap-1.5 rounded-md border border-app-warning-800/50 bg-app-warning-950/30 px-2 py-1 text-2xs text-app-warning-300"
             :data-testid="warning.testId"
           >
             <UIcon name="i-lucide-alert-triangle" class="h-3.5 w-3.5 shrink-0" />
@@ -533,7 +534,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
               :data-gated="pipelines.draftGates[unit.index] === true"
             >
               <div class="flex items-center gap-1.5">
-                <span class="w-4 shrink-0 text-center text-[10px] text-dimmed">{{ vi + 1 }}</span>
+                <span class="w-4 shrink-0 text-center text-3xs text-dimmed">{{ vi + 1 }}</span>
                 <AgentKindIcon :kind="unit.kind" icon-class="h-4 w-4" />
                 <span
                   class="min-w-0 flex-1 truncate text-xs text-app-100"
@@ -785,10 +786,10 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   :disabled="!skillSelectItems.length"
                   @update:model-value="pipelines.setDraftSkillId(unit.index, $event)"
                 />
-                <p v-if="!skillSelectItems.length" class="text-[10px] text-dimmed">
+                <p v-if="!skillSelectItems.length" class="text-3xs text-dimmed">
                   {{ t('pipeline.builder.skillNoneAvailable') }}
                 </p>
-                <p v-else-if="skillMissing(unit.index)" class="text-[10px] text-app-warning-400">
+                <p v-else-if="skillMissing(unit.index)" class="text-3xs text-app-warning-400">
                   {{ t('pipeline.builder.skillMissing') }}
                 </p>
               </div>
@@ -801,7 +802,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                 v-if="showVariantPicker(unit.index, unit.kind)"
                 class="ms-6 flex items-center gap-2"
               >
-                <span class="text-[10px] text-dimmed">
+                <span class="text-3xs text-dimmed">
                   {{ t('pipeline.builder.variantLabel') }}
                 </span>
                 <USelect
@@ -842,7 +843,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                  setting (itself an override of the deployment routing default), so it is
                  advanced-only until a value is pinned; empty inherits. -->
               <div v-if="showOutputBudget(unit.index)" class="ms-6 flex items-center gap-2">
-                <span class="text-[10px] text-dimmed">
+                <span class="text-3xs text-dimmed">
                   {{ t('pipeline.outputBudget.stepLabel') }}
                 </span>
                 <OutputBudgetInput
@@ -934,7 +935,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     <UIcon name="i-lucide-layers" class="h-3.5 w-3.5 text-app-success-400" />
                     <span class="text-toned">{{ t('pipeline.builder.consensusGroups') }}</span>
                   </div>
-                  <p class="text-[11px] text-dimmed">
+                  <p class="text-2xs text-dimmed">
                     {{ t('pipeline.builder.consensusGroupsHint') }}
                   </p>
                   <div class="flex flex-wrap gap-1">
@@ -942,7 +943,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                       v-for="group in consensusGroups.groups"
                       :key="group.id"
                       type="button"
-                      class="rounded border px-1.5 py-0.5 text-[11px]"
+                      class="rounded-sm border px-1.5 py-0.5 text-2xs"
                       :class="
                         isGroupSelected(unit.index, group.id)
                           ? 'border-app-success-600 bg-app-success-900/40 text-app-success-200'
@@ -957,7 +958,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   </div>
                 </div>
 
-                <div v-if="usesGroups(unit.index)" class="text-[11px] text-dimmed">
+                <div v-if="usesGroups(unit.index)" class="text-2xs text-dimmed">
                   {{ t('pipeline.builder.consensusGroupsActive') }}
                 </div>
 
@@ -966,7 +967,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     <label class="text-muted">{{ t('pipeline.builder.strategy') }}</label>
                     <select
                       v-model="pipelines.draftConsensus[unit.index]!.strategy"
-                      class="rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
+                      class="rounded-sm border border-muted bg-default px-1.5 py-0.5 text-app-100"
                     >
                       <option v-for="s in CONSENSUS_STRATEGIES" :key="s.value" :value="s.value">
                         {{ s.label }}
@@ -984,7 +985,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                       min="1"
                       max="5"
                       placeholder="2"
-                      class="w-12 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
+                      class="w-12 rounded-sm border border-muted bg-default px-1.5 py-0.5 text-app-100"
                     />
                   </div>
 
@@ -998,12 +999,12 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                       <input
                         v-model="p.role"
                         :placeholder="t('pipeline.builder.rolePlaceholder')"
-                        class="w-28 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
+                        class="w-28 rounded-sm border border-muted bg-default px-1.5 py-0.5 text-app-100"
                       />
                       <input
                         v-model="p.modelId"
                         :placeholder="t('pipeline.builder.modelIdPlaceholder')"
-                        class="flex-1 rounded border border-muted bg-default px-1.5 py-0.5 text-toned"
+                        class="flex-1 rounded-sm border border-muted bg-default px-1.5 py-0.5 text-toned"
                       />
                       <UButton
                         icon="i-lucide-x"
@@ -1103,9 +1104,9 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
              moved to the task card / inspector when the palettes were removed). -->
         <div v-if="pipelines.pipelines.length" class="flex flex-col lg:min-h-0 lg:overflow-hidden">
           <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
-            <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('pipeline.builder.savedPipelines') }}
-            </h3>
+            </SectionLabel>
             <UButton
               v-if="library.archivedInScope"
               :icon="showArchived ? 'i-lucide-archive-restore' : 'i-lucide-archive'"
@@ -1157,7 +1158,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                narrows and whose every change is saved. -->
           <div
             v-if="browseEveryPurpose || library.hiddenByPurpose"
-            class="mb-2 flex shrink-0 flex-wrap items-center gap-x-2 px-1 text-[10px] text-dimmed"
+            class="mb-2 flex shrink-0 flex-wrap items-center gap-x-2 px-1 text-3xs text-dimmed"
           >
             <span>
               {{
@@ -1249,7 +1250,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   >
                     {{ t('pipeline.builder.scopeDefault.unattended') }}
                   </UBadge>
-                  <span class="shrink-0 text-[10px] text-dimmed">
+                  <span class="shrink-0 text-3xs text-dimmed">
                     {{
                       t(
                         'pipeline.builder.stepCount',
@@ -1356,7 +1357,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     p.enabled?.[i] === false ? t('pipeline.builder.disabledStepTooltip') : undefined
                   "
                 >
-                  <span class="w-4 shrink-0 text-center text-[10px] text-dimmed">{{ i + 1 }}</span>
+                  <span class="w-4 shrink-0 text-center text-3xs text-dimmed">{{ i + 1 }}</span>
                   <AgentKindIcon :kind="k" show-label />
                   <!-- A step that does not run on every task says so HERE, in the library, because
                        this list is what a reader compares two pipelines by: a preset whose testers
@@ -1400,9 +1401,9 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
     <template #body>
       <div class="space-y-3">
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('pipeline.builder.addAgentModal.name') }}
-          </label>
+          </SectionLabel>
           <UInput
             v-model="newAgentName"
             :placeholder="t('pipeline.builder.addAgentModal.namePlaceholder')"
@@ -1411,9 +1412,9 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
           />
         </div>
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('pipeline.builder.addAgentModal.description') }}
-          </label>
+          </SectionLabel>
           <UTextarea
             v-model="newAgentDesc"
             :rows="2"