@cat-factory/app 0.309.0 → 0.310.0

package/app/components/media/ArtifactLightbox.vue

@@ -9,6 +9,7 @@
 import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import type { ArtifactBlobs } from '~/composables/useArtifactBlobs'
+import IconButton from '~/components/common/IconButton.vue'
 
 interface LightboxItem {
   artifactId: string
@@ -180,39 +181,56 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           {{ t('media.lightbox.counter', { current: index + 1, total }) }}
         </span>
         <div class="flex shrink-0 items-center gap-1">
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40"
-            :title="t('media.lightbox.zoomOut')"
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-zoom-out"
+            :label="t('media.lightbox.zoomOut')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40',
+              leadingIcon: 'h-4 w-4',
+            }"
             :disabled="scale <= MIN_SCALE"
             @click="zoomBy(1 / 1.25)"
-          >
-            <UIcon name="i-lucide-zoom-out" class="h-4 w-4" />
-          </button>
+          />
           <span class="w-10 text-center text-2xs tabular-nums text-dimmed">{{
             n(scale, 'percent')
           }}</span>
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40"
-            :title="t('media.lightbox.zoomIn')"
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-zoom-in"
+            :label="t('media.lightbox.zoomIn')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40',
+              leadingIcon: 'h-4 w-4',
+            }"
             :disabled="scale >= MAX_SCALE"
             @click="zoomBy(1.25)"
-          >
-            <UIcon name="i-lucide-zoom-in" class="h-4 w-4" />
-          </button>
-          <button
-            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
-            :title="t('media.lightbox.reset')"
+          />
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-maximize"
+            :label="t('media.lightbox.reset')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default',
+              leadingIcon: 'h-4 w-4',
+            }"
             @click="resetView"
-          >
-            <UIcon name="i-lucide-maximize" class="h-4 w-4" />
-          </button>
-          <button
-            class="ms-1 rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
-            :title="t('media.lightbox.close')"
+          />
+          <IconButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-x"
+            class="ms-1"
+            :label="t('media.lightbox.close')"
+            :ui="{
+              base: 'rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default',
+              leadingIcon: 'h-4 w-4',
+            }"
             @click="close"
-          >
-            <UIcon name="i-lucide-x" class="h-4 w-4" />
-          </button>
+          />
         </div>
       </div>
 
@@ -222,14 +240,19 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
         @wheel="onWheel"
         @click.self="close"
       >
-        <button
+        <IconButton
           v-if="total > 1"
-          class="absolute start-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted"
-          :title="t('media.lightbox.prev')"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-chevron-left"
+          class="absolute start-3 top-1/2 z-10 -translate-y-1/2"
+          :label="t('media.lightbox.prev')"
+          :ui="{
+            base: 'rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted',
+            leadingIcon: 'h-5 w-5 rtl:-scale-x-100',
+          }"
           @click="go(-1)"
-        >
-          <UIcon name="i-lucide-chevron-left" class="h-5 w-5 rtl:-scale-x-100" />
-        </button>
+        />
 
         <img
           v-if="url"
@@ -257,23 +280,30 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           <p class="text-xs">
             {{ state === 'error' ? t('media.lightbox.failed') : t('media.lightbox.loading') }}
           </p>
-          <button
+          <UButton
+            color="neutral"
+            variant="link"
             v-if="state === 'error' && current"
-            class="text-xs text-app-warning-300 hover:underline"
+            class="p-0 text-xs text-app-warning-300 hover:underline"
             @click="props.blobs.retry(current.artifactId)"
           >
             {{ t('common.retry') }}
-          </button>
+          </UButton>
         </div>
 
-        <button
+        <IconButton
           v-if="total > 1"
-          class="absolute end-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted"
-          :title="t('media.lightbox.next')"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-chevron-right"
+          class="absolute end-3 top-1/2 z-10 -translate-y-1/2"
+          :label="t('media.lightbox.next')"
+          :ui="{
+            base: 'rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted',
+            leadingIcon: 'h-5 w-5 rtl:-scale-x-100',
+          }"
           @click="go(1)"
-        >
-          <UIcon name="i-lucide-chevron-right" class="h-5 w-5 rtl:-scale-x-100" />
-        </button>
+        />
       </div>
     </div>
   </Teleport>

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
@@ -135,23 +136,18 @@ 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>
@@ -163,16 +159,23 @@ function onRefInput(e: Event) {
         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-sm 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>
 
@@ -182,9 +185,11 @@ function onRefInput(e: Event) {
         <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-sm 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,7 +197,7 @@ 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-sm border border-dashed border-muted text-2xs text-app-600"
@@ -214,40 +219,39 @@ function onRefInput(e: Event) {
             {{ t('media.compare.fromLinkedDesign') }}
           </span>
         </figcaption>
-        <button
-          v-if="refUrl"
-          class="group relative block w-full overflow-hidden rounded-sm 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-sm bg-app-950/80 px-1.5 py-0.5 text-3xs 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-sm border border-dashed text-2xs 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>
 
@@ -265,12 +269,13 @@ function onRefInput(e: Event) {
       </div>
       <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>
@@ -326,15 +331,5 @@ function onRefInput(e: Event) {
       <canvas ref="diffCanvas" :class="DIFF_CANVAS_CLASS" />
       <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/observability/OutcomeFilterChips.vue

@@ -25,17 +25,18 @@ function toneClass(option: (typeof props.options)[number], active: boolean): str
 
 <template>
   <div class="flex rounded-lg border border-default p-0.5 text-xs">
-    <button
+    <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

@@ -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)"
       >
@@ -159,12 +160,13 @@ 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')"
       >
@@ -208,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

package/app/components/observability/StepModelActivity.vue

@@ -35,13 +35,15 @@ function openObservability() {
       <SectionLabel as="span">
         {{ t('observability.modelActivity') }}
       </SectionLabel>
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="instanceId"
-        class="text-2xs 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"

package/app/components/observability/ToolCallList.vue

@@ -211,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)"
           >
@@ -236,7 +238,7 @@ 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-2xs text-dimmed">

package/app/components/outcome/OutcomeSummaryWindow.vue

@@ -693,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)"
@@ -730,7 +731,7 @@ function openTestReport() {
                 />
                 {{ view.view }}
               </span>
-            </button>
+            </UButton>
           </div>
         </template>
         <template v-else>

package/app/components/palettes/AgentPalette.vue

@@ -74,24 +74,28 @@ function toggle(id: string) {
     </div>
     <div class="space-y-2">
       <section v-for="g in groups" :key="g.id">
-        <SectionLabel
-          as="button"
-          type="button"
-          class="flex w-full items-center gap-1.5 rounded-sm px-1 py-1 text-start 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>
-        </SectionLabel>
+          <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}`"
@@ -108,7 +112,7 @@ function toggle(id: string) {
               <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>