@cat-factory/app 0.308.0 → 0.310.0

package/app/components/pipeline/PipelineBuilder.vue

@@ -28,6 +28,8 @@ import {
   mayCarrySkipAxis,
 } from '~/utils/catalog'
 import type { ConsensusStrategy } from '~/types/consensus'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 type DraftUnit = { index: number; kind: AgentKind; companionIndex: number | null }
 
@@ -423,9 +425,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 +449,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"
@@ -490,14 +492,24 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
               class="gap-1"
             >
               {{ l }}
-              <button type="button" class="hover:text-app-error-400" @click="removeLabel(l)">
-                <UIcon name="i-lucide-x" class="h-3 w-3" />
-              </button>
+              <IconButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-x"
+                :label="t('pipeline.builder.removeLabel', { label: l })"
+                :ui="{
+                  base: 'p-0 hover:bg-transparent hover:text-app-error-400',
+                  leadingIcon: 'h-3 w-3',
+                }"
+                @click="removeLabel(l)"
+              />
             </UBadge>
-            <input
+            <UInput
               v-model="newLabel"
+              size="xs"
+              class="w-20 focus-within:w-28"
               :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"
               @keydown.enter.prevent="addLabel"
               @blur="addLabel"
             />
@@ -508,7 +520,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 +545,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"
@@ -544,7 +556,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                 </span>
                 <div class="flex shrink-0 items-center">
                   <!-- Companion toggle: attach/detach the dependent reviewer for this producer. -->
-                  <UButton
+                  <IconButton
                     v-if="companionForProducer(unit.kind)"
                     :icon="
                       unit.companionIndex !== null ? 'i-lucide-scan-eye' : 'i-lucide-scan-search'
@@ -552,7 +564,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     :color="unit.companionIndex !== null ? 'secondary' : 'neutral'"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       unit.companionIndex !== null
                         ? t('pipeline.builder.companionRemove', {
                             companion: companionLabel(unit.kind),
@@ -564,7 +576,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     @click="pipelines.toggleCompanion(unit.index)"
                   />
                   <!-- Enable/disable: keep the step in the pipeline but skip it at run. -->
-                  <UButton
+                  <IconButton
                     :icon="
                       pipelines.draftEnabled[unit.index] === false
                         ? 'i-lucide-eye-off'
@@ -573,7 +585,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     :color="pipelines.draftEnabled[unit.index] === false ? 'neutral' : 'primary'"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       pipelines.draftEnabled[unit.index] === false
                         ? t('pipeline.builder.enableTooltip')
                         : t('pipeline.builder.disableTooltip')
@@ -591,13 +603,13 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                      so the engine holds it to the same gatability rule as an estimate gate
                      (`assertValidRunConditions`) — without this the builder invited a condition on
                      `merger` and answered the save with a 422. -->
-                  <UButton
+                  <IconButton
                     v-if="mayCarrySkipAxis(unit.kind)"
                     :icon="CONDITION_ICONS[pipelines.draftStepCondition(unit.index) ?? 'always']"
                     :color="pipelines.draftStepCondition(unit.index) ? 'info' : 'neutral'"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       t(
                         `pipeline.builder.condition.${pipelines.draftStepCondition(unit.index) ?? 'always'}`,
                       )
@@ -607,14 +619,14 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   />
                   <!-- Approval gate: pause after this step so a human reviews (and
                      can edit) its proposal before the next step runs. -->
-                  <UButton
+                  <IconButton
                     :icon="
                       pipelines.draftGates[unit.index] ? 'i-lucide-shield-check' : 'i-lucide-shield'
                     "
                     :color="pipelines.draftGates[unit.index] ? 'warning' : 'neutral'"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       pipelines.draftGates[unit.index]
                         ? t('pipeline.builder.approvalRemoveTooltip')
                         : t('pipeline.builder.approvalAddTooltip')
@@ -624,7 +636,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   />
                   <!-- Consensus: run this step through the multi-model mechanism (eligible
                      kinds only — architect/analysis/task-estimator). -->
-                  <UButton
+                  <IconButton
                     v-if="isConsensusEligibleKind(unit.kind)"
                     :icon="
                       pipelines.draftConsensus[unit.index]?.enabled
@@ -634,7 +646,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     :color="pipelines.draftConsensus[unit.index]?.enabled ? 'success' : 'neutral'"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       pipelines.draftConsensus[unit.index]?.enabled
                         ? t('pipeline.builder.consensusRevertTooltip')
                         : t('pipeline.builder.consensusEnableTooltip')
@@ -643,7 +655,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   />
                   <!-- Follow-up companion: the future-looking Coder surfaces loose ends /
                      side-tasks / questions mid-run (coder steps only). Enabled by default. -->
-                  <UButton
+                  <IconButton
                     v-if="unit.kind === 'coder'"
                     :icon="
                       pipelines.draftFollowUps[unit.index] === false
@@ -655,7 +667,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     "
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       pipelines.draftFollowUps[unit.index] === false
                         ? t('pipeline.builder.followUpEnableTooltip')
                         : t('pipeline.builder.followUpDisableTooltip')
@@ -665,7 +677,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   <!-- Test quality-control companion: audits the Tester's report for coverage
                      before the greenlight/fixer decision and loops the Tester on gaps (Tester
                      steps only). Enabled by default. -->
-                  <UButton
+                  <IconButton
                     v-if="isTesterKind(unit.kind)"
                     :icon="
                       pipelines.draftTesterQuality[unit.index]?.enabled === false
@@ -679,7 +691,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     "
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       pipelines.draftTesterQuality[unit.index]?.enabled === false
                         ? t('pipeline.builder.testerQualityEnableTooltip')
                         : t('pipeline.builder.testerQualityDisableTooltip')
@@ -689,7 +701,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   <!-- Auto-recommendation: the requirements reviewer pre-answers findings it
                      judges answerable from universal practice / provided context, offering them
                      as editable default answers (requirements-review steps only). On by default. -->
-                  <UButton
+                  <IconButton
                     v-if="unit.kind === 'requirements-review'"
                     :icon="
                       pipelines.draftAutoRecommendEnabled(unit.index)
@@ -701,7 +713,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     "
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       pipelines.draftAutoRecommendEnabled(unit.index)
                         ? t('pipeline.builder.autoRecommendDisableTooltip')
                         : t('pipeline.builder.autoRecommendEnableTooltip')
@@ -712,7 +724,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                      preview a reviewer pokes at after the PR is open. Off by default, and the
                      save boundary refuses a Deployer that neither reclaims nor declares this,
                      so the tick is how an unreclaimed environment says it is deliberate. -->
-                  <UButton
+                  <IconButton
                     v-if="showRetainEnvironmentToggle(unit.kind, unit.index)"
                     :icon="
                       pipelines.draftRetainEnvironment(unit.index)
@@ -722,7 +734,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     :color="pipelines.draftRetainEnvironment(unit.index) ? 'warning' : 'neutral'"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       pipelines.draftRetainEnvironment(unit.index)
                         ? t('pipeline.builder.retainEnvironmentClearTooltip')
                         : t('pipeline.builder.retainEnvironmentSetTooltip')
@@ -731,43 +743,43 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   />
                   <!-- System prompt: replace what this agent kind ships with, for every run in
                      this workspace, with the full revision history to switch back through. -->
-                  <UButton
+                  <IconButton
                     v-if="showPromptEditor(unit.kind)"
                     icon="i-lucide-file-pen-line"
                     :color="agentPrompts.isCustomized(unit.kind) ? 'warning' : 'neutral'"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       agentPrompts.isCustomized(unit.kind)
                         ? t('pipeline.builder.promptEditedTooltip')
                         : t('pipeline.builder.promptEditTooltip')
                     "
                     @click="promptEditorKind = unit.kind"
                   />
-                  <UButton
+                  <IconButton
                     icon="i-lucide-chevron-up"
                     color="neutral"
                     variant="ghost"
                     size="xs"
-                    :title="t('pipeline.builder.moveUp')"
+                    :label="t('pipeline.builder.moveUp')"
                     :disabled="vi === 0"
                     @click="pipelines.moveUnit(vi, vi - 1)"
                   />
-                  <UButton
+                  <IconButton
                     icon="i-lucide-chevron-down"
                     color="neutral"
                     variant="ghost"
                     size="xs"
-                    :title="t('pipeline.builder.moveDown')"
+                    :label="t('pipeline.builder.moveDown')"
                     :disabled="vi === pipelines.units.length - 1"
                     @click="pipelines.moveUnit(vi, vi + 1)"
                   />
-                  <UButton
+                  <IconButton
                     icon="i-lucide-x"
                     color="error"
                     variant="ghost"
                     size="xs"
-                    :title="t('pipeline.builder.removeStep')"
+                    :label="t('pipeline.builder.removeStep')"
                     @click="removeUnit(unit)"
                   />
                 </div>
@@ -785,10 +797,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 +813,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 +854,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
@@ -872,7 +884,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   </span>
                   <!-- A companion is an agent kind with a prompt of its own, and this row is its
                      only route to it — so the affordance belongs here too, not only on producers. -->
-                  <UButton
+                  <IconButton
                     v-if="showPromptEditor(pipelines.draft[unit.companionIndex]!)"
                     icon="i-lucide-file-pen-line"
                     :color="
@@ -882,7 +894,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     "
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       agentPrompts.isCustomized(pipelines.draft[unit.companionIndex]!)
                         ? t('pipeline.builder.promptEditedTooltip')
                         : t('pipeline.builder.promptEditTooltip')
@@ -934,57 +946,55 @@ 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">
-                    <button
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
                       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'
-                          : 'border-muted bg-default text-muted hover:text-default'
+                          ? 'border-app-success-600 bg-app-success-900/40 hover:bg-app-success-900/40 focus-visible:bg-app-success-900/40 disabled:bg-app-success-900/40 text-app-success-200'
+                          : 'border-muted bg-default hover:bg-default focus-visible:bg-default disabled:bg-default text-muted hover:text-default'
                       "
                       :title="group.description"
                       @click="pipelines.toggleDraftConsensusGroup(unit.index, group.id)"
                     >
                       {{ group.name }}
                       <span class="ms-1 text-dimmed">{{ groupBarLabel(group.id) }}</span>
-                    </button>
+                    </UButton>
                   </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>
 
                 <template v-else>
                   <div class="flex items-center gap-2">
                     <label class="text-muted">{{ t('pipeline.builder.strategy') }}</label>
-                    <select
+                    <USelect
                       v-model="pipelines.draftConsensus[unit.index]!.strategy"
-                      class="rounded 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 }}
-                      </option>
-                    </select>
+                      :items="CONSENSUS_STRATEGIES"
+                      size="xs"
+                    />
                     <label
                       v-if="pipelines.draftConsensus[unit.index]!.strategy === 'debate'"
                       class="ms-2 text-muted"
                       >{{ t('pipeline.builder.rounds') }}</label
                     >
-                    <input
+                    <UInputNumber
                       v-if="pipelines.draftConsensus[unit.index]!.strategy === 'debate'"
-                      v-model.number="pipelines.draftConsensus[unit.index]!.rounds"
-                      type="number"
-                      min="1"
-                      max="5"
+                      v-model.optional="pipelines.draftConsensus[unit.index]!.rounds"
+                      :min="1"
+                      :max="5"
                       placeholder="2"
-                      class="w-12 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
+                      size="xs"
+                      class="w-24"
                     />
                   </div>
 
@@ -995,23 +1005,25 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                       :key="p.id"
                       class="flex items-center gap-1.5"
                     >
-                      <input
+                      <UInput
                         v-model="p.role"
+                        size="xs"
+                        class="w-28"
                         :placeholder="t('pipeline.builder.rolePlaceholder')"
-                        class="w-28 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
                       />
-                      <input
+                      <UInput
                         v-model="p.modelId"
+                        size="xs"
+                        class="flex-1"
                         :placeholder="t('pipeline.builder.modelIdPlaceholder')"
-                        class="flex-1 rounded border border-muted bg-default px-1.5 py-0.5 text-toned"
                       />
-                      <UButton
+                      <IconButton
                         icon="i-lucide-x"
                         color="error"
                         variant="ghost"
                         size="xs"
                         :disabled="pipelines.draftConsensus[unit.index]!.participants.length <= 2"
-                        :title="t('pipeline.builder.removeParticipant')"
+                        :label="t('pipeline.builder.removeParticipant')"
                         @click="removeParticipant(unit.index, pIdx)"
                       />
                     </div>
@@ -1103,9 +1115,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 +1169,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>
               {{
@@ -1170,9 +1182,10 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                     )
               }}
             </span>
-            <button
-              type="button"
-              class="underline underline-offset-2 hover:text-toned"
+            <UButton
+              color="neutral"
+              variant="link"
+              class="p-0 text-3xs underline underline-offset-2 hover:text-toned"
               data-testid="pipeline-library-purpose-toggle"
               @click="browseEveryPurpose = !browseEveryPurpose"
             >
@@ -1181,7 +1194,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   ? t('pipeline.builder.narrowToDraftPurpose')
                   : t('pipeline.builder.listEveryPurpose')
               }}
-            </button>
+            </UButton>
           </div>
 
           <ul class="flex-1 space-y-1.5 pe-1 lg:min-h-0 lg:overflow-y-auto">
@@ -1192,9 +1205,10 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
               :class="{ 'opacity-60': p.archived }"
             >
               <div class="flex items-center gap-2 px-2 py-1.5">
-                <button
-                  type="button"
-                  class="flex min-w-0 flex-1 items-center gap-2 text-start"
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  class="flex min-w-0 flex-1 items-center gap-2 p-0 text-start hover:bg-transparent"
                   @click="toggleSaved(p.id)"
                 >
                   <UIcon
@@ -1249,7 +1263,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',
@@ -1258,7 +1272,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                       )
                     }}
                   </span>
-                </button>
+                </UButton>
                 <div
                   class="flex shrink-0 items-center opacity-0 transition group-hover:opacity-100"
                 >
@@ -1269,24 +1283,24 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                          ARCHIVING a row that still holds one: a hidden row never holds a default,
                          so there is never one here to release. -->
                   <template v-if="uiMode.isAdvanced && !p.archived && !p.internal">
-                    <UButton
+                    <IconButton
                       :icon="p.isDefault ? 'i-lucide-star' : 'i-lucide-star-off'"
                       :color="p.isDefault ? 'primary' : 'neutral'"
                       variant="ghost"
                       size="xs"
-                      :title="
+                      :label="
                         p.isDefault
                           ? t('pipeline.builder.scopeDefault.releaseInteractive')
                           : t('pipeline.builder.scopeDefault.claimInteractive')
                       "
                       @click="toggleDefault(p, 'interactive')"
                     />
-                    <UButton
+                    <IconButton
                       :icon="p.isUnattendedDefault ? 'i-lucide-bot' : 'i-lucide-bot-off'"
                       :color="p.isUnattendedDefault ? 'info' : 'neutral'"
                       variant="ghost"
                       size="xs"
-                      :title="
+                      :label="
                         p.isUnattendedDefault
                           ? t('pipeline.builder.scopeDefault.releaseUnattended')
                           : t('pipeline.builder.scopeDefault.claimUnattended')
@@ -1296,47 +1310,47 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                   </template>
                   <!-- Archive/unarchive: organize the library without deleting. Works on
                          built-ins too (view metadata, not structure). -->
-                  <UButton
+                  <IconButton
                     :icon="p.archived ? 'i-lucide-archive-restore' : 'i-lucide-archive'"
                     color="neutral"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       p.archived ? t('pipeline.builder.unarchive') : t('pipeline.builder.archive')
                     "
                     @click="toggleArchive(p)"
                   />
                   <!-- Clone is available on every pipeline — it's how a read-only
                          built-in template becomes an editable copy. -->
-                  <UButton
+                  <IconButton
                     icon="i-lucide-copy"
                     color="neutral"
                     variant="ghost"
                     size="xs"
-                    :title="
+                    :label="
                       p.builtin ? t('pipeline.builder.cloneDefault') : t('pipeline.builder.clone')
                     "
                     @click="clone(p)"
                   />
                   <!-- Built-in templates are read-only; only custom pipelines edit in place. -->
-                  <UButton
+                  <IconButton
                     v-if="!p.builtin"
                     icon="i-lucide-pencil"
                     color="neutral"
                     variant="ghost"
                     size="xs"
-                    :title="t('pipeline.builder.edit')"
+                    :label="t('pipeline.builder.edit')"
                     @click="edit(p)"
                   />
                   <!-- Built-in templates are read-only — they can be cloned but not
                          deleted (the backend rejects it too); only custom ones delete. -->
-                  <UButton
+                  <IconButton
                     v-if="!p.builtin"
                     icon="i-lucide-trash-2"
                     color="neutral"
                     variant="ghost"
                     size="xs"
-                    :title="t('pipeline.builder.delete')"
+                    :label="t('pipeline.builder.delete')"
                     @click="removePipeline(p)"
                   />
                 </div>
@@ -1356,7 +1370,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 +1414,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 +1425,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"