@quanta-intellect/vessel-browser 0.1.13 → 0.1.15

package/out/preload/content-script.js

@@ -2123,6 +2123,21 @@ function generateStableSelector(el) {
   }
   return uniqueSelector(document2, parts.join(" > ")) || parts.join(" > ");
 }
+function looksLikeCorrectOption(value) {
+  const text = getTrimmedText(value);
+  if (!text) return void 0;
+  if (/\b(correct|right choice|this is correct|correct answer|pick this|select this|choose this|right answer)\b/i.test(
+    text
+  )) {
+    return true;
+  }
+  if (/\b(wrong|incorrect|not this|don't pick|do not pick|bad option|decoy)\b/i.test(
+    text
+  )) {
+    return false;
+  }
+  return void 0;
+}
 let elementIndex = 0;
 const elementSelectors = {};
 let indexedElements = /* @__PURE__ */ new WeakMap();
@@ -2135,7 +2150,8 @@ function collectShadowRoots(root) {
   const shadowRoots = [];
   let walked = 0;
   const walk = (node, depth) => {
-    if (depth > MAX_SHADOW_DEPTH || shadowRoots.length >= MAX_SHADOW_HOSTS) return;
+    if (depth > MAX_SHADOW_DEPTH || shadowRoots.length >= MAX_SHADOW_HOSTS)
+      return;
     const tw = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
     let el = tw.nextNode();
     while (el && walked < MAX_WALK_ELEMENTS && shadowRoots.length < MAX_SHADOW_HOSTS) {
@@ -2306,6 +2322,192 @@ function getOverlayType(el) {
   }
   return "overlay";
 }
+function touchesViewportEdge(rect) {
+  const viewportWidth = window.innerWidth || document.documentElement?.clientWidth || 0;
+  const viewportHeight = window.innerHeight || document.documentElement?.clientHeight || 0;
+  const edgePadding = 24;
+  return rect.left <= edgePadding || rect.top <= edgePadding || rect.right >= viewportWidth - edgePadding || rect.bottom >= viewportHeight - edgePadding;
+}
+function hasFixedAncestor(el) {
+  let current = el.parentElement;
+  while (current && current !== document.body) {
+    const position = window.getComputedStyle(current).position;
+    if (position === "fixed" || position === "sticky") return true;
+    current = current.parentElement;
+  }
+  return false;
+}
+function getEffectiveZIndex(el, style = window.getComputedStyle(el)) {
+  const own = parseZIndex(style);
+  if (own > 0) return own;
+  let current = el.parentElement;
+  while (current && current !== document.body) {
+    const parentZ = parseZIndex(window.getComputedStyle(current));
+    if (parentZ > 0) return parentZ;
+    current = current.parentElement;
+  }
+  return 0;
+}
+function looksLikeDrawer(el, style, rect, areaRatio) {
+  if (rect.width < 220 || rect.height < 160 || areaRatio < 0.08) return false;
+  if (!touchesViewportEdge(rect)) return false;
+  if (style.position === "fixed" || style.position === "sticky") {
+    return getEffectiveZIndex(el, style) >= 5;
+  }
+  if (style.position === "absolute" && hasFixedAncestor(el)) {
+    return getEffectiveZIndex(el, style) >= 5;
+  }
+  return false;
+}
+function looksLikeCartConfirmation(el) {
+  const text = (el.textContent || "").slice(0, 500).toLowerCase();
+  const signals = [
+    "added to cart",
+    "added to bag",
+    "added to basket",
+    "added to your cart",
+    "added to your bag",
+    "added to your basket"
+  ];
+  return signals.some((signal) => text.includes(signal));
+}
+function getControlTextData(el) {
+  if (el instanceof HTMLInputElement && (el.type === "radio" || el.type === "checkbox")) {
+    const label = getInputLabel(el);
+    if (label) return { text: label, source: "label" };
+  }
+  const aria = getTrimmedText(el.getAttribute("aria-label"));
+  if (aria) return { text: aria, source: "aria-label" };
+  const textContent = getTrimmedText(el.textContent);
+  if (textContent) return { text: textContent, source: "textContent" };
+  if (el instanceof HTMLInputElement) {
+    const value = getTrimmedText(el.value) || getTrimmedText(el.getAttribute("value"));
+    if (value) return { text: value, source: "value" };
+  }
+  const valueAttr = getTrimmedText(el.getAttribute("value"));
+  if (valueAttr) return { text: valueAttr, source: "value" };
+  const title = getTrimmedText(el.getAttribute("title"));
+  if (title) return { text: title, source: "title" };
+  return {};
+}
+function getOverlayActionKind(el, label) {
+  const lower = label.toLowerCase();
+  const attrText = [
+    el.getAttribute("id"),
+    typeof el.className === "string" ? el.className : "",
+    el.getAttribute("name"),
+    el.getAttribute("title")
+  ].filter(Boolean).join(" ").toLowerCase();
+  if (el.getAttribute("role") === "radio" || el instanceof HTMLInputElement && el.type === "radio") {
+    return "radio";
+  }
+  if (/close|dismiss|skip|cancel|not now|maybe later|no thanks|reject|decline/.test(
+    lower
+  ) || /modal-close|overlay-close/.test(attrText)) {
+    return "dismiss";
+  }
+  if (/accept|agree|allow/.test(lower) && /cookie|consent|privacy|gdpr|onetrust|cookiebot/.test(
+    `${lower} ${attrText}`
+  )) {
+    return "accept";
+  }
+  if (/submit|continue|next|confirm|done|ok|start|proceed/.test(lower)) {
+    return "submit";
+  }
+  return "action";
+}
+function getOverlayActionPriority(action) {
+  switch (action.kind) {
+    case "dismiss":
+      return 40;
+    case "accept":
+      return 35;
+    case "submit":
+      return 30;
+    case "radio":
+      return 20;
+    default:
+      return 10;
+  }
+}
+function collectOverlayRadioOptions(root) {
+  const seen = /* @__PURE__ */ new Set();
+  const options = [];
+  root.querySelectorAll('[role="radio"], input[type="radio"]').forEach((node) => {
+    if (!(node instanceof HTMLElement) || !isElementVisible(node)) return;
+    const data = getControlTextData(node);
+    if (!data.text) return;
+    const selector = generateSelector(node);
+    const key = selector || data.text;
+    if (seen.has(key)) return;
+    seen.add(key);
+    const checked = node.getAttribute("aria-checked") === "true" || (node instanceof HTMLInputElement ? node.checked : false);
+    options.push({
+      label: data.text.slice(0, 100),
+      selector,
+      checked,
+      labelSource: data.source,
+      looksCorrect: looksLikeCorrectOption(data.text)
+    });
+  });
+  return options.slice(0, 8);
+}
+function collectOverlayActions(root) {
+  const seen = /* @__PURE__ */ new Set();
+  const actions = [];
+  root.querySelectorAll(
+    'button, [role="button"], a[href], input[type="button"], input[type="submit"], [role="radio"], input[type="radio"]'
+  ).forEach((node) => {
+    if (!(node instanceof HTMLElement) || !isElementVisible(node)) return;
+    const selector = generateSelector(node);
+    if (!selector || seen.has(selector)) return;
+    let data = getControlTextData(node);
+    if (!data.text) {
+      const attrText = [
+        node.id,
+        typeof node.className === "string" ? node.className : ""
+      ].filter(Boolean).join(" ").toLowerCase();
+      if (/onetrust|consent|cookie|banner|gdpr|trustarc|cookiebot/.test(
+        attrText
+      )) {
+        data = {
+          text: attrText.includes("accept") ? "Accept cookies" : attrText.includes("reject") ? "Reject cookies" : attrText.includes("close") ? "Close" : "Consent button",
+          source: "fallback"
+        };
+      }
+    }
+    if (!data.text) return;
+    seen.add(selector);
+    actions.push({
+      label: data.text.slice(0, 100),
+      selector,
+      kind: getOverlayActionKind(node, data.text),
+      disabled: isElementDisabled(node)
+    });
+  });
+  return actions.sort((a, b) => getOverlayActionPriority(b) - getOverlayActionPriority(a)).slice(0, 10);
+}
+function getOverlayMessage(el) {
+  const heading = el.querySelector("h1, h2, h3, h4, h5, h6");
+  return getTrimmedText(heading?.textContent)?.slice(0, 160) || getNodeTextByIds(el.getAttribute("aria-describedby"))?.slice(0, 160) || getTrimmedText(el.textContent)?.slice(0, 160);
+}
+function classifyOverlayKind(args) {
+  const haystack = [
+    args.node.id,
+    typeof args.node.className === "string" ? args.node.className : "",
+    args.node.getAttribute("role"),
+    args.node.getAttribute("aria-label"),
+    args.node.textContent
+  ].filter(Boolean).join(" ").toLowerCase();
+  if (/cookie|consent|privacy|gdpr|onetrust|cookiebot|trustarc/.test(haystack)) {
+    return "cookie_consent";
+  }
+  if (args.cartConfirm) return "cart_confirmation";
+  if (args.radioOptions.length > 0) return "selection_modal";
+  if (args.drawerLike) return "drawer";
+  if (/alert|warning|notice|success|error/.test(haystack)) return "alert";
+  return "overlay";
+}
 function detectOverlays() {
   if (!document.body) return [];
   const viewportWidth = window.innerWidth || document.documentElement?.clientWidth || 0;
@@ -2320,23 +2522,39 @@ function detectOverlays() {
     if (style.pointerEvents === "none") return;
     const rect = node.getBoundingClientRect();
     if (!isInViewportRect(rect)) return;
-    const position = style.position;
-    const zIndex = parseZIndex(style);
-    const areaRatio = rect.width * rect.height / viewportArea;
     const overlayType = getOverlayType(node);
     const dialogLike = overlayType === "dialog" || overlayType === "modal";
-    const blockingSurface = (position === "fixed" || position === "sticky") && zIndex >= 10 && areaRatio >= 0.3 && getViewportCenterCoverage(rect);
-    if (!dialogLike && !blockingSurface) return;
+    const areaRatio = rect.width * rect.height / viewportArea;
+    const drawerLike = looksLikeDrawer(node, style, rect, areaRatio);
+    const cartConfirm = !dialogLike && !drawerLike && (style.position === "fixed" || style.position === "sticky" || style.position === "absolute") && rect.width >= 160 && rect.height >= 100 && looksLikeCartConfirmation(node);
+    const blockingSurface = dialogLike || drawerLike || cartConfirm || (style.position === "fixed" || style.position === "sticky") && parseZIndex(style) >= 10 && areaRatio >= 0.3 && getViewportCenterCoverage(rect);
+    if (!blockingSurface && overlayType !== "dialog" && overlayType !== "modal") {
+      return;
+    }
+    const actions = collectOverlayActions(node);
+    const radioOptions = collectOverlayRadioOptions(node);
     seen.add(node);
     overlays.push({
       element: node,
       type: overlayType ?? "overlay",
+      kind: classifyOverlayKind({
+        node,
+        drawerLike,
+        cartConfirm,
+        radioOptions
+      }),
       role: getTrimmedText(node.getAttribute("role")) || void 0,
       label: getOverlayLabel(node),
       selector: generateSelector(node),
       text: getTrimmedText(node.textContent)?.slice(0, 160),
-      blocksInteraction: dialogLike || blockingSurface,
-      zIndex
+      message: getOverlayMessage(node),
+      blocksInteraction: blockingSurface,
+      dismissSelector: actions.find((action) => action.kind === "dismiss")?.selector,
+      acceptSelector: actions.find((action) => action.kind === "accept")?.selector,
+      submitSelector: actions.find((action) => action.kind === "submit")?.selector,
+      actions,
+      radioOptions,
+      zIndex: parseZIndex(style)
     });
   });
   return overlays.sort((a, b) => {
@@ -2499,6 +2717,46 @@ function getInputLabel(el) {
   }
   return getTrimmedText(el.getAttribute("aria-label")) || getNodeTextByIds(el.getAttribute("aria-labelledby")) || getTrimmedText(el.getAttribute("placeholder")) || void 0;
 }
+function getInputLabelWithSource(el) {
+  if (el.id) {
+    const label = document.querySelector(
+      `label[for="${escapeSelectorValue(el.id)}"]`
+    );
+    const text = getTrimmedText(label?.textContent);
+    if (text) return { label: text, source: "label" };
+  }
+  const parentLabel = el.closest("label");
+  if (parentLabel) {
+    const clone = parentLabel.cloneNode(true);
+    clone.querySelectorAll("input, select, textarea").forEach((input) => {
+      input.remove();
+    });
+    const text = getTrimmedText(clone.textContent);
+    if (text) return { label: text, source: "label" };
+  }
+  const ariaLabel = getTrimmedText(el.getAttribute("aria-label"));
+  if (ariaLabel) return { label: ariaLabel, source: "aria-label" };
+  const labelledBy = getNodeTextByIds(el.getAttribute("aria-labelledby"));
+  if (labelledBy) return { label: labelledBy, source: "label" };
+  const placeholder = getTrimmedText(el.getAttribute("placeholder"));
+  if (placeholder) return { label: placeholder, source: "placeholder" };
+  return {};
+}
+function getButtonTextWithSource(el) {
+  const textContent = getTrimmedText(el.textContent);
+  if (textContent) return { text: textContent, source: "text" };
+  const value = el instanceof HTMLInputElement || el instanceof HTMLButtonElement ? getTrimmedText(el.value) : getTrimmedText(el.getAttribute("value"));
+  if (value) return { text: value, source: "value" };
+  const ariaLabel = getTrimmedText(el.getAttribute("aria-label"));
+  if (ariaLabel) return { text: ariaLabel, source: "aria-label" };
+  return { text: "Button", source: "text" };
+}
+function getParentOverlaySelector(el) {
+  const overlay = activeOverlays.find(
+    (candidate) => candidate.element === el || candidate.element.contains(el) || el instanceof HTMLElement && el.contains(candidate.element)
+  );
+  return overlay?.selector;
+}
 function getElementRole(el) {
   return getTrimmedText(el.getAttribute("role")) || (el.tagName.toLowerCase() === "a" ? "link" : el.tagName.toLowerCase() === "button" ? "button" : void 0);
 }
@@ -2534,6 +2792,7 @@ function getAriaBoolean(el, attr) {
 function buildBaseMetadata(el) {
   return {
     context: getElementContext(el),
+    parentOverlay: getParentOverlaySelector(el),
     selector: generateSelector(el),
     index: assignIndex(el),
     role: getElementRole(el),
@@ -2608,12 +2867,15 @@ function extractInteractiveElements() {
   deepQuerySelectorAll(
     'button, [role="button"], input[type="submit"], input[type="button"]'
   ).forEach((btn) => {
-    const input = btn;
-    const text = btn.textContent?.trim() || input.value || btn.getAttribute("aria-label") || "Button";
+    const { text, source } = getButtonTextWithSource(btn);
+    const role = getElementRole(btn);
     elements.push({
       type: "button",
-      text: text.slice(0, 100),
-      ...buildBaseMetadata(btn)
+      text: text?.slice(0, 100),
+      labelSource: source,
+      ...buildBaseMetadata(btn),
+      role,
+      looksCorrect: role === "radio" ? looksLikeCorrectOption(text) : void 0
     });
   });
   deepQuerySelectorAll("a[href]").forEach((link) => {
@@ -2635,15 +2897,24 @@ function extractInteractiveElements() {
   ).forEach((input) => {
     const element = input;
     const tag = input.tagName.toLowerCase();
+    const label = getInputLabelWithSource(element);
+    const role = getElementRole(input);
+    const radioText = role === "radio" || element instanceof HTMLInputElement && element.type === "radio" ? getTrimmedText(
+      element.getAttribute("value") || element.getAttribute("aria-label") || label.label
+    ) : void 0;
     elements.push({
       type: tag === "select" ? "select" : tag === "textarea" ? "textarea" : "input",
-      label: getInputLabel(element)?.slice(0, 100),
+      label: label.label?.slice(0, 100),
+      labelSource: label.source,
       inputType: element.getAttribute("type") || void 0,
       placeholder: element.getAttribute("placeholder") || void 0,
       required: element.hasAttribute("required") || void 0,
       value: getElementValue(element),
       options: element instanceof HTMLSelectElement ? getSelectOptions(element) : void 0,
       ...buildBaseMetadata(input),
+      role,
+      text: radioText?.slice(0, 100),
+      looksCorrect: radioText || label.label ? looksLikeCorrectOption(radioText || label.label) : void 0,
       ...getFieldMetadata(element)
     });
   });
@@ -2666,15 +2937,24 @@ function extractForms() {
     ).forEach((input) => {
       const element = input;
       const tag = input.tagName.toLowerCase();
+      const label = getInputLabelWithSource(element);
+      const role = getElementRole(input);
+      const radioText = role === "radio" || element instanceof HTMLInputElement && element.type === "radio" ? getTrimmedText(
+        element.getAttribute("value") || element.getAttribute("aria-label") || label.label
+      ) : void 0;
       fields.push({
         type: tag === "select" ? "select" : tag === "textarea" ? "textarea" : "input",
-        label: getInputLabel(element)?.slice(0, 100),
+        label: label.label?.slice(0, 100),
+        labelSource: label.source,
         inputType: element.getAttribute("type") || void 0,
         placeholder: element.getAttribute("placeholder") || void 0,
         required: element.hasAttribute("required") || void 0,
         value: getElementValue(element),
         options: element instanceof HTMLSelectElement ? getSelectOptions(element) : void 0,
         ...buildBaseMetadata(input),
+        role,
+        text: radioText?.slice(0, 100),
+        looksCorrect: radioText || label.label ? looksLikeCorrectOption(radioText || label.label) : void 0,
         ...getFieldMetadata(element)
       });
     });
@@ -2683,11 +2963,11 @@ function extractForms() {
         "button, input[type='submit'], input[type='image']"
       )
     ).filter((control) => isSubmitControlForForm(control, form)).forEach((btn) => {
-      const input = btn;
-      const text = btn.textContent?.trim() || input.value || btn.getAttribute("aria-label") || "Submit";
+      const { text, source } = getButtonTextWithSource(btn);
       fields.push({
         type: "button",
-        text: text.slice(0, 100),
+        text: text?.slice(0, 100),
+        labelSource: source,
         ...buildBaseMetadata(btn)
       });
     });
@@ -2729,7 +3009,9 @@ function extractLandmarks() {
 }
 function extractJsonLd() {
   const results = [];
-  const scripts = document.querySelectorAll('script[type="application/ld+json"]');
+  const scripts = document.querySelectorAll(
+    'script[type="application/ld+json"]'
+  );
   for (const script of scripts) {
     try {
       const parsed = JSON.parse(script.textContent || "");
@@ -2828,7 +3110,9 @@ function extractRdfa() {
 }
 function withHighlightLabelsRemoved(read) {
   const labels = Array.from(
-    document.querySelectorAll(".__vessel-highlight-label[data-vessel-highlight]")
+    document.querySelectorAll(
+      ".__vessel-highlight-label[data-vessel-highlight]"
+    )
   ).filter((node) => node instanceof HTMLElement);
   const removed = labels.map((label) => {
     const parent = label.parentNode;

package/out/preload/index.js

@@ -63,6 +63,17 @@ const Channels = {
   // DevTools panel
   DEVTOOLS_PANEL_TOGGLE: "devtools-panel:toggle",
   DEVTOOLS_PANEL_STATE: "devtools-panel:state",
+  DEVTOOLS_PANEL_RESIZE: "devtools-panel:resize",
+  // Find in page
+  FIND_IN_PAGE_START: "find:start",
+  FIND_IN_PAGE_NEXT: "find:next",
+  FIND_IN_PAGE_STOP: "find:stop",
+  FIND_IN_PAGE_RESULT: "find:result",
+  // Browsing history
+  HISTORY_GET: "history:get",
+  HISTORY_SEARCH: "history:search",
+  HISTORY_CLEAR: "history:clear",
+  HISTORY_UPDATE: "history:update",
   // Window controls
   WINDOW_MINIMIZE: "window:minimize",
   WINDOW_MAXIMIZE: "window:maximize",
@@ -185,13 +196,33 @@ const api = {
   },
   devtoolsPanel: {
     toggle: () => electron.ipcRenderer.invoke(Channels.DEVTOOLS_PANEL_TOGGLE),
-    resize: (height) => electron.ipcRenderer.invoke("devtools-panel:resize", height),
+    resize: (height) => electron.ipcRenderer.invoke(Channels.DEVTOOLS_PANEL_RESIZE, height),
     onStateUpdate: (cb) => {
       const handler = (_, state) => cb(state);
       electron.ipcRenderer.on(Channels.DEVTOOLS_PANEL_STATE, handler);
       return () => electron.ipcRenderer.removeListener(Channels.DEVTOOLS_PANEL_STATE, handler);
     }
   },
+  find: {
+    start: (text, options) => electron.ipcRenderer.invoke(Channels.FIND_IN_PAGE_START, text, options),
+    next: (forward) => electron.ipcRenderer.invoke(Channels.FIND_IN_PAGE_NEXT, forward),
+    stop: (action) => electron.ipcRenderer.invoke(Channels.FIND_IN_PAGE_STOP, action),
+    onResult: (cb) => {
+      const handler = (_, result) => cb(result);
+      electron.ipcRenderer.on(Channels.FIND_IN_PAGE_RESULT, handler);
+      return () => electron.ipcRenderer.removeListener(Channels.FIND_IN_PAGE_RESULT, handler);
+    }
+  },
+  history: {
+    get: () => electron.ipcRenderer.invoke(Channels.HISTORY_GET),
+    search: (query) => electron.ipcRenderer.invoke(Channels.HISTORY_SEARCH, query),
+    clear: () => electron.ipcRenderer.invoke(Channels.HISTORY_CLEAR),
+    onUpdate: (cb) => {
+      const handler = (_, state) => cb(state);
+      electron.ipcRenderer.on(Channels.HISTORY_UPDATE, handler);
+      return () => electron.ipcRenderer.removeListener(Channels.HISTORY_UPDATE, handler);
+    }
+  },
   window: {
     minimize: () => electron.ipcRenderer.invoke(Channels.WINDOW_MINIMIZE),
     maximize: () => electron.ipcRenderer.invoke(Channels.WINDOW_MAXIMIZE),