@cat-factory/app 0.311.3 → 0.313.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
@@ -1465,6 +1492,11 @@ example ships in [`deploy/frontend`](https://github.com/kibertoad/cat-factory/tr
   switchers, the `SpendWarningBanner`, and the toolbar (zoom, LOD, decision queue).
 - **Palettes** (`components/palettes`): drag blocks, pipelines and agents onto
   the board.
+- **Setup checklist** (`components/setup/SetupChecklistPanel.vue`, `utils/setupChecklist.ts`):
+  every prerequisite for "a task can run and merge" in one list, for people who can change the
+  setup. It adds no probe of its own: each row reads what its banner or startup dialog already
+  reads (`useSetupChecklist`) and opens the same surface. "Checking" and "missing" are separate
+  states, because an unanswered probe and an absent capability are opposite facts.
 - **Inspector** (`components/panels` + `panels/inspector`): per-block tabs:
   structure, dependencies, model + fragment picker, live execution, and linked
   docs/issues/scenarios. Decisions resolve via `DecisionModal`. A `review` task

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/AiProvidersBanner.vue

@@ -8,6 +8,7 @@ import { computed } from 'vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
+const remedies = useSetupRemedies()
 const { ready, hasUsableModel, defaultPresetBroken } = useAiReadiness()
 
 const showSetup = computed(() => ready.value && !hasUsableModel.value && !ui.aiSetupDismissed)
@@ -47,7 +48,7 @@ const show = computed(() => showSetup.value || showPreset.value)
               {{ t('layout.aiProvidersBanner.setup.body') }}
             </p>
             <div class="mt-4">
-              <UButton color="warning" icon="i-lucide-settings" @click="ui.openAiProviderSetup()">
+              <UButton color="warning" icon="i-lucide-settings" @click="remedies.openModelSetup()">
                 {{ t('layout.aiProvidersBanner.setup.action') }}
               </UButton>
             </div>
@@ -88,7 +89,7 @@ const show = computed(() => showSetup.value || showPreset.value)
                 size="sm"
                 color="warning"
                 icon="i-lucide-cpu"
-                @click="ui.openAiPresetMismatch()"
+                @click="remedies.openPresetMismatch()"
               >
                 {{ t('layout.aiProvidersBanner.preset.action') }}
               </UButton>

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/GitHubPatBanner.vue

@@ -7,9 +7,9 @@ const { t } = useI18n()
 // repo-operating agent step (clone, push, open PR, CI gate, merge) will fail. The server
 // also logs this, but a dev terminal is easy to miss — so surface it in the UI with the
 // (scopes-preselected) creation URL as a one-click link straight to GitHub.
-const auth = useAuthStore()
+const { patSetupUrl } = useSetupRemedies()
 
-const setupUrl = computed(() => auth.localMode?.githubPatSetupUrl ?? '')
+const setupUrl = computed(() => patSetupUrl.value ?? '')
 const dismissed = ref(false)
 const show = computed(() => !!setupUrl.value && !dismissed.value)
 </script>

package/app/components/layout/GitHubPatPermissionsBanner.vue

@@ -3,11 +3,9 @@ import { computed, ref } from 'vue'
 import {
   GITHUB_PAT_FINE_GRAINED_PERMISSIONS,
   githubPatCheckNeedsAttention,
-  githubPatCheckSource,
   missingGitHubPatCapabilities,
 } from '@cat-factory/contracts'
-import type { GitHubPatCapability, GitHubPatKind } from '~/types/domain'
-import { githubPatRemintUrl } from '~/utils/vcs'
+import type { GitHubPatCapability } from '~/types/domain'
 
 // The token a run would authenticate with cannot do what the pipeline needs.
 //
@@ -67,14 +65,8 @@ function capabilityLabel(capability: GitHubPatCapability): string {
   return t(CAPABILITY_KEYS[capability])
 }
 
-/**
- * The kind carried over to the re-mint link. A rejected token was never classified, so it falls
- * back to `unknown` — which lands on the classic form, the only one GitHub lets us pre-fill.
- */
-const kind = computed<GitHubPatKind>(() => report.value?.kind ?? 'unknown')
-const remintUrl = computed(() =>
-  githubPatRemintUrl(kind.value, report.value?.webUrl ?? github.connection?.webUrl),
-)
+// The re-mint page and whose token it is: the map the setup checklist opens through too.
+const { patRemintUrl: remintUrl, patSource, patKind: kind } = useSetupRemedies()
 
 /**
  * Who has to act. A deployment token is replaced by whoever runs the deployment (local mode:
@@ -89,7 +81,7 @@ const remintUrl = computed(() =>
  * personal settings: the exact misrouting the wire field exists to prevent.
  */
 const sourceKey = computed(() =>
-  check.value && githubPatCheckSource(check.value) === 'deployment'
+  patSource.value === 'deployment'
     ? 'layout.githubPatPermissionsBanner.sourceDeployment'
     : 'layout.githubPatPermissionsBanner.sourceInitiator',
 )

package/app/components/layout/InfraSetupBanner.vue

@@ -65,6 +65,8 @@ const ui = useUiStore()
 const auth = useAuthStore()
 const workspace = useWorkspaceStore()
 const { actor } = useSetupActor()
+// Where each area is configured: the map the setup checklist opens through too.
+const remedies = useSetupRemedies()
 
 // Severity order: no executor blocks EVERY agent, so it leads; a missing test environment blocks
 // only testing agents; missing storage only degrades the UI-tester's screenshots.
@@ -73,32 +75,29 @@ const AREAS: InfraSetupArea[] = ['agentExecutor', 'ephemeralEnvironments', 'bina
 // Exhaustive per-area presentation (an exhaustive `Record<InfraSetupArea, …>`, so adding an area
 // without a meta entry fails typecheck — the tier-2 guard). The i18n keys are resolved
 // dynamically (`t(AREA_META[area].titleKey)`), so tier-1 typed-key checking doesn't cover them;
-// the `i18n:check` drift guard (tier 3) catches any that are absent from the catalog. `action`
-// deep-links into the relevant setup surface.
+// the `i18n:check` drift guard (tier 3) catches any that are absent from the catalog. The action
+// opens the area's setup surface through `useSetupRemedies`.
 const AREA_META: Record<
   InfraSetupArea,
-  { icon: string; titleKey: string; bodyKey: string; actionKey: string; onConfigure: () => void }
+  { icon: string; titleKey: string; bodyKey: string; actionKey: string }
 > = {
   agentExecutor: {
     icon: 'i-lucide-server-cog',
     titleKey: 'layout.infraSetupBanner.agentExecutor.title',
     bodyKey: 'layout.infraSetupBanner.agentExecutor.body',
     actionKey: 'layout.infraSetupBanner.agentExecutor.action',
-    onConfigure: () => ui.openProviderConnection('runner-pool'),
   },
   ephemeralEnvironments: {
     icon: 'i-lucide-flask-conical',
     titleKey: 'layout.infraSetupBanner.ephemeralEnvironments.title',
     bodyKey: 'layout.infraSetupBanner.ephemeralEnvironments.body',
     actionKey: 'layout.infraSetupBanner.ephemeralEnvironments.action',
-    onConfigure: () => ui.openProviderConnection('environment'),
   },
   binaryStorage: {
     icon: 'i-lucide-hard-drive',
     titleKey: 'layout.infraSetupBanner.binaryStorage.title',
     bodyKey: 'layout.infraSetupBanner.binaryStorage.body',
     actionKey: 'layout.infraSetupBanner.binaryStorage.action',
-    onConfigure: () => ui.openContentStorageSettings(),
   },
 }
 
@@ -291,7 +290,7 @@ function dismissMenu(card: Pick<AreaCard, 'area' | 'kind'>): DropdownMenuItem[][
                 :color="card.kind === 'outage' ? 'error' : 'warning'"
                 icon="i-lucide-settings"
                 :data-testid="`infra-setup-configure-${card.area}`"
-                @click="AREA_META[card.area].onConfigure()"
+                @click="remedies.openInfraArea(card.area)"
               >
                 {{
                   card.kind === 'outage'

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