@cat-factory/app 0.311.2 → 0.311.3

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>

package/app/components/settings/IssueTrackerPanel.vue

@@ -17,12 +17,13 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import type { TaskSourceKind, TaskSourceState, TrackerKind } from '~/types/domain'
 import TaskSourceCard from '~/components/settings/TaskSourceCard.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const tracker = useTrackerStore()
 const tasks = useTasksStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 // --- filing tracker + writeback (one Save, persisted on tracker settings) -----
@@ -114,11 +115,7 @@ async function save() {
       writebackResolveOnMerge: resolveOnMerge.value,
       writebackQuestionsOnPark: questionsOnPark.value,
     })
-    toast.add({
-      title: t('settings.issueTracker.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.issueTracker.toast.saved')
   } catch (e) {
     present(e, 'settings.issueTracker.toast.saveFailed')
   } finally {
@@ -379,9 +376,12 @@ async function checkSetup(source: TaskSourceKind) {
         @remedy="openRemedy(source)"
       />
 
-      <p v-if="tasks.sources.length === 0" class="text-2xs text-dimmed">
-        {{ t('settings.issueTracker.linking.none') }}
-      </p>
+      <EmptyState
+        v-if="tasks.sources.length === 0"
+        compact
+        icon="i-lucide-list-todo"
+        :title="t('settings.issueTracker.linking.none')"
+      />
     </section>
 
     <!-- 3. Writeback ---------------------------------------------------------->

package/app/components/settings/LocalContainerPoolSettings.vue

@@ -13,7 +13,7 @@ import { reactive, ref, watch } from 'vue'
 
 const { t } = useI18n()
 const store = useLocalSettingsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const saving = ref(false)
@@ -60,11 +60,7 @@ async function save() {
       },
       checkout: { workspaceRoot: draft.workspaceRoot.trim() || '/workspace', cleanKeep },
     })
-    toast.add({
-      title: t('settings.localMode.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.localMode.toast.saved')
   } catch (e) {
     present(e, 'settings.localMode.toast.saveFailed')
   } finally {

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -23,7 +23,7 @@ import IconButton from '~/components/common/IconButton.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const store = useLocalModelsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -230,12 +230,10 @@ async function save() {
       models: selected.value.map((id) => ({ id, ...modalityOf(imageInput.value[id]) })),
     })
     apiKey.value = ''
-    toast.add({
-      title: t('settings.localModelEndpoints.toast.saved', {
+    actionToast.success('settings.localModelEndpoints.toast.saved', {
+      params: {
         name: LOCAL_RUNNER_LABELS[provider.value],
-      }),
-      icon: 'i-lucide-check',
-      color: 'success',
+      },
     })
   } catch (e) {
     present(e, 'settings.localModelEndpoints.toast.saveFailed')
@@ -261,7 +259,7 @@ async function remove(p: LocalRunner) {
     // The row is gone from the store, so re-seeding the draft it was showing yields the
     // fresh-runner defaults: the same reset, without a second copy of what a reset means.
     if (provider.value === p) seedDraft(p)
-    toast.add({ title: t('settings.localModelEndpoints.toast.removed'), icon: 'i-lucide-check' })
+    actionToast.success('settings.localModelEndpoints.toast.removed')
   } catch (e) {
     present(e, 'settings.localModelEndpoints.toast.removeFailed')
   } finally {

package/app/components/settings/McpAuthorizeScreen.vue

@@ -145,9 +145,14 @@ function backToApp() {
     data-testid="mcp-authorize"
   >
     <div class="w-full max-w-md rounded-xl border border-default bg-default/80 p-8 backdrop-blur">
-      <template v-if="screen === 'loading'">
-        <UIcon name="i-lucide-loader" class="mx-auto h-10 w-10 animate-spin text-primary" />
-      </template>
+      <div v-if="screen === 'loading'" class="flex flex-col items-center">
+        <USkeleton class="mb-3 h-10 w-10 rounded-full" />
+        <USkeleton class="mb-2 h-6 w-3/4" />
+        <USkeleton class="mb-6 h-4 w-full" />
+        <USkeleton class="mb-4 h-8 w-full" />
+        <USkeleton class="mb-6 h-16 w-full" />
+        <USkeleton class="h-8 w-full" />
+      </div>
 
       <template v-else-if="screen === 'failed'">
         <UIcon name="i-lucide-alert-triangle" class="mx-auto mb-3 h-10 w-10 text-app-error-400" />

package/app/components/settings/McpOAuthCallbackScreen.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Where a vendor's authorization server sends the operator's browser back to after they approve a
 // remote MCP tool server (`/mcp-oauth-callback?code=…&state=…`).
@@ -69,7 +70,7 @@ function backToApp() {
       class="w-full max-w-sm rounded-xl border border-default bg-default/80 p-8 text-center backdrop-blur"
     >
       <template v-if="state === 'working'">
-        <UIcon name="i-lucide-loader" class="mx-auto mb-3 h-10 w-10 animate-spin text-primary" />
+        <Spinner class="mx-auto mb-3 h-10 w-10 text-primary" />
         <h1 class="mb-1 text-lg font-semibold text-highlighted">
           {{ t('settings.toolServers.oauth.callback.working') }}
         </h1>