@quanta-intellect/vessel-browser 0.1.11 → 0.1.13

package/out/preload/content-script.js

@@ -2128,33 +2128,76 @@ const elementSelectors = {};
 let indexedElements = /* @__PURE__ */ new WeakMap();
 const indexedElementRefs = {};
 let activeOverlays = [];
-function deepQuerySelectorAll(selector, root = document) {
-  const results = [];
-  root.querySelectorAll(selector).forEach((el) => results.push(el));
-  const MAX_SHADOW_HOSTS = 50;
-  const MAX_DEPTH = 3;
+const MAX_SHADOW_HOSTS = 150;
+const MAX_SHADOW_DEPTH = 5;
+const MAX_WALK_ELEMENTS = 1e4;
+function collectShadowRoots(root) {
   const shadowRoots = [];
-  const findShadowRoots = (node, depth) => {
-    if (depth > MAX_DEPTH || shadowRoots.length >= MAX_SHADOW_HOSTS) return;
-    const children = node.children;
-    for (let i = 0; i < children.length && shadowRoots.length < MAX_SHADOW_HOSTS; i++) {
-      const el = children[i];
+  let walked = 0;
+  const walk = (node, depth) => {
+    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) {
+      walked++;
       if (el.shadowRoot) {
         shadowRoots.push(el.shadowRoot);
-        findShadowRoots(el.shadowRoot, depth + 1);
-      }
-      if (el.children.length > 0 && el.children.length < 200) {
-        findShadowRoots(el, depth);
+        walk(el.shadowRoot, depth + 1);
       }
+      el = tw.nextNode();
     }
   };
-  findShadowRoots(root, 0);
-  for (const sr of shadowRoots) {
+  walk(root, 0);
+  return shadowRoots;
+}
+function deepQuerySelectorAll(selector, root = document) {
+  const results = [];
+  root.querySelectorAll(selector).forEach((el) => results.push(el));
+  for (const sr of collectShadowRoots(root)) {
     sr.querySelectorAll(selector).forEach((el) => results.push(el));
   }
   return results;
 }
+function isInShadowDom(el) {
+  return el.getRootNode() instanceof ShadowRoot;
+}
+function generateShadowPiercingSelector(el) {
+  const segments = [];
+  let current = el;
+  while (current) {
+    const rootNode = current.getRootNode();
+    const innerSel = generateStableSelector(current);
+    if (rootNode instanceof ShadowRoot) {
+      segments.unshift(innerSel);
+      current = rootNode.host;
+    } else {
+      segments.unshift(innerSel);
+      break;
+    }
+  }
+  if (segments.length <= 1) return null;
+  return segments.join(" >>> ");
+}
+function resolveShadowSelector(selectorPath) {
+  const segments = selectorPath.split(" >>> ").map((s) => s.trim());
+  let scope = document;
+  for (let i = 0; i < segments.length; i++) {
+    const el = scope.querySelector(segments[i]);
+    if (!el) return null;
+    if (i < segments.length - 1) {
+      if (!el.shadowRoot) return null;
+      scope = el.shadowRoot;
+    } else {
+      return el;
+    }
+  }
+  return null;
+}
 function generateSelector(el) {
+  if (isInShadowDom(el)) {
+    const shadowPath = generateShadowPiercingSelector(el);
+    if (shadowPath) return shadowPath;
+  }
   return generateStableSelector(el);
 }
 function assignIndex(el) {
@@ -2672,7 +2715,7 @@ function extractLandmarks() {
     "dialog, [role='dialog'], [role='alertdialog']"
   ];
   selectors.forEach((selector) => {
-    document.querySelectorAll(selector).forEach((el) => {
+    deepQuerySelectorAll(selector).forEach((el) => {
       const tag = el.tagName.toLowerCase();
       const role = el.getAttribute("role") || (tag === "header" ? "banner" : tag === "nav" ? "navigation" : tag === "main" ? "main" : tag === "aside" ? "complementary" : tag === "footer" ? "contentinfo" : tag === "article" ? "article" : tag === "section" ? "region" : tag === "dialog" ? "dialog" : "generic");
       landmarks.push({
@@ -2896,6 +2939,7 @@ electron.contextBridge.exposeInMainWorld("__vessel", {
   extractContent: vesselExtractContent,
   getElementSelector: resolveElementSelector,
   interactByIndex,
+  resolveShadowSelector,
   notifyHighlightSelection: (text) => {
     if (typeof text === "string" && text.trim()) {
       electron.ipcRenderer.send("vessel:highlight-selection", text.trim());

package/out/preload/index.js

@@ -35,6 +35,7 @@ const Channels = {
   SIDEBAR_RESIZE: "ui:sidebar-resize",
   SIDEBAR_RESIZE_START: "ui:sidebar-resize-start",
   SIDEBAR_RESIZE_COMMIT: "ui:sidebar-resize-commit",
+  SIDEBAR_CONTEXT_MENU: "ui:sidebar-context-menu",
   FOCUS_MODE_TOGGLE: "ui:focus-mode-toggle",
   SETTINGS_VISIBILITY: "ui:settings-visibility",
   // Settings
@@ -47,12 +48,18 @@ const Channels = {
   BOOKMARKS_UPDATE: "bookmarks:update",
   BOOKMARK_SAVE: "bookmarks:save",
   BOOKMARK_REMOVE: "bookmarks:remove",
+  BOOKMARK_ADD_CONTEXT_TO_CHAT: "bookmarks:add-context-to-chat",
   FOLDER_CREATE: "bookmarks:folder-create",
   FOLDER_REMOVE: "bookmarks:folder-remove",
   FOLDER_RENAME: "bookmarks:folder-rename",
   // Highlights
   HIGHLIGHT_CAPTURE: "highlights:capture",
   HIGHLIGHT_CAPTURE_RESULT: "highlights:capture-result",
+  HIGHLIGHT_NAV_COUNT: "highlights:nav-count",
+  HIGHLIGHT_NAV_SCROLL: "highlights:nav-scroll",
+  HIGHLIGHT_NAV_REMOVE: "highlights:nav-remove",
+  HIGHLIGHT_NAV_CLEAR: "highlights:nav-clear",
+  SIDEBAR_HIGHLIGHT_ACTION: "highlights:sidebar-action",
   // DevTools panel
   DEVTOOLS_PANEL_TOGGLE: "devtools-panel:toggle",
   DEVTOOLS_PANEL_STATE: "devtools-panel:state",
@@ -120,6 +127,15 @@ const api = {
       const handler = (_, result) => cb(result);
       electron.ipcRenderer.on(Channels.HIGHLIGHT_CAPTURE_RESULT, handler);
       return () => electron.ipcRenderer.removeListener(Channels.HIGHLIGHT_CAPTURE_RESULT, handler);
+    },
+    getCount: () => electron.ipcRenderer.invoke(Channels.HIGHLIGHT_NAV_COUNT),
+    scrollTo: (index) => electron.ipcRenderer.invoke(Channels.HIGHLIGHT_NAV_SCROLL, index),
+    remove: (index) => electron.ipcRenderer.invoke(Channels.HIGHLIGHT_NAV_REMOVE, index),
+    clearAll: () => electron.ipcRenderer.invoke(Channels.HIGHLIGHT_NAV_CLEAR),
+    onSidebarAction: (cb) => {
+      const handler = (_, action) => cb(action);
+      electron.ipcRenderer.on(Channels.SIDEBAR_HIGHLIGHT_ACTION, handler);
+      return () => electron.ipcRenderer.removeListener(Channels.SIDEBAR_HIGHLIGHT_ACTION, handler);
     }
   },
   ui: {
@@ -127,6 +143,11 @@ const api = {
     startSidebarResize: () => electron.ipcRenderer.invoke(Channels.SIDEBAR_RESIZE_START),
     resizeSidebar: (width) => electron.ipcRenderer.invoke(Channels.SIDEBAR_RESIZE, width),
     commitSidebarResize: () => electron.ipcRenderer.invoke(Channels.SIDEBAR_RESIZE_COMMIT),
+    onSidebarContextMenu: (cb) => {
+      const handler = (_, position) => cb(position);
+      electron.ipcRenderer.on(Channels.SIDEBAR_CONTEXT_MENU, handler);
+      return () => electron.ipcRenderer.removeListener(Channels.SIDEBAR_CONTEXT_MENU, handler);
+    },
     toggleFocusMode: () => electron.ipcRenderer.invoke(Channels.FOCUS_MODE_TOGGLE),
     setSettingsVisibility: (open) => electron.ipcRenderer.invoke(Channels.SETTINGS_VISIBILITY, open)
   },
@@ -148,6 +169,14 @@ const api = {
     createFolderWithSummary: (name, summary) => electron.ipcRenderer.invoke(Channels.FOLDER_CREATE, name, summary),
     removeFolder: (id) => electron.ipcRenderer.invoke(Channels.FOLDER_REMOVE, id),
     renameFolder: (id, newName, summary) => electron.ipcRenderer.invoke(Channels.FOLDER_RENAME, id, newName, summary),
+    onAddContextToChat: (cb) => {
+      const handler = (_, bookmarkId) => cb(bookmarkId);
+      electron.ipcRenderer.on(Channels.BOOKMARK_ADD_CONTEXT_TO_CHAT, handler);
+      return () => electron.ipcRenderer.removeListener(
+        Channels.BOOKMARK_ADD_CONTEXT_TO_CHAT,
+        handler
+      );
+    },
     onUpdate: (cb) => {
       const handler = (_, state) => cb(state);
       electron.ipcRenderer.on(Channels.BOOKMARKS_UPDATE, handler);

package/out/renderer/assets/{index-DOCQcMR5.css → index-DMd-y6tm.css}

@@ -2533,6 +2533,101 @@
     border-color: var(--border-visible);
 }
 
+/* ═══════════════════════════════════════
+   Highlight navigation bar
+   ═══════════════════════════════════════ */
+
+.highlight-nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+    padding: 4px 14px;
+    flex-shrink: 0;
+}
+
+.highlight-nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    color: var(--text-muted);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-in-out),
+                background var(--duration-fast) var(--ease-in-out);
+}
+
+.highlight-nav-btn:hover:not(:disabled) {
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
+}
+
+.highlight-nav-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+
+.highlight-nav-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 10px;
+    font-size: 11px;
+    font-weight: 500;
+    color: rgba(196, 160, 90, 0.85);
+    background: rgba(196, 160, 90, 0.08);
+    border: 1px solid rgba(196, 160, 90, 0.2);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-in-out),
+                border-color var(--duration-fast) var(--ease-in-out);
+    white-space: nowrap;
+}
+
+.highlight-nav-label:hover {
+    background: rgba(196, 160, 90, 0.14);
+    border-color: rgba(196, 160, 90, 0.35);
+}
+
+.hl-context-menu {
+    position: fixed;
+    z-index: 9999;
+    min-width: 160px;
+    padding: 4px 0;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-visible);
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.hl-context-item {
+    display: block;
+    width: 100%;
+    padding: 6px 12px;
+    font-size: 11.5px;
+    color: var(--text-secondary);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    transition: background var(--duration-fast) var(--ease-in-out);
+}
+
+.hl-context-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-primary);
+}
+
+.hl-context-danger:hover {
+    color: #e06060;
+    background: rgba(224, 96, 96, 0.08);
+}
+
 .sidebar-input-area {
     display: flex;
     gap: 6px;