@cat-factory/app 0.311.2 → 0.312.0

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

@@ -6,6 +6,7 @@
 import { computed } from 'vue'
 import JourneyStepNav from '~/components/environments/steps/JourneyStepNav.vue'
 import { useEnvironmentWizardTarget } from '~/modular/journeys/environmentSetup.frame'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   input: { frameId: string | null }
@@ -48,13 +49,13 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
       </UButton>
     </div>
 
-    <p
+    <EmptyState
       v-if="!store.recipe.prerequisites?.length"
-      class="text-xs text-dimmed"
+      compact
+      icon="i-lucide-list-checks"
+      :title="t('environmentWizard.preflight.none')"
       data-testid="env-setup-preflight-none"
-    >
-      {{ t('environmentWizard.preflight.none') }}
-    </p>
+    />
     <p
       v-else-if="preflightsUnavailable"
       class="text-xs text-app-warning-300/80"

package/app/components/focus/BlockFocusView.vue

@@ -7,6 +7,7 @@ import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
 import IconButton from '~/components/common/IconButton.vue'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -214,12 +215,12 @@ function openApprovalFor(approvalId: string) {
           @open-approval="openApprovalFor"
         />
 
-        <div
+        <EmptyState
           v-else
-          class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-muted text-sm text-dimmed"
-        >
-          {{ t('focus.emptyPipelineHint') }}
-        </div>
+          class="flex-1"
+          icon="i-lucide-workflow"
+          :title="t('focus.emptyPipelineHint')"
+        />
       </section>
 
       <!-- side: details -->

package/app/components/followUp/FollowUpWindow.vue

@@ -13,6 +13,7 @@ import { useFollowUpsStore } from '~/stores/followUps'
 import type { FollowUpItem, FollowUpResolution } from '~/types/execution'
 import { FOLLOW_UP_COMPANION_META } from '~/utils/catalog'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -156,16 +157,13 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
 
     <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
       <!-- Empty -->
-      <div
+      <EmptyState
         v-if="items.length === 0"
-        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-muted"
-      >
-        <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
-        <p class="text-sm">{{ t('followUp.empty.title') }}</p>
-        <p class="max-w-sm text-2xs text-dimmed">
-          {{ t('followUp.empty.hint') }}
-        </p>
-      </div>
+        class="h-full"
+        :icon="FOLLOW_UP_COMPANION_META.icon"
+        :title="t('followUp.empty.title')"
+        :description="t('followUp.empty.hint')"
+      />
 
       <div v-else class="space-y-3">
         <p

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -15,6 +15,8 @@ import { useForkDecisionStore } from '~/stores/forkDecision'
 import type { ForkChatMessage, ForkDecisionStepState, ForkOption } from '~/types/execution'
 import { FORK_DECISION_META } from '~/utils/catalog'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -170,7 +172,7 @@ const { requestClose } = useUnsavedGuard({
         v-if="status === 'proposing'"
         class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-muted"
       >
-        <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
+        <Spinner class="h-8 w-8 opacity-60" />
         <p class="text-sm">{{ t('forkDecision.proposing.title') }}</p>
         <p class="max-w-sm text-2xs text-dimmed">
           {{ t('forkDecision.proposing.hint') }}
@@ -322,7 +324,7 @@ const { requestClose } = useUnsavedGuard({
               <p
                 class="flex items-center gap-1.5 rounded-lg bg-elevated/70 px-3 py-1.5 text-xs 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" />
                 {{ t('forkDecision.chat.thinking') }}
               </p>
             </div>
@@ -364,13 +366,12 @@ const { requestClose } = useUnsavedGuard({
       </div>
 
       <!-- Skipped / no state: nothing to decide. -->
-      <div
+      <EmptyState
         v-else
-        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-muted"
-      >
-        <UIcon :name="FORK_DECISION_META.icon" class="h-8 w-8 opacity-40" />
-        <p class="text-sm">{{ t('forkDecision.empty.title') }}</p>
-      </div>
+        class="h-full"
+        :icon="FORK_DECISION_META.icon"
+        :title="t('forkDecision.empty.title')"
+      />
     </div>
 
     <footer

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -20,9 +20,10 @@ import type { ApiContractFormat, FoundationalServiceTier } from '~/types/domain'
 import { useFoundationalServicesStore } from '~/stores/foundationalServices'
 import FoundationalContractSummary from '~/components/foundational/FoundationalContractSummary.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const catalog = useFoundationalServicesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -71,7 +72,7 @@ async function suppress(serviceId: string) {
   await withRow(`suppress:${serviceId}`, async () => {
     try {
       await catalog.suppress(serviceId)
-      toast.add({ title: t('foundational.toast.suppressed'), icon: 'i-lucide-eye-off' })
+      actionToast.success('foundational.toast.suppressed')
     } catch (e) {
       present(e, 'foundational.toast.suppressFailed')
     }
@@ -156,8 +157,11 @@ async function suppress(serviceId: string) {
       </div>
     </div>
 
-    <p v-if="!catalog.resolved.length" class="text-sm text-dimmed">
-      {{ t('foundational.catalog.empty') }}
-    </p>
+    <EmptyState
+      v-if="!catalog.resolved.length"
+      compact
+      icon="i-lucide-package"
+      :title="t('foundational.catalog.empty')"
+    />
   </div>
 </template>

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -21,6 +21,7 @@ import {
 } from '~/stores/foundationalServices'
 import FoundationalContractSummary from '~/components/foundational/FoundationalContractSummary.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ kind: FoundationalServiceOwnerKind; ownerId: string }>()
 
@@ -28,7 +29,7 @@ const catalog =
   props.kind === 'workspace'
     ? useFoundationalServicesStore()
     : useFoundationalServices(props.kind, props.ownerId)
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirm } = useConfirm()
@@ -131,7 +132,7 @@ async function save() {
         capabilities: capabilityList.value,
         ...(contracts ? { contracts } : {}),
       })
-      toast.add({ title: t('foundational.toast.created'), icon: 'i-lucide-check' })
+      actionToast.success('foundational.toast.created')
     } else {
       await catalog.update(draft.id, {
         name: draft.name.trim(),
@@ -140,7 +141,7 @@ async function save() {
         capabilities: capabilityList.value,
         ...(contracts ? { contracts } : {}),
       })
-      toast.add({ title: t('foundational.toast.updated'), icon: 'i-lucide-check' })
+      actionToast.success('foundational.toast.updated')
     }
     editing.value = null
   } catch (e) {
@@ -171,7 +172,7 @@ async function remove(service: FoundationalService) {
   if (!ok) return
   try {
     await catalog.remove(service.id)
-    toast.add({ title: t('foundational.toast.deleted'), icon: 'i-lucide-trash-2' })
+    actionToast.success('foundational.toast.deleted')
   } catch (e) {
     present(e, 'foundational.toast.deleteFailed')
   }
@@ -224,9 +225,12 @@ async function remove(service: FoundationalService) {
         </div>
       </div>
     </div>
-    <p v-if="!catalog.services.length" class="text-sm text-dimmed">
-      {{ t('foundational.registry.empty') }}
-    </p>
+    <EmptyState
+      v-if="!catalog.services.length"
+      compact
+      icon="i-lucide-package"
+      :title="t('foundational.registry.empty')"
+    />
 
     <UButton
       v-if="editing === null"

package/app/components/foundational/FoundationalServiceSources.vue

@@ -28,6 +28,7 @@ import {
 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<{ kind: FoundationalServiceOwnerKind; ownerId: string }>()
 
@@ -36,7 +37,7 @@ const catalog =
     ? useFoundationalServicesStore()
     : useFoundationalServices(props.kind, props.ownerId)
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
@@ -163,7 +164,7 @@ async function link() {
         : {}),
     })
     resetDraft()
-    toast.add({ title: t('foundational.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
+    actionToast.success('foundational.toast.sourceLinked')
     return result
   } catch (e) {
     present(e, 'foundational.toast.linkSourceFailed')
@@ -185,17 +186,14 @@ async function sync(id: string) {
         )
       const coverage = result.folderScan ? folderScanNotes.value[result.folderScan] : null
       if (coverage) notes.push(coverage)
-      toast.add({
-        title: t('foundational.toast.synced', {
-          updated: result.upserted,
-          removed: result.tombstoned,
-        }),
+      // A folder we could not fully see, or could not find at all, is the one sync outcome a
+      // human has to act on: the counts alone would read as an ordinary quiet success.
+      const synced = {
+        params: { updated: result.upserted, removed: result.tombstoned },
         ...(notes.length ? { description: notes.join(' ') } : {}),
-        icon: 'i-lucide-refresh-cw',
-        // A folder we could not fully see, or could not find at all, is the one sync outcome a
-        // human has to act on — the counts alone would read as an ordinary quiet success.
-        color: coverage ? 'warning' : 'info',
-      })
+      }
+      if (coverage) actionToast.warning('foundational.toast.synced', synced)
+      else actionToast.success('foundational.toast.synced', synced)
     } catch (e) {
       present(e, 'foundational.toast.syncFailed')
     }
@@ -206,12 +204,9 @@ async function check(id: string) {
   await withRow(`check:${id}`, async () => {
     try {
       const status = await catalog.checkSource(id)
-      toast.add({
-        title: status.changed
-          ? t('foundational.toast.changesAvailable')
-          : t('foundational.toast.upToDate'),
-        icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-      })
+      actionToast.info(
+        status.changed ? 'foundational.toast.changesAvailable' : 'foundational.toast.upToDate',
+      )
     } catch (e) {
       present(e, 'foundational.toast.checkSourceFailed')
     }
@@ -233,7 +228,7 @@ async function unlink(id: string) {
   await withRow(`unlink:${id}`, async () => {
     try {
       await catalog.unlinkSource(id)
-      toast.add({ title: t('foundational.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
+      actionToast.success('foundational.toast.sourceUnlinked')
     } catch (e) {
       present(e, 'foundational.toast.unlinkSourceFailed')
     }
@@ -325,9 +320,12 @@ async function unlink(id: string) {
         />
       </div>
     </div>
-    <p v-if="!catalog.sources.length" class="text-sm text-dimmed">
-      {{ t('foundational.sources.empty') }}
-    </p>
+    <EmptyState
+      v-if="!catalog.sources.length"
+      compact
+      icon="i-lucide-git-branch"
+      :title="t('foundational.sources.empty')"
+    />
 
     <!-- Linking needs the GitHub integration; say so rather than offering a form that 503s. -->
     <div

package/app/components/foundational/FoundationalSuppressions.vue

@@ -23,7 +23,7 @@ const catalog =
   props.kind === 'workspace'
     ? useFoundationalServicesStore()
     : useFoundationalServices(props.kind, props.ownerId)
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -47,7 +47,7 @@ async function restore(serviceId: string) {
   busyRows.add(serviceId)
   try {
     await catalog.restore(serviceId)
-    toast.add({ title: t('foundational.toast.restored'), icon: 'i-lucide-eye' })
+    actionToast.success('foundational.toast.restored')
   } catch (e) {
     present(e, 'foundational.toast.restoreFailed')
   } finally {

package/app/components/foundational/ServiceCatalogConnection.vue

@@ -22,8 +22,8 @@ import {
 } from '~/utils/serviceCatalog'
 
 const catalog = useFoundationalServicesStore()
-const toast = useToast()
-const { present } = usePipelineErrorToast()
+const actionToast = useActionToast()
+const { present, presentReported } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
 
@@ -137,7 +137,7 @@ async function connect() {
   await withBusy('connect', async () => {
     try {
       await catalog.connectServiceCatalog(buildInput())
-      toast.add({ title: t('serviceCatalog.toast.connected'), color: 'success' })
+      actionToast.success('serviceCatalog.toast.connected')
     } catch (error) {
       present(error, 'serviceCatalog.toast.connectFailed')
       return
@@ -154,13 +154,13 @@ async function probe() {
   await withBusy('probe', async () => {
     try {
       const result = await catalog.probeServiceCatalog(buildInput())
-      toast.add({
-        title: result.ok
-          ? t('serviceCatalog.toast.probeOk')
-          : t('serviceCatalog.toast.probeFailed'),
-        description: result.message,
-        color: result.ok ? 'success' : 'error',
-      })
+      if (result.ok) {
+        // The probe's `message` is backend prose: on a failure it is detail behind the disclosure,
+        // and on a success the translated title is the whole of what the reader needs.
+        actionToast.success('serviceCatalog.toast.probeOk')
+      } else {
+        presentReported(result.message, 'serviceCatalog.toast.probeFailed')
+      }
     } catch (error) {
       present(error, 'serviceCatalog.toast.probeFailed')
     }
@@ -175,15 +175,15 @@ async function importNow() {
 async function runImport(): Promise<void> {
   try {
     const result = await catalog.importServiceCatalog()
-    toast.add({
-      title: t('serviceCatalog.toast.imported'),
+    const imported = {
       description: t('serviceCatalog.toast.importedDetail', {
         upserted: result.upserted,
         unchanged: result.unchanged,
         tombstoned: result.tombstoned,
       }),
-      color: result.status === 'ok' ? 'success' : 'warning',
-    })
+    }
+    if (result.status === 'ok') actionToast.success('serviceCatalog.toast.imported', imported)
+    else actionToast.warning('serviceCatalog.toast.imported', imported)
   } catch (error) {
     present(error, 'serviceCatalog.toast.importFailed')
   }
@@ -206,7 +206,7 @@ async function disconnect() {
   await withBusy('disconnect', async () => {
     try {
       await catalog.disconnectServiceCatalog()
-      toast.add({ title: t('serviceCatalog.toast.disconnected'), color: 'success' })
+      actionToast.success('serviceCatalog.toast.disconnected')
     } catch (error) {
       present(error, 'serviceCatalog.toast.disconnectFailed')
     }

package/app/components/fragments/FragmentLibraryManager.vue

@@ -20,6 +20,7 @@ import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.v
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import GitHubDocUrlImport from '~/components/fragments/GitHubDocUrlImport.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -41,7 +42,7 @@ const library =
     : useFragmentLibrary(props.kind, props.ownerId)
 const documents = useDocumentsStore()
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
@@ -207,7 +208,7 @@ async function saveEdit() {
           .filter(Boolean),
       })
       editDraft.value = null
-      toast.add({ title: t('fragments.toast.updated'), icon: 'i-lucide-check' })
+      actionToast.success('fragments.toast.updated')
     } catch (e) {
       present(e, 'fragments.toast.updateFailed')
     }
@@ -229,7 +230,7 @@ async function createFragment() {
         .filter(Boolean),
     })
     draft.value = { title: '', summary: '', body: '', brief: '', tags: '' }
-    toast.add({ title: t('fragments.toast.added'), icon: 'i-lucide-check' })
+    actionToast.success('fragments.toast.added')
   } catch (e) {
     present(e, 'fragments.toast.addFailed')
   } finally {
@@ -250,7 +251,7 @@ async function removeFragment(id: string) {
   await withRow(`remove:${id}`, async () => {
     try {
       await library.remove(id)
-      toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })
+      actionToast.success('fragments.toast.removed')
     } catch (e) {
       present(e, 'fragments.toast.removeFailed')
     }
@@ -415,7 +416,7 @@ async function linkDocumentFragment() {
       // Free-text field: exactly one ref.
       await library.createDocumentFragment({ source, ref: docDraft.value.ref.trim(), tags })
       docDraft.value = { source: '', ref: '', tags: '' }
-      toast.add({ title: t('fragments.toast.documentLinked'), icon: 'i-lucide-link' })
+      actionToast.success('fragments.toast.documentLinked')
       return
     }
 
@@ -440,9 +441,9 @@ async function linkDocumentFragment() {
     if (linked > 0) {
       // A vue-i18n plural message (count as the plural choice) so Slavic few/many forms
       // render correctly, and the count==1 case reads naturally too.
-      toast.add({
-        title: t('fragments.toast.documentsLinked', { count: linked }, linked),
-        icon: 'i-lucide-link',
+      actionToast.success('fragments.toast.documentsLinked', {
+        params: { count: linked },
+        plural: linked,
       })
     }
     if (firstError) {
@@ -462,7 +463,7 @@ async function refreshFragment(id: string) {
   await withRow(`refresh:${id}`, async () => {
     try {
       await library.refreshDocumentFragment(id)
-      toast.add({ title: t('fragments.toast.refreshed'), icon: 'i-lucide-refresh-cw' })
+      actionToast.success('fragments.toast.refreshed')
     } catch (e) {
       present(e, 'fragments.toast.refreshFailed')
     }
@@ -519,7 +520,7 @@ async function linkSource() {
     // `syncSource` row wrapper): a failure here should surface as a link failure, and
     // the form-level `linkingSource` spinner already covers the whole operation.
     await library.syncSource(source.id)
-    toast.add({ title: t('fragments.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
+    actionToast.success('fragments.toast.sourceLinked')
   } catch (e) {
     present(e, 'fragments.toast.linkSourceFailed')
   } finally {
@@ -531,13 +532,8 @@ async function syncSource(id: string) {
   await withRow(`sync:${id}`, async () => {
     try {
       const result = await library.syncSource(id)
-      toast.add({
-        title: t('fragments.toast.synced', {
-          updated: result.upserted,
-          removed: result.tombstoned,
-        }),
-        icon: 'i-lucide-refresh-cw',
-        color: 'info',
+      actionToast.success('fragments.toast.synced', {
+        params: { updated: result.upserted, removed: result.tombstoned },
       })
     } catch (e) {
       present(e, 'fragments.toast.syncFailed')
@@ -549,12 +545,9 @@ async function checkSource(id: string) {
   await withRow(`check:${id}`, async () => {
     try {
       const status = await library.checkSource(id)
-      toast.add({
-        title: status.changed
-          ? t('fragments.toast.changesAvailable')
-          : t('fragments.toast.upToDate'),
-        icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-      })
+      actionToast.info(
+        status.changed ? 'fragments.toast.changesAvailable' : 'fragments.toast.upToDate',
+      )
     } catch (e) {
       present(e, 'fragments.toast.checkSourceFailed')
     }
@@ -575,7 +568,7 @@ async function unlinkSource(id: string) {
   await withRow(`unlink:${id}`, async () => {
     try {
       await library.unlinkSource(id)
-      toast.add({ title: t('fragments.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
+      actionToast.success('fragments.toast.sourceUnlinked')
     } catch (e) {
       present(e, 'fragments.toast.unlinkSourceFailed')
     }
@@ -771,13 +764,16 @@ async function unlinkSource(id: string) {
             </div>
           </div>
         </div>
-        <p v-if="!library.fragments.length" class="text-sm text-dimmed">
-          {{
+        <EmptyState
+          v-if="!library.fragments.length"
+          compact
+          icon="i-lucide-puzzle"
+          :title="
             isWorkspace
               ? t('fragments.authored.empty.workspace')
               : t('fragments.authored.empty.account')
-          }}
-        </p>
+          "
+        />
 
         <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.authored.addTitle') }}</p>
@@ -887,9 +883,12 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!documentFragments.length" class="text-sm text-dimmed">
-          {{ t('fragments.documents.empty') }}
-        </p>
+        <EmptyState
+          v-if="!documentFragments.length"
+          compact
+          icon="i-lucide-file-text"
+          :title="t('fragments.documents.empty')"
+        />
 
         <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.documents.linkTitle') }}</p>
@@ -1053,9 +1052,12 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!library.sources.length" class="text-sm text-dimmed">
-          {{ t('fragments.sources.empty') }}
-        </p>
+        <EmptyState
+          v-if="!library.sources.length"
+          compact
+          icon="i-lucide-git-branch"
+          :title="t('fragments.sources.empty')"
+        />
 
         <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.sources.linkTitle') }}</p>

package/app/components/fragments/FragmentSelector.vue

@@ -11,6 +11,7 @@
 import type { PromptFragment } from '~/types/domain'
 import { buildFragmentCategoryGroups } from '~/utils/fragmentPicker'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -123,9 +124,12 @@ function manageAccount() {
                   </UButton>
                 </div>
               </template>
-              <p v-else class="px-2 py-3 text-xs text-dimmed">
-                {{ t('inspector.fragments.pickerEmpty') }}
-              </p>
+              <EmptyState
+                v-else
+                compact
+                icon="i-lucide-puzzle"
+                :title="t('inspector.fragments.pickerEmpty')"
+              />
 
               <div class="mt-1 border-t border-default pt-1">
                 <UButton

package/app/components/gates/GateResultView.vue

@@ -14,6 +14,7 @@ import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
 import GateFailingCheckList from '~/components/gates/GateFailingCheckList.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -213,16 +214,12 @@ const conflictVerdict = computed(() => {
     <div class="flex min-h-0 flex-1">
       <!-- Main: the conclusion -->
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-        <div
+        <EmptyState
           v-if="!gate"
-          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('gates.noActivity') }}</p>
-          <p class="max-w-sm text-2xs text-dimmed">
-            {{ t('gates.noActivityHint') }}
-          </p>
-        </div>
+          :icon="meta.icon"
+          :title="t('gates.noActivity')"
+          :description="t('gates.noActivityHint')"
+        />
 
         <template v-else>
           <!-- Passed -->