fix grok browser_user

src/core/task/ToolExecutor.ts

@@ -35,7 +35,7 @@ import { ClineAskResponse } from "@shared/WebviewMessage"
 import { extractFileContent, FileContentResult } from "@integrations/misc/extract-file-content"
 import { COMMAND_REQ_APP_STRING } from "@shared/combineCommandSequences"
 import { fileExistsAtPath } from "@utils/fs"
-import { isClaude4ModelFamily, isGemini2dot5ModelFamily } from "@utils/model-utils"
+import { isClaude4ModelFamily, isGemini2dot5ModelFamily, isGrok4ModelFamily, modelDoesntSupportWebp } from "@utils/model-utils"
 import { fixModelHtmlEscaping, removeInvalidChars } from "@utils/string"
 import { setTimeout as setTimeoutPromise } from "node:timers/promises"
 import os from "os"
@@ -124,7 +124,8 @@ export class ToolExecutor {
 	}
 
 	private pushToolResult = (content: ToolResponse, block: ToolUse) => {
-		const isNextGenModel = isClaude4ModelFamily(this.api) || isGemini2dot5ModelFamily(this.api)
+		const isNextGenModel =
+			isClaude4ModelFamily(this.api) || isGemini2dot5ModelFamily(this.api) || isGrok4ModelFamily(this.api)
 
 		if (typeof content === "string") {
 			const resultText = content || "(tool did not return anything)"
@@ -489,7 +490,8 @@ export class ToolExecutor {
 
 						const currentFullJson = block.params.diff
 						// Check if we should use streaming (e.g., for specific models)
-						const isNextGenModel = isClaude4ModelFamily(this.api) || isGemini2dot5ModelFamily(this.api)
+						const isNextGenModel =
+							isClaude4ModelFamily(this.api) || isGemini2dot5ModelFamily(this.api) || isGrok4ModelFamily(this.api)
 						// Going through claude family of models
 						if (isNextGenModel && USE_EXPERIMENTAL_CLAUDE4_FEATURES && currentFullJson) {
 							const streamingResult = await this.handleStreamingJsonReplacement(block, relPath, currentFullJson)
@@ -1182,7 +1184,9 @@ export class ToolExecutor {
 							// Re-make browserSession to make sure latest settings apply
 							if (this.context) {
 								await this.browserSession.dispose()
-								this.browserSession = new BrowserSession(this.context, this.browserSettings)
+
+								let useWebp = this.api ? !modelDoesntSupportWebp(this.api) : true
+								this.browserSession = new BrowserSession(this.context, this.browserSettings, useWebp)
 							} else {
 								console.warn("no controller context available for browserSession")
 							}

src/services/browser/BrowserSession.ts

@@ -41,15 +41,17 @@ export class BrowserSession {
 	private lastConnectionAttempt: number = 0
 	browserSettings: BrowserSettings
 	private isConnectedToRemote: boolean = false
+	private useWebp: boolean
 
 	// Telemetry tracking properties
 	private sessionStartTime: number = 0
 	private browserActions: string[] = []
 	private taskId?: string
 
-	constructor(context: vscode.ExtensionContext, browserSettings: BrowserSettings) {
+	constructor(context: vscode.ExtensionContext, browserSettings: BrowserSettings, useWebp: boolean = true) {
 		this.context = context
 		this.browserSettings = browserSettings
+		this.useWebp = useWebp
 	}
 
 	// Tests remote browser connection
@@ -487,14 +489,16 @@ export class BrowserSession {
 			// },
 		}
 
+		const screenshotType = this.useWebp ? "webp" : "png"
 		let screenshotBase64 = await this.page.screenshot({
 			...options,
-			type: "webp",
+			type: screenshotType,
 		})
-		let screenshot = `data:image/webp;base64,${screenshotBase64}`
+		let screenshot = `data:image/${screenshotType};base64,${screenshotBase64}`
 
 		if (!screenshotBase64) {
-			console.info("webp screenshot failed, trying png")
+			// choosing to try screenshot again, regardless of the initial type
+			console.info(`${screenshotType} screenshot failed, trying png`)
 			screenshotBase64 = await this.page.screenshot({
 				...options,
 				type: "png",

src/utils/model-utils.ts

@@ -20,6 +20,12 @@ export function isGrok4ModelFamily(api: ApiHandler): boolean {
 	return modelId.includes("grok-4")
 }
 
+export function modelDoesntSupportWebp(api: ApiHandler): boolean {
+	const model = api.getModel()
+	const modelId = model.id.toLowerCase()
+	return modelId.includes("grok")
+}
+
 /**
  * Determines if reasoning content should be skipped for a given model
  * Currently skips reasoning for Grok-4 models since they only display "thinking" without useful information