@cat-factory/app 0.308.0 → 0.310.0

package/app/components/bugFishing/BugFishingWindow.vue

@@ -28,6 +28,7 @@ import type { BugFishingFinding, BugFishingSeverity, BugFishingStepState } from
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -263,12 +264,13 @@ const PHASE_ICON: Record<string, string> = {
         data-testid="bug-fishing-phases"
         class="w-60 shrink-0 overflow-y-auto border-r border-default px-3 py-4"
       >
-        <p class="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="p" class="mb-2 px-1">
           {{ t('bugFishing.phases.heading') }}
-        </p>
-        <button
-          type="button"
-          class="mb-1 w-full rounded-md px-2 py-1.5 text-left text-[12px]"
+        </SectionLabel>
+        <UButton
+          color="neutral"
+          variant="ghost"
+          class="mb-1 w-full rounded-md px-2 py-1.5 text-left text-xs"
           :class="
             selectedPassKey === null
               ? 'bg-elevated text-app-100'
@@ -277,21 +279,22 @@ 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">
           <p
             v-if="group.label"
-            class="mb-1 mt-2 truncate px-1 text-[10px] font-semibold uppercase tracking-wide text-app-info-400/80"
+            class="mb-1 mt-2 truncate px-1 text-3xs font-semibold uppercase tracking-wide text-app-info-400/80"
             :title="group.label"
           >
             {{ group.label }}
           </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)
@@ -312,8 +315,8 @@ const PHASE_ICON: Record<string, string> = {
                   }"
                 />
                 <span class="min-w-0 flex-1">
-                  <span class="block truncate text-[12px]">{{ phase.title }}</span>
-                  <span class="block text-[10px] text-dimmed">
+                  <span class="block truncate text-xs">{{ phase.title }}</span>
+                  <span class="block text-3xs text-dimmed">
                     {{
                       phase.status === 'completed' || phase.status === 'failed'
                         ? t('bugFishing.phases.found', { count: phaseFindingCount(phase) })
@@ -335,12 +338,12 @@ const PHASE_ICON: Record<string, string> = {
                         :style="{ width: `${coverageShare(phase)}%` }"
                       />
                     </span>
-                    <span class="mt-0.5 block text-[10px] text-app-600">
+                    <span class="mt-0.5 block text-3xs text-app-600">
                       {{ t('bugFishing.coverage.share', { percent: coverageShare(phase) }) }}
                     </span>
                   </span>
                 </span>
-              </button>
+              </UButton>
             </li>
           </ul>
         </div>
@@ -354,18 +357,18 @@ const PHASE_ICON: Record<string, string> = {
           v-if="selectedPhase"
           class="mb-4 rounded-lg border border-default bg-default/40 px-3 py-2.5"
         >
-          <p class="text-[11px] text-muted">{{ selectedPhase.goal }}</p>
+          <p class="text-2xs text-muted">{{ selectedPhase.goal }}</p>
           <p
             v-if="selectedPhase.status === 'failed'"
             data-testid="bug-fishing-phase-failed"
-            class="mt-2 text-[12px] text-app-warning-300"
+            class="mt-2 text-xs text-app-warning-300"
           >
             {{ t('bugFishing.phases.failedNote', { reason: selectedPhase.failureReason ?? '' }) }}
           </p>
           <MarkdownProse
             v-else-if="selectedPhase.summary"
             :text="selectedPhase.summary"
-            class="mt-2 max-w-3xl text-[12px]"
+            class="mt-2 max-w-3xl text-xs"
           />
         </div>
 
@@ -374,7 +377,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="fishing"
           data-testid="bug-fishing-in-progress"
-          class="mb-4 flex items-center gap-2 rounded-lg border border-app-info-500/25 bg-app-info-500/5 px-3 py-2 text-[12px] text-app-info-200"
+          class="mb-4 flex items-center gap-2 rounded-lg border border-app-info-500/25 bg-app-info-500/5 px-3 py-2 text-xs text-app-info-200"
         >
           <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
           <span>
@@ -395,7 +398,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="plan && (unfished.length > 0 || plan.treeTruncated || plan.surveyUnavailableReason)"
           data-testid="bug-fishing-plan"
-          class="mb-4 rounded-lg border border-app-warning-500/25 bg-app-warning-500/5 px-3 py-2 text-[12px] text-app-warning-200"
+          class="mb-4 rounded-lg border border-app-warning-500/25 bg-app-warning-500/5 px-3 py-2 text-xs text-app-warning-200"
         >
           <p v-if="plan.surveyUnavailableReason" data-testid="bug-fishing-survey-unavailable">
             {{ t('bugFishing.plan.surveyUnavailable', { reason: plan.surveyUnavailableReason }) }}
@@ -412,7 +415,7 @@ const PHASE_ICON: Record<string, string> = {
                 })
               }}
             </p>
-            <ul class="mt-1 space-y-0.5 text-[11px] text-app-warning-200/80">
+            <ul class="mt-1 space-y-0.5 text-2xs text-app-warning-200/80">
               <li v-for="cell in unfished" :key="`${cell.territoryId}::${cell.phaseId}`">
                 {{
                   t('bugFishing.plan.unfishedCell', {
@@ -432,7 +435,7 @@ const PHASE_ICON: Record<string, string> = {
           data-testid="bug-fishing-pipeline"
           class="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-default bg-default/40 px-3 py-2"
         >
-          <span class="text-[11px] text-muted">{{ t('bugFishing.fixPipeline.label') }}</span>
+          <span class="text-2xs text-muted">{{ t('bugFishing.fixPipeline.label') }}</span>
           <USelectMenu
             v-model="pipelineOverride"
             :items="pipelineOptions"
@@ -440,22 +443,19 @@ const PHASE_ICON: Record<string, string> = {
             size="xs"
             class="min-w-52"
           />
-          <span class="text-[11px] text-dimmed">
+          <span class="text-2xs text-dimmed">
             {{ t('bugFishing.fixPipeline.hint', { pipeline: effectivePipelineName ?? '—' }) }}
           </span>
         </div>
 
         <div class="mb-2 flex items-center justify-between">
-          <p class="text-[11px] text-muted">
+          <p class="text-2xs text-muted">
             {{ t('bugFishing.counts', { untriaged: untriagedCount, spawned: spawnedCount }) }}
           </p>
-          <label class="flex items-center gap-1.5 text-[11px] 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-[12px] text-app-error-300">
+        <p v-if="bugFishing.error" class="mb-3 text-xs text-app-error-300">
           {{ bugFishing.error }}
         </p>
 
@@ -465,7 +465,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="visibleFindings.length === 0"
           data-testid="bug-fishing-empty"
-          class="rounded-lg border border-default bg-default/40 px-4 py-8 text-center text-[12px] text-muted"
+          class="rounded-lg border border-default bg-default/40 px-4 py-8 text-center text-xs text-muted"
         >
           {{
             findings.length === 0
@@ -484,54 +484,76 @@ const PHASE_ICON: Record<string, string> = {
           >
             <div class="flex flex-wrap items-center gap-2">
               <span
-                class="rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase"
+                class="rounded-sm border px-1.5 py-0.5 text-3xs font-semibold uppercase"
                 :class="SEVERITY_CLASS[finding.severity]"
               >
                 {{ t(`bugFishing.severity.${finding.severity}`) }}
               </span>
-              <span class="rounded bg-elevated px-1.5 py-0.5 text-[10px] text-toned">
+              <span class="rounded-sm bg-elevated px-1.5 py-0.5 text-3xs text-toned">
                 {{ t(`bugFishing.kind.${finding.kind}`) }}
               </span>
-              <span class="text-[10px] text-dimmed">
+              <span class="text-3xs text-dimmed">
                 {{ t(`bugFishing.confidence.${finding.confidence}`) }}
               </span>
               <span
-                class="min-w-0 flex-1 text-[13px] text-app-100"
+                class="min-w-0 flex-1 text-sm text-app-100"
                 :class="{ 'line-through': finding.dismissed }"
               >
                 {{ finding.title }}
               </span>
             </div>
 
-            <p v-if="finding.path" class="mt-1 font-mono text-[11px] text-dimmed">
+            <p v-if="finding.path" class="mt-1 font-mono text-2xs text-dimmed">
               {{ finding.path }}<span v-if="finding.line">:{{ finding.line }}</span>
             </p>
 
-            <MarkdownProse :text="finding.detail" class="mt-2 max-w-3xl text-[12px]" />
+            <MarkdownProse :text="finding.detail" class="mt-2 max-w-3xl text-xs" />
 
-            <div v-if="finding.failureScenario" class="mt-2 text-[12px] text-toned">
-              <span class="text-[10px] font-semibold uppercase tracking-wide text-dimmed">
+            <div v-if="finding.failureScenario" class="mt-2 text-xs text-toned">
+              <SectionLabel as="span">
                 {{ t('bugFishing.finding.failureScenario') }}
-              </span>
+              </SectionLabel>
               <MarkdownProse :text="finding.failureScenario" class="mt-0.5 max-w-3xl" />
             </div>
 
             <!-- 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-[11px] text-muted hover:text-default">
-                {{ t('bugFishing.finding.evidence') }}
-              </summary>
-              <MarkdownProse :text="finding.evidence" class="mt-1 max-w-3xl text-[12px]" />
-            </details>
-
-            <details v-if="finding.suggestedFix" class="mt-1">
-              <summary class="cursor-pointer text-[11px] text-muted hover:text-default">
-                {{ t('bugFishing.finding.suggestedFix') }}
-              </summary>
-              <MarkdownProse :text="finding.suggestedFix" class="mt-1 max-w-3xl text-[12px]" />
-            </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
@@ -540,7 +562,7 @@ const PHASE_ICON: Record<string, string> = {
             <div
               v-if="finding.spawn?.status === 'spawned'"
               data-testid="bug-fishing-finding-spawned"
-              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-app-success-300"
+              class="mt-2 flex flex-wrap items-center gap-2 text-2xs text-app-success-300"
             >
               <UIcon name="i-lucide-check-circle-2" class="h-3.5 w-3.5" />
               <span>
@@ -552,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
@@ -566,7 +589,7 @@ const PHASE_ICON: Record<string, string> = {
             <div
               v-else-if="finding.spawn?.status === 'pending'"
               data-testid="bug-fishing-finding-spawning"
-              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-muted"
+              class="mt-2 flex flex-wrap items-center gap-2 text-2xs text-muted"
             >
               <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
               <span>{{ t('bugFishing.finding.spawning') }}</span>
@@ -577,7 +600,7 @@ const PHASE_ICON: Record<string, string> = {
             <p
               v-else-if="finding.spawn?.status === 'failed'"
               data-testid="bug-fishing-finding-spawn-failed"
-              class="mt-2 max-w-3xl text-[11px] text-app-warning-300"
+              class="mt-2 max-w-3xl text-2xs text-app-warning-300"
             >
               {{
                 t('bugFishing.finding.spawnFailed', {
@@ -623,7 +646,7 @@ const PHASE_ICON: Record<string, string> = {
       v-if="awaiting"
       class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{
           untriagedCount > 0
             ? t('bugFishing.footer.parkedWithUntriaged', { count: untriagedCount })

package/app/components/clarity/ClarityReviewWindow.vue

@@ -19,6 +19,7 @@ import type {
   ReviewItemSeverity,
   ReviewItemStatus,
 } from '~/types/clarity'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const clarity = useClarityStore()
@@ -424,9 +425,9 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
                     class="mt-2 max-w-3xl rounded-md border-s-2 border-muted bg-app-950/40 px-3 py-1.5 text-sm text-toned"
                   >
-                    <span class="text-[10px] uppercase tracking-wide text-dimmed">
+                    <SectionLabel as="span">
                       {{ t('clarity.answerLabel') }}
-                    </span>
+                    </SectionLabel>
                     <p class="whitespace-pre-line">{{ item.reply }}</p>
                   </div>
 
@@ -480,7 +481,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 
           <!-- clarified document: the standard-format bug report -->
           <section v-if="outline" class="mt-6 border-t border-default pt-5">
-            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-app-success-400">
+            <div class="mb-3 flex items-center gap-1.5 text-2xs text-app-success-400">
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">
                 {{ incorporated ? t('clarity.docHeading') : t('clarity.docHeadingDraft') }}
@@ -490,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
@@ -505,10 +508,10 @@ 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-[13px] leading-relaxed text-toned"
+                class="reader-prose mt-1 ps-5.5 text-sm leading-relaxed text-toned"
                 v-html="s.bodyHtml"
               />
             </div>
@@ -574,7 +577,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('clarity.incorporateAnswers') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('clarity.hint.proceed') }}
               </template>
@@ -636,14 +639,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('clarity.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               {{ t('clarity.redoHint') }}
             </p>
           </div>
 
           <div
             v-if="review && incorporated"
-            class="border-t border-default pt-4 text-[11px] leading-relaxed text-dimmed"
+            class="border-t border-default pt-4 text-2xs leading-relaxed text-dimmed"
           >
             {{ t('clarity.incorporatedFooter') }}
           </div>

package/app/components/common/AsyncViewError.vue

@@ -19,7 +19,7 @@ function reload() {
         <UIcon name="i-lucide-unplug" class="h-4 w-4 shrink-0 text-app-warning-400" />
         {{ t('errors.asyncView.title') }}
       </div>
-      <p class="mt-2 text-[12px] leading-relaxed text-muted">
+      <p class="mt-2 text-xs leading-relaxed text-muted">
         {{ t('errors.asyncView.body') }}
       </p>
       <UButton class="mt-4" color="primary" variant="soft" size="xs" @click="reload">

package/app/components/common/ClarificationItem.vue

@@ -51,16 +51,16 @@ const draft = computed({
 <template>
   <div class="rounded-lg border border-default bg-app-950/40 p-3" data-testid="clarification-item">
     <div class="flex items-start justify-between gap-2">
-      <p class="text-[13px] font-medium text-default">{{ prompt }}</p>
+      <p class="text-sm font-medium text-default">{{ prompt }}</p>
       <slot name="badges" />
     </div>
-    <p v-if="detail" class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted">
+    <p v-if="detail" class="mt-1 whitespace-pre-wrap text-xs leading-relaxed text-muted">
       {{ detail }}
     </p>
 
     <!-- dismissed: a "not relevant" chip + reopen -->
     <div v-if="dismissed" class="mt-2 flex items-center justify-between gap-2">
-      <span class="inline-flex items-center gap-1 text-[11px] text-dimmed">
+      <span class="inline-flex items-center gap-1 text-2xs text-dimmed">
         <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />{{ t('clarification.dismissed') }}
       </span>
       <UButton
@@ -79,7 +79,7 @@ const draft = computed({
     <!-- a recommendation is being requested/generated: a working chip, no answer box -->
     <div
       v-else-if="requested"
-      class="mt-2 inline-flex items-center gap-1 text-[11px] text-primary"
+      class="mt-2 inline-flex items-center gap-1 text-2xs text-primary"
       data-testid="clarification-requested"
     >
       <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
@@ -131,10 +131,10 @@ const draft = computed({
         class="mt-2 rounded-md border border-primary/50 bg-primary/10 p-2"
         data-testid="clarification-recommendation"
       >
-        <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-primary">
+        <div class="mb-1 flex items-center gap-1 text-3xs uppercase tracking-wide text-primary">
           <UIcon name="i-lucide-wand-2" class="h-3 w-3" />{{ t('clarification.suggestion') }}
         </div>
-        <p class="whitespace-pre-wrap text-[12px] text-default">{{ recommendation }}</p>
+        <p class="whitespace-pre-wrap text-xs text-default">{{ recommendation }}</p>
         <UButton
           class="mt-1.5"
           size="xs"

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/DescriptorFields.vue

@@ -112,7 +112,7 @@ function selectItems(field: DescriptorField) {
            testid that would have to be slugified to be selectable. -->
       <p
         v-if="caption"
-        class="-mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted"
+        class="-mb-1 text-2xs font-semibold uppercase tracking-wide text-muted"
         :class="{ 'pt-2': startsGroup }"
         :data-testid="`${testidPrefix}-section`"
       >

package/app/components/common/EmptyState.vue

@@ -25,7 +25,7 @@ withDefaults(
     <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-muted">
       {{ title }}
     </p>
-    <p v-if="description" :class="compact ? 'text-[11px]' : 'text-xs'" class="max-w-xs">
+    <p v-if="description" :class="compact ? 'text-2xs' : 'text-xs'" class="max-w-xs">
       {{ description }}
     </p>
     <div v-if="$slots.default" :class="compact ? 'mt-1' : 'mt-2'">

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>

package/app/components/common/InterviewGateNotice.vue

@@ -25,15 +25,15 @@ defineProps<{
     :data-testid="testid"
   >
     <UIcon name="i-lucide-loader-circle" class="h-5 w-5 animate-spin text-primary" />
-    <p class="text-[13px] text-default">{{ title }}</p>
-    <p class="text-[12px] text-muted">{{ hint }}</p>
+    <p class="text-sm text-default">{{ title }}</p>
+    <p class="text-xs text-muted">{{ hint }}</p>
   </div>
   <div
     v-else
     class="rounded-lg border border-app-error-900/60 bg-app-error-950/20 p-4 text-center"
     :data-testid="testid"
   >
-    <p class="text-[13px] text-app-error-200">{{ title }}</p>
-    <p class="mt-1 text-[12px] text-muted">{{ hint }}</p>
+    <p class="text-sm text-app-error-200">{{ title }}</p>
+    <p class="mt-1 text-xs text-muted">{{ hint }}</p>
   </div>
 </template>

package/app/components/common/MarkdownProse.vue

@@ -55,7 +55,11 @@ const html = computed(() => renderMarkdown(props.text))
   font-style: italic;
 }
 .cf-prose :deep(code) {
-  border-radius: 0.25rem;
+  /* `--ui-radius` rather than `--radius-sm`: Nuxt UI declares the `--radius-*` scale in a
+   * `@theme default inline` block, so Tailwind emits those only when the COMPILED stylesheet
+   * graph references them. This scoped block is not part of that compile, and `--ui-radius` is
+   * an ordinary custom property on `:root`. `--radius-sm` is `var(--ui-radius)` (prose.css). */
+  border-radius: var(--ui-radius);
   background: var(--ui-bg-elevated);
   padding: 0.1rem 0.3rem;
   font-family: var(--font-mono);
@@ -65,7 +69,9 @@ const html = computed(() => renderMarkdown(props.text))
 .cf-prose :deep(pre) {
   margin: 0.6rem 0;
   overflow: auto;
-  border-radius: 0.5rem;
+  /* `--radius-lg` is `calc(var(--ui-radius) * 2)`; see the note on `code` above for why this
+   * block cannot name the scale variable. */
+  border-radius: calc(var(--ui-radius) * 2);
   background: var(--app-bg-canvas);
   padding: 0.75rem 0.9rem;
 }