@cat-factory/app 0.311.3 → 0.312.0

package/README.md

@@ -17,6 +17,7 @@ The SPA source lives under `app/` (the Nuxt srcDir).
 - [Layout](#layout)
 - [Nuxt UI: agent tooling and overrides](#nuxt-ui-agent-tooling-and-where-the-spa-overrides-the-skill)
 - [Task swimlanes](#task-swimlanes)
+- [Queue view](#queue-view)
 - [Roles (engineer / product manager / designer)](#roles-engineer--product-manager--designer)
 - [Interface modes (basic / advanced)](#interface-modes-basic--advanced)
 - [Agent tiers (basic / intermediate / advanced)](#agent-tiers-basic--intermediate--advanced)
@@ -624,6 +625,32 @@ does not visibly jump when the response lands. "No module" is the EMPTY STRING o
 every other clearable field spells a clear; `undefined` is dropped by `JSON.stringify` and reaches
 the server as an empty patch.
 
+## Queue view
+
+A board has two views (issue [#2258](https://github.com/kibertoad/cat-factory/issues/2258)): the
+**queue**, which lists every task across every service in the column that says what it needs, and
+the **board**, the canvas where the work is planned. They are two views of one board, not two
+products. The sidebar's Views switcher (`components/layout/WorkViewSwitcher.vue`) moves between
+them, and so do the palette entries and a `?view=queue` / `?view=board` link. The initiative it
+starts, with the slices after it: [`delivery-surface.md`](https://github.com/kibertoad/cat-factory/blob/main/docs/initiatives/delivery-surface.md).
+
+- **Which view opens is the person's own choice**: the view they used last in this browser
+  (`stores/workView.ts`, a cookie persisted like the interface tier, so two accounts on one browser
+  share it). A person who has not chosen
+  lands on the queue, because it answers the first question a person opens the app with. Both
+  views exist in every tier and every role: neither is an override of the other.
+- **The queue states the canvas's verdict, regrouped.** `useTaskLaneClassifier` is the one
+  classifier the frame swimlanes and the queue share; `utils/queueSections.ts` only regroups its
+  output (a waiting pull request gets its own column), and no task crosses a lane. The
+  workspace-wide walk lives on one store (`stores/workspaceQueue.ts`), per the swimlane rule on
+  workspace-wide derivations.
+- **A card's actions are the board card's** (`useTaskActions`), so Start, Resolve and Merge
+  cannot drift between the two views.
+- **The queue sits over the canvas**, which stays mounted, so switching back keeps its camera and
+  selection. The advisory banners render in the page flow above the queue's columns
+  (`BoardTopOverlays` with `in-flow`), and the canvas toolbar does not, being the canvas's own
+  chrome. The canvas's decision counter opens the queue view.
+
 ## Roles (engineer / product manager / designer)
 
 The outermost of the three narrowing axes, and the only one the app **asks about**: on a first-ever

package/app/components/board/nodes/TaskCard.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { defaultBuildPipelineId } from '@cat-factory/contracts'
 import type { Block } from '~/types/domain'
 import { STATUS_META, MODULE_META, taskTypeMeta } from '~/utils/catalog'
-import { composeRunOutcome, hasOutcomeToShow } from '~/utils/runOutcome'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import TaskPipelineMini from './TaskPipelineMini.vue'
 import IconButton from '~/components/common/IconButton.vue'
@@ -10,16 +8,28 @@ import IconButton from '~/components/common/IconButton.vue'
 const props = defineProps<{ taskId: string }>()
 
 const board = useBoardStore()
-const execution = useExecutionStore()
-const pipelines = usePipelinesStore()
 const ui = useUiStore()
 const agentRuns = useAgentRunsStore()
-const reviews = useReviewStage()
-const toast = useToast()
 const { t } = useI18n()
-const { confirm } = useConfirm()
 
-const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
+// What the card offers a human to do, shared with the queue's card (see `useTaskActions`).
+const {
+  task,
+  sandboxed,
+  unmet,
+  runnable,
+  canExecute,
+  executeDeniedTitle,
+  defaultPipeline,
+  outcomeReadable,
+  openOutcome,
+  starting,
+  start: run,
+  merge,
+  reviewStage,
+  reviewStageLabel,
+  attention,
+} = useTaskActions(() => props.taskId)
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
 
 // A type badge for any NON-default task type — built-in (bug/document/spike/review/ralph) or a
@@ -39,13 +49,6 @@ const typeBadge = computed(() => {
 })
 const selected = computed(() => ui.selectedBlockId === props.taskId)
 
-// This card's Start is a ONE-TAP live start, so it has nothing to ask for and offers no dry-run
-// request. What it does owe the reader is the half that is not a choice: a preset that sandboxes
-// their role means this button opens a pull request and merges nothing, and a card that said so
-// only after the fact would leave that to be discovered from a run that stops at the merge.
-const { forcedFor } = useDryRunPolicy()
-const sandboxed = computed(() => forcedFor(props.taskId))
-
 // Drag-to-connect: dragging from this card's handle onto another task makes THAT task
 // depend on this one (this is the prerequisite). The composable tracks the gesture.
 const { start: startConnect } = useDependencyConnect()
@@ -56,84 +59,28 @@ const deps = computed(() =>
 )
 const uiMode = useUiModeStore()
 
-/** Deps that haven't merged yet — these block this task from running. */
-const unmet = computed(() => board.unmetDeps(props.taskId))
-const runnable = computed(() => board.isRunnable(props.taskId))
-
 /** Label a dependency, noting its frame when it lives in another one. */
 const { depLabel: labelDep } = useDepLabels()
 const depLabel = (dep: Block) => labelDep(dep, task.value?.parentId)
 
-/**
- * The pipeline a plain "Start" will use: the task's pinned pipeline, else the build rung this
- * INTERFACE MODE defaults to (`defaultBuildPipelineId` — the fixed Standard build in basic mode,
- * the Adaptive one in advanced). The workspace's positional first pipeline remains the last
- * resort, for a board whose catalog does not carry the rung (an older seed, or a deployment that
- * retired it).
- *
- * A PIN is honoured even when the library holds no row for it, and that branch is the whole reason
- * this returns a descriptor rather than a `Pipeline`. An INTERNAL pipeline is withheld from the
- * library on purpose (the platform starts it on its own behalf, so no picker may offer it), and a
- * task can legitimately be pinned to one — the docs-refresh preset spawns its tasks onto
- * `pl_code_comments`. Resolving that pin through the library alone answers undefined, and the
- * fallback below then starts a FULL BUILD on a comment-only task while the button still reads as
- * an ordinary Start. The fallback chain exists for a task with NO pin; a pin the library cannot
- * show is still the task's answer, and the backend resolves the id for the run.
- */
-const defaultPipeline = computed<{ id: string; name: string } | undefined>(() => {
-  const pinnedId = task.value?.pipelineId
-  if (pinnedId) {
-    return (
-      pipelines.getPipeline(pinnedId) ?? {
-        id: pinnedId,
-        // The catalog NAME map spans the whole catalog (unlike the versions map), so an internal
-        // pin still names itself here; the generic label covers a pin to something this build's
-        // catalog does not know at all.
-        name: pipelines.catalogNames[pinnedId] ?? t('board.task.pipelineFallback'),
-      }
-    )
-  }
-  // No pin: the workspace's own DECLARED in-app default outranks the interface-mode rung, because
-  // an operator who named one said something a tier cannot overrule.
-  const declared = pipelines.declaredDefaultId('interactive')
-  return (
-    pipelines.getPipeline(declared ?? defaultBuildPipelineId(uiMode.isAdvanced)) ??
-    pipelines.pipelines[0]
-  )
-})
-
 /** The PR the implementer agent opened for this task, if any. */
 const pr = computed(() => task.value?.pullRequest)
 const prLabel = computed(() =>
   pr.value?.number ? t('board.task.prNumber', { number: pr.value.number }) : t('board.task.pr'),
 )
 
-/**
- * Reading the result starts at the OUTCOME summary (what changed in product terms, with the
- * captured evidence), and the pull request is one click inside it. In BASIC mode that replaces
- * the card's raw PR chip: the diff is still exactly as reachable, through a surface that says
- * what the diff is about first. Advanced mode keeps both, since a reader who wants the diff
- * directly is the reader that tier is for.
- *
- * Offered only where there is something to read, asked of the SAME reduction the window renders
- * and the inspector's button gates on: a card that offered "read the result" on a task whose
- * every section says "nothing here" would teach people the surface is empty. A task marked done
- * by hand, with no pull request and no run, is that task.
- */
 const laneView = useLaneViewStore()
-const outcomeReadable = computed(() => {
-  const block = task.value
-  if (!block) return false
-  return hasOutcomeToShow(
-    composeRunOutcome({ block, instance: execution.getInstance(block.executionId) ?? null }),
-  )
-})
 /**
- * The card's raw pull-request chip, which basic mode drops in favour of the outcome card
- * carrying the same link at the top. Written as the INVARIANT ("the diff never stops being
- * reachable from this card") rather than as `isAdvanced` alone, so the tier can only ever
- * reorder two routes and never remove the last one: where the outcome card is not offered,
- * the chip stays in both tiers.
+ * The card's raw pull-request chip. Reading the result starts at the OUTCOME summary (what changed
+ * in product terms, with the captured evidence), and the pull request is one click inside it, so
+ * BASIC mode drops the chip in favour of the outcome card carrying the same link at the top: the
+ * diff is still exactly as reachable, through a surface that says what the diff is about first.
+ * Advanced mode keeps both, since a reader who wants the diff directly is the reader that tier is
+ * for.
+ *
+ * Written as the INVARIANT ("the diff never stops being reachable from this card") rather than as
+ * `isAdvanced` alone, so the tier can only ever reorder two routes and never remove the last one:
+ * where the outcome card is not offered, the chip stays in both tiers.
  */
 const showPrChip = computed(
   () => Boolean(pr.value) && (uiMode.isAdvanced || !outcomeReadable.value),
@@ -149,10 +96,6 @@ const showPrChip = computed(
 const showModuleChip = computed(
   () => Boolean(task.value?.moduleName) && laneView.groupKey !== 'module',
 )
-function openOutcome() {
-  ui.openOutcome(props.taskId, task.value?.executionId ?? null)
-}
-
 // This task's current agent run (if any). A failed run must surface the shared
 // failure banner + retry — NOT a stuck progress bar — so the card never looks
 // like it's still working after the run has terminated.
@@ -164,129 +107,6 @@ const runFailed = computed(() => agentRun.value?.status === 'failed')
 const recurring = useRecurringPipelinesStore()
 const schedule = computed(() => recurring.byBlock(props.taskId))
 
-// Optimistic "Start": flip the button into a spinning "Starting…" state the
-// instant it's clicked, before the server confirms. The button naturally
-// unmounts once the stream pushes the block into `in_progress`; if the start
-// call faults we revert and surface a toast.
-const starting = ref(false)
-
-async function run() {
-  if (!runnable.value) {
-    toast.add({
-      title: t('board.task.blockedByDependenciesTitle'),
-      description: t('board.task.waitingOn', { deps: unmet.value.map((d) => d.title).join(', ') }),
-      icon: 'i-lucide-lock',
-    })
-    return
-  }
-  const pipeline = defaultPipeline.value
-  if (!pipeline) {
-    toast.add({
-      title: t('board.task.noPipelineTitle'),
-      description: t('board.task.noPipelineBody'),
-    })
-    return
-  }
-  starting.value = true
-  // false ⇒ the run never started (the user cancelled the personal-password prompt, or
-  // the start was refused — the store surfaces the actionable toast itself). Revert the
-  // optimistic state; on success the button unmounts once the stream pushes in_progress.
-  const started = await execution.start(props.taskId, pipeline)
-  if (started) {
-    // Confirm the (optimistic) start landed — the button unmounts once the stream pushes
-    // in_progress, so without this the successful action gives no feedback. A sandboxed start
-    // says so here rather than borrowing the live wording: this is the moment the reader learns
-    // what they just started, and the two runs differ in what they will end up doing.
-    toast.add({
-      title: sandboxed.value ? t('board.dryRunToast.title') : t('board.task.startedToast.title'),
-      description: sandboxed.value
-        ? t('board.dryRunToast.body', { name: pipeline.name })
-        : t('board.task.startedToast.body', { name: pipeline.name }),
-      color: sandboxed.value ? 'warning' : 'success',
-      icon: sandboxed.value ? 'i-lucide-shield' : 'i-lucide-play',
-    })
-  } else {
-    starting.value = false
-  }
-}
-
-function review() {
-  ui.select(props.taskId)
-  ui.focus(props.taskId)
-}
-
-async function merge() {
-  // Merging a PR into its base is consequential and effectively irreversible — gate it behind a
-  // confirm (plain, not the destructive shape). `execution.mergePr` surfaces its own error toast.
-  const ok = await confirm({
-    title: t('board.task.mergeConfirm.title'),
-    description: t('board.task.mergeConfirm.body'),
-    confirmLabel: t('board.task.mergeConfirm.confirm'),
-    icon: 'i-lucide-git-merge',
-  })
-  if (!ok) return
-  await execution.mergePr(props.taskId)
-}
-
-// A `blocked` task is waiting on a human for one of two reasons — an agent-raised
-// decision OR an approval gate — and both must surface here (a failed run is shown
-// separately by the AgentFailureCard above). The board previously only handled
-// decisions, so an approval-gated task was a dead end: it read "Decision needed"
-// (the old generic `blocked` label) with no badge and a click that did nothing.
-// Read off the per-block index rather than scanning the workspace-wide list: this computed is
-// mounted once per card and invalidated by every execution event, so a `find` over `openDecisions`
-// cost O(cards x open gates) per event. `decisionsByBlock` is the index built for exactly this.
-const pendingDecision = computed(() => execution.decisionsByBlock.get(props.taskId)?.[0])
-// The async stage an iterative reviewer gate (requirements-review / clarity-review) is
-// mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate
-// needs NO human action, so its approval is suppressed below and a working indicator
-// shows instead.
-const reviewStage = computed(() => reviews.stageForBlock(props.taskId))
-const reviewStageLabel = computed(() =>
-  reviewStage.value === 'incorporating'
-    ? t('board.task.incorporatingAnswers')
-    : reviewStage.value === 'reviewing'
-      ? t('board.task.reReviewing')
-      : reviewStage.value === 'recommending'
-        ? t('board.task.recommending')
-        : null,
-)
-const pendingApproval = computed(() => {
-  const a = execution.approvalsByBlock.get(props.taskId)?.[0]
-  // A reviewer gate whose review is incorporating / re-reviewing in the driver is doing
-  // background work, not awaiting a human — don't surface it as "Approval needed".
-  if (a && reviews.isBackground(a.agentKind, props.taskId)) return undefined
-  return a
-})
-
-/** What this blocked task actually needs from a human — drives the card's label,
- * pulse and action. Decision takes precedence over approval (a step never holds
- * both at once; this is just a stable order). Null when nothing is pending. */
-const attention = computed<{
-  label: string
-  icon: string
-  action: string
-  open: () => void
-} | null>(() => {
-  const d = pendingDecision.value
-  if (d)
-    return {
-      label: t('board.task.decisionNeeded'),
-      icon: 'i-lucide-circle-help',
-      action: t('board.task.resolve'),
-      open: () => ui.openDecision(d.instanceId, d.decision.id),
-    }
-  const a = pendingApproval.value
-  if (a)
-    return {
-      label: t('board.task.approvalNeeded'),
-      icon: 'i-lucide-shield-check',
-      action: t('board.task.approve'),
-      open: () => ui.openApprovalDetail(a.instanceId, a.approval.id),
-    }
-  return null
-})
-
 /** Specific header copy: a failed run reads "Failed", a parked task reads its
  * decision/approval reason, otherwise the generic status label. */
 const statusText = computed(() =>
@@ -295,6 +115,11 @@ const statusText = computed(() =>
     : (reviewStageLabel.value ?? attention.value?.label ?? statusMeta.value?.label ?? ''),
 )
 
+function review() {
+  ui.select(props.taskId)
+  ui.focus(props.taskId)
+}
+
 // Clicking the card body only selects the task (opening the inspector so the human can
 // interact with it). Whatever the task is parked on — a decision, an approval, or the
 // requirements review — is opened explicitly via the action button below, never by a
@@ -461,10 +286,11 @@ function selectTask() {
           size="xs"
           :icon="!runnable ? 'i-lucide-lock' : sandboxed ? 'i-lucide-shield' : 'i-lucide-play'"
           :loading="starting"
-          :disabled="!runnable || starting"
+          :disabled="!runnable || starting || !canExecute"
           data-testid="task-start"
           :title="
-            !runnable
+            executeDeniedTitle ??
+            (!runnable
               ? t('board.task.waitingOn', { deps: unmet.map((d) => d.title).join(', ') })
               : sandboxed
                 ? t('board.task.startPipelineDryRun', {
@@ -472,7 +298,7 @@ function selectTask() {
                   })
                 : t('board.task.startPipeline', {
                     name: defaultPipeline?.name ?? t('board.task.pipelineFallback'),
-                  })
+                  }))
           "
           @click.stop="run"
         >
@@ -529,7 +355,14 @@ function selectTask() {
         >
           {{ t('board.task.review') }}
         </UButton>
-        <UButton color="success" size="xs" icon="i-lucide-git-merge" @click.stop="merge">
+        <UButton
+          color="success"
+          size="xs"
+          icon="i-lucide-git-merge"
+          :disabled="!canExecute"
+          :title="executeDeniedTitle"
+          @click.stop="merge"
+        >
           {{ t('board.task.merge') }}
         </UButton>
       </template>

package/app/components/layout/BoardToolbar.vue

@@ -12,6 +12,8 @@ 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()
@@ -104,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>
@@ -191,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/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>