@cat-factory/app 0.311.2 → 0.311.3

package/app/components/settings/ModelConfigurationPanel.vue

@@ -24,6 +24,7 @@ import ProviderPreferenceEditor from '~/components/settings/ProviderPreferenceEd
 import { showOverrideField } from '~/utils/uiMode'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 const { t } = useI18n()
@@ -36,7 +37,7 @@ const agentTier = useAgentTierStore()
 const creds = useVendorCredentialsStore()
 const workspace = useWorkspaceStore()
 const { present } = usePipelineErrorToast()
-const toast = useToast()
+const actionToast = useActionToast()
 const { confirm } = useConfirm()
 
 const open = computed({
@@ -93,13 +94,25 @@ const hiddenByTier = computed(() =>
   filter.value.trim() ? 0 : configurableKinds.value.length - tieredKinds.value.length,
 )
 
+// Set when the catalog read rejects, so the preset list states the failure instead of holding a
+// skeleton that never resolves (`models.loaded` stays false after a failed read).
+const catalogFailed = ref(false)
+
+function loadCatalog() {
+  catalogFailed.value = false
+  models.ensureLoaded(workspace.workspaceId ?? undefined).catch((error) => {
+    catalogFailed.value = true
+    present(error, 'settings.modelConfiguration.toast.catalogFailed')
+  })
+}
+
 watch(
   open,
   (isOpen) => {
     if (isOpen) {
       editor.value = null
       filter.value = ''
-      void models.ensureLoaded(workspace.workspaceId ?? undefined)
+      loadCatalog()
       if (workspace.workspaceId) void creds.load(workspace.workspaceId)
     }
   },
@@ -258,11 +271,8 @@ async function save() {
     // NOT through `present`: that funnel classifies a BACKEND failure, and a synthesized local
     // `Error` carries no envelope and no status, so it lands on the network-fault description and
     // tells the user the server could not be reached about a check that never left the browser.
-    toast.add({
-      title: t('settings.modelConfiguration.toast.nameRequiredTitle'),
+    actionToast.error('settings.modelConfiguration.toast.nameRequiredTitle', {
       description: t('settings.modelConfiguration.toast.nameRequiredBody'),
-      color: 'warning',
-      icon: 'i-lucide-triangle-alert',
     })
     return
   }
@@ -372,9 +382,25 @@ async function save() {
                 </UButton>
               </div>
 
-              <p v-if="models.models.length === 0" class="py-4 text-center text-sm text-dimmed">
-                {{ t('settings.modelConfiguration.list.loadingCatalog') }}
-              </p>
+              <UAlert
+                v-if="catalogFailed"
+                color="error"
+                variant="subtle"
+                icon="i-lucide-triangle-alert"
+                :title="t('settings.modelConfiguration.list.catalogFailed')"
+                :actions="[
+                  {
+                    label: t('common.retry'),
+                    color: 'neutral',
+                    variant: 'outline',
+                    onClick: loadCatalog,
+                  },
+                ]"
+              />
+
+              <div v-else-if="!models.loaded" class="space-y-3">
+                <USkeleton v-for="n in 3" :key="n" class="h-20 w-full rounded-lg" />
+              </div>
 
               <div v-else class="space-y-3">
                 <div
@@ -443,9 +469,11 @@ async function save() {
                     </span>
                   </div>
                 </div>
-                <p v-if="sortedPresets.length === 0" class="py-6 text-center text-sm text-dimmed">
-                  {{ t('settings.modelConfiguration.list.empty') }}
-                </p>
+                <EmptyState
+                  v-if="sortedPresets.length === 0"
+                  icon="i-lucide-sliders-horizontal"
+                  :title="t('settings.modelConfiguration.list.empty')"
+                />
               </div>
 
               <!-- The consensus-GROUP library: which model PANELS review the workspace's heavier
@@ -549,12 +577,12 @@ async function save() {
                       </UButton>
                     </UDropdownMenu>
                   </div>
-                  <p
+                  <EmptyState
                     v-if="filteredKinds.length === 0"
-                    class="px-4 py-6 text-center text-sm text-dimmed"
-                  >
-                    {{ t('settings.modelConfiguration.editor.noAgentsMatch', { filter }) }}
-                  </p>
+                    compact
+                    icon="i-lucide-search-x"
+                    :title="t('settings.modelConfiguration.editor.noAgentsMatch', { filter })"
+                  />
                 </div>
               </div>
 

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -12,7 +12,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const store = useReleaseHealthStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -66,21 +66,14 @@ async function saveIncident() {
     }
     if (incidentIo.apiKey.trim()) input.incidentIo = { apiKey: incidentIo.apiKey.trim() }
     if (!input.pagerDuty && !input.incidentIo) {
-      toast.add({
-        title: t('settings.observabilityConnection.toast.incidentCredsRequired'),
-        color: 'error',
-      })
+      actionToast.error('settings.observabilityConnection.toast.incidentCredsRequired')
       return
     }
     await store.saveIncident(input)
     pagerDuty.apiToken = ''
     pagerDuty.fromEmail = ''
     incidentIo.apiKey = ''
-    toast.add({
-      title: t('settings.observabilityConnection.toast.incidentSaved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.observabilityConnection.toast.incidentSaved')
   } catch (e) {
     present(e, 'settings.observabilityConnection.toast.incidentSaveFailed')
   } finally {
@@ -111,11 +104,7 @@ async function saveConnection() {
     })
     datadog.apiKey = ''
     datadog.appKey = ''
-    toast.add({
-      title: t('settings.observabilityConnection.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.observabilityConnection.toast.connected')
   } catch (e) {
     present(e, 'settings.observabilityConnection.toast.connectFailed')
   } finally {

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -19,8 +19,8 @@ const workspace = useWorkspaceStore()
 const store = useOpenRouterStore()
 const apiKeys = useApiKeysStore()
 const models = useModelsStore()
-const toast = useToast()
-const { present } = usePipelineErrorToast()
+const actionToast = useActionToast()
+const { present, presentReported } = usePipelineErrorToast()
 
 const open = computed({
   get: () => ui.openRouterOpen,
@@ -155,21 +155,14 @@ async function connectKey() {
         if (scope === 'workspace') await apiKeys.removeWorkspaceKey(created.id).catch(() => {})
         else await apiKeys.removeUserKey(created.id).catch(() => {})
       }
-      toast.add({
-        title: t('settings.openRouterCatalog.toast.connectFailed'),
-        description: store.refreshError ?? t('settings.openRouterCatalog.toast.rejected'),
-        icon: 'i-lucide-triangle-alert',
-        color: 'error',
-      })
+      // `!reachable` covers an outage or a network fault as well as a refused key, and the probe
+      // does not say which, so the description stays the generic "it reported a failure" line.
+      presentReported(store.refreshError, 'settings.openRouterCatalog.toast.connectFailed')
       return
     }
     keyValue.value = ''
     keyLabel.value = ''
-    toast.add({
-      title: t('settings.openRouterCatalog.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.openRouterCatalog.toast.connected')
   } catch (e) {
     present(e, 'settings.openRouterCatalog.toast.connectFailed')
   } finally {
@@ -181,12 +174,7 @@ async function refresh() {
   if (!workspace.workspaceId) return
   const result = await store.refresh(workspace.workspaceId)
   if (!result.reachable) {
-    toast.add({
-      title: t('settings.openRouterCatalog.toast.unreachable'),
-      description: store.refreshError ?? t('settings.openRouterCatalog.toast.connectFirst'),
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
+    presentReported(store.refreshError, 'settings.openRouterCatalog.toast.unreachable')
   }
 }
 
@@ -202,11 +190,7 @@ async function save() {
     await store.save(workspace.workspaceId, models2)
     // Reflect newly-enabled models in the picker immediately.
     await models.refresh(workspace.workspaceId)
-    toast.add({
-      title: t('settings.openRouterCatalog.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.openRouterCatalog.toast.saved')
   } catch (e) {
     present(e, 'settings.openRouterCatalog.toast.saveFailed')
   } finally {

package/app/components/settings/PackageRegistriesPanel.vue

@@ -12,7 +12,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const store = usePackageRegistriesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -70,11 +70,7 @@ async function addEntry() {
     })
     form.scopes = ''
     form.token = ''
-    toast.add({
-      title: t('settings.packageRegistries.toast.added'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.packageRegistries.toast.added')
   } catch (e) {
     present(e, 'settings.packageRegistries.toast.addFailed')
   } finally {

package/app/components/settings/ProviderConnectionTab.vue

@@ -36,7 +36,7 @@ const emit = defineEmits<{ connected: [] }>()
 
 const { t } = useI18n()
 const store = useProviderConnectionsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction } = useConfirmAction()
 
@@ -208,11 +208,7 @@ function buildFlatPayload() {
 }
 
 function toastSaved() {
-  toast.add({
-    title: t('settings.providerConnection.toast.saved', { title: title.value }),
-    icon: 'i-lucide-check',
-    color: 'success',
-  })
+  actionToast.success('settings.providerConnection.toast.saved', { params: { title: title.value } })
 }
 
 // --- Native flat-form actions (both manifest-overlay and config-overlay flavours) ---
@@ -330,7 +326,7 @@ async function remove() {
   try {
     await store.remove(props.kind)
     resetDraft()
-    toast.add({ title: t('settings.providerConnection.toast.removed'), icon: 'i-lucide-check' })
+    actionToast.success('settings.providerConnection.toast.removed')
   } catch (e) {
     present(e, 'settings.providerConnection.toast.removeFailed')
   } finally {

package/app/components/settings/RiskPolicyPanel.vue

@@ -18,7 +18,7 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 const { t } = useI18n()
 
 const store = useRiskPoliciesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -69,11 +69,7 @@ async function run(key: string, titleKey: string, action: () => Promise<unknown>
 async function save(policy: RiskPolicyLibraryEntry, patch: UpdateRiskPolicyInput) {
   await run(policy.id, 'settings.riskPolicy.toast.saveFailed', async () => {
     await store.update(policy.id, patch)
-    toast.add({
-      title: t('settings.riskPolicy.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.riskPolicy.toast.saved')
   })
 }
 
@@ -112,11 +108,7 @@ async function create(input: Parameters<typeof store.create>[0]) {
   creating.value = true
   try {
     await store.create(input)
-    toast.add({
-      title: t('settings.riskPolicy.toast.created'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.riskPolicy.toast.created')
   } catch (e) {
     present(e, 'settings.riskPolicy.toast.createFailed')
   } finally {
@@ -136,11 +128,7 @@ function clone(policy: RiskPolicyLibraryEntry) {
       t('settings.riskPolicy.inherited.copyName', { name: source }),
     )
     await store.clone(policy.id, name)
-    toast.add({
-      title: t('settings.riskPolicy.toast.cloned'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.riskPolicy.toast.cloned')
   })
 }
 

package/app/components/settings/SharedStacksPanel.vue

@@ -15,8 +15,8 @@ import type {
 
 const { t } = useI18n()
 const store = useSharedStacksStore()
-const toast = useToast()
-const { present } = usePipelineErrorToast()
+const actionToast = useActionToast()
+const { present, presentReported } = usePipelineErrorToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
 const stacks = computed(() => store.stacks)
@@ -150,11 +150,8 @@ async function autodetect() {
       ...(form.directory.trim() ? { directory: form.directory.trim() } : {}),
     })
     if (!rec.detected) {
-      toast.add({
-        title: t('settings.sharedStacks.detect.nothing'),
+      actionToast.warning('settings.sharedStacks.detect.nothing', {
         description: rec.notes[0]?.message ?? '',
-        icon: 'i-lucide-info',
-        color: 'warning',
       })
       return
     }
@@ -163,11 +160,8 @@ async function autodetect() {
     form.composeProfiles = rec.composeProfiles.join(', ')
     form.managedNetworks = rec.managedNetworks.join(', ')
     detectedEnvFiles.value = rec.envFiles
-    toast.add({
-      title: t('settings.sharedStacks.detect.detected'),
+    actionToast.success('settings.sharedStacks.detect.detected', {
       description: t('settings.sharedStacks.detect.detectedBody'),
-      icon: 'i-lucide-wand-sparkles',
-      color: 'success',
     })
   } catch (e) {
     present(e, 'settings.sharedStacks.detect.failed')
@@ -207,13 +201,9 @@ async function saveStack() {
       await store.create(payload)
     }
     resetForm()
-    toast.add({
-      title: t(
-        editing ? 'settings.sharedStacks.toast.updated' : 'settings.sharedStacks.toast.created',
-      ),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success(
+      editing ? 'settings.sharedStacks.toast.updated' : 'settings.sharedStacks.toast.created',
+    )
   } catch (e) {
     present(
       e,
@@ -233,7 +223,7 @@ async function start(stack: SharedStack) {
     // surface that as an error toast too — not only a thrown transport/unavailable error.
     const updated = await store.ensureUp(stack.id)
     if (updated.status === 'failed') {
-      present(updated.lastError ?? '', 'settings.sharedStacks.toast.startFailed')
+      presentReported(updated.lastError, 'settings.sharedStacks.toast.startFailed')
     }
   } catch (e) {
     present(e, 'settings.sharedStacks.toast.startFailed')

package/app/components/settings/TaskTypeSuppressionsPanel.vue

@@ -12,6 +12,7 @@
 // convention); only the chrome around them is i18n.
 import { onMounted, ref } from 'vue'
 import type { TaskTypeSuppression } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const api = useApi()
@@ -65,12 +66,15 @@ async function toggle(row: TaskTypeSuppression, offered: boolean) {
       {{ t('settings.taskTypeSuppressions.intro') }}
     </p>
 
-    <p v-if="loading" class="text-2xs text-dimmed">
-      {{ t('settings.taskTypeSuppressions.loading') }}
-    </p>
-    <p v-else-if="!rows.length" class="text-2xs text-dimmed">
-      {{ t('settings.taskTypeSuppressions.empty') }}
-    </p>
+    <div v-if="loading" class="space-y-2">
+      <USkeleton v-for="n in 3" :key="n" class="h-12 w-full" />
+    </div>
+    <EmptyState
+      v-else-if="!rows.length"
+      compact
+      icon="i-lucide-list-checks"
+      :title="t('settings.taskTypeSuppressions.empty')"
+    />
     <ul v-else class="space-y-2" data-testid="task-type-suppressions">
       <li
         v-for="row in rows"

package/app/components/settings/UsageSettings.vue

@@ -5,6 +5,7 @@
 // only the metered rows. See docs/initiatives/usage-and-quota-tracking.md.
 import { computed, watch } from 'vue'
 import type { UsageBreakdownRow } from '@cat-factory/contracts'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t, n, d } = useI18n()
 const usage = useUsageStore()
@@ -46,9 +47,17 @@ const hasAny = computed(() => usage.rows.length > 0)
       {{ t('settings.usage.period', { date: d(new Date(usage.report.periodStart), 'short') }) }}
     </p>
 
-    <p v-if="usage.loading" class="text-2xs text-dimmed">{{ t('common.loading') }}</p>
+    <div v-if="usage.loading" class="space-y-3">
+      <USkeleton class="h-5 w-1/3" />
+      <USkeleton v-for="n in 3" :key="n" class="h-8 w-full" />
+    </div>
     <p v-else-if="usage.error" class="text-2xs text-app-error-400">{{ usage.error }}</p>
-    <p v-else-if="!hasAny" class="text-2xs text-dimmed">{{ t('settings.usage.empty') }}</p>
+    <EmptyState
+      v-else-if="!hasAny"
+      compact
+      icon="i-lucide-chart-bar"
+      :title="t('settings.usage.empty')"
+    />
 
     <template v-else>
       <!-- Subscriptions (flat-rate quota harnesses) -->

package/app/components/settings/UserSecretsSection.vue

@@ -15,7 +15,7 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 const { t } = useI18n()
 const ui = useUiStore()
 const store = useUserSecretsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -105,12 +105,10 @@ async function save() {
     // (backend/docs/security-model.md). Best-effort: the save already succeeded, so a probe
     // failure must not read as one.
     testResult.value = await store.test(kind.value, payload).catch(() => null)
-    toast.add({
-      title: t('settings.userSecrets.toast.saved', {
+    actionToast.success('settings.userSecrets.toast.saved', {
+      params: {
         label: descriptor.value?.label ?? t('settings.userSecrets.secretFallback'),
-      }),
-      icon: 'i-lucide-check',
-      color: 'success',
+      },
     })
   } catch (e) {
     present(e, 'settings.userSecrets.toast.saveFailed')
@@ -134,7 +132,7 @@ async function remove() {
   try {
     await store.remove(kind.value)
     resetDraft()
-    toast.add({ title: t('settings.userSecrets.toast.removed'), icon: 'i-lucide-check' })
+    actionToast.success('settings.userSecrets.toast.removed')
   } catch (e) {
     present(e, 'settings.userSecrets.toast.removeFailed')
   } finally {

package/app/components/settings/WorkspaceMetadataSettings.vue

@@ -18,11 +18,12 @@ import {
 import type { WorkspaceMetadataFieldDefinition } from '~/modular/workspace-metadata'
 import type { AppSlots } from '~/modular/slots'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const slots = useReactiveSlots<AppSlots>()
 const store = useWorkspaceSettingsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 /**
@@ -67,11 +68,7 @@ async function save() {
     await store.update({
       metadata: metadataPatchFrom(fields.value, draft, store.settings.metadata),
     })
-    toast.add({
-      title: t('settings.workspaceSettings.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.workspaceSettings.toast.saved')
   } catch (e) {
     present(e, 'settings.workspaceSettings.toast.saveFailed')
   } finally {
@@ -99,9 +96,12 @@ function selectItems(field: WorkspaceMetadataFieldDefinition) {
       </p>
     </section>
 
-    <p v-if="fields.length === 0" class="text-2xs text-dimmed">
-      {{ t('settings.workspaceSettings.metadata.empty') }}
-    </p>
+    <EmptyState
+      v-if="fields.length === 0"
+      compact
+      icon="i-lucide-tags"
+      :title="t('settings.workspaceSettings.metadata.empty')"
+    />
 
     <template v-else>
       <div class="space-y-4">

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -32,7 +32,7 @@ const store = useWorkspaceSettingsStore()
 const workspace = useWorkspaceStore()
 const access = useWorkspaceAccess()
 const pipelines = usePipelinesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const slots = useReactiveSlots<AppSlots>()
 // Whether the deployment registers any reusable operation at all, hidden or not, so the
@@ -283,11 +283,7 @@ async function save() {
   // Mirror the backend's enforce-mode validation client-side so the user gets an immediate,
   // localized message instead of the raw 422 (enforce needs at least one hard trigger).
   if (draft.reviewFrictionMode === 'enforce' && blockCount == null && blockStuckMinutes == null) {
-    toast.add({
-      title: t('settings.workspaceSettings.reviewFriction.needsTrigger'),
-      icon: 'i-lucide-triangle-alert',
-      color: 'warning',
-    })
+    actionToast.error('settings.workspaceSettings.reviewFriction.needsTrigger')
     return
   }
   saving.value = true
@@ -322,11 +318,7 @@ async function save() {
       reviewFrictionBlockCount: blockCount,
       reviewFrictionBlockStuckMinutes: blockStuckMinutes,
     })
-    toast.add({
-      title: t('settings.workspaceSettings.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.workspaceSettings.toast.saved')
   } catch (e) {
     present(e, 'settings.workspaceSettings.toast.saveFailed')
   } finally {

package/app/components/skills/ReviewSkillQueue.vue

@@ -18,6 +18,7 @@ import { computed, ref } from 'vue'
 import { MAX_REVIEW_SKILLS } from '@cat-factory/contracts'
 import { useSkillsStore } from '~/stores/skills'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   /** The queued skill ids, in the order the reviewer applies them (`v-model`). */
@@ -109,9 +110,12 @@ function toggle(id: string) {
                   </span>
                 </UButton>
               </template>
-              <p v-else class="px-2 py-3 text-xs text-dimmed">
-                {{ t('skills.reviewQueue.pickerEmpty') }}
-              </p>
+              <EmptyState
+                v-else
+                compact
+                icon="i-lucide-book-open-check"
+                :title="t('skills.reviewQueue.pickerEmpty')"
+              />
             </div>
 
             <p