@modelnex/sdk 0.5.44 → 0.5.45

package/dist/index.js

@@ -30,200 +30,636 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/utils/editable-controls.ts
-function getTagName(element) {
-  return String(element?.tagName || "").toLowerCase();
-}
-function getRole(element) {
-  const role = element && typeof element.getAttribute === "function" ? element.getAttribute("role") : null;
-  return String(role || "").toLowerCase();
+// 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 getLabelControl(element) {
-  const labelCtor = typeof HTMLLabelElement !== "undefined" ? HTMLLabelElement : null;
-  if (labelCtor && element instanceof labelCtor && element.control instanceof HTMLElement) {
-    return element.control;
+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 } }));
   }
-  return null;
 }
-function isValueBearingElement(element) {
-  if (!element) return false;
-  const inputCtor = typeof HTMLInputElement !== "undefined" ? HTMLInputElement : null;
-  if (inputCtor && element instanceof inputCtor) return true;
-  const textareaCtor = typeof HTMLTextAreaElement !== "undefined" ? HTMLTextAreaElement : null;
-  if (textareaCtor && element instanceof textareaCtor) return true;
-  const selectCtor = typeof HTMLSelectElement !== "undefined" ? HTMLSelectElement : null;
-  if (selectCtor && element instanceof selectCtor) return true;
-  return ["input", "textarea", "select"].includes(getTagName(element));
+function sanitizeActionList(actions) {
+  if (!Array.isArray(actions) || actions.length === 0) return void 0;
+  return actions.map(({ actionId }) => ({ actionId }));
 }
-function findEditableControlInShadowRoot(root) {
-  if (!root) return null;
-  if (root.shadowRoot) {
-    const found = root.shadowRoot.querySelector(EDITABLE_CONTROL_SELECTOR);
-    if (found) {
-      return resolveEditableControlElement(found);
-    }
+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;
   }
-  for (const child of Array.from(root.children)) {
-    if (child instanceof HTMLElement) {
-      const found = findEditableControlInShadowRoot(child);
-      if (found) return found;
+  return {
+    ...actions ? { actions } : {},
+    ...traces ? { traces } : {}
+  };
+}
+function sanitizeChatMessages(messages, devMode) {
+  const includeDebug = isSdkDebugEnabled(devMode);
+  return messages.map((message) => {
+    if (message.role !== "assistant") {
+      return message;
     }
-  }
-  return null;
+    return {
+      ...message,
+      debug: includeDebug ? sanitizeAgentDebug(message.debug) : void 0
+    };
+  });
 }
-function resolveEditableControlElement(element) {
-  const labelControl = getLabelControl(element);
-  if (labelControl) {
-    return resolveEditableControlElement(labelControl);
+var init_dev_logging = __esm({
+  "src/utils/dev-logging.ts"() {
+    "use strict";
   }
-  if (isValueBearingElement(element) || element.isContentEditable) {
-    return element;
+});
+
+// src/auto-extract.ts
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
   }
-  const role = getRole(element);
-  if (EDITABLE_ROLES.has(role)) {
-    const nested2 = element.querySelector(EDITABLE_CONTROL_SELECTOR);
-    if (nested2 && nested2 !== element) {
-      return resolveEditableControlElement(nested2);
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+function isStableDomId(id) {
+  if (!id) return false;
+  const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  const REACT_USE_ID_RE = /^(?:radix-)?:[rR][^\s]*$/;
+  if (REACT_USE_ID_RE.test(id)) return false;
+  if (/^\d+$/.test(id)) return false;
+  if (UUID_RE.test(id)) return false;
+  return true;
+}
+function getNearestHeading(el) {
+  const shellContainer = el.closest('nav, aside, header, [role="navigation"], [role="complementary"], [role="banner"]');
+  const boundary = shellContainer || document.body;
+  let current = el;
+  while (current && current !== boundary) {
+    let sibling = current.previousElementSibling;
+    while (sibling) {
+      if (/^H[1-6]$/.test(sibling.tagName)) {
+        return sibling.textContent?.trim().slice(0, 100) || null;
+      }
+      const innerHeading = sibling.querySelector("h1, h2, h3, h4, h5, h6");
+      if (innerHeading) {
+        return innerHeading.textContent?.trim().slice(0, 100) || null;
+      }
+      sibling = sibling.previousElementSibling;
     }
-    const shadowNested2 = findEditableControlInShadowRoot(element);
-    return shadowNested2 ?? element;
-  }
-  const nested = element.querySelector(EDITABLE_CONTROL_SELECTOR);
-  if (nested) {
-    return resolveEditableControlElement(nested);
+    const parentHeading = current.parentElement?.querySelector("h1, h2, h3, h4, h5, h6");
+    if (parentHeading && !current.contains(parentHeading)) {
+      return parentHeading.textContent?.trim().slice(0, 100) || null;
+    }
+    current = current.parentElement;
   }
-  const shadowNested = findEditableControlInShadowRoot(element);
-  return shadowNested ?? element;
+  return null;
 }
-function readEditableControlValue(element, options = {}) {
-  const target = resolveEditableControlElement(element);
-  const maskPasswords = options.maskPasswords !== false;
-  if (isValueBearingElement(target)) {
-    const type = String(target.type || "").toLowerCase();
-    if (maskPasswords && type === "password") {
-      return "***";
+function getParentContainer(el) {
+  let current = el.parentElement;
+  while (current && current !== document.body) {
+    const role = current.getAttribute("role");
+    const tag = current.tagName.toLowerCase();
+    const state = current.getAttribute("data-state");
+    if (role === "dialog" || role === "alertdialog" || tag === "dialog") {
+      const title = current.querySelector('h2, h3, [class*="title"]');
+      const titleText = title?.textContent?.trim().slice(0, 60) || "";
+      return titleText ? `dialog:${titleText}` : "dialog";
     }
-    return String(target.value || "").trim().slice(0, 100);
-  }
-  const genericValue = target.value;
-  if (typeof genericValue === "string") {
-    return genericValue.trim().slice(0, 100);
+    if (role === "menu" || role === "listbox") {
+      return role;
+    }
+    if (current.hasAttribute("popover") || state === "open" && current.getAttribute("data-radix-popper-content-wrapper") !== null) {
+      return "popover";
+    }
+    if (current.getAttribute("data-radix-menu-content") !== null || role === "menubar") {
+      return "dropdown-menu";
+    }
+    if (role === "tabpanel") {
+      const label = current.getAttribute("aria-label") || current.getAttribute("aria-labelledby");
+      return label ? `tabpanel:${label.slice(0, 40)}` : "tabpanel";
+    }
+    if (tag === "nav" || role === "navigation") {
+      const label = current.getAttribute("aria-label");
+      return label ? `navigation:${label.slice(0, 40)}` : "navigation";
+    }
+    if (tag === "aside") {
+      return "sidebar";
+    }
+    if (tag === "header") {
+      return "header";
+    }
+    current = current.parentElement;
   }
-  if (typeof genericValue === "number" && Number.isFinite(genericValue)) {
-    return String(genericValue).trim().slice(0, 100);
+  return null;
+}
+function getRowContext(el) {
+  let current = el.parentElement;
+  while (current && current !== document.body) {
+    const tag = current.tagName.toLowerCase();
+    if (tag === "tr" || tag === "li" || current.getAttribute("role") === "row" || current.getAttribute("role") === "listitem") {
+      const rowText = current.textContent?.trim().replace(/\s+/g, " ").slice(0, 120) || "";
+      return rowText;
+    }
+    current = current.parentElement;
   }
-  if (target.isContentEditable) {
-    return String(target.textContent || "").trim().slice(0, 100);
+  return "";
+}
+function getNearestAncestorId(el) {
+  let current = el.parentElement;
+  while (current && current !== document.body) {
+    const aid = current.id;
+    if (isStableDomId(aid)) {
+      return aid;
+    }
+    const ancestorTestId = current.getAttribute("data-testid");
+    if (ancestorTestId) return `[data-testid="${ancestorTestId}"]`;
+    current = current.parentElement;
   }
-  const ariaValueText = target.getAttribute("aria-valuetext");
-  if (ariaValueText?.trim()) {
-    return ariaValueText.trim().slice(0, 100);
+  return null;
+}
+function generateFingerprint(el) {
+  const tag = el.tagName.toLowerCase();
+  const testId = el.getAttribute("data-testid");
+  const id = el.id;
+  const name = el.getAttribute("name");
+  const ariaLabel = el.getAttribute("aria-label");
+  const type = el.type || "";
+  const text = el.textContent?.trim().slice(0, 80) || "";
+  if (testId) return `tid:${testId}`;
+  if (isStableDomId(id)) return `id:${id}`;
+  if (name) return `name:${tag}:${name}`;
+  if (ariaLabel) {
+    const rowCtx2 = getRowContext(el);
+    if (rowCtx2) {
+      return `aria:${simpleHash(ariaLabel + ":" + rowCtx2)}:${ariaLabel.slice(0, 40)}`;
+    }
+    return `aria:${simpleHash(ariaLabel)}:${ariaLabel.slice(0, 40)}`;
   }
-  const ariaValueNow = target.getAttribute("aria-valuenow");
-  if (ariaValueNow?.trim()) {
-    return ariaValueNow.trim().slice(0, 100);
+  if (tag === "a") {
+    const href = el.getAttribute("href");
+    if (href && href !== "#" && !href.startsWith("javascript:")) {
+      return `href:${simpleHash(href + ":" + text)}:${text.slice(0, 30) || href.slice(0, 30)}`;
+    }
   }
-  return String(target.textContent || "").trim().slice(0, 100);
-}
-function readEditableControlPlaceholder(element) {
-  const target = resolveEditableControlElement(element);
-  if (typeof target.placeholder === "string") {
-    return String(target.placeholder || "").trim().slice(0, 100);
+  const ancestorId = getNearestAncestorId(el);
+  if (ancestorId) {
+    return `anc:${simpleHash(ancestorId + ":" + tag + ":" + text)}:${text.slice(0, 30) || tag}`;
   }
-  return String(target.getAttribute("placeholder") || "").trim().slice(0, 100);
+  const heading = getNearestHeading(el) || "";
+  const rowCtx = getRowContext(el);
+  const raw = `${tag}:${type}:${text}:${heading}:${rowCtx}`;
+  return `hash:${simpleHash(raw)}:${text.slice(0, 30) || tag}`;
 }
-function readEditableControlName(element) {
-  const target = resolveEditableControlElement(element);
-  const explicitName = target.name;
-  if (typeof explicitName === "string" && explicitName.trim()) {
-    return explicitName.trim().slice(0, 100);
-  }
-  return String(
-    target.getAttribute("name") || target.getAttribute("id") || target.getAttribute("aria-label") || ""
-  ).trim().slice(0, 100);
+function classifyRole(el) {
+  const tag = el.tagName.toLowerCase();
+  const role = el.getAttribute("role");
+  if (tag === "button" || role === "button") return "button";
+  if (tag === "a") return "link";
+  if (tag === "input") return "input";
+  if (tag === "textarea") return "textarea";
+  if (tag === "select") return "select";
+  if (tag === "form") return "form";
+  if (tag === "label") return "label";
+  if (role === "link") return "link";
+  if (role === "menuitem") return "menuitem";
+  if (role === "menuitemcheckbox") return "menuitem";
+  if (role === "menuitemradio") return "menuitem";
+  if (role === "tab") return "tab";
+  if (role === "checkbox") return "checkbox";
+  if (role === "radio") return "radio";
+  if (role === "switch") return "switch";
+  if (role === "slider") return "slider";
+  if (role === "combobox") return "combobox";
+  if (role === "option") return "option";
+  if (role === "treeitem") return "treeitem";
+  if (role === "gridcell") return "gridcell";
+  if (el.hasAttribute("tabindex") && el.getAttribute("tabindex") !== "-1") return "interactive";
+  if (el.hasAttribute("cmdk-item")) return "menuitem";
+  return null;
 }
-function readEditableControlType(element) {
-  const target = resolveEditableControlElement(element);
-  const role = getRole(target);
-  if (role) return role;
-  const explicitType = target.type;
-  if (typeof explicitType === "string" && explicitType.trim()) {
-    return explicitType.trim().toLowerCase().slice(0, 50);
+function isVisible(el) {
+  if (el.offsetParent === null) {
+    const computed = window.getComputedStyle(el);
+    if (computed.position !== "fixed" && computed.position !== "sticky") {
+      if (computed.display === "none" || computed.visibility === "hidden") {
+        return false;
+      }
+      const rect2 = el.getBoundingClientRect();
+      if (rect2.width === 0 && rect2.height === 0) return false;
+    }
   }
-  const attributeType = target.getAttribute("type");
-  if (attributeType?.trim()) {
-    return attributeType.trim().toLowerCase().slice(0, 50);
+  const style = window.getComputedStyle(el);
+  if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
+    return false;
   }
-  return getTagName(target);
-}
-function isEditableControlDisabled(element) {
-  const target = resolveEditableControlElement(element);
-  const ariaDisabled = String(target.getAttribute("aria-disabled") || "").toLowerCase();
-  if (ariaDisabled === "true") return true;
-  return Boolean(target.disabled);
+  const rect = el.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
 }
-function collectEditableControls(scope) {
+function extractInteractiveElements() {
+  const elements = [];
   const seen = /* @__PURE__ */ new Set();
-  const controls = [];
-  for (const rawElement of Array.from(scope.querySelectorAll(EDITABLE_CONTROL_SELECTOR))) {
-    const resolved = resolveEditableControlElement(rawElement);
-    if (seen.has(resolved)) continue;
-    if (isValueBearingElement(resolved) && String(resolved.type || "").toLowerCase() === "hidden") {
-      continue;
-    }
-    seen.add(resolved);
-    controls.push(resolved);
+  try {
+    const nodes = document.querySelectorAll(INTERACTIVE_SELECTOR);
+    nodes.forEach((node) => {
+      const el = node;
+      if (!isVisible(el)) return;
+      if (el.closest(".modelnex-chat-panel, .modelnex-studio-overlay, [data-modelnex-internal]")) return;
+      const role = classifyRole(el);
+      if (!role) return;
+      let fingerprint = generateFingerprint(el);
+      if (seen.has(fingerprint)) {
+        let idx = 2;
+        while (seen.has(`${fingerprint}#${idx}`)) idx++;
+        fingerprint = `${fingerprint}#${idx}`;
+      }
+      seen.add(fingerprint);
+      const rect = el.getBoundingClientRect();
+      const text = el.textContent?.trim().slice(0, 200) || "";
+      elements.push({
+        fingerprint,
+        tagName: el.tagName.toLowerCase(),
+        text,
+        role,
+        rect: {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        },
+        attributes: {
+          id: el.id || void 0,
+          name: el.getAttribute("name") || void 0,
+          type: el.type || void 0,
+          ariaLabel: el.getAttribute("aria-label") || void 0,
+          dataTestId: el.getAttribute("data-testid") || void 0,
+          href: el.href || void 0,
+          placeholder: el.placeholder || void 0
+        },
+        nearestHeading: getNearestHeading(el),
+        parentContainer: getParentContainer(el),
+        disabled: el.disabled || el.getAttribute("aria-disabled") === "true",
+        element: el
+      });
+    });
+  } catch (err) {
+    console.warn("[ModelNex] Auto-extraction error:", err);
   }
-  return controls;
+  return elements;
 }
-var EDITABLE_ROLES, EDITABLE_CONTROL_SELECTOR;
-var init_editable_controls = __esm({
-  "src/utils/editable-controls.ts"() {
+function useAutoExtract(devMode) {
+  const [elements, setElements] = (0, import_react2.useState)([]);
+  const timerRef = (0, import_react2.useRef)(null);
+  const lastSnapshotRef = (0, import_react2.useRef)("");
+  const scan = (0, import_react2.useCallback)(() => {
+    if (typeof document === "undefined") return;
+    const extracted = extractInteractiveElements();
+    const snapshot = JSON.stringify(extracted.map((e) => ({
+      fingerprint: e.fingerprint,
+      role: e.role,
+      text: e.text,
+      rect: e.rect,
+      disabled: e.disabled,
+      nearestHeading: e.nearestHeading,
+      parentContainer: e.parentContainer
+    })));
+    if (snapshot === lastSnapshotRef.current) return;
+    lastSnapshotRef.current = snapshot;
+    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) => {
+      const hasRelevantMutation = mutations.some((mutation) => {
+        const target = mutation.target;
+        if (target?.closest?.(".modelnex-chat-panel, .modelnex-studio-overlay, [data-modelnex-internal]")) {
+          return false;
+        }
+        return true;
+      });
+      if (!hasRelevantMutation) return;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(scan, 500);
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["disabled", "aria-disabled", "hidden", "style", "class"]
+    });
+    const handlePositionChange = () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(scan, 200);
+    };
+    window.addEventListener("scroll", handlePositionChange, { passive: true });
+    window.addEventListener("resize", handlePositionChange, { passive: true });
+    return () => {
+      clearTimeout(initialTimer);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      observer.disconnect();
+      window.removeEventListener("scroll", handlePositionChange);
+      window.removeEventListener("resize", handlePositionChange);
+    };
+  }, [scan]);
+  return elements;
+}
+var import_react2, INTERACTIVE_SELECTOR;
+var init_auto_extract = __esm({
+  "src/auto-extract.ts"() {
     "use strict";
-    EDITABLE_ROLES = /* @__PURE__ */ new Set(["textbox", "combobox"]);
-    EDITABLE_CONTROL_SELECTOR = [
+    import_react2 = require("react");
+    init_dev_logging();
+    INTERACTIVE_SELECTOR = [
+      "button",
+      "a",
+      // All anchor tags (SPA links may not have href)
       'input:not([type="hidden"])',
       "textarea",
       "select",
-      '[contenteditable="true"]',
-      '[role="textbox"]',
-      '[role="combobox"]'
+      "label[for]",
+      '[role="button"]',
+      '[role="link"]',
+      '[role="menuitem"]',
+      '[role="menuitemcheckbox"]',
+      '[role="menuitemradio"]',
+      '[role="tab"]',
+      '[role="checkbox"]',
+      '[role="radio"]',
+      '[role="switch"]',
+      '[role="slider"]',
+      '[role="combobox"]',
+      '[role="option"]',
+      '[role="treeitem"]',
+      '[role="gridcell"]',
+      '[tabindex]:not([tabindex="-1"])',
+      "[data-discover]",
+      // React Router links
+      "[cmdk-item]",
+      // cmdk menu items
+      "form"
     ].join(", ");
   }
 });
 
-// src/utils/aom.ts
-var aom_exports = {};
-__export(aom_exports, {
-  clearAOMMap: () => clearAOMMap,
-  generateMinifiedAOM: () => generateMinifiedAOM,
-  getElementByUid: () => getElementByUid
-});
-function generateMinifiedAOM() {
-  uidMap.clear();
-  nextUid = 1;
-  const interactiveSet = /* @__PURE__ */ new Set();
-  const interactiveCandidates = [
-    ...Array.from(document.querySelectorAll(
-      'button, a, input, select, textarea, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], [role="textbox"], [role="combobox"], [contenteditable="true"]'
-    )),
-    ...collectEditableControls(document)
-  ];
-  const nodes = [];
-  interactiveCandidates.forEach((candidate) => {
-    const el = resolveEditableControlElement(candidate);
-    if (interactiveSet.has(el)) {
-      return;
+// src/utils/editable-controls.ts
+function getTagName(element) {
+  return String(element?.tagName || "").toLowerCase();
+}
+function getRole(element) {
+  const role = element && typeof element.getAttribute === "function" ? element.getAttribute("role") : null;
+  return String(role || "").toLowerCase();
+}
+function getLabelControl(element) {
+  const labelCtor = typeof HTMLLabelElement !== "undefined" ? HTMLLabelElement : null;
+  if (labelCtor && element instanceof labelCtor && element.control instanceof HTMLElement) {
+    return element.control;
+  }
+  return null;
+}
+function isValueBearingElement(element) {
+  if (!element) return false;
+  const inputCtor = typeof HTMLInputElement !== "undefined" ? HTMLInputElement : null;
+  if (inputCtor && element instanceof inputCtor) return true;
+  const textareaCtor = typeof HTMLTextAreaElement !== "undefined" ? HTMLTextAreaElement : null;
+  if (textareaCtor && element instanceof textareaCtor) return true;
+  const selectCtor = typeof HTMLSelectElement !== "undefined" ? HTMLSelectElement : null;
+  if (selectCtor && element instanceof selectCtor) return true;
+  return ["input", "textarea", "select"].includes(getTagName(element));
+}
+function findEditableControlInShadowRoot(root) {
+  if (!root) return null;
+  if (root.shadowRoot) {
+    const found = root.shadowRoot.querySelector(EDITABLE_CONTROL_SELECTOR);
+    if (found) {
+      return resolveEditableControlElement(found);
     }
-    interactiveSet.add(el);
-    if (!el.offsetParent && (el.offsetWidth === 0 || el.offsetHeight === 0)) {
-      return;
+  }
+  for (const child of Array.from(root.children)) {
+    if (child instanceof HTMLElement) {
+      const found = findEditableControlInShadowRoot(child);
+      if (found) return found;
     }
-    if (el.closest("#modelnex-studio-root") || el.closest("#modelnex-active-agent-root")) {
+  }
+  return null;
+}
+function resolveEditableControlElement(element) {
+  const labelControl = getLabelControl(element);
+  if (labelControl) {
+    return resolveEditableControlElement(labelControl);
+  }
+  if (isValueBearingElement(element) || element.isContentEditable) {
+    return element;
+  }
+  const role = getRole(element);
+  if (EDITABLE_ROLES.has(role)) {
+    const nested2 = element.querySelector(EDITABLE_CONTROL_SELECTOR);
+    if (nested2 && nested2 !== element) {
+      return resolveEditableControlElement(nested2);
+    }
+    const shadowNested2 = findEditableControlInShadowRoot(element);
+    return shadowNested2 ?? element;
+  }
+  const nested = element.querySelector(EDITABLE_CONTROL_SELECTOR);
+  if (nested) {
+    return resolveEditableControlElement(nested);
+  }
+  const shadowNested = findEditableControlInShadowRoot(element);
+  return shadowNested ?? element;
+}
+function readEditableControlValue(element, options = {}) {
+  const target = resolveEditableControlElement(element);
+  const maskPasswords = options.maskPasswords !== false;
+  if (isValueBearingElement(target)) {
+    const type = String(target.type || "").toLowerCase();
+    if (maskPasswords && type === "password") {
+      return "***";
+    }
+    return String(target.value || "").trim().slice(0, 100);
+  }
+  const genericValue = target.value;
+  if (typeof genericValue === "string") {
+    return genericValue.trim().slice(0, 100);
+  }
+  if (typeof genericValue === "number" && Number.isFinite(genericValue)) {
+    return String(genericValue).trim().slice(0, 100);
+  }
+  if (target.isContentEditable) {
+    return String(target.textContent || "").trim().slice(0, 100);
+  }
+  const ariaValueText = target.getAttribute("aria-valuetext");
+  if (ariaValueText?.trim()) {
+    return ariaValueText.trim().slice(0, 100);
+  }
+  const ariaValueNow = target.getAttribute("aria-valuenow");
+  if (ariaValueNow?.trim()) {
+    return ariaValueNow.trim().slice(0, 100);
+  }
+  return String(target.textContent || "").trim().slice(0, 100);
+}
+function readEditableControlPlaceholder(element) {
+  const target = resolveEditableControlElement(element);
+  if (typeof target.placeholder === "string") {
+    return String(target.placeholder || "").trim().slice(0, 100);
+  }
+  return String(target.getAttribute("placeholder") || "").trim().slice(0, 100);
+}
+function readEditableControlName(element) {
+  const target = resolveEditableControlElement(element);
+  const explicitName = target.name;
+  if (typeof explicitName === "string" && explicitName.trim()) {
+    return explicitName.trim().slice(0, 100);
+  }
+  return String(
+    target.getAttribute("name") || target.getAttribute("id") || target.getAttribute("aria-label") || ""
+  ).trim().slice(0, 100);
+}
+function readEditableControlType(element) {
+  const target = resolveEditableControlElement(element);
+  const role = getRole(target);
+  if (role) return role;
+  const explicitType = target.type;
+  if (typeof explicitType === "string" && explicitType.trim()) {
+    return explicitType.trim().toLowerCase().slice(0, 50);
+  }
+  const attributeType = target.getAttribute("type");
+  if (attributeType?.trim()) {
+    return attributeType.trim().toLowerCase().slice(0, 50);
+  }
+  return getTagName(target);
+}
+function isEditableControlDisabled(element) {
+  const target = resolveEditableControlElement(element);
+  const ariaDisabled = String(target.getAttribute("aria-disabled") || "").toLowerCase();
+  if (ariaDisabled === "true") return true;
+  return Boolean(target.disabled);
+}
+function collectEditableControls(scope) {
+  const seen = /* @__PURE__ */ new Set();
+  const controls = [];
+  for (const rawElement of Array.from(scope.querySelectorAll(EDITABLE_CONTROL_SELECTOR))) {
+    const resolved = resolveEditableControlElement(rawElement);
+    if (seen.has(resolved)) continue;
+    if (isValueBearingElement(resolved) && String(resolved.type || "").toLowerCase() === "hidden") {
+      continue;
+    }
+    seen.add(resolved);
+    controls.push(resolved);
+  }
+  return controls;
+}
+var EDITABLE_ROLES, EDITABLE_CONTROL_SELECTOR;
+var init_editable_controls = __esm({
+  "src/utils/editable-controls.ts"() {
+    "use strict";
+    EDITABLE_ROLES = /* @__PURE__ */ new Set(["textbox", "combobox"]);
+    EDITABLE_CONTROL_SELECTOR = [
+      'input:not([type="hidden"])',
+      "textarea",
+      "select",
+      '[contenteditable="true"]',
+      '[role="textbox"]',
+      '[role="combobox"]'
+    ].join(", ");
+  }
+});
+
+// src/utils/aom.ts
+var aom_exports = {};
+__export(aom_exports, {
+  clearAOMMap: () => clearAOMMap,
+  generateMinifiedAOM: () => generateMinifiedAOM,
+  getElementByUid: () => getElementByUid
+});
+function normalizeUidText(value) {
+  return String(value || "").replace(/\s+/g, " ").trim().slice(0, 120);
+}
+function buildStableUidLocator(el) {
+  const tag = el.tagName.toLowerCase();
+  const role = normalizeUidText(el.getAttribute("role"));
+  const testId = normalizeUidText(el.getAttribute("data-testid"));
+  const fingerprint = normalizeUidText(generateFingerprint(el));
+  const controlName = normalizeUidText(readEditableControlName(el));
+  const ariaLabel = normalizeUidText(el.getAttribute("aria-label"));
+  const placeholder = normalizeUidText(readEditableControlPlaceholder(el));
+  const inputType = normalizeUidText(el.type || el.getAttribute("type"));
+  const href = el instanceof HTMLAnchorElement ? normalizeUidText(el.getAttribute("href")) : "";
+  return [
+    tag,
+    role,
+    testId,
+    fingerprint,
+    controlName,
+    ariaLabel,
+    placeholder,
+    inputType,
+    href
+  ].join("::");
+}
+function allocateUid() {
+  return `node:${nextUid++}`;
+}
+function resolveStableUid(el, activeUids) {
+  const existingElementUid = elementUidMap.get(el);
+  if (existingElementUid && !activeUids.has(existingElementUid)) {
+    return existingElementUid;
+  }
+  const locatorKey = buildStableUidLocator(el);
+  const existingLocatorUid = locatorUidMap.get(locatorKey);
+  if (existingLocatorUid && !activeUids.has(existingLocatorUid)) {
+    elementUidMap.set(el, existingLocatorUid);
+    return existingLocatorUid;
+  }
+  const uid = allocateUid();
+  elementUidMap.set(el, uid);
+  if (locatorKey) {
+    locatorUidMap.set(locatorKey, uid);
+  }
+  return uid;
+}
+function generateMinifiedAOM() {
+  const interactiveSet = /* @__PURE__ */ new Set();
+  const activeUids = /* @__PURE__ */ new Set();
+  const nextUidMap = /* @__PURE__ */ new Map();
+  const interactiveCandidates = [
+    ...Array.from(document.querySelectorAll(
+      'button, a, input, select, textarea, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], [role="textbox"], [role="combobox"], [contenteditable="true"]'
+    )),
+    ...collectEditableControls(document)
+  ];
+  const nodes = [];
+  interactiveCandidates.forEach((candidate) => {
+    const el = resolveEditableControlElement(candidate);
+    if (interactiveSet.has(el)) {
       return;
     }
-    const uid = `node:${nextUid++}`;
-    uidMap.set(uid, el);
+    interactiveSet.add(el);
+    if (!el.offsetParent && (el.offsetWidth === 0 || el.offsetHeight === 0)) {
+      return;
+    }
+    if (el.closest("#modelnex-studio-root") || el.closest("#modelnex-active-agent-root")) {
+      return;
+    }
+    const uid = resolveStableUid(el, activeUids);
+    activeUids.add(uid);
+    nextUidMap.set(uid, el);
     let text = (el.textContent || "").replace(/\s+/g, " ").trim();
     const ariaLabel = el.getAttribute("aria-label");
     const placeholder = el.getAttribute("placeholder");
@@ -254,539 +690,169 @@ function generateMinifiedAOM() {
         const url = new URL(el.href);
         node.href = url.pathname + url.search + url.hash;
       } catch {
-        node.href = el.getAttribute("href");
-      }
-    }
-    nodes.push(node);
-  });
-  return { nodes };
-}
-function getElementByUid(uid) {
-  return uidMap.get(uid) || null;
-}
-function clearAOMMap() {
-  uidMap.clear();
-  nextUid = 1;
-}
-var uidMap, nextUid;
-var init_aom = __esm({
-  "src/utils/aom.ts"() {
-    "use strict";
-    init_editable_controls();
-    uidMap = /* @__PURE__ */ new Map();
-    nextUid = 1;
-  }
-});
-
-// src/utils/dom-sync.ts
-var dom_sync_exports = {};
-__export(dom_sync_exports, {
-  waitForDomSettle: () => waitForDomSettle
-});
-function waitForDomSettle(options = {}) {
-  const { timeoutMs = 5e3, debounceMs = 400, minWaitMs = 100 } = options;
-  return new Promise((resolve) => {
-    let debounceTimer = null;
-    let resolved = false;
-    const maxTimer = setTimeout(() => {
-      if (!resolved) {
-        resolved = true;
-        cleanup();
-        resolve();
-      }
-    }, Math.max(timeoutMs, minWaitMs));
-    const finish = () => {
-      if (!resolved) {
-        resolved = true;
-        cleanup();
-        resolve();
-      }
-    };
-    const observer = new MutationObserver((mutations) => {
-      const hasSignificantMutations = mutations.some((m) => {
-        if (m.target instanceof HTMLElement) {
-          if (m.target.hasAttribute("data-modelnex-tour-highlight")) return false;
-          if (m.target.hasAttribute("data-modelnex-caption")) return false;
-          if (m.target.closest("#modelnex-studio-root")) return false;
-          if (m.target.closest("#modelnex-active-agent-root")) return false;
-        }
-        return true;
-      });
-      if (!hasSignificantMutations) return;
-      if (debounceTimer) clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(finish, debounceMs);
-    });
-    const cleanup = () => {
-      observer.disconnect();
-      if (debounceTimer) clearTimeout(debounceTimer);
-      clearTimeout(maxTimer);
-    };
-    setTimeout(() => {
-      if (resolved) return;
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true
-      });
-      debounceTimer = setTimeout(finish, debounceMs);
-    }, minWaitMs);
-  });
-}
-var init_dom_sync = __esm({
-  "src/utils/dom-sync.ts"() {
-    "use strict";
-  }
-});
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  DEFAULT_MODELNEX_SERVER_URL: () => DEFAULT_MODELNEX_SERVER_URL,
-  ModelNexChatBubble: () => ModelNexChatBubble,
-  ModelNexOnboardingPanel: () => ModelNexOnboardingPanel,
-  ModelNexProvider: () => ModelNexProvider,
-  RecordingOverlay: () => RecordingOverlay,
-  StudioOverlay: () => StudioOverlay,
-  TourProgressPanel: () => TourProgressPanel,
-  UIStateProvider: () => UIStateProvider,
-  buildDraftPreviewUrl: () => buildDraftPreviewUrl,
-  buildRecordingCapturePayload: () => buildRecordingCapturePayload,
-  buildRecordingStepGoal: () => buildRecordingStepGoal,
-  clearActiveDraftPreview: () => clearActiveDraftPreview,
-  extractInteractiveElements: () => extractInteractiveElements,
-  generateFingerprint: () => generateFingerprint,
-  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,
-  shouldShowRecordingOverlay: () => shouldShowRecordingOverlay,
-  useActionHighlight: () => useActionHighlight,
-  useAgentViewport: () => useAgentViewport,
-  useAutoExtract: () => useAutoExtract,
-  useExperiencePlayback: () => useExperiencePlayback,
-  useOnboardingPlayback: () => useOnboardingPlayback,
-  useRecordingMode: () => useRecordingMode,
-  useRunCommand: () => useRunCommand,
-  useTagStore: () => useTagStore,
-  useTourPlayback: () => useTourPlayback,
-  useUIState: () => useUIState,
-  useViewportTrack: () => useViewportTrack,
-  useVisibleIds: () => useVisibleIds,
-  useVoice: () => useVoice
-});
-module.exports = __toCommonJS(index_exports);
-var import_react21 = __toESM(require("react"));
-
-// src/context.ts
-var import_react = require("react");
-var ModelNexContext = (0, import_react.createContext)(null);
-
-// src/hooks/useModelNexSocket.ts
-var import_react3 = require("react");
-var import_socket = require("socket.io-client");
-
-// src/utils/socket-io-transports.ts
-function resolveSocketIoTransports(serverUrl, order) {
-  try {
-    const host = new URL(serverUrl).hostname.toLowerCase();
-    if (host.endsWith("awsapprunner.com")) {
-      return ["websocket"];
-    }
-  } catch {
-  }
-  return ["websocket", "polling"];
-}
-
-// 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++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash |= 0;
-  }
-  return (hash >>> 0).toString(16).padStart(8, "0");
-}
-function isStableDomId(id) {
-  if (!id) return false;
-  const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-  const REACT_USE_ID_RE = /^(?:radix-)?:[rR][^\s]*$/;
-  if (REACT_USE_ID_RE.test(id)) return false;
-  if (/^\d+$/.test(id)) return false;
-  if (UUID_RE.test(id)) return false;
-  return true;
-}
-function getNearestHeading(el) {
-  const shellContainer = el.closest('nav, aside, header, [role="navigation"], [role="complementary"], [role="banner"]');
-  const boundary = shellContainer || document.body;
-  let current = el;
-  while (current && current !== boundary) {
-    let sibling = current.previousElementSibling;
-    while (sibling) {
-      if (/^H[1-6]$/.test(sibling.tagName)) {
-        return sibling.textContent?.trim().slice(0, 100) || null;
-      }
-      const innerHeading = sibling.querySelector("h1, h2, h3, h4, h5, h6");
-      if (innerHeading) {
-        return innerHeading.textContent?.trim().slice(0, 100) || null;
-      }
-      sibling = sibling.previousElementSibling;
-    }
-    const parentHeading = current.parentElement?.querySelector("h1, h2, h3, h4, h5, h6");
-    if (parentHeading && !current.contains(parentHeading)) {
-      return parentHeading.textContent?.trim().slice(0, 100) || null;
-    }
-    current = current.parentElement;
-  }
-  return null;
-}
-function getParentContainer(el) {
-  let current = el.parentElement;
-  while (current && current !== document.body) {
-    const role = current.getAttribute("role");
-    const tag = current.tagName.toLowerCase();
-    const state = current.getAttribute("data-state");
-    if (role === "dialog" || role === "alertdialog" || tag === "dialog") {
-      const title = current.querySelector('h2, h3, [class*="title"]');
-      const titleText = title?.textContent?.trim().slice(0, 60) || "";
-      return titleText ? `dialog:${titleText}` : "dialog";
-    }
-    if (role === "menu" || role === "listbox") {
-      return role;
-    }
-    if (current.hasAttribute("popover") || state === "open" && current.getAttribute("data-radix-popper-content-wrapper") !== null) {
-      return "popover";
-    }
-    if (current.getAttribute("data-radix-menu-content") !== null || role === "menubar") {
-      return "dropdown-menu";
-    }
-    if (role === "tabpanel") {
-      const label = current.getAttribute("aria-label") || current.getAttribute("aria-labelledby");
-      return label ? `tabpanel:${label.slice(0, 40)}` : "tabpanel";
-    }
-    if (tag === "nav" || role === "navigation") {
-      const label = current.getAttribute("aria-label");
-      return label ? `navigation:${label.slice(0, 40)}` : "navigation";
-    }
-    if (tag === "aside") {
-      return "sidebar";
-    }
-    if (tag === "header") {
-      return "header";
-    }
-    current = current.parentElement;
-  }
-  return null;
-}
-function getRowContext(el) {
-  let current = el.parentElement;
-  while (current && current !== document.body) {
-    const tag = current.tagName.toLowerCase();
-    if (tag === "tr" || tag === "li" || current.getAttribute("role") === "row" || current.getAttribute("role") === "listitem") {
-      const rowText = current.textContent?.trim().replace(/\s+/g, " ").slice(0, 120) || "";
-      return rowText;
-    }
-    current = current.parentElement;
-  }
-  return "";
-}
-function getNearestAncestorId(el) {
-  let current = el.parentElement;
-  while (current && current !== document.body) {
-    const aid = current.id;
-    if (isStableDomId(aid)) {
-      return aid;
-    }
-    const ancestorTestId = current.getAttribute("data-testid");
-    if (ancestorTestId) return `[data-testid="${ancestorTestId}"]`;
-    current = current.parentElement;
-  }
-  return null;
-}
-function generateFingerprint(el) {
-  const tag = el.tagName.toLowerCase();
-  const testId = el.getAttribute("data-testid");
-  const id = el.id;
-  const name = el.getAttribute("name");
-  const ariaLabel = el.getAttribute("aria-label");
-  const type = el.type || "";
-  const text = el.textContent?.trim().slice(0, 80) || "";
-  if (testId) return `tid:${testId}`;
-  if (isStableDomId(id)) return `id:${id}`;
-  if (name) return `name:${tag}:${name}`;
-  if (ariaLabel) {
-    const rowCtx2 = getRowContext(el);
-    if (rowCtx2) {
-      return `aria:${simpleHash(ariaLabel + ":" + rowCtx2)}:${ariaLabel.slice(0, 40)}`;
-    }
-    return `aria:${simpleHash(ariaLabel)}:${ariaLabel.slice(0, 40)}`;
-  }
-  if (tag === "a") {
-    const href = el.getAttribute("href");
-    if (href && href !== "#" && !href.startsWith("javascript:")) {
-      return `href:${simpleHash(href + ":" + text)}:${text.slice(0, 30) || href.slice(0, 30)}`;
-    }
-  }
-  const ancestorId = getNearestAncestorId(el);
-  if (ancestorId) {
-    return `anc:${simpleHash(ancestorId + ":" + tag + ":" + text)}:${text.slice(0, 30) || tag}`;
-  }
-  const heading = getNearestHeading(el) || "";
-  const rowCtx = getRowContext(el);
-  const raw = `${tag}:${type}:${text}:${heading}:${rowCtx}`;
-  return `hash:${simpleHash(raw)}:${text.slice(0, 30) || tag}`;
-}
-function classifyRole(el) {
-  const tag = el.tagName.toLowerCase();
-  const role = el.getAttribute("role");
-  if (tag === "button" || role === "button") return "button";
-  if (tag === "a") return "link";
-  if (tag === "input") return "input";
-  if (tag === "textarea") return "textarea";
-  if (tag === "select") return "select";
-  if (tag === "form") return "form";
-  if (tag === "label") return "label";
-  if (role === "link") return "link";
-  if (role === "menuitem") return "menuitem";
-  if (role === "menuitemcheckbox") return "menuitem";
-  if (role === "menuitemradio") return "menuitem";
-  if (role === "tab") return "tab";
-  if (role === "checkbox") return "checkbox";
-  if (role === "radio") return "radio";
-  if (role === "switch") return "switch";
-  if (role === "slider") return "slider";
-  if (role === "combobox") return "combobox";
-  if (role === "option") return "option";
-  if (role === "treeitem") return "treeitem";
-  if (role === "gridcell") return "gridcell";
-  if (el.hasAttribute("tabindex") && el.getAttribute("tabindex") !== "-1") return "interactive";
-  if (el.hasAttribute("cmdk-item")) return "menuitem";
-  return null;
-}
-var INTERACTIVE_SELECTOR = [
-  "button",
-  "a",
-  // All anchor tags (SPA links may not have href)
-  'input:not([type="hidden"])',
-  "textarea",
-  "select",
-  "label[for]",
-  '[role="button"]',
-  '[role="link"]',
-  '[role="menuitem"]',
-  '[role="menuitemcheckbox"]',
-  '[role="menuitemradio"]',
-  '[role="tab"]',
-  '[role="checkbox"]',
-  '[role="radio"]',
-  '[role="switch"]',
-  '[role="slider"]',
-  '[role="combobox"]',
-  '[role="option"]',
-  '[role="treeitem"]',
-  '[role="gridcell"]',
-  '[tabindex]:not([tabindex="-1"])',
-  "[data-discover]",
-  // React Router links
-  "[cmdk-item]",
-  // cmdk menu items
-  "form"
-].join(", ");
-function isVisible(el) {
-  if (el.offsetParent === null) {
-    const computed = window.getComputedStyle(el);
-    if (computed.position !== "fixed" && computed.position !== "sticky") {
-      if (computed.display === "none" || computed.visibility === "hidden") {
-        return false;
+        node.href = el.getAttribute("href");
       }
-      const rect2 = el.getBoundingClientRect();
-      if (rect2.width === 0 && rect2.height === 0) return false;
     }
+    nodes.push(node);
+  });
+  uidMap.clear();
+  for (const [uid, el] of nextUidMap.entries()) {
+    uidMap.set(uid, el);
   }
-  const style = window.getComputedStyle(el);
-  if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
-    return false;
-  }
-  const rect = el.getBoundingClientRect();
-  return rect.width > 0 && rect.height > 0;
+  return { nodes };
 }
-function extractInteractiveElements() {
-  const elements = [];
-  const seen = /* @__PURE__ */ new Set();
-  try {
-    const nodes = document.querySelectorAll(INTERACTIVE_SELECTOR);
-    nodes.forEach((node) => {
-      const el = node;
-      if (!isVisible(el)) return;
-      if (el.closest(".modelnex-chat-panel, .modelnex-studio-overlay, [data-modelnex-internal]")) return;
-      const role = classifyRole(el);
-      if (!role) return;
-      let fingerprint = generateFingerprint(el);
-      if (seen.has(fingerprint)) {
-        let idx = 2;
-        while (seen.has(`${fingerprint}#${idx}`)) idx++;
-        fingerprint = `${fingerprint}#${idx}`;
-      }
-      seen.add(fingerprint);
-      const rect = el.getBoundingClientRect();
-      const text = el.textContent?.trim().slice(0, 200) || "";
-      elements.push({
-        fingerprint,
-        tagName: el.tagName.toLowerCase(),
-        text,
-        role,
-        rect: {
-          top: rect.top,
-          left: rect.left,
-          width: rect.width,
-          height: rect.height
-        },
-        attributes: {
-          id: el.id || void 0,
-          name: el.getAttribute("name") || void 0,
-          type: el.type || void 0,
-          ariaLabel: el.getAttribute("aria-label") || void 0,
-          dataTestId: el.getAttribute("data-testid") || void 0,
-          href: el.href || void 0,
-          placeholder: el.placeholder || void 0
-        },
-        nearestHeading: getNearestHeading(el),
-        parentContainer: getParentContainer(el),
-        disabled: el.disabled || el.getAttribute("aria-disabled") === "true",
-        element: el
-      });
-    });
-  } catch (err) {
-    console.warn("[ModelNex] Auto-extraction error:", err);
-  }
-  return elements;
+function getElementByUid(uid) {
+  return uidMap.get(uid) || null;
 }
-function useAutoExtract(devMode) {
-  const [elements, setElements] = (0, import_react2.useState)([]);
-  const timerRef = (0, import_react2.useRef)(null);
-  const lastSnapshotRef = (0, import_react2.useRef)("");
-  const scan = (0, import_react2.useCallback)(() => {
-    if (typeof document === "undefined") return;
-    const extracted = extractInteractiveElements();
-    const snapshot = JSON.stringify(extracted.map((e) => ({
-      fingerprint: e.fingerprint,
-      role: e.role,
-      text: e.text,
-      rect: e.rect,
-      disabled: e.disabled,
-      nearestHeading: e.nearestHeading,
-      parentContainer: e.parentContainer
-    })));
-    if (snapshot === lastSnapshotRef.current) return;
-    lastSnapshotRef.current = snapshot;
-    emitSdkDebugLog("[ModelNex AutoExtract] Scan complete", {
-      elementCount: extracted.length
-    }, { devMode });
-    setElements(extracted);
-  }, [devMode]);
-  (0, import_react2.useEffect)(() => {
-    const initialTimer = setTimeout(scan, 300);
+function clearAOMMap() {
+  uidMap.clear();
+  locatorUidMap.clear();
+  nextUid = 1;
+}
+var uidMap, elementUidMap, locatorUidMap, nextUid;
+var init_aom = __esm({
+  "src/utils/aom.ts"() {
+    "use strict";
+    init_editable_controls();
+    init_auto_extract();
+    uidMap = /* @__PURE__ */ new Map();
+    elementUidMap = /* @__PURE__ */ new WeakMap();
+    locatorUidMap = /* @__PURE__ */ new Map();
+    nextUid = 1;
+  }
+});
+
+// src/utils/dom-sync.ts
+var dom_sync_exports = {};
+__export(dom_sync_exports, {
+  waitForDomSettle: () => waitForDomSettle
+});
+function waitForDomSettle(options = {}) {
+  const { timeoutMs = 5e3, debounceMs = 400, minWaitMs = 100 } = options;
+  return new Promise((resolve) => {
+    let debounceTimer = null;
+    let resolved = false;
+    const maxTimer = setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        cleanup();
+        resolve();
+      }
+    }, Math.max(timeoutMs, minWaitMs));
+    const finish = () => {
+      if (!resolved) {
+        resolved = true;
+        cleanup();
+        resolve();
+      }
+    };
     const observer = new MutationObserver((mutations) => {
-      const hasRelevantMutation = mutations.some((mutation) => {
-        const target = mutation.target;
-        if (target?.closest?.(".modelnex-chat-panel, .modelnex-studio-overlay, [data-modelnex-internal]")) {
-          return false;
+      const hasSignificantMutations = mutations.some((m) => {
+        if (m.target instanceof HTMLElement) {
+          if (m.target.hasAttribute("data-modelnex-tour-highlight")) return false;
+          if (m.target.hasAttribute("data-modelnex-caption")) return false;
+          if (m.target.closest("#modelnex-studio-root")) return false;
+          if (m.target.closest("#modelnex-active-agent-root")) return false;
         }
         return true;
       });
-      if (!hasRelevantMutation) return;
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(scan, 500);
-    });
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["disabled", "aria-disabled", "hidden", "style", "class"]
+      if (!hasSignificantMutations) return;
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(finish, debounceMs);
     });
-    const handlePositionChange = () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(scan, 200);
-    };
-    window.addEventListener("scroll", handlePositionChange, { passive: true });
-    window.addEventListener("resize", handlePositionChange, { passive: true });
-    return () => {
-      clearTimeout(initialTimer);
-      if (timerRef.current) clearTimeout(timerRef.current);
+    const cleanup = () => {
       observer.disconnect();
-      window.removeEventListener("scroll", handlePositionChange);
-      window.removeEventListener("resize", handlePositionChange);
+      if (debounceTimer) clearTimeout(debounceTimer);
+      clearTimeout(maxTimer);
     };
-  }, [scan]);
-  return elements;
+    setTimeout(() => {
+      if (resolved) return;
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true
+      });
+      debounceTimer = setTimeout(finish, debounceMs);
+    }, minWaitMs);
+  });
+}
+var init_dom_sync = __esm({
+  "src/utils/dom-sync.ts"() {
+    "use strict";
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_MODELNEX_SERVER_URL: () => DEFAULT_MODELNEX_SERVER_URL,
+  ModelNexChatBubble: () => ModelNexChatBubble,
+  ModelNexOnboardingPanel: () => ModelNexOnboardingPanel,
+  ModelNexProvider: () => ModelNexProvider,
+  RecordingOverlay: () => RecordingOverlay,
+  StudioOverlay: () => StudioOverlay,
+  TourProgressPanel: () => TourProgressPanel,
+  UIStateProvider: () => UIStateProvider,
+  buildDraftPreviewUrl: () => buildDraftPreviewUrl,
+  buildRecordingCapturePayload: () => buildRecordingCapturePayload,
+  buildRecordingStepGoal: () => buildRecordingStepGoal,
+  clearActiveDraftPreview: () => clearActiveDraftPreview,
+  extractInteractiveElements: () => extractInteractiveElements,
+  generateFingerprint: () => generateFingerprint,
+  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,
+  shouldShowRecordingOverlay: () => shouldShowRecordingOverlay,
+  useActionHighlight: () => useActionHighlight,
+  useAgentViewport: () => useAgentViewport,
+  useAutoExtract: () => useAutoExtract,
+  useExperiencePlayback: () => useExperiencePlayback,
+  useOnboardingPlayback: () => useOnboardingPlayback,
+  useRecordingMode: () => useRecordingMode,
+  useRunCommand: () => useRunCommand,
+  useTagStore: () => useTagStore,
+  useTourPlayback: () => useTourPlayback,
+  useUIState: () => useUIState,
+  useViewportTrack: () => useViewportTrack,
+  useVisibleIds: () => useVisibleIds,
+  useVoice: () => useVoice
+});
+module.exports = __toCommonJS(index_exports);
+var import_react21 = __toESM(require("react"));
+
+// src/context.ts
+var import_react = require("react");
+var ModelNexContext = (0, import_react.createContext)(null);
+
+// src/hooks/useModelNexSocket.ts
+var import_react3 = require("react");
+var import_socket = require("socket.io-client");
+
+// src/utils/socket-io-transports.ts
+function resolveSocketIoTransports(serverUrl, order) {
+  try {
+    const host = new URL(serverUrl).hostname.toLowerCase();
+    if (host.endsWith("awsapprunner.com")) {
+      return ["websocket"];
+    }
+  } catch {
+  }
+  return ["websocket", "polling"];
 }
 
 // src/utils/dom-summary.ts
+init_auto_extract();
 init_editable_controls();
 function textOf(el) {
   return el?.textContent?.trim().slice(0, 200) ?? "";
@@ -1052,6 +1118,7 @@ function serializeContexts(contexts) {
 }
 
 // src/hooks/useModelNexSocket.ts
+init_dev_logging();
 function useModelNexSocket({
   serverUrl,
   actions,
@@ -1270,6 +1337,7 @@ function useFieldHighlight(stagingFields, executedFields, setExecutedFields) {
 
 // src/overlay.tsx
 var import_react5 = __toESM(require("react"));
+init_auto_extract();
 var AIActivityOverlay = ({ activeActions }) => {
   if (activeActions.size === 0) return null;
   return import_react5.default.createElement(
@@ -1465,6 +1533,9 @@ body.modelnex-highlight-actions [data-modelnex-action-id]::before {
 }
 `;
 
+// src/index.ts
+init_auto_extract();
+
 // src/tag-store.ts
 var import_react6 = require("react");
 var STORAGE_KEY = "modelnex-tags";
@@ -1614,6 +1685,7 @@ function useTagStore(options) {
 
 // src/studio-mode.tsx
 var import_react7 = require("react");
+init_auto_extract();
 var import_jsx_runtime = require("react/jsx-runtime");
 var CATEGORIES = [
   { value: "button", label: "Button" },
@@ -2038,6 +2110,7 @@ function StudioOverlay({ elements, tagStore }) {
 // src/hooks/useBuiltinActions.ts
 var import_react8 = require("react");
 var import_zod2 = require("zod");
+init_auto_extract();
 
 // src/utils/screenshot.ts
 var import_html2canvas = __toESM(require("html2canvas"));
@@ -2940,6 +3013,9 @@ function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl
 // src/constants.ts
 var DEFAULT_MODELNEX_SERVER_URL = "https://api.modelnex.com";
 
+// src/index.ts
+init_dev_logging();
+
 // src/utils/dev-mode.ts
 var DEV_MODE_KEY_GLOBAL_NAMES = ["__MODELNEX_DEV_MODE_KEY__", "MODELNEX_DEV_MODE_KEY"];
 var devModeValidationCache = /* @__PURE__ */ new Map();
@@ -3255,6 +3331,7 @@ function readPreviewSessionSuppression() {
 
 // src/hooks/useRunCommand.ts
 var import_react9 = require("react");
+init_dev_logging();
 function searchTaggedElementsForQuery(store, query, limit = 8) {
   const allTags = store.getAllTags();
   if (allTags.length === 0) return [];
@@ -3638,6 +3715,7 @@ function releaseTourPlaybackOwnership(key, ownerId) {
 }
 
 // src/hooks/useTourPlayback.ts
+init_dev_logging();
 function resolveElement(step) {
   const el = step.element;
   if (!el) return null;
@@ -6999,6 +7077,7 @@ function useAudioLevel(active) {
 
 // src/hooks/useRecordingMode.ts
 var import_react16 = require("react");
+init_auto_extract();
 
 // src/utils/tourStepTypes.ts
 function isAskDrivenInputStepType(stepType) {
@@ -12298,6 +12377,9 @@ function useActionHighlight() {
   };
 }
 
+// src/index.ts
+init_auto_extract();
+
 // src/hooks/useExperiencePlayback.ts
 function useExperiencePlayback(...args) {
   return useTourPlayback(...args);