@cat-factory/app 0.311.1 → 0.311.3

package/app/components/panels/ObservabilityPanel.vue

@@ -32,6 +32,7 @@ import RunFailureSummary from '~/components/observability/RunFailureSummary.vue'
 import ToolCallList from '~/components/observability/ToolCallList.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'
 
 /** No run selected: the same empty, NOT-truncated trajectory the store answers with. */
@@ -844,13 +845,9 @@ function exportJson() {
             </section>
 
             <!-- states -->
-            <p
-              v-if="loading && !calls.length"
-              class="flex items-center gap-2 py-8 text-center text-sm text-dimmed justify-center"
-            >
-              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-              {{ t('observability.loadingActivity') }}
-            </p>
+            <div v-if="loading && !calls.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="error"
               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"
@@ -867,12 +864,11 @@ function exportJson() {
                 {{ t('common.retry') }}
               </UButton>
             </div>
-            <p
+            <EmptyState
               v-else-if="!calls.length"
-              class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
-            >
-              {{ t('observability.noCalls') }}
-            </p>
+              icon="i-lucide-activity"
+              :title="t('observability.noCalls')"
+            />
 
             <!-- per-call list, narrowable by outcome -->
             <template v-else>
@@ -886,12 +882,11 @@ function exportJson() {
               <!-- Narrowed to nothing reads differently from recorded nothing, and on this
                    surface it is the good news: the operator asked for the failures and there
                    are none. -->
-              <p
+              <EmptyState
                 v-if="!visibleCalls.length"
-                class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
-              >
-                {{ t('observability.noCallsMatching') }}
-              </p>
+                icon="i-lucide-list-filter"
+                :title="t('observability.noCallsMatching')"
+              />
 
               <ul v-else class="space-y-2">
                 <li
@@ -1092,13 +1087,9 @@ function exportJson() {
 
           <!-- Provided context: the complete context each container agent was given. -->
           <div v-else-if="view === 'context'" class="mx-auto max-w-4xl space-y-5">
-            <p
-              v-if="contextLoading && !contextSnapshots.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.loadingContext') }}
-            </p>
+            <div v-if="contextLoading && !contextSnapshots.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="contextError && !contextSnapshots.length"
               class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-app-error-900/60 py-8 text-center text-sm text-app-error-400"
@@ -1115,12 +1106,11 @@ function exportJson() {
                 {{ t('common.retry') }}
               </UButton>
             </div>
-            <p
+            <EmptyState
               v-else-if="!contextSnapshots.length"
-              class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
-            >
-              {{ t('observability.noContext') }}
-            </p>
+              icon="i-lucide-file-text"
+              :title="t('observability.noContext')"
+            />
 
             <ul v-else class="space-y-2">
               <li
@@ -1251,19 +1241,14 @@ function exportJson() {
               </span>
             </section>
 
-            <p
-              v-if="searchLoading && !searchQueries.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.loadingSearch') }}
-            </p>
-            <p
+            <div v-if="searchLoading && !searchQueries.length" class="space-y-2">
+              <USkeleton v-for="n in 3" :key="n" class="h-10 w-full rounded-xl" />
+            </div>
+            <EmptyState
               v-else-if="!searchQueries.length"
-              class="rounded-lg border border-dashed border-default py-8 text-center text-sm text-dimmed"
-            >
-              {{ t('observability.noSearch') }}
-            </p>
+              icon="i-lucide-search"
+              :title="t('observability.noSearch')"
+            />
 
             <div v-else>
               <SectionLabel class="mb-2">

package/app/components/panels/OperatorDashboardPanel.vue

@@ -7,6 +7,7 @@ import { formatMs } from '~/utils/observability'
 import { FAILURE_KIND_KEYS, isAgentFailureKind } from '~/utils/failureKinds'
 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'
 
 // Deployment-level (platform-operator) observability dashboard: the aggregate health of the
@@ -166,10 +167,11 @@ watch(
             color="neutral"
             variant="ghost"
             icon="i-lucide-refresh-cw"
+            :loading="loading"
             :label="t('platformObservability.refresh')"
             :ui="{
               base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
-              leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
+              leadingIcon: 'h-4 w-4',
             }"
             data-testid="operator-refresh"
             @click="refresh"
@@ -205,8 +207,9 @@ watch(
             </UButton>
           </div>
 
-          <div v-else-if="loading && !view" class="py-16 text-center text-sm text-muted">
-            {{ t('platformObservability.loading') }}
+          <div v-else-if="loading && !view" class="mx-auto flex max-w-5xl flex-col gap-6">
+            <USkeleton class="h-20 w-full rounded-lg" />
+            <USkeleton v-for="n in 2" :key="n" class="h-36 w-full rounded-lg" />
           </div>
 
           <div v-else-if="view" class="mx-auto flex max-w-5xl flex-col gap-6">
@@ -299,9 +302,12 @@ watch(
                 {{ t('platformObservability.trend.title') }}
               </SectionLabel>
               <div class="rounded-lg border border-default bg-default/40 p-4">
-                <div v-if="view.outcomes.total === 0" class="py-6 text-center text-xs text-dimmed">
-                  {{ t('platformObservability.trend.empty') }}
-                </div>
+                <EmptyState
+                  v-if="view.outcomes.total === 0"
+                  compact
+                  icon="i-lucide-chart-column"
+                  :title="t('platformObservability.trend.empty')"
+                />
                 <div v-else class="flex h-28 items-end gap-0.5" data-testid="operator-trend">
                   <div
                     v-for="p in view.trend.points"
@@ -349,9 +355,12 @@ watch(
                 {{ t('platformObservability.gates.title') }}
               </SectionLabel>
               <div class="overflow-x-auto rounded-lg border border-default bg-default/40 p-4">
-                <p v-if="!view.gates.length" class="py-4 text-center text-xs text-dimmed">
-                  {{ t('platformObservability.gates.empty') }}
-                </p>
+                <EmptyState
+                  v-if="!view.gates.length"
+                  compact
+                  icon="i-lucide-shield-check"
+                  :title="t('platformObservability.gates.empty')"
+                />
                 <UTable
                   v-else
                   :data="view.gates"
@@ -412,9 +421,12 @@ watch(
                   {{ t('platformObservability.failures.title') }}
                 </SectionLabel>
                 <div class="rounded-lg border border-default bg-default/40 p-4">
-                  <div v-if="!view.failures.length" class="py-4 text-center text-xs text-dimmed">
-                    {{ t('platformObservability.failures.empty') }}
-                  </div>
+                  <EmptyState
+                    v-if="!view.failures.length"
+                    compact
+                    icon="i-lucide-circle-x"
+                    :title="t('platformObservability.failures.empty')"
+                  />
                   <ul v-else class="flex flex-col gap-2" data-testid="operator-failures">
                     <li v-for="f in view.failures" :key="f.kind" class="text-xs">
                       <div class="mb-0.5 flex items-center justify-between">
@@ -475,12 +487,12 @@ watch(
                     {{ t('platformObservability.durations.title') }}
                   </SectionLabel>
                   <div class="rounded-lg border border-default bg-default/40 p-3 text-sm">
-                    <div
+                    <EmptyState
                       v-if="view.durations.count === 0"
-                      class="py-2 text-center text-xs text-dimmed"
-                    >
-                      {{ t('platformObservability.durations.empty') }}
-                    </div>
+                      compact
+                      icon="i-lucide-timer"
+                      :title="t('platformObservability.durations.empty')"
+                    />
                     <dl
                       v-else
                       class="grid grid-cols-3 gap-y-3 text-center"

package/app/components/panels/ReportsPanel.vue

@@ -21,6 +21,7 @@ import {
 import ReportsSpendBreakdown from '~/components/panels/ReportsSpendBreakdown.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'
 
 // Reports: cross-cutting usage analytics for the active account — where the spend and the
@@ -245,10 +246,11 @@ watch(
               color="neutral"
               variant="ghost"
               icon="i-lucide-refresh-cw"
+              :loading="loading"
               :label="t('reports.refresh')"
               :ui="{
                 base: 'rounded-lg border border-default p-1.5 text-muted transition hover:text-default',
-                leadingIcon: loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4',
+                leadingIcon: 'h-4 w-4',
               }"
               @click="refresh"
             />
@@ -283,8 +285,9 @@ watch(
             </UButton>
           </div>
 
-          <div v-else-if="loading && !view" class="py-16 text-center text-sm text-muted">
-            {{ t('reports.loading') }}
+          <div v-else-if="loading && !view" class="mx-auto flex max-w-5xl flex-col gap-6">
+            <USkeleton class="h-20 w-full rounded-lg" />
+            <USkeleton v-for="n in 2" :key="n" class="h-36 w-full rounded-lg" />
           </div>
 
           <div v-else-if="view" class="mx-auto flex max-w-5xl flex-col gap-6">
@@ -374,9 +377,12 @@ watch(
                 {{ t('reports.trend.title') }}
               </SectionLabel>
               <div class="rounded-lg border border-default bg-default/40 p-4">
-                <div v-if="!hasSpend" class="py-6 text-center text-xs text-dimmed">
-                  {{ t('reports.trend.empty') }}
-                </div>
+                <EmptyState
+                  v-if="!hasSpend"
+                  compact
+                  icon="i-lucide-chart-column"
+                  :title="t('reports.trend.empty')"
+                />
                 <div v-else class="flex h-28 items-end gap-0.5" data-testid="reports-trend">
                   <div
                     v-for="point in view.trend.points"
@@ -505,12 +511,12 @@ watch(
                     {{ t('reports.activity.heading') }}
                   </h3>
                   <div class="rounded-lg border border-default bg-default/40 p-4">
-                    <div
+                    <EmptyState
                       v-if="!activityByDimension.length"
-                      class="py-4 text-center text-xs text-dimmed"
-                    >
-                      {{ t('reports.activity.empty') }}
-                    </div>
+                      compact
+                      icon="i-lucide-activity"
+                      :title="t('reports.activity.empty')"
+                    />
                     <template v-else>
                       <ul class="flex flex-col gap-3" data-testid="reports-activity">
                         <li

package/app/components/panels/ReportsSpendBreakdown.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { ReportSpendCap, ReportSpendRow } from '~/types/execution'
 import { maxOf, segmentPct, spendMagnitude } from './ReportsPanel.logic'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // One ranked spend breakdown: a horizontal bar per slice, split into the metered
 // (`violet-500`, real money) and subscription (`amber-600`, illustrative equivalent-API
@@ -34,9 +35,12 @@ const max = computed(() => maxOf(props.rows, spendMagnitude))
 
 <template>
   <div class="rounded-lg border border-default bg-default/40 p-4">
-    <div v-if="!rows.length" class="py-4 text-center text-xs text-dimmed">
-      {{ t('reports.spend.empty') }}
-    </div>
+    <EmptyState
+      v-if="!rows.length"
+      compact
+      icon="i-lucide-wallet"
+      :title="t('reports.spend.empty')"
+    />
     <ul v-else class="flex flex-col gap-2.5" :data-testid="testId">
       <li v-for="row in rows" :key="row.key" class="text-xs" data-testid="reports-spend-row">
         <div class="mb-1 flex items-baseline justify-between gap-2">

package/app/components/panels/ResultWindowShell.vue

@@ -257,7 +257,7 @@ const chipClass = computed(() =>
 
 const backdropClass = computed(() => [
   WINDOWED_OVERLAY_CLASS,
-  'z-50 justify-center bg-app-950/70 backdrop-blur-sm',
+  'z-50 justify-center bg-elevated/75 backdrop-blur-sm',
   props.variant === 'centered' ? 'items-center' : 'items-stretch',
 ])
 // The centered cap is the smaller of 90dvh and the backdrop's padded box: with a large inset (a

package/app/components/panels/RunDetailLoadState.vue

@@ -12,6 +12,7 @@
  * event delivered and every run already fetched once.
  */
 import { computed } from 'vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{ instanceId: string | null }>()
 
@@ -29,10 +30,10 @@ const error = computed(() => execution.fullError(props.instanceId))
     :class="error ? 'text-app-error-300' : 'text-muted'"
     data-testid="run-detail-load-state"
   >
-    <UIcon
-      :name="error ? 'i-lucide-triangle-alert' : 'i-lucide-loader-circle'"
+    <Spinner
+      :name="error ? 'i-lucide-triangle-alert' : undefined"
+      :spinning="!error"
       class="h-3.5 w-3.5 shrink-0"
-      :class="error ? '' : 'animate-spin'"
     />
     <span>{{
       error ? t('panels.runDetail.loadFailed', { reason: error }) : t('panels.runDetail.loading')

package/app/components/panels/StepContainerStatus.vue

@@ -4,6 +4,7 @@ import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // The per-run container lifecycle for a container-backed step: its status (spinning up /
 // running / errored / reclaimed), the live phase (preparing the checkout vs the agent
@@ -74,7 +75,7 @@ const CONTAINER_STATUS_META: Record<
 
 // Whether the status icon animates: only a cold-boot genuinely in flight, i.e. one whose run is
 // still being driven. A `starting` container on a parked or terminated run keeps its label and
-// freezes, the same way a mid-flight subtask item does (`subtaskIconClass`).
+// freezes, the same way a mid-flight subtask item does (`subtaskIconSpins`).
 const spinIcon = computed(
   () =>
     props.runActive && !!containerStatus.value && CONTAINER_STATUS_META[containerStatus.value].spin,
@@ -100,10 +101,10 @@ const { copy: copyText } = useCopyToClipboard()
       :class="CONTAINER_STATUS_META[containerStatus].cls"
     >
       <div class="flex items-center gap-2">
-        <UIcon
+        <Spinner
           :name="CONTAINER_STATUS_META[containerStatus].icon"
+          :spinning="spinIcon"
           class="h-4 w-4 shrink-0"
-          :class="spinIcon ? 'animate-spin' : ''"
         />
         <span class="font-medium">{{ t(CONTAINER_STATUS_KEYS[containerStatus]) }}</span>
         <template v-if="phaseLabel && containerStatus === 'up'">

package/app/components/panels/StepDelegatedStatus.vue

@@ -8,6 +8,7 @@ import {
 import type { PipelineStep } from '~/types/execution'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // The EXTERNAL work a delegated step dispatched: which registered executor is running it, what it
 // is doing, and the link to that system's own logs, which is the affordance everything else here
@@ -81,10 +82,10 @@ const { copy: copyText } = useCopyToClipboard()
   <div v-if="record" data-testid="step-delegated-status">
     <div class="rounded-lg border px-3 py-2 text-xs" :class="statusView.meta.cls">
       <div class="flex items-center gap-2">
-        <UIcon
+        <Spinner
           :name="statusView.meta.icon"
+          :spinning="statusView.meta.spin"
           class="h-4 w-4 shrink-0"
-          :class="statusView.meta.spin ? 'animate-spin' : ''"
         />
         <!-- A status this build does not know is NAMED as unrecognised, carrying the stored value,
              rather than guessed onto a current one or silently dropped. -->

package/app/components/panels/StepMetadataCard.vue

@@ -7,13 +7,14 @@ import {
 } from '@cat-factory/contracts'
 import type { AgentState, PipelineStep, CompanionVerdict, StepApproval } from '~/types/execution'
 import type { BadgeColor } from '~/utils/badge'
-import { subtaskIconClass } from '~/utils/pipelineRender'
+import { subtaskIconSpins, subtaskIconTone } from '~/utils/pipelineRender'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
 import StepDelegatedStatus from '~/components/panels/StepDelegatedStatus.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // The step's metadata card body: state/timing/model/run id, the container cold-boot
 // phase, the live subtask breakdown, the LLM observability rollup, the applied
@@ -204,11 +205,7 @@ async function copyRunId() {
           {{ t('panels.stepMeta.duration') }}
         </SectionLabel>
         <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-default">
-          <UIcon
-            v-if="isRunning"
-            name="i-lucide-loader-circle"
-            class="h-3 w-3 animate-spin text-primary"
-          />
+          <Spinner v-if="isRunning" class="h-3 w-3 text-primary" />
           <span v-if="durationLabel">{{ durationLabel }}</span>
           <span v-else class="text-dimmed">—</span>
           <span v-if="isRunning" class="text-2xs text-dimmed">{{
@@ -314,10 +311,11 @@ async function copyRunId() {
                 : 'text-muted'
           "
         >
-          <UIcon
+          <Spinner
             :name="ITEM_ICON[item.status]"
+            :spinning="subtaskIconSpins(item.status, runFailed)"
             class="mt-px h-3 w-3 shrink-0"
-            :class="subtaskIconClass(item.status, runFailed)"
+            :class="subtaskIconTone(item.status)"
           />
           <span>{{ item.label }}</span>
         </li>

package/app/components/panels/StepRunMeta.vue

@@ -4,6 +4,7 @@ import type { PipelineStep } from '~/types/execution'
 import { useStepTimer } from '~/composables/useStepTimer'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Shared run-metadata + observability block for the step-backed result windows
 // (the CI/conflicts gate, the tester report). It carries the facts every step has in
@@ -71,11 +72,7 @@ async function copyRunId() {
         {{ t('panels.stepMeta.duration') }}
       </SectionLabel>
       <p class="flex items-center gap-1.5 text-xs tabular-nums text-toned">
-        <UIcon
-          v-if="isRunning"
-          name="i-lucide-loader-circle"
-          class="h-3 w-3 animate-spin text-primary"
-        />
+        <Spinner v-if="isRunning" class="h-3 w-3 text-primary" />
         {{ durationLabel }}
         <span v-if="isRunning" class="text-2xs text-dimmed">{{
           t('panels.stepMeta.elapsed')

package/app/components/panels/inspector/ContainerSummary.vue

@@ -3,6 +3,7 @@ import type { Block } from '~/types/domain'
 import { STATUS_META } from '~/utils/catalog'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import ReviewDebtBadge from '~/components/board/ReviewDebtBadge.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -79,7 +80,12 @@ function addTask() {
         <span class="ms-auto text-3xs text-dimmed">{{ STATUS_META[task.status].label }}</span>
       </li>
     </ul>
-    <div v-else class="text-2xs text-dimmed">{{ t('inspector.container.noTasks') }}</div>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-list-todo"
+      :title="t('inspector.container.noTasks')"
+    />
     <p v-if="isFrame" class="text-2xs text-dimmed">
       {{ t('inspector.container.servicesHint') }}
     </p>

package/app/components/panels/inspector/EpicChildren.vue

@@ -4,6 +4,7 @@ import type { Block } from '~/types/domain'
 import { STATUS_META } from '~/utils/catalog'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // The epic inspector body: the full tree of member tasks (which may live under different
 // services/modules), grouped service → module → task. Each task row selects it. Membership
@@ -58,9 +59,12 @@ const groups = computed(() => {
       }}</span>
     </template>
 
-    <div v-if="members.length === 0" class="text-2xs text-dimmed">
-      {{ t('inspector.epicChildren.empty') }}
-    </div>
+    <EmptyState
+      v-if="members.length === 0"
+      compact
+      icon="i-lucide-list-tree"
+      :title="t('inspector.epicChildren.empty')"
+    />
 
     <div v-else class="space-y-2">
       <div v-for="(group, gi) in groups" :key="gi" class="rounded-md border border-muted/60 p-2">

package/app/components/panels/inspector/FrontendConfig.vue

@@ -14,6 +14,7 @@ import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBind
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import IconButton from '~/components/common/IconButton.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
 // frontend for a self-contained UI test (+ an optional browsable preview on local/node),
@@ -565,9 +566,12 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             />
           </div>
         </div>
-        <div v-else class="text-2xs text-dimmed">
-          {{ t('inspector.frontendConfig.bindings.empty') }}
-        </div>
+        <EmptyState
+          v-else
+          compact
+          icon="i-lucide-link"
+          :title="t('inspector.frontendConfig.bindings.empty')"
+        />
 
         <!-- How the bindings resolve RIGHT NOW: each env var → a bound service's live ephemeral
              URL, or WireMock — plus the duplicate-env-var warning. The same view a UI-test run

package/app/components/panels/inspector/InitiativeInspector.vue

@@ -12,6 +12,7 @@ import {
   INITIATIVE_STATUS_LABEL_KEYS,
   initiativeProgress,
 } from '~/utils/initiative'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -93,10 +94,12 @@ function control(action: 'pause' | 'resume' | 'cancel') {
         color="neutral"
         variant="soft"
         size="sm"
-        icon="i-lucide-loader-circle"
-        :ui="{ leadingIcon: 'animate-spin' }"
         @click="openPlanning"
       >
+        <!-- Not `:loading`: that disables the button, and this one has to stay clickable. -->
+        <template #leading>
+          <Spinner class="size-4" />
+        </template>
         {{ t('initiative.inspector.planningInProgress') }}
       </UButton>
       <UButton

package/app/components/panels/inspector/ServiceConnections.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { Block, ServiceConnection } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // Service-frame (`type: 'service'`) connections: the other services this one USES
 // (consumer→provider edges, stored on this frame — the consumer end). Each row picks a
@@ -136,9 +137,12 @@ const usedBy = computed(() =>
         />
       </div>
     </div>
-    <div v-else class="text-2xs text-dimmed">
-      {{ t('inspector.serviceConnections.empty') }}
-    </div>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-plug"
+      :title="t('inspector.serviceConnections.empty')"
+    />
 
     <div v-if="usedBy.length" class="space-y-1" data-testid="service-connections-used-by">
       <span class="text-2xs text-muted">{{ t('inspector.serviceConnections.usedBy') }}</span>

package/app/components/panels/inspector/ServiceReleaseHealthConfig.vue

@@ -13,7 +13,7 @@ const props = defineProps<{ block: Block }>()
 const store = useReleaseHealthStore()
 const ui = useUiStore()
 const uiMode = useUiModeStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -61,11 +61,7 @@ async function save() {
       sloIds: parseIds(draft.sloIds),
       envTag: draft.envTag.trim() || null,
     })
-    toast.add({
-      title: t('inspector.releaseHealth.savedToast'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('inspector.releaseHealth.savedToast')
   } catch (e) {
     present(e, 'inspector.releaseHealth.saveFailed')
   } finally {

package/app/components/panels/inspector/ServiceTestSecrets.vue

@@ -18,7 +18,7 @@ import { uid } from '~/utils/catalog'
 const props = defineProps<{ block: Block }>()
 
 const store = useTestSecretsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
@@ -111,11 +111,7 @@ async function save() {
         value: r.value,
       })),
     })
-    toast.add({
-      title: t('inspector.testSecrets.savedToast'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('inspector.testSecrets.savedToast')
   } catch (e) {
     present(e, 'inspector.testSecrets.saveFailed')
   } finally {