@cat-factory/app 0.311.2 → 0.312.0

package/app/components/github/AddServiceFromRepoModal.vue

@@ -41,7 +41,7 @@ const ui = useUiStore()
 const github = useGitHubStore()
 const board = useBoardStore()
 const services = useServicesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { freeFramePosition, focusFrame } = useFramePlacement()
 
@@ -349,11 +349,8 @@ async function add() {
     // Centre the camera on the newly imported service.
     await focusFrame(block.id)
     configuredBlockId.value = block.id
-    toast.add({
-      title: t('github.addService.toast.addedTitle'),
+    actionToast.success('github.addService.toast.addedTitle', {
       description: t('github.addService.toast.addedDescription', { title: block.title }),
-      icon: 'i-lucide-check',
-      color: 'success',
     })
   } catch (e) {
     present(e, 'github.addService.toast.addFailedTitle')
@@ -417,17 +414,16 @@ async function addServices() {
     const lastBlockId = created.at(-1)?.blockId
     if (lastBlockId) await focusFrame(lastBlockId)
     selectedDirectories.value = []
-    toast.add({
-      title: t('github.addService.toast.servicesAddedTitle'),
+    const added = {
       description: [
         t('github.addService.toast.servicesAddedDescription', { count: dirs.length }, dirs.length),
         frontendNote(designatedDirectory, wiringLanded),
       ]
         .filter(Boolean)
         .join(' '),
-      icon: wiringLanded ? 'i-lucide-check' : 'i-lucide-triangle-alert',
-      color: wiringLanded ? 'success' : 'warning',
-    })
+    }
+    if (wiringLanded) actionToast.success('github.addService.toast.servicesAddedTitle', added)
+    else actionToast.warning('github.addService.toast.servicesAddedTitle', added)
   } catch (e) {
     present(e, 'github.addService.toast.addFailedTitle')
   } finally {

package/app/components/github/GitHubConnect.vue

@@ -7,10 +7,11 @@
 // react to. Shared by the GitHub panel and the bootstrap modal so the connect
 // flow lives in one place.
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const installing = ref(false)
@@ -48,11 +49,7 @@ async function connect(id: number, onDone?: () => void) {
   try {
     await github.connect(id)
     onDone?.()
-    toast.add({
-      title: t('github.connect.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('github.connect.toast.connected')
   } catch (e) {
     present(e, 'github.connect.errors.connect')
   } finally {
@@ -90,20 +87,16 @@ async function connectManually() {
         </UButton>
       </div>
 
-      <div
-        v-if="github.loadingInstallations && !github.installations.length"
-        class="flex items-center gap-2 py-3 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
-        {{ t('github.connect.lookingForInstallations') }}
+      <div v-if="github.loadingInstallations && !github.installations.length" class="space-y-2">
+        <USkeleton v-for="i in 2" :key="i" class="h-12 w-full" />
       </div>
 
-      <p
+      <EmptyState
         v-else-if="!github.installations.length"
-        class="rounded-md border border-dashed border-default px-3 py-3 text-sm text-muted"
-      >
-        {{ t('github.connect.noInstallations') }}
-      </p>
+        compact
+        icon="i-lucide-github"
+        :title="t('github.connect.noInstallations')"
+      />
 
       <div
         v-for="inst in github.installations"

package/app/components/github/GitHubPanel.vue

@@ -12,12 +12,13 @@ import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const access = useWorkspaceAccess()
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -80,6 +81,12 @@ const PULL_TERMS = {
   },
 } as const satisfies Record<VcsProvider, Record<string, string>>
 const pullTerms = computed(() => PULL_TERMS[github.provider])
+// Skeleton rows only while there is nothing to show yet. `github.loading` is also set by every
+// refresh (after a resync, on re-open), and blanking lists the reader is looking at to skeletons
+// and back loses their place for no gain.
+const firstLoad = computed(
+  () => github.loading && !github.repos.length && !github.pulls.length && !github.issues.length,
+)
 
 // What the repo picker can offer, and why a repo might be missing from it, differ by how the
 // workspace authenticates rather than by provider: an App installation is shared across the
@@ -110,9 +117,8 @@ async function disconnect() {
   if (!ok) return
   try {
     await github.disconnect()
-    toast.add({
-      title: t('vcs.panel.toast.disconnected', { provider: VCS_PROVIDER_LABELS[github.provider] }),
-      icon: 'i-lucide-unplug',
+    actionToast.success('vcs.panel.toast.disconnected', {
+      params: { provider: VCS_PROVIDER_LABELS[github.provider] },
     })
   } catch (e) {
     present(e, 'github.panel.errors.disconnect')
@@ -122,11 +128,7 @@ async function disconnect() {
 async function resync(full = false) {
   try {
     const { status } = await github.resync({ full })
-    toast.add({
-      title: t('github.panel.toast.resync', { status }),
-      icon: 'i-lucide-refresh-cw',
-      color: 'info',
-    })
+    actionToast.info('github.panel.toast.resync', { params: { status } })
   } catch (e) {
     present(e, 'github.panel.errors.resync')
   }
@@ -168,11 +170,7 @@ async function saveRepos() {
   try {
     await github.setLinkedRepos([...selected.value])
     managing.value = false
-    toast.add({
-      title: t('github.panel.toast.reposUpdated'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('github.panel.toast.reposUpdated')
   } catch (e) {
     present(e, 'github.panel.errors.updateRepos')
   }
@@ -207,11 +205,7 @@ async function createBranch(repo: GitHubRepo) {
   try {
     await github.createBranch(repo.githubId, { name, fromSha })
     branchForm.value = { name: '', fromSha: '' }
-    toast.add({
-      title: t('github.panel.toast.branchCreated', { name }),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('github.panel.toast.branchCreated', { params: { name } })
   } catch (e) {
     present(e, 'github.panel.errors.createBranch')
   } finally {
@@ -259,7 +253,7 @@ async function openPr() {
     })
     showPrForm.value = false
     prForm.value = { repoGithubId: null, title: '', head: '', base: '' }
-    toast.add({ title: t(pullTerms.value.opened), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success(pullTerms.value.opened)
   } catch (e) {
     present(e, pullTerms.value.openFailed)
   } finally {
@@ -283,11 +277,7 @@ async function merge(pr: GitHubPullRequest) {
   merging.value = pr.number
   try {
     await github.mergePullRequest(pr.repoGithubId, pr.number, { method: 'squash' })
-    toast.add({
-      title: t(pullTerms.value.mergedToast, { number: pr.number }),
-      icon: 'i-lucide-git-merge',
-      color: 'success',
-    })
+    actionToast.success(pullTerms.value.mergedToast, { params: { number: pr.number } })
   } catch (e) {
     present(e, 'github.panel.errors.merge')
   } finally {
@@ -372,9 +362,8 @@ async function merge(pr: GitHubPullRequest) {
             </UButton>
           </div>
 
-          <div v-if="github.loading" class="flex items-center gap-2 py-6 text-sm text-muted">
-            <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
-            {{ t('github.panel.loading') }}
+          <div v-if="firstLoad" class="space-y-2">
+            <USkeleton v-for="i in 3" :key="i" class="h-12 w-full" />
           </div>
 
           <!-- repositories -->
@@ -405,20 +394,19 @@ async function merge(pr: GitHubPullRequest) {
                   isAppConnection ? t('vcs.panel.manageHintApp') : t('vcs.panel.manageHintToken')
                 }}
               </p>
-              <div
-                v-if="github.loadingAvailable"
-                class="flex items-center gap-2 py-3 text-sm text-muted"
-              >
-                <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
-                {{ t('github.panel.loadingRepos') }}
+              <div v-if="github.loadingAvailable" class="space-y-1">
+                <USkeleton v-for="i in 4" :key="i" class="h-8 w-full" />
               </div>
-              <p v-else-if="!github.availableRepos.length" class="py-2 text-sm text-muted">
-                {{
+              <EmptyState
+                v-else-if="!github.availableRepos.length"
+                compact
+                icon="i-lucide-folder-git-2"
+                :title="
                   isAppConnection
                     ? t('vcs.panel.noAvailableReposApp')
                     : t('vcs.panel.noAvailableReposToken')
-                }}
-              </p>
+                "
+              />
               <div v-else class="max-h-64 space-y-1 overflow-y-auto">
                 <UButton
                   color="neutral"
@@ -463,9 +451,12 @@ async function merge(pr: GitHubPullRequest) {
               </div>
             </div>
 
-            <p v-if="!github.repos.length && !managing" class="py-4 text-sm text-muted">
-              {{ t('github.panel.noLinkedRepos') }}
-            </p>
+            <EmptyState
+              v-if="!github.repos.length && !managing"
+              compact
+              icon="i-lucide-folder-git-2"
+              :title="t('github.panel.noLinkedRepos')"
+            />
 
             <!-- Whether the host actually protects what an agent run pushes to. Placed above the
                  repo list because it is a posture check across ALL of them, not a per-repo
@@ -634,9 +625,12 @@ async function merge(pr: GitHubPullRequest) {
               </div>
             </div>
 
-            <p v-if="!github.pulls.length" class="py-4 text-sm text-muted">
-              {{ t(pullTerms.none) }}
-            </p>
+            <EmptyState
+              v-if="!github.pulls.length"
+              compact
+              icon="i-lucide-git-pull-request"
+              :title="t(pullTerms.none)"
+            />
             <div
               v-for="pr in github.pulls"
               :key="`${pr.repoGithubId}-${pr.number}`"
@@ -681,9 +675,12 @@ async function merge(pr: GitHubPullRequest) {
 
           <!-- issues -->
           <section v-else class="space-y-2">
-            <p v-if="!github.issues.length" class="py-4 text-sm text-muted">
-              {{ t('github.panel.noIssues') }}
-            </p>
+            <EmptyState
+              v-if="!github.issues.length"
+              compact
+              icon="i-lucide-circle-dot"
+              :title="t('github.panel.noIssues')"
+            />
             <div
               v-for="issue in github.issues"
               :key="`${issue.repoGithubId}-${issue.number}`"

package/app/components/github/RepoTreeBrowser.vue

@@ -19,6 +19,7 @@
 // service-directory field). Nothing in the tree can be the target then, so the pick is the
 // folder the caller is standing in and the emitted value is that folder plus the new name.
 import type { RepoTreeEntry } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -194,12 +195,15 @@ watch(
 
     <!-- listing -->
     <div class="max-h-56 overflow-auto rounded-sm border border-default">
-      <div v-if="loading" class="p-3 text-sm text-muted">
-        {{ t('github.repoTree.loading') }}
-      </div>
-      <div v-else-if="isEmpty" class="p-3 text-sm text-muted">
-        {{ mode === 'dir' ? t('github.repoTree.noSubdirectories') : t('github.repoTree.empty') }}
+      <div v-if="loading" class="space-y-1 p-2">
+        <USkeleton v-for="i in 4" :key="i" class="h-7 w-full" />
       </div>
+      <EmptyState
+        v-else-if="isEmpty"
+        compact
+        icon="i-lucide-folder-open"
+        :title="mode === 'dir' ? t('github.repoTree.noSubdirectories') : t('github.repoTree.empty')"
+      />
       <ul v-else class="divide-y divide-default">
         <li
           v-for="entry in dirEntries"

package/app/components/guidedReview/GuidedReviewModal.vue

@@ -7,6 +7,7 @@ import type { OpenGuidedReviewInput } from '~/types/domain'
 import GuidedReviewOverview from '~/components/guidedReview/GuidedReviewOverview.vue'
 import GuidedReviewThread from '~/components/guidedReview/GuidedReviewThread.vue'
 import GuidedReviewPicker from '~/components/guidedReview/GuidedReviewPicker.vue'
+import Spinner from '~/components/common/Spinner.vue'
 import {
   NEW_THREAD_TAB,
   isStale,
@@ -175,10 +176,16 @@ const title = computed(() =>
         @open="openFor"
       />
 
-      <p v-else-if="!session" class="flex items-center gap-2 text-sm text-muted">
-        <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-        {{ t('guidedReview.loading') }}
-      </p>
+      <div v-else-if="!session" class="flex h-full min-h-0 flex-col gap-4 lg:flex-row">
+        <div class="space-y-3 lg:w-2/5 lg:pr-2">
+          <USkeleton class="h-6 w-2/3" />
+          <USkeleton v-for="n in 4" :key="n" class="h-4 w-full" />
+        </div>
+        <div class="flex flex-1 flex-col gap-3">
+          <USkeleton class="h-8 w-1/2" />
+          <USkeleton class="h-48 w-full rounded-lg" />
+        </div>
+      </div>
 
       <div v-else class="flex h-full min-h-0 flex-col gap-4 lg:flex-row">
         <div class="min-h-0 space-y-3 overflow-y-auto lg:w-2/5 lg:pr-2">
@@ -210,11 +217,14 @@ const title = computed(() =>
               :aria-selected="tab === activeTab"
               :variant="tab === activeTab ? 'soft' : 'ghost'"
               :color="tab === activeTab ? 'primary' : 'neutral'"
-              :icon="threadBusy(tab) ? 'i-lucide-loader-circle' : undefined"
-              :ui="{ leadingIcon: threadBusy(tab) ? 'animate-spin' : '' }"
               :data-testid="`guided-review-tab-${tab}`"
               @click="activeTab = tab"
             >
+              <!-- Not `:loading`: that disables the tab, and a reader switches back to a thread
+                   precisely while its reply is pending. -->
+              <template v-if="threadBusy(tab)" #leading>
+                <Spinner class="size-4 shrink-0" />
+              </template>
               <span class="max-w-48 truncate">{{ threadTitle(tab) }}</span>
             </UButton>
             <UButton

package/app/components/guidedReview/GuidedReviewOverview.vue

@@ -3,6 +3,7 @@
 // chips the window turns into new threads.
 import type { GuidedReviewSession } from '~/types/domain'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import Spinner from '~/components/common/Spinner.vue'
 import GuidedReviewFailure from '~/components/guidedReview/GuidedReviewFailure.vue'
 import { citationLabel } from '~/components/guidedReview/GuidedReview.logic'
 
@@ -53,7 +54,7 @@ const SEVERITY_COLOR = { high: 'error', medium: 'warning', low: 'neutral' } as c
       class="flex items-center gap-2 text-sm text-muted"
       data-testid="guided-review-overview-working"
     >
-      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+      <Spinner class="h-4 w-4" />
       {{ t('guidedReview.overview.working') }}
     </p>
 

package/app/components/guidedReview/GuidedReviewPicker.vue

@@ -2,6 +2,7 @@
 // Pick a linked repository and one of its pull requests (an open one from the synced list, or any
 // number typed in) to open a guided review on.
 import type { OpenGuidedReviewInput } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 defineProps<{ opening: boolean; loading: boolean }>()
 const emit = defineEmits<{ open: [target: OpenGuidedReviewInput] }>()
@@ -34,13 +35,15 @@ function submit(number = prNumber.value): void {
 <template>
   <div class="mx-auto max-w-xl space-y-4" data-testid="guided-review-picker">
     <p class="text-sm text-muted">{{ t('guidedReview.picker.intro') }}</p>
-    <p v-if="loading" class="flex items-center gap-2 text-sm text-muted">
-      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-      {{ t('guidedReview.picker.loading') }}
-    </p>
-    <p v-else-if="!github.repos.length" class="text-sm text-toned">
-      {{ t('guidedReview.picker.noRepos') }}
-    </p>
+    <div v-if="loading" class="space-y-4">
+      <USkeleton class="h-8 w-full" />
+      <USkeleton class="h-8 w-full" />
+    </div>
+    <EmptyState
+      v-else-if="!github.repos.length"
+      icon="i-lucide-folder-git-2"
+      :title="t('guidedReview.picker.noRepos')"
+    />
     <template v-else>
       <UFormField :label="t('guidedReview.picker.repo')">
         <USelectMenu

package/app/components/guidedReview/GuidedReviewThread.vue

@@ -4,6 +4,8 @@
 import { isPostableDraft } from '@cat-factory/contracts'
 import type { GuidedReviewCommentDraft, GuidedReviewThreadView } from '~/types/domain'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 import GuidedReviewFailure from '~/components/guidedReview/GuidedReviewFailure.vue'
 import GuidedReviewDraftCard from '~/components/guidedReview/GuidedReviewDraftCard.vue'
 import {
@@ -112,9 +114,12 @@ async function draftComments(): Promise<void> {
 <template>
   <div class="flex h-full min-h-0 flex-col gap-3" data-testid="guided-review-thread">
     <div class="min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
-      <p v-if="!messages.length" class="text-sm text-muted">
-        {{ t('guidedReview.thread.empty') }}
-      </p>
+      <EmptyState
+        v-if="!messages.length"
+        compact
+        icon="i-lucide-message-circle-question"
+        :title="t('guidedReview.thread.empty')"
+      />
       <div
         v-for="m in messages"
         :key="m.id"
@@ -129,7 +134,7 @@ async function draftComments(): Promise<void> {
           <p class="whitespace-pre-wrap">{{ m.content }}</p>
         </template>
         <p v-else-if="isLive(m)" class="flex items-center gap-2 text-muted">
-          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+          <Spinner class="h-4 w-4" />
           {{
             m.depth === 'deep'
               ? t('guidedReview.thread.investigating')

package/app/components/humanTest/HumanTestWindow.vue

@@ -16,6 +16,7 @@ type HumanTestRoundOutcome = NonNullable<HumanTestRound['outcome']>
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -253,7 +254,7 @@ const canDestroy = computed(
           v-if="working"
           class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-xs text-toned"
         >
-          <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-app-warning-300" />
+          <Spinner class="h-3.5 w-3.5 text-app-warning-300" />
           {{ phase ? t(PHASE_LABEL[phase]) : '' }}
         </p>
 

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -37,6 +37,7 @@ import {
 } from '~/utils/interviewGate'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
@@ -212,13 +213,12 @@ async function onDiscard() {
     <div class="flex min-h-0 flex-1">
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
         <!-- No entity yet -->
-        <div
+        <EmptyState
           v-if="!initiative"
-          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('initiative.planning.empty') }}</p>
-        </div>
+          class="h-full"
+          icon="i-lucide-messages-square"
+          :title="t('initiative.planning.empty')"
+        />
 
         <template v-else>
           <p class="mb-4 text-sm leading-relaxed text-toned">

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -31,6 +31,7 @@ import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import InitiativePlanReview from '~/components/initiative/InitiativePlanReview.vue'
 import InitiativePlanNotice from '~/components/initiative/InitiativePlanNotice.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
@@ -373,14 +374,12 @@ const { requestClose } = useUnsavedGuard({
         <!-- No entity yet (module unwired / still creating). Centred in the column when it is the
              only thing in it; merely inset when the notice above it means `h-full` would overflow
              the scroller by the notice's own height. -->
-        <div
+        <EmptyState
           v-if="!initiative"
-          class="flex flex-col items-center justify-center gap-2 text-center text-muted"
           :class="planApproval ? 'py-16' : 'h-full'"
-        >
-          <UIcon name="i-lucide-milestone" class="h-8 w-8 opacity-40" />
-          <p class="text-sm">{{ t('initiative.tracker.empty') }}</p>
-        </div>
+          icon="i-lucide-milestone"
+          :title="t('initiative.tracker.empty')"
+        />
 
         <template v-else>
           <!-- Paused at a phase checkpoint (D2): a completed checkpoint phase is awaiting
@@ -467,12 +466,13 @@ const { requestClose } = useUnsavedGuard({
           </section>
 
           <!-- Awaiting planning -->
-          <div
+          <EmptyState
             v-if="phases.length === 0"
-            class="mb-4 rounded-lg border border-dashed border-muted p-4 text-center text-xs text-muted"
-          >
-            {{ t('initiative.tracker.noPlan') }}
-          </div>
+            class="mb-4"
+            compact
+            icon="i-lucide-list-todo"
+            :title="t('initiative.tracker.noPlan')"
+          />
 
           <!-- Phases + items -->
           <section v-for="phase in phases" :key="phase.id" class="mb-5">

package/app/components/judge/JudgeResultView.vue

@@ -14,6 +14,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -149,13 +150,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
     </template>
 
     <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-      <div
-        v-if="!judge"
-        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('judge.empty') }}</p>
-      </div>
+      <EmptyState v-if="!judge" :icon="meta.icon" :title="t('judge.empty')" />
 
       <template v-else>
         <!-- The score against the task's threshold — the whole verdict in one line. -->

package/app/components/kaizen/KaizenPanel.vue

@@ -4,6 +4,7 @@ import { onKeyStroke } from '@vueuse/core'
 import type { TableColumn } from '@nuxt/ui'
 import type { KaizenGrading } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
+import EmptyState from '~/components/common/EmptyState.vue'
 import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // The Kaizen screen: a full-panel overlay listing the workspace's grading history and
@@ -123,7 +124,16 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
             <p class="mb-3 text-2xs text-dimmed">
               {{ t('kaizen.verifiedCombos.hint') }}
             </p>
-            <ul class="space-y-2">
+            <div v-if="kaizen.loadingOverview && kaizen.verified.length === 0" class="space-y-2">
+              <USkeleton v-for="n in 3" :key="n" class="h-14 w-full rounded-lg" />
+            </div>
+            <EmptyState
+              v-else-if="kaizen.verified.length === 0"
+              compact
+              icon="i-lucide-badge-check"
+              :title="t('kaizen.verifiedCombos.empty')"
+            />
+            <ul v-else class="space-y-2">
               <li
                 v-for="c in kaizen.verified"
                 :key="c.comboKey"
@@ -156,9 +166,6 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
                   }}
                 </div>
               </li>
-              <li v-if="kaizen.verified.length === 0" class="text-xs text-app-600">
-                {{ t('kaizen.verifiedCombos.empty') }}
-              </li>
             </ul>
           </section>
 
@@ -171,6 +178,7 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
             <UTable
               :data="kaizen.history"
               :columns="historyColumns"
+              :loading="kaizen.loadingOverview"
               :ui="{
                 root: 'overflow-hidden rounded-lg border border-default',
                 base: 'text-xs',
@@ -220,8 +228,15 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
                   </span>
                 </div>
               </template>
+              <!-- UTable draws its loading row only through this slot; without it an empty first
+                   load falls through to #empty and claims there is no history. -->
+              <template #loading>
+                <div class="space-y-2">
+                  <USkeleton v-for="n in 3" :key="n" class="h-8 w-full" />
+                </div>
+              </template>
               <template #empty>
-                <span class="text-app-600">{{ t('kaizen.history.empty') }}</span>
+                <EmptyState compact icon="i-lucide-history" :title="t('kaizen.history.empty')" />
               </template>
             </UTable>
           </section>

package/app/components/kaizen/KaizenStepStatus.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Per-step Kaizen grading status, shown inside the run window (NOT on the board). Reads
 // the grading for this run's step from the kaizen store, lazily loading the run's
@@ -54,7 +55,7 @@ const tone = computed(() => {
           <span class="text-muted">{{ t('kaizen.status.scheduled') }}</span>
         </template>
         <template v-else-if="grading.status === 'running'">
-          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin text-app-hue-teal" />
+          <Spinner class="h-3.5 w-3.5 text-app-hue-teal" />
           <span class="text-app-hue-teal">{{ t('kaizen.status.grading') }}</span>
         </template>
         <template v-else-if="grading.status === 'failed'">