browser(session): enforce strict single-tab across domains; ui(chat): localize step counter and fix cost chip visibility; tests: add single-tab test and update snapshots

Author: hannesrudolph

src/core/prompts/__tests__/__snapshots__/system-prompt/with-computer-use-support.snap

@@ -354,70 +354,51 @@ export class BrowserSession {
 		if (!this.browser) {
 			throw new Error("Browser is not launched")
 		}
-		// Remove trailing slash for comparison
+		// Normalize for comparison
 		const normalizedNewUrl = url.replace(/\/$/, "")
 
-		// Extract the root domain from the URL
-		const rootDomain = this.getRootDomain(normalizedNewUrl)
-
-		// Get all current pages
+		// Select a single target page to enforce strict single-tab behavior
 		const pages = await this.browser.pages()
+		let targetPage: Page | undefined = this.page ?? pages[0]
 
-		// Try to find a page with the same root domain
-		let existingPage: Page | undefined
+		// If no page exists yet, create one directly
+		if (!targetPage) {
+			return this.createNewTab(normalizedNewUrl)
+		}
 
-		for (const page of pages) {
-			try {
-				const pageUrl = page.url()
-				if (pageUrl && this.getRootDomain(pageUrl) === rootDomain) {
-					existingPage = page
-					break
+		// Close all other pages to keep exactly one tab
+		for (const p of pages) {
+			if (p !== targetPage) {
+				try {
+					await p.close().catch(() => {})
+				} catch {
+					// best-effort
 				}
-			} catch (error) {
-				// Skip pages that might have been closed or have errors
-				console.log(`Error checking page URL: ${error}`)
-				continue
 			}
 		}
 
-		if (existingPage) {
-			// Tab with the same root domain exists, switch to it
-			console.log(`Tab with domain ${rootDomain} already exists, switching to it`)
-
-			// Update the active page
-			this.page = existingPage
-			existingPage.bringToFront()
-
-			// Navigate to the new URL if it's different]
-			const currentUrl = existingPage.url().replace(/\/$/, "") // Remove trailing / if present
-			if (this.getRootDomain(currentUrl) === rootDomain && currentUrl !== normalizedNewUrl) {
-				console.log(`Navigating to new URL: ${normalizedNewUrl}`)
-				console.log(`Current URL: ${currentUrl}`)
-				console.log(`Root domain: ${this.getRootDomain(currentUrl)}`)
-				console.log(`New URL: ${normalizedNewUrl}`)
-				// Navigate to the new URL
-				return this.doAction(async (page) => {
-					await this.navigatePageToUrl(page, normalizedNewUrl)
-				})
-			} else {
-				console.log(`Tab with domain ${rootDomain} already exists, and URL is the same: ${normalizedNewUrl}`)
-				// URL is the same, just reload the page to ensure it's up to date
-				console.log(`Reloading page: ${normalizedNewUrl}`)
-				console.log(`Current URL: ${currentUrl}`)
-				console.log(`Root domain: ${this.getRootDomain(currentUrl)}`)
-				console.log(`New URL: ${normalizedNewUrl}`)
-				return this.doAction(async (page) => {
-					await page.reload({
-						timeout: BROWSER_NAVIGATION_TIMEOUT,
-						waitUntil: ["domcontentloaded", "networkidle2"],
-					})
-					await this.waitTillHTMLStable(page)
-				})
-			}
+		// Use the selected page
+		this.page = targetPage
+		try {
+			targetPage.bringToFront()
+		} catch {
+			// no-op if bringToFront fails
+		}
+
+		// Navigate if URL changed, otherwise reload to ensure freshness
+		const currentUrl = (targetPage.url?.() || "").replace(/\/$/, "")
+		if (currentUrl !== normalizedNewUrl) {
+			return this.doAction(async (page) => {
+				await this.navigatePageToUrl(page, normalizedNewUrl)
+			})
 		} else {
-			// No tab with this root domain exists, create a new one
-			console.log(`No tab with domain ${rootDomain} exists, creating a new one`)
-			return this.createNewTab(normalizedNewUrl)
+			return this.doAction(async (page) => {
+				await page.reload({
+					timeout: BROWSER_NAVIGATION_TIMEOUT,
+					waitUntil: ["domcontentloaded", "networkidle2"],
+				})
+				await this.waitTillHTMLStable(page)
+			})
 		}
 	}
 

src/services/browser/BrowserSession.ts

@@ -257,6 +257,66 @@ describe("BrowserSession", () => {
 		expect(forceSpy).toHaveBeenCalledWith(page)
 		expect(page.mouse.click).toHaveBeenCalledWith(10, 20)
 	})
+
+	it("reuses a single page across domains and closes others", async () => {
+		const mockCtx: any = {
+			globalState: { get: vi.fn(), update: vi.fn() },
+			globalStorageUri: { fsPath: "/mock/global/storage/path" },
+			extensionUri: { fsPath: "/mock/extension/path" },
+		}
+		const session = new BrowserSession(mockCtx)
+
+		// Create two pages
+		const page1: any = {
+			on: vi.fn(),
+			off: vi.fn(),
+			screenshot: vi.fn().mockResolvedValue("mockScreenshotBase64"),
+			url: vi.fn().mockReturnValue("https://a.com"),
+			waitForNavigation: vi.fn().mockResolvedValue(undefined),
+			evaluate: vi.fn().mockResolvedValue(undefined),
+			goto: vi.fn().mockResolvedValue(undefined),
+			reload: vi.fn().mockResolvedValue(undefined),
+			bringToFront: vi.fn().mockResolvedValue(undefined),
+			close: vi.fn().mockResolvedValue(undefined),
+			content: vi.fn().mockResolvedValue("<html></html>"),
+			keyboard: { press: vi.fn(), type: vi.fn() },
+			mouse: { click: vi.fn(), move: vi.fn() },
+		}
+		const page2: any = {
+			on: vi.fn(),
+			off: vi.fn(),
+			screenshot: vi.fn().mockResolvedValue("mockScreenshotBase64"),
+			url: vi.fn().mockReturnValue("https://b.com"),
+			waitForNavigation: vi.fn().mockResolvedValue(undefined),
+			evaluate: vi.fn().mockResolvedValue(undefined),
+			goto: vi.fn().mockResolvedValue(undefined),
+			reload: vi.fn().mockResolvedValue(undefined),
+			bringToFront: vi.fn().mockResolvedValue(undefined),
+			close: vi.fn().mockResolvedValue(undefined),
+			content: vi.fn().mockResolvedValue("<html></html>"),
+			keyboard: { press: vi.fn(), type: vi.fn() },
+			mouse: { click: vi.fn(), move: vi.fn() },
+		}
+
+		// Mock browser with two pages
+		const mockBrowser: any = {
+			pages: vi.fn().mockResolvedValue([page1, page2]),
+			newPage: vi.fn(),
+			close: vi.fn(),
+			disconnect: vi.fn(),
+		}
+
+		;(session as any).browser = mockBrowser
+		;(session as any).page = page1
+
+		// Navigate to a different domain
+		await session.navigateToUrl("https://other.com/path")
+
+		// Reuses page1 (no new page created), navigates, and closes page2
+		expect(page1.goto).toHaveBeenCalledWith("https://other.com/path", expect.any(Object))
+		expect(page2.close).toHaveBeenCalledTimes(1)
+		expect((session as any).page).toBe(page1)
+	})
 })
 
 describe("keyboard press", () => {

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

@@ -375,7 +375,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 				</span>
 				<div
 					className="text-xs text-vscode-dropdown-foreground border-vscode-dropdown-border/50 border px-1.5 py-0.5 rounded-lg"
-					style={{ marginLeft: "auto", opacity: totalApiCost > 0 ? 0.4 : 0 }}>
+					style={{ marginLeft: "auto", opacity: totalApiCost > 0 ? 1 : 0 }}>
 					${totalApiCost.toFixed(4)}
 				</div>
 			</div>
@@ -527,7 +527,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 					{/* Step counter */}
 					{pages.length > 1 && (
 						<span className="text-xs" style={{ color: "var(--vscode-descriptionForeground)" }}>
-							{currentPageIndex + 1} of {pages.length}
+							{t("chat:browser.navigation.step", { current: currentPageIndex + 1, total: pages.length })}
 						</span>
 					)}
 					{/* Right side: chevron */}