@modelnex/sdk 0.5.27 → 0.5.29

package/dist/index.js

@@ -121,7 +121,6 @@ function waitForDomSettle(options = {}) {
       if (!resolved) {
         resolved = true;
         cleanup();
-        console.log("[DOM Sync] Forced resolution by max timeout");
         resolve();
       }
     }, Math.max(timeoutMs, minWaitMs));
@@ -237,6 +236,60 @@ function resolveSocketIoTransports(serverUrl, order) {
 
 // src/auto-extract.ts
 var import_react2 = require("react");
+
+// src/utils/dev-logging.ts
+function isSdkDebugEnabled(devMode) {
+  if (devMode) return true;
+  if (typeof window !== "undefined" && Boolean(window.MODELNEX_DEBUG)) {
+    return true;
+  }
+  return process.env.NODE_ENV === "development";
+}
+function emitSdkDebugLog(message, payload, options) {
+  if (!isSdkDebugEnabled(options?.devMode)) return;
+  if (payload && Object.keys(payload).length > 0) {
+    console.log(message, payload);
+  } else {
+    console.log(message);
+  }
+  if (options?.dispatchEvent && typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent("modelnex-debug", { detail: { msg: message, data: payload } }));
+  }
+}
+function sanitizeActionList(actions) {
+  if (!Array.isArray(actions) || actions.length === 0) return void 0;
+  return actions.map(({ actionId }) => ({ actionId }));
+}
+function sanitizeAgentDebug(debug) {
+  if (!debug) return void 0;
+  const actions = sanitizeActionList(debug.actions);
+  const traces = Array.isArray(debug.traces) && debug.traces.length > 0 ? debug.traces.map((trace) => ({
+    step: trace.step,
+    actions: sanitizeActionList(trace.actions) ?? [],
+    results: Array.isArray(trace.results) && trace.results.length > 0 ? trace.results.map(({ actionId, success }) => ({ actionId, success })) : void 0
+  })) : void 0;
+  if ((!actions || actions.length === 0) && (!traces || traces.length === 0)) {
+    return void 0;
+  }
+  return {
+    ...actions ? { actions } : {},
+    ...traces ? { traces } : {}
+  };
+}
+function sanitizeChatMessages(messages, devMode) {
+  const includeDebug = isSdkDebugEnabled(devMode);
+  return messages.map((message) => {
+    if (message.role !== "assistant") {
+      return message;
+    }
+    return {
+      ...message,
+      debug: includeDebug ? sanitizeAgentDebug(message.debug) : void 0
+    };
+  });
+}
+
+// src/auto-extract.ts
 function simpleHash(str) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -500,7 +553,7 @@ function extractInteractiveElements() {
   }
   return elements;
 }
-function useAutoExtract() {
+function useAutoExtract(devMode) {
   const [elements, setElements] = (0, import_react2.useState)([]);
   const timerRef = (0, import_react2.useRef)(null);
   const lastSnapshotRef = (0, import_react2.useRef)("");
@@ -518,9 +571,11 @@ function useAutoExtract() {
     })));
     if (snapshot === lastSnapshotRef.current) return;
     lastSnapshotRef.current = snapshot;
-    console.log(`[ModelNex AutoExtract] Found ${extracted.length} interactive elements`, extracted.map((e) => ({ fp: e.fingerprint, role: e.role, text: e.text.slice(0, 30) })));
+    emitSdkDebugLog("[ModelNex AutoExtract] Scan complete", {
+      elementCount: extracted.length
+    }, { devMode });
     setElements(extracted);
-  }, []);
+  }, [devMode]);
   (0, import_react2.useEffect)(() => {
     const initialTimer = setTimeout(scan, 300);
     const observer = new MutationObserver((mutations) => {
@@ -835,7 +890,8 @@ function useModelNexSocket({
   setStagingFields,
   setExecutedFields,
   onSocketId,
-  websiteId
+  websiteId,
+  devMode
 }) {
   const socketRef = (0, import_react3.useRef)(null);
   const actionsRef = (0, import_react3.useRef)(actions);
@@ -868,12 +924,14 @@ function useModelNexSocket({
       allTaggedElements: tagsRef.current ? Array.from(tagsRef.current.values()) : void 0
     });
     socket.on("connect", () => {
-      console.log("ModelNex SDK: Connected to agent server", socket.id);
+      emitSdkDebugLog("[ModelNex SDK] Connected to agent server", {
+        socketId: socket.id ?? null
+      }, { devMode });
       onSocketId?.(socket.id || null);
       socket.emit("client:sync", buildSyncPayload());
     });
     socket.on("disconnect", () => {
-      console.log("ModelNex SDK: Disconnected from agent server");
+      emitSdkDebugLog("[ModelNex SDK] Disconnected from agent server", void 0, { devMode });
       onSocketId?.(null);
     });
     socket.on("agent:request_context", () => {
@@ -899,12 +957,11 @@ function useModelNexSocket({
         reasoning
       }) => {
         const log = (msg, data) => {
-          console.log(msg, data ?? "");
-          window.dispatchEvent(new CustomEvent("modelnex-debug", { detail: { msg, data } }));
+          emitSdkDebugLog(msg, data, { devMode, dispatchEvent: true });
         };
         if (reasoning || params?.fingerprint) {
           window.dispatchEvent(new CustomEvent("modelnex-action-start", {
-            detail: { actionId, fingerprint: params?.fingerprint ?? null, reasoning: reasoning ?? "" }
+            detail: { actionId, fingerprint: params?.fingerprint ?? null }
           }));
         }
         const sendResult = (success, result, error) => {
@@ -915,17 +972,18 @@ function useModelNexSocket({
         const currentActions = actionsRef.current;
         log("[SDK] agent:execute received", {
           actionId,
-          params,
-          registeredActions: Array.from(currentActions.keys())
+          executionId: executionId ?? null,
+          fieldId: fieldId ?? null,
+          hasParams: params != null
         });
         const NAV_ACTION_IDS = ["navigate_to_documents", "navigate_to_templates", "navigate_to_inbox", "navigate_to_settings", "navigate_to_template", "navigate_to_document", "navigate_to_folder", "navigate_editor_step"];
         const action = currentActions.get(actionId);
         if (action) {
           try {
             const validatedParams = action.schema.parse(params);
-            log("[SDK] Executing", { actionId, validatedParams });
+            log("[SDK] Executing action", { actionId });
             const execResult = await action.execute(validatedParams);
-            log("[SDK] Execute completed", { actionId });
+            log("[SDK] Action completed", { actionId });
             sendResult(true, execResult);
             if (NAV_ACTION_IDS.includes(actionId)) {
               requestAnimationFrame(() => {
@@ -949,25 +1007,29 @@ function useModelNexSocket({
             }
           } catch (err) {
             const errMsg = err instanceof Error ? err.message : String(err);
-            console.error(`[ModelNex SDK] Execution failed for ${actionId}`, err);
+            console.error(`[ModelNex SDK] Execution failed for ${actionId}: ${errMsg}`);
+            if (isSdkDebugEnabled(devMode)) {
+              window.dispatchEvent(
+                new CustomEvent("modelnex-debug", {
+                  detail: { msg: "[SDK] Execution failed", data: { actionId, error: errMsg } }
+                })
+              );
+            }
+            sendResult(false, void 0, errMsg);
+          }
+        } else {
+          const errMsg = `Action not found: ${actionId}`;
+          console.warn(`[ModelNex SDK] ${errMsg}`);
+          if (isSdkDebugEnabled(devMode)) {
             window.dispatchEvent(
               new CustomEvent("modelnex-debug", {
-                detail: { msg: "[SDK] Execution failed", data: { actionId, error: errMsg } }
+                detail: {
+                  msg: "[SDK] Action not found",
+                  data: { actionId }
+                }
               })
             );
-            sendResult(false, void 0, errMsg);
           }
-        } else {
-          const errMsg = `Action not found: ${actionId}`;
-          console.warn("[ModelNex SDK]", errMsg, "Available:", Array.from(currentActions.keys()));
-          window.dispatchEvent(
-            new CustomEvent("modelnex-debug", {
-              detail: {
-                msg: "[SDK] Action not found",
-                data: { actionId, available: Array.from(actions.keys()) }
-              }
-            })
-          );
           sendResult(false, void 0, errMsg);
         }
       }
@@ -1827,8 +1889,153 @@ async function captureScreenshot(selector) {
   return canvas.toDataURL("image/png");
 }
 
+// src/utils/experience-tool-bridge.ts
+var activeBridge = null;
+function registerExperienceToolBridge(bridge) {
+  activeBridge = bridge;
+  return () => {
+    if (activeBridge === bridge) {
+      activeBridge = null;
+    }
+  };
+}
+function getExperienceToolBridge() {
+  return activeBridge;
+}
+
+// src/utils/tourDiscovery.ts
+async function fetchTours(serverUrl, toursApiBase, websiteId, userType, userId, experienceType = "tour") {
+  try {
+    const params = new URLSearchParams({
+      websiteId,
+      userType
+    });
+    if (userId) params.set("userId", userId);
+    if (experienceType !== "tour") params.set("type", experienceType);
+    const res = await fetch(getTourApiUrl(serverUrl, toursApiBase, `/tours?${params.toString()}`));
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.tours ?? [];
+  } catch {
+    return [];
+  }
+}
+async function fetchTourById(serverUrl, toursApiBase, tourId, experienceType = "tour", websiteId) {
+  try {
+    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}`), websiteId));
+    if (experienceType !== "tour") {
+      url.searchParams.set("type", experienceType);
+    }
+    const res = await fetch(url.toString());
+    if (!res.ok) {
+      return null;
+    }
+    const data = await res.json();
+    return data.tour ?? null;
+  } catch {
+    return null;
+  }
+}
+async function markTourComplete(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
+  try {
+    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/complete`), websiteId));
+    if (experienceType !== "tour") {
+      url.searchParams.set("type", experienceType);
+    }
+    await fetch(url.toString(), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId })
+    });
+  } catch {
+  }
+}
+async function markTourDismissed(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
+  try {
+    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/dismiss`), websiteId));
+    if (experienceType !== "tour") {
+      url.searchParams.set("type", experienceType);
+    }
+    await fetch(url.toString(), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId })
+    });
+  } catch {
+  }
+}
+async function recordTourEvent(serverUrl, toursApiBase, tourId, userId, eventType, websiteId) {
+  try {
+    const url = withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/events`), websiteId);
+    await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId, eventType })
+    });
+  } catch {
+  }
+}
+function getToursBaseUrl(serverUrl, toursApiBase) {
+  if (toursApiBase?.startsWith("/")) {
+    return `${typeof window !== "undefined" ? window.location.origin : ""}${toursApiBase.replace(/\/$/, "")}`;
+  }
+  return serverUrl.replace(/\/$/, "");
+}
+function getTourApiUrl(serverUrl, toursApiBase, path) {
+  const base = getToursBaseUrl(serverUrl, toursApiBase);
+  return toursApiBase ? `${base}${path}` : `${base}/api${path}`;
+}
+function withWebsiteId(url, websiteId) {
+  if (!websiteId) {
+    return url;
+  }
+  const baseOrigin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+  const resolved = new URL(url, baseOrigin);
+  resolved.searchParams.set("websiteId", websiteId);
+  return resolved.toString();
+}
+function normalizeTrigger(trigger) {
+  if (trigger === "feature_launch" || trigger === "feature_unlocked" || trigger === "feature_unlock" || trigger === "new_feature") {
+    return "feature_launch";
+  }
+  if (trigger === "return_visit") {
+    return "return_visit";
+  }
+  return trigger ?? "first_visit";
+}
+function getStartPolicy(tour) {
+  return tour.startPolicy ?? (normalizeTrigger(tour.trigger) === "manual" ? "immediate_start" : "prompt_only");
+}
+function getNotificationType(tour) {
+  return tour.notificationType ?? "bubble_card";
+}
+function getUserProfileFeatures(userProfile) {
+  const directFeatures = Array.isArray(userProfile.features) ? userProfile.features : [];
+  const nestedFeatures = Array.isArray(userProfile.tourFacts?.features) ? userProfile.tourFacts.features : [];
+  return [...new Set([...directFeatures, ...nestedFeatures].filter((value) => Boolean(value)))];
+}
+function isTourEligible(tour, userProfile) {
+  switch (normalizeTrigger(tour.trigger)) {
+    case "first_visit":
+      return !!userProfile.isNewUser;
+    case "return_visit":
+      return userProfile.isNewUser === false;
+    case "feature_launch": {
+      const featureKey = tour.featureKey?.trim();
+      if (!featureKey) return false;
+      return getUserProfileFeatures(userProfile).includes(featureKey);
+    }
+    case "manual":
+      return false;
+    default:
+      return false;
+  }
+}
+
 // src/hooks/useBuiltinActions.ts
 var resolutionCache = /* @__PURE__ */ new Map();
+var DEFAULT_WORKFLOW_SEARCH_LIMIT = 5;
+var WORKFLOW_TYPES = ["onboarding", "tour"];
 function safeQueryAll2(selector) {
   try {
     return Array.from(document.querySelectorAll(selector)).filter(
@@ -2003,6 +2210,137 @@ function lastResortScan(fingerprint, options, elements) {
 function cacheResolution(originalFp, selector, resolvedFp) {
   resolutionCache.set(originalFp, { selector, resolvedFingerprint: resolvedFp });
 }
+function normalizeWorkflowQuery(value) {
+  return value.trim().toLowerCase();
+}
+function getWorkflowSearchText(tour) {
+  const firstSteps = (tour.steps || []).slice(0, 6).flatMap((step) => [step.goal, step.narration, step.ask]).filter(Boolean).join(" ");
+  return [
+    tour.name,
+    tour.type,
+    tour.trigger,
+    tour.startPolicy,
+    tour.featureKey,
+    tour.goal?.primaryAction,
+    tour.goal?.successMetric,
+    ...tour.targetUserTypes,
+    firstSteps
+  ].filter(Boolean).join(" ").toLowerCase();
+}
+function scoreWorkflowMatch(tour, query) {
+  const normalizedQuery = normalizeWorkflowQuery(query);
+  if (!normalizedQuery) return 1;
+  const name = tour.name.toLowerCase();
+  const featureKey = (tour.featureKey || "").toLowerCase();
+  const haystack = getWorkflowSearchText(tour);
+  if (name === normalizedQuery) return 140;
+  if (featureKey && featureKey === normalizedQuery) return 125;
+  if (name.includes(normalizedQuery)) return 115;
+  if (featureKey && featureKey.includes(normalizedQuery)) return 100;
+  if (haystack.includes(normalizedQuery)) return 85;
+  const words = normalizedQuery.split(/\s+/).filter((word) => word.length > 1);
+  if (words.length === 0) return 0;
+  const matched = words.filter((word) => haystack.includes(word));
+  if (matched.length === 0) return 0;
+  const ratio = matched.length / words.length;
+  return Math.round(ratio * 70);
+}
+function summarizeWorkflowStep(step, index) {
+  const detail = step.goal || step.ask || step.narration || step.rawNarration || "No description";
+  return `${index + 1}. [${step.type}] ${detail}`;
+}
+function formatWorkflowSummary(tour, options) {
+  const stepLimit = options?.stepLimit ?? 4;
+  const parts = [
+    `**${tour.name}**`,
+    `ID: ${tour.id}`,
+    `Type: ${tour.type || "tour"}`,
+    `Trigger: ${tour.trigger}`,
+    `Start policy: ${tour.startPolicy || "prompt_only"}`,
+    tour.featureKey ? `Feature key: ${tour.featureKey}` : null,
+    tour.targetUserTypes?.length ? `Target users: ${tour.targetUserTypes.join(", ")}` : null,
+    `Steps: ${tour.steps?.length ?? 0}`,
+    tour.goal?.primaryAction ? `Primary action: ${tour.goal.primaryAction}` : null
+  ].filter(Boolean);
+  if (options?.includeSteps) {
+    const stepPreview = (tour.steps || []).slice(0, stepLimit).map((step, index) => summarizeWorkflowStep(step, index)).join("\n");
+    if (stepPreview) {
+      parts.push(`Steps preview:
+${stepPreview}`);
+    }
+  }
+  return parts.join("\n");
+}
+function getRequestedWorkflowTypes(experienceType) {
+  if (!experienceType || experienceType === "all") {
+    return WORKFLOW_TYPES;
+  }
+  return [experienceType];
+}
+async function fetchAvailableWorkflows(getters, experienceType) {
+  const serverUrl = getters.serverUrl();
+  const websiteId = getters.websiteId();
+  if (!serverUrl) {
+    throw new Error("Server URL is not configured.");
+  }
+  if (!websiteId) {
+    throw new Error("websiteId is required to search workflows.");
+  }
+  const userProfile = getters.userProfile();
+  const userType = userProfile?.type || "";
+  const userId = userProfile?.userId;
+  const toursApiBase = getters.toursApiBase();
+  const requestedTypes = getRequestedWorkflowTypes(experienceType);
+  const lists = await Promise.all(
+    requestedTypes.map(
+      (type) => fetchTours(serverUrl, toursApiBase, websiteId, userType, userId, type)
+    )
+  );
+  return lists.flatMap(
+    (list, index) => list.map((tour) => ({
+      ...tour,
+      type: tour.type || requestedTypes[index]
+    }))
+  );
+}
+async function resolveWorkflowFromInput(getters, params) {
+  const serverUrl = getters.serverUrl();
+  const websiteId = getters.websiteId();
+  const toursApiBase = getters.toursApiBase();
+  if (!serverUrl) {
+    throw new Error("Server URL is not configured.");
+  }
+  if (params.workflowId) {
+    const requestedTypes = getRequestedWorkflowTypes(params.experienceType);
+    for (const type of requestedTypes) {
+      const workflow = await fetchTourById(serverUrl, toursApiBase, params.workflowId, type, websiteId);
+      if (workflow) {
+        return { workflow: { ...workflow, type: workflow.type || type } };
+      }
+    }
+  }
+  const query = params.name?.trim();
+  if (!query) {
+    return { workflow: null, reason: "Provide either workflowId or name." };
+  }
+  const workflows = await fetchAvailableWorkflows(getters, params.experienceType);
+  const ranked = workflows.map((workflow) => ({ workflow, score: scoreWorkflowMatch(workflow, query) })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score);
+  if (ranked.length === 0) {
+    return {
+      workflow: null,
+      reason: `No workflow matched "${query}". Try search_workflows first for available options.`
+    };
+  }
+  if (ranked.length > 1 && ranked[0].score === ranked[1].score) {
+    return {
+      workflow: null,
+      reason: `Multiple workflows matched "${query}". Try view_workflow with an exact workflowId.
+
+` + ranked.slice(0, 3).map(({ workflow }) => formatWorkflowSummary(workflow)).join("\n\n---\n\n")
+    };
+  }
+  return { workflow: ranked[0].workflow };
+}
 var screenshotSchema = import_zod2.z.object({
   selector: import_zod2.z.string().optional().describe("Optional CSS selector to capture a specific element. Omit to capture the full viewport.")
 });
@@ -2283,15 +2621,91 @@ function createSearchTaggedElementsAction(getTagStore) {
     }
   };
 }
+var workflowExperienceTypeSchema = import_zod2.z.enum(["onboarding", "tour", "all"]);
+var searchWorkflowsSchema = import_zod2.z.object({
+  query: import_zod2.z.string().optional().describe("Optional workflow name, feature, or task phrase to search for. Omit to list available workflows."),
+  experienceType: workflowExperienceTypeSchema.optional().describe("Which workflow type to search: onboarding, tour, or all. Default: onboarding."),
+  limit: import_zod2.z.number().optional().describe(`Maximum number of workflows to return (default: ${DEFAULT_WORKFLOW_SEARCH_LIMIT}).`)
+});
+function createSearchWorkflowsAction(getters) {
+  return {
+    id: "search_workflows",
+    description: "Search available workflows and tours that can be launched for the current website/user. Use this when the user asks for onboarding, a walkthrough, a tutorial, a guided setup, or a named workflow/tour.",
+    schema: searchWorkflowsSchema,
+    execute: async (params) => {
+      const workflows = await fetchAvailableWorkflows(getters, params.experienceType ?? "onboarding");
+      if (workflows.length === 0) {
+        return "No workflows are currently available for this website/user.";
+      }
+      const query = params.query?.trim();
+      const limit = params.limit ?? DEFAULT_WORKFLOW_SEARCH_LIMIT;
+      const ranked = workflows.map((workflow) => ({
+        workflow,
+        score: query ? scoreWorkflowMatch(workflow, query) : 1
+      })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).slice(0, limit);
+      if (ranked.length === 0) {
+        return `No workflows matched "${query}".`;
+      }
+      return ranked.map(({ workflow }) => formatWorkflowSummary(workflow)).join("\n\n---\n\n");
+    }
+  };
+}
+var resolveWorkflowSchema = import_zod2.z.object({
+  workflowId: import_zod2.z.string().optional().describe("Exact workflow id when known."),
+  name: import_zod2.z.string().optional().describe("Workflow name or a close name match when the id is unknown."),
+  experienceType: workflowExperienceTypeSchema.optional().describe("Which workflow type to search: onboarding, tour, or all. Default: onboarding.")
+});
+function createViewWorkflowAction(getters) {
+  return {
+    id: "view_workflow",
+    description: "View a specific workflow or tour in more detail, including its id, trigger, start policy, and the first few steps. Use after search_workflows when you need to inspect a candidate before starting it.",
+    schema: resolveWorkflowSchema,
+    execute: async (params) => {
+      const { workflow, reason } = await resolveWorkflowFromInput(getters, params);
+      if (!workflow) {
+        return reason || "Workflow not found.";
+      }
+      return formatWorkflowSummary(workflow, { includeSteps: true, stepLimit: 5 });
+    }
+  };
+}
+var startWorkflowSchema = resolveWorkflowSchema.extend({
+  reviewMode: import_zod2.z.boolean().optional().describe("Optional. Start in review mode instead of normal playback. Default: false.")
+});
+function createStartWorkflowAction(getters) {
+  return {
+    id: "start_workflow",
+    description: "Start a specific workflow or tour in the chat experience. Use this after search_workflows or view_workflow when the user wants to begin a named guided workflow.",
+    schema: startWorkflowSchema,
+    execute: async (params) => {
+      const { workflow, reason } = await resolveWorkflowFromInput(getters, params);
+      if (!workflow) {
+        return reason || "Workflow not found.";
+      }
+      const bridge = getExperienceToolBridge();
+      if (!bridge) {
+        return "Workflow launch is unavailable because no chat playback controller is mounted.";
+      }
+      bridge.startExperience(workflow, workflow.type, params.reviewMode ? {
+        reviewMode: true,
+        reviewMetadata: { trigger: "agent_tool" }
+      } : void 0);
+      return `Started workflow "${workflow.name}" (${workflow.id}).`;
+    }
+  };
+}
 var BUILTIN_ACTION_IDS = {
   screenshot: "take_screenshot",
   click: "click_element",
   fill: "fill_input",
   wait: "request_user_action",
   searchDocs: "search_docs",
-  searchTaggedElements: "search_tagged_elements"
+  searchTaggedElements: "search_tagged_elements",
+  searchWorkflows: "search_workflows",
+  viewWorkflow: "view_workflow",
+  startWorkflow: "start_workflow"
 };
-function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId) {
+function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId, toursApiBase, userProfile) {
   const registeredRef = (0, import_react8.useRef)(false);
   const tagStoreRef = (0, import_react8.useRef)(tagStore);
   tagStoreRef.current = tagStore;
@@ -2299,18 +2713,33 @@ function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl
   serverUrlRef.current = serverUrl;
   const websiteIdRef = (0, import_react8.useRef)(websiteId);
   websiteIdRef.current = websiteId;
+  const toursApiBaseRef = (0, import_react8.useRef)(toursApiBase);
+  toursApiBaseRef.current = toursApiBase;
+  const userProfileRef = (0, import_react8.useRef)(userProfile);
+  userProfileRef.current = userProfile;
   (0, import_react8.useEffect)(() => {
     if (registeredRef.current) return;
     registeredRef.current = true;
     const getTagStore = () => tagStoreRef.current;
     const getServerUrl = () => serverUrlRef.current;
     const getWebsiteId = () => websiteIdRef.current;
+    const getToursApiBase = () => toursApiBaseRef.current;
+    const getUserProfile = () => userProfileRef.current;
+    const workflowToolGetters = {
+      serverUrl: getServerUrl,
+      websiteId: getWebsiteId,
+      toursApiBase: getToursApiBase,
+      userProfile: getUserProfile
+    };
     registerAction(BUILTIN_SCREENSHOT_ACTION);
     registerAction(createClickAction(getTagStore));
     registerAction(createFillAction(getTagStore));
     registerAction(createWaitAction(getTagStore));
     registerAction(createSearchDocsAction(getServerUrl, getWebsiteId));
     registerAction(createSearchTaggedElementsAction(getTagStore));
+    registerAction(createSearchWorkflowsAction(workflowToolGetters));
+    registerAction(createViewWorkflowAction(workflowToolGetters));
+    registerAction(createStartWorkflowAction(workflowToolGetters));
     return () => {
       unregisterAction(BUILTIN_SCREENSHOT_ACTION.id);
       unregisterAction(BUILTIN_ACTION_IDS.click);
@@ -2318,6 +2747,9 @@ function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl
       unregisterAction(BUILTIN_ACTION_IDS.wait);
       unregisterAction(BUILTIN_ACTION_IDS.searchDocs);
       unregisterAction(BUILTIN_ACTION_IDS.searchTaggedElements);
+      unregisterAction(BUILTIN_ACTION_IDS.searchWorkflows);
+      unregisterAction(BUILTIN_ACTION_IDS.viewWorkflow);
+      unregisterAction(BUILTIN_ACTION_IDS.startWorkflow);
       registeredRef.current = false;
     };
   }, [registerAction, unregisterAction]);
@@ -2326,6 +2758,56 @@ function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl
 // src/constants.ts
 var DEFAULT_MODELNEX_SERVER_URL = "https://api.modelnex.com";
 
+// src/utils/dev-mode.ts
+var DEV_MODE_KEY_GLOBAL_NAMES = ["__MODELNEX_DEV_MODE_KEY__", "MODELNEX_DEV_MODE_KEY"];
+var devModeValidationCache = /* @__PURE__ */ new Map();
+function normalizeDevModeKey(value) {
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim();
+  return normalized || void 0;
+}
+function resolveInjectedDevModeKey(explicitDevModeKey) {
+  const normalizedExplicitKey = normalizeDevModeKey(explicitDevModeKey);
+  if (normalizedExplicitKey) return normalizedExplicitKey;
+  if (typeof window === "undefined") return void 0;
+  const browserWindow = window;
+  for (const globalName of DEV_MODE_KEY_GLOBAL_NAMES) {
+    const normalizedGlobalKey = normalizeDevModeKey(browserWindow[globalName]);
+    if (normalizedGlobalKey) return normalizedGlobalKey;
+  }
+  const scriptInjectedKey = typeof document !== "undefined" ? normalizeDevModeKey(
+    document.querySelector("script[data-modelnex-dev-mode-key]")?.dataset.modelnexDevModeKey
+  ) : void 0;
+  if (scriptInjectedKey) return scriptInjectedKey;
+  return void 0;
+}
+async function validateInjectedDevModeKey(serverUrl, websiteId, devModeKey) {
+  const normalizedWebsiteId = websiteId.trim();
+  const normalizedDevModeKey = devModeKey.trim();
+  if (!normalizedWebsiteId || !normalizedDevModeKey) return false;
+  const cacheKey = `${serverUrl}::${normalizedWebsiteId}::${normalizedDevModeKey}`;
+  const cached = devModeValidationCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  const validationPromise = fetch(
+    `${serverUrl.replace(/\/$/, "")}/api/websites/${encodeURIComponent(normalizedWebsiteId)}/dev-mode/verify`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ key: normalizedDevModeKey })
+    }
+  ).then(async (response) => {
+    if (!response.ok) return false;
+    const payload = await response.json().catch(() => null);
+    return payload?.enabled === true;
+  }).catch(() => false);
+  devModeValidationCache.set(cacheKey, validationPromise);
+  return validationPromise;
+}
+
 // src/hooks/useRunCommand.ts
 var import_react9 = require("react");
 function searchTaggedElementsForQuery(store, query, limit = 8) {
@@ -2368,7 +2850,10 @@ function useRunCommand(serverUrlOverride) {
       if (!res.ok) {
         throw new Error(data?.error ?? `Request failed: ${res.status}`);
       }
-      return data;
+      return {
+        ...data,
+        debug: sanitizeAgentDebug(data?.debug)
+      };
     },
     [baseUrl, tagStore]
   );
@@ -2572,135 +3057,6 @@ function readPreviewSessionSuppression() {
   }
 }
 
-// src/utils/tourDiscovery.ts
-async function fetchTours(serverUrl, toursApiBase, websiteId, userType, userId, experienceType = "tour") {
-  try {
-    const params = new URLSearchParams({
-      websiteId,
-      userType
-    });
-    if (userId) params.set("userId", userId);
-    if (experienceType !== "tour") params.set("type", experienceType);
-    const res = await fetch(getTourApiUrl(serverUrl, toursApiBase, `/tours?${params.toString()}`));
-    if (!res.ok) return [];
-    const data = await res.json();
-    return data.tours ?? [];
-  } catch {
-    return [];
-  }
-}
-async function fetchTourById(serverUrl, toursApiBase, tourId, experienceType = "tour", websiteId) {
-  try {
-    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}`), websiteId));
-    if (experienceType !== "tour") {
-      url.searchParams.set("type", experienceType);
-    }
-    const res = await fetch(url.toString());
-    if (!res.ok) {
-      return null;
-    }
-    const data = await res.json();
-    return data.tour ?? null;
-  } catch {
-    return null;
-  }
-}
-async function markTourComplete(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
-  try {
-    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/complete`), websiteId));
-    if (experienceType !== "tour") {
-      url.searchParams.set("type", experienceType);
-    }
-    await fetch(url.toString(), {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId })
-    });
-  } catch {
-  }
-}
-async function markTourDismissed(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
-  try {
-    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/dismiss`), websiteId));
-    if (experienceType !== "tour") {
-      url.searchParams.set("type", experienceType);
-    }
-    await fetch(url.toString(), {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId })
-    });
-  } catch {
-  }
-}
-async function recordTourEvent(serverUrl, toursApiBase, tourId, userId, eventType, websiteId) {
-  try {
-    const url = withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/events`), websiteId);
-    await fetch(url, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId, eventType })
-    });
-  } catch {
-  }
-}
-function getToursBaseUrl(serverUrl, toursApiBase) {
-  if (toursApiBase?.startsWith("/")) {
-    return `${typeof window !== "undefined" ? window.location.origin : ""}${toursApiBase.replace(/\/$/, "")}`;
-  }
-  return serverUrl.replace(/\/$/, "");
-}
-function getTourApiUrl(serverUrl, toursApiBase, path) {
-  const base = getToursBaseUrl(serverUrl, toursApiBase);
-  return toursApiBase ? `${base}${path}` : `${base}/api${path}`;
-}
-function withWebsiteId(url, websiteId) {
-  if (!websiteId) {
-    return url;
-  }
-  const baseOrigin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
-  const resolved = new URL(url, baseOrigin);
-  resolved.searchParams.set("websiteId", websiteId);
-  return resolved.toString();
-}
-function normalizeTrigger(trigger) {
-  if (trigger === "feature_launch" || trigger === "feature_unlocked" || trigger === "feature_unlock" || trigger === "new_feature") {
-    return "feature_launch";
-  }
-  if (trigger === "return_visit") {
-    return "return_visit";
-  }
-  return trigger ?? "first_visit";
-}
-function getStartPolicy(tour) {
-  return tour.startPolicy ?? (normalizeTrigger(tour.trigger) === "manual" ? "immediate_start" : "prompt_only");
-}
-function getNotificationType(tour) {
-  return tour.notificationType ?? "bubble_card";
-}
-function getUserProfileFeatures(userProfile) {
-  const directFeatures = Array.isArray(userProfile.features) ? userProfile.features : [];
-  const nestedFeatures = Array.isArray(userProfile.tourFacts?.features) ? userProfile.tourFacts.features : [];
-  return [...new Set([...directFeatures, ...nestedFeatures].filter((value) => Boolean(value)))];
-}
-function isTourEligible(tour, userProfile) {
-  switch (normalizeTrigger(tour.trigger)) {
-    case "first_visit":
-      return !!userProfile.isNewUser;
-    case "return_visit":
-      return userProfile.isNewUser === false;
-    case "feature_launch": {
-      const featureKey = tour.featureKey?.trim();
-      if (!featureKey) return false;
-      return getUserProfileFeatures(userProfile).includes(featureKey);
-    }
-    case "manual":
-      return false;
-    default:
-      return false;
-  }
-}
-
 // src/hooks/useTourPlayback.ts
 var import_react12 = require("react");
 
@@ -3405,7 +3761,9 @@ function useTourPlayback({
     const socket = tourSocketPool.acquire(serverUrl);
     socketRef.current = socket;
     const handleConnect = () => {
-      console.log("[TourClient] Connected to tour agent server:", socket.id);
+      emitSdkDebugLog("[TourClient] Connected to tour agent server", {
+        socketId: socket.id ?? null
+      }, { devMode: devModeRef.current });
       const profile = userProfileRef.current;
       const currentWebsiteId = websiteIdRef.current;
       if (currentWebsiteId && profile?.userId) {
@@ -3422,7 +3780,9 @@ function useTourPlayback({
       setServerState(payload);
     };
     const handleCommandCancel = (payload) => {
-      console.log("[TourClient] Received command_cancel:", payload);
+      emitSdkDebugLog("[TourClient] Received command cancel", {
+        commandBatchId: payload.commandBatchId ?? null
+      }, { devMode: devModeRef.current });
       if (payload.commandBatchId && activeCommandBatchIdRef.current === payload.commandBatchId) {
         activeCommandBatchIdRef.current = null;
         activeExecutionTokenRef.current++;
@@ -3437,14 +3797,22 @@ function useTourPlayback({
       const ownerKey = createTourPlaybackOwnerKey(serverUrl, websiteIdRef.current, experienceTypeRef.current);
       if (!shouldExecuteTourCommandBatch(isActiveRef.current) || !hasTourPlaybackOwnership(ownerKey, playbackOwnerIdRef.current)) {
         const activeType = experienceTypeRef.current;
-        console.log("[TourClient] Ignoring command batch for inactive playback hook:", activeType, payload.stepIndex);
+        emitSdkDebugLog("[TourClient] Ignoring command batch for inactive playback hook", {
+          experienceType: activeType,
+          stepIndex: payload.stepIndex
+        }, { devMode: devModeRef.current });
         return;
       }
       const emitIfOpen = (ev, data) => {
         if (socketRef.current !== socket) return;
         emitSocketEvent(socket, ev, data);
       };
-      console.log("[TourClient] Received command batch:", payload.stepIndex, payload.commands);
+      const commandBatchId = payload.commandBatchId ?? null;
+      emitSdkDebugLog("[TourClient] Received command batch", {
+        stepIndex: payload.stepIndex,
+        commandCount: Array.isArray(payload.commands) ? payload.commands.length : 0,
+        commandBatchId
+      }, { devMode: devModeRef.current });
       runCleanup(pendingManualWaitCleanupRef.current);
       pendingManualWaitCleanupRef.current = null;
       if (voiceInputResolveRef.current) {
@@ -3454,7 +3822,6 @@ function useTourPlayback({
       }
       setPlaybackState("executing");
       commandInFlightRef.current = true;
-      const commandBatchId = payload.commandBatchId ?? null;
       turnIdRef.current = payload.turnId ?? turnIdRef.current;
       const clearCommandBatchId = () => {
         if (activeCommandBatchIdRef.current === commandBatchId) {
@@ -3500,7 +3867,7 @@ function useTourPlayback({
         }
       }
       if (!payload.commands || !Array.isArray(payload.commands)) {
-        console.warn("[TourClient] Payload commands is not an array:", payload);
+        console.warn("[TourClient] Command batch payload was invalid.");
         commandInFlightRef.current = false;
         emitIfOpen("tour:action_result", {
           success: false,
@@ -3549,7 +3916,9 @@ function useTourPlayback({
       };
       const executeOne = async (action) => {
         assertNotInterrupted();
-        console.log("[TourClient] Executing action:", action?.type, action?.params ? JSON.stringify(action.params).slice(0, 120) : "");
+        emitSdkDebugLog("[TourClient] Executing action", {
+          actionType: action?.type ?? "unknown"
+        }, { devMode: devModeRef.current });
         const currentStep = tourRef.current?.steps?.[stepIndexRef.current] ?? null;
         const executeTimeline = async (params = {}) => {
           const segments = Array.isArray(params.segments) ? params.segments : [];
@@ -3736,7 +4105,7 @@ function useTourPlayback({
           handleTourEnd();
           return { result: "ended" };
         }
-        console.warn("[TourClient] Unknown action type:", action?.type, "- skipping");
+        console.warn(`[TourClient] Unknown action type: ${String(action?.type ?? "unknown")}. Skipping.`);
         return { result: "unknown_action_skipped" };
       };
       try {
@@ -3792,14 +4161,15 @@ function useTourPlayback({
           clearCommandBatchId();
           return;
         }
-        console.error("[TourClient] Command batch execution failed:", err);
+        const errMsg = err instanceof Error ? err.message : String(err);
+        console.error(`[TourClient] Command batch execution failed: ${errMsg}`);
         if (reviewModeRef.current && activeTourId && activePreviewRunId) {
           void logPreviewEvent(serverUrl, toursApiBaseRef.current, activeTourId, activePreviewRunId, websiteId, {
             stepOrder: stepIndexRef.current,
             eventType: "command_batch_failed",
             payload: {
               commandBatchId,
-              error: String(err),
+              error: errMsg,
               partialResults: results
             },
             status: "active",
@@ -3809,7 +4179,7 @@ function useTourPlayback({
         emitIfOpen("tour:action_result", {
           success: false,
           reason: "execution_error",
-          error: String(err),
+          error: errMsg,
           results,
           commandBatchId,
           runId: runIdRef.current,
@@ -3835,7 +4205,10 @@ function useTourPlayback({
           let manualWaitTarget = await resolveTargetElement2(waitTargetHints, currentStep);
           if (inputLikeWait && preferredWaitTarget && manualWaitTarget && manualWaitTarget !== preferredWaitTarget && !isEditableWaitTarget(manualWaitTarget) && isEditableWaitTarget(preferredWaitTarget)) {
             manualWaitTarget = preferredWaitTarget;
-            console.log("[TourClient] wait_for_input: preferring current editable target over hinted step target", manualWaitTarget);
+            emitSdkDebugLog("[TourClient] wait_for_input preferred highlighted editable target", {
+              stepIndex: stepIndexRef.current,
+              event: waitEvent
+            }, { devMode: devModeRef.current });
           }
           if (manualWaitTarget) {
             const manualWait = createManualWaitForTarget(manualWaitTarget, waitEvent, currentStep);
@@ -3849,7 +4222,10 @@ function useTourPlayback({
           manualWaitPromise = manualWait.promise;
           manualWaitKind = manualWait.kind;
           pendingManualWaitCleanupRef.current = manualWait.cleanup;
-          console.log("[TourClient] wait_for_input: using current editable target as fallback wait target", preferredWaitTarget);
+          emitSdkDebugLog("[TourClient] wait_for_input using fallback editable target", {
+            stepIndex: stepIndexRef.current,
+            event: waitEvent
+          }, { devMode: devModeRef.current });
         }
         if (!manualWaitPromise && inputLikeWait) {
           const firstInput = document.querySelector(
@@ -3860,7 +4236,10 @@ function useTourPlayback({
             manualWaitPromise = manualWait.promise;
             manualWaitKind = manualWait.kind;
             pendingManualWaitCleanupRef.current = manualWait.cleanup;
-            console.log("[TourClient] wait_for_input: no target found, falling back to first visible editable element", firstInput);
+            emitSdkDebugLog("[TourClient] wait_for_input falling back to first editable element", {
+              stepIndex: stepIndexRef.current,
+              event: waitEvent
+            }, { devMode: devModeRef.current });
           }
         }
         setPlaybackState(manualWaitKind ? "waiting_input" : "waiting_voice");
@@ -3942,12 +4321,17 @@ function useTourPlayback({
       const tour = tourData.tourContext ?? tourRef.current;
       const expType = experienceTypeRef.current;
       if (tour?.type && tour.type !== expType) {
-        console.log(`[TourClient] Ignoring ${tour.type} start (this hook is for ${expType})`);
+        emitSdkDebugLog("[TourClient] Ignoring tour start for mismatched experience type", {
+          incomingType: tour.type,
+          hookType: expType
+        }, { devMode: devModeRef.current });
         return;
       }
       const ownerKey = createTourPlaybackOwnerKey(serverUrl, websiteIdRef.current, expType);
       if (!claimTourPlaybackOwnership(ownerKey, playbackOwnerIdRef.current)) {
-        console.log(`[TourClient] Ignoring ${expType} start because another hook already owns playback`);
+        emitSdkDebugLog("[TourClient] Ignoring tour start because playback ownership is already claimed", {
+          experienceType: expType
+        }, { devMode: devModeRef.current });
         return;
       }
       claimedPlaybackOwnerKeyRef.current = ownerKey;
@@ -3972,6 +4356,8 @@ function useTourPlayback({
           },
           currentStepOrder: 0
         });
+      } else if (tour?.id && userProfile?.userId) {
+        void recordTourEvent(serverUrl, toursApiBaseRef.current, tour.id, userProfile.userId, "started", websiteId);
       }
       try {
         const { generateMinifiedAOM: generateMinifiedAOM2 } = await Promise.resolve().then(() => (init_aom(), aom_exports));
@@ -3984,7 +4370,8 @@ function useTourPlayback({
           });
         }
       } catch (e) {
-        console.warn("[TourClient] Initial DOM sync failed:", e);
+        const errMsg = e instanceof Error ? e.message : String(e);
+        console.warn(`[TourClient] Initial DOM sync failed: ${errMsg}`);
       }
     };
     const handleTourUpdate = (payload) => {
@@ -4022,12 +4409,11 @@ function useTourPlayback({
         return;
       }
       if (isDev) {
-        console.log(`%c[ModelNex Tour] ${entry.type}`, "color: #3b82f6; font-weight: bold", entry);
-        if (typeof window !== "undefined") {
-          window.dispatchEvent(new CustomEvent("modelnex-debug", {
-            detail: { msg: `[Tour Timeline] ${entry.type}`, data: entry }
-          }));
-        }
+        emitSdkDebugLog(`[Tour Timeline] ${entry.type}`, {
+          stepIndex: entry?.data?.stepIndex ?? null,
+          runId: entry?.data?.runId ?? null,
+          turnId: entry?.data?.turnId ?? null
+        }, { devMode: devModeRef.current, dispatchEvent: true });
       }
     };
     socket.on("connect", handleConnect);
@@ -4038,7 +4424,7 @@ function useTourPlayback({
     socket.on("tour:update", handleTourUpdate);
     socket.on("tour:end", handleTourEndEvent);
     socket.on("tour:debug_log", handleDebugLog);
-    console.log("[ModelNex SDK] Tour playback initialized. Debug logs enabled:", devModeRef.current || process.env.NODE_ENV === "development");
+    emitSdkDebugLog("[ModelNex SDK] Tour playback initialized", void 0, { devMode: devModeRef.current });
     return () => {
       socket.off("connect", handleConnect);
       socket.off("tour:server_state", handleServerState);
@@ -4149,6 +4535,8 @@ function useTourPlayback({
         status: "stopped",
         currentStepOrder: stepIndexRef.current
       });
+    } else if (tourRef.current?.id && userProfile?.userId) {
+      void recordTourEvent(serverUrl, toursApiBaseRef.current, tourRef.current.id, userProfile.userId, "cancelled", websiteId);
     }
     if (reviewModeRef.current) {
       if (tourRef.current?.id) {
@@ -4221,7 +4609,9 @@ function useTourPlayback({
       isPlaybackActive: isActiveRef.current,
       startRequested: startRequestedRef.current
     })) {
-      console.log("[TourClient] Ignoring duplicate start request while playback is already active or starting:", tour.id);
+      emitSdkDebugLog("[TourClient] Ignoring duplicate start request while playback is already active or starting", {
+        tourId: tour.id
+      }, { devMode: devModeRef.current });
       return;
     }
     setPendingTour(null);
@@ -4237,7 +4627,9 @@ function useTourPlayback({
     }
     const ownerKey = createTourPlaybackOwnerKey(serverUrl, websiteIdRef.current, tour.type ?? experienceTypeRef.current);
     if (!claimTourPlaybackOwnership(ownerKey, playbackOwnerIdRef.current)) {
-      console.log("[TourClient] Ignoring duplicate start request because another hook already owns this experience:", tour.id);
+      emitSdkDebugLog("[TourClient] Ignoring duplicate start request because another hook already owns this experience", {
+        tourId: tour.id
+      }, { devMode: devModeRef.current });
       return;
     }
     claimedPlaybackOwnerKeyRef.current = ownerKey;
@@ -4260,7 +4652,8 @@ function useTourPlayback({
         setPreviewRunId(previewRun.id);
         previewRunIdRef.current = previewRun.id;
       } catch (err) {
-        console.warn("[TourClient] Failed to create preview run:", err);
+        const errMsg = err instanceof Error ? err.message : String(err);
+        console.warn(`[TourClient] Failed to create preview run: ${errMsg}`);
         setReviewStatusMessage("Preview review logging is unavailable.");
         setPreviewRunId(null);
         previewRunIdRef.current = null;
@@ -4309,7 +4702,7 @@ function useTourPlayback({
         if (!tour) {
           clearActiveDraftPreview(experienceType);
           persistSuppressedDraftPreview(draftPreview);
-          console.warn("[ModelNex] Tour fetch failed:", tourId, experienceType, "(Check ModelNex server is running and CORS allows this origin)");
+          console.warn(`[ModelNex] Tour fetch failed for ${experienceType}:${tourId}. Check the ModelNex server and CORS configuration.`);
           return;
         }
         if (cancelled) {
@@ -4332,7 +4725,8 @@ function useTourPlayback({
           await runTour(tour, previewOptions);
         }
       } catch (err) {
-        console.warn("[ModelNex] Tour test failed:", err);
+        const errMsg = err instanceof Error ? err.message : String(err);
+        console.warn(`[ModelNex] Tour test failed: ${errMsg}`);
       }
     })();
     return () => {
@@ -4442,7 +4836,8 @@ function useTourPlayback({
         setPlaybackState("executing");
       }
     } catch (err) {
-      console.warn("[TourClient] Failed to submit review feedback:", err);
+      const errMsg = err instanceof Error ? err.message : String(err);
+      console.warn(`[TourClient] Failed to submit review feedback: ${errMsg}`);
       setReviewStatusMessage("Unable to save correction.");
     } finally {
       setReviewSubmitting(false);
@@ -4483,23 +4878,29 @@ function useTourPlayback({
   }, [voice]);
   const handleVoiceInput = (0, import_react12.useCallback)((transcript) => {
     const text = transcript.trim();
-    console.log("[TourAgent] handleVoiceInput called with text:", text);
+    emitSdkDebugLog("[TourAgent] Voice input received", {
+      textLength: text.length
+    }, { devMode: devModeRef.current });
     if (!text) return;
     if (interruptExecution(text)) {
       return;
     }
     if (voiceInputResolveRef.current) {
-      console.log("[TourAgent] Resolving loop waiting_voice with text:", text);
+      emitSdkDebugLog("[TourAgent] Resolving waiting voice input", void 0, { devMode: devModeRef.current });
       voiceInputResolveRef.current(text);
     } else if (isSocketWritable(socketRef.current)) {
-      console.log("[TourAgent] Forwarding ambient voice to server:", text);
+      emitSdkDebugLog("[TourAgent] Forwarding ambient voice input to server", {
+        textLength: text.length
+      }, { devMode: devModeRef.current });
       emitSocketEvent(socketRef.current, "tour:user_input", {
         transcript: text,
         runId: runIdRef.current,
         turnId: turnIdRef.current
       });
     } else {
-      console.log("[TourAgent] buffering voice input because socket is not ready:", text);
+      emitSdkDebugLog("[TourAgent] Buffering voice input until socket is ready", {
+        textLength: text.length
+      }, { devMode: devModeRef.current });
       pendingInputBufRef.current = text;
     }
   }, [interruptExecution]);
@@ -5654,7 +6055,6 @@ function useVoice(serverUrl) {
     setIsListening(false);
   }, [stopLiveSttTransport]);
   const startListening = (0, import_react14.useCallback)((onResult, onInterruption, onError, options = {}) => {
-    console.log("[Voice] startListening called, options:", options);
     stopListening();
     listeningSessionIdRef.current = createVoiceDebugId("stt");
     listeningStartedAtRef.current = performance.now();
@@ -5868,7 +6268,9 @@ function useVoice(serverUrl) {
                 recorder.start(LIVE_STT_TIMESLICE_MS);
               }
               setIsListening(true);
-              console.log("[Voice] Live STT pipeline active (Deepgram streaming + WebRTC loopback)");
+              emitVoiceDebug("stt_live_pipeline_active", {
+                listeningSessionId: listeningSessionIdRef.current
+              });
             } catch (err) {
               const normalizedError = normalizeSttError(err);
               console.warn("[Voice] Failed to start live STT recorder:", normalizedError);
@@ -8616,6 +9018,7 @@ function Tooltip({ children, title }) {
   );
 }
 var BUBBLE_EXPANDED_STORAGE_KEY = "modelnex-chat-bubble-expanded";
+var BUBBLE_DOCKED_STORAGE_KEY = "modelnex-chat-bubble-docked";
 var TOUR_MINIMIZED_STORAGE_KEY = "modelnex-tour-bubble-minimized";
 var BotIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "var(--modelnex-bubble-icon-size, 20px)", height: "var(--modelnex-bubble-icon-size, 20px)", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }),
@@ -8629,6 +9032,18 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { wid
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
 var MinimizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 18h8" }) });
+var DockIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 3v10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m8 9 4 4 4-4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 17h16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6 21h12" })
+] });
+var UndockIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 21V11" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m8 15 4-4 4 4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 7h16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6 3h12" })
+] });
 var TrashIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 6h18" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
@@ -8677,7 +9092,7 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
-            "Agent traces (",
+            "Execution summary (",
             traces.length,
             " step",
             traces.length !== 1 ? "s" : "",
@@ -8693,21 +9108,9 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: command })
       ] }),
       !hasTraceContent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px", padding: "8px", background: "#fef3c7", borderRadius: "4px", borderLeft: "3px solid #f59e0b" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: "#92400e", marginBottom: "4px" }, children: "No trace data" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#71717a", marginBottom: "6px" }, children: "The server may not have OPENROUTER_API_KEY set, or the request failed before the agent ran." }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#fff", borderRadius: "4px", fontSize: "10px", overflow: "auto", maxHeight: "120px", color: "#27272a" }, children: JSON.stringify(debug, null, 2) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: "#92400e", marginBottom: "4px" }, children: "No safe debug summary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#71717a" }, children: "Verbose prompts, reasoning, and raw tool payloads are intentionally hidden by the SDK." })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        debug.llmInput && traces.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: "#3f3f46", marginBottom: "4px" }, children: "Input \u2192 agent" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#a1a1aa", marginBottom: "2px" }, children: "System" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "80px", overflow: "auto" }, children: debug.llmInput.systemPrompt ?? "(empty)" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#a1a1aa", marginBottom: "2px" }, children: "User" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "80px", overflow: "auto" }, children: debug.llmInput.userMessage ?? "(empty)" })
-          ] })
-        ] }),
         traces.map((t) => {
           const isStepExpanded = expandedSteps.has(t.step);
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px", paddingBottom: "12px", borderBottom: "1px solid #e4e4e7" }, children: [
@@ -8740,31 +9143,6 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
               }
             ),
             isStepExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-              t.reasoning && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#71717a", marginBottom: "2px" }, children: "Reasoning" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#fef3c7", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "100px", overflow: "auto", borderLeft: "3px solid #f59e0b", color: "#451a03" }, children: t.reasoning })
-              ] }),
-              t.llmInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#71717a", marginBottom: "2px" }, children: "Input \u2192 agent" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "4px" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#a1a1aa", marginBottom: "2px" }, children: "System" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "80px", overflow: "auto" }, children: t.llmInput.systemPrompt ?? "(empty)" })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#a1a1aa", marginBottom: "2px" }, children: "User" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "60px", overflow: "auto" }, children: t.llmInput.userMessage ?? "(empty)" })
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#71717a", marginBottom: "2px" }, children: "Output \u2190 agent" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "60px", overflow: "auto" }, children: t.llmOutput ?? "(empty)" })
-                ] })
-              ] }),
-              !t.llmInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#71717a", marginBottom: "2px" }, children: "LLM output" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "60px", overflow: "auto" }, children: t.llmOutput ?? "(empty)" })
-              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#71717a", marginBottom: "2px" }, children: "Actions" }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: JSON.stringify(t.actions, null, 2) })
@@ -8776,10 +9154,6 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
             ] })
           ] }, t.step);
         }),
-        traces.length === 0 && debug.llmOutput && debug.llmOutput.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: "#3f3f46", marginBottom: "4px" }, children: "LLM output" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: debug.llmOutput.join("\n\n") })
-        ] }),
         traces.length === 0 && (debug.actions?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: "#3f3f46", marginBottom: "4px" }, children: "Executed actions" }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#f4f4f5", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: JSON.stringify(debug.actions, null, 2) })
@@ -8849,6 +9223,7 @@ function ModelNexChatBubble({
   const ctx = (0, import_react18.useContext)(ModelNexContext);
   const [hydrated, setHydrated] = (0, import_react18.useState)(false);
   const [expanded, setExpanded] = (0, import_react18.useState)(false);
+  const [docked, setDocked] = (0, import_react18.useState)(false);
   const [input, setInput] = (0, import_react18.useState)("");
   const messages = ctx?.chatMessages ?? [];
   const setMessages = ctx?.setChatMessages ?? (() => {
@@ -8903,6 +9278,11 @@ function ModelNexChatBubble({
   const activePlayback = playbackController.playback;
   const activeExperienceType = playbackController.activeExperienceType;
   const startingExperienceType = playbackController.startingExperienceType;
+  (0, import_react18.useEffect)(() => {
+    return registerExperienceToolBridge({
+      startExperience: playbackController.startExperience
+    });
+  }, [playbackController.startExperience]);
   const createPlaybackView = (0, import_react18.useCallback)((experienceType) => {
     const isActiveExperience = activePlayback.isActive && activeExperienceType === experienceType;
     const pendingTour = playbackController.pendingPrompt?.experienceType === experienceType ? playbackController.pendingPrompt.tour : null;
@@ -8969,7 +9349,6 @@ function ModelNexChatBubble({
         tagStore.setTagsBatch(data.tags, true);
         lastAutoTaggedUrlRef.current = currentUrl;
         localStorage.setItem(storageKey, "true");
-        console.log(`[ModelNex] Auto-tagged ${data.tags.length} elements for ${currentUrl}`);
       }
     } catch (err) {
       console.warn("[ModelNex] Auto-tag error:", err);
@@ -9000,8 +9379,10 @@ function ModelNexChatBubble({
     setHydrated(true);
     try {
       setExpanded(sessionStorage.getItem(BUBBLE_EXPANDED_STORAGE_KEY) === "true");
+      setDocked(sessionStorage.getItem(BUBBLE_DOCKED_STORAGE_KEY) === "true");
     } catch {
       setExpanded(false);
+      setDocked(false);
     }
   }, []);
   const sttActiveRef = (0, import_react18.useRef)(false);
@@ -9061,6 +9442,13 @@ function ModelNexChatBubble({
     } catch {
     }
   }, [tourPlayback.isActive, onboardingPlayback.isActive]);
+  const setDockedState = (0, import_react18.useCallback)((next) => {
+    setDocked(next);
+    try {
+      sessionStorage.setItem(BUBBLE_DOCKED_STORAGE_KEY, String(next));
+    } catch {
+    }
+  }, []);
   (0, import_react18.useEffect)(() => {
     if (shouldAutoExpandForPendingPrompt({
       pendingPrompt,
@@ -9124,12 +9512,9 @@ function ModelNexChatBubble({
     };
     const listeningExperience = resolveTourListeningExperience(preferredExperience, listeningState);
     preferredListeningExperienceRef.current = listeningExperience;
-    console.log("[ChatBubble] startTourListening called. listeningState:", listeningState, "preferredExperience:", preferredExperience, "listeningExperience:", listeningExperience);
     if (!canStartTourListening(listeningState)) {
-      console.log("[ChatBubble] startTourListening bailed out early.");
       return;
     }
-    console.log("[ChatBubble] Proceeding to startTourListening...");
     sttActiveRef.current = true;
     updateTourSttError(null);
     resetFloatingLiveTranscriptSuppression();
@@ -9335,7 +9720,7 @@ function ModelNexChatBubble({
           content: summary || fallbackContent,
           summary: summary ?? void 0,
           nextSteps: nextSteps ?? void 0,
-          debug: data?.debug ?? void 0
+          debug: devMode ? data?.debug ?? void 0 : void 0
         }
       ]);
     } catch (err) {
@@ -9422,11 +9807,13 @@ function ModelNexChatBubble({
     fontFamily: "var(--modelnex-font)",
     ...themeStyles
   };
+  const desktopPanelHeight = docked ? "min(calc(100vh - 48px), calc(var(--modelnex-panel-max-height, 600px) + 180px))" : "var(--modelnex-panel-max-height, 600px)";
+  const desktopPanelMaxHeight = docked ? "calc(100vh - 48px)" : "calc(100vh - 120px)";
   const panelStyle = {
     width: isMobile ? "100%" : "var(--modelnex-panel-width, 380px)",
     maxWidth: "calc(100vw - 32px)",
-    height: isMobile ? "100%" : "var(--modelnex-panel-max-height, 600px)",
-    maxHeight: "calc(100vh - 120px)",
+    height: isMobile ? "100%" : desktopPanelHeight,
+    maxHeight: isMobile ? "100%" : desktopPanelMaxHeight,
     borderRadius: isMobile ? "0" : "var(--modelnex-radius-panel, 20px)",
     border: isMobile ? "none" : "1px solid var(--modelnex-border, #e4e4e7)",
     background: "var(--modelnex-bg, #ffffff)",
@@ -9578,6 +9965,31 @@ function ModelNexChatBubble({
                 ] })
               ] }) }),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                !isMobile && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: docked ? "Undock" : "Dock", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "button",
+                  {
+                    onClick: () => setDockedState(!docked),
+                    style: {
+                      padding: "8px 10px",
+                      borderRadius: "10px",
+                      border: "none",
+                      background: docked ? "rgba(79,70,229,0.08)" : "transparent",
+                      cursor: "pointer",
+                      color: docked ? "var(--modelnex-accent, #4f46e5)" : "#71717a",
+                      transition: "all 0.2s",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      fontSize: "12px",
+                      fontWeight: 700
+                    },
+                    "aria-label": docked ? "Undock chat bubble" : "Dock chat bubble",
+                    children: [
+                      docked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UndockIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DockIcon, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: docked ? "Undock" : "Dock" })
+                    ]
+                  }
+                ) }),
                 (tourPlayback.isActive || onboardingPlayback.isActive || voice.isSpeaking) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: voice.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
@@ -10351,7 +10763,7 @@ function ModelNexChatBubble({
                         )
                       }
                     ),
-                    msg.role === "assistant" && msg.debug && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AgentTraces, { debug: msg.debug, command: messages[i - 1]?.content ?? "" })
+                    msg.role === "assistant" && devMode && 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",
@@ -11330,6 +11742,7 @@ var ModelNexProvider = ({
   userProfile,
   toursApiBase,
   devMode,
+  devModeKey,
   serverUrl: serverUrlProp
 }) => {
   const serverUrl = serverUrlProp ?? DEFAULT_MODELNEX_SERVER_URL;
@@ -11352,6 +11765,25 @@ var ModelNexProvider = ({
   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());
+  const [validatedBrowserDevMode, setValidatedBrowserDevMode] = (0, import_react21.useState)(false);
+  const resolvedDevModeKey = (0, import_react21.useMemo)(() => resolveInjectedDevModeKey(devModeKey), [devModeKey]);
+  (0, import_react21.useEffect)(() => {
+    let cancelled = false;
+    if (!websiteId || !resolvedDevModeKey) {
+      setValidatedBrowserDevMode(false);
+      return () => {
+        cancelled = true;
+      };
+    }
+    void validateInjectedDevModeKey(serverUrl, websiteId, resolvedDevModeKey).then((enabled) => {
+      if (cancelled) return;
+      setValidatedBrowserDevMode(enabled);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedDevModeKey, serverUrl, websiteId]);
+  const effectiveDevMode = Boolean(devMode) || validatedBrowserDevMode;
   const registerAction = (0, import_react21.useCallback)((action) => {
     setActions((prev) => {
       const next = new Map(prev);
@@ -11366,30 +11798,41 @@ var ModelNexProvider = ({
       return next;
     });
   }, []);
-  const extractedElements = useAutoExtract();
+  const extractedElements = useAutoExtract(effectiveDevMode);
   const tagStore = useTagStore({ serverUrl, websiteId });
-  useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId);
+  useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId, toursApiBase, userProfile);
   const CHAT_STORAGE_KEY = "modelnex-chat-messages";
   const [chatMessages, setChatMessagesRaw] = (0, import_react21.useState)([]);
   (0, import_react21.useEffect)(() => {
     try {
       const stored = sessionStorage.getItem(CHAT_STORAGE_KEY);
       if (stored) {
-        setChatMessagesRaw(JSON.parse(stored));
+        setChatMessagesRaw(sanitizeChatMessages(JSON.parse(stored), effectiveDevMode));
       }
     } catch {
     }
-  }, []);
+  }, [effectiveDevMode]);
+  (0, import_react21.useEffect)(() => {
+    setChatMessagesRaw((prev) => {
+      const next = sanitizeChatMessages(prev, effectiveDevMode);
+      try {
+        sessionStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(next));
+      } catch {
+      }
+      return next;
+    });
+  }, [effectiveDevMode]);
   const setChatMessages = (0, import_react21.useCallback)((action) => {
     setChatMessagesRaw((prev) => {
-      const next = typeof action === "function" ? action(prev) : action;
+      const resolved = typeof action === "function" ? action(prev) : action;
+      const next = sanitizeChatMessages(resolved, effectiveDevMode);
       try {
         sessionStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(next));
       } catch {
       }
       return next;
     });
-  }, []);
+  }, [effectiveDevMode]);
   useModelNexSocket({
     serverUrl,
     actions,
@@ -11401,7 +11844,8 @@ var ModelNexProvider = ({
     setStagingFields,
     setExecutedFields,
     onSocketId: setSocketId,
-    websiteId
+    websiteId,
+    devMode: effectiveDevMode
   });
   useFieldHighlight(stagingFields, executedFields, setExecutedFields);
   (0, import_react21.useEffect)(() => {
@@ -11436,9 +11880,9 @@ var ModelNexProvider = ({
       voiceMuted,
       setVoiceMuted,
       socketId,
-      devMode
+      devMode: effectiveDevMode
     }),
-    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, toursApiBase, voiceMuted, socketId, devMode]
+    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile?.userId, userProfile?.type, userProfile?.isNewUser, toursApiBase, voiceMuted, socketId, effectiveDevMode]
   );
   return import_react21.default.createElement(
     ModelNexContext.Provider,