@cat-factory/app 0.311.2 → 0.312.0

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

@@ -23,6 +23,7 @@ import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 import { inputGateNoticeFor } from '~/utils/inputGate'
 import { composeRunOutcome, hasOutcomeToShow } from '~/utils/runOutcome'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -471,7 +472,7 @@ async function mergePr() {
               v-else-if="reviews.isBackground(s.agentKind, block.id) && reviewStage"
               class="inline-flex shrink-0 items-center gap-1 text-3xs text-primary"
             >
-              <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
+              <Spinner class="h-3 w-3" />
               {{ reviewStageLabel }}
             </span>
             <!-- A companion that spent its rework budget parks on the iteration-cap
@@ -591,13 +592,11 @@ async function mergePr() {
             v-if="gateCompanionFor(s, runFailed)"
             class="mt-0.5 flex items-center gap-1.5 ps-6 text-3xs"
           >
-            <UIcon
+            <Spinner
               :name="agentKindMeta(gateCompanionFor(s, runFailed)!.kind).icon"
+              :spinning="gateCompanionFor(s, runFailed)!.state === 'running'"
               class="h-3 w-3 shrink-0"
-              :class="[
-                COMPANION_STATE_META[gateCompanionFor(s, runFailed)!.state].text,
-                gateCompanionFor(s, runFailed)!.state === 'running' ? 'animate-spin' : '',
-              ]"
+              :class="COMPANION_STATE_META[gateCompanionFor(s, runFailed)!.state].text"
             />
             <span class="text-muted">
               {{

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

@@ -10,6 +10,7 @@ import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import TaskAprioriBranches from '~/components/panels/inspector/TaskAprioriBranches.vue'
 import DocReferenceRepos from '~/components/panels/inspector/DocReferenceRepos.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -503,9 +504,12 @@ const technicalLabel = computed(() => {
           @update:model-value="(v: boolean | 'indeterminate') => toggleInvolved(s.id, v === true)"
         />
       </div>
-      <div v-else class="text-2xs text-dimmed">
-        {{ t('inspector.runSettings.involvedServicesEmpty') }}
-      </div>
+      <EmptyState
+        v-else
+        compact
+        icon="i-lucide-plug"
+        :title="t('inspector.runSettings.involvedServicesEmpty')"
+      />
       <div v-if="staleInvolvedServices.length" class="mt-1 flex flex-wrap gap-1">
         <UBadge
           v-for="id in staleInvolvedServices"

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

@@ -8,7 +8,6 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
-const toast = useToast()
 const { t } = useI18n()
 
 // ---- module assignment -----------------------------------------------------

package/app/components/pipeline/AgentPromptEditor.vue

@@ -11,6 +11,7 @@ import {
   saveIntent,
 } from '~/components/pipeline/AgentPromptEditor.logic'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 // The per-workspace system-prompt editor for ONE agent kind, opened from the pipeline builder
 // (where the kinds are actually chosen). It edits the SHIPPED track prompt only: the platform
@@ -30,7 +31,8 @@ const props = defineProps<{ agentKind: string | null }>()
 const emit = defineEmits<{ close: [] }>()
 
 const { t } = useI18n()
-const toast = useToast()
+const actionToast = useActionToast()
+const { present } = usePipelineErrorToast()
 const prompts = useAgentPromptsStore()
 const agentSettings = useAgentSettingsStore()
 
@@ -68,8 +70,8 @@ watch(
     try {
       const detail = await prompts.load(kind)
       draft.value = detail?.effectiveText ?? ''
-    } catch {
-      toast.add({ title: t('agentPrompt.toast.loadFailed'), color: 'error' })
+    } catch (error) {
+      present(error, 'agentPrompt.toast.loadFailed')
       emit('close')
     }
   },
@@ -97,8 +99,8 @@ async function saveBudget(value: number | null) {
   if (!kind) return
   try {
     await agentSettings.setMaxOutputTokens(kind, value)
-  } catch {
-    toast.add({ title: t('agentPrompt.toast.budgetFailed'), color: 'error' })
+  } catch (error) {
+    present(error, 'agentPrompt.toast.budgetFailed')
   }
 }
 
@@ -127,13 +129,13 @@ async function save() {
     const saved = await prompts.save(kind, intent.text, intent.restoredFrom)
     draft.value = saved?.effectiveText ?? draft.value
     restoredFrom.value = undefined
-    toast.add({ title: t('agentPrompt.toast.saved'), color: 'success', icon: 'i-lucide-check' })
+    actionToast.success('agentPrompt.toast.saved')
   } catch (error) {
     const conflict = isRevisionConflict(error)
-    toast.add({
-      title: conflict ? t('agentPrompt.toast.conflict') : t('agentPrompt.toast.saveFailed'),
-      color: 'error',
-    })
+    // A recognised refusal keeps its bespoke copy: the funnel's generic line for this reason says
+    // "reload it", but the editor has already reloaded by the time the toast shows.
+    if (conflict) actionToast.error('agentPrompt.toast.conflict')
+    else present(error, 'agentPrompt.toast.saveFailed')
     // The server's view already replaced the store's on a conflict, so re-seed the textarea
     // from what actually landed rather than leaving the user editing a lost revision — and drop
     // the restore candidate with it, since it names a revision from the log we just replaced.
@@ -151,9 +153,9 @@ async function revert() {
     const saved = await prompts.save(kind, null)
     draft.value = saved?.effectiveText ?? draft.value
     restoredFrom.value = undefined
-    toast.add({ title: t('agentPrompt.toast.reverted'), color: 'success' })
-  } catch {
-    toast.add({ title: t('agentPrompt.toast.saveFailed'), color: 'error' })
+    actionToast.success('agentPrompt.toast.reverted')
+  } catch (error) {
+    present(error, 'agentPrompt.toast.saveFailed')
   }
 }
 
@@ -175,8 +177,10 @@ function revisionLabel(revision: AgentPromptRevision): string {
     :ui="{ content: 'max-w-[92vw] sm:max-w-3xl lg:max-w-5xl' }"
   >
     <template #body>
-      <div v-if="prompts.loadingDetail" class="py-8 text-center text-sm text-muted">
-        {{ t('common.loading') }}
+      <div v-if="prompts.loadingDetail" class="flex flex-col gap-3">
+        <USkeleton class="h-6 w-1/3" />
+        <USkeleton class="h-64 w-full" />
+        <USkeleton class="h-24 w-full" />
       </div>
       <div v-else-if="detail" class="flex flex-col gap-3">
         <div class="flex flex-wrap items-center gap-2 text-xs">
@@ -296,9 +300,12 @@ function revisionLabel(revision: AgentPromptRevision): string {
           <SectionLabel as="h4" class="mb-1">
             {{ t('agentPrompt.historyHeading') }}
           </SectionLabel>
-          <p v-if="!detail.revisions.length" class="text-2xs text-dimmed">
-            {{ t('agentPrompt.historyEmpty') }}
-          </p>
+          <EmptyState
+            v-if="!detail.revisions.length"
+            compact
+            icon="i-lucide-history"
+            :title="t('agentPrompt.historyEmpty')"
+          />
           <ul v-else class="max-h-52 divide-y divide-default overflow-y-auto text-xs">
             <li
               v-for="revision in detail.revisions"

package/app/components/pipeline/PipelineBuilder.vue

@@ -30,6 +30,7 @@ import {
 import type { ConsensusStrategy } from '~/types/consensus'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 type DraftUnit = { index: number; kind: AgentKind; companionIndex: number | null }
 
@@ -280,7 +281,7 @@ function toggleSaved(id: string) {
   expandedSaved.value = next
 }
 
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 // ---- "Add agent" mini-form -------------------------------------------------
@@ -299,20 +300,12 @@ function createAgent() {
     label: newAgentName.value,
     description: newAgentDesc.value,
   })
-  toast.add({
-    title: t('pipeline.builder.toast.added', { name: agent.label }),
-    color: 'success',
-    icon: 'i-lucide-check',
-  })
+  actionToast.success('pipeline.builder.toast.added', { params: { name: agent.label } })
   addAgentOpen.value = false
 }
 
 function placeholder(what: string) {
-  toast.add({
-    title: t('pipeline.builder.toast.placeholderTitle'),
-    description: what,
-    icon: 'i-lucide-construction',
-  })
+  actionToast.info('pipeline.builder.toast.placeholderTitle', { description: what })
 }
 
 async function save() {
@@ -320,16 +313,13 @@ async function save() {
   try {
     const saved = await pipelines.saveDraft()
     if (saved) {
-      toast.add({
-        title: wasEditing
-          ? t('pipeline.builder.toast.updated', { name: saved.name })
-          : t('pipeline.builder.toast.saved', { name: saved.name }),
-        color: 'success',
-        icon: 'i-lucide-check',
-      })
+      actionToast.success(
+        wasEditing ? 'pipeline.builder.toast.updated' : 'pipeline.builder.toast.saved',
+        { params: { name: saved.name } },
+      )
       ui.builderOpen = false
     } else {
-      toast.add({ title: t('pipeline.builder.toast.addOneFirst'), color: 'warning' })
+      actionToast.error('pipeline.builder.toast.addOneFirst')
     }
   } catch (e) {
     // Through the funnel, so the backend reason (e.g. post-release-health rejected without an
@@ -521,12 +511,12 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
             {{ t(warning.key) }}
           </p>
 
-          <div
+          <EmptyState
             v-if="pipelines.draft.length === 0"
-            class="flex flex-1 items-center justify-center rounded-lg border border-dashed border-muted p-4 text-center text-xs text-dimmed"
-          >
-            {{ t('pipeline.builder.emptyDraft') }}
-          </div>
+            icon="i-lucide-workflow"
+            :title="t('pipeline.builder.emptyDraft')"
+            class="flex-1"
+          />
 
           <ol v-else class="flex-1 space-y-2 pe-1 lg:min-h-0 lg:overflow-y-auto">
             <li

package/app/components/pipeline/PipelineProgress.vue

@@ -4,7 +4,8 @@ import type { PipelineStep } from '~/types/execution'
 import { stepHasOutput } from '@cat-factory/contracts'
 import { agentKindMeta, FOLLOW_UP_COMPANION_META, FORK_DECISION_META } from '~/utils/catalog'
 import {
-  subtaskIconClass,
+  subtaskIconSpins,
+  subtaskIconTone,
   gateCompanionFor,
   COMPANION_STATE_META,
   isCompanionKind,
@@ -22,6 +23,7 @@ import { useNowTick, stepDurationLabel } from '~/composables/useStepTimer'
 import type { BadgeColor } from '~/utils/badge'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import Spinner from '~/components/common/Spinner.vue'
 
 const props = defineProps<{ instance: ExecutionInstance }>()
 const emit = defineEmits<{
@@ -321,10 +323,10 @@ const ITEM_ICON: Record<string, string> = {
           :class="liveWorking(s) ? 'step-active' : ''"
           :style="{ borderColor: stepVisual(s).color }"
         >
-          <UIcon
+          <Spinner
             :name="stepVisual(s).icon"
+            :spinning="liveWorking(s)"
             class="h-4 w-4"
-            :class="liveWorking(s) ? 'animate-spin' : ''"
             :style="{ color: stepVisual(s).color }"
           />
         </span>
@@ -460,7 +462,7 @@ const ITEM_ICON: Record<string, string> = {
             v-if="s.container?.status === 'starting' && !runFailed"
             class="mt-2 flex items-center gap-1.5 text-2xs text-app-info-300"
           >
-            <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 shrink-0 animate-spin" />
+            <Spinner class="h-3.5 w-3.5 shrink-0" />
             <span>{{ t('pipeline.progress.spinningUpContainer') }}</span>
           </div>
 
@@ -524,10 +526,11 @@ const ITEM_ICON: Record<string, string> = {
                       : '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>
@@ -584,13 +587,11 @@ const ITEM_ICON: Record<string, string> = {
               class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border"
               :class="COMPANION_STATE_META[companionByStep[i]!.state].dot"
             >
-              <UIcon
+              <Spinner
                 :name="agentKindMeta(companionByStep[i]!.kind).icon"
+                :spinning="companionByStep[i]!.state === 'running' && !runFailed"
                 class="h-3 w-3"
-                :class="[
-                  COMPANION_STATE_META[companionByStep[i]!.state].text,
-                  companionByStep[i]!.state === 'running' && !runFailed ? 'animate-spin' : '',
-                ]"
+                :class="COMPANION_STATE_META[companionByStep[i]!.state].text"
               />
             </span>
             <span class="min-w-0 flex-1 truncate text-xs text-toned">
@@ -657,12 +658,10 @@ const ITEM_ICON: Record<string, string> = {
             <span
               class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-app-secondary-500/40 bg-app-secondary-500/15"
             >
-              <UIcon
-                :name="
-                  forkPhase(s) === 'proposing' ? 'i-lucide-loader-circle' : FORK_DECISION_META.icon
-                "
+              <Spinner
+                :name="forkPhase(s) === 'proposing' ? undefined : FORK_DECISION_META.icon"
+                :spinning="forkPhase(s) === 'proposing'"
                 class="h-3 w-3 text-app-secondary-300"
-                :class="forkPhase(s) === 'proposing' ? 'animate-spin' : ''"
               />
             </span>
             <span class="min-w-0 flex-1 truncate text-xs text-toned">
@@ -727,7 +726,7 @@ const ITEM_ICON: Record<string, string> = {
             v-if="reviewStageLabel(s.agentKind)"
             class="mt-3 inline-flex items-center gap-1 text-2xs text-primary"
           >
-            <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
+            <Spinner class="h-3 w-3" />
             {{ reviewStageLabel(s.agentKind) }}
           </div>
 

package/app/components/prReview/PrReviewPhaseBadge.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { PipelineStep } from '~/types/execution'
 import { prReviewPhase, type PrReviewPhaseKind } from '~/utils/prReviewProgress'
+import Spinner from '~/components/common/Spinner.vue'
 
 // Compact, at-a-glance phase label for a live `pr-reviewer` step, so the BOARD surfaces (the
 // task-card mini pipeline + the focus-view timeline) tell the reviewer's sub-phase apart —
@@ -64,10 +65,10 @@ const spinning = computed(
     class="inline-flex items-center gap-1"
     :class="runFailed ? 'text-app-error-400' : PHASE_META[phase.kind].class"
   >
-    <UIcon
+    <Spinner
       :name="runFailed ? 'i-lucide-circle-x' : PHASE_META[phase.kind].icon"
+      :spinning="spinning"
       class="h-3 w-3 shrink-0"
-      :class="spinning ? 'animate-spin' : ''"
     />
     <span class="truncate">{{ label }}</span>
   </span>

package/app/components/prReview/PrReviewWindow.vue

@@ -24,13 +24,15 @@ import type {
   StepSubtaskItem,
   StepSubtasks,
 } from '~/types/execution'
-import { subtaskIconClass } from '~/utils/pipelineRender'
+import { subtaskIconSpins, subtaskIconTone } from '~/utils/pipelineRender'
 import { activeChunkLabels, chunkReviewPercent, hasNoSlicePlan } from '~/utils/prReviewProgress'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import StepFragmentAdherence from '~/components/panels/StepFragmentAdherence.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import Spinner from '~/components/common/Spinner.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -320,7 +322,7 @@ const { requestClose } = useUnsavedGuard({
             data-testid="pr-review-planning"
             class="flex flex-1 flex-col items-center justify-center gap-2 py-10 text-center text-muted"
           >
-            <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
+            <Spinner class="h-8 w-8 opacity-60" />
             <p class="text-sm text-default">{{ t('prReview.reviewing.planning.title') }}</p>
             <p class="max-w-sm text-2xs text-dimmed">
               {{ t('prReview.reviewing.planning.hint') }}
@@ -330,10 +332,7 @@ const { requestClose } = useUnsavedGuard({
           <!-- REVIEWING: a per-slice plan exists — show every slice with its status + which are active now. -->
           <div v-else data-testid="pr-review-reviewing-chunks" class="py-2">
             <div class="mb-1 flex items-center gap-2 text-sm text-default">
-              <UIcon
-                name="i-lucide-loader-circle"
-                class="h-4 w-4 shrink-0 animate-spin text-primary"
-              />
+              <Spinner class="h-4 w-4 shrink-0 text-primary" />
               <span>{{ t('prReview.reviewing.reviewingChunks.title') }}</span>
             </div>
             <p class="mb-3 text-2xs text-dimmed">
@@ -385,10 +384,7 @@ const { requestClose } = useUnsavedGuard({
                   :key="i"
                   class="flex items-start gap-1.5 text-xs text-app-100"
                 >
-                  <UIcon
-                    name="i-lucide-loader-circle"
-                    class="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin text-primary"
-                  />
+                  <Spinner class="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary" />
                   <span class="min-w-0">{{ label }}</span>
                 </li>
               </ul>
@@ -416,10 +412,11 @@ const { requestClose } = useUnsavedGuard({
                         : 'text-muted'
                   "
                 >
-                  <UIcon
+                  <Spinner
                     :name="ITEM_ICON[item.status]"
+                    :spinning="subtaskIconSpins(item.status, false)"
                     class="h-3.5 w-3.5 shrink-0"
-                    :class="subtaskIconClass(item.status, false)"
+                    :class="subtaskIconTone(item.status)"
                   />
                   <span
                     class="min-w-0 flex-1 truncate"
@@ -477,7 +474,7 @@ const { requestClose } = useUnsavedGuard({
           data-testid="pr-review-working"
           class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-muted"
         >
-          <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
+          <Spinner class="h-8 w-8 opacity-60" />
           <p class="text-sm">
             {{ status === 'fixing' ? t('prReview.fixing.title') : t('prReview.posting.title') }}
           </p>
@@ -564,12 +561,11 @@ const { requestClose } = useUnsavedGuard({
           />
 
           <!-- A clean PR / resolved review with no findings. -->
-          <div
+          <EmptyState
             v-if="findings.length === 0"
-            class="rounded-xl border border-default bg-default/60 px-4 py-6 text-center text-sm text-toned"
-          >
-            {{ t('prReview.noFindings') }}
-          </div>
+            icon="i-lucide-circle-check"
+            :title="t('prReview.noFindings')"
+          />
 
           <template v-else>
             <!-- A challenge is in flight: the Challenge Investigator is re-examining a finding. -->
@@ -578,7 +574,7 @@ const { requestClose } = useUnsavedGuard({
               data-testid="pr-review-challenging"
               class="mb-3 flex items-center gap-2 rounded-md border border-primary/40 bg-primary/10 px-3 py-2 text-xs text-primary"
             >
-              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
+              <Spinner class="h-4 w-4 shrink-0" />
               <span>{{ t('prReview.challenge.investigatingBanner') }}</span>
             </div>
 
@@ -685,7 +681,7 @@ const { requestClose } = useUnsavedGuard({
                         data-testid="pr-review-finding-investigating"
                         class="flex items-center gap-1 rounded-sm bg-primary/15 px-1.5 py-0.5 text-3xs font-semibold uppercase text-primary ring-1 ring-primary/30"
                       >
-                        <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
+                        <Spinner class="h-3 w-3" />
                         {{ t('prReview.challenge.investigatingBadge') }}
                       </span>
                       <h4

package/app/components/providers/ApiKeysSection.vue

@@ -30,7 +30,7 @@ const workspace = useWorkspaceStore()
 const keys = useApiKeysStore()
 const models = useModelsStore()
 const auth = useAuthStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -241,11 +241,7 @@ async function add() {
     label.value = ''
     // The picker's selectability depends on configured keys — refresh it.
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
-    toast.add({
-      title: t('providers.apiKeys.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('providers.apiKeys.toast.connected')
   } catch (e) {
     present(e, 'providers.apiKeys.toast.connectFailed')
   } finally {

package/app/components/providers/PersonalCredentialModal.vue

@@ -10,7 +10,7 @@ import SecretInput from '~/components/common/SecretInput.vue'
 const { t } = useI18n()
 const personal = usePersonalSubscriptionsStore()
 const ui = useUiStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 
 const password = ref('')
@@ -67,11 +67,7 @@ async function submit() {
   busy.value = true
   try {
     await pending.value.retry(password.value)
-    toast.add({
-      title: t('providers.personalCredential.toast.started'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('providers.personalCredential.toast.started')
   } catch (e) {
     // A fresh 428 (e.g. still-wrong password) re-arms `pending`, keeping the modal open.
     present(e, 'providers.personalCredential.toast.startFailed')

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -13,7 +13,7 @@ const personal = usePersonalSubscriptionsStore()
 const auth = useAuthStore()
 const workspace = useWorkspaceStore()
 const models = useModelsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 const { confirm } = useConfirm()
@@ -173,11 +173,7 @@ async function connect() {
     // points at models this subscription doesn't cover, reactively surfaces the
     // preset-mismatch prompt (with its "pick a different preset" link).
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
-    toast.add({
-      title: t('personalSubscriptions.toast.connected', { vendor: vendorName }),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('personalSubscriptions.toast.connected', { params: { vendor: vendorName } })
   } catch (e) {
     present(e, 'personalSubscriptions.toast.connectFailed')
   } finally {
@@ -199,7 +195,7 @@ async function disconnect(v: SubscriptionVendor) {
     // Removing the subscription may drop the workspace's last usable model — refresh so the
     // AI-readiness banners re-evaluate (mirrors the API-key flow).
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
-    toast.add({ title: t('personalSubscriptions.toast.disconnected'), icon: 'i-lucide-check' })
+    actionToast.success('personalSubscriptions.toast.disconnected')
   } catch (e) {
     present(e, 'personalSubscriptions.toast.disconnectFailed')
   }

package/app/components/providers/VendorCredentialsModal.vue

@@ -15,7 +15,7 @@ const { t, n } = useI18n()
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const creds = useVendorCredentialsStore()
-const toast = useToast()
+const actionToast = useActionToast()
 const { present } = usePipelineErrorToast()
 const { confirm } = useConfirm()
 
@@ -127,11 +127,7 @@ async function add() {
     })
     token.value = ''
     label.value = ''
-    toast.add({
-      title: t('providers.vendorCredentials.toast.connected'),
-      icon: 'i-lucide-check',
-      color: 'success',
-    })
+    actionToast.success('providers.vendorCredentials.toast.connected')
   } catch (e) {
     present(e, 'providers.vendorCredentials.toast.connectFailed')
   } finally {

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -23,6 +23,7 @@ import type {
   ProvisioningSubsystem,
 } from '~/types/provisioningLogs'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   subsystem?: ProvisioningSubsystem
@@ -132,12 +133,15 @@ function when(epochMs: number): string {
     </div>
 
     <p v-if="state.error" class="px-3 py-2 text-xs text-app-error-300">{{ state.error }}</p>
-    <p
-      v-else-if="!state.loading && state.entries.length === 0"
-      class="px-3 py-3 text-xs text-dimmed"
-    >
-      {{ t('provisioning.empty') }}
-    </p>
+    <div v-else-if="state.loading && state.entries.length === 0" class="space-y-2 px-3 py-2">
+      <USkeleton v-for="n in 3" :key="n" class="h-8 w-full" />
+    </div>
+    <EmptyState
+      v-else-if="state.entries.length === 0"
+      compact
+      icon="i-lucide-scroll-text"
+      :title="t('provisioning.empty')"
+    />
 
     <ul v-else class="max-h-80 divide-y divide-default overflow-auto">
       <li v-for="entry in state.entries" :key="entry.id" class="px-3 py-2">