Add browser settings to change headless mode and size

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "claude-dev",
-	"version": "3.0.12",
+	"version": "3.1.6",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "claude-dev",
-			"version": "3.0.12",
+			"version": "3.1.6",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@anthropic-ai/bedrock-sdk": "^0.10.2",

src/core/Cline.ts

@@ -56,6 +56,7 @@ import { fixModelHtmlEscaping } from "../utils/string"
 import { OpenAiHandler } from "../api/providers/openai"
 import CheckpointTracker from "../integrations/checkpoints/CheckpointTracker"
 import getFolderSize from "get-folder-size"
+import { BrowserSettings } from "../shared/BrowserSettings"
 
 const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) ?? path.join(os.homedir(), "Desktop") // may or may not exist but fs checking existence would immediately ask for permission which would be bad UX, need to come up with a better solution
 
@@ -69,10 +70,11 @@ export class Cline {
 	api: ApiHandler
 	private terminalManager: TerminalManager
 	private urlContentFetcher: UrlContentFetcher
-	private browserSession: BrowserSession
+	browserSession: BrowserSession
 	private didEditFile: boolean = false
 	customInstructions?: string
 	autoApprovalSettings: AutoApprovalSettings
+	private browserSettings: BrowserSettings
 	apiConversationHistory: Anthropic.MessageParam[] = []
 	clineMessages: ClineMessage[] = []
 	private askResponse?: ClineAskResponse
@@ -107,6 +109,7 @@ export class Cline {
 		provider: ClineProvider,
 		apiConfiguration: ApiConfiguration,
 		autoApprovalSettings: AutoApprovalSettings,
+		browserSettings: BrowserSettings,
 		customInstructions?: string,
 		task?: string,
 		images?: string[],
@@ -116,10 +119,11 @@ export class Cline {
 		this.api = buildApiHandler(apiConfiguration)
 		this.terminalManager = new TerminalManager()
 		this.urlContentFetcher = new UrlContentFetcher(provider.context)
-		this.browserSession = new BrowserSession(provider.context)
+		this.browserSession = new BrowserSession(provider.context, browserSettings)
 		this.diffViewProvider = new DiffViewProvider(cwd)
 		this.customInstructions = customInstructions
 		this.autoApprovalSettings = autoApprovalSettings
+		this.browserSettings = browserSettings
 		if (historyItem) {
 			this.taskId = historyItem.id
 			this.conversationHistoryDeletedRange = historyItem.conversationHistoryDeletedRange
@@ -132,6 +136,11 @@ export class Cline {
 		}
 	}
 
+	updateBrowserSettings(browserSettings: BrowserSettings) {
+		this.browserSettings = browserSettings
+		this.browserSession.browserSettings = browserSettings
+	}
+
 	// Storing task to disk for history
 
 	private async ensureTaskDirectoryExists(): Promise<string> {
@@ -1177,7 +1186,12 @@ export class Cline {
 			throw new Error("MCP hub not available")
 		}
 
-		let systemPrompt = await SYSTEM_PROMPT(cwd, this.api.getModel().info.supportsComputerUse ?? false, mcpHub)
+		let systemPrompt = await SYSTEM_PROMPT(
+			cwd,
+			this.api.getModel().info.supportsComputerUse ?? false,
+			mcpHub,
+			this.browserSettings,
+		)
 		let settingsCustomInstructions = this.customInstructions?.trim()
 		const clineRulesFilePath = path.resolve(cwd, GlobalFileNames.clineRules)
 		let clineRulesFileInstructions: string | undefined

src/core/prompts/system.ts

@@ -2,11 +2,13 @@ import defaultShell from "default-shell"
 import os from "os"
 import osName from "os-name"
 import { McpHub } from "../../services/mcp/McpHub"
+import { BrowserSettings } from "../../shared/BrowserSettings"
 
 export const SYSTEM_PROMPT = async (
 	cwd: string,
 	supportsComputerUse: boolean,
 	mcpHub: McpHub,
+	browserSettings: BrowserSettings,
 ) => `You are Cline, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.
 
 ====
@@ -143,7 +145,7 @@ Usage:
 Description: Request to interact with a Puppeteer-controlled browser. Every action, except \`close\`, will be responded to with a screenshot of the browser's current state, along with any new console logs. You may only perform one browser action per message, and wait for the user's response including a screenshot and logs to determine the next action.
 - The sequence of actions **must always start with** launching the browser at a URL, and **must always end with** closing the browser. If you need to visit a new URL that is not possible to navigate to from the current webpage, you must first close the browser, then launch again at the new URL.
 - While the browser is active, only the \`browser_action\` tool can be used. No other tools should be called during this time. You may proceed to use other tools only after closing the browser. For example if you run into an error and need to fix a file, you must close the browser, then use other tools to make the necessary changes, then re-launch the browser to verify the result.
-- The browser window has a resolution of **900x600** pixels. When performing any click actions, ensure the coordinates are within this resolution range.
+- The browser window has a resolution of **${browserSettings.viewport.width}x${browserSettings.viewport.height}** pixels. When performing any click actions, ensure the coordinates are within this resolution range.
 - Before clicking on any elements such as icons, links, or buttons, you must consult the provided screenshot of the page to determine the coordinates of the element. The click should be targeted at the **center of the element**, not on its edges.
 Parameters:
 - action: (required) The action to perform. The available actions are:
@@ -161,7 +163,7 @@ Parameters:
         - Example: \`<action>close</action>\`
 - url: (optional) Use this for providing the URL for the \`launch\` action.
     * Example: <url>https://example.com</url>
-- coordinate: (optional) The X and Y coordinates for the \`click\` action. Coordinates should be within the **900x600** resolution.
+- coordinate: (optional) The X and Y coordinates for the \`click\` action. Coordinates should be within the **${browserSettings.viewport.width}x${browserSettings.viewport.height}** resolution.
     * Example: <coordinate>450,300</coordinate>
 - text: (optional) Use this for providing the text for the \`type\` action.
     * Example: <text>Hello, world!</text>

src/core/webview/ClineProvider.ts

@@ -23,6 +23,7 @@ import { openMention } from "../mentions"
 import { getNonce } from "./getNonce"
 import { getUri } from "./getUri"
 import { AutoApprovalSettings, DEFAULT_AUTO_APPROVAL_SETTINGS } from "../../shared/AutoApprovalSettings"
+import { BrowserSettings, DEFAULT_BROWSER_SETTINGS } from "../../shared/BrowserSettings"
 
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -61,6 +62,7 @@ type GlobalStateKey =
 	| "openRouterModelId"
 	| "openRouterModelInfo"
 	| "autoApprovalSettings"
+	| "browserSettings"
 
 export const GlobalFileNames = {
 	apiConversationHistory: "api_conversation_history.json",
@@ -210,17 +212,18 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 
 	async initClineWithTask(task?: string, images?: string[]) {
 		await this.clearTask() // ensures that an exising task doesn't exist before starting a new one, although this shouldn't be possible since user must clear task before starting a new one
-		const { apiConfiguration, customInstructions, autoApprovalSettings } = await this.getState()
-		this.cline = new Cline(this, apiConfiguration, autoApprovalSettings, customInstructions, task, images)
+		const { apiConfiguration, customInstructions, autoApprovalSettings, browserSettings } = await this.getState()
+		this.cline = new Cline(this, apiConfiguration, autoApprovalSettings, browserSettings, customInstructions, task, images)
 	}
 
 	async initClineWithHistoryItem(historyItem: HistoryItem) {
 		await this.clearTask()
-		const { apiConfiguration, customInstructions, autoApprovalSettings } = await this.getState()
+		const { apiConfiguration, customInstructions, autoApprovalSettings, browserSettings } = await this.getState()
 		this.cline = new Cline(
 			this,
 			apiConfiguration,
 			autoApprovalSettings,
+			browserSettings,
 			customInstructions,
 			undefined,
 			undefined,
@@ -436,6 +439,20 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							await this.postStateToWebview()
 						}
 						break
+					case "browserSettings":
+						if (message.browserSettings) {
+							await this.updateGlobalState("browserSettings", message.browserSettings)
+							if (this.cline) {
+								this.cline.updateBrowserSettings(message.browserSettings)
+							}
+							await this.postStateToWebview()
+						}
+						break
+					// case "relaunchChromeDebugMode":
+					// 	if (this.cline) {
+					// 		this.cline.browserSession.relaunchChromeDebugMode()
+					// 	}
+					// 	break
 					case "askResponse":
 						this.cline?.handleWebviewAskResponse(message.askResponse!, message.text, message.images)
 						break
@@ -908,8 +925,14 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	}
 
 	async getStateToPostToWebview(): Promise<ExtensionState> {
-		const { apiConfiguration, lastShownAnnouncementId, customInstructions, taskHistory, autoApprovalSettings } =
-			await this.getState()
+		const {
+			apiConfiguration,
+			lastShownAnnouncementId,
+			customInstructions,
+			taskHistory,
+			autoApprovalSettings,
+			browserSettings,
+		} = await this.getState()
 		return {
 			version: this.context.extension?.packageJSON?.version ?? "",
 			apiConfiguration,
@@ -921,6 +944,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			taskHistory: (taskHistory || []).filter((item) => item.ts && item.task).sort((a, b) => b.ts - a.ts),
 			shouldShowAnnouncement: lastShownAnnouncementId !== this.latestAnnouncementId,
 			autoApprovalSettings,
+			browserSettings,
 		}
 	}
 
@@ -1006,6 +1030,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			customInstructions,
 			taskHistory,
 			autoApprovalSettings,
+			browserSettings,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -1036,6 +1061,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("customInstructions") as Promise<string | undefined>,
 			this.getGlobalState("taskHistory") as Promise<HistoryItem[] | undefined>,
 			this.getGlobalState("autoApprovalSettings") as Promise<AutoApprovalSettings | undefined>,
+			this.getGlobalState("browserSettings") as Promise<BrowserSettings | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -1084,6 +1110,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			customInstructions,
 			taskHistory,
 			autoApprovalSettings: autoApprovalSettings || DEFAULT_AUTO_APPROVAL_SETTINGS, // default value can be 0 or empty string
+			browserSettings: browserSettings || DEFAULT_BROWSER_SETTINGS,
 		}
 	}
 

src/services/browser/BrowserSession.ts

@@ -8,20 +8,26 @@ import pWaitFor from "p-wait-for"
 import delay from "delay"
 import { fileExistsAtPath } from "../../utils/fs"
 import { BrowserActionResult } from "../../shared/ExtensionMessage"
+import { BrowserSettings } from "../../shared/BrowserSettings"
+// import * as chromeLauncher from "chrome-launcher"
 
 interface PCRStats {
 	puppeteer: { launch: typeof launch }
 	executablePath: string
 }
 
+// const DEBUG_PORT = 9222 // Chrome's default debugging port
+
 export class BrowserSession {
 	private context: vscode.ExtensionContext
 	private browser?: Browser
 	private page?: Page
 	private currentMousePosition?: string
+	browserSettings: BrowserSettings
 
-	constructor(context: vscode.ExtensionContext) {
+	constructor(context: vscode.ExtensionContext, browserSettings: BrowserSettings) {
 		this.context = context
+		this.browserSettings = browserSettings
 	}
 
 	private async ensureChromiumExists(): Promise<PCRStats> {
@@ -45,6 +51,70 @@ export class BrowserSession {
 		return stats
 	}
 
+	// private async checkExistingChromeDebugger(): Promise<boolean> {
+	// 	try {
+	// 		// Try to connect to existing debugger
+	// 		const response = await fetch(`http://localhost:${DEBUG_PORT}/json/version`)
+	// 		return response.ok
+	// 	} catch {
+	// 		return false
+	// 	}
+	// }
+
+	// async relaunchChromeDebugMode() {
+	// 	const result = await vscode.window.showWarningMessage(
+	// 		"This will close your existing Chrome tabs and relaunch Chrome in debug mode. Are you sure?",
+	// 		{ modal: true },
+	// 		"Yes",
+	// 	)
+
+	// 	if (result !== "Yes") {
+	// 		return
+	// 	}
+
+	// 	// // Kill any existing Chrome instances
+	// 	// await chromeLauncher.killAll()
+
+	// 	// // Launch Chrome with debug port
+	// 	// const launcher = new chromeLauncher.Launcher({
+	// 	// 	port: DEBUG_PORT,
+	// 	// 	chromeFlags: ["--remote-debugging-port=" + DEBUG_PORT, "--no-first-run", "--no-default-browser-check"],
+	// 	// })
+
+	// 	// await launcher.launch()
+	// 	const installation = chromeLauncher.Launcher.getFirstInstallation()
+	// 	if (!installation) {
+	// 		throw new Error("Could not find Chrome installation on this system")
+	// 	}
+	// 	console.log("chrome installation", installation)
+	// }
+
+	// private async getSystemChromeExecutablePath(): Promise<string> {
+	// 	// Find installed Chrome
+	// 	const installation = chromeLauncher.Launcher.getFirstInstallation()
+	// 	if (!installation) {
+	// 		throw new Error("Could not find Chrome installation on this system")
+	// 	}
+	// 	console.log("chrome installation", installation)
+	// 	return installation
+	// }
+
+	// /**
+	//  * Helper to detect user’s default Chrome data dir.
+	//  * Adjust for OS if needed.
+	//  */
+	// private getDefaultChromeUserDataDir(): string {
+	// 	const homedir = require("os").homedir()
+	// 	switch (process.platform) {
+	// 		case "win32":
+	// 			return path.join(homedir, "AppData", "Local", "Google", "Chrome", "User Data")
+	// 		case "darwin":
+	// 			return path.join(homedir, "Library", "Application Support", "Google", "Chrome")
+	// 		default:
+	// 			return path.join(homedir, ".config", "google-chrome")
+	// 	}
+	// }
+
 	async launchBrowser() {
 		console.log("launch browser called")
 		if (this.browser) {
@@ -58,12 +128,29 @@ export class BrowserSession {
 				"--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
 			],
 			executablePath: stats.executablePath,
-			defaultViewport: {
-				width: 900,
-				height: 600,
-			},
-			// headless: false,
+			defaultViewport: this.browserSettings.viewport,
+			headless: this.browserSettings.headless,
 		})
+
+		// if (this.browserSettings.chromeType === "system") {
+		// 	const userDataDir = this.getDefaultChromeUserDataDir()
+		// 	this.browser = await stats.puppeteer.launch({
+		// 		args: [`--user-data-dir=${userDataDir}`, "--profile-directory=Default"],
+		// 		executablePath: await this.getSystemChromeExecutablePath(),
+		// 		defaultViewport: this.browserSettings.viewport,
+		// 		headless: this.browserSettings.headless,
+		// 	})
+		// } else {
+		// 	this.browser = await stats.puppeteer.launch({
+		// 		args: [
+		// 			"--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
+		// 		],
+		// 		executablePath: stats.executablePath,
+		// 		defaultViewport: this.browserSettings.viewport,
+		// 		headless: this.browserSettings.headless,
+		// 	})
+		// }
+
 		// (latest version of puppeteer does not add headless to user agent)
 		this.page = await this.browser?.newPage()
 	}

src/shared/BrowserSettings.ts

@@ -0,0 +1,27 @@
+export interface BrowserSettings {
+	// Viewport size settings
+	viewport: {
+		width: number
+		height: number
+	}
+	// Browser mode settings
+	headless: boolean
+	// Chrome installation to use
+	// chromeType: "chromium" | "system"
+}
+
+export const DEFAULT_BROWSER_SETTINGS: BrowserSettings = {
+	viewport: {
+		width: 900,
+		height: 600,
+	},
+	headless: true,
+	// chromeType: "chromium",
+}
+
+export const BROWSER_VIEWPORT_PRESETS = {
+	"Large Desktop (1280x800)": { width: 1280, height: 800 },
+	"Small Desktop (900x600)": { width: 900, height: 600 },
+	"Tablet (768x1024)": { width: 768, height: 1024 },
+	"Mobile (360x640)": { width: 360, height: 640 },
+} as const

src/shared/ExtensionMessage.ts

@@ -2,6 +2,7 @@
 
 import { ApiConfiguration, ModelInfo } from "./api"
 import { AutoApprovalSettings } from "./AutoApprovalSettings"
+import { BrowserSettings } from "./BrowserSettings"
 import { HistoryItem } from "./HistoryItem"
 import { McpServer } from "./mcp"
 
@@ -44,6 +45,7 @@ export interface ExtensionState {
 	taskHistory: HistoryItem[]
 	shouldShowAnnouncement: boolean
 	autoApprovalSettings: AutoApprovalSettings
+	browserSettings: BrowserSettings
 }
 
 export interface ClineMessage {

src/shared/WebviewMessage.ts

@@ -1,5 +1,6 @@
 import { ApiConfiguration } from "./api"
 import { AutoApprovalSettings } from "./AutoApprovalSettings"
+import { BrowserSettings } from "./BrowserSettings"
 
 export interface WebviewMessage {
 	type:
@@ -26,9 +27,11 @@ export interface WebviewMessage {
 		| "openMcpSettings"
 		| "restartMcpServer"
 		| "autoApprovalSettings"
+		| "browserSettings"
 		| "checkpointDiff"
 		| "checkpointRestore"
 		| "taskCompletionViewChanges"
+	// | "relaunchChromeDebugMode"
 	text?: string
 	askResponse?: ClineAskResponse
 	apiConfiguration?: ApiConfiguration
@@ -36,6 +39,7 @@ export interface WebviewMessage {
 	bool?: boolean
 	number?: number
 	autoApprovalSettings?: AutoApprovalSettings
+	browserSettings?: BrowserSettings
 }
 
 export type ClineAskResponse = "yesButtonClicked" | "noButtonClicked" | "messageResponse"

webview-ui/src/components/browser/BrowserSettingsMenu.tsx

@@ -0,0 +1,235 @@
+import { VSCodeButton, VSCodeCheckbox, VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
+import React, { useRef, useState } from "react"
+import { useClickAway } from "react-use"
+import styled from "styled-components"
+import { BROWSER_VIEWPORT_PRESETS } from "../../../../src/shared/BrowserSettings"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+
+interface BrowserSettingsMenuProps {
+	disabled?: boolean
+	maxWidth?: number
+}
+
+export const BrowserSettingsMenu: React.FC<BrowserSettingsMenuProps> = ({ disabled = false, maxWidth }) => {
+	const { browserSettings } = useExtensionState()
+	const [showMenu, setShowMenu] = useState(false)
+	const [hasMouseEntered, setHasMouseEntered] = useState(false)
+	const containerRef = useRef<HTMLDivElement>(null)
+	const menuRef = useRef<HTMLDivElement>(null)
+
+	useClickAway(containerRef, () => {
+		if (showMenu) {
+			setShowMenu(false)
+			setHasMouseEntered(false)
+		}
+	})
+
+	const handleMouseEnter = () => {
+		setHasMouseEntered(true)
+	}
+
+	const handleMouseLeave = () => {
+		if (hasMouseEntered) {
+			setShowMenu(false)
+			setHasMouseEntered(false)
+		}
+	}
+
+	const handleControlsMouseLeave = (e: React.MouseEvent) => {
+		const menuElement = menuRef.current
+
+		if (menuElement && showMenu) {
+			const menuRect = menuElement.getBoundingClientRect()
+
+			// If mouse is moving towards the menu, don't close it
+			if (
+				e.clientY >= menuRect.top &&
+				e.clientY <= menuRect.bottom &&
+				e.clientX >= menuRect.left &&
+				e.clientX <= menuRect.right
+			) {
+				return
+			}
+		}
+
+		setShowMenu(false)
+		setHasMouseEntered(false)
+	}
+
+	const handleViewportChange = (event: Event) => {
+		const target = event.target as HTMLSelectElement
+		const selectedSize = BROWSER_VIEWPORT_PRESETS[target.value as keyof typeof BROWSER_VIEWPORT_PRESETS]
+		if (selectedSize) {
+			vscode.postMessage({
+				type: "browserSettings",
+				browserSettings: {
+					...browserSettings,
+					viewport: selectedSize,
+				},
+			})
+		}
+	}
+
+	const updateHeadless = (headless: boolean) => {
+		vscode.postMessage({
+			type: "browserSettings",
+			browserSettings: {
+				...browserSettings,
+				headless,
+			},
+		})
+	}
+
+	// const updateChromeType = (chromeType: BrowserSettings["chromeType"]) => {
+	// 	vscode.postMessage({
+	// 		type: "browserSettings",
+	// 		browserSettings: {
+	// 			...browserSettings,
+	// 			chromeType,
+	// 		},
+	// 	})
+	// }
+
+	// const relaunchChromeDebugMode = () => {
+	// 	vscode.postMessage({
+	// 		type: "relaunchChromeDebugMode",
+	// 	})
+	// }
+
+	return (
+		<div ref={containerRef} style={{ position: "relative", marginTop: "-1px" }} onMouseLeave={handleControlsMouseLeave}>
+			<VSCodeButton appearance="icon" onClick={() => setShowMenu(!showMenu)} disabled={disabled}>
+				<i className="codicon codicon-settings-gear" style={{ fontSize: "14.5px" }} />
+			</VSCodeButton>
+			{showMenu && (
+				<SettingsMenu ref={menuRef} maxWidth={maxWidth} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+					<SettingsGroup>
+						{/* <SettingsHeader>Headless Mode</SettingsHeader> */}
+						<VSCodeCheckbox
+							style={{ marginBottom: "8px", marginTop: -1 }}
+							checked={browserSettings.headless}
+							onChange={(e) => updateHeadless((e.target as HTMLInputElement).checked)}>
+							Run in headless mode
+						</VSCodeCheckbox>
+						<SettingsDescription>When enabled, Chrome will run in the background.</SettingsDescription>
+					</SettingsGroup>
+
+					{/* <SettingsGroup>
+						<SettingsHeader>Chrome Executable</SettingsHeader>
+						<VSCodeDropdown
+							style={{ width: "100%", marginBottom: "8px" }}
+							value={browserSettings.chromeType}
+							onChange={(e) =>
+								updateChromeType((e.target as HTMLSelectElement).value as BrowserSettings["chromeType"])
+							}>
+							<VSCodeOption value="chromium">Chromium (Auto-downloaded)</VSCodeOption>
+							<VSCodeOption value="system">System Chrome</VSCodeOption>
+						</VSCodeDropdown>
+						<SettingsDescription>
+							{browserSettings.chromeType === "system" ? (
+								<>
+									Cline will use your personal browser. You must{" "}
+									<VSCodeLink
+										href="#"
+										style={{ fontSize: "inherit" }}
+										onClick={(e: React.MouseEvent) => {
+											e.preventDefault()
+											relaunchChromeDebugMode()
+										}}>
+										relaunch Chrome in debug mode
+									</VSCodeLink>{" "}
+									to use this setting.
+								</>
+							) : (
+								"Cline will use a Chromium browser bundled with the extension."
+							)}
+						</SettingsDescription>
+					</SettingsGroup> */}
+
+					<SettingsGroup>
+						<SettingsHeader>Viewport Size</SettingsHeader>
+						<VSCodeDropdown
+							style={{ width: "100%" }}
+							value={
+								Object.entries(BROWSER_VIEWPORT_PRESETS).find(
+									([_, size]) =>
+										size.width === browserSettings.viewport.width &&
+										size.height === browserSettings.viewport.height,
+								)?.[0]
+							}
+							onChange={(event) => handleViewportChange(event as Event)}>
+							{Object.entries(BROWSER_VIEWPORT_PRESETS).map(([name]) => (
+								<VSCodeOption key={name} value={name}>
+									{name}
+								</VSCodeOption>
+							))}
+						</VSCodeDropdown>
+					</SettingsGroup>
+				</SettingsMenu>
+			)}
+		</div>
+	)
+}
+
+const SettingsMenu = styled.div<{ maxWidth?: number }>`
+	position: absolute;
+	top: calc(100% + 8px);
+	right: -2px;
+	background: ${CODE_BLOCK_BG_COLOR};
+	border: 1px solid var(--vscode-editorGroup-border);
+	padding: 8px;
+	border-radius: 3px;
+	z-index: 1000;
+	width: calc(100vw - 57px);
+	min-width: 0px;
+	max-width: ${(props) => (props.maxWidth ? `${props.maxWidth - 23}px` : "100vw")};
+
+	// Add invisible padding to create a safe hover zone
+	&::before {
+		content: "";
+		position: absolute;
+		top: -14px; // Same as margin-top in the parent's top property
+		left: 0;
+		right: -6px;
+		height: 14px;
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: -6px;
+		right: 6px;
+		width: 10px;
+		height: 10px;
+		background: ${CODE_BLOCK_BG_COLOR};
+		border-left: 1px solid var(--vscode-editorGroup-border);
+		border-top: 1px solid var(--vscode-editorGroup-border);
+		transform: rotate(45deg);
+		z-index: 1; // Ensure arrow stays above the padding
+	}
+`
+
+const SettingsGroup = styled.div`
+	&:not(:last-child) {
+		margin-bottom: 8px;
+		// padding-bottom: 8px;
+		border-bottom: 1px solid var(--vscode-editorGroup-border);
+	}
+`
+
+const SettingsHeader = styled.div`
+	font-size: 11px;
+	font-weight: 600;
+	margin-bottom: 6px;
+	color: var(--vscode-foreground);
+`
+
+const SettingsDescription = styled.div<{ isLast?: boolean }>`
+	font-size: 11px;
+	color: var(--vscode-descriptionForeground);
+	margin-bottom: ${(props) => (props.isLast ? "0" : "8px")};
+`
+
+export default BrowserSettingsMenu

webview-ui/src/components/chat/BrowserSessionRow.tsx

@@ -9,6 +9,9 @@ import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import styled from "styled-components"
 import { CheckpointControls, CheckpointOverlay } from "../common/CheckpointControls"
 import { findLast } from "../../../../src/shared/array"
+import { BrowserSettingsMenu } from "../browser/BrowserSettingsMenu"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { BROWSER_VIEWPORT_PRESETS } from "../../../../src/shared/BrowserSettings"
 
 interface BrowserSessionRowProps {
 	messages: ClineMessage[]
@@ -21,6 +24,7 @@ interface BrowserSessionRowProps {
 
 const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 	const { messages, isLast, onHeightChange, lastModifiedMessage } = props
+	const { browserSettings } = useExtensionState()
 	const prevHeightRef = useRef(0)
 	const [maxActionHeight, setMaxActionHeight] = useState(0)
 	const [consoleLogsExpanded, setConsoleLogsExpanded] = useState(false)
@@ -169,17 +173,19 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 	const currentPage = pages[currentPageIndex]
 	const isLastPage = currentPageIndex === pages.length - 1
 
+	const defaultMousePosition = `${browserSettings.viewport.width * 0.7},${browserSettings.viewport.height * 0.5}`
+
 	// Use latest state if we're on the last page and don't have a state yet
 	const displayState = isLastPage
 		? {
 				url: currentPage?.currentState.url || latestState.url || initialUrl,
-				mousePosition: currentPage?.currentState.mousePosition || latestState.mousePosition || "700,400",
+				mousePosition: currentPage?.currentState.mousePosition || latestState.mousePosition || defaultMousePosition,
 				consoleLogs: currentPage?.currentState.consoleLogs,
 				screenshot: currentPage?.currentState.screenshot || latestState.screenshot,
 			}
 		: {
 				url: currentPage?.currentState.url || initialUrl,
-				mousePosition: currentPage?.currentState.mousePosition || "700,400",
+				mousePosition: currentPage?.currentState.mousePosition || defaultMousePosition,
 				consoleLogs: currentPage?.currentState.consoleLogs,
 				screenshot: currentPage?.currentState.screenshot,
 			}
@@ -230,6 +236,14 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 		shouldShowCheckpoints = lastModifiedMessage?.ask === "resume_completed_task" || lastModifiedMessage?.ask === "resume_task"
 	}
 
+	const shouldShowSettings = useMemo(() => {
+		const lastMessage = messages[messages.length - 1]
+		return lastMessage?.ask === "browser_action_launch" || lastMessage?.say === "browser_action_launch"
+	}, [messages])
+
+	// Calculate maxWidth
+	const maxWidth = browserSettings.viewport.width < BROWSER_VIEWPORT_PRESETS["Small Desktop (900x600)"].width ? 200 : undefined
+
 	const [browserSessionRow, { height }] = useSize(
 		<BrowserSessionRowContainer style={{ marginBottom: -10 }}>
 			<div
@@ -257,43 +271,51 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 				style={{
 					borderRadius: 3,
 					border: "1px solid var(--vscode-editorGroup-border)",
-					overflow: "hidden",
+					// overflow: "hidden",
 					backgroundColor: CODE_BLOCK_BG_COLOR,
-					marginBottom: 10,
+					// marginBottom: 10,
+					maxWidth,
+					margin: "0 auto 10px auto", // Center the container
 				}}>
 				{/* URL Bar */}
 				<div
 					style={{
 						margin: "5px auto",
 						width: "calc(100% - 10px)",
-						boxSizing: "border-box", // includes padding in width calculation
-						backgroundColor: "var(--vscode-input-background)",
-						border: "1px solid var(--vscode-input-border)",
-						borderRadius: "4px",
-						padding: "3px 5px",
 						display: "flex",
 						alignItems: "center",
-						justifyContent: "center",
-						color: displayState.url ? "var(--vscode-input-foreground)" : "var(--vscode-descriptionForeground)",
-						fontSize: "12px",
+						gap: "4px",
 					}}>
 					<div
 						style={{
-							textOverflow: "ellipsis",
-							overflow: "hidden",
-							whiteSpace: "nowrap",
-							width: "100%",
-							textAlign: "center",
+							flex: 1,
+							backgroundColor: "var(--vscode-input-background)",
+							border: "1px solid var(--vscode-input-border)",
+							borderRadius: "4px",
+							padding: "3px 5px",
+							minWidth: 0,
+							color: displayState.url ? "var(--vscode-input-foreground)" : "var(--vscode-descriptionForeground)",
+							fontSize: "12px",
 						}}>
-						{displayState.url || "http"}
+						<div
+							style={{
+								textOverflow: "ellipsis",
+								overflow: "hidden",
+								whiteSpace: "nowrap",
+								width: "100%",
+								textAlign: "center",
+							}}>
+							{displayState.url || "http"}
+						</div>
 					</div>
+					<BrowserSettingsMenu disabled={!shouldShowSettings} maxWidth={maxWidth} />
 				</div>
 
 				{/* Screenshot Area */}
 				<div
 					style={{
 						width: "100%",
-						paddingBottom: "calc(200%/3)",
+						paddingBottom: `${(browserSettings.viewport.height / browserSettings.viewport.width) * 100}%`,
 						position: "relative",
 						backgroundColor: "var(--vscode-input-background)",
 					}}>
@@ -338,8 +360,8 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 						<BrowserCursor
 							style={{
 								position: "absolute",
-								top: `${(parseInt(mousePosition.split(",")[1]) / 600) * 100}%`,
-								left: `${(parseInt(mousePosition.split(",")[0]) / 900) * 100}%`,
+								top: `${(parseInt(mousePosition.split(",")[1]) / browserSettings.viewport.height) * 100}%`,
+								left: `${(parseInt(mousePosition.split(",")[0]) / browserSettings.viewport.width) * 100}%`,
 								transition: "top 0.3s ease-out, left 0.3s ease-out",
 							}}
 						/>
@@ -355,7 +377,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 							display: "flex",
 							alignItems: "center",
 							gap: "4px",
-							width: "100%",
+							// width: "100%",
 							justifyContent: "flex-start",
 							cursor: "pointer",
 							padding: `9px 8px ${consoleLogsExpanded ? 0 : 8}px 8px`,

webview-ui/src/context/ExtensionStateContext.tsx

@@ -7,6 +7,7 @@ import { findLastIndex } from "../../../src/shared/array"
 import { McpServer } from "../../../src/shared/mcp"
 import { convertTextMateToHljs } from "../utils/textMateToHljs"
 import { vscode } from "../utils/vscode"
+import { DEFAULT_BROWSER_SETTINGS } from "../../../src/shared/BrowserSettings"
 
 interface ExtensionStateContextType extends ExtensionState {
 	didHydrateState: boolean
@@ -31,6 +32,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		taskHistory: [],
 		shouldShowAnnouncement: false,
 		autoApprovalSettings: DEFAULT_AUTO_APPROVAL_SETTINGS,
+		browserSettings: DEFAULT_BROWSER_SETTINGS,
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)