@cat-factory/app 0.311.2 → 0.312.0

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

@@ -21,6 +21,7 @@ import UserMenu from '~/components/auth/UserMenu.vue'
 import { useViewport } from '~/composables/useViewport'
 import type { NavContribution } from '~/modular/nav-contributions'
 import SectionLabel from '~/components/common/SectionLabel.vue'
+import WorkViewSwitcher from '~/components/layout/WorkViewSwitcher.vue'
 
 const { t } = useI18n()
 
@@ -227,6 +228,10 @@ watch(
     </div>
 
     <div class="contents" @click="onNavAction">
+      <!-- The two views of the board (issue #2258), first because they decide what the main
+           area shows. -->
+      <WorkViewSwitcher :collapsed="railed" />
+
       <!-- Command bar launcher (⌘K) — the primary way to create blocks / pipelines
          and reach every action below. -->
       <UButton

package/app/components/layout/WorkViewSwitcher.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { WorkView } from '~/utils/workView'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
+/**
+ * The sidebar's "Views" section: the queue and the canvas, as two views of one board.
+ *
+ * A view SWITCHER, not a list of destinations, which is why it is not a `nav` contribution: a
+ * contribution opens something, and these change what the main area shows, so they need the
+ * selected state a contribution has no shape for. Shown in every tier and every role: which view
+ * a person works in is their choice, and neither view is an override of the other.
+ */
+defineProps<{ collapsed: boolean }>()
+
+const { t } = useI18n()
+const views = useWorkViewStore()
+const queue = useWorkspaceQueueStore()
+
+const ITEMS: { view: WorkView; icon: string; labelKey: string }[] = [
+  { view: 'queue', icon: 'i-lucide-list-checks', labelKey: 'views.queue' },
+  { view: 'board', icon: 'i-lucide-map', labelKey: 'views.board' },
+]
+</script>
+
+<template>
+  <section data-testid="work-view-switcher">
+    <SectionLabel v-if="!collapsed" as="h2" class="mb-2 px-1">
+      {{ t('views.title') }}
+    </SectionLabel>
+    <div class="space-y-1.5">
+      <UButton
+        v-for="item in ITEMS"
+        :key="item.view"
+        :block="!collapsed"
+        :square="collapsed"
+        size="sm"
+        :color="views.view === item.view ? 'primary' : 'neutral'"
+        :variant="views.view === item.view ? 'soft' : 'ghost'"
+        :icon="item.icon"
+        class="w-full"
+        :class="collapsed ? 'justify-center' : 'justify-start'"
+        :aria-label="collapsed ? t(item.labelKey) : undefined"
+        :aria-current="views.view === item.view ? 'page' : undefined"
+        :title="collapsed ? t(item.labelKey) : undefined"
+        :data-testid="`work-view-${item.view}`"
+        @click="views.show(item.view)"
+      >
+        <template v-if="!collapsed">
+          <span class="flex-1 truncate text-start">{{ t(item.labelKey) }}</span>
+          <!-- The queue's count: tasks an agent cannot continue until a person acts. -->
+          <UBadge
+            v-if="item.view === 'queue' && queue.needsYouCount > 0"
+            size="sm"
+            color="warning"
+            variant="subtle"
+            data-testid="work-view-queue-count"
+          >
+            {{ queue.needsYouCount }}
+          </UBadge>
+        </template>
+      </UButton>
+    </div>
+  </section>
+</template>

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. -->

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">