@cat-factory/app 0.308.0 → 0.310.0

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -12,6 +12,7 @@ import {
 import { lodAtLeast } from '~/composables/useSemanticZoom'
 import { prReviewPhase } from '~/utils/prReviewProgress'
 import PrReviewPhaseBadge from '~/components/prReview/PrReviewPhaseBadge.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Drill-down inside a task card: the task's build-pipeline steps appear on hover (at any
 // zoom level) or once the `steps` zoom band is reached, and one band deeper (`subtasks`)
@@ -101,14 +102,15 @@ const ITEM_ICON: Record<string, string> = {
 
 <template>
   <div v-if="showSteps" class="mt-2 space-y-1 border-t border-default pt-2">
-    <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-dimmed">
+    <SectionLabel class="flex items-center gap-1">
       <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />
       {{ t('board.task.buildSteps') }}
-    </div>
-    <div v-for="(s, i) in steps" :key="i" class="rounded bg-default/60 px-1.5 py-1">
-      <button
-        type="button"
-        class="flex w-full cursor-pointer items-center gap-1 rounded text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+    </SectionLabel>
+    <div v-for="(s, i) in steps" :key="i" class="rounded-sm bg-default/60 px-1.5 py-1">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        class="flex w-full cursor-pointer items-center gap-1 rounded-sm p-0 text-start hover:bg-transparent"
         :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\n${t('board.task.clickToViewStep')}`"
         @click.stop="openStep(i)"
       >
@@ -117,7 +119,7 @@ const ITEM_ICON: Record<string, string> = {
           class="h-3 w-3 shrink-0"
           :style="{ color: agentKindMeta(s.agentKind).color }"
         />
-        <span class="truncate text-[10px] text-default">
+        <span class="truncate text-3xs text-default">
           {{ agentKindMeta(s.agentKind).label }}
         </span>
         <UIcon
@@ -129,7 +131,7 @@ const ITEM_ICON: Record<string, string> = {
              live — its slice progress reads better as Slicing… / Reviewing X/Y slices. -->
         <span
           v-if="s.subtasks && s.subtasks.total > 0 && !prPhaseActive(s)"
-          class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-muted"
+          class="ms-auto shrink-0 font-mono text-3xs tabular-nums text-muted"
         >
           {{ s.subtasks.completed }}/{{ s.subtasks.total }}
         </span>
@@ -140,7 +142,7 @@ const ITEM_ICON: Record<string, string> = {
           :class="stepSpinning(s) ? 'animate-spin' : ''"
           :style="{ color: stepVisual(s).color }"
         />
-      </button>
+      </UButton>
 
       <!-- PR reviewer: the precise sub-phase (slicing vs reviewing N/M slices), so the board
            card tells the reviewer's progress apart from a bare subtask count. Self-hides once
@@ -149,33 +151,34 @@ const ITEM_ICON: Record<string, string> = {
         v-if="prPhaseActive(s)"
         :step="s"
         :run-failed="runFailed"
-        class="ms-4 mt-1 text-[9px]"
+        class="ms-4 mt-1 text-3xs"
       />
 
       <!-- pending approval gate: jump straight to the conclusions reader. Suppressed
            while a reviewer gate is folding/re-reviewing in the background (no human needed). -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="
           s.approval &&
           s.approval.status === 'pending' &&
           instance &&
           !reviews.isBackground(s.agentKind, props.taskId)
         "
-        type="button"
-        class="mt-1 flex w-full items-center justify-center gap-1 rounded bg-app-warning-500 px-1.5 py-0.5 text-[9px] font-semibold text-app-warning-50 dark:text-app-warning-950 transition hover:bg-app-warning-400"
+        class="mt-1 flex w-full items-center justify-center gap-1 rounded-sm bg-app-warning-500 px-1.5 py-0.5 text-3xs font-semibold text-app-warning-50 dark:text-app-warning-950 transition hover:bg-app-warning-400"
         @click.stop="ui.openApprovalDetail(instance.id, s.approval.id)"
       >
         <UIcon name="i-lucide-shield-check" class="h-2.5 w-2.5" />
         {{ t('board.task.reviewAndApprove') }}
-      </button>
+      </UButton>
 
       <!-- per-step subtask progress bar -->
       <div
         v-if="s.subtasks && s.subtasks.total > 0"
-        class="mt-1 h-0.5 w-full overflow-hidden rounded bg-accented/60"
+        class="mt-1 h-0.5 w-full overflow-hidden rounded-sm bg-accented/60"
       >
         <div
-          class="h-full rounded bg-primary transition-all"
+          class="h-full rounded-sm bg-primary transition-all"
           :style="{ width: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
         />
       </div>
@@ -183,7 +186,7 @@ const ITEM_ICON: Record<string, string> = {
       <!-- conditionally-run companion (the gate's ci-fixer / conflict-resolver, or the
            Tester's fixer): a compact running/ran/skipped line, so a gate that's working
            its helper reads as actively fixing rather than a frozen subtask list. -->
-      <div v-if="companionByStep[i]" class="mt-1 flex items-center gap-1 text-[9px]">
+      <div v-if="companionByStep[i]" class="mt-1 flex items-center gap-1 text-3xs">
         <UIcon
           :name="agentKindMeta(companionByStep[i]!.kind).icon"
           class="h-2.5 w-2.5 shrink-0"
@@ -208,7 +211,7 @@ const ITEM_ICON: Record<string, string> = {
         <li
           v-for="(item, j) in s.subtasks.items"
           :key="j"
-          class="flex items-start gap-1 text-[9px]"
+          class="flex items-start gap-1 text-3xs"
           :class="
             item.status === 'completed'
               ? 'text-dimmed line-through'

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -9,6 +9,7 @@
 // is no suggestion at all as its own state, because "the two repositories agreed on everything"
 // and "the analysis never ran" would otherwise look identical and lead to opposite conclusions.
 import type { AdoptionSource, BootstrapJob } from '~/types/domain'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ job: BootstrapJob }>()
 const emit = defineEmits<{ close: [] }>()
@@ -224,31 +225,40 @@ watch(open, (isOpen) => {
           <p v-if="recordsDropped > 0" class="text-app-warning-300/90">
             {{ t('bootstrap.adoption.survey.truncated', { count: recordsDropped }) }}
           </p>
-          <details>
-            <summary class="cursor-pointer text-dimmed hover:text-toned">
-              {{ t('bootstrap.adoption.survey.show') }}
-            </summary>
-            <ul class="mt-2 space-y-1">
-              <!-- Keyed by POSITION: the transcript is append-only and rendered in order, and
+          <UCollapsible>
+            <template #default="{ open }">
+              <UButton
+                variant="link"
+                color="neutral"
+                size="xs"
+                :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                :label="t('bootstrap.adoption.survey.show')"
+                :ui="{ base: 'w-full justify-start gap-1 p-0 text-dimmed hover:text-toned' }"
+              />
+            </template>
+            <template #content>
+              <ul class="mt-2 space-y-1">
+                <!-- Keyed by POSITION: the transcript is append-only and rendered in order, and
                    the same path legitimately appears twice (a body refused by the seed and then
                    served to the model, a path the model retried). Keying on the path patched
                    those two rows against each other and rendered a note beside the wrong one. -->
-              <li
-                v-for="(entry, index) in surveyReads"
-                :key="index"
-                class="flex items-baseline gap-2"
-              >
-                <span
-                  class="shrink-0 font-mono text-[10px] uppercase"
-                  :class="entry.outcome === 'read' ? 'text-dimmed' : 'text-app-warning-400/80'"
+                <li
+                  v-for="(entry, index) in surveyReads"
+                  :key="index"
+                  class="flex items-baseline gap-2"
                 >
-                  {{ t(`bootstrap.adoption.survey.outcome.${entry.outcome}`) }}
-                </span>
-                <span class="font-mono text-muted">{{ entry.path }}</span>
-                <span v-if="entry.note" class="text-app-600">{{ entry.note }}</span>
-              </li>
-            </ul>
-          </details>
+                  <span
+                    class="shrink-0 font-mono text-3xs uppercase"
+                    :class="entry.outcome === 'read' ? 'text-dimmed' : 'text-app-warning-400/80'"
+                  >
+                    {{ t(`bootstrap.adoption.survey.outcome.${entry.outcome}`) }}
+                  </span>
+                  <span class="font-mono text-muted">{{ entry.path }}</span>
+                  <span v-if="entry.note" class="text-app-600">{{ entry.note }}</span>
+                </li>
+              </ul>
+            </template>
+          </UCollapsible>
         </div>
 
         <!-- The reviewer's own instructions, on BOTH paths. With no suggestion to answer this is
@@ -289,9 +299,9 @@ watch(open, (isOpen) => {
               <div class="flex items-start justify-between gap-3">
                 <div>
                   <p class="text-sm font-medium text-app-100">{{ decision.title }}</p>
-                  <p class="text-[11px] uppercase tracking-wide text-dimmed">
+                  <SectionLabel as="p">
                     {{ t(`bootstrap.adoption.area.${decision.area}`) }}
-                  </p>
+                  </SectionLabel>
                 </div>
                 <UBadge v-if="!touched.has(decision.id)" color="warning" variant="subtle" size="sm">
                   {{ t('bootstrap.adoption.needsYou') }}
@@ -299,7 +309,7 @@ watch(open, (isOpen) => {
               </div>
 
               <div class="grid gap-2 text-xs sm:grid-cols-2">
-                <div class="rounded bg-default/60 p-2">
+                <div class="rounded-sm bg-default/60 p-2">
                   <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.monorepo') }}
                   </p>
@@ -307,7 +317,7 @@ watch(open, (isOpen) => {
                     {{ decision.monorepoPractice ?? t('bootstrap.adoption.side.nothing') }}
                   </p>
                 </div>
-                <div class="rounded bg-default/60 p-2">
+                <div class="rounded-sm bg-default/60 p-2">
                   <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.template') }}
                   </p>
@@ -321,7 +331,7 @@ watch(open, (isOpen) => {
 
               <!-- The evidence is what makes the suggestion checkable rather than an assertion,
                    so it is shown, not tucked away. -->
-              <p v-if="decision.evidence.length" class="text-[11px] text-dimmed">
+              <p v-if="decision.evidence.length" class="text-2xs text-dimmed">
                 {{ t('bootstrap.adoption.evidence') }}
                 <span class="font-mono">{{ decision.evidence.join(', ') }}</span>
               </p>

package/app/components/bootstrap/BootstrapModal.vue

@@ -21,6 +21,8 @@ import {
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import { appInstallationManageUrl, newRepoUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const ui = useUiStore()
 const bootstrap = useBootstrapStore()
@@ -648,9 +650,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- launch -->
         <section class="space-y-4">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3">
             {{ t('bootstrap.section.newRepo') }}
-          </h3>
+          </SectionLabel>
 
           <UFormField :label="t('bootstrap.target.label')" required>
             <URadioGroup v-model="target" :items="targetItems" />
@@ -700,13 +702,12 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                     :placeholder="t('bootstrap.monorepo.directory.placeholder')"
                     class="flex-1"
                   />
-                  <UButton
+                  <IconButton
                     v-if="monorepoRepoId !== undefined"
                     variant="soft"
                     color="neutral"
                     icon="i-lucide-folder-search"
-                    :title="t('bootstrap.monorepo.directory.browse')"
-                    :aria-label="t('bootstrap.monorepo.directory.browse')"
+                    :label="t('bootstrap.monorepo.directory.browse')"
                     data-testid="bootstrap-directory-browse"
                     @click="toggleDirectoryBrowse()"
                   />
@@ -912,9 +913,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- recent jobs -->
         <section v-if="agentRuns.bootstrapJobs.length" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3">
             {{ t('bootstrap.recent.title') }}
-          </h3>
+          </SectionLabel>
           <div
             v-for="job in agentRuns.bootstrapJobs.slice(0, 5)"
             :key="job.id"
@@ -922,7 +923,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <div class="min-w-0">
               <div class="truncate text-default">{{ job.repoName }}</div>
-              <div class="truncate text-[11px] text-dimmed">
+              <div class="truncate text-2xs text-dimmed">
                 {{
                   job.referenceArchitectureName
                     ? t('bootstrap.recent.fromArch', { name: job.referenceArchitectureName })
@@ -935,7 +936,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.repoUrl"
                 :to="job.repoUrl"
                 target="_blank"
-                class="text-[11px] text-primary hover:underline"
+                class="text-2xs text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.open') }}
               </ULink>
@@ -947,7 +948,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.prUrl"
                 :to="job.prUrl"
                 target="_blank"
-                class="text-[11px] text-primary hover:underline"
+                class="text-2xs text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.openPr') }}
               </ULink>
@@ -963,9 +964,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
         <!-- reference architecture management -->
         <section class="space-y-3">
           <div class="flex items-center justify-between">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('bootstrap.arch.title') }}
-            </h3>
+            </SectionLabel>
             <UButton
               size="xs"
               color="neutral"
@@ -984,7 +985,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <div class="min-w-0">
               <div class="truncate text-sm text-default">{{ a.name }}</div>
-              <div class="truncate text-[11px] text-dimmed">{{ a.repoOwner }}/{{ a.repoName }}</div>
+              <div class="truncate text-2xs text-dimmed">{{ a.repoOwner }}/{{ a.repoName }}</div>
             </div>
             <div class="flex items-center gap-1">
               <UButton

package/app/components/bootstrap/BootstrapRunSteps.vue

@@ -34,7 +34,7 @@ function stateLabel(state: BootstrapStepState): string {
     <li
       v-for="step in steps"
       :key="step.id"
-      class="flex items-start gap-1.5 text-[11px]"
+      class="flex items-start gap-1.5 text-2xs"
       :data-step="step.id"
       :data-state="step.state"
     >

package/app/components/brainstorm/BrainstormWindow.vue

@@ -19,6 +19,7 @@ import type {
   ReviewItemSeverity,
   ReviewItemStatus,
 } from '~/types/brainstorm'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const brainstorm = useBrainstormStore()
@@ -384,9 +385,9 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     v-if="item.reply"
                     class="mt-2 max-w-3xl rounded-md border-s-2 border-muted bg-app-950/40 px-3 py-1.5 text-sm text-toned"
                   >
-                    <span class="text-[10px] uppercase tracking-wide text-dimmed">
+                    <SectionLabel as="span">
                       {{ t('brainstorm.yourChoice') }}
-                    </span>
+                    </SectionLabel>
                     <p class="whitespace-pre-line">{{ item.reply }}</p>
                   </div>
 
@@ -454,7 +455,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 
           <!-- converged document: the standard-format direction -->
           <section v-if="outline" class="mt-6 border-t border-default pt-5">
-            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-app-success-400">
+            <div class="mb-3 flex items-center gap-1.5 text-2xs text-app-success-400">
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">
                 {{ incorporated ? docNoun : t('brainstorm.docDraft', { doc: docNoun }) }}
@@ -464,9 +465,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                  `width` prop): the window is `full`-width now, and this is continuous prose that
                  would otherwise run to 200-character lines. -->
             <div v-for="s in outline.sections" :key="s.id" class="mb-2 max-w-3xl">
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-if="s.title"
-                class="group flex w-full items-center gap-2 text-start"
+                class="group flex w-full items-center gap-2 p-0 text-start hover:bg-transparent"
                 @click="toggle(s.id)"
               >
                 <UIcon
@@ -479,10 +482,10 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
                   v-html="s.titleHtml"
                 />
-              </button>
+              </UButton>
               <div
                 v-show="!s.title || !collapsed[s.id]"
-                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-toned"
+                class="reader-prose mt-1 ps-5.5 text-sm leading-relaxed text-toned"
                 v-html="s.bodyHtml"
               />
             </div>
@@ -541,7 +544,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('brainstorm.incorporateChoices') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('brainstorm.hint.allDismissed') }}
               </template>
@@ -603,14 +606,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('brainstorm.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               {{ t('brainstorm.mergedHint') }}
             </p>
           </div>
 
           <div
             v-if="session && incorporated"
-            class="border-t border-default pt-4 text-[11px] leading-relaxed text-dimmed"
+            class="border-t border-default pt-4 text-2xs leading-relaxed text-dimmed"
           >
             {{ t('brainstorm.incorporatedFooter') }}
           </div>