@jupyterlite/ai 0.11.1 → 0.13.0

package/lib/widgets/ai-settings.js

@@ -8,9 +8,10 @@ import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
 import Error from '@mui/icons-material/Error';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import MoreVert from '@mui/icons-material/MoreVert';
 import Settings from '@mui/icons-material/Settings';
-import { Alert, Box, Button, Card, CardContent, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControl, FormControlLabel, IconButton, InputLabel, List, ListItem, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Select, Switch, Tab, Tabs, TextField, ThemeProvider, Typography, createTheme } from '@mui/material';
+import { Alert, Box, Button, Card, CardContent, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControl, FormControlLabel, IconButton, InputLabel, List, ListItem, ListItemText, Menu, MenuItem, Select, Switch, Tab, Tabs, TextField, ThemeProvider, Tooltip, Typography, createTheme } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import { SECRETS_NAMESPACE, SECRETS_REPLACEMENT } from '../tokens';
 import { ProviderConfigDialog } from './provider-config-dialog';
@@ -51,6 +52,11 @@ export class AISettingsWidget extends ReactWidget {
         this.title.label = this._trans.__('AI Settings');
         this.title.caption = this._trans.__('Configure AI providers and behavior');
         this.title.closable = true;
+        // Disable the secrets manager if the token is empty.
+        if (!options.token) {
+            this._settingsModel.updateConfig({ useSecretsManager: false });
+            this._secretsManager = undefined;
+        }
     }
     /**
      * Render the AI settings component
@@ -168,11 +174,19 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         void promptDebouncer.invoke();
     };
     const getSecretFromManager = async (provider, fieldName) => {
-        const secret = await secretsManager?.get(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`);
+        const token = Private.getToken();
+        if (!token) {
+            return;
+        }
+        const secret = await secretsManager?.get(token, SECRETS_NAMESPACE, `${provider}:${fieldName}`);
         return secret?.value;
     };
     const setSecretToManager = async (provider, fieldName, value) => {
-        await secretsManager?.set(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`, {
+        const token = Private.getToken();
+        if (!token) {
+            return;
+        }
+        await secretsManager?.set(token, SECRETS_NAMESPACE, `${provider}:${fieldName}`, {
             namespace: SECRETS_NAMESPACE,
             id: `${provider}:${fieldName}`,
             value
@@ -188,7 +202,11 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         if (!(model.config.useSecretsManager && secretsManager)) {
             return;
         }
-        await secretsManager?.attach(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`, input);
+        const token = Private.getToken();
+        if (!token) {
+            return;
+        }
+        await secretsManager?.attach(token, SECRETS_NAMESPACE, `${provider}:${fieldName}`, input);
     };
     /**
      * Handle adding a new AI provider
@@ -270,22 +288,29 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         if (updates.useSecretsManager !== undefined) {
             if (updates.useSecretsManager) {
                 for (const provider of model.config.providers) {
-                    // if the secrets manager doesn't have the current API key, copy the current
+                    const settingsApiKey = provider.apiKey;
+                    // If the secrets manager doesn't have the current API key, set the current
                     // one from settings.
+                    // Update the settings value with SECRETS_REPLACEMENT if a key exist in the
+                    // secrets manager (was already there or a value was set in settings).
                     if (!(await getSecretFromManager(provider.provider, 'apiKey'))) {
-                        setSecretToManager(provider.provider, 'apiKey', provider.apiKey ?? '');
+                        if (settingsApiKey !== undefined) {
+                            setSecretToManager(provider.provider, 'apiKey', settingsApiKey !== SECRETS_REPLACEMENT ? settingsApiKey : '');
+                            provider.apiKey = SECRETS_REPLACEMENT;
+                            await model.updateProvider(provider.id, provider);
+                        }
+                    }
+                    else {
+                        provider.apiKey = SECRETS_REPLACEMENT;
+                        await model.updateProvider(provider.id, provider);
                     }
-                    provider.apiKey = SECRETS_REPLACEMENT;
-                    await model.updateProvider(provider.id, provider);
                 }
             }
             else {
                 for (const provider of model.config.providers) {
                     const apiKey = await getSecretFromManager(provider.provider, 'apiKey');
-                    if (apiKey) {
-                        provider.apiKey = apiKey;
-                        await model.updateProvider(provider.id, provider);
-                    }
+                    provider.apiKey = apiKey;
+                    await model.updateProvider(provider.id, provider);
                 }
             }
         }
@@ -399,7 +424,13 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                             const isActiveCompleter = config.useSameProviderForChatAndCompleter
                                 ? isActive
                                 : config.activeCompleterProvider === provider.id;
+                            const providerInfo = providerRegistry.getProviderInfo(provider.provider);
+                            const providerToolCapabilities = providerInfo?.providerToolCapabilities;
                             const params = provider.parameters;
+                            const webSearchEnabled = !!providerToolCapabilities?.webSearch &&
+                                provider.customSettings?.webSearch?.enabled === true;
+                            const webFetchEnabled = !!providerToolCapabilities?.webFetch &&
+                                provider.customSettings?.webFetch?.enabled === true;
                             return (React.createElement(ListItem, { key: provider.id, sx: {
                                     flexDirection: 'column',
                                     alignItems: 'stretch',
@@ -428,18 +459,21 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             provider.model,
                                             provider.description &&
                                                 ` • ${provider.description}`),
-                                        params &&
-                                            (params.temperature !== undefined ||
-                                                params.maxOutputTokens !== undefined ||
-                                                params.maxTurns !== undefined) && (React.createElement(Box, { sx: {
+                                        (params?.temperature !== undefined ||
+                                            params?.maxOutputTokens !== undefined ||
+                                            params?.maxTurns !== undefined ||
+                                            webSearchEnabled ||
+                                            webFetchEnabled) && (React.createElement(Box, { sx: {
                                                 display: 'flex',
                                                 flexWrap: 'wrap',
                                                 gap: 1,
                                                 mt: 1
                                             } },
-                                            params.temperature !== undefined && (React.createElement(Chip, { label: trans.__('Temp: %1', params.temperature), size: "small", variant: "outlined" })),
-                                            params.maxOutputTokens !== undefined && (React.createElement(Chip, { label: trans.__('Tokens: %1', params.maxOutputTokens), size: "small", variant: "outlined" })),
-                                            params.maxTurns !== undefined && (React.createElement(Chip, { label: trans.__('Turns: %1', params.maxTurns), size: "small", variant: "outlined" }))))),
+                                            params?.temperature !== undefined && (React.createElement(Chip, { label: trans.__('Temp: %1', params.temperature), size: "small", variant: "outlined" })),
+                                            params?.maxOutputTokens !== undefined && (React.createElement(Chip, { label: trans.__('Tokens: %1', params.maxOutputTokens), size: "small", variant: "outlined" })),
+                                            params?.maxTurns !== undefined && (React.createElement(Chip, { label: trans.__('Turns: %1', params.maxTurns), size: "small", variant: "outlined" })),
+                                            webSearchEnabled && (React.createElement(Chip, { label: trans.__('Web Search'), size: "small", variant: "outlined", color: "info" })),
+                                            webFetchEnabled && (React.createElement(Chip, { label: trans.__('Web Fetch'), size: "small", variant: "outlined", color: "info" }))))),
                                     React.createElement(IconButton, { onClick: e => handleMenuClick(e, provider.id), size: "small" },
                                         React.createElement(MoreVert, null)))));
                         }))))),
@@ -488,22 +522,51 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: trans.__('System Prompt'), value: systemPromptValue, onChange: e => handleSystemPromptChange(e.target.value), placeholder: trans.__("Define the AI's behavior and personality..."), helperText: trans.__('Instructions that define how the AI should behave and respond') }),
                         React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: trans.__('Completion System Prompt'), value: completionPromptValue, onChange: e => handleCompletionPromptChange(e.target.value), placeholder: trans.__('Define how the AI should generate code completions...'), helperText: trans.__('Instructions that define how the AI should generate code completions') }),
                         React.createElement(Divider, { sx: { my: 2 } }),
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true, sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 1
+                                } },
+                                trans.__('Skills Paths'),
+                                React.createElement(Tooltip, { title: trans.__('Directories containing agent skills, relative to the server root. Skills are loaded from all paths; the first occurrence of a skill name takes priority.') },
+                                    React.createElement(InfoOutlined, { sx: { fontSize: 16 } }))),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, (config.skillsPaths ?? []).map((skillPath, index) => (React.createElement(ListItem, { key: index, divider: true, secondaryAction: React.createElement(IconButton, { onClick: () => {
+                                        const newPaths = [...config.skillsPaths];
+                                        newPaths.splice(index, 1);
+                                        handleConfigUpdate({ skillsPaths: newPaths });
+                                    }, size: "small" },
+                                    React.createElement(Delete, null)) },
+                                React.createElement(ListItemText, { primary: skillPath }))))),
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Add Skills Path'), placeholder: trans.__('e.g., .claude/skills'), onKeyDown: e => {
+                                    if (e.key === 'Enter') {
+                                        const value = e.target.value.trim();
+                                        if (value &&
+                                            !(config.skillsPaths ?? []).includes(value)) {
+                                            const newPaths = [
+                                                ...(config.skillsPaths ?? []),
+                                                value
+                                            ];
+                                            handleConfigUpdate({ skillsPaths: newPaths });
+                                            e.target.value = '';
+                                        }
+                                    }
+                                }, helperText: trans.__('Press Enter to add a path. Defaults: .agents/skills, _agents/skills') })),
+                        React.createElement(Divider, { sx: { my: 2 } }),
                         React.createElement(Box, null,
                             React.createElement(Typography, { variant: "body1", gutterBottom: true }, trans.__('Commands Requiring Approval')),
                             React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, trans.__('Commands that require user approval before AI can execute them')),
-                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, config.commandsRequiringApproval.map((command, index) => (React.createElement(ListItem, { key: index, divider: true },
-                                React.createElement(ListItemText, { primary: command }),
-                                React.createElement(ListItemSecondaryAction, null,
-                                    React.createElement(IconButton, { onClick: () => {
-                                            const newCommands = [
-                                                ...config.commandsRequiringApproval
-                                            ];
-                                            newCommands.splice(index, 1);
-                                            handleConfigUpdate({
-                                                commandsRequiringApproval: newCommands
-                                            });
-                                        }, size: "small" },
-                                        React.createElement(Delete, null))))))),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, config.commandsRequiringApproval.map((command, index) => (React.createElement(ListItem, { key: index, divider: true, secondaryAction: React.createElement(IconButton, { onClick: () => {
+                                        const newCommands = [
+                                            ...config.commandsRequiringApproval
+                                        ];
+                                        newCommands.splice(index, 1);
+                                        handleConfigUpdate({
+                                            commandsRequiringApproval: newCommands
+                                        });
+                                    }, size: "small" },
+                                    React.createElement(Delete, null)) },
+                                React.createElement(ListItemText, { primary: command }))))),
                             React.createElement(TextField, { fullWidth: true, label: trans.__('Add New Command'), placeholder: trans.__('e.g., notebook:run-cell'), onKeyDown: e => {
                                     if (e.key === 'Enter') {
                                         const value = e.target.value.trim();
@@ -519,7 +582,65 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             e.target.value = '';
                                         }
                                     }
-                                }, helperText: trans.__('Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code') })))))),
+                                }, helperText: trans.__('Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code') })),
+                        React.createElement(Divider, { sx: { my: 2 } }),
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, trans.__('Commands Auto-Rendering MIME Bundles')),
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, trans.__('Only these execute_command command IDs can auto-render MIME bundle outputs in chat')),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, (config.commandsAutoRenderMimeBundles ?? []).map((command, index) => (React.createElement(ListItem, { key: index, divider: true, secondaryAction: React.createElement(IconButton, { onClick: () => {
+                                        const newCommands = [
+                                            ...(config.commandsAutoRenderMimeBundles ??
+                                                [])
+                                        ];
+                                        newCommands.splice(index, 1);
+                                        handleConfigUpdate({
+                                            commandsAutoRenderMimeBundles: newCommands
+                                        });
+                                    }, size: "small" },
+                                    React.createElement(Delete, null)) },
+                                React.createElement(ListItemText, { primary: command }))))),
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Add Auto-Render Command'), placeholder: trans.__('e.g., jupyterlab-ai-commands:execute-in-kernel'), onKeyDown: e => {
+                                    if (e.key === 'Enter') {
+                                        const value = e.target.value.trim();
+                                        const existingCommands = config.commandsAutoRenderMimeBundles ?? [];
+                                        if (value && !existingCommands.includes(value)) {
+                                            const newCommands = [...existingCommands, value];
+                                            handleConfigUpdate({
+                                                commandsAutoRenderMimeBundles: newCommands
+                                            });
+                                            e.target.value = '';
+                                        }
+                                    }
+                                }, helperText: trans.__('Press Enter to add a command. Default: jupyterlab-ai-commands:execute-in-kernel') })),
+                        React.createElement(Divider, { sx: { my: 2 } }),
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, trans.__('Trusted MIME Types for Auto-Render')),
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, trans.__('When auto-rendering command outputs, these MIME types are marked trusted in chat')),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, (config.trustedMimeTypesForAutoRender ?? []).map((mimeType, index) => (React.createElement(ListItem, { key: index, divider: true, secondaryAction: React.createElement(IconButton, { onClick: () => {
+                                        const newMimeTypes = [
+                                            ...(config.trustedMimeTypesForAutoRender ??
+                                                [])
+                                        ];
+                                        newMimeTypes.splice(index, 1);
+                                        handleConfigUpdate({
+                                            trustedMimeTypesForAutoRender: newMimeTypes
+                                        });
+                                    }, size: "small" },
+                                    React.createElement(Delete, null)) },
+                                React.createElement(ListItemText, { primary: mimeType }))))),
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Add Trusted MIME Type'), placeholder: trans.__('e.g., text/html'), onKeyDown: e => {
+                                    if (e.key === 'Enter') {
+                                        const value = e.target.value.trim();
+                                        const existingMimeTypes = config.trustedMimeTypesForAutoRender ?? [];
+                                        if (value && !existingMimeTypes.includes(value)) {
+                                            const newMimeTypes = [...existingMimeTypes, value];
+                                            handleConfigUpdate({
+                                                trustedMimeTypesForAutoRender: newMimeTypes
+                                            });
+                                            e.target.value = '';
+                                        }
+                                    }
+                                }, helperText: trans.__('Press Enter to add a MIME type. Default: text/html') })))))),
             activeTab === 2 && (React.createElement(Card, { elevation: 2 },
                 React.createElement(CardContent, null,
                     React.createElement(Box, { sx: {
@@ -533,7 +654,8 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                             React.createElement(Typography, { variant: "h6", component: "h2" }, trans.__('Remote MCP Servers'))),
                         React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddMCPDialog, size: "small" }, trans.__('Add Server'))),
                     React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 } }, trans.__("Configure remote Model Context Protocol (MCP) servers to extend the AI's capabilities with external tools and data sources.")),
-                    config.mcpServers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No MCP servers configured yet. Click "Add Server" to connect to remote MCP services.'))) : (React.createElement(List, null, config.mcpServers.map(server => (React.createElement(ListItem, { key: server.id, divider: true },
+                    config.mcpServers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No MCP servers configured yet. Click "Add Server" to connect to remote MCP services.'))) : (React.createElement(List, null, config.mcpServers.map(server => (React.createElement(ListItem, { key: server.id, divider: true, secondaryAction: React.createElement(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small" },
+                            React.createElement(MoreVert, null)) },
                         React.createElement(ListItemText, { primary: React.createElement(Box, { sx: {
                                     display: 'flex',
                                     alignItems: 'center',
@@ -550,10 +672,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                 React.createElement(Typography, { variant: "body2", color: "text.secondary" }, server.url),
                                 server.enabled && agentManagerFactory && (React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Status: %1', agentManagerFactory.isMCPServerConnected(server.name)
                                     ? trans.__('Connected')
-                                    : trans.__('Connection failed'))))) }),
-                        React.createElement(ListItemSecondaryAction, null,
-                            React.createElement(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small" },
-                                React.createElement(MoreVert, null))))))))))),
+                                    : trans.__('Connection failed'))))) }))))))))),
             React.createElement(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', providerRegistry: providerRegistry, handleSecretField: handleSecretField, trans: trans }),
             React.createElement(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: handleMenuClose },
                 React.createElement(MenuItem, { onClick: () => {

package/lib/widgets/main-area-chat.d.ts

@@ -21,5 +21,11 @@ export declare class MainAreaChat extends MainAreaWidget<ChatWidget> {
      * Get the model of the chat.
      */
     get model(): AIChatModel;
+    /**
+     * Get the area of the chat.
+     */
+    get area(): string | undefined;
+    private _writersChanged;
     private _approvalButtons;
+    private _outputAreaCompat;
 }

package/lib/widgets/main-area-chat.js

@@ -2,6 +2,7 @@ import { CommandToolbarButton, MainAreaWidget } from '@jupyterlab/apputils';
 import { launchIcon } from '@jupyterlab/ui-components';
 import { ApprovalButtons } from '../approval-buttons';
 import { TokenUsageWidget } from '../components/token-usage-display';
+import { RenderedMessageOutputAreaCompat } from '../rendered-message-outputarea';
 import { CommandIds } from '../tokens';
 /**
  * The chat as a main area widget.
@@ -34,11 +35,19 @@ export class MainAreaChat extends MainAreaWidget {
             chatPanel: this.content,
             agentManager: this.model.agentManager
         });
+        // Temporary compat: keep output-area CSS context for MIME renderers
+        // until jupyter-chat provides it natively.
+        this._outputAreaCompat = new RenderedMessageOutputAreaCompat({
+            chatPanel: this.content
+        });
+        this.model.writersChanged.connect(this._writersChanged);
     }
     dispose() {
         super.dispose();
         // Dispose of the approval buttons widget when the chat is disposed.
         this._approvalButtons.dispose();
+        this._outputAreaCompat.dispose();
+        this.model.writersChanged.disconnect(this._writersChanged);
     }
     /**
      * Get the model of the chat.
@@ -46,5 +55,24 @@ export class MainAreaChat extends MainAreaWidget {
     get model() {
         return this.content.model;
     }
+    /**
+     * Get the area of the chat.
+     */
+    get area() {
+        return this.content.area;
+    }
+    _writersChanged = (_, writers) => {
+        // Check if AI is currently writing (streaming)
+        const aiWriting = writers.some(writer => writer.user.username === 'ai-assistant');
+        if (aiWriting) {
+            this.content.inputToolbarRegistry?.hide('send');
+            this.content.inputToolbarRegistry?.show('stop');
+        }
+        else {
+            this.content.inputToolbarRegistry?.hide('stop');
+            this.content.inputToolbarRegistry?.show('send');
+        }
+    };
     _approvalButtons;
+    _outputAreaCompat;
 }

package/lib/widgets/provider-config-dialog.js

@@ -1,13 +1,72 @@
 import ExpandMore from '@mui/icons-material/ExpandMore';
+import Delete from '@mui/icons-material/Delete';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, MenuItem, Select, Slider, Switch, TextField, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, List, ListItem, ListItemText, MenuItem, Select, Slider, Switch, TextField, Typography } from '@mui/material';
 import React from 'react';
 /**
  * Default parameter values for provider configuration
  */
 const DEFAULT_TEMPERATURE = 0.7;
 const DEFAULT_MAX_TURNS = 25;
+const DOMAIN_FIELD_MAP = {
+    'webSearch.allowedDomains': {
+        section: 'webSearch',
+        key: 'allowedDomains'
+    },
+    'webSearch.blockedDomains': {
+        section: 'webSearch',
+        key: 'blockedDomains'
+    },
+    'webFetch.allowedDomains': {
+        section: 'webFetch',
+        key: 'allowedDomains'
+    },
+    'webFetch.blockedDomains': {
+        section: 'webFetch',
+        key: 'blockedDomains'
+    }
+};
+function createEmptyDomainInputs() {
+    return {
+        'webSearch.allowedDomains': '',
+        'webSearch.blockedDomains': '',
+        'webFetch.allowedDomains': '',
+        'webFetch.blockedDomains': ''
+    };
+}
+function toRecord(value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        return value;
+    }
+    return {};
+}
+function toStringArray(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter((item) => typeof item === 'string');
+}
+function sanitizeCustomSettingsForProvider(customSettings, capabilities) {
+    const result = { ...customSettings };
+    const webSearch = toRecord(customSettings.webSearch);
+    const webFetch = toRecord(customSettings.webFetch);
+    const supportsWebSearch = !!capabilities?.webSearch;
+    const supportsWebFetch = !!capabilities?.webFetch;
+    if (supportsWebSearch && webSearch.enabled === true) {
+        result.webSearch = webSearch;
+    }
+    else {
+        delete result.webSearch;
+    }
+    if (supportsWebFetch && webFetch.enabled === true) {
+        result.webFetch = webFetch;
+    }
+    else {
+        delete result.webFetch;
+    }
+    return result;
+}
 export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mode, providerRegistry, handleSecretField, trans }) => {
     const apiKeyRef = React.useRef();
     const [name, setName] = React.useState(initialConfig?.name || '');
@@ -16,8 +75,17 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
     const [apiKey, setApiKey] = React.useState(initialConfig?.apiKey || '');
     const [baseURL, setBaseURL] = React.useState(initialConfig?.baseURL || '');
     const [showApiKey, setShowApiKey] = React.useState(false);
+    const [customSettings, setCustomSettings] = React.useState(initialConfig?.customSettings || {});
+    const [domainInputs, setDomainInputs] = React.useState(createEmptyDomainInputs());
     const [parameters, setParameters] = React.useState(initialConfig?.parameters || {});
     const [expandedAdvanced, setExpandedAdvanced] = React.useState(false);
+    const selectedProviderInfo = React.useMemo(() => providerRegistry.getProviderInfo(provider), [providerRegistry, provider]);
+    const providerToolCapabilities = selectedProviderInfo?.providerToolCapabilities;
+    const webSearchImplementation = providerToolCapabilities?.webSearch?.implementation;
+    const supportsWebSearch = !!providerToolCapabilities?.webSearch;
+    const supportsWebFetch = !!providerToolCapabilities?.webFetch;
+    const webSearchSettings = React.useMemo(() => toRecord(customSettings.webSearch), [customSettings]);
+    const webFetchSettings = React.useMemo(() => toRecord(customSettings.webFetch), [customSettings]);
     // Get provider options from registry
     const providerOptions = React.useMemo(() => {
         const providers = providerRegistry.providers;
@@ -45,11 +113,14 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
             setApiKey(initialConfig?.apiKey || '');
             setBaseURL(initialConfig?.baseURL || '');
             setParameters(initialConfig?.parameters || {});
+            setCustomSettings(initialConfig?.customSettings || {});
+            setDomainInputs(createEmptyDomainInputs());
             setShowApiKey(false);
             setExpandedAdvanced(false);
         }
         else {
             // Reset expanded state when dialog closes
+            setDomainInputs(createEmptyDomainInputs());
             setExpandedAdvanced(false);
         }
     }, [open, initialConfig]);
@@ -65,20 +136,103 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
         if (open && apiKeyRef.current) {
             handleSecretField(apiKeyRef.current, provider, 'apiKey');
         }
-    }, [open, provider, apiKeyRef.current]);
+    }, [open, provider, handleSecretField]);
+    const updateCustomSetting = React.useCallback((section, key, value) => {
+        setCustomSettings(prev => {
+            const next = { ...prev };
+            const sectionSettings = { ...toRecord(next[section]) };
+            const shouldDelete = value === undefined ||
+                value === null ||
+                value === '' ||
+                (Array.isArray(value) && value.length === 0);
+            if (shouldDelete) {
+                delete sectionSettings[key];
+            }
+            else {
+                sectionSettings[key] = value;
+            }
+            if (Object.keys(sectionSettings).length === 0) {
+                delete next[section];
+            }
+            else {
+                next[section] = sectionSettings;
+            }
+            return next;
+        });
+    }, []);
+    const addDomainValue = React.useCallback((fieldId) => {
+        const valueToAdd = domainInputs[fieldId].trim();
+        if (!valueToAdd) {
+            return;
+        }
+        const { section, key } = DOMAIN_FIELD_MAP[fieldId];
+        const currentValues = toStringArray(toRecord(customSettings[section])[key]);
+        if (currentValues.includes(valueToAdd)) {
+            setDomainInputs(prev => ({
+                ...prev,
+                [fieldId]: ''
+            }));
+            return;
+        }
+        const nextValues = [...currentValues, valueToAdd];
+        updateCustomSetting(section, key, nextValues);
+        setDomainInputs(prev => ({
+            ...prev,
+            [fieldId]: ''
+        }));
+    }, [customSettings, domainInputs, updateCustomSetting]);
+    const removeDomainValue = React.useCallback((fieldId, valueToRemove) => {
+        const { section, key } = DOMAIN_FIELD_MAP[fieldId];
+        const currentValues = toStringArray(toRecord(customSettings[section])[key]);
+        const nextValues = currentValues.filter(value => value !== valueToRemove);
+        updateCustomSetting(section, key, nextValues.length > 0 ? nextValues : undefined);
+    }, [customSettings, updateCustomSetting]);
+    const renderDomainList = React.useCallback((fieldId, label, placeholder, values) => {
+        const domainValues = toStringArray(values);
+        return (React.createElement(Box, null,
+            React.createElement(Typography, { variant: "body2", gutterBottom: true }, label),
+            React.createElement(List, { dense: true, sx: {
+                    mb: 1,
+                    maxHeight: 160,
+                    overflow: 'auto',
+                    border: 1,
+                    borderColor: 'divider',
+                    borderRadius: 1
+                } }, domainValues.length === 0 ? (React.createElement(ListItem, null,
+                React.createElement(ListItemText, { secondary: trans.__('No domains added.'), slotProps: {
+                        secondary: {
+                            color: 'text.secondary'
+                        }
+                    } }))) : (domainValues.map(value => (React.createElement(ListItem, { key: value, secondaryAction: React.createElement(IconButton, { onClick: () => removeDomainValue(fieldId, value), size: "small" },
+                    React.createElement(Delete, { fontSize: "small" })) },
+                React.createElement(ListItemText, { primary: value })))))),
+            React.createElement(TextField, { fullWidth: true, size: "small", label: trans.__('Add Domain'), value: domainInputs[fieldId], onChange: e => setDomainInputs(prev => ({
+                    ...prev,
+                    [fieldId]: e.target.value
+                })), onKeyDown: e => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        addDomainValue(fieldId);
+                    }
+                }, placeholder: placeholder, helperText: trans.__('Press Enter to add one domain.') })));
+    }, [addDomainValue, domainInputs, removeDomainValue, trans]);
     const handleSave = () => {
         if (!name.trim() || !provider || !model) {
             return;
         }
         // Only include parameters if at least one is set
         const hasParameters = Object.keys(parameters).some(key => parameters[key] !== undefined);
+        const sanitizedCustomSettings = sanitizeCustomSettingsForProvider(customSettings, providerToolCapabilities);
         const config = {
             name: name.trim(),
             provider: provider,
             model,
             ...(apiKey && { apiKey }),
             ...(baseURL && { baseURL }),
-            ...(hasParameters && { parameters })
+            ...(hasParameters && { parameters }),
+            ...(Object.keys(sanitizedCustomSettings).length > 0 && {
+                customSettings: sanitizedCustomSettings
+            })
         };
         onSave(config);
         onClose();
@@ -177,7 +331,56 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                             React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: parameters.useFilterText ?? false, onChange: e => setParameters({
                                         ...parameters,
                                         useFilterText: e.target.checked
-                                    }) }), label: trans.__('Use filter text') })))))),
+                                    }) }), label: trans.__('Use filter text') }),
+                            (supportsWebSearch || supportsWebFetch) && (React.createElement(React.Fragment, null,
+                                React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 2, mb: 1 } }, trans.__('Provider Web Tools')),
+                                supportsWebSearch && (React.createElement(React.Fragment, null,
+                                    React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: webSearchSettings.enabled === true, onChange: e => updateCustomSetting('webSearch', 'enabled', e.target.checked) }), label: trans.__('Enable Web Search') }),
+                                    webSearchSettings.enabled === true && (React.createElement(Box, { sx: {
+                                            pl: 2,
+                                            borderLeft: 2,
+                                            borderColor: 'divider',
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 1.5
+                                        } },
+                                        (webSearchImplementation === 'openai' ||
+                                            webSearchImplementation === 'anthropic') &&
+                                            renderDomainList('webSearch.allowedDomains', trans.__('Allowed Domains'), trans.__('example.com'), webSearchSettings.allowedDomains),
+                                        webSearchImplementation === 'openai' && (React.createElement(React.Fragment, null,
+                                            React.createElement(FormControl, { fullWidth: true },
+                                                React.createElement(InputLabel, null, trans.__('Search Context Size')),
+                                                React.createElement(Select, { value: webSearchSettings.searchContextSize ??
+                                                        'medium', label: trans.__('Search Context Size'), onChange: e => updateCustomSetting('webSearch', 'searchContextSize', e.target.value) },
+                                                    React.createElement(MenuItem, { value: "low" }, trans.__('Low')),
+                                                    React.createElement(MenuItem, { value: "medium" }, trans.__('Medium')),
+                                                    React.createElement(MenuItem, { value: "high" }, trans.__('High')))),
+                                            React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: webSearchSettings.externalWebAccess !==
+                                                        false, onChange: e => updateCustomSetting('webSearch', 'externalWebAccess', e.target.checked) }), label: trans.__('Use External Web Access') }))),
+                                        webSearchImplementation === 'anthropic' && (React.createElement(React.Fragment, null,
+                                            React.createElement(TextField, { fullWidth: true, label: trans.__('Web Search Max Uses'), type: "number", value: webSearchSettings.maxUses ?? '', onChange: e => updateCustomSetting('webSearch', 'maxUses', e.target.value
+                                                    ? Number(e.target.value)
+                                                    : undefined), inputProps: { min: 1 } }),
+                                            renderDomainList('webSearch.blockedDomains', trans.__('Blocked Domains'), trans.__('spam.example.com'), webSearchSettings.blockedDomains))))))),
+                                supportsWebFetch && (React.createElement(React.Fragment, null,
+                                    React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: webFetchSettings.enabled === true, onChange: e => updateCustomSetting('webFetch', 'enabled', e.target.checked) }), label: trans.__('Enable Web Fetch') }),
+                                    webFetchSettings.enabled === true && (React.createElement(Box, { sx: {
+                                            pl: 2,
+                                            borderLeft: 2,
+                                            borderColor: 'divider',
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 1.5
+                                        } },
+                                        React.createElement(TextField, { fullWidth: true, label: trans.__('Web Fetch Max Uses'), type: "number", value: webFetchSettings.maxUses ?? '', onChange: e => updateCustomSetting('webFetch', 'maxUses', e.target.value
+                                                ? Number(e.target.value)
+                                                : undefined), inputProps: { min: 1 } }),
+                                        React.createElement(TextField, { fullWidth: true, label: trans.__('Web Fetch Max Content Tokens'), type: "number", value: webFetchSettings.maxContentTokens ?? '', onChange: e => updateCustomSetting('webFetch', 'maxContentTokens', e.target.value
+                                                ? Number(e.target.value)
+                                                : undefined), inputProps: { min: 1 } }),
+                                        renderDomainList('webFetch.allowedDomains', trans.__('Allowed Domains'), trans.__('docs.example.com'), webFetchSettings.allowedDomains),
+                                        renderDomainList('webFetch.blockedDomains', trans.__('Blocked Domains'), trans.__('spam.example.com'), webFetchSettings.blockedDomains),
+                                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: webFetchSettings.citationsEnabled === true, onChange: e => updateCustomSetting('webFetch', 'citationsEnabled', e.target.checked) }), label: trans.__('Enable Citations') })))))))))))),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: onClose }, trans.__('Cancel')),
             React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !isValid }, mode === 'add' ? trans.__('Add Provider') : trans.__('Save Changes')))));