Merge branch 'browser-use' into electron-app

# Conflicts: # src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
2026-06-19 15:32:05 +08:00 · 2026-06-16 06:51:35 +00:00
parent daac6e3fd3 56532af33a
commit 7aeca52669
19 changed files with 1845 additions and 103 deletions
--- a/src/components/browser-use/view/BrowserUsePanel.tsx
+++ b/src/components/browser-use/view/BrowserUsePanel.tsx
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ExternalLink, Globe, MonitorPlay, Navigation, Pause, RefreshCw, Square } from 'lucide-react';
+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 { Badge, Button } from '../../../shared/view/ui';
 import { authenticatedFetch } from '../../../utils/api';
@@ -7,15 +7,17 @@ import { authenticatedFetch } from '../../../utils/api';
 type BrowserUseStatus = {
  enabled: boolean;
  available: boolean;
-  runtime: 'cloud' | 'local';
+  playwrightInstalled: boolean;
+  chromiumInstalled: boolean;
+  installInProgress: boolean;
  sessionCount: number;
+  agentToolsEnabled: boolean;
  mcpRecommended: boolean;
  message: string;
 };

 type BrowserUseSession = {
  id: string;
-  runtime: 'cloud' | 'local';
  status: 'ready' | 'stopped' | 'unavailable';
  url: string | null;
  title: string | null;
@@ -24,6 +26,18 @@ type BrowserUseSession = {
  updatedAt: string;
  lastAction: string | null;
  message: string | null;
+  agentAccessEnabled: boolean;
+  createdBy: 'user' | 'agent';
+  profileName: string | null;
+  viewport: {
+    width: number;
+    height: number;
+  } | null;
+  cursor: {
+    x: number;
+    y: number;
+    actor: 'agent' | 'user';
+  } | null;
 };

 type BrowserUsePanelProps = {
@@ -44,7 +58,10 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
  const [targetUrl, setTargetUrl] = useState('https://example.com');
  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,
@@ -72,6 +89,11 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
    void refresh().catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser Use'));
  }, [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);
@@ -108,6 +130,129 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
    await readJson(response);
  });

+  const deleteSession = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}`, { method: 'DELETE' });
+    await readJson(response);
+    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 {
+      const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
+      await readJson(response);
+    } finally {
+      setIsInstalling(false);
+    }
+  });
+
+  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 cursorStyle = selectedSession?.cursor && selectedSession.viewport
+    ? {
+      left: `${(selectedSession.cursor.x / selectedSession.viewport.width) * 100}%`,
+      top: `${(selectedSession.cursor.y / selectedSession.viewport.height) * 100}%`,
+    }
+    : 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]' : ''}`}
+    >
+      {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
+              className="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white/90 bg-sky-500/80 shadow-[0_0_0_6px_rgba(14,165,233,0.18)]"
+              style={cursorStyle}
+            >
+              <div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+            </div>
+          )}
+        </div>
+      ) : (
+        <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.'}
+          </div>
+          <p className="mt-2 text-xs leading-relaxed text-neutral-400">
+            Install browser binaries from this panel or enable Browser Use from Settings.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+
  return (
    <div className="flex h-full min-h-0 flex-col bg-background">
      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
@@ -115,22 +260,26 @@ 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>
-            {status && (
-              <Badge variant="outline" className="text-[11px]">
-                {status.runtime}
-              </Badge>
-            )}
          </div>
          <p className="mt-0.5 text-xs text-muted-foreground">
-            Managed Playwright browser sessions with owner-scoped screenshots and navigation.
+            Create browser sessions, watch agent activity, and decide which sessions agents may control.
          </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"
+          >
+            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}>
+          <Button size="sm" onClick={createSession} disabled={isBusy || !status?.available}>
            <Globe className="h-4 w-4" />
            New Session
          </Button>
@@ -139,13 +288,43 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {

      <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="rounded-lg border border-border/70 bg-card/40 p-3">
-            <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Runtime</div>
-            <div className="mt-2 text-sm text-foreground">{status?.available ? 'Available' : 'Setup required'}</div>
-            <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{status?.message || 'Loading Browser Use status...'}</p>
-          </div>
+          {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>
+              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                {status?.message || 'Install the browser binaries needed to create Browser Use 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"
+                className="mt-3 w-full"
+                onClick={installBrowserBinaries}
+                disabled={isBusy || isInstalling || status?.installInProgress}
+              >
+                {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>
+          )}

          <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>
            {sessions.map((session) => (
              <button
                key={session.id}
@@ -160,6 +339,13 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
                  <span className="truncate font-medium">{session.title || session.url || 'Browser session'}</span>
                  <Badge variant="outline" className="text-[10px]">{session.status}</Badge>
                </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>
            ))}
@@ -183,14 +369,29 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
              <Navigation className="h-4 w-4" />
              Go
            </Button>
-            <Button variant="outline" size="sm" disabled>
-              <Pause className="h-4 w-4" />
-              Pause
+            {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>
+            )}
+            <Button variant="outline" size="sm" onClick={() => setIsFullscreen(true)} disabled={!selectedSession?.screenshotDataUrl}>
+              <Expand className="h-4 w-4" />
+              Full Screen
            </Button>
-            <Button variant="outline" size="sm" onClick={stopSession} disabled={isBusy || !selectedSession}>
+            <Button variant="outline" size="sm" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'}>
              <Square className="h-4 w-4" />
              Stop
            </Button>
+            <Button variant="outline" size="sm" onClick={deleteSession} disabled={isBusy || !selectedSession}>
+              <Trash2 className="h-4 w-4" />
+              Delete
+            </Button>
          </div>

          {error && (
@@ -204,30 +405,32 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
              <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>
-              </div>
-              <div className="flex min-h-[360px] flex-1 items-center justify-center bg-neutral-950">
-                {selectedSession?.screenshotDataUrl ? (
-                  <img
-                    src={selectedSession.screenshotDataUrl}
-                    alt="Browser session screenshot"
-                    className="h-full max-h-[70vh] w-full object-contain"
-                  />
-                ) : (
-                  <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.'}
-                    </div>
-                    <p className="mt-2 text-xs leading-relaxed text-neutral-400">
-                      This panel shows captured browser screenshots. Interactive agent control should use the guarded Browser Use API.
-                    </p>
-                  </div>
+                {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>
+              {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 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)}>
+                <X className="h-4 w-4" />
+                Close
+              </Button>
+            </div>
+            {renderBrowserSurface(true)}
+          </div>
+        </div>
+      )}
    </div>
  );
 }
--- a/src/components/main-content/types/types.ts
+++ b/src/components/main-content/types/types.ts
@@ -64,6 +64,7 @@ export type MainContentHeaderProps = {
  selectedProject: Project;
  selectedSession: ProjectSession | null;
  shouldShowTasksTab: boolean;
+  shouldShowBrowserTab: boolean;
  isMobile: boolean;
  onMenuClick: () => void;
 };
--- a/src/components/main-content/view/MainContent.tsx
+++ b/src/components/main-content/view/MainContent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';

 import ChatInterface from '../../chat/view/ChatInterface';
 import FileTree from '../../file-tree/view/FileTree';
@@ -12,6 +12,7 @@ import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { usePaletteOpsRegister } from '../../../contexts/PaletteOpsContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
+import { authenticatedFetch } from '../../../utils/api';
 import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
 import EditorSidebar from '../../code-editor/view/EditorSidebar';
 import type { Project } from '../../../types/app';
@@ -57,8 +58,10 @@ function MainContent({

  const { currentProject, setCurrentProject } = useTaskMaster() as TaskMasterContextValue;
  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings() as TasksSettingsContextValue;
+  const [browserUseEnabled, setBrowserUseEnabled] = useState(false);

  const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
+  const shouldShowBrowserTab = browserUseEnabled;

  const {
    editingFile,
@@ -92,6 +95,28 @@ function MainContent({
    }
  }, [shouldShowTasksTab, activeTab, setActiveTab]);

+  const loadBrowserUseSettings = useCallback(async () => {
+    try {
+      const response = await authenticatedFetch('/api/browser-use/settings');
+      const data = await response.json();
+      setBrowserUseEnabled(Boolean(response.ok && data?.success !== false && data?.data?.settings?.enabled));
+    } catch {
+      setBrowserUseEnabled(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadBrowserUseSettings();
+    window.addEventListener('browserUseSettingsChanged', loadBrowserUseSettings);
+    return () => window.removeEventListener('browserUseSettingsChanged', loadBrowserUseSettings);
+  }, [loadBrowserUseSettings]);
+
+  useEffect(() => {
+    if (!shouldShowBrowserTab && activeTab === 'browser') {
+      setActiveTab('chat');
+    }
+  }, [shouldShowBrowserTab, activeTab, setActiveTab]);
+
  usePaletteOpsRegister({
    openFile: (filePath: string) => {
      setActiveTab('files');
@@ -115,6 +140,7 @@ function MainContent({
        selectedProject={selectedProject}
        selectedSession={selectedSession}
        shouldShowTasksTab={shouldShowTasksTab}
+        shouldShowBrowserTab={shouldShowBrowserTab}
        isMobile={isMobile}
        onMenuClick={onMenuClick}
      />
@@ -173,7 +199,7 @@ function MainContent({

          {shouldShowTasksTab && <TaskMasterPanel isVisible={activeTab === 'tasks'} />}

-          {activeTab === 'browser' && (
+          {shouldShowBrowserTab && activeTab === 'browser' && (
            <div className="h-full overflow-hidden">
              <BrowserUsePanel isVisible={activeTab === 'browser'} />
            </div>
--- a/src/components/main-content/view/subcomponents/MainContentHeader.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentHeader.tsx
@@ -10,6 +10,7 @@ export default function MainContentHeader({
  selectedProject,
  selectedSession,
  shouldShowTasksTab,
+  shouldShowBrowserTab,
  isMobile,
  onMenuClick,
 }: MainContentHeaderProps) {
@@ -59,6 +60,7 @@ export default function MainContentHeader({
              activeTab={activeTab}
              setActiveTab={setActiveTab}
              shouldShowTasksTab={shouldShowTasksTab}
+              shouldShowBrowserTab={shouldShowBrowserTab}
            />
          </div>
          {canScrollRight && (
--- a/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
@@ -11,6 +11,7 @@ type MainContentTabSwitcherProps = {
  activeTab: AppTab;
  setActiveTab: Dispatch<SetStateAction<AppTab>>;
  shouldShowTasksTab: boolean;
+  shouldShowBrowserTab: boolean;
 };

 type BuiltInTab = {
@@ -35,10 +36,16 @@ const BASE_TABS: BuiltInTab[] = [
  { kind: 'builtin', id: 'shell', labelKey: 'tabs.shell', icon: Terminal },
  { kind: 'builtin', id: 'files', labelKey: 'tabs.files', icon: Folder },
  { kind: 'builtin', id: 'git',   labelKey: 'tabs.git',   icon: GitBranch },
-  { kind: 'builtin', id: 'browser', labelKey: 'tabs.browser', icon: MonitorPlay },
  { kind: 'builtin', id: 'computer', labelKey: 'tabs.computer', icon: MonitorCog },
 ];

+const BROWSER_TAB: BuiltInTab = {
+  kind: 'builtin',
+  id: 'browser',
+  labelKey: 'tabs.browser',
+  icon: MonitorPlay,
+};
+
 const TASKS_TAB: BuiltInTab = {
  kind: 'builtin',
  id: 'tasks',
@@ -50,11 +57,16 @@ export default function MainContentTabSwitcher({
  activeTab,
  setActiveTab,
  shouldShowTasksTab,
+  shouldShowBrowserTab,
 }: MainContentTabSwitcherProps) {
  const { t } = useTranslation();
  const { plugins } = usePlugins();

-  const builtInTabs: BuiltInTab[] = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;
+  const builtInTabs: BuiltInTab[] = [
+    ...BASE_TABS,
+    ...(shouldShowBrowserTab ? [BROWSER_TAB] : []),
+    ...(shouldShowTasksTab ? [TASKS_TAB] : []),
+  ];

  const pluginTabs: PluginTab[] = plugins
    .filter((p) => p.enabled)
--- a/src/components/settings/constants/constants.ts
+++ b/src/components/settings/constants/constants.ts
@@ -6,6 +6,7 @@ import {
  Info,
  KeyRound,
  ListChecks,
+  MonitorPlay,
  Palette,
  Plug,
 } from 'lucide-react';
@@ -32,6 +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: '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 },
--- a/src/components/settings/hooks/useSettingsController.ts
+++ b/src/components/settings/hooks/useSettingsController.ts
@@ -54,7 +54,7 @@ type NotificationPreferencesResponse = {

 type ActiveLoginProvider = AgentProvider | '';

-const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'notifications', 'plugins'];
+const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'browser', 'notifications', 'plugins', 'about'];

 const normalizeMainTab = (tab: string): SettingsMainTab => {
  // Keep backwards compatibility with older callers that still pass "tools".
--- a/src/components/settings/types/types.ts
+++ b/src/components/settings/types/types.ts
@@ -3,7 +3,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { LLMProvider } from '../../../types/app';
 import type { ProviderAuthStatus } from '../../provider-auth/types';

-export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'notifications' | 'plugins' | 'about';
+export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'browser' | 'notifications' | 'plugins' | 'about';
 export type AgentProvider = LLMProvider;
 export type AgentCategory = 'account' | 'permissions' | 'mcp';
 export type ProjectSortOrder = 'name' | 'date';
--- a/src/components/settings/view/Settings.tsx
+++ b/src/components/settings/view/Settings.tsx
@@ -7,6 +7,7 @@ import AgentsSettingsTab from '../view/tabs/agents-settings/AgentsSettingsTab';
 import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
 import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
 import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
+import BrowserUseSettingsTab from '../view/tabs/browser-use-settings/BrowserUseSettingsTab';
 import NotificationsSettingsTab from '../view/tabs/NotificationsSettingsTab';
 import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
 import PluginSettingsTab from '../../plugins/view/PluginSettingsTab';
@@ -139,17 +140,19 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set

              {activeTab === 'tasks' && <TasksSettingsTab />}

-            {activeTab === 'notifications' && (
-              <NotificationsSettingsTab
-                notificationPreferences={notificationPreferences}
-                onNotificationPreferencesChange={setNotificationPreferences}
-                pushPermission={pushPermission}
-                isPushSubscribed={isPushSubscribed}
-                isPushLoading={isPushLoading}
-                onEnablePush={handleEnablePush}
-                onDisablePush={handleDisablePush}
-              />
-            )}
+              {activeTab === 'browser' && <BrowserUseSettingsTab />}
+
+              {activeTab === 'notifications' && (
+                <NotificationsSettingsTab
+                  notificationPreferences={notificationPreferences}
+                  onNotificationPreferencesChange={setNotificationPreferences}
+                  pushPermission={pushPermission}
+                  isPushSubscribed={isPushSubscribed}
+                  isPushLoading={isPushLoading}
+                  onEnablePush={handleEnablePush}
+                  onDisablePush={handleDisablePush}
+                />
+              )}

              {activeTab === 'api' && <CredentialsSettingsTab />}

--- a/src/components/settings/view/SettingsSidebar.tsx
+++ b/src/components/settings/view/SettingsSidebar.tsx
@@ -1,4 +1,4 @@
-import { Bell, Bot, GitBranch, Info, Key, ListChecks, Palette, Puzzle } from 'lucide-react';
+import { Bell, Bot, GitBranch, Info, Key, ListChecks, MonitorPlay, Palette, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils';
 import { PillBar, Pill } from '../../../shared/view/ui';
@@ -21,6 +21,7 @@ const NAV_ITEMS: NavItem[] = [
  { id: 'git', labelKey: 'mainTabs.git', icon: GitBranch },
  { id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
  { id: 'tasks', labelKey: 'mainTabs.tasks', icon: ListChecks },
+  { id: 'browser', labelKey: 'mainTabs.browser', icon: MonitorPlay },
  { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
  { id: 'notifications', labelKey: 'mainTabs.notifications', icon: Bell },
  { id: 'about', labelKey: 'mainTabs.about', icon: Info },
--- a/src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx
+++ b/src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx
@@ -0,0 +1,192 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Download, ExternalLink, Loader2 } from 'lucide-react';
+
+import { Button } from '../../../../../shared/view/ui';
+import { authenticatedFetch } from '../../../../../utils/api';
+import SettingsCard from '../../SettingsCard';
+import SettingsRow from '../../SettingsRow';
+import SettingsSection from '../../SettingsSection';
+import SettingsToggle from '../../SettingsToggle';
+
+type BrowserUseSettings = {
+  enabled: boolean;
+  agentToolsEnabled: boolean;
+};
+
+type BrowserUseStatus = {
+  enabled: boolean;
+  available: boolean;
+  playwrightInstalled: boolean;
+  chromiumInstalled: boolean;
+  installInProgress: boolean;
+  agentToolsEnabled: boolean;
+  message: string;
+};
+
+async function readJson<T>(response: Response): Promise<T> {
+  const data = await response.json();
+  if (!response.ok || data.success === false) {
+    throw new Error(data.error || data.details || `Request failed (${response.status})`);
+  }
+  return data as T;
+}
+
+export default function BrowserUseSettingsTab() {
+  const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: false, agentToolsEnabled: false });
+  const [status, setStatus] = useState<BrowserUseStatus | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadState = useCallback(async () => {
+    setError(null);
+    const [settingsResponse, statusResponse] = await Promise.all([
+      authenticatedFetch('/api/browser-use/settings'),
+      authenticatedFetch('/api/browser-use/status'),
+    ]);
+    const settingsData = await readJson<{ data: { settings: BrowserUseSettings } }>(settingsResponse);
+    const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
+    setSettings(settingsData.data.settings);
+    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]);
+
+  const updateSettings = async (nextSettings: Partial<BrowserUseSettings>) => {
+    setIsSaving(true);
+    setError(null);
+    try {
+      const response = await authenticatedFetch('/api/browser-use/settings', {
+        method: 'PUT',
+        body: JSON.stringify(nextSettings),
+      });
+      const data = await readJson<{ data: { settings: BrowserUseSettings } }>(response);
+      setSettings(data.data.settings);
+      window.dispatchEvent(new Event('browserUseSettingsChanged'));
+      await loadState();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save Browser Use settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const installBrowserBinaries = async () => {
+    setIsInstalling(true);
+    setError(null);
+    try {
+      const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
+      await readJson(response);
+      await loadState();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to install browser binaries');
+    } finally {
+      setIsInstalling(false);
+    }
+  };
+
+  const needsBrowserBinaries = Boolean(settings.enabled && status && (!status.playwrightInstalled || !status.chromiumInstalled));
+
+  return (
+    <div className="space-y-8">
+      <SettingsSection
+        title="Browser Use"
+        description="Manage local Playwright browser sessions used for captured browser screenshots and guarded navigation."
+      >
+        <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."
+          >
+            <SettingsToggle
+              checked={settings.enabled}
+              onChange={(value) => void updateSettings({ enabled: value })}
+              ariaLabel="Enable Browser Use"
+              disabled={isLoading || isSaving}
+            />
+          </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>
+          )}
+        </SettingsCard>
+      </SettingsSection>
+    </div>
+  );
+}