Fix the browser operator provider settings

Author: tysonthomas9

front_end/panels/ai_chat/BUILD.gn

@@ -55,6 +55,7 @@ devtools_module("ai_chat") {
     "ui/settings/providers/LiteLLMSettings.ts",
     "ui/settings/providers/GroqSettings.ts",
     "ui/settings/providers/OpenRouterSettings.ts",
+    "ui/settings/providers/BrowserOperatorSettings.ts",
     "ui/settings/advanced/MCPSettings.ts",
     "ui/settings/advanced/BrowsingHistorySettings.ts",
     "ui/settings/advanced/VectorDBSettings.ts",
@@ -248,6 +249,7 @@ _ai_chat_sources = [
     "ui/settings/providers/LiteLLMSettings.ts",
     "ui/settings/providers/GroqSettings.ts",
     "ui/settings/providers/OpenRouterSettings.ts",
+    "ui/settings/providers/BrowserOperatorSettings.ts",
     "ui/settings/advanced/MCPSettings.ts",
     "ui/settings/advanced/BrowsingHistorySettings.ts",
     "ui/settings/advanced/VectorDBSettings.ts",

front_end/panels/ai_chat/ui/SettingsDialog.ts

@@ -21,6 +21,7 @@ import { OpenAISettings } from './settings/providers/OpenAISettings.js';
 import { LiteLLMSettings } from './settings/providers/LiteLLMSettings.js';
 import { GroqSettings } from './settings/providers/GroqSettings.js';
 import { OpenRouterSettings } from './settings/providers/OpenRouterSettings.js';
+import { BrowserOperatorSettings } from './settings/providers/BrowserOperatorSettings.js';
 
 // Import advanced feature settings classes
 import { MCPSettings } from './settings/advanced/MCPSettings.js';
@@ -193,18 +194,27 @@ export class SettingsDialog {
       () => dialog.hide()
     );
 
+    const browseroperatorSettings = new BrowserOperatorSettings(
+      browseroperatorContent,
+      getModelOptions,
+      addCustomModelOption,
+      removeCustomModelOption
+    );
+
     // Render all providers (only visible one will be shown)
     openaiSettings.render();
     litellmSettings.render();
     groqSettings.render();
     openrouterSettings.render();
+    browseroperatorSettings.render();
 
     // Store provider settings for later access
     const providerSettings = new Map<ProviderType, any>([
       ['openai', openaiSettings],
       ['litellm', litellmSettings],
       ['groq', groqSettings],
       ['openrouter', openrouterSettings],
+      ['browseroperator', browseroperatorSettings],
     ]);
 
     // Event listener for provider change
@@ -296,19 +306,19 @@ export class SettingsDialog {
 
     // Add Advanced Settings Toggle
     const advancedToggleContainer = document.createElement('div');
-    advancedToggleContainer.className = 'advanced-toggle-container';
+    advancedToggleContainer.className = 'advanced-settings-toggle-container';
     contentDiv.appendChild(advancedToggleContainer);
 
     const advancedToggleCheckbox = document.createElement('input');
     advancedToggleCheckbox.type = 'checkbox';
     advancedToggleCheckbox.id = 'advanced-settings-toggle';
-    advancedToggleCheckbox.className = 'advanced-toggle-checkbox';
+    advancedToggleCheckbox.className = 'advanced-settings-checkbox';
     advancedToggleCheckbox.checked = localStorage.getItem(ADVANCED_SETTINGS_ENABLED_KEY) === 'true';
     advancedToggleContainer.appendChild(advancedToggleCheckbox);
 
     const advancedToggleLabel = document.createElement('label');
     advancedToggleLabel.htmlFor = 'advanced-settings-toggle';
-    advancedToggleLabel.className = 'advanced-toggle-label';
+    advancedToggleLabel.className = 'advanced-settings-label';
     advancedToggleLabel.textContent = '⚙️ Advanced Settings';
     advancedToggleContainer.appendChild(advancedToggleLabel);
 
@@ -370,11 +380,33 @@ export class SettingsDialog {
       toggleAdvancedSections(advancedToggleCheckbox.checked);
     });
 
-    // Create disclaimer
-    const disclaimer = document.createElement('div');
-    disclaimer.className = 'settings-disclaimer';
-    disclaimer.textContent = i18nString(UIStrings.disclaimer);
-    contentDiv.appendChild(disclaimer);
+    // Add disclaimer section
+    const disclaimerSection = document.createElement('div');
+    disclaimerSection.classList.add('settings-section', 'disclaimer-section');
+    contentDiv.appendChild(disclaimerSection);
+
+    const disclaimerTitle = document.createElement('h3');
+    disclaimerTitle.textContent = i18nString(UIStrings.importantNotice);
+    disclaimerTitle.classList.add('settings-subtitle');
+    disclaimerSection.appendChild(disclaimerTitle);
+
+    const disclaimerText = document.createElement('div');
+    disclaimerText.classList.add('settings-disclaimer');
+    disclaimerText.innerHTML = `
+      <p class="disclaimer-warning">
+        <strong>Beta Version:</strong> This is a beta version of the Browser Operator - AI Assistant feature.
+      </p>
+      <p class="disclaimer-note">
+        <strong>Data Sharing:</strong> When using this feature, your browser data and conversation content will be sent to the AI model for processing.
+      </p>
+      <p class="disclaimer-note">
+        <strong>Provider Support:</strong> We currently support OpenAI, Groq and OpenRouter providers directly. And we support LiteLLM as a proxy to access 100+ other models.
+      </p>
+      <p class="disclaimer-footer">
+        By using this feature, you acknowledge that your data will be processed according to Model Provider's privacy policy and terms of service.
+      </p>
+    `;
+    disclaimerSection.appendChild(disclaimerText);
 
     // Create footer with buttons
     const footer = document.createElement('div');
@@ -422,6 +454,7 @@ export class SettingsDialog {
       litellmSettings.save();
       groqSettings.save();
       openrouterSettings.save();
+      browseroperatorSettings.save();
 
       // Save mini/nano model selections from current provider
       const currentProviderSettings = providerSettings.get(selectedProvider as ProviderType);

front_end/panels/ai_chat/ui/settings/i18n-strings.ts

@@ -36,6 +36,10 @@ export const UIStrings = {
    *@description OpenRouter provider option
    */
   openrouterProvider: 'OpenRouter',
+  /**
+   *@description BrowserOperator provider option
+   */
+  browseroperatorProvider: 'BrowserOperator',
   /**
    *@description LiteLLM API Key label
    */
@@ -84,6 +88,14 @@ export const UIStrings = {
    *@description OpenAI API Key hint
    */
   apiKeyHint: 'An OpenAI API key is required for OpenAI models (GPT-4.1, O4 Mini, etc.)',
+  /**
+   *@description BrowserOperator API Key label
+   */
+  browseroperatorApiKeyLabel: 'BrowserOperator API Key (Optional)',
+  /**
+   *@description BrowserOperator API Key hint
+   */
+  browseroperatorApiKeyHint: 'Optional API key for BrowserOperator managed service. Authentication is not required.',
   /**
    *@description Test button text
    */

front_end/panels/ai_chat/ui/settings/providers/BrowserOperatorSettings.ts

@@ -0,0 +1,80 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import { BaseProviderSettings } from './BaseProviderSettings.js';
+import { i18nString, UIStrings } from '../i18n-strings.js';
+import { getStorageItem, setStorageItem } from '../utils/storage.js';
+import type { GetModelOptionsFunction, AddCustomModelOptionFunction, RemoveCustomModelOptionFunction } from '../types.js';
+
+// Storage key for BrowserOperator API key (defined in LLMConfigurationManager.ts)
+const BROWSEROPERATOR_API_KEY_STORAGE_KEY = 'ai_chat_browseroperator_api_key';
+
+/**
+ * BrowserOperator provider settings
+ *
+ * BrowserOperator is a managed hosted service with agent-based routing.
+ * - API key is optional
+ * - Endpoint is hardcoded to https://api.browseroperator.io/v1
+ * - Models are static aliases (main, mini, nano) not real model names
+ */
+export class BrowserOperatorSettings extends BaseProviderSettings {
+  private apiKeyInput: HTMLInputElement | null = null;
+  private settingsSection: HTMLElement | null = null;
+
+  constructor(
+    container: HTMLElement,
+    getModelOptions: GetModelOptionsFunction,
+    addCustomModelOption: AddCustomModelOptionFunction,
+    removeCustomModelOption: RemoveCustomModelOptionFunction
+  ) {
+    super(container, 'browseroperator', getModelOptions, addCustomModelOption, removeCustomModelOption);
+  }
+
+  render(): void {
+    // Clear any existing content
+    this.container.innerHTML = '';
+
+    // Setup BrowserOperator content
+    this.settingsSection = document.createElement('div');
+    this.settingsSection.className = 'settings-section';
+    this.container.appendChild(this.settingsSection);
+
+    // Optional API key section
+    const apiKeyLabel = document.createElement('div');
+    apiKeyLabel.className = 'settings-label';
+    apiKeyLabel.textContent = i18nString(UIStrings.browseroperatorApiKeyLabel);
+    this.settingsSection.appendChild(apiKeyLabel);
+
+    const apiKeyHint = document.createElement('div');
+    apiKeyHint.className = 'settings-hint';
+    apiKeyHint.textContent = i18nString(UIStrings.browseroperatorApiKeyHint);
+    this.settingsSection.appendChild(apiKeyHint);
+
+    const settingsSavedApiKey = getStorageItem(BROWSEROPERATOR_API_KEY_STORAGE_KEY, '');
+    this.apiKeyInput = document.createElement('input');
+    this.apiKeyInput.className = 'settings-input';
+    this.apiKeyInput.type = 'password';
+    this.apiKeyInput.placeholder = 'Enter your BrowserOperator API key (optional)';
+    this.apiKeyInput.value = settingsSavedApiKey;
+    this.settingsSection.appendChild(this.apiKeyInput);
+  }
+
+  updateModelSelectors(): void {
+    // BrowserOperator doesn't need model selectors - models are managed automatically
+    return;
+  }
+
+  save(): void {
+    // Save BrowserOperator API key (optional)
+    if (this.apiKeyInput) {
+      const newApiKey = this.apiKeyInput.value.trim();
+      if (newApiKey) {
+        setStorageItem(BROWSEROPERATOR_API_KEY_STORAGE_KEY, newApiKey);
+      } else {
+        // Remove from storage if empty (API key is optional)
+        localStorage.removeItem(BROWSEROPERATOR_API_KEY_STORAGE_KEY);
+      }
+    }
+  }
+}

front_end/panels/ai_chat/ui/settings/types.ts

@@ -8,7 +8,7 @@
 export interface ModelOption {
   value: string;
   label: string;
-  type: 'openai' | 'litellm' | 'groq' | 'openrouter';
+  type: 'openai' | 'litellm' | 'groq' | 'openrouter' | 'browseroperator';
 }
 
 /**
@@ -22,7 +22,7 @@ export interface ValidationResult {
 /**
  * Provider type
  */
-export type ProviderType = 'openai' | 'litellm' | 'groq' | 'openrouter';
+export type ProviderType = 'openai' | 'litellm' | 'groq' | 'openrouter' | 'browseroperator';
 
 /**
  * Model tier type

front_end/panels/ai_chat/ui/settings/utils/styles.ts

@@ -447,6 +447,7 @@ export function getSettingsStyles(): string {
       align-items: center;
       gap: 8px;
       margin-bottom: 8px;
+      padding-left: 20px;
     }
 
     .advanced-settings-checkbox {