@cat-factory/app 0.308.0 → 0.310.0

package/app/components/observability/ToolCallList.vue

@@ -5,6 +5,7 @@ import type { ToolOutcomeFilter } from '~/utils/observability'
 import { filterToolCallsByOutcome, formatMs } from '~/utils/observability'
 import { agentKindMeta } from '~/utils/catalog'
 import OutcomeFilterChips from '~/components/observability/OutcomeFilterChips.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The tool-call TRAJECTORY drill-down: what the run's agents DID, oldest first, in the order
 // they did it. The sibling of the model-call list, and the one that holds the failures no LLM
@@ -142,10 +143,10 @@ function prettyArgs(raw: string): string {
   <div class="space-y-4">
     <div class="flex flex-wrap items-center justify-between gap-2">
       <div>
-        <h2 class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h2">
           {{ t('observability.toolCalls.title') }}
-        </h2>
-        <p class="text-[11px] text-app-600">{{ t('observability.toolCalls.subtitle') }}</p>
+        </SectionLabel>
+        <p class="text-2xs text-app-600">{{ t('observability.toolCalls.subtitle') }}</p>
       </div>
       <OutcomeFilterChips v-model="filter" :options="filterOptions" />
     </div>
@@ -198,7 +199,7 @@ function prettyArgs(raw: string): string {
            implies has to explain itself here. -->
       <p
         v-if="boundedNotice"
-        class="rounded-lg border border-dashed border-app-warning-900/50 px-3 py-2 text-[11px] text-app-warning-300/90"
+        class="rounded-lg border border-dashed border-app-warning-900/50 px-3 py-2 text-2xs text-app-warning-300/90"
       >
         {{ boundedNotice }}
       </p>
@@ -210,7 +211,9 @@ function prettyArgs(raw: string): string {
           class="overflow-hidden rounded-xl border border-default bg-default/40"
           :class="!call.ok ? 'border-app-error-900/60' : ''"
         >
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             class="flex w-full items-center gap-3 px-4 py-2.5 text-start transition hover:bg-default/70"
             @click="toggle(call)"
           >
@@ -225,8 +228,8 @@ function prettyArgs(raw: string): string {
               :style="{ color: agentMeta(call.agentKind).color }"
               :title="agentMeta(call.agentKind).label"
             />
-            <span class="font-mono text-[13px] text-default">{{ call.tool }}</span>
-            <div class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-muted">
+            <span class="font-mono text-sm text-default">{{ call.tool }}</span>
+            <div class="ms-auto flex items-center gap-2.5 text-2xs tabular-nums text-muted">
               <span :title="t('observability.toolCalls.durationHint')">
                 {{ formatMs(Math.max(0, call.endedAt - call.startedAt)) }}
               </span>
@@ -235,23 +238,21 @@ function prettyArgs(raw: string): string {
               </UBadge>
               <span class="hidden text-app-600 md:inline">{{ clock(call.startedAt) }}</span>
             </div>
-          </button>
+          </UButton>
 
           <div v-if="expanded[call.id]" class="border-t border-default px-4 py-3 space-y-3">
-            <div class="flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-dimmed">
+            <div class="flex flex-wrap gap-x-5 gap-y-1 text-2xs text-dimmed">
               <span>{{ t('observability.toolCalls.dispatch', { jobId: call.jobId }) }}</span>
               <span>{{ t('observability.toolCalls.seq', { seq: call.seq }) }}</span>
             </div>
             <!-- `withheld` is not an empty body: nothing was captured, so an empty `args` here
                must not read as a tool that took none. -->
-            <p v-if="call.bodies !== 'stored'" class="text-[12px] italic text-dimmed">
+            <p v-if="call.bodies !== 'stored'" class="text-xs italic text-dimmed">
               {{ t('observability.toolCalls.bodiesWithheld') }}
             </p>
             <template v-else>
               <div>
-                <div
-                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-dimmed"
-                >
+                <SectionLabel class="mb-1 flex items-center gap-2">
                   <span>{{ t('observability.toolCalls.arguments') }}</span>
                   <span
                     v-if="call.argsDropped > 0"
@@ -259,15 +260,13 @@ function prettyArgs(raw: string): string {
                   >
                     {{ t('observability.toolCalls.dropped', { chars: call.argsDropped }) }}
                   </span>
-                </div>
+                </SectionLabel>
                 <pre
-                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-[11px] leading-relaxed text-toned"
+                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-2xs leading-relaxed text-toned"
                   >{{ call.args ? prettyArgs(call.args) : '—' }}</pre>
               </div>
               <div>
-                <div
-                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-dimmed"
-                >
+                <SectionLabel class="mb-1 flex items-center gap-2">
                   <span>{{ t('observability.toolCalls.result') }}</span>
                   <span
                     v-if="call.resultDropped > 0"
@@ -275,9 +274,9 @@ function prettyArgs(raw: string): string {
                   >
                     {{ t('observability.toolCalls.dropped', { chars: call.resultDropped }) }}
                   </span>
-                </div>
+                </SectionLabel>
                 <pre
-                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-[11px] leading-relaxed"
+                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-2xs leading-relaxed"
                   :class="call.ok ? 'text-toned' : 'text-app-error-300'"
                   >{{ call.result || '—' }}</pre>
               </div>

package/app/components/outcome/OutcomeSummaryWindow.vue

@@ -45,6 +45,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
 import type { BadgeColor } from '~/utils/badge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const documents = useDocumentsStore()
@@ -458,16 +459,16 @@ function openTestReport() {
 
       <!-- What was asked, in the requester's own words. -->
       <section class="mb-5">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.ask.title') }}
-        </h3>
+        </SectionLabel>
         <MarkdownProse
           v-if="outcome.ask"
           :text="outcome.ask"
-          class="text-[13px] leading-relaxed text-toned"
+          class="text-sm leading-relaxed text-toned"
           data-testid="outcome-ask"
         />
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t('outcome.ask.none') }}
         </p>
       </section>
@@ -477,9 +478,9 @@ function openTestReport() {
            agents actually read, and every section below is a statement about work done against
            it. A design that moved mid-run is the reading that changes all of them. -->
       <section class="mb-5" data-testid="outcome-sources">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.sources.title') }}
-        </h3>
+        </SectionLabel>
         <div v-if="outcome.sources.status === 'reported'" class="space-y-1">
           <div
             v-for="source in sourceRows"
@@ -495,7 +496,7 @@ function openTestReport() {
               <UIcon :name="source.icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
               <span class="truncate">{{ source.title }}</span>
             </DocumentOriginLink>
-            <p class="mt-0.5 text-[11px] text-dimmed" data-testid="outcome-source-revision">
+            <p class="mt-0.5 text-2xs text-dimmed" data-testid="outcome-source-revision">
               {{ source.revision }}
             </p>
             <!-- Stated separately from the revision above: the last revision alone says the run
@@ -503,23 +504,23 @@ function openTestReport() {
                  changed under it. -->
             <p
               v-if="source.movedDuringRun"
-              class="mt-0.5 text-[11px] text-app-warning-300"
+              class="mt-0.5 text-2xs text-app-warning-300"
               data-testid="outcome-source-moved"
             >
               {{ t('outcome.sources.moved') }}
             </p>
           </div>
         </div>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(SOURCES_GAP_KEYS[outcome.sources.gap]) }}
         </p>
       </section>
 
       <!-- Requirement coverage: which required behaviours were checked, and what was seen. -->
       <section class="mb-5" data-testid="outcome-requirements">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.requirements.title') }}
-        </h3>
+        </SectionLabel>
         <template v-if="outcome.requirements.status === 'reported'">
           <div class="mb-2 flex flex-wrap items-center gap-1.5">
             <UBadge color="success" variant="subtle" size="sm">
@@ -550,7 +551,7 @@ function openTestReport() {
                and do not cover rather than letting them read as the whole picture. -->
           <p
             v-if="specNote"
-            class="mb-2 text-[11px] leading-relaxed text-app-warning-300/90"
+            class="mb-2 text-2xs leading-relaxed text-app-warning-300/90"
             data-testid="outcome-spec-note"
           >
             {{ specNote }}
@@ -560,7 +561,7 @@ function openTestReport() {
                deciding which of the two numbers to distrust. -->
           <p
             v-if="unmatchedVerdicts > 0"
-            class="mb-2 text-[11px] leading-relaxed text-app-warning-300/90"
+            class="mb-2 text-2xs leading-relaxed text-app-warning-300/90"
             data-testid="outcome-unmatched-verdicts"
           >
             {{ t('outcome.requirements.unmatchedVerdicts', { count: unmatchedVerdicts }) }}
@@ -578,7 +579,7 @@ function openTestReport() {
               />
               <div class="min-w-0">
                 <div class="flex flex-wrap items-center gap-1.5">
-                  <span class="text-[13px] text-default">{{ req.title ?? req.id }}</span>
+                  <span class="text-sm text-default">{{ req.title ?? req.id }}</span>
                   <UBadge
                     v-if="req.regression"
                     color="error"
@@ -588,18 +589,18 @@ function openTestReport() {
                   >
                     {{ t('outcome.requirements.regressionTag') }}
                   </UBadge>
-                  <span class="text-[10px] uppercase tracking-wide text-dimmed">
+                  <SectionLabel as="span">
                     {{ t(VERDICT_META[req.verdict].key) }}
-                  </span>
+                  </SectionLabel>
                 </div>
-                <p v-if="req.detail" class="mt-0.5 text-[12px] leading-relaxed text-muted">
+                <p v-if="req.detail" class="mt-0.5 text-xs leading-relaxed text-muted">
                   {{ req.detail }}
                 </p>
               </div>
             </li>
           </ul>
         </template>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(REQUIREMENTS_GAP_KEYS[outcome.requirements.gap]) }}
         </p>
       </section>
@@ -607,9 +608,9 @@ function openTestReport() {
       <!-- How it was tested: the tester's own verdict and prose, attributed as its account. -->
       <section class="mb-5" data-testid="outcome-tests">
         <div class="mb-1.5 flex flex-wrap items-center gap-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3">
             {{ t('outcome.tests.title') }}
-          </h3>
+          </SectionLabel>
           <UBadge
             v-if="outcome.tests.status === 'reported'"
             :color="TESTS_VERDICT_COLOR[outcome.tests.verdict]"
@@ -642,15 +643,15 @@ function openTestReport() {
         <template v-if="outcome.tests.status === 'reported'">
           <p
             v-if="outcome.tests.abortReason"
-            class="mb-2 rounded-md border border-app-error-900/70 bg-app-error-500/10 p-2 text-[13px] leading-relaxed text-app-error-200"
+            class="mb-2 rounded-md border border-app-error-900/70 bg-app-error-500/10 p-2 text-sm leading-relaxed text-app-error-200"
             data-testid="outcome-tests-abort"
           >
             {{ t('outcome.tests.abort', { reason: outcome.tests.abortReason }) }}
           </p>
-          <p v-if="outcome.tests.summary" class="text-[13px] leading-relaxed text-toned">
+          <p v-if="outcome.tests.summary" class="text-sm leading-relaxed text-toned">
             {{ t('outcome.tests.summary', { summary: outcome.tests.summary }) }}
           </p>
-          <p class="mt-1.5 text-[12px] text-muted">
+          <p class="mt-1.5 text-xs text-muted">
             {{
               t('outcome.tests.counts', {
                 passed: outcome.tests.passed,
@@ -663,7 +664,7 @@ function openTestReport() {
             <li
               v-for="(concern, i) in outcome.tests.concerns"
               :key="i"
-              class="flex items-start gap-2 text-[12px] text-toned"
+              class="flex items-start gap-2 text-xs text-toned"
               data-testid="outcome-concern"
             >
               <UBadge :color="SEVERITY_COLOR[concern.severity]" variant="subtle" size="sm">
@@ -673,18 +674,18 @@ function openTestReport() {
             </li>
           </ul>
         </template>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(TESTS_GAP_KEYS[outcome.tests.gap]) }}
         </p>
       </section>
 
       <!-- What it looks like: the captured views, and whether a human was asked about them. -->
       <section class="mb-5" data-testid="outcome-visuals">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.visuals.title') }}
-        </h3>
+        </SectionLabel>
         <template v-if="outcome.visuals.status === 'reported'">
-          <p class="mb-2 text-[12px] leading-relaxed text-muted">
+          <p class="mb-2 text-xs leading-relaxed text-muted">
             {{
               outcome.visuals.source === 'visual_confirm'
                 ? t('outcome.visuals.source.visual_confirm')
@@ -692,11 +693,12 @@ function openTestReport() {
             }}
           </p>
           <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="(view, position) in outcome.visuals.views"
               :key="`${position}:${view.view}`"
-              type="button"
-              class="group overflow-hidden rounded-md border border-default bg-app-950/60 text-start transition hover:border-app-600"
+              class="group block overflow-hidden rounded-md border border-default bg-app-950/60 hover:bg-app-950/60 focus-visible:bg-app-950/60 disabled:bg-app-950/60 p-0 text-start transition hover:border-app-600"
               :disabled="!view.artifactId"
               data-testid="outcome-shot"
               @click="openShot(view, position)"
@@ -718,7 +720,7 @@ function openTestReport() {
                 />
               </div>
               <span
-                class="flex items-center gap-1 truncate px-1.5 py-1 text-[11px] text-toned"
+                class="flex items-center gap-1 truncate px-1.5 py-1 text-2xs text-toned"
                 :title="view.view"
               >
                 <UIcon
@@ -729,16 +731,16 @@ function openTestReport() {
                 />
                 {{ view.view }}
               </span>
-            </button>
+            </UButton>
           </div>
         </template>
         <template v-else>
-          <p class="text-[13px] italic leading-relaxed text-dimmed">
+          <p class="text-sm italic leading-relaxed text-dimmed">
             {{ t(VISUALS_GAP_KEYS[outcome.visuals.gap]) }}
           </p>
           <p
             v-if="outcome.visuals.detail"
-            class="mt-1 text-[12px] leading-relaxed text-dimmed"
+            class="mt-1 text-xs leading-relaxed text-dimmed"
             data-testid="outcome-visuals-detail"
           >
             {{ outcome.visuals.detail }}
@@ -750,9 +752,9 @@ function openTestReport() {
            not read diffs starts from. Beside the captured views on purpose: the shots are what
            this run saw, this is the thing itself. -->
       <section class="mb-5" data-testid="outcome-environments">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.environments.title') }}
-        </h3>
+        </SectionLabel>
         <template v-if="outcome.environments.status === 'reported'">
           <div
             v-for="row in environmentRows"
@@ -765,10 +767,10 @@ function openTestReport() {
               <UBadge :color="ENVIRONMENT_STATE_COLOR[row.state]" variant="subtle" size="sm">
                 {{ t(ENVIRONMENT_STATE_KEYS[row.state]) }}
               </UBadge>
-              <span v-if="row.service" class="truncate text-[12px] text-toned">
+              <span v-if="row.service" class="truncate text-xs text-toned">
                 {{ row.service }}
               </span>
-              <span class="text-[11px] text-dimmed">
+              <span class="text-2xs text-dimmed">
                 {{ t(ENVIRONMENT_ORIGIN_KEYS[row.origin]) }}
               </span>
             </div>
@@ -789,15 +791,15 @@ function openTestReport() {
             </UButton>
             <p
               v-else-if="row.url"
-              class="mt-1.5 break-all text-[12px] text-dimmed"
+              class="mt-1.5 break-all text-xs text-dimmed"
               data-testid="outcome-environment-url"
             >
               {{ row.url }}
             </p>
-            <p v-if="row.retained" class="mt-1 text-[11px] text-muted">
+            <p v-if="row.retained" class="mt-1 text-2xs text-muted">
               {{ t('outcome.environments.retained') }}
             </p>
-            <p v-if="row.expiresAt" class="mt-1 text-[11px] text-dimmed">
+            <p v-if="row.expiresAt" class="mt-1 text-2xs text-dimmed">
               {{
                 row.lapsed
                   ? t('outcome.environments.expired', { date: d(new Date(row.expiresAt), 'long') })
@@ -810,7 +812,7 @@ function openTestReport() {
                  otherwise holds "quota exceeded" reports a fault the environment does not have. -->
             <p
               v-if="row.detail"
-              class="mt-1 break-words text-[12px] leading-relaxed text-dimmed"
+              class="mt-1 break-words text-xs leading-relaxed text-dimmed"
               data-testid="outcome-environment-detail"
               :data-detail-kind="row.detailKind"
             >
@@ -822,16 +824,16 @@ function openTestReport() {
             </p>
           </div>
         </template>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(ENVIRONMENTS_GAP_KEYS[outcome.environments.gap]) }}
         </p>
       </section>
 
       <!-- The machine checks, listed only where one actually recorded a verdict. -->
       <section v-if="checkRows.length" data-testid="outcome-checks">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.checks.title') }}
-        </h3>
+        </SectionLabel>
         <div class="flex flex-wrap items-center gap-1.5">
           <UBadge
             v-for="check in checkRows"

package/app/components/palettes/AgentPalette.vue

@@ -6,6 +6,7 @@ import AgentTierSelect from '~/components/palettes/AgentTierSelect.vue'
 import PipelinePurposeSelect from '~/components/palettes/PipelinePurposeSelect.vue'
 import { groupAgentPalette, narrowAgentPalette } from '~/utils/agentPalette'
 import { AGENT_CATEGORIES, OBSERVABILITY_GATE_ARCHETYPE } from '~/utils/catalog'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const agents = useAgentsStore()
@@ -57,7 +58,7 @@ function toggle(id: string) {
 
 <template>
   <div class="space-y-2">
-    <p class="px-1 text-[11px] text-dimmed">{{ t('palette.hint') }}</p>
+    <p class="px-1 text-2xs text-dimmed">{{ t('palette.hint') }}</p>
     <!-- The two catalog dials, one above the other: what this pipeline is for, and how deep into
          the agent catalog to look. Both narrow the sections below, and each states its own count.
          Stacked rather than side by side because the palette column is a third of the slideover:
@@ -73,23 +74,28 @@ function toggle(id: string) {
     </div>
     <div class="space-y-2">
       <section v-for="g in groups" :key="g.id">
-        <button
-          type="button"
-          class="flex w-full items-center gap-1.5 rounded px-1 py-1 text-start text-[11px] font-semibold uppercase tracking-wide text-muted transition hover:text-default"
+        <UButton
+          color="neutral"
+          variant="link"
+          class="group w-full rounded-sm px-1 py-1"
+          :aria-expanded="!isCollapsed(g.id)"
           @click="toggle(g.id)"
         >
-          <UIcon
-            :name="isCollapsed(g.id) ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
-            class="h-3.5 w-3.5 shrink-0"
-          />
-          <span>{{ g.label }}</span>
-          <span class="ms-auto text-app-600">{{ g.agents.length }}</span>
-        </button>
+          <SectionLabel as="span" class="flex w-full items-center gap-1.5 group-hover:text-default">
+            <UIcon
+              :name="isCollapsed(g.id) ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
+              class="h-3.5 w-3.5 shrink-0"
+            />
+            <span>{{ g.label }}</span>
+            <span class="ms-auto text-app-600">{{ g.agents.length }}</span>
+          </SectionLabel>
+        </UButton>
         <div v-if="!isCollapsed(g.id)" class="mt-1 space-y-1.5">
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-for="a in g.agents"
             :key="a.kind"
-            type="button"
             class="flex w-full items-center gap-2.5 rounded-lg border border-muted bg-elevated/60 p-2 text-start transition hover:border-app-500 hover:bg-elevated"
             :title="a.description"
             :data-testid="`palette-agent-${a.kind}`"
@@ -103,10 +109,10 @@ function toggle(id: string) {
             </div>
             <div class="min-w-0">
               <div class="text-xs font-semibold text-app-100">{{ a.label }}</div>
-              <div class="truncate text-[10px] text-muted">{{ a.description }}</div>
+              <div class="truncate text-3xs text-muted">{{ a.description }}</div>
             </div>
             <UIcon name="i-lucide-plus" class="ms-auto h-4 w-4 shrink-0 text-dimmed" />
-          </button>
+          </UButton>
         </div>
       </section>
     </div>

package/app/components/palettes/AgentTierSelect.vue

@@ -60,7 +60,7 @@ const items = computed(() => [
         </span>
       </UButton>
     </UDropdownMenu>
-    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-dimmed">
+    <p v-if="props.hiddenCount" class="px-1 text-3xs text-dimmed">
       {{ t('agentTier.hidden', { count: props.hiddenCount }, props.hiddenCount) }}
     </p>
   </div>

package/app/components/palettes/PipelinePurposeSelect.vue

@@ -72,7 +72,7 @@ const items = computed(() => [
         <span class="truncate"> {{ t('pipeline.builder.purposeLabel') }}: {{ current }} </span>
       </UButton>
     </UDropdownMenu>
-    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-dimmed">
+    <p v-if="props.hiddenCount" class="px-1 text-3xs text-dimmed">
       {{ t('palette.purposeHidden', { count: props.hiddenCount }, props.hiddenCount) }}
     </p>
   </div>