@cat-factory/app 0.311.2 → 0.312.0

package/app/components/clarity/ClarityReviewWindow.vue

@@ -20,11 +20,13 @@ import type {
   ReviewItemStatus,
 } from '~/types/clarity'
 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 clarity = useClarityStore()
 const models = useModelsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const access = useWorkspaceAccess()
@@ -233,10 +235,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('clarity.toast.clarifyingTitle'),
+  actionToast.info('clarity.toast.clarifyingTitle', {
     description: t('clarity.toast.clarifyingDescription'),
-    icon: 'i-lucide-wand-sparkles',
   })
   close()
 }
@@ -246,15 +246,16 @@ async function reReview() {
   try {
     const updated = await clarity.reReview(blockId.value)
     const newFindings = clarity.openCount(updated)
-    toast.add({
-      title:
-        updated.status === 'incorporated'
-          ? t('clarity.toast.reReviewSatisfied')
-          : updated.status === 'exceeded'
-            ? t('clarity.toast.reReviewExceeded')
-            : t('clarity.toast.reReviewNewFindings', { count: newFindings }, newFindings),
-      icon: 'i-lucide-sparkles',
-    })
+    if (updated.status === 'incorporated') {
+      actionToast.success('clarity.toast.reReviewSatisfied')
+    } else if (updated.status === 'exceeded') {
+      actionToast.warning('clarity.toast.reReviewExceeded')
+    } else {
+      actionToast.info('clarity.toast.reReviewNewFindings', {
+        params: { count: newFindings },
+        plural: newFindings,
+      })
+    }
   } catch (e) {
     present(e, 'clarity.error.reReview')
   }
@@ -266,7 +267,7 @@ async function proceed() {
   try {
     await flushDrafts()
     await clarity.proceed(blockId.value)
-    toast.add({ title: t('clarity.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+    actionToast.info('clarity.toast.proceeding')
   } catch (e) {
     present(e, 'clarity.error.proceed')
   } finally {
@@ -280,12 +281,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   try {
     await clarity.resolveExceeded(blockId.value, choice)
     if (choice === 'stop-reset') {
-      toast.add({ title: t('clarity.toast.taskReset'), icon: 'i-lucide-undo' })
+      actionToast.info('clarity.toast.taskReset')
       close()
     } else if (choice === 'proceed') {
-      toast.add({ title: t('clarity.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+      actionToast.info('clarity.toast.proceeding')
     } else {
-      toast.add({ title: t('clarity.toast.extraRoundGranted'), icon: 'i-lucide-rotate-cw' })
+      actionToast.info('clarity.toast.extraRoundGranted')
     }
   } catch (e) {
     present(e, 'clarity.error.resolve')
@@ -329,20 +330,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('clarity.empty') }}
+          icon="i-lucide-list-checks"
+          :title="t('clarity.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('clarity.loadingReview') : t('clarity.triaging') }}
+          <Spinner class="h-4 w-4" />
+          {{ t('clarity.triaging') }}
         </div>
 
         <template v-else-if="review">
@@ -371,7 +376,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('clarity.incorporatingStage') }}
             </span>

package/app/components/common/ClarificationItem.vue

@@ -8,6 +8,8 @@
 // -specific extras (severity/category badges, a window's own recommendation section) ride the
 // `badges` / `actions` slots; the recommend button only EMITS, so each window wires its own
 // recommend mechanism. `dismissed`/`requested` hide the textarea (nothing to answer right now).
+import Spinner from '~/components/common/Spinner.vue'
+
 const props = defineProps<{
   /** The question / finding headline. */
   prompt: string
@@ -82,7 +84,7 @@ const draft = computed({
       class="mt-2 inline-flex items-center gap-1 text-2xs text-primary"
       data-testid="clarification-requested"
     >
-      <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
+      <Spinner class="h-3.5 w-3.5" />
       {{ t('clarification.generating') }}
     </div>
 

package/app/components/common/EmptyState.vue

@@ -1,9 +1,22 @@
 <script setup lang="ts">
-// A small, presentational "nothing here yet" placeholder — the reusable version of the
-// hand-coded empty renders scattered across the app (context pickers, dependency lists,
-// execution history, preset lists). Dumb by design: it takes already-resolved copy and an
-// icon, and exposes a default slot for an optional call-to-action button. `compact` shrinks
-// it for inline use inside a narrow panel section.
+// The SPA's one "nothing here yet" render. Every list, panel section and picker that can be empty
+// shows this, so an empty state reads the same everywhere (frontend/app/README.md, "Empty states:
+// `EmptyState`, always").
+//
+// It renders Nuxt UI's `UEmpty`, which owns the structure, the call-to-action row and the theme
+// tokens. This file decides what `UEmpty` leaves to each caller, once:
+//
+// - The `naked` variant: an empty state sits INSIDE a panel that already draws its own border, so
+//   `UEmpty`'s default outline would draw a second box.
+// - The spacing. `UEmpty`'s root pads `p-4 sm:p-6 lg:p-8` with a `gap-4`, sized for a page body.
+//   Every responsive step is reset here, because overriding the base `p-4` alone leaves 32px of
+//   padding inside a narrow picker at desktop widths.
+// - The header markup. `UEmpty` renders its title as an `<h2>`, which would put a level-2 heading
+//   into every picker, dropdown and inspector section. The header slot renders the copy as plain
+//   text instead.
+//
+// The default slot is the call-to-action: a site with a button to fill the empty list passes it
+// here. Dumb by design: it takes already-resolved copy and an icon.
 withDefaults(
   defineProps<{
     icon?: string
@@ -11,25 +24,34 @@ withDefaults(
     description?: string
     compact?: boolean
   }>(),
-  { icon: 'i-lucide-inbox', compact: false },
+  { icon: 'i-lucide-inbox', description: undefined, compact: false },
 )
 </script>
 
 <template>
-  <div
-    class="flex flex-col items-center justify-center text-center text-dimmed"
-    :class="compact ? 'gap-1 py-4' : 'gap-2 py-10'"
+  <UEmpty
+    variant="naked"
+    :ui="{
+      root: compact
+        ? 'gap-1 p-0 py-4 sm:p-0 sm:py-4 lg:p-0 lg:py-4'
+        : 'gap-2 p-0 py-10 sm:p-0 sm:py-10 lg:p-0 lg:py-10',
+      header: compact ? 'gap-1' : 'gap-2',
+    }"
     data-testid="empty-state"
   >
-    <UIcon :name="icon" :class="compact ? 'h-5 w-5' : 'h-8 w-8'" class="text-app-600" />
-    <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-muted">
-      {{ title }}
-    </p>
-    <p v-if="description" :class="compact ? 'text-2xs' : 'text-xs'" class="max-w-xs">
-      {{ description }}
-    </p>
-    <div v-if="$slots.default" :class="compact ? 'mt-1' : 'mt-2'">
+    <template #header>
+      <UIcon :name="icon" :class="compact ? 'size-5' : 'size-8'" class="text-app-600" />
+      <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-muted">{{ title }}</p>
+      <p
+        v-if="description"
+        :class="compact ? 'text-2xs' : 'text-xs'"
+        class="text-balance text-dimmed"
+      >
+        {{ description }}
+      </p>
+    </template>
+    <template v-if="$slots.default" #actions>
       <slot />
-    </div>
-  </div>
+    </template>
+  </UEmpty>
 </template>

package/app/components/common/InterviewGateNotice.vue

@@ -6,6 +6,8 @@
 // proceed read as dead buttons. Copy is per-feature (passed in); the treatment is shared, so the
 // two windows can't drift on how a wait or a failure looks. See
 // `docs/initiatives/clarification-items.md`.
+import Spinner from '~/components/common/Spinner.vue'
+
 defineProps<{
   /** `working` = a pass is in flight (spinner); `failed` = the run stopped (error treatment). */
   variant: 'working' | 'failed'
@@ -24,7 +26,7 @@ defineProps<{
     class="flex flex-col items-center gap-2 rounded-lg border border-default bg-app-950/40 p-6 text-center"
     :data-testid="testid"
   >
-    <UIcon name="i-lucide-loader-circle" class="h-5 w-5 animate-spin text-primary" />
+    <Spinner class="h-5 w-5 text-primary" />
     <p class="text-sm text-default">{{ title }}</p>
     <p class="text-xs text-muted">{{ hint }}</p>
   </div>

package/app/components/common/Spinner.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// The one place `animate-spin` is written (`scripts/check-frontend-feedback.mjs` enforces it).
+//
+// Use it only where no Nuxt UI component carries the state: `UButton`, `UInput`, `USelectMenu` and
+// the rest take `:loading`, and that prop is the answer there. This is for a bare icon that shows
+// work in progress: a step-status glyph, a "loading…" line, a full-panel wait.
+//
+// `spinning` lets a status icon keep ONE element across its states (a step glyph that spins while
+// it runs and stops when it settles) instead of two branches. `name` defaults to Nuxt UI's own
+// loading icon, so a plain spinner matches the one `:loading` draws inside a button. Size and
+// colour are the caller's classes, which land on the icon.
+//
+// `motion-safe:` so a reader who asked the OS for reduced motion sees the icon still; the state
+// is carried by the icon itself and its surrounding copy, never by the motion alone.
+withDefaults(defineProps<{ name?: string; spinning?: boolean }>(), {
+  name: undefined,
+  spinning: true,
+})
+
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <UIcon
+    :name="name ?? appConfig.ui.icons.loading"
+    :class="spinning ? 'motion-safe:animate-spin' : ''"
+  />
+</template>

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -13,6 +13,7 @@ import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import { agentKindMeta } from '~/utils/catalog'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t, n } = useI18n()
 
@@ -145,12 +146,11 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
     </template>
 
     <div class="flex-1 overflow-y-auto px-6 py-5">
-      <div v-if="loading && !session" class="py-16 text-center text-sm text-dimmed">
-        {{ t('consensus.loading') }}
-      </div>
-      <div v-else-if="!session" class="py-16 text-center text-sm text-dimmed">
-        {{ t('consensus.empty') }}
+      <div v-if="loading && !session" class="space-y-4">
+        <USkeleton class="h-32 w-full rounded-lg" />
+        <USkeleton v-for="n in 3" :key="n" class="h-16 w-full rounded-lg" />
       </div>
+      <EmptyState v-else-if="!session" icon="i-lucide-users" :title="t('consensus.empty')" />
       <template v-else>
         <!-- failure -->
         <div

package/app/components/docs/DocInterviewWindow.vue

@@ -25,6 +25,7 @@ import {
   interviewStepReached,
 } from '~/utils/interviewGate'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const docInterview = useDocInterviewStore()
@@ -123,13 +124,12 @@ const onProceed = () =>
 
     <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
       <!-- No session yet -->
-      <div
+      <EmptyState
         v-if="!session"
-        class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
-      >
-        <UIcon name="i-lucide-messages-square" class="h-8 w-8 opacity-40" />
-        <p class="text-sm">{{ t('docInterview.empty') }}</p>
-      </div>
+        class="h-full"
+        icon="i-lucide-messages-square"
+        :title="t('docInterview.empty')"
+      />
 
       <template v-else>
         <p class="mb-4 text-sm leading-relaxed text-toned">

package/app/components/documents/ContextDocumentPicker.vue

@@ -476,8 +476,8 @@ onMounted(() => {
     <template v-else>
       <UInput
         v-model="query"
-        :icon="searching ? 'i-lucide-loader-circle' : 'i-lucide-search'"
-        :ui="{ leadingIcon: searching ? 'animate-spin' : '' }"
+        icon="i-lucide-search"
+        :loading="searching"
         size="sm"
         class="w-full"
         :placeholder="

package/app/components/documents/DocumentImportModal.vue

@@ -3,6 +3,7 @@ import type { DocumentSourceKind } from '~/types/domain'
 import DocumentSyncState from '~/components/documents/DocumentSyncState.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Import pages from a connected document source and pick one to expand into
 // board structure. A source selector lets the user choose which connected source
@@ -11,7 +12,7 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const open = computed({
@@ -58,10 +59,7 @@ async function doImport() {
   try {
     const doc = await documents.importDocument(source.value, value)
     ref_.value = ''
-    toast.add({
-      title: t('documents.import.imported', { title: doc.title }),
-      icon: 'i-lucide-file-down',
-    })
+    actionToast.success('documents.import.imported', { params: { title: doc.title } })
   } catch (e) {
     present(e, 'documents.import.importFailed')
   } finally {
@@ -157,9 +155,12 @@ function preview(externalId: string) {
             </div>
           </div>
         </div>
-        <p v-else class="text-center text-xs text-dimmed">
-          {{ t('documents.import.noneImported') }}
-        </p>
+        <EmptyState
+          v-else
+          compact
+          icon="i-lucide-file-down"
+          :title="t('documents.import.noneImported')"
+        />
       </div>
     </template>
   </UModal>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -17,7 +17,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction } = useConfirmAction()
 
@@ -82,10 +82,8 @@ async function submit() {
   saving.value = true
   try {
     await documents.connect(source.value, credentials)
-    toast.add({
-      title: t('documents.connect.connected', { source: descriptor.value!.label }),
-      icon: 'i-lucide-check',
-      color: 'success',
+    actionToast.success('documents.connect.connected', {
+      params: { source: descriptor.value!.label },
     })
     ui.closeDocumentConnect()
   } catch (e) {
@@ -99,11 +97,13 @@ async function disconnect() {
   if (!source.value) return
   const label = descriptor.value?.label ?? t('documents.connect.sourceFallback')
   if (!(await confirmAction('disconnect', label))) return
-  await documents.disconnect(source.value)
-  toast.add({
-    title: t('documents.connect.disconnected', { source: label }),
-    icon: 'i-lucide-unplug',
-  })
+  try {
+    await documents.disconnect(source.value)
+  } catch (e) {
+    present(e, 'documents.connect.disconnectFailed')
+    return
+  }
+  actionToast.success('documents.connect.disconnected', { params: { source: label } })
   ui.closeDocumentConnect()
 }
 </script>

package/app/components/documents/DocumentTemplatesModal.vue

@@ -4,6 +4,7 @@ import type { DocKind, DocumentLinkRole, SourceDocument } from '~/types/domain'
 import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Manage the workspace's per-DocKind TEMPLATE (singular) + EXEMPLAR (multi) document links (WS1).
 // A kind can be pointed at one of the workspace's already-imported documents so its parsed
@@ -97,13 +98,15 @@ async function unlink(doc: SourceDocument) {
         <p class="text-xs text-muted">{{ t('documents.templates.intro') }}</p>
 
         <!-- No imported documents yet: a template/exemplar must be an imported document. -->
-        <div v-if="!documents.documents.length" class="space-y-3 text-center">
-          <UIcon name="i-lucide-file-plus" class="mx-auto h-8 w-8 text-dimmed" />
-          <p class="text-sm text-muted">{{ t('documents.templates.importFirst') }}</p>
+        <EmptyState
+          v-if="!documents.documents.length"
+          icon="i-lucide-file-plus"
+          :title="t('documents.templates.importFirst')"
+        >
           <UButton variant="soft" icon="i-lucide-file-down" @click="ui.openDocumentImport()">
             {{ t('documents.templates.importButton') }}
           </UButton>
-        </div>
+        </EmptyState>
 
         <template v-else>
           <UFormField :label="t('documents.templates.kindLabel')">
@@ -194,9 +197,12 @@ async function unlink(doc: SourceDocument) {
                 </UButton>
               </div>
             </div>
-            <p v-else class="mt-2 text-xs text-dimmed">
-              {{ t('documents.templates.exemplarsEmpty') }}
-            </p>
+            <EmptyState
+              v-else
+              compact
+              icon="i-lucide-files"
+              :title="t('documents.templates.exemplarsEmpty')"
+            />
           </section>
 
           <!-- Picker: choose an imported document, then set as template or add as example. -->

package/app/components/documents/RepoContextDocPicker.vue

@@ -232,8 +232,8 @@ onMounted(() => {
       <div v-if="fileMode === 'search'" class="space-y-2">
         <UInput
           v-model="fileQuery"
-          :icon="loadingFiles ? 'i-lucide-loader-circle' : 'i-lucide-file-search'"
-          :ui="{ leadingIcon: loadingFiles ? 'animate-spin' : '' }"
+          icon="i-lucide-file-search"
+          :loading="loadingFiles"
           size="sm"
           class="w-full"
           :placeholder="t('documents.repoPicker.searchFilesPlaceholder')"

package/app/components/documents/SpawnPreviewModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { isDesignSource } from '@cat-factory/contracts'
 import type { DocumentBoardPlan } from '~/types/domain'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Preview the structure an imported document expands into, then spawn it. The
 // plan is fetched fresh on open; a badge makes clear whether an LLM or the
@@ -16,7 +17,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const board = useBoardStore()
 const documents = useDocumentsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 /** Design documents are planned into an existing service; prose documents at the board root. */
@@ -102,16 +103,13 @@ async function spawn() {
       modules: t('documents.spawn.moduleCount', { count: result.modules }, result.modules),
       tasks: t('documents.spawn.taskCount', { count: result.tasks }, result.tasks),
     })
-    toast.add({
-      title: t('documents.spawn.spawned'),
+    actionToast.success('documents.spawn.spawned', {
       // A reused module is stated only when there was one, and never folded into the created
       // count: a spawn into a service that already had every planned module otherwise reports
       // "0 modules" beside its tasks, which reads as the modules having failed.
       description: result.reusedModules
         ? `${summary} · ${t('documents.spawn.reusedCount', { count: result.reusedModules }, result.reusedModules)}`
         : summary,
-      icon: 'i-lucide-check',
-      color: 'success',
     })
     ui.closeSpawnPreview()
     ui.closeDocumentImport()
@@ -168,7 +166,7 @@ async function spawn() {
         </p>
 
         <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-muted">
-          <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
+          <Spinner class="h-4 w-4" />
           {{ t('documents.spawn.buildingPlan') }}
         </div>
 

package/app/components/documents/StartFromDesignModal.vue

@@ -20,6 +20,7 @@
 //    render identically. For a designer that widening IS the defect, not a detail.
 import { refRowFor, classifyRefFailure, type RefState } from './ContextDocumentPicker.logic'
 import type { DocumentSourceKind, ResolvedDocumentRef } from '~/types/domain'
+import Spinner from '~/components/common/Spinner.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -178,7 +179,7 @@ function stage() {
             v-if="state.status === 'checking'"
             class="flex items-center gap-2 text-sm text-muted"
           >
-            <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
+            <Spinner class="h-4 w-4" />
             {{ t('documents.startFromDesign.checking') }}
           </div>
 

package/app/components/documents/TaskContextDocs.vue

@@ -6,6 +6,7 @@ import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.
 import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import DocumentSyncState from '~/components/documents/DocumentSyncState.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Documents (from any source) attached to a task OR an initiative as agent
 // context, shown inside the InspectorPanel. An initiative takes the same
@@ -26,7 +27,7 @@ const props = defineProps<{ block: Block }>()
 const { t } = useI18n()
 const documents = useDocumentsStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { linkPending, presentLinkFailures } = useContextLinking()
 
 onMounted(() => {
@@ -88,7 +89,7 @@ async function attach(item: PendingContext) {
   try {
     const failures = await linkPending(props.block.id, [item])
     if (failures.length) presentLinkFailures(failures, props.block.id)
-    else toast.add({ title: t('documents.taskDocs.attached'), icon: 'i-lucide-link' })
+    else actionToast.success('documents.taskDocs.attached')
   } finally {
     linking.value = false
   }
@@ -165,8 +166,6 @@ async function attach(item: PendingContext) {
         <DocumentSyncState :doc="doc" class="mt-1" />
       </div>
     </div>
-    <p v-else class="text-2xs text-dimmed">
-      {{ emptyHint }}
-    </p>
+    <EmptyState v-else compact icon="i-lucide-file-text" :title="emptyHint" />
   </InspectorSection>
 </template>

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -10,6 +10,8 @@ import {
   showsProviderFailure,
 } from '~/components/environments/EnvironmentStatusPanel.logic'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   environment: RunEnvironment | null
@@ -112,13 +114,11 @@ const envInTransition = computed(
     </SectionLabel>
     <div v-if="environment" class="space-y-2">
       <div class="flex items-center gap-2 text-sm">
-        <UIcon
+        <Spinner
           :name="ENV_STATUS_META[environment.status].icon"
+          :spinning="runActive && envInTransition"
           class="h-3.5 w-3.5"
-          :class="[
-            ENV_STATUS_META[environment.status].color,
-            { 'animate-spin': runActive && envInTransition },
-          ]"
+          :class="ENV_STATUS_META[environment.status].color"
         />
         <span :class="ENV_STATUS_META[environment.status].color">{{
           ENV_STATUS_META[environment.status].label
@@ -166,8 +166,11 @@ const envInTransition = computed(
         {{ t('environments.statusNote', { note: statusNote }) }}
       </p>
     </div>
-    <p v-else class="text-xs text-dimmed">
-      {{ degradedReason ?? t('environments.empty') }}
-    </p>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-server"
+      :title="degradedReason ?? t('environments.empty')"
+    />
   </section>
 </template>

package/app/components/environments/steps/EnvPickStep.vue

@@ -5,6 +5,7 @@
 // advances to the review step. Rendered by `JourneyOutlet`, so it receives the
 // `ModuleEntryProps` (`input` / `exit` / `goBack`) as attributes.
 import type { EnvSelectOutput } from '~/modular/journeys/environmentSetup.logic'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 defineProps<{
   input: { frameId: string | null }
@@ -21,9 +22,12 @@ const { t } = useI18n()
     <!-- The one-service scope caveat, stated on the step that asks for the service: nothing
          here changes any other service, and running it twice just re-edits this one's recipe. -->
     <p class="text-xs leading-relaxed text-dimmed">{{ t('environmentWizard.pick.scope') }}</p>
-    <p v-if="!store.serviceFrames.length" class="text-sm text-dimmed">
-      {{ t('environmentWizard.pick.empty') }}
-    </p>
+    <EmptyState
+      v-if="!store.serviceFrames.length"
+      compact
+      icon="i-lucide-box"
+      :title="t('environmentWizard.pick.empty')"
+    />
     <div v-else class="space-y-1.5">
       <UButton
         v-for="frame in store.serviceFrames"