d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-06-18 06:12:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(browser-use): simplify agent session monitoring

Browse Source
This commit is contained in:
Simos Mikelatos
2026-06-17 17:04:11 +00:00
parent a0d56429a7
commit 086df034b4
7 changed files with 301 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
server/modules/browser-use/browser-use.routes.ts
View File

@@ -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 || '';
}
@@ -56,18 +42,6 @@ router.put('/settings', async (req, res) => {
}
});
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.',
});
}
});
router.post('/runtime/install', async (_req, res) => {
try {
const result = await browserUseService.installRuntime();
@@ -84,9 +58,9 @@ router.post('/runtime/install', async (_req, res) => {
}
});
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({

194
server/modules/browser-use/browser-use.service.ts
View File

@@ -8,7 +8,7 @@ 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);
@@ -26,7 +26,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 +36,6 @@ type BrowserUseSession = {
updatedAt: string;
lastAction: string | null;
message: string | null;
agentAccessEnabled: boolean;
profileName: string | null;
viewport: {
width: number;
@@ -45,7 +44,7 @@ type BrowserUseSession = {
cursor: {
x: number;
y: number;
actor: 'agent' | 'user';
actor: 'agent';
} | null;
};
@@ -57,13 +56,8 @@ type RuntimeHandle = {
page?: any;
};
type BrowserUseOwner = {
id: string | number;
};
type BrowserUseSettings = {
enabled: boolean;
agentToolsEnabled: boolean;
};
type RuntimeReadiness = {
@@ -82,7 +76,6 @@ let lastInstallMessage: string | 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');
@@ -103,7 +96,6 @@ function readSettings(): BrowserUseSettings {
const parsed = JSON.parse(raw) as Partial<BrowserUseSettings>;
return {
enabled: parsed.enabled === true,
agentToolsEnabled: parsed.agentToolsEnabled === true,
};
} catch (error: any) {
console.warn('[Browser Use] Failed to read settings:', error?.message || error);
@@ -114,7 +106,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));
@@ -244,7 +235,6 @@ function runCommand(command: string, args: string[]): Promise<void> {
fn();
};
// Guard against a stuck npm/playwright process hanging the install request forever.
const timer = setTimeout(() => {
child.kill('SIGKILL');
finish(() => reject(new Error(
@@ -309,14 +299,6 @@ async function installRuntime(): Promise<{ success: boolean; message: string }>
}
}
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)) {
@@ -410,8 +392,6 @@ async function assertAllowedBrowserRequest(rawUrl: string): Promise<void> {
}
async function attachRequestGuard(context: any): Promise<void> {
// 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());
@@ -431,10 +411,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<void> {
const handle = handles.get(sessionId);
handles.delete(sessionId);
@@ -504,21 +480,15 @@ export const browserUseService = {
async updateSettings(settings: Partial<BrowserUseSettings>) {
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,8 +506,6 @@ 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.'
: getSetupMessage(settings, readiness),
@@ -591,25 +559,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 Use 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 +589,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 Use 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);
@@ -671,70 +639,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) {
if (!settings.enabled) {
throw new Error('Browser Use 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.');
}
@@ -755,25 +688,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 +825,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 +855,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 +870,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 +881,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() {

15
server/modules/browser-use/tests/browser-use.service.test.ts
View File

@@ -14,17 +14,8 @@ test('browser use blocks private and local network addresses by default', () =>
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()}` };
test('browser use monitor list starts empty without agent sessions', async () => {
const sessions = await browserUseService.listSessions();
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);
assert.deepEqual(sessions, []);
});

1
server/modules/providers/index.ts
View File

@@ -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';

424
src/components/browser-use/view/BrowserUsePanel.tsx
View File

@@ -1,5 +1,5 @@
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 { Badge, Button } from '../../../shared/view/ui';
import { authenticatedFetch } from '../../../utils/api';
@@ -11,8 +11,6 @@ type BrowserUseStatus = {
chromiumInstalled: boolean;
installInProgress: boolean;
sessionCount: number;
agentToolsEnabled: boolean;
mcpRecommended: boolean;
message: string;
};
@@ -26,8 +24,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 +33,13 @@ type BrowserUseSession = {
cursor: {
x: number;
y: number;
actor: 'agent' | 'user';
actor: 'agent';
} | null;
};
type BrowserUsePanelProps = {
isVisible: boolean;
onShowSettings?: () => void;
};
async function readJson<T>(response: Response): Promise<T> {
@@ -52,16 +50,69 @@ async function readJson<T>(response: Response): Promise<T> {
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-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300';
}
if (status === 'stopped') {
return 'border-border bg-muted text-muted-foreground';
}
return 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300';
}
const PROMPTS = [
'Use Browser Use to open the staging checkout flow, try the main path, and summarize anything that looks broken.',
'Use Browser Use to inspect the page at <url>, capture what changed after each click, and report UI issues with screenshots.',
];
export default function BrowserUsePanel({ isVisible, onShowSettings }: BrowserUsePanelProps) {
const [status, setStatus] = useState<BrowserUseStatus | null>(null);
const [sessions, setSessions] = useState<BrowserUseSession[]>([]);
const [selectedSessionId, setSelectedSessionId] = useState<string | null>(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<string | null>(null);
const viewerRef = useRef<HTMLDivElement | null>(null);
const selectedSession = useMemo(
() => sessions.find((session) => session.id === selectedSessionId) || sessions[0] || null,
@@ -69,31 +120,35 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
);
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 Use');
} 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<void>) => {
setIsBusy(true);
setError(null);
@@ -107,23 +162,6 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
}
}, [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 +175,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,54 +185,16 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
}
});
const clickViewer = useCallback((event: MouseEvent<HTMLImageElement>) => {
if (!selectedSession || selectedSession.status !== 'ready' || !selectedSession.viewport) {
return;
}
viewerRef.current?.focus();
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);
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]);
const keyForEvent = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
if (event.key === ' ') return 'Space';
return event.key;
}, []);
const pressViewerKey = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
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 activeSessions = sessions.filter((session) => session.status === 'ready');
const inactiveSessions = sessions.filter((session) => session.status !== 'ready');
const statusLabel = !status?.enabled
? 'Disabled'
: status.available
? 'Ready'
: status.installInProgress || isInstalling
? 'Installing'
: 'Setup required';
const cursorStyle = selectedSession?.cursor && selectedSession.viewport
? {
@@ -215,20 +203,37 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
}
: null;
const renderBrowserSurface = (fullscreen = false) => (
<div
ref={viewerRef}
tabIndex={selectedSession?.status === 'ready' ? 0 : -1}
onKeyDown={pressViewerKey}
className={`flex min-h-[360px] flex-1 items-center justify-center bg-neutral-950 outline-none ${fullscreen ? 'min-h-[80vh]' : ''}`}
const renderSessionItem = (session: BrowserUseSession) => (
<button
key={session.id}
type="button"
onClick={() => setSelectedSessionId(session.id)}
className={`w-full rounded-md border px-3 py-2 text-left text-sm transition-colors ${selectedSession?.id === session.id
? 'border-primary/50 bg-primary/10 text-foreground'
: 'border-border/60 bg-card/30 text-muted-foreground hover:bg-muted/50'
}`}
>
<div className="flex items-center justify-between gap-2">
<span className="truncate font-medium">{session.title || getDomain(session.url)}</span>
<Badge variant="outline" className={`text-[10px] ${getStatusTone(session.status)}`}>{session.status}</Badge>
</div>
<div className="mt-1 truncate text-xs">{session.url || session.message || session.id}</div>
<div className="mt-2 flex items-center gap-1.5 text-[11px] text-muted-foreground">
<Clock3 className="h-3 w-3" />
<span>{formatRelativeTime(session.updatedAt)}</span>
{session.lastAction && <span className="truncate">- {formatAction(session.lastAction)}</span>}
</div>
</button>
);
const renderBrowserSurface = (fullscreen = false) => (
<div className={`flex min-h-[360px] flex-1 items-center justify-center bg-neutral-950 ${fullscreen ? 'min-h-[80vh]' : ''}`}>
{selectedSession?.screenshotDataUrl ? (
<div className="relative inline-block max-h-full">
<img
src={selectedSession.screenshotDataUrl}
alt="Browser session screenshot"
className={fullscreen ? 'block max-h-[80vh] w-auto max-w-full object-contain' : 'block max-h-[70vh] w-auto max-w-full object-contain'}
onClick={clickViewer}
/>
{cursorStyle && (
<div
@@ -243,10 +248,10 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
<div className="max-w-md px-6 text-center">
<MonitorPlay className="mx-auto h-10 w-10 text-neutral-500" />
<div className="mt-3 text-sm font-medium text-neutral-100">
{selectedSession?.message || 'Create a browser session to start.'}
{selectedSession?.message || 'No browser screenshot yet.'}
</div>
<p className="mt-2 text-xs leading-relaxed text-neutral-400">
Install browser binaries from this panel or enable Browser Use from Settings.
Agent-created browser sessions appear here after the agent starts using Browser Use.
</p>
</div>
)}
@@ -260,48 +265,47 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
<div className="flex items-center gap-2">
<MonitorPlay className="h-4 w-4 text-primary" />
<h3 className="text-sm font-semibold text-foreground">Browser Use</h3>
<Badge variant="outline" className="text-[10px]">{statusLabel}</Badge>
</div>
<p className="mt-0.5 text-xs text-muted-foreground">
Create browser sessions, watch agent activity, and decide which sessions agents may control.
Watch browser sessions created by AI agents and stop them when needed.
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<a
href="https://cloudcli.ai/docs/user-guide/browser-use"
target="_blank"
rel="noreferrer"
className="inline-flex h-9 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
<div className="flex items-center gap-1.5">
{onShowSettings && (
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
onClick={onShowSettings}
title="Open Browser Use settings"
aria-label="Open Browser Use settings"
>
<Settings className="h-3.5 w-3.5" />
</Button>
)}
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
onClick={() => void refresh()}
disabled={isRefreshing || isBusy}
title="Refresh browser sessions"
aria-label="Refresh browser sessions"
>
Guide
<ExternalLink className="h-4 w-4" />
</a>
<Button variant="outline" size="sm" onClick={() => void refresh()} disabled={isBusy}>
<RefreshCw className="h-4 w-4" />
Refresh
</Button>
<Button size="sm" onClick={createSession} disabled={isBusy || !status?.available}>
<Globe className="h-4 w-4" />
New Session
<RefreshCw className={`h-3.5 w-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
</Button>
</div>
</div>
<div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)]">
<aside className="border-b border-border/60 p-3 lg:border-b-0 lg:border-r">
<div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[320px_minmax(0,1fr)]">
<aside className="min-h-0 overflow-y-auto border-b border-border/60 p-3 lg:border-b-0 lg:border-r">
{needsBrowserBinaries && (
<div className="rounded-lg border border-border/70 bg-card/40 p-3">
<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Browser binaries required</div>
<div className="mb-3 rounded-md border border-border/70 bg-card/40 p-3">
<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Runtime required</div>
<p className="mt-2 text-xs leading-relaxed text-muted-foreground">
{status?.message || 'Install the browser binaries needed to create Browser Use sessions.'}
{status?.message || 'Install the browser runtime before agents can create sessions.'}
</p>
<div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
<span className="rounded-md border border-border px-2 py-1">
Playwright: {status?.playwrightInstalled ? 'installed' : 'missing'}
</span>
<span className="rounded-md border border-border px-2 py-1">
Chromium: {status?.chromiumInstalled ? 'installed' : 'missing'}
</span>
</div>
<Button
type="button"
size="sm"
@@ -314,72 +318,72 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
) : (
<Download className="h-4 w-4" />
)}
{isInstalling || status?.installInProgress ? 'Installing…' : 'Install Binaries'}
{isInstalling || status?.installInProgress ? 'Installing...' : 'Install Runtime'}
</Button>
</div>
)}
<div className="mt-3 space-y-2">
<div className="rounded-lg border border-border/70 bg-muted/30 p-3 text-xs leading-relaxed text-muted-foreground">
Agents can create their own browser sessions when browser tools are enabled. Use
<span className="font-medium text-foreground"> Give Agent Access </span>
to let agents control a session you created, and revoke access whenever you want.
<div className="rounded-md border border-border/70 bg-muted/30 p-3">
<div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
<Bot className="h-3.5 w-3.5" />
Prompt ideas
</div>
{sessions.map((session) => (
<button
key={session.id}
type="button"
onClick={() => setSelectedSessionId(session.id)}
className={`w-full rounded-lg border px-3 py-2 text-left text-sm transition-colors ${selectedSession?.id === session.id
? 'border-primary/50 bg-primary/10 text-foreground'
: 'border-border/60 bg-card/30 text-muted-foreground hover:bg-muted/50'
}`}
>
<div className="flex items-center justify-between gap-2">
<span className="truncate font-medium">{session.title || session.url || 'Browser session'}</span>
<Badge variant="outline" className="text-[10px]">{session.status}</Badge>
<div className="mt-2 space-y-2">
{PROMPTS.map((prompt) => (
<div key={prompt} className="rounded-md border border-border/60 bg-background/70 px-2.5 py-2 text-xs leading-relaxed text-muted-foreground">
{prompt}
</div>
<div className="mt-1 flex flex-wrap gap-1">
{session.agentAccessEnabled && (
<span className="rounded border border-emerald-500/30 px-1.5 py-0.5 text-[10px] text-emerald-600 dark:text-emerald-300">
shared
</span>
)}
</div>
<div className="mt-1 truncate text-xs">{session.url || session.message || session.id}</div>
</button>
))}
{sessions.length === 0 && (
<div className="rounded-lg border border-dashed border-border/70 px-3 py-8 text-center text-xs text-muted-foreground">
No browser sessions yet.
))}
</div>
</div>
<div className="mt-3 space-y-3">
<section>
<div className="mb-2 flex items-center justify-between px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
<span>Active</span>
<span>{activeSessions.length}</span>
</div>
<div className="space-y-2">
{activeSessions.map(renderSessionItem)}
{activeSessions.length === 0 && (
<div className="rounded-md border border-dashed border-border/70 px-3 py-6 text-center text-xs text-muted-foreground">
No active agent sessions.
</div>
)}
</div>
</section>
{inactiveSessions.length > 0 && (
<section>
<div className="mb-2 flex items-center justify-between px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
<span>Inactive</span>
<span>{inactiveSessions.length}</span>
</div>
<div className="space-y-2">
{inactiveSessions.map(renderSessionItem)}
</div>
</section>
)}
</div>
</aside>
<main className="flex min-h-0 flex-col">
{error && (
<div className="border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
{error}
</div>
)}
<div className="flex flex-wrap items-center gap-2 border-b border-border/60 px-3 py-2">
<input
value={targetUrl}
onChange={(event) => 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"
/>
<Button variant="outline" size="sm" onClick={navigate} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'}>
<Navigation className="h-4 w-4" />
Go
</Button>
{selectedSession?.agentAccessEnabled ? (
<Button variant="outline" size="sm" onClick={revokeAgentAccess} disabled={isBusy || !selectedSession}>
<X className="h-4 w-4" />
Revoke Agent
</Button>
) : (
<Button variant="outline" size="sm" onClick={grantAgentAccess} disabled={isBusy || !selectedSession || !status?.agentToolsEnabled}>
<Share2 className="h-4 w-4" />
Give Agent Access
</Button>
)}
<div className="min-w-0 flex-1">
<div className="truncate text-sm font-medium text-foreground">
{selectedSession?.title || getDomain(selectedSession?.url || null)}
</div>
<div className="mt-0.5 flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
<ExternalLink className="h-3.5 w-3.5 flex-shrink-0" />
<span className="truncate">{selectedSession?.url || 'No page loaded'}</span>
</div>
</div>
<Button variant="outline" size="sm" onClick={() => setIsFullscreen(true)} disabled={!selectedSession?.screenshotDataUrl}>
<Expand className="h-4 w-4" />
Full Screen
@@ -394,32 +398,24 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
</Button>
</div>
{error && (
<div className="border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
{error}
</div>
)}
<div className="min-h-0 flex-1 overflow-auto bg-muted/20 p-4">
<div className="mx-auto flex min-h-[420px] max-w-6xl flex-col overflow-hidden rounded-lg border border-border bg-background shadow-sm">
<div className="flex items-center gap-2 border-b border-border/60 px-3 py-2 text-xs text-muted-foreground">
<ExternalLink className="h-3.5 w-3.5" />
<span className="truncate">{selectedSession?.url || 'No page loaded'}</span>
{selectedSession?.agentAccessEnabled && (
<span className="ml-auto inline-flex items-center gap-1 rounded border border-emerald-500/30 px-2 py-0.5 text-emerald-600 dark:text-emerald-300">
<Bot className="h-3.5 w-3.5" />
Agent access active
</span>
)}
<div className="mx-auto flex min-h-[420px] max-w-6xl flex-col overflow-hidden rounded-md border border-border bg-background shadow-sm">
<div className="flex flex-wrap items-center gap-2 border-b border-border/60 px-3 py-2 text-xs text-muted-foreground">
<Badge variant="outline" className={selectedSession ? `text-[10px] ${getStatusTone(selectedSession.status)}` : 'text-[10px]'}>
{selectedSession?.status || 'empty'}
</Badge>
<span className="truncate">Last action: {formatAction(selectedSession?.lastAction || null)}</span>
<span className="ml-auto whitespace-nowrap">Updated {formatRelativeTime(selectedSession?.updatedAt || null)}</span>
</div>
{renderBrowserSurface()}
</div>
</div>
</main>
</div>
{isFullscreen && selectedSession && (
<div className="fixed inset-0 z-50 bg-black/90 p-6">
<div className="flex h-full flex-col rounded-lg border border-white/10 bg-black">
<div className="flex h-full flex-col rounded-md border border-white/10 bg-black">
<div className="flex items-center justify-between border-b border-white/10 px-4 py-3 text-sm text-white/80">
<div className="min-w-0 truncate">{selectedSession.title || selectedSession.url || 'Browser session'}</div>
<Button variant="outline" size="sm" onClick={() => setIsFullscreen(false)}>

2
src/components/main-content/view/MainContent.tsx
View File

@@ -200,7 +200,7 @@ function MainContent({
{shouldShowBrowserTab && activeTab === 'browser' && (
<div className="h-full overflow-hidden">
<BrowserUsePanel isVisible={activeTab === 'browser'} />
<BrowserUsePanel isVisible={activeTab === 'browser'} onShowSettings={onShowSettings} />
</div>
)}

128
src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx
View File

@@ -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,7 +30,7 @@ async function readJson<T>(response: Response): Promise<T> {
}
export default function BrowserUseSettingsTab() {
const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: false, agentToolsEnabled: false });
const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: false });
const [status, setStatus] = useState<BrowserUseStatus | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
@@ -85,7 +83,7 @@ export default function BrowserUseSettingsTab() {
await readJson(response);
await loadState();
} 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 {
setIsInstalling(false);
}
@@ -97,30 +95,12 @@ export default function BrowserUseSettingsTab() {
<div className="space-y-8">
<SettingsSection
title="Browser Use"
description="Manage local Playwright browser sessions used for captured browser screenshots and guarded navigation."
description="Allow agents to create guarded Playwright browser sessions that you can monitor from the Browser Use tab."
>
<SettingsCard divided>
<div className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0">
<div className="text-sm font-medium text-foreground">How Browser Use Works</div>
<p className="mt-0.5 text-sm text-muted-foreground">
Learn what agents can do with browser sessions, when to share access, and what the current limitations are.
</p>
</div>
<a
href="https://cloudcli.ai/docs/user-guide/browser-use"
target="_blank"
rel="noreferrer"
className="inline-flex h-9 flex-shrink-0 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
>
Open Guide
<ExternalLink className="h-4 w-4" />
</a>
</div>
<SettingsRow
label="Enable Browser Use"
description="Allow CloudCLI to create owner-scoped Playwright browser sessions."
description="Registers Browser Use for supported agents. Agents can create browser sessions; you can watch, stop, and delete them."
>
<SettingsToggle
checked={settings.enabled}
@@ -130,61 +110,51 @@ export default function BrowserUseSettingsTab() {
/>
</SettingsRow>
<SettingsRow
label="Enable Browser Tools for Agents"
description="Register the Browser Use MCP server for all agent providers. Agents can create browser sessions and control sessions shared with agents."
>
<SettingsToggle
checked={settings.agentToolsEnabled}
onChange={(value) => void updateSettings({ agentToolsEnabled: value })}
ariaLabel="Enable Browser Tools for Agents"
disabled={isLoading || isSaving || !settings.enabled}
/>
</SettingsRow>
{(needsBrowserBinaries || error) && (
<div className="space-y-4 px-4 py-4">
{needsBrowserBinaries && (
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="min-w-0 space-y-1">
<div className="text-sm font-medium text-foreground">Browser binaries required</div>
<p className="text-sm text-muted-foreground">
{status?.message || 'Install the browser binaries needed to create Browser Use sessions.'}
</p>
<div className="flex flex-wrap gap-2 pt-1 text-xs text-muted-foreground">
<span className="rounded-md border border-border px-2 py-1">
Playwright: {status?.playwrightInstalled ? 'installed' : 'missing'}
</span>
<span className="rounded-md border border-border px-2 py-1">
Chromium: {status?.chromiumInstalled ? 'installed' : 'missing'}
</span>
</div>
</div>
<Button
type="button"
size="sm"
onClick={() => void installBrowserBinaries()}
disabled={isInstalling || status?.installInProgress}
className="flex-shrink-0"
>
{isInstalling || status?.installInProgress ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Download className="h-4 w-4" />
)}
{isInstalling || status?.installInProgress ? 'Installing…' : 'Install Binaries'}
</Button>
</div>
)}
{error && (
<div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
{error}
</div>
)}
<div className="space-y-4 px-4 py-4">
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
<span className="rounded-md border border-border px-2 py-1">
Playwright: {status?.playwrightInstalled ? 'installed' : 'missing'}
</span>
<span className="rounded-md border border-border px-2 py-1">
Chromium: {status?.chromiumInstalled ? 'installed' : 'missing'}
</span>
<span className="rounded-md border border-border px-2 py-1">
Status: {status?.available ? 'ready' : settings.enabled ? 'setup required' : 'disabled'}
</span>
</div>
)}
{needsBrowserBinaries && (
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="min-w-0 space-y-1">
<div className="text-sm font-medium text-foreground">Browser runtime required</div>
<p className="text-sm text-muted-foreground">
{status?.message || 'Install the browser runtime before agents can create Browser Use sessions.'}
</p>
</div>
<Button
type="button"
size="sm"
onClick={() => void installBrowserBinaries()}
disabled={isInstalling || status?.installInProgress}
className="flex-shrink-0"
>
{isInstalling || status?.installInProgress ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Download className="h-4 w-4" />
)}
{isInstalling || status?.installInProgress ? 'Installing...' : 'Install Runtime'}
</Button>
</div>
)}
{error && (
<div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
{error}
</div>
)}
</div>
</SettingsCard>
</SettingsSection>
</div>