@cat-factory/app 0.37.2 → 0.38.0

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/api/auth.ts

@@ -1,10 +1,12 @@
 import {
   acceptInvitationContract,
   authConfigContract,
+  forgotPasswordContract,
   logoutContract,
   meContract,
   passwordLoginContract,
   peekInvitationContract,
+  resetPasswordContract,
   signupContract,
 } from '@cat-factory/contracts'
 import type { ApiContext } from './context'
@@ -25,6 +27,15 @@ export function authApi({ http, send, ws }: ApiContext) {
     passwordLogin: (body: { email: string; password: string }) =>
       send(passwordLoginContract, { pathPrefix: '/auth', body }),
 
+    // Request a reset link. Always succeeds (204) regardless of whether the email is
+    // registered, so the response can't be used to enumerate accounts.
+    forgotPassword: (body: { email: string }) =>
+      send(forgotPasswordContract, { pathPrefix: '/auth', body }),
+
+    // Redeem a reset token + set a new password (throws 400 on an invalid/expired token).
+    resetPassword: (body: { token: string; password: string }) =>
+      send(resetPasswordContract, { pathPrefix: '/auth', body }),
+
     peekInvite: (token: string) =>
       send(peekInvitationContract, { pathPrefix: '/auth', pathParams: { token } }),
 

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/pages/reset-password.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import ResetPasswordScreen from '~/components/auth/ResetPasswordScreen.vue'
+</script>
+
+<template>
+  <ResetPasswordScreen />
+</template>

package/app/stores/auth.ts

@@ -133,6 +133,16 @@ export const useAuthStore = defineStore(
       applySession(await api.passwordLogin(body))
     }
 
+    /** Request a password-reset link by email (always resolves; never reveals existence). */
+    async function forgotPassword(email: string) {
+      await api.forgotPassword({ email })
+    }
+
+    /** Redeem a reset token and set a new password. Throws on an invalid/expired token. */
+    async function resetPassword(token: string, password: string) {
+      await api.resetPassword({ token, password })
+    }
+
     /** Drop the local session (sessions are stateless server-side). */
     function logout() {
       api.logout().catch(() => {})
@@ -159,6 +169,8 @@ export const useAuthStore = defineStore(
       loginWithGoogle,
       signup,
       passwordLogin,
+      forgotPassword,
+      resetPassword,
       logout,
       handleUnauthorized,
     }

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 }
 })