@jupyterlite/ai 0.18.0 → 0.19.0

package/lib/widgets/ai-settings.js

@@ -1,3 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getEffectiveContextWindow, SECRETS_REPLACEMENT } from '@jupyternaut/agent';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import { Debouncer } from '@lumino/polling';
 import Add from '@mui/icons-material/Add';
@@ -13,8 +15,6 @@ 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, ListItemText, Menu, MenuItem, Select, Switch, Tab, Tabs, TextField, ThemeProvider, Tooltip, Typography, createTheme } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
-import { getEffectiveContextWindow } from '../providers/model-info';
-import { SECRETS_REPLACEMENT } from '../tokens';
 import { ProviderConfigDialog } from './provider-config-dialog';
 /**
  * Create a theme that uses IThemeManager to detect theme
@@ -63,7 +63,7 @@ export class AISettingsWidget extends ReactWidget {
      * @returns A React element containing the AI settings interface
      */
     render() {
-        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsAccess: this._secretsAccess, trans: this._trans }));
+        return (_jsx(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsAccess: this._secretsAccess, trans: this._trans }));
     }
     _settingsModel;
     _agentManagerFactory;
@@ -79,7 +79,7 @@ export class AISettingsWidget extends ReactWidget {
  */
 const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsAccess, trans }) => {
     if (!model) {
-        return React.createElement("div", null, trans.__('Settings model not available'));
+        return _jsx("div", { children: trans.__('Settings model not available') });
     }
     const [config, setConfig] = useState(model.config || {});
     const [theme, setTheme] = useState(() => createJupyterLabTheme(themeManager));
@@ -356,8 +356,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         setMcpMenuAnchor(null);
         setMcpMenuServerId('');
     };
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Box, { sx: {
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Box, { sx: {
                 height: '100%',
                 maxHeight: '100vh',
                 overflow: 'auto',
@@ -365,339 +364,185 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                 pb: 4,
                 boxSizing: 'border-box',
                 fontSize: '0.9rem'
-            } },
-            React.createElement(Box, { sx: { mb: 2, display: 'flex', alignItems: 'center', gap: 2 } },
-                React.createElement(Settings, { color: "primary", sx: { fontSize: 24 } }),
-                React.createElement(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600 } }, trans.__('AI Settings'))),
-            React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider', mb: 2 } },
-                React.createElement(Tabs, { value: activeTab, onChange: (_, newValue) => setActiveTab(newValue) },
-                    React.createElement(Tab, { label: trans.__('Providers') }),
-                    React.createElement(Tab, { label: trans.__('Behavior') }),
-                    React.createElement(Tab, { label: trans.__('MCP Servers') }))),
-            activeTab === 0 && (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
-                config.providers.length > 0 && (React.createElement(Card, { elevation: 2 },
-                    React.createElement(CardContent, null,
-                        React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, trans.__('Default Providers')),
-                        React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
-                            React.createElement(FormControl, { fullWidth: true },
-                                React.createElement(InputLabel, null, trans.__('Chat Provider')),
-                                React.createElement(Select, { value: config.defaultProvider, label: trans.__('Chat Provider'), onChange: e => model.setActiveProvider(e.target.value) }, config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name))))),
-                            React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSameProviderForChatAndCompleter, onChange: e => handleConfigUpdate({
-                                        useSameProviderForChatAndCompleter: e.target.checked
-                                    }), color: "primary" }), label: trans.__('Use same provider for chat and completions') }),
-                            !config.useSameProviderForChatAndCompleter && (React.createElement(FormControl, { fullWidth: true },
-                                React.createElement(InputLabel, null, trans.__('Completion Provider')),
-                                React.createElement(Select, { value: config.activeCompleterProvider || '', label: trans.__('Completion Provider'), className: "jp-ai-completion-provider-select", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
-                                    React.createElement(MenuItem, { value: "" },
-                                        React.createElement("em", null, trans.__('No completion'))),
-                                    config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name)))))))))),
-                React.createElement(Card, { elevation: 2 },
-                    React.createElement(CardContent, null,
-                        React.createElement(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                mb: 2
-                            } },
-                            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
-                                React.createElement(Typography, { variant: "h6", component: "h2" }, trans.__('Configured Providers'))),
-                            React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddDialog, size: "small" }, trans.__('Add Provider'))),
-                        config.providers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No providers configured yet. Click "Add Provider" to get started.'))) : (React.createElement(List, null, config.providers.map(provider => {
-                            const isActive = config.defaultProvider === provider.id;
-                            const isActiveCompleter = config.useSameProviderForChatAndCompleter
-                                ? isActive
-                                : config.activeCompleterProvider === provider.id;
-                            const providerInfo = providerRegistry.getProviderInfo(provider.provider);
-                            const providerToolCapabilities = providerInfo?.providerToolCapabilities;
-                            const params = provider.parameters;
-                            const effectiveContextWindow = getEffectiveContextWindow(provider, providerRegistry);
-                            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',
-                                    py: 2
-                                } },
-                                React.createElement(Box, { sx: {
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        alignItems: 'flex-start',
-                                        width: '100%',
-                                        mb: 1
-                                    } },
-                                    React.createElement(Box, { sx: { flex: 1 } },
-                                        React.createElement(Box, { sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: 1,
-                                                mb: 0.5
-                                            } },
-                                            React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, provider.name),
-                                            isActive && (React.createElement(Chip, { label: trans.__('Chat'), size: "small", color: "primary", icon: React.createElement(CheckCircle, null) })),
-                                            isActiveCompleter && (React.createElement(Chip, { label: trans.__('Completion'), size: "small", color: "secondary", icon: React.createElement(CheckCircle, null) }))),
-                                        React.createElement(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true },
-                                            provider.provider,
-                                            " \u2022 ",
-                                            provider.model,
-                                            provider.description &&
-                                                ` • ${provider.description}`),
-                                        (params?.temperature !== undefined ||
-                                            params?.maxOutputTokens !== undefined ||
-                                            params?.maxTurns !== undefined ||
-                                            effectiveContextWindow !== 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" })),
-                                            effectiveContextWindow !== undefined && (React.createElement(Chip, { label: trans.__('Context: %1', effectiveContextWindow), 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)))));
-                        }))))),
-                secretsAccess?.isAvailable && (React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSecretsManager, onChange: e => handleConfigUpdate({
-                            useSecretsManager: e.target.checked
-                        }), color: "primary", sx: { alignSelf: 'flex-start' } }), label: React.createElement("div", null,
-                        React.createElement("span", null, trans.__('Use the secrets manager to manage API keys')),
-                        !config.useSecretsManager && (React.createElement(Alert, { severity: "warning", icon: React.createElement(Error, null), sx: { mb: 2 } }, trans.__('The secrets are stored in plain text in settings')))) })))),
-            activeTab === 1 && (React.createElement(Card, { elevation: 2 },
-                React.createElement(CardContent, null,
-                    React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, trans.__('Behavior Settings')),
-                    React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
-                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.toolsEnabled, onChange: e => handleConfigUpdate({
-                                    toolsEnabled: e.target.checked
-                                }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, trans.__('Enable Tools')),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Allow the AI to use tools like notebook operations, code execution, and file management'))) }),
-                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.sendWithShiftEnter, onChange: e => handleConfigUpdate({
-                                    sendWithShiftEnter: e.target.checked
-                                }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, trans.__('Send with Shift+Enter')),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Use Shift+Enter to send messages (Enter creates new line)'))) }),
-                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.autoTitle, onChange: e => handleConfigUpdate({
-                                    autoTitle: e.target.checked
-                                }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, trans.__('Auto Title')),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Automatically generate a chat title from the model for every message until there are 5 messages'))) }),
-                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showTokenUsage, onChange: e => handleConfigUpdate({
-                                    showTokenUsage: e.target.checked
-                                }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, trans.__('Show Token Usage')),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Display token usage information in the chat toolbar'))) }),
-                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showContextUsage, onChange: e => handleConfigUpdate({
-                                    showContextUsage: e.target.checked
-                                }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, trans.__('Show Context Usage')),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Display estimated context usage in the chat toolbar'))) }),
-                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showCellDiff, onChange: e => handleConfigUpdate({
-                                    showCellDiff: e.target.checked
-                                }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, trans.__('Show Cell Diff')),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Show diff view when AI modifies cell content'))) }),
-                        config.showCellDiff && (React.createElement(FormControl, { sx: { ml: 4 } },
-                            React.createElement(InputLabel, null, trans.__('Diff Display Mode')),
-                            React.createElement(Select, { value: config.diffDisplayMode, label: trans.__('Diff Display Mode'), onChange: e => handleConfigUpdate({
-                                    diffDisplayMode: e.target.value
-                                }) },
-                                React.createElement(MenuItem, { value: "split" }, trans.__('Split View')),
-                                React.createElement(MenuItem, { value: "unified" }, trans.__('Unified View'))))),
-                        React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showFileDiff, onChange: e => handleConfigUpdate({
-                                    showFileDiff: e.target.checked
-                                }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, trans.__('Show File Diff')),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Show diff view when AI modifies file content'))) }),
-                        React.createElement(TextField, { fullWidth: true, label: trans.__('Chat Backup Directory'), value: config.chatBackupDirectory, onChange: e => handleConfigUpdate({
-                                chatBackupDirectory: e.target.value
-                            }), helperText: trans.__('Directory where chat history backups are saved (relative to the server root)') }),
-                        React.createElement(Divider, { sx: { my: 1 } }),
-                        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, 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();
-                                        if (value &&
-                                            !config.commandsRequiringApproval.includes(value)) {
-                                            const newCommands = [
-                                                ...config.commandsRequiringApproval,
-                                                value
-                                            ];
-                                            handleConfigUpdate({
-                                                commandsRequiringApproval: newCommands
-                                            });
-                                            e.target.value = '';
-                                        }
-                                    }
-                                }, 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: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            mb: 2
-                        } },
-                        React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
-                            React.createElement(Cable, { color: "primary" }),
-                            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, secondaryAction: React.createElement(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small" },
-                            React.createElement(MoreVert, null)) },
-                        React.createElement(ListItemText, { primary: React.createElement(Box, { sx: {
+            }, children: [_jsxs(Box, { sx: { mb: 2, display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Settings, { color: "primary", sx: { fontSize: 24 } }), _jsx(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600 }, children: trans.__('AI Settings') })] }), _jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider', mb: 2 }, children: _jsxs(Tabs, { value: activeTab, onChange: (_, newValue) => setActiveTab(newValue), children: [_jsx(Tab, { label: trans.__('Providers') }), _jsx(Tab, { label: trans.__('Behavior') }), _jsx(Tab, { label: trans.__('MCP Servers') })] }) }), activeTab === 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [config.providers.length > 0 && (_jsx(Card, { elevation: 2, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", component: "h2", gutterBottom: true, children: trans.__('Default Providers') }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: trans.__('Chat Provider') }), _jsx(Select, { value: config.defaultProvider, label: trans.__('Chat Provider'), onChange: e => model.setActiveProvider(e.target.value), children: config.providers.map(provider => (_jsx(MenuItem, { value: provider.id, children: provider.name }, provider.id))) })] }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.useSameProviderForChatAndCompleter, onChange: e => handleConfigUpdate({
+                                                        useSameProviderForChatAndCompleter: e.target.checked
+                                                    }), color: "primary" }), label: trans.__('Use same provider for chat and completions') }), !config.useSameProviderForChatAndCompleter && (_jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: trans.__('Completion Provider') }), _jsxs(Select, { value: config.activeCompleterProvider || '', label: trans.__('Completion Provider'), className: "jp-ai-completion-provider-select", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined), children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: trans.__('No completion') }) }), config.providers.map(provider => (_jsx(MenuItem, { value: provider.id, children: provider.name }, provider.id)))] })] }))] })] }) })), _jsx(Card, { elevation: 2, children: _jsxs(CardContent, { children: [_jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                            mb: 2
+                                        }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: _jsx(Typography, { variant: "h6", component: "h2", children: trans.__('Configured Providers') }) }), _jsx(Button, { variant: "contained", startIcon: _jsx(Add, {}), onClick: openAddDialog, size: "small", children: trans.__('Add Provider') })] }), config.providers.length === 0 ? (_jsx(Alert, { severity: "info", children: trans.__('No providers configured yet. Click "Add Provider" to get started.') })) : (_jsx(List, { children: config.providers.map(provider => {
+                                            const isActive = config.defaultProvider === provider.id;
+                                            const isActiveCompleter = config.useSameProviderForChatAndCompleter
+                                                ? isActive
+                                                : config.activeCompleterProvider === provider.id;
+                                            const providerInfo = providerRegistry.getProviderInfo(provider.provider);
+                                            const providerToolCapabilities = providerInfo?.providerToolCapabilities;
+                                            const params = provider.parameters;
+                                            const effectiveContextWindow = getEffectiveContextWindow(provider, providerRegistry);
+                                            const webSearchEnabled = !!providerToolCapabilities?.webSearch &&
+                                                provider.customSettings?.webSearch?.enabled === true;
+                                            const webFetchEnabled = !!providerToolCapabilities?.webFetch &&
+                                                provider.customSettings?.webFetch?.enabled === true;
+                                            return (_jsx(ListItem, { sx: {
+                                                    flexDirection: 'column',
+                                                    alignItems: 'stretch',
+                                                    py: 2
+                                                }, children: _jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        alignItems: 'flex-start',
+                                                        width: '100%',
+                                                        mb: 1
+                                                    }, children: [_jsxs(Box, { sx: { flex: 1 }, children: [_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: 1,
+                                                                        mb: 0.5
+                                                                    }, children: [_jsx(Typography, { variant: "subtitle1", fontWeight: "medium", children: provider.name }), isActive && (_jsx(Chip, { label: trans.__('Chat'), size: "small", color: "primary", icon: _jsx(CheckCircle, {}) })), isActiveCompleter && (_jsx(Chip, { label: trans.__('Completion'), size: "small", color: "secondary", icon: _jsx(CheckCircle, {}) }))] }), _jsxs(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: [provider.provider, " \u2022 ", provider.model, provider.description &&
+                                                                            ` • ${provider.description}`] }), (params?.temperature !== undefined ||
+                                                                    params?.maxOutputTokens !== undefined ||
+                                                                    params?.maxTurns !== undefined ||
+                                                                    effectiveContextWindow !== undefined ||
+                                                                    webSearchEnabled ||
+                                                                    webFetchEnabled) && (_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        flexWrap: 'wrap',
+                                                                        gap: 1,
+                                                                        mt: 1
+                                                                    }, children: [params?.temperature !== undefined && (_jsx(Chip, { label: trans.__('Temp: %1', params.temperature), size: "small", variant: "outlined" })), params?.maxOutputTokens !== undefined && (_jsx(Chip, { label: trans.__('Tokens: %1', params.maxOutputTokens), size: "small", variant: "outlined" })), params?.maxTurns !== undefined && (_jsx(Chip, { label: trans.__('Turns: %1', params.maxTurns), size: "small", variant: "outlined" })), effectiveContextWindow !== undefined && (_jsx(Chip, { label: trans.__('Context: %1', effectiveContextWindow), size: "small", variant: "outlined" })), webSearchEnabled && (_jsx(Chip, { label: trans.__('Web Search'), size: "small", variant: "outlined", color: "info" })), webFetchEnabled && (_jsx(Chip, { label: trans.__('Web Fetch'), size: "small", variant: "outlined", color: "info" }))] }))] }), _jsx(IconButton, { onClick: e => handleMenuClick(e, provider.id), size: "small", children: _jsx(MoreVert, {}) })] }) }, provider.id));
+                                        }) }))] }) }), secretsAccess?.isAvailable && (_jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.useSecretsManager, onChange: e => handleConfigUpdate({
+                                    useSecretsManager: e.target.checked
+                                }), color: "primary", sx: { alignSelf: 'flex-start' } }), label: _jsxs("div", { children: [_jsx("span", { children: trans.__('Use the secrets manager to manage API keys') }), !config.useSecretsManager && (_jsx(Alert, { severity: "warning", icon: _jsx(Error, {}), sx: { mb: 2 }, children: trans.__('The secrets are stored in plain text in settings') }))] }) }))] })), activeTab === 1 && (_jsx(Card, { elevation: 2, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", component: "h2", gutterBottom: true, children: trans.__('Behavior Settings') }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.toolsEnabled, onChange: e => handleConfigUpdate({
+                                                toolsEnabled: e.target.checked
+                                            }), color: "primary" }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: trans.__('Enable Tools') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Allow the AI to use tools like notebook operations, code execution, and file management') })] }) }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.sendWithShiftEnter, onChange: e => handleConfigUpdate({
+                                                sendWithShiftEnter: e.target.checked
+                                            }), color: "primary" }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: trans.__('Send with Shift+Enter') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Use Shift+Enter to send messages (Enter creates new line)') })] }) }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.autoTitle, onChange: e => handleConfigUpdate({
+                                                autoTitle: e.target.checked
+                                            }), color: "primary" }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: trans.__('Auto Title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Automatically generate a chat title from the model for every message until there are 5 messages') })] }) }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.showTokenUsage, onChange: e => handleConfigUpdate({
+                                                showTokenUsage: e.target.checked
+                                            }), color: "primary" }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: trans.__('Show Token Usage') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Display token usage information in the chat toolbar') })] }) }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.showContextUsage, onChange: e => handleConfigUpdate({
+                                                showContextUsage: e.target.checked
+                                            }), color: "primary" }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: trans.__('Show Context Usage') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Display estimated context usage in the chat toolbar') })] }) }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.showCellDiff, onChange: e => handleConfigUpdate({
+                                                showCellDiff: e.target.checked
+                                            }), color: "primary" }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: trans.__('Show Cell Diff') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Show diff view when AI modifies cell content') })] }) }), config.showCellDiff && (_jsxs(FormControl, { sx: { ml: 4 }, children: [_jsx(InputLabel, { children: trans.__('Diff Display Mode') }), _jsxs(Select, { value: config.diffDisplayMode, label: trans.__('Diff Display Mode'), onChange: e => handleConfigUpdate({
+                                                    diffDisplayMode: e.target.value
+                                                }), children: [_jsx(MenuItem, { value: "split", children: trans.__('Split View') }), _jsx(MenuItem, { value: "unified", children: trans.__('Unified View') })] })] })), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: config.showFileDiff, onChange: e => handleConfigUpdate({
+                                                showFileDiff: e.target.checked
+                                            }), color: "primary" }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: trans.__('Show File Diff') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Show diff view when AI modifies file content') })] }) }), _jsx(TextField, { fullWidth: true, label: trans.__('Chat Backup Directory'), value: config.chatBackupDirectory, onChange: e => handleConfigUpdate({
+                                            chatBackupDirectory: e.target.value
+                                        }), helperText: trans.__('Directory where chat history backups are saved (relative to the server root)') }), _jsx(Divider, { sx: { my: 1 } }), _jsx(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') }), _jsx(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') }), _jsx(Divider, { sx: { my: 2 } }), _jsxs(Box, { children: [_jsxs(Typography, { variant: "body1", gutterBottom: true, sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1
+                                                }, children: [trans.__('Skills Paths'), _jsx(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.'), children: _jsx(InfoOutlined, { sx: { fontSize: 16 } }) })] }), _jsx(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' }, children: (config.skillsPaths ?? []).map((skillPath, index) => (_jsx(ListItem, { divider: true, secondaryAction: _jsx(IconButton, { onClick: () => {
+                                                            const newPaths = [...config.skillsPaths];
+                                                            newPaths.splice(index, 1);
+                                                            handleConfigUpdate({ skillsPaths: newPaths });
+                                                        }, size: "small", children: _jsx(Delete, {}) }), children: _jsx(ListItemText, { primary: skillPath }) }, index))) }), _jsx(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') })] }), _jsx(Divider, { sx: { my: 2 } }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: trans.__('Commands Requiring Approval') }), _jsx(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' }, children: trans.__('Commands that require user approval before AI can execute them') }), _jsx(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' }, children: config.commandsRequiringApproval.map((command, index) => (_jsx(ListItem, { divider: true, secondaryAction: _jsx(IconButton, { onClick: () => {
+                                                            const newCommands = [
+                                                                ...config.commandsRequiringApproval
+                                                            ];
+                                                            newCommands.splice(index, 1);
+                                                            handleConfigUpdate({
+                                                                commandsRequiringApproval: newCommands
+                                                            });
+                                                        }, size: "small", children: _jsx(Delete, {}) }), children: _jsx(ListItemText, { primary: command }) }, index))) }), _jsx(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();
+                                                        if (value &&
+                                                            !config.commandsRequiringApproval.includes(value)) {
+                                                            const newCommands = [
+                                                                ...config.commandsRequiringApproval,
+                                                                value
+                                                            ];
+                                                            handleConfigUpdate({
+                                                                commandsRequiringApproval: newCommands
+                                                            });
+                                                            e.target.value = '';
+                                                        }
+                                                    }
+                                                }, helperText: trans.__('Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code') })] }), _jsx(Divider, { sx: { my: 2 } }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: trans.__('Commands Auto-Rendering MIME Bundles') }), _jsx(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' }, children: trans.__('Only these execute_command command IDs can auto-render MIME bundle outputs in chat') }), _jsx(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' }, children: (config.commandsAutoRenderMimeBundles ?? []).map((command, index) => (_jsx(ListItem, { divider: true, secondaryAction: _jsx(IconButton, { onClick: () => {
+                                                            const newCommands = [
+                                                                ...(config.commandsAutoRenderMimeBundles ??
+                                                                    [])
+                                                            ];
+                                                            newCommands.splice(index, 1);
+                                                            handleConfigUpdate({
+                                                                commandsAutoRenderMimeBundles: newCommands
+                                                            });
+                                                        }, size: "small", children: _jsx(Delete, {}) }), children: _jsx(ListItemText, { primary: command }) }, index))) }), _jsx(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') })] }), _jsx(Divider, { sx: { my: 2 } }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: trans.__('Trusted MIME Types for Auto-Render') }), _jsx(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' }, children: trans.__('When auto-rendering command outputs, these MIME types are marked trusted in chat') }), _jsx(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' }, children: (config.trustedMimeTypesForAutoRender ?? []).map((mimeType, index) => (_jsx(ListItem, { divider: true, secondaryAction: _jsx(IconButton, { onClick: () => {
+                                                            const newMimeTypes = [
+                                                                ...(config.trustedMimeTypesForAutoRender ??
+                                                                    [])
+                                                            ];
+                                                            newMimeTypes.splice(index, 1);
+                                                            handleConfigUpdate({
+                                                                trustedMimeTypesForAutoRender: newMimeTypes
+                                                            });
+                                                        }, size: "small", children: _jsx(Delete, {}) }), children: _jsx(ListItemText, { primary: mimeType }) }, index))) }), _jsx(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 && (_jsx(Card, { elevation: 2, children: _jsxs(CardContent, { children: [_jsxs(Box, { sx: {
                                     display: 'flex',
                                     alignItems: 'center',
-                                    gap: 1
-                                } },
-                                React.createElement(Typography, { variant: "body1" }, server.name),
-                                server.enabled &&
-                                    agentManagerFactory?.isMCPServerConnected(server.name) && (React.createElement(CheckCircleOutline, { sx: { color: 'success.main', fontSize: 16 } })),
-                                server.enabled &&
-                                    !agentManagerFactory?.isMCPServerConnected(server.name) && (React.createElement(ErrorOutline, { sx: { color: 'error.main', fontSize: 16 } })),
-                                React.createElement(Switch, { checked: server.enabled, onChange: e => model.updateMCPServer(server.id, {
-                                        enabled: e.target.checked
-                                    }), size: "small", color: "primary" })), secondary: React.createElement(Box, null,
-                                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(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: () => {
-                        const provider = config.providers.find(p => p.id === menuProviderId);
-                        if (provider) {
-                            openEditDialog(provider);
-                        }
-                    } },
-                    React.createElement(Edit, { sx: { mr: 1 } }),
-                    trans.__('Edit')),
-                React.createElement(MenuItem, { onClick: () => handleDeleteProvider(menuProviderId), sx: { color: 'error.main' } },
-                    React.createElement(Delete, { sx: { mr: 1 } }),
-                    trans.__('Delete'))),
-            React.createElement(MCPServerDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false), onSave: editingMCPServer ? handleEditMCPServer : handleAddMCPServer, initialConfig: editingMCPServer, mode: editingMCPServer ? 'edit' : 'add', trans: trans }),
-            React.createElement(Menu, { anchorEl: mcpMenuAnchor, open: Boolean(mcpMenuAnchor), onClose: handleMCPMenuClose },
-                React.createElement(MenuItem, { onClick: () => {
-                        const server = config.mcpServers.find(s => s.id === mcpMenuServerId);
-                        if (server) {
-                            openEditMCPDialog(server);
-                        }
-                    } },
-                    React.createElement(Edit, { sx: { mr: 1 } }),
-                    trans.__('Edit')),
-                React.createElement(MenuItem, { onClick: () => handleDeleteMCPServer(mcpMenuServerId), sx: { color: 'error.main' } },
-                    React.createElement(Delete, { sx: { mr: 1 } }),
-                    trans.__('Delete'))))));
+                                    justifyContent: 'space-between',
+                                    mb: 2
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Cable, { color: "primary" }), _jsx(Typography, { variant: "h6", component: "h2", children: trans.__('Remote MCP Servers') })] }), _jsx(Button, { variant: "contained", startIcon: _jsx(Add, {}), onClick: openAddMCPDialog, size: "small", children: trans.__('Add Server') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: trans.__("Configure remote Model Context Protocol (MCP) servers to extend the AI's capabilities with external tools and data sources.") }), config.mcpServers.length === 0 ? (_jsx(Alert, { severity: "info", children: trans.__('No MCP servers configured yet. Click "Add Server" to connect to remote MCP services.') })) : (_jsx(List, { children: config.mcpServers.map(server => (_jsx(ListItem, { divider: true, secondaryAction: _jsx(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small", children: _jsx(MoreVert, {}) }), children: _jsx(ListItemText, { primary: _jsxs(Box, { sx: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: 1
+                                            }, children: [_jsx(Typography, { variant: "body1", children: server.name }), server.enabled &&
+                                                    agentManagerFactory?.isMCPServerConnected(server.name) && (_jsx(CheckCircleOutline, { sx: { color: 'success.main', fontSize: 16 } })), server.enabled &&
+                                                    !agentManagerFactory?.isMCPServerConnected(server.name) && (_jsx(ErrorOutline, { sx: { color: 'error.main', fontSize: 16 } })), _jsx(Switch, { checked: server.enabled, onChange: e => model.updateMCPServer(server.id, {
+                                                        enabled: e.target.checked
+                                                    }), size: "small", color: "primary" })] }), secondary: _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: server.url }), server.enabled && agentManagerFactory && (_jsx(Typography, { variant: "caption", color: "text.secondary", children: trans.__('Status: %1', agentManagerFactory.isMCPServerConnected(server.name)
+                                                        ? trans.__('Connected')
+                                                        : trans.__('Connection failed')) }))] }) }) }, server.id))) }))] }) })), _jsx(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', providerRegistry: providerRegistry, handleSecretField: handleSecretField, trans: trans }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: handleMenuClose, children: [_jsxs(MenuItem, { onClick: () => {
+                                const provider = config.providers.find(p => p.id === menuProviderId);
+                                if (provider) {
+                                    openEditDialog(provider);
+                                }
+                            }, children: [_jsx(Edit, { sx: { mr: 1 } }), trans.__('Edit')] }), _jsxs(MenuItem, { onClick: () => handleDeleteProvider(menuProviderId), sx: { color: 'error.main' }, children: [_jsx(Delete, { sx: { mr: 1 } }), trans.__('Delete')] })] }), _jsx(MCPServerDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false), onSave: editingMCPServer ? handleEditMCPServer : handleAddMCPServer, initialConfig: editingMCPServer, mode: editingMCPServer ? 'edit' : 'add', trans: trans }), _jsxs(Menu, { anchorEl: mcpMenuAnchor, open: Boolean(mcpMenuAnchor), onClose: handleMCPMenuClose, children: [_jsxs(MenuItem, { onClick: () => {
+                                const server = config.mcpServers.find(s => s.id === mcpMenuServerId);
+                                if (server) {
+                                    openEditMCPDialog(server);
+                                }
+                            }, children: [_jsx(Edit, { sx: { mr: 1 } }), trans.__('Edit')] }), _jsxs(MenuItem, { onClick: () => handleDeleteMCPServer(mcpMenuServerId), sx: { color: 'error.main' }, children: [_jsx(Delete, { sx: { mr: 1 } }), trans.__('Delete')] })] })] }) }));
 };
 /**
  * Dialog component for adding/editing MCP server configurations
@@ -747,16 +592,7 @@ const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode, trans })
         }
     };
     const canSave = name.trim() && url.trim() && _isValidUrl(url.trim());
-    return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "sm", fullWidth: true },
-        React.createElement(DialogTitle, null, mode === 'add'
-            ? trans.__('Add MCP Server')
-            : trans.__('Edit MCP Server')),
-        React.createElement(DialogContent, null,
-            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, pt: 1 } },
-                React.createElement(TextField, { autoFocus: true, fullWidth: true, label: trans.__('Server Name'), value: name, onChange: e => setName(e.target.value), placeholder: trans.__('My MCP Server'), helperText: trans.__('A friendly name to identify this MCP server') }),
-                React.createElement(TextField, { fullWidth: true, label: trans.__('Server URL'), value: url, onChange: e => setUrl(e.target.value), placeholder: trans.__('https://example.com/mcp'), helperText: trans.__('The HTTP/HTTPS URL of the MCP server'), error: Boolean(url.trim() && !_isValidUrl(url.trim())) }),
-                React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: enabled, onChange: e => setEnabled(e.target.checked), color: "primary" }), label: trans.__('Enable this server') }))),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: onClose }, trans.__('Cancel')),
-            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !canSave }, mode === 'add' ? trans.__('Add') : trans.__('Save')))));
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "sm", fullWidth: true, children: [_jsx(DialogTitle, { children: mode === 'add'
+                    ? trans.__('Add MCP Server')
+                    : trans.__('Edit MCP Server') }), _jsx(DialogContent, { children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }, children: [_jsx(TextField, { autoFocus: true, fullWidth: true, label: trans.__('Server Name'), value: name, onChange: e => setName(e.target.value), placeholder: trans.__('My MCP Server'), helperText: trans.__('A friendly name to identify this MCP server') }), _jsx(TextField, { fullWidth: true, label: trans.__('Server URL'), value: url, onChange: e => setUrl(e.target.value), placeholder: trans.__('https://example.com/mcp'), helperText: trans.__('The HTTP/HTTPS URL of the MCP server'), error: Boolean(url.trim() && !_isValidUrl(url.trim())) }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: enabled, onChange: e => setEnabled(e.target.checked), color: "primary" }), label: trans.__('Enable this server') })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, children: trans.__('Cancel') }), _jsx(Button, { onClick: handleSave, variant: "contained", disabled: !canSave, children: mode === 'add' ? trans.__('Add') : trans.__('Save') })] })] }));
 };