@cat-factory/app 0.308.0 → 0.310.0

package/app/components/binaryOutput/BinaryOutputReport.vue

@@ -17,6 +17,7 @@ import { BINARY_OUTPUT_STATE_KEYS, binaryOutputView } from '~/utils/binaryOutput
 import { binaryCandidateView } from '~/utils/binaryCandidates'
 import CopyButton from '~/components/common/CopyButton.vue'
 import StoredAssetView from '~/components/binaryOutput/StoredAssetView.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Two callers, one renderer — the same split `StepEffortReport` makes: the generic step-detail
 // panel drops it in as a `card` (its own heading + border, among the other detail sections),
@@ -59,20 +60,17 @@ const state = computed(() => {
     "
     data-testid="binary-output-report"
   >
-    <div
-      v-if="variant === 'card'"
-      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-    >
+    <SectionLabel v-if="variant === 'card'" class="flex items-center gap-1.5">
       <UIcon name="i-lucide-image" class="h-3.5 w-3.5" />
       <span>{{ t('binaryOutput.heading') }}</span>
-    </div>
+    </SectionLabel>
 
     <!-- The CANDIDATE decision, when this step compared before delivering. It sits ABOVE the
          delivery outcome because it happened first, and because "which of four was this" is the
          question the artifacts below cannot answer. An AUTOMATIC keep says so: nobody looked. -->
     <p
       v-if="candidates && candidates.state.candidates.length > 0"
-      class="text-[12px] leading-relaxed text-toned"
+      class="text-xs leading-relaxed text-toned"
       data-testid="binary-output-candidate-decision"
     >
       {{
@@ -92,7 +90,7 @@ const state = computed(() => {
     <!-- What happened, in one sentence, before any list. Four of the five states have no list
          at all, and the fifth still needs its qualifications read alongside it. -->
     <p
-      class="flex items-start gap-2 text-[12px] leading-relaxed"
+      class="flex items-start gap-2 text-xs leading-relaxed"
       :class="state.tone"
       data-testid="binary-output-state"
       :data-state="view.state"
@@ -106,7 +104,7 @@ const state = computed(() => {
          so — it is a real state (a trait-carrying kind dispatched under an overriding kind
          records a declaration against a step that never held one), and rendering a blank
          would read as a missing value rather than an absent comparison. -->
-    <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[11px]">
+    <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-2xs">
       <dt class="text-dimmed">{{ t('binaryOutput.target') }}</dt>
       <dd
         v-if="view.target"
@@ -158,10 +156,8 @@ const state = computed(() => {
           :label="row.entity ?? row.description"
           class="mb-2 pe-8"
         />
-        <code class="block break-all pe-8 font-mono text-[11px] text-default">{{
-          row.location
-        }}</code>
-        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-dimmed">
+        <code class="block break-all pe-8 font-mono text-2xs text-default">{{ row.location }}</code>
+        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-3xs text-dimmed">
           <span class="font-mono">{{ row.service }}</span>
           <!-- The join the report cannot make on its own, and the question a human opens this
                for: did it go where the step pointed it? -->
@@ -225,7 +221,7 @@ const state = computed(() => {
             {{ t('binaryOutput.missizedBadge') }}
           </UBadge>
         </div>
-        <p v-if="row.description" class="mt-1 text-[11px] leading-relaxed text-muted">
+        <p v-if="row.description" class="mt-1 text-2xs leading-relaxed text-muted">
           {{ row.description }}
         </p>
       </li>
@@ -234,7 +230,7 @@ const state = computed(() => {
     <!-- Every qualification the report counted, each naming its own number. Never folded into
          one "some entries were dropped": the fix for an unknown service id is not the fix for
          a malformed entry, and neither is the fix for a list that stops short of the tail. -->
-    <ul class="space-y-1 text-[11px] text-app-warning-400">
+    <ul class="space-y-1 text-2xs text-app-warning-400">
       <!-- The step's OWN target went missing from the catalog, and an id the AGENT invented,
            are two different failures with two different fixes (re-register it, versus correct
            the declaration). `binaryOutputView` returns them as DISJOINT fields precisely so

package/app/components/binaryOutput/StoredAssetView.vue

@@ -80,7 +80,7 @@ const filename = computed(() => {
       v-if="isImage && url"
       :src="url"
       :alt="label ?? assetId"
-      class="w-full rounded object-contain"
+      class="w-full rounded-sm object-contain"
       :class="previewClass"
       data-testid="stored-asset-preview"
     />
@@ -89,7 +89,7 @@ const filename = computed(() => {
          frame. -->
     <p
       v-else-if="!isImage && url"
-      class="flex items-center gap-1.5 rounded bg-elevated/60 px-2 py-1.5 text-[11px] text-toned"
+      class="flex items-center gap-1.5 rounded-sm bg-elevated/60 px-2 py-1.5 text-2xs text-toned"
       data-testid="stored-asset-file"
     >
       <UIcon name="i-lucide-file" class="h-3.5 w-3.5 shrink-0" />
@@ -97,7 +97,7 @@ const filename = computed(() => {
     </p>
     <p
       v-else-if="status === 'error'"
-      class="flex items-center gap-1.5 text-[11px] text-app-warning-300"
+      class="flex items-center gap-1.5 text-2xs text-app-warning-300"
       data-testid="stored-asset-error"
     >
       <span>{{ t('binaryOutput.asset.loadFailed') }}</span>
@@ -105,29 +105,31 @@ const filename = computed(() => {
         {{ t('binaryOutput.asset.retry') }}
       </UButton>
     </p>
-    <p v-else class="text-[11px] text-dimmed" data-testid="stored-asset-loading">
+    <p v-else class="text-2xs text-dimmed" data-testid="stored-asset-loading">
       {{ t('binaryOutput.asset.loading') }}
     </p>
 
     <!-- The two things a person does with a delivered asset. Both hang off the object URL, so
          they appear only once the bytes are in hand. -->
-    <div v-if="url" class="flex items-center gap-3 text-[11px]">
-      <a
-        :href="url"
+    <div v-if="url" class="flex items-center gap-3 text-2xs">
+      <ULink
+        raw
+        :to="url"
         target="_blank"
         rel="noopener"
         class="text-app-info-300 hover:underline"
         data-testid="stored-asset-open"
         @click.stop
-        >{{ t('binaryOutput.asset.open') }}</a
+        >{{ t('binaryOutput.asset.open') }}</ULink
       >
-      <a
-        :href="url"
+      <ULink
+        raw
+        :to="url"
         :download="filename"
         class="text-app-info-300 hover:underline"
         data-testid="stored-asset-download"
         @click.stop
-        >{{ t('binaryOutput.asset.download') }}</a
+        >{{ t('binaryOutput.asset.download') }}</ULink
       >
     </div>
   </div>

package/app/components/board/AddTaskModal.vue

@@ -46,6 +46,7 @@ import {
 import { descriptorFieldDefaults } from '@cat-factory/contracts'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import { buildTaskTypePickerRows } from '~/utils/taskTypePicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 // Interface tier. In BASIC mode this form asks for the task itself (type, title,
@@ -141,6 +142,11 @@ const timeboxHours = ref<number | undefined>(undefined)
 // default — an expedition exists to cover ground nobody thought to look at, so narrowing it is
 // the deliberate act) plus an optional focus folded into every angle's prompt.
 const fishingPhaseIds = ref<string[]>([])
+function toggleFishingPhase(id: string, checked: boolean) {
+  fishingPhaseIds.value = checked
+    ? [...fishingPhaseIds.value, id]
+    : fishingPhaseIds.value.filter((x) => x !== id)
+}
 const fishingFocus = ref('')
 /** Held as a string because the input is a text field; parsed at submit, blank ⇒ the default. */
 const fishingMaxPasses = ref('')
@@ -938,13 +944,14 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
               data-testid="task-type-row"
               :data-task-type-row="row.id"
             >
-              <p
+              <SectionLabel
                 v-if="row.caption"
-                class="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
+                as="p"
+                class="mb-1 px-1"
                 data-testid="task-type-category"
               >
                 {{ row.caption }}
-              </p>
+              </SectionLabel>
               <div class="flex flex-wrap gap-1">
                 <UButton
                   v-for="ty in row.choices"
@@ -981,7 +988,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
         </UFormField>
 
         <!-- Recurring tasks are configured as a schedule on the service frame. -->
-        <div v-if="isRecurring" class="rounded-lg border border-default p-3 text-[11px] text-muted">
+        <div v-if="isRecurring" class="rounded-lg border border-default p-3 text-2xs text-muted">
           <template v-if="recurringFrameId">
             {{ t('board.addTask.recurringWithFrame') }}
           </template>
@@ -1023,7 +1030,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 :ui="{ base: 'cursor-default text-toned' }"
               />
             </UFormField>
-            <p v-if="resolvingIssueBodies" class="text-[11px] text-dimmed">
+            <p v-if="resolvingIssueBodies" class="text-2xs text-dimmed">
               {{ t('board.addTask.loadingIssue') }}
             </p>
 
@@ -1054,7 +1061,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
               <span class="text-sm text-default">{{ t('board.addTask.technical') }}</span>
             </template>
             <template #description>
-              <span class="text-[11px] text-dimmed">
+              <span class="text-2xs text-dimmed">
                 {{ t('board.addTask.technicalHint') }}
               </span>
             </template>
@@ -1103,25 +1110,21 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
               :description="t('board.addTask.bugFishingFields.angles.hint')"
             >
               <div class="grid gap-1.5 sm:grid-cols-2">
-                <label
+                <!-- Each angle keeps its own test hook, so the boolean is derived from the id
+                     list rather than bound through a checkbox group. -->
+                <UCheckbox
                   v-for="phase in BUG_FISHING_PHASES"
                   :key="phase.id"
-                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-[12px] hover:bg-elevated/40"
-                >
-                  <input
-                    v-model="fishingPhaseIds"
-                    type="checkbox"
-                    :value="phase.id"
-                    class="mt-0.5 accent-app-info-500"
-                    :data-testid="`add-task-fishing-angle-${phase.id}`"
-                  />
-                  <span class="min-w-0">
-                    <span class="block text-default">{{ phase.title }}</span>
-                    <span class="block text-[11px] text-dimmed">{{ phase.goal }}</span>
-                  </span>
-                </label>
+                  size="xs"
+                  :model-value="fishingPhaseIds.includes(phase.id)"
+                  :label="phase.title"
+                  :description="phase.goal"
+                  class="rounded-md px-1.5 py-1 hover:bg-elevated/40"
+                  :data-testid="`add-task-fishing-angle-${phase.id}`"
+                  @update:model-value="toggleFishingPhase(phase.id, $event === true)"
+                />
               </div>
-              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-[11px] text-dimmed">
+              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-2xs text-dimmed">
                 {{ t('board.addTask.bugFishingFields.angles.allSelected') }}
               </p>
             </UFormField>
@@ -1385,11 +1388,11 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
           </div>
 
           <div v-if="configDescriptors.length" class="space-y-3">
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="span">
               {{ t('board.addTask.agentConfiguration') }}
-            </span>
+            </SectionLabel>
             <div v-for="d in configDescriptors" :key="d.id" class="space-y-1">
-              <div class="text-[11px] text-muted">{{ d.label }}</div>
+              <div class="text-2xs text-muted">{{ d.label }}</div>
               <div v-if="d.type === 'select'" class="flex flex-wrap gap-1">
                 <UButton
                   v-for="opt in d.options"
@@ -1411,7 +1414,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 :data-testid="`agent-config-${d.id}`"
                 @update:model-value="(v: string | number) => setConfig(d.id, String(v))"
               />
-              <p class="text-[11px] leading-snug text-dimmed">{{ d.description }}</p>
+              <p class="text-2xs leading-snug text-dimmed">{{ d.description }}</p>
             </div>
           </div>
 
@@ -1440,7 +1443,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
             :issues-hint="t('board.addTask.noIssuesHint')"
           />
 
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('board.addTask.plannedHint') }}
           </p>
         </template>

package/app/components/board/AgentFailureCard.vue

@@ -138,7 +138,7 @@ async function retry() {
     data-testid="agent-failure-banner"
     :data-run-kind="run.kind"
   >
-    <div class="flex items-center gap-1.5" :class="compact ? 'text-[11px]' : 'text-xs'">
+    <div class="flex items-center gap-1.5" :class="compact ? 'text-2xs' : 'text-xs'">
       <UIcon
         name="i-lucide-alert-triangle"
         class="shrink-0 text-app-error-400"
@@ -150,7 +150,7 @@ async function retry() {
     <p
       v-if="failure?.message"
       class="mt-1 leading-snug text-app-error-300/90"
-      :class="compact ? 'line-clamp-2 text-[10px]' : 'text-[11px]'"
+      :class="compact ? 'line-clamp-2 text-3xs' : 'text-2xs'"
       :title="failure.message"
     >
       {{ failure.message }}
@@ -159,7 +159,7 @@ async function retry() {
     <p
       v-if="failure?.hint"
       class="mt-1 leading-snug text-app-error-400/70"
-      :class="compact ? 'text-[10px]' : 'text-[11px]'"
+      :class="compact ? 'text-3xs' : 'text-2xs'"
     >
       {{ failure.hint }}
     </p>
@@ -168,7 +168,7 @@ async function retry() {
          name the concrete .env fix rather than only pointing at the (unhelpful-here) tab. -->
     <p
       v-if="showEnvironmentLocalHint && !compact"
-      class="mt-1 text-[11px] leading-snug text-app-error-400/70"
+      class="mt-1 text-2xs leading-snug text-app-error-400/70"
       data-testid="agent-failure-environment-local-hint"
     >
       {{
@@ -192,15 +192,16 @@ async function retry() {
       v-if="!compact && failure"
       :detail="failure.detail"
       :message="failure.message"
-      summary-class="text-[10px] text-app-error-400/60 hover:text-app-error-300"
-      pre-class="bg-app-error-950/60 text-[10px] text-app-error-200/80"
+      summary-class="text-3xs text-app-error-400/60 hover:text-app-error-300"
+      pre-class="bg-app-error-950/60 text-3xs text-app-error-200/80"
     />
 
     <div class="mt-2 flex flex-wrap items-center gap-2">
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/40 text-app-error-200 hover:bg-app-error-900/70 disabled:opacity-60"
-        :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
+        :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         :disabled="retrying || !access.canExecuteRuns.value"
         :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
         data-testid="agent-failure-retry"
@@ -211,36 +212,38 @@ async function retry() {
           :class="[compact ? 'h-3 w-3' : 'h-3.5 w-3.5', { 'animate-spin': retrying }]"
         />
         {{ retrying ? t('board.failure.retrying') : compact ? t('common.retry') : retryLabel }}
-      </button>
+      </UButton>
 
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="run.kind === 'bootstrap'"
-        type="button"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
-        :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
+        :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         data-testid="agent-failure-inspect"
         @click.stop="inspectRun"
       >
         <UIcon name="i-lucide-activity" :class="compact ? 'h-3 w-3' : 'h-3.5 w-3.5'" />
         {{ t('observability.modelActivity') }}
-      </button>
+      </UButton>
 
       <!-- Environment provisioning failures are almost always a deploy-backend / provider-config
            issue, so link straight to where it's set up rather than leaving the user to hunt. The
            destination + label follow the cause: a `deploy_runner_unwired` failure needs the runner
            pool (Agent containers tab), every other cause needs the environment provider (Test
            environments tab) — see `routesToRunnerPool`. -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="isEnvironmentFailure"
-        type="button"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
-        :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
+        :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         data-testid="agent-failure-configure-environment"
         @click.stop="openFailureSetup"
       >
         <UIcon name="i-lucide-settings" :class="compact ? 'h-3 w-3' : 'h-3.5 w-3.5'" />
         {{ failureSetupLabel }}
-      </button>
+      </UButton>
     </div>
   </div>
 </template>

package/app/components/board/AgentFailureHistory.vue

@@ -13,18 +13,27 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <details
+  <UCollapsible
     v-if="failures.length"
     class="nodrag rounded-lg border border-muted/60 bg-default/40 px-3 py-2"
     data-testid="agent-failure-history"
   >
-    <summary
-      class="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted hover:text-default"
-    >
-      <UIcon name="i-lucide-history" class="h-3.5 w-3.5 shrink-0" />
-      {{ t('board.failure.history.previousErrors', { count: failures.length }, failures.length) }}
-    </summary>
+    <template #default="{ open }">
+      <UButton
+        variant="link"
+        color="neutral"
+        size="xs"
+        icon="i-lucide-history"
+        :trailing-icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        :label="
+          t('board.failure.history.previousErrors', { count: failures.length }, failures.length)
+        "
+        :ui="{ base: 'w-full justify-start gap-1.5 p-0 text-2xs text-muted hover:text-default' }"
+      />
+    </template>
 
-    <FailureHistoryList :failures="props.failures" class="mt-2" />
-  </details>
+    <template #content>
+      <FailureHistoryList :failures="props.failures" class="mt-2" />
+    </template>
+  </UCollapsible>
 </template>

package/app/components/board/CreateInitiativeModal.vue

@@ -193,16 +193,17 @@ async function create() {
         <div v-if="presets.length > 1" class="space-y-1.5">
           <span class="text-xs font-medium text-toned">{{ t('initiative.create.preset') }}</span>
           <div class="grid gap-2" data-testid="initiative-preset-picker">
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="p in presets"
               :key="p.id"
-              type="button"
               :data-testid="`initiative-preset-option-${p.id}`"
               :aria-pressed="p.id === selectedPresetId"
               class="flex items-start gap-3 rounded-md border px-3 py-2 text-left transition"
               :class="
                 p.id === selectedPresetId
-                  ? 'border-primary bg-primary/10'
+                  ? 'border-primary bg-primary/10 hover:bg-primary/10 focus-visible:bg-primary/10 disabled:bg-primary/10'
                   : 'border-muted hover:border-app-600'
               "
               @click="selectPreset(p.id)"
@@ -216,11 +217,11 @@ async function create() {
                 <span class="block text-sm font-medium text-default">
                   {{ p.presentation.label }}
                 </span>
-                <span class="block text-[11px] text-muted">
+                <span class="block text-2xs text-muted">
                   {{ p.presentation.description }}
                 </span>
               </span>
-            </button>
+            </UButton>
           </div>
         </div>
 
@@ -264,7 +265,7 @@ async function create() {
           :issues-hint="t('initiative.create.contextIssuesHint')"
         />
 
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('initiative.create.hint') }}
         </p>
       </div>

package/app/components/board/FailureDetail.vue

@@ -18,18 +18,28 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <details v-if="detail && detail !== message" class="mt-1">
-    <summary class="cursor-pointer" :class="summaryClass">
-      {{ t('board.failure.showDetail') }}
-    </summary>
+  <UCollapsible v-if="detail && detail !== message" class="mt-1">
+    <template #default="{ open }">
+      <UButton
+        variant="link"
+        color="neutral"
+        size="xs"
+        :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        :label="t('board.failure.showDetail')"
+        :class="summaryClass"
+        :ui="{ base: 'w-full justify-start gap-1 p-0' }"
+      />
+    </template>
     <!-- The stack trace / extended detail: the first thing a user does with it is copy it, so
          offer a copy affordance floated over the scroll box (UX-39). -->
-    <div class="relative mt-1">
-      <CopyButton :text="detail" class="absolute end-1 top-1 z-10" />
-      <pre
-        class="max-h-32 overflow-auto whitespace-pre-wrap rounded p-1.5 pe-9"
-        :class="preClass"
-        >{{ detail }}</pre>
-    </div>
-  </details>
+    <template #content>
+      <div class="relative mt-1">
+        <CopyButton :text="detail" class="absolute end-1 top-1 z-10" />
+        <pre
+          class="max-h-32 overflow-auto whitespace-pre-wrap rounded-sm p-1.5 pe-9"
+          :class="preClass"
+          >{{ detail }}</pre>
+      </div>
+    </template>
+  </UCollapsible>
 </template>

package/app/components/board/FailureHistoryList.vue

@@ -23,24 +23,24 @@ const ordered = computed(() => [...props.failures].reverse())
       class="rounded-md border border-default/80 bg-app-950/50 px-2.5 py-2"
       data-testid="agent-failure-history-entry"
     >
-      <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+      <div class="flex items-center gap-1.5 text-3xs text-dimmed">
         <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-app-error-400/70" />
         <time>{{ d(new Date(failure.occurredAt), 'long') }}</time>
       </div>
 
-      <p class="mt-1 text-[11px] leading-snug text-toned" :title="failure.message">
+      <p class="mt-1 text-2xs leading-snug text-toned" :title="failure.message">
         {{ failure.message }}
       </p>
 
-      <p v-if="failure.hint" class="mt-1 text-[10px] leading-snug text-dimmed">
+      <p v-if="failure.hint" class="mt-1 text-3xs leading-snug text-dimmed">
         {{ failure.hint }}
       </p>
 
       <FailureDetail
         :detail="failure.detail"
         :message="failure.message"
-        summary-class="text-[10px] text-dimmed hover:text-toned"
-        pre-class="bg-app-950/80 text-[10px] text-muted"
+        summary-class="text-3xs text-dimmed hover:text-toned"
+        pre-class="bg-app-950/80 text-3xs text-muted"
       />
     </li>
   </ol>

package/app/components/board/RecurringPipelineModal.vue

@@ -12,6 +12,7 @@ import { BUILTIN_TASK_SOURCE_KINDS } from '@cat-factory/contracts'
 import { apiErrorReason } from '~/composables/api/errors'
 import { pipelineAllowedForSchedule } from '~/utils/pipeline'
 import { appliesIntakePredicate } from '~/utils/intakePredicates'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -453,7 +454,7 @@ async function add() {
           <USwitch v-model="onDemand" :disabled="onDemandLocked" size="sm" class="mt-0.5" />
           <div class="space-y-0.5">
             <p class="text-xs font-medium text-default">{{ t('board.recurring.onDemand') }}</p>
-            <p class="text-[11px] text-dimmed">
+            <p class="text-2xs text-dimmed">
               {{
                 onDemandLocked
                   ? t('board.recurring.onDemandLockedHint')
@@ -466,10 +467,10 @@ async function add() {
         <RecurringRecurrenceEditor v-if="!onDemand" v-model="recurrence" />
 
         <div v-if="filesTicket" class="space-y-3 rounded-lg border border-default p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="p">
             {{ t('board.recurring.issueTracker') }}
-          </p>
-          <p class="text-[11px] text-dimmed">
+          </SectionLabel>
+          <p class="text-2xs text-dimmed">
             {{ t('board.recurring.issueTrackerHint') }}
           </p>
           <div class="flex gap-1">
@@ -541,22 +542,22 @@ async function add() {
             <p class="text-xs font-medium text-default">
               {{ t('board.recurring.trackerTrigger') }}
             </p>
-            <p class="text-[11px] text-dimmed">
+            <p class="text-2xs text-dimmed">
               {{ t('board.recurring.trackerTriggerHint') }}
             </p>
           </div>
         </div>
 
         <div v-if="showIntake" class="space-y-3 rounded-lg border border-default p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="p">
             {{ t('board.recurring.intake') }}
-          </p>
-          <p class="text-[11px] text-dimmed">
+          </SectionLabel>
+          <p class="text-2xs text-dimmed">
             {{ t('board.recurring.intakeHint') }}
           </p>
           <!-- Two different remedies: connect something, versus connect something ELSE. A source
                that is connected but cannot run a scheduled search is not an absent connection. -->
-          <p v-if="intakeSources.length === 0" class="text-[11px] text-app-warning-500">
+          <p v-if="intakeSources.length === 0" class="text-2xs text-app-warning-500">
             {{
               tasks.anyOffered
                 ? t('board.recurring.intakeNoIntakeSources')
@@ -626,7 +627,7 @@ async function add() {
           </UFormField>
 
           <template v-if="intakeSource">
-            <p class="text-[11px] text-dimmed">
+            <p class="text-2xs text-dimmed">
               {{
                 intakeDispatch === 'per-ticket'
                   ? t('board.recurring.intakeDispatchPerTicketHint')
@@ -677,7 +678,7 @@ async function add() {
           </template>
         </div>
 
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('board.recurring.footerHint') }}
         </p>
       </div>