@cat-factory/app 0.309.0 → 0.310.1

package/app/components/pipeline/PipelinePicker.vue

@@ -94,8 +94,9 @@ function choose(id: string) {
         <!-- left: selectable options -->
         <ul class="w-1/2 shrink-0 overflow-y-auto border-e border-default p-1">
           <li v-if="noneLabel !== undefined">
-            <button
-              type="button"
+            <UButton
+              color="neutral"
+              variant="ghost"
               class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
               :class="modelValue ? 'text-toned' : 'text-app-100'"
               data-testid="pipeline-option-none"
@@ -109,11 +110,12 @@ function choose(id: string) {
                 name="i-lucide-check"
                 class="h-4 w-4 shrink-0 text-primary"
               />
-            </button>
+            </UButton>
           </li>
           <li v-for="p in options" :key="p.id">
-            <button
-              type="button"
+            <UButton
+              color="neutral"
+              variant="ghost"
               class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
               :class="modelValue === p.id ? 'text-app-100' : 'text-toned'"
               :data-testid="`pipeline-option-${p.id}`"
@@ -127,7 +129,7 @@ function choose(id: string) {
                 name="i-lucide-check"
                 class="h-4 w-4 shrink-0 text-primary"
               />
-            </button>
+            </UButton>
           </li>
         </ul>
 

package/app/components/pipeline/PipelineProgress.vue

@@ -21,6 +21,7 @@ import PrReviewPhaseBadge from '~/components/prReview/PrReviewPhaseBadge.vue'
 import { useNowTick, stepDurationLabel } from '~/composables/useStepTimer'
 import type { BadgeColor } from '~/utils/badge'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ instance: ExecutionInstance }>()
 const emit = defineEmits<{
@@ -397,14 +398,14 @@ const ITEM_ICON: Record<string, string> = {
                  (resetting later steps is destructive). Stops propagation so it
                  doesn't also open the step-detail overlay. -->
             <template v-if="canRestart(s)">
-              <UButton
+              <IconButton
                 v-if="restartArmed !== i"
                 icon="i-lucide-rotate-ccw"
                 color="neutral"
                 variant="ghost"
                 size="xs"
-                class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100"
-                :title="t('pipeline.progress.restartTooltip')"
+                class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-within:opacity-100"
+                :label="t('pipeline.progress.restartTooltip')"
                 @click.stop="
                   () => {
                     restartArmed = i
@@ -607,14 +608,15 @@ const ITEM_ICON: Record<string, string> = {
           <!-- Follow-up companion (future-looking Coder): a blinking chip that lights up the
                moment the Coder streams an item; click to triage. Blinks while any item is
                undecided (the gate holds the pipeline until they're all decided). -->
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="s.followUps?.enabled"
-            type="button"
             class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed px-2.5 py-1.5 text-start transition hover:border-app-hue-pink/60"
             :class="
               followUpPending(s) > 0
-                ? 'border-app-hue-pink/50 bg-app-hue-pink/10 followup-blink'
-                : 'border-muted/70 bg-default/40'
+                ? 'border-app-hue-pink/50 bg-app-hue-pink/10 hover:bg-app-hue-pink/10 focus-visible:bg-app-hue-pink/10 disabled:bg-app-hue-pink/10 followup-blink'
+                : 'border-muted/70 bg-default/40 hover:bg-default/40 focus-visible:bg-default/40 disabled:bg-default/40'
             "
             @click="ui.openFollowUps(instance.id, i)"
           >
@@ -633,20 +635,21 @@ const ITEM_ICON: Record<string, string> = {
             >
               {{ followUpLabel(s) }}
             </span>
-          </button>
+          </UButton>
 
           <!-- Implementation-fork decision phase (Coder step): a spinner while the proposer
                surfaces approaches, then a clickable chip to choose one. -->
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="forkPhase(s)"
-            type="button"
             data-testid="fork-decision-open"
             :data-fork-phase="forkPhase(s)"
             class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed px-2.5 py-1.5 text-start transition hover:border-app-secondary-400/60"
             :class="
               forkPhase(s) === 'awaiting_choice'
-                ? 'border-app-secondary-500/50 bg-app-secondary-500/10 followup-blink'
-                : 'border-muted/70 bg-default/40'
+                ? 'border-app-secondary-500/50 bg-app-secondary-500/10 hover:bg-app-secondary-500/10 focus-visible:bg-app-secondary-500/10 disabled:bg-app-secondary-500/10 followup-blink'
+                : 'border-muted/70 bg-default/40 hover:bg-default/40 focus-visible:bg-default/40 disabled:bg-default/40'
             "
             :disabled="forkPhase(s) === 'proposing'"
             @click="ui.openForkDecision(instance.id, i)"
@@ -669,16 +672,17 @@ const ITEM_ICON: Record<string, string> = {
                   : t('pipeline.progress.forkDecision.choose')
               }}
             </span>
-          </button>
+          </UButton>
 
           <!-- PR deep-review parked for a human to select which findings matter: a
                purpose-built chip opening the findings-selection window, ahead of the
                generic approval gate (mirrors the fork-decision chip above). -->
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="prReviewAwaiting(s)"
-            type="button"
             data-testid="pr-review-open"
-            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed border-primary/50 bg-primary/10 px-2.5 py-1.5 text-start transition followup-blink hover:border-primary/60"
+            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed border-primary/50 bg-primary/10 hover:bg-primary/10 focus-visible:bg-primary/10 disabled:bg-primary/10 px-2.5 py-1.5 text-start transition followup-blink hover:border-primary/60"
             @click="ui.openPrReview(instance.id, i)"
           >
             <span
@@ -689,18 +693,19 @@ const ITEM_ICON: Record<string, string> = {
             <span class="min-w-0 flex-1 truncate text-xs text-toned">
               {{ t('pipeline.progress.prReview.review') }}
             </span>
-          </button>
+          </UButton>
 
           <!-- A generating step parked between its candidate pass and its delivering pass: a
                purpose-built chip opening the comparison window, ahead of the generic approval
                gate (mirrors the fork-decision and pr-review chips above). Without it the step
                shows no action at all, because the generic gate below is suppressed for every
                park a dedicated window owns. -->
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="candidatesAwaiting(s)"
-            type="button"
             data-testid="binary-candidates-open"
-            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed border-app-hue-cyan/50 bg-app-hue-cyan/10 px-2.5 py-1.5 text-start transition followup-blink hover:border-app-hue-cyan/60"
+            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed border-app-hue-cyan/50 bg-app-hue-cyan/10 hover:bg-app-hue-cyan/10 focus-visible:bg-app-hue-cyan/10 disabled:bg-app-hue-cyan/10 px-2.5 py-1.5 text-start transition followup-blink hover:border-app-hue-cyan/60"
             @click="ui.openBinaryCandidates(instance.id, i)"
           >
             <span
@@ -714,7 +719,7 @@ const ITEM_ICON: Record<string, string> = {
             <span class="min-w-0 flex-1 truncate text-xs text-toned">
               {{ t('pipeline.progress.binaryCandidates.choose') }}
             </span>
-          </button>
+          </UButton>
 
           <!-- reviewer gate folding/re-reviewing in the background: a working indicator,
                NOT a "Review & approve" gate (the human is summoned only if needed) -->

package/app/components/prReview/PrReviewWindow.vue

@@ -292,14 +292,15 @@ const { requestClose } = useUnsavedGuard({
     @close="requestClose"
   >
     <template v-if="state?.prUrl" #header-extras>
-      <a
-        :href="state.prUrl"
+      <ULink
+        raw
+        :to="state.prUrl"
         target="_blank"
         rel="noopener"
         class="rounded-md px-2 py-1 text-2xs text-primary hover:bg-elevated"
       >
         {{ t('prReview.openPr') }}
-      </a>
+      </ULink>
     </template>
 
     <div class="flex min-h-0 flex-1">
@@ -586,12 +587,22 @@ const { requestClose } = useUnsavedGuard({
               <span data-testid="pr-review-selected-count">
                 {{ t('prReview.selectedCount', { count: activeSelectedIds.length }) }}
               </span>
-              <button class="text-primary hover:underline" @click="selectAll">
+              <UButton
+                color="primary"
+                variant="link"
+                class="p-0 text-2xs text-primary hover:underline"
+                @click="selectAll"
+              >
                 {{ t('prReview.selectAll') }}
-              </button>
-              <button class="text-primary hover:underline" @click="clearAll">
+              </UButton>
+              <UButton
+                color="primary"
+                variant="link"
+                class="p-0 text-2xs text-primary hover:underline"
+                @click="clearAll"
+              >
                 {{ t('prReview.clear') }}
-              </button>
+              </UButton>
             </div>
 
             <!-- Findings grouped by slice -->
@@ -615,14 +626,14 @@ const { requestClose } = useUnsavedGuard({
                 ]"
               >
                 <div class="flex items-start gap-2">
-                  <input
+                  <UCheckbox
                     v-if="awaiting || challenging"
-                    type="checkbox"
-                    class="mt-1 accent-primary"
+                    size="xs"
+                    class="mt-1"
                     data-testid="pr-review-finding-toggle"
-                    :checked="selected.has(f.id) && !isRetracted(f)"
+                    :model-value="selected.has(f.id) && !isRetracted(f)"
                     :disabled="!awaiting || isRetracted(f)"
-                    @change="toggle(f.id)"
+                    @update:model-value="toggle(f.id)"
                   />
                   <div class="min-w-0 flex-1">
                     <div class="flex flex-wrap items-center gap-1.5">
@@ -748,10 +759,12 @@ const { requestClose } = useUnsavedGuard({
                       v-if="awaiting && !isInvestigating(f)"
                       class="mt-1.5 flex items-center gap-3 text-2xs"
                     >
-                      <button
+                      <UButton
+                        color="primary"
+                        variant="link"
                         v-if="!isRetracted(f)"
                         data-testid="pr-review-finding-challenge"
-                        class="flex items-center gap-1 text-primary hover:underline disabled:opacity-50"
+                        class="p-0 text-2xs flex items-center gap-1 text-primary hover:underline disabled:opacity-50"
                         :disabled="!canResolve || !access.canExecuteRuns.value"
                         @click="openChallenge(f.id)"
                       >
@@ -761,16 +774,18 @@ const { requestClose } = useUnsavedGuard({
                             ? t('prReview.challenge.reChallenge')
                             : t('prReview.challenge.action')
                         }}
-                      </button>
-                      <button
+                      </UButton>
+                      <UButton
+                        color="neutral"
+                        variant="link"
                         data-testid="pr-review-finding-dismiss"
-                        class="flex items-center gap-1 text-muted hover:text-app-error-300 hover:underline disabled:opacity-50"
+                        class="p-0 text-xs flex items-center gap-1 text-muted hover:text-app-error-300 hover:underline disabled:opacity-50"
                         :disabled="!canResolve || !access.canExecuteRuns.value"
                         @click="onDismiss(f.id)"
                       >
                         <UIcon name="i-lucide-trash-2" class="h-3.5 w-3.5" />
                         {{ t('prReview.challenge.dismiss') }}
-                      </button>
+                      </UButton>
                     </div>
 
                     <!-- The inline challenge box: an OPTIONAL specific concern for the investigator. -->
@@ -779,31 +794,37 @@ const { requestClose } = useUnsavedGuard({
                       data-testid="pr-review-challenge-box"
                       class="mt-2 rounded-md border border-primary/40 bg-default/80 p-2"
                     >
-                      <textarea
+                      <UTextarea
                         v-model="challengeText"
                         data-testid="pr-review-challenge-input"
-                        rows="2"
+                        :rows="2"
                         :placeholder="t('prReview.challenge.placeholder')"
-                        class="w-full resize-y rounded-sm border border-muted bg-app-950/60 px-2 py-1 text-xs text-default outline-none focus:border-primary"
+                        size="xs"
+                        class="w-full"
+                        :ui="{ base: 'resize-y' }"
                       />
                       <p class="mt-1 text-3xs text-dimmed">
                         {{ t('prReview.challenge.hint') }}
                       </p>
                       <div class="mt-1.5 flex justify-end gap-2">
-                        <button
+                        <UButton
+                          color="neutral"
+                          variant="ghost"
                           class="rounded-sm px-2 py-1 text-2xs text-muted hover:text-default"
                           @click="cancelChallenge"
                         >
                           {{ t('common.cancel') }}
-                        </button>
-                        <button
+                        </UButton>
+                        <UButton
+                          color="neutral"
+                          variant="ghost"
                           data-testid="pr-review-challenge-submit"
                           class="rounded-sm bg-primary/80 px-2 py-1 text-2xs font-medium text-inverted hover:bg-primary/90 disabled:opacity-50"
                           :disabled="!canResolve"
                           @click="submitChallenge(f.id)"
                         >
                           {{ t('prReview.challenge.submit') }}
-                        </button>
+                        </UButton>
                       </div>
                     </div>
                   </div>

package/app/components/providers/ApiKeysSection.vue

@@ -329,14 +329,15 @@ async function remove(k: ApiKey) {
     >
       <li v-for="(step, i) in selected.steps" :key="i">{{ step }}</li>
       <li>
-        <a
-          :href="selected.url"
+        <ULink
+          raw
+          :to="selected.url"
           target="_blank"
           rel="noopener noreferrer"
           class="text-primary underline"
         >
           {{ t('providers.apiKeys.openKeys', { provider: selected.label }) }}
-        </a>
+        </ULink>
       </li>
     </ol>
 

package/app/components/ralph/RalphLoopResultView.vue

@@ -169,16 +169,17 @@ const STATUS_META = computed<
             </div>
           </template>
 
-          <a
+          <ULink
+            raw
             v-if="prUrl"
-            :href="prUrl"
+            :to="prUrl"
             target="_blank"
             rel="noopener"
             class="mt-3 inline-flex items-center gap-1 text-xs text-app-info-300 hover:text-app-info-200 hover:underline"
           >
             {{ t('ralph.viewPr') }}
             <UIcon name="i-lucide-external-link" class="h-3 w-3" />
-          </a>
+          </ULink>
 
           <!-- Why a loop that stopped short of its budget stopped: without this the count in
                the sidebar (e.g. "3 of 20") reads as an unexplained abandonment. -->

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -1116,8 +1116,10 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                    collapses as a unit (a long doc otherwise pushes the findings/recommendations
                    off-screen); the per-heading toggles below still work when it's expanded. -->
           <section v-if="outline" class="mt-6 border-t border-default pt-5">
-            <button
-              class="mb-3 flex w-full items-center gap-1.5 text-2xs text-app-success-400"
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="mb-3 flex w-full items-center gap-1.5 p-0 text-2xs text-app-success-400 hover:bg-transparent"
               @click="toggleDoc"
             >
               <UIcon
@@ -1133,16 +1135,18 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     : t('requirements.incorporatedDraft')
                 }}
               </span>
-            </button>
+            </UButton>
             <!-- The same reading measure the findings' own prose takes above (see the shell's
                  `width` prop): the window is `full`-width now, and this is continuous prose that
                  would otherwise run to 200-character lines. Left-aligned rather than centred, so
                  it starts where every finding above it starts. -->
             <div v-show="!docCollapsed" class="max-w-3xl">
               <div v-for="s in outline.sections" :key="s.id" class="mb-2">
-                <button
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   v-if="s.title"
-                  class="group flex w-full items-center gap-2 text-start"
+                  class="group flex w-full items-center gap-2 p-0 text-start hover:bg-transparent"
                   @click="toggle(s.id)"
                 >
                   <UIcon
@@ -1155,7 +1159,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
                     v-html="s.titleHtml"
                   />
-                </button>
+                </UButton>
                 <div
                   v-show="!s.title || !collapsed[s.id]"
                   class="reader-prose mt-1 ps-5.5 text-sm leading-relaxed text-toned"

package/app/components/riskPolicy/RiskPolicyPicker.vue

@@ -140,8 +140,9 @@ function choose(id: string) {
         <!-- left: selectable options, NAME ONLY -->
         <ul class="w-1/2 shrink-0 overflow-y-auto border-e border-default p-1">
           <li>
-            <button
-              type="button"
+            <UButton
+              color="neutral"
+              variant="ghost"
               class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm"
               :class="[
                 refused.has('') ? 'cursor-not-allowed opacity-50' : 'hover:bg-elevated/60',
@@ -164,11 +165,12 @@ function choose(id: string) {
                 name="i-lucide-check"
                 class="h-4 w-4 shrink-0 text-primary"
               />
-            </button>
+            </UButton>
           </li>
           <li v-for="p in options" :key="p.id">
-            <button
-              type="button"
+            <UButton
+              color="neutral"
+              variant="ghost"
               class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm"
               :class="[
                 refused.has(p.id) ? 'cursor-not-allowed opacity-50' : 'hover:bg-elevated/60',
@@ -191,7 +193,7 @@ function choose(id: string) {
                 name="i-lucide-check"
                 class="h-4 w-4 shrink-0 text-primary"
               />
-            </button>
+            </UButton>
           </li>
         </ul>
 

package/app/components/sandbox/SandboxPanel.vue

@@ -6,6 +6,7 @@
 // and Fixtures (the graded inputs each run is scored against). Loaded on demand when the
 // window opens; 503 (the deployment hasn't provisioned the Sandbox DB) shows a notice.
 import { computed, ref, watch } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
 import type {
   SandboxExperimentStatus,
   SandboxFixtureKind,
@@ -16,6 +17,7 @@ import type {
   SandboxUnsupportedReason,
 } from '~/types/sandbox'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const ui = useUiStore()
 const store = useSandboxStore()
@@ -222,6 +224,16 @@ const detailRows = computed(() =>
 )
 const selectedRun = ref<SandboxRun | null>(null)
 
+// Column definitions rather than hand-written `<th>`s: the header typography then comes from the
+// table theme instead of a per-file recipe.
+const detailColumns = computed<TableColumn<(typeof detailRows.value)[number]>[]>(() => [
+  { id: 'prompt', header: t('sandbox.results.col.prompt') },
+  { id: 'model', header: t('sandbox.results.col.model') },
+  { id: 'fixture', header: t('sandbox.results.col.fixture') },
+  { id: 'score', header: t('sandbox.results.col.score') },
+  { id: 'objective', header: t('sandbox.results.col.objective') },
+])
+
 function scoreColor(score: number): string {
   if (score >= 4) return 'text-app-success-400'
   if (score >= 3) return 'text-app-warning-400'
@@ -469,55 +481,60 @@ async function archive(prompt: SandboxPromptVersion) {
                 }}</UBadge>
               </div>
               <div class="overflow-auto">
-                <table class="w-full text-start text-xs">
-                  <thead class="text-dimmed">
-                    <tr>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.prompt') }}</th>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.model') }}</th>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.fixture') }}</th>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.score') }}</th>
-                      <th class="py-1 font-medium">{{ t('sandbox.results.col.objective') }}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr
-                      v-for="{ run, grade, fixtureName } in detailRows"
-                      :key="run.id"
-                      class="cursor-pointer border-t border-default hover:bg-elevated/40"
-                      @click="selectedRun = run"
+                <UTable
+                  :data="detailRows"
+                  :columns="detailColumns"
+                  :ui="{
+                    base: 'text-xs',
+                    th: 'ps-0 pe-2 py-1',
+                    td: 'ps-0 pe-2 py-1 text-xs whitespace-normal',
+                    tbody: '[&>tr]:cursor-pointer',
+                    empty: 'py-0',
+                  }"
+                  @select="(_event, row) => (selectedRun = row.original.run)"
+                >
+                  <template #prompt-cell="{ row }">
+                    <span class="text-toned">{{ row.original.run.promptLabel }}</span>
+                  </template>
+                  <template #model-cell="{ row }">
+                    <span class="font-mono text-2xs text-muted">{{ row.original.run.model }}</span>
+                  </template>
+                  <template #fixture-cell="{ row }">
+                    <span class="text-muted">{{ row.original.fixtureName }}</span>
+                  </template>
+                  <template #score-cell="{ row }">
+                    <span
+                      v-if="row.original.grade"
+                      :class="scoreColor(row.original.grade.weightedTotal)"
+                      class="font-semibold"
                     >
-                      <td class="py-1 pe-2 text-toned">{{ run.promptLabel }}</td>
-                      <td class="py-1 pe-2 font-mono text-2xs text-muted">
-                        {{ run.model }}
-                      </td>
-                      <td class="py-1 pe-2 text-muted">{{ fixtureName }}</td>
-                      <td class="py-1 pe-2">
-                        <span
-                          v-if="grade"
-                          :class="scoreColor(grade.weightedTotal)"
-                          class="font-semibold"
-                        >
-                          {{ grade.weightedTotal.toFixed(2) }}
-                        </span>
-                        <span v-else-if="run.status === 'failed'" class="text-app-error-400">{{
-                          t('sandbox.results.failed')
-                        }}</span>
-                        <span v-else class="text-app-600">—</span>
-                      </td>
-                      <td class="py-1">
-                        <span
-                          v-if="grade?.objective"
-                          :class="
-                            grade.objective.pass ? 'text-app-success-400' : 'text-app-warning-400'
-                          "
-                        >
-                          {{ grade.objective.caught }}/{{ grade.objective.total }}
-                        </span>
-                        <span v-else class="text-app-600">—</span>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
+                      {{ row.original.grade.weightedTotal.toFixed(2) }}
+                    </span>
+                    <span
+                      v-else-if="row.original.run.status === 'failed'"
+                      class="text-app-error-400"
+                      >{{ t('sandbox.results.failed') }}</span
+                    >
+                    <span v-else class="text-app-600">&mdash;</span>
+                  </template>
+                  <template #objective-cell="{ row }">
+                    <span
+                      v-if="row.original.grade?.objective"
+                      :class="
+                        row.original.grade.objective.pass
+                          ? 'text-app-success-400'
+                          : 'text-app-warning-400'
+                      "
+                    >
+                      {{ row.original.grade.objective.caught }}/{{
+                        row.original.grade.objective.total
+                      }}
+                    </span>
+                    <span v-else class="text-app-600">&mdash;</span>
+                  </template>
+                  <!-- See InitiativeTrackerWindow: the fallback copy is untranslated. -->
+                  <template #empty />
+                </UTable>
               </div>
 
               <!-- selected cell output -->
@@ -550,7 +567,9 @@ async function archive(prompt: SandboxPromptVersion) {
               {{ t('sandbox.results.past') }}
             </SectionLabel>
             <div class="max-h-56 space-y-1 overflow-auto">
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-for="x in store.experiments"
                 :key="x.id"
                 class="flex w-full items-center justify-between rounded-md border border-default bg-default/40 px-2 py-1.5 text-start text-sm hover:bg-elevated/50"
@@ -558,7 +577,7 @@ async function archive(prompt: SandboxPromptVersion) {
               >
                 <span class="truncate text-toned">{{ x.name }}</span>
                 <UBadge variant="soft" size="xs">{{ EXPERIMENT_STATUS_LABEL[x.status] }}</UBadge>
-              </button>
+              </UButton>
               <p v-if="!store.experiments.length" class="text-xs text-dimmed">
                 {{ t('sandbox.results.empty') }}
               </p>
@@ -595,12 +614,12 @@ async function archive(prompt: SandboxPromptVersion) {
                 <span class="text-2xs text-dimmed">{{ p.agentKind }}</span>
               </div>
               <div class="flex items-center gap-1">
-                <UButton
+                <IconButton
                   icon="i-lucide-pencil"
                   color="neutral"
                   variant="ghost"
                   size="xs"
-                  :title="
+                  :label="
                     p.origin === 'baseline'
                       ? t('sandbox.prompts.forkTitle')
                       : t('sandbox.prompts.editTitle')
@@ -610,14 +629,14 @@ async function archive(prompt: SandboxPromptVersion) {
                 <!-- Deploy: make this version the workspace's live prompt for its agent kind.
                      Offered on a graded candidate and on an older workspace revision (rolling
                      back), but not on the one already live, where it would be a no-op. -->
-                <UButton
+                <IconButton
                   v-if="canPromote(p)"
                   icon="i-lucide-rocket"
                   color="primary"
                   variant="ghost"
                   size="xs"
                   :loading="promoting === p.id"
-                  :title="t('sandbox.prompts.promoteTitle')"
+                  :label="t('sandbox.prompts.promoteTitle')"
                   @click="promote(p)"
                 />
                 <UButton