@cat-factory/app 0.37.2 → 0.37.3

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

@@ -35,8 +35,18 @@ const allTasks = computed(() => board.allTasksUnder(props.id))
 const taskIds = computed(() => new Set(allTasks.value.map((t) => t.id)))
 const taskCount = computed(() => allTasks.value.length)
 const hasTasks = computed(() => taskCount.value > 0 || modules.value.length > 0)
-const mergedTasks = computed(() => allTasks.value.filter((t) => t.status === 'done').length)
-const prTasks = computed(() => allTasks.value.filter((t) => t.status === 'pr_ready').length)
+// Single pass over the tasks for both rollups (vs. one filter each).
+const taskStats = computed(() => {
+  let merged = 0
+  let prReady = 0
+  for (const t of allTasks.value) {
+    if (t.status === 'done') merged++
+    else if (t.status === 'pr_ready') prReady++
+  }
+  return { merged, prReady }
+})
+const mergedTasks = computed(() => taskStats.value.merged)
+const prTasks = computed(() => taskStats.value.prReady)
 const canvas = computed(() => board.containerSize(props.id))
 
 // Frame status is derived from its tasks — services never reach "done".
@@ -60,10 +70,17 @@ const selected = computed(() => ui.selectedBlockId === props.id)
 // kept (gated off) so the prior behaviour is one edit away if we want chips back.
 const showExpanded = computed(() => true)
 
-// Surface a pending decision from this frame OR any of its tasks.
-const blockDecisions = computed(() =>
-  execution.openDecisions.filter((d) => d.blockId === props.id || taskIds.value.has(d.blockId)),
-)
+// Surface a pending decision from this frame OR any of its tasks (O(tasks) map
+// lookups, not a scan of every open decision per frame).
+const blockDecisions = computed(() => {
+  const byBlock = execution.decisionsByBlock
+  const out = [...(byBlock.get(props.id) ?? [])]
+  for (const id of taskIds.value) {
+    const list = byBlock.get(id)
+    if (list) out.push(...list)
+  }
+  return out
+})
 
 function openFirstDecision() {
   const d = blockDecisions.value[0]
@@ -74,13 +91,15 @@ function openFirstDecision() {
 // iterative reviewer gate (requirements-review / clarity-review) that's mid-cycle
 // (incorporating / re-reviewing in the driver), which is background work needing no human,
 // so it stays off the frame's "Approval" badge.
-const blockApprovals = computed(() =>
-  execution.openApprovals.filter(
-    (a) =>
-      (a.blockId === props.id || taskIds.value.has(a.blockId)) &&
-      !reviews.isBackground(a.agentKind, a.blockId),
-  ),
-)
+const blockApprovals = computed(() => {
+  const byBlock = execution.approvalsByBlock
+  const candidates = [...(byBlock.get(props.id) ?? [])]
+  for (const id of taskIds.value) {
+    const list = byBlock.get(id)
+    if (list) candidates.push(...list)
+  }
+  return candidates.filter((a) => !reviews.isBackground(a.agentKind, a.blockId))
+})
 
 function openFirstApproval() {
   const a = blockApprovals.value[0]

package/app/components/bootstrap/BootstrapModal.vue

@@ -24,12 +24,16 @@ const open = computed({
 
 // Load the workspace's reference architectures + recent jobs, plus (best-effort)
 // the GitHub repos the user can access so the base form can pick from them.
-watch(open, (isOpen) => {
-  if (isOpen) {
-    void bootstrap.load()
-    void loadGitHubRepos()
-  }
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) {
+      void bootstrap.load()
+      void loadGitHubRepos()
+    }
+  },
+  { immediate: true },
+)
 
 async function loadGitHubRepos() {
   try {

package/app/components/documents/DocumentImportModal.vue

@@ -41,13 +41,17 @@ const sourceDocs = computed(() =>
   source.value ? documents.documents.filter((d) => d.source === source.value) : [],
 )
 
-watch(open, (isOpen) => {
-  if (isOpen) {
-    ref_.value = ''
-    source.value = ui.documentImport?.source ?? documents.connectedSources[0]?.source ?? undefined
-    documents.loadDocuments().catch(() => {})
-  }
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) {
+      ref_.value = ''
+      source.value = ui.documentImport?.source ?? documents.connectedSources[0]?.source ?? undefined
+      documents.loadDocuments().catch(() => {})
+    }
+  },
+  { immediate: true },
+)
 
 async function doImport() {
   const value = ref_.value.trim()

package/app/components/github/AddServiceFromRepoModal.vue

@@ -41,11 +41,15 @@ async function loadRepos() {
 
 // On open: ensure we know the connection + which repos the App can access, and
 // the workspace's already-tracked repos (to flag ones already on the board).
-watch(open, (isOpen) => {
-  if (!isOpen) return
-  resetSelection()
-  void loadRepos()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    resetSelection()
+    void loadRepos()
+  },
+  { immediate: true },
+)
 
 // If the user connects from inside the modal (the not-connected prompt), pull the
 // repo list as soon as the connection is bound.

package/app/components/github/GitHubPanel.vue

@@ -26,10 +26,14 @@ const back = useIntegrationBack(open)
 
 // On open: refresh projections when connected. The not-connected state renders
 // <GitHubConnect>, which discovers and links installations on its own.
-watch(open, (isOpen) => {
-  if (!isOpen) return
-  if (github.connected) void github.load()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    if (github.connected) void github.load()
+  },
+  { immediate: true },
+)
 
 function notifyError(title: string, e: unknown) {
   toast.add({

package/app/components/kaizen/KaizenPanel.vue

@@ -12,9 +12,13 @@ const kaizen = useKaizenStore()
 
 const open = computed(() => ui.kaizenScreenOpen)
 
-watch(open, (isOpen) => {
-  if (isOpen) void kaizen.loadOverview()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void kaizen.loadOverview()
+  },
+  { immediate: true },
+)
 
 function close() {
   ui.closeKaizen()

package/app/components/layout/IntegrationsHub.vue

@@ -54,6 +54,8 @@ watch(
       if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
     }
   },
+  // Lazy v-if mount: the hub mounts with `integrationsOpen` already true → load immediately.
+  { immediate: true },
 )
 
 const open = computed({

package/app/components/panels/ObservabilityPanel.vue

@@ -44,13 +44,18 @@ const contextLoading = computed(
 
 // Load (and refresh) whenever a different run's panel opens. Reset to the calls view
 // and load both the calls and the provided-context snapshots.
-watch(executionId, (id) => {
-  if (id) {
-    view.value = 'calls'
-    void observability.load(id)
-    void observability.loadContext(id)
-  }
-})
+watch(
+  executionId,
+  (id) => {
+    if (id) {
+      view.value = 'calls'
+      void observability.load(id)
+      void observability.loadContext(id)
+    }
+  },
+  // Lazy v-if mount: the panel mounts with executionId already set, so load immediately.
+  { immediate: true },
+)
 
 const expandedCtx = reactive<Record<string, boolean>>({})
 function toggleCtx(s: AgentContextSnapshot) {

package/app/components/providers/VendorCredentialsModal.vue

@@ -52,12 +52,16 @@ const label = ref('')
 const token = ref('')
 const busy = ref(false)
 
-watch(open, (isOpen) => {
-  if (!isOpen) return
-  // Honour a deep-linked tab each time the modal opens (e.g. "My subscriptions" → personal).
-  activeTab.value = ui.vendorCredentialsTab
-  if (workspace.workspaceId) void creds.load(workspace.workspaceId)
-})
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    // Honour a deep-linked tab each time the modal opens (e.g. "My subscriptions" → personal).
+    activeTab.value = ui.vendorCredentialsTab
+    if (workspace.workspaceId) void creds.load(workspace.workspaceId)
+  },
+  { immediate: true },
+)
 
 /** Step-by-step instructions for the selected vendor. */
 const steps = computed<string[]>(() => {

package/app/components/sandbox/SandboxPanel.vue

@@ -19,9 +19,13 @@ const open = computed({
 
 const tab = ref<'experiments' | 'prompts' | 'fixtures'>('experiments')
 
-watch(open, (isOpen) => {
-  if (isOpen) void store.load()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load()
+  },
+  { immediate: true },
+)
 
 // ---- experiment builder ----------------------------------------------------
 const agentKind = ref('requirements-review')
@@ -107,6 +111,21 @@ const gradeByRun = computed(() => {
   for (const g of store.detail?.grades ?? []) map.set(g.runId, g)
   return map
 })
+// Fixture id → name, so a row resolves its fixture in O(1) instead of a .find scan.
+const fixtureMap = computed(() => {
+  const map = new Map<string, string>()
+  for (const f of store.fixtures) map.set(f.id, f.name)
+  return map
+})
+// Pre-join each run with its grade + fixture name once, so the results table doesn't
+// re-`.get()` the same grade four times (and `.find()` the fixture) per row on render.
+const detailRows = computed(() =>
+  (store.detail?.runs ?? []).map((run) => ({
+    run,
+    grade: gradeByRun.value.get(run.id) ?? null,
+    fixtureName: fixtureMap.value.get(run.fixtureId) ?? run.fixtureId,
+  })),
+)
 const selectedRun = ref<SandboxRun | null>(null)
 
 function scoreColor(score: number): string {
@@ -157,8 +176,6 @@ async function archive(prompt: SandboxPromptVersion) {
     })
   }
 }
-
-const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.name ?? id
 </script>
 
 <template>
@@ -348,7 +365,7 @@ const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.nam
                   </thead>
                   <tbody>
                     <tr
-                      v-for="run in store.detail.runs"
+                      v-for="{ run, grade, fixtureName } in detailRows"
                       :key="run.id"
                       class="cursor-pointer border-t border-slate-800 hover:bg-slate-800/40"
                       @click="selectedRun = run"
@@ -357,14 +374,14 @@ const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.nam
                       <td class="py-1 pr-2 font-mono text-[11px] text-slate-400">
                         {{ run.model }}
                       </td>
-                      <td class="py-1 pr-2 text-slate-400">{{ fixtureName(run.fixtureId) }}</td>
+                      <td class="py-1 pr-2 text-slate-400">{{ fixtureName }}</td>
                       <td class="py-1 pr-2">
                         <span
-                          v-if="gradeByRun.get(run.id)"
-                          :class="scoreColor(gradeByRun.get(run.id)!.weightedTotal)"
+                          v-if="grade"
+                          :class="scoreColor(grade.weightedTotal)"
                           class="font-semibold"
                         >
-                          {{ gradeByRun.get(run.id)!.weightedTotal.toFixed(2) }}
+                          {{ grade.weightedTotal.toFixed(2) }}
                         </span>
                         <span v-else-if="run.status === 'failed'" class="text-rose-400"
                           >failed</span
@@ -373,16 +390,10 @@ const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.nam
                       </td>
                       <td class="py-1">
                         <span
-                          v-if="gradeByRun.get(run.id)?.objective"
-                          :class="
-                            gradeByRun.get(run.id)!.objective!.pass
-                              ? 'text-emerald-400'
-                              : 'text-amber-400'
-                          "
+                          v-if="grade?.objective"
+                          :class="grade.objective.pass ? 'text-emerald-400' : 'text-amber-400'"
                         >
-                          {{ gradeByRun.get(run.id)!.objective!.caught }}/{{
-                            gradeByRun.get(run.id)!.objective!.total
-                          }}
+                          {{ grade.objective.caught }}/{{ grade.objective.total }}
                         </span>
                         <span v-else class="text-slate-600">—</span>
                       </td>

package/app/components/settings/IssueTrackerPanel.vue

@@ -41,7 +41,9 @@ onMounted(() => {
   // probe on open if the navbar hasn't already, so the toggles below reflect reality.
   if (tasks.available === null) void tasks.probe()
 })
-watch(() => tracker.settings, hydrate, { deep: true })
+// `tracker.settings` is reassigned wholesale on hydrate/save, so a reference watch
+// (no deep traversal) catches every change.
+watch(() => tracker.settings, hydrate)
 
 // Per-source live state (available = usable now; enabled = offered to the workspace).
 const github = computed(() => tasks.descriptorFor('github'))

package/app/components/settings/LocalModeSettingsPanel.vue

@@ -43,9 +43,13 @@ function syncDraft() {
 }
 
 // Load + hydrate the draft whenever the panel opens.
-watch(open, (isOpen) => {
-  if (isOpen) void store.load().then(syncDraft)
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load().then(syncDraft)
+  },
+  { immediate: true },
+)
 watch(() => store.settings, syncDraft)
 
 async function save() {

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -21,9 +21,13 @@ const back = useIntegrationBack(open)
 
 // Load the user's endpoints whenever the panel opens (loaded independently of the
 // workspace snapshot, like personal subscriptions).
-watch(open, (isOpen) => {
-  if (isOpen) void store.load()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load()
+  },
+  { immediate: true },
+)
 
 const RUNNERS: { value: LocalRunner; label: string }[] = (
   Object.keys(LOCAL_RUNNER_LABELS) as LocalRunner[]

package/app/components/settings/ModelConfigurationPanel.vue

@@ -55,14 +55,18 @@ const filteredKinds = computed(() => {
   )
 })
 
-watch(open, (isOpen) => {
-  if (isOpen) {
-    editor.value = null
-    filter.value = ''
-    void models.ensureLoaded(workspace.workspaceId ?? undefined)
-    if (workspace.workspaceId) void creds.load(workspace.workspaceId)
-  }
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) {
+      editor.value = null
+      filter.value = ''
+      void models.ensureLoaded(workspace.workspaceId ?? undefined)
+      if (workspace.workspaceId) void creds.load(workspace.workspaceId)
+    }
+  },
+  { immediate: true },
+)
 
 onKeyStroke('Escape', () => {
   if (!open.value) return

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -42,18 +42,22 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
-watch(open, async (isOpen) => {
-  if (!isOpen) return
-  try {
-    await store.ensureLoaded()
-    if (store.connection.provider) provider.value = store.connection.provider
-    const site = store.connection.summary?.site
-    if (site) datadog.site = site
-    await store.loadIncident()
-  } catch (e) {
-    notifyError('Could not load observability settings', e)
-  }
-})
+watch(
+  open,
+  async (isOpen) => {
+    if (!isOpen) return
+    try {
+      await store.ensureLoaded()
+      if (store.connection.provider) provider.value = store.connection.provider
+      const site = store.connection.summary?.site
+      if (site) datadog.site = site
+      await store.loadIncident()
+    } catch (e) {
+      notifyError('Could not load observability settings', e)
+    }
+  },
+  { immediate: true },
+)
 
 async function saveIncident() {
   incidentBusy.value = true

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -51,15 +51,20 @@ const connectingKey = ref(false)
 
 // Load key state + persisted catalog whenever the panel opens; seed the tick selection,
 // then auto-refresh the live catalog if a key is already connected (no extra click).
-watch(open, (isOpen) => {
-  if (!isOpen || !workspace.workspaceId) return
-  const ws = workspace.workspaceId
-  void apiKeys.load(ws).catch(() => {})
-  void store.load(ws).then(() => {
-    selected.value = new Set(store.enabled.map((m) => m.id))
-    if (keyConnected.value && store.browse.length === 0) void refresh()
-  })
-})
+watch(
+  open,
+  (isOpen) => {
+    // Lazy v-if mount runs this immediately (see below); guard still skips the closed case.
+    if (!isOpen || !workspace.workspaceId) return
+    const ws = workspace.workspaceId
+    void apiKeys.load(ws).catch(() => {})
+    void store.load(ws).then(() => {
+      selected.value = new Set(store.enabled.map((m) => m.id))
+      if (keyConnected.value && store.browse.length === 0) void refresh()
+    })
+  },
+  { immediate: true },
+)
 
 // The list to show: the live browse list once refreshed, else the persisted enabled set.
 const source = computed<OpenRouterModelMeta[]>(() =>

package/app/components/settings/ProviderConnectionPanel.vue

@@ -7,7 +7,7 @@
 // see backend/docs/native-environment-adapter.md): a `secret` field → the write-only secret
 // bundle, a non-secret field → providerConfig[key], a `baseUrl` field → baseUrl. A field
 // with a `default` is optional — left blank it falls back to that default.
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRaw, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
@@ -163,9 +163,9 @@ function buildManifestPayload(): {
   const template = descriptor.value?.manifestTemplate
   if (!template) return null
   const base = descriptor.value?.savedManifest ?? template
-  // `base` is a Vue reactive proxy, which structuredClone refuses (DataCloneError). The
-  // manifest is plain JSON config, so a JSON round-trip both unwraps the proxy and deep-clones.
-  const manifest: Record<string, unknown> = JSON.parse(JSON.stringify(base))
+  // `base` is a Vue reactive proxy, which structuredClone refuses (DataCloneError). `toRaw`
+  // unwraps it to the underlying plain-JSON config so structuredClone can deep-clone it.
+  const manifest: Record<string, unknown> = structuredClone(toRaw(base))
   const providerConfig: Record<string, unknown> = {
     ...(manifest.providerConfig as Record<string, unknown> | undefined),
   }

package/app/components/settings/UserSecretsSection.vue

@@ -40,9 +40,13 @@ function resetDraft() {
   if (meta) for (const [k, v] of Object.entries(meta)) values.value[k] = v
 }
 
-watch(open, (isOpen) => {
-  if (isOpen) void store.load().then(resetDraft)
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load().then(resetDraft)
+  },
+  { immediate: true },
+)
 watch(kind, resetDraft)
 
 const secretField = computed<ProviderConfigField | undefined>(() =>

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -87,7 +87,9 @@ function hydrate() {
   draft.spendMonthlyLimit = s.spendMonthlyLimit == null ? '' : String(s.spendMonthlyLimit)
 }
 
-watch(() => store.settings, hydrate, { immediate: true, deep: true })
+// `store.settings` is always replaced wholesale (store hydrate/update reassign the ref),
+// so tracking the object reference is enough — no deep per-field traversal needed.
+watch(() => store.settings, hydrate, { immediate: true })
 
 const saving = ref(false)
 

package/app/components/slack/SlackPanel.vue

@@ -78,6 +78,8 @@ watch(
       notifyError('Could not load Slack settings', e)
     }
   },
+  // Lazy v-if mount: the panel mounts with `open` already true, so load immediately.
+  { immediate: true },
 )
 
 async function connectViaOAuth() {

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/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,

package/app/stores/github.ts

@@ -259,6 +259,22 @@ export const useGitHubStore = defineStore('github', () => {
     return api.commentGitHubIssue(workspace.requireId(), repoGithubId, number, body)
   }
 
+  /**
+   * Drop the per-workspace projection + connection state (called on workspace switch)
+   * so the prior workspace's repos/PRs/issues don't linger until the re-probe + reload
+   * land. `available` returns to `null` (unknown) so the onboarding gate re-resolves.
+   */
+  function reset() {
+    available.value = null
+    connection.value = null
+    installations.value = []
+    repos.value = []
+    availableRepos.value = []
+    pulls.value = []
+    issues.value = []
+    branches.value = {}
+  }
+
   return {
     available,
     connection,
@@ -300,5 +316,6 @@ export const useGitHubStore = defineStore('github', () => {
     openPullRequest,
     mergePullRequest,
     comment,
+    reset,
   }
 })

package/app/stores/requirements.ts

@@ -97,6 +97,17 @@ export const useRequirementsStore = defineStore('requirements', () => {
     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()
+    recommending.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)
@@ -265,6 +276,7 @@ export const useRequirementsStore = defineStore('requirements', () => {
     acceptRecommendation,
     rejectRecommendation,
     reRequestRecommendation,
+    reset,
     // Patch the cache from a live `requirements` stream event.
     upsert: store,
   }

package/app/stores/workspace.ts

@@ -16,6 +16,11 @@ import { useRecurringPipelinesStore } from '~/stores/recurringPipelines'
 import { useServicesStore } from '~/stores/services'
 import { useAgentsStore } from '~/stores/agents'
 import { useTrackerStore } from '~/stores/tracker'
+import { useRequirementsStore } from '~/stores/requirements'
+import { useClarityStore } from '~/stores/clarity'
+import { useBrainstormStore } from '~/stores/brainstorm'
+import { useConsensusStore } from '~/stores/consensus'
+import { useGitHubStore } from '~/stores/github'
 
 /**
  * Owns the active workspace and bootstraps the app against the backend. On load
@@ -58,6 +63,18 @@ export const useWorkspaceStore = defineStore(
 
     /** Push a snapshot into the data stores. */
     function hydrate(snapshot: WorkspaceSnapshot) {
+      // A change of active board (or the first load) — drop the per-block caches that are
+      // NOT part of the snapshot (reviews, brainstorm/consensus sessions, the GitHub
+      // projection) so a switched-to board never shows the previous one's stale state.
+      // These are lazily reloaded/re-probed per board, so clearing on a same-board refresh
+      // would needlessly wipe an open review window — hence only on an actual id change.
+      if (workspaceId.value !== snapshot.workspace.id) {
+        useRequirementsStore().reset()
+        useClarityStore().reset()
+        useBrainstormStore().reset()
+        useConsensusStore().reset()
+        useGitHubStore().reset()
+      }
       workspaceId.value = snapshot.workspace.id
       spend.value = snapshot.spend ?? null
       // Keep the board list in step (e.g. a freshly created board, or a rename).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.37.2",
+  "version": "0.37.3",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",