feat: make browser use opt-in

server/modules/browser-use/browser-use.service.ts

@@ -61,7 +61,7 @@ let installPromise: Promise<{ success: boolean; message: string }> | null = null
 let lastInstallMessage: string | null = null;
 
 const DEFAULT_SETTINGS: BrowserUseSettings = {
-  enabled: true,
+  enabled: false,
 };
 
 function getRuntime(): BrowserUseRuntime {
@@ -77,7 +77,7 @@ function readSettings(): BrowserUseSettings {
 
     const parsed = JSON.parse(raw) as Partial<BrowserUseSettings>;
     return {
-      enabled: parsed.enabled !== false,
+      enabled: parsed.enabled === true,
     };
   } catch (error: any) {
     console.warn('[Browser Use] Failed to read settings:', error?.message || error);
@@ -87,7 +87,7 @@ function readSettings(): BrowserUseSettings {
 
 function writeSettings(settings: BrowserUseSettings): BrowserUseSettings {
   const normalized = {
-    enabled: settings.enabled !== false,
+    enabled: settings.enabled === true,
   };
 
   appConfigDb.set(BROWSER_USE_SETTINGS_KEY, JSON.stringify(normalized));
@@ -168,6 +168,14 @@ function runCommand(command: string, args: string[]): Promise<void> {
   });
 }
 
+function formatInstallError(error: unknown): string {
+  const message = error instanceof Error ? error.message : String(error);
+  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.';
+}
+
 async function installRuntime(): Promise<{ success: boolean; message: string }> {
   if (installPromise) {
     return installPromise;
@@ -179,13 +187,18 @@ async function installRuntime(): Promise<{ success: boolean; message: string }>
       lastInstallMessage = 'Installing Playwright package...';
       await runCommand(npmCommand, ['install', '--no-save', '--no-package-lock', 'playwright']);
 
+      if (process.platform === 'linux') {
+        lastInstallMessage = 'Installing Chromium system dependencies...';
+        await runCommand(npmCommand, ['exec', '--', 'playwright', 'install-deps', 'chromium']);
+      }
+
       lastInstallMessage = 'Installing Chromium runtime...';
       await runCommand(npmCommand, ['exec', '--', 'playwright', 'install', 'chromium']);
 
       lastInstallMessage = 'Browser Use runtime installed.';
       return { success: true, message: lastInstallMessage };
     } catch (error) {
-      lastInstallMessage = error instanceof Error ? error.message : 'Failed to install Browser Use runtime.';
+      lastInstallMessage = formatInstallError(error);
       return { success: false, message: lastInstallMessage };
     }
   })();
@@ -359,7 +372,7 @@ export const browserUseService = {
     const current = readSettings();
     return writeSettings({
       ...current,
-      enabled: settings.enabled ?? current.enabled,
+      enabled: typeof settings.enabled === 'boolean' ? settings.enabled : current.enabled,
     });
   },
 

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;
 };

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';
@@ -11,6 +11,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';
@@ -56,8 +57,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,
@@ -91,6 +94,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');
@@ -114,6 +139,7 @@ function MainContent({
         selectedProject={selectedProject}
         selectedSession={selectedSession}
         shouldShowTasksTab={shouldShowTasksTab}
+        shouldShowBrowserTab={shouldShowBrowserTab}
         isMobile={isMobile}
         onMenuClick={onMenuClick}
       />
@@ -172,7 +198,7 @@ function MainContent({
 
           {shouldShowTasksTab && <TaskMasterPanel isVisible={activeTab === 'tasks'} />}
 
-          {activeTab === 'browser' && (
+          {shouldShowBrowserTab && activeTab === 'browser' && (
             <div className="h-full overflow-hidden">
               <BrowserUsePanel isVisible={activeTab === 'browser'} />
             </div>

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 && (

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,9 +36,15 @@ 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 },
 ];
 
+const BROWSER_TAB: BuiltInTab = {
+  kind: 'builtin',
+  id: 'browser',
+  labelKey: 'tabs.browser',
+  icon: MonitorPlay,
+};
+
 const TASKS_TAB: BuiltInTab = {
   kind: 'builtin',
   id: 'tasks',
@@ -49,11 +56,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)

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

@@ -31,7 +31,7 @@ async function readJson<T>(response: Response): Promise<T> {
 }
 
 export default function BrowserUseSettingsTab() {
-  const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: true });
+  const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: false });
   const [status, setStatus] = useState<BrowserUseStatus | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
@@ -67,6 +67,7 @@ export default function BrowserUseSettingsTab() {
       });
       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');