feat(PBI-74): Zustand product-workspace rearchitecture (Stories 1-8) (#180)

* feat(PBI-74): product-workspace store skelet + test-infra (Story 1)

Skelet voor de nieuwe `product-workspace-store` die op termijn de gefragmenteerde
`backlog-store`/`planner-store`/`selection-store`/`product-store` vervangt. Deze
PR levert alleen het skelet + tests; UI-consumers worden in latere stories
omgezet.

- vitest naar jsdom + tests/setup.ts (MemoryStorage, default fetch-stub) — G6/G8
- stores/product-workspace/{types,store,selectors,restore}.ts — immer-middleware,
  alle slices en acties (hydrate, setActive*, ensure*Loaded met activeRequestId-
  guard, applyRealtimeEvent, resyncActiveScopes/loadedScopes, optimistic
  mutations). Restore-wiring in setters volgt in Story 4 (T-857/T-858).
- selectors gebruiken module-level EMPTY refs (G1) en documenteren useShallow-
  vereiste (G2)
- 34 nieuwe unit-tests dekken §Testing setup-checklist uit het ontwerp:
  hydrateSnapshot, selection-cascade, applyRealtimeEvent (I/U/D + parent-move +
  ander-product + unknown-entity → resync), delete-cleanup, race-safe loaders,
  ensureTaskLoaded _detail-flag, resyncActiveScopes ensure-keten, restore-hints
  read/write/clear, optimistic mutation rollback/settle/SSE-echo idempotent
- docs/api/rest-contract.md: audit-sectie met de vier ontbrekende
  ensure*Loaded-endpoints (worden toegevoegd in Story 7 / T-870)

Refs: PBI-74, ST-1318, T-837..T-843
Bron-ontwerp: docs/plans/zustand-store-rearchitecture.md
Implementatieplan: docs/plans/zustand-workspace-store-implementation.md

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

* 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>

* feat(PBI-74): migreer backlog-componenten naar workspace-store (Story 3)

Story 3 verplaatst alle UI-consumers van de oude vier stores
(useBacklogStore/usePlannerStore/useSelectionStore/useProductStore) naar de
nieuwe product-workspace-store. De oude stores blijven nog bestaan voor
hydration-wrapper en realtime-hook (dual-dispatch); Story 8 ruimt ze op.

- T-848 backlog-split-pane.tsx: leest activePbiId/activeStoryId uit
  context-slice (primitives, geen useShallow nodig).
- T-849 pbi-list.tsx: selectVisiblePbis(useShallow); DnD via
  applyOptimisticMutation('pbi-order' + optionele 'entity-patch' bij
  cross-priority drag), met settle/rollback per server-result.
- T-850 story-panel.tsx: selectStoriesForActivePbi(useShallow); DnD via
  applyOptimisticMutation('story-order' + entity-patch bij priority change).
- T-851 task-panel.tsx: selectTasksForActiveStory(useShallow); DnD via
  applyOptimisticMutation('task-order'); detail-view (ensureTaskLoaded +
  isDetail) zit in de task-dialog (apart component, niet in deze lijst).
- T-852 start-sprint-button.tsx: selectActivePbi + selectStoriesForActivePbi
  voor free-story count.
- T-853 set-current-product.tsx: alleen workspace-store.setActiveProduct
  (oude useProductStore-import verwijderd).
- T-854 G1/G2-audit: alle nieuwe selectors gebruiken module-level EMPTY
  refs (G1) en useShallow voor lijsten (G2). Geen 'Maximum update depth'-
  warnings tijdens npm test.
- T-855 tests bijgewerkt: backlog-split-pane.test, task-panel.test,
  integration.test gebruiken nu setState op workspace-store (helpers
  resetWorkspace/setActiveStoryAndTasks/selectPbi/selectStory).

Verify: lint+typecheck clean, 636/636 tests groen. UI-consumers van
oude stores zijn nu nul (uitgezonderd dual-dispatch in hydration-wrapper en
realtime-hook + dev-fingerprint-helper, die in Story 8/T-873/T-878 verdwijnen).

Refs: PBI-74, ST-1320, T-848..T-855

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

* feat(PBI-74): race-safe loaders + restore-hints + URL-prioriteit (Story 4)

- T-856: activeRequestId-guard zat al in store.ts uit Story 1; bevestigd door
  de race-safety test (in-flight ensurePbiLoaded mag niet overschrijven).
- T-857: restore-hint flow toegevoegd in setActiveProduct/setActivePbi/
  setActiveStory. Async chain: await ensureXxxLoaded → guard check →
  readHints → valideer hint via entities.byId → setActiveYyy(hint).
  Geen setTimeout-trick — chain is alleen await-based.
- T-858: writeProductHint/writePbiHint/writeStoryHint/writeTaskHint
  aangeroepen direct na set(...) zodat de hint-persistentie altijd
  consistent is met de in-store selectie.
- T-859: nieuwe components/backlog/url-task-sync.tsx — leest
  ?editTask=&lt;id&gt; uit useSearchParams, schrijft de hint en roept
  setActiveTask aan zodat de URL wint boven een eerder gepersisteerde
  task-hint. Gemount in beide product-pages (desktop + mobile) binnen
  BacklogHydrationWrapper.
- T-860: 6 nieuwe vitest-cases — 4 voor hint-persist per setter, 2 voor de
  restore-flow chain (hint die niet in entities zit wordt genegeerd; hint
  die wel in entities zit wordt toegepast). Bestaande race-safety test
  blijft groen.

Verify: lint+typecheck clean, 642/642 tests groen.

Refs: PBI-74, ST-1321, T-856..T-860

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

* feat(PBI-74): hidden-tab + reconnect resync (Story 5)

Per ontwerp samen in één commit zodat geen vangnet wegvalt zonder vervanging.

- T-861: useBacklogRealtime sluit niet meer op visibilitychange hidden;
  EventSource blijft open zolang browser/netwerk dit toelaten. Reconnect bij
  netwerkfout blijft via backoff. visibilitychange fungeert nog wel als
  re-connect-trigger als de stream tussentijds is gesloten (b.v. 240s
  hard-close server-side).
- T-862: 'ready'-event-handler telt connect-cycles. De eerste 'ready' is de
  initial connect (geen resync). Bij latere 'ready' (post-reconnect) wordt
  resyncActiveScopes('reconnect') aangeroepen om gemiste events op te halen.
- T-863: nieuwe lib/realtime/use-workspace-resync.ts — luistert op
  document.visibilitychange (hidden→visible) en window.online; dispatcht
  resyncActiveScopes('visible') resp. 'reconnect'. Mounted in
  BacklogHydrationWrapper na useBacklogRealtime.
- T-864: 4 nieuwe vitest-cases voor useWorkspaceResync (jsdom): visible→
  visible event, online event, hidden negeren, cleanup-bij-unmount.

Daarnaast lint-cleanup: ongebruikte 'order'-variabelen in pbi-list en
story-panel weggehaald.

Verify: lint+typecheck clean, 646/646 tests groen.

Refs: PBI-74, ST-1322, T-861..T-864

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

* feat(PBI-74): unknown-event fallback tests (Story 6)

T-865 (isUnknownEntityEvent filter) en T-866 (resync-trigger in
applyRealtimeEvent) zijn al in Story 1 geïmplementeerd in store.ts;
deze story breidt de test-coverage uit met expliciete negatieve cases
voor het type-veld noise pattern.

T-867 — 5 nieuwe vitest-cases:
- unknown entity met ANDER product_id → geen resync
- claude_job_status (type) → geen resync
- worker_heartbeat (type) → geen resync
- claude_job_enqueued (type) → geen resync
- payload zonder entity en zonder type → genegeerd
- question-entity (entity-veld, geen type, niet pbi/story/task) → resync trigger

Verify: lint+typecheck clean, 651/651 tests groen.

Refs: PBI-74, ST-1323, T-865..T-867

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

* feat(PBI-74): cache-headers + LIST endpoints (Story 7)

- T-868: cache: 'no-store' was al ingebouwd in fetchJson helper (Story 1).
  Bevestigd door bestaande ensureProductLoaded test die de fetch-init
  controleert.
- T-869: force-dynamic toegevoegd op alle vier nieuwe LIST-endpoints.
- T-870: vier nieuwe routes voor ensure*Loaded:
  - GET /api/products/:id/backlog → ProductBacklogSnapshot
  - GET /api/pbis/:id/stories → BacklogStory[]
  - GET /api/stories/:id/tasks → BacklogTask[]
  - GET /api/tasks/:id (nieuwe handler naast bestaande PATCH) → TaskDetail
    met _detail: true marker
  Auth via authenticateApiRequest (Bearer of iron-session); access-control
  via productAccessFilter (gebruiker is owner of member van het product).
  Statussen worden via taskStatusToApi/storyStatusToApi/pbiStatusToApi
  vertaald naar lowercase API-vorm.
- T-871: SSE-route /api/realtime/backlog stuurt al ready-event direct na
  LISTEN (regel 106) — geen wijziging nodig.

Verify: lint+typecheck clean, 651/651 tests groen.

Refs: PBI-74, ST-1324, T-868..T-871

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

* feat(PBI-74): oude stores opruimen (Story 8)

Workspace-store is nu de enige bron voor product-backlog client-state. De
vier voorgangers en de dual-dispatch-infrastructuur zijn verwijderd.

- T-872: grep over codebase op useBacklogStore/usePlannerStore/
  useSelectionStore/useProductStore is leeg.
- T-873..T-876: stores/{backlog,planner,selection,product}-store.ts deleted.
- T-877: __tests__/realtime/payload-contract.test.ts en
  __tests__/api/backlog-realtime.test.ts deleted — pbi/story/task I|U|D
  payload-handling wordt al gedekt door
  __tests__/stores/product-workspace/store.test.ts (incl. parent-move,
  idempotent inserts, delete-cleanup).
- T-878: lib/realtime/dev-workspace-fingerprint.ts deleted, dual-dispatch
  uit BacklogHydrationWrapper en lib/realtime/use-backlog-realtime.ts
  weggehaald. stores/products-store.ts (lijst van producten ≠ active
  product) blijft ongewijzigd.

Bijwerkingen:
- BacklogPbi en BacklogStory types in components/backlog/story-panel.tsx en
  components/sprint/sprint-backlog.tsx krijgen sort_order zodat ze met de
  workspace-types overeenkomen.
- Server-pages /products/[id]/page.tsx (desktop+mobile) en
  /products/[id]/sprint/[sprintId]/page.tsx selecteren sort_order op story
  en mappen het door in de hydration-payload.

Verify: lint+typecheck clean, 626/626 tests groen (verlies van 25 redundante
oude-store tests; workspace-store tests dekken hetzelfde gedrag).

Refs: PBI-74, ST-1325, T-872..T-878

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

* docs(PBI-74): richtlijn workspace-store + realtime patroon

Documenteert het patroon dat in Stories 1-8 is opgeleverd, zodat een
volgende workspace-store (sprint, of een nieuwe bounded context) hetzelfde
recept volgt.

- docs/patterns/workspace-store.md (nieuw): wanneer een workspace-store, de
  vijf state-slices, selectors-regels (G1/G2), race-safe ensure*Loaded met
  activeRequestId-guard (G4), SSE-hook + applyRealtimeEvent met
  unknown-event filter, hidden-tab + reconnect resync via
  useWorkspaceResync, restore-hint flow met await-chain en URL-prioriteit,
  optimistic mutations (applyOptimisticMutation/rollback/settle), API
  endpoint-vereisten (force-dynamic, cache: no-store), test-setup met
  MemoryStorage + originalActions snapshot + mockImplementation, gotchas
  G1-G8 als comment-template, en het 8-staps migratiepad.
- docs/patterns/zustand-optimistic.md: bijgewerkt voor de nieuwe
  workspace-store API; verwijst voor het bredere patroon naar
  workspace-store.md. Voorbeelden voor pbi-order + entity-patch.
- CLAUDE.md: patterns quickref aangevuld met workspace-store-rij.

Verify: typecheck clean.

Refs: PBI-74

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

* fix(PBI-74): solo + notifications hooks volgen ook hidden-tab/resync patroon

Het uitgangspunt van PBI-74 (robuust tegen gemiste SSE-events, hidden tabs
en onbekende notify-vormen) gold universeel — niet alleen voor
product-workspace. use-solo-realtime en use-notifications-realtime hadden
nog dezelfde bug die use-backlog-realtime in Story 5 al opgelost kreeg:
sluit stream op hidden, geen resync.

Reproductie (zoals gemeld): solo-screen open in tab A, product-backlog
open in tab B; bewerk task-title in tab B → tab A's solo-SSE was gesloten
(hidden) en kreeg het NOTIFY-event nooit. Tab terug naar solo →
EventSource reconnect maar geen resync → oude title persisteert. Postgres
NOTIFY heeft geen replay, dus zonder resync zijn die events permanent
verloren.

Fix in beide hooks (zelfde patroon als Story 5 voor backlog):
- Stream blijft open op visibilitychange hidden — geen close() meer.
- Bij hidden→visible én bij window 'online': router.refresh() zodat de
  server-component opnieuw fetcht en de initial-state-prop ververst (wat
  voor solo de tasks-record reset via initTasks; voor notifications de
  questions-bel-state).
- Bij latere 'ready'-events na reconnect (use-solo-realtime): zelfde
  router.refresh() trigger zodat we niet vertrouwen op alleen het
  visibility-pad.

Verify: lint + typecheck clean, 626/626 tests groen.

Refs: PBI-74

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

* docs: fix broken links in research-repo plan

docs/plans/lees-de-readme-md-validated-book.md beschrijft een research-
repo migratiepad. De links waren geschreven vanuit het research-repo-
perspectief (paden als stores/data-store.ts, ../Scrum4Me/CLAUDE.md,
docs/plans/zustand-store-rearchitecture.md zonder relative-prefix), wat
de doc-link-checker hier laat falen.

- Header-note toegevoegd dat het document voor de research-repo is.
- Interne refs (zustand-store-rearchitecture.md, CLAUDE.md) → relatieve
  paden die in deze repo wél resolven (./zustand-..., ../../CLAUDE.md).
- Research-repo-only refs (stores/data-store.ts,
  hooks/use-event-stream.ts, components/*-select.tsx, etc.) → inline
  code-tags met "(research-repo)" suffix; de link-checker slaat ze over
  en de leesbaarheid blijft.

Verify: npm run docs:check-links → ✓ All doc links valid (118 files).

---------

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

lib/realtime/use-backlog-realtime.ts

@@ -1,11 +1,19 @@
 'use client'
 
-// ST-1115: Client hook for the backlog 3-pane SSE stream.
+// ST-1115 / PBI-74: 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.
+// Dispatches pbi/story/task change events into useProductWorkspaceStore.
+//
+// T-861: stream blijft open op tab hidden. Per spec werkt EventSource gewoon
+// door als de browser het toelaat — gemiste events worden opgehaald via
+// resyncActiveScopes('visible') uit useWorkspaceResync.
+// T-862: bij latere 'ready' events (post-reconnect) triggeren we
+// resyncActiveScopes('reconnect') zodat events die tijdens disconnect zijn
+// gemist, alsnog binnenkomen.
 
 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'
 
 const BACKOFF_START_MS = 1_000
 const BACKOFF_MAX_MS = 30_000
@@ -20,6 +28,7 @@ export function useBacklogRealtime(productId: string | null) {
   const sourceRef = useRef<EventSource | null>(null)
   const backoffRef = useRef<number>(BACKOFF_START_MS)
   const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const readyCountRef = useRef<number>(0)
 
   useEffect(() => {
     if (!productId) return
@@ -44,15 +53,22 @@ export function useBacklogRealtime(productId: string | null) {
 
       source.addEventListener('ready', () => {
         backoffRef.current = BACKOFF_START_MS
+        readyCountRef.current += 1
+        // T-862: eerste ready = initial connect; latere ready = reconnect.
+        if (readyCountRef.current > 1) {
+          void useProductWorkspaceStore
+            .getState()
+            .resyncActiveScopes('reconnect')
+        }
       })
 
       source.onmessage = (e) => {
         if (!e.data) return
         try {
           const payload = JSON.parse(e.data) as EntityPayload
-          useBacklogStore
+          useProductWorkspaceStore
             .getState()
-            .applyChange(payload.entity, payload.op, payload as Record<string, unknown>)
+            .applyRealtimeEvent(payload as unknown as ProductRealtimeEvent)
         } catch (err) {
           if (process.env.NODE_ENV !== 'production') {
             console.error('[realtime/backlog] failed to parse event', err, e.data)
@@ -70,23 +86,22 @@ export function useBacklogRealtime(productId: string | null) {
       }
     }
 
+    // T-861: stream blijft open op hidden. Reconnect alleen als source weg
+    // is (b.v. na netwerkfout) en de tab visible is.
     const onVisibility = () => {
-      if (document.visibilityState === 'hidden') {
-        close()
-      } else if (sourceRef.current === null) {
+      if (document.visibilityState === 'visible' && sourceRef.current === null) {
         backoffRef.current = BACKOFF_START_MS
         connect()
       }
     }
 
-    if (document.visibilityState === 'visible') {
-      connect()
-    }
+    connect()
     document.addEventListener('visibilitychange', onVisibility)
 
     return () => {
       document.removeEventListener('visibilitychange', onVisibility)
       close()
+      readyCountRef.current = 0
     }
   }, [productId])
 }

lib/realtime/use-notifications-realtime.ts

@@ -191,21 +191,30 @@ export function useNotificationsRealtime() {
       })
     }
 
+    // PBI-74: stream blijft open op hidden. Reconnect alleen als hij door
+    // netwerkfout/server-close weg is. Bij visible-overgang en bij online
+    // triggeren we router.refresh() zodat de notifications-bel verse state
+    // pakt — gemiste vraag-events via NOTIFY-throttling worden hierdoor
+    // alsnog zichtbaar.
     const onVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        if (!sourceRef.current || sourceRef.current.readyState === EventSource.CLOSED) {
-          connect()
-        }
-      } else {
-        close()
+      if (document.visibilityState !== 'visible') return
+      if (!sourceRef.current || sourceRef.current.readyState === EventSource.CLOSED) {
+        connect()
       }
+      router.refresh()
+    }
+
+    const onOnline = () => {
+      router.refresh()
     }
 
     connect()
     document.addEventListener('visibilitychange', onVisibilityChange)
+    window.addEventListener('online', onOnline)
 
     return () => {
       document.removeEventListener('visibilitychange', onVisibilityChange)
+      window.removeEventListener('online', onOnline)
       close()
     }
   }, [router])

lib/realtime/use-solo-realtime.ts

@@ -6,7 +6,12 @@
 // - Opent EventSource('/api/realtime/solo?product_id=...') wanneer
 //   productId niet null is; sluit de stream als productId null wordt.
 // - Reconnect met exponential backoff (1s → 30s, reset bij ready).
-// - Pauseert bij document.visibilityState === 'hidden', resumes bij visible.
+// - PBI-74: stream blijft open op tab hidden (geen close meer). Bij
+//   hidden→visible en bij window 'online' triggeren we router.refresh()
+//   zodat gemiste events alsnog binnenkomen via een verse server-render
+//   (re-fetcht initialTasks → initTasks reset solo-store). Postgres NOTIFY
+//   heeft geen replay, dus zonder deze resync zouden hidden-tab events
+//   permanent verloren zijn — zelfde fix als Story 5 voor backlog-realtime.
 // - Cleanup op unmount.
 // - Connection-status (status, showConnectingIndicator) wordt naar de
 //   solo-store geschreven; UI-componenten lezen daar uit.
@@ -19,6 +24,7 @@
 
 import { useEffect, useRef } from 'react'
 import { flushSync } from 'react-dom'
+import { useRouter } from 'next/navigation'
 import { useSoloStore } from '@/stores/solo-store'
 import type { ClaudeJobEvent, JobState, RealtimeEvent, RealtimeStatus } from '@/stores/solo-store'
 
@@ -27,10 +33,12 @@ const BACKOFF_MAX_MS = 30_000
 const CONNECTING_INDICATOR_DELAY_MS = 4_000
 
 export function useSoloRealtime(productId: string | null) {
+  const router = useRouter()
   const sourceRef = useRef<EventSource | null>(null)
   const backoffRef = useRef<number>(BACKOFF_START_MS)
   const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const indicatorTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const readyCountRef = useRef<number>(0)
 
   useEffect(() => {
     const setStatus = useSoloStore.getState().setRealtimeStatus
@@ -88,6 +96,12 @@ export function useSoloRealtime(productId: string | null) {
       source.addEventListener('ready', () => {
         backoffRef.current = BACKOFF_START_MS
         scheduleIndicator('open')
+        readyCountRef.current += 1
+        // PBI-74: latere ready = post-reconnect → resync via router.refresh()
+        // zodat gemiste tasks-state via re-render initial-prop binnenkomt.
+        if (readyCountRef.current > 1) {
+          router.refresh()
+        }
       })
 
       source.addEventListener('claude_jobs_initial', (e) => {
@@ -173,25 +187,33 @@ export function useSoloRealtime(productId: string | null) {
       }
     }
 
+    // PBI-74: stream blijft open op hidden. Reconnect alleen als de stream
+    // door netwerkfout/server-close weg is en de tab visible is. Bij iedere
+    // visible-overgang triggeren we router.refresh() — gemiste events tijdens
+    // throttling/freeze worden via een verse server-render alsnog opgepakt.
     const onVisibility = () => {
-      if (document.visibilityState === 'hidden') {
-        close()
-        scheduleIndicator('disconnected')
-      } else if (sourceRef.current === null) {
+      if (document.visibilityState !== 'visible') return
+      if (sourceRef.current === null) {
         backoffRef.current = BACKOFF_START_MS
         connect()
       }
+      router.refresh()
     }
 
-    if (document.visibilityState === 'visible') {
-      connect()
+    const onOnline = () => {
+      router.refresh()
     }
+
+    connect()
     document.addEventListener('visibilitychange', onVisibility)
+    window.addEventListener('online', onOnline)
 
     return () => {
       document.removeEventListener('visibilitychange', onVisibility)
+      window.removeEventListener('online', onOnline)
       if (indicatorTimerRef.current) clearTimeout(indicatorTimerRef.current)
       close()
+      readyCountRef.current = 0
     }
-  }, [productId])
+  }, [productId, router])
 }

lib/realtime/use-workspace-resync.ts

@@ -0,0 +1,40 @@
+'use client'
+
+// PBI-74 / T-863: useWorkspaceResync hook.
+//
+// Trigger resyncActiveScopes bij:
+// - hidden→visible (browser-throttled events kunnen gemist zijn)
+// - online (netwerk hersteld na disconnect)
+//
+// Hoort gemount te worden naast useBacklogRealtime in BacklogHydrationWrapper.
+
+import { useEffect } from 'react'
+import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
+
+export function useWorkspaceResync(): void {
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        void useProductWorkspaceStore
+          .getState()
+          .resyncActiveScopes('visible')
+      }
+    }
+
+    const onOnline = () => {
+      void useProductWorkspaceStore
+        .getState()
+        .resyncActiveScopes('reconnect')
+    }
+
+    document.addEventListener('visibilitychange', onVisibility)
+    window.addEventListener('online', onOnline)
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibility)
+      window.removeEventListener('online', onOnline)
+    }
+  }, [])
+}