@modelnex/sdk 0.5.33 → 0.5.34

package/dist/index.js

@@ -2879,7 +2879,8 @@ function sanitizePersistedRecordingSession(raw) {
     captureEvents: raw.captureEvents,
     capturedTranscript: typeof raw.capturedTranscript === "string" ? raw.capturedTranscript : "",
     pendingClicks: raw.pendingClicks,
-    selectedStepType: raw.selectedStepType
+    selectedStepType: raw.selectedStepType,
+    voiceCaptureEnabled: raw.voiceCaptureEnabled === true
   };
 }
 function readPersistedRecordingSession() {
@@ -6871,6 +6872,10 @@ function useRecordingMode({
   const stepsRef = (0, import_react16.useRef)([]);
   stepsRef.current = steps;
   const captureEventsRef = (0, import_react16.useRef)([]);
+  const capturedTranscriptRef = (0, import_react16.useRef)(capturedTranscript);
+  capturedTranscriptRef.current = capturedTranscript;
+  const phaseRef = (0, import_react16.useRef)(phase);
+  phaseRef.current = phase;
   const safeSpeak = (0, import_react16.useCallback)((text) => {
     void voice.speak(text).catch((err) => {
       console.warn("[Recording] Voice playback unavailable:", err);
@@ -6878,7 +6883,7 @@ function useRecordingMode({
   }, [voice]);
   captureEventsRef.current = captureEvents;
   const pendingClicksRef = (0, import_react16.useRef)(restoredSession?.pendingClicks ?? []);
-  const shouldKeepVoiceCaptureRef = (0, import_react16.useRef)(false);
+  const shouldKeepVoiceCaptureRef = (0, import_react16.useRef)(restoredSession?.voiceCaptureEnabled === true);
   const resumeVoiceAfterNarrationRef = (0, import_react16.useRef)(false);
   const lastAutoNoteRef = (0, import_react16.useRef)("");
   const lastHoverKeyRef = (0, import_react16.useRef)("");
@@ -6888,19 +6893,43 @@ function useRecordingMode({
   const isRecording = phase !== "idle";
   const stepCount = steps.length;
   const captureEventCount = captureEvents.length;
-  const appendCaptureEvent = (0, import_react16.useCallback)((event) => {
-    setCaptureEvents((prev) => {
-      const nextEvent = {
-        id: event.id || newCaptureId(event.type),
-        order: prev.length,
-        timestamp: event.timestamp || (/* @__PURE__ */ new Date()).toISOString(),
-        ...event
-      };
-      return [...prev, nextEvent];
+  const persistSnapshot = (0, import_react16.useCallback)((overrides) => {
+    const nextPhase = overrides?.phase ?? phaseRef.current;
+    const nextSteps = overrides?.steps ?? stepsRef.current;
+    const nextCaptureEvents = overrides?.captureEvents ?? captureEventsRef.current;
+    const nextTranscript = overrides?.capturedTranscript ?? capturedTranscriptRef.current;
+    const nextSelectedStepType = overrides?.selectedStepType ?? selectedStepTypeRef.current;
+    const nextVoiceCaptureEnabled = overrides?.voiceCaptureEnabled ?? shouldKeepVoiceCaptureRef.current;
+    if (nextPhase === "idle" && nextSteps.length === 0 && nextCaptureEvents.length === 0 && !nextTranscript.trim()) {
+      clearPersistedRecordingSession();
+      return;
+    }
+    persistRecordingSession({
+      version: 1,
+      experienceType,
+      phase: nextPhase,
+      steps: nextSteps,
+      captureEvents: nextCaptureEvents,
+      capturedTranscript: nextTranscript,
+      pendingClicks: pendingClicksRef.current,
+      selectedStepType: nextSelectedStepType,
+      voiceCaptureEnabled: nextVoiceCaptureEnabled
     });
-  }, []);
+  }, [experienceType]);
+  const appendCaptureEvent = (0, import_react16.useCallback)((event) => {
+    const nextEvent = {
+      id: event.id || newCaptureId(event.type),
+      order: captureEventsRef.current.length,
+      timestamp: event.timestamp || (/* @__PURE__ */ new Date()).toISOString(),
+      ...event
+    };
+    const nextCaptureEvents = [...captureEventsRef.current, nextEvent];
+    captureEventsRef.current = nextCaptureEvents;
+    setCaptureEvents(nextCaptureEvents);
+    persistSnapshot({ captureEvents: nextCaptureEvents });
+  }, [persistSnapshot]);
   const updateCaptureEvent = (0, import_react16.useCallback)((id, metadataPatch) => {
-    setCaptureEvents((prev) => prev.map((event) => {
+    const nextCaptureEvents = captureEventsRef.current.map((event) => {
       if (event.id === id) {
         return {
           ...event,
@@ -6911,14 +6940,19 @@ function useRecordingMode({
         };
       }
       return event;
-    }));
-  }, []);
+    });
+    captureEventsRef.current = nextCaptureEvents;
+    setCaptureEvents(nextCaptureEvents);
+    persistSnapshot({ captureEvents: nextCaptureEvents });
+  }, [persistSnapshot]);
   const appendVoiceNote = (0, import_react16.useCallback)((transcript) => {
     const text = transcript.trim();
     if (!text) return;
     if (lastAutoNoteRef.current === text) return;
     lastAutoNoteRef.current = text;
-    setCapturedTranscript((prev) => prev ? `${prev} ${text}` : text);
+    const nextTranscript = capturedTranscriptRef.current ? `${capturedTranscriptRef.current} ${text}` : text;
+    capturedTranscriptRef.current = nextTranscript;
+    setCapturedTranscript(nextTranscript);
     const recordedClicks = [...pendingClicksRef.current];
     const lastClick = recordedClicks[recordedClicks.length - 1];
     const newStep = {
@@ -6952,7 +6986,10 @@ function useRecordingMode({
         note: "voice_capture"
       }
     };
-    setSteps((prev) => [...prev, newStep]);
+    const nextSteps = [...stepsRef.current, newStep];
+    stepsRef.current = nextSteps;
+    setSteps(nextSteps);
+    persistSnapshot({ steps: nextSteps, capturedTranscript: nextTranscript });
     appendCaptureEvent({
       type: "note",
       url: getCurrentTourUrl(),
@@ -6968,7 +7005,7 @@ function useRecordingMode({
         stepOrder: newStep.order
       }
     });
-  }, [appendCaptureEvent]);
+  }, [appendCaptureEvent, persistSnapshot]);
   const stopBackgroundVoiceCapture = (0, import_react16.useCallback)(() => {
     voice.stopListening();
     setIsVoiceCaptureActive(false);
@@ -6991,24 +7028,37 @@ function useRecordingMode({
     setIsVoiceCaptureActive(true);
   }, [appendVoiceNote, isRecording, phase, voice]);
   const startRecording = (0, import_react16.useCallback)(() => {
-    setPhase("active");
-    setSteps([]);
-    pendingClicksRef.current = [];
-    setCaptureEvents([{
+    const nextPhase = "active";
+    const nextCaptureEvents = [{
       id: newCaptureId("session_start"),
       order: 0,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       type: "session_start",
       url: getCurrentTourUrl(),
       metadata: { mode: "capture_v1" }
-    }]);
+    }];
+    phaseRef.current = nextPhase;
+    setPhase(nextPhase);
+    stepsRef.current = [];
+    setSteps([]);
+    pendingClicksRef.current = [];
+    captureEventsRef.current = nextCaptureEvents;
+    setCaptureEvents(nextCaptureEvents);
+    capturedTranscriptRef.current = "";
     setCapturedTranscript("");
     setIsVoiceCaptureActive(false);
     shouldKeepVoiceCaptureRef.current = false;
     lastAutoNoteRef.current = "";
     lastHoverKeyRef.current = "";
     lastHoverAtRef.current = 0;
-  }, []);
+    persistSnapshot({
+      phase: nextPhase,
+      steps: [],
+      captureEvents: nextCaptureEvents,
+      capturedTranscript: "",
+      voiceCaptureEnabled: false
+    });
+  }, [persistSnapshot]);
   const markStep = (0, import_react16.useCallback)(() => {
     if (phase !== "active") return;
     setPhase("selecting");
@@ -7138,7 +7188,9 @@ function useRecordingMode({
         note: raw
       }
     };
-    setSteps((prev) => [...prev, newStep]);
+    const nextSteps = [...stepsRef.current, newStep];
+    stepsRef.current = nextSteps;
+    setSteps(nextSteps);
     appendCaptureEvent({
       type: "note",
       url: getCurrentTourUrl(),
@@ -7157,14 +7209,16 @@ function useRecordingMode({
     setSelectedElement(null);
     setPendingNarration("");
     setPolishedNarration("");
+    phaseRef.current = "active";
     setPhase("active");
+    persistSnapshot({ steps: nextSteps, phase: "active" });
     safeSpeak(`Note ${newStep.order + 1} saved. Keep performing the workflow or add another note.`);
     if (resumeVoiceAfterNarrationRef.current || shouldKeepVoiceCaptureRef.current) {
       window.setTimeout(() => {
         if (shouldKeepVoiceCaptureRef.current) startBackgroundVoiceCapture();
       }, 0);
     }
-  }, [appendCaptureEvent, phase, polishedNarration, pendingNarration, selectedElement, selectedStepType, startBackgroundVoiceCapture, voice]);
+  }, [appendCaptureEvent, phase, polishedNarration, pendingNarration, persistSnapshot, selectedElement, selectedStepType, startBackgroundVoiceCapture, voice]);
   const redoNarration = (0, import_react16.useCallback)(() => {
     if (phase !== "reviewing") return;
     setPendingNarration("");
@@ -7176,23 +7230,27 @@ function useRecordingMode({
     setPolishedNarration(text);
   }, []);
   const continueRecording = (0, import_react16.useCallback)(() => {
+    phaseRef.current = "active";
     setPhase("active");
+    persistSnapshot({ phase: "active" });
     if (shouldKeepVoiceCaptureRef.current) {
       window.setTimeout(() => {
         if (shouldKeepVoiceCaptureRef.current) startBackgroundVoiceCapture();
       }, 0);
     }
-  }, [startBackgroundVoiceCapture]);
+  }, [persistSnapshot, startBackgroundVoiceCapture]);
   const undoLastStep = (0, import_react16.useCallback)(() => {
-    setSteps((prev) => {
-      const next = prev.slice(0, -1);
-      safeSpeak(
-        next.length > 0 ? `Step ${prev.length} removed. ${next.length} step${next.length !== 1 ? "s" : ""} remaining.` : "Step removed. No steps recorded yet."
-      );
-      return next;
-    });
+    const previous = stepsRef.current;
+    const nextSteps = previous.slice(0, -1);
+    stepsRef.current = nextSteps;
+    setSteps(nextSteps);
+    safeSpeak(
+      nextSteps.length > 0 ? `Step ${previous.length} removed. ${nextSteps.length} step${nextSteps.length !== 1 ? "s" : ""} remaining.` : "Step removed. No steps recorded yet."
+    );
+    phaseRef.current = "active";
     setPhase("active");
-  }, [voice]);
+    persistSnapshot({ steps: nextSteps, phase: "active" });
+  }, [persistSnapshot, voice]);
   const previewSteps = (0, import_react16.useCallback)(() => {
     if (steps.length === 0) {
       safeSpeak("No steps recorded yet.");
@@ -7205,18 +7263,24 @@ function useRecordingMode({
     shouldKeepVoiceCaptureRef.current = false;
     resumeVoiceAfterNarrationRef.current = false;
     stopBackgroundVoiceCapture();
-  }, [stopBackgroundVoiceCapture]);
+    persistSnapshot({ voiceCaptureEnabled: false });
+  }, [persistSnapshot, stopBackgroundVoiceCapture]);
   const cancelRecording = (0, import_react16.useCallback)(() => {
     shouldKeepVoiceCaptureRef.current = false;
     stopBackgroundVoiceCapture();
+    phaseRef.current = "idle";
     setPhase("idle");
+    stepsRef.current = [];
     setSteps([]);
+    captureEventsRef.current = [];
     setCaptureEvents([]);
+    capturedTranscriptRef.current = "";
     setCapturedTranscript("");
     pendingClicksRef.current = [];
     setSelectedElement(null);
     setPendingNarration("");
     setPolishedNarration("");
+    clearPersistedRecordingSession();
     safeSpeak("Recording cancelled.");
   }, [safeSpeak, stopBackgroundVoiceCapture]);
   (0, import_react16.useEffect)(() => {
@@ -7260,22 +7324,20 @@ function useRecordingMode({
       }
       const eventId = newCaptureId("click");
       const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+      appendCaptureEvent({
+        id: eventId,
+        timestamp,
+        type: "click",
+        url: click.url,
+        label: click.label,
+        tagName: click.tagName,
+        testId: click.testId,
+        fingerprint: click.fingerprint,
+        textContaining: click.textContaining,
+        metadata: buildCaptureEventMetadata(interactiveTarget, "click")
+      });
       void captureScreenshot().then((beforeScreenshot) => {
-        appendCaptureEvent({
-          id: eventId,
-          timestamp,
-          type: "click",
-          url: click.url,
-          label: click.label,
-          tagName: click.tagName,
-          testId: click.testId,
-          fingerprint: click.fingerprint,
-          textContaining: click.textContaining,
-          metadata: {
-            ...buildCaptureEventMetadata(interactiveTarget, "click"),
-            beforeScreenshot
-          }
-        });
+        updateCaptureEvent(eventId, { beforeScreenshot });
         window.setTimeout(async () => {
           try {
             const afterScreenshot = await captureScreenshot();
@@ -7286,18 +7348,6 @@ function useRecordingMode({
         }, 1200);
       }).catch((err) => {
         console.warn("[Recording] Failed to capture before-click screenshot:", err);
-        appendCaptureEvent({
-          id: eventId,
-          timestamp,
-          type: "click",
-          url: click.url,
-          label: click.label,
-          tagName: click.tagName,
-          testId: click.testId,
-          fingerprint: click.fingerprint,
-          textContaining: click.textContaining,
-          metadata: buildCaptureEventMetadata(interactiveTarget, "click")
-        });
       });
     };
     const handleInputEvent = (event) => {
@@ -7343,10 +7393,24 @@ function useRecordingMode({
       window.clearInterval(routePoll);
     };
   }, [appendCaptureEvent, isRecording]);
+  (0, import_react16.useEffect)(() => {
+    if (!isRecording || typeof window === "undefined") return;
+    const flushRecordingSession = () => {
+      persistSnapshot();
+    };
+    window.addEventListener("pagehide", flushRecordingSession);
+    window.addEventListener("beforeunload", flushRecordingSession);
+    return () => {
+      window.removeEventListener("pagehide", flushRecordingSession);
+      window.removeEventListener("beforeunload", flushRecordingSession);
+    };
+  }, [isRecording, persistSnapshot]);
   const stopRecording = (0, import_react16.useCallback)(async (tourName, targetUserTypes) => {
+    phaseRef.current = "finishing";
     setPhase("finishing");
     shouldKeepVoiceCaptureRef.current = false;
     stopBackgroundVoiceCapture();
+    persistSnapshot({ phase: "finishing", voiceCaptureEnabled: false });
     if (steps.length === 0 && captureEventsRef.current.length <= 1) {
       safeSpeak("No workflow captured yet.");
       setPhase("idle");
@@ -7392,11 +7456,16 @@ function useRecordingMode({
         throw new Error(errorMessage);
       }
       const data = await res.json();
+      stepsRef.current = [];
       setSteps([]);
+      captureEventsRef.current = [];
       setCaptureEvents([]);
+      capturedTranscriptRef.current = "";
       setCapturedTranscript("");
       pendingClicksRef.current = [];
+      phaseRef.current = "idle";
       setPhase("idle");
+      clearPersistedRecordingSession();
       const savedStepCount = Array.isArray(data?.tour?.steps) ? data.tour.steps.length : 0;
       const itemLabel = experienceType === "onboarding" ? "workflow" : "tour";
       safeSpeak(`${itemLabel === "tour" ? "Tour" : "Workflow"} "${tourName}" saved as a draft with ${savedStepCount} generated steps. Review and preview it before publishing.`);
@@ -7404,19 +7473,23 @@ function useRecordingMode({
     } catch (err) {
       console.error("[Recording] Failed to save tour:", err);
       safeSpeak(`Failed to save the ${experienceType === "onboarding" ? "workflow" : "tour"}. Please try again.`);
+      phaseRef.current = "active";
       setPhase("active");
+      persistSnapshot({ phase: "active" });
       return null;
     }
-  }, [capturedTranscript, experienceType, safeSpeak, serverUrl, stopBackgroundVoiceCapture, steps, toursApiBase, websiteId]);
+  }, [capturedTranscript, experienceType, persistSnapshot, safeSpeak, serverUrl, stopBackgroundVoiceCapture, steps, toursApiBase, websiteId]);
   const toggleVoiceCapture = (0, import_react16.useCallback)(() => {
     if (isVoiceCaptureActive || shouldKeepVoiceCaptureRef.current) {
       shouldKeepVoiceCaptureRef.current = false;
       stopBackgroundVoiceCapture();
+      persistSnapshot({ voiceCaptureEnabled: false });
       return;
     }
     shouldKeepVoiceCaptureRef.current = true;
+    persistSnapshot({ voiceCaptureEnabled: true });
     startBackgroundVoiceCapture();
-  }, [isVoiceCaptureActive, startBackgroundVoiceCapture, stopBackgroundVoiceCapture]);
+  }, [isVoiceCaptureActive, persistSnapshot, startBackgroundVoiceCapture, stopBackgroundVoiceCapture]);
   (0, import_react16.useEffect)(() => {
     if (!isRecording) return;
     if (phase === "active" && shouldKeepVoiceCaptureRef.current && !isVoiceCaptureActive) {
@@ -7452,22 +7525,6 @@ function useRecordingMode({
       }
     }
   }, [isRecording, phase, markStep, undoLastStep, previewSteps, approveNarration, redoNarration]);
-  (0, import_react16.useEffect)(() => {
-    if (!isRecording && steps.length === 0 && captureEvents.length === 0 && !capturedTranscript.trim()) {
-      clearPersistedRecordingSession();
-      return;
-    }
-    persistRecordingSession({
-      version: 1,
-      experienceType,
-      phase,
-      steps,
-      captureEvents,
-      capturedTranscript,
-      pendingClicks: pendingClicksRef.current,
-      selectedStepType
-    });
-  }, [captureEvents, capturedTranscript, experienceType, isRecording, phase, selectedStepType, steps]);
   return {
     phase,
     steps,

package/dist/index.mjs

@@ -2670,7 +2670,8 @@ function sanitizePersistedRecordingSession(raw) {
     captureEvents: raw.captureEvents,
     capturedTranscript: typeof raw.capturedTranscript === "string" ? raw.capturedTranscript : "",
     pendingClicks: raw.pendingClicks,
-    selectedStepType: raw.selectedStepType
+    selectedStepType: raw.selectedStepType,
+    voiceCaptureEnabled: raw.voiceCaptureEnabled === true
   };
 }
 function readPersistedRecordingSession() {
@@ -6661,6 +6662,10 @@ function useRecordingMode({
   const stepsRef = useRef12([]);
   stepsRef.current = steps;
   const captureEventsRef = useRef12([]);
+  const capturedTranscriptRef = useRef12(capturedTranscript);
+  capturedTranscriptRef.current = capturedTranscript;
+  const phaseRef = useRef12(phase);
+  phaseRef.current = phase;
   const safeSpeak = useCallback10((text) => {
     void voice.speak(text).catch((err) => {
       console.warn("[Recording] Voice playback unavailable:", err);
@@ -6668,7 +6673,7 @@ function useRecordingMode({
   }, [voice]);
   captureEventsRef.current = captureEvents;
   const pendingClicksRef = useRef12(restoredSession?.pendingClicks ?? []);
-  const shouldKeepVoiceCaptureRef = useRef12(false);
+  const shouldKeepVoiceCaptureRef = useRef12(restoredSession?.voiceCaptureEnabled === true);
   const resumeVoiceAfterNarrationRef = useRef12(false);
   const lastAutoNoteRef = useRef12("");
   const lastHoverKeyRef = useRef12("");
@@ -6678,19 +6683,43 @@ function useRecordingMode({
   const isRecording = phase !== "idle";
   const stepCount = steps.length;
   const captureEventCount = captureEvents.length;
-  const appendCaptureEvent = useCallback10((event) => {
-    setCaptureEvents((prev) => {
-      const nextEvent = {
-        id: event.id || newCaptureId(event.type),
-        order: prev.length,
-        timestamp: event.timestamp || (/* @__PURE__ */ new Date()).toISOString(),
-        ...event
-      };
-      return [...prev, nextEvent];
+  const persistSnapshot = useCallback10((overrides) => {
+    const nextPhase = overrides?.phase ?? phaseRef.current;
+    const nextSteps = overrides?.steps ?? stepsRef.current;
+    const nextCaptureEvents = overrides?.captureEvents ?? captureEventsRef.current;
+    const nextTranscript = overrides?.capturedTranscript ?? capturedTranscriptRef.current;
+    const nextSelectedStepType = overrides?.selectedStepType ?? selectedStepTypeRef.current;
+    const nextVoiceCaptureEnabled = overrides?.voiceCaptureEnabled ?? shouldKeepVoiceCaptureRef.current;
+    if (nextPhase === "idle" && nextSteps.length === 0 && nextCaptureEvents.length === 0 && !nextTranscript.trim()) {
+      clearPersistedRecordingSession();
+      return;
+    }
+    persistRecordingSession({
+      version: 1,
+      experienceType,
+      phase: nextPhase,
+      steps: nextSteps,
+      captureEvents: nextCaptureEvents,
+      capturedTranscript: nextTranscript,
+      pendingClicks: pendingClicksRef.current,
+      selectedStepType: nextSelectedStepType,
+      voiceCaptureEnabled: nextVoiceCaptureEnabled
     });
-  }, []);
+  }, [experienceType]);
+  const appendCaptureEvent = useCallback10((event) => {
+    const nextEvent = {
+      id: event.id || newCaptureId(event.type),
+      order: captureEventsRef.current.length,
+      timestamp: event.timestamp || (/* @__PURE__ */ new Date()).toISOString(),
+      ...event
+    };
+    const nextCaptureEvents = [...captureEventsRef.current, nextEvent];
+    captureEventsRef.current = nextCaptureEvents;
+    setCaptureEvents(nextCaptureEvents);
+    persistSnapshot({ captureEvents: nextCaptureEvents });
+  }, [persistSnapshot]);
   const updateCaptureEvent = useCallback10((id, metadataPatch) => {
-    setCaptureEvents((prev) => prev.map((event) => {
+    const nextCaptureEvents = captureEventsRef.current.map((event) => {
       if (event.id === id) {
         return {
           ...event,
@@ -6701,14 +6730,19 @@ function useRecordingMode({
         };
       }
       return event;
-    }));
-  }, []);
+    });
+    captureEventsRef.current = nextCaptureEvents;
+    setCaptureEvents(nextCaptureEvents);
+    persistSnapshot({ captureEvents: nextCaptureEvents });
+  }, [persistSnapshot]);
   const appendVoiceNote = useCallback10((transcript) => {
     const text = transcript.trim();
     if (!text) return;
     if (lastAutoNoteRef.current === text) return;
     lastAutoNoteRef.current = text;
-    setCapturedTranscript((prev) => prev ? `${prev} ${text}` : text);
+    const nextTranscript = capturedTranscriptRef.current ? `${capturedTranscriptRef.current} ${text}` : text;
+    capturedTranscriptRef.current = nextTranscript;
+    setCapturedTranscript(nextTranscript);
     const recordedClicks = [...pendingClicksRef.current];
     const lastClick = recordedClicks[recordedClicks.length - 1];
     const newStep = {
@@ -6742,7 +6776,10 @@ function useRecordingMode({
         note: "voice_capture"
       }
     };
-    setSteps((prev) => [...prev, newStep]);
+    const nextSteps = [...stepsRef.current, newStep];
+    stepsRef.current = nextSteps;
+    setSteps(nextSteps);
+    persistSnapshot({ steps: nextSteps, capturedTranscript: nextTranscript });
     appendCaptureEvent({
       type: "note",
       url: getCurrentTourUrl(),
@@ -6758,7 +6795,7 @@ function useRecordingMode({
         stepOrder: newStep.order
       }
     });
-  }, [appendCaptureEvent]);
+  }, [appendCaptureEvent, persistSnapshot]);
   const stopBackgroundVoiceCapture = useCallback10(() => {
     voice.stopListening();
     setIsVoiceCaptureActive(false);
@@ -6781,24 +6818,37 @@ function useRecordingMode({
     setIsVoiceCaptureActive(true);
   }, [appendVoiceNote, isRecording, phase, voice]);
   const startRecording = useCallback10(() => {
-    setPhase("active");
-    setSteps([]);
-    pendingClicksRef.current = [];
-    setCaptureEvents([{
+    const nextPhase = "active";
+    const nextCaptureEvents = [{
       id: newCaptureId("session_start"),
       order: 0,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       type: "session_start",
       url: getCurrentTourUrl(),
       metadata: { mode: "capture_v1" }
-    }]);
+    }];
+    phaseRef.current = nextPhase;
+    setPhase(nextPhase);
+    stepsRef.current = [];
+    setSteps([]);
+    pendingClicksRef.current = [];
+    captureEventsRef.current = nextCaptureEvents;
+    setCaptureEvents(nextCaptureEvents);
+    capturedTranscriptRef.current = "";
     setCapturedTranscript("");
     setIsVoiceCaptureActive(false);
     shouldKeepVoiceCaptureRef.current = false;
     lastAutoNoteRef.current = "";
     lastHoverKeyRef.current = "";
     lastHoverAtRef.current = 0;
-  }, []);
+    persistSnapshot({
+      phase: nextPhase,
+      steps: [],
+      captureEvents: nextCaptureEvents,
+      capturedTranscript: "",
+      voiceCaptureEnabled: false
+    });
+  }, [persistSnapshot]);
   const markStep = useCallback10(() => {
     if (phase !== "active") return;
     setPhase("selecting");
@@ -6928,7 +6978,9 @@ function useRecordingMode({
         note: raw
       }
     };
-    setSteps((prev) => [...prev, newStep]);
+    const nextSteps = [...stepsRef.current, newStep];
+    stepsRef.current = nextSteps;
+    setSteps(nextSteps);
     appendCaptureEvent({
       type: "note",
       url: getCurrentTourUrl(),
@@ -6947,14 +6999,16 @@ function useRecordingMode({
     setSelectedElement(null);
     setPendingNarration("");
     setPolishedNarration("");
+    phaseRef.current = "active";
     setPhase("active");
+    persistSnapshot({ steps: nextSteps, phase: "active" });
     safeSpeak(`Note ${newStep.order + 1} saved. Keep performing the workflow or add another note.`);
     if (resumeVoiceAfterNarrationRef.current || shouldKeepVoiceCaptureRef.current) {
       window.setTimeout(() => {
         if (shouldKeepVoiceCaptureRef.current) startBackgroundVoiceCapture();
       }, 0);
     }
-  }, [appendCaptureEvent, phase, polishedNarration, pendingNarration, selectedElement, selectedStepType, startBackgroundVoiceCapture, voice]);
+  }, [appendCaptureEvent, phase, polishedNarration, pendingNarration, persistSnapshot, selectedElement, selectedStepType, startBackgroundVoiceCapture, voice]);
   const redoNarration = useCallback10(() => {
     if (phase !== "reviewing") return;
     setPendingNarration("");
@@ -6966,23 +7020,27 @@ function useRecordingMode({
     setPolishedNarration(text);
   }, []);
   const continueRecording = useCallback10(() => {
+    phaseRef.current = "active";
     setPhase("active");
+    persistSnapshot({ phase: "active" });
     if (shouldKeepVoiceCaptureRef.current) {
       window.setTimeout(() => {
         if (shouldKeepVoiceCaptureRef.current) startBackgroundVoiceCapture();
       }, 0);
     }
-  }, [startBackgroundVoiceCapture]);
+  }, [persistSnapshot, startBackgroundVoiceCapture]);
   const undoLastStep = useCallback10(() => {
-    setSteps((prev) => {
-      const next = prev.slice(0, -1);
-      safeSpeak(
-        next.length > 0 ? `Step ${prev.length} removed. ${next.length} step${next.length !== 1 ? "s" : ""} remaining.` : "Step removed. No steps recorded yet."
-      );
-      return next;
-    });
+    const previous = stepsRef.current;
+    const nextSteps = previous.slice(0, -1);
+    stepsRef.current = nextSteps;
+    setSteps(nextSteps);
+    safeSpeak(
+      nextSteps.length > 0 ? `Step ${previous.length} removed. ${nextSteps.length} step${nextSteps.length !== 1 ? "s" : ""} remaining.` : "Step removed. No steps recorded yet."
+    );
+    phaseRef.current = "active";
     setPhase("active");
-  }, [voice]);
+    persistSnapshot({ steps: nextSteps, phase: "active" });
+  }, [persistSnapshot, voice]);
   const previewSteps = useCallback10(() => {
     if (steps.length === 0) {
       safeSpeak("No steps recorded yet.");
@@ -6995,18 +7053,24 @@ function useRecordingMode({
     shouldKeepVoiceCaptureRef.current = false;
     resumeVoiceAfterNarrationRef.current = false;
     stopBackgroundVoiceCapture();
-  }, [stopBackgroundVoiceCapture]);
+    persistSnapshot({ voiceCaptureEnabled: false });
+  }, [persistSnapshot, stopBackgroundVoiceCapture]);
   const cancelRecording = useCallback10(() => {
     shouldKeepVoiceCaptureRef.current = false;
     stopBackgroundVoiceCapture();
+    phaseRef.current = "idle";
     setPhase("idle");
+    stepsRef.current = [];
     setSteps([]);
+    captureEventsRef.current = [];
     setCaptureEvents([]);
+    capturedTranscriptRef.current = "";
     setCapturedTranscript("");
     pendingClicksRef.current = [];
     setSelectedElement(null);
     setPendingNarration("");
     setPolishedNarration("");
+    clearPersistedRecordingSession();
     safeSpeak("Recording cancelled.");
   }, [safeSpeak, stopBackgroundVoiceCapture]);
   useEffect15(() => {
@@ -7050,22 +7114,20 @@ function useRecordingMode({
       }
       const eventId = newCaptureId("click");
       const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+      appendCaptureEvent({
+        id: eventId,
+        timestamp,
+        type: "click",
+        url: click.url,
+        label: click.label,
+        tagName: click.tagName,
+        testId: click.testId,
+        fingerprint: click.fingerprint,
+        textContaining: click.textContaining,
+        metadata: buildCaptureEventMetadata(interactiveTarget, "click")
+      });
       void captureScreenshot().then((beforeScreenshot) => {
-        appendCaptureEvent({
-          id: eventId,
-          timestamp,
-          type: "click",
-          url: click.url,
-          label: click.label,
-          tagName: click.tagName,
-          testId: click.testId,
-          fingerprint: click.fingerprint,
-          textContaining: click.textContaining,
-          metadata: {
-            ...buildCaptureEventMetadata(interactiveTarget, "click"),
-            beforeScreenshot
-          }
-        });
+        updateCaptureEvent(eventId, { beforeScreenshot });
         window.setTimeout(async () => {
           try {
             const afterScreenshot = await captureScreenshot();
@@ -7076,18 +7138,6 @@ function useRecordingMode({
         }, 1200);
       }).catch((err) => {
         console.warn("[Recording] Failed to capture before-click screenshot:", err);
-        appendCaptureEvent({
-          id: eventId,
-          timestamp,
-          type: "click",
-          url: click.url,
-          label: click.label,
-          tagName: click.tagName,
-          testId: click.testId,
-          fingerprint: click.fingerprint,
-          textContaining: click.textContaining,
-          metadata: buildCaptureEventMetadata(interactiveTarget, "click")
-        });
       });
     };
     const handleInputEvent = (event) => {
@@ -7133,10 +7183,24 @@ function useRecordingMode({
       window.clearInterval(routePoll);
     };
   }, [appendCaptureEvent, isRecording]);
+  useEffect15(() => {
+    if (!isRecording || typeof window === "undefined") return;
+    const flushRecordingSession = () => {
+      persistSnapshot();
+    };
+    window.addEventListener("pagehide", flushRecordingSession);
+    window.addEventListener("beforeunload", flushRecordingSession);
+    return () => {
+      window.removeEventListener("pagehide", flushRecordingSession);
+      window.removeEventListener("beforeunload", flushRecordingSession);
+    };
+  }, [isRecording, persistSnapshot]);
   const stopRecording = useCallback10(async (tourName, targetUserTypes) => {
+    phaseRef.current = "finishing";
     setPhase("finishing");
     shouldKeepVoiceCaptureRef.current = false;
     stopBackgroundVoiceCapture();
+    persistSnapshot({ phase: "finishing", voiceCaptureEnabled: false });
     if (steps.length === 0 && captureEventsRef.current.length <= 1) {
       safeSpeak("No workflow captured yet.");
       setPhase("idle");
@@ -7182,11 +7246,16 @@ function useRecordingMode({
         throw new Error(errorMessage);
       }
       const data = await res.json();
+      stepsRef.current = [];
       setSteps([]);
+      captureEventsRef.current = [];
       setCaptureEvents([]);
+      capturedTranscriptRef.current = "";
       setCapturedTranscript("");
       pendingClicksRef.current = [];
+      phaseRef.current = "idle";
       setPhase("idle");
+      clearPersistedRecordingSession();
       const savedStepCount = Array.isArray(data?.tour?.steps) ? data.tour.steps.length : 0;
       const itemLabel = experienceType === "onboarding" ? "workflow" : "tour";
       safeSpeak(`${itemLabel === "tour" ? "Tour" : "Workflow"} "${tourName}" saved as a draft with ${savedStepCount} generated steps. Review and preview it before publishing.`);
@@ -7194,19 +7263,23 @@ function useRecordingMode({
     } catch (err) {
       console.error("[Recording] Failed to save tour:", err);
       safeSpeak(`Failed to save the ${experienceType === "onboarding" ? "workflow" : "tour"}. Please try again.`);
+      phaseRef.current = "active";
       setPhase("active");
+      persistSnapshot({ phase: "active" });
       return null;
     }
-  }, [capturedTranscript, experienceType, safeSpeak, serverUrl, stopBackgroundVoiceCapture, steps, toursApiBase, websiteId]);
+  }, [capturedTranscript, experienceType, persistSnapshot, safeSpeak, serverUrl, stopBackgroundVoiceCapture, steps, toursApiBase, websiteId]);
   const toggleVoiceCapture = useCallback10(() => {
     if (isVoiceCaptureActive || shouldKeepVoiceCaptureRef.current) {
       shouldKeepVoiceCaptureRef.current = false;
       stopBackgroundVoiceCapture();
+      persistSnapshot({ voiceCaptureEnabled: false });
       return;
     }
     shouldKeepVoiceCaptureRef.current = true;
+    persistSnapshot({ voiceCaptureEnabled: true });
     startBackgroundVoiceCapture();
-  }, [isVoiceCaptureActive, startBackgroundVoiceCapture, stopBackgroundVoiceCapture]);
+  }, [isVoiceCaptureActive, persistSnapshot, startBackgroundVoiceCapture, stopBackgroundVoiceCapture]);
   useEffect15(() => {
     if (!isRecording) return;
     if (phase === "active" && shouldKeepVoiceCaptureRef.current && !isVoiceCaptureActive) {
@@ -7242,22 +7315,6 @@ function useRecordingMode({
       }
     }
   }, [isRecording, phase, markStep, undoLastStep, previewSteps, approveNarration, redoNarration]);
-  useEffect15(() => {
-    if (!isRecording && steps.length === 0 && captureEvents.length === 0 && !capturedTranscript.trim()) {
-      clearPersistedRecordingSession();
-      return;
-    }
-    persistRecordingSession({
-      version: 1,
-      experienceType,
-      phase,
-      steps,
-      captureEvents,
-      capturedTranscript,
-      pendingClicks: pendingClicksRef.current,
-      selectedStepType
-    });
-  }, [captureEvents, capturedTranscript, experienceType, isRecording, phase, selectedStepType, steps]);
   return {
     phase,
     steps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelnex/sdk",
-  "version": "0.5.33",
+  "version": "0.5.34",
   "description": "React SDK for natural language control of web apps via AI agents",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",