@quanta-intellect/vessel-browser 0.1.10 → 0.1.12

package/out/preload/content-script.js

@@ -2126,8 +2126,78 @@ function generateStableSelector(el) {
 let elementIndex = 0;
 const elementSelectors = {};
 let indexedElements = /* @__PURE__ */ new WeakMap();
+const indexedElementRefs = {};
 let activeOverlays = [];
+const MAX_SHADOW_HOSTS = 150;
+const MAX_SHADOW_DEPTH = 5;
+const MAX_WALK_ELEMENTS = 1e4;
+function collectShadowRoots(root) {
+  const shadowRoots = [];
+  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);
+        walk(el.shadowRoot, depth + 1);
+      }
+      el = tw.nextNode();
+    }
+  };
+  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) {
@@ -2135,6 +2205,7 @@ function assignIndex(el) {
   if (existing != null) return existing;
   elementIndex += 1;
   elementSelectors[elementIndex] = generateSelector(el);
+  indexedElementRefs[elementIndex] = el;
   indexedElements.set(el, elementIndex);
   return elementIndex;
 }
@@ -2475,7 +2546,7 @@ function buildBaseMetadata(el) {
   };
 }
 function extractHeadings() {
-  return Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6")).map((el) => {
+  return deepQuerySelectorAll("h1, h2, h3, h4, h5, h6").map((el) => {
     const text = el.textContent?.trim() || "";
     if (!text) return null;
     return {
@@ -2486,10 +2557,10 @@ function extractHeadings() {
 }
 function extractNavigation() {
   const navigation = [];
-  document.querySelectorAll(
+  deepQuerySelectorAll(
     'nav, [role="navigation"], header nav, [role="banner"] nav'
   ).forEach((nav) => {
-    nav.querySelectorAll("a[href]").forEach((link) => {
+    deepQuerySelectorAll("a[href]", nav).forEach((link) => {
       const anchor = link;
       const text = anchor.textContent?.trim();
       if (!text || anchor.getAttribute("href")?.startsWith("#")) return;
@@ -2534,7 +2605,7 @@ function getFieldMetadata(el) {
 }
 function extractInteractiveElements() {
   const elements = [];
-  document.querySelectorAll(
+  deepQuerySelectorAll(
     'button, [role="button"], input[type="submit"], input[type="button"]'
   ).forEach((btn) => {
     const input = btn;
@@ -2545,7 +2616,7 @@ function extractInteractiveElements() {
       ...buildBaseMetadata(btn)
     });
   });
-  document.querySelectorAll("a[href]").forEach((link) => {
+  deepQuerySelectorAll("a[href]").forEach((link) => {
     const anchor = link;
     const text = anchor.textContent?.trim();
     if (!text || anchor.getAttribute("href")?.startsWith("#")) return;
@@ -2559,7 +2630,7 @@ function extractInteractiveElements() {
       context
     });
   });
-  document.querySelectorAll(
+  deepQuerySelectorAll(
     'input:not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea'
   ).forEach((input) => {
     const element = input;
@@ -2587,7 +2658,8 @@ function extractForms() {
     }
     return el instanceof HTMLInputElement && (el.type === "submit" || el.type === "image") && el.form === form;
   }
-  document.querySelectorAll("form").forEach((form) => {
+  deepQuerySelectorAll("form").forEach((formEl) => {
+    const form = formEl;
     const fields = [];
     form.querySelectorAll(
       "input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='image']), select, textarea"
@@ -2643,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({
@@ -2784,9 +2856,12 @@ function getVisiblePageText() {
 function vesselExtractContent() {
   const extractStructuredContent = (article) => {
     activeOverlays = detectOverlays();
+    const readabilityText = article?.textContent || "";
+    const visibleText = getVisiblePageText();
+    const content = readabilityText.length > visibleText.length * 0.3 ? readabilityText : visibleText;
     return {
       title: article?.title || document.title,
-      content: article?.textContent || getVisiblePageText(),
+      content,
       htmlContent: article?.content || "",
       byline: article?.byline || "",
       excerpt: article?.excerpt || "",
@@ -2813,6 +2888,9 @@ function vesselExtractContent() {
     Object.keys(elementSelectors).forEach(
       (key) => delete elementSelectors[key]
     );
+    Object.keys(indexedElementRefs).forEach(
+      (key) => delete indexedElementRefs[key]
+    );
     const documentClone = document.cloneNode(true);
     const reader = new readabilityExports.Readability(documentClone);
     const article = reader.parse();
@@ -2825,9 +2903,43 @@ function vesselExtractContent() {
 function resolveElementSelector(index) {
   return elementSelectors[index] || null;
 }
+function interactByIndex(index, action, value) {
+  const el = indexedElementRefs[index];
+  if (!el || !(el instanceof HTMLElement)) {
+    return "Error[stale-index]: Element not found — the page may have changed. Call read_page to refresh.";
+  }
+  if (action === "click") {
+    el.focus();
+    el.click();
+    return "Clicked: " + (el.getAttribute("aria-label") || el.textContent?.trim().slice(0, 60) || el.tagName.toLowerCase());
+  }
+  if (action === "focus") {
+    el.focus();
+    return "Focused: " + (el.getAttribute("aria-label") || el.textContent?.trim().slice(0, 60) || el.tagName.toLowerCase());
+  }
+  if (action === "value" && value != null) {
+    if (!(el instanceof HTMLInputElement) && !(el instanceof HTMLTextAreaElement) && !(el instanceof HTMLSelectElement)) {
+      return "Error[not-input]: Element is not a text input";
+    }
+    const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : el instanceof HTMLSelectElement ? HTMLSelectElement.prototype : HTMLInputElement.prototype;
+    const desc = Object.getOwnPropertyDescriptor(proto, "value");
+    if (desc?.set) {
+      desc.set.call(el, value);
+    } else {
+      el.value = value;
+    }
+    el.focus();
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+    return "Typed into: " + (el.getAttribute("aria-label") || el.placeholder || el.name || "input");
+  }
+  return "Error: Unknown action";
+}
 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
@@ -53,6 +54,11 @@ const Channels = {
   // 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 +126,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 +142,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)
   },

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

@@ -2187,6 +2187,178 @@
     margin: 14px 0;
 }
 
+.markdown-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0 0 10px;
+    font-size: 12.5px;
+    line-height: 1.5;
+}
+
+.markdown-content thead {
+    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
+}
+
+.markdown-content th {
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-primary);
+    padding: 6px 10px;
+}
+
+.markdown-content td {
+    padding: 5px 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--text-secondary);
+}
+
+.markdown-content tbody tr:hover {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+
+/* ═══════════════════════════════════════
+   Tool call action chips
+   ═══════════════════════════════════════ */
+
+.tool-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 10px 3px 7px;
+    margin: 3px 0;
+    background: rgba(255, 255, 255, 0.04);
+    border-left: 2px solid rgba(196, 160, 90, 0.4);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    font-size: 11.5px;
+    line-height: 1.5;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    transition: background var(--duration-fast) var(--ease-in-out);
+}
+
+.tool-chip:hover {
+    background: rgba(255, 255, 255, 0.07);
+}
+
+.tool-chip-icon {
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+    font-size: 12px;
+    color: rgba(196, 160, 90, 0.7);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.tool-chip-name {
+    color: var(--text-secondary);
+    font-weight: 500;
+    letter-spacing: 0.01em;
+}
+
+.tool-chip-args {
+    color: var(--text-muted);
+    opacity: 0.7;
+    font-weight: 400;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tool-chip-args::before {
+    content: "·";
+    margin-right: 5px;
+    opacity: 0.4;
+}
+
+
+/* ═══════════════════════════════════════
+   Inline approval prompts (chat tab)
+   ═══════════════════════════════════════ */
+
+.chat-approval {
+    display: flex;
+    gap: 10px;
+    margin: 8px 14px;
+    padding: 10px 12px;
+    background: rgba(224, 180, 80, 0.08);
+    border: 1px solid rgba(224, 180, 80, 0.2);
+    border-radius: var(--radius-md);
+    animation: approval-appear 0.25s var(--ease-out-back);
+}
+
+@keyframes approval-appear {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.chat-approval-icon {
+    flex-shrink: 0;
+    color: #e0b450;
+    margin-top: 1px;
+}
+
+.chat-approval-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.chat-approval-title {
+    font-size: 12.5px;
+    color: var(--text-primary);
+    margin-bottom: 2px;
+}
+
+.chat-approval-detail {
+    font-size: 11.5px;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-approval-actions {
+    display: flex;
+    gap: 6px;
+    margin-top: 8px;
+}
+
+.chat-approval-btn {
+    font-size: 11.5px;
+    padding: 4px 14px;
+    border-radius: var(--radius-sm);
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition:
+        background var(--duration-fast) var(--ease-in-out),
+        transform var(--duration-fast) var(--ease-out-back);
+}
+
+.chat-approval-btn:active {
+    transform: scale(0.95);
+}
+
+.chat-approval-approve {
+    background: rgba(224, 180, 80, 0.18);
+    color: #e0c070;
+}
+
+.chat-approval-approve:hover {
+    background: rgba(224, 180, 80, 0.28);
+}
+
+.chat-approval-reject {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-muted);
+}
+
+.chat-approval-reject:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-secondary);
+}
+
 
 /* ═══════════════════════════════════════
    Thinking & streaming states
@@ -2361,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;