@cat-factory/app 0.311.2 → 0.312.0

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

package/app/components/skills/SkillLibraryManager.vue

@@ -13,12 +13,13 @@ import { SKILL_GROUP_LABEL_KEYS } from '~/utils/skills'
 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<{ accountId: string }>()
 
 const library = useSkillLibrary(props.accountId)
 const github = useGitHubStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
@@ -85,7 +86,7 @@ async function linkSource() {
       gitRef: sourceRef.value.trim() || undefined,
     })
     resetSourceDraft()
-    toast.add({ title: t('skills.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
+    actionToast.success('skills.toast.sourceLinked')
   } catch (e) {
     present(e, 'skills.toast.linkSourceFailed')
   } finally {
@@ -97,13 +98,11 @@ async function syncSource(id: string) {
   await withRow(`sync:${id}`, async () => {
     try {
       const result = await library.syncSource(id)
-      toast.add({
-        title: t('skills.toast.synced', {
+      actionToast.success('skills.toast.synced', {
+        params: {
           updated: result.upserted,
           removed: result.tombstoned,
-        }),
-        icon: 'i-lucide-refresh-cw',
-        color: 'info',
+        },
       })
     } catch (e) {
       present(e, 'skills.toast.syncFailed')
@@ -115,10 +114,7 @@ async function checkSource(id: string) {
   await withRow(`check:${id}`, async () => {
     try {
       const status = await library.checkSource(id)
-      toast.add({
-        title: status.changed ? t('skills.toast.changesAvailable') : t('skills.toast.upToDate'),
-        icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-      })
+      actionToast.info(status.changed ? 'skills.toast.changesAvailable' : 'skills.toast.upToDate')
     } catch (e) {
       present(e, 'skills.toast.checkSourceFailed')
     }
@@ -139,7 +135,7 @@ async function unlinkSource(id: string) {
   await withRow(`unlink:${id}`, async () => {
     try {
       await library.unlinkSource(id)
-      toast.add({ title: t('skills.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
+      actionToast.success('skills.toast.sourceUnlinked')
     } catch (e) {
       present(e, 'skills.toast.unlinkSourceFailed')
     }
@@ -195,9 +191,12 @@ async function unlinkSource(id: string) {
             </p>
           </div>
         </div>
-        <p v-if="!library.catalog.length" class="text-sm text-dimmed">
-          {{ t('skills.catalog.empty') }}
-        </p>
+        <EmptyState
+          v-if="!library.catalog.length"
+          compact
+          icon="i-lucide-book-open-check"
+          :title="t('skills.catalog.empty')"
+        />
       </div>
 
       <!-- Repo sources -->
@@ -264,9 +263,12 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!library.sources.length" class="text-sm text-dimmed">
-          {{ t('skills.sources.empty') }}
-        </p>
+        <EmptyState
+          v-if="!library.sources.length"
+          compact
+          icon="i-lucide-git-branch"
+          :title="t('skills.sources.empty')"
+        />
 
         <!-- Link a new source. Needs the GitHub integration; hide the form when it's off. -->
         <div

package/app/components/slack/SlackPanel.vue

@@ -20,7 +20,7 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const slack = useSlackStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirm } = useConfirm()
@@ -134,7 +134,7 @@ async function connectWithToken() {
   try {
     await slack.connectWithToken(tokenInput.value.trim())
     tokenInput.value = ''
-    toast.add({ title: t('slack.toast.connected'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('slack.toast.connected')
   } catch (e) {
     present(e, 'slack.error.connect')
   }
@@ -163,7 +163,7 @@ async function saveRouting() {
       routes: { ...routes },
       mentionsEnabled: mentionsEnabled.value,
     })
-    toast.add({ title: t('slack.toast.routingSaved'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('slack.toast.routingSaved')
   } catch (e) {
     present(e, 'slack.error.saveRouting')
   } finally {
@@ -182,11 +182,8 @@ async function saveMapping() {
   // dropped on save (UX-23) — block instead so the user doesn't lose the entry. A
   // fully-empty row is just an unused slot and is ignored.
   if (hasHalfFilledRow(mapping.value)) {
-    toast.add({
-      title: t('slack.members.incompleteTitle'),
+    actionToast.error('slack.members.incompleteTitle', {
       description: t('slack.members.incompleteBody'),
-      icon: 'i-lucide-triangle-alert',
-      color: 'warning',
     })
     return
   }
@@ -195,7 +192,7 @@ async function saveMapping() {
     const entries = toMemberEntries(mapping.value)
     await slack.updateMemberMapping(entries)
     mapping.value = slack.memberMapping.map((e) => toMemberRow(e, nextUid()))
-    toast.add({ title: t('slack.toast.mapSaved'), icon: 'i-lucide-check', color: 'success' })
+    actionToast.success('slack.toast.mapSaved')
   } catch (e) {
     present(e, 'slack.error.saveMap')
   } finally {