Fixed issue where coordiantes were incorrect after resize event.

Author: hannesrudolph

src/services/browser/BrowserSession.ts

@@ -828,11 +828,34 @@ export class BrowserSession {
 
 	/**
 	 * Returns the last known viewport size (if any)
+	 *
+	 * Prefer the live page viewport when available so we stay accurate after:
+	 * - browser_action resize
+	 * - manual window resizes (especially with remote browsers)
+	 *
+	 * Falls back to the configured default viewport when no prior information exists.
 	 */
 	getViewportSize(): { width?: number; height?: number } {
-		return {
-			width: this.lastViewportWidth,
-			height: this.lastViewportHeight,
+		// If we have an active page, ask Puppeteer for the current viewport.
+		// This keeps us in sync with any resizes that happen outside of our own
+		// browser_action lifecycle (e.g. user dragging the window).
+		if (this.page) {
+			const vp = this.page.viewport()
+			if (vp?.width) this.lastViewportWidth = vp.width
+			if (vp?.height) this.lastViewportHeight = vp.height
+		}
+
+		// If we've ever observed a viewport, use that.
+		if (this.lastViewportWidth && this.lastViewportHeight) {
+			return {
+				width: this.lastViewportWidth,
+				height: this.lastViewportHeight,
+			}
 		}
+
+		// Otherwise fall back to the configured default so the tool can still
+		// operate before the first screenshot-based action has run.
+		const { width, height } = this.getViewport()
+		return { width, height }
 	}
 }

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

@@ -394,4 +394,61 @@ describe("cursor visualization", () => {
 		// Verify no cursor position in result
 		expect(result.currentMousePosition).toBeUndefined()
 	})
+
+	describe("getViewportSize", () => {
+		it("falls back to configured viewport when no page or last viewport is available", () => {
+			const localCtx: any = {
+				globalState: {
+					get: vi.fn((key: string) => {
+						if (key === "browserViewportSize") return "1024x768"
+						return undefined
+					}),
+					update: vi.fn(),
+				},
+				globalStorageUri: { fsPath: "/mock/global/storage/path" },
+				extensionUri: { fsPath: "/mock/extension/path" },
+			}
+
+			const session = new BrowserSession(localCtx)
+			const vp = (session as any).getViewportSize()
+			expect(vp).toEqual({ width: 1024, height: 768 })
+		})
+
+		it("returns live page viewport when available and updates lastViewport cache", () => {
+			const localCtx: any = {
+				globalState: {
+					get: vi.fn(),
+					update: vi.fn(),
+				},
+				globalStorageUri: { fsPath: "/mock/global/storage/path" },
+				extensionUri: { fsPath: "/mock/extension/path" },
+			}
+			const session = new BrowserSession(localCtx)
+			;(session as any).page = {
+				viewport: vi.fn().mockReturnValue({ width: 1111, height: 555 }),
+			}
+
+			const vp = (session as any).getViewportSize()
+			expect(vp).toEqual({ width: 1111, height: 555 })
+			expect((session as any).lastViewportWidth).toBe(1111)
+			expect((session as any).lastViewportHeight).toBe(555)
+		})
+
+		it("returns cached last viewport when page no longer exists", () => {
+			const localCtx: any = {
+				globalState: {
+					get: vi.fn(),
+					update: vi.fn(),
+				},
+				globalStorageUri: { fsPath: "/mock/global/storage/path" },
+				extensionUri: { fsPath: "/mock/extension/path" },
+			}
+			const session = new BrowserSession(localCtx)
+			;(session as any).lastViewportWidth = 800
+			;(session as any).lastViewportHeight = 600
+
+			const vp = (session as any).getViewportSize()
+			expect(vp).toEqual({ width: 800, height: 600 })
+		})
+	})
 })