@cat-factory/app 0.311.1 → 0.311.3

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 {

package/app/components/layout/AccountTeamSettings.vue

@@ -9,6 +9,7 @@ import AccountPlatformAlertSettings from '~/components/layout/AccountPlatformAle
 import AccountRunCredentialSettings from '~/components/layout/AccountRunCredentialSettings.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Team settings for an org account: the member roster (with combinable admin /
 // developer / product roles), pending email invitations, and the per-account
@@ -19,7 +20,7 @@ const props = defineProps<{ accountId: string }>()
 const accounts = useAccountsStore()
 const uiMode = useUiModeStore()
 const auth = useAuthStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, te } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -77,7 +78,7 @@ async function revokeSessions(userId: string, label: string) {
   if (!(await confirmAction('revoke', label))) return
   try {
     await accounts.revokeMemberSessions(props.accountId, userId)
-    toast.add({ title: t('layout.accountTeam.members.sessionsRevoked'), icon: 'i-lucide-check' })
+    actionToast.success('layout.accountTeam.members.sessionsRevoked')
   } catch (e) {
     present(e, 'layout.accountTeam.errors.revokeSessions')
   }
@@ -114,7 +115,7 @@ async function createOrganization() {
   try {
     await accounts.createOrg(name)
     newOrgName.value = ''
-    toast.add({ title: t('layout.accountTeam.org.created'), icon: 'i-lucide-check' })
+    actionToast.success('layout.accountTeam.org.created')
   } catch (e) {
     present(e, 'layout.accountTeam.errors.createOrg')
   } finally {
@@ -136,12 +137,10 @@ async function sendInvite() {
       inviteRoles.value.length ? inviteRoles.value : ['developer'],
     )
     inviteEmail.value = ''
-    toast.add({
-      title: t('layout.accountTeam.invite.created'),
+    actionToast.success('layout.accountTeam.invite.created', {
       description: acceptUrl
         ? t('layout.accountTeam.invite.createdEmailed')
         : t('layout.accountTeam.invite.createdShareLink'),
-      icon: 'i-lucide-mail-check',
     })
   } catch (e) {
     present(e, 'layout.accountTeam.errors.sendInvite')
@@ -175,7 +174,7 @@ async function connectEmail() {
       fromAddress: emailFrom.value.trim(),
     })
     emailApiKey.value = ''
-    toast.add({ title: t('layout.accountTeam.email.connected'), icon: 'i-lucide-check' })
+    actionToast.success('layout.accountTeam.email.connected')
   } catch (e) {
     present(e, 'layout.accountTeam.errors.connectEmail')
   } finally {
@@ -261,8 +260,12 @@ async function disconnectEmail() {
             @click="revokeSessions(m.userId, m.name || m.email || m.userId)"
           />
         </li>
-        <li v-if="accounts.members.length === 0" class="text-dimmed">
-          {{ t('layout.accountTeam.members.empty') }}
+        <li v-if="accounts.members.length === 0">
+          <EmptyState
+            compact
+            icon="i-lucide-users"
+            :title="t('layout.accountTeam.members.empty')"
+          />
         </li>
       </ul>
     </section>

package/app/components/layout/BoardSwitcher.vue

@@ -28,7 +28,7 @@ const { t } = useI18n()
 const accounts = useAccountsStore()
 const workspace = useWorkspaceStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const access = useWorkspaceAccess()
 const { confirm } = useConfirm()
@@ -191,7 +191,7 @@ async function removeBoard() {
   busy.value = true
   try {
     await workspace.remove(id)
-    toast.add({ title: t('layout.boardSwitcher.toast.boardDeleted'), icon: 'i-lucide-check' })
+    actionToast.success('layout.boardSwitcher.toast.boardDeleted')
   } catch (e) {
     present(e, 'layout.boardSwitcher.toast.deleteBoardFailed')
   } finally {

package/app/components/layout/BoardToolbar.vue

@@ -15,7 +15,7 @@ const execution = useExecutionStore()
 const workspace = useWorkspaceStore()
 const workspaceSettings = useWorkspaceSettingsStore()
 const services = useServicesStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const access = useWorkspaceAccess()
 const { t, n } = useI18n()
@@ -24,11 +24,7 @@ const { fitView, zoomIn, zoomOut, resetZoom } = useBoardFlow()
 async function mountService(serviceId: string, title: string) {
   try {
     await services.mount(serviceId)
-    toast.add({
-      title: t('board.toolbar.serviceAdded', { title }),
-      icon: 'i-lucide-box',
-      color: 'success',
-    })
+    actionToast.success('board.toolbar.serviceAdded', { params: { title } })
   } catch (e) {
     present(e, 'board.toolbar.serviceAddFailed')
   }
@@ -51,11 +47,7 @@ const mountableItems = computed(() =>
 async function restoreService(id: string, title: string) {
   try {
     await board.restoreService(id)
-    toast.add({
-      title: t('board.toast.restored', { name: title }),
-      icon: 'i-lucide-archive-restore',
-      color: 'neutral',
-    })
+    actionToast.success('board.toast.restored', { params: { name: title } })
   } catch (e) {
     present(e, 'board.toast.restoreFailed')
   }

package/app/components/layout/CommandBar.vue

@@ -7,6 +7,7 @@
 // available actions (connected integrations, etc.) show.
 
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 interface Command {
   id: string
@@ -273,9 +274,12 @@ function indexOf(cmd: Command) {
         </div>
 
         <div class="max-h-80 overflow-y-auto p-1.5">
-          <p v-if="filtered.length === 0" class="px-3 py-6 text-center text-sm text-dimmed">
-            {{ t('layout.commandBar.noMatches') }}
-          </p>
+          <EmptyState
+            v-if="filtered.length === 0"
+            compact
+            icon="i-lucide-search-x"
+            :title="t('layout.commandBar.noMatches')"
+          />
 
           <div v-for="group in groups" :key="group.name" class="mb-1">
             <SectionLabel as="p" class="px-2 pb-1 pt-2">

package/app/components/layout/ConnectionStatusBanner.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // A slim top strip shown when the real-time WebSocket isn't delivering events, so a
 // silently-frozen board (events stop arriving, nothing updates) is no longer indistinguishable
@@ -70,7 +71,7 @@ onBeforeUnmount(clearTimer)
         aria-live="polite"
         data-testid="stream-reconnecting"
       >
-        <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin" />
+        <Spinner class="h-3.5 w-3.5" />
         <span>{{ t('app.reconnecting') }}</span>
       </div>
       <div

package/app/components/layout/IntegrationsHub.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { showOverrideField } from '~/utils/uiMode'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // The Integrations hub: a single modal that lists the OPTIONAL external systems the WORKSPACE
 // can enable or link in — the ones that feed a run its context (source control, documents,
@@ -417,9 +418,12 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
           class="w-full"
         />
 
-        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-dimmed">
-          {{ t('layout.integrationsHub.noMatches', { query }) }}
-        </p>
+        <EmptyState
+          v-if="!filteredGroups.length"
+          compact
+          icon="i-lucide-search-x"
+          :title="t('layout.integrationsHub.noMatches', { query })"
+        />
 
         <section v-for="group in filteredGroups" :key="group.title">
           <SectionLabel as="h3" class="mb-2 px-1">

package/app/components/layout/ModelProvidersHub.vue

@@ -13,6 +13,7 @@
 // "Back to Model providers" control (IntegrationBackTitle). Layout mirrors the Integrations
 // hub row-for-row so the two read as siblings.
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -197,9 +198,12 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
           class="w-full"
         />
 
-        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-dimmed">
-          {{ t('layout.modelProvidersHub.noMatches', { query }) }}
-        </p>
+        <EmptyState
+          v-if="!filteredGroups.length"
+          compact
+          icon="i-lucide-search-x"
+          :title="t('layout.modelProvidersHub.noMatches', { query })"
+        />
 
         <section v-for="group in filteredGroups" :key="group.title">
           <SectionLabel as="h3" class="mb-2 px-1">

package/app/components/layout/NotificationsInbox.vue

@@ -16,7 +16,7 @@ const ui = useUiStore()
 const access = useWorkspaceAccess()
 const execution = useExecutionStore()
 const trackRecords = useMergeTrackRecordsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const busy = ref<string | null>(null)
@@ -197,11 +197,7 @@ async function act(n: Notification) {
     // Only the merge cards carry a tag; passing `undefined` elsewhere keeps the historical
     // no-body act, so a non-merge card's action is completely unchanged.
     await notifications.act(n.id, collectsEffort(n) ? effortFor(n) : undefined)
-    toast.add({
-      title: t('layout.notifications.toast.acted'),
-      color: 'success',
-      icon: 'i-lucide-check',
-    })
+    actionToast.success('layout.notifications.toast.acted')
   } catch (e) {
     present(e, 'layout.notifications.toast.actFailed')
   } finally {
@@ -213,11 +209,7 @@ async function dismiss(n: Notification) {
   busy.value = n.id
   try {
     await notifications.dismiss(n.id)
-    toast.add({
-      title: t('layout.notifications.toast.dismissed'),
-      color: 'neutral',
-      icon: 'i-lucide-check',
-    })
+    actionToast.success('layout.notifications.toast.dismissed')
   } catch (e) {
     present(e, 'layout.notifications.toast.dismissFailed')
   } finally {

package/app/components/layout/SideBar.vue

@@ -157,7 +157,7 @@ watch(
     <!-- safe-area-ok: a scrim with no content; the drawer below pads its own edges -->
     <div
       v-if="ui.mobileNavOpen"
-      class="fixed inset-0 z-30 bg-app-950/60 backdrop-blur-sm lg:hidden"
+      class="fixed inset-0 z-30 bg-elevated/75 backdrop-blur-sm lg:hidden"
       data-testid="sidebar-backdrop"
       role="button"
       tabindex="-1"

package/app/components/layout/WorkspaceMembersSettings.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import type { WorkspaceAccessMode, WorkspaceRole } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Workspace-membership management (workspace-rbac initiative, slice 9). The tier BELOW
 // account tenancy: an account admin restricts a board to an explicit member list (with
@@ -16,7 +17,7 @@ const workspace = useWorkspaceStore()
 const members = useWorkspaceMembersStore()
 const accounts = useAccountsStore()
 const auth = useAuthStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -108,7 +109,7 @@ async function addMember() {
     await members.add(props.workspaceId, userId, addRole.value)
     addUserId.value = undefined
     addRole.value = 'member'
-    toast.add({ title: t('layout.workspaceMembers.add.added'), icon: 'i-lucide-user-plus' })
+    actionToast.success('layout.workspaceMembers.add.added')
   } catch (e) {
     present(e, 'layout.workspaceMembers.errors.add')
   } finally {
@@ -173,7 +174,9 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
       <h3 class="mb-2 font-semibold text-highlighted">
         {{ t('layout.workspaceMembers.roster.title') }}
       </h3>
-      <p v-if="!rosterReady" class="text-dimmed">{{ t('common.loading') }}</p>
+      <div v-if="!rosterReady" class="space-y-1">
+        <USkeleton v-for="i in 3" :key="i" class="h-8 w-full" />
+      </div>
       <ul v-else class="space-y-1" data-testid="workspace-members-roster">
         <li
           v-for="m in members.members"
@@ -206,8 +209,12 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
             />
           </span>
         </li>
-        <li v-if="members.members.length === 0" class="text-dimmed">
-          {{ t('layout.workspaceMembers.roster.empty') }}
+        <li v-if="members.members.length === 0">
+          <EmptyState
+            compact
+            icon="i-lucide-users"
+            :title="t('layout.workspaceMembers.roster.empty')"
+          />
         </li>
       </ul>
     </section>

package/app/components/media/ArtifactLightbox.vue

@@ -10,6 +10,7 @@ import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import type { ArtifactBlobs } from '~/composables/useArtifactBlobs'
 import IconButton from '~/components/common/IconButton.vue'
+import Spinner from '~/components/common/Spinner.vue'
 import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 interface LightboxItem {
@@ -273,10 +274,10 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           @pointercancel="onPointerUp"
         />
         <div v-else class="flex flex-col items-center gap-2 text-dimmed">
-          <UIcon
-            :name="state === 'error' ? 'i-lucide-image-off' : 'i-lucide-loader'"
+          <Spinner
+            :name="state === 'error' ? 'i-lucide-image-off' : undefined"
+            :spinning="state !== 'error'"
             class="h-8 w-8"
-            :class="state === 'error' ? '' : 'animate-spin'"
           />
           <p class="text-xs">
             {{ state === 'error' ? t('media.lightbox.failed') : t('media.lightbox.loading') }}

package/app/components/notifications/NotificationSettingsPanel.vue

@@ -30,7 +30,7 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 const ui = useUiStore()
 const notifications = useNotificationsStore()
 const slack = useSlackStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
@@ -119,11 +119,7 @@ async function save() {
   busy.value = true
   try {
     await notifications.updateSettings(matrix)
-    toast.add({
-      title: t('notificationSettings.toast.saved'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('notificationSettings.toast.saved')
   } catch (e) {
     present(e, 'notificationSettings.error.save')
   } finally {
@@ -167,11 +163,8 @@ function resetToDefaults() {
           </UButton>
         </div>
 
-        <div
-          v-else-if="!editable"
-          class="rounded-lg border border-muted bg-elevated/40 p-3 text-xs text-muted"
-        >
-          {{ t('common.loading') }}
+        <div v-else-if="!editable" class="space-y-1">
+          <USkeleton v-for="n in 4" :key="n" class="h-10 w-full" />
         </div>
 
         <template v-else>

package/app/components/observability/ToolCallList.vue

@@ -6,6 +6,7 @@ import { filterToolCallsByOutcome, formatMs } from '~/utils/observability'
 import { agentKindMeta } from '~/utils/catalog'
 import OutcomeFilterChips from '~/components/observability/OutcomeFilterChips.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // The tool-call TRAJECTORY drill-down: what the run's agents DID, oldest first, in the order
 // they did it. The sibling of the model-call list, and the one that holds the failures no LLM
@@ -153,13 +154,9 @@ function prettyArgs(raw: string): string {
 
     <!-- Every state below is gated on having NOTHING to show: rows already in hand outrank a
          read still in flight behind them, and outrank one that failed. -->
-    <p
-      v-if="source.loading && !visible.length"
-      class="flex items-center justify-center gap-2 py-8 text-center text-sm text-dimmed"
-    >
-      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-      {{ t('observability.toolCalls.loading') }}
-    </p>
+    <div v-if="source.loading && !visible.length" class="space-y-2">
+      <USkeleton v-for="n in 3" :key="n" class="h-10 w-full rounded-xl" />
+    </div>
     <div
       v-else-if="source.error && !visible.length"
       class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-app-error-900/60 py-6 text-center text-sm text-app-error-400"
@@ -178,20 +175,18 @@ function prettyArgs(raw: string): string {
     </div>
     <!-- "The run made no tool calls" is a claim about the RUN, so it comes off the aggregate,
          never off an empty prefix that may simply not have loaded. -->
-    <p
+    <EmptyState
       v-else-if="!counts.all"
-      class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
-    >
-      {{ t('observability.toolCalls.none') }}
-    </p>
+      icon="i-lucide-wrench"
+      :title="t('observability.toolCalls.none')"
+    />
     <!-- Narrowed to nothing is a different statement from recorded nothing, and it is the more
          reassuring of the two: the operator asked for the failures and there are none. -->
-    <p
+    <EmptyState
       v-else-if="!visible.length"
-      class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
-    >
-      {{ t('observability.toolCalls.noneMatching') }}
-    </p>
+      icon="i-lucide-list-filter"
+      :title="t('observability.toolCalls.noneMatching')"
+    />
 
     <template v-else>
       <!-- What this view is bounded by, when it is. A cap nobody can see is a prefix read as a

package/app/components/panels/AgentStepDetail.vue

@@ -31,6 +31,7 @@ import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 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'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
@@ -822,12 +823,11 @@ async function copyOutput() {
             </section>
           </template>
 
-          <p
+          <EmptyState
             v-else
-            class="rounded-lg border border-dashed border-default py-6 text-center text-sm text-dimmed"
-          >
-            {{ t('panels.stepDetail.noProseOutput') }}
-          </p>
+            icon="i-lucide-file-text"
+            :title="t('panels.stepDetail.noProseOutput')"
+          />
         </div>
       </div>
     </div>

package/app/components/panels/GenericStructuredResultView.vue

@@ -12,6 +12,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -87,16 +88,12 @@ const customJson = computed<string | null>(() => {
           ><code>{{ customJson }}</code></pre>
         </template>
 
-        <div
+        <EmptyState
           v-else-if="!step?.output"
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
-        >
-          <UIcon name="i-lucide-braces" class="h-8 w-8 opacity-40" />
-          <p class="text-sm">{{ t('panels.structuredResult.noResult') }}</p>
-          <p class="max-w-sm text-2xs text-dimmed">
-            {{ t('panels.structuredResult.noResultHint') }}
-          </p>
-        </div>
+          icon="i-lucide-braces"
+          :title="t('panels.structuredResult.noResult')"
+          :description="t('panels.structuredResult.noResultHint')"
+        />
       </div>
 
       <!-- Sidebar: shared run metadata + observability rollup -->

package/app/components/panels/InspectorPanel.vue

@@ -11,6 +11,7 @@ import BootstrapRunSteps from '~/components/bootstrap/BootstrapRunSteps.vue'
 import { BLUEPRINT_AGENT_KIND } from '@cat-factory/contracts'
 import { VCS_PROVIDER_ICONS } from '~/utils/vcs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -500,7 +501,7 @@ const showOriginalDescription = ref(false)
       >
         <div class="flex items-center justify-between gap-2">
           <span class="flex items-center gap-1.5 text-xs text-app-warning-300">
-            <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
+            <Spinner class="h-3.5 w-3.5" />
             {{ t('panels.inspector.bootstrapping') }}
           </span>
           <div class="flex items-center gap-1.5">

package/app/components/panels/MergerResultView.vue

@@ -12,6 +12,7 @@ import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.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()
@@ -275,13 +276,11 @@ const reasonText = computed(() => {
           :text="step.output"
           class="text-sm leading-relaxed text-toned"
         />
-        <div
+        <EmptyState
           v-else
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
-        >
-          <UIcon name="i-lucide-git-pull-request" class="h-8 w-8 opacity-40" />
-          <p class="text-sm">{{ t('panels.mergerResult.noResult') }}</p>
-        </div>
+          icon="i-lucide-git-pull-request"
+          :title="t('panels.mergerResult.noResult')"
+        />
       </div>
 
       <!-- Sidebar: shared run metadata. -->