@cat-factory/app 0.311.2 → 0.312.0

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>

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 {