surf-cli 2.1.0 → 2.3.0

package/native/host-helpers.cjs

@@ -20,12 +20,82 @@ function formatToolContent(result, log = () => {}) {
     return text(result.content);
   }
   
-  // Handle ChatGPT/Gemini responses
+  // 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 Grok validation results
+  if (result.authenticated !== undefined && result.models !== undefined && result.expectedModels !== undefined) {
+    let output = "## Grok Validation Results\n\n";
+    output += `**Authenticated:** ${result.authenticated ? 'Yes' : 'No'}\n`;
+    output += `**Premium:** ${result.premium ? 'Yes' : 'No'}\n`;
+    output += `**Input Field:** ${result.inputFound ? 'Found' : 'Not Found'}\n`;
+    output += `**Send Button:** ${result.sendButtonFound ? 'Found' : 'Not Found'}\n\n`;
+    
+    output += `**Available Models:** ${result.models.length > 0 ? result.models.join(', ') : 'None found'}\n`;
+    output += `**Expected Models:** ${result.expectedModels.join(', ')}\n`;
+    output += `**Model Mismatch:** ${result.modelMismatch ? 'Yes' : 'No'}\n\n`;
+    
+    if (result.errors && result.errors.length > 0) {
+      output += `**Errors:**\n${result.errors.map(e => `- ${e}`).join('\n')}\n\n`;
+    }
+    
+    if (result.savedModels) {
+      if (result.savedModels.success) {
+        output += `**Models saved to:** ${result.savedModels.path}\n`;
+      } else {
+        output += `**Failed to save models:** ${result.savedModels.error}\n`;
+      }
+    }
+    
+    output += `\n*Config: ${result.configPath}*\n`;
+    output += `*Completed in ${result.tookMs}ms*`;
+    
+    return text(output);
+  }
+  
+  // Handle ChatGPT/Gemini/Grok responses
   if (result.response !== undefined && result.model !== undefined && result.tookMs !== undefined) {
     let output = result.response;
     if (result.imagePath) {
       output += `\n\n*Image saved to: ${result.imagePath}*`;
     }
+    if (result.thinkingTime) {
+      output += `\n\n*Grok thought for ${result.thinkingTime}s*`;
+    }
+    if (result.partial) {
+      output += `\n\n*Warning: Response was truncated due to timeout*`;
+    }
+    if (result.warnings && result.warnings.length > 0) {
+      output += `\n\n**Warnings:**\n${result.warnings.map(w => `- ${w}`).join('\n')}`;
+    }
     return text(output);
   }
   
@@ -815,6 +885,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":
@@ -963,6 +1052,24 @@ function mapToolToMessage(tool, args, tabId) {
         timeout: a.timeout ? parseInt(a.timeout, 10) * 1000 : 120000,
         ...baseMsg
       };
+    case "grok":
+      if (a.validate) {
+        return {
+          type: "GROK_VALIDATE",
+          saveModels: a["save-models"] || a.saveModels || false,
+          ...baseMsg
+        };
+      }
+      if (!a.query) throw new Error("query required");
+      return {
+        type: "GROK_QUERY",
+        query: a.query,
+        model: a.model,
+        deepSearch: a["deep-search"] || a.deepSearch || false,
+        withPage: a["with-page"],
+        timeout: a.timeout ? parseInt(a.timeout, 10) * 1000 : 300000,
+        ...baseMsg
+      };
     case "window.new":
       return { 
         type: "WINDOW_NEW", 

package/native/host.cjs

@@ -9,6 +9,7 @@ const { GoogleGenerativeAI } = require("@google/generative-ai");
 const chatgptClient = require("./chatgpt-client.cjs");
 const geminiClient = require("./gemini-client.cjs");
 const perplexityClient = require("./perplexity-client.cjs");
+const grokClient = require("./grok-client.cjs");
 const { mapToolToMessage, mapComputerAction, formatToolContent } = require("./host-helpers.cjs");
 
 const SOCKET_PATH = "/tmp/surf.sock";
@@ -713,6 +714,203 @@ function handleToolRequest(msg, socket) {
     return;
   }
   
+  if (extensionMsg.type === "GROK_QUERY") {
+    const { query, model, deepSearch, withPage, timeout } = extensionMsg;
+    
+    queueAiRequest(async () => {
+      // 1. Get page context if requested
+      let pageContext = null;
+      if (withPage) {
+        const pageResult = await new Promise((resolve) => {
+          const pageId = ++requestCounter;
+          pendingToolRequests.set(pageId, {
+            socket: null,
+            originalId: null,
+            tool: "get_page_text",
+            onComplete: resolve
+          });
+          writeMessage({ type: "GET_PAGE_TEXT", tabId: extensionMsg.tabId, id: pageId });
+        });
+        if (pageResult && !pageResult.error) {
+          pageContext = {
+            url: pageResult.url,
+            text: pageResult.text || pageResult.pageContent || ""
+          };
+        }
+      }
+      
+      // 2. Build full prompt
+      let fullPrompt = query || "";
+      if (pageContext) {
+        fullPrompt = `Page: ${pageContext.url}\n\n${pageContext.text}\n\n---\n\n${fullPrompt}`;
+      }
+      
+      // 3. Call Grok client
+      const result = await grokClient.query({
+        prompt: fullPrompt,
+        model: model,
+        deepSearch: deepSearch || false,
+        timeout: timeout || 300000,
+        getCookies: () => new Promise((resolve) => {
+          const cookieId = ++requestCounter;
+          pendingToolRequests.set(cookieId, {
+            socket: null,
+            originalId: null,
+            tool: "get_cookies",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GET_TWITTER_COOKIES", id: cookieId });
+        }),
+        createTab: () => new Promise((resolve) => {
+          const tabCreateId = ++requestCounter;
+          pendingToolRequests.set(tabCreateId, {
+            socket: null,
+            originalId: null,
+            tool: "create_tab",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GROK_NEW_TAB", id: tabCreateId });
+        }),
+        closeTab: (tabIdToClose) => new Promise((resolve) => {
+          const tabCloseId = ++requestCounter;
+          pendingToolRequests.set(tabCloseId, {
+            socket: null,
+            originalId: null,
+            tool: "close_tab",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GROK_CLOSE_TAB", tabId: tabIdToClose, id: tabCloseId });
+        }),
+        cdpEvaluate: (tabId, expression) => new Promise((resolve) => {
+          const evalId = ++requestCounter;
+          pendingToolRequests.set(evalId, {
+            socket: null,
+            originalId: null,
+            tool: "cdp_evaluate",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GROK_EVALUATE", tabId, expression, id: evalId });
+        }),
+        cdpCommand: (tabId, method, params) => new Promise((resolve) => {
+          const cmdId = ++requestCounter;
+          pendingToolRequests.set(cmdId, {
+            socket: null,
+            originalId: null,
+            tool: "cdp_command",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GROK_CDP_COMMAND", tabId, method, params, id: cmdId });
+        }),
+        log: (msg) => log(`[grok] ${msg}`)
+      });
+      
+      return result;
+    }).then((result) => {
+      const response = { 
+        response: result.response, 
+        model: result.model, 
+        tookMs: result.tookMs 
+      };
+      if (result.thinkingTime) {
+        response.thinkingTime = result.thinkingTime;
+      }
+      if (result.deepSearch) {
+        response.deepSearch = result.deepSearch;
+      }
+      if (result.partial) {
+        response.partial = true;
+      }
+      if (result.warnings && result.warnings.length > 0) {
+        response.warnings = result.warnings;
+      }
+      if (result.modelSelectionFailed) {
+        response.modelSelectionFailed = true;
+      }
+      sendToolResponse(socket, originalId, response, null);
+    }).catch((err) => {
+      sendToolResponse(socket, originalId, null, err.message);
+    });
+    
+    return;
+  }
+  
+  if (extensionMsg.type === "GROK_VALIDATE") {
+    const { saveModels } = extensionMsg;
+    
+    queueAiRequest(async () => {
+      const result = await grokClient.validate({
+        getCookies: () => new Promise((resolve) => {
+          const cookieId = ++requestCounter;
+          pendingToolRequests.set(cookieId, {
+            socket: null,
+            originalId: null,
+            tool: "get_cookies",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GET_TWITTER_COOKIES", id: cookieId });
+        }),
+        createTab: () => new Promise((resolve) => {
+          const tabCreateId = ++requestCounter;
+          pendingToolRequests.set(tabCreateId, {
+            socket: null,
+            originalId: null,
+            tool: "create_tab",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GROK_NEW_TAB", id: tabCreateId });
+        }),
+        closeTab: (tabIdToClose) => new Promise((resolve) => {
+          const tabCloseId = ++requestCounter;
+          pendingToolRequests.set(tabCloseId, {
+            socket: null,
+            originalId: null,
+            tool: "close_tab",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GROK_CLOSE_TAB", tabId: tabIdToClose, id: tabCloseId });
+        }),
+        cdpEvaluate: (tabId, expression) => new Promise((resolve) => {
+          const evalId = ++requestCounter;
+          pendingToolRequests.set(evalId, {
+            socket: null,
+            originalId: null,
+            tool: "cdp_evaluate",
+            onComplete: (r) => resolve(r)
+          });
+          writeMessage({ type: "GROK_EVALUATE", tabId, expression, id: evalId });
+        }),
+        log: (msg) => log(`[grok:validate] ${msg}`)
+      });
+      
+      return result;
+    }).then((result) => {
+      // If --save-models flag was passed and we found models, save them
+      if (saveModels && result.models && result.models.length > 0) {
+        // Convert scraped model names to our format
+        const modelMap = {};
+        result.models.forEach(name => {
+          const nameLower = name.toLowerCase();
+          // Match known model keywords to generate consistent short IDs
+          let shortId;
+          if (nameLower.includes('thinking')) shortId = 'thinking';
+          else if (nameLower.includes('expert')) shortId = 'expert';
+          else if (nameLower.includes('fast')) shortId = 'fast';
+          else if (nameLower.includes('auto')) shortId = 'auto';
+          else shortId = nameLower.replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+          
+          modelMap[shortId] = { id: shortId, name: name, desc: "" };
+        });
+        const saveResult = grokClient.saveModels(modelMap);
+        result.savedModels = saveResult;
+      }
+      sendToolResponse(socket, originalId, result, null);
+    }).catch((err) => {
+      sendToolResponse(socket, originalId, null, err.message);
+    });
+    
+    return;
+  }
+  
   if (extensionMsg.type === "EXECUTE_KEY_REPEAT") {
     const { key, repeat, tabId: tid } = extensionMsg;
     let completed = 0;

package/native/perplexity-client.cjs

@@ -193,22 +193,21 @@ async function selectModel(cdp, model, timeoutMs = 8000) {
   
   await delay(500);
   
-  // Select from menu
+  // Select from menu - loop in Node.js to avoid CDP timeout issues
   const normalizedModel = model.toLowerCase().replace(/[^a-z0-9]/g, '');
+  const deadline = Date.now() + timeoutMs;
   
-  const result = await evaluate(cdp, `(async () => {
-    ${buildClickDispatcher()}
-    
-    const targetModel = ${JSON.stringify(normalizedModel)};
-    const normalize = (text) => (text || '').toLowerCase().replace(/[^a-z0-9]/g, '');
-    const deadline = Date.now() + ${timeoutMs};
-    
-    while (Date.now() < deadline) {
+  while (Date.now() < deadline) {
+    const result = await evaluate(cdp, `(() => {
+      ${buildClickDispatcher()}
+      
+      const targetModel = ${JSON.stringify(normalizedModel)};
+      const normalize = (text) => (text || '').toLowerCase().replace(/[^a-z0-9]/g, '');
+      
       const menuItems = document.querySelectorAll('[role=menuitem], [role=menuitemradio], [role=option]');
       
       if (menuItems.length === 0) {
-        await new Promise(r => setTimeout(r, 100));
-        continue;
+        return { found: false, waiting: true };
       }
       
       let bestMatch = null;
@@ -229,23 +228,28 @@ async function selectModel(cdp, model, timeoutMs = 8000) {
       
       if (bestMatch) {
         dispatchClickSequence(bestMatch);
-        await new Promise(r => setTimeout(r, 200));
-        return { success: true, model: bestMatch.textContent?.trim() };
+        return { found: true, success: true, model: bestMatch.textContent?.trim() };
       }
       
-      await new Promise(r => setTimeout(r, 100));
+      return { found: true, success: false, error: 'No matching model in menu' };
+    })()`);
+    
+    if (result && result.found) {
+      if (result.success) {
+        await delay(200);
+        return result.model;
+      }
+      // Items found but no match - close menu and throw
+      await evaluate(cdp, `document.body.click()`);
+      throw new Error(`Failed to select model: ${result?.error}`);
     }
     
-    // Close menu by clicking elsewhere
-    document.body.click();
-    return { success: false, error: 'Model not found in menu' };
-  })()`);
-  
-  if (!result || !result.success) {
-    throw new Error(`Failed to select model: ${result?.error}`);
+    await delay(100);
   }
   
-  return result.model;
+  // Timeout - close menu
+  await evaluate(cdp, `document.body.click()`);
+  throw new Error(`Failed to select model: timeout waiting for menu`);
 }
 
 // ============================================================================

package/package.json

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