feat(browser): add compatibility helper for browser capability; use in Task and webview; add tests covering supportsImages vs legacy supportsComputerUse

Author: hannesrudolph

src/core/task/Task.ts

@@ -53,6 +53,7 @@ import { ClineApiReqCancelReason, ClineApiReqInfo } from "../../shared/Extension
 import { getApiMetrics, hasTokenUsageChanged } from "../../shared/getApiMetrics"
 import { ClineAskResponse } from "../../shared/WebviewMessage"
 import { defaultModeSlug, getModeBySlug, getGroupName } from "../../shared/modes"
+import { modelSupportsBrowserCapability } from "../../shared/browserCapability"
 import { DiffStrategy } from "../../shared/tools"
 import { EXPERIMENT_IDS, experiments } from "../../shared/experiments"
 import { getModelMaxOutputTokens } from "../../shared/api"
@@ -2420,7 +2421,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 			const modeSupportsBrowser = modeConfig?.groups.some((group) => getGroupName(group) === "browser") ?? false
 
 			const canUseBrowserTool =
-				(this.api.getModel().info.supportsImages ?? false) &&
+				modelSupportsBrowserCapability(this.api.getModel().info, apiConfiguration) &&
 				modeSupportsBrowser &&
 				(browserToolEnabled ?? true)
 

src/core/webview/generateSystemPrompt.ts

@@ -3,6 +3,8 @@ import { WebviewMessage } from "../../shared/WebviewMessage"
 import { defaultModeSlug, getModeBySlug, getGroupName } from "../../shared/modes"
 import { buildApiHandler } from "../../api"
 import { experiments as experimentsModule, EXPERIMENT_IDS } from "../../shared/experiments"
+import { modelSupportsBrowserCapability } from "../../shared/browserCapability"
+import { modelSupportsBrowserCapability } from "../../shared/browserCapability"
 
 import { SYSTEM_PROMPT } from "../prompts/system"
 import { MultiSearchReplaceDiffStrategy } from "../diff/strategies/multi-search-replace"
@@ -45,15 +47,16 @@ export const generateSystemPrompt = async (provider: ClineProvider, message: Web
 	const rooIgnoreInstructions = provider.getCurrentTask()?.rooIgnoreController?.getInstructions()
 
 	// Determine if browser tools can be used based on model support, mode, and user settings
-	let modelSupportsImages = false
+	let modelSupportsBrowser = false
 
-	// Create a temporary API handler to check if the model supports images
+	// Create a temporary API handler to check if the model supports browser capability
 	// This avoids relying on an active Cline instance which might not exist during preview
 	try {
 		const tempApiHandler = buildApiHandler(apiConfiguration)
-		modelSupportsImages = tempApiHandler.getModel().info.supportsImages ?? false
+		const info = tempApiHandler.getModel().info
+		modelSupportsBrowser = modelSupportsBrowserCapability(info, apiConfiguration)
 	} catch (error) {
-		console.error("Error checking if model supports images:", error)
+		console.error("Error checking if model supports browser capability:", error)
 	}
 
 	// Check if the current mode includes the browser tool group
@@ -62,7 +65,7 @@ export const generateSystemPrompt = async (provider: ClineProvider, message: Web
 
 	// Only enable browser tools if the model supports it, the mode includes browser tools,
 	// and browser tools are enabled in settings
-	const canUseBrowserTool = modelSupportsImages && modeSupportsBrowser && (browserToolEnabled ?? true)
+	const canUseBrowserTool = modelSupportsBrowser && modeSupportsBrowser && (browserToolEnabled ?? true)
 
 	const systemPrompt = await SYSTEM_PROMPT(
 		provider.context,