@cat-factory/app 0.311.2 → 0.312.0

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

package/app/components/tutorial/TutorialPrompt.vue

@@ -14,6 +14,7 @@
 // The decision semantics live in the store: starting a tour or "No thanks" is SAVED (the
 // prompt never auto-opens again), while closing without answering defers to next launch.
 import { TUTORIAL_ACTION_KEYS } from '~/utils/tutorial'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const tutorial = useTutorialStore()
@@ -81,9 +82,12 @@ const undecided = computed(() => tutorial.decision === null)
              alone, where `board-basics` requires nothing at all — but a consumer's own slot
              filter can produce it, and "no tours exist" would be the wrong thing to say then.)
              The footer's browse button is the way on, so it stays. -->
-        <p v-if="offered.length === 0" class="text-sm text-muted">
-          {{ t('tutorial.prompt.empty') }}
-        </p>
+        <EmptyState
+          v-if="offered.length === 0"
+          compact
+          icon="i-lucide-graduation-cap"
+          :title="t('tutorial.prompt.empty')"
+        />
       </div>
     </template>
     <template #footer>

package/app/components/vcs/GitLabConnect.vue

@@ -15,7 +15,7 @@ import { vcsTokenCreateUrl } from '~/utils/vcs'
 
 const { t } = useI18n()
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 
 const pat = ref('')
 const connecting = ref(false)
@@ -37,11 +37,7 @@ async function connect() {
   try {
     await github.connectGitLab(token)
     pat.value = ''
-    toast.add({
-      title: t('vcs.connect.gitlab.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('vcs.connect.gitlab.toast.connected')
   } catch (e) {
     error.value =
       apiErrorEnvelope(e)?.message ??

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -15,6 +15,8 @@ import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 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 execution = useExecutionStore()
@@ -283,7 +285,7 @@ watch(pendingUpload, async (file) => {
           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 ? PHASE_LABEL[phase] : '' }}
         </p>
 
@@ -331,9 +333,12 @@ watch(pendingUpload, async (file) => {
             </div>
           </div>
         </section>
-        <p v-else class="text-xs italic text-dimmed">
-          {{ t('visualConfirm.noScreenshots') }}
-        </p>
+        <EmptyState
+          v-else
+          compact
+          icon="i-lucide-image-off"
+          :title="t('visualConfirm.noScreenshots')"
+        />
 
         <!-- Upload a reference for any view -->
         <section class="rounded-lg border border-default bg-default/60 p-3">