@cat-factory/app 0.308.0 → 0.310.0

package/app/components/github/RepoTreeBrowser.vue

@@ -193,7 +193,7 @@ watch(
     </div>
 
     <!-- listing -->
-    <div class="max-h-56 overflow-auto rounded border border-default">
+    <div class="max-h-56 overflow-auto rounded-sm border border-default">
       <div v-if="loading" class="p-3 text-sm text-muted">
         {{ t('github.repoTree.loading') }}
       </div>
@@ -206,14 +206,15 @@ watch(
           :key="entry.path"
           class="flex items-center justify-between gap-2 px-3 py-1.5"
         >
-          <button
-            type="button"
-            class="flex items-center gap-2 truncate text-sm text-default hover:text-primary"
+          <UButton
+            color="primary"
+            variant="ghost"
+            class="flex items-center gap-2 truncate p-0 text-sm text-default hover:bg-transparent hover:text-primary"
             @click="browseTo(entry.path)"
           >
             <UIcon name="i-lucide-folder" class="h-4 w-4 shrink-0 text-app-warning-400" />
             <span class="truncate">{{ entry.name }}</span>
-          </button>
+          </UButton>
           <span
             v-if="clashes(entry)"
             class="flex shrink-0 items-center gap-1 text-xs text-app-warning-400"
@@ -256,9 +257,10 @@ watch(
               data-testid="repo-tree-select-all"
               @update:model-value="toggleAllFiles"
             />
-            <button
-              type="button"
-              class="text-xs text-muted hover:text-primary"
+            <UButton
+              color="primary"
+              variant="ghost"
+              class="p-0 text-xs text-muted hover:bg-transparent hover:text-primary"
               @click="toggleAllFiles"
             >
               {{
@@ -268,7 +270,7 @@ watch(
                   selectableFiles.length,
                 )
               }}
-            </button>
+            </UButton>
           </li>
           <li
             v-for="entry in fileEntries"
@@ -282,16 +284,17 @@ watch(
                 :aria-label="entry.name"
                 @update:model-value="pick(entry.path)"
               />
-              <button
-                type="button"
-                class="flex items-center gap-2 truncate text-sm hover:text-primary"
+              <UButton
+                color="primary"
+                variant="ghost"
+                class="flex items-center gap-2 truncate p-0 text-sm hover:bg-transparent hover:text-primary"
                 :class="isPicked(entry.path) ? 'text-primary' : 'text-toned'"
                 :disabled="isAdded(entry.path)"
                 @click="pick(entry.path)"
               >
                 <UIcon name="i-lucide-file" class="h-4 w-4 shrink-0 text-muted" />
                 <span class="truncate">{{ entry.name }}</span>
-              </button>
+              </UButton>
             </div>
             <span
               v-if="isAdded(entry.path)"

package/app/components/humanTest/HumanTestWindow.vue

@@ -15,6 +15,7 @@ import type {
 type HumanTestRoundOutcome = NonNullable<HumanTestRound['outcome']>
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -168,11 +169,11 @@ const canDestroy = computed(
       <template v-else>
         <!-- Environment -->
         <section class="rounded-lg border border-default bg-default/60 p-4">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('humanTest.environment.heading') }}
-          </h3>
+          </SectionLabel>
           <div v-if="env" class="space-y-2">
-            <div class="flex items-center gap-2 text-[13px]">
+            <div class="flex items-center gap-2 text-sm">
               <UIcon
                 name="i-lucide-circle-dot"
                 class="h-3.5 w-3.5"
@@ -182,27 +183,28 @@ const canDestroy = computed(
                 t(ENV_STATUS_LABEL[env.status])
               }}</span>
             </div>
-            <a
+            <ULink
+              raw
               v-if="env.url"
-              :href="env.url"
+              :to="env.url"
               target="_blank"
               rel="noopener"
-              class="inline-flex items-center gap-1.5 break-all text-[13px] text-app-info-300 hover:underline"
+              class="inline-flex items-center gap-1.5 break-all text-sm text-app-info-300 hover:underline"
             >
               <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
               {{ env.url }}
-            </a>
-            <p v-else class="text-[12px] italic text-dimmed">
+            </ULink>
+            <p v-else class="text-xs italic text-dimmed">
               {{ t('humanTest.environment.noUrl') }}
             </p>
-            <p v-if="env.expiresAt" class="text-[11px] text-dimmed">
+            <p v-if="env.expiresAt" class="text-2xs text-dimmed">
               {{ t('humanTest.environment.expires', { date: d(new Date(env.expiresAt), 'long') }) }}
             </p>
           </div>
-          <p v-else class="text-[12px] text-app-warning-300/90">
+          <p v-else class="text-xs text-app-warning-300/90">
             {{ ht.degradedReason ?? t('humanTest.environment.none') }}
           </p>
-          <p v-if="env && ht.degradedReason" class="mt-2 text-[12px] text-app-warning-300/90">
+          <p v-if="env && ht.degradedReason" class="mt-2 text-xs text-app-warning-300/90">
             {{ ht.degradedReason }}
           </p>
 
@@ -249,7 +251,7 @@ const canDestroy = computed(
         <!-- Working state -->
         <p
           v-if="working"
-          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-[12px] text-toned"
+          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-xs text-toned"
         >
           <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-app-warning-300" />
           {{ phase ? t(PHASE_LABEL[phase]) : '' }}
@@ -258,22 +260,25 @@ const canDestroy = computed(
         <!-- Findings / fix -->
         <section v-if="awaitingHuman" class="rounded-lg border border-default bg-default/60 p-4">
           <div class="flex items-center justify-between">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3">
               {{ t('humanTest.fix.heading') }}
-            </h3>
-            <button
-              class="text-[12px] text-muted hover:text-default"
+            </SectionLabel>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="p-0 text-xs text-muted hover:bg-transparent hover:text-default"
               @click="showFindings = !showFindings"
             >
               {{ showFindings ? t('humanTest.fix.cancel') : t('humanTest.fix.requestFix') }}
-            </button>
+            </UButton>
           </div>
           <div v-if="showFindings" class="mt-2 space-y-2">
-            <textarea
+            <UTextarea
               v-model="findings"
-              rows="4"
+              :rows="4"
               :placeholder="t('humanTest.fix.placeholder')"
-              class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
+              size="sm"
+              class="w-full"
             />
             <UButton
               size="sm"
@@ -294,11 +299,11 @@ const canDestroy = computed(
           v-if="ht.rounds && ht.rounds.length"
           class="rounded-lg border border-default bg-default/60 p-4"
         >
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('humanTest.history.heading', { count: ht.attempts }, ht.attempts) }}
-          </h3>
+          </SectionLabel>
           <ol class="space-y-2">
-            <li v-for="(r, i) in ht.rounds" :key="i" class="flex items-start gap-2 text-[12px]">
+            <li v-for="(r, i) in ht.rounds" :key="i" class="flex items-start gap-2 text-xs">
               <UIcon
                 :name="r.kind === 'fix' ? 'i-lucide-wrench' : 'i-lucide-git-merge'"
                 class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted"
@@ -310,7 +315,7 @@ const canDestroy = computed(
                     : t('humanTest.history.pulledMain')
                 }}</span>
                 <span
-                  class="ms-1.5 rounded px-1 text-[10px] uppercase"
+                  class="ms-1.5 rounded-sm px-1 text-3xs uppercase"
                   :class="
                     r.outcome === 'completed'
                       ? 'bg-app-success-500/15 text-app-success-300'

package/app/components/initiative/InitiativePlanNotice.vue

@@ -45,13 +45,13 @@ const { t } = useI18n()
     <header class="flex items-start gap-2.5">
       <UIcon name="i-lucide-clipboard-check" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-300" />
       <div class="min-w-0 flex-1">
-        <h3 class="text-[13px] font-semibold text-app-warning-200">
+        <h3 class="text-sm font-semibold text-app-warning-200">
           {{ t('initiative.planReview.title') }}
         </h3>
-        <p class="mt-0.5 text-[12px] leading-relaxed text-app-warning-100/80">
+        <p class="mt-0.5 text-xs leading-relaxed text-app-warning-100/80">
           {{ t('initiative.planReview.body') }}
         </p>
-        <p class="mt-2 text-[12px] leading-relaxed text-app-warning-100/70">
+        <p class="mt-2 text-xs leading-relaxed text-app-warning-100/70">
           {{ t('initiative.planReview.noDocument') }}
           <template v-if="hasSections">
             {{ t('initiative.planReview.noDocumentSections') }}

package/app/components/initiative/InitiativePlanReview.vue

@@ -30,6 +30,8 @@ import type { StepApproval } from '~/types/execution'
 import { useStepProse } from '~/composables/useStepProse'
 import { useProseComments } from '~/composables/useProseComments'
 import InitiativePlanDecision from '~/components/initiative/InitiativePlanDecision.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   /** The parked gate under review. */
@@ -150,34 +152,31 @@ async function copyPlan() {
       class="hidden w-52 shrink-0 flex-col border-e border-default bg-default/60 lg:flex"
     >
       <div class="flex items-center gap-0.5 border-b border-default px-3 py-2">
-        <span
-          v-if="outline.hasToc"
-          class="min-w-0 flex-1 truncate text-[11px] font-semibold uppercase tracking-wide text-dimmed"
-        >
+        <SectionLabel v-if="outline.hasToc" as="span" class="min-w-0 flex-1 truncate">
           {{ t('panels.stepDetail.contents') }}
-        </span>
+        </SectionLabel>
         <span v-else class="flex-1" />
         <!-- Collapse-all tracks the outline: with no headings the only section is the untitled
              preamble, which renders no toggle of its own, so collapsing it would hide the whole
              plan with nothing on screen to bring it back. Copying it does not — that is about the
              document, which exists either way. -->
-        <UButton
+        <IconButton
           v-if="outline.hasToc"
           :icon="allCollapsed ? 'i-lucide-unfold-vertical' : 'i-lucide-fold-vertical'"
           color="neutral"
           variant="ghost"
           size="xs"
-          :title="
+          :label="
             allCollapsed ? t('panels.stepDetail.expandAll') : t('panels.stepDetail.collapseAll')
           "
           @click="setAll(!allCollapsed)"
         />
-        <UButton
+        <IconButton
           icon="i-lucide-copy"
           color="neutral"
           variant="ghost"
           size="xs"
-          :title="t('panels.stepDetail.copyRawOutput')"
+          :label="t('panels.stepDetail.copyRawOutput')"
           @click="copyPlan"
         />
       </div>
@@ -187,10 +186,12 @@ async function copyPlan() {
         :aria-label="t('panels.stepDetail.contents')"
         class="flex-1 space-y-0.5 overflow-y-auto px-2 py-2"
       >
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-for="s in tocSections"
           :key="s.id"
-          class="block w-full truncate rounded-md px-2 py-1 text-start text-[12px] transition"
+          class="block w-full truncate rounded-md px-2 py-1 text-start text-xs transition"
           :class="
             activeId === s.id
               ? 'bg-app-warning-500/15 font-medium text-app-warning-100'
@@ -201,7 +202,7 @@ async function copyPlan() {
           @click="goTo(s.id)"
         >
           {{ s.title }}
-        </button>
+        </UButton>
       </nav>
       <!-- Run details (the model, the run id, the token telemetry). Filled by the host, which
            already resolves the bundle through `useResultViewRunMeta`; it keeps its home in a
@@ -214,21 +215,22 @@ async function copyPlan() {
         class="flex flex-col"
         :class="outline.hasToc ? 'max-h-[45%] shrink-0 border-t border-default' : 'min-h-0 flex-1'"
       >
-        <button
-          type="button"
+        <UButton
+          color="neutral"
+          variant="ghost"
           data-testid="initiative-plan-run-meta-toggle"
           class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-start transition hover:bg-elevated/40"
           :aria-expanded="runDetailsOpen"
           @click="runDetailsOpen = !runDetailsOpen"
         >
-          <span class="flex-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="flex-1">
             {{ t('panels.stepDetail.details') }}
-          </span>
+          </SectionLabel>
           <UIcon
             :name="runDetailsOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
             class="h-3.5 w-3.5 shrink-0 text-dimmed"
           />
-        </button>
+        </UButton>
         <div
           v-if="runDetailsOpen"
           data-testid="initiative-plan-run-meta"
@@ -251,7 +253,7 @@ async function copyPlan() {
            `5xl` shell), so a cap was dead markup and the comment here said so. On a window that now
            spans the viewport it is the only thing between the plan and 200-character lines, and it
            is the step reader's own measure (`AgentStepDetail`, `mx-auto max-w-3xl` over the same
-           13px `.reader-prose`) rather than a second opinion about how wide prose should be. The
+           `text-sm` `.reader-prose`) rather than a second opinion about how wide prose should be. The
            leftover width is the document's margins; the LAYOUT is what the extra space bought —
            outline and rail no longer competing with the plan for one 5xl card. -->
       <div class="mx-auto w-full max-w-3xl">
@@ -262,9 +264,11 @@ async function copyPlan() {
           :ref="(el) => (sectionEls[s.id] = el as HTMLElement | null)"
           class="scroll-mt-2"
         >
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="s.depth > 0"
-            class="group flex w-full items-center gap-1.5 rounded py-0.5 text-start transition hover:text-highlighted"
+            class="group flex w-full items-center gap-1.5 rounded-sm px-0 py-0.5 text-start transition hover:bg-transparent hover:text-highlighted"
             :aria-expanded="!collapsed[s.id]"
             @click="toggle(s.id)"
           >
@@ -275,17 +279,17 @@ async function copyPlan() {
             />
             <span
               class="font-semibold text-app-100"
-              :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-[13px]'"
+              :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
               v-html="s.titleHtml"
             />
-          </button>
+          </UButton>
           <!-- `review-mode` carries the click-to-comment affordance, so it tracks the same RBAC
                gate the composer does — a viewer gets the document, not hover targets that lead
                nowhere. -->
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div
             v-show="!collapsed[s.id]"
-            class="reader-prose mt-0.5 text-[13px] leading-relaxed text-toned"
+            class="reader-prose mt-0.5 text-sm leading-relaxed text-toned"
             :class="[s.depth > 0 ? 'ps-5' : '', canExecute ? 'review-mode' : '']"
             @click="onProseClick"
             v-html="s.bodyHtml"
@@ -305,12 +309,12 @@ async function copyPlan() {
         <!-- A HEADING, not a styled div: this rail is what the window is now for, so the surface
              that asks the human for a decision has to be reachable as one. -->
         <h3
-          class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-app-warning-400"
+          class="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wide text-app-warning-400"
         >
           <UIcon name="i-lucide-clipboard-check" class="h-3.5 w-3.5 shrink-0" />
           {{ t('initiative.planReview.title') }}
         </h3>
-        <p class="mt-1 text-[12px] leading-relaxed text-muted">
+        <p class="mt-1 text-xs leading-relaxed text-muted">
           {{ t('initiative.planReview.body') }}
         </p>
       </div>
@@ -322,11 +326,11 @@ async function copyPlan() {
           data-testid="initiative-plan-composer"
           class="rounded-lg border border-primary/40 bg-primary/5 p-2.5"
         >
-          <div class="mb-1 text-[10px] uppercase tracking-wide text-primary">
+          <div class="mb-1 text-3xs uppercase tracking-wide text-primary">
             {{ t('panels.stepDetail.commentingOn') }}
           </div>
           <pre
-            class="mb-2 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-1.5 text-[11px] text-toned"
+            class="mb-2 max-h-20 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/60 p-1.5 text-2xs text-toned"
             >{{ draftTarget.quotedSource }}</pre>
           <UTextarea
             v-model="draftBody"
@@ -361,28 +365,32 @@ async function copyPlan() {
           class="rounded-lg border border-default bg-default/50 p-2.5"
         >
           <div class="mb-1 flex items-start justify-between gap-2">
-            <div class="text-[10px] uppercase tracking-wide text-dimmed">
+            <SectionLabel>
               {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
-            </div>
-            <button
-              class="text-dimmed transition hover:text-app-error-400"
-              :title="t('panels.stepDetail.removeComment')"
+            </SectionLabel>
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              :label="t('panels.stepDetail.removeComment')"
+              :ui="{
+                base: 'p-0 text-dimmed transition hover:bg-transparent hover:text-app-error-400',
+                leadingIcon: 'h-3.5 w-3.5',
+              }"
               @click="removeComment(idx)"
-            >
-              <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-            </button>
+            />
           </div>
           <pre
-            class="mb-1 max-h-16 overflow-auto whitespace-pre-wrap rounded bg-app-950/50 p-1.5 text-[10px] text-muted"
+            class="mb-1 max-h-16 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/50 p-1.5 text-3xs text-muted"
             >{{ c.quotedSource }}</pre>
-          <p class="text-[12px] text-default">{{ c.body }}</p>
+          <p class="text-xs text-default">{{ c.body }}</p>
         </div>
 
         <!-- Only worth saying where clicking a block does something (the RBAC to act on it) and
              where nothing has been said yet. -->
         <p
           v-if="canExecute && !draftTarget && !planComments.length"
-          class="text-[11px] leading-relaxed text-muted"
+          class="text-2xs leading-relaxed text-muted"
         >
           {{ t('initiative.planReview.commentHint') }}
         </p>

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -221,7 +221,7 @@ async function onDiscard() {
         </div>
 
         <template v-else>
-          <p class="mb-4 text-[13px] leading-relaxed text-toned">
+          <p class="mb-4 text-sm leading-relaxed text-toned">
             {{ t('initiative.planning.intro') }}
           </p>
 
@@ -259,7 +259,7 @@ async function onDiscard() {
                converged, which means the planner already has what it needs). -->
           <div
             v-else-if="phase === 'idle' && questions.length === 0"
-            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
+            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-sm text-muted"
             data-testid="initiative-planning-idle"
           >
             {{ t('initiative.planning.idle') }}
@@ -268,7 +268,7 @@ async function onDiscard() {
           <!-- Converged / no pending questions -->
           <div
             v-else-if="phase === 'converged' || questions.length === 0"
-            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
+            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-sm text-muted"
             data-testid="initiative-planning-converged"
           >
             {{ t('initiative.planning.converged') }}
@@ -301,7 +301,7 @@ async function onDiscard() {
                    flush could only drop. -->
               <p
                 v-if="!addressable(q)"
-                class="mt-1 text-[11px] text-app-warning-300"
+                class="mt-1 text-2xs text-app-warning-300"
                 data-testid="initiative-planning-unanswerable"
               >
                 {{ t('initiative.planning.unanswerable') }}
@@ -360,7 +360,7 @@ async function onDiscard() {
         v-if="phase === 'awaiting' && questions.length > 0"
         class="ms-auto flex items-center gap-2"
       >
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           <span
             v-if="unanswered > 0"
             class="text-app-warning-400/90"