@cat-factory/app 0.311.1 → 0.311.3

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -32,7 +32,7 @@ const store = useWorkspaceSettingsStore()
 const workspace = useWorkspaceStore()
 const access = useWorkspaceAccess()
 const pipelines = usePipelinesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const slots = useReactiveSlots<AppSlots>()
 // Whether the deployment registers any reusable operation at all, hidden or not, so the
@@ -283,11 +283,7 @@ async function save() {
   // Mirror the backend's enforce-mode validation client-side so the user gets an immediate,
   // localized message instead of the raw 422 (enforce needs at least one hard trigger).
   if (draft.reviewFrictionMode === 'enforce' && blockCount == null && blockStuckMinutes == null) {
-    toast.add({
-      title: t('settings.workspaceSettings.reviewFriction.needsTrigger'),
-      icon: 'i-lucide-triangle-alert',
-      color: 'warning',
-    })
+    actionToast.error('settings.workspaceSettings.reviewFriction.needsTrigger')
     return
   }
   saving.value = true
@@ -322,11 +318,7 @@ async function save() {
       reviewFrictionBlockCount: blockCount,
       reviewFrictionBlockStuckMinutes: blockStuckMinutes,
     })
-    toast.add({
-      title: t('settings.workspaceSettings.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.workspaceSettings.toast.saved')
   } catch (e) {
     present(e, 'settings.workspaceSettings.toast.saveFailed')
   } finally {

package/app/components/skills/ReviewSkillQueue.vue

@@ -18,6 +18,7 @@ import { computed, ref } from 'vue'
 import { MAX_REVIEW_SKILLS } from '@cat-factory/contracts'
 import { useSkillsStore } from '~/stores/skills'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   /** The queued skill ids, in the order the reviewer applies them (`v-model`). */
@@ -109,9 +110,12 @@ function toggle(id: string) {
                   </span>
                 </UButton>
               </template>
-              <p v-else class="px-2 py-3 text-xs text-dimmed">
-                {{ t('skills.reviewQueue.pickerEmpty') }}
-              </p>
+              <EmptyState
+                v-else
+                compact
+                icon="i-lucide-book-open-check"
+                :title="t('skills.reviewQueue.pickerEmpty')"
+              />
             </div>
 
             <p

package/app/components/skills/SkillLibraryManager.vue

@@ -13,12 +13,13 @@ import { SKILL_GROUP_LABEL_KEYS } from '~/utils/skills'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ accountId: string }>()
 
 const library = useSkillLibrary(props.accountId)
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
@@ -85,7 +86,7 @@ async function linkSource() {
       gitRef: sourceRef.value.trim() || undefined,
     })
     resetSourceDraft()
-    toast.add({ title: t('skills.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
+    actionToast.success('skills.toast.sourceLinked')
   } catch (e) {
     present(e, 'skills.toast.linkSourceFailed')
   } finally {
@@ -97,13 +98,11 @@ async function syncSource(id: string) {
   await withRow(`sync:${id}`, async () => {
     try {
       const result = await library.syncSource(id)
-      toast.add({
-        title: t('skills.toast.synced', {
+      actionToast.success('skills.toast.synced', {
+        params: {
           updated: result.upserted,
           removed: result.tombstoned,
-        }),
-        icon: 'i-lucide-refresh-cw',
-        color: 'info',
+        },
       })
     } catch (e) {
       present(e, 'skills.toast.syncFailed')
@@ -115,10 +114,7 @@ async function checkSource(id: string) {
   await withRow(`check:${id}`, async () => {
     try {
       const status = await library.checkSource(id)
-      toast.add({
-        title: status.changed ? t('skills.toast.changesAvailable') : t('skills.toast.upToDate'),
-        icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-      })
+      actionToast.info(status.changed ? 'skills.toast.changesAvailable' : 'skills.toast.upToDate')
     } catch (e) {
       present(e, 'skills.toast.checkSourceFailed')
     }
@@ -139,7 +135,7 @@ async function unlinkSource(id: string) {
   await withRow(`unlink:${id}`, async () => {
     try {
       await library.unlinkSource(id)
-      toast.add({ title: t('skills.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
+      actionToast.success('skills.toast.sourceUnlinked')
     } catch (e) {
       present(e, 'skills.toast.unlinkSourceFailed')
     }
@@ -195,9 +191,12 @@ async function unlinkSource(id: string) {
             </p>
           </div>
         </div>
-        <p v-if="!library.catalog.length" class="text-sm text-dimmed">
-          {{ t('skills.catalog.empty') }}
-        </p>
+        <EmptyState
+          v-if="!library.catalog.length"
+          compact
+          icon="i-lucide-book-open-check"
+          :title="t('skills.catalog.empty')"
+        />
       </div>
 
       <!-- Repo sources -->
@@ -264,9 +263,12 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!library.sources.length" class="text-sm text-dimmed">
-          {{ t('skills.sources.empty') }}
-        </p>
+        <EmptyState
+          v-if="!library.sources.length"
+          compact
+          icon="i-lucide-git-branch"
+          :title="t('skills.sources.empty')"
+        />
 
         <!-- Link a new source. Needs the GitHub integration; hide the form when it's off. -->
         <div

package/app/components/slack/SlackPanel.vue

@@ -20,7 +20,7 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const slack = useSlackStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirm } = useConfirm()
@@ -134,7 +134,7 @@ async function connectWithToken() {
   try {
     await slack.connectWithToken(tokenInput.value.trim())
     tokenInput.value = ''
-    toast.add({ title: t('slack.toast.connected'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('slack.toast.connected')
   } catch (e) {
     present(e, 'slack.error.connect')
   }
@@ -163,7 +163,7 @@ async function saveRouting() {
       routes: { ...routes },
       mentionsEnabled: mentionsEnabled.value,
     })
-    toast.add({ title: t('slack.toast.routingSaved'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('slack.toast.routingSaved')
   } catch (e) {
     present(e, 'slack.error.saveRouting')
   } finally {
@@ -182,11 +182,8 @@ async function saveMapping() {
   // dropped on save (UX-23) — block instead so the user doesn't lose the entry. A
   // fully-empty row is just an unused slot and is ignored.
   if (hasHalfFilledRow(mapping.value)) {
-    toast.add({
-      title: t('slack.members.incompleteTitle'),
+    actionToast.error('slack.members.incompleteTitle', {
       description: t('slack.members.incompleteBody'),
-      icon: 'i-lucide-triangle-alert',
-      color: 'warning',
     })
     return
   }
@@ -195,7 +192,7 @@ async function saveMapping() {
     const entries = toMemberEntries(mapping.value)
     await slack.updateMemberMapping(entries)
     mapping.value = slack.memberMapping.map((e) => toMemberRow(e, nextUid()))
-    toast.add({ title: t('slack.toast.mapSaved'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('slack.toast.mapSaved')
   } catch (e) {
     present(e, 'slack.error.saveMap')
   } finally {

package/app/components/spec/ServiceSpecWindow.vue

@@ -23,6 +23,7 @@ import {
 } from './ServiceSpecWindow.logic'
 import type { BadgeColor } from '~/utils/badge'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const board = useBoardStore()
@@ -225,12 +226,14 @@ function kindLabel(item: RequirementItem): string {
     </template>
 
     <!-- loading -->
-    <div
-      v-if="loading && !view"
-      class="flex flex-1 items-center justify-center gap-2 text-sm text-muted"
-    >
-      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-      {{ t('spec.loading') }}
+    <div v-if="loading && !view" class="flex min-h-0 flex-1">
+      <div class="w-64 shrink-0 space-y-2 border-e border-default px-3 py-4">
+        <USkeleton v-for="n in 6" :key="n" class="h-6 w-full" />
+      </div>
+      <div class="flex-1 space-y-3 px-6 py-4">
+        <USkeleton class="h-6 w-1/3" />
+        <USkeleton v-for="n in 4" :key="n" class="h-4 w-full" />
+      </div>
     </div>
 
     <!-- error -->
@@ -253,18 +256,13 @@ function kindLabel(item: RequirementItem): string {
     </div>
 
     <!-- empty: no spec on the repo's default branch yet -->
-    <div
+    <EmptyState
       v-else-if="!present"
-      class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center"
-    >
-      <UIcon name="i-lucide-scroll-text" class="h-8 w-8 text-app-600" />
-      <div>
-        <p class="text-sm font-medium text-toned">{{ t('spec.empty.title') }}</p>
-        <p class="mx-auto mt-1 max-w-md text-xs text-dimmed">
-          {{ t('spec.empty.description') }}
-        </p>
-      </div>
-    </div>
+      class="flex-1"
+      icon="i-lucide-scroll-text"
+      :title="t('spec.empty.title')"
+      :description="t('spec.empty.description')"
+    />
 
     <!-- spec body: navigable tree + detail -->
     <div v-else class="flex min-h-0 flex-1">
@@ -368,19 +366,22 @@ function kindLabel(item: RequirementItem): string {
               v-if="selectedFeature"
               class="mt-4 overflow-x-auto rounded-lg border border-default bg-app-950/60 p-4 text-xs leading-relaxed text-default"
             ><code>{{ selectedFeature.content }}</code></pre>
-            <div
+            <EmptyState
               v-else
-              class="mt-4 rounded-lg border border-dashed border-muted p-6 text-center text-sm text-dimmed"
-            >
-              {{ t('spec.noGherkinForGroup') }}
-            </div>
+              class="mt-4"
+              icon="i-lucide-file-code"
+              :title="t('spec.noGherkinForGroup')"
+            />
           </template>
 
           <!-- STRUCTURED view: requirements + acceptance + domain rules -->
           <template v-else>
-            <div v-if="reqCount(selectedGroup) === 0" class="mt-4 text-sm text-dimmed">
-              {{ t('spec.noRequirements') }}
-            </div>
+            <EmptyState
+              v-if="reqCount(selectedGroup) === 0"
+              class="mt-4"
+              icon="i-lucide-list-checks"
+              :title="t('spec.noRequirements')"
+            />
             <!-- per-group implementation-state rollup + the filter over the two halves -->
             <div
               v-else
@@ -421,12 +422,14 @@ function kindLabel(item: RequirementItem): string {
                  rendering a blank pane that reads like "no requirements". The filter is sticky
                  across groups, so the reader may have set it several groups ago — offer the way
                  back here rather than making them find the toggle again. -->
-            <div
+            <EmptyState
               v-if="reqCount(selectedGroup) > 0 && visibleRequirements.length === 0"
-              class="mt-4 flex flex-wrap items-center gap-2 text-sm text-dimmed"
+              class="mt-4"
+              compact
+              icon="i-lucide-filter-x"
+              :title="t('spec.state.noneMatchFilter')"
               data-testid="spec-state-filter-empty"
             >
-              {{ t('spec.state.noneMatchFilter') }}
               <UButton
                 variant="link"
                 size="xs"
@@ -440,7 +443,7 @@ function kindLabel(item: RequirementItem): string {
               >
                 {{ t('spec.state.showAll') }}
               </UButton>
-            </div>
+            </EmptyState>
             <ul class="mt-4 space-y-4">
               <li
                 v-for="req in visibleRequirements"

package/app/components/tasks/BugHuntModal.vue

@@ -43,6 +43,7 @@ import {
   sourceMenuItems,
 } from '~/utils/sourcePicker'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 import { appliesIntakePredicate } from '~/utils/intakePredicates'
 import { boardFromService as isBoardFromService, huntRequest } from './BugHuntModal.logic'
 
@@ -52,8 +53,8 @@ const tasks = useTasksStore()
 const hunt = useBugHuntStore()
 const board = useBoardStore()
 const github = useGitHubStore()
-const toast = useToast()
-const { present } = usePipelineErrorToast()
+const actionToast = useActionToast()
+const { present, presentReported } = usePipelineErrorToast()
 
 const open = computed({
   get: () => ui.bugHunt !== null,
@@ -195,8 +196,12 @@ const REFUSAL_KEYS: Partial<Record<TaskSourceReadReason, string>> = {
   board_from_service: 'bugHunt.refusal.boardFromService',
   missing_board: 'bugHunt.refusal.missingBoard',
 }
+/** The translated key for a refusal reason this modal recognises, or undefined. */
+function refusalKey(reason: string | null): string | undefined {
+  return reason ? REFUSAL_KEYS[reason as TaskSourceReadReason] : undefined
+}
 function refusalText(reason: string | null, fallback: string | null): string | null {
-  const key = reason ? REFUSAL_KEYS[reason as TaskSourceReadReason] : undefined
+  const key = refusalKey(reason)
   return key ? t(key) : fallback
 }
 
@@ -278,12 +283,11 @@ async function runHunt() {
   // `repo_not_linked` is worded by the panel itself beside the scope it invalidates.
   const attempt = await hunt.hunt(source.value, input)
   if (attempt === 'failed' && !huntNeedsRepo.value) {
-    toast.add({
-      title: t('bugHunt.huntFailed'),
-      description: refusalText(hunt.huntErrorReason, hunt.huntError) ?? undefined,
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
+    // A recognised refusal reads in translated copy; anything else is the backend's prose, which
+    // is detail behind the disclosure rather than the headline.
+    const reasonKey = refusalKey(hunt.huntErrorReason)
+    if (reasonKey) actionToast.error('bugHunt.huntFailed', { description: t(reasonKey) })
+    else presentReported(hunt.huntError, 'bugHunt.huntFailed')
   }
 }
 
@@ -294,10 +298,9 @@ async function adopt(candidate: BugHuntCandidate) {
     if (!blockId) return // the user cancelled the personal-credential prompt
     ui.closeBugHunt()
     ui.select(blockId)
-    toast.add({
-      title: t('bugHunt.adopted', { id: candidate.externalId }),
+    actionToast.success('bugHunt.adopted', {
+      params: { id: candidate.externalId },
       description: t('bugHunt.adoptedRunning'),
-      icon: 'i-lucide-bug-play',
     })
   } catch (e) {
     present(e, 'bugHunt.adoptFailed')
@@ -338,9 +341,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
     </template>
     <template #body>
       <!-- No tracker offered (none connected/installed, or all disabled). -->
-      <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
-        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-dimmed" />
-        <p class="text-sm text-muted">{{ t('bugHunt.connectFirst') }}</p>
+      <EmptyState v-if="!tasks.anyOffered" icon="i-lucide-plug" :title="t('bugHunt.connectFirst')">
         <div class="flex flex-wrap justify-center gap-2">
           <UButton
             v-for="choice in addableSources"
@@ -352,7 +353,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
             {{ ADD_LABEL[choice.action](choice.label) }}
           </UButton>
         </div>
-      </div>
+      </EmptyState>
 
       <!-- No service frame yet → nowhere for an adopted bug to land. -->
       <p v-else-if="!containerItems.length" class="text-center text-xs text-dimmed">
@@ -576,9 +577,12 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
             </div>
           </div>
 
-          <p v-if="!hunt.candidates.length" class="text-center text-xs text-dimmed">
-            {{ t('bugHunt.noCandidates') }}
-          </p>
+          <EmptyState
+            v-if="!hunt.candidates.length"
+            compact
+            icon="i-lucide-bug-off"
+            :title="t('bugHunt.noCandidates')"
+          />
         </div>
       </div>
     </template>

package/app/components/tasks/ContextIssuePicker.vue

@@ -321,8 +321,8 @@ onMounted(() => {
 
     <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/tasks/TaskContextIssues.vue

@@ -18,13 +18,14 @@ import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ block: Block }>()
 
 const { t } = useI18n()
 const tasks = useTasksStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { linkPending, presentLinkFailures } = useContextLinking()
 
 onMounted(() => {
@@ -78,7 +79,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('tasks.contextIssues.attached'), icon: 'i-lucide-link' })
+    else actionToast.success('tasks.contextIssues.attached')
   } finally {
     linking.value = false
   }
@@ -151,8 +152,6 @@ async function attach(item: PendingContext) {
         </UBadge>
       </ULink>
     </div>
-    <p v-else class="text-2xs text-dimmed">
-      {{ emptyHint }}
-    </p>
+    <EmptyState v-else compact icon="i-lucide-ticket" :title="emptyHint" />
   </InspectorSection>
 </template>

package/app/components/tasks/TaskImportModal.vue

@@ -18,11 +18,12 @@ import { type AddSourceLabels, addChoicesOf, buildSourceChoices } from '~/utils/
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const tasks = useTasksStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const open = computed({
@@ -106,10 +107,9 @@ async function doSpawnEpic() {
     ref_.value = ''
     ui.closeTaskImport()
     ui.select(epic.id)
-    toast.add({
-      title: t('tasks.import.epicSpawned', { title: epic.title }),
+    actionToast.success('tasks.import.epicSpawned', {
+      params: { title: epic.title },
       description: t('tasks.import.epicChildren', { count: spawned.length }, spawned.length),
-      icon: 'i-lucide-layers',
     })
   } catch (e) {
     present(e, 'tasks.import.epicFailed')
@@ -126,9 +126,11 @@ async function doSpawnEpic() {
     </template>
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
-      <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
-        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-dimmed" />
-        <p class="text-sm text-muted">{{ t('tasks.import.connectFirst') }}</p>
+      <EmptyState
+        v-if="!tasks.anyOffered"
+        icon="i-lucide-plug"
+        :title="t('tasks.import.connectFirst')"
+      >
         <div class="flex justify-center gap-2">
           <UButton
             v-for="choice in addableSources"
@@ -140,7 +142,7 @@ async function doSpawnEpic() {
             {{ ADD_LABEL[choice.action](choice.label) }}
           </UButton>
         </div>
-      </div>
+      </EmptyState>
 
       <!-- No service frame yet → nowhere to create a task. -->
       <p v-else-if="!containerItems.length" class="text-center text-xs text-dimmed">

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -16,7 +16,7 @@ import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const tasks = useTasksStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction } = useConfirmAction()
 
@@ -63,10 +63,8 @@ async function submit() {
   saving.value = true
   try {
     await tasks.connect(source.value, credentials)
-    toast.add({
-      title: t('tasks.connect.connectedToast', { label: descriptor.value!.label }),
-      icon: 'i-lucide-check',
-      color: 'success',
+    actionToast.success('tasks.connect.connectedToast', {
+      params: { label: descriptor.value!.label },
     })
     // Re-probe so `available`/`enabled` reflect the new connection.
     await tasks.probe()
@@ -93,12 +91,14 @@ async function disconnect() {
   if (!source.value) return
   const label = descriptor.value?.label ?? t('tasks.connect.sourceFallback')
   if (!(await confirmAction('disconnect', label))) return
-  await tasks.disconnect(source.value)
-  await tasks.probe()
-  toast.add({
-    title: t('tasks.connect.disconnectedToast', { label }),
-    icon: 'i-lucide-unplug',
-  })
+  try {
+    await tasks.disconnect(source.value)
+    await tasks.probe()
+  } catch (e) {
+    present(e, 'tasks.connect.disconnectFailed')
+    return
+  }
+  actionToast.success('tasks.connect.disconnectedToast', { params: { label } })
   ui.closeTaskConnect()
 }
 

package/app/components/testing/TestReportWindow.vue

@@ -789,15 +789,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                       class="h-full w-full object-cover object-top"
                     />
                     <span
-                      v-else
+                      v-else-if="blobs.statusFor(s.artifactId) === 'error'"
                       class="flex h-full w-full items-center justify-center text-3xs text-app-600"
                     >
-                      {{
-                        blobs.statusFor(s.artifactId) === 'error'
-                          ? t('testing.shot.failed')
-                          : t('testing.shot.loading')
-                      }}
+                      {{ t('testing.shot.failed') }}
                     </span>
+                    <USkeleton v-else class="h-full w-full rounded-none" />
                     <span
                       class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1 py-0.5 text-3xs text-toned"
                       >{{ s.view }}</span
@@ -830,15 +827,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   class="h-full w-full object-cover object-top"
                 />
                 <span
-                  v-else
+                  v-else-if="blobs.statusFor(s.artifactId) === 'error'"
                   class="flex h-full w-full items-center justify-center text-2xs text-app-600"
                 >
-                  {{
-                    blobs.statusFor(s.artifactId) === 'error'
-                      ? t('testing.shot.failedToLoad')
-                      : t('testing.shot.loading')
-                  }}
+                  {{ t('testing.shot.failedToLoad') }}
                 </span>
+                <USkeleton v-else class="h-full w-full rounded-none" />
                 <span
                   class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1.5 py-0.5 text-3xs text-toned"
                   >{{ s.view }}</span

package/app/components/tutorial/TutorialCatalogue.vue

@@ -13,6 +13,7 @@
 import { buildCatalogueRows, summarizeProgress } from './TutorialCatalogue.logic'
 import type { TutorialCatalogueRow } from './TutorialCatalogue.logic'
 import { TUTORIAL_ACTION_KEYS, TUTORIAL_STATUS_KEYS } from '~/utils/tutorial'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const tutorial = useTutorialStore()
@@ -129,9 +130,12 @@ const statusColor = (row: TutorialCatalogueRow) =>
         </ul>
         <!-- No tours at all is a real state (a deployment may register none of its own and
              strip the built-ins), and it is not the same as one whose tours are all blocked. -->
-        <p v-if="rows.length === 0" class="text-sm text-muted">
-          {{ t('tutorial.catalogue.empty') }}
-        </p>
+        <EmptyState
+          v-if="rows.length === 0"
+          compact
+          icon="i-lucide-graduation-cap"
+          :title="t('tutorial.catalogue.empty')"
+        />
       </div>
     </template>
     <template #footer>

package/app/components/tutorial/TutorialOverlay.vue

@@ -21,6 +21,7 @@ import {
 } from './TutorialOverlay.logic'
 import type { TutorialAdvanceCause, TutorialDirection } from './TutorialOverlay.logic'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // The one shared tour runtime: resolves the running tour from the `tutorialTours` slot,
 // anchors a highlight ring + tooltip to the current step's `data-testid`, and advances
@@ -593,7 +594,7 @@ onUnmounted(() => {
           class="mt-2 flex items-center gap-1.5 text-xs text-muted"
           data-testid="tutorial-searching"
         >
-          <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 motion-safe:animate-spin" />
+          <Spinner class="h-3.5 w-3.5" />
           {{ t('tutorial.overlay.searching') }}
         </p>
         <p