back to setting modal

- Move browser control toggle from settings form to browser tab
- Add toggle in browser tab header next to URL
- Keep same functionality but improve discoverability

frontend/__tests__/services/settings.test.ts

@@ -22,7 +22,8 @@ describe("getSettings", () => {
       .mockReturnValueOnce("language_value")
       .mockReturnValueOnce("api_key")
       .mockReturnValueOnce("true")
-      .mockReturnValueOnce("invariant");
+      .mockReturnValueOnce("invariant")
+      .mockReturnValueOnce("true");
 
     const settings = getSettings();
 
@@ -34,6 +35,7 @@ describe("getSettings", () => {
       LLM_API_KEY: "api_key",
       CONFIRMATION_MODE: true,
       SECURITY_ANALYZER: "invariant",
+      ENABLE_BROWSING: true,
     });
   });
 
@@ -58,6 +60,7 @@ describe("getSettings", () => {
       LLM_BASE_URL: DEFAULT_SETTINGS.LLM_BASE_URL,
       CONFIRMATION_MODE: DEFAULT_SETTINGS.CONFIRMATION_MODE,
       SECURITY_ANALYZER: DEFAULT_SETTINGS.SECURITY_ANALYZER,
+      ENABLE_BROWSING: DEFAULT_SETTINGS.ENABLE_BROWSING,
     });
   });
 });
@@ -72,6 +75,7 @@ describe("saveSettings", () => {
       LLM_API_KEY: "some_key",
       CONFIRMATION_MODE: true,
       SECURITY_ANALYZER: "invariant",
+      ENABLE_BROWSING: true,
     };
 
     saveSettings(settings);

frontend/src/components/Browser.tsx

@@ -1,16 +1,24 @@
 import { useTranslation } from "react-i18next";
 import { IoIosGlobe } from "react-icons/io";
 import { useSelector } from "react-redux";
+import { Switch } from "@nextui-org/react";
+import clsx from "clsx";
 import { I18nKey } from "#/i18n/declaration";
 import { RootState } from "#/store";
+import { getSettings, saveSettings } from "#/services/settings";
 
 function BrowserPanel() {
   const { t } = useTranslation();
+  const settings = getSettings();
 
   const { url, screenshotSrc } = useSelector(
     (state: RootState) => state.browser,
   );
 
+  const handleBrowserToggle = (enabled: boolean) => {
+    saveSettings({ ...settings, ENABLE_BROWSING: enabled });
+  };
+
   const imgSrc =
     screenshotSrc && screenshotSrc.startsWith("data:image/png;base64,")
       ? screenshotSrc
@@ -22,7 +30,18 @@ function BrowserPanel() {
         {url}
       </div>
       <div className="overflow-y-auto grow scrollbar-hide rounded-xl">
-        {screenshotSrc ? (
+        {!settings.ENABLE_BROWSING ? (
+          <div className="flex flex-col items-center h-full justify-center gap-4 text-center px-4">
+            <IoIosGlobe size={100} />
+            <div>
+              <p className="text-lg mb-2">Browser Control is Disabled</p>
+              <p className="text-sm text-neutral-500">
+                Browser control is an experimental feature that allows the AI assistant to interact with web browsers.
+                To enable it, go to Settings and enable Browser Control.
+              </p>
+            </div>
+          </div>
+        ) : screenshotSrc ? (
           <img
             src={imgSrc}
             style={{ objectFit: "contain", width: "100%", height: "auto" }}

frontend/src/components/form/settings-form.tsx

@@ -249,6 +249,25 @@ export function SettingsForm({
             </p>
           </fieldset>
 
+          <Switch
+            isDisabled={disabled}
+            name="enable-browsing"
+            defaultSelected={settings.ENABLE_BROWSING}
+            classNames={{
+              thumb: clsx(
+                "bg-[#5D5D5D] w-3 h-3",
+                "group-data-[selected=true]:bg-white",
+              ),
+              wrapper: clsx(
+                "border border-[#D4D4D4] bg-white px-[6px] w-12 h-6",
+                "group-data-[selected=true]:border-transparent group-data-[selected=true]:bg-[#4465DB]",
+              ),
+              label: "text-[#A3A3A3] text-xs",
+            }}
+          >
+            Browser Control (Experimental)
+          </Switch>
+
           {showAdvancedOptions && (
             <fieldset
               data-testid="agent-selector"

frontend/src/routes/settings.ts

@@ -50,11 +50,13 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
   let baseUrl: string | undefined;
   let confirmationMode = false;
   let securityAnalyzer: string | undefined;
+  let enableBrowsing = true;
 
   if (isUsingAdvancedOptions) {
     customModel = formData.get("custom-model")?.toString();
     baseUrl = formData.get("base-url")?.toString();
     confirmationMode = keys.includes("confirmation-mode");
+    enableBrowsing = keys.includes("enable-browsing");
     if (confirmationMode) {
       // only set securityAnalyzer if confirmationMode is enabled
       securityAnalyzer = formData.get("security-analyzer")?.toString();
@@ -80,6 +82,7 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
     LLM_BASE_URL,
     CONFIRMATION_MODE,
     SECURITY_ANALYZER,
+    ENABLE_BROWSING: enableBrowsing,
   };
 
   saveSettings(settings);

frontend/src/services/settings.ts

@@ -8,6 +8,7 @@ export type Settings = {
   LLM_API_KEY: string;
   CONFIRMATION_MODE: boolean;
   SECURITY_ANALYZER: string;
+  ENABLE_BROWSING: boolean;
 };
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -18,6 +19,7 @@ export const DEFAULT_SETTINGS: Settings = {
   LLM_API_KEY: "",
   CONFIRMATION_MODE: false,
   SECURITY_ANALYZER: "",
+  ENABLE_BROWSING: false,
 };
 
 const validKeys = Object.keys(DEFAULT_SETTINGS) as (keyof Settings)[];
@@ -71,6 +73,7 @@ export const getSettings = (): Settings => {
   const apiKey = localStorage.getItem("LLM_API_KEY");
   const confirmationMode = localStorage.getItem("CONFIRMATION_MODE") === "true";
   const securityAnalyzer = localStorage.getItem("SECURITY_ANALYZER");
+  const enableBrowsing = localStorage.getItem("ENABLE_BROWSING") === "true"; // Default to false if not set
 
   return {
     LLM_MODEL: model || DEFAULT_SETTINGS.LLM_MODEL,
@@ -80,6 +83,7 @@ export const getSettings = (): Settings => {
     LLM_API_KEY: apiKey || DEFAULT_SETTINGS.LLM_API_KEY,
     CONFIRMATION_MODE: confirmationMode || DEFAULT_SETTINGS.CONFIRMATION_MODE,
     SECURITY_ANALYZER: securityAnalyzer || DEFAULT_SETTINGS.SECURITY_ANALYZER,
+    ENABLE_BROWSING: enableBrowsing,
   };
 };
 

openhands/core/config/agent_config.py

@@ -19,7 +19,7 @@ class AgentConfig:
     """
 
     function_calling: bool = True
-    codeact_enable_browsing: bool = True
+    codeact_enable_browsing: bool = False
     codeact_enable_llm_editor: bool = False
     codeact_enable_jupyter: bool = True
     micro_agent_name: str | None = None

openhands/core/schema/config.py

@@ -47,3 +47,4 @@ class ConfigType(str, Enum):
     WORKSPACE_MOUNT_PATH = 'WORKSPACE_MOUNT_PATH'
     WORKSPACE_MOUNT_PATH_IN_SANDBOX = 'WORKSPACE_MOUNT_PATH_IN_SANDBOX'
     WORKSPACE_MOUNT_REWRITE = 'WORKSPACE_MOUNT_REWRITE'
+    ENABLE_BROWSING = 'ENABLE_BROWSING'

openhands/server/session/session.py

@@ -89,6 +89,10 @@ class Session:
             ConfigType.SECURITY_ANALYZER, self.config.security.security_analyzer
         )
         max_iterations = args.get(ConfigType.MAX_ITERATIONS, self.config.max_iterations)
+        
+        # Get agent config and update browsing setting
+        agent_config = self.config.get_agent_config(agent_cls)
+        agent_config.codeact_enable_browsing = args.get('ENABLE_BROWSING', False)
         # override default LLM config
         default_llm_config = self.config.get_llm_config()
         default_llm_config.model = args.get(
@@ -104,7 +108,6 @@ class Session:
         # TODO: override other LLM config & agent config groups (#2075)
 
         llm = LLM(config=self.config.get_llm_config_from_agent(agent_cls))
-        agent_config = self.config.get_agent_config(agent_cls)
         agent = Agent.get_cls(agent_cls)(llm, agent_config)
 
         # Create the agent session