@cat-factory/app 0.311.2 → 0.312.0

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

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { defaultBuildPipelineId } from '@cat-factory/contracts'
 import type { Block } from '~/types/domain'
 import { STATUS_META, MODULE_META, taskTypeMeta } from '~/utils/catalog'
-import { composeRunOutcome, hasOutcomeToShow } from '~/utils/runOutcome'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import TaskPipelineMini from './TaskPipelineMini.vue'
 import IconButton from '~/components/common/IconButton.vue'
@@ -10,16 +8,28 @@ import IconButton from '~/components/common/IconButton.vue'
 const props = defineProps<{ taskId: string }>()
 
 const board = useBoardStore()
-const execution = useExecutionStore()
-const pipelines = usePipelinesStore()
 const ui = useUiStore()
 const agentRuns = useAgentRunsStore()
-const reviews = useReviewStage()
-const toast = useToast()
 const { t } = useI18n()
-const { confirm } = useConfirm()
 
-const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
+// What the card offers a human to do, shared with the queue's card (see `useTaskActions`).
+const {
+  task,
+  sandboxed,
+  unmet,
+  runnable,
+  canExecute,
+  executeDeniedTitle,
+  defaultPipeline,
+  outcomeReadable,
+  openOutcome,
+  starting,
+  start: run,
+  merge,
+  reviewStage,
+  reviewStageLabel,
+  attention,
+} = useTaskActions(() => props.taskId)
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
 
 // A type badge for any NON-default task type — built-in (bug/document/spike/review/ralph) or a
@@ -39,13 +49,6 @@ const typeBadge = computed(() => {
 })
 const selected = computed(() => ui.selectedBlockId === props.taskId)
 
-// This card's Start is a ONE-TAP live start, so it has nothing to ask for and offers no dry-run
-// request. What it does owe the reader is the half that is not a choice: a preset that sandboxes
-// their role means this button opens a pull request and merges nothing, and a card that said so
-// only after the fact would leave that to be discovered from a run that stops at the merge.
-const { forcedFor } = useDryRunPolicy()
-const sandboxed = computed(() => forcedFor(props.taskId))
-
 // Drag-to-connect: dragging from this card's handle onto another task makes THAT task
 // depend on this one (this is the prerequisite). The composable tracks the gesture.
 const { start: startConnect } = useDependencyConnect()
@@ -56,84 +59,28 @@ const deps = computed(() =>
 )
 const uiMode = useUiModeStore()
 
-/** Deps that haven't merged yet — these block this task from running. */
-const unmet = computed(() => board.unmetDeps(props.taskId))
-const runnable = computed(() => board.isRunnable(props.taskId))
-
 /** Label a dependency, noting its frame when it lives in another one. */
 const { depLabel: labelDep } = useDepLabels()
 const depLabel = (dep: Block) => labelDep(dep, task.value?.parentId)
 
-/**
- * The pipeline a plain "Start" will use: the task's pinned pipeline, else the build rung this
- * INTERFACE MODE defaults to (`defaultBuildPipelineId` — the fixed Standard build in basic mode,
- * the Adaptive one in advanced). The workspace's positional first pipeline remains the last
- * resort, for a board whose catalog does not carry the rung (an older seed, or a deployment that
- * retired it).
- *
- * A PIN is honoured even when the library holds no row for it, and that branch is the whole reason
- * this returns a descriptor rather than a `Pipeline`. An INTERNAL pipeline is withheld from the
- * library on purpose (the platform starts it on its own behalf, so no picker may offer it), and a
- * task can legitimately be pinned to one — the docs-refresh preset spawns its tasks onto
- * `pl_code_comments`. Resolving that pin through the library alone answers undefined, and the
- * fallback below then starts a FULL BUILD on a comment-only task while the button still reads as
- * an ordinary Start. The fallback chain exists for a task with NO pin; a pin the library cannot
- * show is still the task's answer, and the backend resolves the id for the run.
- */
-const defaultPipeline = computed<{ id: string; name: string } | undefined>(() => {
-  const pinnedId = task.value?.pipelineId
-  if (pinnedId) {
-    return (
-      pipelines.getPipeline(pinnedId) ?? {
-        id: pinnedId,
-        // The catalog NAME map spans the whole catalog (unlike the versions map), so an internal
-        // pin still names itself here; the generic label covers a pin to something this build's
-        // catalog does not know at all.
-        name: pipelines.catalogNames[pinnedId] ?? t('board.task.pipelineFallback'),
-      }
-    )
-  }
-  // No pin: the workspace's own DECLARED in-app default outranks the interface-mode rung, because
-  // an operator who named one said something a tier cannot overrule.
-  const declared = pipelines.declaredDefaultId('interactive')
-  return (
-    pipelines.getPipeline(declared ?? defaultBuildPipelineId(uiMode.isAdvanced)) ??
-    pipelines.pipelines[0]
-  )
-})
-
 /** The PR the implementer agent opened for this task, if any. */
 const pr = computed(() => task.value?.pullRequest)
 const prLabel = computed(() =>
   pr.value?.number ? t('board.task.prNumber', { number: pr.value.number }) : t('board.task.pr'),
 )
 
-/**
- * Reading the result starts at the OUTCOME summary (what changed in product terms, with the
- * captured evidence), and the pull request is one click inside it. In BASIC mode that replaces
- * the card's raw PR chip: the diff is still exactly as reachable, through a surface that says
- * what the diff is about first. Advanced mode keeps both, since a reader who wants the diff
- * directly is the reader that tier is for.
- *
- * Offered only where there is something to read, asked of the SAME reduction the window renders
- * and the inspector's button gates on: a card that offered "read the result" on a task whose
- * every section says "nothing here" would teach people the surface is empty. A task marked done
- * by hand, with no pull request and no run, is that task.
- */
 const laneView = useLaneViewStore()
-const outcomeReadable = computed(() => {
-  const block = task.value
-  if (!block) return false
-  return hasOutcomeToShow(
-    composeRunOutcome({ block, instance: execution.getInstance(block.executionId) ?? null }),
-  )
-})
 /**
- * The card's raw pull-request chip, which basic mode drops in favour of the outcome card
- * carrying the same link at the top. Written as the INVARIANT ("the diff never stops being
- * reachable from this card") rather than as `isAdvanced` alone, so the tier can only ever
- * reorder two routes and never remove the last one: where the outcome card is not offered,
- * the chip stays in both tiers.
+ * The card's raw pull-request chip. Reading the result starts at the OUTCOME summary (what changed
+ * in product terms, with the captured evidence), and the pull request is one click inside it, so
+ * BASIC mode drops the chip in favour of the outcome card carrying the same link at the top: the
+ * diff is still exactly as reachable, through a surface that says what the diff is about first.
+ * Advanced mode keeps both, since a reader who wants the diff directly is the reader that tier is
+ * for.
+ *
+ * Written as the INVARIANT ("the diff never stops being reachable from this card") rather than as
+ * `isAdvanced` alone, so the tier can only ever reorder two routes and never remove the last one:
+ * where the outcome card is not offered, the chip stays in both tiers.
  */
 const showPrChip = computed(
   () => Boolean(pr.value) && (uiMode.isAdvanced || !outcomeReadable.value),
@@ -149,10 +96,6 @@ const showPrChip = computed(
 const showModuleChip = computed(
   () => Boolean(task.value?.moduleName) && laneView.groupKey !== 'module',
 )
-function openOutcome() {
-  ui.openOutcome(props.taskId, task.value?.executionId ?? null)
-}
-
 // This task's current agent run (if any). A failed run must surface the shared
 // failure banner + retry — NOT a stuck progress bar — so the card never looks
 // like it's still working after the run has terminated.
@@ -164,129 +107,6 @@ const runFailed = computed(() => agentRun.value?.status === 'failed')
 const recurring = useRecurringPipelinesStore()
 const schedule = computed(() => recurring.byBlock(props.taskId))
 
-// Optimistic "Start": flip the button into a spinning "Starting…" state the
-// instant it's clicked, before the server confirms. The button naturally
-// unmounts once the stream pushes the block into `in_progress`; if the start
-// call faults we revert and surface a toast.
-const starting = ref(false)
-
-async function run() {
-  if (!runnable.value) {
-    toast.add({
-      title: t('board.task.blockedByDependenciesTitle'),
-      description: t('board.task.waitingOn', { deps: unmet.value.map((d) => d.title).join(', ') }),
-      icon: 'i-lucide-lock',
-    })
-    return
-  }
-  const pipeline = defaultPipeline.value
-  if (!pipeline) {
-    toast.add({
-      title: t('board.task.noPipelineTitle'),
-      description: t('board.task.noPipelineBody'),
-    })
-    return
-  }
-  starting.value = true
-  // false ⇒ the run never started (the user cancelled the personal-password prompt, or
-  // the start was refused — the store surfaces the actionable toast itself). Revert the
-  // optimistic state; on success the button unmounts once the stream pushes in_progress.
-  const started = await execution.start(props.taskId, pipeline)
-  if (started) {
-    // Confirm the (optimistic) start landed — the button unmounts once the stream pushes
-    // in_progress, so without this the successful action gives no feedback. A sandboxed start
-    // says so here rather than borrowing the live wording: this is the moment the reader learns
-    // what they just started, and the two runs differ in what they will end up doing.
-    toast.add({
-      title: sandboxed.value ? t('board.dryRunToast.title') : t('board.task.startedToast.title'),
-      description: sandboxed.value
-        ? t('board.dryRunToast.body', { name: pipeline.name })
-        : t('board.task.startedToast.body', { name: pipeline.name }),
-      color: sandboxed.value ? 'warning' : 'success',
-      icon: sandboxed.value ? 'i-lucide-shield' : 'i-lucide-play',
-    })
-  } else {
-    starting.value = false
-  }
-}
-
-function review() {
-  ui.select(props.taskId)
-  ui.focus(props.taskId)
-}
-
-async function merge() {
-  // Merging a PR into its base is consequential and effectively irreversible — gate it behind a
-  // confirm (plain, not the destructive shape). `execution.mergePr` surfaces its own error toast.
-  const ok = await confirm({
-    title: t('board.task.mergeConfirm.title'),
-    description: t('board.task.mergeConfirm.body'),
-    confirmLabel: t('board.task.mergeConfirm.confirm'),
-    icon: 'i-lucide-git-merge',
-  })
-  if (!ok) return
-  await execution.mergePr(props.taskId)
-}
-
-// A `blocked` task is waiting on a human for one of two reasons — an agent-raised
-// decision OR an approval gate — and both must surface here (a failed run is shown
-// separately by the AgentFailureCard above). The board previously only handled
-// decisions, so an approval-gated task was a dead end: it read "Decision needed"
-// (the old generic `blocked` label) with no badge and a click that did nothing.
-// Read off the per-block index rather than scanning the workspace-wide list: this computed is
-// mounted once per card and invalidated by every execution event, so a `find` over `openDecisions`
-// cost O(cards x open gates) per event. `decisionsByBlock` is the index built for exactly this.
-const pendingDecision = computed(() => execution.decisionsByBlock.get(props.taskId)?.[0])
-// The async stage an iterative reviewer gate (requirements-review / clarity-review) is
-// mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate
-// needs NO human action, so its approval is suppressed below and a working indicator
-// shows instead.
-const reviewStage = computed(() => reviews.stageForBlock(props.taskId))
-const reviewStageLabel = computed(() =>
-  reviewStage.value === 'incorporating'
-    ? t('board.task.incorporatingAnswers')
-    : reviewStage.value === 'reviewing'
-      ? t('board.task.reReviewing')
-      : reviewStage.value === 'recommending'
-        ? t('board.task.recommending')
-        : null,
-)
-const pendingApproval = computed(() => {
-  const a = execution.approvalsByBlock.get(props.taskId)?.[0]
-  // A reviewer gate whose review is incorporating / re-reviewing in the driver is doing
-  // background work, not awaiting a human — don't surface it as "Approval needed".
-  if (a && reviews.isBackground(a.agentKind, props.taskId)) return undefined
-  return a
-})
-
-/** What this blocked task actually needs from a human — drives the card's label,
- * pulse and action. Decision takes precedence over approval (a step never holds
- * both at once; this is just a stable order). Null when nothing is pending. */
-const attention = computed<{
-  label: string
-  icon: string
-  action: string
-  open: () => void
-} | null>(() => {
-  const d = pendingDecision.value
-  if (d)
-    return {
-      label: t('board.task.decisionNeeded'),
-      icon: 'i-lucide-circle-help',
-      action: t('board.task.resolve'),
-      open: () => ui.openDecision(d.instanceId, d.decision.id),
-    }
-  const a = pendingApproval.value
-  if (a)
-    return {
-      label: t('board.task.approvalNeeded'),
-      icon: 'i-lucide-shield-check',
-      action: t('board.task.approve'),
-      open: () => ui.openApprovalDetail(a.instanceId, a.approval.id),
-    }
-  return null
-})
-
 /** Specific header copy: a failed run reads "Failed", a parked task reads its
  * decision/approval reason, otherwise the generic status label. */
 const statusText = computed(() =>
@@ -295,6 +115,11 @@ const statusText = computed(() =>
     : (reviewStageLabel.value ?? attention.value?.label ?? statusMeta.value?.label ?? ''),
 )
 
+function review() {
+  ui.select(props.taskId)
+  ui.focus(props.taskId)
+}
+
 // Clicking the card body only selects the task (opening the inspector so the human can
 // interact with it). Whatever the task is parked on — a decision, an approval, or the
 // requirements review — is opened explicitly via the action button below, never by a
@@ -461,10 +286,11 @@ function selectTask() {
           size="xs"
           :icon="!runnable ? 'i-lucide-lock' : sandboxed ? 'i-lucide-shield' : 'i-lucide-play'"
           :loading="starting"
-          :disabled="!runnable || starting"
+          :disabled="!runnable || starting || !canExecute"
           data-testid="task-start"
           :title="
-            !runnable
+            executeDeniedTitle ??
+            (!runnable
               ? t('board.task.waitingOn', { deps: unmet.map((d) => d.title).join(', ') })
               : sandboxed
                 ? t('board.task.startPipelineDryRun', {
@@ -472,7 +298,7 @@ function selectTask() {
                   })
                 : t('board.task.startPipeline', {
                     name: defaultPipeline?.name ?? t('board.task.pipelineFallback'),
-                  })
+                  }))
           "
           @click.stop="run"
         >
@@ -529,7 +355,14 @@ function selectTask() {
         >
           {{ t('board.task.review') }}
         </UButton>
-        <UButton color="success" size="xs" icon="i-lucide-git-merge" @click.stop="merge">
+        <UButton
+          color="success"
+          size="xs"
+          icon="i-lucide-git-merge"
+          :disabled="!canExecute"
+          :title="executeDeniedTitle"
+          @click.stop="merge"
+        >
           {{ t('board.task.merge') }}
         </UButton>
       </template>

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"
       />

package/app/components/brainstorm/BrainstormWindow.vue

@@ -20,10 +20,12 @@ import type {
   ReviewItemStatus,
 } from '~/types/brainstorm'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const brainstorm = useBrainstormStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const access = useWorkspaceAccess()
@@ -194,10 +196,9 @@ async function incorporate(feedback?: string) {
   }
   redoComment.value = ''
   showRedo.value = false
-  toast.add({
-    title: t('brainstorm.toast.draftingTitle', { doc: docNoun.value }),
+  actionToast.info('brainstorm.toast.draftingTitle', {
+    params: { doc: docNoun.value },
     description: t('brainstorm.toast.draftingDescription'),
-    icon: 'i-lucide-wand-sparkles',
   })
   close()
 }
@@ -207,15 +208,16 @@ async function reReview() {
   try {
     const updated = await brainstorm.reReview(blockId.value, activeStage.value)
     const newCount = brainstorm.openCount(updated)
-    toast.add({
-      title:
-        updated.status === 'incorporated'
-          ? t('brainstorm.toast.reReviewSettled')
-          : updated.status === 'exceeded'
-            ? t('brainstorm.toast.reReviewExceeded')
-            : t('brainstorm.toast.reReviewNewOptions', { count: newCount }, newCount),
-      icon: 'i-lucide-sparkles',
-    })
+    if (updated.status === 'incorporated') {
+      actionToast.success('brainstorm.toast.reReviewSettled')
+    } else if (updated.status === 'exceeded') {
+      actionToast.warning('brainstorm.toast.reReviewExceeded')
+    } else {
+      actionToast.info('brainstorm.toast.reReviewNewOptions', {
+        params: { count: newCount },
+        plural: newCount,
+      })
+    }
   } catch (e) {
     present(e, 'brainstorm.toast.reReviewError')
   }
@@ -226,7 +228,7 @@ async function proceed() {
   acting.value = true
   try {
     await brainstorm.proceed(blockId.value, activeStage.value)
-    toast.add({ title: t('brainstorm.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+    actionToast.info('brainstorm.toast.proceeding')
   } catch (e) {
     present(e, 'brainstorm.toast.proceedError')
   } finally {
@@ -240,12 +242,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   try {
     await brainstorm.resolveExceeded(blockId.value, activeStage.value, choice)
     if (choice === 'stop-reset') {
-      toast.add({ title: t('brainstorm.toast.taskReset'), icon: 'i-lucide-undo' })
+      actionToast.info('brainstorm.toast.taskReset')
       close()
     } else if (choice === 'proceed') {
-      toast.add({ title: t('brainstorm.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+      actionToast.info('brainstorm.toast.proceeding')
     } else {
-      toast.add({ title: t('brainstorm.toast.extraRoundGranted'), icon: 'i-lucide-rotate-cw' })
+      actionToast.info('brainstorm.toast.extraRoundGranted')
     }
   } catch (e) {
     present(e, 'brainstorm.toast.resolveError')
@@ -291,20 +293,24 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
         </p>
 
         <!-- empty state -->
-        <div
+        <EmptyState
           v-if="!session && !busy && !loading"
-          class="rounded-lg border border-dashed border-muted p-8 text-center text-sm text-dimmed"
-        >
-          {{ t('brainstorm.empty') }}
+          icon="i-lucide-lightbulb"
+          :title="t('brainstorm.empty')"
+        />
+
+        <!-- initial fetch on open -->
+        <div v-else-if="loading && !busy && !session" class="flex flex-col gap-3">
+          <USkeleton v-for="n in 3" :key="n" class="h-20 w-full rounded-lg" />
         </div>
 
-        <!-- working state (initial fetch on open, or an agent pass running) -->
+        <!-- an agent pass running -->
         <div
-          v-else-if="(busy || loading) && !session"
+          v-else-if="busy && !session"
           class="flex items-center justify-center gap-2 p-8 text-sm text-muted"
         >
-          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-          {{ loading && !busy ? t('brainstorm.loading') : t('brainstorm.generating') }}
+          <Spinner class="h-4 w-4" />
+          {{ t('brainstorm.generating') }}
         </div>
 
         <template v-else-if="session">
@@ -332,7 +338,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             v-else-if="working"
             class="mb-4 flex items-center gap-2 rounded-lg border border-app-warning-900/60 bg-app-warning-950/30 p-4 text-sm text-app-warning-200"
           >
-            <UIcon name="i-lucide-loader-circle" class="h-5 w-5 shrink-0 animate-spin" />
+            <Spinner class="h-5 w-5 shrink-0" />
             <span v-if="incorporating">
               {{ t('brainstorm.working.incorporating', { doc: docNoun }) }}
             </span>

package/app/components/bugFishing/BugFishingWindow.vue

@@ -29,6 +29,8 @@ 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'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -304,11 +306,12 @@ const PHASE_ICON: Record<string, string> = {
                 :data-testid="`bug-fishing-phase-${phase.id}`"
                 @click="selectedPassKey = passKey(phase)"
               >
-                <UIcon
+                <Spinner
                   :name="PHASE_ICON[phase.status] ?? 'i-lucide-circle-dashed'"
+                  :spinning="phase.status === 'fishing'"
                   class="mt-0.5 h-3.5 w-3.5 shrink-0"
                   :class="{
-                    'animate-spin text-app-info-300': phase.status === 'fishing',
+                    'text-app-info-300': phase.status === 'fishing',
                     'text-app-success-400': phase.status === 'completed',
                     'text-app-warning-400': phase.status === 'failed',
                     'text-app-600': phase.status === 'pending',
@@ -379,7 +382,7 @@ const PHASE_ICON: Record<string, string> = {
           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-xs text-app-info-200"
         >
-          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
+          <Spinner class="h-4 w-4 shrink-0" />
           <span>
             {{
               t('bugFishing.stillFishing', {
@@ -459,20 +462,19 @@ const PHASE_ICON: Record<string, string> = {
           {{ bugFishing.error }}
         </p>
 
-        <!-- An expedition that caught nothing is a real answer, not an empty state. The copy
-             says which of the two it is, because "nothing found" and "nothing left to triage"
-             are different things to be told. -->
-        <div
+        <!-- An expedition that caught nothing is a real answer. The copy says which of the two it
+             is, because "nothing found" and "nothing left to triage" are different things to be
+             told. -->
+        <EmptyState
           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-xs text-muted"
-        >
-          {{
+          :icon="findings.length === 0 ? 'i-lucide-fish' : 'i-lucide-check-check'"
+          :title="
             findings.length === 0
               ? t('bugFishing.empty.nothingCaught')
               : t('bugFishing.empty.allTriaged')
-          }}
-        </div>
+          "
+        />
 
         <ul v-else class="space-y-2">
           <li
@@ -591,7 +593,7 @@ const PHASE_ICON: Record<string, string> = {
               data-testid="bug-fishing-finding-spawning"
               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" />
+              <Spinner class="h-3.5 w-3.5" />
               <span>{{ t('bugFishing.finding.spawning') }}</span>
             </div>