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>

lib/realtime/use-backlog-realtime.ts

@@ -7,6 +7,12 @@
 // 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.
+// PBI-74 / 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.
+// PBI-74 / 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'
@@ -27,6 +33,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
@@ -51,6 +58,13 @@ 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) => {
@@ -83,23 +97,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-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)
+    }
+  }, [])
+}