@modelnex/sdk 0.5.36 → 0.5.37

package/dist/index.d.mts

@@ -817,9 +817,14 @@ interface SavedDraftPreview {
     experienceType: ExperienceType;
 }
 type PreviewLaunchSource = 'standard' | 'query_param';
+type DraftPreviewModeListener = (enabled: boolean) => void;
 declare function getPreviewQueryParamName(experienceType: ExperienceType): 'modelnex_test_tour' | 'modelnex_test_workflow';
 declare function buildDraftPreviewUrl(currentUrl: string, draft: SavedDraftPreview): string;
 declare function shouldPromptForPreviewStart(notificationType: TourNotificationType | undefined, _source: PreviewLaunchSource): boolean;
+declare function hasDraftPreviewModeSignal(): boolean;
+declare function observeDraftPreviewModeSignal(listener: DraftPreviewModeListener, options?: {
+    pollIntervalMs?: number;
+}): () => void;
 declare function persistActiveDraftPreview(draft: SavedDraftPreview): void;
 declare function readActiveDraftPreview(): SavedDraftPreview | null;
 declare function clearActiveDraftPreview(experienceType?: ExperienceType): void;
@@ -847,4 +852,4 @@ interface ModelNexProviderProps {
 }
 declare const ModelNexProvider: React$1.FC<ModelNexProviderProps>;
 
-export { type AgentDebug, type AgentTraceLlmInput, type AgentTraceStep, type ChatMessage, DEFAULT_MODELNEX_SERVER_URL, type ExperienceGoal, type ExperiencePlaybackHook, type ExperiencePresentation, type ExperienceType, type ExtractedElement, ModelNexChatBubble, type ModelNexChatBubbleProps, ModelNexOnboardingPanel, type ModelNexOnboardingPanelProps, ModelNexProvider, type ModelNexProviderProps, type OnboardingPlaybackHook, type OnboardingStepMetadata, type PreviewLaunchSource, type RecordingModeHook, RecordingOverlay, type RunCommandResult, type SavedDraftPreview, StudioOverlay, type TagData, type TagStore, type Tour, type TourNotificationType, type TourPlaybackHook, type TourPlaybackState, TourProgressPanel, type TourStartPolicy, type TourStep, type TourStepType, type TourTrigger, UIStateProvider, type UserProfile, type VoiceHook, buildDraftPreviewUrl, buildRecordingCapturePayload, buildRecordingStepGoal, clearActiveDraftPreview, extractInteractiveElements, generateFingerprint, getPreviewQueryParamName, getRecordingDraftActionLabel, getRecordingDraftStatusMessage, inferOnboardingMetadataForStep, isAskDrivenInputStepType, isInteractiveInputStepType, isManualOnboardingStep, isRecordingDraftGenerating, persistActiveDraftPreview, readActiveDraftPreview, shouldPromptForPreviewStart, shouldShowRecordingOverlay, useActionHighlight, useAgentViewport, useAutoExtract, useExperiencePlayback, useOnboardingPlayback, useRecordingMode, useRunCommand, useTagStore, useTourPlayback, useUIState, useViewportTrack, useVisibleIds, useVoice };
+export { type AgentDebug, type AgentTraceLlmInput, type AgentTraceStep, type ChatMessage, DEFAULT_MODELNEX_SERVER_URL, type ExperienceGoal, type ExperiencePlaybackHook, type ExperiencePresentation, type ExperienceType, type ExtractedElement, ModelNexChatBubble, type ModelNexChatBubbleProps, ModelNexOnboardingPanel, type ModelNexOnboardingPanelProps, ModelNexProvider, type ModelNexProviderProps, type OnboardingPlaybackHook, type OnboardingStepMetadata, type PreviewLaunchSource, type RecordingModeHook, RecordingOverlay, type RunCommandResult, type SavedDraftPreview, StudioOverlay, type TagData, type TagStore, type Tour, type TourNotificationType, type TourPlaybackHook, type TourPlaybackState, TourProgressPanel, type TourStartPolicy, type TourStep, type TourStepType, type TourTrigger, UIStateProvider, type UserProfile, type VoiceHook, buildDraftPreviewUrl, buildRecordingCapturePayload, buildRecordingStepGoal, clearActiveDraftPreview, extractInteractiveElements, generateFingerprint, getPreviewQueryParamName, getRecordingDraftActionLabel, getRecordingDraftStatusMessage, hasDraftPreviewModeSignal, inferOnboardingMetadataForStep, isAskDrivenInputStepType, isInteractiveInputStepType, isManualOnboardingStep, isRecordingDraftGenerating, observeDraftPreviewModeSignal, persistActiveDraftPreview, readActiveDraftPreview, shouldPromptForPreviewStart, shouldShowRecordingOverlay, useActionHighlight, useAgentViewport, useAutoExtract, useExperiencePlayback, useOnboardingPlayback, useRecordingMode, useRunCommand, useTagStore, useTourPlayback, useUIState, useViewportTrack, useVisibleIds, useVoice };

package/dist/index.d.ts

@@ -817,9 +817,14 @@ interface SavedDraftPreview {
     experienceType: ExperienceType;
 }
 type PreviewLaunchSource = 'standard' | 'query_param';
+type DraftPreviewModeListener = (enabled: boolean) => void;
 declare function getPreviewQueryParamName(experienceType: ExperienceType): 'modelnex_test_tour' | 'modelnex_test_workflow';
 declare function buildDraftPreviewUrl(currentUrl: string, draft: SavedDraftPreview): string;
 declare function shouldPromptForPreviewStart(notificationType: TourNotificationType | undefined, _source: PreviewLaunchSource): boolean;
+declare function hasDraftPreviewModeSignal(): boolean;
+declare function observeDraftPreviewModeSignal(listener: DraftPreviewModeListener, options?: {
+    pollIntervalMs?: number;
+}): () => void;
 declare function persistActiveDraftPreview(draft: SavedDraftPreview): void;
 declare function readActiveDraftPreview(): SavedDraftPreview | null;
 declare function clearActiveDraftPreview(experienceType?: ExperienceType): void;
@@ -847,4 +852,4 @@ interface ModelNexProviderProps {
 }
 declare const ModelNexProvider: React$1.FC<ModelNexProviderProps>;
 
-export { type AgentDebug, type AgentTraceLlmInput, type AgentTraceStep, type ChatMessage, DEFAULT_MODELNEX_SERVER_URL, type ExperienceGoal, type ExperiencePlaybackHook, type ExperiencePresentation, type ExperienceType, type ExtractedElement, ModelNexChatBubble, type ModelNexChatBubbleProps, ModelNexOnboardingPanel, type ModelNexOnboardingPanelProps, ModelNexProvider, type ModelNexProviderProps, type OnboardingPlaybackHook, type OnboardingStepMetadata, type PreviewLaunchSource, type RecordingModeHook, RecordingOverlay, type RunCommandResult, type SavedDraftPreview, StudioOverlay, type TagData, type TagStore, type Tour, type TourNotificationType, type TourPlaybackHook, type TourPlaybackState, TourProgressPanel, type TourStartPolicy, type TourStep, type TourStepType, type TourTrigger, UIStateProvider, type UserProfile, type VoiceHook, buildDraftPreviewUrl, buildRecordingCapturePayload, buildRecordingStepGoal, clearActiveDraftPreview, extractInteractiveElements, generateFingerprint, getPreviewQueryParamName, getRecordingDraftActionLabel, getRecordingDraftStatusMessage, inferOnboardingMetadataForStep, isAskDrivenInputStepType, isInteractiveInputStepType, isManualOnboardingStep, isRecordingDraftGenerating, persistActiveDraftPreview, readActiveDraftPreview, shouldPromptForPreviewStart, shouldShowRecordingOverlay, useActionHighlight, useAgentViewport, useAutoExtract, useExperiencePlayback, useOnboardingPlayback, useRecordingMode, useRunCommand, useTagStore, useTourPlayback, useUIState, useViewportTrack, useVisibleIds, useVoice };
+export { type AgentDebug, type AgentTraceLlmInput, type AgentTraceStep, type ChatMessage, DEFAULT_MODELNEX_SERVER_URL, type ExperienceGoal, type ExperiencePlaybackHook, type ExperiencePresentation, type ExperienceType, type ExtractedElement, ModelNexChatBubble, type ModelNexChatBubbleProps, ModelNexOnboardingPanel, type ModelNexOnboardingPanelProps, ModelNexProvider, type ModelNexProviderProps, type OnboardingPlaybackHook, type OnboardingStepMetadata, type PreviewLaunchSource, type RecordingModeHook, RecordingOverlay, type RunCommandResult, type SavedDraftPreview, StudioOverlay, type TagData, type TagStore, type Tour, type TourNotificationType, type TourPlaybackHook, type TourPlaybackState, TourProgressPanel, type TourStartPolicy, type TourStep, type TourStepType, type TourTrigger, UIStateProvider, type UserProfile, type VoiceHook, buildDraftPreviewUrl, buildRecordingCapturePayload, buildRecordingStepGoal, clearActiveDraftPreview, extractInteractiveElements, generateFingerprint, getPreviewQueryParamName, getRecordingDraftActionLabel, getRecordingDraftStatusMessage, hasDraftPreviewModeSignal, inferOnboardingMetadataForStep, isAskDrivenInputStepType, isInteractiveInputStepType, isManualOnboardingStep, isRecordingDraftGenerating, observeDraftPreviewModeSignal, persistActiveDraftPreview, readActiveDraftPreview, shouldPromptForPreviewStart, shouldShowRecordingOverlay, useActionHighlight, useAgentViewport, useAutoExtract, useExperiencePlayback, useOnboardingPlayback, useRecordingMode, useRunCommand, useTagStore, useTourPlayback, useUIState, useViewportTrack, useVisibleIds, useVoice };

package/dist/index.js

@@ -188,11 +188,13 @@ __export(index_exports, {
   getPreviewQueryParamName: () => getPreviewQueryParamName,
   getRecordingDraftActionLabel: () => getRecordingDraftActionLabel,
   getRecordingDraftStatusMessage: () => getRecordingDraftStatusMessage,
+  hasDraftPreviewModeSignal: () => hasDraftPreviewModeSignal,
   inferOnboardingMetadataForStep: () => inferOnboardingMetadataForStep,
   isAskDrivenInputStepType: () => isAskDrivenInputStepType,
   isInteractiveInputStepType: () => isInteractiveInputStepType,
   isManualOnboardingStep: () => isManualOnboardingStep,
   isRecordingDraftGenerating: () => isRecordingDraftGenerating,
+  observeDraftPreviewModeSignal: () => observeDraftPreviewModeSignal,
   persistActiveDraftPreview: () => persistActiveDraftPreview,
   readActiveDraftPreview: () => readActiveDraftPreview,
   shouldPromptForPreviewStart: () => shouldPromptForPreviewStart,
@@ -2918,6 +2920,159 @@ function clearPersistedRecordingSession() {
   }
 }
 
+// src/utils/draftPreview.ts
+var ACTIVE_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:active-draft-preview";
+var PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY = "modelnex:preview-session-suppressed";
+var SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:suppressed-draft-preview";
+function getPreviewQueryParamName(experienceType) {
+  return experienceType === "onboarding" ? "modelnex_test_workflow" : "modelnex_test_tour";
+}
+function buildDraftPreviewUrl(currentUrl, draft) {
+  const url = new URL(currentUrl);
+  url.searchParams.delete("modelnex_test_tour");
+  url.searchParams.delete("modelnex_test_onboarding");
+  url.searchParams.delete("modelnex_test_workflow");
+  url.searchParams.set(getPreviewQueryParamName(draft.experienceType), draft.id);
+  return url.toString();
+}
+function shouldPromptForPreviewStart(notificationType, _source) {
+  const normalizedNotificationType = notificationType ?? "bubble_card";
+  return normalizedNotificationType === "modal";
+}
+function hasDraftPreviewModeSignal() {
+  if (typeof window === "undefined") return false;
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has("modelnex_test_tour") || params.has("modelnex_test_workflow") || params.has("modelnex_test_onboarding")) {
+      return true;
+    }
+  } catch {
+  }
+  return readActiveDraftPreview() !== null;
+}
+function observeDraftPreviewModeSignal(listener, options) {
+  if (typeof window === "undefined") return () => {
+  };
+  let currentValue = hasDraftPreviewModeSignal();
+  const pollIntervalMs = options?.pollIntervalMs ?? 500;
+  const syncPreviewModeSignal = () => {
+    const nextValue = hasDraftPreviewModeSignal();
+    if (nextValue === currentValue) return;
+    currentValue = nextValue;
+    listener(nextValue);
+  };
+  const intervalId = window.setInterval(syncPreviewModeSignal, pollIntervalMs);
+  window.addEventListener("focus", syncPreviewModeSignal);
+  window.addEventListener("pageshow", syncPreviewModeSignal);
+  window.addEventListener("popstate", syncPreviewModeSignal);
+  if (typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", syncPreviewModeSignal);
+  }
+  return () => {
+    window.clearInterval(intervalId);
+    window.removeEventListener("focus", syncPreviewModeSignal);
+    window.removeEventListener("pageshow", syncPreviewModeSignal);
+    window.removeEventListener("popstate", syncPreviewModeSignal);
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", syncPreviewModeSignal);
+    }
+  };
+}
+function persistActiveDraftPreview(draft) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
+  } catch {
+  }
+}
+function readActiveDraftPreview() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed.id !== "string") return null;
+    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
+    return {
+      id: parsed.id,
+      experienceType: parsed.experienceType
+    };
+  } catch {
+    return null;
+  }
+}
+function clearActiveDraftPreview(experienceType) {
+  if (typeof window === "undefined") return;
+  try {
+    const activePreview = readActiveDraftPreview();
+    if (experienceType && activePreview && activePreview.experienceType !== experienceType) {
+      return;
+    }
+    window.sessionStorage.removeItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
+  } catch {
+  }
+}
+function readSavedDraftPreview(storageKey) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(storageKey);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed.id !== "string") return null;
+    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
+    return {
+      id: parsed.id,
+      experienceType: parsed.experienceType
+    };
+  } catch {
+    return null;
+  }
+}
+function readSuppressedDraftPreview() {
+  return readSavedDraftPreview(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
+}
+function persistSuppressedDraftPreview(draft) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
+  } catch {
+  }
+}
+function clearSuppressedDraftPreview(draft) {
+  if (typeof window === "undefined") return;
+  try {
+    const suppressedDraft = readSuppressedDraftPreview();
+    if (draft && suppressedDraft) {
+      if (suppressedDraft.id !== draft.id || suppressedDraft.experienceType !== draft.experienceType) {
+        return;
+      }
+    }
+    window.sessionStorage.removeItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
+  } catch {
+  }
+}
+function isSuppressedDraftPreview(draft) {
+  const suppressedDraft = readSuppressedDraftPreview();
+  return Boolean(
+    suppressedDraft && suppressedDraft.id === draft.id && suppressedDraft.experienceType === draft.experienceType
+  );
+}
+function persistPreviewSessionSuppression() {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY, "true");
+  } catch {
+  }
+}
+function readPreviewSessionSuppression() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.sessionStorage.getItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
 // src/hooks/useRunCommand.ts
 var import_react9 = require("react");
 function searchTaggedElementsForQuery(store, query, limit = 8) {
@@ -3053,120 +3208,6 @@ var import_react_dom = require("react-dom");
 // src/hooks/useExperiencePlaybackController.ts
 var import_react13 = require("react");
 
-// src/utils/draftPreview.ts
-var ACTIVE_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:active-draft-preview";
-var PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY = "modelnex:preview-session-suppressed";
-var SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:suppressed-draft-preview";
-function getPreviewQueryParamName(experienceType) {
-  return experienceType === "onboarding" ? "modelnex_test_workflow" : "modelnex_test_tour";
-}
-function buildDraftPreviewUrl(currentUrl, draft) {
-  const url = new URL(currentUrl);
-  url.searchParams.delete("modelnex_test_tour");
-  url.searchParams.delete("modelnex_test_onboarding");
-  url.searchParams.delete("modelnex_test_workflow");
-  url.searchParams.set(getPreviewQueryParamName(draft.experienceType), draft.id);
-  return url.toString();
-}
-function shouldPromptForPreviewStart(notificationType, _source) {
-  const normalizedNotificationType = notificationType ?? "bubble_card";
-  return normalizedNotificationType === "modal";
-}
-function persistActiveDraftPreview(draft) {
-  if (typeof window === "undefined") return;
-  try {
-    window.sessionStorage.setItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
-  } catch {
-  }
-}
-function readActiveDraftPreview() {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.sessionStorage.getItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed.id !== "string") return null;
-    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
-    return {
-      id: parsed.id,
-      experienceType: parsed.experienceType
-    };
-  } catch {
-    return null;
-  }
-}
-function clearActiveDraftPreview(experienceType) {
-  if (typeof window === "undefined") return;
-  try {
-    const activePreview = readActiveDraftPreview();
-    if (experienceType && activePreview && activePreview.experienceType !== experienceType) {
-      return;
-    }
-    window.sessionStorage.removeItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
-  } catch {
-  }
-}
-function readSavedDraftPreview(storageKey) {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.sessionStorage.getItem(storageKey);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed.id !== "string") return null;
-    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
-    return {
-      id: parsed.id,
-      experienceType: parsed.experienceType
-    };
-  } catch {
-    return null;
-  }
-}
-function readSuppressedDraftPreview() {
-  return readSavedDraftPreview(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
-}
-function persistSuppressedDraftPreview(draft) {
-  if (typeof window === "undefined") return;
-  try {
-    window.sessionStorage.setItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
-  } catch {
-  }
-}
-function clearSuppressedDraftPreview(draft) {
-  if (typeof window === "undefined") return;
-  try {
-    const suppressedDraft = readSuppressedDraftPreview();
-    if (draft && suppressedDraft) {
-      if (suppressedDraft.id !== draft.id || suppressedDraft.experienceType !== draft.experienceType) {
-        return;
-      }
-    }
-    window.sessionStorage.removeItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
-  } catch {
-  }
-}
-function isSuppressedDraftPreview(draft) {
-  const suppressedDraft = readSuppressedDraftPreview();
-  return Boolean(
-    suppressedDraft && suppressedDraft.id === draft.id && suppressedDraft.experienceType === draft.experienceType
-  );
-}
-function persistPreviewSessionSuppression() {
-  if (typeof window === "undefined") return;
-  try {
-    window.sessionStorage.setItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY, "true");
-  } catch {
-  }
-}
-function readPreviewSessionSuppression() {
-  if (typeof window === "undefined") return false;
-  try {
-    return window.sessionStorage.getItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY) === "true";
-  } catch {
-    return false;
-  }
-}
-
 // src/utils/locationSignature.ts
 function getLocationSignature(locationLike) {
   if (!locationLike) return "";
@@ -9450,6 +9491,7 @@ function ModelNexChatBubble({
   const setRecordingMode = ctx?.setRecordingMode ?? (() => {
   });
   const devMode = ctx?.devMode ?? false;
+  const authoringMode = ctx?.authoringMode ?? devMode;
   const [recordingTourName, setRecordingTourName] = (0, import_react18.useState)("");
   const [recordingTargetTypes, setRecordingTargetTypes] = (0, import_react18.useState)("admin");
   const [showStopModal, setShowStopModal] = (0, import_react18.useState)(false);
@@ -9578,11 +9620,11 @@ function ModelNexChatBubble({
     }
   }, [ctx]);
   (0, import_react18.useEffect)(() => {
-    if (devMode && ctx?.extractedElements.length) {
+    if (authoringMode && ctx?.extractedElements.length) {
       const timer = setTimeout(handleAutoTag, 1e3);
       return () => clearTimeout(timer);
     }
-  }, [devMode, handleAutoTag, ctx?.extractedElements.length, window.location.pathname]);
+  }, [authoringMode, handleAutoTag, ctx?.extractedElements.length, window.location.pathname]);
   const onboardingReviewToggle = getReviewModeToggleConfig(onboardingPlayback.playbackState);
   const pendingPrompt = playbackController.pendingPrompt;
   const pendingNotificationType = (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.notificationType ?? "bubble_card";
@@ -9943,7 +9985,7 @@ function ModelNexChatBubble({
           content: summary || fallbackContent,
           summary: summary ?? void 0,
           nextSteps: nextSteps ?? void 0,
-          debug: devMode ? data?.debug ?? void 0 : void 0
+          debug: authoringMode ? data?.debug ?? void 0 : void 0
         }
       ]);
     } catch (err) {
@@ -10231,7 +10273,7 @@ function ModelNexChatBubble({
                     children: voice.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VolumeMuteIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VolumeIcon, {})
                   }
                 ) }),
-                devMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", background: "var(--modelnex-bg-secondary, #f4f4f5)", borderRadius: "12px", padding: "2px", gap: "2px", marginRight: "4px" }, children: (!recordingMode || activeRecordingExperienceType === "onboarding") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: recordingMode ? "Stop & Save Workflow" : "Record Workflow", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                authoringMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", background: "var(--modelnex-bg-secondary, #f4f4f5)", borderRadius: "12px", padding: "2px", gap: "2px", marginRight: "4px" }, children: (!recordingMode || activeRecordingExperienceType === "onboarding") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: recordingMode ? "Stop & Save Workflow" : "Record Workflow", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     onClick: () => {
@@ -10987,7 +11029,7 @@ function ModelNexChatBubble({
                         )
                       }
                     ),
-                    msg.role === "assistant" && devMode && msg.debug && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AgentTraces, { debug: msg.debug, command: messages[i - 1]?.content ?? "" })
+                    msg.role === "assistant" && authoringMode && msg.debug && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AgentTraces, { debug: msg.debug, command: messages[i - 1]?.content ?? "" })
                   ] }, i)),
                   loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
@@ -11988,7 +12030,9 @@ var ModelNexProvider = ({
   const [actions, setActions] = (0, import_react21.useState)(/* @__PURE__ */ new Map());
   const [validatedBrowserDevMode, setValidatedBrowserDevMode] = (0, import_react21.useState)(false);
   const [resolvedDevModeKey, setResolvedDevModeKey] = (0, import_react21.useState)(() => resolveInjectedDevModeKey());
+  const [previewRuntimeMode, setPreviewRuntimeMode] = (0, import_react21.useState)(() => hasDraftPreviewModeSignal());
   (0, import_react21.useEffect)(() => observeInjectedDevModeKey(setResolvedDevModeKey), []);
+  (0, import_react21.useEffect)(() => observeDraftPreviewModeSignal(setPreviewRuntimeMode), []);
   (0, import_react21.useEffect)(() => {
     let cancelled = false;
     if (!websiteId || !resolvedDevModeKey) {
@@ -12005,7 +12049,7 @@ var ModelNexProvider = ({
       cancelled = true;
     };
   }, [resolvedDevModeKey, serverUrl, websiteId]);
-  const effectiveDevMode = validatedBrowserDevMode;
+  const effectiveDevMode = validatedBrowserDevMode || previewRuntimeMode;
   const registerAction = (0, import_react21.useCallback)((action) => {
     setActions((prev) => {
       const next = new Map(prev);
@@ -12102,9 +12146,10 @@ var ModelNexProvider = ({
       voiceMuted,
       setVoiceMuted,
       socketId,
-      devMode: effectiveDevMode
+      devMode: effectiveDevMode,
+      authoringMode: validatedBrowserDevMode
     }),
-    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, toursApiBase, voiceMuted, socketId, effectiveDevMode]
+    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, toursApiBase, voiceMuted, socketId, effectiveDevMode, validatedBrowserDevMode]
   );
   return import_react21.default.createElement(
     ModelNexContext.Provider,
@@ -12135,11 +12180,13 @@ var ModelNexProvider = ({
   getPreviewQueryParamName,
   getRecordingDraftActionLabel,
   getRecordingDraftStatusMessage,
+  hasDraftPreviewModeSignal,
   inferOnboardingMetadataForStep,
   isAskDrivenInputStepType,
   isInteractiveInputStepType,
   isManualOnboardingStep,
   isRecordingDraftGenerating,
+  observeDraftPreviewModeSignal,
   persistActiveDraftPreview,
   readActiveDraftPreview,
   shouldPromptForPreviewStart,

package/dist/index.mjs

@@ -2709,6 +2709,159 @@ function clearPersistedRecordingSession() {
   }
 }
 
+// src/utils/draftPreview.ts
+var ACTIVE_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:active-draft-preview";
+var PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY = "modelnex:preview-session-suppressed";
+var SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:suppressed-draft-preview";
+function getPreviewQueryParamName(experienceType) {
+  return experienceType === "onboarding" ? "modelnex_test_workflow" : "modelnex_test_tour";
+}
+function buildDraftPreviewUrl(currentUrl, draft) {
+  const url = new URL(currentUrl);
+  url.searchParams.delete("modelnex_test_tour");
+  url.searchParams.delete("modelnex_test_onboarding");
+  url.searchParams.delete("modelnex_test_workflow");
+  url.searchParams.set(getPreviewQueryParamName(draft.experienceType), draft.id);
+  return url.toString();
+}
+function shouldPromptForPreviewStart(notificationType, _source) {
+  const normalizedNotificationType = notificationType ?? "bubble_card";
+  return normalizedNotificationType === "modal";
+}
+function hasDraftPreviewModeSignal() {
+  if (typeof window === "undefined") return false;
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has("modelnex_test_tour") || params.has("modelnex_test_workflow") || params.has("modelnex_test_onboarding")) {
+      return true;
+    }
+  } catch {
+  }
+  return readActiveDraftPreview() !== null;
+}
+function observeDraftPreviewModeSignal(listener, options) {
+  if (typeof window === "undefined") return () => {
+  };
+  let currentValue = hasDraftPreviewModeSignal();
+  const pollIntervalMs = options?.pollIntervalMs ?? 500;
+  const syncPreviewModeSignal = () => {
+    const nextValue = hasDraftPreviewModeSignal();
+    if (nextValue === currentValue) return;
+    currentValue = nextValue;
+    listener(nextValue);
+  };
+  const intervalId = window.setInterval(syncPreviewModeSignal, pollIntervalMs);
+  window.addEventListener("focus", syncPreviewModeSignal);
+  window.addEventListener("pageshow", syncPreviewModeSignal);
+  window.addEventListener("popstate", syncPreviewModeSignal);
+  if (typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", syncPreviewModeSignal);
+  }
+  return () => {
+    window.clearInterval(intervalId);
+    window.removeEventListener("focus", syncPreviewModeSignal);
+    window.removeEventListener("pageshow", syncPreviewModeSignal);
+    window.removeEventListener("popstate", syncPreviewModeSignal);
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", syncPreviewModeSignal);
+    }
+  };
+}
+function persistActiveDraftPreview(draft) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
+  } catch {
+  }
+}
+function readActiveDraftPreview() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed.id !== "string") return null;
+    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
+    return {
+      id: parsed.id,
+      experienceType: parsed.experienceType
+    };
+  } catch {
+    return null;
+  }
+}
+function clearActiveDraftPreview(experienceType) {
+  if (typeof window === "undefined") return;
+  try {
+    const activePreview = readActiveDraftPreview();
+    if (experienceType && activePreview && activePreview.experienceType !== experienceType) {
+      return;
+    }
+    window.sessionStorage.removeItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
+  } catch {
+  }
+}
+function readSavedDraftPreview(storageKey) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(storageKey);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed.id !== "string") return null;
+    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
+    return {
+      id: parsed.id,
+      experienceType: parsed.experienceType
+    };
+  } catch {
+    return null;
+  }
+}
+function readSuppressedDraftPreview() {
+  return readSavedDraftPreview(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
+}
+function persistSuppressedDraftPreview(draft) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
+  } catch {
+  }
+}
+function clearSuppressedDraftPreview(draft) {
+  if (typeof window === "undefined") return;
+  try {
+    const suppressedDraft = readSuppressedDraftPreview();
+    if (draft && suppressedDraft) {
+      if (suppressedDraft.id !== draft.id || suppressedDraft.experienceType !== draft.experienceType) {
+        return;
+      }
+    }
+    window.sessionStorage.removeItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
+  } catch {
+  }
+}
+function isSuppressedDraftPreview(draft) {
+  const suppressedDraft = readSuppressedDraftPreview();
+  return Boolean(
+    suppressedDraft && suppressedDraft.id === draft.id && suppressedDraft.experienceType === draft.experienceType
+  );
+}
+function persistPreviewSessionSuppression() {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY, "true");
+  } catch {
+  }
+}
+function readPreviewSessionSuppression() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.sessionStorage.getItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
 // src/hooks/useRunCommand.ts
 import { useCallback as useCallback5, useContext as useContext2 } from "react";
 function searchTaggedElementsForQuery(store, query, limit = 8) {
@@ -2844,120 +2997,6 @@ import { createPortal, flushSync } from "react-dom";
 // src/hooks/useExperiencePlaybackController.ts
 import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef9, useState as useState8 } from "react";
 
-// src/utils/draftPreview.ts
-var ACTIVE_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:active-draft-preview";
-var PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY = "modelnex:preview-session-suppressed";
-var SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY = "modelnex:suppressed-draft-preview";
-function getPreviewQueryParamName(experienceType) {
-  return experienceType === "onboarding" ? "modelnex_test_workflow" : "modelnex_test_tour";
-}
-function buildDraftPreviewUrl(currentUrl, draft) {
-  const url = new URL(currentUrl);
-  url.searchParams.delete("modelnex_test_tour");
-  url.searchParams.delete("modelnex_test_onboarding");
-  url.searchParams.delete("modelnex_test_workflow");
-  url.searchParams.set(getPreviewQueryParamName(draft.experienceType), draft.id);
-  return url.toString();
-}
-function shouldPromptForPreviewStart(notificationType, _source) {
-  const normalizedNotificationType = notificationType ?? "bubble_card";
-  return normalizedNotificationType === "modal";
-}
-function persistActiveDraftPreview(draft) {
-  if (typeof window === "undefined") return;
-  try {
-    window.sessionStorage.setItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
-  } catch {
-  }
-}
-function readActiveDraftPreview() {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.sessionStorage.getItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed.id !== "string") return null;
-    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
-    return {
-      id: parsed.id,
-      experienceType: parsed.experienceType
-    };
-  } catch {
-    return null;
-  }
-}
-function clearActiveDraftPreview(experienceType) {
-  if (typeof window === "undefined") return;
-  try {
-    const activePreview = readActiveDraftPreview();
-    if (experienceType && activePreview && activePreview.experienceType !== experienceType) {
-      return;
-    }
-    window.sessionStorage.removeItem(ACTIVE_DRAFT_PREVIEW_STORAGE_KEY);
-  } catch {
-  }
-}
-function readSavedDraftPreview(storageKey) {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.sessionStorage.getItem(storageKey);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed.id !== "string") return null;
-    if (parsed.experienceType !== "tour" && parsed.experienceType !== "onboarding") return null;
-    return {
-      id: parsed.id,
-      experienceType: parsed.experienceType
-    };
-  } catch {
-    return null;
-  }
-}
-function readSuppressedDraftPreview() {
-  return readSavedDraftPreview(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
-}
-function persistSuppressedDraftPreview(draft) {
-  if (typeof window === "undefined") return;
-  try {
-    window.sessionStorage.setItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY, JSON.stringify(draft));
-  } catch {
-  }
-}
-function clearSuppressedDraftPreview(draft) {
-  if (typeof window === "undefined") return;
-  try {
-    const suppressedDraft = readSuppressedDraftPreview();
-    if (draft && suppressedDraft) {
-      if (suppressedDraft.id !== draft.id || suppressedDraft.experienceType !== draft.experienceType) {
-        return;
-      }
-    }
-    window.sessionStorage.removeItem(SUPPRESSED_DRAFT_PREVIEW_STORAGE_KEY);
-  } catch {
-  }
-}
-function isSuppressedDraftPreview(draft) {
-  const suppressedDraft = readSuppressedDraftPreview();
-  return Boolean(
-    suppressedDraft && suppressedDraft.id === draft.id && suppressedDraft.experienceType === draft.experienceType
-  );
-}
-function persistPreviewSessionSuppression() {
-  if (typeof window === "undefined") return;
-  try {
-    window.sessionStorage.setItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY, "true");
-  } catch {
-  }
-}
-function readPreviewSessionSuppression() {
-  if (typeof window === "undefined") return false;
-  try {
-    return window.sessionStorage.getItem(PREVIEW_SESSION_SUPPRESSION_STORAGE_KEY) === "true";
-  } catch {
-    return false;
-  }
-}
-
 // src/utils/locationSignature.ts
 function getLocationSignature(locationLike) {
   if (!locationLike) return "";
@@ -9240,6 +9279,7 @@ function ModelNexChatBubble({
   const setRecordingMode = ctx?.setRecordingMode ?? (() => {
   });
   const devMode = ctx?.devMode ?? false;
+  const authoringMode = ctx?.authoringMode ?? devMode;
   const [recordingTourName, setRecordingTourName] = useState13("");
   const [recordingTargetTypes, setRecordingTargetTypes] = useState13("admin");
   const [showStopModal, setShowStopModal] = useState13(false);
@@ -9368,11 +9408,11 @@ function ModelNexChatBubble({
     }
   }, [ctx]);
   useEffect17(() => {
-    if (devMode && ctx?.extractedElements.length) {
+    if (authoringMode && ctx?.extractedElements.length) {
       const timer = setTimeout(handleAutoTag, 1e3);
       return () => clearTimeout(timer);
     }
-  }, [devMode, handleAutoTag, ctx?.extractedElements.length, window.location.pathname]);
+  }, [authoringMode, handleAutoTag, ctx?.extractedElements.length, window.location.pathname]);
   const onboardingReviewToggle = getReviewModeToggleConfig(onboardingPlayback.playbackState);
   const pendingPrompt = playbackController.pendingPrompt;
   const pendingNotificationType = (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.notificationType ?? "bubble_card";
@@ -9733,7 +9773,7 @@ function ModelNexChatBubble({
           content: summary || fallbackContent,
           summary: summary ?? void 0,
           nextSteps: nextSteps ?? void 0,
-          debug: devMode ? data?.debug ?? void 0 : void 0
+          debug: authoringMode ? data?.debug ?? void 0 : void 0
         }
       ]);
     } catch (err) {
@@ -10021,7 +10061,7 @@ function ModelNexChatBubble({
                     children: voice.isMuted ? /* @__PURE__ */ jsx4(VolumeMuteIcon, {}) : /* @__PURE__ */ jsx4(VolumeIcon, {})
                   }
                 ) }),
-                devMode && /* @__PURE__ */ jsx4("div", { style: { display: "flex", background: "var(--modelnex-bg-secondary, #f4f4f5)", borderRadius: "12px", padding: "2px", gap: "2px", marginRight: "4px" }, children: (!recordingMode || activeRecordingExperienceType === "onboarding") && /* @__PURE__ */ jsx4(Tooltip, { title: recordingMode ? "Stop & Save Workflow" : "Record Workflow", children: /* @__PURE__ */ jsx4(
+                authoringMode && /* @__PURE__ */ jsx4("div", { style: { display: "flex", background: "var(--modelnex-bg-secondary, #f4f4f5)", borderRadius: "12px", padding: "2px", gap: "2px", marginRight: "4px" }, children: (!recordingMode || activeRecordingExperienceType === "onboarding") && /* @__PURE__ */ jsx4(Tooltip, { title: recordingMode ? "Stop & Save Workflow" : "Record Workflow", children: /* @__PURE__ */ jsx4(
                   "button",
                   {
                     onClick: () => {
@@ -10777,7 +10817,7 @@ function ModelNexChatBubble({
                         )
                       }
                     ),
-                    msg.role === "assistant" && devMode && msg.debug && /* @__PURE__ */ jsx4(AgentTraces, { debug: msg.debug, command: messages[i - 1]?.content ?? "" })
+                    msg.role === "assistant" && authoringMode && msg.debug && /* @__PURE__ */ jsx4(AgentTraces, { debug: msg.debug, command: messages[i - 1]?.content ?? "" })
                   ] }, i)),
                   loading && /* @__PURE__ */ jsx4("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxs3(
                     "div",
@@ -11778,7 +11818,9 @@ var ModelNexProvider = ({
   const [actions, setActions] = useState15(/* @__PURE__ */ new Map());
   const [validatedBrowserDevMode, setValidatedBrowserDevMode] = useState15(false);
   const [resolvedDevModeKey, setResolvedDevModeKey] = useState15(() => resolveInjectedDevModeKey());
+  const [previewRuntimeMode, setPreviewRuntimeMode] = useState15(() => hasDraftPreviewModeSignal());
   useEffect19(() => observeInjectedDevModeKey(setResolvedDevModeKey), []);
+  useEffect19(() => observeDraftPreviewModeSignal(setPreviewRuntimeMode), []);
   useEffect19(() => {
     let cancelled = false;
     if (!websiteId || !resolvedDevModeKey) {
@@ -11795,7 +11837,7 @@ var ModelNexProvider = ({
       cancelled = true;
     };
   }, [resolvedDevModeKey, serverUrl, websiteId]);
-  const effectiveDevMode = validatedBrowserDevMode;
+  const effectiveDevMode = validatedBrowserDevMode || previewRuntimeMode;
   const registerAction = useCallback14((action) => {
     setActions((prev) => {
       const next = new Map(prev);
@@ -11892,9 +11934,10 @@ var ModelNexProvider = ({
       voiceMuted,
       setVoiceMuted,
       socketId,
-      devMode: effectiveDevMode
+      devMode: effectiveDevMode,
+      authoringMode: validatedBrowserDevMode
     }),
-    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, toursApiBase, voiceMuted, socketId, effectiveDevMode]
+    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, toursApiBase, voiceMuted, socketId, effectiveDevMode, validatedBrowserDevMode]
   );
   return React8.createElement(
     ModelNexContext.Provider,
@@ -11924,11 +11967,13 @@ export {
   getPreviewQueryParamName,
   getRecordingDraftActionLabel,
   getRecordingDraftStatusMessage,
+  hasDraftPreviewModeSignal,
   inferOnboardingMetadataForStep,
   isAskDrivenInputStepType,
   isInteractiveInputStepType,
   isManualOnboardingStep,
   isRecordingDraftGenerating,
+  observeDraftPreviewModeSignal,
   persistActiveDraftPreview,
   readActiveDraftPreview,
   shouldPromptForPreviewStart,

package/package.json

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