@cat-factory/app 0.311.1 → 0.311.3

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>

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">