@akhilpulse/samadhaan-session-replay 0.1.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "React Native SDK for Samadhaan Guided Support — session recording, live remote screen-share, take-control, and guided-tour overlays.",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/SessionReplayProvider.tsx

@@ -35,7 +35,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { captureRef } from "react-native-view-shot";
 
 const STORAGE_KEY = "@akhilpulse/samadhaan-session-replay/sessionId";
-const SDK_VERSION = "0.1.0";
+const SDK_VERSION = "0.2.1";
 
 /** Default Samadhaan production endpoint. Override via `config.serverUrl` for staging. */
 export const DEFAULT_SERVER_URL = "https://samadhaan.pulseenergy.io";
@@ -124,6 +124,8 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
   }, [flushEvents]);
 
   // ---- Session init / resume ----
+  // initTick is bumped whenever we recycle (sessionId went to null at runtime) so this effect re-fires.
+  const [initTick, setInitTick] = useState(0);
   useEffect(() => {
     let cancelled = false;
     (async () => {
@@ -134,8 +136,17 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           const r = await fetch(`${serverUrl}/api/guided-support/sessions/${stored}/status`);
           if (r.ok) {
             const j = await r.json();
-            if (!cancelled) { setSessionId(stored); setStatus(j.status || "active"); setIngestToken(j.ingestToken); }
-            return;
+            // If the stored session was already ended (server-side idle timeout while app
+            // was backgrounded), drop it and fall through to create a fresh one.
+            if (j.status === "ended") {
+              try { await AsyncStorage.removeItem(STORAGE_KEY); } catch {}
+            } else {
+              if (!cancelled) { setSessionId(stored); setStatus(j.status || "active"); setIngestToken(j.ingestToken); }
+              return;
+            }
+          } else {
+            // 404 / not found — clear stale id and create fresh.
+            try { await AsyncStorage.removeItem(STORAGE_KEY); } catch {}
           }
         }
         const res = await fetch(`${serverUrl}/api/guided-support/sessions`, {
@@ -164,7 +175,7 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
       }
     })();
     return () => { cancelled = true; };
-  }, [config.appId, serverUrl, config.appVersion, config.user]);
+  }, [config.appId, serverUrl, config.appVersion, config.user, initTick]);
 
   // ---- Keyboard tracking (iOS auto-pause) ----
   useEffect(() => {
@@ -173,7 +184,7 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
     return () => { showSub.remove(); hideSub.remove(); };
   }, []);
 
-  // ---- Status polling via PUBLIC status endpoint (so we know when dashboard flips to live) ----
+  // ---- Status polling: detects live transitions AND auto-end so we can recycle the session ----
   useEffect(() => {
     if (!sessionId) return;
     const id = setInterval(async () => {
@@ -181,7 +192,16 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
         const r = await fetch(`${serverUrl}/api/guided-support/sessions/${sessionId}/status`);
         if (r.ok) {
           const j = await r.json();
-          setStatus(j.status);
+          if (j.status === "ended") {
+            // Server idle-ended this session. Drop it and immediately recycle (init effect re-fires via initTick).
+            try { await AsyncStorage.removeItem(STORAGE_KEY); } catch {}
+            setSessionId(null);
+            setIngestToken(null);
+            setStatus("idle");
+            setInitTick(t => t + 1);
+          } else {
+            setStatus(j.status);
+          }
         }
       } catch {}
     }, 5000);
@@ -200,7 +220,14 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
       try {
         const ref = rootRef.current;
         if (ref) {
-          const uri = await captureRef(ref as any, { format: "jpg", quality: liveMode ? 0.4 : 0.7, result: "base64" });
+          // Cap capture width to keep payloads small. Dashboard viewport is 960px;
+          // 540px wide JPEGs render fine and load 4-6× faster than full-resolution captures.
+          const uri = await captureRef(ref as any, {
+            format: "jpg",
+            quality: liveMode ? 0.3 : 0.45,
+            result: "base64",
+            width: liveMode ? 480 : 540,
+          });
           // upload via request-url then PUT
           const blob = base64ToUint8Array(uri);
           let path: string | null = null;
@@ -291,9 +318,21 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
       case "guided_tour_request":
         setTourState({ phase: "consent", agentName: msg.agentName });
         break;
-      case "guided_tour_pointer":
-        setPointer({ x: msg.x, y: msg.y, t: Date.now() });
+      case "guided_tour_pointer": {
+        // Prefer normalized coords (nx/ny in 0..1) and multiply by view size in points.
+        // Falls back to raw x/y for older dashboards.
+        const dim = viewSizeRef.current;
+        let px: number; let py: number;
+        if (typeof msg.nx === "number" && typeof msg.ny === "number" && dim.w > 0 && dim.h > 0) {
+          px = msg.nx * dim.w;
+          py = msg.ny * dim.h;
+        } else {
+          px = msg.x ?? 0;
+          py = msg.y ?? 0;
+        }
+        setPointer({ x: px, y: py, t: Date.now() });
         break;
+      }
       case "guided_tour_end":
         setTourState({ phase: "idle" });
         setPointer(null);
@@ -312,6 +351,8 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
   // ---- Guided tour state ----
   const [tourState, setTourState] = useState<{ phase: "idle" | "consent" | "active"; agentName?: string }>({ phase: "idle" });
   const [pointer, setPointer] = useState<{ x: number; y: number; t: number } | null>(null);
+  // Captured root-View size (in points) so we can place the agent pointer correctly.
+  const viewSizeRef = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
 
   function consentTour(accept: boolean) {
     if (accept) {
@@ -352,6 +393,10 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
         ref={rootRef}
         collapsable={false}
         style={{ flex: 1 }}
+        onLayout={(e) => {
+          const { width, height } = e.nativeEvent.layout;
+          viewSizeRef.current = { w: width, h: height };
+        }}
         {...panResponder.panHandlers}
         onTouchEndCapture={onTouchEndCapture}
       >
@@ -389,7 +434,10 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
               <Text onPress={endTourLocal} style={styles.endTourText}>End Tour</Text>
             </View>
             {pointer && (
-              <View pointerEvents="none" style={[styles.pointer, { left: pointer.x - 8, top: pointer.y - 8 }]} />
+              <>
+                <View pointerEvents="none" style={[styles.pointerHalo, { left: pointer.x - 24, top: pointer.y - 24 }]} />
+                <View pointerEvents="none" style={[styles.pointer, { left: pointer.x - 12, top: pointer.y - 12 }]} />
+              </>
             )}
           </>
         )}
@@ -441,8 +489,13 @@ const styles = StyleSheet.create({
     borderRadius: 999, fontSize: 13, fontWeight: "600", overflow: "hidden",
   },
   pointer: {
-    position: "absolute", width: 16, height: 16, borderRadius: 8,
-    backgroundColor: "rgba(239,68,68,0.95)", borderWidth: 2, borderColor: "#fff",
-    shadowColor: "#ef4444", shadowOpacity: 0.7, shadowRadius: 6, zIndex: 9999,
+    position: "absolute", width: 24, height: 24, borderRadius: 12,
+    backgroundColor: "rgba(239,68,68,1)", borderWidth: 3, borderColor: "#fff",
+    shadowColor: "#ef4444", shadowOpacity: 0.9, shadowRadius: 8,
+    elevation: 12, zIndex: 10000,
+  },
+  pointerHalo: {
+    position: "absolute", width: 48, height: 48, borderRadius: 24,
+    backgroundColor: "rgba(239,68,68,0.25)", zIndex: 9999,
   },
 });