@cat-factory/app 0.309.0 → 0.310.0

package/app/components/board/nodes/BlockNode.vue

@@ -9,6 +9,7 @@ import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
 import AdoptionReviewModal from '~/components/bootstrap/AdoptionReviewModal.vue'
 import BootstrapRunSteps from '~/components/bootstrap/BootstrapRunSteps.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameStacking } from '~/composables/useFrameStacking'
 import { useViewport } from '~/composables/useViewport'
@@ -440,27 +441,27 @@ const ITEM_ICON: Record<string, string> = {
                    are `board.write`, hidden for a read-only viewer, who keeps the status badge
                    (the one view-only affordance here). -->
               <template v-if="access.canWriteBoard.value">
-                <UButton
+                <IconButton
                   class="nodrag"
                   data-testid="frame-add-task"
                   :size="isTouch ? 'sm' : 'xs'"
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-plus"
-                  :title="t('board.frame.addTaskTitle')"
+                  :label="t('board.frame.addTaskTitle')"
                   @click.stop="addTask"
                 />
-                <UButton
+                <IconButton
                   v-if="tasks.anyOffered"
                   class="nodrag"
                   :size="isTouch ? 'sm' : 'xs'"
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-ticket"
-                  :title="t('board.frame.createTaskFromIssueTitle')"
+                  :label="t('board.frame.createTaskFromIssueTitle')"
                   @click.stop="createTaskFromIssue"
                 />
-                <UButton
+                <IconButton
                   v-if="documents.connectedDesignSources.length > 0"
                   class="nodrag"
                   data-testid="frame-start-from-design"
@@ -468,7 +469,7 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-frame"
-                  :title="t('board.frame.startFromDesignTitle')"
+                  :label="t('board.frame.startFromDesignTitle')"
                   @click.stop="startFromDesign"
                 />
                 <!-- Recurring pipelines + initiatives are ADVANCED-tier authoring: both plan
@@ -479,7 +480,7 @@ const ITEM_ICON: Record<string, string> = {
                      badges its task card and opens its inspector panel, and an initiative is
                      still a block on the board with its own inspector — so what a basic-mode
                      user loses is the ability to author a new one, not sight of one. -->
-                <UButton
+                <IconButton
                   v-if="uiMode.isAdvanced"
                   class="nodrag"
                   data-testid="frame-add-recurring"
@@ -487,10 +488,10 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-repeat"
-                  :title="t('board.frame.addRecurringTitle')"
+                  :label="t('board.frame.addRecurringTitle')"
                   @click.stop="addRecurring"
                 />
-                <UButton
+                <IconButton
                   v-if="uiMode.isAdvanced"
                   class="nodrag"
                   data-testid="frame-add-initiative"
@@ -498,7 +499,7 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-milestone"
-                  :title="t('board.frame.createInitiativeTitle')"
+                  :label="t('board.frame.createInitiativeTitle')"
                   @click.stop="createInitiative"
                 />
                 <!-- Hunting a tracker board for a bug worth adopting is TRIAGE, not intake: it
@@ -506,7 +507,7 @@ const ITEM_ICON: Record<string, string> = {
                      engineer/PM judgement call. So it is dropped for a narrowed role, whose three
                      routes in (a new task, a task from a named ticket, a task from a design) all
                      start from work somebody has already decided to do. -->
-                <UButton
+                <IconButton
                   v-if="tasks.anyOffered && uiRole.fullSurface"
                   class="nodrag"
                   data-testid="frame-hunt-bugs"
@@ -514,7 +515,7 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-radar"
-                  :title="t('board.frame.huntBugsTitle')"
+                  :label="t('board.frame.huntBugsTitle')"
                   @click.stop="huntBugs"
                 />
               </template>
@@ -559,15 +560,16 @@ const ITEM_ICON: Record<string, string> = {
 
           <FrameSwimlanes v-if="hasTasks" :frame-id="block.id" :lane-body-height="laneBodyHeight" />
 
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="!hasTasks && access.canWriteBoard.value"
-            type="button"
             data-testid="frame-add-task-empty"
             class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-muted text-2xs text-dimmed hover:border-app-500 hover:text-toned"
             @click.stop="addTask"
           >
             <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> {{ t('board.frame.addFirstTask') }}
-          </button>
+          </UButton>
         </div>
       </div>
 

package/app/components/board/nodes/DecisionBadge.vue

@@ -16,8 +16,9 @@ const displayLabel = computed(() => props.label ?? t('board.decisionBadge.decisi
 </script>
 
 <template>
-  <button
-    type="button"
+  <UButton
+    color="neutral"
+    variant="ghost"
     class="board-pulse flex items-center gap-1 rounded-full bg-app-warning-500 px-2 py-0.5 text-xs font-semibold text-app-warning-50 dark:text-app-warning-950 shadow-lg transition hover:bg-app-warning-400"
     @click.stop="$emit('open')"
   >
@@ -26,5 +27,5 @@ const displayLabel = computed(() => props.label ?? t('board.decisionBadge.decisi
     <span v-if="count && count > 1" class="rounded-full bg-app-warning-950/30 px-1">
       {{ count }}
     </span>
-  </button>
+  </UButton>
 </template>

package/app/components/board/nodes/FrameSwimlanes.vue

@@ -67,8 +67,9 @@ const withheldNote = computed(() => {
          is the one lane whose emptiness says nothing a reader needs (a new service has merged
          nothing, which its three live lanes already show). -->
     <div v-if="doneLane && doneLane.total > 0" class="rounded-lg bg-default/40">
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         class="nodrag flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left hover:bg-elevated/40"
         data-testid="done-lane-toggle"
         :aria-expanded="!laneView.doneLaneCollapsed"
@@ -99,7 +100,7 @@ const withheldNote = computed(() => {
         <span v-if="withheldNote" class="ms-auto truncate text-3xs text-dimmed">{{
           withheldNote
         }}</span>
-      </button>
+      </UButton>
 
       <!-- The archive opens as a WIDE GRID: each group takes the strip's full width and wraps its
            own cards across it, and the groups stack. Wrapping the GROUPS instead read correctly

package/app/components/board/nodes/TaskCard.vue

@@ -5,6 +5,7 @@ import { STATUS_META, MODULE_META, taskTypeMeta } from '~/utils/catalog'
 import { composeRunOutcome, hasOutcomeToShow } from '~/utils/runOutcome'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import TaskPipelineMini from './TaskPipelineMini.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ taskId: string }>()
 
@@ -360,15 +361,19 @@ function selectTask() {
         {{ statusText }}
       </span>
       <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
-      <button
-        type="button"
-        class="nodrag shrink-0 cursor-crosshair touch-none rounded-full p-0.5 text-dimmed hover:bg-elevated hover:text-app-warning-400 pointer-coarse:p-2.5"
-        :title="t('board.task.dragToConnect')"
+      <IconButton
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-spline"
+        class="nodrag shrink-0"
+        :label="t('board.task.dragToConnect')"
+        :ui="{
+          base: 'cursor-crosshair touch-none rounded-full p-0.5 text-dimmed hover:bg-elevated hover:text-app-warning-400 pointer-coarse:p-2.5',
+          leadingIcon: 'h-3 w-3 pointer-coarse:h-5 pointer-coarse:w-5',
+        }"
         @pointerdown.stop="startConnect(task.id, $event)"
         @click.stop
-      >
-        <UIcon name="i-lucide-spline" class="h-3 w-3 pointer-coarse:h-5 pointer-coarse:w-5" />
-      </button>
+      />
     </div>
 
     <!-- title gets a full-width row so long titles wrap to two lines rather than

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -107,9 +107,10 @@ const ITEM_ICON: Record<string, string> = {
       {{ t('board.task.buildSteps') }}
     </SectionLabel>
     <div v-for="(s, i) in steps" :key="i" class="rounded-sm bg-default/60 px-1.5 py-1">
-      <button
-        type="button"
-        class="flex w-full cursor-pointer items-center gap-1 rounded-sm text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+      <UButton
+        color="neutral"
+        variant="ghost"
+        class="flex w-full cursor-pointer items-center gap-1 rounded-sm p-0 text-start hover:bg-transparent"
         :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\n${t('board.task.clickToViewStep')}`"
         @click.stop="openStep(i)"
       >
@@ -141,7 +142,7 @@ const ITEM_ICON: Record<string, string> = {
           :class="stepSpinning(s) ? 'animate-spin' : ''"
           :style="{ color: stepVisual(s).color }"
         />
-      </button>
+      </UButton>
 
       <!-- PR reviewer: the precise sub-phase (slicing vs reviewing N/M slices), so the board
            card tells the reviewer's progress apart from a bare subtask count. Self-hides once
@@ -155,20 +156,21 @@ const ITEM_ICON: Record<string, string> = {
 
       <!-- pending approval gate: jump straight to the conclusions reader. Suppressed
            while a reviewer gate is folding/re-reviewing in the background (no human needed). -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="
           s.approval &&
           s.approval.status === 'pending' &&
           instance &&
           !reviews.isBackground(s.agentKind, props.taskId)
         "
-        type="button"
         class="mt-1 flex w-full items-center justify-center gap-1 rounded-sm bg-app-warning-500 px-1.5 py-0.5 text-3xs font-semibold text-app-warning-50 dark:text-app-warning-950 transition hover:bg-app-warning-400"
         @click.stop="ui.openApprovalDetail(instance.id, s.approval.id)"
       >
         <UIcon name="i-lucide-shield-check" class="h-2.5 w-2.5" />
         {{ t('board.task.reviewAndApprove') }}
-      </button>
+      </UButton>
 
       <!-- per-step subtask progress bar -->
       <div

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -225,31 +225,40 @@ watch(open, (isOpen) => {
           <p v-if="recordsDropped > 0" class="text-app-warning-300/90">
             {{ t('bootstrap.adoption.survey.truncated', { count: recordsDropped }) }}
           </p>
-          <details>
-            <summary class="cursor-pointer text-dimmed hover:text-toned">
-              {{ t('bootstrap.adoption.survey.show') }}
-            </summary>
-            <ul class="mt-2 space-y-1">
-              <!-- Keyed by POSITION: the transcript is append-only and rendered in order, and
+          <UCollapsible>
+            <template #default="{ open }">
+              <UButton
+                variant="link"
+                color="neutral"
+                size="xs"
+                :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                :label="t('bootstrap.adoption.survey.show')"
+                :ui="{ base: 'w-full justify-start gap-1 p-0 text-dimmed hover:text-toned' }"
+              />
+            </template>
+            <template #content>
+              <ul class="mt-2 space-y-1">
+                <!-- Keyed by POSITION: the transcript is append-only and rendered in order, and
                    the same path legitimately appears twice (a body refused by the seed and then
                    served to the model, a path the model retried). Keying on the path patched
                    those two rows against each other and rendered a note beside the wrong one. -->
-              <li
-                v-for="(entry, index) in surveyReads"
-                :key="index"
-                class="flex items-baseline gap-2"
-              >
-                <span
-                  class="shrink-0 font-mono text-3xs uppercase"
-                  :class="entry.outcome === 'read' ? 'text-dimmed' : 'text-app-warning-400/80'"
+                <li
+                  v-for="(entry, index) in surveyReads"
+                  :key="index"
+                  class="flex items-baseline gap-2"
                 >
-                  {{ t(`bootstrap.adoption.survey.outcome.${entry.outcome}`) }}
-                </span>
-                <span class="font-mono text-muted">{{ entry.path }}</span>
-                <span v-if="entry.note" class="text-app-600">{{ entry.note }}</span>
-              </li>
-            </ul>
-          </details>
+                  <span
+                    class="shrink-0 font-mono text-3xs uppercase"
+                    :class="entry.outcome === 'read' ? 'text-dimmed' : 'text-app-warning-400/80'"
+                  >
+                    {{ t(`bootstrap.adoption.survey.outcome.${entry.outcome}`) }}
+                  </span>
+                  <span class="font-mono text-muted">{{ entry.path }}</span>
+                  <span v-if="entry.note" class="text-app-600">{{ entry.note }}</span>
+                </li>
+              </ul>
+            </template>
+          </UCollapsible>
         </div>
 
         <!-- The reviewer's own instructions, on BOTH paths. With no suggestion to answer this is

package/app/components/bootstrap/BootstrapModal.vue

@@ -22,6 +22,7 @@ import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import { appInstallationManageUrl, newRepoUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const ui = useUiStore()
 const bootstrap = useBootstrapStore()
@@ -701,13 +702,12 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                     :placeholder="t('bootstrap.monorepo.directory.placeholder')"
                     class="flex-1"
                   />
-                  <UButton
+                  <IconButton
                     v-if="monorepoRepoId !== undefined"
                     variant="soft"
                     color="neutral"
                     icon="i-lucide-folder-search"
-                    :title="t('bootstrap.monorepo.directory.browse')"
-                    :aria-label="t('bootstrap.monorepo.directory.browse')"
+                    :label="t('bootstrap.monorepo.directory.browse')"
                     data-testid="bootstrap-directory-browse"
                     @click="toggleDirectoryBrowse()"
                   />

package/app/components/brainstorm/BrainstormWindow.vue

@@ -465,9 +465,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                  `width` prop): the window is `full`-width now, and this is continuous prose that
                  would otherwise run to 200-character lines. -->
             <div v-for="s in outline.sections" :key="s.id" class="mb-2 max-w-3xl">
-              <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
@@ -480,7 +482,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/bugFishing/BugFishingWindow.vue

@@ -267,8 +267,9 @@ const PHASE_ICON: Record<string, string> = {
         <SectionLabel as="p" class="mb-2 px-1">
           {{ t('bugFishing.phases.heading') }}
         </SectionLabel>
-        <button
-          type="button"
+        <UButton
+          color="neutral"
+          variant="ghost"
           class="mb-1 w-full rounded-md px-2 py-1.5 text-left text-xs"
           :class="
             selectedPassKey === null
@@ -278,7 +279,7 @@ const PHASE_ICON: Record<string, string> = {
           @click="selectedPassKey = null"
         >
           {{ t('bugFishing.phases.all', { count: findings.length }) }}
-        </button>
+        </UButton>
         <!-- Grouped by TERRITORY on a partitioned codebase. A codebase small enough to fish
              whole has one group with no label, which renders as the flat angle rail. -->
         <div v-for="group in territoryGroups" :key="group.id ?? 'whole'" class="mb-2">
@@ -291,8 +292,9 @@ const PHASE_ICON: Record<string, string> = {
           </p>
           <ul class="space-y-0.5">
             <li v-for="phase in group.passes" :key="passKey(phase)">
-              <button
-                type="button"
+              <UButton
+                color="neutral"
+                variant="ghost"
                 class="flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left"
                 :class="
                   selectedPassKey === passKey(phase)
@@ -341,7 +343,7 @@ const PHASE_ICON: Record<string, string> = {
                     </span>
                   </span>
                 </span>
-              </button>
+              </UButton>
             </li>
           </ul>
         </div>
@@ -450,10 +452,7 @@ const PHASE_ICON: Record<string, string> = {
           <p class="text-2xs text-muted">
             {{ t('bugFishing.counts', { untriaged: untriagedCount, spawned: spawnedCount }) }}
           </p>
-          <label class="flex items-center gap-1.5 text-2xs text-muted">
-            <input v-model="showTriaged" type="checkbox" class="accent-app-info-500" />
-            {{ t('bugFishing.showTriaged') }}
-          </label>
+          <UCheckbox v-model="showTriaged" size="xs" :label="t('bugFishing.showTriaged')" />
         </div>
 
         <p v-if="bugFishing.error" class="mb-3 text-xs text-app-error-300">
@@ -520,19 +519,41 @@ const PHASE_ICON: Record<string, string> = {
             <!-- Evidence is rendered apart from the detail for the reason the contract keeps them
                  apart: a finding that cannot point at the code it describes is speculating, and
                  that should be visible without reading the prose for it. -->
-            <details v-if="finding.evidence" class="mt-2">
-              <summary class="cursor-pointer text-2xs text-muted hover:text-default">
-                {{ t('bugFishing.finding.evidence') }}
-              </summary>
-              <MarkdownProse :text="finding.evidence" class="mt-1 max-w-3xl text-xs" />
-            </details>
-
-            <details v-if="finding.suggestedFix" class="mt-1">
-              <summary class="cursor-pointer text-2xs text-muted hover:text-default">
-                {{ t('bugFishing.finding.suggestedFix') }}
-              </summary>
-              <MarkdownProse :text="finding.suggestedFix" class="mt-1 max-w-3xl text-xs" />
-            </details>
+            <UCollapsible v-if="finding.evidence" class="mt-2">
+              <template #default="{ open }">
+                <UButton
+                  variant="link"
+                  color="neutral"
+                  size="xs"
+                  :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                  :label="t('bugFishing.finding.evidence')"
+                  :ui="{
+                    base: 'w-full justify-start gap-1 p-0 text-2xs text-muted hover:text-default',
+                  }"
+                />
+              </template>
+              <template #content>
+                <MarkdownProse :text="finding.evidence" class="mt-1 max-w-3xl text-xs" />
+              </template>
+            </UCollapsible>
+
+            <UCollapsible v-if="finding.suggestedFix" class="mt-1">
+              <template #default="{ open }">
+                <UButton
+                  variant="link"
+                  color="neutral"
+                  size="xs"
+                  :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                  :label="t('bugFishing.finding.suggestedFix')"
+                  :ui="{
+                    base: 'w-full justify-start gap-1 p-0 text-2xs text-muted hover:text-default',
+                  }"
+                />
+              </template>
+              <template #content>
+                <MarkdownProse :text="finding.suggestedFix" class="mt-1 max-w-3xl text-xs" />
+              </template>
+            </UCollapsible>
 
             <!-- Already marked: say what was created and let the reader follow it. The three
                  spawn states are rendered apart because they are three different facts — a task
@@ -553,13 +574,14 @@ const PHASE_ICON: Record<string, string> = {
                   })
                 }}
               </span>
-              <button
-                type="button"
-                class="underline hover:text-app-success-200"
+              <UButton
+                color="neutral"
+                variant="link"
+                class="p-0 text-2xs underline hover:text-app-success-200"
                 @click="openSpawnedTask(finding.spawn.taskId)"
               >
                 {{ t('bugFishing.finding.openTask') }}
-              </button>
+              </UButton>
             </div>
 
             <!-- A claim held by a marking still in flight. No task to link yet, and no Fix

package/app/components/clarity/ClarityReviewWindow.vue

@@ -491,9 +491,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                  `width` prop): the window is `full`-width now, and this is continuous prose that
                  would otherwise run to 200-character lines. -->
             <div v-for="s in outline.sections" :key="s.id" class="mb-2 max-w-3xl">
-              <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
@@ -506,7 +508,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/common/CopyButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 // Standard icon-only "copy to clipboard" button with confirmation feedback. Routes through
 // `useCopyToClipboard` so success/failure is always toasted (UX-38), and carries both a
-// `title` and an `aria-label` so it's named for pointer tooltips and screen readers alike.
-// Used to make error/detail surfaces copyable (UX-39) — the first thing a user does with a
+// tooltip and an `aria-label` so it's named for pointer users and screen readers alike.
+// Used to make error/detail surfaces copyable (UX-39): the first thing a user does with a
 // stack trace or failure summary is copy it.
 const props = defineProps<{
   /** The text to place on the clipboard. */
@@ -18,13 +18,14 @@ const label = computed(() => props.label ?? t('common.copy'))
 </script>
 
 <template>
-  <UButton
-    icon="i-lucide-copy"
-    color="neutral"
-    variant="ghost"
-    :size="size ?? 'xs'"
-    :title="label"
-    :aria-label="label"
-    @click.stop="copy(text)"
-  />
+  <UTooltip :text="label">
+    <UButton
+      icon="i-lucide-copy"
+      color="neutral"
+      variant="ghost"
+      :size="size ?? 'xs'"
+      :aria-label="label"
+      @click.stop="copy(text)"
+    />
+  </UTooltip>
 </template>

package/app/components/common/IconButton.vue

@@ -1,19 +1,44 @@
 <script setup lang="ts">
 // Shared icon-only button primitive that ENFORCES the accessible-name convention (UX-62/63):
-// every icon button must carry a `label`, applied as BOTH `title` (pointer tooltip) and
-// `aria-label` (screen readers) — `title` alone never fires on touch and is invisible to
-// assistive tech, so an unlabeled icon button is a bug this component makes unrepresentable.
-// All other UButton props/listeners (icon, color, variant, size, @click, :loading, :disabled)
-// pass straight through via `$attrs`; `label` is declared as a prop so it strips off before
-// reaching UButton (whose own `label` prop would otherwise render visible text). Mirrors the
-// shape of `common/CopyButton.vue`.
+// every icon button must carry a `label`, applied as BOTH the tooltip and `aria-label` (screen
+// readers): an unlabeled icon button is a bug this component makes unrepresentable.
+//
+// The hint is a UTooltip, not a `title` attribute: `title` never fires on touch, is not styled,
+// takes about a second to appear, and is not what the rest of the app's tooltips look like.
+// `aria-label` stays on the button itself, because the tooltip is a hover/focus affordance and
+// the accessible NAME has to be there whether or not one ever opens.
+//
+// All other UButton props/listeners (icon, color, variant, size, `ui`, @click, :loading,
+// :disabled) pass straight through via `$attrs`; `label` is declared as a prop so it strips off
+// before reaching UButton (whose own `label` prop would otherwise render visible text).
+//
+// `class` and `style` land on the WRAPPER, not the button: the wrapper is the box the parent lays
+// out, so `ms-auto`, `shrink-0` or Vue Flow's `nodrag` only work there. The button's own look is
+// its props, and `:ui="{ base: '…' }"` for anything they do not cover.
+import { computed, useAttrs } from 'vue'
+
 defineProps<{
-  /** Accessible name + tooltip. Required — the whole point of the primitive. */
+  /** Accessible name + tooltip. Required: the whole point of the primitive. */
   label: string
 }>()
 defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+const buttonAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
 </script>
 
 <template>
-  <UButton v-bind="$attrs" :title="label" :aria-label="label" />
+  <UTooltip :text="label">
+    <!-- The trigger is a SPAN around the button, not the button. A disabled `<button>` fires no
+         pointer or focus event, so a tooltip bound straight to it never opens: the one state
+         where the hint is the only thing explaining why the control does nothing (a blocked
+         delete naming its reason) was exactly the state that lost it. The span is
+         `inline-flex` so it adds no box of its own. -->
+    <span class="inline-flex" :class="$attrs.class" :style="$attrs.style">
+      <UButton v-bind="buttonAttrs" :aria-label="label" />
+    </span>
+  </UTooltip>
 </template>