add setting to save browser sessions

Author: jquanton

src/core/webview/ClineProvider.ts

@@ -120,6 +120,7 @@ type GlobalStateKey =
 	| "experimentalDiffStrategy"
 	| "autoApprovalEnabled"
 	| "customModes" // Array of custom modes
+	| "keepBrowserOpen"
 
 export const GlobalFileNames = {
 	apiConversationHistory: "api_conversation_history.json",
@@ -1177,6 +1178,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						}
 						await this.postStateToWebview()
 						break
+					case "keepBrowserOpen":
+						await this.updateGlobalState("keepBrowserOpen", message.bool ?? false)
+						await this.postStateToWebview()
+						break
 					case "updateMcpTimeout":
 						if (message.serverName && typeof message.timeout === "number") {
 							try {
@@ -1836,6 +1841,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			enhancementApiConfigId,
 			experimentalDiffStrategy,
 			autoApprovalEnabled,
+			keepBrowserOpen,
 		} = await this.getState()
 
 		const allowedCommands = vscode.workspace.getConfiguration("roo-cline").get<string[]>("allowedCommands") || []
@@ -1844,6 +1850,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			version: this.context.extension?.packageJSON?.version ?? "",
 			apiConfiguration,
 			customInstructions,
+			keepBrowserOpen: keepBrowserOpen ?? false,
 			alwaysAllowReadOnly: alwaysAllowReadOnly ?? false,
 			alwaysAllowWrite: alwaysAllowWrite ?? false,
 			alwaysAllowExecute: alwaysAllowExecute ?? false,
@@ -2001,6 +2008,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			experimentalDiffStrategy,
 			autoApprovalEnabled,
 			customModes,
+			keepBrowserOpen,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -2070,6 +2078,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("experimentalDiffStrategy") as Promise<boolean | undefined>,
 			this.getGlobalState("autoApprovalEnabled") as Promise<boolean | undefined>,
 			this.customModesManager.getCustomModes(),
+			this.getGlobalState("keepBrowserOpen") as Promise<boolean | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -2185,6 +2194,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			experimentalDiffStrategy: experimentalDiffStrategy ?? false,
 			autoApprovalEnabled: autoApprovalEnabled ?? false,
 			customModes,
+			keepBrowserOpen: keepBrowserOpen ?? false,
 		}
 	}
 

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

@@ -320,6 +320,7 @@ describe("ClineProvider", () => {
 			requestDelaySeconds: 5,
 			mode: defaultModeSlug,
 			customModes: [],
+			keepBrowserOpen: false,
 		}
 
 		const message: ExtensionMessage = {

src/services/browser/BrowserSession.ts

@@ -19,11 +19,39 @@ export class BrowserSession {
 	private browser?: Browser
 	private page?: Page
 	private currentMousePosition?: string
+	private sessionTimeout?: NodeJS.Timeout
+	private readonly SESSION_TIMEOUT = 30 * 60 * 1000 // 30 minutes
 
 	constructor(context: vscode.ExtensionContext) {
 		this.context = context
 	}
 
+	private async getKeepBrowserOpen(): Promise<boolean> {
+		return this.context.globalState.get<boolean>("keepBrowserOpen") ?? false
+	}
+
+	private async resetSessionTimeout() {
+		if (this.sessionTimeout) {
+			clearTimeout(this.sessionTimeout)
+		}
+
+		const keepBrowserOpen = await this.getKeepBrowserOpen()
+		if (keepBrowserOpen) {
+			this.sessionTimeout = setTimeout(() => {
+				console.log("Browser session timed out after inactivity")
+				this.browser?.close().catch(() => {})
+				this.browser = undefined
+				this.page = undefined
+				this.currentMousePosition = undefined
+			}, this.SESSION_TIMEOUT)
+		} else {
+			this.sessionTimeout = setTimeout(() => {
+				console.log("Browser session timed out after inactivity")
+				this.closeBrowser()
+			}, this.SESSION_TIMEOUT)
+		}
+	}
+
 	private async ensureChromiumExists(): Promise<PCRStats> {
 		const globalStoragePath = this.context?.globalStorageUri?.fsPath
 		if (!globalStoragePath) {
@@ -47,46 +75,58 @@ export class BrowserSession {
 
 	async launchBrowser(): Promise<void> {
 		console.log("launch browser called")
-		if (this.browser) {
-			// throw new Error("Browser already launched")
+		if (this.browser || this.page) {
 			await this.closeBrowser() // this may happen when the model launches a browser again after having used it already before
 		}
 
 		const stats = await this.ensureChromiumExists()
-		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: (() => {
-				const size = (this.context.globalState.get("browserViewportSize") as string | undefined) || "900x600"
-				const [width, height] = size.split("x").map(Number)
-				return { width, height }
-			})(),
-			// headless: false,
-		})
-		// (latest version of puppeteer does not add headless to user agent)
-		this.page = await this.browser?.newPage()
+		if (!this.browser || !this.page) {
+			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: (() => {
+					const size =
+						(this.context.globalState.get("browserViewportSize") as string | undefined) || "900x600"
+					const [width, height] = size.split("x").map(Number)
+					return { width, height }
+				})(),
+				// headless: false,
+			})
+			// (latest version of puppeteer does not add headless to user agent)
+			this.page = await this.browser?.newPage()
+		}
 	}
 
 	async closeBrowser(): Promise<BrowserActionResult> {
 		if (this.browser || this.page) {
-			console.log("closing browser...")
-			await this.browser?.close().catch(() => {})
-			this.browser = undefined
-			this.page = undefined
-			this.currentMousePosition = undefined
+			const keepBrowserOpen = await this.getKeepBrowserOpen()
+			if (!keepBrowserOpen) {
+				console.log("closing browser...")
+				await this.browser?.close().catch(() => {})
+				this.browser = undefined
+				this.page = undefined
+				this.currentMousePosition = undefined
+			} else {
+				console.log("keeping browser open...")
+			}
 		}
 		return {}
 	}
 
 	async doAction(action: (page: Page) => Promise<void>): Promise<BrowserActionResult> {
-		if (!this.page) {
-			throw new Error(
-				"Browser is not launched. This may occur if the browser was automatically closed by a non-`browser_action` tool.",
-			)
+		if (!this.page || !this.browser) {
+			console.log("No browser/page found, launching new one")
+			await this.launchBrowser()
+			if (!this.page) {
+				throw new Error("Failed to launch browser")
+			}
 		}
 
+		// Reset timeout on each action
+		await this.resetSessionTimeout()
+
 		const logs: string[] = []
 		let lastLogTs = Date.now()
 

src/shared/ExtensionMessage.ts

@@ -41,6 +41,7 @@ export interface ExtensionMessage {
 		| "autoApprovalEnabled"
 		| "updateCustomMode"
 		| "deleteCustomMode"
+		| "keepBrowserOpen"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -51,6 +52,7 @@ export interface ExtensionMessage {
 		| "didBecomeVisible"
 	invoke?: "sendMessage" | "primaryButtonClick" | "secondaryButtonClick"
 	state?: ExtensionState
+	bool?: boolean // Used for boolean settings like keepBrowserOpen
 	images?: string[]
 	ollamaModels?: string[]
 	lmStudioModels?: string[]
@@ -111,6 +113,7 @@ export interface ExtensionState {
 	autoApprovalEnabled?: boolean
 	customModes: ModeConfig[]
 	toolRequirements?: Record<string, boolean> // Map of tool names to their requirements (e.g. {"apply_diff": true} if diffEnabled)
+	keepBrowserOpen: boolean // Controls whether browser sessions persist between actions
 }
 
 export interface ClineMessage {

src/shared/WebviewMessage.ts

@@ -80,6 +80,7 @@ export interface WebviewMessage {
 		| "deleteCustomMode"
 		| "setopenAiCustomModelInfo"
 		| "openCustomModesSettings"
+		| "keepBrowserOpen"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

webview-ui/src/components/settings/SettingsView.tsx

@@ -53,6 +53,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		listApiConfigMeta,
 		experimentalDiffStrategy,
 		setExperimentalDiffStrategy,
+		keepBrowserOpen,
+		setKeepBrowserOpen,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -93,6 +95,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				apiConfiguration,
 			})
 			vscode.postMessage({ type: "experimentalDiffStrategy", bool: experimentalDiffStrategy })
+			vscode.postMessage({ type: "keepBrowserOpen", bool: keepBrowserOpen })
 			onDone()
 		}
 	}
@@ -428,6 +431,17 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 
 				<div style={{ marginBottom: 40 }}>
 					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Browser Settings</h3>
+					<div style={{ marginBottom: 15 }}>
+						<VSCodeCheckbox
+							checked={keepBrowserOpen}
+							onChange={(e: any) => setKeepBrowserOpen(e.target.checked)}>
+							<span style={{ fontWeight: "500" }}>Keep browser open between actions</span>
+						</VSCodeCheckbox>
+						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
+							When enabled, the browser will stay open between actions during web development tasks,
+							improving performance. The browser will still close after 30 minutes of inactivity.
+						</p>
+					</div>
 					<div style={{ marginBottom: 15 }}>
 						<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Viewport size</label>
 						<select

webview-ui/src/context/ExtensionStateContext.tsx

@@ -69,6 +69,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
 	customModes: ModeConfig[]
 	setCustomModes: (value: ModeConfig[]) => void
+	keepBrowserOpen: boolean
+	setKeepBrowserOpen: (value: boolean) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -101,6 +103,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		experimentalDiffStrategy: false,
 		autoApprovalEnabled: false,
 		customModes: [],
+		keepBrowserOpen: false,
 	})
 
 	const [didHydrateState, setDidHydrateState] = useState(false)
@@ -282,6 +285,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setAutoApprovalEnabled: (value) => setState((prevState) => ({ ...prevState, autoApprovalEnabled: value })),
 		handleInputChange,
 		setCustomModes: (value) => setState((prevState) => ({ ...prevState, customModes: value })),
+		setKeepBrowserOpen: (value) => setState((prevState) => ({ ...prevState, keepBrowserOpen: value })),
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>