@jupyternaut/persona 0.0.0 → 0.20.0

package/src/widgets/ai-settings.tsx

@@ -0,0 +1,1308 @@
+import {
+  getEffectiveContextWindow,
+  SECRETS_REPLACEMENT
+} from '@jupyternaut/agent';
+import type {
+  IAgentManagerFactory,
+  IAIConfig,
+  IAISecretsAccess,
+  IAISettingsModel,
+  IProviderConfig,
+  IProviderRegistry
+} from '@jupyternaut/agent';
+import { IThemeManager } from '@jupyterlab/apputils';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
+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?: IThemeManager) => {
+  // 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: AISettingsWidget.IOptions) {
+    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
+   */
+  protected render(): React.ReactElement {
+    return (
+      <AISettingsComponent
+        model={this._settingsModel}
+        agentManagerFactory={this._agentManagerFactory}
+        themeManager={this._themeManager}
+        providerRegistry={this._providerRegistry}
+        secretsAccess={this._secretsAccess}
+        trans={this._trans}
+        McpServerRenderer={this._mcpServerRenderer}
+      />
+    );
+  }
+
+  private _settingsModel: IAISettingsModel;
+  private _agentManagerFactory?: IAgentManagerFactory;
+  private _themeManager?: IThemeManager;
+  private _providerRegistry: IProviderRegistry;
+  private _secretsAccess?: IAISecretsAccess;
+  private _trans: TranslationBundle;
+  private _mcpServerRenderer?: React.ComponentType<any>;
+}
+
+/**
+ * Props interface for the AISettingsComponent
+ */
+interface IAISettingsComponentProps {
+  model: IAISettingsModel;
+  agentManagerFactory?: IAgentManagerFactory;
+  themeManager?: IThemeManager;
+  providerRegistry: IProviderRegistry;
+  secretsAccess?: IAISecretsAccess;
+  trans: TranslationBundle;
+  McpServerRenderer?: React.ComponentType<any>;
+}
+
+/**
+ * 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: React.FC<IAISettingsComponentProps> = ({
+  model,
+  agentManagerFactory,
+  themeManager,
+  providerRegistry,
+  secretsAccess,
+  trans,
+  McpServerRenderer
+}) => {
+  if (!model) {
+    return <div>{trans.__('Settings model not available')}</div>;
+  }
+
+  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<
+    IProviderConfig | undefined
+  >();
+  const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
+  const [menuProviderId, setMenuProviderId] = useState<string>('');
+  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: string) => {
+    setSystemPromptValue(value);
+    systemPromptValueRef.current = value;
+    void promptDebouncer.invoke();
+  };
+
+  const handleCompletionPromptChange = (value: string) => {
+    setCompletionPromptValue(value);
+    completionPromptValueRef.current = value;
+    void promptDebouncer.invoke();
+  };
+
+  const getSecretFromManager = async (
+    provider: string,
+    fieldName: string
+  ): Promise<string | undefined> => {
+    return secretsAccess?.get(`${provider}:${fieldName}`);
+  };
+
+  const setSecretToManager = async (
+    provider: string,
+    fieldName: string,
+    value: string
+  ): Promise<void> => {
+    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: HTMLInputElement,
+    provider: string,
+    fieldName: string
+  ): Promise<void> => {
+    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: Omit<IProviderConfig, 'id'>
+  ) => {
+    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: Omit<IProviderConfig, 'id'>
+  ) => {
+    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: string) => {
+    await model.removeProvider(id);
+    setMenuAnchor(null);
+  };
+
+  /**
+   * Open the provider edit dialog
+   * @param provider - The provider to edit
+   */
+  const openEditDialog = async (provider: IProviderConfig) => {
+    // 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: React.MouseEvent<HTMLElement>,
+    providerId: string
+  ) => {
+    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: Partial<IAIConfig>) => {
+    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 (
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={{
+          height: '100%',
+          maxHeight: '100vh',
+          overflow: 'auto',
+          p: 2,
+          pb: 4,
+          boxSizing: 'border-box',
+          fontSize: '0.9rem'
+        }}
+      >
+        {/* Header */}
+        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
+          <Settings color="primary" sx={{ fontSize: 24 }} />
+          <Typography variant="h5" component="h1" sx={{ fontWeight: 600 }}>
+            {trans.__('AI Settings')}
+          </Typography>
+        </Box>
+        {/* Tabs */}
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
+          <Tabs
+            value={activeTab}
+            onChange={(_, newValue) => setActiveTab(newValue)}
+          >
+            <Tab label={trans.__('Providers')} />
+            <Tab label={trans.__('Behavior')} />
+            {McpServerRenderer && <Tab label={trans.__('MCP Servers')} />}
+          </Tabs>
+        </Box>
+
+        {/* Tab Panels */}
+        {activeTab === 0 && (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            {/* Default Provider Selection */}
+            {config.providers.length > 0 && (
+              <Card elevation={2}>
+                <CardContent>
+                  <Typography variant="h6" component="h2" gutterBottom>
+                    {trans.__('Default Providers')}
+                  </Typography>
+
+                  <Box
+                    sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+                  >
+                    <FormControl fullWidth>
+                      <InputLabel>{trans.__('Chat Provider')}</InputLabel>
+                      <Select
+                        value={config.defaultProvider}
+                        label={trans.__('Chat Provider')}
+                        onChange={e => model.setActiveProvider(e.target.value)}
+                      >
+                        {config.providers.map(provider => (
+                          <MenuItem key={provider.id} value={provider.id}>
+                            {provider.name}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+
+                    <FormControlLabel
+                      control={
+                        <Switch
+                          checked={config.useSameProviderForChatAndCompleter}
+                          onChange={e =>
+                            handleConfigUpdate({
+                              useSameProviderForChatAndCompleter:
+                                e.target.checked
+                            })
+                          }
+                          color="primary"
+                        />
+                      }
+                      label={trans.__(
+                        'Use same provider for chat and completions'
+                      )}
+                    />
+
+                    {!config.useSameProviderForChatAndCompleter && (
+                      <FormControl fullWidth>
+                        <InputLabel>
+                          {trans.__('Completion Provider')}
+                        </InputLabel>
+                        <Select
+                          value={config.activeCompleterProvider || ''}
+                          label={trans.__('Completion Provider')}
+                          className="jp-ai-completion-provider-select"
+                          onChange={e =>
+                            model.setActiveCompleterProvider(
+                              e.target.value || undefined
+                            )
+                          }
+                        >
+                          <MenuItem value="">
+                            <em>{trans.__('No completion')}</em>
+                          </MenuItem>
+                          {config.providers.map(provider => (
+                            <MenuItem key={provider.id} value={provider.id}>
+                              {provider.name}
+                            </MenuItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  </Box>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Providers Card */}
+            <Card elevation={2}>
+              <CardContent>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    mb: 2
+                  }}
+                >
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography variant="h6" component="h2">
+                      {trans.__('Configured Providers')}
+                    </Typography>
+                  </Box>
+                  <Button
+                    variant="contained"
+                    startIcon={<Add />}
+                    onClick={openAddDialog}
+                    size="small"
+                  >
+                    {trans.__('Add Provider')}
+                  </Button>
+                </Box>
+
+                {config.providers.length === 0 ? (
+                  <Alert severity="info">
+                    {trans.__(
+                      'No providers configured yet. Click "Add Provider" to get started.'
+                    )}
+                  </Alert>
+                ) : (
+                  <List>
+                    {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 (
+                        <ListItem
+                          key={provider.id}
+                          sx={{
+                            flexDirection: 'column',
+                            alignItems: 'stretch',
+                            py: 2
+                          }}
+                        >
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                              alignItems: 'flex-start',
+                              width: '100%',
+                              mb: 1
+                            }}
+                          >
+                            <Box sx={{ flex: 1 }}>
+                              <Box
+                                sx={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: 1,
+                                  mb: 0.5
+                                }}
+                              >
+                                <Typography
+                                  variant="subtitle1"
+                                  fontWeight="medium"
+                                >
+                                  {provider.name}
+                                </Typography>
+                                {isActive && (
+                                  <Chip
+                                    label={trans.__('Chat')}
+                                    size="small"
+                                    color="primary"
+                                    icon={<CheckCircle />}
+                                  />
+                                )}
+                                {isActiveCompleter && (
+                                  <Chip
+                                    label={trans.__('Completion')}
+                                    size="small"
+                                    color="secondary"
+                                    icon={<CheckCircle />}
+                                  />
+                                )}
+                              </Box>
+                              <Typography
+                                variant="body2"
+                                color="text.secondary"
+                                gutterBottom
+                              >
+                                {provider.provider} • {provider.model}
+                                {provider.description &&
+                                  ` • ${provider.description}`}
+                              </Typography>
+
+                              {/* Display parameters if set */}
+                              {(params?.temperature !== undefined ||
+                                params?.maxOutputTokens !== undefined ||
+                                params?.maxTurns !== undefined ||
+                                effectiveContextWindow !== undefined ||
+                                webSearchEnabled ||
+                                webFetchEnabled) && (
+                                <Box
+                                  sx={{
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    gap: 1,
+                                    mt: 1
+                                  }}
+                                >
+                                  {params?.temperature !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Temp: %1',
+                                        params.temperature
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
+                                  {params?.maxOutputTokens !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Tokens: %1',
+                                        params.maxOutputTokens
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
+                                  {params?.maxTurns !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Turns: %1',
+                                        params.maxTurns
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
+                                  {effectiveContextWindow !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Context: %1',
+                                        effectiveContextWindow
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
+                                  {webSearchEnabled && (
+                                    <Chip
+                                      label={trans.__('Web Search')}
+                                      size="small"
+                                      variant="outlined"
+                                      color="info"
+                                    />
+                                  )}
+                                  {webFetchEnabled && (
+                                    <Chip
+                                      label={trans.__('Web Fetch')}
+                                      size="small"
+                                      variant="outlined"
+                                      color="info"
+                                    />
+                                  )}
+                                </Box>
+                              )}
+                            </Box>
+                            <IconButton
+                              onClick={e => handleMenuClick(e, provider.id)}
+                              size="small"
+                            >
+                              <MoreVert />
+                            </IconButton>
+                          </Box>
+                        </ListItem>
+                      );
+                    })}
+                  </List>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Secrets Manager Settings */}
+            {secretsAccess?.isAvailable && (
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={config.useSecretsManager}
+                    onChange={e =>
+                      handleConfigUpdate({
+                        useSecretsManager: e.target.checked
+                      })
+                    }
+                    color="primary"
+                    sx={{ alignSelf: 'flex-start' }}
+                  />
+                }
+                label={
+                  <div>
+                    <span>
+                      {trans.__('Use the secrets manager to manage API keys')}
+                    </span>
+                    {!config.useSecretsManager && (
+                      <Alert severity="warning" icon={<Error />} sx={{ mb: 2 }}>
+                        {trans.__(
+                          'The secrets are stored in plain text in settings'
+                        )}
+                      </Alert>
+                    )}
+                  </div>
+                }
+              />
+            )}
+          </Box>
+        )}
+
+        {activeTab === 1 && (
+          <Card elevation={2}>
+            <CardContent>
+              <Typography variant="h6" component="h2" gutterBottom>
+                {trans.__('Behavior Settings')}
+              </Typography>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={config.toolsEnabled}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          toolsEnabled: e.target.checked
+                        })
+                      }
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Box>
+                      <Typography variant="body1">
+                        {trans.__('Enable Tools')}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        {trans.__(
+                          'Allow the AI to use tools like notebook operations, code execution, and file management'
+                        )}
+                      </Typography>
+                    </Box>
+                  }
+                />
+
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={config.showCellDiff}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          showCellDiff: e.target.checked
+                        })
+                      }
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Box>
+                      <Typography variant="body1">
+                        {trans.__('Show Cell Diff')}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        {trans.__(
+                          'Show diff view when AI modifies cell content'
+                        )}
+                      </Typography>
+                    </Box>
+                  }
+                />
+
+                {config.showCellDiff && (
+                  <FormControl sx={{ ml: 4 }}>
+                    <InputLabel>{trans.__('Diff Display Mode')}</InputLabel>
+                    <Select
+                      value={config.diffDisplayMode}
+                      label={trans.__('Diff Display Mode')}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          diffDisplayMode: e.target.value as 'split' | 'unified'
+                        })
+                      }
+                    >
+                      <MenuItem value="split">
+                        {trans.__('Split View')}
+                      </MenuItem>
+                      <MenuItem value="unified">
+                        {trans.__('Unified View')}
+                      </MenuItem>
+                    </Select>
+                  </FormControl>
+                )}
+
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={config.showFileDiff}
+                      onChange={e =>
+                        handleConfigUpdate({
+                          showFileDiff: e.target.checked
+                        })
+                      }
+                      color="primary"
+                    />
+                  }
+                  label={
+                    <Box>
+                      <Typography variant="body1">
+                        {trans.__('Show File Diff')}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        {trans.__(
+                          'Show diff view when AI modifies file content'
+                        )}
+                      </Typography>
+                    </Box>
+                  }
+                />
+
+                <Divider sx={{ my: 1 }} />
+
+                <TextField
+                  fullWidth
+                  multiline
+                  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'
+                  )}
+                />
+
+                <TextField
+                  fullWidth
+                  multiline
+                  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'
+                  )}
+                />
+
+                <Divider sx={{ my: 2 }} />
+
+                <Box>
+                  <Typography
+                    variant="body1"
+                    gutterBottom
+                    sx={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: 1
+                    }}
+                  >
+                    {trans.__('Skills Paths')}
+                    <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.'
+                      )}
+                    >
+                      <InfoOutlined sx={{ fontSize: 16 }} />
+                    </Tooltip>
+                  </Typography>
+
+                  <List sx={{ mb: 2, maxHeight: 200, overflow: 'auto' }}>
+                    {(config.skillsPaths ?? []).map((skillPath, index) => (
+                      <ListItem
+                        key={index}
+                        divider
+                        secondaryAction={
+                          <IconButton
+                            onClick={() => {
+                              const newPaths = [...config.skillsPaths];
+                              newPaths.splice(index, 1);
+                              handleConfigUpdate({ skillsPaths: newPaths });
+                            }}
+                            size="small"
+                          >
+                            <Delete />
+                          </IconButton>
+                        }
+                      >
+                        <ListItemText primary={skillPath} />
+                      </ListItem>
+                    ))}
+                  </List>
+
+                  <TextField
+                    fullWidth
+                    label={trans.__('Add Skills Path')}
+                    placeholder={trans.__('e.g., .claude/skills')}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        const value = (
+                          e.target as HTMLInputElement
+                        ).value.trim();
+                        if (
+                          value &&
+                          !(config.skillsPaths ?? []).includes(value)
+                        ) {
+                          const newPaths = [
+                            ...(config.skillsPaths ?? []),
+                            value
+                          ];
+                          handleConfigUpdate({ skillsPaths: newPaths });
+                          (e.target as HTMLInputElement).value = '';
+                        }
+                      }
+                    }}
+                    helperText={trans.__(
+                      'Press Enter to add a path. Defaults: .agents/skills, _agents/skills'
+                    )}
+                  />
+                </Box>
+
+                <Divider sx={{ my: 2 }} />
+
+                <Box>
+                  <Typography variant="body1" gutterBottom>
+                    {trans.__('Commands Requiring Approval')}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    gutterBottom
+                    sx={{ display: 'block' }}
+                  >
+                    {trans.__(
+                      'Commands that require user approval before AI can execute them'
+                    )}
+                  </Typography>
+
+                  <List sx={{ mb: 2, maxHeight: 200, overflow: 'auto' }}>
+                    {config.commandsRequiringApproval.map((command, index) => (
+                      <ListItem
+                        key={index}
+                        divider
+                        secondaryAction={
+                          <IconButton
+                            onClick={() => {
+                              const newCommands = [
+                                ...config.commandsRequiringApproval
+                              ];
+                              newCommands.splice(index, 1);
+                              handleConfigUpdate({
+                                commandsRequiringApproval: newCommands
+                              });
+                            }}
+                            size="small"
+                          >
+                            <Delete />
+                          </IconButton>
+                        }
+                      >
+                        <ListItemText primary={command} />
+                      </ListItem>
+                    ))}
+                  </List>
+
+                  <TextField
+                    fullWidth
+                    label={trans.__('Add New Command')}
+                    placeholder={trans.__('e.g., notebook:run-cell')}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        const value = (
+                          e.target as HTMLInputElement
+                        ).value.trim();
+                        if (
+                          value &&
+                          !config.commandsRequiringApproval.includes(value)
+                        ) {
+                          const newCommands = [
+                            ...config.commandsRequiringApproval,
+                            value
+                          ];
+                          handleConfigUpdate({
+                            commandsRequiringApproval: newCommands
+                          });
+                          (e.target as HTMLInputElement).value = '';
+                        }
+                      }
+                    }}
+                    helperText={trans.__(
+                      'Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code'
+                    )}
+                  />
+                </Box>
+
+                <Divider sx={{ my: 2 }} />
+
+                <Box>
+                  <Typography variant="body1" gutterBottom>
+                    {trans.__('Commands Auto-Rendering MIME Bundles')}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    gutterBottom
+                    sx={{ display: 'block' }}
+                  >
+                    {trans.__(
+                      'Only these execute_command command IDs can auto-render MIME bundle outputs in chat'
+                    )}
+                  </Typography>
+
+                  <List sx={{ mb: 2, maxHeight: 200, overflow: 'auto' }}>
+                    {(config.commandsAutoRenderMimeBundles ?? []).map(
+                      (command, index) => (
+                        <ListItem
+                          key={index}
+                          divider
+                          secondaryAction={
+                            <IconButton
+                              onClick={() => {
+                                const newCommands = [
+                                  ...(config.commandsAutoRenderMimeBundles ??
+                                    [])
+                                ];
+                                newCommands.splice(index, 1);
+                                handleConfigUpdate({
+                                  commandsAutoRenderMimeBundles: newCommands
+                                });
+                              }}
+                              size="small"
+                            >
+                              <Delete />
+                            </IconButton>
+                          }
+                        >
+                          <ListItemText primary={command} />
+                        </ListItem>
+                      )
+                    )}
+                  </List>
+
+                  <TextField
+                    fullWidth
+                    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 as HTMLInputElement
+                        ).value.trim();
+                        const existingCommands =
+                          config.commandsAutoRenderMimeBundles ?? [];
+                        if (value && !existingCommands.includes(value)) {
+                          const newCommands = [...existingCommands, value];
+                          handleConfigUpdate({
+                            commandsAutoRenderMimeBundles: newCommands
+                          });
+                          (e.target as HTMLInputElement).value = '';
+                        }
+                      }
+                    }}
+                    helperText={trans.__(
+                      'Press Enter to add a command. Default: jupyterlab-ai-commands:execute-in-kernel'
+                    )}
+                  />
+                </Box>
+
+                <Divider sx={{ my: 2 }} />
+
+                <Box>
+                  <Typography variant="body1" gutterBottom>
+                    {trans.__('Trusted MIME Types for Auto-Render')}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    gutterBottom
+                    sx={{ display: 'block' }}
+                  >
+                    {trans.__(
+                      'When auto-rendering command outputs, these MIME types are marked trusted in chat'
+                    )}
+                  </Typography>
+
+                  <List sx={{ mb: 2, maxHeight: 200, overflow: 'auto' }}>
+                    {(config.trustedMimeTypesForAutoRender ?? []).map(
+                      (mimeType, index) => (
+                        <ListItem
+                          key={index}
+                          divider
+                          secondaryAction={
+                            <IconButton
+                              onClick={() => {
+                                const newMimeTypes = [
+                                  ...(config.trustedMimeTypesForAutoRender ??
+                                    [])
+                                ];
+                                newMimeTypes.splice(index, 1);
+                                handleConfigUpdate({
+                                  trustedMimeTypesForAutoRender: newMimeTypes
+                                });
+                              }}
+                              size="small"
+                            >
+                              <Delete />
+                            </IconButton>
+                          }
+                        >
+                          <ListItemText primary={mimeType} />
+                        </ListItem>
+                      )
+                    )}
+                  </List>
+
+                  <TextField
+                    fullWidth
+                    label={trans.__('Add Trusted MIME Type')}
+                    placeholder={trans.__('e.g., text/html')}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        const value = (
+                          e.target as HTMLInputElement
+                        ).value.trim();
+                        const existingMimeTypes =
+                          config.trustedMimeTypesForAutoRender ?? [];
+                        if (value && !existingMimeTypes.includes(value)) {
+                          const newMimeTypes = [...existingMimeTypes, value];
+                          handleConfigUpdate({
+                            trustedMimeTypesForAutoRender: newMimeTypes
+                          });
+                          (e.target as HTMLInputElement).value = '';
+                        }
+                      }
+                    }}
+                    helperText={trans.__(
+                      'Press Enter to add a MIME type. Default: text/html'
+                    )}
+                  />
+                </Box>
+              </Box>
+            </CardContent>
+          </Card>
+        )}
+
+        {activeTab === 2 && (
+          <Card elevation={2}>
+            <CardContent>
+              {McpServerRenderer && <McpServerRenderer />}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Provider Configuration Dialog */}
+        <ProviderConfigDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          onSave={editingProvider ? handleEditProvider : handleAddProvider}
+          initialConfig={editingProvider}
+          mode={editingProvider ? 'edit' : 'add'}
+          providerRegistry={providerRegistry}
+          handleSecretField={handleSecretField}
+          trans={trans}
+        />
+
+        {/* Provider Menu */}
+        <Menu
+          anchorEl={menuAnchor}
+          open={Boolean(menuAnchor)}
+          onClose={handleMenuClose}
+        >
+          <MenuItem
+            onClick={() => {
+              const provider = config.providers.find(
+                p => p.id === menuProviderId
+              );
+              if (provider) {
+                openEditDialog(provider);
+              }
+            }}
+          >
+            <Edit sx={{ mr: 1 }} />
+            {trans.__('Edit')}
+          </MenuItem>
+          <MenuItem
+            onClick={() => handleDeleteProvider(menuProviderId)}
+            sx={{ color: 'error.main' }}
+          >
+            <Delete sx={{ mr: 1 }} />
+            {trans.__('Delete')}
+          </MenuItem>
+        </Menu>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+/**
+ * Namespace for AISettingsWidget types and interfaces
+ */
+export namespace AISettingsWidget {
+  /**
+   * Options interface for constructing an AISettingsWidget
+   */
+  export interface IOptions {
+    settingsModel: IAISettingsModel;
+    agentManagerFactory?: IAgentManagerFactory;
+    themeManager?: IThemeManager;
+    providerRegistry: IProviderRegistry;
+    /**
+     * Access to provider secrets in the shared namespace.
+     */
+    secretsAccess: IAISecretsAccess;
+    /**
+     * The application language translation bundle.
+     */
+    trans: TranslationBundle;
+    /**
+     * The renderer for the MCP settings.
+     */
+    mcpServerRenderer?: React.ComponentType<any>;
+  }
+}