@cat-factory/app 0.311.1 → 0.311.3

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>
 

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/AsyncViewError.vue

@@ -12,7 +12,7 @@ function reload() {
   <!-- safe-area-ok: a scrim with one card centred on it, so no content reaches an edge -->
   <div
     data-testid="async-view-error"
-    class="fixed inset-0 z-50 grid place-items-center bg-app-950/80 p-6 backdrop-blur-sm"
+    class="fixed inset-0 z-50 grid place-items-center bg-elevated/75 p-6 backdrop-blur-sm"
     role="alert"
   >
     <div class="max-w-sm rounded-2xl border border-muted bg-default p-5 shadow-2xl">

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