@cat-factory/app 0.308.0 → 0.309.0

package/app/components/pipeline/PipelineHealthModal.vue

@@ -137,7 +137,7 @@ const reseedableCount = computed(
               {{ t('pipeline.health.newHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">{{ t('pipeline.health.newDescription') }}</p>
+          <p class="text-2xs text-dimmed">{{ t('pipeline.health.newDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="p in newPipelines"
@@ -172,7 +172,7 @@ const reseedableCount = computed(
               {{ t('pipeline.health.invalidHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('pipeline.health.invalidDescription') }}
           </p>
           <ul class="space-y-2">
@@ -195,7 +195,7 @@ const reseedableCount = computed(
                     <li
                       v-for="(p, i) in h.problems"
                       :key="i"
-                      class="text-[11px]"
+                      class="text-2xs"
                       :class="
                         p.type === 'outdated' ? 'text-app-warning-400/80' : 'text-app-error-400/90'
                       "
@@ -241,7 +241,7 @@ const reseedableCount = computed(
               {{ t('pipeline.health.retiredHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">{{ t('pipeline.health.retiredDescription') }}</p>
+          <p class="text-2xs text-dimmed">{{ t('pipeline.health.retiredDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="r in retired"
@@ -250,7 +250,7 @@ const reseedableCount = computed(
             >
               <div class="min-w-0">
                 <span class="truncate text-sm font-medium text-app-100">{{ r.pipeline.name }}</span>
-                <p class="text-[11px] text-muted/80">
+                <p class="text-2xs text-muted/80">
                   {{
                     r.replacement
                       ? t('pipeline.health.retiredReplacedBy', { name: r.replacement.name })
@@ -281,7 +281,7 @@ const reseedableCount = computed(
               {{ t('pipeline.health.updatesHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('pipeline.health.updatesDescription') }}
           </p>
           <ul class="space-y-2">
@@ -292,7 +292,7 @@ const reseedableCount = computed(
             >
               <div class="min-w-0">
                 <span class="truncate text-sm font-medium text-app-100">{{ h.pipeline.name }}</span>
-                <p class="text-[11px] text-app-warning-400/80">{{ h.problems[0]?.message }}</p>
+                <p class="text-2xs text-app-warning-400/80">{{ h.problems[0]?.message }}</p>
               </div>
               <UButton
                 size="xs"

package/app/components/pipeline/PipelinePicker.vue

@@ -96,7 +96,7 @@ function choose(id: string) {
           <li v-if="noneLabel !== undefined">
             <button
               type="button"
-              class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
+              class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
               :class="modelValue ? 'text-toned' : 'text-app-100'"
               data-testid="pipeline-option-none"
               @mouseenter="hoverId = ''"
@@ -114,7 +114,7 @@ function choose(id: string) {
           <li v-for="p in options" :key="p.id">
             <button
               type="button"
-              class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
+              class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
               :class="modelValue === p.id ? 'text-app-100' : 'text-toned'"
               :data-testid="`pipeline-option-${p.id}`"
               @mouseenter="hoverId = p.id"
@@ -134,7 +134,7 @@ function choose(id: string) {
         <!-- right: preview of the hovered (or selected) pipeline -->
         <div class="w-1/2 overflow-y-auto p-3">
           <PipelinePreview v-if="previewPipeline" :pipeline="previewPipeline" />
-          <div v-else class="text-[12px] leading-snug text-dimmed">{{ emptyHint }}</div>
+          <div v-else class="text-xs leading-snug text-dimmed">{{ emptyHint }}</div>
         </div>
       </div>
     </template>

package/app/components/pipeline/PipelinePreview.vue

@@ -18,6 +18,7 @@ import {
   pipelineGateCount,
 } from '~/utils/pipeline'
 import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ pipeline: Pipeline }>()
 const { t } = useI18n()
@@ -37,15 +38,13 @@ function stepDescription(kind: string): string {
     <div class="text-sm font-semibold text-app-100">{{ pipeline.name }}</div>
     <p
       v-if="pipeline.description"
-      class="text-[12px] leading-snug text-muted"
+      class="text-xs leading-snug text-muted"
       data-testid="pipeline-preview-description"
     >
       {{ pipeline.description }}
     </p>
 
-    <div
-      class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] uppercase tracking-wide text-dimmed"
-    >
+    <SectionLabel class="flex flex-wrap items-center gap-x-3 gap-y-1">
       <span class="inline-flex items-center gap-1">
         <UIcon name="i-lucide-workflow" class="h-3 w-3" />
         {{ t('pipeline.preview.stepCount', { count: steps.length }, steps.length) }}
@@ -62,7 +61,7 @@ function stepDescription(kind: string): string {
         <UIcon name="i-lucide-git-branch" class="h-3 w-3" />
         {{ t('pipeline.preview.conditionalCount', { count: conditionalCount }, conditionalCount) }}
       </span>
-    </div>
+    </SectionLabel>
 
     <!-- The ordered steps. The number column doubles as the flow connector (a rule drawn between
          consecutive numbers), so the list reads as a sequence rather than an unordered set. -->
@@ -76,7 +75,7 @@ function stepDescription(kind: string): string {
       >
         <div class="flex flex-col items-center">
           <span
-            class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-elevated font-mono text-[9px] tabular-nums text-muted"
+            class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-elevated font-mono text-3xs tabular-nums text-muted"
           >
             {{ i + 1 }}
           </span>
@@ -101,7 +100,7 @@ function stepDescription(kind: string): string {
           </div>
           <!-- Clamped: the catalog prose runs long for some kinds, and <AgentKindIcon> already
                carries the full text in its hover tooltip. -->
-          <p class="line-clamp-2 text-[11px] leading-snug text-dimmed">
+          <p class="line-clamp-2 text-2xs leading-snug text-dimmed">
             {{ stepDescription(s.kind) }}
           </p>
         </div>

package/app/components/pipeline/PipelineProgress.vue

@@ -20,6 +20,7 @@ import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
 import PrReviewPhaseBadge from '~/components/prReview/PrReviewPhaseBadge.vue'
 import { useNowTick, stepDurationLabel } from '~/composables/useStepTimer'
 import type { BadgeColor } from '~/utils/badge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ instance: ExecutionInstance }>()
 const emit = defineEmits<{
@@ -292,7 +293,7 @@ const ITEM_ICON: Record<string, string> = {
         <span
           v-for="l in legend"
           :key="l.state"
-          class="inline-flex items-center gap-1.5 text-[11px] text-muted"
+          class="inline-flex items-center gap-1.5 text-2xs text-muted"
         >
           <span
             class="h-2 w-2 rounded-full"
@@ -365,15 +366,13 @@ const ITEM_ICON: Record<string, string> = {
                 </span>
                 <span
                   v-if="isCompanionKind(s.agentKind)"
-                  class="shrink-0 rounded bg-accented/60 px-1 text-[9px] font-medium uppercase tracking-wide text-toned"
+                  class="shrink-0 rounded-sm bg-accented/60 px-1 text-3xs font-medium uppercase tracking-wide text-toned"
                   :title="t('pipeline.progress.companionTooltip')"
                 >
                   {{ t('pipeline.progress.companion') }}
                 </span>
               </div>
-              <div
-                class="flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-dimmed"
-              >
+              <SectionLabel class="flex items-center gap-1.5">
                 <span>{{ t('pipeline.progress.stepOf', { current: i + 1, total }) }}</span>
                 <!-- live elapsed clock: a running step counts up (so no-subtask steps
                      don't read as hung), a finished step shows its total duration -->
@@ -385,10 +384,10 @@ const ITEM_ICON: Record<string, string> = {
                   <UIcon name="i-lucide-clock" class="h-2.5 w-2.5 shrink-0" />
                   {{ stepElapsed(s) }}
                 </span>
-              </div>
+              </SectionLabel>
             </div>
             <span
-              class="ms-auto shrink-0 text-[11px] font-medium"
+              class="ms-auto shrink-0 text-2xs font-medium"
               :style="{ color: stepVisual(s).color }"
             >
               {{ stepVisual(s).label }}
@@ -458,7 +457,7 @@ const ITEM_ICON: Record<string, string> = {
           <!-- container cold-boot phase: shown while the container is spinning up. -->
           <div
             v-if="s.container?.status === 'starting' && !runFailed"
-            class="mt-2 flex items-center gap-1.5 text-[11px] text-app-info-300"
+            class="mt-2 flex items-center gap-1.5 text-2xs text-app-info-300"
           >
             <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 shrink-0 animate-spin" />
             <span>{{ t('pipeline.progress.spinningUpContainer') }}</span>
@@ -468,7 +467,7 @@ const ITEM_ICON: Record<string, string> = {
                making calls) so the step isn't a blank "working" before subtasks appear. -->
           <div
             v-else-if="stepPhaseLabel(s) && !runFailed"
-            class="mt-2 flex items-center gap-1.5 text-[11px] text-app-success-300"
+            class="mt-2 flex items-center gap-1.5 text-2xs text-app-success-300"
           >
             <UIcon name="i-lucide-box" class="h-3.5 w-3.5 shrink-0" />
             <span>{{ stepPhaseLabel(s) }}</span>
@@ -481,14 +480,14 @@ const ITEM_ICON: Record<string, string> = {
             v-if="prPhaseActive(s)"
             :step="s"
             :run-failed="runFailed"
-            class="mt-2 text-[11px]"
+            class="mt-2 text-2xs"
           />
 
           <!-- live subtask counts from the agent's todo list -->
           <div v-if="s.subtasks && s.subtasks.total > 0" class="mt-2">
             <div
               v-if="!prPhaseActive(s)"
-              class="flex items-center justify-between text-[10px] text-muted"
+              class="flex items-center justify-between text-3xs text-muted"
             >
               <span>
                 {{
@@ -515,7 +514,7 @@ const ITEM_ICON: Record<string, string> = {
               <li
                 v-for="(item, i) in s.subtasks.items"
                 :key="i"
-                class="flex items-start gap-1.5 text-[11px]"
+                class="flex items-start gap-1.5 text-2xs"
                 :class="
                   item.status === 'completed'
                     ? 'text-dimmed line-through'
@@ -537,7 +536,7 @@ const ITEM_ICON: Record<string, string> = {
           <!-- model used for this step -->
           <p
             v-if="s.model"
-            class="mt-2 flex items-center gap-1 truncate text-[10px] text-dimmed"
+            class="mt-2 flex items-center gap-1 truncate text-3xs text-dimmed"
             :title="s.model"
           >
             <UIcon name="i-lucide-cpu" class="h-3 w-3 shrink-0" />
@@ -557,7 +556,7 @@ const ITEM_ICON: Record<string, string> = {
 
           <!-- A one-line hint that the agent produced prose; the full output (and
                all step metadata) lives in the step-detail overlay opened by click. -->
-          <p v-if="stepHasOutput(s)" class="mt-2 flex items-center gap-1 text-[11px] text-dimmed">
+          <p v-if="stepHasOutput(s)" class="mt-2 flex items-center gap-1 text-2xs text-dimmed">
             <UIcon name="i-lucide-book-open-text" class="h-3 w-3 shrink-0" />
             {{ t('pipeline.progress.clickToRead') }}
           </p>
@@ -567,7 +566,7 @@ const ITEM_ICON: Record<string, string> = {
                which reads as a tester that silently did its job. -->
           <p
             v-if="stepSkipReasonKey(s)"
-            class="mt-2 flex items-center gap-1 text-[11px] text-dimmed"
+            class="mt-2 flex items-center gap-1 text-2xs text-dimmed"
             data-testid="step-skip-reason"
           >
             <UIcon name="i-lucide-skip-forward" class="h-3 w-3 shrink-0" />
@@ -593,12 +592,12 @@ const ITEM_ICON: Record<string, string> = {
                 ]"
               />
             </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-toned">
+            <span class="min-w-0 flex-1 truncate text-xs text-toned">
               {{ agentKindMeta(companionByStep[i]!.kind).label }}
               <span class="text-dimmed">{{ t('pipeline.progress.companionSuffix') }}</span>
             </span>
             <span
-              class="shrink-0 text-[11px] font-medium"
+              class="shrink-0 text-2xs font-medium"
               :class="COMPANION_STATE_META[companionByStep[i]!.state].text"
             >
               {{ COMPANION_STATE_META[companionByStep[i]!.state].label }}
@@ -624,12 +623,12 @@ const ITEM_ICON: Record<string, string> = {
             >
               <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-3 w-3 text-app-hue-pink" />
             </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-toned">
+            <span class="min-w-0 flex-1 truncate text-xs text-toned">
               {{ FOLLOW_UP_COMPANION_META.label }}
               <span class="text-dimmed">{{ t('pipeline.progress.companionSuffix') }}</span>
             </span>
             <span
-              class="shrink-0 text-[11px] font-medium"
+              class="shrink-0 text-2xs font-medium"
               :class="followUpPending(s) > 0 ? 'text-app-hue-pink' : 'text-muted'"
             >
               {{ followUpLabel(s) }}
@@ -663,7 +662,7 @@ const ITEM_ICON: Record<string, string> = {
                 :class="forkPhase(s) === 'proposing' ? 'animate-spin' : ''"
               />
             </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-toned">
+            <span class="min-w-0 flex-1 truncate text-xs text-toned">
               {{
                 forkPhase(s) === 'proposing'
                   ? t('pipeline.progress.forkDecision.proposing')
@@ -687,7 +686,7 @@ const ITEM_ICON: Record<string, string> = {
             >
               <UIcon name="i-lucide-clipboard-check" class="h-3 w-3 text-primary" />
             </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-toned">
+            <span class="min-w-0 flex-1 truncate text-xs text-toned">
               {{ t('pipeline.progress.prReview.review') }}
             </span>
           </button>
@@ -712,7 +711,7 @@ const ITEM_ICON: Record<string, string> = {
                 class="h-3 w-3 text-app-hue-cyan"
               />
             </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-toned">
+            <span class="min-w-0 flex-1 truncate text-xs text-toned">
               {{ t('pipeline.progress.binaryCandidates.choose') }}
             </span>
           </button>
@@ -721,7 +720,7 @@ const ITEM_ICON: Record<string, string> = {
                NOT a "Review & approve" gate (the human is summoned only if needed) -->
           <div
             v-if="reviewStageLabel(s.agentKind)"
-            class="mt-3 inline-flex items-center gap-1 text-[11px] text-primary"
+            class="mt-3 inline-flex items-center gap-1 text-2xs text-primary"
           >
             <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
             {{ reviewStageLabel(s.agentKind) }}
@@ -766,7 +765,7 @@ const ITEM_ICON: Record<string, string> = {
           </div>
           <p
             v-else-if="s.decision?.chosen"
-            class="mt-2 flex items-center gap-1 truncate text-[11px] text-app-success-400"
+            class="mt-2 flex items-center gap-1 truncate text-2xs text-app-success-400"
             :title="s.decision.chosen"
           >
             <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />