feat(PBI-74): dual-dispatch hydratie + realtime naar workspace-store (Story 2)

Story 2 — schaduw-fase: BacklogHydrationWrapper en useBacklogRealtime voeden
nu ook de nieuwe product-workspace-store, terwijl de oude useBacklogStore /
useProductStore leidend blijft voor componenten. Story 3 verschuift consumers
één voor één; Story 8 ruimt de oude stores op.

- T-844: BacklogHydrationWrapper roept naast useBacklogStore.setInitialData
  ook useProductWorkspaceStore.hydrateSnapshot aan. Productname-prop optioneel
  toegevoegd voor activeProduct-context.
- T-845: useBacklogRealtime onmessage dispatcht events naar zowel oude store
  (applyChange) als nieuwe store (applyRealtimeEvent). Geen wijziging aan
  reconnect/visibility — Story 5.
- T-846: dev-only logWorkspaceFingerprint helper vergelijkt counts tussen
  oude en nieuwe store na hydrate en na elk realtime-event. console.warn bij
  mismatch; opt-in debug log via NEXT_PUBLIC_DEBUG_WORKSPACE_FINGERPRINT=1.
  Bestand TODO-marked voor verwijdering in Story 8 (T-878).
- T-847: SetCurrentProduct schrijft naast oude useProductStore ook
  useProductWorkspaceStore.setActiveProduct({id, name}); cleanup cleart beide.
  setActiveProduct triggert ensureProductLoaded — fetch-stub tot Story 7
  (T-870) de LIST-endpoints toevoegt.

Verify: lint+typecheck clean, 636/636 tests groen (geen UI-regressie omdat
oude store leidend blijft).

Refs: PBI-74, ST-1319, T-844..T-847

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/backlog/backlog-hydration-wrapper.tsx

@@ -3,6 +3,14 @@
 import { useEffect, useRef } from 'react'
 import { useBacklogStore, type BacklogPbi, type BacklogStory, type BacklogTask } from '@/stores/backlog-store'
 import { useBacklogRealtime } from '@/lib/realtime/use-backlog-realtime'
+import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
+import type {
+  BacklogPbi as WorkspacePbi,
+  BacklogStory as WorkspaceStory,
+  BacklogTask as WorkspaceTask,
+  ProductBacklogSnapshot,
+} from '@/stores/product-workspace/types'
+import { logWorkspaceFingerprint } from '@/lib/realtime/dev-workspace-fingerprint'
 
 interface InitialData {
   pbis: BacklogPbi[]
@@ -13,6 +21,7 @@ interface InitialData {
 interface BacklogHydrationWrapperProps {
   initialData: InitialData
   productId: string
+  productName?: string
   children: React.ReactNode
 }
 
@@ -27,7 +36,30 @@ function fingerprint(data: InitialData): string {
   return `${pbiPart}|${storyPart}|${taskPart}`
 }
 
-export function BacklogHydrationWrapper({ initialData, productId, children }: BacklogHydrationWrapperProps) {
+// PBI-74 / T-844: dual-dispatch — naast de oude useBacklogStore vullen we nu
+// ook de nieuwe product-workspace-store. De oude store blijft tijdelijk
+// leidend voor componenten; in Story 3 verschuiven consumers één voor één.
+// De runtime-payload bevat sort_order op PBI/Story (Prisma schema), ook al
+// staat het niet op het oude InitialData type — daarom de cast hieronder.
+function toWorkspaceSnapshot(
+  data: InitialData,
+  productId: string,
+  productName: string | undefined,
+): ProductBacklogSnapshot {
+  return {
+    product: { id: productId, name: productName ?? '' },
+    pbis: data.pbis as unknown as WorkspacePbi[],
+    storiesByPbi: data.storiesByPbi as unknown as Record<string, WorkspaceStory[]>,
+    tasksByStory: data.tasksByStory as unknown as Record<string, WorkspaceTask[]>,
+  }
+}
+
+export function BacklogHydrationWrapper({
+  initialData,
+  productId,
+  productName,
+  children,
+}: BacklogHydrationWrapperProps) {
   const setInitialData = useBacklogStore((s) => s.setInitialData)
   const lastFingerprint = useRef<string>('')
 
@@ -36,8 +68,13 @@ export function BacklogHydrationWrapper({ initialData, productId, children }: Ba
     if (fp !== lastFingerprint.current) {
       lastFingerprint.current = fp
       setInitialData(initialData)
+      // Dual-dispatch: nieuwe workspace-store schaduwt mee.
+      useProductWorkspaceStore
+        .getState()
+        .hydrateSnapshot(toWorkspaceSnapshot(initialData, productId, productName))
+      logWorkspaceFingerprint('hydrate')
     }
-  }, [initialData, setInitialData])
+  }, [initialData, productId, productName, setInitialData])
 
   useBacklogRealtime(productId)
 

components/shared/set-current-product.tsx

@@ -2,14 +2,24 @@
 
 import { useEffect } from 'react'
 import { useProductStore } from '@/stores/product-store'
+import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
 import { debugProps } from '@/lib/debug'
 
+// PBI-74 / T-847: zet zowel oude useProductStore.setCurrentProduct als de
+// nieuwe workspace-store.setActiveProduct. setActiveProduct triggert
+// ensureProductLoaded met een requestId-guard; de fetch-stub levert tijdens
+// Story 2 nog geen echte data — echte LIST-endpoints komen in Story 7
+// (T-870). Restore-hint flow volgt in Story 4 (T-857).
 export function SetCurrentProduct({ id, name }: { id: string; name: string }) {
   const { setCurrentProduct, clearCurrentProduct } = useProductStore()
 
   useEffect(() => {
     setCurrentProduct(id, name)
-    return () => clearCurrentProduct()
+    useProductWorkspaceStore.getState().setActiveProduct({ id, name })
+    return () => {
+      clearCurrentProduct()
+      useProductWorkspaceStore.getState().setActiveProduct(null)
+    }
   }, [id, name, setCurrentProduct, clearCurrentProduct])
 
   return <span {...debugProps('set-current-product')} hidden />

lib/realtime/dev-workspace-fingerprint.ts

@@ -0,0 +1,71 @@
+// PBI-74 / T-846: dev-only schaduw-store fingerprint verifyer.
+// Logt counts van oude (useBacklogStore) en nieuwe (useProductWorkspaceStore)
+// na elke hydratie- of realtime-event. Bij mismatch verschijnt er een
+// console.warn zodat we tijdens Story 2 in dev-tools zien dat beide stores
+// dezelfde inhoud houden.
+//
+// TODO(PBI-74 / Story 8 / T-878): verwijder dit bestand en alle aanroepen
+// vóór merge van de cleanup-PR.
+
+import { useBacklogStore } from '@/stores/backlog-store'
+import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
+
+interface Fingerprint {
+  pbis: number
+  storiesByPbi: Record<string, number>
+  tasksByStory: Record<string, number>
+}
+
+function fingerprintOld(): Fingerprint {
+  const s = useBacklogStore.getState()
+  const storiesByPbi: Record<string, number> = {}
+  for (const [pbiId, list] of Object.entries(s.storiesByPbi)) {
+    storiesByPbi[pbiId] = list.length
+  }
+  const tasksByStory: Record<string, number> = {}
+  for (const [storyId, list] of Object.entries(s.tasksByStory)) {
+    tasksByStory[storyId] = list.length
+  }
+  return { pbis: s.pbis.length, storiesByPbi, tasksByStory }
+}
+
+function fingerprintNew(): Fingerprint {
+  const s = useProductWorkspaceStore.getState()
+  const storiesByPbi: Record<string, number> = {}
+  for (const [pbiId, ids] of Object.entries(s.relations.storyIdsByPbi)) {
+    storiesByPbi[pbiId] = ids.length
+  }
+  const tasksByStory: Record<string, number> = {}
+  for (const [storyId, ids] of Object.entries(s.relations.taskIdsByStory)) {
+    tasksByStory[storyId] = ids.length
+  }
+  return { pbis: s.relations.pbiIds.length, storiesByPbi, tasksByStory }
+}
+
+function shapeEqual(a: Record<string, number>, b: Record<string, number>): boolean {
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)])
+  for (const k of keys) {
+    if ((a[k] ?? 0) !== (b[k] ?? 0)) return false
+  }
+  return true
+}
+
+export function logWorkspaceFingerprint(label: string): void {
+  if (process.env.NODE_ENV === 'production') return
+
+  const oldFp = fingerprintOld()
+  const newFp = fingerprintNew()
+  const match =
+    oldFp.pbis === newFp.pbis &&
+    shapeEqual(oldFp.storiesByPbi, newFp.storiesByPbi) &&
+    shapeEqual(oldFp.tasksByStory, newFp.tasksByStory)
+
+  if (!match) {
+    console.warn(
+      `[workspace-fingerprint:${label}] MISMATCH oud↔nieuw`,
+      { old: oldFp, new: newFp },
+    )
+  } else if (process.env.NEXT_PUBLIC_DEBUG_WORKSPACE_FINGERPRINT === '1') {
+    console.debug(`[workspace-fingerprint:${label}] match`, oldFp)
+  }
+}

lib/realtime/use-backlog-realtime.ts

@@ -3,9 +3,16 @@
 // ST-1115: Client hook for the backlog 3-pane SSE stream.
 // Mounts in BacklogHydrationWrapper so it survives Server Action refreshes.
 // Dispatches pbi/story/task change events into useBacklogStore.applyChange.
+//
+// PBI-74 / T-845: dual-dispatch — events worden ook naar de nieuwe
+// product-workspace-store gestuurd. De oude store blijft leidend totdat
+// Story 3 de UI-consumers heeft omgezet en Story 8 de oude store opruimt.
 
 import { useEffect, useRef } from 'react'
 import { useBacklogStore } from '@/stores/backlog-store'
+import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
+import type { ProductRealtimeEvent } from '@/stores/product-workspace/types'
+import { logWorkspaceFingerprint } from '@/lib/realtime/dev-workspace-fingerprint'
 
 const BACKOFF_START_MS = 1_000
 const BACKOFF_MAX_MS = 30_000
@@ -50,9 +57,15 @@ export function useBacklogRealtime(productId: string | null) {
         if (!e.data) return
         try {
           const payload = JSON.parse(e.data) as EntityPayload
+          // Oude store (leidend voor UI tot Story 3).
           useBacklogStore
             .getState()
             .applyChange(payload.entity, payload.op, payload as Record<string, unknown>)
+          // Nieuwe workspace-store (schaduw — wordt leidend in Story 3).
+          useProductWorkspaceStore
+            .getState()
+            .applyRealtimeEvent(payload as unknown as ProductRealtimeEvent)
+          logWorkspaceFingerprint(`event:${payload.entity}:${payload.op}`)
         } catch (err) {
           if (process.env.NODE_ENV !== 'production') {
             console.error('[realtime/backlog] failed to parse event', err, e.data)