Update default browser viewport size to 1280x800

Author: jquanton

src/core/Cline.ts

@@ -82,7 +82,7 @@ export class Cline {
 	diffStrategy?: DiffStrategy
 	diffEnabled: boolean = false
 	fuzzyMatchThreshold: number = 1.0
-	browserViewportSize: string = "900x600" // Default viewport size
+	browserViewportSize: string = "1280x800" // Default viewport size
 
 	apiConversationHistory: (Anthropic.MessageParam & { ts?: number })[] = []
 	clineMessages: ClineMessage[] = []

src/core/__tests__/Cline.browser.test.ts

@@ -55,7 +55,7 @@ describe("Cline Browser Integration", () => {
 				requestDelaySeconds: 0,
 				screenshotQuality: 75,
 				terminalOutputLineLimit: 1000,
-				browserViewportSize: "900x600", // Default viewport size
+				browserViewportSize: "1280x800", // Default viewport size
 			}),
 			postMessageToWebview: jest.fn(),
 			postStateToWebview: jest.fn(),
@@ -103,7 +103,7 @@ describe("Cline Browser Integration", () => {
 		it("should initialize browser session with default viewport size", async () => {
 			const testCline = await createTestCline()
 			expect(mockBrowserSession.setOnViewportChange).toHaveBeenCalled()
-			expect((testCline as any).browserViewportSize).toBe("900x600") // Default size
+			expect((testCline as any).browserViewportSize).toBe("1280x800") // Default size
 			await testCline.abortTask()
 		})
 

src/core/prompts/__tests__/__snapshots__/system.test.ts.snap

@@ -1104,7 +1104,7 @@ Example: Requesting to write to frontend-config.json
 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 **1280x800** 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:
@@ -1126,7 +1126,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 **1280x800** resolution.
     * Example: <coordinate>450,300</coordinate>
 - text: (optional) Use this for providing the text for the \`type\` action.
     * Example: <text>Hello, world!</text>
@@ -2225,7 +2225,7 @@ Example: Requesting to write to frontend-config.json
 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 **1280x800** 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:
@@ -2247,7 +2247,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 **1280x800** 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/prompts/__tests__/system.test.ts

@@ -191,7 +191,7 @@ describe("SYSTEM_PROMPT", () => {
 			true, // supportsComputerUse
 			undefined, // mcpHub
 			undefined, // diffStrategy
-			"900x600", // browserViewportSize
+			"1280x800", // browserViewportSize
 			defaultModeSlug, // mode
 			undefined, // customModePrompts
 			undefined, // customModes,

src/core/prompts/tools/__tests__/browser-action.test.ts

@@ -8,7 +8,7 @@ describe("getBrowserActionDescription", () => {
 		defaultArgs = {
 			cwd: "/test/path",
 			supportsComputerUse: true,
-			browserViewportSize: "900x600",
+			browserViewportSize: "1280x800",
 			diffStrategy: undefined,
 			mcpHub: undefined,
 			toolOptions: {},

src/core/webview/ClineProvider.ts

@@ -1012,7 +1012,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						await this.postStateToWebview()
 						break
 					case "browserViewportSize":
-						const browserViewportSize = message.text ?? "900x600"
+						const browserViewportSize = message.text ?? "1280x800"
 						await this.updateGlobalState("browserViewportSize", browserViewportSize)
 						await this.postStateToWebview()
 						break
@@ -1534,7 +1534,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				apiConfiguration.openRouterModelInfo?.supportsComputerUse ?? false,
 				mcpEnabled ? this.mcpHub : undefined,
 				diffStrategy,
-				browserViewportSize ?? "900x600",
+				browserViewportSize ?? "1280x800",
 				mode,
 				customModePrompts,
 				customModes,
@@ -2390,7 +2390,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			shouldShowAnnouncement: lastShownAnnouncementId !== this.latestAnnouncementId,
 			allowedCommands,
 			soundVolume: soundVolume ?? 0.5,
-			browserViewportSize: browserViewportSize ?? "900x600",
+			browserViewportSize: browserViewportSize ?? "1280x800",
 			screenshotQuality: screenshotQuality ?? 75,
 			preferredLanguage: preferredLanguage ?? "English",
 			writeDelayMs: writeDelayMs ?? 1000,
@@ -2705,7 +2705,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			diffEnabled: diffEnabled ?? true,
 			checkpointsEnabled: checkpointsEnabled ?? false,
 			soundVolume,
-			browserViewportSize: browserViewportSize ?? "900x600",
+			browserViewportSize: browserViewportSize ?? "1280x800",
 			screenshotQuality: screenshotQuality ?? 75,
 			fuzzyMatchThreshold: fuzzyMatchThreshold ?? 1.0,
 			writeDelayMs: writeDelayMs ?? 1000,

src/core/webview/__tests__/ClineProvider.test.ts

@@ -342,7 +342,7 @@ describe("ClineProvider", () => {
 			diffEnabled: false,
 			checkpointsEnabled: false,
 			writeDelayMs: 1000,
-			browserViewportSize: "900x600",
+			browserViewportSize: "1280x800",
 			fuzzyMatchThreshold: 1.0,
 			mcpEnabled: true,
 			enableMcpServerCreation: false,
@@ -1021,7 +1021,7 @@ describe("ClineProvider", () => {
 				mode: "code",
 				enableMcpServerCreation: true,
 				mcpEnabled: false,
-				browserViewportSize: "900x600",
+				browserViewportSize: "1280x800",
 				experimentalDiffStrategy: true,
 				diffEnabled: true,
 				fuzzyMatchThreshold: 0.8,
@@ -1046,7 +1046,7 @@ describe("ClineProvider", () => {
 					// diffStrategy
 					getToolDescription: expect.any(Function),
 				}),
-				"900x600", // browserViewportSize
+				"1280x800", // browserViewportSize
 				"code", // mode
 				{}, // customModePrompts
 				{}, // customModes
@@ -1073,7 +1073,7 @@ describe("ClineProvider", () => {
 				customModePrompts: {},
 				mode: "code",
 				mcpEnabled: false,
-				browserViewportSize: "900x600",
+				browserViewportSize: "1280x800",
 				experimentalDiffStrategy: true,
 				diffEnabled: false,
 				fuzzyMatchThreshold: 0.8,
@@ -1099,7 +1099,7 @@ describe("ClineProvider", () => {
 					// diffStrategy
 					getToolDescription: expect.any(Function),
 				}),
-				"900x600", // browserViewportSize
+				"1280x800", // browserViewportSize
 				"code", // mode
 				{}, // customModePrompts
 				{}, // customModes
@@ -1124,7 +1124,7 @@ describe("ClineProvider", () => {
 				mode: "architect",
 				enableMcpServerCreation: false,
 				mcpEnabled: false,
-				browserViewportSize: "900x600",
+				browserViewportSize: "1280x800",
 				experiments: experimentDefault,
 			} as any)
 

src/services/browser/BrowserSession.ts

@@ -21,7 +21,7 @@ export class BrowserSession {
 	private currentMousePosition?: string
 	private sessionTimeout?: NodeJS.Timeout
 	private readonly SESSION_TIMEOUT = 30 * 60 * 1000 // 30 minutes
-	private viewportSize: string = "900x600" // Default viewport size
+	private viewportSize: string = "1280x800" // Default viewport size
 
 	constructor(context: vscode.ExtensionContext) {
 		this.context = context

src/services/browser/__tests__/BrowserSession.test.ts

@@ -244,7 +244,7 @@ describe("BrowserSession", () => {
 		})
 
 		it("should get current viewport size", () => {
-			expect(browserSession.getViewportSize()).toBe("900x600") // Default size
+			expect(browserSession.getViewportSize()).toBe("1280x800") // Default size
 		})
 	})
 

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

@@ -29,7 +29,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 	const [maxActionHeight, setMaxActionHeight] = useState(0)
 	const [consoleLogsExpanded, setConsoleLogsExpanded] = useState(false)
 
-	const { browserViewportSize = "900x600" } = useExtensionState()
+	const { browserViewportSize = "1280x800" } = useExtensionState()
 	const [viewportWidth, viewportHeight] = browserViewportSize.split("x").map(Number)
 	const aspectRatio = ((viewportHeight / viewportWidth) * 100).toFixed(2)
 	const defaultMousePosition = `${Math.round(viewportWidth / 2)},${Math.round(viewportHeight / 2)}`