surf-cli 2.1.0 → 2.2.0

package/native/cli.cjs

@@ -349,6 +349,37 @@ const TOOLS = {
       },
     }
   },
+  element: {
+    desc: "Element inspection",
+    commands: {
+      "element.styles": {
+        desc: "Get computed styles from element(s)",
+        args: ["ref_or_selector"],
+        examples: [
+          { cmd: "element.styles e5", desc: "Get styles by ref" },
+          { cmd: 'element.styles ".header"', desc: "Get styles by selector (can return multiple)" },
+        ]
+      },
+    }
+  },
+  forms: {
+    desc: "Form interactions",
+    commands: {
+      "select": {
+        desc: "Select option(s) in dropdown",
+        args: ["ref_or_selector", "values..."],
+        opts: {
+          by: "Match by: value (default), label, index"
+        },
+        examples: [
+          { cmd: 'select e5 "US"', desc: "Select by value" },
+          { cmd: 'select e5 "opt1" "opt2"', desc: "Multi-select" },
+          { cmd: 'select e5 --by label "United States"', desc: "Select by visible text" },
+          { cmd: 'select e5 --by index 0', desc: "Select first option" },
+        ]
+      },
+    }
+  },
   wait: {
     desc: "Waiting",
     commands: {
@@ -1809,6 +1840,8 @@ const PRIMARY_ARG_MAP = {
   "locate.label": "label",
   "emulate.device": "device",
   "frame.js": "code",
+  "element.styles": "selector",
+  "select": "selector",
 };
 
 const toolArgs = { ...options };
@@ -1845,6 +1878,17 @@ if (tool === "js" && toolArgs.file) {
   }
 }
 
+// Handle select command: capture multiple values after selector
+if (tool === "select" && positional.length > 2) {
+  const values = positional.slice(2);  // All args after "select <selector>"
+  toolArgs.values = values.length === 1 ? values[0] : values;
+} else if (tool === "select" && positional.length === 2) {
+  // Only selector provided, no values
+  console.error("Error: select requires at least one value");
+  console.error("Usage: surf select <selector> <value...>");
+  process.exit(1);
+}
+
 if (toolArgs.into && !toolArgs.selector) {
   toolArgs.selector = toolArgs.into;
   delete toolArgs.into;

package/native/host-helpers.cjs

@@ -20,6 +20,37 @@ function formatToolContent(result, log = () => {}) {
     return text(result.content);
   }
   
+  // Handle element.styles response
+  if (result.styles && Array.isArray(result.styles)) {
+    const output = result.styles.map(el => {
+      const lines = [`<${el.tag}>${el.text ? ` "${el.text.slice(0, 50)}${el.text.length > 50 ? '...' : ''}"` : ''}`];
+      if (el.box) lines.push(`  box: ${el.box.x},${el.box.y} ${el.box.width}x${el.box.height}`);
+      const s = el.styles;
+      if (s) {
+        if (s.fontSize) lines.push(`  font: ${s.fontSize} ${s.fontWeight} ${s.fontFamily}`);
+        if (s.color) lines.push(`  color: ${s.color}`);
+        if (s.backgroundColor && s.backgroundColor !== 'rgba(0, 0, 0, 0)') lines.push(`  bg: ${s.backgroundColor}`);
+        if (s.borderRadius && s.borderRadius !== '0px') lines.push(`  radius: ${s.borderRadius}`);
+        if (s.border) lines.push(`  border: ${s.border}`);
+        if (s.boxShadow) lines.push(`  shadow: ${s.boxShadow}`);
+        if (s.padding && s.padding !== '0px') lines.push(`  padding: ${s.padding}`);
+      }
+      return lines.join('\n');
+    }).join('\n\n');
+    return text(output || "No elements found");
+  }
+  
+  // Handle select response
+  if (result.selected !== undefined) {
+    let output = Array.isArray(result.selected) 
+      ? `Selected: ${result.selected.join(', ')}`
+      : `Selected: ${result.selected}`;
+    if (result.warning) {
+      output += `\n[Warning: ${result.warning}]`;
+    }
+    return text(output);
+  }
+  
   // Handle ChatGPT/Gemini responses
   if (result.response !== undefined && result.model !== undefined && result.tookMs !== undefined) {
     let output = result.response;
@@ -815,6 +846,25 @@ function mapToolToMessage(tool, args, tabId) {
         value: a.value,
         ...baseMsg 
       };
+    case "element.styles":
+      if (!a.selector) throw new Error("selector argument required");
+      return { 
+        type: "GET_ELEMENT_STYLES", 
+        selector: a.selector,
+        ...baseMsg 
+      };
+    case "select": {
+      if (!a.selector) throw new Error("selector argument required");
+      const values = Array.isArray(a.values) ? a.values : (a.values ? [a.values] : []);
+      if (values.length === 0) throw new Error("at least one value required");
+      return { 
+        type: "SELECT_OPTION", 
+        selector: a.selector,
+        values,
+        by: a.by || "value",  // value, label, or index
+        ...baseMsg 
+      };
+    }
     case "ai":
       return { type: "AI_ANALYZE", query: a.query, act: a.act, mode: a.mode, ...baseMsg };
     case "wait":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "surf-cli",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "CLI for AI agents to control Chrome. Zero config, agent-agnostic, battle-tested.",
   "keywords": [
     "chrome",

package/native/stream-viewer.html

@@ -1,415 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Surf Stream Viewer</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      background: #1a1a1a;
-      color: #e0e0e0;
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      overflow: hidden;
-    }
-
-    #status {
-      background: #2d2d2d;
-      padding: 12px 20px;
-      border-bottom: 1px solid #404040;
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      font-size: 14px;
-      flex-shrink: 0;
-    }
-
-    #status.connected {
-      border-bottom-color: #4caf50;
-    }
-
-    #status.disconnected {
-      border-bottom-color: #f44336;
-    }
-
-    .status-indicator {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: #666;
-    }
-
-    .status-indicator.connected {
-      background: #4caf50;
-      box-shadow: 0 0 8px #4caf50;
-    }
-
-    .status-indicator.disconnected {
-      background: #f44336;
-    }
-
-    #viewport-container {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: auto;
-      background: #0a0a0a;
-      position: relative;
-    }
-
-    #viewport {
-      display: block;
-      max-width: 100%;
-      max-height: 100%;
-      cursor: crosshair;
-      image-rendering: crisp-edges;
-      image-rendering: pixelated;
-    }
-
-    #viewport:not(.ready) {
-      opacity: 0.5;
-    }
-
-    #loading {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      color: #888;
-    }
-
-    .spinner {
-      border: 3px solid #333;
-      border-top: 3px solid #4caf50;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      animation: spin 1s linear infinite;
-      margin: 0 auto 10px;
-    }
-
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-  </style>
-</head>
-<body>
-  <div id="status" class="disconnected">
-    <div class="status-indicator disconnected"></div>
-    <span id="status-text">Connecting...</span>
-    <span id="viewport-info" style="margin-left: auto;"></span>
-  </div>
-  <div id="viewport-container">
-    <div id="loading">
-      <div class="spinner"></div>
-      <div>Waiting for stream...</div>
-    </div>
-    <canvas id="viewport"></canvas>
-  </div>
-
-  <script>
-    const canvas = document.getElementById('viewport');
-    const ctx = canvas.getContext('2d');
-    const statusEl = document.getElementById('status');
-    const statusText = document.getElementById('status-text');
-    const viewportInfo = document.getElementById('viewport-info');
-    const loadingEl = document.getElementById('loading');
-
-    let ws = null;
-    let frameCount = 0;
-    let lastFrameTime = Date.now();
-    let fps = 0;
-    let isMouseDown = false;
-    let activeButton = 'left';
-    let activeTouches = new Map();
-
-    function connect() {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      const wsUrl = `${protocol}//${window.location.host}`;
-      
-      ws = new WebSocket(wsUrl);
-
-      ws.onopen = () => {
-        statusEl.className = 'connected';
-        statusEl.querySelector('.status-indicator').className = 'status-indicator connected';
-        statusText.textContent = 'Connected';
-        loadingEl.style.display = 'none';
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const message = JSON.parse(event.data);
-          
-          if (message.type === 'frame') {
-            drawFrame(message);
-          } else if (message.type === 'status') {
-            updateStatus(message);
-          } else if (message.type === 'error') {
-            statusText.textContent = `Error: ${message.message}`;
-            statusEl.className = 'disconnected';
-            statusEl.querySelector('.status-indicator').className = 'status-indicator disconnected';
-          }
-        } catch (e) {
-          console.error('Error parsing message:', e);
-        }
-      };
-
-      ws.onerror = (error) => {
-        console.error('WebSocket error:', error);
-        statusText.textContent = 'Connection error';
-        statusEl.className = 'disconnected';
-        statusEl.querySelector('.status-indicator').className = 'status-indicator disconnected';
-      };
-
-      ws.onclose = () => {
-        statusText.textContent = 'Disconnected';
-        statusEl.className = 'disconnected';
-        statusEl.querySelector('.status-indicator').className = 'status-indicator disconnected';
-        loadingEl.style.display = 'block';
-        
-        setTimeout(connect, 2000);
-      };
-    }
-
-    function drawFrame(message) {
-      const img = new Image();
-      img.onload = () => {
-        canvas.width = img.width;
-        canvas.height = img.height;
-        ctx.drawImage(img, 0, 0);
-        canvas.classList.add('ready');
-        
-        frameCount++;
-        const now = Date.now();
-        if (now - lastFrameTime >= 1000) {
-          fps = frameCount;
-          frameCount = 0;
-          lastFrameTime = now;
-        }
-        
-        updateViewportInfo(img.width, img.height, fps);
-      };
-      const mimeType = message.data.startsWith('iVBORw0K') ? 'image/png' : 'image/jpeg';
-      img.src = `data:${mimeType};base64,${message.data}`;
-    }
-
-    function updateStatus(message) {
-      if (message.viewportWidth && message.viewportHeight) {
-        updateViewportInfo(message.viewportWidth, message.viewportHeight, fps);
-      }
-    }
-
-    function updateViewportInfo(width, height, fps) {
-      viewportInfo.textContent = `${width}×${height} | ${fps} fps`;
-    }
-
-    function getCanvasCoordinates(e) {
-      const rect = canvas.getBoundingClientRect();
-      const scaleX = canvas.width / rect.width;
-      const scaleY = canvas.height / rect.height;
-      
-      const x = Math.round((e.clientX - rect.left) * scaleX);
-      const y = Math.round((e.clientY - rect.top) * scaleY);
-      
-      // Check if click is within canvas bounds
-      if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
-        return null;
-      }
-      
-      return { x, y };
-    }
-
-    function getModifiers(e) {
-      return (e.altKey ? 1 : 0) | (e.ctrlKey ? 2 : 0) | (e.metaKey ? 4 : 0) | (e.shiftKey ? 8 : 0);
-    }
-
-    function sendMouseEvent(eventType, e, button = 'left') {
-      if (!ws || ws.readyState !== WebSocket.OPEN) return;
-      
-      const coords = getCanvasCoordinates(e);
-      if (!coords) return; // Click outside canvas bounds
-      
-      ws.send(JSON.stringify({
-        type: 'input_mouse',
-        eventType,
-        x: coords.x,
-        y: coords.y,
-        button,
-        clickCount: 1,
-        modifiers: getModifiers(e),
-      }));
-    }
-
-    canvas.addEventListener('mousedown', (e) => {
-      e.preventDefault();
-      isMouseDown = true;
-      activeButton = e.button === 2 ? 'right' : e.button === 1 ? 'middle' : 'left';
-      // Send mouseMoved first to ensure element has hover state
-      sendMouseEvent('mouseMoved', e, 'none');
-      sendMouseEvent('mousePressed', e, activeButton);
-    });
-
-    canvas.addEventListener('mouseup', (e) => {
-      e.preventDefault();
-      const button = e.button === 2 ? 'right' : e.button === 1 ? 'middle' : 'left';
-      sendMouseEvent('mouseReleased', e, button);
-      isMouseDown = false;
-      activeButton = 'left';
-    });
-
-    canvas.addEventListener('mousemove', (e) => {
-      e.preventDefault();
-      if (isMouseDown) {
-        sendMouseEvent('mouseMoved', e, activeButton);
-      }
-    });
-
-    canvas.addEventListener('mouseleave', (e) => {
-      if (isMouseDown) {
-        sendMouseEvent('mouseReleased', e, activeButton);
-        isMouseDown = false;
-        activeButton = 'left';
-      }
-    });
-
-    canvas.addEventListener('contextmenu', (e) => {
-      e.preventDefault();
-    });
-
-    canvas.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      if (!ws || ws.readyState !== WebSocket.OPEN) return;
-      
-      const coords = getCanvasCoordinates(e);
-      let deltaX = e.deltaX;
-      let deltaY = e.deltaY;
-      if (e.deltaMode === 1) {
-        deltaX *= 40;
-        deltaY *= 40;
-      } else if (e.deltaMode === 2) {
-        deltaX *= window.innerHeight;
-        deltaY *= window.innerHeight;
-      }
-      ws.send(JSON.stringify({
-        type: 'input_mouse',
-        eventType: 'mouseWheel',
-        x: coords.x,
-        y: coords.y,
-        deltaX,
-        deltaY,
-        modifiers: getModifiers(e),
-      }));
-    });
-
-    function getTouchCoordinates(touch) {
-      const rect = canvas.getBoundingClientRect();
-      const scaleX = canvas.width / rect.width;
-      const scaleY = canvas.height / rect.height;
-      return {
-        x: Math.round((touch.clientX - rect.left) * scaleX),
-        y: Math.round((touch.clientY - rect.top) * scaleY),
-        id: touch.identifier,
-      };
-    }
-
-    function sendTouchEvent(eventType, touches) {
-      if (!ws || ws.readyState !== WebSocket.OPEN) return;
-      ws.send(JSON.stringify({
-        type: 'input_touch',
-        eventType,
-        touchPoints: touches,
-        modifiers: 0,
-      }));
-    }
-
-    canvas.addEventListener('touchstart', (e) => {
-      e.preventDefault();
-      for (const touch of e.changedTouches) {
-        const coords = getTouchCoordinates(touch);
-        activeTouches.set(touch.identifier, coords);
-      }
-      sendTouchEvent('touchStart', Array.from(activeTouches.values()));
-    });
-
-    canvas.addEventListener('touchend', (e) => {
-      e.preventDefault();
-      for (const touch of e.changedTouches) {
-        activeTouches.delete(touch.identifier);
-      }
-      sendTouchEvent('touchEnd', Array.from(activeTouches.values()));
-    });
-
-    canvas.addEventListener('touchmove', (e) => {
-      e.preventDefault();
-      for (const touch of e.changedTouches) {
-        const coords = getTouchCoordinates(touch);
-        activeTouches.set(touch.identifier, coords);
-      }
-      sendTouchEvent('touchMove', Array.from(activeTouches.values()));
-    });
-
-    canvas.addEventListener('touchcancel', (e) => {
-      e.preventDefault();
-      for (const touch of e.changedTouches) {
-        activeTouches.delete(touch.identifier);
-      }
-      sendTouchEvent('touchCancel', Array.from(activeTouches.values()));
-    });
-
-    document.addEventListener('keydown', (e) => {
-      if (!ws || ws.readyState !== WebSocket.OPEN) return;
-      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-      
-      e.preventDefault();
-      const modifiers = (e.altKey ? 1 : 0) | (e.ctrlKey ? 2 : 0) | (e.metaKey ? 4 : 0) | (e.shiftKey ? 8 : 0);
-      
-      // Send keyDown event
-      ws.send(JSON.stringify({
-        type: 'input_keyboard',
-        eventType: 'keyDown',
-        key: e.key,
-        code: e.code,
-        modifiers,
-      }));
-      
-      // For printable characters, also send a char event
-      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
-        ws.send(JSON.stringify({
-          type: 'input_keyboard',
-          eventType: 'char',
-          text: e.key,
-          modifiers,
-        }));
-      }
-    });
-
-    document.addEventListener('keyup', (e) => {
-      if (!ws || ws.readyState !== WebSocket.OPEN) return;
-      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-      
-      e.preventDefault();
-      
-      ws.send(JSON.stringify({
-        type: 'input_keyboard',
-        eventType: 'keyUp',
-        key: e.key,
-        code: e.code,
-        modifiers: (e.altKey ? 1 : 0) | (e.ctrlKey ? 2 : 0) | (e.metaKey ? 4 : 0) | (e.shiftKey ? 8 : 0),
-      }));
-    });
-
-    connect();
-  </script>
-</body>
-</html>