@jupyternaut/persona 0.0.0 → 0.20.0

package/lib/widgets/ai-settings.js

@@ -0,0 +1,572 @@
+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';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import Error from '@mui/icons-material/Error';
+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, 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 { ProviderConfigDialog } from './provider-config-dialog';
+/**
+ * Create a theme that uses IThemeManager to detect theme
+ * @param themeManager - Optional theme manager to detect theme
+ * @returns A Material-UI theme configured for the current JupyterLab theme
+ */
+const createJupyterLabTheme = (themeManager) => {
+    // Use IThemeManager if available, otherwise default to light theme
+    const isDark = themeManager?.theme
+        ? !themeManager.isLight(themeManager.theme)
+        : false;
+    return createTheme({
+        palette: {
+            mode: isDark ? 'dark' : 'light'
+        }
+    });
+};
+/**
+ * A JupyterLab widget for AI settings configuration
+ */
+export class AISettingsWidget extends ReactWidget {
+    /**
+     * Construct a new AI settings widget
+     * @param options - The options for initializing the widget
+     */
+    constructor(options) {
+        super();
+        this._settingsModel = options.settingsModel;
+        this._agentManagerFactory = options.agentManagerFactory;
+        this._themeManager = options.themeManager;
+        this._providerRegistry = options.providerRegistry;
+        this._secretsAccess = options.secretsAccess;
+        this._trans = options.trans;
+        this._mcpServerRenderer = options.mcpServerRenderer;
+        this.id = 'jupyternaut-persona-settings';
+        this.title.label = this._trans.__('Jupyternaut 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.secretsAccess.isAvailable) {
+            this._settingsModel.updateConfig({ useSecretsManager: false });
+            this._secretsAccess = undefined;
+        }
+    }
+    /**
+     * Render the AI settings component
+     * @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, McpServerRenderer: this._mcpServerRenderer }));
+    }
+    _settingsModel;
+    _agentManagerFactory;
+    _themeManager;
+    _providerRegistry;
+    _secretsAccess;
+    _trans;
+    _mcpServerRenderer;
+}
+/**
+ * The main AI settings component that provides configuration UI
+ * @param props - Component props containing models and theme manager
+ * @returns A React component for AI settings configuration
+ */
+const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsAccess, trans, McpServerRenderer }) => {
+    if (!model) {
+        return React.createElement("div", null, trans.__('Settings model not available'));
+    }
+    const [config, setConfig] = useState(model.config || {});
+    const [theme, setTheme] = useState(() => createJupyterLabTheme(themeManager));
+    const [activeTab, setActiveTab] = useState(0);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingProvider, setEditingProvider] = useState();
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const [menuProviderId, setMenuProviderId] = useState('');
+    const [systemPromptValue, setSystemPromptValue] = useState(config.systemPrompt);
+    const systemPromptValueRef = React.useRef(config.systemPrompt);
+    const [completionPromptValue, setCompletionPromptValue] = useState(config.completionSystemPrompt);
+    const completionPromptValueRef = React.useRef(config.completionSystemPrompt);
+    /**
+     * Effect to listen for model state changes and update config
+     */
+    useEffect(() => {
+        if (!model || !model.stateChanged) {
+            return;
+        }
+        const onStateChanged = () => {
+            setConfig(model.config || {});
+        };
+        model.stateChanged.connect(onStateChanged);
+        return () => {
+            model.stateChanged.disconnect(onStateChanged);
+        };
+    }, [model]);
+    /**
+     * Effect to listen for theme changes and update the Material-UI theme
+     */
+    useEffect(() => {
+        if (!themeManager) {
+            return;
+        }
+        const updateTheme = () => {
+            setTheme(createJupyterLabTheme(themeManager));
+        };
+        themeManager.themeChanged.connect(updateTheme);
+        return () => {
+            themeManager.themeChanged.disconnect(updateTheme);
+        };
+    }, [themeManager]);
+    /**
+     * Effect to listen for MCP connection changes to re-render connection status
+     */
+    useEffect(() => {
+        if (!agentManagerFactory) {
+            return;
+        }
+        const onMCPConnectionChanged = () => {
+            // Force a re-render by updating the config state
+            setConfig(prevConfig => ({ ...prevConfig }));
+        };
+        agentManagerFactory.mcpConnectionChanged.connect(onMCPConnectionChanged);
+        return () => {
+            agentManagerFactory.mcpConnectionChanged.disconnect(onMCPConnectionChanged);
+        };
+    }, [agentManagerFactory]);
+    // Sync local state when config changes externally
+    useEffect(() => {
+        setSystemPromptValue(config.systemPrompt);
+        systemPromptValueRef.current = config.systemPrompt;
+    }, [config.systemPrompt]);
+    useEffect(() => {
+        setCompletionPromptValue(config.completionSystemPrompt);
+        completionPromptValueRef.current = config.completionSystemPrompt;
+    }, [config.completionSystemPrompt]);
+    const promptDebouncer = useMemo(() => new Debouncer(async () => {
+        await handleConfigUpdate({
+            systemPrompt: systemPromptValueRef.current,
+            completionSystemPrompt: completionPromptValueRef.current
+        });
+    }, 1000), []);
+    // Cleanup debouncer on unmount
+    useEffect(() => {
+        return () => {
+            promptDebouncer.dispose();
+        };
+    }, [promptDebouncer]);
+    const handleSystemPromptChange = (value) => {
+        setSystemPromptValue(value);
+        systemPromptValueRef.current = value;
+        void promptDebouncer.invoke();
+    };
+    const handleCompletionPromptChange = (value) => {
+        setCompletionPromptValue(value);
+        completionPromptValueRef.current = value;
+        void promptDebouncer.invoke();
+    };
+    const getSecretFromManager = async (provider, fieldName) => {
+        return secretsAccess?.get(`${provider}:${fieldName}`);
+    };
+    const setSecretToManager = async (provider, fieldName, value) => {
+        await secretsAccess?.set(`${provider}:${fieldName}`, value);
+    };
+    /**
+     * Attach a secrets field to the secrets manager.
+     * @param input - the DOm element to attach.
+     * @param provider - the name of the provider.
+     * @param fieldName - the name of the field.
+     */
+    const handleSecretField = async (input, provider, fieldName) => {
+        if (!(model.config.useSecretsManager && secretsAccess?.isAvailable)) {
+            return;
+        }
+        await secretsAccess.attach(`${provider}:${fieldName}`, input);
+    };
+    /**
+     * Handle adding a new AI provider
+     * @param providerConfig - The provider configuration to add
+     */
+    const handleAddProvider = async (providerConfig) => {
+        if (model.config.useSecretsManager &&
+            secretsAccess?.isAvailable &&
+            providerConfig.apiKey) {
+            providerConfig.apiKey = SECRETS_REPLACEMENT;
+        }
+        await model.addProvider(providerConfig);
+    };
+    /**
+     * Handle editing an existing AI provider
+     * @param providerConfig - The updated provider configuration
+     */
+    const handleEditProvider = async (providerConfig) => {
+        if (editingProvider) {
+            if (model.config.useSecretsManager &&
+                secretsAccess?.isAvailable &&
+                providerConfig.apiKey) {
+                providerConfig.apiKey = SECRETS_REPLACEMENT;
+            }
+            await model.updateProvider(editingProvider.id, providerConfig);
+            setEditingProvider(undefined);
+        }
+    };
+    /**
+     * Handle deleting an AI provider
+     * @param id - The ID of the provider to delete
+     */
+    const handleDeleteProvider = async (id) => {
+        await model.removeProvider(id);
+        setMenuAnchor(null);
+    };
+    /**
+     * Open the provider edit dialog
+     * @param provider - The provider to edit
+     */
+    const openEditDialog = async (provider) => {
+        // Retrieve the API key from the secrets manager if necessary.
+        if (model.config.useSecretsManager && secretsAccess?.isAvailable) {
+            provider.apiKey =
+                (await getSecretFromManager(provider.provider, 'apiKey')) ?? '';
+        }
+        setEditingProvider(provider);
+        setDialogOpen(true);
+        setMenuAnchor(null);
+    };
+    /**
+     * Open the provider add dialog
+     */
+    const openAddDialog = () => {
+        setEditingProvider(undefined);
+        setDialogOpen(true);
+    };
+    /**
+     * Handle provider menu click
+     * @param event - The click event
+     * @param providerId - The ID of the provider
+     */
+    const handleMenuClick = (event, providerId) => {
+        setMenuAnchor(event.currentTarget);
+        setMenuProviderId(providerId);
+    };
+    /**
+     * Handle provider menu close
+     */
+    const handleMenuClose = () => {
+        setMenuAnchor(null);
+        setMenuProviderId('');
+    };
+    /**
+     * Handle updating AI configuration
+     * @param updates - Partial configuration updates to apply
+     */
+    const handleConfigUpdate = async (updates) => {
+        if (updates.useSecretsManager !== undefined) {
+            if (updates.useSecretsManager) {
+                for (const provider of model.config.providers) {
+                    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'))) {
+                        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);
+                    }
+                }
+            }
+            else {
+                for (const provider of model.config.providers) {
+                    const apiKey = await getSecretFromManager(provider.provider, 'apiKey');
+                    provider.apiKey = apiKey;
+                    await model.updateProvider(provider.id, provider);
+                }
+            }
+        }
+        await model.updateConfig(updates);
+    };
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Box, { sx: {
+                height: '100%',
+                maxHeight: '100vh',
+                overflow: 'auto',
+                p: 2,
+                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') }),
+                    McpServerRenderer && 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.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(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, McpServerRenderer && React.createElement(McpServerRenderer, null)))),
+            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'))))));
+};

package/lib/widgets/provider-config-dialog.d.ts

@@ -0,0 +1,16 @@
+import type { IProviderConfig, IProviderRegistry } from '@jupyternaut/agent';
+import type { TranslationBundle } from '@jupyterlab/translation';
+import React from 'react';
+interface IProviderConfigDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onSave: (config: Omit<IProviderConfig, 'id'>) => void;
+    initialConfig?: IProviderConfig;
+    mode: 'add' | 'edit';
+    providerRegistry: IProviderRegistry;
+    handleSecretField: (input: HTMLInputElement, provider: string, fieldName: string) => Promise<void>;
+    trans: TranslationBundle;
+}
+export declare const ProviderConfigDialog: React.FC<IProviderConfigDialogProps>;
+export {};
+//# sourceMappingURL=provider-config-dialog.d.ts.map