@cat-factory/app 0.311.2 → 0.312.0

package/app/components/queue/QueueCard.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { agentKindMeta } from '~/utils/catalog'
+import { formatDuration, useNowTick } from '~/composables/useStepTimer'
+import { useFramePlacement } from '~/composables/useFramePlacement'
+import { LANE_REASON_LABEL_KEYS } from '~/utils/swimlanes'
+import type { QueueEntry } from '~/utils/queueSections'
+import IconButton from '~/components/common/IconButton.vue'
+import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+
+/**
+ * One task in the queue: why it is here, where it lives, and the ONE thing to do about it.
+ *
+ * The board's card answers "what is this task's state"; this card answers "what do I do next",
+ * so it carries a single primary action derived from the lane REASON, and the inspector one
+ * click away for everything else. The actions themselves are the board card's
+ * (`useTaskActions`), so Start, Resolve and Merge behave identically on both surfaces, and a failed
+ * run shows the same `AgentFailureCard` the board card shows, with its Retry.
+ *
+ * Every action is `soft`, as on the board card: the queue lists many cards at once, and a solid
+ * button on each would put many primaries in one view.
+ */
+const props = defineProps<{ entry: QueueEntry }>()
+
+const { t } = useI18n()
+const ui = useUiStore()
+const execution = useExecutionStore()
+const agentRuns = useAgentRunsStore()
+const views = useWorkViewStore()
+const { focusFrame } = useFramePlacement()
+// A shared 30s clock, so "waited 4m" advances on a quiet board instead of freezing until some
+// unrelated event re-evaluates the card.
+const nowTick = useNowTick(30_000)
+
+const taskId = () => props.entry.task.id
+const {
+  task,
+  runnable,
+  canExecute,
+  executeDeniedTitle,
+  unmet,
+  sandboxed,
+  outcomeReadable,
+  openOutcome,
+  starting,
+  start,
+  merge,
+  pendingDecision,
+  reviewStageLabel,
+  attention,
+} = useTaskActions(taskId)
+
+const reason = computed(() => props.entry.reason)
+const run = computed(() => execution.getByBlock(props.entry.task.id) ?? null)
+const agentRun = computed(() => agentRuns.byBlock[props.entry.task.id])
+const runFailed = computed(() => agentRun.value?.status === 'failed')
+
+/** The eyebrow's time fact: how long a human has kept it waiting, or how fresh the run is. */
+const timeFact = computed(() => {
+  const now = nowTick.value
+  // The clock reads 0 until the card has mounted and subscribed.
+  if (!now) return null
+  const e = props.entry
+  if (reason.value === 'merged' && e.task.completedAt != null)
+    return t('queue.card.merged', { duration: formatDuration(now - e.task.completedAt) })
+  if (e.waitingSince != null)
+    return t('queue.card.waited', { duration: formatDuration(now - e.waitingSince) })
+  if ((reason.value === 'running' || reason.value === 'background_review') && e.activityAt != null)
+    return t('queue.card.active', { duration: formatDuration(now - e.activityAt) })
+  return null
+})
+
+/** The step a live run is on, as "step 5 of 9 · Coder". Null when no run is in flight. */
+const stepFact = computed(() => {
+  const r = run.value
+  if (!r || r.steps.length === 0) return null
+  const step = r.steps[r.currentStep]
+  const position = t('queue.card.step', {
+    current: Math.min(r.currentStep + 1, r.steps.length),
+    total: r.steps.length,
+  })
+  return step ? `${position} · ${agentKindMeta(step.agentKind).label}` : position
+})
+
+/** One line of context: what the human would want to know before pressing the button. */
+const context = computed<string | null>(() => {
+  switch (reason.value) {
+    case 'decision':
+      return pendingDecision.value?.decision.question ?? null
+    case 'budget_paused':
+      return t('queue.card.budgetPaused')
+    case 'parked':
+    case 'unclassified':
+      return t('queue.card.parked')
+    case 'dependencies':
+      return t('queue.card.waitingOn', { deps: unmet.value.map((d) => d.title).join(', ') })
+    case 'background_review':
+      return reviewStageLabel.value
+    default:
+      return null
+  }
+})
+
+/**
+ * The eyebrow's first word. The lane reason, except in the merge column, whose header already says
+ * "ready to merge": there the pull request's own number is the more useful fact.
+ */
+const eyebrow = computed(() => {
+  const pr = props.entry.task.pullRequest
+  if (reason.value === 'pr_awaiting_merge' && pr?.number)
+    return t('queue.card.pr', { number: pr.number })
+  return t(LANE_REASON_LABEL_KEYS[reason.value])
+})
+
+const showProgress = computed(
+  () => reason.value === 'running' || reason.value === 'background_review',
+)
+
+/** The inspector is showing this card's task. Its border wins over the hover one. */
+const selected = computed(() => ui.selectedBlockId === props.entry.task.id)
+
+function openTask() {
+  ui.select(props.entry.task.id)
+}
+
+/**
+ * Leave the queue for the canvas, with this task selected and its service in view. The canvas
+ * kept its own camera while the queue covered it, so without the pan the task is usually off
+ * screen. A task has no position of its own (it lives in its frame's swimlanes), so the camera
+ * centres on the frame.
+ */
+function showOnBoard() {
+  views.show('board')
+  ui.select(props.entry.task.id)
+  void focusFrame(props.entry.service?.id ?? props.entry.task.id)
+}
+</script>
+
+<template>
+  <!-- The whole card opens the task, as the board's card does: a click anywhere on it selects
+       the task, and each control inside stops its own click. The title stays a button, so the
+       card is reachable by keyboard. -->
+  <article
+    v-if="task"
+    class="rounded-lg border bg-default p-3 transition-colors"
+    :class="selected ? 'border-inverted' : 'border-muted hover:border-accented'"
+    @click="openTask"
+    data-testid="queue-card"
+    :data-queue-task="task.id"
+    :data-reason="reason"
+  >
+    <div class="flex items-center gap-1.5 text-3xs uppercase tracking-wide text-dimmed">
+      <span
+        class="shrink-0 font-semibold whitespace-nowrap"
+        :class="
+          reason === 'failed'
+            ? 'text-error'
+            : entry.reason === 'pr_awaiting_merge'
+              ? 'text-success'
+              : 'text-highlighted'
+        "
+      >
+        {{ eyebrow }}
+      </span>
+      <span v-if="entry.service" class="min-w-0 truncate">· {{ entry.service.title }}</span>
+      <span v-if="timeFact" class="shrink-0 whitespace-nowrap">· {{ timeFact }}</span>
+      <IconButton
+        class="ms-auto shrink-0"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-map"
+        :label="t('queue.card.showOnBoard')"
+        @click.stop="showOnBoard"
+      />
+    </div>
+
+    <!-- The card's keyboard target: Enter on it opens the task, as a click on the card does. -->
+    <UButton
+      color="neutral"
+      variant="link"
+      class="mt-1 w-full p-0 text-start text-sm font-semibold leading-snug text-highlighted"
+      data-testid="queue-card-title"
+      @click.stop="openTask"
+    >
+      {{ task.title }}
+    </UButton>
+
+    <p v-if="context" class="mt-1 line-clamp-2 text-xs text-muted" :title="context">
+      {{ context }}
+    </p>
+
+    <!-- A failed run: the same failure banner and Retry the board card shows. -->
+    <AgentFailureCard
+      v-if="reason === 'failed' && runFailed && agentRun"
+      :run="agentRun"
+      variant="compact"
+      class="mt-2"
+    />
+
+    <div v-if="showProgress" class="mt-2 space-y-1">
+      <UProgress :model-value="Math.round(task.progress * 100)" size="xs" />
+      <p v-if="stepFact" class="text-2xs text-dimmed">{{ stepFact }}</p>
+    </div>
+
+    <div class="mt-3 flex flex-wrap items-center gap-2 empty:hidden">
+      <!-- Parked on a decision or an approval: the gate itself, one click away. -->
+      <UButton
+        v-if="attention"
+        color="warning"
+        variant="soft"
+        size="xs"
+        :icon="attention.icon"
+        data-testid="queue-card-primary"
+        @click.stop="attention.open()"
+      >
+        {{ reason === 'decision' ? t('queue.card.answer') : attention.action }}
+      </UButton>
+
+      <template v-else-if="reason === 'pr_awaiting_merge'">
+        <UButton
+          v-if="outcomeReadable"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-clipboard-check"
+          data-testid="queue-card-primary"
+          @click.stop="openOutcome"
+        >
+          {{ t('board.task.readOutcome') }}
+        </UButton>
+        <UButton
+          color="success"
+          :variant="outcomeReadable ? 'outline' : 'soft'"
+          size="xs"
+          icon="i-lucide-git-merge"
+          :disabled="!canExecute"
+          :title="executeDeniedTitle"
+          @click.stop="merge"
+        >
+          {{ t('board.task.merge') }}
+        </UButton>
+      </template>
+
+      <UButton
+        v-else-if="reason === 'unstarted'"
+        variant="soft"
+        size="xs"
+        :icon="sandboxed ? 'i-lucide-shield' : 'i-lucide-play'"
+        :loading="starting"
+        :disabled="!runnable || starting || !canExecute"
+        :title="executeDeniedTitle"
+        data-testid="queue-card-primary"
+        @click.stop="start"
+      >
+        {{ starting ? t('board.task.starting') : t('board.task.start') }}
+      </UButton>
+
+      <UButton
+        v-else-if="reason === 'merged' && outcomeReadable"
+        size="xs"
+        variant="soft"
+        icon="i-lucide-clipboard-check"
+        data-testid="queue-card-primary"
+        @click.stop="openOutcome"
+      >
+        {{ t('board.task.readOutcome') }}
+      </UButton>
+    </div>
+  </article>
+</template>

package/app/components/queue/QueueView.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { QueueEntry } from '~/utils/queueSections'
+import QueueCard from '~/components/queue/QueueCard.vue'
+import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
+/**
+ * The queue: every task across every service, in the column that says what it needs. One of the
+ * board's two views (issue #2258); the canvas is the other.
+ *
+ * Three columns, read left to right in order of urgency: what is stalled on you, what agents are
+ * doing, what is finished and waiting to land. Work nobody has started sits under "In flight" as
+ * a short list, and recent merges sit under "Ready to merge" behind a count, because neither is
+ * what a person opening the app came to act on first. The canvas stays one click away as the
+ * planning view.
+ */
+const { t, d } = useI18n()
+const workspaceSettings = useWorkspaceSettingsStore()
+const ui = useUiStore()
+const board = useBoardStore()
+
+/**
+ * Where the Done window starts: the workspace's Done-lane retention, the same one each frame's
+ * Done lane applies. Stated as a date, so no sentence has to agree with a number of days. Null
+ * when the workspace keeps no age cap.
+ */
+const doneSince = computed(() => {
+  const days = workspaceSettings.settings.doneLaneRetentionDays
+  return days == null ? null : new Date(Date.now() - days * 86_400_000)
+})
+const queueStore = useWorkspaceQueueStore()
+
+const sections = computed(() => queueStore.queue.sections)
+const doneOpen = ref(false)
+
+const serviceItems = computed(() => [
+  { label: t('queue.filter.allServices'), value: '__all__' },
+  ...queueStore.services.map((s) => ({ label: s.title, value: s.id })),
+])
+const serviceValue = computed({
+  get: () => queueStore.serviceFilter ?? '__all__',
+  set: (v: string) => (queueStore.serviceFilter = v === '__all__' ? null : v),
+})
+
+interface Column {
+  id: 'needs_you' | 'in_flight' | 'ready_to_merge'
+  icon: string
+  entries: QueueEntry[]
+}
+const columns = computed<Column[]>(() => [
+  { id: 'needs_you', icon: 'i-lucide-hand', entries: sections.value.needs_you },
+  { id: 'in_flight', icon: 'i-lucide-loader', entries: sections.value.in_flight },
+  { id: 'ready_to_merge', icon: 'i-lucide-git-merge', entries: sections.value.ready_to_merge },
+])
+
+const COLUMN_COPY: Record<Column['id'], { label: string; empty: string }> = {
+  needs_you: { label: 'queue.columns.needsYou.label', empty: 'queue.columns.needsYou.empty' },
+  in_flight: { label: 'queue.columns.inFlight.label', empty: 'queue.columns.inFlight.empty' },
+  ready_to_merge: {
+    label: 'queue.columns.readyToMerge.label',
+    empty: 'queue.columns.readyToMerge.empty',
+  },
+}
+
+const COLUMN_ACCENT: Record<Column['id'], string> = {
+  needs_you: 'text-warning',
+  in_flight: 'text-primary',
+  ready_to_merge: 'text-success',
+}
+
+/**
+ * Whether the inspector is on screen beside the queue. On a wide screen it floats over the
+ * board's right edge (`InspectorPanel`, `lg:w-80` at `lg:end-4`), which is where the queue's
+ * last column sits, so the columns give it that width (20rem, its 1rem offset and a 1rem gap)
+ * rather than letting it cover them. Below `lg` it is a bottom sheet the reader opens and closes.
+ */
+const inspectorOpen = computed(() => !!ui.selectedBlockId && !!board.getBlock(ui.selectedBlockId))
+</script>
+
+<template>
+  <div class="flex h-full flex-col overflow-hidden" data-testid="queue-view">
+    <!-- `ps-14` below lg leaves room for the drawer's menu button in the corner. -->
+    <header
+      class="flex flex-wrap items-center gap-x-4 gap-y-2 ps-14 pe-4 pt-4 pb-3 sm:pe-6 lg:ps-6"
+    >
+      <div class="flex items-baseline gap-2">
+        <h1 class="text-xl font-semibold text-highlighted">{{ t('queue.title') }}</h1>
+        <span class="text-sm text-muted" data-testid="queue-summary">
+          {{
+            t('queue.summary', {
+              needsYou: sections.needs_you.length,
+              ready: sections.ready_to_merge.length,
+            })
+          }}
+        </span>
+      </div>
+      <div class="ms-auto flex flex-wrap items-center gap-2">
+        <USelect
+          v-model="serviceValue"
+          :items="serviceItems"
+          size="sm"
+          class="w-48"
+          :aria-label="t('queue.filter.service')"
+          data-testid="queue-service-filter"
+        />
+        <!-- The inbox still holds what is NOT a task: platform alerts, budget thresholds, key
+             drift. The canvas shows it in its toolbar, which this view does not have. -->
+        <NotificationsInbox />
+      </div>
+    </header>
+
+    <div
+      class="grid min-h-0 flex-1 grid-cols-1 gap-4 overflow-y-auto px-4 pb-6 transition-[padding] sm:px-6 md:grid-cols-3 md:overflow-hidden"
+      :class="inspectorOpen ? 'lg:pe-[22rem]' : ''"
+    >
+      <section
+        v-for="column in columns"
+        :key="column.id"
+        class="flex min-h-0 flex-col rounded-xl border border-muted bg-elevated/40"
+        data-testid="queue-column"
+        :data-column="column.id"
+      >
+        <div class="flex items-center gap-2 px-3 pt-3 pb-2">
+          <UIcon :name="column.icon" class="h-4 w-4" :class="COLUMN_ACCENT[column.id]" />
+          <SectionLabel as="h2">{{ t(COLUMN_COPY[column.id].label) }}</SectionLabel>
+          <UBadge class="ms-auto" color="neutral" variant="subtle" size="sm">
+            {{ column.entries.length }}
+          </UBadge>
+        </div>
+
+        <div class="min-h-0 flex-1 space-y-2 overflow-y-auto px-3 pb-3">
+          <QueueCard v-for="entry in column.entries" :key="entry.task.id" :entry="entry" />
+          <p v-if="column.entries.length === 0" class="px-1 py-6 text-center text-xs text-dimmed">
+            {{ t(COLUMN_COPY[column.id].empty) }}
+          </p>
+
+          <!-- Not started: under In flight, because it is the next thing that column will hold. -->
+          <template v-if="column.id === 'in_flight'">
+            <USeparator class="my-3" />
+            <SectionLabel as="h3" class="px-1">
+              {{ t('queue.waiting.label', { count: sections.waiting.length }) }}
+            </SectionLabel>
+            <QueueCard v-for="entry in sections.waiting" :key="entry.task.id" :entry="entry" />
+            <p v-if="sections.waiting.length === 0" class="px-1 text-xs text-dimmed">
+              {{ t('queue.waiting.empty') }}
+            </p>
+          </template>
+
+          <!-- Recent merges: a count, and the list on request. The queue is about now. -->
+          <template v-if="column.id === 'ready_to_merge'">
+            <USeparator class="my-3" />
+            <div class="flex items-center gap-2 px-1 text-xs text-muted">
+              <span data-testid="queue-done-count">
+                {{
+                  doneSince
+                    ? t('queue.done.count', {
+                        count: queueStore.queue.doneInWindow,
+                        date: d(doneSince, 'short'),
+                      })
+                    : t('queue.done.countAll', { count: queueStore.queue.doneInWindow })
+                }}
+              </span>
+              <UButton
+                v-if="queueStore.queue.doneInWindow > 0"
+                variant="link"
+                size="xs"
+                class="p-0"
+                @click="doneOpen = !doneOpen"
+              >
+                {{ doneOpen ? t('queue.done.hide') : t('queue.done.show') }}
+              </UButton>
+            </div>
+            <template v-if="doneOpen">
+              <QueueCard v-for="entry in sections.done" :key="entry.task.id" :entry="entry" />
+              <p
+                v-if="queueStore.queue.doneInWindow > sections.done.length"
+                class="px-1 text-2xs text-dimmed"
+              >
+                {{
+                  t('queue.done.capped', {
+                    shown: sections.done.length,
+                    total: queueStore.queue.doneInWindow,
+                  })
+                }}
+              </p>
+            </template>
+          </template>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>

package/app/components/ralph/RalphLoopResultView.vue

@@ -11,6 +11,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -136,13 +137,7 @@ const STATUS_META = computed<
     </template>
     <div class="flex min-h-0 flex-1">
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-        <div
-          v-if="!ralph"
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
-        >
-          <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
-          <p class="text-sm">{{ t('ralph.noActivity') }}</p>
-        </div>
+        <EmptyState v-if="!ralph" class="h-full" :icon="meta.icon" :title="t('ralph.noActivity')" />
 
         <template v-else>
           <!-- The completion criterion. -->

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -29,11 +29,13 @@ import type {
   ReviewItemStatus,
 } from '~/types/requirements'
 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 requirements = useRequirementsStore()
 const models = useModelsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const access = useWorkspaceAccess()
@@ -574,18 +576,18 @@ async function requestRecommendations() {
     // ran inline and the recommendations are already settled. Tell the human which actually
     // happened rather than always promising a background callback.
     const stillGenerating = (updated?.recommendations ?? []).some((r) => r.status === 'pending')
-    toast.add(
-      stillGenerating
-        ? {
-            title: t('requirements.toast.preparingRecommendations', { count: n }, n),
-            description: t('requirements.toast.preparingRecommendationsDescription'),
-            icon: 'i-lucide-sparkles',
-          }
-        : {
-            title: t('requirements.toast.recommendationsReady', { count: n }, n),
-            icon: 'i-lucide-sparkles',
-          },
-    )
+    if (stillGenerating) {
+      actionToast.info('requirements.toast.preparingRecommendations', {
+        params: { count: n },
+        plural: n,
+        description: t('requirements.toast.preparingRecommendationsDescription'),
+      })
+    } else {
+      actionToast.success('requirements.toast.recommendationsReady', {
+        params: { count: n },
+        plural: n,
+      })
+    }
   } catch (e) {
     present(e, 'requirements.errors.requestRecommendations')
   }
@@ -634,10 +636,8 @@ async function incorporate(feedback?: string) {
   showRedo.value = false
   // The fold + re-review now run in the durable driver. Hand the user back to the board;
   // a notification calls them back only if the re-review needs more input.
-  toast.add({
-    title: t('requirements.toast.incorporating'),
+  actionToast.info('requirements.toast.incorporating', {
     description: t('requirements.toast.incorporatingDescription'),
-    icon: 'i-lucide-wand-sparkles',
   })
   close()
 }
@@ -647,15 +647,16 @@ async function reReview() {
   try {
     const updated = await requirements.reReview(blockId.value)
     const newFindings = requirements.openCount(updated)
-    toast.add({
-      title:
-        updated.status === 'incorporated'
-          ? t('requirements.toast.reviewerSatisfied')
-          : updated.status === 'exceeded'
-            ? t('requirements.toast.iterationLimitReached')
-            : t('requirements.toast.newFindings', { count: newFindings }, newFindings),
-      icon: 'i-lucide-sparkles',
-    })
+    if (updated.status === 'incorporated') {
+      actionToast.success('requirements.toast.reviewerSatisfied')
+    } else if (updated.status === 'exceeded') {
+      actionToast.warning('requirements.toast.iterationLimitReached')
+    } else {
+      actionToast.info('requirements.toast.newFindings', {
+        params: { count: newFindings },
+        plural: newFindings,
+      })
+    }
   } catch (e) {
     present(e, 'requirements.errors.reReview')
   }
@@ -667,7 +668,7 @@ async function proceed() {
   try {
     await flushDrafts()
     await requirements.proceed(blockId.value)
-    toast.add({ title: t('requirements.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+    actionToast.info('requirements.toast.proceeding')
   } catch (e) {
     present(e, 'requirements.errors.proceed')
   } finally {
@@ -681,12 +682,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   try {
     await requirements.resolveExceeded(blockId.value, choice)
     if (choice === 'stop-reset') {
-      toast.add({ title: t('requirements.toast.taskReset'), icon: 'i-lucide-undo' })
+      actionToast.info('requirements.toast.taskReset')
       close()
     } else if (choice === 'proceed') {
-      toast.add({ title: t('requirements.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+      actionToast.info('requirements.toast.proceeding')
     } else {
-      toast.add({ title: t('requirements.toast.extraRoundGranted'), icon: 'i-lucide-rotate-cw' })
+      actionToast.info('requirements.toast.extraRoundGranted')
     }
   } catch (e) {
     present(e, 'requirements.errors.resolveReview')
@@ -734,20 +735,24 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 
         <!-- empty state — the reviewer runs automatically as the first pipeline
                  gate step, so there's nothing to do here until then -->
-        <div
+        <EmptyState
           v-if="!review && !busy && !loading"
-          class="rounded-lg border border-dashed border-muted p-8 text-center text-sm text-dimmed"
-        >
-          {{ t('requirements.empty') }}
+          icon="i-lucide-list-checks"
+          :title="t('requirements.empty')"
+        />
+
+        <!-- initial fetch on open -->
+        <div v-else-if="loading && !busy && !review" 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 a reviewer pass running) -->
+        <!-- a reviewer pass running -->
         <div
-          v-else-if="(busy || loading) && !review"
+          v-else-if="busy && !review"
           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('requirements.loadingReview') : t('requirements.reviewing') }}
+          <Spinner class="h-4 w-4" />
+          {{ t('requirements.reviewing') }}
         </div>
 
         <template v-else-if="review">
@@ -777,7 +782,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-primary/60 bg-primary/10 p-4 text-sm text-primary"
           >
-            <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('requirements.working.incorporating') }}
             </span>
@@ -978,7 +983,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                           v-if="pendingRecFor(item)"
                           class="mt-2 flex items-center gap-1.5 text-xs text-primary"
                         >
-                          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
+                          <Spinner class="h-3.5 w-3.5" />
                           {{ t('requirements.generatingSuggestion') }}
                         </div>
                         <template v-else-if="readyRecFor(item)">