@cat-factory/app 0.311.1 → 0.311.3

package/app/components/providers/PersonalCredentialModal.vue

@@ -10,7 +10,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 const { t } = useI18n()
 const personal = usePersonalSubscriptionsStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const password = ref('')
@@ -67,11 +67,7 @@ async function submit() {
   busy.value = true
   try {
     await pending.value.retry(password.value)
-    toast.add({
-      title: t('providers.personalCredential.toast.started'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('providers.personalCredential.toast.started')
   } catch (e) {
     // A fresh 428 (e.g. still-wrong password) re-arms `pending`, keeping the modal open.
     present(e, 'providers.personalCredential.toast.startFailed')

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -13,7 +13,7 @@ const personal = usePersonalSubscriptionsStore()
 const auth = useAuthStore()
 const workspace = useWorkspaceStore()
 const models = useModelsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
@@ -173,11 +173,7 @@ async function connect() {
     // points at models this subscription doesn't cover, reactively surfaces the
     // preset-mismatch prompt (with its "pick a different preset" link).
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
-    toast.add({
-      title: t('personalSubscriptions.toast.connected', { vendor: vendorName }),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('personalSubscriptions.toast.connected', { params: { vendor: vendorName } })
   } catch (e) {
     present(e, 'personalSubscriptions.toast.connectFailed')
   } finally {
@@ -199,7 +195,7 @@ async function disconnect(v: SubscriptionVendor) {
     // Removing the subscription may drop the workspace's last usable model — refresh so the
     // AI-readiness banners re-evaluate (mirrors the API-key flow).
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
-    toast.add({ title: t('personalSubscriptions.toast.disconnected'), icon: 'i-lucide-check' })
+    actionToast.success('personalSubscriptions.toast.disconnected')
   } catch (e) {
     present(e, 'personalSubscriptions.toast.disconnectFailed')
   }

package/app/components/providers/VendorCredentialsModal.vue

@@ -15,7 +15,7 @@ const { t, n } = useI18n()
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const creds = useVendorCredentialsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -127,11 +127,7 @@ async function add() {
     })
     token.value = ''
     label.value = ''
-    toast.add({
-      title: t('providers.vendorCredentials.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('providers.vendorCredentials.toast.connected')
   } catch (e) {
     present(e, 'providers.vendorCredentials.toast.connectFailed')
   } finally {

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -23,6 +23,7 @@ import type {
   ProvisioningSubsystem,
 } from '~/types/provisioningLogs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   subsystem?: ProvisioningSubsystem
@@ -132,12 +133,15 @@ function when(epochMs: number): string {
     </div>
 
     <p v-if="state.error" class="px-3 py-2 text-xs text-app-error-300">{{ state.error }}</p>
-    <p
-      v-else-if="!state.loading && state.entries.length === 0"
-      class="px-3 py-3 text-xs text-dimmed"
-    >
-      {{ t('provisioning.empty') }}
-    </p>
+    <div v-else-if="state.loading && state.entries.length === 0" class="space-y-2 px-3 py-2">
+      <USkeleton v-for="n in 3" :key="n" class="h-8 w-full" />
+    </div>
+    <EmptyState
+      v-else-if="state.entries.length === 0"
+      compact
+      icon="i-lucide-scroll-text"
+      :title="t('provisioning.empty')"
+    />
 
     <ul v-else class="max-h-80 divide-y divide-default overflow-auto">
       <li v-for="entry in state.entries" :key="entry.id" class="px-3 py-2">

package/app/components/ralph/RalphLoopResultView.vue

@@ -11,6 +11,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.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()
@@ -136,13 +137,7 @@ const STATUS_META = computed<
     </template>
     <div class="flex min-h-0 flex-1">
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-        <div
-          v-if="!ralph"
-          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('ralph.noActivity') }}</p>
-        </div>
+        <EmptyState v-if="!ralph" class="h-full" :icon="meta.icon" :title="t('ralph.noActivity')" />
 
         <template v-else>
           <!-- The completion criterion. -->

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -29,11 +29,13 @@ import type {
   ReviewItemStatus,
 } from '~/types/requirements'
 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 requirements = useRequirementsStore()
 const models = useModelsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const access = useWorkspaceAccess()
@@ -574,18 +576,18 @@ async function requestRecommendations() {
     // ran inline and the recommendations are already settled. Tell the human which actually
     // happened rather than always promising a background callback.
     const stillGenerating = (updated?.recommendations ?? []).some((r) => r.status === 'pending')
-    toast.add(
-      stillGenerating
-        ? {
-            title: t('requirements.toast.preparingRecommendations', { count: n }, n),
-            description: t('requirements.toast.preparingRecommendationsDescription'),
-            icon: 'i-lucide-sparkles',
-          }
-        : {
-            title: t('requirements.toast.recommendationsReady', { count: n }, n),
-            icon: 'i-lucide-sparkles',
-          },
-    )
+    if (stillGenerating) {
+      actionToast.info('requirements.toast.preparingRecommendations', {
+        params: { count: n },
+        plural: n,
+        description: t('requirements.toast.preparingRecommendationsDescription'),
+      })
+    } else {
+      actionToast.success('requirements.toast.recommendationsReady', {
+        params: { count: n },
+        plural: n,
+      })
+    }
   } catch (e) {
     present(e, 'requirements.errors.requestRecommendations')
   }
@@ -634,10 +636,8 @@ async function incorporate(feedback?: string) {
   showRedo.value = false
   // The fold + re-review now run in the durable driver. Hand the user back to the board;
   // a notification calls them back only if the re-review needs more input.
-  toast.add({
-    title: t('requirements.toast.incorporating'),
+  actionToast.info('requirements.toast.incorporating', {
     description: t('requirements.toast.incorporatingDescription'),
-    icon: 'i-lucide-wand-sparkles',
   })
   close()
 }
@@ -647,15 +647,16 @@ async function reReview() {
   try {
     const updated = await requirements.reReview(blockId.value)
     const newFindings = requirements.openCount(updated)
-    toast.add({
-      title:
-        updated.status === 'incorporated'
-          ? t('requirements.toast.reviewerSatisfied')
-          : updated.status === 'exceeded'
-            ? t('requirements.toast.iterationLimitReached')
-            : t('requirements.toast.newFindings', { count: newFindings }, newFindings),
-      icon: 'i-lucide-sparkles',
-    })
+    if (updated.status === 'incorporated') {
+      actionToast.success('requirements.toast.reviewerSatisfied')
+    } else if (updated.status === 'exceeded') {
+      actionToast.warning('requirements.toast.iterationLimitReached')
+    } else {
+      actionToast.info('requirements.toast.newFindings', {
+        params: { count: newFindings },
+        plural: newFindings,
+      })
+    }
   } catch (e) {
     present(e, 'requirements.errors.reReview')
   }
@@ -667,7 +668,7 @@ async function proceed() {
   try {
     await flushDrafts()
     await requirements.proceed(blockId.value)
-    toast.add({ title: t('requirements.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+    actionToast.info('requirements.toast.proceeding')
   } catch (e) {
     present(e, 'requirements.errors.proceed')
   } finally {
@@ -681,12 +682,12 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   try {
     await requirements.resolveExceeded(blockId.value, choice)
     if (choice === 'stop-reset') {
-      toast.add({ title: t('requirements.toast.taskReset'), icon: 'i-lucide-undo' })
+      actionToast.info('requirements.toast.taskReset')
       close()
     } else if (choice === 'proceed') {
-      toast.add({ title: t('requirements.toast.proceeding'), icon: 'i-lucide-arrow-right' })
+      actionToast.info('requirements.toast.proceeding')
     } else {
-      toast.add({ title: t('requirements.toast.extraRoundGranted'), icon: 'i-lucide-rotate-cw' })
+      actionToast.info('requirements.toast.extraRoundGranted')
     }
   } catch (e) {
     present(e, 'requirements.errors.resolveReview')
@@ -734,20 +735,24 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 
         <!-- empty state — the reviewer runs automatically as the first pipeline
                  gate step, so there's nothing to do here until then -->
-        <div
+        <EmptyState
           v-if="!review && !busy && !loading"
-          class="rounded-lg border border-dashed border-muted p-8 text-center text-sm text-dimmed"
-        >
-          {{ t('requirements.empty') }}
+          icon="i-lucide-list-checks"
+          :title="t('requirements.empty')"
+        />
+
+        <!-- initial fetch on open -->
+        <div v-else-if="loading && !busy && !review" class="flex flex-col gap-3">
+          <USkeleton v-for="n in 3" :key="n" class="h-20 w-full rounded-lg" />
         </div>
 
-        <!-- working state (initial fetch on open, or a reviewer pass running) -->
+        <!-- a reviewer pass running -->
         <div
-          v-else-if="(busy || loading) && !review"
+          v-else-if="busy && !review"
           class="flex items-center justify-center gap-2 p-8 text-sm text-muted"
         >
-          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-          {{ loading && !busy ? t('requirements.loadingReview') : t('requirements.reviewing') }}
+          <Spinner class="h-4 w-4" />
+          {{ t('requirements.reviewing') }}
         </div>
 
         <template v-else-if="review">
@@ -777,7 +782,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             v-else-if="working"
             class="mb-4 flex items-center gap-2 rounded-lg border border-primary/60 bg-primary/10 p-4 text-sm text-primary"
           >
-            <UIcon name="i-lucide-loader-circle" class="h-5 w-5 shrink-0 animate-spin" />
+            <Spinner class="h-5 w-5 shrink-0" />
             <span v-if="incorporating">
               {{ t('requirements.working.incorporating') }}
             </span>
@@ -978,7 +983,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                           v-if="pendingRecFor(item)"
                           class="mt-2 flex items-center gap-1.5 text-xs text-primary"
                         >
-                          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
+                          <Spinner class="h-3.5 w-3.5" />
                           {{ t('requirements.generatingSuggestion') }}
                         </div>
                         <template v-else-if="readyRecFor(item)">

package/app/components/sandbox/SandboxPanel.vue

@@ -18,10 +18,11 @@ import type {
 } from '~/types/sandbox'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const ui = useUiStore()
 const store = useSandboxStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -82,13 +83,9 @@ async function promote(version: SandboxPromptVersion) {
   promoting.value = version.id
   try {
     await store.promotePrompt(version)
-    toast.add({
-      title: t('sandbox.prompts.promoted', { agent: version.agentKind }),
-      color: 'success',
-      icon: 'i-lucide-rocket',
-    })
-  } catch {
-    toast.add({ title: t('sandbox.prompts.promoteFailed'), color: 'error' })
+    actionToast.success('sandbox.prompts.promoted', { params: { agent: version.agentKind } })
+  } catch (error) {
+    present(error, 'sandbox.prompts.promoteFailed')
   } finally {
     promoting.value = null
   }
@@ -193,9 +190,9 @@ async function createAndRun() {
       },
     })
     name.value = ''
-    toast.add({ title: t('sandbox.toast.running'), icon: 'i-lucide-flask-conical', color: 'info' })
+    actionToast.info('sandbox.toast.running')
     await store.launch(created.id)
-    toast.add({ title: t('sandbox.toast.complete'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('sandbox.toast.complete')
   } catch (e) {
     present(e, 'sandbox.toast.runFailed')
   }
@@ -255,7 +252,7 @@ async function saveVersion() {
   savingPrompt.value = true
   try {
     await store.saveVersion(editing.value.id, editText.value)
-    toast.add({ title: t('sandbox.toast.versionSaved'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('sandbox.toast.versionSaved')
     editing.value = null
   } catch (e) {
     present(e, 'sandbox.toast.saveFailed')
@@ -282,8 +279,12 @@ async function archive(prompt: SandboxPromptVersion) {
     :ui="{ content: 'max-w-5xl' }"
   >
     <template #body>
-      <div v-if="store.loading" class="flex items-center justify-center py-12">
-        <UIcon name="i-lucide-loader-circle" class="h-6 w-6 animate-spin text-muted" />
+      <div v-if="store.loading" class="space-y-4">
+        <USkeleton class="h-8 w-full" />
+        <div class="grid gap-4 lg:grid-cols-2">
+          <USkeleton class="h-80 w-full rounded-lg" />
+          <USkeleton class="h-80 w-full rounded-lg" />
+        </div>
       </div>
 
       <div
@@ -405,9 +406,12 @@ async function archive(prompt: SandboxPromptVersion) {
                   />
                   <span class="truncate">{{ m.label }}</span>
                 </label>
-                <p v-if="!store.selectableModels.length" class="text-xs text-dimmed">
-                  {{ t('sandbox.builder.noModels') }}
-                </p>
+                <EmptyState
+                  v-if="!store.selectableModels.length"
+                  compact
+                  icon="i-lucide-cpu"
+                  :title="t('sandbox.builder.noModels')"
+                />
               </div>
             </div>
 
@@ -429,9 +433,12 @@ async function archive(prompt: SandboxPromptVersion) {
                   />
                   <span class="truncate">{{ f.name }}</span>
                 </label>
-                <p v-if="!kindFixtures.length" class="text-xs text-dimmed">
-                  {{ t('sandbox.builder.noFixtures') }}
-                </p>
+                <EmptyState
+                  v-if="!kindFixtures.length"
+                  compact
+                  icon="i-lucide-clipboard-list"
+                  :title="t('sandbox.builder.noFixtures')"
+                />
               </div>
             </div>
 
@@ -577,9 +584,12 @@ async function archive(prompt: SandboxPromptVersion) {
                 <span class="truncate text-toned">{{ x.name }}</span>
                 <UBadge variant="soft" size="xs">{{ EXPERIMENT_STATUS_LABEL[x.status] }}</UBadge>
               </UButton>
-              <p v-if="!store.experiments.length" class="text-xs text-dimmed">
-                {{ t('sandbox.results.empty') }}
-              </p>
+              <EmptyState
+                v-if="!store.experiments.length"
+                compact
+                icon="i-lucide-flask-conical"
+                :title="t('sandbox.results.empty')"
+              />
             </div>
           </div>
         </div>
@@ -718,9 +728,11 @@ async function archive(prompt: SandboxPromptVersion) {
               }}
             </p>
           </div>
-          <p v-if="!store.fixtures.length" class="text-xs text-dimmed">
-            {{ t('sandbox.fixtures.empty') }}
-          </p>
+          <EmptyState
+            v-if="!store.fixtures.length"
+            icon="i-lucide-clipboard-list"
+            :title="t('sandbox.fixtures.empty')"
+          />
         </div>
       </div>
     </template>

package/app/components/settings/AccountSettingsPanel.vue

@@ -11,6 +11,7 @@ import AccountFragmentSettings from '~/components/layout/AccountFragmentSettings
 import AccountSkillSettings from '~/components/layout/AccountSkillSettings.vue'
 import AccountFoundationalSettings from '~/components/layout/AccountFoundationalSettings.vue'
 import AccountRiskPolicySettings from '~/components/layout/AccountRiskPolicySettings.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -60,9 +61,11 @@ const tabs = computed(() => [
 <template>
   <UModal v-model:open="open" :title="t('settings.account.title')" :ui="{ content: 'max-w-3xl' }">
     <template #body>
-      <p v-if="!accounts.activeAccountId" class="text-sm text-muted">
-        {{ t('settings.account.noAccount') }}
-      </p>
+      <EmptyState
+        v-if="!accounts.activeAccountId"
+        icon="i-lucide-building-2"
+        :title="t('settings.account.noAccount')"
+      />
       <UTabs
         v-else
         v-model="activeTab"

package/app/components/settings/ApiTokensPanel.vue

@@ -74,7 +74,7 @@ function boundLabel(key: PublicApiKey): string | null {
     ? t('settings.apiTokens.list.boundToYou')
     : t('settings.apiTokens.list.boundToOther', { user: key.actsAsUserId })
 }
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -152,11 +152,7 @@ async function createToken() {
     label.value = ''
     scope.value = 'write'
     identity.value = 'system'
-    toast.add({
-      title: t('settings.apiTokens.toast.created'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.apiTokens.toast.created')
   } catch (e) {
     present(e, 'settings.apiTokens.toast.createFailed')
   } finally {

package/app/components/settings/BudgetSettings.vue

@@ -8,7 +8,7 @@ import { computed, reactive, ref, watch, type Ref } from 'vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t, n } = useI18n()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const settingsStore = useWorkspaceSettingsStore()
@@ -32,7 +32,7 @@ async function runSave(saving: Ref<boolean>, save: () => Promise<unknown>) {
   saving.value = true
   try {
     await save()
-    toast.add({ title: t('settings.workspaceSettings.toast.budgetSaved'), color: 'success' })
+    actionToast.success('settings.workspaceSettings.toast.budgetSaved')
     try {
       await useWorkspaceStore().refresh()
     } catch {

package/app/components/settings/CapabilityCredentialsPanel.vue

@@ -20,7 +20,7 @@ import ToolServerChecklist from '~/components/settings/ToolServerChecklist.vue'
 
 const { t, d } = useI18n()
 const store = useCapabilityCredentialsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
 // Which declaring capability wants a key. An exhaustive Record over the wire union, so a new
@@ -85,11 +85,7 @@ async function saveKey(key: string) {
   try {
     await store.save(key, value)
     drafts[key] = ''
-    toast.add({
-      title: t('settings.capabilityCredentials.toast.saved', { key }),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.capabilityCredentials.toast.saved', { params: { key } })
   } catch (e) {
     present(e, 'settings.capabilityCredentials.toast.saveFailed')
   } finally {

package/app/components/settings/CloudflareHandlerSection.vue

@@ -18,7 +18,7 @@ type CloudflareConfig = CloudflareHandlerConfig['cloudflare']
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction } = useConfirmAction()
 
@@ -101,11 +101,7 @@ async function save() {
     })
     token.value = ''
     editing.value = false
-    toast.add({
-      title: t('settings.infrastructure.handler.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.infrastructure.handler.saved')
   } catch (e) {
     present(e, 'settings.infrastructure.handler.saveFailed')
   } finally {
@@ -133,7 +129,7 @@ async function remove() {
   busy.value = true
   try {
     await infra.unregisterHandler('cloudflare')
-    toast.add({ title: t('settings.infrastructure.handler.removed'), icon: 'i-lucide-check' })
+    actionToast.success('settings.infrastructure.handler.removed')
   } catch (e) {
     present(e, 'settings.infrastructure.handler.saveFailed')
   } finally {

package/app/components/settings/ConsensusGroupsSection.vue

@@ -15,6 +15,7 @@ import { isSelectable } from '~/stores/models'
 import { uid } from '~/utils/catalog'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const groups = useConsensusGroupsStore()
@@ -291,9 +292,12 @@ async function remove(group: ConsensusGroup) {
           </div>
         </div>
       </div>
-      <p v-else class="py-4 text-center text-sm text-dimmed">
-        {{ t('settings.consensusGroups.list.empty') }}
-      </p>
+      <EmptyState
+        v-else
+        compact
+        icon="i-lucide-users"
+        :title="t('settings.consensusGroups.list.empty')"
+      />
     </template>
 
     <!-- ===== editor ===== -->

package/app/components/settings/CustomManifestTypeEditor.vue

@@ -7,6 +7,7 @@
 import { computed, reactive, ref } from 'vue'
 import type { CustomManifestType } from '@cat-factory/contracts'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
@@ -140,9 +141,12 @@ async function remove(type: CustomManifestType) {
         </div>
       </li>
     </ul>
-    <p v-else class="text-2xs text-dimmed">
-      {{ t('settings.infrastructure.customType.empty') }}
-    </p>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-boxes"
+      :title="t('settings.infrastructure.customType.empty')"
+    />
 
     <!-- Add / edit a workspace-defined type. -->
     <div class="space-y-2 border-t border-default pt-3">

package/app/components/settings/DefaultProvisionTypeSection.vue

@@ -24,7 +24,7 @@ import {
 const { t } = useI18n()
 const infra = useInfraConfigStore()
 const settingsStore = useWorkspaceSettingsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 onMounted(() => {
@@ -90,7 +90,7 @@ async function save() {
       defaultProvisionType: selection.value.type,
       defaultProvisionManifestId: selection.value.manifestId,
     })
-    toast.add({ title: t('settings.defaultProvision.saved'), color: 'success' })
+    actionToast.success('settings.defaultProvision.saved')
   } catch (e) {
     present(e, 'settings.defaultProvision.saveFailed')
   } finally {

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -36,7 +36,7 @@ const { t } = useI18n()
 const infra = useInfraConfigStore()
 const auth = useAuthStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction } = useConfirmAction()
 
@@ -403,20 +403,16 @@ async function removeCustom() {
 }
 
 function toastSaved() {
-  toast.add({
-    title: t('settings.infrastructure.handler.saved'),
-    icon: 'i-lucide-check',
-    color: 'success',
-  })
+  actionToast.success('settings.infrastructure.handler.saved')
 }
 function toastRemoved() {
-  toast.add({ title: t('settings.infrastructure.handler.removed'), icon: 'i-lucide-check' })
+  actionToast.success('settings.infrastructure.handler.removed')
 }
 </script>
 
 <template>
   <!-- Only render the configurator once the handler bundle has actually resolved (available
-       === true). While it's still being probed (null) show a loading line instead of flashing
+       === true). While it's still being probed (null) show skeleton sections instead of flashing
        the full form, and render nothing when the integration is off (false). -->
   <div v-if="infra.available === true" class="space-y-5">
     <p class="text-xs text-muted">{{ t('settings.infrastructure.handler.intro') }}</p>
@@ -629,7 +625,8 @@ function toastRemoved() {
       </div>
     </section>
   </div>
-  <p v-else-if="infra.available === null" class="text-xs text-dimmed">
-    {{ t('settings.infrastructure.handler.loading') }}
-  </p>
+  <div v-else-if="infra.available === null" class="space-y-5">
+    <USkeleton class="h-4 w-2/3" />
+    <USkeleton v-for="n in 3" :key="n" class="h-24 w-full rounded-lg" />
+  </div>
 </template>