@cat-factory/app 0.311.2 → 0.311.3

package/README.md

@@ -257,14 +257,72 @@ a recognised refusal keeps that branch and drains only its fallback into the fun
 answered, so a local check that never left the browser must not be dressed up as one: a synthesized
 `new Error(t('...'))` has no envelope and no status, which is precisely the input `describeGenericFailure`
 reads as a network fault. A blank required field then renders as "The server could not be reached",
-with the real sentence hidden behind a disclosure. Client-side validation stays a plain
-`toast.add` with translated title and description (`components/settings/ModelConfigurationPanel.vue`).
+with the real sentence hidden behind a disclosure. Client-side validation is
+`useActionToast().error(titleKey, { description })` instead (see below). A failure the backend
+reports as DATA (a job row with `status: 'failed'` and its `error`, a probe verdict's `message`) is
+`presentReported(detail, titleKey, { descriptionKey })`: translated copy as the headline, the
+backend's prose behind "Show details" and in the copied report, the same as a failed call.
 
 The still-open remainder is the INLINE family: `error.value = e.message` rendered in a panel, and
 `testResult = { ok: false, message }` rendered by `ConnectionTestVerdict`. Those need a render
 surface rather than a toast, and are tracked as G4 in
 [`error-message-coverage.md`](https://github.com/kibertoad/cat-factory/blob/main/docs/initiatives/error-message-coverage.md).
 
+#### Every other toast goes through the second funnel, `useActionToast`
+
+**`toast.add` is called from exactly two composables**: `usePipelineErrorToast` (with its
+`pipelineErrorToast/` factory) for a failed call, and `useActionToast` for everything else. A call
+site picks a TONE and supplies a title KEY; the tone fixes the colour, the icon and the duration, so
+two toasts of one tone render identically wherever they come from. Before this, some success toasts
+were green with a check and the next was grey with no icon, depending on who wrote the site.
+
+| Tone      | For                                                                                                      | Dismisses   |
+| --------- | -------------------------------------------------------------------------------------------------------- | ----------- |
+| `success` | The action the user asked for completed (saved, connected, removed, copied, moved).                      | After 5s    |
+| `info`    | Progress or a state report that asks nothing ("drafting", "up to date").                                 | After 5s    |
+| `warning` | The action ran, but the outcome is partial or needs a look.                                              | When closed |
+| `error`   | A refusal in translated copy that is NOT a failed call: client-side validation, a mapped refusal reason. | When closed |
+
+`warning` and `error` stay for the same reason the failure funnel's toast does: they ask the reader
+to do something. Options are content, never styling: `params` and `plural` for the title key, a
+resolved `description`, `actions` for a call-to-action, and `undo: { run, windowMs }` for a write
+held open behind an Undo (the board's delete and move), which keeps the toast exactly as long as
+the window. A toast is action feedback. Something the reader must act on later belongs in an inline
+`UAlert` or the notification inbox, not a toast.
+
+#### Loading: the component's `loading` prop, `USkeleton` for content, `Spinner` for a glyph
+
+- **A Nuxt UI component with a `loading` prop takes `:loading`.** Never spin its icon by hand
+  (`:ui="{ leadingIcon: 'animate-spin' }"`, or an `:icon` swapped to a loader while busy). One
+  exception: `UButton`'s `loading` also DISABLES it (`disabled || isLoading`). A button that must
+  stay clickable while its work runs (a tab whose thread is mid-reply, a "planning in progress"
+  button that opens the planning window) puts `<Spinner>` in its `#leading` slot instead, with a
+  comment saying why. `UInput` and the other inputs do not disable on `loading`.
+- **A panel or list waiting on its first fetch shows `USkeleton` rows sized like the content they
+  replace**, so it does not show nothing and then everything. Its fill is `bg-accented`, set once
+  in `app.config.ts`: Nuxt UI's default skeleton is `bg-elevated`, which disappears on the
+  `bg-elevated` and `app-950` window bodies and cards many panels paint. An ACTION in progress (a button
+  press, a sync) is not a content load and keeps `:loading` or a spinner.
+- **A bare glyph showing work in progress is `<Spinner>`** (`components/common/Spinner.vue`), the
+  one file that writes `animate-spin`. `:spinning` covers a status icon that spins in one state
+  only (a running step), and `name` defaults to Nuxt UI's own loading icon so it matches the one
+  `:loading` draws. It spins under `motion-safe:` only.
+
+#### Empty states: `EmptyState`, always
+
+**A list, panel or section with nothing to show renders `common/EmptyState.vue`**, with its copy as
+`title` / `description` and any button that fills the list in its default slot. `compact` is the
+inline size for an inspector section or a picker. It wraps Nuxt UI's `UEmpty` (the structure, the
+action row and the tokens) and decides once what each `UEmpty` caller would otherwise pick: the
+`naked` variant, because an empty state sits inside a panel that already draws its border; the
+spacing, because `UEmpty` pads `p-4 sm:p-6 lg:p-8` for a page body; and plain text for the title,
+because `UEmpty` renders it as an `<h2>`, which would put a heading into every picker. An inline
+value placeholder ("None", a dash in a table cell) is not an empty state.
+
+`scripts/check-frontend-feedback.mjs` (CI's `repo-guards` job) bans `useToast(` and `toast.add(`
+outside the two funnels and `animate-spin` outside `Spinner.vue`. Its `PENDING` list names files another open
+change is rewriting, and fails once one of them is clean so the entry cannot outlive the reason.
+
 ### A panel that seeds state on open uses `onModalOpen`, never a bare `watch(open)`
 
 **Work done on the way IN to a modal goes through `onModalOpen(open, fn)`
@@ -412,9 +470,12 @@ protects, so the two never contradict silently:
   skill teaches the hand-rolled `UForm` + `UFormField` shape for every form; when the backend
   declares the fields and the SPA only collects them, that shape is forbidden here.
   [Rule](#a-backend-declared-form-renders-through-descriptorfieldsvue).
-- **Failure toasts go through the funnel, not a bare `toast.add`.** The skill uses `useToast()`
-  freely; here a failed backend call is reported with `usePipelineErrorToast().present(error, key)`.
+- **Toasts go through the two funnels, never a bare `toast.add`.** The skill uses `useToast()`
+  freely; here a failed backend call is reported with `usePipelineErrorToast().present(error, key)`
+  and every other toast with `useActionToast().success|info|warning|error(key, opts)`.
   [Rule](#every-failure-toast-goes-through-one-funnel).
+- **Loading is `:loading`, `USkeleton` or `<Spinner>`; empty is `<EmptyState>`.** Never a
+  hand-written `animate-spin`. [Rule](#loading-the-components-loading-prop-uskeleton-for-content-spinner-for-a-glyph).
 - **Icon-only buttons carry an accessible name.** Use `common/IconButton.vue`
   ([source](./app/components/common/IconButton.vue)), which applies `label` as both the tooltip
   and `aria-label`, rather than a bare `<UButton icon>`.

package/app/app.config.ts

@@ -23,6 +23,13 @@ export default defineAppConfig({
     badge: {
       defaultVariants: { color: 'primary', variant: 'solid', size: 'md' },
     },
+    // A skeleton is one step darker than Nuxt UI's `bg-elevated`, which is also the default
+    // skeleton fill. Many windows paint their body or inner cards `bg-elevated` or `app-950`
+    // (neutral-100 in light mode, the same colour), and a default skeleton there is invisible.
+    // `bg-accented` reads on those, on `bg-default`, and in dark mode.
+    skeleton: {
+      base: 'animate-pulse rounded-md bg-accented',
+    },
     // The toaster's scroll region is the ONE `[data-slot='viewport']` the app's own
     // CSS may target: Nuxt UI reuses that attribute for the item list of every menu
     // component too. This marker class is what `main.css` hangs the safe-area offset

package/app/components/assistant/AssistantModal.vue

@@ -23,6 +23,7 @@
 import type { AssistantActionId, AssistantOutcome } from '~/types/domain'
 import { answerFor, assistantSurface, revealTarget, submitGate } from './AssistantModal.logic'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -243,11 +244,7 @@ function reveal(blockId: string): void {
               :class="submitReason ? 'text-app-warning-400' : 'text-dimmed'"
               data-testid="assistant-submit-status"
             >
-              <UIcon
-                v-if="gate.state === 'checking'"
-                name="i-lucide-loader-circle"
-                class="h-3 w-3 shrink-0 animate-spin"
-              />
+              <Spinner v-if="gate.state === 'checking'" class="h-3 w-3 shrink-0" />
               {{ submitReason ?? t('assistant.submitHint') }}
             </span>
           </div>

package/app/components/auth/AuthGate.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import BackendMisconfiguredScreen from '~/components/auth/BackendMisconfiguredScreen.vue'
 import LoginScreen from '~/components/auth/LoginScreen.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Resolves auth state once on mount, then either renders the app (auth off, or
 // on with a signed-in user) or the login screen. The board's own bootstrap runs
@@ -24,7 +25,7 @@ onMounted(() => void auth.bootstrap().finally(() => markBoot('auth-ready')))
     v-if="!auth.ready"
     class="flex h-screen w-screen flex-col items-center justify-center gap-3 bg-app-950 text-muted"
   >
-    <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
+    <Spinner class="h-8 w-8" />
     <span class="text-sm">{{ t('auth.gate.loading') }}</span>
   </div>
 

package/app/components/binaryCandidates/BinaryCandidatesWindow.vue

@@ -28,6 +28,7 @@ import {
 } from '~/utils/binaryCandidates'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StoredAssetView from '~/components/binaryOutput/StoredAssetView.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -399,21 +400,20 @@ const { requestClose } = useUnsavedGuard({
          Retry), or the step genuinely compared nothing. Collapsing any of the first three into the
          last would put "nothing to compare" in front of a person whose candidates exist and were
          simply not fetched. -->
-    <div
+    <EmptyState
       v-else-if="absence === 'no_run'"
-      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-muted"
+      class="min-h-0 flex-1 px-5"
+      icon="i-lucide-unlink"
+      :title="t('binaryCandidates.noRun.title')"
+      :description="t('binaryCandidates.noRun.hint')"
       data-testid="binary-candidates-no-run"
-    >
-      <UIcon name="i-lucide-unlink" class="h-8 w-8 opacity-40" />
-      <p class="text-sm">{{ t('binaryCandidates.noRun.title') }}</p>
-      <p class="max-w-md text-2xs text-dimmed">{{ t('binaryCandidates.noRun.hint') }}</p>
-    </div>
+    />
     <div
       v-else-if="absence === 'loading'"
-      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-muted"
+      class="grid min-h-0 flex-1 grid-cols-1 content-start gap-3 px-5 py-4 sm:grid-cols-2 lg:grid-cols-3"
       data-testid="binary-candidates-loading"
     >
-      <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
+      <USkeleton v-for="n in 3" :key="n" class="h-48 w-full rounded-lg" />
     </div>
     <div
       v-else-if="absence === 'load_failed'"
@@ -434,13 +434,12 @@ const { requestClose } = useUnsavedGuard({
         {{ t('common.retry') }}
       </UButton>
     </div>
-    <div
+    <EmptyState
       v-else
-      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-muted"
+      class="min-h-0 flex-1 px-5"
+      icon="i-lucide-images"
+      :title="t('binaryCandidates.empty.title')"
       data-testid="binary-candidates-empty"
-    >
-      <UIcon name="i-lucide-images" class="h-8 w-8 opacity-40" />
-      <p class="text-sm">{{ t('binaryCandidates.empty.title') }}</p>
-    </div>
+    />
   </ResultWindowShell>
 </template>

package/app/components/binaryOutput/StoredAssetView.vue

@@ -105,9 +105,7 @@ const filename = computed(() => {
         {{ t('binaryOutput.asset.retry') }}
       </UButton>
     </p>
-    <p v-else class="text-2xs text-dimmed" data-testid="stored-asset-loading">
-      {{ t('binaryOutput.asset.loading') }}
-    </p>
+    <USkeleton v-else class="h-16 w-full rounded-sm" data-testid="stored-asset-loading" />
 
     <!-- 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. -->

package/app/components/board/AddTaskModal.vue

@@ -65,7 +65,7 @@ const modelPresets = useModelPresetsStore()
 const pipelines = usePipelinesStore()
 const agentConfig = useAgentConfigStore()
 const fragments = useFragmentsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -789,9 +789,7 @@ async function submitCreate(acknowledgeReviewDebt: boolean) {
     const { resolved, failures } = await resolvePending(pendingContext.value)
     pendingContext.value = resolved
     if (failures.length) {
-      presentLinkFailures(failures, undefined, {
-        title: (count) => t('board.addTask.contextFailed', { count }, count),
-      })
+      presentLinkFailures(failures, undefined, { titleKey: 'board.addTask.contextFailed' })
       return
     }
     const typeFields = buildTypeFields()
@@ -839,12 +837,7 @@ async function submitCreate(acknowledgeReviewDebt: boolean) {
     }
     const refusal = createRefusalMessage(e)
     if (refusal) {
-      toast.add({
-        title: t('board.addTask.addFailedTitle'),
-        description: refusal,
-        icon: 'i-lucide-triangle-alert',
-        color: 'error',
-      })
+      actionToast.error('board.addTask.addFailedTitle', { description: refusal })
     } else present(e, 'board.addTask.addFailedTitle')
   } finally {
     saving.value = false

package/app/components/board/AgentFailureCard.vue

@@ -202,15 +202,14 @@ async function retry() {
         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"
+        icon="i-lucide-rotate-ccw"
+        :loading="retrying"
+        :ui="{ leadingIcon: compact ? 'h-3 w-3' : 'h-3.5 w-3.5' }"
+        :disabled="!access.canExecuteRuns.value"
         :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
         data-testid="agent-failure-retry"
         @click.stop="retry"
       >
-        <UIcon
-          :name="retrying ? 'i-lucide-loader-circle' : 'i-lucide-rotate-ccw'"
-          :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 }}
       </UButton>
 

package/app/components/board/AgentStopButton.vue

@@ -22,7 +22,7 @@ const props = withDefaults(
 const { t } = useI18n()
 const agentRuns = useAgentRunsStore()
 const access = useWorkspaceAccess()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 const stopping = ref(false)
@@ -44,12 +44,10 @@ async function stop() {
   stopping.value = true
   try {
     const kind = await agentRuns.stop(props.runId)
-    toast.add({
-      title: kind === 'bootstrap' ? t('board.stop.bootstrapStopped') : t('board.stop.runStopped'),
-      description: t('board.stop.stoppedDescription'),
-      icon: 'i-lucide-circle-stop',
-      color: 'warning',
-    })
+    actionToast.success(
+      kind === 'bootstrap' ? 'board.stop.bootstrapStopped' : 'board.stop.runStopped',
+      { description: t('board.stop.stoppedDescription') },
+    )
   } catch (e) {
     present(e, 'board.stop.stopFailed')
   } finally {

package/app/components/board/BoardCanvas.vue

@@ -16,6 +16,7 @@ import { useFrameOverlapGuard } from '~/composables/useFrameOverlapGuard'
 import { useViewport } from '~/composables/useViewport'
 import { boardPanMode } from '~/utils/boardPanMode'
 import { createBoardNodeProjection } from './BoardCanvas.logic'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const ui = useUiStore()
@@ -162,39 +163,39 @@ function onPaneClick() {
          the buttons themselves. -->
     <div
       v-if="board.frames.length === 0"
-      class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-4 text-center"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center"
     >
-      <UIcon name="i-lucide-layout-dashboard" class="h-10 w-10 text-app-600" />
-      <div>
-        <h2 class="text-base font-semibold text-toned">{{ t('board.canvas.emptyTitle') }}</h2>
-        <p class="mt-1 max-w-sm text-sm text-dimmed">
-          {{ t('board.canvas.emptyBody') }}
-        </p>
-      </div>
-      <div
-        v-if="
-          access.canManageIntegrations.value || (github.available && access.canWriteBoard.value)
-        "
-        class="pointer-events-auto flex flex-wrap items-center justify-center gap-2"
+      <EmptyState
+        icon="i-lucide-layout-dashboard"
+        :title="t('board.canvas.emptyTitle')"
+        :description="t('board.canvas.emptyBody')"
+        class="max-w-sm"
       >
-        <UButton
-          v-if="access.canManageIntegrations.value"
-          icon="i-lucide-git-branch-plus"
-          @click="ui.openBootstrap()"
+        <div
+          v-if="
+            access.canManageIntegrations.value || (github.available && access.canWriteBoard.value)
+          "
+          class="pointer-events-auto flex flex-wrap items-center justify-center gap-2"
         >
-          {{ t('nav.bootstrapRepo') }}
-        </UButton>
-        <UButton
-          v-if="github.available && access.canWriteBoard.value"
-          variant="soft"
-          icon="i-lucide-folder-git-2"
-          @click="ui.openAddService()"
-        >
-          {{ t('nav.addFromRepo') }}
-        </UButton>
-      </div>
-      <!-- A read-only viewer sees the empty state but no create affordances. -->
-      <p v-else class="max-w-sm text-xs text-app-600">{{ t('access.noBoardWrite') }}</p>
+          <UButton
+            v-if="access.canManageIntegrations.value"
+            icon="i-lucide-git-branch-plus"
+            @click="ui.openBootstrap()"
+          >
+            {{ t('nav.bootstrapRepo') }}
+          </UButton>
+          <UButton
+            v-if="github.available && access.canWriteBoard.value"
+            variant="soft"
+            icon="i-lucide-folder-git-2"
+            @click="ui.openAddService()"
+          >
+            {{ t('nav.addFromRepo') }}
+          </UButton>
+        </div>
+        <!-- A read-only viewer sees the empty state but no create affordances. -->
+        <p v-else class="max-w-sm text-xs text-app-600">{{ t('access.noBoardWrite') }}</p>
+      </EmptyState>
     </div>
 
     <!-- task dependency arrows, overlaid in screen space -->

package/app/components/board/CreateInitiativeModal.vue

@@ -146,9 +146,7 @@ async function create() {
     const { resolved, failures } = await resolvePending(pendingContext.value)
     pendingContext.value = resolved
     if (failures.length) {
-      presentLinkFailures(failures, undefined, {
-        title: (count) => t('initiative.create.contextFailed', { count }, count),
-      })
+      presentLinkFailures(failures, undefined, { titleKey: 'initiative.create.contextFailed' })
       return
     }
     const { block } = await initiatives.create(frameId, {
@@ -163,7 +161,7 @@ async function create() {
     // doc another task already holds), surfaced with its specific cause rather than a bare count.
     // The initiative is already created, so a failed link never costs the user the form.
     presentLinkFailures(await linkPending(block.id, pendingContext.value), block.id, {
-      title: (count) => t('initiative.create.linkFailed', { count }, count),
+      titleKey: 'initiative.create.linkFailed',
     })
     ui.closeCreateInitiative()
     // Select the fresh block so the inspector offers "Run planning" right away.

package/app/components/board/RecurringPipelineModal.vue

@@ -20,7 +20,7 @@ const pipelines = usePipelinesStore()
 const recurring = useRecurringPipelinesStore()
 const tracker = useTrackerStore()
 const tasks = useTasksStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const access = useWorkspaceAccess()
 const { t, te } = useI18n()
@@ -394,12 +394,7 @@ async function add() {
   } catch (e) {
     const refusal = intakeRefusalCopy(e)
     if (refusal) {
-      toast.add({
-        title: t('board.recurring.addFailedTitle'),
-        description: refusal,
-        icon: 'i-lucide-triangle-alert',
-        color: 'error',
-      })
+      actionToast.error('board.recurring.addFailedTitle', { description: refusal })
     } else present(e, 'board.recurring.addFailedTitle')
   } finally {
     saving.value = false

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentState, PipelineStep } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{
   step: PipelineStep
@@ -19,7 +20,7 @@ const stateRing: Record<AgentState, string> = {
 
 const stateIcon: Record<AgentState, string | null> = {
   pending: null,
-  working: 'i-lucide-loader',
+  working: null,
   waiting_decision: 'i-lucide-circle-help',
   done: 'i-lucide-check',
 }
@@ -39,7 +40,7 @@ const dim = computed(() => (props.size === 'sm' ? 'h-7 w-7' : 'h-9 w-9'))
         v-if="step.state === 'working'"
         class="absolute -bottom-1 -end-1 rounded-full bg-default p-0.5"
       >
-        <UIcon :name="stateIcon.working!" class="h-3 w-3 animate-spin text-primary" />
+        <Spinner class="h-3 w-3 text-primary" />
       </span>
       <span
         v-else-if="stateIcon[step.state]"

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

@@ -10,6 +10,7 @@ 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 Spinner from '~/components/common/Spinner.vue'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameStacking } from '~/composables/useFrameStacking'
 import { useViewport } from '~/composables/useViewport'
@@ -224,9 +225,10 @@ const bootstrapPct = computed(() => {
 // The actual todo items the agent is working through, surfaced on the expanded
 // card so a zoomed-in user sees the task list, not just the "N/M" count.
 const bootstrapItems = computed(() => bootstrapSubtasks.value?.items ?? [])
-const ITEM_ICON: Record<string, string> = {
+// `in_progress` takes the spinner's own loading glyph.
+const ITEM_ICON: Record<string, string | undefined> = {
   completed: 'i-lucide-check-circle-2',
-  in_progress: 'i-lucide-loader-circle',
+  in_progress: undefined,
   pending: 'i-lucide-circle',
 }
 </script>
@@ -302,10 +304,7 @@ const ITEM_ICON: Record<string, string> = {
         data-testid="bootstrap-progress"
       >
         <div class="flex items-center gap-1.5 text-xs">
-          <UIcon
-            name="i-lucide-loader-circle"
-            class="h-4 w-4 shrink-0 animate-spin text-app-warning-400"
-          />
+          <Spinner class="h-4 w-4 shrink-0 text-app-warning-400" />
           <span class="text-app-warning-300">{{ t('board.frame.bootstrappingRepository') }}</span>
           <span v-if="bootstrapSubtasks" class="ms-auto text-app-warning-200/80">
             {{
@@ -336,13 +335,17 @@ const ITEM_ICON: Record<string, string> = {
                   : 'text-app-warning-200/80'
             "
           >
-            <UIcon
+            <Spinner
               :name="ITEM_ICON[item.status]"
+              :spinning="item.status === 'in_progress'"
               class="mt-px h-3 w-3 shrink-0"
-              :class="[
-                item.status === 'in_progress' ? 'animate-spin text-app-warning-400' : '',
-                item.status === 'completed' ? 'text-app-success-400' : 'text-app-warning-400/70',
-              ]"
+              :class="
+                item.status === 'in_progress'
+                  ? 'text-app-warning-400'
+                  : item.status === 'completed'
+                    ? 'text-app-success-400'
+                    : 'text-app-warning-400/70'
+              "
             />
             <span>{{ item.label }}</span>
           </li>

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

@@ -18,6 +18,7 @@
 // renders now. An initiative is still a first-class board block with its own inspector.
 import type { InitiativeStatus } from '~/types/domain'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
+import Spinner from '~/components/common/Spinner.vue'
 import {
   INITIATIVE_ATTENTION_ICONS,
   INITIATIVE_ATTENTION_LABEL_KEYS,
@@ -120,17 +121,19 @@ function select() {
         >
           {{ t('initiative.inspector.answerPlanning') }}
         </UButton>
-        <!-- Mid-pass: nothing to answer, but keep the route into the window (it shows the wait). -->
+        <!-- Mid-pass: nothing to answer, but keep the route into the window (it shows the wait).
+             A spinner in the leading slot, not `:loading`, which would disable the button. -->
         <UButton
           v-else-if="interviewing"
           data-testid="initiative-card-planning-in-progress"
           size="xs"
           variant="soft"
           color="neutral"
-          icon="i-lucide-loader-circle"
-          :ui="{ leadingIcon: 'animate-spin' }"
           @click.stop="openPlanning"
         >
+          <template #leading>
+            <Spinner class="size-4 shrink-0" />
+          </template>
           {{ t('initiative.inspector.planningInProgress') }}
         </UButton>
         <UButton

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -15,7 +15,7 @@ const props = defineProps<{ job: BootstrapJob }>()
 const emit = defineEmits<{ close: [] }>()
 
 const agentRuns = useAgentRunsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -146,13 +146,10 @@ async function submit() {
       })),
       ...(overallNotes.value.trim() ? { notes: overallNotes.value.trim() } : {}),
     })
-    toast.add({
-      title: t('bootstrap.adoption.toast.approved'),
+    actionToast.success('bootstrap.adoption.toast.approved', {
       description: t('bootstrap.adoption.toast.approvedDesc', {
         directory: props.job.monorepo?.directory ?? '',
       }),
-      icon: 'i-lucide-check',
-      color: 'success',
     })
     open.value = false
     emit('close')

package/app/components/bootstrap/BootstrapModal.vue

@@ -29,8 +29,8 @@ const bootstrap = useBootstrapStore()
 const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
 const board = useBoardStore()
-const toast = useToast()
-const { present } = usePipelineErrorToast()
+const actionToast = useActionToast()
+const { present, presentReported } = usePipelineErrorToast()
 const { freeFramePosition, focusFrame } = useFramePlacement()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -367,11 +367,8 @@ async function openCreateRepo() {
       private: isPrivate.value,
       description: description.value.trim() || undefined,
     })
-    toast.add({
-      title: t('bootstrap.toast.repoCreated'),
+    actionToast.success('bootstrap.toast.repoCreated', {
       description: `${repo.owner}/${repo.name}`,
-      icon: 'i-lucide-check',
-      color: 'success',
     })
   } catch (e) {
     present(e, 'bootstrap.toast.repoCreateFailed')
@@ -426,26 +423,20 @@ async function launch() {
     if (job.status === 'failed') {
       // The container couldn't even start (pre-flight failure, e.g. the target
       // repo isn't empty) — surfaced synchronously, before any board frame.
-      toast.add({
-        title: t('bootstrap.toast.failed'),
-        description: job.error ?? t('bootstrap.toast.failedFallback'),
-        icon: 'i-lucide-triangle-alert',
-        color: 'error',
+      presentReported(job.error, 'bootstrap.toast.failed', {
+        descriptionKey: 'bootstrap.toast.failedFallback',
       })
     } else {
       // Running: the container is spinning up. A provisional service card now
       // shows on the board and tracks live progress; the run continues in the
       // background and becomes a real, droppable service when it finishes.
-      toast.add({
-        title: t('bootstrap.toast.started'),
+      actionToast.info('bootstrap.toast.started', {
         // A monorepo run does not run straight through: it surveys, then waits for the
         // reviewer. Saying "bootstrapping…" there would set the wrong expectation about who
         // the next move belongs to.
         description: job.monorepo
           ? t('bootstrap.toast.startedMonorepoDesc', { directory: job.monorepo.directory })
           : t('bootstrap.toast.startedDesc', { repo: job.repoName }),
-        icon: 'i-lucide-loader-circle',
-        color: 'info',
       })
       repoName.value = ''
       description.value = ''

package/app/components/bootstrap/BootstrapRunSteps.vue

@@ -12,6 +12,7 @@
 // are one rule, not two. How a state RENDERS is `BOOTSTRAP_STEP_STYLE`, beside the vocabulary
 // it is keyed by.
 import type { BootstrapStepId, BootstrapStepState } from '@cat-factory/contracts'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{ runId: string }>()
 
@@ -38,8 +39,9 @@ function stateLabel(state: BootstrapStepState): string {
       :data-step="step.id"
       :data-state="step.state"
     >
-      <UIcon
+      <Spinner
         :name="BOOTSTRAP_STEP_STYLE[step.state].icon"
+        :spinning="BOOTSTRAP_STEP_STYLE[step.state].spin"
         class="mt-px h-3 w-3 shrink-0"
         :class="BOOTSTRAP_STEP_STYLE[step.state].iconClass"
       />