@cat-factory/app 0.311.1 → 0.311.3

package/app/components/documents/DocumentImportModal.vue

@@ -3,6 +3,7 @@ import type { DocumentSourceKind } from '~/types/domain'
 import DocumentSyncState from '~/components/documents/DocumentSyncState.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Import pages from a connected document source and pick one to expand into
 // board structure. A source selector lets the user choose which connected source
@@ -11,7 +12,7 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const open = computed({
@@ -58,10 +59,7 @@ async function doImport() {
   try {
     const doc = await documents.importDocument(source.value, value)
     ref_.value = ''
-    toast.add({
-      title: t('documents.import.imported', { title: doc.title }),
-      icon: 'i-lucide-file-down',
-    })
+    actionToast.success('documents.import.imported', { params: { title: doc.title } })
   } catch (e) {
     present(e, 'documents.import.importFailed')
   } finally {
@@ -157,9 +155,12 @@ function preview(externalId: string) {
             </div>
           </div>
         </div>
-        <p v-else class="text-center text-xs text-dimmed">
-          {{ t('documents.import.noneImported') }}
-        </p>
+        <EmptyState
+          v-else
+          compact
+          icon="i-lucide-file-down"
+          :title="t('documents.import.noneImported')"
+        />
       </div>
     </template>
   </UModal>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -17,7 +17,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction } = useConfirmAction()
 
@@ -82,10 +82,8 @@ async function submit() {
   saving.value = true
   try {
     await documents.connect(source.value, credentials)
-    toast.add({
-      title: t('documents.connect.connected', { source: descriptor.value!.label }),
-      icon: 'i-lucide-check',
-      color: 'success',
+    actionToast.success('documents.connect.connected', {
+      params: { source: descriptor.value!.label },
     })
     ui.closeDocumentConnect()
   } catch (e) {
@@ -99,11 +97,13 @@ async function disconnect() {
   if (!source.value) return
   const label = descriptor.value?.label ?? t('documents.connect.sourceFallback')
   if (!(await confirmAction('disconnect', label))) return
-  await documents.disconnect(source.value)
-  toast.add({
-    title: t('documents.connect.disconnected', { source: label }),
-    icon: 'i-lucide-unplug',
-  })
+  try {
+    await documents.disconnect(source.value)
+  } catch (e) {
+    present(e, 'documents.connect.disconnectFailed')
+    return
+  }
+  actionToast.success('documents.connect.disconnected', { params: { source: label } })
   ui.closeDocumentConnect()
 }
 </script>

package/app/components/documents/DocumentTemplatesModal.vue

@@ -4,6 +4,7 @@ import type { DocKind, DocumentLinkRole, SourceDocument } from '~/types/domain'
 import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Manage the workspace's per-DocKind TEMPLATE (singular) + EXEMPLAR (multi) document links (WS1).
 // A kind can be pointed at one of the workspace's already-imported documents so its parsed
@@ -97,13 +98,15 @@ async function unlink(doc: SourceDocument) {
         <p class="text-xs text-muted">{{ t('documents.templates.intro') }}</p>
 
         <!-- No imported documents yet: a template/exemplar must be an imported document. -->
-        <div v-if="!documents.documents.length" class="space-y-3 text-center">
-          <UIcon name="i-lucide-file-plus" class="mx-auto h-8 w-8 text-dimmed" />
-          <p class="text-sm text-muted">{{ t('documents.templates.importFirst') }}</p>
+        <EmptyState
+          v-if="!documents.documents.length"
+          icon="i-lucide-file-plus"
+          :title="t('documents.templates.importFirst')"
+        >
           <UButton variant="soft" icon="i-lucide-file-down" @click="ui.openDocumentImport()">
             {{ t('documents.templates.importButton') }}
           </UButton>
-        </div>
+        </EmptyState>
 
         <template v-else>
           <UFormField :label="t('documents.templates.kindLabel')">
@@ -136,7 +139,7 @@ async function unlink(doc: SourceDocument) {
             </p>
             <div
               v-if="template"
-              class="mt-2 flex items-center justify-between gap-2 rounded-md bg-default/70 px-3 py-2"
+              class="mt-2 flex items-center justify-between gap-2 rounded-md bg-elevated/70 px-3 py-2"
             >
               <DocumentOriginLink
                 :url="template.url"
@@ -173,7 +176,7 @@ async function unlink(doc: SourceDocument) {
               <div
                 v-for="doc in exemplars"
                 :key="`${doc.source}:${doc.externalId}`"
-                class="flex items-center justify-between gap-2 rounded-md bg-default/70 px-3 py-2"
+                class="flex items-center justify-between gap-2 rounded-md bg-elevated/70 px-3 py-2"
               >
                 <DocumentOriginLink
                   :url="doc.url"
@@ -194,9 +197,12 @@ async function unlink(doc: SourceDocument) {
                 </UButton>
               </div>
             </div>
-            <p v-else class="mt-2 text-xs text-dimmed">
-              {{ t('documents.templates.exemplarsEmpty') }}
-            </p>
+            <EmptyState
+              v-else
+              compact
+              icon="i-lucide-files"
+              :title="t('documents.templates.exemplarsEmpty')"
+            />
           </section>
 
           <!-- Picker: choose an imported document, then set as template or add as example. -->

package/app/components/documents/RepoContextDocPicker.vue

@@ -232,8 +232,8 @@ onMounted(() => {
       <div v-if="fileMode === 'search'" class="space-y-2">
         <UInput
           v-model="fileQuery"
-          :icon="loadingFiles ? 'i-lucide-loader-circle' : 'i-lucide-file-search'"
-          :ui="{ leadingIcon: loadingFiles ? 'animate-spin' : '' }"
+          icon="i-lucide-file-search"
+          :loading="loadingFiles"
           size="sm"
           class="w-full"
           :placeholder="t('documents.repoPicker.searchFilesPlaceholder')"

package/app/components/documents/SpawnPreviewModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { isDesignSource } from '@cat-factory/contracts'
 import type { DocumentBoardPlan } from '~/types/domain'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Preview the structure an imported document expands into, then spawn it. The
 // plan is fetched fresh on open; a badge makes clear whether an LLM or the
@@ -16,7 +17,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const board = useBoardStore()
 const documents = useDocumentsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 /** Design documents are planned into an existing service; prose documents at the board root. */
@@ -102,16 +103,13 @@ async function spawn() {
       modules: t('documents.spawn.moduleCount', { count: result.modules }, result.modules),
       tasks: t('documents.spawn.taskCount', { count: result.tasks }, result.tasks),
     })
-    toast.add({
-      title: t('documents.spawn.spawned'),
+    actionToast.success('documents.spawn.spawned', {
       // A reused module is stated only when there was one, and never folded into the created
       // count: a spawn into a service that already had every planned module otherwise reports
       // "0 modules" beside its tasks, which reads as the modules having failed.
       description: result.reusedModules
         ? `${summary} · ${t('documents.spawn.reusedCount', { count: result.reusedModules }, result.reusedModules)}`
         : summary,
-      icon: 'i-lucide-check',
-      color: 'success',
     })
     ui.closeSpawnPreview()
     ui.closeDocumentImport()
@@ -168,7 +166,7 @@ async function spawn() {
         </p>
 
         <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-muted">
-          <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
+          <Spinner class="h-4 w-4" />
           {{ t('documents.spawn.buildingPlan') }}
         </div>
 

package/app/components/documents/StartFromDesignModal.vue

@@ -20,6 +20,7 @@
 //    render identically. For a designer that widening IS the defect, not a detail.
 import { refRowFor, classifyRefFailure, type RefState } from './ContextDocumentPicker.logic'
 import type { DocumentSourceKind, ResolvedDocumentRef } from '~/types/domain'
+import Spinner from '~/components/common/Spinner.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -178,7 +179,7 @@ function stage() {
             v-if="state.status === 'checking'"
             class="flex items-center gap-2 text-sm text-muted"
           >
-            <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
+            <Spinner class="h-4 w-4" />
             {{ t('documents.startFromDesign.checking') }}
           </div>
 

package/app/components/documents/TaskContextDocs.vue

@@ -6,6 +6,7 @@ import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.
 import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import DocumentSyncState from '~/components/documents/DocumentSyncState.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Documents (from any source) attached to a task OR an initiative as agent
 // context, shown inside the InspectorPanel. An initiative takes the same
@@ -26,7 +27,7 @@ const props = defineProps<{ block: Block }>()
 const { t } = useI18n()
 const documents = useDocumentsStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { linkPending, presentLinkFailures } = useContextLinking()
 
 onMounted(() => {
@@ -88,7 +89,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('documents.taskDocs.attached'), icon: 'i-lucide-link' })
+    else actionToast.success('documents.taskDocs.attached')
   } finally {
     linking.value = false
   }
@@ -165,8 +166,6 @@ async function attach(item: PendingContext) {
         <DocumentSyncState :doc="doc" class="mt-1" />
       </div>
     </div>
-    <p v-else class="text-2xs text-dimmed">
-      {{ emptyHint }}
-    </p>
+    <EmptyState v-else compact icon="i-lucide-file-text" :title="emptyHint" />
   </InspectorSection>
 </template>

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -10,6 +10,8 @@ import {
   showsProviderFailure,
 } from '~/components/environments/EnvironmentStatusPanel.logic'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   environment: RunEnvironment | null
@@ -112,13 +114,11 @@ const envInTransition = computed(
     </SectionLabel>
     <div v-if="environment" class="space-y-2">
       <div class="flex items-center gap-2 text-sm">
-        <UIcon
+        <Spinner
           :name="ENV_STATUS_META[environment.status].icon"
+          :spinning="runActive && envInTransition"
           class="h-3.5 w-3.5"
-          :class="[
-            ENV_STATUS_META[environment.status].color,
-            { 'animate-spin': runActive && envInTransition },
-          ]"
+          :class="ENV_STATUS_META[environment.status].color"
         />
         <span :class="ENV_STATUS_META[environment.status].color">{{
           ENV_STATUS_META[environment.status].label
@@ -166,8 +166,11 @@ const envInTransition = computed(
         {{ t('environments.statusNote', { note: statusNote }) }}
       </p>
     </div>
-    <p v-else class="text-xs text-dimmed">
-      {{ degradedReason ?? t('environments.empty') }}
-    </p>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-server"
+      :title="degradedReason ?? t('environments.empty')"
+    />
   </section>
 </template>

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

@@ -5,6 +5,7 @@
 // advances to the review step. Rendered by `JourneyOutlet`, so it receives the
 // `ModuleEntryProps` (`input` / `exit` / `goBack`) as attributes.
 import type { EnvSelectOutput } from '~/modular/journeys/environmentSetup.logic'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 defineProps<{
   input: { frameId: string | null }
@@ -21,9 +22,12 @@ const { t } = useI18n()
     <!-- The one-service scope caveat, stated on the step that asks for the service: nothing
          here changes any other service, and running it twice just re-edits this one's recipe. -->
     <p class="text-xs leading-relaxed text-dimmed">{{ t('environmentWizard.pick.scope') }}</p>
-    <p v-if="!store.serviceFrames.length" class="text-sm text-dimmed">
-      {{ t('environmentWizard.pick.empty') }}
-    </p>
+    <EmptyState
+      v-if="!store.serviceFrames.length"
+      compact
+      icon="i-lucide-box"
+      :title="t('environmentWizard.pick.empty')"
+    />
     <div v-else class="space-y-1.5">
       <UButton
         v-for="frame in store.serviceFrames"

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