@cat-factory/app 0.311.2 → 0.312.0

package/app/components/panels/OperatorDashboardPanel.vue

@@ -7,6 +7,7 @@ import { formatMs } from '~/utils/observability'
 import { FAILURE_KIND_KEYS, isAgentFailureKind } from '~/utils/failureKinds'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // Deployment-level (platform-operator) observability dashboard: the aggregate health of the
@@ -166,10 +167,11 @@ watch(
             color="neutral"
             variant="ghost"
             icon="i-lucide-refresh-cw"
+            :loading="loading"
             :label="t('platformObservability.refresh')"
             :ui="{
               base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
-              leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
+              leadingIcon: 'h-4 w-4',
             }"
             data-testid="operator-refresh"
             @click="refresh"
@@ -205,8 +207,9 @@ watch(
             </UButton>
           </div>
 
-          <div v-else-if="loading && !view" class="py-16 text-center text-sm text-muted">
-            {{ t('platformObservability.loading') }}
+          <div v-else-if="loading && !view" class="mx-auto flex max-w-5xl flex-col gap-6">
+            <USkeleton class="h-20 w-full rounded-lg" />
+            <USkeleton v-for="n in 2" :key="n" class="h-36 w-full rounded-lg" />
           </div>
 
           <div v-else-if="view" class="mx-auto flex max-w-5xl flex-col gap-6">
@@ -299,9 +302,12 @@ watch(
                 {{ t('platformObservability.trend.title') }}
               </SectionLabel>
               <div class="rounded-lg border border-default bg-default/40 p-4">
-                <div v-if="view.outcomes.total === 0" class="py-6 text-center text-xs text-dimmed">
-                  {{ t('platformObservability.trend.empty') }}
-                </div>
+                <EmptyState
+                  v-if="view.outcomes.total === 0"
+                  compact
+                  icon="i-lucide-chart-column"
+                  :title="t('platformObservability.trend.empty')"
+                />
                 <div v-else class="flex h-28 items-end gap-0.5" data-testid="operator-trend">
                   <div
                     v-for="p in view.trend.points"
@@ -349,9 +355,12 @@ watch(
                 {{ t('platformObservability.gates.title') }}
               </SectionLabel>
               <div class="overflow-x-auto rounded-lg border border-default bg-default/40 p-4">
-                <p v-if="!view.gates.length" class="py-4 text-center text-xs text-dimmed">
-                  {{ t('platformObservability.gates.empty') }}
-                </p>
+                <EmptyState
+                  v-if="!view.gates.length"
+                  compact
+                  icon="i-lucide-shield-check"
+                  :title="t('platformObservability.gates.empty')"
+                />
                 <UTable
                   v-else
                   :data="view.gates"
@@ -412,9 +421,12 @@ watch(
                   {{ t('platformObservability.failures.title') }}
                 </SectionLabel>
                 <div class="rounded-lg border border-default bg-default/40 p-4">
-                  <div v-if="!view.failures.length" class="py-4 text-center text-xs text-dimmed">
-                    {{ t('platformObservability.failures.empty') }}
-                  </div>
+                  <EmptyState
+                    v-if="!view.failures.length"
+                    compact
+                    icon="i-lucide-circle-x"
+                    :title="t('platformObservability.failures.empty')"
+                  />
                   <ul v-else class="flex flex-col gap-2" data-testid="operator-failures">
                     <li v-for="f in view.failures" :key="f.kind" class="text-xs">
                       <div class="mb-0.5 flex items-center justify-between">
@@ -475,12 +487,12 @@ watch(
                     {{ t('platformObservability.durations.title') }}
                   </SectionLabel>
                   <div class="rounded-lg border border-default bg-default/40 p-3 text-sm">
-                    <div
+                    <EmptyState
                       v-if="view.durations.count === 0"
-                      class="py-2 text-center text-xs text-dimmed"
-                    >
-                      {{ t('platformObservability.durations.empty') }}
-                    </div>
+                      compact
+                      icon="i-lucide-timer"
+                      :title="t('platformObservability.durations.empty')"
+                    />
                     <dl
                       v-else
                       class="grid grid-cols-3 gap-y-3 text-center"

package/app/components/panels/ReportsPanel.vue

@@ -21,6 +21,7 @@ import {
 import ReportsSpendBreakdown from '~/components/panels/ReportsSpendBreakdown.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // Reports: cross-cutting usage analytics for the active account — where the spend and the
@@ -245,10 +246,11 @@ watch(
               color="neutral"
               variant="ghost"
               icon="i-lucide-refresh-cw"
+              :loading="loading"
               :label="t('reports.refresh')"
               :ui="{
                 base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
-                leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
+                leadingIcon: 'h-4 w-4',
               }"
               @click="refresh"
             />
@@ -283,8 +285,9 @@ watch(
             </UButton>
           </div>
 
-          <div v-else-if="loading && !view" class="py-16 text-center text-sm text-muted">
-            {{ t('reports.loading') }}
+          <div v-else-if="loading && !view" class="mx-auto flex max-w-5xl flex-col gap-6">
+            <USkeleton class="h-20 w-full rounded-lg" />
+            <USkeleton v-for="n in 2" :key="n" class="h-36 w-full rounded-lg" />
           </div>
 
           <div v-else-if="view" class="mx-auto flex max-w-5xl flex-col gap-6">
@@ -374,9 +377,12 @@ watch(
                 {{ t('reports.trend.title') }}
               </SectionLabel>
               <div class="rounded-lg border border-default bg-default/40 p-4">
-                <div v-if="!hasSpend" class="py-6 text-center text-xs text-dimmed">
-                  {{ t('reports.trend.empty') }}
-                </div>
+                <EmptyState
+                  v-if="!hasSpend"
+                  compact
+                  icon="i-lucide-chart-column"
+                  :title="t('reports.trend.empty')"
+                />
                 <div v-else class="flex h-28 items-end gap-0.5" data-testid="reports-trend">
                   <div
                     v-for="point in view.trend.points"
@@ -505,12 +511,12 @@ watch(
                     {{ t('reports.activity.heading') }}
                   </h3>
                   <div class="rounded-lg border border-default bg-default/40 p-4">
-                    <div
+                    <EmptyState
                       v-if="!activityByDimension.length"
-                      class="py-4 text-center text-xs text-dimmed"
-                    >
-                      {{ t('reports.activity.empty') }}
-                    </div>
+                      compact
+                      icon="i-lucide-activity"
+                      :title="t('reports.activity.empty')"
+                    />
                     <template v-else>
                       <ul class="flex flex-col gap-3" data-testid="reports-activity">
                         <li

package/app/components/panels/ReportsSpendBreakdown.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { ReportSpendCap, ReportSpendRow } from '~/types/execution'
 import { maxOf, segmentPct, spendMagnitude } from './ReportsPanel.logic'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // One ranked spend breakdown: a horizontal bar per slice, split into the metered
 // (`violet-500`, real money) and subscription (`amber-600`, illustrative equivalent-API
@@ -34,9 +35,12 @@ const max = computed(() => maxOf(props.rows, spendMagnitude))
 
 <template>
   <div class="rounded-lg border border-default bg-default/40 p-4">
-    <div v-if="!rows.length" class="py-4 text-center text-xs text-dimmed">
-      {{ t('reports.spend.empty') }}
-    </div>
+    <EmptyState
+      v-if="!rows.length"
+      compact
+      icon="i-lucide-wallet"
+      :title="t('reports.spend.empty')"
+    />
     <ul v-else class="flex flex-col gap-2.5" :data-testid="testId">
       <li v-for="row in rows" :key="row.key" class="text-xs" data-testid="reports-spend-row">
         <div class="mb-1 flex items-baseline justify-between gap-2">

package/app/components/panels/RunDetailLoadState.vue

@@ -12,6 +12,7 @@
  * event delivered and every run already fetched once.
  */
 import { computed } from 'vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{ instanceId: string | null }>()
 
@@ -29,10 +30,10 @@ const error = computed(() => execution.fullError(props.instanceId))
     :class="error ? 'text-app-error-300' : 'text-muted'"
     data-testid="run-detail-load-state"
   >
-    <UIcon
-      :name="error ? 'i-lucide-triangle-alert' : 'i-lucide-loader-circle'"
+    <Spinner
+      :name="error ? 'i-lucide-triangle-alert' : undefined"
+      :spinning="!error"
       class="h-3.5 w-3.5 shrink-0"
-      :class="error ? '' : 'animate-spin'"
     />
     <span>{{
       error ? t('panels.runDetail.loadFailed', { reason: error }) : t('panels.runDetail.loading')

package/app/components/panels/StepContainerStatus.vue

@@ -4,6 +4,7 @@ import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // The per-run container lifecycle for a container-backed step: its status (spinning up /
 // running / errored / reclaimed), the live phase (preparing the checkout vs the agent
@@ -74,7 +75,7 @@ const CONTAINER_STATUS_META: Record<
 
 // Whether the status icon animates: only a cold-boot genuinely in flight, i.e. one whose run is
 // still being driven. A `starting` container on a parked or terminated run keeps its label and
-// freezes, the same way a mid-flight subtask item does (`subtaskIconClass`).
+// freezes, the same way a mid-flight subtask item does (`subtaskIconSpins`).
 const spinIcon = computed(
   () =>
     props.runActive && !!containerStatus.value && CONTAINER_STATUS_META[containerStatus.value].spin,
@@ -100,10 +101,10 @@ const { copy: copyText } = useCopyToClipboard()
       :class="CONTAINER_STATUS_META[containerStatus].cls"
     >
       <div class="flex items-center gap-2">
-        <UIcon
+        <Spinner
           :name="CONTAINER_STATUS_META[containerStatus].icon"
+          :spinning="spinIcon"
           class="h-4 w-4 shrink-0"
-          :class="spinIcon ? 'animate-spin' : ''"
         />
         <span class="font-medium">{{ t(CONTAINER_STATUS_KEYS[containerStatus]) }}</span>
         <template v-if="phaseLabel && containerStatus === 'up'">

package/app/components/panels/StepDelegatedStatus.vue

@@ -8,6 +8,7 @@ import {
 import type { PipelineStep } from '~/types/execution'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // The EXTERNAL work a delegated step dispatched: which registered executor is running it, what it
 // is doing, and the link to that system's own logs, which is the affordance everything else here
@@ -81,10 +82,10 @@ const { copy: copyText } = useCopyToClipboard()
   <div v-if="record" data-testid="step-delegated-status">
     <div class="rounded-lg border px-3 py-2 text-xs" :class="statusView.meta.cls">
       <div class="flex items-center gap-2">
-        <UIcon
+        <Spinner
           :name="statusView.meta.icon"
+          :spinning="statusView.meta.spin"
           class="h-4 w-4 shrink-0"
-          :class="statusView.meta.spin ? 'animate-spin' : ''"
         />
         <!-- A status this build does not know is NAMED as unrecognised, carrying the stored value,
              rather than guessed onto a current one or silently dropped. -->

package/app/components/panels/StepMetadataCard.vue

@@ -7,13 +7,14 @@ import {
 } from '@cat-factory/contracts'
 import type { AgentState, PipelineStep, CompanionVerdict, StepApproval } from '~/types/execution'
 import type { BadgeColor } from '~/utils/badge'
-import { subtaskIconClass } from '~/utils/pipelineRender'
+import { subtaskIconSpins, subtaskIconTone } from '~/utils/pipelineRender'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
 import StepDelegatedStatus from '~/components/panels/StepDelegatedStatus.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // The step's metadata card body: state/timing/model/run id, the container cold-boot
 // phase, the live subtask breakdown, the LLM observability rollup, the applied
@@ -204,11 +205,7 @@ async function copyRunId() {
           {{ t('panels.stepMeta.duration') }}
         </SectionLabel>
         <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-default">
-          <UIcon
-            v-if="isRunning"
-            name="i-lucide-loader-circle"
-            class="h-3 w-3 animate-spin text-primary"
-          />
+          <Spinner v-if="isRunning" class="h-3 w-3 text-primary" />
           <span v-if="durationLabel">{{ durationLabel }}</span>
           <span v-else class="text-dimmed">—</span>
           <span v-if="isRunning" class="text-2xs text-dimmed">{{
@@ -314,10 +311,11 @@ async function copyRunId() {
                 : 'text-muted'
           "
         >
-          <UIcon
+          <Spinner
             :name="ITEM_ICON[item.status]"
+            :spinning="subtaskIconSpins(item.status, runFailed)"
             class="mt-px h-3 w-3 shrink-0"
-            :class="subtaskIconClass(item.status, runFailed)"
+            :class="subtaskIconTone(item.status)"
           />
           <span>{{ item.label }}</span>
         </li>

package/app/components/panels/StepRunMeta.vue

@@ -4,6 +4,7 @@ import type { PipelineStep } from '~/types/execution'
 import { useStepTimer } from '~/composables/useStepTimer'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Shared run-metadata + observability block for the step-backed result windows
 // (the CI/conflicts gate, the tester report). It carries the facts every step has in
@@ -71,11 +72,7 @@ async function copyRunId() {
         {{ t('panels.stepMeta.duration') }}
       </SectionLabel>
       <p class="flex items-center gap-1.5 text-xs tabular-nums text-toned">
-        <UIcon
-          v-if="isRunning"
-          name="i-lucide-loader-circle"
-          class="h-3 w-3 animate-spin text-primary"
-        />
+        <Spinner v-if="isRunning" class="h-3 w-3 text-primary" />
         {{ durationLabel }}
         <span v-if="isRunning" class="text-2xs text-dimmed">{{
           t('panels.stepMeta.elapsed')

package/app/components/panels/inspector/ContainerSummary.vue

@@ -3,6 +3,7 @@ import type { Block } from '~/types/domain'
 import { STATUS_META } from '~/utils/catalog'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import ReviewDebtBadge from '~/components/board/ReviewDebtBadge.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -79,7 +80,12 @@ function addTask() {
         <span class="ms-auto text-3xs text-dimmed">{{ STATUS_META[task.status].label }}</span>
       </li>
     </ul>
-    <div v-else class="text-2xs text-dimmed">{{ t('inspector.container.noTasks') }}</div>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-list-todo"
+      :title="t('inspector.container.noTasks')"
+    />
     <p v-if="isFrame" class="text-2xs text-dimmed">
       {{ t('inspector.container.servicesHint') }}
     </p>

package/app/components/panels/inspector/EpicChildren.vue

@@ -4,6 +4,7 @@ import type { Block } from '~/types/domain'
 import { STATUS_META } from '~/utils/catalog'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // The epic inspector body: the full tree of member tasks (which may live under different
 // services/modules), grouped service → module → task. Each task row selects it. Membership
@@ -58,9 +59,12 @@ const groups = computed(() => {
       }}</span>
     </template>
 
-    <div v-if="members.length === 0" class="text-2xs text-dimmed">
-      {{ t('inspector.epicChildren.empty') }}
-    </div>
+    <EmptyState
+      v-if="members.length === 0"
+      compact
+      icon="i-lucide-list-tree"
+      :title="t('inspector.epicChildren.empty')"
+    />
 
     <div v-else class="space-y-2">
       <div v-for="(group, gi) in groups" :key="gi" class="rounded-md border border-muted/60 p-2">

package/app/components/panels/inspector/FrontendConfig.vue

@@ -14,6 +14,7 @@ import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBind
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import IconButton from '~/components/common/IconButton.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
 // frontend for a self-contained UI test (+ an optional browsable preview on local/node),
@@ -565,9 +566,12 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             />
           </div>
         </div>
-        <div v-else class="text-2xs text-dimmed">
-          {{ t('inspector.frontendConfig.bindings.empty') }}
-        </div>
+        <EmptyState
+          v-else
+          compact
+          icon="i-lucide-link"
+          :title="t('inspector.frontendConfig.bindings.empty')"
+        />
 
         <!-- How the bindings resolve RIGHT NOW: each env var → a bound service's live ephemeral
              URL, or WireMock — plus the duplicate-env-var warning. The same view a UI-test run

package/app/components/panels/inspector/InitiativeInspector.vue

@@ -12,6 +12,7 @@ import {
   INITIATIVE_STATUS_LABEL_KEYS,
   initiativeProgress,
 } from '~/utils/initiative'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -93,10 +94,12 @@ function control(action: 'pause' | 'resume' | 'cancel') {
         color="neutral"
         variant="soft"
         size="sm"
-        icon="i-lucide-loader-circle"
-        :ui="{ leadingIcon: 'animate-spin' }"
         @click="openPlanning"
       >
+        <!-- Not `:loading`: that disables the button, and this one has to stay clickable. -->
+        <template #leading>
+          <Spinner class="size-4" />
+        </template>
         {{ t('initiative.inspector.planningInProgress') }}
       </UButton>
       <UButton

package/app/components/panels/inspector/ServiceConnections.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { Block, ServiceConnection } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Service-frame (`type: 'service'`) connections: the other services this one USES
 // (consumer→provider edges, stored on this frame — the consumer end). Each row picks a
@@ -136,9 +137,12 @@ const usedBy = computed(() =>
         />
       </div>
     </div>
-    <div v-else class="text-2xs text-dimmed">
-      {{ t('inspector.serviceConnections.empty') }}
-    </div>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-plug"
+      :title="t('inspector.serviceConnections.empty')"
+    />
 
     <div v-if="usedBy.length" class="space-y-1" data-testid="service-connections-used-by">
       <span class="text-2xs text-muted">{{ t('inspector.serviceConnections.usedBy') }}</span>

package/app/components/panels/inspector/ServiceReleaseHealthConfig.vue

@@ -13,7 +13,7 @@ const props = defineProps<{ block: Block }>()
 const store = useReleaseHealthStore()
 const ui = useUiStore()
 const uiMode = useUiModeStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -61,11 +61,7 @@ async function save() {
       sloIds: parseIds(draft.sloIds),
       envTag: draft.envTag.trim() || null,
     })
-    toast.add({
-      title: t('inspector.releaseHealth.savedToast'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('inspector.releaseHealth.savedToast')
   } catch (e) {
     present(e, 'inspector.releaseHealth.saveFailed')
   } finally {

package/app/components/panels/inspector/ServiceTestSecrets.vue

@@ -18,7 +18,7 @@ import { uid } from '~/utils/catalog'
 const props = defineProps<{ block: Block }>()
 
 const store = useTestSecretsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -111,11 +111,7 @@ async function save() {
         value: r.value,
       })),
     })
-    toast.add({
-      title: t('inspector.testSecrets.savedToast'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('inspector.testSecrets.savedToast')
   } catch (e) {
     present(e, 'inspector.testSecrets.saveFailed')
   } finally {

package/app/components/panels/inspector/ServiceTestingContext.vue

@@ -21,7 +21,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const uiMode = useUiModeStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { t } = useI18n()
 
 const busy = ref(false)
@@ -64,11 +64,7 @@ async function save() {
     // needs saying here; announcing it unconditionally would claim a save the rollback undid.
     const persisted = await board.updateBlock(props.block.id, { testingContext: outgoing.value })
     if (persisted) {
-      toast.add({
-        title: t('inspector.testingContext.savedToast'),
-        icon: 'i-lucide-check',
-        color: 'success',
-      })
+      actionToast.success('inspector.testingContext.savedToast')
     }
   } finally {
     busy.value = false

package/app/components/panels/inspector/ServiceValidationConfig.vue

@@ -10,6 +10,7 @@ import {
   type ValidationEcosystem,
 } from '~/types/validationChecks'
 import { mergeDetectedChecks } from '~/utils/validationDetection'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Per-service (frame) PRE-PR VALIDATION CHECKS: the shell commands the executor-harness runs
 // against the checkout after the coder settles and BEFORE the PR opens. A failing command's
@@ -19,7 +20,7 @@ import { mergeDetectedChecks } from '~/utils/validationDetection'
 const props = defineProps<{ block: Block }>()
 
 const store = useValidationChecksStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, te } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -104,11 +105,11 @@ async function detect() {
     if (result.status !== 'ok') {
       // The backend distinguishes "no repo linked" from "the repo could not be read"; say
       // which, because they send the operator to different places.
-      toast.add({
-        title: t(`inspector.validationChecks.detect.${result.status}`),
-        icon: 'i-lucide-triangle-alert',
-        color: 'warning',
-      })
+      actionToast.error(
+        result.status === 'repo_unavailable'
+          ? 'inspector.validationChecks.detect.repo_unavailable'
+          : 'inspector.validationChecks.detect.failed',
+      )
       return
     }
     const merged = mergeDetectedChecks(rows.value, result.checks, VALIDATION_MAX_CHECKS)
@@ -120,39 +121,37 @@ async function detect() {
     const filledInstall = suggestedInstall !== '' && dependencyInstall.value.trim() === ''
     if (filledInstall) dependencyInstall.value = suggestedInstall
     if (merged.added === 0 && !filledInstall) {
-      toast.add({
-        title: t('inspector.validationChecks.detect.nothingNew'),
+      actionToast.info('inspector.validationChecks.detect.nothingNew', {
         description:
           result.checks.length > 0
             ? t('inspector.validationChecks.detect.alreadyPresent')
             : t('inspector.validationChecks.detect.unrecognised'),
-        icon: 'i-lucide-info',
-        color: 'neutral',
       })
       return
     }
     const names = result.ecosystems.map(ecosystemLabel).join(', ')
-    toast.add({
-      // An install-only detection fills nothing but the install field, and reporting it as
-      // "0 checks added" would read as a failed press on the one repo shape prepopulation is
-      // most for (dependencies to install, nothing declared to verify).
-      title:
-        merged.added === 0
-          ? t('inspector.validationChecks.detect.installOnly')
-          : t('inspector.validationChecks.detect.added', { count: merged.added }, merged.added),
-      // Name what was recognised AND what was left out: a cap that silently swallowed a
-      // suggestion reads as "that is everything your repo has".
-      description: [
-        names ? t('inspector.validationChecks.detect.found', { ecosystems: names }) : '',
-        merged.dropped > 0 || result.truncated
-          ? t('inspector.validationChecks.detect.capped', { max: VALIDATION_MAX_CHECKS })
-          : '',
-      ]
-        .filter(Boolean)
-        .join(' '),
-      icon: 'i-lucide-wand-sparkles',
-      color: 'success',
-    })
+    // An install-only detection fills nothing but the install field, and reporting it as
+    // "0 checks added" would read as a failed press on the one repo shape prepopulation is
+    // most for (dependencies to install, nothing declared to verify).
+    actionToast.success(
+      merged.added === 0
+        ? 'inspector.validationChecks.detect.installOnly'
+        : 'inspector.validationChecks.detect.added',
+      {
+        params: { count: merged.added },
+        plural: merged.added === 0 ? undefined : merged.added,
+        // Name what was recognised AND what was left out: a cap that silently swallowed a
+        // suggestion reads as "that is everything your repo has".
+        description: [
+          names ? t('inspector.validationChecks.detect.found', { ecosystems: names }) : '',
+          merged.dropped > 0 || result.truncated
+            ? t('inspector.validationChecks.detect.capped', { max: VALIDATION_MAX_CHECKS })
+            : '',
+        ]
+          .filter(Boolean)
+          .join(' '),
+      },
+    )
   } catch (e) {
     present(e, 'inspector.validationChecks.detect.failed')
   } finally {
@@ -169,11 +168,7 @@ async function save() {
       maxAttempts.value,
       dependencyInstall.value.trim() || undefined,
     )
-    toast.add({
-      title: t('inspector.validationChecks.savedToast'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('inspector.validationChecks.savedToast')
   } catch (e) {
     present(e, 'inspector.validationChecks.saveFailed')
   } finally {
@@ -273,9 +268,13 @@ async function clear() {
         />
       </div>
 
-      <p v-if="rows.length === 0" class="text-2xs text-dimmed" data-testid="validation-empty">
-        {{ t('inspector.validationChecks.empty') }}
-      </p>
+      <EmptyState
+        v-if="rows.length === 0"
+        compact
+        icon="i-lucide-list-checks"
+        :title="t('inspector.validationChecks.empty')"
+        data-testid="validation-empty"
+      />
 
       <div class="flex items-end justify-between gap-2">
         <UFormField