@cat-factory/app 0.308.0 → 0.310.0

package/app/components/media/ImageCompare.vue

@@ -9,6 +9,7 @@
 // as a drag-and-drop / click upload target (emits `uploadReference`).
 import { computed, nextTick, ref, watch } from 'vue'
 import type { ArtifactBlobs } from '~/composables/useArtifactBlobs'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   view: string
@@ -88,7 +89,7 @@ const diffCanvas = ref<HTMLCanvasElement | null>(null)
 // there reads as "no difference", the same zero the difference composite produces, in either colour
 // mode, so no mode-following token fits. Bound as a const so the guard's `fixed-colour-ok:` marker
 // stays on the class string; the inline-template form gets reflowed off its own line by oxfmt.
-const DIFF_CANVAS_CLASS = 'w-full rounded border border-default bg-black' // fixed-colour-ok: diff canvas backdrop
+const DIFF_CANVAS_CLASS = 'w-full rounded-sm border border-default bg-black' // fixed-colour-ok: diff canvas backdrop
 const CAP = 2000
 // Bumped on every renderDiff entry so a render whose async work (image decode) is overtaken
 // by a newer mode/image change bails out instead of drawing stale pixels onto the canvas.
@@ -135,56 +136,60 @@ async function renderDiff() {
 watch([mode, actualUrl, refUrl], renderDiff, { immediate: true })
 
 // --- reference upload (drag-drop + click) ---
-const dragOver = ref(false)
-const refInput = ref<HTMLInputElement | null>(null)
-// Accept only the formats the file input advertises (PNG/JPEG), so a dropped GIF/SVG/WebP
-// can't slip past the picker's `accept` filter.
+// `UFileUpload` owns the picker, the drop zone and the drag state; the click-to-replace
+// affordance calls its `open()`. The type guard stays ours: `accept` filters the PICKER, and a
+// dropped GIF/SVG/WebP would otherwise arrive anyway.
 const ACCEPTED = /^image\/(png|jpeg)$/
-function pickFile(files: FileList | null | undefined) {
-  const file = files?.[0]
+const pendingRef = ref<File | null>(null)
+watch(pendingRef, (file) => {
   if (file && ACCEPTED.test(file.type)) emit('uploadReference', file)
-}
-function onDrop(e: DragEvent) {
-  dragOver.value = false
-  pickFile(e.dataTransfer?.files)
-}
-function onRefInput(e: Event) {
-  pickFile((e.target as HTMLInputElement).files)
-  if (refInput.value) refInput.value.value = ''
-}
+  // Cleared either way, so a fresh pick is a fresh file. `UFileUpload` carries `reset` for the
+  // other half of this: clearing the model alone leaves the native input holding the file it
+  // already has, and the browser fires no change event when the same one is chosen twice.
+  if (file) pendingRef.value = null
+})
 </script>
 
 <template>
   <div class="rounded-lg border border-default bg-default/60 p-3">
     <div class="mb-2 flex items-center justify-between gap-2">
-      <h3 class="min-w-0 truncate text-[12px] font-semibold text-default">{{ view }}</h3>
+      <h3 class="min-w-0 truncate text-xs font-semibold text-default">{{ view }}</h3>
       <!-- Mode switch -->
       <div
         v-if="MODES.length > 1"
         class="flex items-center gap-0.5 rounded-md border border-default bg-app-950/60 p-0.5"
       >
-        <button
+        <IconButton
           v-for="m in MODES"
           :key="m.id"
-          class="rounded px-1.5 py-1 text-muted hover:text-default"
-          :class="mode === m.id ? 'bg-elevated text-app-100' : ''"
-          :title="m.label"
+          color="neutral"
+          variant="ghost"
+          :icon="m.icon"
+          :label="m.label"
+          :aria-pressed="mode === m.id"
+          :ui="{
+            base: [
+              'rounded-sm px-1.5 py-1 text-muted hover:bg-transparent hover:text-default',
+              mode === m.id ? 'bg-elevated text-app-100' : '',
+            ].join(' '),
+            leadingIcon: 'h-3.5 w-3.5',
+          }"
           @click="mode = m.id"
-        >
-          <UIcon :name="m.icon" class="h-3.5 w-3.5" />
-        </button>
+        />
       </div>
     </div>
 
     <!-- SIDE BY SIDE -->
     <div v-if="mode === 'side-by-side'" class="grid grid-cols-2 gap-3">
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-dimmed">
+        <figcaption class="text-3xs uppercase tracking-wide text-dimmed">
           {{ t('media.compare.actual') }}
         </figcaption>
-        <button
+        <UButton
           v-if="actualUrl"
-          class="block w-full overflow-hidden rounded border border-default hover:border-app-600"
+          color="neutral"
+          variant="ghost"
+          class="block w-full overflow-hidden rounded-sm border border-default p-0 hover:border-app-600 hover:bg-transparent"
           @click="actualId && emit('expand', actualId)"
         >
           <img
@@ -192,10 +197,10 @@ function onRefInput(e: Event) {
             :alt="t('media.compare.actualAlt', { view })"
             class="w-full cursor-zoom-in"
           />
-        </button>
+        </UButton>
         <div
           v-else
-          class="flex h-32 items-center justify-center rounded border border-dashed border-muted text-[11px] text-app-600"
+          class="flex h-32 items-center justify-center rounded-sm border border-dashed border-muted text-2xs text-app-600"
         >
           {{
             props.blobs.statusFor(actualId) === 'error'
@@ -208,52 +213,51 @@ function onRefInput(e: Event) {
       </figure>
 
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-dimmed">
+        <figcaption class="text-3xs uppercase tracking-wide text-dimmed">
           {{ t('media.compare.reference') }}
           <span v-if="referenceOrigin === 'design'" class="text-app-warning-300/80">
             {{ t('media.compare.fromLinkedDesign') }}
           </span>
         </figcaption>
-        <button
-          v-if="refUrl"
-          class="group relative block w-full overflow-hidden rounded border border-default hover:border-app-600"
-          @click="referenceId && emit('expand', referenceId)"
+        <UFileUpload
+          v-model="pendingRef"
+          reset
+          accept="image/png,image/jpeg"
+          :disabled="busy"
+          :preview="false"
+          :label="t('media.compare.dropHint')"
+          icon="i-lucide-image-up"
+          :ui="{ base: 'h-32 text-2xs' }"
         >
-          <img
-            :src="refUrl"
-            :alt="t('media.compare.referenceAlt', { view })"
-            class="w-full cursor-zoom-in"
-          />
-          <span
-            class="absolute bottom-1 end-1 rounded bg-app-950/80 px-1.5 py-0.5 text-[10px] text-toned opacity-0 group-hover:opacity-100"
-            @click.stop="refInput?.click()"
-          >
-            {{ t('media.compare.replace') }}
-          </span>
-        </button>
-        <!-- Drop zone when no reference yet -->
-        <div
-          v-else
-          class="flex h-32 cursor-pointer flex-col items-center justify-center gap-1 rounded border border-dashed text-[11px] transition"
-          :class="
-            dragOver
-              ? 'border-app-warning-500 bg-app-warning-500/5 text-app-warning-300'
-              : 'border-muted text-app-600 hover:border-app-500 hover:text-muted'
-          "
-          @click="refInput?.click()"
-          @dragover.prevent="dragOver = true"
-          @dragleave.prevent="dragOver = false"
-          @drop.prevent="onDrop"
-        >
-          <UIcon name="i-lucide-image-up" class="h-5 w-5" />
-          <span>{{ t('media.compare.dropHint') }}</span>
-        </div>
+          <!-- With a reference already in place the tile IS the surface: it opens the lightbox,
+               and the hover affordance opens the picker the same drop zone would. -->
+          <template v-if="refUrl" #default="{ open }">
+            <UButton
+              variant="ghost"
+              color="neutral"
+              class="group relative block w-full overflow-hidden rounded-sm border border-default p-0 hover:border-app-600 hover:bg-transparent"
+              @click="referenceId && emit('expand', referenceId)"
+            >
+              <img
+                :src="refUrl"
+                :alt="t('media.compare.referenceAlt', { view })"
+                class="w-full cursor-zoom-in"
+              />
+              <span
+                class="absolute bottom-1 end-1 rounded-sm bg-app-950/80 px-1.5 py-0.5 text-3xs text-toned opacity-0 group-hover:opacity-100"
+                @click.stop="open()"
+              >
+                {{ t('media.compare.replace') }}
+              </span>
+            </UButton>
+          </template>
+        </UFileUpload>
       </figure>
     </div>
 
     <!-- OVERLAY (onion-skin) -->
     <div v-else-if="mode === 'overlay'" class="space-y-2">
-      <div class="relative w-full overflow-hidden rounded border border-default">
+      <div class="relative w-full overflow-hidden rounded-sm border border-default">
         <img :src="refUrl" :alt="t('media.compare.referenceAlt', { view })" class="w-full" />
         <!-- object-contain so a differing aspect ratio onion-skins undistorted over the reference. -->
         <img
@@ -263,14 +267,15 @@ function onRefInput(e: Event) {
           :style="{ opacity: overlayOpacity / 100 }"
         />
       </div>
-      <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-dimmed">
+      <div class="flex items-center gap-2 text-2xs uppercase tracking-wide text-muted">
         <span>{{ t('media.compare.reference') }}</span>
-        <input
-          v-model.number="overlayOpacity"
-          type="range"
-          min="0"
-          max="100"
-          class="flex-1 accent-app-warning-500"
+        <USlider
+          v-model="overlayOpacity"
+          :min="0"
+          :max="100"
+          color="warning"
+          size="xs"
+          class="flex-1"
         />
         <span>{{ t('media.compare.actual') }}</span>
       </div>
@@ -280,7 +285,7 @@ function onRefInput(e: Event) {
     <div
       v-else-if="mode === 'swipe'"
       ref="swipeBox"
-      class="relative w-full cursor-ew-resize select-none overflow-hidden rounded border border-default"
+      class="relative w-full cursor-ew-resize select-none overflow-hidden rounded-sm border border-default"
       @pointerdown="onSwipeDown"
       @pointermove="moveSwipe"
       @pointerup="onSwipeUp"
@@ -312,11 +317,11 @@ function onRefInput(e: Event) {
         </span>
       </div>
       <span
-        class="absolute left-1 top-1 rounded bg-app-950/70 px-1 text-[9px] uppercase text-toned"
+        class="absolute left-1 top-1 rounded-sm bg-app-950/70 px-1 text-3xs uppercase text-toned"
         >{{ t('media.compare.actual') }}</span
       >
       <span
-        class="absolute right-1 top-1 rounded bg-app-950/70 px-1 text-[9px] uppercase text-toned"
+        class="absolute right-1 top-1 rounded-sm bg-app-950/70 px-1 text-3xs uppercase text-toned"
         >{{ t('media.compare.reference') }}</span
       >
     </div>
@@ -324,17 +329,7 @@ function onRefInput(e: Event) {
     <!-- DIFF (canvas) -->
     <div v-else-if="mode === 'diff'" class="space-y-1">
       <canvas ref="diffCanvas" :class="DIFF_CANVAS_CLASS" />
-      <p class="text-[10px] text-dimmed">{{ t('media.compare.diffHint') }}</p>
+      <p class="text-3xs text-dimmed">{{ t('media.compare.diffHint') }}</p>
     </div>
-
-    <!-- Hidden file input shared by replace/drop zone -->
-    <input
-      ref="refInput"
-      type="file"
-      accept="image/png,image/jpeg"
-      class="hidden"
-      :disabled="busy"
-      @change="onRefInput"
-    />
   </div>
 </template>

package/app/components/merge/MergeEffortChips.vue

@@ -10,6 +10,7 @@
 import { computed } from 'vue'
 import { REVIEW_EFFORTS } from '@cat-factory/contracts'
 import type { ChangeClass, MergeClassRollup, ReviewEffort } from '~/types/merge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The currently picked effort, or null for "not chosen". */
@@ -87,12 +88,9 @@ function pick(effort: ReviewEffort) {
 <template>
   <div data-testid="merge-effort-chips" class="mt-2">
     <div class="flex items-center gap-1.5">
-      <span
-        class="text-[10px] uppercase tracking-wide text-dimmed"
-        :title="t('merge.effort.promptHint')"
-      >
+      <SectionLabel as="span" :title="t('merge.effort.promptHint')">
         {{ t('merge.effort.prompt') }}
-      </span>
+      </SectionLabel>
       <UBadge
         v-if="classLabel"
         data-testid="merge-effort-class"
@@ -119,7 +117,7 @@ function pick(effort: ReviewEffort) {
         {{ chip.label }}
       </UButton>
     </div>
-    <p v-if="history" data-testid="merge-effort-history" class="mt-1 text-[10px] text-dimmed">
+    <p v-if="history" data-testid="merge-effort-history" class="mt-1 text-3xs text-dimmed">
       {{ history }}
     </p>
   </div>

package/app/components/notifications/NotificationSettingsPanel.vue

@@ -25,6 +25,7 @@ import type {
   NotificationType,
 } from '~/types/notifications'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const notifications = useNotificationsStore()
@@ -174,11 +175,11 @@ function resetToDefaults() {
         </div>
 
         <template v-else>
-          <div class="flex items-center gap-3 px-2 text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel class="flex items-center gap-3 px-2">
             <span class="flex-1">{{ t('notificationSettings.column.event') }}</span>
             <span class="w-16 text-center">{{ t('notificationSettings.column.inApp') }}</span>
             <span class="w-16 text-center">{{ t('notificationSettings.column.email') }}</span>
-          </div>
+          </SectionLabel>
 
           <div class="max-h-[50vh] space-y-1 overflow-y-auto pr-1">
             <div
@@ -198,13 +199,13 @@ function resetToDefaults() {
             </div>
           </div>
 
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('notificationSettings.panel.inAppNote') }}
           </p>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('notificationSettings.panel.emailNote') }}
           </p>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('notificationSettings.panel.otherChannelsNote') }}
             <UButton
               v-if="slack.available"

package/app/components/observability/OutcomeFilterChips.vue

@@ -24,18 +24,19 @@ function toneClass(option: (typeof props.options)[number], active: boolean): str
 </script>
 
 <template>
-  <div class="flex rounded-lg border border-default p-0.5 text-[12px]">
-    <button
+  <div class="flex rounded-lg border border-default p-0.5 text-xs">
+    <UButton
+      color="neutral"
+      variant="ghost"
       v-for="option in options"
       :key="option.value"
-      type="button"
-      class="rounded-md px-2.5 py-1 transition"
+      class="rounded-md px-2.5 py-1 text-xs transition"
       :class="toneClass(option, option.value === modelValue)"
       :aria-pressed="option.value === modelValue"
       @click="emit('update:modelValue', option.value)"
     >
       {{ option.label }}
       <span class="tabular-nums opacity-70">{{ option.count }}</span>
-    </button>
+    </UButton>
   </div>
 </template>

package/app/components/observability/RunFailureSummary.vue

@@ -86,15 +86,15 @@ const earlierFailedToolCalls = computed(() =>
     <div class="flex items-start gap-3">
       <UIcon name="i-lucide-siren" class="mt-0.5 h-5 w-5 shrink-0 text-app-error-400" />
       <div class="min-w-0 flex-1">
-        <h2 class="text-[13px] font-semibold text-app-error-200">
+        <h2 class="text-sm font-semibold text-app-error-200">
           {{ t('observability.failure.title') }}
         </h2>
 
         <!-- The run's own structured record. Absent on a run that is still going, or that
              failed without one; the evidence below stands on its own either way. -->
         <template v-if="evidence.failure">
-          <p class="mt-1 text-[13px] text-default">{{ evidence.failure.message }}</p>
-          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-dimmed">
+          <p class="mt-1 text-sm text-default">{{ evidence.failure.message }}</p>
+          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-2xs text-dimmed">
             <span>{{ t('observability.failure.kind', { kind: failureKindLabel }) }}</span>
             <span v-if="evidence.failure.stepIndex != null">
               {{ t('observability.failure.atStep', { index: evidence.failure.stepIndex + 1 }) }}
@@ -108,10 +108,10 @@ const earlierFailedToolCalls = computed(() =>
           <FailureDetail
             :detail="evidence.failure.detail"
             :message="evidence.failure.message"
-            summary-class="text-[11px] text-dimmed hover:text-toned"
-            pre-class="bg-app-950/60 text-[11px] text-muted"
+            summary-class="text-2xs text-dimmed hover:text-toned"
+            pre-class="bg-app-950/60 text-2xs text-muted"
           />
-          <p v-if="evidence.failure.hint" class="mt-1.5 text-[12px] text-toned">
+          <p v-if="evidence.failure.hint" class="mt-1.5 text-xs text-toned">
             {{ evidence.failure.hint }}
           </p>
         </template>
@@ -121,9 +121,10 @@ const earlierFailedToolCalls = computed(() =>
     <!-- The failing calls themselves. -->
     <div class="mt-3 space-y-2">
       <!-- Last model call that FAILED outright. -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="evidence.lastErroredCall"
-        type="button"
         class="flex w-full items-start gap-3 rounded-lg border border-app-error-900/50 bg-app-950/50 px-3 py-2 text-start transition hover:bg-default/70"
         @click="emit('showCall', evidence.lastErroredCall.id)"
       >
@@ -133,7 +134,7 @@ const earlierFailedToolCalls = computed(() =>
           :style="{ color: agentMeta(evidence.lastErroredCall.agentKind).color }"
         />
         <div class="min-w-0 flex-1">
-          <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
+          <div class="flex flex-wrap items-baseline gap-x-2 text-xs">
             <span class="font-medium text-default">
               {{ t('observability.failure.lastErroredCall') }}
             </span>
@@ -145,13 +146,10 @@ const earlierFailedToolCalls = computed(() =>
               {{ evidence.lastErroredCall.httpStatus ?? t('observability.call.error') }}
             </UBadge>
           </div>
-          <p
-            v-if="evidence.lastErroredCall.errorMessage"
-            class="mt-0.5 text-[12px] text-app-error-300"
-          >
+          <p v-if="evidence.lastErroredCall.errorMessage" class="mt-0.5 text-xs text-app-error-300">
             {{ evidence.lastErroredCall.errorMessage }}
           </p>
-          <p v-if="evidence.erroredCallCount > 1" class="mt-0.5 text-[11px] text-dimmed">
+          <p v-if="evidence.erroredCallCount > 1" class="mt-0.5 text-2xs text-dimmed">
             {{
               t(
                 'observability.failure.moreErroredCalls',
@@ -162,18 +160,19 @@ const earlierFailedToolCalls = computed(() =>
           </p>
         </div>
         <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-app-600" />
-      </button>
+      </UButton>
 
       <!-- Last TOOL call that failed: the row no rollup counts. -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="evidence.lastFailedToolCall"
-        type="button"
         class="flex w-full items-start gap-3 rounded-lg border border-app-error-900/50 bg-app-950/50 px-3 py-2 text-start transition hover:bg-default/70"
         @click="emit('showFailingTools')"
       >
         <UIcon name="i-lucide-wrench" class="mt-0.5 h-4 w-4 shrink-0 text-app-error-400" />
         <div class="min-w-0 flex-1">
-          <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
+          <div class="flex flex-wrap items-baseline gap-x-2 text-xs">
             <span class="font-medium text-default">
               <!-- "One of the failing calls" when even the failures were bounded: the row is
                    real either way, but calling it the LAST would be a claim about rows this
@@ -191,16 +190,16 @@ const earlierFailedToolCalls = computed(() =>
           </div>
           <pre
             v-if="failedToolResult"
-            class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-[11px] leading-relaxed text-app-error-300"
+            class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-2xs leading-relaxed text-app-error-300"
             >{{ failedToolResult }}</pre>
-          <p v-else class="mt-0.5 text-[11px] italic text-dimmed">
+          <p v-else class="mt-0.5 text-2xs italic text-dimmed">
             {{
               evidence.lastFailedToolCall.bodies === 'stored'
                 ? t('observability.failure.toolReturnedNothing')
                 : t('observability.failure.toolBodiesWithheld')
             }}
           </p>
-          <p v-if="earlierFailedToolCalls" class="mt-0.5 text-[11px] text-dimmed">
+          <p v-if="earlierFailedToolCalls" class="mt-0.5 text-2xs text-dimmed">
             {{
               t(
                 'observability.failure.moreFailedToolCalls',
@@ -211,7 +210,7 @@ const earlierFailedToolCalls = computed(() =>
           </p>
         </div>
         <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-app-600" />
-      </button>
+      </UButton>
 
       <!-- Nothing failing to point at. Which of the reasons it is decides what an operator should
            do next, so each gets its own sentence rather than one shared shrug. `emptyReason` is
@@ -220,7 +219,7 @@ const earlierFailedToolCalls = computed(() =>
            come back from being reported as one that came back clean. -->
       <div
         v-else-if="emptyReason"
-        class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed px-3 py-2 text-[12px]"
+        class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed px-3 py-2 text-xs"
         :class="
           emptyReason === 'sink-unreachable'
             ? 'border-app-warning-900/60 text-app-warning-300'

package/app/components/observability/StepMetricsBar.vue

@@ -11,6 +11,7 @@ import {
   totalInputTokens,
   transportRatio,
 } from '~/utils/observability'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Compact, at-a-glance LLM rollup for one pipeline step: token usage, an
 // output-limit headroom bar (how close the step ran to truncation), a
@@ -57,7 +58,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
 <template>
   <div
     v-if="m.calls > 0"
-    class="rounded-lg border border-default bg-default/40 p-2.5 text-[12px]"
+    class="rounded-lg border border-default bg-default/40 p-2.5 text-xs"
     :class="clickable ? 'cursor-pointer transition hover:border-muted hover:bg-default/70' : ''"
     :role="clickable ? 'button' : undefined"
     @click="clickable ? $emit('inspect') : undefined"
@@ -88,13 +89,13 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
         >
           {{ onSubscription ? `~${cost}` : cost }}
         </span>
-        <span
+        <SectionLabel
           v-if="onSubscription"
-          class="text-[10px] uppercase tracking-wide text-dimmed"
+          as="span"
           :title="t('observability.metricsBar.subscriptionCostHint')"
         >
           {{ t('observability.metricsBar.subscription') }}
-        </span>
+        </SectionLabel>
       </template>
       <div class="ms-auto flex items-center gap-1">
         <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
@@ -112,7 +113,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
     </div>
 
     <!-- input breakdown: the headline's three classes, priced an order of magnitude apart -->
-    <div v-if="hasCache" class="mt-1.5 flex items-center gap-1.5 text-[11px] tabular-nums">
+    <div v-if="hasCache" class="mt-1.5 flex items-center gap-1.5 text-2xs tabular-nums">
       <span class="text-muted" :title="t('observability.metricsBar.freshHint')">
         {{ t('observability.metricsBar.fresh', { tokens: formatTokens(m.promptTokens) }) }}
       </span>
@@ -136,7 +137,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
 
     <!-- output-limit headroom -->
     <div v-if="headroom !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
+      <div class="flex items-center justify-between text-2xs">
         <span class="text-dimmed">{{ t('observability.metricsBar.outputLimit') }}</span>
         <span class="tabular-nums" :class="headroomTone">
           {{ formatTokens(m.peakCompletionTokens) }} /
@@ -156,7 +157,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
           :style="{ width: `${Math.max(2, pct(headroom))}%` }"
         />
       </div>
-      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-app-error-400">
+      <p v-if="m.truncatedCalls > 0" class="mt-1 text-2xs text-app-error-400">
         {{
           t(
             'observability.metricsBar.truncatedCalls',
@@ -169,7 +170,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
 
     <!-- transport overhead vs model execution -->
     <div v-if="transport !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
+      <div class="flex items-center justify-between text-2xs">
         <span class="text-dimmed">{{ t('observability.metricsBar.transportVsExecution') }}</span>
         <span class="tabular-nums text-muted">
           {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}

package/app/components/observability/StepModelActivity.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { StepMetrics } from '~/types/execution'
 import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The shared "Model activity" block: the LLM observability rollup (StepMetricsBar) under
 // a labelled header with a "View all calls →" link into the full per-call panel. Used by
@@ -31,16 +32,18 @@ function openObservability() {
 <template>
   <div v-if="instanceId || hasCalls">
     <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="span">
         {{ t('observability.modelActivity') }}
-      </span>
-      <button
+      </SectionLabel>
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="instanceId"
-        class="text-[11px] text-app-info-400 hover:text-app-info-300"
+        class="p-0 text-2xs text-app-info-400 hover:bg-transparent hover:text-app-info-300"
         @click="openObservability"
       >
         {{ t('observability.viewAllCalls') }}
-      </button>
+      </UButton>
     </div>
     <StepMetricsBar
       v-if="hasCalls && metrics"