@cat-factory/app 0.70.0 → 0.71.0

package/app/composables/useConfirmAction.ts

@@ -0,0 +1,96 @@
+/**
+ * Confirm-gate + success-toast for the recurring destructive actions that aren't board
+ * blocks (disconnect a connection, remove/revoke a credential, clear a config, destroy an
+ * environment). Built on the same `useConfirm()` singleton + `useToast()` the board delete
+ * path uses, so every destructive affordance across the settings/connection surfaces routes
+ * through ONE confirm-then-mutate + toast path rather than each re-inventing its own copy.
+ *
+ * A call site becomes:
+ *
+ *   const { confirmAction, toastDone } = useConfirmAction()
+ *   async function disconnect() {
+ *     if (!(await confirmAction('disconnect', providerName))) return
+ *     await store.remove()
+ *     toastDone('disconnect', providerName)
+ *   }
+ *
+ * The copy is generic (`common.confirm.*` / `common.toast.*`) with the target's name
+ * interpolated, so the irreversibility warning is translated once per locale — not re-worded
+ * per surface. `name` is a short noun for the target (a brand like "Slack", a data value like
+ * the invite email, or a feature noun like "the test environment").
+ */
+type ConfirmShape = 'disconnect' | 'remove' | 'revoke' | 'clear' | 'destroy'
+
+/**
+ * Per-shape copy + iconography. An exhaustive `Record<ConfirmShape, …>` (not an inline
+ * template key) so adding a shape without wiring its copy is a typecheck failure — the
+ * sanctioned guard for enum→message-key lookups the tier-1 typed-keys check can't see.
+ */
+const SHAPE_META: Record<
+  ConfirmShape,
+  { titleKey: string; bodyKey: string; labelKey: string; icon: string; toastKey: string }
+> = {
+  disconnect: {
+    titleKey: 'common.confirm.titles.disconnect',
+    bodyKey: 'common.confirm.reconnectHint',
+    labelKey: 'common.disconnect',
+    icon: 'i-lucide-unplug',
+    toastKey: 'common.toast.disconnected',
+  },
+  remove: {
+    titleKey: 'common.confirm.titles.remove',
+    bodyKey: 'common.confirm.irreversible',
+    labelKey: 'common.remove',
+    icon: 'i-lucide-trash-2',
+    toastKey: 'common.toast.removed',
+  },
+  revoke: {
+    titleKey: 'common.confirm.titles.revoke',
+    bodyKey: 'common.confirm.irreversible',
+    labelKey: 'common.revoke',
+    icon: 'i-lucide-ban',
+    toastKey: 'common.toast.revoked',
+  },
+  clear: {
+    titleKey: 'common.confirm.titles.clear',
+    // A cleared config/connection is re-enterable, so warn it must be reconfigured — not
+    // the harsher `irreversible` copy the remove/revoke/destroy shapes use.
+    bodyKey: 'common.confirm.reconfigureHint',
+    labelKey: 'common.clear',
+    icon: 'i-lucide-eraser',
+    toastKey: 'common.toast.cleared',
+  },
+  destroy: {
+    titleKey: 'common.confirm.titles.destroy',
+    bodyKey: 'common.confirm.irreversible',
+    labelKey: 'common.destroy',
+    icon: 'i-lucide-trash-2',
+    toastKey: 'common.toast.destroyed',
+  },
+}
+
+export function useConfirmAction() {
+  const { confirm } = useConfirm()
+  const toast = useToast()
+  const { t } = useI18n()
+
+  /** Prompt before a destructive action against `name`. Resolves `true` only if confirmed. */
+  async function confirmAction(shape: ConfirmShape, name: string): Promise<boolean> {
+    const meta = SHAPE_META[shape]
+    return confirm({
+      title: t(meta.titleKey, { name }),
+      description: t(meta.bodyKey),
+      variant: 'destructive',
+      confirmLabel: t(meta.labelKey),
+      icon: meta.icon,
+    })
+  }
+
+  /** Toast the completed destructive action (call only on real success). */
+  function toastDone(shape: ConfirmShape, name: string): void {
+    const meta = SHAPE_META[shape]
+    toast.add({ title: t(meta.toastKey, { name }), color: 'success', icon: 'i-lucide-check' })
+  }
+
+  return { confirmAction, toastDone }
+}

package/app/composables/useKeyboardShortcuts.ts

@@ -0,0 +1,76 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+/**
+ * The app-wide keyboard shortcuts, registered ONCE from `pages/index.vue` (mirroring the
+ * ⌘K handler in `CommandBar.vue`). Keeping a single global listener — rather than one per
+ * component — is what stops N handlers each firing a delete.
+ *
+ *   · Escape    — deselect the current block / close the inspector, but ONLY when no modal
+ *                 is open (every modal is a `UModal` with `role="dialog"`, which already
+ *                 handles its own Escape, so we must not also steal it).
+ *   · Delete    — delete the selected block, through the SAME confirm-gated path the
+ *                 inspector button uses (`useBlockDeletion`). Guarded so it never fires
+ *                 while the user is typing in a field. NOTE: only `Delete`, deliberately
+ *                 NOT `Backspace` — `Backspace` collides with "navigate back" muscle memory
+ *                 and would delete the selected block from anywhere on the board.
+ *   · ?         — toggle the keyboard-shortcuts cheatsheet.
+ */
+export function useKeyboardShortcuts(): void {
+  const ui = useUiStore()
+  const board = useBoardStore()
+  const { deleteBlock } = useBlockDeletion()
+
+  /** A modal (UModal) is on screen — let it own the keyboard; don't run global shortcuts. */
+  function modalOpen(): boolean {
+    return ui.commandBarOpen || !!document.querySelector('[role="dialog"]')
+  }
+
+  /** The event originates from a text field, so printable/Delete keys are edits, not shortcuts. */
+  function isEditableTarget(e: KeyboardEvent): boolean {
+    const el = e.target as HTMLElement | null
+    if (!el) return false
+    const tag = el.tagName
+    return (
+      tag === 'INPUT' ||
+      tag === 'TEXTAREA' ||
+      tag === 'SELECT' ||
+      el.isContentEditable ||
+      !!el.closest('input, textarea, select, [contenteditable="true"]')
+    )
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    // "?" — toggle the cheatsheet. Shift+/ on most layouts; guard against typing. The
+    // cheatsheet is itself a modal, so allow the toggle to close it (a plain `modalOpen()`
+    // guard would trap it open, since "?" could then only ever open, never close).
+    if (e.key === '?' && !isEditableTarget(e) && (!modalOpen() || ui.shortcutsHelpOpen)) {
+      e.preventDefault()
+      ui.toggleShortcutsHelp()
+      return
+    }
+
+    if (e.key === 'Escape') {
+      // A modal owns Escape (it closes itself); only deselect when nothing is open.
+      if (modalOpen()) return
+      if (ui.selectedBlockId) {
+        e.preventDefault()
+        ui.select(null)
+      }
+      return
+    }
+
+    if (e.key === 'Delete') {
+      // Never destroy a block while the user is editing a title/description/query.
+      if (isEditableTarget(e) || modalOpen()) return
+      const id = ui.selectedBlockId
+      if (!id) return
+      const block = board.getBlock(id)
+      if (!block) return
+      e.preventDefault()
+      void deleteBlock(block)
+    }
+  }
+
+  onMounted(() => window.addEventListener('keydown', onKeydown))
+  onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+}

package/app/composables/usePipelineErrorToast.ts

@@ -46,6 +46,8 @@ const CONFLICT_TITLE_KEYS: Record<
   bootstrap_not_retryable: 'errors.conflict.title.bootstrap_not_retryable',
   bootstrap_reference_missing: 'errors.conflict.title.bootstrap_reference_missing',
   provision_type_unhandled: 'errors.conflict.title.provision_type_unhandled',
+  preset_unsatisfiable: 'errors.conflict.title.preset_unsatisfiable',
+  visual_pipeline_no_frontend: 'errors.conflict.title.visual_pipeline_no_frontend',
 }
 
 /**

package/app/composables/useWorkspaceStream.ts

@@ -133,12 +133,32 @@ export function useWorkspaceStream() {
 
     socket.onopen = () => {
       attempt = 0
-      connected.value = true
-      // Resync on (re)connect: any event missed while disconnected is reconciled.
-      // The snapshot carries `bootstrapJobs` + executions, so one refresh rehydrates
-      // agentRuns too — a missed terminal event (e.g. a container eviction that
-      // failed the run) can't leave a frame stuck on a stale "bootstrapping…" badge.
-      void workspace.refresh()
+      // Resync on (re)connect BEFORE announcing `connected`: any event missed while
+      // disconnected is reconciled first. The snapshot carries `bootstrapJobs` +
+      // executions, so one refresh rehydrates agentRuns too — a missed terminal event
+      // (e.g. a container eviction that failed the run) can't leave a frame stuck on a
+      // stale "bootstrapping…" badge.
+      //
+      // We flip `connected` only AFTER that refresh settles so it means "connected AND
+      // reconciled". Otherwise `board.hydrate`/`agentRuns.hydrate` reconcile with a
+      // snapshot fetched at connect time, which — under load — can resolve AFTER a fresh
+      // live event and clobber it: e.g. `board.hydrate` REPLACES the block list and drops
+      // a just-created provisional bootstrap frame the stale snapshot never saw, so its
+      // live "bootstrapping…" badge flickers out with no further board event to restore
+      // it. Anything acting on a `connected` board (a user, or an e2e spec gating on
+      // `data-connected`) then does so only after this reconcile, so a lagging resync
+      // can't drop the state that action produces. `connected` is still set on failure
+      // (we ARE connected; a transient refresh error must not wedge the indicator/tests).
+      void workspace
+        .refresh()
+        .catch(() => {})
+        .finally(() => {
+          // A workspace switch (or stop()) may have happened while the refresh was in
+          // flight — don't announce a connection for a socket we've since abandoned.
+          if (!stopped && socket && workspace.workspaceId === workspaceId) {
+            connected.value = true
+          }
+        })
     }
     socket.onmessage = (e) => onMessage(typeof e.data === 'string' ? e.data : '')
     socket.onclose = () => {

package/app/pages/index.vue

@@ -7,6 +7,7 @@ import TranslationWarningBanner from '~/components/layout/TranslationWarningBann
 import GitHubPatBanner from '~/components/layout/GitHubPatBanner.vue'
 import AiProvidersBanner from '~/components/layout/AiProvidersBanner.vue'
 import ProviderConfigBanner from '~/components/layout/ProviderConfigBanner.vue'
+import InfraSetupBanner from '~/components/layout/InfraSetupBanner.vue'
 // Always-mounted, fast-path surfaces (opened frequently during a run / board edits, or
 // store-driven so they must react from anywhere — kept eager for snappy open/close).
 import PipelineBuilder from '~/components/pipeline/PipelineBuilder.vue'
@@ -18,6 +19,8 @@ import AddTaskModal from '~/components/board/AddTaskModal.vue'
 import GitHubOnboarding from '~/components/github/GitHubOnboarding.vue'
 import CommandBar from '~/components/layout/CommandBar.vue'
 import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
+import ConfirmDialog from '~/components/common/ConfirmDialog.vue'
+import KeyboardShortcutsHelp from '~/components/common/KeyboardShortcutsHelp.vue'
 
 // Heavy, rarely-open panels — code-split into their own chunks via defineAsyncComponent
 // and mounted only while their ui open-flag is set (the v-if gates in the template), so
@@ -113,6 +116,10 @@ const models = useModelsStore()
 const ui = useUiStore()
 const aiReadiness = useAiReadiness()
 
+// App-wide keyboard shortcuts (Escape to deselect, Delete to remove the selected block, ?
+// for the cheatsheet). Registered ONCE here so a single global listener owns them.
+useKeyboardShortcuts()
+
 // Load the board from the backend before rendering it.
 onMounted(() => {
   void workspace.init()
@@ -141,6 +148,8 @@ watch(
       autoOpenedSetup.value = false
       autoOpenedPreset.value = false
       ui.resetAiOnboarding()
+      // Infra-setup banner session dismissals are per-workspace too — clear them on switch.
+      ui.resetInfraSetupDismissals()
       // A different board has its own pipeline library, so re-arm the once-per-session advisory.
       ui.pipelineHealthSeen = false
     }
@@ -242,10 +251,23 @@ watch(
     <TranslationWarningBanner />
     <!-- Local-mode setup prompt (missing GitHub PAT); floats over whatever is shown below. -->
     <GitHubPatBanner />
-    <!-- AI-readiness prompt (no usable model source, or default preset uses unavailable models). -->
-    <AiProvidersBanner v-if="workspace.ready && !needsGitHubInstall && !githubProbePending" />
-    <!-- Infrastructure provider prompt (env/runner-pool wired but missing mandatory config). -->
-    <ProviderConfigBanner v-if="workspace.ready && !needsGitHubInstall && !githubProbePending" />
+    <!-- Stacked advisory banners: one click-through column so concurrent prompts never draw on
+         top of each other (a fresh, unconfigured deployment can raise all three at once — no AI
+         model + no runner pool + no storage). The wrapper is `pointer-events-none`; each banner
+         re-enables pointer events on its own card, so the empty strip never intercepts clicks on
+         the board chrome underneath.
+         - AI-readiness (no usable model source, or default preset uses unavailable models).
+         - Infrastructure provider (env/runner-pool wired but missing mandatory config).
+         - Infra-setup (this deployment needs an executor / test env / storage the operator hasn't
+           defined yet, so a class of agents can't run). -->
+    <div
+      v-if="workspace.ready && !needsGitHubInstall && !githubProbePending"
+      class="pointer-events-none absolute inset-x-0 top-0 z-40 flex flex-col items-center gap-2 px-4 pt-4"
+    >
+      <AiProvidersBanner />
+      <ProviderConfigBanner />
+      <InfraSetupBanner />
+    </div>
 
     <!-- Resolving whether the GitHub App is installed, before we decide what to show. -->
     <div
@@ -307,6 +329,8 @@ watch(
       <AddTaskModal />
       <CommandBar />
       <PersonalCredentialModal />
+      <ConfirmDialog />
+      <KeyboardShortcutsHelp />
 
       <!-- Lazy panels: mounted only while their ui open-flag is set, so each loads on
            first open (its own chunk) rather than bloating the initial bundle. -->

package/app/stores/agentRuns.spec.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import type { BootstrapJob } from '~/types/domain'
+import { useAgentRunsStore } from '~/stores/agentRuns'
+
+/** Minimal BootstrapJob factory — only the fields the store's reconcile logic touches. */
+function job(id: string, over: Partial<BootstrapJob> = {}): BootstrapJob {
+  return {
+    id,
+    workspaceId: 'ws_test',
+    referenceArchitectureId: null,
+    referenceArchitectureName: null,
+    repoName: id,
+    repoOwner: null,
+    repoUrl: null,
+    instructions: '',
+    status: 'running',
+    blockId: `blk_${id}`,
+    subtasks: null,
+    error: null,
+    failure: null,
+    createdAt: 1,
+    updatedAt: 1,
+    ...over,
+  }
+}
+
+describe('agentRuns store — monotonic bootstrap reconcile', () => {
+  let store: ReturnType<typeof useAgentRunsStore>
+  beforeEach(() => {
+    store = useAgentRunsStore()
+  })
+
+  it('hydrate does NOT regress a run a newer live event already advanced', () => {
+    // A live `bootstrap: failed` event landed first (newer updatedAt).
+    store.upsertBootstrap(job('j1', { status: 'failed', updatedAt: 5 }))
+    // A lagging `workspace.refresh()` then hydrates a STALE snapshot that still saw
+    // the run as `running` (older updatedAt) — it must NOT clobber the terminal state.
+    store.hydrate([job('j1', { status: 'running', updatedAt: 2 })], 'ws_test')
+    expect(store.bootstrapJobs[0]!.status).toBe('failed')
+    expect(store.byBlock.blk_j1!.status).toBe('failed')
+  })
+
+  it('hydrate does NOT drop a live-added run the stale snapshot never saw', () => {
+    // The on-connect resync fires a snapshot fetch BEFORE the bootstrap starts, then a live
+    // `bootstrap: failed` event lands while that fetch is in flight. When the (older) snapshot
+    // finally resolves it does not contain the run at all — mapping over the snapshot alone
+    // would silently drop it, stranding the frame with no further event to correct it.
+    store.upsertBootstrap(job('j1', { status: 'failed', updatedAt: 5 }))
+    store.hydrate([], 'ws_test') // stale snapshot: fetched before the run existed
+    expect(store.bootstrapJobs[0]?.status).toBe('failed')
+    expect(store.byBlock.blk_j1!.status).toBe('failed')
+  })
+
+  it('hydrate DROPS a cached run from a different workspace (board switch starts clean)', () => {
+    store.upsertBootstrap(job('j1', { status: 'failed', updatedAt: 5, workspaceId: 'ws_other' }))
+    // Switching to ws_test: its snapshot must not leak the previous board's run.
+    store.hydrate([job('j2', { workspaceId: 'ws_test' })], 'ws_test')
+    expect(store.bootstrapJobs.map((j) => j.id)).toEqual(['j2'])
+  })
+
+  it('hydrate DOES apply a genuinely newer snapshot', () => {
+    store.upsertBootstrap(job('j1', { status: 'running', updatedAt: 2 }))
+    store.hydrate([job('j1', { status: 'succeeded', updatedAt: 9 })], 'ws_test')
+    expect(store.bootstrapJobs[0]!.status).toBe('succeeded')
+  })
+
+  it('upsertBootstrap ignores an older/out-of-order event but applies newer/equal', () => {
+    store.upsertBootstrap(job('j1', { status: 'failed', updatedAt: 5 }))
+    store.upsertBootstrap(job('j1', { status: 'running', updatedAt: 3 })) // stale → ignored
+    expect(store.bootstrapJobs[0]!.status).toBe('failed')
+    store.upsertBootstrap(job('j1', { status: 'succeeded', updatedAt: 5 })) // equal → applied
+    expect(store.bootstrapJobs[0]!.status).toBe('succeeded')
+  })
+})

package/app/stores/agentRuns.ts

@@ -59,9 +59,34 @@ export const useAgentRunsStore = defineStore('agentRuns', () => {
    */
   const envConfigRepairJobs = ref<EnvConfigRepairJob[]>([])
 
-  /** Replace the cached bootstrap runs with a server snapshot. */
-  function hydrate(jobs: BootstrapJob[]) {
-    bootstrapJobs.value = [...jobs].sort((a, b) => b.createdAt - a.createdAt)
+  /**
+   * Reconcile the cached bootstrap runs with a server snapshot for `workspaceId`. A snapshot is
+   * authoritative EXCEPT where a live event has already advanced (or ADDED) a run past what this
+   * (possibly stale) read observed: a `board` event triggers a debounced `workspace.refresh()`,
+   * and the stream's on-(re)connect resync also refetches — either read can resolve AFTER a newer
+   * `bootstrap` event already landed. Two clobber hazards, both handled here:
+   *   - REGRESS: a run present in BOTH the snapshot and the cache — keep the newer-by-`updatedAt`
+   *     version so a lagging refresh can't revert a `failed`/`succeeded` run to `running`.
+   *   - DROP: a run a live event just ADDED that the (older) snapshot never saw — mapping over the
+   *     snapshot alone would silently drop it, and a terminal bootstrap emits nothing further, so
+   *     the frame would be stranded on a stale "bootstrapping…" badge with no event to correct it.
+   *     Preserve such cached runs. Scoped to `workspaceId` (bootstrap runs carry it), so a board
+   *     SWITCH — whose snapshot is for a different workspace — still discards the previous board's
+   *     runs instead of leaking them onto the new board.
+   */
+  function hydrate(jobs: BootstrapJob[], workspaceId: string) {
+    const incomingIds = new Set(jobs.map((j) => j.id))
+    const held = new Map(bootstrapJobs.value.map((j) => [j.id, j]))
+    const reconciled = jobs.map((incoming) => {
+      const current = held.get(incoming.id)
+      return current && current.updatedAt > incoming.updatedAt ? current : incoming
+    })
+    // Live-added runs the snapshot hasn't observed yet — keep only this workspace's (a switch
+    // starts clean), so a resync that races a fresh `bootstrap` event can't drop the run.
+    const preserved = [...held.values()].filter(
+      (j) => !incomingIds.has(j.id) && j.workspaceId === workspaceId,
+    )
+    bootstrapJobs.value = [...reconciled, ...preserved].sort((a, b) => b.createdAt - a.createdAt)
   }
 
   /** Replace the cached env-config-repair runs with a server snapshot. */
@@ -92,8 +117,11 @@ export const useAgentRunsStore = defineStore('agentRuns', () => {
    */
   function upsertBootstrap(job: BootstrapJob) {
     const i = bootstrapJobs.value.findIndex((j) => j.id === job.id)
-    if (i >= 0) bootstrapJobs.value[i] = job
-    else bootstrapJobs.value.unshift(job)
+    // Monotonic by `updatedAt`: never let a stale/out-of-order event regress a run a
+    // newer one already advanced (same guard as {@link hydrate}).
+    if (i >= 0) {
+      if (job.updatedAt >= bootstrapJobs.value[i]!.updatedAt) bootstrapJobs.value[i] = job
+    } else bootstrapJobs.value.unshift(job)
   }
 
   /**

package/app/stores/ui.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { DocumentSourceKind, TaskSourceKind, LodLevel } from '~/types/domain'
+import type { DocumentSourceKind, TaskSourceKind, LodLevel, InfraSetupArea } from '~/types/domain'
 import type { PendingContext } from '~/composables/useContextLinking'
 import { zoomToLod } from '~/composables/useSemanticZoom'
 import { useExecutionStore } from '~/stores/execution'
@@ -105,6 +105,9 @@ export const useUiStore = defineStore('ui', () => {
   // Command bar (⌘K) — searchable launcher for every navbar action.
   const commandBarOpen = ref(false)
 
+  // Keyboard-shortcuts cheatsheet (?) — a modal listing every global shortcut.
+  const shortcutsHelpOpen = ref(false)
+
   // Mobile navigation drawer: on compact (< lg) viewports the SideBar is an
   // off-canvas drawer toggled by a hamburger; on lg+ it is a static aside and this
   // flag is ignored. Closed on any nav action so the board is revealed immediately.
@@ -187,6 +190,19 @@ export const useUiStore = defineStore('ui', () => {
   const aiSetupDismissed = ref(false)
   const aiPresetDismissed = ref(false)
 
+  // Infra-setup banner: per-SESSION dismissals, one flag per area, cleared on workspace switch
+  // exactly like the AI-onboarding flags (a dismissal in one workspace must not suppress the
+  // independent prompt for another). The PERMANENT "don't notify me again" dismissal is per-USER
+  // and persists in localStorage from the banner component; this only covers "hide for now".
+  const infraSetupSessionDismissed = ref<InfraSetupArea[]>([])
+  function dismissInfraSetupForSession(area: InfraSetupArea) {
+    if (!infraSetupSessionDismissed.value.includes(area))
+      infraSetupSessionDismissed.value = [...infraSetupSessionDismissed.value, area]
+  }
+  function resetInfraSetupDismissals() {
+    infraSetupSessionDismissed.value = []
+  }
+
   // Dedicated result-view overlay: a step whose agent kind declares a bespoke
   // visualization (via the archetype's `resultView`) opens here instead of the generic
   // prose step-detail panel. `view` is the registry id (e.g. 'requirements-review');
@@ -446,6 +462,15 @@ export const useUiStore = defineStore('ui', () => {
   function toggleCommandBar() {
     commandBarOpen.value = !commandBarOpen.value
   }
+  function openShortcutsHelp() {
+    shortcutsHelpOpen.value = true
+  }
+  function closeShortcutsHelp() {
+    shortcutsHelpOpen.value = false
+  }
+  function toggleShortcutsHelp() {
+    shortcutsHelpOpen.value = !shortcutsHelpOpen.value
+  }
   function openMobileNav() {
     mobileNavOpen.value = true
   }
@@ -754,6 +779,7 @@ export const useUiStore = defineStore('ui', () => {
     slackOpen,
     fragmentLibraryOpen,
     commandBarOpen,
+    shortcutsHelpOpen,
     mobileNavOpen,
     integrationsOpen,
     cameFromIntegrations,
@@ -779,6 +805,9 @@ export const useUiStore = defineStore('ui', () => {
     aiPresetMismatchOpen,
     aiSetupDismissed,
     aiPresetDismissed,
+    infraSetupSessionDismissed,
+    dismissInfraSetupForSession,
+    resetInfraSetupDismissals,
     resultView,
     closeResultView,
     stepDetail,
@@ -829,6 +858,9 @@ export const useUiStore = defineStore('ui', () => {
     openCommandBar,
     closeCommandBar,
     toggleCommandBar,
+    openShortcutsHelp,
+    closeShortcutsHelp,
+    toggleShortcutsHelp,
     openMobileNav,
     closeMobileNav,
     toggleMobileNav,

package/app/stores/workspace.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
-import type { SpendStatus, Workspace, WorkspaceSnapshot } from '~/types/domain'
+import type { InfraSetup, SpendStatus, Workspace, WorkspaceSnapshot } from '~/types/domain'
 import { useAccountsStore } from '~/stores/accounts'
 import { useBoardStore } from '~/stores/board'
 import { usePipelinesStore } from '~/stores/pipelines'
@@ -49,6 +49,12 @@ export const useWorkspaceStore = defineStore(
     const error = ref<string | null>(null)
     /** Latest spend-safeguard status from the server (null until first load). */
     const spend = ref<SpendStatus | null>(null)
+    /**
+     * Per-area infrastructure-setup status (ephemeral environments / agent executor / binary
+     * storage) from the snapshot, driving the infra-setup banner. Null on an older backend that
+     * doesn't compute it (⇒ no banner).
+     */
+    const infraSetup = ref<InfraSetup | null>(null)
 
     /** The boards belonging to the active account (all boards when auth is off). */
     const accountWorkspaces = computed(() => {
@@ -78,6 +84,7 @@ export const useWorkspaceStore = defineStore(
       }
       workspaceId.value = snapshot.workspace.id
       spend.value = snapshot.spend ?? null
+      infraSetup.value = snapshot.infraSetup ?? null
       // Keep the board list in step (e.g. a freshly created board, or a rename).
       const i = workspaces.value.findIndex((w) => w.id === snapshot.workspace.id)
       if (i >= 0) workspaces.value[i] = snapshot.workspace
@@ -85,7 +92,7 @@ export const useWorkspaceStore = defineStore(
       useBoardStore().hydrate(snapshot.blocks)
       usePipelinesStore().hydrate(snapshot.pipelines, snapshot.pipelineCatalogVersions)
       useExecutionStore().hydrate(snapshot.executions)
-      useAgentRunsStore().hydrate(snapshot.bootstrapJobs ?? [])
+      useAgentRunsStore().hydrate(snapshot.bootstrapJobs ?? [], snapshot.workspace.id)
       useAgentRunsStore().hydrateEnvConfigRepair(snapshot.envConfigRepairJobs ?? [])
       useNotificationsStore().hydrate(snapshot.notifications ?? [])
       useMergePresetsStore().hydrate(
@@ -236,6 +243,7 @@ export const useWorkspaceStore = defineStore(
       ready,
       error,
       spend,
+      infraSetup,
       init,
       switchTo,
       selectAccount,

package/app/types/domain.ts

@@ -54,6 +54,9 @@ export type {
   TaskLimitMode,
   WorkspaceSettings,
   UpdateWorkspaceSettingsInput,
+  InfraSetup,
+  InfraSetupStatus,
+  InfraSetupArea,
   ServiceFragmentDefaults,
   KaizenGradingStatus,
   KaizenGrading,

package/app/utils/pipeline.ts

@@ -0,0 +1,22 @@
+import { frameAllowsVisualPipeline, pipelineHasVisualStep } from '@cat-factory/contracts'
+import type { Block, Pipeline } from '~/types/domain'
+
+// Surface counterpart to the backend's slice-4c run-start gate: a pipeline with a visual step
+// (`tester-ui` / `visual-confirmation`) may run only on a frame with a UI to exercise — a
+// `frontend` frame, or a frame a `frontend` frame links to. The SPA hides such pipelines from
+// the pickers where they can't run so a user never picks one the backend would refuse. Both
+// sides share the pure predicates from `@cat-factory/contracts`, so the surface can't drift from
+// the gate.
+
+/**
+ * Whether `pipeline` may run on a task under `frame`. A non-visual pipeline is always allowed;
+ * a visual one only when the frame has a UI (see {@link frameAllowsVisualPipeline}). `blocks` is
+ * the board's block list, used to find frontend→service links.
+ */
+export function pipelineAllowedForFrame(
+  pipeline: Pipeline,
+  frame: Block | undefined,
+  blocks: readonly Block[],
+): boolean {
+  return !pipelineHasVisualStep(pipeline) || frameAllowsVisualPipeline(frame, blocks)
+}