@modelnex/sdk 0.5.32 → 0.5.34

package/dist/index.js

@@ -2832,6 +2832,92 @@ async function validateInjectedDevModeKey(serverUrl, websiteId, devModeKey) {
   return validationPromise;
 }
 
+// src/utils/recordingPersistence.ts
+var RECORDING_SESSION_STORAGE_KEY = "modelnex-recording-session";
+var RESTORABLE_RECORDING_PHASES = /* @__PURE__ */ new Set([
+  "active",
+  "selecting",
+  "configuring",
+  "narrating",
+  "reviewing",
+  "saved",
+  "finishing"
+]);
+var TOUR_STEP_TYPES = /* @__PURE__ */ new Set([
+  "narrate",
+  "act",
+  "input",
+  "ask_and_fill",
+  "user_input",
+  "ask_or_fill",
+  "wait_then_act"
+]);
+function canUseSessionStorage() {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+}
+function isExperienceType(value) {
+  return value === "tour" || value === "onboarding";
+}
+function isTourStepType(value) {
+  return typeof value === "string" && TOUR_STEP_TYPES.has(value);
+}
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function sanitizePersistedRecordingSession(raw) {
+  if (!isPlainObject(raw)) return null;
+  if (raw.version !== 1) return null;
+  if (!isExperienceType(raw.experienceType)) return null;
+  if (typeof raw.phase !== "string" || !RESTORABLE_RECORDING_PHASES.has(raw.phase)) return null;
+  if (!Array.isArray(raw.steps) || !Array.isArray(raw.captureEvents) || !Array.isArray(raw.pendingClicks)) return null;
+  if (!isTourStepType(raw.selectedStepType)) return null;
+  return {
+    version: 1,
+    experienceType: raw.experienceType,
+    phase: raw.phase,
+    steps: raw.steps,
+    captureEvents: raw.captureEvents,
+    capturedTranscript: typeof raw.capturedTranscript === "string" ? raw.capturedTranscript : "",
+    pendingClicks: raw.pendingClicks,
+    selectedStepType: raw.selectedStepType,
+    voiceCaptureEnabled: raw.voiceCaptureEnabled === true
+  };
+}
+function readPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return null;
+  try {
+    const raw = window.sessionStorage.getItem(RECORDING_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = sanitizePersistedRecordingSession(JSON.parse(raw));
+    if (parsed) {
+      return parsed;
+    }
+  } catch {
+  }
+  clearPersistedRecordingSession();
+  return null;
+}
+function readPersistedRecordingExperienceType() {
+  return readPersistedRecordingSession()?.experienceType ?? null;
+}
+function hasPersistedRecordingSession() {
+  return readPersistedRecordingSession() !== null;
+}
+function persistRecordingSession(session) {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.setItem(RECORDING_SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+  }
+}
+function clearPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.removeItem(RECORDING_SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+
 // src/hooks/useRunCommand.ts
 var import_react9 = require("react");
 function searchTaggedElementsForQuery(store, query, limit = 8) {
@@ -6768,26 +6854,36 @@ function useRecordingMode({
   onPreview,
   experienceType = "tour"
 }) {
-  const [phase, setPhase] = (0, import_react16.useState)("idle");
-  const [steps, setSteps] = (0, import_react16.useState)([]);
+  const restoredSessionRef = (0, import_react16.useRef)(void 0);
+  if (restoredSessionRef.current === void 0) {
+    restoredSessionRef.current = readPersistedRecordingSession();
+  }
+  const restoredSession = restoredSessionRef.current;
+  const restoredPhase = restoredSession ? "active" : "idle";
+  const [phase, setPhase] = (0, import_react16.useState)(restoredPhase);
+  const [steps, setSteps] = (0, import_react16.useState)(() => restoredSession?.steps ?? []);
   const [selectedElement, setSelectedElement] = (0, import_react16.useState)(null);
-  const [selectedStepType, setSelectedStepType] = (0, import_react16.useState)("ask_or_fill");
+  const [selectedStepType, setSelectedStepType] = (0, import_react16.useState)(() => restoredSession?.selectedStepType ?? "ask_or_fill");
   const [pendingNarration, setPendingNarration] = (0, import_react16.useState)("");
   const [polishedNarration, setPolishedNarration] = (0, import_react16.useState)("");
-  const [captureEvents, setCaptureEvents] = (0, import_react16.useState)([]);
-  const [capturedTranscript, setCapturedTranscript] = (0, import_react16.useState)("");
+  const [captureEvents, setCaptureEvents] = (0, import_react16.useState)(() => restoredSession?.captureEvents ?? []);
+  const [capturedTranscript, setCapturedTranscript] = (0, import_react16.useState)(() => restoredSession?.capturedTranscript ?? "");
   const [isVoiceCaptureActive, setIsVoiceCaptureActive] = (0, import_react16.useState)(false);
   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);
     });
   }, [voice]);
   captureEventsRef.current = captureEvents;
-  const pendingClicksRef = (0, import_react16.useRef)([]);
-  const shouldKeepVoiceCaptureRef = (0, import_react16.useRef)(false);
+  const pendingClicksRef = (0, import_react16.useRef)(restoredSession?.pendingClicks ?? []);
+  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)("");
@@ -6797,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,
@@ -6820,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 = {
@@ -6861,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(),
@@ -6877,7 +7005,7 @@ function useRecordingMode({
         stepOrder: newStep.order
       }
     });
-  }, [appendCaptureEvent]);
+  }, [appendCaptureEvent, persistSnapshot]);
   const stopBackgroundVoiceCapture = (0, import_react16.useCallback)(() => {
     voice.stopListening();
     setIsVoiceCaptureActive(false);
@@ -6900,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");
@@ -7047,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(),
@@ -7066,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("");
@@ -7085,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.");
@@ -7114,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)(() => {
@@ -7169,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();
@@ -7195,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) => {
@@ -7252,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");
@@ -7301,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.`);
@@ -7313,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) {
@@ -9300,7 +9464,9 @@ function ModelNexChatBubble({
   const [savedDraft, setSavedDraft] = (0, import_react18.useState)(null);
   const [reviewDraft, setReviewDraft] = (0, import_react18.useState)("");
   const [tourLiveTranscript, setTourLiveTranscript] = (0, import_react18.useState)("");
-  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = (0, import_react18.useState)(recordingExperienceType);
+  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = (0, import_react18.useState)(
+    () => readPersistedRecordingExperienceType() ?? recordingExperienceType
+  );
   const recording = useRecordingMode({
     serverUrl,
     toursApiBase: ctx?.toursApiBase,
@@ -9310,6 +9476,16 @@ function ModelNexChatBubble({
   });
   const isGeneratingDraft = isRecordingDraftGenerating(recording.phase);
   const showRecordingOverlay = recordingMode && shouldShowRecordingOverlay(recording.phase);
+  (0, import_react18.useEffect)(() => {
+    const shouldBeRecording = recording.phase !== "idle";
+    if (shouldBeRecording && !recordingMode) {
+      setRecordingMode(true);
+      return;
+    }
+    if (!shouldBeRecording && recordingMode && !showStopModal && !savedDraft) {
+      setRecordingMode(false);
+    }
+  }, [recording.phase, recordingMode, savedDraft, setRecordingMode, showStopModal]);
   const playbackController = useExperiencePlaybackController({
     serverUrl,
     commandUrl: ctx?.commandUrl,
@@ -11815,7 +11991,7 @@ var ModelNexProvider = ({
   const [executedFields, setExecutedFields] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
   const [highlightActions, setHighlightActions] = (0, import_react21.useState)(false);
   const [studioMode, setStudioMode] = (0, import_react21.useState)(false);
-  const [recordingMode, setRecordingMode] = (0, import_react21.useState)(false);
+  const [recordingMode, setRecordingMode] = (0, import_react21.useState)(() => hasPersistedRecordingSession());
   const [voiceMuted, setVoiceMuted] = (0, import_react21.useState)(false);
   const [socketId, setSocketId] = (0, import_react21.useState)(null);
   const [actions, setActions] = (0, import_react21.useState)(/* @__PURE__ */ new Map());

package/dist/index.mjs

@@ -2623,6 +2623,92 @@ async function validateInjectedDevModeKey(serverUrl, websiteId, devModeKey) {
   return validationPromise;
 }
 
+// src/utils/recordingPersistence.ts
+var RECORDING_SESSION_STORAGE_KEY = "modelnex-recording-session";
+var RESTORABLE_RECORDING_PHASES = /* @__PURE__ */ new Set([
+  "active",
+  "selecting",
+  "configuring",
+  "narrating",
+  "reviewing",
+  "saved",
+  "finishing"
+]);
+var TOUR_STEP_TYPES = /* @__PURE__ */ new Set([
+  "narrate",
+  "act",
+  "input",
+  "ask_and_fill",
+  "user_input",
+  "ask_or_fill",
+  "wait_then_act"
+]);
+function canUseSessionStorage() {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+}
+function isExperienceType(value) {
+  return value === "tour" || value === "onboarding";
+}
+function isTourStepType(value) {
+  return typeof value === "string" && TOUR_STEP_TYPES.has(value);
+}
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function sanitizePersistedRecordingSession(raw) {
+  if (!isPlainObject(raw)) return null;
+  if (raw.version !== 1) return null;
+  if (!isExperienceType(raw.experienceType)) return null;
+  if (typeof raw.phase !== "string" || !RESTORABLE_RECORDING_PHASES.has(raw.phase)) return null;
+  if (!Array.isArray(raw.steps) || !Array.isArray(raw.captureEvents) || !Array.isArray(raw.pendingClicks)) return null;
+  if (!isTourStepType(raw.selectedStepType)) return null;
+  return {
+    version: 1,
+    experienceType: raw.experienceType,
+    phase: raw.phase,
+    steps: raw.steps,
+    captureEvents: raw.captureEvents,
+    capturedTranscript: typeof raw.capturedTranscript === "string" ? raw.capturedTranscript : "",
+    pendingClicks: raw.pendingClicks,
+    selectedStepType: raw.selectedStepType,
+    voiceCaptureEnabled: raw.voiceCaptureEnabled === true
+  };
+}
+function readPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return null;
+  try {
+    const raw = window.sessionStorage.getItem(RECORDING_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = sanitizePersistedRecordingSession(JSON.parse(raw));
+    if (parsed) {
+      return parsed;
+    }
+  } catch {
+  }
+  clearPersistedRecordingSession();
+  return null;
+}
+function readPersistedRecordingExperienceType() {
+  return readPersistedRecordingSession()?.experienceType ?? null;
+}
+function hasPersistedRecordingSession() {
+  return readPersistedRecordingSession() !== null;
+}
+function persistRecordingSession(session) {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.setItem(RECORDING_SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+  }
+}
+function clearPersistedRecordingSession() {
+  if (!canUseSessionStorage()) return;
+  try {
+    window.sessionStorage.removeItem(RECORDING_SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+
 // src/hooks/useRunCommand.ts
 import { useCallback as useCallback5, useContext as useContext2 } from "react";
 function searchTaggedElementsForQuery(store, query, limit = 8) {
@@ -6558,26 +6644,36 @@ function useRecordingMode({
   onPreview,
   experienceType = "tour"
 }) {
-  const [phase, setPhase] = useState11("idle");
-  const [steps, setSteps] = useState11([]);
+  const restoredSessionRef = useRef12(void 0);
+  if (restoredSessionRef.current === void 0) {
+    restoredSessionRef.current = readPersistedRecordingSession();
+  }
+  const restoredSession = restoredSessionRef.current;
+  const restoredPhase = restoredSession ? "active" : "idle";
+  const [phase, setPhase] = useState11(restoredPhase);
+  const [steps, setSteps] = useState11(() => restoredSession?.steps ?? []);
   const [selectedElement, setSelectedElement] = useState11(null);
-  const [selectedStepType, setSelectedStepType] = useState11("ask_or_fill");
+  const [selectedStepType, setSelectedStepType] = useState11(() => restoredSession?.selectedStepType ?? "ask_or_fill");
   const [pendingNarration, setPendingNarration] = useState11("");
   const [polishedNarration, setPolishedNarration] = useState11("");
-  const [captureEvents, setCaptureEvents] = useState11([]);
-  const [capturedTranscript, setCapturedTranscript] = useState11("");
+  const [captureEvents, setCaptureEvents] = useState11(() => restoredSession?.captureEvents ?? []);
+  const [capturedTranscript, setCapturedTranscript] = useState11(() => restoredSession?.capturedTranscript ?? "");
   const [isVoiceCaptureActive, setIsVoiceCaptureActive] = useState11(false);
   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);
     });
   }, [voice]);
   captureEventsRef.current = captureEvents;
-  const pendingClicksRef = useRef12([]);
-  const shouldKeepVoiceCaptureRef = useRef12(false);
+  const pendingClicksRef = useRef12(restoredSession?.pendingClicks ?? []);
+  const shouldKeepVoiceCaptureRef = useRef12(restoredSession?.voiceCaptureEnabled === true);
   const resumeVoiceAfterNarrationRef = useRef12(false);
   const lastAutoNoteRef = useRef12("");
   const lastHoverKeyRef = useRef12("");
@@ -6587,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,
@@ -6610,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 = {
@@ -6651,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(),
@@ -6667,7 +6795,7 @@ function useRecordingMode({
         stepOrder: newStep.order
       }
     });
-  }, [appendCaptureEvent]);
+  }, [appendCaptureEvent, persistSnapshot]);
   const stopBackgroundVoiceCapture = useCallback10(() => {
     voice.stopListening();
     setIsVoiceCaptureActive(false);
@@ -6690,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");
@@ -6837,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(),
@@ -6856,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("");
@@ -6875,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.");
@@ -6904,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(() => {
@@ -6959,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();
@@ -6985,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) => {
@@ -7042,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");
@@ -7091,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.`);
@@ -7103,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) {
@@ -9090,7 +9254,9 @@ function ModelNexChatBubble({
   const [savedDraft, setSavedDraft] = useState13(null);
   const [reviewDraft, setReviewDraft] = useState13("");
   const [tourLiveTranscript, setTourLiveTranscript] = useState13("");
-  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = useState13(recordingExperienceType);
+  const [activeRecordingExperienceType, setActiveRecordingExperienceType] = useState13(
+    () => readPersistedRecordingExperienceType() ?? recordingExperienceType
+  );
   const recording = useRecordingMode({
     serverUrl,
     toursApiBase: ctx?.toursApiBase,
@@ -9100,6 +9266,16 @@ function ModelNexChatBubble({
   });
   const isGeneratingDraft = isRecordingDraftGenerating(recording.phase);
   const showRecordingOverlay = recordingMode && shouldShowRecordingOverlay(recording.phase);
+  useEffect17(() => {
+    const shouldBeRecording = recording.phase !== "idle";
+    if (shouldBeRecording && !recordingMode) {
+      setRecordingMode(true);
+      return;
+    }
+    if (!shouldBeRecording && recordingMode && !showStopModal && !savedDraft) {
+      setRecordingMode(false);
+    }
+  }, [recording.phase, recordingMode, savedDraft, setRecordingMode, showStopModal]);
   const playbackController = useExperiencePlaybackController({
     serverUrl,
     commandUrl: ctx?.commandUrl,
@@ -11605,7 +11781,7 @@ var ModelNexProvider = ({
   const [executedFields, setExecutedFields] = useState15(/* @__PURE__ */ new Set());
   const [highlightActions, setHighlightActions] = useState15(false);
   const [studioMode, setStudioMode] = useState15(false);
-  const [recordingMode, setRecordingMode] = useState15(false);
+  const [recordingMode, setRecordingMode] = useState15(() => hasPersistedRecordingSession());
   const [voiceMuted, setVoiceMuted] = useState15(false);
   const [socketId, setSocketId] = useState15(null);
   const [actions, setActions] = useState15(/* @__PURE__ */ new Map());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelnex/sdk",
-  "version": "0.5.32",
+  "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",