diff --git a/server/browser-use-mcp.ts b/server/browser-use-mcp.ts index 55c448ad..238bff35 100644 --- a/server/browser-use-mcp.ts +++ b/server/browser-use-mcp.ts @@ -53,7 +53,7 @@ async function callBrowserUseApi(toolName: string, input: Record) { - const payload = JSON.stringify(message); - process.stdout.write(`Content-Length: ${Buffer.byteLength(payload, 'utf8')}\r\n\r\n${payload}`); + // MCP stdio transport uses newline-delimited JSON (one JSON-RPC message per line, + // no embedded newlines). This is NOT the LSP Content-Length framing. + process.stdout.write(`${JSON.stringify(message)}\n`); } function sendResult(id: string | number | null | undefined, result: unknown) { @@ -352,33 +353,18 @@ function sendError(id: string | number | null | undefined, error: unknown) { }); } -let buffer = Buffer.alloc(0); +let buffer = ''; process.stdin.on('data', (chunk) => { - buffer = Buffer.concat([buffer, chunk]); - while (true) { - const headerEnd = buffer.indexOf('\r\n\r\n'); - if (headerEnd === -1) { - return; - } - - const header = buffer.slice(0, headerEnd).toString('utf8'); - const lengthMatch = /Content-Length:\s*(\d+)/i.exec(header); - if (!lengthMatch) { - buffer = buffer.slice(headerEnd + 4); + buffer += chunk.toString('utf8'); + let newlineIndex: number; + while ((newlineIndex = buffer.indexOf('\n')) !== -1) { + const rawMessage = buffer.slice(0, newlineIndex).trim(); + buffer = buffer.slice(newlineIndex + 1); + if (!rawMessage) { continue; } - const length = Number.parseInt(lengthMatch[1], 10); - const messageStart = headerEnd + 4; - const messageEnd = messageStart + length; - if (buffer.length < messageEnd) { - return; - } - - const rawMessage = buffer.slice(messageStart, messageEnd).toString('utf8'); - buffer = buffer.slice(messageEnd); - void (async () => { let request: JsonRpcRequest; try { diff --git a/server/cli.js b/server/cli.js index 83c04411..0be3bf72 100755 --- a/server/cli.js +++ b/server/cli.js @@ -8,7 +8,7 @@ * (no args) - Start the server (default) * start - Start the server * sandbox - Manage Docker sandbox environments - * browser-use-mcp - Run Browser Use MCP stdio server + * browser-use-mcp - Run Browser MCP stdio server * status - Show configuration and data locations * help - Show help information * version - Show version information @@ -157,7 +157,7 @@ Usage: Commands: start Start the CloudCLI server (default) sandbox Manage Docker sandbox environments - browser-use-mcp Run the Browser Use MCP stdio server + browser-use-mcp Run the Browser MCP stdio server status Show configuration and data locations update Update to the latest version help Show this help information diff --git a/server/index.js b/server/index.js index 28705cf5..36b4d3d1 100755 --- a/server/index.js +++ b/server/index.js @@ -199,10 +199,10 @@ app.use('/api/gemini', authenticateToken, geminiRoutes); // Plugins API Routes (protected) app.use('/api/plugins', authenticateToken, pluginsRoutes); -// Browser Use MCP bridge API (local token protected) +// Browser MCP bridge API (local token protected) app.use('/api/browser-use-mcp', browserUseMcpRoutes); -// Browser Use API Routes (protected) +// Browser API Routes (protected) app.use('/api/browser-use', authenticateToken, browserUseRoutes); // Computer Use MCP bridge API (local token protected) @@ -1763,7 +1763,7 @@ async function startServer() { try { await browserUseService.stopAllSessions(); } catch (err) { - console.error('[Browser Use] Error stopping sessions during shutdown:', err?.message || err); + console.error('[Browser] Error stopping sessions during shutdown:', err?.message || err); } try { await computerUseService.stopAllSessions(); diff --git a/server/modules/browser-use/browser-use-mcp.routes.ts b/server/modules/browser-use/browser-use-mcp.routes.ts index 2899fd74..060bb028 100644 --- a/server/modules/browser-use/browser-use-mcp.routes.ts +++ b/server/modules/browser-use/browser-use-mcp.routes.ts @@ -16,7 +16,7 @@ router.use((req, res, next) => { const expected = browserUseService.getMcpToken(); const token = readBearerToken(req.headers.authorization) || String(req.headers['x-browser-use-mcp-token'] || ''); if (!token || token !== expected) { - res.status(401).json({ success: false, error: 'Invalid Browser Use MCP token.' }); + res.status(401).json({ success: false, error: 'Invalid Browser MCP token.' }); return; } next(); @@ -104,7 +104,7 @@ router.post('/tools/:toolName', async (req, res) => { result = await browserUseService.agentStopSession(sessionId); break; default: - res.status(404).json({ success: false, error: `Unknown Browser Use MCP tool "${toolName}".` }); + res.status(404).json({ success: false, error: `Unknown Browser MCP tool "${toolName}".` }); return; } @@ -112,7 +112,7 @@ router.post('/tools/:toolName', async (req, res) => { } catch (error) { res.status(400).json({ success: false, - error: error instanceof Error ? error.message : 'Browser Use MCP tool failed.', + error: error instanceof Error ? error.message : 'Browser MCP tool failed.', }); } }); diff --git a/server/modules/browser-use/browser-use.routes.ts b/server/modules/browser-use/browser-use.routes.ts index 167912cd..ad428079 100644 --- a/server/modules/browser-use/browser-use.routes.ts +++ b/server/modules/browser-use/browser-use.routes.ts @@ -4,20 +4,6 @@ import { browserUseService } from '@/modules/browser-use/browser-use.service.js' const router = express.Router(); -type AuthenticatedRequest = express.Request & { - user?: { - id?: string | number; - }; -}; - -function requireUser(req: AuthenticatedRequest): { id: string | number } { - const userId = req.user?.id; - if (userId === undefined || userId === null) { - throw new Error('Authenticated user is required.'); - } - return { id: userId }; -} - function readParam(value: string | string[] | undefined): string { return Array.isArray(value) ? value[0] || '' : value || ''; } @@ -28,7 +14,7 @@ router.get('/status', async (_req, res) => { } catch (error) { res.status(500).json({ success: false, - error: error instanceof Error ? error.message : 'Failed to load Browser Use status.', + error: error instanceof Error ? error.message : 'Failed to load Browser status.', }); } }); @@ -39,7 +25,7 @@ router.get('/settings', async (_req, res) => { } catch (error) { res.status(500).json({ success: false, - error: error instanceof Error ? error.message : 'Failed to load Browser Use settings.', + error: error instanceof Error ? error.message : 'Failed to load Browser settings.', }); } }); @@ -51,19 +37,7 @@ router.put('/settings', async (req, res) => { } catch (error) { res.status(400).json({ success: false, - error: error instanceof Error ? error.message : 'Failed to save Browser Use settings.', - }); - } -}); - -router.post('/agent-tools/register', async (_req, res) => { - try { - const result = await browserUseService.registerAgentMcp(); - res.status(201).json({ success: true, data: result }); - } catch (error) { - res.status(400).json({ - success: false, - error: error instanceof Error ? error.message : 'Failed to register Browser Use MCP.', + error: error instanceof Error ? error.message : 'Failed to save Browser settings.', }); } }); @@ -79,14 +53,14 @@ router.post('/runtime/install', async (_req, res) => { } catch (error) { res.status(500).json({ success: false, - error: error instanceof Error ? error.message : 'Failed to install Browser Use runtime.', + error: error instanceof Error ? error.message : 'Failed to install Browser runtime.', }); } }); -router.get('/sessions', async (req: AuthenticatedRequest, res) => { +router.get('/sessions', async (_req, res) => { try { - res.json({ success: true, data: { sessions: await browserUseService.listSessions(requireUser(req)) } }); + res.json({ success: true, data: { sessions: await browserUseService.listSessions() } }); } catch (error) { res.status(401).json({ success: false, @@ -95,90 +69,9 @@ router.get('/sessions', async (req: AuthenticatedRequest, res) => { } }); -router.post('/sessions', async (req: AuthenticatedRequest, res) => { +router.post('/sessions/:sessionId/stop', async (req, res) => { try { - const session = await browserUseService.createSession(requireUser(req)); - res.status(session.status === 'unavailable' ? 202 : 201).json({ success: true, data: { session } }); - } catch (error) { - res.status(400).json({ - success: false, - error: error instanceof Error ? error.message : 'Failed to create browser session.', - }); - } -}); - -router.post('/sessions/:sessionId/navigate', async (req: AuthenticatedRequest, res) => { - try { - const session = await browserUseService.navigate(requireUser(req), readParam(req.params.sessionId), String(req.body?.url || '')); - res.json({ success: true, data: { session } }); - } catch (error) { - res.status(400).json({ - success: false, - error: error instanceof Error ? error.message : 'Failed to navigate browser session.', - }); - } -}); - -router.post('/sessions/:sessionId/click', async (req: AuthenticatedRequest, res) => { - try { - const x = Number(req.body?.x); - const y = Number(req.body?.y); - if (!Number.isFinite(x) || !Number.isFinite(y)) { - throw new Error('Click requires numeric x and y coordinates.'); - } - const session = await browserUseService.userClick(requireUser(req), readParam(req.params.sessionId), { x, y }); - res.json({ success: true, data: { session } }); - } catch (error) { - res.status(400).json({ - success: false, - error: error instanceof Error ? error.message : 'Failed to click browser session.', - }); - } -}); - -router.post('/sessions/:sessionId/press-key', async (req: AuthenticatedRequest, res) => { - try { - const key = String(req.body?.key || '').trim(); - if (!key) { - throw new Error('A key is required.'); - } - const session = await browserUseService.userPressKey(requireUser(req), readParam(req.params.sessionId), key); - res.json({ success: true, data: { session } }); - } catch (error) { - res.status(400).json({ - success: false, - error: error instanceof Error ? error.message : 'Failed to send browser key input.', - }); - } -}); - -router.post('/sessions/:sessionId/agent-access/grant', async (req: AuthenticatedRequest, res) => { - try { - const session = await browserUseService.grantAgentAccess(requireUser(req), readParam(req.params.sessionId)); - res.json({ success: true, data: { session } }); - } catch (error) { - res.status(400).json({ - success: false, - error: error instanceof Error ? error.message : 'Failed to grant agent access.', - }); - } -}); - -router.post('/sessions/:sessionId/agent-access/revoke', async (req: AuthenticatedRequest, res) => { - try { - const session = await browserUseService.revokeAgentAccess(requireUser(req), readParam(req.params.sessionId)); - res.json({ success: true, data: { session } }); - } catch (error) { - res.status(400).json({ - success: false, - error: error instanceof Error ? error.message : 'Failed to revoke agent access.', - }); - } -}); - -router.post('/sessions/:sessionId/stop', async (req: AuthenticatedRequest, res) => { - try { - const result = await browserUseService.stopSession(requireUser(req), readParam(req.params.sessionId)); + const result = await browserUseService.stopSession(readParam(req.params.sessionId)); res.json({ success: true, data: result }); } catch (error) { res.status(400).json({ @@ -188,9 +81,9 @@ router.post('/sessions/:sessionId/stop', async (req: AuthenticatedRequest, res) } }); -router.delete('/sessions/:sessionId', async (req: AuthenticatedRequest, res) => { +router.delete('/sessions/:sessionId', async (req, res) => { try { - const result = await browserUseService.deleteSession(requireUser(req), readParam(req.params.sessionId)); + const result = await browserUseService.deleteSession(readParam(req.params.sessionId)); res.json({ success: true, data: result }); } catch (error) { res.status(400).json({ diff --git a/server/modules/browser-use/browser-use.service.ts b/server/modules/browser-use/browser-use.service.ts index 7906b49e..280ff730 100644 --- a/server/modules/browser-use/browser-use.service.ts +++ b/server/modules/browser-use/browser-use.service.ts @@ -1,14 +1,12 @@ import { createRequire } from 'node:module'; import { randomBytes, randomUUID } from 'node:crypto'; import { spawn } from 'node:child_process'; -import dns from 'node:dns/promises'; import fs from 'node:fs'; import os from 'node:os'; -import net from 'node:net'; import path from 'node:path'; import { appConfigDb } from '@/modules/database/index.js'; -import { providerMcpService } from '@/modules/providers/services/mcp.service.js'; +import { providerMcpService } from '@/modules/providers/index.js'; import { getModuleDir } from '@/utils/runtime-paths.js'; const require = createRequire(import.meta.url); @@ -16,7 +14,6 @@ const __dirname = getModuleDir(import.meta.url); const IS_PLATFORM = process.env.VITE_IS_PLATFORM === 'true'; const MAX_SESSIONS_PER_OWNER = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_MAX_SESSIONS_PER_OWNER || '3', 10); const SESSION_TTL_MS = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_SESSION_TTL_MS || String(30 * 60 * 1000), 10); -const ALLOW_PRIVATE_NETWORKS = process.env.CLOUDCLI_BROWSER_USE_ALLOW_PRIVATE_NETWORKS === '1'; const BROWSER_USE_SETTINGS_KEY = 'browser_use_settings'; const BROWSER_USE_MCP_TOKEN_KEY = 'browser_use_mcp_token'; @@ -26,7 +23,7 @@ type BrowserUseSessionStatus = 'ready' | 'stopped' | 'unavailable'; type BrowserUseSession = { id: string; ownerId: string; - createdBy: 'user' | 'agent'; + createdBy: 'agent'; runtime: BrowserUseRuntime; status: BrowserUseSessionStatus; url: string | null; @@ -36,7 +33,6 @@ type BrowserUseSession = { updatedAt: string; lastAction: string | null; message: string | null; - agentAccessEnabled: boolean; profileName: string | null; viewport: { width: number; @@ -45,7 +41,7 @@ type BrowserUseSession = { cursor: { x: number; y: number; - actor: 'agent' | 'user'; + actor: 'agent'; } | null; }; @@ -57,13 +53,8 @@ type RuntimeHandle = { page?: any; }; -type BrowserUseOwner = { - id: string | number; -}; - type BrowserUseSettings = { enabled: boolean; - agentToolsEnabled: boolean; }; type RuntimeReadiness = { @@ -75,19 +66,22 @@ type RuntimeReadiness = { installMessage: string | null; }; +type RuntimeProbe = Omit; + const sessions = new Map(); const handles = new Map(); let installPromise: Promise<{ success: boolean; message: string }> | null = null; let lastInstallMessage: string | null = null; +let runtimeProbeCache: { value: RuntimeProbe; updatedAt: number } | null = null; const DEFAULT_SETTINGS: BrowserUseSettings = { enabled: false, - agentToolsEnabled: false, }; const AGENT_OWNER_ID = 'agent'; const PROFILE_ROOT = path.join(os.homedir(), '.cloudcli', 'browser-use', 'profiles'); -const MCP_SERVER_NAME = 'cloudcli-browser-use'; -const MCP_PROVIDERS = ['claude', 'codex', 'cursor', 'gemini', 'opencode']; +const MCP_SERVER_NAME = 'cloudcli-browser'; +const LEGACY_MCP_SERVER_NAMES = ['cloudcli-browser-use']; +const RUNTIME_READINESS_CACHE_TTL_MS = 30_000; function getRuntime(): BrowserUseRuntime { return IS_PLATFORM ? 'cloud' : 'local'; @@ -103,10 +97,9 @@ function readSettings(): BrowserUseSettings { const parsed = JSON.parse(raw) as Partial; return { enabled: parsed.enabled === true, - agentToolsEnabled: parsed.agentToolsEnabled === true, }; } catch (error: any) { - console.warn('[Browser Use] Failed to read settings:', error?.message || error); + console.warn('[Browser] Failed to read settings:', error?.message || error); return DEFAULT_SETTINGS; } } @@ -114,7 +107,6 @@ function readSettings(): BrowserUseSettings { function writeSettings(settings: BrowserUseSettings): BrowserUseSettings { const normalized = { enabled: settings.enabled === true, - agentToolsEnabled: settings.agentToolsEnabled === true, }; appConfigDb.set(BROWSER_USE_SETTINGS_KEY, JSON.stringify(normalized)); @@ -133,7 +125,7 @@ function getOrCreateMcpToken(): string { function getSetupMessage(settings: BrowserUseSettings, readiness: RuntimeReadiness): string { if (!settings.enabled) { - return 'Browser Use is disabled in settings.'; + return 'Browser is disabled in settings.'; } if (!readiness.playwrightInstalled) { @@ -144,7 +136,7 @@ function getSetupMessage(settings: BrowserUseSettings, readiness: RuntimeReadine return 'Playwright is installed, but Chromium is missing. Install the Chromium runtime to continue.'; } - return readiness.installMessage || 'Browser Use runtime is not ready.'; + return readiness.installMessage || 'Browser runtime is not ready.'; } function getPlaywright(): any | null { @@ -176,6 +168,14 @@ function getMcpApiUrl(): string { return `http://127.0.0.1:${port}/api/browser-use-mcp`; } +async function removeMcpServerFromAllProviders(name: string) { + const results = await providerMcpService.removeMcpServerFromAllProviders({ + name, + scope: 'user', + }); + return results.map((result) => ({ ...result, name })); +} + function normalizeProfileName(profileName?: string | null): string | null { const normalized = String(profileName || '').trim(); if (!normalized) { @@ -194,15 +194,13 @@ function getProfilePath(profileName: string): string { return path.join(PROFILE_ROOT, safeName); } -function getRuntimeReadiness(): RuntimeReadiness { +function probeRuntime(): RuntimeProbe { const playwright = getPlaywright(); - const readiness: RuntimeReadiness = { + const readiness: RuntimeProbe = { playwright, playwrightInstalled: Boolean(playwright), chromiumInstalled: false, chromiumExecutablePath: null, - installInProgress: Boolean(installPromise), - installMessage: lastInstallMessage, }; if (!playwright) { @@ -220,6 +218,26 @@ function getRuntimeReadiness(): RuntimeReadiness { return readiness; } +function getRuntimeReadiness(options: { force?: boolean } = {}): RuntimeReadiness { + const now = Date.now(); + const cachedProbe = runtimeProbeCache; + const canUseCache = !options.force + && !installPromise + && cachedProbe + && now - cachedProbe.updatedAt < RUNTIME_READINESS_CACHE_TTL_MS; + const probe = canUseCache ? cachedProbe.value : probeRuntime(); + + if (!canUseCache && !installPromise) { + runtimeProbeCache = { value: probe, updatedAt: now }; + } + + return { + ...probe, + installInProgress: Boolean(installPromise), + installMessage: lastInstallMessage, + }; +} + const INSTALL_COMMAND_TIMEOUT_MS = Number.parseInt( process.env.CLOUDCLI_BROWSER_USE_INSTALL_TIMEOUT_MS || String(10 * 60 * 1000), 10, @@ -244,7 +262,6 @@ function runCommand(command: string, args: string[]): Promise { fn(); }; - // Guard against a stuck npm/playwright process hanging the install request forever. const timer = setTimeout(() => { child.kill('SIGKILL'); finish(() => reject(new Error( @@ -272,7 +289,7 @@ function formatInstallError(error: unknown): string { if (message.includes('sudo') && message.includes('password')) { return 'Installing Chromium system dependencies requires administrator privileges. Run `npx playwright install-deps chromium` on the machine where CloudCLI runs, then try again.'; } - return message || 'Failed to install Browser Use runtime.'; + return message || 'Failed to install Browser runtime.'; } async function installRuntime(): Promise<{ success: boolean; message: string }> { @@ -281,6 +298,7 @@ async function installRuntime(): Promise<{ success: boolean; message: string }> } const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm'; + runtimeProbeCache = null; installPromise = (async () => { try { lastInstallMessage = 'Installing Playwright package...'; @@ -294,7 +312,7 @@ async function installRuntime(): Promise<{ success: boolean; message: string }> lastInstallMessage = 'Installing Chromium runtime...'; await runCommand(npmCommand, ['exec', '--', 'playwright', 'install', 'chromium']); - lastInstallMessage = 'Browser Use runtime installed.'; + lastInstallMessage = 'Browser runtime installed.'; return { success: true, message: lastInstallMessage }; } catch (error) { lastInstallMessage = formatInstallError(error); @@ -306,82 +324,11 @@ async function installRuntime(): Promise<{ success: boolean; message: string }> return await installPromise; } finally { installPromise = null; + runtimeProbeCache = null; } } -function getOwnerId(owner: BrowserUseOwner): string { - if (owner.id === undefined || owner.id === null || String(owner.id).trim() === '') { - throw new Error('Authenticated user is required.'); - } - - return String(owner.id); -} - -function isPrivateIpv4(address: string): boolean { - const parts = address.split('.').map((part) => Number.parseInt(part, 10)); - if (parts.length !== 4 || parts.some((part) => Number.isNaN(part) || part < 0 || part > 255)) { - return true; - } - - const [first, second] = parts; - return first === 0 - || first === 10 - || first === 127 - || (first === 169 && second === 254) - || (first === 172 && second >= 16 && second <= 31) - || (first === 192 && second === 168) - || first >= 224; -} - -function isPrivateIpv6(address: string): boolean { - const normalized = address.toLowerCase(); - return normalized === '::1' - || normalized === '::' - || normalized.startsWith('fc') - || normalized.startsWith('fd') - || normalized.startsWith('fe80:') - || normalized.startsWith('::ffff:127.') - || normalized.startsWith('::ffff:10.') - || normalized.startsWith('::ffff:192.168.') - || /^::ffff:172\.(1[6-9]|2\d|3[0-1])\./.test(normalized) - || /^::ffff:169\.254\./.test(normalized); -} - -export function isBlockedBrowserUseAddress(address: string): boolean { - const version = net.isIP(address); - if (version === 4) { - return isPrivateIpv4(address); - } - if (version === 6) { - return isPrivateIpv6(address); - } - return true; -} - -async function assertPublicHttpTarget(parsedUrl: URL): Promise { - if (ALLOW_PRIVATE_NETWORKS) { - return; - } - - const hostname = parsedUrl.hostname; - if (!hostname) { - throw new Error('URL hostname is required.'); - } - - if (net.isIP(hostname)) { - if (isBlockedBrowserUseAddress(hostname)) { - throw new Error('Browser Use cannot navigate to private or local network addresses.'); - } - return; - } - - const addresses = await dns.lookup(hostname, { all: true, verbatim: true }); - if (addresses.length === 0 || addresses.some((entry) => isBlockedBrowserUseAddress(entry.address))) { - throw new Error('Browser Use cannot navigate to private or local network addresses.'); - } -} - -async function normalizeUrl(rawUrl: string): Promise { +function normalizeUrl(rawUrl: string): string { const trimmed = rawUrl.trim(); if (!trimmed) { throw new Error('URL is required.'); @@ -395,33 +342,9 @@ async function normalizeUrl(rawUrl: string): Promise { throw new Error('Only http and https URLs are supported.'); } - await assertPublicHttpTarget(parsed); - return parsed.toString(); } -async function assertAllowedBrowserRequest(rawUrl: string): Promise { - const parsed = new URL(rawUrl); - if (!['http:', 'https:'].includes(parsed.protocol)) { - return; - } - - await assertPublicHttpTarget(parsed); -} - -async function attachRequestGuard(context: any): Promise { - // Attach at the context level so the guard also covers popups, window.open targets, - // and any replacement pages created during the session lifecycle. - await context.route('**/*', async (route: any) => { - try { - await assertAllowedBrowserRequest(route.request().url()); - await route.continue(); - } catch { - await route.abort('blockedbyclient'); - } - }); -} - function publicSession(session: BrowserUseSession): PublicBrowserUseSession { const { ownerId: _ownerId, ...publicFields } = session; return publicFields; @@ -431,10 +354,6 @@ function ownerSessions(ownerId: string): BrowserUseSession[] { return [...sessions.values()].filter((session) => session.ownerId === ownerId); } -function canAccessSession(ownerId: string, session: BrowserUseSession): boolean { - return session.ownerId === ownerId || session.ownerId === AGENT_OWNER_ID || session.agentAccessEnabled; -} - async function closeHandle(sessionId: string): Promise { const handle = handles.get(sessionId); handles.delete(sessionId); @@ -504,21 +423,15 @@ export const browserUseService = { async updateSettings(settings: Partial) { const current = readSettings(); const nextSettings = { - ...current, enabled: typeof settings.enabled === 'boolean' ? settings.enabled : current.enabled, - agentToolsEnabled: typeof settings.agentToolsEnabled === 'boolean' - ? settings.agentToolsEnabled - : current.agentToolsEnabled, }; - if (!nextSettings.enabled) { - nextSettings.agentToolsEnabled = false; - } const next = writeSettings(nextSettings); - if (next.agentToolsEnabled) { + if (next.enabled) { await this.registerAgentMcp(); - } else if (current.agentToolsEnabled) { + } else if (current.enabled) { await this.unregisterAgentMcp(); + await this.stopAllSessions(); } return next; }, @@ -536,16 +449,15 @@ export const browserUseService = { chromiumInstalled: readiness.chromiumInstalled, installInProgress: readiness.installInProgress, sessionCount: sessions.size, - agentToolsEnabled: settings.agentToolsEnabled, - mcpRecommended: !settings.agentToolsEnabled, message: available - ? 'Browser Use runtime is available.' + ? 'Browser runtime is available.' : getSetupMessage(settings, readiness), }; }, async registerAgentMcp() { const { command, args } = getMcpCommand(); + await Promise.all(LEGACY_MCP_SERVER_NAMES.map((name) => removeMcpServerFromAllProviders(name))); const results = await providerMcpService.addMcpServerToAllProviders({ name: MCP_SERVER_NAME, scope: 'user', @@ -565,21 +477,9 @@ export const browserUseService = { }, async unregisterAgentMcp() { - const results = await Promise.all(MCP_PROVIDERS.map(async (provider) => { - try { - const result = await providerMcpService.removeProviderMcpServer(provider, { - name: MCP_SERVER_NAME, - scope: 'user', - }); - return { provider, removed: result.removed }; - } catch (error) { - return { - provider, - removed: false, - error: error instanceof Error ? error.message : 'Unknown error', - }; - } - })); + const results = (await Promise.all( + [MCP_SERVER_NAME, ...LEGACY_MCP_SERVER_NAMES].map((name) => removeMcpServerFromAllProviders(name)), + )).flat(); return { name: MCP_SERVER_NAME, results }; }, @@ -591,25 +491,27 @@ export const browserUseService = { }; }, - async listSessions(owner: BrowserUseOwner) { - const ownerId = getOwnerId(owner); + async listSessions() { await expireStaleSessions(); return [...sessions.values()] - .filter((session) => canAccessSession(ownerId, session)) + .filter((session) => session.ownerId === AGENT_OWNER_ID) .map(publicSession); }, - async createSession(owner: BrowserUseOwner, options?: { createdBy?: 'user' | 'agent'; profileName?: string | null; agentAccessEnabled?: boolean }) { - const ownerId = getOwnerId(owner); + async createAgentSession(options?: { profileName?: string | null }) { + const settings = readSettings(); + if (!settings.enabled) { + throw new Error('Browser agent tools are disabled.'); + } + await expireStaleSessions(); - const createdBy = options?.createdBy ?? 'user'; const profileName = normalizeProfileName(options?.profileName); const now = new Date().toISOString(); const session: BrowserUseSession = { id: randomUUID(), - ownerId, - createdBy, + ownerId: AGENT_OWNER_ID, + createdBy: 'agent', runtime: getRuntime(), status: 'unavailable', url: null, @@ -619,18 +521,16 @@ export const browserUseService = { updatedAt: now, lastAction: 'create', message: null, - agentAccessEnabled: options?.agentAccessEnabled ?? createdBy === 'agent', profileName, viewport: { width: 1440, height: 900 }, cursor: null, }; - const activeOwnerSessions = ownerSessions(ownerId).filter((item) => item.status === 'ready'); + const activeOwnerSessions = ownerSessions(AGENT_OWNER_ID).filter((item) => item.status === 'ready'); if (activeOwnerSessions.length >= MAX_SESSIONS_PER_OWNER) { - throw new Error(`Browser Use is limited to ${MAX_SESSIONS_PER_OWNER} active sessions per user.`); + throw new Error(`Browser is limited to ${MAX_SESSIONS_PER_OWNER} active agent sessions.`); } - const settings = readSettings(); const readiness = getRuntimeReadiness(); if (!settings.enabled || !readiness.playwrightInstalled || !readiness.chromiumInstalled || !readiness.playwright) { session.message = getSetupMessage(settings, readiness); @@ -662,7 +562,6 @@ export const browserUseService = { context = await browser.newContext(contextOptions); page = await context.newPage(); } - await attachRequestGuard(context); session.status = 'ready'; session.message = 'Browser session is ready.'; sessions.set(session.id, session); @@ -671,70 +570,35 @@ export const browserUseService = { return publicSession(session); }, - async grantAgentAccess(owner: BrowserUseOwner, sessionId: string) { - const ownerId = getOwnerId(owner); - const session = sessions.get(sessionId); - if (!session || (session.ownerId !== ownerId && session.ownerId !== AGENT_OWNER_ID)) { - throw new Error('Browser session not found.'); - } - session.agentAccessEnabled = true; - session.updatedAt = new Date().toISOString(); - session.lastAction = 'agent_access:grant'; - return publicSession(session); - }, - - async revokeAgentAccess(owner: BrowserUseOwner, sessionId: string) { - const ownerId = getOwnerId(owner); - const session = sessions.get(sessionId); - if (!session || (session.ownerId !== ownerId && session.ownerId !== AGENT_OWNER_ID)) { - throw new Error('Browser session not found.'); - } - session.agentAccessEnabled = false; - session.updatedAt = new Date().toISOString(); - session.lastAction = 'agent_access:revoke'; - return publicSession(session); - }, - async listAgentSessions() { const settings = readSettings(); - if (!settings.enabled || !settings.agentToolsEnabled) { + if (!settings.enabled) { return []; } await expireStaleSessions(); return [...sessions.values()] - .filter((session) => session.agentAccessEnabled || session.ownerId === AGENT_OWNER_ID) + .filter((session) => session.ownerId === AGENT_OWNER_ID) .map(publicSession); }, - async createAgentSession(options?: { profileName?: string | null }) { - const settings = readSettings(); - if (!settings.enabled || !settings.agentToolsEnabled) { - throw new Error('Browser Use agent tools are disabled.'); - } - return this.createSession( - { id: AGENT_OWNER_ID }, - { createdBy: 'agent', profileName: options?.profileName, agentAccessEnabled: true }, - ); - }, - async getAgentSession(sessionId: string) { const settings = readSettings(); - if (!settings.enabled || !settings.agentToolsEnabled) { - throw new Error('Browser Use agent tools are disabled.'); + if (!settings.enabled) { + throw new Error('Browser agent tools are disabled.'); } const session = sessions.get(sessionId); - if (!session || (!session.agentAccessEnabled && session.ownerId !== AGENT_OWNER_ID)) { - throw new Error('Browser session is not shared with agents.'); + if (!session || session.ownerId !== AGENT_OWNER_ID) { + throw new Error('Browser session not found.'); } return session; }, - async navigate(owner: BrowserUseOwner, sessionId: string, rawUrl: string) { - const ownerId = getOwnerId(owner); + async agentNavigate(sessionId: string, rawUrl: string) { + await this.getAgentSession(sessionId); await expireStaleSessions(); const session = sessions.get(sessionId); - if (!session || !canAccessSession(ownerId, session)) { + if (!session || session.ownerId !== AGENT_OWNER_ID) { throw new Error('Browser session not found.'); } @@ -747,7 +611,7 @@ export const browserUseService = { throw new Error('Browser runtime handle is not available.'); } - const url = await normalizeUrl(rawUrl); + const url = normalizeUrl(rawUrl); await handle.page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30_000 }); session.lastAction = `navigate:${url}`; session.cursor = null; @@ -755,25 +619,6 @@ export const browserUseService = { return publicSession(session); }, - async agentNavigate(sessionId: string, rawUrl: string) { - await this.getAgentSession(sessionId); - return this.navigate({ id: AGENT_OWNER_ID }, sessionId, rawUrl).catch(async (error) => { - const session = await this.getAgentSession(sessionId); - if (session.ownerId !== AGENT_OWNER_ID) { - const url = await normalizeUrl(rawUrl); - const handle = handles.get(sessionId); - if (!handle?.page) { - throw new Error('Browser runtime handle is not available.'); - } - await handle.page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30_000 }); - session.lastAction = `navigate:${url}`; - await captureSession(session, handle.page); - return publicSession(session); - } - throw error; - }); - }, - async agentSnapshot(sessionId: string) { const session = await this.getAgentSession(sessionId); const handle = handles.get(sessionId); @@ -911,7 +756,6 @@ export const browserUseService = { if (action === 'new') { const page = await handle.context.newPage(); handles.set(sessionId, { ...handle, page }); - // Request guard is attached at the context level, so new pages are already covered. if (input.url) { await this.agentNavigate(sessionId, input.url); } @@ -942,10 +786,9 @@ export const browserUseService = { }; }, - async stopSession(owner: BrowserUseOwner, sessionId: string) { - const ownerId = getOwnerId(owner); + async stopSession(sessionId: string) { const session = sessions.get(sessionId); - if (!session || !canAccessSession(ownerId, session)) { + if (!session || session.ownerId !== AGENT_OWNER_ID) { return { stopped: false }; } @@ -958,10 +801,9 @@ export const browserUseService = { return { stopped: true, session: publicSession(session) }; }, - async deleteSession(owner: BrowserUseOwner, sessionId: string) { - const ownerId = getOwnerId(owner); + async deleteSession(sessionId: string) { const session = sessions.get(sessionId); - if (!session || !canAccessSession(ownerId, session)) { + if (!session || session.ownerId !== AGENT_OWNER_ID) { return { deleted: false }; } @@ -970,52 +812,9 @@ export const browserUseService = { return { deleted: true, sessionId }; }, - async userClick(owner: BrowserUseOwner, sessionId: string, input: { x: number; y: number }) { - const ownerId = getOwnerId(owner); - const session = sessions.get(sessionId); - if (!session || !canAccessSession(ownerId, session)) { - throw new Error('Browser session not found.'); - } - if (session.status !== 'ready') { - throw new Error(session.message || 'Browser session is not available.'); - } - - const handle = handles.get(sessionId); - if (!handle?.page) { - throw new Error('Browser runtime handle is not available.'); - } - - await handle.page.mouse.click(input.x, input.y); - session.lastAction = 'click'; - session.cursor = { x: input.x, y: input.y, actor: 'user' }; - await captureSession(session, handle.page); - return publicSession(session); - }, - - async userPressKey(owner: BrowserUseOwner, sessionId: string, key: string) { - const ownerId = getOwnerId(owner); - const session = sessions.get(sessionId); - if (!session || !canAccessSession(ownerId, session)) { - throw new Error('Browser session not found.'); - } - if (session.status !== 'ready') { - throw new Error(session.message || 'Browser session is not available.'); - } - - const handle = handles.get(sessionId); - if (!handle?.page) { - throw new Error('Browser runtime handle is not available.'); - } - - await handle.page.keyboard.press(key); - session.lastAction = `press_key:${key}`; - await captureSession(session, handle.page); - return publicSession(session); - }, - async agentStopSession(sessionId: string) { await this.getAgentSession(sessionId); - return this.stopSession({ id: AGENT_OWNER_ID }, sessionId); + return this.stopSession(sessionId); }, async stopAllSessions() { diff --git a/server/modules/browser-use/tests/browser-use.service.test.ts b/server/modules/browser-use/tests/browser-use.service.test.ts index 162e9439..b15365f1 100644 --- a/server/modules/browser-use/tests/browser-use.service.test.ts +++ b/server/modules/browser-use/tests/browser-use.service.test.ts @@ -1,30 +1,10 @@ import assert from 'node:assert/strict'; import test from 'node:test'; -import { browserUseService, isBlockedBrowserUseAddress } from '@/modules/browser-use/browser-use.service.js'; +import { browserUseService } from '@/modules/browser-use/browser-use.service.js'; -test('browser use blocks private and local network addresses by default', () => { - assert.equal(isBlockedBrowserUseAddress('127.0.0.1'), true); - assert.equal(isBlockedBrowserUseAddress('10.0.0.12'), true); - assert.equal(isBlockedBrowserUseAddress('172.16.4.8'), true); - assert.equal(isBlockedBrowserUseAddress('192.168.1.4'), true); - assert.equal(isBlockedBrowserUseAddress('169.254.169.254'), true); - assert.equal(isBlockedBrowserUseAddress('::1'), true); - assert.equal(isBlockedBrowserUseAddress('8.8.8.8'), false); - assert.equal(isBlockedBrowserUseAddress('2001:4860:4860::8888'), false); -}); - -test('browser use sessions are listed only for their owner', async () => { - const ownerA = { id: `owner-a-${Date.now()}-${Math.random()}` }; - const ownerB = { id: `owner-b-${Date.now()}-${Math.random()}` }; - - const ownerASession = await browserUseService.createSession(ownerA); - await browserUseService.createSession(ownerB); - - const ownerASessions = await browserUseService.listSessions(ownerA); - const ownerBSessions = await browserUseService.listSessions(ownerB); - - assert.equal(ownerASessions.some((session) => session.id === ownerASession.id), true); - assert.equal(ownerBSessions.some((session) => session.id === ownerASession.id), false); - assert.equal(Object.hasOwn(ownerASession, 'ownerId'), false); +test('browser monitor list starts empty without agent sessions', async () => { + const sessions = await browserUseService.listSessions(); + + assert.deepEqual(sessions, []); }); diff --git a/server/modules/providers/index.ts b/server/modules/providers/index.ts index 0d8d8edd..e057e200 100644 --- a/server/modules/providers/index.ts +++ b/server/modules/providers/index.ts @@ -1,5 +1,6 @@ export { sessionSynchronizerService } from './services/session-synchronizer.service.js'; export { providerSkillsService } from './services/skills.service.js'; +export { providerMcpService } from './services/mcp.service.js'; export { initializeSessionsWatcher } from './services/sessions-watcher.service.js'; export { closeSessionsWatcher } from './services/sessions-watcher.service.js'; diff --git a/server/modules/providers/services/mcp.service.ts b/server/modules/providers/services/mcp.service.ts index da7a5665..6e34e472 100644 --- a/server/modules/providers/services/mcp.service.ts +++ b/server/modules/providers/services/mcp.service.ts @@ -80,4 +80,30 @@ export const providerMcpService = { return results; }, + + /** + * Removes one MCP server from every provider. Mirrors `addMcpServerToAllProviders` + * by iterating the live provider registry, so callers stay in sync with which + * providers exist instead of maintaining their own provider list. + */ + async removeMcpServerFromAllProviders( + input: { name: string; scope?: McpScope; workspacePath?: string }, + ): Promise> { + const results: Array<{ provider: LLMProvider; removed: boolean; error?: string }> = []; + const providers = providerRegistry.listProviders(); + for (const provider of providers) { + try { + const result = await provider.mcp.removeServer(input); + results.push({ provider: provider.id, removed: result.removed }); + } catch (error) { + results.push({ + provider: provider.id, + removed: false, + error: error instanceof Error ? error.message : 'Unknown error', + }); + } + } + + return results; + }, }; diff --git a/src/components/app/AppContent.tsx b/src/components/app/AppContent.tsx index 8445a0b2..6cae890e 100644 --- a/src/components/app/AppContent.tsx +++ b/src/components/app/AppContent.tsx @@ -71,7 +71,6 @@ function AppContentInner() { setActiveTab, setSidebarOpen, setIsInputFocused, - setShowSettings, openSettings, refreshProjectsSilently, registerOptimisticSession, @@ -247,7 +246,7 @@ function AppContentInner() { onSessionEstablished={(targetSessionId, context) => registerOptimisticSession({ sessionId: targetSessionId, ...context }) } - onShowSettings={() => setShowSettings(true)} + onShowSettings={openSettings} externalMessageUpdate={externalMessageUpdate} newSessionTrigger={newSessionTrigger} /> diff --git a/src/components/browser-use/view/BrowserUsePanel.tsx b/src/components/browser-use/view/BrowserUsePanel.tsx index e0e6311c..b5b5f2a9 100644 --- a/src/components/browser-use/view/BrowserUsePanel.tsx +++ b/src/components/browser-use/view/BrowserUsePanel.tsx @@ -1,8 +1,23 @@ -import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent } from 'react'; -import { Bot, Download, Expand, ExternalLink, Globe, Loader2, MonitorPlay, Navigation, RefreshCw, Share2, Square, Trash2, X } from 'lucide-react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { + Bot, + Clock3, + Download, + Expand, + ExternalLink, + Loader2, + MonitorPlay, + RefreshCw, + Settings, + Square, + Trash2, + X, +} from 'lucide-react'; +import { cn } from '../../../lib/utils'; import { Badge, Button } from '../../../shared/view/ui'; import { authenticatedFetch } from '../../../utils/api'; +import type { SettingsMainTab } from '../../settings/types/types'; type BrowserUseStatus = { enabled: boolean; @@ -11,8 +26,6 @@ type BrowserUseStatus = { chromiumInstalled: boolean; installInProgress: boolean; sessionCount: number; - agentToolsEnabled: boolean; - mcpRecommended: boolean; message: string; }; @@ -26,8 +39,7 @@ type BrowserUseSession = { updatedAt: string; lastAction: string | null; message: string | null; - agentAccessEnabled: boolean; - createdBy: 'user' | 'agent'; + createdBy: 'agent'; profileName: string | null; viewport: { width: number; @@ -36,12 +48,13 @@ type BrowserUseSession = { cursor: { x: number; y: number; - actor: 'agent' | 'user'; + actor: 'agent'; } | null; }; type BrowserUsePanelProps = { isVisible: boolean; + onShowSettings?: (tab?: SettingsMainTab) => void; }; async function readJson(response: Response): Promise { @@ -52,48 +65,127 @@ async function readJson(response: Response): Promise { return data as T; } -export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) { +function formatRelativeTime(value: string | null): string { + if (!value) return 'Never'; + + const timestamp = Date.parse(value); + if (!Number.isFinite(timestamp)) return 'Unknown'; + + const elapsedSeconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000)); + if (elapsedSeconds < 10) return 'Just now'; + if (elapsedSeconds < 60) return `${elapsedSeconds}s ago`; + const elapsedMinutes = Math.round(elapsedSeconds / 60); + if (elapsedMinutes < 60) return `${elapsedMinutes}m ago`; + const elapsedHours = Math.round(elapsedMinutes / 60); + if (elapsedHours < 24) return `${elapsedHours}h ago`; + return `${Math.round(elapsedHours / 24)}d ago`; +} + +function getDomain(url: string | null): string { + if (!url) return 'No page loaded'; + + try { + return new URL(url).hostname; + } catch { + return url; + } +} + +function formatAction(action: string | null): string { + if (!action) return 'Waiting'; + return action.replace(/_/g, ' ').replace(/:/g, ': '); +} + +function getStatusTone(status: BrowserUseSession['status']): string { + if (status === 'ready') { + return 'border-primary/30 bg-primary/5 text-foreground'; + } + if (status === 'stopped') { + return 'border-border bg-muted text-muted-foreground'; + } + return 'border-border bg-background text-muted-foreground'; +} + +function getRuntimeTone(status: BrowserUseStatus | null, installing: boolean): string { + if (!status?.enabled) return 'border-border bg-muted text-muted-foreground'; + if (status.available) return 'border-primary/30 bg-primary/5 text-foreground'; + if (status.installInProgress || installing) return 'border-primary/30 bg-primary/5 text-foreground'; + return 'border-border bg-background text-muted-foreground'; +} + +function getStatusDot(status: BrowserUseSession['status']): string { + if (status === 'ready') return 'bg-primary'; + if (status === 'stopped') return 'bg-muted-foreground/50'; + return 'bg-border'; +} + +const PROMPTS = [ + 'Use Browser to inspect the checkout flow and report any broken UI states.', + 'Open with Browser, interact with the page, and summarize what changed after each step.', +]; + +export default function BrowserUsePanel({ isVisible, onShowSettings }: BrowserUsePanelProps) { const [status, setStatus] = useState(null); const [sessions, setSessions] = useState([]); const [selectedSessionId, setSelectedSessionId] = useState(null); - const [targetUrl, setTargetUrl] = useState('https://example.com'); + const [isRefreshing, setIsRefreshing] = useState(false); const [isBusy, setIsBusy] = useState(false); const [isInstalling, setIsInstalling] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); const [error, setError] = useState(null); - const viewerRef = useRef(null); const selectedSession = useMemo( () => sessions.find((session) => session.id === selectedSessionId) || sessions[0] || null, [selectedSessionId, sessions], ); + const activeSessions = sessions.filter((session) => session.status === 'ready'); + const needsBrowserBinaries = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled)); + const runtimeLabel = !status?.enabled + ? 'Disabled' + : status.available + ? 'Ready' + : status.installInProgress || isInstalling + ? 'Installing' + : 'Setup required'; + + const cursorStyle = selectedSession?.cursor && selectedSession.viewport + ? { + left: `${(selectedSession.cursor.x / selectedSession.viewport.width) * 100}%`, + top: `${(selectedSession.cursor.y / selectedSession.viewport.height) * 100}%`, + } + : null; + const refresh = useCallback(async () => { - const [statusResponse, sessionsResponse] = await Promise.all([ - authenticatedFetch('/api/browser-use/status'), - authenticatedFetch('/api/browser-use/sessions'), - ]); - const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse); - const sessionsData = await readJson<{ data: { sessions: BrowserUseSession[] } }>(sessionsResponse); - setStatus(statusData.data); - setSessions(sessionsData.data.sessions); - setSelectedSessionId((current) => ( - current && sessionsData.data.sessions.some((session) => session.id === current) - ? current - : sessionsData.data.sessions[0]?.id || null - )); + setIsRefreshing(true); + try { + const [statusResponse, sessionsResponse] = await Promise.all([ + authenticatedFetch('/api/browser-use/status'), + authenticatedFetch('/api/browser-use/sessions'), + ]); + const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse); + const sessionsData = await readJson<{ data: { sessions: BrowserUseSession[] } }>(sessionsResponse); + const nextSessions = sessionsData.data.sessions; + setStatus(statusData.data); + setSessions(nextSessions); + setSelectedSessionId((current) => ( + current && nextSessions.some((session) => session.id === current) + ? current + : nextSessions[0]?.id || null + )); + setError(null); + } catch (err) { + setError(err instanceof Error ? err.message : 'Failed to load Browser'); + } finally { + setIsRefreshing(false); + } }, []); useEffect(() => { if (!isVisible) return; - void refresh().catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser Use')); + void refresh(); }, [isVisible, refresh]); - useEffect(() => { - if (!selectedSession?.url) return; - setTargetUrl(selectedSession.url); - }, [selectedSession?.id, selectedSession?.url]); - const runAction = useCallback(async (action: () => Promise) => { setIsBusy(true); setError(null); @@ -101,29 +193,12 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) { await action(); await refresh(); } catch (err) { - setError(err instanceof Error ? err.message : 'Browser Use action failed'); + setError(err instanceof Error ? err.message : 'Browser action failed'); } finally { setIsBusy(false); } }, [refresh]); - const createSession = () => runAction(async () => { - const response = await authenticatedFetch('/api/browser-use/sessions', { method: 'POST' }); - const data = await readJson<{ data: { session: BrowserUseSession } }>(response); - setSelectedSessionId(data.data.session.id); - }); - - const navigate = () => runAction(async () => { - if (!selectedSession) { - throw new Error('Create a browser session first.'); - } - const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/navigate`, { - method: 'POST', - body: JSON.stringify({ url: targetUrl }), - }); - await readJson(response); - }); - const stopSession = () => runAction(async () => { if (!selectedSession) return; const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/stop`, { method: 'POST' }); @@ -137,18 +212,6 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) { setIsFullscreen(false); }); - const grantAgentAccess = () => runAction(async () => { - if (!selectedSession) return; - const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/agent-access/grant`, { method: 'POST' }); - await readJson(response); - }); - - const revokeAgentAccess = () => runAction(async () => { - if (!selectedSession) return; - const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/agent-access/revoke`, { method: 'POST' }); - await readJson(response); - }); - const installBrowserBinaries = () => runAction(async () => { setIsInstalling(true); try { @@ -159,80 +222,108 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) { } }); - const clickViewer = useCallback((event: MouseEvent) => { - if (!selectedSession || selectedSession.status !== 'ready' || !selectedSession.viewport) { - return; - } - viewerRef.current?.focus(); + const renderSessionItem = (session: BrowserUseSession) => { + const isSelected = selectedSession?.id === session.id; + return ( + + ); + }; - const bounds = event.currentTarget.getBoundingClientRect(); - const scaleX = selectedSession.viewport.width / bounds.width; - const scaleY = selectedSession.viewport.height / bounds.height; - const x = Math.round((event.clientX - bounds.left) * scaleX); - const y = Math.round((event.clientY - bounds.top) * scaleY); + const renderEmptyState = () => ( +
+
+
+
+ +
+
+
+ {status?.enabled ? 'No browser sessions yet' : 'Browser is disabled'} +
+

+ {status?.enabled + ? 'Agent browser sessions appear here while an AI task is using Browser.' + : 'Enable Browser in settings to let agents open monitored browser sessions.'} +

+
+
- void runAction(async () => { - const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/click`, { - method: 'POST', - body: JSON.stringify({ x, y }), - }); - await readJson(response); - }); - }, [runAction, selectedSession]); + {needsBrowserBinaries && ( +
+
Runtime setup required
+

{status?.message}

+ +
+ )} - const keyForEvent = useCallback((event: KeyboardEvent) => { - if (event.key === ' ') return 'Space'; - return event.key; - }, []); - - const pressViewerKey = useCallback((event: KeyboardEvent) => { - if (!selectedSession || selectedSession.status !== 'ready') { - return; - } - - const ignoredKeys = new Set(['Shift', 'Control', 'Alt', 'Meta', 'CapsLock']); - if (ignoredKeys.has(event.key)) { - return; - } - - event.preventDefault(); - const key = keyForEvent(event); - void runAction(async () => { - const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/press-key`, { - method: 'POST', - body: JSON.stringify({ key }), - }); - await readJson(response); - }); - }, [keyForEvent, runAction, selectedSession]); - - const needsBrowserBinaries = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled)); - - const cursorStyle = selectedSession?.cursor && selectedSession.viewport - ? { - left: `${(selectedSession.cursor.x / selectedSession.viewport.width) * 100}%`, - top: `${(selectedSession.cursor.y / selectedSession.viewport.height) * 100}%`, - } - : null; +
+ {PROMPTS.map((prompt) => ( +
+
+ + Prompt +
+

{prompt}

+
+ ))} +
+
+
+ ); const renderBrowserSurface = (fullscreen = false) => ( -
+
{selectedSession?.screenshotDataUrl ? (
Browser session screenshot {cursorStyle && (
@@ -240,14 +331,10 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) { )}
) : ( -
- -
- {selectedSession?.message || 'Create a browser session to start.'} -
-

- Install browser binaries from this panel or enable Browser Use from Settings. -

+
+ +
{selectedSession?.message || 'Waiting for screenshot'}
+

The next agent browser snapshot will render here.

)}
@@ -255,171 +342,184 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) { return (
-
+
-

Browser Use

+

Browser

+ + {runtimeLabel} +
-

- Create browser sessions, watch agent activity, and decide which sessions agents may control. -

+

Monitor browser sessions opened by AI agents.

-
-
- - -
-
- setTargetUrl(event.target.value)} - className="h-9 min-w-[220px] flex-1 rounded-md border border-input bg-background px-3 text-sm outline-none focus:ring-1 focus:ring-ring" - placeholder="https://example.com" - /> - - {selectedSession?.agentAccessEnabled ? ( - - ) : ( - - )} - - - -
- - {error && ( -
- {error}
)} +
-
-
-
- - {selectedSession?.url || 'No page loaded'} - {selectedSession?.agentAccessEnabled && ( - - - Agent access active - - )} +
+ {isFullscreen && selectedSession && (
-
+
{selectedSession.title || selectedSession.url || 'Browser session'}
- + {!managed && ( +
+ + +
+ )}
-
- ))} + ); + })} {!isLoading && !isLoadingProjectScopes && servers.length === 0 && (
{t('mcpServers.empty')}
diff --git a/src/components/settings/constants/constants.ts b/src/components/settings/constants/constants.ts index 37fa9df3..8e5bfebe 100644 --- a/src/components/settings/constants/constants.ts +++ b/src/components/settings/constants/constants.ts @@ -33,7 +33,7 @@ export const SETTINGS_MAIN_TABS: SettingsMainTabMeta[] = [ { id: 'git', label: 'Git', keywords: 'git github commits', icon: GitBranch }, { id: 'api', label: 'API Tokens', keywords: 'api tokens auth keys', icon: KeyRound }, { id: 'tasks', label: 'Tasks', keywords: 'tasks taskmaster', icon: ListChecks }, - { id: 'browser', label: 'Browser Use', keywords: 'browser use playwright chromium automation', icon: MonitorPlay }, + { id: 'browser', label: 'Browser', keywords: 'browser playwright chromium automation', icon: MonitorPlay }, { id: 'notifications', label: 'Notifications', keywords: 'notifications alerts push', icon: Bell }, { id: 'plugins', label: 'Plugins', keywords: 'plugins extensions integrations', icon: Plug }, { id: 'about', label: 'About', keywords: 'about version info', icon: Info }, diff --git a/src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx b/src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx index c109918f..da94ffe2 100644 --- a/src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx +++ b/src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; -import { Download, ExternalLink, Loader2 } from 'lucide-react'; +import { Download, Loader2 } from 'lucide-react'; import { Button } from '../../../../../shared/view/ui'; import { authenticatedFetch } from '../../../../../utils/api'; @@ -10,7 +10,6 @@ import SettingsToggle from '../../SettingsToggle'; type BrowserUseSettings = { enabled: boolean; - agentToolsEnabled: boolean; }; type BrowserUseStatus = { @@ -19,7 +18,6 @@ type BrowserUseStatus = { playwrightInstalled: boolean; chromiumInstalled: boolean; installInProgress: boolean; - agentToolsEnabled: boolean; message: string; }; @@ -32,31 +30,39 @@ async function readJson(response: Response): Promise { } export default function BrowserUseSettingsTab() { - const [settings, setSettings] = useState({ enabled: false, agentToolsEnabled: false }); + const [settings, setSettings] = useState(null); const [status, setStatus] = useState(null); - const [isLoading, setIsLoading] = useState(true); + const [isSettingsLoading, setIsSettingsLoading] = useState(true); + const [isStatusLoading, setIsStatusLoading] = useState(true); const [isSaving, setIsSaving] = useState(false); const [isInstalling, setIsInstalling] = useState(false); const [error, setError] = useState(null); - const loadState = useCallback(async () => { - setError(null); - const [settingsResponse, statusResponse] = await Promise.all([ - authenticatedFetch('/api/browser-use/settings'), - authenticatedFetch('/api/browser-use/status'), - ]); + const loadSettings = useCallback(async () => { + const settingsResponse = await authenticatedFetch('/api/browser-use/settings'); const settingsData = await readJson<{ data: { settings: BrowserUseSettings } }>(settingsResponse); - const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse); setSettings(settingsData.data.settings); + }, []); + + const loadStatus = useCallback(async () => { + const statusResponse = await authenticatedFetch('/api/browser-use/status'); + const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse); setStatus(statusData.data); }, []); useEffect(() => { - setIsLoading(true); - void loadState() - .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser Use settings')) - .finally(() => setIsLoading(false)); - }, [loadState]); + setError(null); + setIsSettingsLoading(true); + setIsStatusLoading(true); + + void loadSettings() + .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser settings')) + .finally(() => setIsSettingsLoading(false)); + + void loadStatus() + .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser status')) + .finally(() => setIsStatusLoading(false)); + }, [loadSettings, loadStatus]); const updateSettings = async (nextSettings: Partial) => { setIsSaving(true); @@ -69,10 +75,12 @@ export default function BrowserUseSettingsTab() { const data = await readJson<{ data: { settings: BrowserUseSettings } }>(response); setSettings(data.data.settings); window.dispatchEvent(new Event('browserUseSettingsChanged')); - await loadState(); + setIsStatusLoading(true); + await loadStatus(); } catch (err) { - setError(err instanceof Error ? err.message : 'Failed to save Browser Use settings'); + setError(err instanceof Error ? err.message : 'Failed to save Browser settings'); } finally { + setIsStatusLoading(false); setIsSaving(false); } }; @@ -83,108 +91,93 @@ export default function BrowserUseSettingsTab() { try { const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' }); await readJson(response); - await loadState(); + setIsStatusLoading(true); + await loadStatus(); } catch (err) { - setError(err instanceof Error ? err.message : 'Failed to install browser binaries'); + setError(err instanceof Error ? err.message : 'Failed to install browser runtime'); } finally { + setIsStatusLoading(false); setIsInstalling(false); } }; - const needsBrowserBinaries = Boolean(settings.enabled && status && (!status.playwrightInstalled || !status.chromiumInstalled)); + const browserEnabled = settings?.enabled === true; + const needsBrowserBinaries = Boolean(browserEnabled && status && (!status.playwrightInstalled || !status.chromiumInstalled)); + const runtimeLabel = (installed?: boolean) => { + if (isStatusLoading && !status) { + return 'checking...'; + } + return installed ? 'installed' : 'missing'; + }; return (
-
-
-
How Browser Use Works
-

- Learn what agents can do with browser sessions, when to share access, and what the current limitations are. -

+ + {isSettingsLoading && !settings ? ( + + ) : ( + void updateSettings({ enabled: value })} + ariaLabel="Enable Browser" + disabled={isSaving} + /> + )} + + +
+
+ + Playwright: {runtimeLabel(status?.playwrightInstalled)} + + + Chromium: {runtimeLabel(status?.chromiumInstalled)} + + + Status: {isStatusLoading && !status ? 'checking...' : status?.available ? 'ready' : browserEnabled ? 'setup required' : 'disabled'} +
- - Open Guide - - + + {needsBrowserBinaries && ( +
+
+
Browser runtime required
+

+ {status?.message || 'Install the browser runtime before agents can create Browser sessions.'} +

+
+ + +
+ )} + + {error && ( +
+ {error} +
+ )}
- - - void updateSettings({ enabled: value })} - ariaLabel="Enable Browser Use" - disabled={isLoading || isSaving} - /> - - - - void updateSettings({ agentToolsEnabled: value })} - ariaLabel="Enable Browser Tools for Agents" - disabled={isLoading || isSaving || !settings.enabled} - /> - - - {(needsBrowserBinaries || error) && ( -
- {needsBrowserBinaries && ( -
-
-
Browser binaries required
-

- {status?.message || 'Install the browser binaries needed to create Browser Use sessions.'} -

-
- - Playwright: {status?.playwrightInstalled ? 'installed' : 'missing'} - - - Chromium: {status?.chromiumInstalled ? 'installed' : 'missing'} - -
-
- - -
- )} - - {error && ( -
- {error} -
- )} -
- )}
diff --git a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx index b024be30..ef1c7178 100644 --- a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx +++ b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx @@ -69,7 +69,7 @@ export default function SidebarFooter({ onClick={onShowVersionModal} >
- +
@@ -145,12 +145,12 @@ export default function SidebarFooter({ href={GITHUB_ISSUES_URL} target="_blank" rel="noopener noreferrer" - className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]" + className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]" > -
- +
+
- {t('actions.reportIssue')} + {t('actions.reportIssue')}
@@ -160,25 +160,25 @@ export default function SidebarFooter({ href={DISCORD_INVITE_URL} target="_blank" rel="noopener noreferrer" - className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]" + className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]" > -
- +
+
- {t('actions.joinCommunity')} + {t('actions.joinCommunity')}
{/* Mobile settings */}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json index 41865212..71bf1a78 100644 --- a/src/i18n/locales/en/settings.json +++ b/src/i18n/locales/en/settings.json @@ -94,7 +94,7 @@ "git": "Git", "apiTokens": "API & Tokens", "tasks": "Tasks", - "browser": "Browser Use", + "browser": "Browser", "computer": "Computer Use", "notifications": "Notifications", "plugins": "Plugins", @@ -452,6 +452,10 @@ "edit": "Edit server", "delete": "Delete server" }, + "managed": { + "badge": "Managed", + "hint": "Managed by CloudCLI." + }, "help": { "title": "About Codex MCP", "description": "Codex supports stdio-based MCP servers. You can add servers that extend Codex's capabilities with additional tools and resources."