@cat-factory/app 0.309.0 → 0.310.1

package/README.md

@@ -321,6 +321,15 @@ That is the whole mechanism, and it is why there is no rule here about WHICH ste
 
 The default `radius` lives on the `Cat Factory` document in `app/utils/theme/builtins.ts`. It equals `THEME_DEFAULTS.radius` and so writes no CSS, which is the point: changing the number there is the whole edit.
 
+### A control is its Nuxt UI component
+
+Every CONTROL in the SPA is the Nuxt UI component for it, never the raw HTML element. A raw `<button>` beside a `UButton` is the same control rendered twice, and only one of the two follows the theme, the focus ring, the disabled state and the size scale; the SPA carried 152 of them, 24 raw `<input>`, five hand-built tables and six hand-rolled `<details>`, each with its own border, background and hover recipe.
+
+- **The mapping**: `<button>` → `UButton`; `<input>` → `UInput` / `UInputNumber` / `UCheckbox` / `URadioGroup` / `USlider` / `UFileUpload`, by what the control IS rather than by its `type=`; `<select>` → `USelect` (`USelectMenu` when it needs searching, `UInputMenu` when the list is open-ended); `<textarea>` → `UTextarea`; `<table>` → `UTable` with column definitions; `<details>` → `UCollapsible`; `<form>` → `UForm`; `<a href>` → `ULink`; `<datalist>` → `UInputMenu` with `mode="autocomplete"`, which is what a datalist was (the DEFAULT combobox mode writes its model only on SELECT, so a typed free-text value is dropped). Which input for which job is the skill's [component-selection matrix](https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/component-selection.md), not restated here.
+- **An icon-only button is [`common/IconButton.vue`](./app/components/common/IconButton.vue)**, which wraps `UButton` in a `UTooltip` and applies `label` as the tooltip text AND `aria-label`. A `title` attribute is not a tooltip: it never fires on touch, is unstyled, waits about a second, and looks nothing like the app's other hints. `IconButton` and `CopyButton` own their tooltip, so passing either a `title` renders a second hint over the first. A `title` on a LABELLED `UButton` is still fine: there it is a hover hint beside the control's own name rather than the name itself. `class` on `IconButton` lands on the wrapper the tooltip needs, which is the box the parent lays out, so it carries layout (`ms-auto`, `shrink-0`, `nodrag`); the button's own look goes through its props and `:ui="{ base: '…' }"`. The guard refuses an icon-only `UButton` whose only name is a `title`.
+- **Prose and layout markup is not in scope.** `<p>`, `<h1>`-`<h6>`, `<ul>`, `<li>`, `<dl>`, `<pre>`, `<code>`, `<img>`, `<nav>`, `<div>` and `<span>` are not controls and have no Nuxt UI component; heading typography is the type scale's rule above.
+- `scripts/check-frontend-primitives.mjs` (CI) holds the count at zero. There is deliberately **no allow-list**: the migration expected two exceptions (a Vue Flow gesture handle, a full-bleed media tile) and both converted cleanly, so the exception table would have had more surface than the thing it governed. A site that genuinely cannot convert says why with a `raw-control-ok:` comment, on that line or the one above; nothing in the tree needs one, and a second one appearing is the signal that the rule needs revisiting rather than the site.
+
 ### Themes and colour mode
 
 A **theme** is a Nuxt UI theme editor document (https://ui.nuxt.com/theme): the sparse `ThemeDoc` the editor edits and shares as a `?doc=` link, decoded by `utils/theme/link.ts` and typed in `utils/theme/doc.ts` (a port of the editor engine's tables). The app speaks THAT format rather than one of its own, so a theme built in the editor imports as-is and a built-in theme is a document a user could have exported. `utils/theme/builtins.ts` ships `Cat Factory` (the default; its `colors` MUST equal `app.config.ts`'s `ui.colors`, which paints the first frame) and the editor's own `Mono` preset, referenced from the preset table rather than copied. The `theme` store persists the pick and the user's imported documents in this browser; `plugins/theme.client.ts` applies the active document at runtime: aliases onto `appConfig.ui.colors` (Nuxt UI's own colours plugin re-emits the ramps), default variants and component overrides onto `appConfig.ui.<component>` merged INTO the layer's own overrides, and tokens / radius / fonts onto one `<style id="app-theme">` whose selectors anchor on the `data-theme` attribute on `<html>` (`utils/theme/css.ts`, which is also the write boundary for untrusted values). The faces the built-in themes name (Geist, Geist Mono) are self-hosted through `@nuxt/fonts` (`fonts.families` in `nuxt.config.ts`, pinned by `builtins.spec.ts`); a font an IMPORTED theme names is applied as a family name only, so it renders when the device or the deployment provides it. A editor link whose document equals one of the editor's presets collapses to `{ preset: 'mono' }`; `utils/theme/presets.ts` is a copy of the editor's preset table so such a link rebuilds (a decode table, not menu entries).
@@ -375,8 +384,8 @@ protects, so the two never contradict silently:
   freely; here a failed backend call is reported with `usePipelineErrorToast().present(error, key)`.
   [Rule](#every-failure-toast-goes-through-one-funnel).
 - **Icon-only buttons carry an accessible name.** Use `common/IconButton.vue`
-  ([source](./app/components/common/IconButton.vue)), which applies `label` as both `title` and
-  `aria-label`, rather than a bare `<UButton icon>`.
+  ([source](./app/components/common/IconButton.vue)), which applies `label` as both the tooltip
+  and `aria-label`, rather than a bare `<UButton icon>`.
 - **Colour goes through theme tokens, never a fixed palette shade.** The skill bans raw Tailwind
   hues; this repo also bans fixed numbered aliases, enforced by
   [`scripts/check-frontend-palette.mjs`](https://github.com/kibertoad/cat-factory/blob/main/scripts/check-frontend-palette.mjs).

package/app/components/assistant/AssistantModal.vue

@@ -259,16 +259,17 @@ function reveal(blockId: string): void {
               {{ t('assistant.examplesTitle') }}
             </SectionLabel>
             <div class="flex flex-col gap-1">
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-for="entry in examples"
                 :key="entry.actionId"
-                type="button"
-                class="rounded-md px-2 py-1 text-left text-sm text-toned hover:bg-elevated"
+                class="block rounded-md px-2 py-1 text-left text-sm text-toned hover:bg-elevated"
                 @click="useExample(entry.example)"
               >
                 <span class="text-muted">{{ entry.label }}</span>
                 <span class="block text-xs text-dimmed">“{{ entry.example }}”</span>
-              </button>
+              </UButton>
             </div>
           </div>
 

package/app/components/auth/BackendMisconfiguredScreen.vue

@@ -41,16 +41,17 @@ function reload() {
             <span class="font-medium text-toned">{{ t('app.misconfigured.howToFix') }}</span>
             {{ problem.remedy }}
           </p>
-          <a
+          <ULink
+            raw
             v-if="problem.docsUrl"
-            :href="problem.docsUrl"
+            :to="problem.docsUrl"
             target="_blank"
             rel="noopener noreferrer"
             class="mt-2 inline-flex items-center gap-1 text-sm text-app-warning-300 hover:text-app-warning-200"
           >
             <UIcon name="i-lucide-book-open" class="h-4 w-4" />
             {{ t('app.misconfigured.viewDocs') }}
-          </a>
+          </ULink>
         </li>
       </ul>
 

package/app/components/auth/LoginScreen.vue

@@ -286,16 +286,17 @@ const noSignInMethod = computed(
           <!-- Only when nothing can be installed here: the paste form below carries its own
                per-provider link, so showing these too would offer the same thing twice. -->
           <div v-if="installableProviders.length === 0" class="flex flex-wrap gap-3 px-1">
-            <a
+            <ULink
+              raw
               v-for="p in ALL_PROVIDERS"
               :key="p"
-              :href="tokenCreateUrl(p)"
+              :to="tokenCreateUrl(p)"
               target="_blank"
               rel="noopener noreferrer"
               class="text-xs text-primary hover:underline"
             >
               {{ t('auth.localMode.createToken', { provider: PROVIDER_LABELS[p] }) }}
-            </a>
+            </ULink>
           </div>
         </template>
 
@@ -379,10 +380,10 @@ const noSignInMethod = computed(
       </div>
 
       <!-- Email / password -->
-      <form
+      <UForm
         v-if="auth.providers.password && mode !== 'forgot'"
         class="space-y-3"
-        @submit.prevent="submitPassword"
+        @submit="submitPassword"
       >
         <UInput
           v-if="mode === 'signup'"
@@ -426,36 +427,43 @@ const noSignInMethod = computed(
           <template v-if="mode === 'login'">
             <i18n-t keypath="auth.login.needAccount" tag="span" scope="global">
               <template #signUp>
-                <button
-                  type="button"
-                  class="text-primary hover:underline"
+                <UButton
+                  color="primary"
+                  variant="link"
+                  class="p-0 text-xs text-primary hover:underline"
                   @click="setMode('signup')"
                 >
                   {{ t('auth.login.signUp') }}
-                </button>
+                </UButton>
               </template>
             </i18n-t>
           </template>
           <template v-else>
             <i18n-t keypath="auth.login.haveAccount" tag="span" scope="global">
               <template #signIn>
-                <button
-                  type="button"
-                  class="text-primary hover:underline"
+                <UButton
+                  color="primary"
+                  variant="link"
+                  class="p-0 text-xs text-primary hover:underline"
                   @click="setMode('login')"
                 >
                   {{ t('auth.login.signIn') }}
-                </button>
+                </UButton>
               </template>
             </i18n-t>
           </template>
         </p>
         <p v-if="mode === 'login'" class="text-center text-xs text-muted">
-          <button type="button" class="text-primary hover:underline" @click="setMode('forgot')">
+          <UButton
+            color="primary"
+            variant="link"
+            class="p-0 text-xs text-primary hover:underline"
+            @click="setMode('forgot')"
+          >
             {{ t('auth.login.forgotPassword') }}
-          </button>
+          </UButton>
         </p>
-      </form>
+      </UForm>
 
       <!-- Paste-a-token sign-in: your own PAT on a hosted node; on local mode the token this
            deployment will operate with (see `remotePatProviders`). -->
@@ -472,7 +480,7 @@ const noSignInMethod = computed(
           <span class="h-px flex-1 bg-elevated" /> {{ t('auth.login.or') }}
           <span class="h-px flex-1 bg-elevated" />
         </div>
-        <form class="space-y-3" @submit.prevent="submitRemotePat">
+        <UForm class="space-y-3" @submit="submitRemotePat">
           <div v-if="remotePatProviders.length > 1" class="flex gap-2">
             <UButton
               v-for="p in remotePatProviders"
@@ -517,8 +525,9 @@ const noSignInMethod = computed(
             {{ t('auth.localMode.tokenBecomesCredential') }}
           </p>
           <p class="px-1 text-center">
-            <a
-              :href="tokenCreateUrl(remotePatProvider)"
+            <ULink
+              raw
+              :to="tokenCreateUrl(remotePatProvider)"
               target="_blank"
               rel="noopener noreferrer"
               class="text-xs text-primary hover:underline"
@@ -526,9 +535,9 @@ const noSignInMethod = computed(
               {{
                 t('auth.localMode.createToken', { provider: PROVIDER_LABELS[remotePatProvider] })
               }}
-            </a>
+            </ULink>
           </p>
-        </form>
+        </UForm>
       </template>
 
       <!-- No sign-in method configured on a remote deployment: explain, don't show a blank card -->
@@ -542,10 +551,10 @@ const noSignInMethod = computed(
       />
 
       <!-- Forgot password: request a reset link by email -->
-      <form
+      <UForm
         v-if="auth.providers.password && mode === 'forgot'"
         class="space-y-3"
-        @submit.prevent="submitForgot"
+        @submit="submitForgot"
       >
         <template v-if="forgotSent">
           <p class="text-sm text-toned">
@@ -568,11 +577,16 @@ const noSignInMethod = computed(
           </UButton>
         </template>
         <p class="text-center text-xs text-muted">
-          <button type="button" class="text-primary hover:underline" @click="setMode('login')">
+          <UButton
+            color="primary"
+            variant="link"
+            class="p-0 text-xs text-primary hover:underline"
+            @click="setMode('login')"
+          >
             {{ t('auth.login.backToSignIn') }}
-          </button>
+          </UButton>
         </p>
-      </form>
+      </UForm>
     </div>
   </div>
 </template>

package/app/components/auth/ResetPasswordScreen.vue

@@ -76,7 +76,7 @@ function goToLogin() {
         </UButton>
       </template>
 
-      <form v-else class="space-y-3" @submit.prevent="submit">
+      <UForm v-else class="space-y-3" @submit="submit">
         <SecretInput
           v-model="password"
           required
@@ -98,11 +98,16 @@ function goToLogin() {
           {{ t('auth.resetPassword.submit') }}
         </UButton>
         <p class="text-center text-xs text-muted">
-          <button type="button" class="text-primary hover:underline" @click="goToLogin">
+          <UButton
+            color="primary"
+            variant="link"
+            class="p-0 text-xs text-primary hover:underline"
+            @click="goToLogin"
+          >
             {{ t('auth.resetPassword.backToSignIn') }}
-          </button>
+          </UButton>
         </p>
-      </form>
+      </UForm>
     </div>
   </div>
 </template>

package/app/components/auth/UserMenu.vue

@@ -33,8 +33,9 @@ const items = computed<DropdownMenuItem[][]>(() => [
 
 <template>
   <UDropdownMenu v-if="auth.user" :items="items" :content="{ side: 'top', align: 'start' }">
-    <button
-      type="button"
+    <UButton
+      color="neutral"
+      variant="ghost"
       data-testid="user-menu"
       :title="collapsed ? auth.user.name || auth.user.login : undefined"
       class="flex w-full items-center gap-2 rounded-lg border border-default bg-default/60 p-2 text-start transition hover:bg-elevated/60"
@@ -53,6 +54,6 @@ const items = computed<DropdownMenuItem[][]>(() => [
         <div class="truncate text-3xs text-dimmed">@{{ auth.user.login }}</div>
       </div>
       <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
-    </button>
+    </UButton>
   </UDropdownMenu>
 </template>

package/app/components/binaryCandidates/BinaryCandidatesWindow.vue

@@ -235,6 +235,16 @@ const { requestClose } = useUnsavedGuard({
         >
       </p>
 
+      <!-- Single-select renders a checkbox per card, not one radio group, so this line is what
+           tells everyone (a screen reader through each box's description) that ticking one clears
+           the other. -->
+      <p
+        v-if="view.awaiting && !view.multiSelect"
+        id="binary-candidates-pick-one"
+        class="mb-3 text-xs text-muted"
+      >
+        {{ t('binaryCandidates.pickOne') }}
+      </p>
       <div v-for="group in view.groups" :key="group.subject ?? '·'" class="mb-6">
         <h3 class="mb-2 text-xs font-medium text-muted">
           {{ group.subject ?? t('binaryCandidates.unlabelledSubject') }}
@@ -255,33 +265,34 @@ const { requestClose } = useUnsavedGuard({
           >
             <!-- The REAL control, not the card's click handler: ticking a candidate is the only
                  way to keep an asset, so without a focusable input the gate could not be completed
-                 by keyboard at all (UX-80). The whole window is ONE radio group in single-select
-                 mode, because `toggle` replaces the selection across every subject rather than per
-                 group.
+                 by keyboard at all (UX-80). In single-select mode `toggle` replaces the selection
+                 across every subject rather than per group.
 
-                 `@click.stop` belongs on the LABEL, which is the element the card's own toggle has
-                 to be shielded from. On the input alone it stopped the wrong click: activating a
-                 label forwards a synthetic click to its input (which `.stop` there does not
-                 prevent, only its propagation), so a click on the label TEXT bubbled to the card
-                 and toggled, then the forwarded click toggled back. On a checkbox that nets to no
-                 change, which means no re-render, which leaves the box ticked over a candidate
-                 that is no longer selected. -->
-            <label
-              v-if="view.awaiting"
-              class="mb-1.5 flex cursor-pointer items-center gap-2 text-2xs text-muted"
-              @click.stop
-            >
-              <input
-                :type="view.multiSelect ? 'checkbox' : 'radio'"
-                name="binary-candidate"
-                class="accent-app-info-500"
-                :checked="selected.includes(row.id)"
+                 `@click.stop` belongs on the WRAPPER, which is what the card's own toggle has to
+                 be shielded from, and NOT on the control: activating a label forwards a synthetic
+                 click to its control (which `.stop` there does not prevent, only its
+                 propagation), so a click on the label TEXT bubbles to the card and toggles, then
+                 the forwarded click toggles back. On a checkbox that nets to no change, which
+                 means no re-render, which leaves the box ticked over a candidate that is no
+                 longer selected. UCheckbox is not the place for it either: Nuxt UI forwards
+                 `$attrs` onto the inner checkbox button rather than onto its root, so a listener
+                 put there is the same "on the control alone" mistake spelled differently. -->
+            <!-- One control either way. Single-select is a checkbox rather than a radio group,
+                 because the rows render per candidate across several subjects and a radio group
+                 needs the whole set in one place. So the box announces as a checkbox, and the
+                 "pick one" line above is its description: that is the cue that ticking it clears
+                 the previous pick. -->
+            <div v-if="view.awaiting" class="mb-1.5" @click.stop>
+              <UCheckbox
+                size="xs"
+                :model-value="selected.includes(row.id)"
+                :label="candidateLabel(row)"
                 :aria-label="candidateLabel(row)"
+                :aria-describedby="view.multiSelect ? undefined : 'binary-candidates-pick-one'"
                 data-testid="binary-candidate-select"
-                @change="toggle(row.id)"
+                @update:model-value="toggle(row.id)"
               />
-              <span class="truncate">{{ candidateLabel(row) }}</span>
-            </label>
+            </div>
             <!-- Staged through the platform's OWN asset storage: we hold the bytes, so the card
                  renders them (and offers to open or save one) rather than waiting for a public
                  link the shipped storage never issues. Checked first because a candidate can

package/app/components/binaryOutput/StoredAssetView.vue

@@ -112,22 +112,24 @@ const filename = computed(() => {
     <!-- The two things a person does with a delivered asset. Both hang off the object URL, so
          they appear only once the bytes are in hand. -->
     <div v-if="url" class="flex items-center gap-3 text-2xs">
-      <a
-        :href="url"
+      <ULink
+        raw
+        :to="url"
         target="_blank"
         rel="noopener"
         class="text-app-info-300 hover:underline"
         data-testid="stored-asset-open"
         @click.stop
-        >{{ t('binaryOutput.asset.open') }}</a
+        >{{ t('binaryOutput.asset.open') }}</ULink
       >
-      <a
-        :href="url"
+      <ULink
+        raw
+        :to="url"
         :download="filename"
         class="text-app-info-300 hover:underline"
         data-testid="stored-asset-download"
         @click.stop
-        >{{ t('binaryOutput.asset.download') }}</a
+        >{{ t('binaryOutput.asset.download') }}</ULink
       >
     </div>
   </div>

package/app/components/board/AddTaskModal.vue

@@ -142,6 +142,11 @@ const timeboxHours = ref<number | undefined>(undefined)
 // default — an expedition exists to cover ground nobody thought to look at, so narrowing it is
 // the deliberate act) plus an optional focus folded into every angle's prompt.
 const fishingPhaseIds = ref<string[]>([])
+function toggleFishingPhase(id: string, checked: boolean) {
+  fishingPhaseIds.value = checked
+    ? [...fishingPhaseIds.value, id]
+    : fishingPhaseIds.value.filter((x) => x !== id)
+}
 const fishingFocus = ref('')
 /** Held as a string because the input is a text field; parsed at submit, blank ⇒ the default. */
 const fishingMaxPasses = ref('')
@@ -1105,23 +1110,19 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
               :description="t('board.addTask.bugFishingFields.angles.hint')"
             >
               <div class="grid gap-1.5 sm:grid-cols-2">
-                <label
+                <!-- Each angle keeps its own test hook, so the boolean is derived from the id
+                     list rather than bound through a checkbox group. -->
+                <UCheckbox
                   v-for="phase in BUG_FISHING_PHASES"
                   :key="phase.id"
-                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-xs hover:bg-elevated/40"
-                >
-                  <input
-                    v-model="fishingPhaseIds"
-                    type="checkbox"
-                    :value="phase.id"
-                    class="mt-0.5 accent-app-info-500"
-                    :data-testid="`add-task-fishing-angle-${phase.id}`"
-                  />
-                  <span class="min-w-0">
-                    <span class="block text-default">{{ phase.title }}</span>
-                    <span class="block text-2xs text-dimmed">{{ phase.goal }}</span>
-                  </span>
-                </label>
+                  size="xs"
+                  :model-value="fishingPhaseIds.includes(phase.id)"
+                  :label="phase.title"
+                  :description="phase.goal"
+                  class="rounded-md px-1.5 py-1 hover:bg-elevated/40"
+                  :data-testid="`add-task-fishing-angle-${phase.id}`"
+                  @update:model-value="toggleFishingPhase(phase.id, $event === true)"
+                />
               </div>
               <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-2xs text-dimmed">
                 {{ t('board.addTask.bugFishingFields.angles.allSelected') }}

package/app/components/board/AgentFailureCard.vue

@@ -197,8 +197,9 @@ async function retry() {
     />
 
     <div class="mt-2 flex flex-wrap items-center gap-2">
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/40 text-app-error-200 hover:bg-app-error-900/70 disabled:opacity-60"
         :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         :disabled="retrying || !access.canExecuteRuns.value"
@@ -211,11 +212,12 @@ async function retry() {
           :class="[compact ? 'h-3 w-3' : 'h-3.5 w-3.5', { 'animate-spin': retrying }]"
         />
         {{ retrying ? t('board.failure.retrying') : compact ? t('common.retry') : retryLabel }}
-      </button>
+      </UButton>
 
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="run.kind === 'bootstrap'"
-        type="button"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
         :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         data-testid="agent-failure-inspect"
@@ -223,16 +225,17 @@ async function retry() {
       >
         <UIcon name="i-lucide-activity" :class="compact ? 'h-3 w-3' : 'h-3.5 w-3.5'" />
         {{ t('observability.modelActivity') }}
-      </button>
+      </UButton>
 
       <!-- Environment provisioning failures are almost always a deploy-backend / provider-config
            issue, so link straight to where it's set up rather than leaving the user to hunt. The
            destination + label follow the cause: a `deploy_runner_unwired` failure needs the runner
            pool (Agent containers tab), every other cause needs the environment provider (Test
            environments tab) — see `routesToRunnerPool`. -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="isEnvironmentFailure"
-        type="button"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
         :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         data-testid="agent-failure-configure-environment"
@@ -240,7 +243,7 @@ async function retry() {
       >
         <UIcon name="i-lucide-settings" :class="compact ? 'h-3 w-3' : 'h-3.5 w-3.5'" />
         {{ failureSetupLabel }}
-      </button>
+      </UButton>
     </div>
   </div>
 </template>

package/app/components/board/AgentFailureHistory.vue

@@ -13,18 +13,27 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <details
+  <UCollapsible
     v-if="failures.length"
     class="nodrag rounded-lg border border-muted/60 bg-default/40 px-3 py-2"
     data-testid="agent-failure-history"
   >
-    <summary
-      class="flex cursor-pointer items-center gap-1.5 text-2xs text-muted hover:text-default"
-    >
-      <UIcon name="i-lucide-history" class="h-3.5 w-3.5 shrink-0" />
-      {{ t('board.failure.history.previousErrors', { count: failures.length }, failures.length) }}
-    </summary>
+    <template #default="{ open }">
+      <UButton
+        variant="link"
+        color="neutral"
+        size="xs"
+        icon="i-lucide-history"
+        :trailing-icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        :label="
+          t('board.failure.history.previousErrors', { count: failures.length }, failures.length)
+        "
+        :ui="{ base: 'w-full justify-start gap-1.5 p-0 text-2xs text-muted hover:text-default' }"
+      />
+    </template>
 
-    <FailureHistoryList :failures="props.failures" class="mt-2" />
-  </details>
+    <template #content>
+      <FailureHistoryList :failures="props.failures" class="mt-2" />
+    </template>
+  </UCollapsible>
 </template>

package/app/components/board/CreateInitiativeModal.vue

@@ -193,16 +193,17 @@ async function create() {
         <div v-if="presets.length > 1" class="space-y-1.5">
           <span class="text-xs font-medium text-toned">{{ t('initiative.create.preset') }}</span>
           <div class="grid gap-2" data-testid="initiative-preset-picker">
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="p in presets"
               :key="p.id"
-              type="button"
               :data-testid="`initiative-preset-option-${p.id}`"
               :aria-pressed="p.id === selectedPresetId"
               class="flex items-start gap-3 rounded-md border px-3 py-2 text-left transition"
               :class="
                 p.id === selectedPresetId
-                  ? 'border-primary bg-primary/10'
+                  ? 'border-primary bg-primary/10 hover:bg-primary/10 focus-visible:bg-primary/10 disabled:bg-primary/10'
                   : 'border-muted hover:border-app-600'
               "
               @click="selectPreset(p.id)"
@@ -220,7 +221,7 @@ async function create() {
                   {{ p.presentation.description }}
                 </span>
               </span>
-            </button>
+            </UButton>
           </div>
         </div>
 

package/app/components/board/FailureDetail.vue

@@ -18,18 +18,28 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <details v-if="detail && detail !== message" class="mt-1">
-    <summary class="cursor-pointer" :class="summaryClass">
-      {{ t('board.failure.showDetail') }}
-    </summary>
+  <UCollapsible v-if="detail && detail !== message" 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('board.failure.showDetail')"
+        :class="summaryClass"
+        :ui="{ base: 'w-full justify-start gap-1 p-0' }"
+      />
+    </template>
     <!-- The stack trace / extended detail: the first thing a user does with it is copy it, so
          offer a copy affordance floated over the scroll box (UX-39). -->
-    <div class="relative mt-1">
-      <CopyButton :text="detail" class="absolute end-1 top-1 z-10" />
-      <pre
-        class="max-h-32 overflow-auto whitespace-pre-wrap rounded-sm p-1.5 pe-9"
-        :class="preClass"
-        >{{ detail }}</pre>
-    </div>
-  </details>
+    <template #content>
+      <div class="relative mt-1">
+        <CopyButton :text="detail" class="absolute end-1 top-1 z-10" />
+        <pre
+          class="max-h-32 overflow-auto whitespace-pre-wrap rounded-sm p-1.5 pe-9"
+          :class="preClass"
+          >{{ detail }}</pre>
+      </div>
+    </template>
+  </UCollapsible>
 </template>

package/app/components/board/ReviewFrictionDialog.vue

@@ -90,8 +90,9 @@ function createAnyway() {
           </SectionLabel>
           <ul class="space-y-1">
             <li v-for="item in ctx.debt" :key="item.blockId">
-              <button
-                type="button"
+              <UButton
+                color="neutral"
+                variant="ghost"
                 class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated/60 disabled:opacity-50"
                 :disabled="pending"
                 @click="goToBlock(item.blockId)"
@@ -102,7 +103,7 @@ function createAnyway() {
                 <span class="shrink-0 text-xs text-dimmed">
                   {{ t('errors.reviewFriction.waiting', { minutes: item.waitingMinutes }) }}
                 </span>
-              </button>
+              </UButton>
             </li>
           </ul>
         </div>