@arcote.tech/arc-chat 0.7.19 → 0.7.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-chat",
   "type": "module",
-  "version": "0.7.19",
+  "version": "0.7.20",
   "private": false,
   "description": "Chat module with AI integration for Arc framework",
   "main": "./src/index.ts",
@@ -10,12 +10,12 @@
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.7.19",
-    "@arcote.tech/arc-ai": "^0.7.19",
-    "@arcote.tech/arc-ai-voice": "^0.7.19",
-    "@arcote.tech/arc-auth": "^0.7.19",
-    "@arcote.tech/arc-ds": "^0.7.19",
-    "@arcote.tech/platform": "^0.7.19",
+    "@arcote.tech/arc": "^0.7.20",
+    "@arcote.tech/arc-ai": "^0.7.20",
+    "@arcote.tech/arc-ai-voice": "^0.7.20",
+    "@arcote.tech/arc-auth": "^0.7.20",
+    "@arcote.tech/arc-ds": "^0.7.20",
+    "@arcote.tech/platform": "^0.7.20",
     "lucide-react": ">=0.400.0",
     "react": ">=18.0.0",
     "typescript": "^5.0.0"

package/src/react/chat-component.tsx

@@ -116,11 +116,21 @@ export function createChatComponent(
      *  `historySig` already changed (during streaming) and won't change again.
      *  See the watchdog effect below. */
     const [reconcileNonce, setReconcileNonce] = useState(0);
+    /** Bumped by the visibility / heartbeat handlers to force the SSE useEffect
+     *  to re-fire (abort the dead reader and re-fetch with the same
+     *  `messageId`). Backend's `FINALIZE_GRACE_MS` (5 s) + `init` snapshot
+     *  recovers the in-progress state; 410 → existing retry/interrupted path. */
+    const [streamReopenNonce, setStreamReopenNonce] = useState(0);
     /** AbortController of the currently-open SSE stream, exposed via ref so the
      *  watchdog can tear it down when the DB says the turn is already done. */
     const sseCtrlRef = useRef<AbortController | null>(null);
     /** Last SSE event type seen (for stuck telemetry — was `done` ever sent?). */
     const lastSseEventRef = useRef<string | null>(null);
+    /** Timestamp (performance.now()) of the last SSE byte received — set on
+     *  every `reader.read()` resolve (data + keepalive ping). Drives the
+     *  client-side heartbeat watchdog: if nothing arrived for >2× the server
+     *  keepalive interval, treat the socket as dead and reconnect. */
+    const lastSseByteAtRef = useRef<number | null>(null);
     /** When the (isStreaming=true ∧ DB-idle) divergence first appeared — for
      *  the debounce window and the `waitedMs` stuck attribute. */
     const stuckSinceRef = useRef<number | null>(null);
@@ -325,11 +335,19 @@ export function createChatComponent(
       const since = stuckSinceRef.current;
       const RECONCILE_DEBOUNCE_MS = 200;
       const timer = setTimeout(() => {
+        const lastByteAt = lastSseByteAtRef.current;
         reportReconcileStuck({
           scopeId,
           chatName,
           lastSseEvent: lastSseEventRef.current,
           waitedMs: Date.now() - since,
+          visibilityState:
+            typeof document !== "undefined" ? document.visibilityState : null,
+          hidden: typeof document !== "undefined" ? document.hidden : null,
+          msSinceLastSseByte:
+            lastByteAt !== null && typeof performance !== "undefined"
+              ? Math.round(performance.now() - lastByteAt)
+              : null,
         });
         sseCtrlRef.current?.abort();
         sseCtrlRef.current = null;
@@ -721,9 +739,17 @@ export function createChatComponent(
           const reader = res.body!.getReader();
           const decoder = new TextDecoder();
           let buf = "";
+          lastSseByteAtRef.current =
+            typeof performance !== "undefined" ? performance.now() : 0;
           while (!cancelled) {
             const { value, done } = await reader.read();
             if (done) break;
+            // Heartbeat tick — kept on every read (even keepalive ` : ping`
+            // bytes that don't produce events). Drives the watchdog effect
+            // below: if this stops ticking for >2× the server keepalive, we
+            // assume the socket is dead and reopen.
+            lastSseByteAtRef.current =
+              typeof performance !== "undefined" ? performance.now() : 0;
             buf += decoder.decode(value, { stream: true });
             const lines = buf.split("\n");
             buf = lines.pop() ?? "";
@@ -732,10 +758,14 @@ export function createChatComponent(
               try {
                 const event = JSON.parse(line.slice(6)) as ChatStreamEvent;
                 processEventRef.current?.(event);
-                // Yield between events in the same TCP chunk — bez tego
-                // React batchuje setTimeline w jeden render, streaming
-                // niewidoczny.
-                await new Promise<void>((r) => setTimeout(r, 0));
+                // Yield między eventami żeby React nie batchował setTimeline
+                // w jeden render (streaming niewidoczny). Używamy
+                // queueMicrotask, NIE setTimeout(0): w karcie w tle Chrome
+                // throttluje timeouts do ≥1 s, więc setTimeout(0) zamienia
+                // pętlę w 1-event/s freeze i po powrocie buf jest zalany.
+                // Microtaski nie są throttlowane → pętla domyka turn nawet
+                // w tle, a w foreground React i tak renderuje co microtask.
+                await new Promise<void>((r) => queueMicrotask(r));
               } catch {}
             }
           }
@@ -751,8 +781,87 @@ export function createChatComponent(
         cancelled = true;
         ctrl.abort();
         if (sseCtrlRef.current === ctrl) sseCtrlRef.current = null;
+        lastSseByteAtRef.current = null;
       };
-    }, [activeGeneratingMessageId]);
+      // `streamReopenNonce`: tab-return / heartbeat-timeout forces re-fetch
+      // even though `activeGeneratingMessageId` didn't change. Backend's
+      // FINALIZE_GRACE_MS (5 s) + `init` snapshot recover state seamlessly.
+    }, [activeGeneratingMessageId, streamReopenNonce]);
+
+    // ─── Visibility recovery — tab return forces SSE reconnect ──────────
+    // Chrome/Safari freeze background tabs aggressively: setTimeout is clamped
+    // to ≥1 s, `reader.read()` can hang silently when the OS suspends the
+    // socket, and reactive-query WS updates may be missed. The net effect is
+    // a "zombie" turn after returning to the tab — caret stuck, `done` event
+    // dropped, missing tokens. We do not try to detect each failure mode;
+    // instead, every return-to-visible while we believe we're streaming
+    // tears down the (possibly dead) SSE and bumps `streamReopenNonce` so
+    // the SSE effect re-fires with the same messageId. The backend's
+    // FINALIZE_GRACE_MS window + `init` snapshot make this idempotent —
+    // worst case we get an immediate `done` and a clean teardown.
+    useEffect(() => {
+      if (typeof document === "undefined") return;
+      const onVisibility = () => {
+        if (document.visibilityState !== "visible") return;
+        if (!isStreaming) return;
+        chatDebug("visibility reconnect", {
+          activeGeneratingMessageId,
+        });
+        sseCtrlRef.current?.abort();
+        sseCtrlRef.current = null;
+        setStreamReopenNonce((n) => n + 1);
+      };
+      document.addEventListener("visibilitychange", onVisibility);
+      return () =>
+        document.removeEventListener("visibilitychange", onVisibility);
+    }, [isStreaming, activeGeneratingMessageId]);
+
+    // ─── BFCache restore (back/forward navigation) — force full reset ───
+    // `pageshow` with `persisted=true` fires when the doc is restored from
+    // BFCache. JS was paused, every socket is dead, and refs/state lie about
+    // current reality. Treat it like a fresh mount: abort, bump nonces,
+    // let the rebuild + SSE reopen run from scratch.
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+      const onPageShow = (e: PageTransitionEvent) => {
+        if (!e.persisted) return;
+        chatDebug("bfcache restore");
+        sseCtrlRef.current?.abort();
+        sseCtrlRef.current = null;
+        setReconcileNonce((n) => n + 1);
+        if (isStreaming) setStreamReopenNonce((n) => n + 1);
+      };
+      window.addEventListener("pageshow", onPageShow);
+      return () => window.removeEventListener("pageshow", onPageShow);
+    }, [isStreaming]);
+
+    // ─── Heartbeat watchdog — silent dead socket detector ───────────────
+    // Server sends a `: ping\n\n` keepalive every 5 s. If `reader.read()`
+    // doesn't resolve for >12 s, the socket is almost certainly dead
+    // (network glitch, server restart without a 410, or just the OS
+    // gracefully tearing down a long-idle connection). Reconnect — same
+    // path as the visibility handler. `setInterval` is clamped in
+    // background tabs, but the visibility handler already covers that
+    // case; this guards "tab active, socket silently dead".
+    useEffect(() => {
+      if (!isStreaming) return;
+      if (typeof performance === "undefined") return;
+      const HEARTBEAT_TIMEOUT_MS = 12_000; // 2× server KEEPALIVE_INTERVAL_MS + slack
+      const id = setInterval(() => {
+        const last = lastSseByteAtRef.current;
+        if (last === null) return;
+        const elapsed = performance.now() - last;
+        if (elapsed < HEARTBEAT_TIMEOUT_MS) return;
+        if (typeof document !== "undefined" && document.hidden) return;
+        chatDebug("heartbeat timeout — reconnect", {
+          msSinceLastByte: Math.round(elapsed),
+        });
+        sseCtrlRef.current?.abort();
+        sseCtrlRef.current = null;
+        setStreamReopenNonce((n) => n + 1);
+      }, 3_000);
+      return () => clearInterval(id);
+    }, [isStreaming]);
 
     // ─── Send message ───────────────────────────────────────────
     const handleSend = useCallback(