@cat-factory/app 0.37.1 → 0.37.3

package/app/composables/api/errors.spec.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { ApiError, apiErrorEnvelope, apiErrorStatus } from '~/composables/api/errors'
+
+// The contract client (`sendByApiContract`) reports a declared non-2xx as a plain
+// `{ statusCode, headers, body }` value — body under `.body`, NOT an Error. Before the
+// `ApiError` wrap, every `instanceof Error` check rendered "[object Object]" and every
+// `.data.error` reader (parseConflict / parseCredentialError / login + probe messages)
+// silently returned nothing. These tests lock that in.
+
+describe('ApiError', () => {
+  const body = { error: { code: 'conflict', message: 'Nope', details: { reason: 'task_limit' } } }
+
+  it('is a real Error carrying the server message, status, and body', () => {
+    const e = new ApiError(409, body)
+    expect(e).toBeInstanceOf(Error)
+    expect(e.message).toBe('Nope') // not "[object Object]"
+    expect(e.statusCode).toBe(409)
+    expect(e.envelope).toEqual(body.error)
+  })
+
+  it('falls back to a status message when the body carries no envelope', () => {
+    expect(new ApiError(500, 'gateway down').message).toBe('Request failed (HTTP 500)')
+  })
+})
+
+describe('apiErrorEnvelope', () => {
+  const envelope = { code: 'credential_required', message: 'Unlock', details: { vendor: 'claude' } }
+
+  it('reads the envelope from a wrapped ApiError (contract client)', () => {
+    expect(apiErrorEnvelope(new ApiError(428, { error: envelope }))).toEqual(envelope)
+  })
+
+  it('reads the envelope from a bare { body } value (contract client, unwrapped)', () => {
+    expect(apiErrorEnvelope({ statusCode: 428, body: { error: envelope } })).toEqual(envelope)
+  })
+
+  it('reads the envelope from a legacy $fetch FetchError (body under .data)', () => {
+    expect(apiErrorEnvelope({ statusCode: 428, data: { error: envelope } })).toEqual(envelope)
+  })
+
+  it('returns undefined for a network/non-API error', () => {
+    expect(apiErrorEnvelope(new Error('socket hang up'))).toBeUndefined()
+    expect(apiErrorEnvelope(undefined)).toBeUndefined()
+  })
+})
+
+describe('apiErrorStatus', () => {
+  it('reads .statusCode (contract client) and .status (legacy)', () => {
+    expect(apiErrorStatus(new ApiError(503, {}))).toBe(503)
+    expect(apiErrorStatus({ status: 500 })).toBe(500)
+    expect(apiErrorStatus(new Error('x'))).toBeUndefined()
+  })
+})

package/app/composables/api/errors.ts

@@ -0,0 +1,63 @@
+/**
+ * A failed API call, normalised to a real `Error`.
+ *
+ * The contract client (`sendByApiContract`) reports a contract-declared non-2xx as a
+ * plain `{ statusCode, headers, body }` value — NOT an `Error` — with the parsed
+ * `{ error: { code, message, details } }` envelope under `body`. Throwing that bare
+ * object breaks every `error instanceof Error` check (they fall to `String(error)` =
+ * `"[object Object]"`) and hides the server's message. `sendContract` wraps it in this
+ * class so call sites get `instanceof Error`, a real `.message` (the server's), the
+ * `.statusCode`, and the typed `.envelope`.
+ */
+export class ApiError extends Error {
+  readonly statusCode: number
+  /** The parsed response body (the `{ error: {...} }` envelope for our controllers). */
+  readonly body: unknown
+
+  constructor(statusCode: number, body: unknown) {
+    super(envelopeOf(body)?.message ?? `Request failed (HTTP ${statusCode})`)
+    this.name = 'ApiError'
+    this.statusCode = statusCode
+    this.body = body
+  }
+
+  /** The `{ code, message, details, issues }` envelope, when the body carries one. */
+  get envelope(): ApiErrorEnvelope | undefined {
+    return envelopeOf(this.body)
+  }
+}
+
+/** The error envelope every controller emits (`handleError` / contract request-validator). */
+export interface ApiErrorEnvelope {
+  code?: string
+  message?: string
+  details?: unknown
+  issues?: { path?: string; message: string }[]
+}
+
+/** Read the `{ error: {...} }` envelope out of a parsed response body, else undefined. */
+function envelopeOf(body: unknown): ApiErrorEnvelope | undefined {
+  if (!body || typeof body !== 'object') return undefined
+  const error = (body as { error?: unknown }).error
+  return error && typeof error === 'object' ? (error as ApiErrorEnvelope) : undefined
+}
+
+/**
+ * Pull the server error envelope out of any thrown API error, regardless of which client
+ * produced it: the contract client (`ApiError`, body under `.body`) or the legacy `$fetch`
+ * path (ofetch `FetchError`, body under `.data`). Returns undefined for network faults or
+ * non-API errors.
+ */
+export function apiErrorEnvelope(error: unknown): ApiErrorEnvelope | undefined {
+  if (error instanceof ApiError) return error.envelope
+  const e = error as { body?: unknown; data?: unknown }
+  return envelopeOf(e?.body) ?? envelopeOf(e?.data)
+}
+
+/** The HTTP status of a thrown API error, when present (contract client or `$fetch`). */
+export function apiErrorStatus(error: unknown): number | undefined {
+  const e = error as { statusCode?: unknown; status?: unknown }
+  if (typeof e?.statusCode === 'number') return e.statusCode
+  if (typeof e?.status === 'number') return e.status
+  return undefined
+}

package/app/composables/useBlockQueries.ts

@@ -9,14 +9,36 @@ import type { Block, BlockStatus } from '~/types/domain'
  * them unchanged, so callers and tests are unaffected.
  */
 export function useBlockQueries(blocks: Ref<Block[]>) {
-  const byId = computed(() => {
-    const map = new Map<string, Block>()
-    for (const b of blocks.value) map.set(b.id, b)
-    return map
+  /**
+   * Single-pass indexes rebuilt once per `blocks` change: id → block,
+   * parentId → children (insertion order), epicId → members. Every per-frame
+   * query reads these instead of re-scanning the whole array, so a streamed
+   * single-block upsert costs ~O(children touched) rather than O(frames × N).
+   */
+  const index = computed(() => {
+    const byId = new Map<string, Block>()
+    const childrenByParent = new Map<string, Block[]>()
+    const membersByEpic = new Map<string, Block[]>()
+    for (const b of blocks.value) {
+      byId.set(b.id, b)
+      if (b.parentId) {
+        const siblings = childrenByParent.get(b.parentId)
+        if (siblings) siblings.push(b)
+        else childrenByParent.set(b.parentId, [b])
+      }
+      if (b.epicId) {
+        const members = membersByEpic.get(b.epicId)
+        if (members) members.push(b)
+        else membersByEpic.set(b.epicId, [b])
+      }
+    }
+    return { byId, childrenByParent, membersByEpic }
   })
 
+  const byId = computed(() => index.value.byId)
+
   function getBlock(id: string) {
-    return byId.value.get(id)
+    return index.value.byId.get(id)
   }
 
   /** Top-level architecture blocks (the only ones drawn as Vue Flow nodes). */
@@ -24,17 +46,17 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
 
   /** Direct children of a block, in insertion order. */
   function childrenOf(parentId: string) {
-    return blocks.value.filter((b) => b.parentId === parentId)
+    return index.value.childrenByParent.get(parentId) ?? []
   }
 
   /** Tasks directly inside a container (a service or a module). */
   function tasksOf(containerId: string) {
-    return blocks.value.filter((b) => b.parentId === containerId && b.level === 'task')
+    return childrenOf(containerId).filter((b) => b.level === 'task')
   }
 
   /** Modules (sub-frames) inside a service. */
   function modulesOf(serviceId: string) {
-    return blocks.value.filter((b) => b.parentId === serviceId && b.level === 'module')
+    return childrenOf(serviceId).filter((b) => b.level === 'module')
   }
 
   /** Tasks anywhere under a container — directly, or nested inside its modules. */
@@ -61,7 +83,7 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
 
   /** The tasks that belong to an epic (anywhere on the board) via their `epicId`. */
   function epicMembers(epicId: string): Block[] {
-    return blocks.value.filter((b) => b.epicId === epicId)
+    return index.value.membersByEpic.get(epicId) ?? []
   }
 
   /** The epic a task belongs to, if any. */

package/app/composables/usePipelineErrorToast.ts

@@ -6,6 +6,8 @@
  * SAME guidance + "Configure AI" jump as the no-AI-provider startup banner.
  */
 
+import { apiErrorEnvelope } from './api/errors'
+
 /** The parsed shape of a backend conflict (`{ error: { code: 'conflict', details } }`). */
 interface ConflictDetails {
   reason?: string
@@ -13,15 +15,13 @@ interface ConflictDetails {
   [key: string]: unknown
 }
 
-/** Pull a 409 conflict's `{ reason, message, details }` out of a thrown fetch error, else null. */
+/** Pull a 409 conflict's `{ reason, message, details }` out of a thrown API error, else null. */
 export function parseConflict(
   error: unknown,
 ): { reason?: string; message: string; details: ConflictDetails } | null {
-  const body = (
-    error as { data?: { error?: { code?: string; message?: string; details?: ConflictDetails } } }
-  )?.data?.error
+  const body = apiErrorEnvelope(error)
   if (body?.code !== 'conflict') return null
-  const details = body.details ?? {}
+  const details = (body.details as ConflictDetails | undefined) ?? {}
   return {
     reason: typeof details.reason === 'string' ? details.reason : undefined,
     message: body.message ?? 'This action conflicts with the current state.',

package/app/composables/useSourceIntegration.ts

@@ -1,4 +1,5 @@
 import { type ComputedRef, type Ref, computed, ref } from 'vue'
+import { apiErrorEnvelope, apiErrorStatus } from '~/composables/api/errors'
 import { useUpsertList } from '~/composables/useUpsertList'
 
 /**
@@ -79,10 +80,9 @@ export function useSourceIntegration<
       // reason so a panel can explain it (503 = off here; 500 = the backend errored, e.g. an
       // unapplied migration).
       available.value = false
-      const err = e as { statusCode?: number; data?: { error?: { message?: string } } }
-      const serverMessage = err?.data?.error?.message
+      const serverMessage = apiErrorEnvelope(e)?.message
       probeError.value = {
-        status: err?.statusCode ?? null,
+        status: apiErrorStatus(e) ?? null,
         message: serverMessage || (e instanceof Error ? e.message : String(e)),
       }
       sources.value = []

package/app/pages/index.vue

@@ -5,45 +5,93 @@ import BoardToolbar from '~/components/layout/BoardToolbar.vue'
 import SpendWarningBanner from '~/components/layout/SpendWarningBanner.vue'
 import GitHubPatBanner from '~/components/layout/GitHubPatBanner.vue'
 import AiProvidersBanner from '~/components/layout/AiProvidersBanner.vue'
+import ProviderConfigBanner from '~/components/layout/ProviderConfigBanner.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'
 import InspectorPanel from '~/components/panels/InspectorPanel.vue'
 import DecisionModal from '~/components/panels/DecisionModal.vue'
 import AgentStepDetail from '~/components/panels/AgentStepDetail.vue'
 import StepResultViewHost from '~/components/panels/StepResultViewHost.vue'
-import ObservabilityPanel from '~/components/panels/ObservabilityPanel.vue'
-import KaizenPanel from '~/components/kaizen/KaizenPanel.vue'
 import BlockFocusView from '~/components/focus/BlockFocusView.vue'
-import DocumentSourceConnectModal from '~/components/documents/DocumentSourceConnectModal.vue'
-import DocumentImportModal from '~/components/documents/DocumentImportModal.vue'
-import SpawnPreviewModal from '~/components/documents/SpawnPreviewModal.vue'
 import TaskSourceConnectModal from '~/components/tasks/TaskSourceConnectModal.vue'
 import TaskImportModal from '~/components/tasks/TaskImportModal.vue'
 import AddTaskModal from '~/components/board/AddTaskModal.vue'
 import RecurringPipelineModal from '~/components/board/RecurringPipelineModal.vue'
-import BootstrapModal from '~/components/bootstrap/BootstrapModal.vue'
-import AddServiceFromRepoModal from '~/components/github/AddServiceFromRepoModal.vue'
-import GitHubPanel from '~/components/github/GitHubPanel.vue'
-import SlackPanel from '~/components/slack/SlackPanel.vue'
 import GitHubOnboarding from '~/components/github/GitHubOnboarding.vue'
-import FragmentLibraryPanel from '~/components/fragments/FragmentLibraryPanel.vue'
 import CommandBar from '~/components/layout/CommandBar.vue'
-import IntegrationsHub from '~/components/layout/IntegrationsHub.vue'
-import PersonalSetupModal from '~/components/layout/PersonalSetupModal.vue'
-import WorkspaceSettingsPanel from '~/components/settings/WorkspaceSettingsPanel.vue'
-import AccountSettingsPanel from '~/components/settings/AccountSettingsPanel.vue'
-import ObservabilityConnectionPanel from '~/components/settings/ObservabilityConnectionPanel.vue'
-import ProviderConnectionPanel from '~/components/settings/ProviderConnectionPanel.vue'
-import ProviderConfigBanner from '~/components/layout/ProviderConfigBanner.vue'
-import ModelConfigurationPanel from '~/components/settings/ModelConfigurationPanel.vue'
-import LocalModelEndpointsPanel from '~/components/settings/LocalModelEndpointsPanel.vue'
-import LocalModeSettingsPanel from '~/components/settings/LocalModeSettingsPanel.vue'
-import SandboxPanel from '~/components/sandbox/SandboxPanel.vue'
-import UserSecretsSection from '~/components/settings/UserSecretsSection.vue'
-import OpenRouterCatalogPanel from '~/components/settings/OpenRouterCatalogPanel.vue'
-import VendorCredentialsModal from '~/components/providers/VendorCredentialsModal.vue'
 import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
-import AiProviderOnboardingModal from '~/components/providers/AiProviderOnboardingModal.vue'
-import AiPresetMismatchDialog from '~/components/providers/AiPresetMismatchDialog.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
+// they stay out of the initial bundle and don't run setup/watchers while closed.
+const ObservabilityPanel = defineAsyncComponent(
+  () => import('~/components/panels/ObservabilityPanel.vue'),
+)
+const KaizenPanel = defineAsyncComponent(() => import('~/components/kaizen/KaizenPanel.vue'))
+const DocumentSourceConnectModal = defineAsyncComponent(
+  () => import('~/components/documents/DocumentSourceConnectModal.vue'),
+)
+const DocumentImportModal = defineAsyncComponent(
+  () => import('~/components/documents/DocumentImportModal.vue'),
+)
+const SpawnPreviewModal = defineAsyncComponent(
+  () => import('~/components/documents/SpawnPreviewModal.vue'),
+)
+const BootstrapModal = defineAsyncComponent(
+  () => import('~/components/bootstrap/BootstrapModal.vue'),
+)
+const AddServiceFromRepoModal = defineAsyncComponent(
+  () => import('~/components/github/AddServiceFromRepoModal.vue'),
+)
+const GitHubPanel = defineAsyncComponent(() => import('~/components/github/GitHubPanel.vue'))
+const SlackPanel = defineAsyncComponent(() => import('~/components/slack/SlackPanel.vue'))
+const FragmentLibraryPanel = defineAsyncComponent(
+  () => import('~/components/fragments/FragmentLibraryPanel.vue'),
+)
+const IntegrationsHub = defineAsyncComponent(
+  () => import('~/components/layout/IntegrationsHub.vue'),
+)
+const PersonalSetupModal = defineAsyncComponent(
+  () => import('~/components/layout/PersonalSetupModal.vue'),
+)
+const WorkspaceSettingsPanel = defineAsyncComponent(
+  () => import('~/components/settings/WorkspaceSettingsPanel.vue'),
+)
+const AccountSettingsPanel = defineAsyncComponent(
+  () => import('~/components/settings/AccountSettingsPanel.vue'),
+)
+const ObservabilityConnectionPanel = defineAsyncComponent(
+  () => import('~/components/settings/ObservabilityConnectionPanel.vue'),
+)
+const ProviderConnectionPanel = defineAsyncComponent(
+  () => import('~/components/settings/ProviderConnectionPanel.vue'),
+)
+const ModelConfigurationPanel = defineAsyncComponent(
+  () => import('~/components/settings/ModelConfigurationPanel.vue'),
+)
+const LocalModelEndpointsPanel = defineAsyncComponent(
+  () => import('~/components/settings/LocalModelEndpointsPanel.vue'),
+)
+const LocalModeSettingsPanel = defineAsyncComponent(
+  () => import('~/components/settings/LocalModeSettingsPanel.vue'),
+)
+const SandboxPanel = defineAsyncComponent(() => import('~/components/sandbox/SandboxPanel.vue'))
+const UserSecretsSection = defineAsyncComponent(
+  () => import('~/components/settings/UserSecretsSection.vue'),
+)
+const OpenRouterCatalogPanel = defineAsyncComponent(
+  () => import('~/components/settings/OpenRouterCatalogPanel.vue'),
+)
+const VendorCredentialsModal = defineAsyncComponent(
+  () => import('~/components/providers/VendorCredentialsModal.vue'),
+)
+const AiProviderOnboardingModal = defineAsyncComponent(
+  () => import('~/components/providers/AiProviderOnboardingModal.vue'),
+)
+const AiPresetMismatchDialog = defineAsyncComponent(
+  () => import('~/components/providers/AiPresetMismatchDialog.vue'),
+)
 
 const workspace = useWorkspaceStore()
 const github = useGitHubStore()
@@ -170,41 +218,45 @@ watch(
         <BlockFocusView />
       </main>
 
+      <!-- Always-mounted, fast-path surfaces. -->
       <PipelineBuilder />
       <DecisionModal />
       <AgentStepDetail />
       <StepResultViewHost />
-      <ObservabilityPanel />
-      <KaizenPanel />
-      <DocumentSourceConnectModal />
-      <DocumentImportModal />
-      <SpawnPreviewModal />
       <TaskSourceConnectModal />
       <TaskImportModal />
       <AddTaskModal />
       <RecurringPipelineModal />
-      <BootstrapModal />
-      <AddServiceFromRepoModal />
-      <GitHubPanel />
-      <SlackPanel />
-      <FragmentLibraryPanel />
       <CommandBar />
-      <IntegrationsHub />
-      <PersonalSetupModal />
-      <WorkspaceSettingsPanel />
-      <AccountSettingsPanel />
-      <ObservabilityConnectionPanel />
-      <ProviderConnectionPanel />
-      <ModelConfigurationPanel />
-      <LocalModelEndpointsPanel />
-      <LocalModeSettingsPanel />
-      <SandboxPanel />
-      <UserSecretsSection />
-      <OpenRouterCatalogPanel />
-      <VendorCredentialsModal />
       <PersonalCredentialModal />
-      <AiProviderOnboardingModal />
-      <AiPresetMismatchDialog />
+
+      <!-- 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. -->
+      <ObservabilityPanel v-if="ui.observabilityInstanceId" />
+      <KaizenPanel v-if="ui.kaizenScreenOpen" />
+      <DocumentSourceConnectModal v-if="ui.documentConnect" />
+      <DocumentImportModal v-if="ui.documentImport" />
+      <SpawnPreviewModal v-if="ui.spawnPreview" />
+      <BootstrapModal v-if="ui.bootstrapOpen" />
+      <AddServiceFromRepoModal v-if="ui.addServiceOpen" />
+      <GitHubPanel v-if="ui.githubOpen" />
+      <SlackPanel v-if="ui.slackOpen" />
+      <FragmentLibraryPanel v-if="ui.fragmentLibraryOpen" />
+      <IntegrationsHub v-if="ui.integrationsOpen" />
+      <PersonalSetupModal v-if="ui.personalSetupOpen" />
+      <WorkspaceSettingsPanel v-if="ui.workspaceSettingsOpen" />
+      <AccountSettingsPanel v-if="ui.accountSettingsOpen" />
+      <ObservabilityConnectionPanel v-if="ui.observabilityConnectionOpen" />
+      <ProviderConnectionPanel v-if="ui.providerConnectionKind" />
+      <ModelConfigurationPanel v-if="ui.modelConfigOpen" />
+      <LocalModelEndpointsPanel v-if="ui.localModelsOpen" />
+      <LocalModeSettingsPanel v-if="ui.localModeSettingsOpen" />
+      <SandboxPanel v-if="ui.sandboxOpen" />
+      <UserSecretsSection v-if="ui.userSecretsOpen" />
+      <OpenRouterCatalogPanel v-if="ui.openRouterOpen" />
+      <VendorCredentialsModal v-if="ui.vendorCredentialsOpen" />
+      <AiProviderOnboardingModal v-if="ui.aiProviderSetupOpen" />
+      <AiPresetMismatchDialog v-if="ui.aiPresetMismatchOpen" />
     </template>
 
     <!-- Backend unreachable / bootstrap failed -->

package/app/stores/board.spec.ts

@@ -87,6 +87,36 @@ describe('board store read getters', () => {
     ).toEqual(['t2', 't3'])
   })
 
+  it('epicMembers groups blocks by their epicId (indexed lookup)', () => {
+    store.hydrate([
+      frame('f1'),
+      block('e1', { level: 'epic' }),
+      task('t1', 'f1', { epicId: 'e1' }),
+      task('t2', 'f1', { epicId: 'e1' }),
+      task('t3', 'f1'),
+    ])
+    expect(
+      store
+        .epicMembers('e1')
+        .map((b) => b.id)
+        .sort(),
+    ).toEqual(['t1', 't2'])
+    expect(store.epicMembers('none')).toEqual([])
+  })
+
+  it('hydrate reuses the existing object for an unchanged block (stable identity)', () => {
+    store.hydrate([frame('f1'), task('t1', 'f1', { title: 'a' })])
+    const before = store.getBlock('t1')
+    // Re-hydrate with an equal-but-distinct snapshot: identity is preserved so unchanged
+    // blocks don't force a re-render on a coarse full refresh.
+    store.hydrate([frame('f1'), task('t1', 'f1', { title: 'a' })])
+    expect(store.getBlock('t1')).toBe(before)
+    // A block whose content changed gets the fresh object.
+    store.hydrate([frame('f1'), task('t1', 'f1', { title: 'b' })])
+    expect(store.getBlock('t1')).not.toBe(before)
+    expect(store.getBlock('t1')?.title).toBe('b')
+  })
+
   it('serviceOf walks up to the owning top-level frame', () => {
     store.hydrate([frame('f1'), moduleBlock('m1', 'f1'), task('t1', 'm1'), task('t2', 'f1')])
     expect(store.serviceOf(store.getBlock('t1')!)?.id).toBe('f1')

package/app/stores/board.ts

@@ -29,9 +29,34 @@ export const useBoardStore = defineStore('board', () => {
   const queries = useBlockQueries(blocks)
   const { getBlock } = queries
 
-  /** Replace the cached blocks with a server snapshot. */
+  /**
+   * Reconcile the cached blocks against a server snapshot, reusing the existing
+   * object for any block whose content is unchanged. The server stays authoritative
+   * (it replaces optimistic edits and drops deleted blocks), but an unchanged block
+   * keeps its identity, so a coarse full-refresh doesn't hand every frame/task a new
+   * object reference and force the whole board to re-render — only genuinely changed
+   * blocks invalidate. Blocks are emitted in a stable order by the backend mapper, so
+   * a per-block JSON compare is a reliable, cheap (refresh is debounced) equality check.
+   */
+  // Per-object serialization cache, keyed by block identity so it self-invalidates: a
+  // block we keep (same reference) stays cached, while a fresh/`upsert`ed object isn't in
+  // the map and is re-serialized. Lets a hydrate stringify each kept block once (the
+  // incoming snapshot) rather than twice (existing + incoming).
+  const serialized = new WeakMap<Block, string>()
+  function jsonFor(b: Block): string {
+    let s = serialized.get(b)
+    if (s === undefined) {
+      s = JSON.stringify(b)
+      serialized.set(b, s)
+    }
+    return s
+  }
   function hydrate(next: Block[]) {
-    blocks.value = next
+    const prev = new Map(blocks.value.map((b) => [b.id, b]))
+    blocks.value = next.map((n) => {
+      const existing = prev.get(n.id)
+      return existing && jsonFor(existing) === jsonFor(n) ? existing : n
+    })
   }
 
   /** Insert or replace a block returned by the backend. */

package/app/stores/brainstorm.ts

@@ -84,6 +84,16 @@ export const useBrainstormStore = defineStore('brainstorm', () => {
     sessions.value = { ...sessions.value, [key(session.blockId, session.stage)]: session }
   }
 
+  /** Drop all cached sessions + in-flight state (called on workspace switch). */
+  function reset() {
+    available.value = null
+    sessions.value = {}
+    running.value = new Set()
+    incorporating.value = new Set()
+    loadingByKey.value = new Set()
+    inFlight.clear()
+  }
+
   function withFlag(set: typeof running, k: string, on: boolean) {
     const next = new Set(set.value)
     if (on) next.add(k)
@@ -204,6 +214,7 @@ export const useBrainstormStore = defineStore('brainstorm', () => {
     reReview,
     proceed,
     resolveExceeded,
+    reset,
     // Patch the cache from a live `brainstorm` stream event.
     upsert: store,
   }

package/app/stores/clarity.ts

@@ -87,6 +87,16 @@ export const useClarityStore = defineStore('clarity', () => {
     reviews.value = { ...reviews.value, [review.blockId]: review }
   }
 
+  /** Drop all cached reviews + in-flight state (called on workspace switch). */
+  function reset() {
+    available.value = null
+    reviews.value = {}
+    reviewing.value = new Set()
+    incorporating.value = new Set()
+    loadingByBlock.value = new Set()
+    inFlight.clear()
+  }
+
   function withFlag(set: typeof reviewing, key: string, on: boolean) {
     const next = new Set(set.value)
     if (on) next.add(key)
@@ -194,6 +204,7 @@ export const useClarityStore = defineStore('clarity', () => {
     reReview,
     proceed,
     resolveExceeded,
+    reset,
     // Patch the cache from a live `clarity` stream event.
     upsert: store,
   }

package/app/stores/consensus.ts

@@ -56,5 +56,11 @@ export const useConsensusStore = defineStore('consensus', () => {
     }
   }
 
-  return { sessions, sessionFor, isLoading, load, upsert }
+  /** Drop all cached sessions + in-flight state (called on workspace switch). */
+  function reset() {
+    sessions.value = {}
+    loading.value = new Set()
+  }
+
+  return { sessions, sessionFor, isLoading, load, upsert, reset }
 })

package/app/stores/execution.spec.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useExecutionStore } from '~/stores/execution'
+import type { ExecutionInstance } from '~/types/domain'
+
+/**
+ * Minimal instance shape — the `decisionsByBlock` / `approvalsByBlock` getters only read
+ * `id`, `blockId` and each step's `{ decision, approval, agentKind }`, so a cast keeps the
+ * fixtures focused on the grouping behaviour rather than the full wire contract.
+ */
+function instance(id: string, blockId: string, steps: unknown[]): ExecutionInstance {
+  return { id, blockId, steps } as unknown as ExecutionInstance
+}
+
+describe('execution store gate grouping', () => {
+  let store: ReturnType<typeof useExecutionStore>
+  beforeEach(() => {
+    store = useExecutionStore()
+  })
+
+  it('decisionsByBlock groups open (unchosen) decisions by block', () => {
+    store.hydrate([
+      instance('e1', 'b1', [
+        { agentKind: 'coder', decision: { id: 'd1', chosen: null } },
+        { agentKind: 'coder', decision: { id: 'd2', chosen: 'yes' } }, // chosen ⇒ excluded
+      ]),
+      instance('e2', 'b2', [{ agentKind: 'architect', decision: { id: 'd3', chosen: null } }]),
+    ])
+    expect(store.decisionsByBlock.get('b1')?.map((d) => d.decision.id)).toEqual(['d1'])
+    expect(store.decisionsByBlock.get('b2')?.map((d) => d.decision.id)).toEqual(['d3'])
+    expect(store.decisionsByBlock.has('missing')).toBe(false)
+  })
+
+  it('approvalsByBlock groups pending approvals by block', () => {
+    store.hydrate([
+      instance('e1', 'b1', [
+        { agentKind: 'merger', approval: { id: 'a1', status: 'pending' } },
+        { agentKind: 'merger', approval: { id: 'a2', status: 'approved' } }, // not pending ⇒ excluded
+      ]),
+    ])
+    expect(store.approvalsByBlock.get('b1')?.map((a) => a.approval.id)).toEqual(['a1'])
+    expect(store.approvalsByBlock.get('b2')).toBeUndefined()
+  })
+})

package/app/stores/execution.ts

@@ -106,6 +106,23 @@ export const useExecutionStore = defineStore('execution', () => {
     return out
   })
 
+  /**
+   * Open decisions/approvals grouped by the block they belong to, so a board card
+   * resolves its own + its tasks' pending gates with O(1) lookups instead of
+   * re-filtering the global lists once per frame on every execution event.
+   */
+  function groupByBlock<T extends { blockId: string }>(items: T[]): Map<string, T[]> {
+    const map = new Map<string, T[]>()
+    for (const item of items) {
+      const list = map.get(item.blockId)
+      if (list) list.push(item)
+      else map.set(item.blockId, [item])
+    }
+    return map
+  }
+  const decisionsByBlock = computed(() => groupByBlock(openDecisions.value))
+  const approvalsByBlock = computed(() => groupByBlock(openApprovals.value))
+
   /**
    * Start `pipeline` against a block; the server marks the block in-progress. A block
    * pinned to an individual-usage model (Claude) needs the initiator's personal
@@ -279,6 +296,8 @@ export const useExecutionStore = defineStore('execution', () => {
     pendingDecisionCount,
     openDecisions,
     openApprovals,
+    decisionsByBlock,
+    approvalsByBlock,
     pendingApprovalCount,
     start,
     resolveDecision,