@cat-factory/app 0.311.2 → 0.312.0

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 {

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

@@ -12,10 +12,12 @@ const board = useBoardStore()
 // the sidebar/command entries with zero edits here.
 const { toolbarItems, invoke: invokeNav } = useNavContributions()
 const execution = useExecutionStore()
+const views = useWorkViewStore()
+const queue = useWorkspaceQueueStore()
 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 +26,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 +49,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')
   }
@@ -112,19 +106,13 @@ const spendLabel = computed(() => {
   }
   return `${fmt(s.costSpent)} / ${fmt(s.costLimit)}`
 })
-const spendColor = computed(() => (spend.value?.exceeded ? 'error' : 'neutral'))
+/** The decisions this counts are in every service, so the queue opens on all of them. */
+function openQueue() {
+  queue.clearFilter()
+  views.show('queue')
+}
 
-const decisionItems = computed(() =>
-  execution.openDecisions.map((d) => {
-    const b = board.getBlock(d.blockId)
-    return {
-      label: b?.title ?? t('common.block'),
-      description: d.decision.question,
-      icon: 'i-lucide-circle-help',
-      onSelect: () => ui.openDecision(d.instanceId, d.decision.id),
-    }
-  }),
-)
+const spendColor = computed(() => (spend.value?.exceeded ? 'error' : 'neutral'))
 </script>
 
 <template>
@@ -199,21 +187,23 @@ const decisionItems = computed(() =>
 
     <USeparator orientation="vertical" class="mx-1 h-6" />
 
-    <!-- decisions queue -->
-    <UDropdownMenu v-if="execution.pendingDecisionCount" :items="decisionItems">
-      <UButton
-        color="warning"
-        variant="soft"
-        size="sm"
-        icon="i-lucide-circle-help"
-        data-testid="decision-badge"
+    <!-- The decision count. It opens the queue view, which lists every decision with its Answer
+         button beside the rest of what needs a person (issue #2258). -->
+    <UButton
+      v-if="execution.pendingDecisionCount"
+      color="warning"
+      variant="soft"
+      size="sm"
+      icon="i-lucide-circle-help"
+      :title="t('views.openQueue')"
+      data-testid="decision-badge"
+      @click="openQueue"
+    >
+      {{ execution.pendingDecisionCount
+      }}<span class="hidden sm:inline"
+        >&nbsp;{{ t('board.toolbar.decisionWord', execution.pendingDecisionCount) }}</span
       >
-        {{ execution.pendingDecisionCount
-        }}<span class="hidden sm:inline"
-          >&nbsp;{{ t('board.toolbar.decisionWord', execution.pendingDecisionCount) }}</span
-        >
-      </UButton>
-    </UDropdownMenu>
+    </UButton>
 
     <!-- how every frame's swimlanes are ordered + grouped (an override; advanced tier) -->
     <LaneViewControl />

package/app/components/layout/BoardTopOverlays.vue

@@ -33,10 +33,15 @@ import DefaultTestEnvBanner from '~/components/layout/DefaultTestEnvBanner.vue'
 
 // The live-stream state the connection strip renders. Passed down rather than resolved here:
 // the page owns the single stream instance, and creating another would open a second socket.
+//
+// `inFlow` is the queue view's placement: the same region, laid out in the page flow above the
+// queue's columns instead of floating over a canvas, and without the toolbar, which is the
+// canvas's own chrome (zoom, fit, lane view).
 defineProps<{
   connected: boolean
   everConnected: boolean
   connectionFailed: boolean
+  inFlow?: boolean
 }>()
 
 const ui = useUiStore()
@@ -44,7 +49,8 @@ const ui = useUiStore()
 
 <template>
   <div
-    class="pointer-events-none absolute inset-x-0 top-0 z-40 flex flex-col items-center gap-2 px-4 pt-3"
+    class="pointer-events-none z-40 flex flex-col items-center gap-2 px-4"
+    :class="inFlow ? 'relative pt-3' : 'absolute inset-x-0 top-0 pt-3'"
   >
     <!-- Compact-viewport nav trigger: the SideBar is an off-canvas drawer below lg, so surface
          a hamburger to open it. Out of the column's flow (it is a corner control, not a
@@ -62,7 +68,7 @@ const ui = useUiStore()
 
     <!-- FIRST, and deliberately so: the toolbar is standing board chrome, and a tour step
          anchors it. Below the advisories it would move every time one appears or clears. -->
-    <BoardToolbar />
+    <BoardToolbar v-if="!inFlow" />
 
     <!-- Then the advisories, most urgent first. Ordering is by what the user loses by not
          reading it now, not by how loud the card is.

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