From 699ae18a7f60e2ccb91da83c7458d917fd5475ba Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Wed, 15 Jan 2025 22:08:35 -0800 Subject: [PATCH] Add browser settings to change headless mode and size --- package-lock.json | 4 +- src/core/Cline.ts | 20 +- src/core/prompts/system.ts | 6 +- src/core/webview/ClineProvider.ts | 37 ++- src/services/browser/BrowserSession.ts | 99 +++++++- src/shared/BrowserSettings.ts | 27 ++ src/shared/ExtensionMessage.ts | 2 + src/shared/WebviewMessage.ts | 4 + .../browser/BrowserSettingsMenu.tsx | 235 ++++++++++++++++++ .../src/components/chat/BrowserSessionRow.tsx | 66 +++-- .../src/context/ExtensionStateContext.tsx | 2 + 11 files changed, 462 insertions(+), 40 deletions(-) create mode 100644 src/shared/BrowserSettings.ts create mode 100644 webview-ui/src/components/browser/BrowserSettingsMenu.tsx diff --git a/package-lock.json b/package-lock.json index 42e106c3bc..5621c32950 100644 --- a/package-lock.json +++ b/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", diff --git a/src/core/Cline.ts b/src/core/Cline.ts index f4d1bb5ae9..5b4204105d 100644 --- a/src/core/Cline.ts +++ b/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 { @@ -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 diff --git a/src/core/prompts/system.ts b/src/core/prompts/system.ts index 1e39799303..d6b0d2ca22 100644 --- a/src/core/prompts/system.ts +++ b/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: \`close\` - url: (optional) Use this for providing the URL for the \`launch\` action. * Example: https://example.com -- 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: 450,300 - text: (optional) Use this for providing the text for the \`type\` action. * Example: Hello, world! diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts index 5aec8adc9b..e2a1d7f453 100644 --- a/src/core/webview/ClineProvider.ts +++ b/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 { - 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, this.getGlobalState("apiModelId") as Promise, @@ -1036,6 +1061,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { this.getGlobalState("customInstructions") as Promise, this.getGlobalState("taskHistory") as Promise, this.getGlobalState("autoApprovalSettings") as Promise, + this.getGlobalState("browserSettings") as Promise, ]) 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, } } diff --git a/src/services/browser/BrowserSession.ts b/src/services/browser/BrowserSession.ts index 0b7b0961b5..cbc7734d36 100644 --- a/src/services/browser/BrowserSession.ts +++ b/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 { @@ -45,6 +51,70 @@ export class BrowserSession { return stats } + // private async checkExistingChromeDebugger(): Promise { + // 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 { + // // 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() } diff --git a/src/shared/BrowserSettings.ts b/src/shared/BrowserSettings.ts new file mode 100644 index 0000000000..e4a2f40d75 --- /dev/null +++ b/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 diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts index e4760282a5..fe5584c54d 100644 --- a/src/shared/ExtensionMessage.ts +++ b/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 { diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts index 419306ef6c..4fa90b3e36 100644 --- a/src/shared/WebviewMessage.ts +++ b/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" diff --git a/webview-ui/src/components/browser/BrowserSettingsMenu.tsx b/webview-ui/src/components/browser/BrowserSettingsMenu.tsx new file mode 100644 index 0000000000..092cc19af9 --- /dev/null +++ b/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 = ({ disabled = false, maxWidth }) => { + const { browserSettings } = useExtensionState() + const [showMenu, setShowMenu] = useState(false) + const [hasMouseEntered, setHasMouseEntered] = useState(false) + const containerRef = useRef(null) + const menuRef = useRef(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 ( +
+ setShowMenu(!showMenu)} disabled={disabled}> + + + {showMenu && ( + + + {/* Headless Mode */} + updateHeadless((e.target as HTMLInputElement).checked)}> + Run in headless mode + + When enabled, Chrome will run in the background. + + + {/* + Chrome Executable + + updateChromeType((e.target as HTMLSelectElement).value as BrowserSettings["chromeType"]) + }> + Chromium (Auto-downloaded) + System Chrome + + + {browserSettings.chromeType === "system" ? ( + <> + Cline will use your personal browser. You must{" "} + { + e.preventDefault() + relaunchChromeDebugMode() + }}> + relaunch Chrome in debug mode + {" "} + to use this setting. + + ) : ( + "Cline will use a Chromium browser bundled with the extension." + )} + + */} + + + Viewport 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]) => ( + + {name} + + ))} + + + + )} +
+ ) +} + +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 diff --git a/webview-ui/src/components/chat/BrowserSessionRow.tsx b/webview-ui/src/components/chat/BrowserSessionRow.tsx index 3c81eac31f..7153cb7f21 100644 --- a/webview-ui/src/components/chat/BrowserSessionRow.tsx +++ b/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(
{ 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 */}
- {displayState.url || "http"} +
+ {displayState.url || "http"} +
+
{/* Screenshot Area */}
@@ -338,8 +360,8 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => { @@ -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`, diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx index c6bbd04a86..d61eb754d4 100644 --- a/webview-ui/src/context/ExtensionStateContext.tsx +++ b/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)