chromex-mcp 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chromex-mcp",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Zero-dependency Chrome DevTools Protocol MCP server for AI agents. 52 typed tools, per-tab daemons, security hardened.",
   "type": "module",
   "bin": {

package/plugins/chromex/skills/chromex/scripts/chromex.mjs

@@ -244,7 +244,8 @@ async function main() {
 
   const conn = await getOrStartTabDaemon(targetId, config);
 
-  const cmdArgs = args.slice(1);
+  const noSnap = args.includes('--no-snap');
+  const cmdArgs = args.slice(1).filter(a => a !== '--no-snap');
 
   // Juntar argumentos para comandos que aceitam texto livre
   if (cmd === 'eval') {
@@ -278,6 +279,7 @@ async function main() {
     process.exit(1);
   }
 
+  if (noSnap) cmdArgs.push('--no-snap');
   const response = await sendCommand(conn, { cmd, args: cmdArgs });
 
   if (response.ok) {

package/plugins/chromex/skills/chromex/scripts/lib/commands/snapshot.mjs

@@ -38,7 +38,7 @@ function truncate(str, max = MAX_NAME_LENGTH) {
   return str.slice(0, max) + '...';
 }
 
-function formatAxNode(node, depth, refIndex, refs) {
+function formatAxNode(node, depth, refIndex, refs, isNew = false) {
   const role = node.role?.value || '';
   const name = truncate(node.name?.value ?? '');
   const value = node.value?.value;
@@ -50,7 +50,8 @@ function formatAxNode(node, depth, refIndex, refs) {
     refIndex.value++;
   }
 
-  let line = `${indent}${refTag}[${role}]`;
+  const newTag = isNew ? '*' : '';
+  let line = `${indent}${newTag}${refTag}[${role}]`;
   if (name !== '') line += ` ${name}`;
   if (!(value === '' || value == null)) line += ` = ${JSON.stringify(truncate(String(value)))}`;
   return line;
@@ -91,6 +92,54 @@ function buildFingerprints(nodes, nodesById, childrenByParent, compact) {
   return fingerprints;
 }
 
+// Detect scrollable containers. Returns human-readable summary lines.
+// Only reports containers with overflow:auto|scroll and >50px hidden content.
+async function detectScrollables(cdp, sid) {
+  try {
+    const { result } = await cdp.send('Runtime.evaluate', {
+      expression: `(() => {
+        const MIN = 50;
+        const out = [];
+        const walk = (el, path) => {
+          if (el.nodeType !== 1 || out.length >= 10) return;
+          const sh = el.scrollHeight, sw = el.scrollWidth;
+          const ch = el.clientHeight, cw = el.clientWidth;
+          const isRoot = el === document.documentElement || el === document.body;
+          const style = isRoot ? null : getComputedStyle(el);
+          const oy = isRoot ? 'auto' : style.overflowY;
+          const ox = isRoot ? 'auto' : style.overflowX;
+          const scrollableY = isRoot || oy === 'auto' || oy === 'scroll';
+          const scrollableX = isRoot || ox === 'auto' || ox === 'scroll';
+          if (((scrollableY && sh > ch + MIN) || (scrollableX && sw > cw + MIN)) && ch > 0) {
+            const dirs = [];
+            if (scrollableY && sh > ch + MIN) {
+              const down = sh - ch - el.scrollTop;
+              const up = el.scrollTop;
+              if (up > MIN) dirs.push('up:' + Math.round(up) + 'px');
+              if (down > MIN) dirs.push('down:' + Math.round(down) + 'px');
+            }
+            if (scrollableX && sw > cw + MIN) {
+              const right = sw - cw - el.scrollLeft;
+              const left = el.scrollLeft;
+              if (left > MIN) dirs.push('left:' + Math.round(left) + 'px');
+              if (right > MIN) dirs.push('right:' + Math.round(right) + 'px');
+            }
+            if (dirs.length) {
+              const label = isRoot ? 'page' : (el.getAttribute('aria-label') || el.getAttribute('role') || el.id || el.tagName.toLowerCase());
+              out.push(label + ': ' + dirs.join(', '));
+            }
+          }
+          for (const c of el.children) walk(c);
+        };
+        walk(document.documentElement);
+        return out;
+      })()`,
+      returnByValue: true,
+    }, sid);
+    return result?.value || [];
+  } catch { return []; }
+}
+
 // refMap is populated when refs=true: { refNumber -> { backendNodeId, role, name } }
 // The caller (daemon) stores this map for later ref resolution.
 // previousFingerprints: Map from prior snapshot for incremental diff.
@@ -108,6 +157,7 @@ export async function snapshotStr(cdp, sid, compact = true, refs = false, previo
 
   const currentFingerprints = buildFingerprints(nodes, nodesById, childrenByParent, compact);
   const isDiff = previousFingerprints !== null && previousFingerprints.size > 0;
+  const scrollables = await detectScrollables(cdp, sid);
 
   const refIndex = { value: 1 };
   const refMap = new Map();
@@ -157,8 +207,9 @@ export async function snapshotStr(cdp, sid, compact = true, refs = false, previo
 
     const role = node.role?.value || '';
     const currentRef = refIndex.value;
+    const isNew = isDiff && !previousFingerprints.has(node.nodeId);
 
-    lines.push(formatAxNode(node, depth, refIndex, refs));
+    lines.push(formatAxNode(node, depth, refIndex, refs, isNew));
 
     if (refs && refIndex.value > currentRef) {
       refMap.set(currentRef, {
@@ -214,6 +265,10 @@ export async function snapshotStr(cdp, sid, compact = true, refs = false, previo
     const changedCount = totalVisible - unchangedCount;
     text = `[incremental: ${changedCount} changed, ${unchangedCount} unchanged]\n${text}`;
   }
+  // Append scroll info footer when scrollable containers exist
+  if (scrollables.length > 0) {
+    text += `\n[scroll: ${scrollables.join(' | ')}]`;
+  }
 
   return { text, refMap, fingerprints: currentFingerprints };
 }

package/plugins/chromex/skills/chromex/scripts/lib/daemon.mjs

@@ -46,6 +46,15 @@ import { touchStr } from './commands/touch.mjs';
 import { domsnapshotStr } from './commands/domsnapshot.mjs';
 import { parseRef, clickRefStr, hoverRefStr, fillRefStr } from './commands/refs.mjs';
 import { highlightStr } from './commands/highlight.mjs';
+import { sleep } from './utils.mjs';
+
+// Commands that modify visible DOM and should trigger automatic post-action snapshot.
+// After these commands, an incremental snapshot with refs is appended to the result,
+// so the AI agent sees the page state without needing a separate snapshot call.
+const AUTO_SNAP_CMDS = new Set([
+  'click', 'clickxy', 'type', 'fill', 'clear', 'select', 'check', 'form',
+  'nav', 'navigate', 'dialog', 'loadall', 'drag', 'touch', 'upload',
+]);
 
 export function getOrCreateToken(config) {
   if (!config.socketAuth) return null;
@@ -114,10 +123,18 @@ export async function runDaemon(targetId, config) {
     resetIdle();
     const auditResult = { ok: true };
     try {
+      // Strip --no-snap before dispatch so it doesn't contaminate command args
+      // (e.g. fill would type "--no-snap" into the input field).
+      const noSnap = args.includes('--no-snap');
+      if (noSnap) args = args.filter(a => a !== '--no-snap');
+
+      let result;
+      let isRefCmd = false;
+
       // Ref-based dispatch: click @e5, fill @e3 "value", hover @e12
       if (args[0] && parseRef(args[0]) !== null) {
+        isRefCmd = true;
         const refNum = parseRef(args[0]);
-        let result;
         if (cmd === 'click') {
           result = await clickRefStr(cdp, sessionId, currentRefMap, refNum);
         } else if (cmd === 'fill') {
@@ -127,12 +144,9 @@ export async function runDaemon(targetId, config) {
         } else {
           throw new Error(`Ref @e${refNum} not supported for command "${cmd}". Use with: click, fill, hover.`);
         }
-        audit(cmd, targetId, args, auditResult, config);
-        return { ok: true, result };
       }
 
-      let result;
-      switch (cmd) {
+      if (!isRefCmd) switch (cmd) {
         // --- Comandos originais ---
         case 'list': {
           const pages = await getPages(cdp);
@@ -172,6 +186,7 @@ export async function runDaemon(targetId, config) {
           break;
         case 'nav': case 'navigate':
           result = await navStr(cdp, sessionId, args[0], config);
+          previousFingerprints = null; // Reset: new page needs full snapshot
           break;
         case 'net': case 'network':
           result = await netStr(cdp, sessionId);
@@ -322,6 +337,29 @@ export async function runDaemon(targetId, config) {
         }
       }
       audit(cmd, targetId, args, auditResult, config);
+
+      // Auto-snapshot: append incremental snapshot with refs after DOM-modifying actions.
+      // This lets the AI agent see the resulting page state in a single round-trip.
+      // Opt-out with --no-snap for scripts doing rapid sequential actions.
+      const shouldSnap = isRefCmd
+        ? (cmd === 'click' || cmd === 'fill') // hover doesn't change DOM
+        : AUTO_SNAP_CMDS.has(cmd);
+
+      if (shouldSnap && !noSnap) {
+        try {
+          // Navigate already waits for load+readyState; shorter settle for it.
+          // Other actions (click, fill) need more time for SPA re-renders.
+          const settleMs = (cmd === 'nav' || cmd === 'navigate') ? 100 : 300;
+          await sleep(settleMs);
+          const snapResult = await snapshotStr(cdp, sessionId, true, true, previousFingerprints);
+          previousFingerprints = snapResult.fingerprints;
+          if (snapResult.refMap.size > 0) {
+            currentRefMap = snapResult.refMap;
+          }
+          result = (result ?? '') + '\n\n' + snapResult.text;
+        } catch (e) { process.stderr.write(`[auto-snap] ${e.message}\n`); }
+      }
+
       return { ok: true, result: result ?? '' };
     } catch (e) {
       auditResult.ok = false;

package/plugins/chromex/skills/chromex/scripts/mcp-server.mjs

@@ -54,6 +54,7 @@ function tool(name, description, properties, required, annotations) {
 }
 
 const P_TARGET = { type: 'string', description: 'Target ID prefix from chromex_list' };
+const P_NO_SNAP = { type: 'boolean', description: 'Skip auto-snapshot after action' };
 
 // ---- Tool definitions (52 tools) ----
 
@@ -167,10 +168,11 @@ const TOOLS = [
 
   // == NAVIGATE ==
   tool('chromex_navigate',
-    'Navigate to URL and wait for page load.',
+    'Navigate to URL and wait for page load. Returns full snapshot with refs of the new page.',
     {
       target: P_TARGET,
       url: { type: 'string', description: 'URL to navigate to' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'url'], RW),
 
   tool('chromex_waitfor',
@@ -199,25 +201,28 @@ const TOOLS = [
 
   // == INTERACT ==
   tool('chromex_click',
-    'Click element by CSS selector or @eN ref from snapshot.',
+    'Click element by CSS selector or @eN ref from snapshot. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       selector: { type: 'string', description: 'CSS selector or @eN ref' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'selector'], RW),
 
   tool('chromex_clickxy',
-    'Click at CSS pixel coordinates.',
+    'Click at CSS pixel coordinates. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       x: { type: 'number', description: 'X in CSS pixels' },
       y: { type: 'number', description: 'Y in CSS pixels' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'x', 'y'], RW),
 
   tool('chromex_type',
-    'Type text at currently focused element.',
+    'Type text at currently focused element. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       text: { type: 'string', description: 'Text to type' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'text'], RW),
 
   tool('chromex_hover',
@@ -228,82 +233,92 @@ const TOOLS = [
     }, ['target', 'ref'], RW),
 
   tool('chromex_drag',
-    'Drag and drop between selectors or coordinate pairs (x1,y1 x2,y2).',
+    'Drag and drop between selectors or coordinate pairs (x1,y1 x2,y2). Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       from: { type: 'string', description: 'Source selector or x,y' },
       to: { type: 'string', description: 'Destination selector or x,y' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'from', 'to'], RW),
 
   tool('chromex_touch',
-    'Touch gesture: tap, swipe, pinch, longpress.',
+    'Touch gesture: tap, swipe, pinch, longpress. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       gesture: { type: 'string', enum: ['tap', 'swipe', 'pinch', 'longpress'], description: 'Gesture type' },
       args: { type: 'array', items: { type: 'string' }, description: 'Gesture args: tap(x,y), swipe(x1,y1,x2,y2), pinch(x,y,scale), longpress(x,y,[ms])' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'gesture'], RW),
 
   tool('chromex_dialog',
-    'Handle JS dialogs (alert/confirm/prompt). Use "auto" to auto-accept all.',
+    'Handle JS dialogs (alert/confirm/prompt). Use "auto" to auto-accept all. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       action: { type: 'string', enum: ['accept', 'dismiss', 'auto'], description: 'Dialog action' },
       text: { type: 'string', description: 'Text for prompt (only with accept)' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'action'], RW),
 
   tool('chromex_loadall',
-    'Click "load more" button repeatedly until it disappears.',
+    'Click "load more" button repeatedly until it disappears. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       selector: { type: 'string', description: 'CSS selector of load-more button' },
       interval: { type: 'number', description: 'Interval between clicks in ms (default: 1500)' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'selector'], RW),
 
   // == FORMS ==
   tool('chromex_fill',
-    'Fill input/textarea. Handles React/Vue/Angular controlled inputs. Accepts @eN ref.',
+    'Fill input/textarea. Handles React/Vue/Angular controlled inputs. Accepts @eN ref. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       selector: { type: 'string', description: 'CSS selector or @eN ref' },
       value: { type: 'string', description: 'Value to fill' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'selector', 'value'], RW),
 
   tool('chromex_clear',
-    'Clear input field.',
+    'Clear input field. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       selector: { type: 'string', description: 'CSS selector' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'selector'], RW),
 
   tool('chromex_select',
-    'Select option in dropdown.',
+    'Select option in dropdown. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       selector: { type: 'string', description: 'CSS selector of select element' },
       value: { type: 'string', description: 'Option value or visible text' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'selector', 'value'], RW),
 
   tool('chromex_check',
-    'Toggle checkbox or radio button.',
+    'Toggle checkbox or radio button. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       selector: { type: 'string', description: 'CSS selector' },
       checked: { type: 'boolean', description: 'Desired state (default: true)', default: true },
+      noSnap: P_NO_SNAP,
     }, ['target', 'selector'], RW),
 
   tool('chromex_form',
-    'Batch fill form. JSON maps selectors to values. Booleans toggle checkboxes.',
+    'Batch fill form. JSON maps selectors to values. Booleans toggle checkboxes. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       fields: { type: 'string', description: 'JSON: {"#email":"user@test.com","#terms":true}' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'fields'], RW),
 
   tool('chromex_upload',
-    'Upload file(s) to input[type=file].',
+    'Upload file(s) to input[type=file]. Returns auto-snapshot with updated refs.',
     {
       target: P_TARGET,
       selector: { type: 'string', description: 'CSS selector of file input' },
       files: { type: 'array', items: { type: 'string' }, description: 'File path(s)' },
+      noSnap: P_NO_SNAP,
     }, ['target', 'selector', 'files'], RW),
 
   // == DATA ==
@@ -631,6 +646,8 @@ async function executeTool(name, params) {
   const mapped = toolToCmd(name, params);
   if (!mapped) return fail(`Unknown tool: ${name}`);
 
+  if (params.noSnap) mapped.args.push('--no-snap');
+
   const conn = await getOrStartTabDaemon(targetId, config);
   const response = await sendCommand(conn, { cmd: mapped.cmd, args: mapped.args });