@akhilpulse/samadhaan-session-replay 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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.0";
 
 /** Default Samadhaan production endpoint. Override via `config.serverUrl` for staging. */
 export const DEFAULT_SERVER_URL = "https://samadhaan.pulseenergy.io";
@@ -173,7 +173,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 +181,15 @@ 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 create a fresh one on next mount cycle.
+            try { await AsyncStorage.removeItem(STORAGE_KEY); } catch {}
+            setSessionId(null);
+            setIngestToken(null);
+            setStatus("idle");
+          } else {
+            setStatus(j.status);
+          }
         }
       } catch {}
     }, 5000);
@@ -291,9 +299,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 +332,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 +374,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 +415,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 +470,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,
   },
 });