@roj-ai/debug 0.1.12 → 0.1.14

package/dist/providers/EventPollingProvider.d.ts

@@ -5,20 +5,14 @@ interface EventPollingProviderProps {
 /**
  * Provider component that manages event polling for a session.
  *
- * When mounted, it loads the session's events and starts polling for new events.
- * When unmounted (e.g., navigating away), it stops polling and resets the store.
- *
- * Usage:
- * ```tsx
- * <EventPollingProvider sessionId={sessionId}>
- *   <DebugViews />
- * </EventPollingProvider>
- * ```
+ * Polling is paused when the tab is hidden or the user has been idle for
+ * IDLE_TIMEOUT_MS. It resumes (and immediately catches up) on activity or
+ * tab refocus. Unmounting clears polling and resets the store.
  */
 export declare function EventPollingProvider({ sessionId, children }: EventPollingProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Hook to initialize event polling for a session.
- * Use this instead of EventPollingProvider if you want more control.
+ * Hook variant of EventPollingProvider for callers that need access to
+ * isLoading / error.
  */
 export declare function useEventPolling(sessionId: string | undefined): {
     isLoading: boolean;

package/dist/providers/EventPollingProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventPollingProvider.d.ts","sourceRoot":"","sources":["../../src/providers/EventPollingProvider.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CActF;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS;;;EAkB5D"}
+{"version":3,"file":"EventPollingProvider.d.ts","sourceRoot":"","sources":["../../src/providers/EventPollingProvider.tsx"],"names":[],"mappings":"AAMA,UAAU,yBAAyB;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAGtF;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS;;;EAwE5D"}

package/dist/providers/EventPollingProvider.js

@@ -1,49 +1,92 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useEventStore } from '../stores/event-store.js';
+const IDLE_TIMEOUT_MS = 2 * 60 * 1000;
+const ACTIVITY_EVENTS = ['mousedown', 'mousemove', 'keydown', 'touchstart', 'scroll', 'wheel'];
 /**
  * Provider component that manages event polling for a session.
  *
- * When mounted, it loads the session's events and starts polling for new events.
- * When unmounted (e.g., navigating away), it stops polling and resets the store.
- *
- * Usage:
- * ```tsx
- * <EventPollingProvider sessionId={sessionId}>
- *   <DebugViews />
- * </EventPollingProvider>
- * ```
+ * Polling is paused when the tab is hidden or the user has been idle for
+ * IDLE_TIMEOUT_MS. It resumes (and immediately catches up) on activity or
+ * tab refocus. Unmounting clears polling and resets the store.
  */
 export function EventPollingProvider({ sessionId, children }) {
-    const loadSession = useEventStore((s) => s.loadSession);
-    const reset = useEventStore((s) => s.reset);
-    useEffect(() => {
-        loadSession(sessionId);
-        // Cleanup on unmount or sessionId change
-        return () => {
-            reset();
-        };
-    }, [sessionId, loadSession, reset]);
+    useEventPolling(sessionId);
     return _jsx(_Fragment, { children: children });
 }
 /**
- * Hook to initialize event polling for a session.
- * Use this instead of EventPollingProvider if you want more control.
+ * Hook variant of EventPollingProvider for callers that need access to
+ * isLoading / error.
  */
 export function useEventPolling(sessionId) {
     const loadSession = useEventStore((s) => s.loadSession);
     const reset = useEventStore((s) => s.reset);
+    const startPolling = useEventStore((s) => s.startPolling);
+    const stopPolling = useEventStore((s) => s.stopPolling);
+    const fetchNewEvents = useEventStore((s) => s.fetchNewEvents);
     const isLoading = useEventStore((s) => s.isLoading);
     const error = useEventStore((s) => s.error);
     useEffect(() => {
         if (!sessionId)
             return;
+        let idleTimer = null;
+        let isIdle = false;
+        let cancelled = false;
+        const reconcile = () => {
+            if (cancelled)
+                return;
+            const state = useEventStore.getState();
+            if (state.sessionId !== sessionId || state.isLoading)
+                return;
+            const shouldPoll = document.visibilityState === 'visible' && !isIdle;
+            if (shouldPoll && !state.isPolling) {
+                fetchNewEvents();
+                startPolling();
+            }
+            else if (!shouldPoll && state.isPolling) {
+                stopPolling();
+            }
+        };
+        const onActivity = () => {
+            if (idleTimer)
+                clearTimeout(idleTimer);
+            if (isIdle) {
+                isIdle = false;
+                reconcile();
+            }
+            idleTimer = setTimeout(() => {
+                isIdle = true;
+                reconcile();
+            }, IDLE_TIMEOUT_MS);
+        };
+        const onVisibility = () => reconcile();
+        for (const ev of ACTIVITY_EVENTS) {
+            window.addEventListener(ev, onActivity, { passive: true });
+        }
+        document.addEventListener('visibilitychange', onVisibility);
+        // Reconcile after the initial load finishes — loadSession auto-starts
+        // polling on success, so we need to immediately stop it if the tab is
+        // hidden / user is idle at that moment.
+        const unsubscribe = useEventStore.subscribe((state, prev) => {
+            if (state.sessionId !== sessionId)
+                return;
+            if (state.isLoading !== prev.isLoading)
+                reconcile();
+        });
+        onActivity(); // arm the idle timer
         loadSession(sessionId);
-        // Cleanup on unmount or sessionId change
         return () => {
+            cancelled = true;
+            if (idleTimer)
+                clearTimeout(idleTimer);
+            for (const ev of ACTIVITY_EVENTS) {
+                window.removeEventListener(ev, onActivity);
+            }
+            document.removeEventListener('visibilitychange', onVisibility);
+            unsubscribe();
             reset();
         };
-    }, [sessionId, loadSession, reset]);
+    }, [sessionId, loadSession, reset, startPolling, stopPolling, fetchNewEvents]);
     return { isLoading, error };
 }
 //# sourceMappingURL=EventPollingProvider.js.map

package/dist/providers/EventPollingProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventPollingProvider.js","sourceRoot":"","sources":["../../src/providers/EventPollingProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAOxD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAA6B;IACtF,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;IACvD,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,SAAS,CAAC,CAAA;QAEtB,yCAAyC;QACzC,OAAO,GAAG,EAAE;YACX,KAAK,EAAE,CAAA;QACR,CAAC,CAAA;IACF,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnC,OAAO,4BAAG,QAAQ,GAAI,CAAA;AACvB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,SAA6B;IAC5D,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;IACvD,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACnD,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,SAAS;YAAE,OAAM;QAEtB,WAAW,CAAC,SAAS,CAAC,CAAA;QAEtB,yCAAyC;QACzC,OAAO,GAAG,EAAE;YACX,KAAK,EAAE,CAAA;QACR,CAAC,CAAA;IACF,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAA;AAC5B,CAAC"}
+{"version":3,"file":"EventPollingProvider.js","sourceRoot":"","sources":["../../src/providers/EventPollingProvider.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@roj-ai/debug",
-	"version": "0.1.12",
+	"version": "0.1.14",
 	"type": "module",
 	"main": "./dist/index.js",
 	"exports": {
@@ -30,13 +30,13 @@
 		"type-check": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@roj-ai/client": "^0.1.12",
-		"@roj-ai/shared": "^0.1.12",
+		"@roj-ai/client": "^0.1.14",
+		"@roj-ai/shared": "^0.1.14",
 		"tokenx": "1.3.0",
 		"zustand": "5.0.11"
 	},
 	"devDependencies": {
-		"@roj-ai/sdk": "^0.1.12",
+		"@roj-ai/sdk": "^0.1.14",
 		"@types/react": "19.2.14",
 		"@types/react-dom": "19.2.3",
 		"react": "19.2.4",

package/src/providers/EventPollingProvider.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from 'react'
 import { useEventStore } from '../stores/event-store.js'
 
+const IDLE_TIMEOUT_MS = 2 * 60 * 1000
+const ACTIVITY_EVENTS = ['mousedown', 'mousemove', 'keydown', 'touchstart', 'scroll', 'wheel'] as const
+
 interface EventPollingProviderProps {
 	sessionId: string
 	children: React.ReactNode
@@ -9,52 +12,89 @@ interface EventPollingProviderProps {
 /**
  * Provider component that manages event polling for a session.
  *
- * When mounted, it loads the session's events and starts polling for new events.
- * When unmounted (e.g., navigating away), it stops polling and resets the store.
- *
- * Usage:
- * ```tsx
- * <EventPollingProvider sessionId={sessionId}>
- *   <DebugViews />
- * </EventPollingProvider>
- * ```
+ * Polling is paused when the tab is hidden or the user has been idle for
+ * IDLE_TIMEOUT_MS. It resumes (and immediately catches up) on activity or
+ * tab refocus. Unmounting clears polling and resets the store.
  */
 export function EventPollingProvider({ sessionId, children }: EventPollingProviderProps) {
-	const loadSession = useEventStore((s) => s.loadSession)
-	const reset = useEventStore((s) => s.reset)
-
-	useEffect(() => {
-		loadSession(sessionId)
-
-		// Cleanup on unmount or sessionId change
-		return () => {
-			reset()
-		}
-	}, [sessionId, loadSession, reset])
-
+	useEventPolling(sessionId)
 	return <>{children}</>
 }
 
 /**
- * Hook to initialize event polling for a session.
- * Use this instead of EventPollingProvider if you want more control.
+ * Hook variant of EventPollingProvider for callers that need access to
+ * isLoading / error.
  */
 export function useEventPolling(sessionId: string | undefined) {
 	const loadSession = useEventStore((s) => s.loadSession)
 	const reset = useEventStore((s) => s.reset)
+	const startPolling = useEventStore((s) => s.startPolling)
+	const stopPolling = useEventStore((s) => s.stopPolling)
+	const fetchNewEvents = useEventStore((s) => s.fetchNewEvents)
 	const isLoading = useEventStore((s) => s.isLoading)
 	const error = useEventStore((s) => s.error)
 
 	useEffect(() => {
 		if (!sessionId) return
 
+		let idleTimer: ReturnType<typeof setTimeout> | null = null
+		let isIdle = false
+		let cancelled = false
+
+		const reconcile = () => {
+			if (cancelled) return
+			const state = useEventStore.getState()
+			if (state.sessionId !== sessionId || state.isLoading) return
+			const shouldPoll = document.visibilityState === 'visible' && !isIdle
+			if (shouldPoll && !state.isPolling) {
+				fetchNewEvents()
+				startPolling()
+			} else if (!shouldPoll && state.isPolling) {
+				stopPolling()
+			}
+		}
+
+		const onActivity = () => {
+			if (idleTimer) clearTimeout(idleTimer)
+			if (isIdle) {
+				isIdle = false
+				reconcile()
+			}
+			idleTimer = setTimeout(() => {
+				isIdle = true
+				reconcile()
+			}, IDLE_TIMEOUT_MS)
+		}
+
+		const onVisibility = () => reconcile()
+
+		for (const ev of ACTIVITY_EVENTS) {
+			window.addEventListener(ev, onActivity, { passive: true })
+		}
+		document.addEventListener('visibilitychange', onVisibility)
+
+		// Reconcile after the initial load finishes — loadSession auto-starts
+		// polling on success, so we need to immediately stop it if the tab is
+		// hidden / user is idle at that moment.
+		const unsubscribe = useEventStore.subscribe((state, prev) => {
+			if (state.sessionId !== sessionId) return
+			if (state.isLoading !== prev.isLoading) reconcile()
+		})
+
+		onActivity() // arm the idle timer
 		loadSession(sessionId)
 
-		// Cleanup on unmount or sessionId change
 		return () => {
+			cancelled = true
+			if (idleTimer) clearTimeout(idleTimer)
+			for (const ev of ACTIVITY_EVENTS) {
+				window.removeEventListener(ev, onActivity)
+			}
+			document.removeEventListener('visibilitychange', onVisibility)
+			unsubscribe()
 			reset()
 		}
-	}, [sessionId, loadSession, reset])
+	}, [sessionId, loadSession, reset, startPolling, stopPolling, fetchNewEvents])
 
 	return { isLoading, error }
 }