@cat-factory/app 0.311.2 → 0.311.3

package/app/components/guidedReview/GuidedReviewThread.vue

@@ -4,6 +4,8 @@
 import { isPostableDraft } from '@cat-factory/contracts'
 import type { GuidedReviewCommentDraft, GuidedReviewThreadView } from '~/types/domain'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 import GuidedReviewFailure from '~/components/guidedReview/GuidedReviewFailure.vue'
 import GuidedReviewDraftCard from '~/components/guidedReview/GuidedReviewDraftCard.vue'
 import {
@@ -112,9 +114,12 @@ async function draftComments(): Promise<void> {
 <template>
   <div class="flex h-full min-h-0 flex-col gap-3" data-testid="guided-review-thread">
     <div class="min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
-      <p v-if="!messages.length" class="text-sm text-muted">
-        {{ t('guidedReview.thread.empty') }}
-      </p>
+      <EmptyState
+        v-if="!messages.length"
+        compact
+        icon="i-lucide-message-circle-question"
+        :title="t('guidedReview.thread.empty')"
+      />
       <div
         v-for="m in messages"
         :key="m.id"
@@ -129,7 +134,7 @@ async function draftComments(): Promise<void> {
           <p class="whitespace-pre-wrap">{{ m.content }}</p>
         </template>
         <p v-else-if="isLive(m)" class="flex items-center gap-2 text-muted">
-          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+          <Spinner class="h-4 w-4" />
           {{
             m.depth === 'deep'
               ? t('guidedReview.thread.investigating')

package/app/components/humanTest/HumanTestWindow.vue

@@ -16,6 +16,7 @@ type HumanTestRoundOutcome = NonNullable<HumanTestRound['outcome']>
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -253,7 +254,7 @@ const canDestroy = computed(
           v-if="working"
           class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-xs text-toned"
         >
-          <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-app-warning-300" />
+          <Spinner class="h-3.5 w-3.5 text-app-warning-300" />
           {{ phase ? t(PHASE_LABEL[phase]) : '' }}
         </p>
 

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -37,6 +37,7 @@ import {
 } from '~/utils/interviewGate'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
@@ -212,13 +213,12 @@ async function onDiscard() {
     <div class="flex min-h-0 flex-1">
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
         <!-- No entity yet -->
-        <div
+        <EmptyState
           v-if="!initiative"
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
-        >
-          <UIcon name="i-lucide-messages-square" class="h-8 w-8 opacity-40" />
-          <p class="text-sm">{{ t('initiative.planning.empty') }}</p>
-        </div>
+          class="h-full"
+          icon="i-lucide-messages-square"
+          :title="t('initiative.planning.empty')"
+        />
 
         <template v-else>
           <p class="mb-4 text-sm leading-relaxed text-toned">

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -31,6 +31,7 @@ import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import InitiativePlanReview from '~/components/initiative/InitiativePlanReview.vue'
 import InitiativePlanNotice from '~/components/initiative/InitiativePlanNotice.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
@@ -373,14 +374,12 @@ const { requestClose } = useUnsavedGuard({
         <!-- No entity yet (module unwired / still creating). Centred in the column when it is the
              only thing in it; merely inset when the notice above it means `h-full` would overflow
              the scroller by the notice's own height. -->
-        <div
+        <EmptyState
           v-if="!initiative"
-          class="flex flex-col items-center justify-center gap-2 text-center text-muted"
           :class="planApproval ? 'py-16' : 'h-full'"
-        >
-          <UIcon name="i-lucide-milestone" class="h-8 w-8 opacity-40" />
-          <p class="text-sm">{{ t('initiative.tracker.empty') }}</p>
-        </div>
+          icon="i-lucide-milestone"
+          :title="t('initiative.tracker.empty')"
+        />
 
         <template v-else>
           <!-- Paused at a phase checkpoint (D2): a completed checkpoint phase is awaiting
@@ -467,12 +466,13 @@ const { requestClose } = useUnsavedGuard({
           </section>
 
           <!-- Awaiting planning -->
-          <div
+          <EmptyState
             v-if="phases.length === 0"
-            class="mb-4 rounded-lg border border-dashed border-muted p-4 text-center text-xs text-muted"
-          >
-            {{ t('initiative.tracker.noPlan') }}
-          </div>
+            class="mb-4"
+            compact
+            icon="i-lucide-list-todo"
+            :title="t('initiative.tracker.noPlan')"
+          />
 
           <!-- Phases + items -->
           <section v-for="phase in phases" :key="phase.id" class="mb-5">

package/app/components/judge/JudgeResultView.vue

@@ -14,6 +14,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -149,13 +150,7 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
     </template>
 
     <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-      <div
-        v-if="!judge"
-        class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
-      >
-        <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
-        <p class="text-sm">{{ t('judge.empty') }}</p>
-      </div>
+      <EmptyState v-if="!judge" :icon="meta.icon" :title="t('judge.empty')" />
 
       <template v-else>
         <!-- The score against the task's threshold — the whole verdict in one line. -->

package/app/components/kaizen/KaizenPanel.vue

@@ -4,6 +4,7 @@ import { onKeyStroke } from '@vueuse/core'
 import type { TableColumn } from '@nuxt/ui'
 import type { KaizenGrading } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
+import EmptyState from '~/components/common/EmptyState.vue'
 import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // The Kaizen screen: a full-panel overlay listing the workspace's grading history and
@@ -123,7 +124,16 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
             <p class="mb-3 text-2xs text-dimmed">
               {{ t('kaizen.verifiedCombos.hint') }}
             </p>
-            <ul class="space-y-2">
+            <div v-if="kaizen.loadingOverview && kaizen.verified.length === 0" class="space-y-2">
+              <USkeleton v-for="n in 3" :key="n" class="h-14 w-full rounded-lg" />
+            </div>
+            <EmptyState
+              v-else-if="kaizen.verified.length === 0"
+              compact
+              icon="i-lucide-badge-check"
+              :title="t('kaizen.verifiedCombos.empty')"
+            />
+            <ul v-else class="space-y-2">
               <li
                 v-for="c in kaizen.verified"
                 :key="c.comboKey"
@@ -156,9 +166,6 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
                   }}
                 </div>
               </li>
-              <li v-if="kaizen.verified.length === 0" class="text-xs text-app-600">
-                {{ t('kaizen.verifiedCombos.empty') }}
-              </li>
             </ul>
           </section>
 
@@ -171,6 +178,7 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
             <UTable
               :data="kaizen.history"
               :columns="historyColumns"
+              :loading="kaizen.loadingOverview"
               :ui="{
                 root: 'overflow-hidden rounded-lg border border-default',
                 base: 'text-xs',
@@ -220,8 +228,15 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
                   </span>
                 </div>
               </template>
+              <!-- UTable draws its loading row only through this slot; without it an empty first
+                   load falls through to #empty and claims there is no history. -->
+              <template #loading>
+                <div class="space-y-2">
+                  <USkeleton v-for="n in 3" :key="n" class="h-8 w-full" />
+                </div>
+              </template>
               <template #empty>
-                <span class="text-app-600">{{ t('kaizen.history.empty') }}</span>
+                <EmptyState compact icon="i-lucide-history" :title="t('kaizen.history.empty')" />
               </template>
             </UTable>
           </section>

package/app/components/kaizen/KaizenStepStatus.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Per-step Kaizen grading status, shown inside the run window (NOT on the board). Reads
 // the grading for this run's step from the kaizen store, lazily loading the run's
@@ -54,7 +55,7 @@ const tone = computed(() => {
           <span class="text-muted">{{ t('kaizen.status.scheduled') }}</span>
         </template>
         <template v-else-if="grading.status === 'running'">
-          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin text-app-hue-teal" />
+          <Spinner class="h-3.5 w-3.5 text-app-hue-teal" />
           <span class="text-app-hue-teal">{{ t('kaizen.status.grading') }}</span>
         </template>
         <template v-else-if="grading.status === 'failed'">

package/app/components/layout/AccountAuditLog.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 import type { AuditEventWire } from '@cat-factory/contracts'
 import { actorLabel, describeEvent } from './AccountAuditLog.logic'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // The account audit log: who did what, when, for the privileged actions an account admin is
 // answerable for. Read-only by construction — the store exposes no mutation and the backend has
@@ -109,9 +110,16 @@ function timestamp(at: number): string {
       <span class="text-muted">{{ loadError }}</span>
     </p>
 
-    <p v-else-if="events.length === 0 && !loading" class="text-muted">
-      {{ t('layout.auditLog.empty') }}
-    </p>
+    <div v-else-if="events.length === 0 && loading" class="space-y-2">
+      <USkeleton v-for="i in 3" :key="i" class="h-14 w-full" />
+    </div>
+
+    <EmptyState
+      v-else-if="events.length === 0"
+      compact
+      icon="i-lucide-scroll-text"
+      :title="t('layout.auditLog.empty')"
+    />
 
     <ol v-else class="space-y-2" data-testid="audit-log-list">
       <li

package/app/components/layout/AccountDeploymentSettings.vue

@@ -13,7 +13,7 @@ const props = defineProps<{ accountId: string }>()
 
 const store = useAccountSettingsStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction } = useConfirmAction()
@@ -178,10 +178,7 @@ async function saveStorage() {
   }
   if (backend === 's3') {
     if (!cs.region.trim() || !cs.bucket.trim()) {
-      toast.add({
-        title: t('layout.accountDeployment.contentStorage.regionBucketValidation'),
-        color: 'error',
-      })
+      actionToast.error('layout.accountDeployment.contentStorage.regionBucketValidation')
       return
     }
     config.s3 = {
@@ -203,16 +200,10 @@ async function saveStorage() {
     if (id && key) {
       input.secrets = { s3: { accessKeyId: id, secretAccessKey: key } }
     } else if (id || key) {
-      toast.add({
-        title: t('layout.accountDeployment.contentStorage.bothKeysValidation'),
-        color: 'error',
-      })
+      actionToast.error('layout.accountDeployment.contentStorage.bothKeysValidation')
       return
     } else if (!storageSummary.value?.s3CredentialsConfigured) {
-      toast.add({
-        title: t('layout.accountDeployment.contentStorage.keysValidation'),
-        color: 'error',
-      })
+      actionToast.error('layout.accountDeployment.contentStorage.keysValidation')
       return
     }
     // else: keys already stored and none re-entered → leave them unchanged.
@@ -224,11 +215,7 @@ async function saveStorage() {
   try {
     await store.save(props.accountId, input)
     hydrateStorage()
-    toast.add({
-      title: t('layout.accountDeployment.contentStorage.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.contentStorage.saved')
   } catch (e) {
     present(e, 'layout.accountDeployment.contentStorage.saveFailed')
   } finally {
@@ -238,7 +225,7 @@ async function saveStorage() {
 
 async function saveSlack() {
   if (!slack.clientId.trim() || !slack.clientSecret.trim() || !slack.redirectUrl.trim()) {
-    toast.add({ title: t('layout.accountDeployment.slack.validation'), color: 'error' })
+    actionToast.error('layout.accountDeployment.slack.validation')
     return
   }
   savingSlack.value = true
@@ -255,11 +242,7 @@ async function saveSlack() {
     slack.clientId = ''
     slack.clientSecret = ''
     slack.redirectUrl = ''
-    toast.add({
-      title: t('layout.accountDeployment.slack.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.slack.saved')
   } catch (e) {
     present(e, 'layout.accountDeployment.slack.saveFailed')
   } finally {
@@ -272,11 +255,7 @@ async function clearSlack() {
   savingSlack.value = true
   try {
     await store.save(props.accountId, { secrets: { slackOAuth: null } })
-    toast.add({
-      title: t('layout.accountDeployment.slack.cleared'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.slack.cleared')
   } catch (e) {
     present(e, 'layout.accountDeployment.slack.clearFailed')
   } finally {
@@ -286,7 +265,7 @@ async function clearSlack() {
 
 async function saveLinear() {
   if (!linear.clientId.trim() || !linear.clientSecret.trim() || !linear.redirectUrl.trim()) {
-    toast.add({ title: t('layout.accountDeployment.linear.validation'), color: 'error' })
+    actionToast.error('layout.accountDeployment.linear.validation')
     return
   }
   savingLinear.value = true
@@ -303,11 +282,7 @@ async function saveLinear() {
     linear.clientId = ''
     linear.clientSecret = ''
     linear.redirectUrl = ''
-    toast.add({
-      title: t('layout.accountDeployment.linear.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.linear.saved')
   } catch (e) {
     present(e, 'layout.accountDeployment.linear.saveFailed')
   } finally {
@@ -320,11 +295,7 @@ async function clearLinear() {
   savingLinear.value = true
   try {
     await store.save(props.accountId, { secrets: { linearOAuth: null } })
-    toast.add({
-      title: t('layout.accountDeployment.linear.cleared'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.linear.cleared')
   } catch (e) {
     present(e, 'layout.accountDeployment.linear.clearFailed')
   } finally {
@@ -334,7 +305,7 @@ async function clearLinear() {
 
 async function saveFigma() {
   if (!figma.clientId.trim() || !figma.clientSecret.trim() || !figma.redirectUrl.trim()) {
-    toast.add({ title: t('layout.accountDeployment.figma.validation'), color: 'error' })
+    actionToast.error('layout.accountDeployment.figma.validation')
     return
   }
   savingFigma.value = true
@@ -351,11 +322,7 @@ async function saveFigma() {
     figma.clientId = ''
     figma.clientSecret = ''
     figma.redirectUrl = ''
-    toast.add({
-      title: t('layout.accountDeployment.figma.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.figma.saved')
   } catch (e) {
     present(e, 'layout.accountDeployment.figma.saveFailed')
   } finally {
@@ -368,11 +335,7 @@ async function clearFigma() {
   savingFigma.value = true
   try {
     await store.save(props.accountId, { secrets: { figmaOAuth: null } })
-    toast.add({
-      title: t('layout.accountDeployment.figma.cleared'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.figma.cleared')
   } catch (e) {
     present(e, 'layout.accountDeployment.figma.clearFailed')
   } finally {
@@ -384,7 +347,7 @@ async function saveWeb() {
   const brave = web.braveApiKey.trim()
   const searxng = web.searxngUrl.trim()
   if (!brave && !searxng) {
-    toast.add({ title: t('layout.accountDeployment.web.validation'), color: 'error' })
+    actionToast.error('layout.accountDeployment.web.validation')
     return
   }
   savingWeb.value = true
@@ -401,11 +364,7 @@ async function saveWeb() {
     web.braveApiKey = ''
     web.searxngUrl = ''
     web.searxngApiKey = ''
-    toast.add({
-      title: t('layout.accountDeployment.web.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.web.saved')
   } catch (e) {
     present(e, 'layout.accountDeployment.web.saveFailed')
   } finally {
@@ -418,11 +377,7 @@ async function clearWeb() {
   savingWeb.value = true
   try {
     await store.save(props.accountId, { secrets: { webSearch: null } })
-    toast.add({
-      title: t('layout.accountDeployment.web.cleared'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('layout.accountDeployment.web.cleared')
   } catch (e) {
     present(e, 'layout.accountDeployment.web.clearFailed')
   } finally {

package/app/components/layout/AccountFailureKindRules.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 import type { AgentFailureKind, PlatformFailureKindRule } from '~/types/execution'
 import {
   AGENT_FAILURE_KINDS,
@@ -165,13 +166,13 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
     </div>
 
     <template v-if="overriding">
-      <p
+      <EmptyState
         v-if="rules.length === 0"
-        class="text-2xs text-dimmed"
+        compact
+        icon="i-lucide-list-filter"
+        :title="t('settings.platformAlerts.failureKinds.empty')"
         data-testid="platform-alert-failure-kinds-empty"
-      >
-        {{ t('settings.platformAlerts.failureKinds.empty') }}
-      </p>
+      />
 
       <div
         v-for="(rule, index) in rules"

package/app/components/layout/AccountModelPolicySettings.vue

@@ -16,7 +16,7 @@ import type {
 const props = defineProps<{ accountId: string }>()
 
 const store = useAccountSettingsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -132,11 +132,7 @@ async function save() {
   try {
     // `config` fully replaces the stored non-secret config, so carry the rest forward.
     await store.save(props.accountId, { config: { ...store.view?.config, modelPolicy: policy } })
-    toast.add({
-      title: t('settings.modelPolicy.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.modelPolicy.saved')
   } catch (e) {
     present(e, 'settings.modelPolicy.saveFailed')
   } finally {

package/app/components/layout/AccountPlatformAlertSettings.vue

@@ -25,7 +25,7 @@ import {
 const props = defineProps<{ accountId: string }>()
 
 const store = useAccountSettingsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -187,14 +187,12 @@ const ruleFaults = computed(() => failureKindRuleFaults(failureKindRules.value ?
 
 async function save() {
   if (!loaded.value) {
-    toast.add({ title: t('settings.platformAlerts.notLoaded'), color: 'error' })
+    actionToast.error('settings.platformAlerts.notLoaded')
     return
   }
   if (invalidFields.value.length > 0) {
-    toast.add({
-      title: t('settings.platformAlerts.invalidNumbers'),
+    actionToast.error('settings.platformAlerts.invalidNumbers', {
       description: invalidFields.value.join(', '),
-      color: 'error',
     })
     return
   }
@@ -203,14 +201,12 @@ async function save() {
   // two faults describe themselves differently because they are fixed differently — a row
   // number is useless advice for a list that is simply too long.
   if (hasFailureKindRuleFaults(ruleFaults.value)) {
-    toast.add({
-      title: t('settings.platformAlerts.failureKinds.invalidTitle'),
+    actionToast.error('settings.platformAlerts.failureKinds.invalidTitle', {
       description: ruleFaults.value.tooMany
         ? t('settings.platformAlerts.failureKinds.tooManyRules', { max: MAX_FAILURE_KIND_RULES })
         : t('settings.platformAlerts.failureKinds.invalidRows', {
             rows: ruleFaults.value.rows.join(', '),
           }),
-      color: 'error',
     })
     return
   }
@@ -229,11 +225,7 @@ async function save() {
     await store.save(props.accountId, {
       config: { ...store.view?.config, platformAlerts: settings },
     })
-    toast.add({
-      title: t('settings.platformAlerts.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.platformAlerts.saved')
   } catch (e) {
     present(e, 'settings.platformAlerts.saveFailed')
   } finally {

package/app/components/layout/AccountRiskPolicySettings.vue

@@ -14,12 +14,13 @@ import type {
 } from '~/types/merge'
 import RiskPolicyCreateForm from '~/components/settings/RiskPolicyCreateForm.vue'
 import RiskPolicyEditorRow from '~/components/settings/RiskPolicyEditorRow.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ accountId: string }>()
 
 const { t } = useI18n()
 const store = useAccountRiskPoliciesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -47,11 +48,7 @@ async function save(policy: RiskPolicyLibraryEntry, patch: UpdateRiskPolicyInput
   busy.value = policy.id
   try {
     await store.update(props.accountId, policy.id, patch)
-    toast.add({
-      title: t('settings.riskPolicy.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('settings.riskPolicy.toast.saved')
   } catch (e) {
     present(e, 'settings.riskPolicy.toast.saveFailed')
   } finally {
@@ -84,11 +81,7 @@ async function create(input: CreateRiskPolicyInput) {
   creating.value = true
   try {
     await store.create(props.accountId, 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 {
@@ -101,9 +94,15 @@ async function create(input: CreateRiskPolicyInput) {
   <div class="space-y-4 text-sm" data-testid="account-risk-policy-panel">
     <p class="text-2xs text-muted">{{ t('layout.accountRiskPolicies.intro') }}</p>
 
-    <p v-if="!store.loading && policies.length === 0" class="text-2xs text-dimmed">
-      {{ t('layout.accountRiskPolicies.empty') }}
-    </p>
+    <div v-if="store.loading && policies.length === 0" class="space-y-2">
+      <USkeleton v-for="i in 2" :key="i" class="h-20 w-full" />
+    </div>
+    <EmptyState
+      v-else-if="policies.length === 0"
+      compact
+      icon="i-lucide-shield"
+      :title="t('layout.accountRiskPolicies.empty')"
+    />
 
     <RiskPolicyEditorRow
       v-for="policy in policies"

package/app/components/layout/AccountRunCredentialSettings.vue

@@ -16,7 +16,7 @@ import { onMounted, ref, watch } from 'vue'
 const props = defineProps<{ accountId: string }>()
 
 const store = useAccountSettingsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -48,7 +48,7 @@ async function save() {
         ...(forbid.value ? { allowInitiatorPat: false } : { allowInitiatorPat: undefined }),
       },
     })
-    toast.add({ title: t('settings.runCredentialPolicy.saved'), color: 'success' })
+    actionToast.success('settings.runCredentialPolicy.saved')
   } catch (e) {
     present(e, 'settings.runCredentialPolicy.saveFailed')
   } finally {