@jupyterlite/ai 0.12.0 → 0.14.0

package/lib/index.js

@@ -1,6 +1,6 @@
 import { ILabShell, ILayoutRestorer } from '@jupyterlab/application';
-import { ActiveCellManager, AttachmentOpenerRegistry, chatIcon, ChatCommandRegistry, ChatWidget, IChatCommandRegistry, IInputToolbarRegistryFactory, InputToolbarRegistry, MultiChatPanel } from '@jupyter/chat';
-import { ICommandPalette, IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
+import { ActiveCellManager, AttachmentOpenerRegistry, chatIcon, ChatCommandRegistry, ChatWidget, IChatCommandRegistry, IChatTracker, IInputToolbarRegistryFactory, InputToolbarRegistry, MultiChatPanel } from '@jupyter/chat';
+import { ICommandPalette, IThemeManager, showErrorMessage, WidgetTracker } from '@jupyterlab/apputils';
 import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { INotebookTracker } from '@jupyterlab/notebook';
@@ -14,12 +14,13 @@ import { ISecretsManager, SecretsManager } from 'jupyter-secrets-manager';
 import { PromiseDelegate, UUID } from '@lumino/coreutils';
 import { DisposableSet } from '@lumino/disposable';
 import { AgentManagerFactory } from './agent';
+import { RenderedMessageOutputAreaCompat } from './rendered-message-outputarea';
 import { ClearCommandProvider } from './chat-commands/clear';
 import { SkillsCommandProvider } from './chat-commands/skills';
 import { ProviderRegistry } from './providers/provider-registry';
 import { ApprovalButtons } from './approval-buttons';
-import { ChatModelRegistry } from './chat-model-registry';
-import { CommandIds, IAgentManagerFactory, IProviderRegistry, IToolRegistry, ISkillRegistry, SECRETS_NAMESPACE, IAISettingsModel, IChatModelRegistry, IDiffManager } from './tokens';
+import { ChatModelHandler } from './chat-model-handler';
+import { CommandIds, IAgentManagerFactory, IProviderRegistry, IToolRegistry, ISkillRegistry, SECRETS_NAMESPACE, IAISettingsModel, IChatModelHandler, IDiffManager } from './tokens';
 import { anthropicProvider, googleProvider, mistralProvider, openaiProvider, genericProvider } from './providers/built-in-providers';
 import { AICompletionProvider } from './completion';
 import { clearItem, createModelSelectItem, createToolSelectItem, stopItem, CompletionStatusWidget, TokenUsageWidget } from './components';
@@ -29,8 +30,48 @@ import { DiffManager } from './diff-manager';
 import { ToolRegistry } from './tools/tool-registry';
 import { createDiscoverCommandsTool, createExecuteCommandTool } from './tools/commands';
 import { createDiscoverSkillsTool, createLoadSkillTool } from './tools/skills';
+import { createBrowserFetchTool } from './tools/web';
 import { AISettingsWidget } from './widgets/ai-settings';
 import { MainAreaChat } from './widgets/main-area-chat';
+var Private;
+(function (Private) {
+    let aiSecretsToken = null;
+    function setAISecretsToken(token) {
+        aiSecretsToken = token;
+    }
+    Private.setAISecretsToken = setAISecretsToken;
+    function createAISecretsAccess(secretsManager) {
+        return {
+            get isAvailable() {
+                return !!(aiSecretsToken && secretsManager);
+            },
+            async get(id) {
+                if (!aiSecretsToken || !secretsManager) {
+                    return;
+                }
+                const secret = await secretsManager.get(aiSecretsToken, SECRETS_NAMESPACE, id);
+                return secret?.value;
+            },
+            async set(id, value) {
+                if (!aiSecretsToken || !secretsManager) {
+                    return;
+                }
+                await secretsManager.set(aiSecretsToken, SECRETS_NAMESPACE, id, {
+                    namespace: SECRETS_NAMESPACE,
+                    id,
+                    value
+                });
+            },
+            async attach(id, input, callback) {
+                if (!aiSecretsToken || !secretsManager) {
+                    return;
+                }
+                await secretsManager.attach(aiSecretsToken, SECRETS_NAMESPACE, id, input, callback);
+            }
+        };
+    }
+    Private.createAISecretsAccess = createAISecretsAccess;
+})(Private || (Private = {}));
 /**
  * Provider registry plugin
  */
@@ -143,21 +184,27 @@ const skillsCommandPlugin = {
     }
 };
 /**
- * The chat model registry.
+ * The chat model handler.
  */
-const chatModelRegistry = {
-    id: '@jupyterlite/ai:chat-model-registry',
-    description: 'Registry for the current chat model',
+const chatModelHandler = {
+    id: '@jupyterlite/ai:chat-model-handler',
+    description: 'A handler to create current chat model',
     autoStart: true,
-    requires: [IAISettingsModel, IAgentManagerFactory, IDocumentManager],
+    requires: [
+        IAISettingsModel,
+        IAgentManagerFactory,
+        IDocumentManager,
+        IRenderMimeRegistry
+    ],
     optional: [IProviderRegistry, IToolRegistry, ITranslator],
-    provides: IChatModelRegistry,
-    activate: (app, settingsModel, agentManagerFactory, docManager, providerRegistry, toolRegistry, translator) => {
+    provides: IChatModelHandler,
+    activate: (app, settingsModel, agentManagerFactory, docManager, rmRegistry, providerRegistry, toolRegistry, translator) => {
         const trans = (translator ?? nullTranslator).load('jupyterlite_ai');
-        return new ChatModelRegistry({
+        return new ChatModelHandler({
             settingsModel,
             agentManagerFactory,
             docManager,
+            rmRegistry,
             providerRegistry,
             toolRegistry,
             trans
@@ -171,10 +218,11 @@ const plugin = {
     id: '@jupyterlite/ai:plugin',
     description: 'AI in JupyterLab',
     autoStart: true,
+    provides: IChatTracker,
     requires: [
         IRenderMimeRegistry,
         IInputToolbarRegistryFactory,
-        IChatModelRegistry,
+        IChatModelHandler,
         IAISettingsModel,
         IChatCommandRegistry
     ],
@@ -185,7 +233,7 @@ const plugin = {
         INotebookTracker,
         ITranslator
     ],
-    activate: (app, rmRegistry, inputToolbarFactory, modelRegistry, settingsModel, chatCommandRegistry, themeManager, restorer, labShell, notebookTracker, translator) => {
+    activate: (app, rmRegistry, inputToolbarFactory, modelHandler, settingsModel, chatCommandRegistry, themeManager, restorer, labShell, notebookTracker, translator) => {
         const trans = (translator ?? nullTranslator).load('jupyterlite_ai');
         // Create attachment opener registry to handle file attachments
         const attachmentOpenerRegistry = new AttachmentOpenerRegistry();
@@ -195,6 +243,11 @@ const plugin = {
         attachmentOpenerRegistry.set('notebook', attachment => {
             app.commands.execute('docmanager:open', { path: attachment.value });
         });
+        const openSettings = () => {
+            if (app.commands.hasCommand(CommandIds.openSettings)) {
+                void app.commands.execute(CommandIds.openSettings);
+            }
+        };
         // Create ActiveCellManager if notebook tracker is available, and add it to the
         // model registry.
         let activeCellManager;
@@ -204,7 +257,10 @@ const plugin = {
                 shell: app.shell
             });
         }
-        modelRegistry.activeCellManager = activeCellManager;
+        modelHandler.activeCellManager = activeCellManager;
+        // Creating the tracker for the chat widgets
+        const namespace = 'ai-chat';
+        const tracker = new WidgetTracker({ namespace });
         // Create chat panel with drag/drop functionality
         const chatPanel = new MultiChatPanel({
             rmRegistry,
@@ -212,19 +268,35 @@ const plugin = {
             inputToolbarFactory,
             attachmentOpenerRegistry,
             chatCommandRegistry,
-            createModel: async (name) => {
-                const model = modelRegistry.createModel(name);
+            createModel: async (provider) => {
+                if (!provider) {
+                    provider = settingsModel.getDefaultProvider()?.id;
+                    if (!provider) {
+                        showErrorMessage('Error creating chat', 'Please set up a provider');
+                        openSettings();
+                        return {};
+                    }
+                }
+                let name = settingsModel.getProvider(provider)?.name ?? UUID.uuid4();
+                const modelName = name;
+                const existingName = new Set(chatPanel.getLoadedModelNames());
+                tracker.forEach(widget => existingName.add(widget.model.name));
+                let i = 1;
+                while (existingName.has(name)) {
+                    name = `${modelName}-${i}`;
+                    i += 1;
+                }
+                const model = modelHandler.createModel(name, provider);
                 return { model };
             },
-            renameChat: async (oldName, newName) => {
-                const model = modelRegistry.get(oldName);
-                const concurrencyModel = modelRegistry.get(newName);
-                if (model && !concurrencyModel) {
-                    model.name = newName;
-                    return true;
-                }
-                return false;
+            getChatNames: async () => {
+                const names = {};
+                settingsModel.config.providers.forEach(provider => {
+                    names[provider.name] = provider.id;
+                });
+                return names;
             },
+            renameChat: true,
             openInMain: (name) => app.commands.execute(CommandIds.moveChat, {
                 area: 'main',
                 name
@@ -234,30 +306,53 @@ const plugin = {
         chatPanel.title.icon = chatIcon;
         chatPanel.title.caption = trans.__('Chat with AI assistant');
         chatPanel.toolbar.addItem('spacer', Toolbar.createSpacerItem());
-        chatPanel.toolbar.addItem('settings', new ToolbarButton({
-            icon: settingsIcon,
-            onClick: () => {
-                app.commands.execute('@jupyterlite/ai:open-settings');
-            },
-            tooltip: trans.__('Open AI Settings')
-        }));
-        chatPanel.sectionAdded.connect((_, section) => {
-            const { widget } = section;
-            const model = section.model;
+        const addSettingsButton = () => {
+            chatPanel.toolbar.addItem('settings', new ToolbarButton({
+                icon: settingsIcon,
+                onClick: openSettings,
+                tooltip: trans.__('Open AI Settings')
+            }));
+        };
+        if (app.commands.hasCommand(CommandIds.openSettings)) {
+            addSettingsButton();
+        }
+        else {
+            const disconnectSettingsButtonListener = () => {
+                app.commands.commandChanged.disconnect(onCommandChanged);
+                chatPanel.disposed.disconnect(disconnectSettingsButtonListener);
+            };
+            const onCommandChanged = (_, args) => {
+                if (args.id === CommandIds.openSettings && args.type === 'added') {
+                    disconnectSettingsButtonListener();
+                    addSettingsButton();
+                }
+            };
+            app.commands.commandChanged.connect(onCommandChanged);
+            chatPanel.disposed.connect(disconnectSettingsButtonListener);
+        }
+        let tokenUsageWidget = null;
+        chatPanel.chatOpened.connect((_, widget) => {
+            const model = widget.model;
             // Add the widget to the tracker.
             tracker.add(widget);
+            function saveTracker() {
+                tracker.save(widget);
+            }
             // Update the tracker if the model name changed.
-            model.nameChanged.connect(() => tracker.save(widget));
+            model.nameChanged.connect(saveTracker);
             // Update the tracker if the active provider changed.
-            model.agentManager.activeProviderChanged.connect(() => tracker.save(widget));
-            const tokenUsageWidget = new TokenUsageWidget({
+            model.agentManager.activeProviderChanged.connect(saveTracker);
+            // Update the token usage widget.
+            tokenUsageWidget?.dispose();
+            tokenUsageWidget = new TokenUsageWidget({
                 tokenUsageChanged: model.tokenUsageChanged,
                 settingsModel,
                 initialTokenUsage: model.agentManager.tokenUsage,
                 translator: trans
             });
-            section.toolbar.insertBefore('markRead', 'token-usage', tokenUsageWidget);
-            model.writersChanged?.connect((_, writers) => {
+            chatPanel.current?.toolbar.insertBefore('markRead', 'token-usage', tokenUsageWidget);
+            // Listen for writers change to display the stop button.
+            function writersChanged(_, writers) {
                 // Check if AI is currently writing (streaming)
                 const aiWriting = writers.some(writer => writer.user.username === 'ai-assistant');
                 if (aiWriting) {
@@ -268,23 +363,28 @@ const plugin = {
                     widget.inputToolbarRegistry?.hide('stop');
                     widget.inputToolbarRegistry?.show('send');
                 }
-            });
+            }
+            model.writersChanged?.connect(writersChanged);
             // Associate an approval buttons object to the chat.
             const approvalButton = new ApprovalButtons({
                 chatPanel: widget,
                 agentManager: model.agentManager
             });
+            // Temporary compat: keep output-area CSS context for MIME renderers
+            // until jupyter-chat provides it natively.
+            const outputAreaCompat = new RenderedMessageOutputAreaCompat({
+                chatPanel: widget
+            });
             widget.disposed.connect(() => {
+                model.nameChanged.disconnect(saveTracker);
+                model.agentManager.activeProviderChanged.disconnect(saveTracker);
+                model.writersChanged?.disconnect(writersChanged);
                 // Dispose of the approval buttons widget when the chat is disposed.
                 approvalButton.dispose();
-                // Remove the model from the registry when the widget is disposed.
-                modelRegistry.remove(model.name);
+                outputAreaCompat.dispose();
             });
         });
         app.shell.add(chatPanel, 'left', { rank: 1000 });
-        // Creating the tracker for the document
-        const namespace = 'ai-chat';
-        const tracker = new WidgetTracker({ namespace });
         if (restorer) {
             restorer.add(chatPanel, chatPanel.id);
             void restorer.restore(tracker, {
@@ -302,12 +402,12 @@ const plugin = {
         }
         // Create a chat with default provider at startup.
         app.restored.then(() => {
-            if (!modelRegistry.getAll().length &&
-                settingsModel.config.defaultProvider) {
+            if (!tracker.size && settingsModel.config.defaultProvider) {
                 app.commands.execute(CommandIds.openChat);
             }
         });
-        registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry, inputToolbarFactory, settingsModel, chatCommandRegistry, tracker, modelRegistry, trans, themeManager, labShell);
+        registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry, inputToolbarFactory, settingsModel, chatCommandRegistry, tracker, modelHandler, trans, themeManager, labShell);
+        return tracker;
     }
 };
 function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry, inputToolbarFactory, settingsModel, chatCommandRegistry, tracker, modelRegistry, trans, themeManager, labShell) {
@@ -373,13 +473,16 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
             app.shell.add(widget, 'main');
             // Add the widget to the tracker.
             tracker.add(widget);
+            function saveTracker() {
+                tracker.save(widget);
+            }
             // Update the tracker if the model name changed.
-            model.nameChanged.connect(() => tracker.save(widget));
+            model.nameChanged.connect(saveTracker);
             // Update the tracker if the active provider changed.
-            model.agentManager.activeProviderChanged.connect(() => tracker.save(widget));
-            // Remove the model from the registry when the widget is disposed.
+            model.agentManager.activeProviderChanged.connect(saveTracker);
             widget.disposed.connect(() => {
-                modelRegistry.remove(model.name);
+                model.nameChanged.disconnect(saveTracker);
+                model.agentManager.activeProviderChanged.disconnect(saveTracker);
             });
         };
         commands.addCommand(CommandIds.openChat, {
@@ -387,11 +490,23 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
             execute: async (args) => {
                 const area = args.area === 'main' ? 'main' : 'side';
                 const provider = args.provider ?? undefined;
-                // Do not open the chat if the provider in args does not exists in settings.
-                if (provider && !settingsModel.getProvider(provider)) {
+                let name = args.name ?? undefined;
+                let providerConfig = undefined;
+                if (provider) {
+                    providerConfig = settingsModel.getProvider(provider);
+                }
+                else {
+                    providerConfig = settingsModel.getDefaultProvider();
+                }
+                // Do not open the chat if the provider in args does not exists in settings or
+                // if there is no default provider.
+                if (!providerConfig) {
                     return false;
                 }
-                const model = modelRegistry.createModel(args.name ? args.name : undefined, provider);
+                if (!name) {
+                    name = providerConfig.name;
+                }
+                const model = modelRegistry.createModel(name, provider);
                 if (!model) {
                     return false;
                 }
@@ -399,7 +514,7 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
                     openInMain(model);
                 }
                 else {
-                    chatPanel.addChat({ model });
+                    chatPanel.open({ model });
                 }
                 return true;
             },
@@ -436,7 +551,14 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
                     console.error('Error while moving the chat to main area: the name has not been provided');
                     return false;
                 }
-                const previousModel = modelRegistry.get(args.name);
+                let previousWidget;
+                let previousModel;
+                tracker.forEach(widget => {
+                    if (widget.model.name === args.name) {
+                        previousWidget = widget;
+                        previousModel = widget.model;
+                    }
+                });
                 if (!previousModel) {
                     console.error('Error while moving the chat to main area: there is no reference model');
                     return false;
@@ -455,8 +577,10 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
                 // model. The previous is intended to be disposed anyway.
                 previousModel.name = UUID.uuid4();
                 // Create a new model by duplicating the previous model attributes.
-                const model = modelRegistry.createModel(args.name, previousModel?.agentManager.activeProvider, previousModel?.agentManager.tokenUsage);
-                previousModel?.messages.forEach(message => model?.messageAdded(message));
+                const model = modelRegistry.createModel(args.name, previousModel.agentManager.activeProvider, previousModel.agentManager.tokenUsage);
+                previousModel?.messages.forEach(message => {
+                    model?.messageAdded({ ...message.content });
+                });
                 // Wait (with timeout) for the tracker to have updated the previous widget.
                 const status = await Promise.any([
                     trackerUpdated.promise,
@@ -472,13 +596,9 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
                     openInMain(model);
                 }
                 else {
-                    const current = app.shell.currentWidget;
-                    // Remove the current main area chat.
-                    if (current instanceof MainAreaChat &&
-                        current.model.name === previousModel.name) {
-                        current.dispose();
-                    }
-                    chatPanel.addChat({ model });
+                    previousWidget?.dispose();
+                    previousModel.dispose();
+                    chatPanel.open({ model });
                 }
                 return true;
             },
@@ -489,7 +609,7 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
                         area: {
                             type: 'string',
                             enum: ['main', 'side'],
-                            description: trans.__('The name of the area to move the chat to')
+                            description: trans.__('The area to move the chat to')
                         },
                         name: {
                             type: 'string',
@@ -503,57 +623,78 @@ function registerCommands(app, rmRegistry, chatPanel, attachmentOpenerRegistry,
     }
 }
 /**
- * A plugin to provide the settings model.
+ * A plugin to provide the agent manager factory and completion provider.
+ * These objects require the secrets manager token with the same namespace.
+ */
+const agentManagerFactory = SecretsManager.sign(SECRETS_NAMESPACE, token => {
+    Private.setAISecretsToken(token);
+    return {
+        id: SECRETS_NAMESPACE,
+        description: 'Provide the AI agent manager',
+        autoStart: true,
+        provides: IAgentManagerFactory,
+        requires: [IAISettingsModel, IProviderRegistry],
+        optional: [ISkillRegistry, ICompletionProviderManager, ISecretsManager],
+        activate: (app, settingsModel, providerRegistry, skillRegistry, completionManager, secretsManager) => {
+            const agentManagerFactory = new AgentManagerFactory({
+                settingsModel,
+                skillRegistry,
+                secretsManager,
+                token
+            });
+            // Build the completion provider
+            if (completionManager) {
+                const completionProvider = new AICompletionProvider({
+                    settingsModel,
+                    providerRegistry,
+                    secretsManager,
+                    token
+                });
+                completionManager.registerInlineProvider(completionProvider);
+            }
+            else {
+                console.info('Completion provider manager not available, skipping AI completion setup');
+            }
+            return agentManagerFactory;
+        }
+    };
+});
+/**
+ * AI settings panel plugin.
  */
-const agentManagerFactory = SecretsManager.sign(SECRETS_NAMESPACE, token => ({
-    id: SECRETS_NAMESPACE,
-    description: 'Provide the AI agent manager',
+const settingsPanelPlugin = {
+    id: '@jupyterlite/ai:settings-panel',
+    description: 'Provide the AI settings panel',
     autoStart: true,
-    provides: IAgentManagerFactory,
-    requires: [IAISettingsModel, IProviderRegistry],
+    requires: [IAISettingsModel, IAgentManagerFactory, IProviderRegistry],
     optional: [
-        ISkillRegistry,
         ICommandPalette,
-        ICompletionProviderManager,
         ILayoutRestorer,
         ISecretsManager,
         IThemeManager,
         ITranslator
     ],
-    activate: (app, settingsModel, providerRegistry, skillRegistry, palette, completionManager, restorer, secretsManager, themeManager, translator) => {
+    activate: (app, settingsModel, agentManagerFactory, providerRegistry, palette, restorer, secretsManager, themeManager, translator) => {
         const trans = (translator ?? nullTranslator).load('jupyterlite_ai');
-        const agentManagerFactory = new AgentManagerFactory({
-            settingsModel,
-            skillRegistry,
-            secretsManager,
-            token
-        });
-        // Build the settings panel
+        const secretsAccess = Private.createAISecretsAccess(secretsManager);
         const settingsWidget = new AISettingsWidget({
             settingsModel,
             agentManagerFactory,
             themeManager,
             providerRegistry,
-            secretsManager,
-            token,
+            secretsAccess,
             trans
         });
-        settingsWidget.id = 'jupyterlite-ai-settings';
         settingsWidget.title.icon = settingsIcon;
         settingsWidget.title.iconClass = 'jp-ai-settings-icon';
-        // Build the completion provider
-        if (completionManager) {
-            const completionProvider = new AICompletionProvider({
-                settingsModel,
-                providerRegistry,
-                secretsManager,
-                token
-            });
-            completionManager.registerInlineProvider(completionProvider);
-        }
-        else {
-            console.info('Completion provider manager not available, skipping AI completion setup');
-        }
+        const open = () => {
+            let widget = Array.from(app.shell.widgets('main')).find(w => w.id === 'jupyterlite-ai-settings');
+            if (!widget) {
+                widget = settingsWidget;
+                app.shell.add(widget, 'main');
+            }
+            app.shell.activateById(widget.id);
+        };
         if (restorer) {
             restorer.add(settingsWidget, settingsWidget.id);
         }
@@ -563,31 +704,20 @@ const agentManagerFactory = SecretsManager.sign(SECRETS_NAMESPACE, token => ({
             icon: settingsIcon,
             iconClass: 'jp-ai-settings-icon',
             execute: () => {
-                // Check if the widget already exists in shell
-                let widget = Array.from(app.shell.widgets('main')).find(w => w.id === 'jupyterlite-ai-settings');
-                if (!widget && settingsWidget) {
-                    // Use the pre-created widget
-                    widget = settingsWidget;
-                    app.shell.add(widget, 'main');
-                }
-                if (widget) {
-                    app.shell.activateById(widget.id);
-                }
+                open();
             },
             describedBy: {
                 args: {}
             }
         });
-        // Add to command palette if available
         if (palette) {
             palette.addItem({
                 command: CommandIds.openSettings,
                 category: trans.__('AI Assistant')
             });
         }
-        return agentManagerFactory;
     }
-}));
+};
 /**
  * Built-in completion providers plugin
  */
@@ -643,6 +773,7 @@ const toolRegistry = {
         const executeCommandTool = createExecuteCommandTool(app.commands, settingsModel);
         toolRegistry.add('discover_commands', discoverCommandsTool);
         toolRegistry.add('execute_command', executeCommandTool);
+        toolRegistry.add('browser_fetch', createBrowserFetchTool());
         if (skillRegistry) {
             toolRegistry.add('discover_skills', createDiscoverSkillsTool(skillRegistry));
             toolRegistry.add('load_skill', createLoadSkillTool(skillRegistry));
@@ -658,13 +789,13 @@ const inputToolbarFactory = {
     description: 'The input toolbar registry plugin.',
     autoStart: true,
     provides: IInputToolbarRegistryFactory,
-    requires: [IAISettingsModel, IToolRegistry],
+    requires: [IAISettingsModel, IToolRegistry, IProviderRegistry],
     optional: [ITranslator],
-    activate: (app, settingsModel, toolRegistry, translator) => {
+    activate: (app, settingsModel, toolRegistry, providerRegistry, translator) => {
         const trans = (translator ?? nullTranslator).load('jupyterlite_ai');
         const stopButton = stopItem(trans);
         const clearButton = clearItem(trans);
-        const toolSelectButton = createToolSelectItem(toolRegistry, settingsModel.config.toolsEnabled, trans);
+        const toolSelectButton = createToolSelectItem(toolRegistry, settingsModel, providerRegistry, settingsModel.config.toolsEnabled, trans);
         const modelSelectButton = createModelSelectItem(settingsModel, trans);
         return {
             create() {
@@ -828,10 +959,11 @@ export default [
     clearCommandPlugin,
     skillRegistryPlugin,
     skillsCommandPlugin,
-    chatModelRegistry,
+    chatModelHandler,
     plugin,
     toolRegistry,
     agentManagerFactory,
+    settingsPanelPlugin,
     inputToolbarFactory,
     completionStatus,
     skillsPlugin

package/lib/models/settings-model.d.ts

@@ -41,6 +41,8 @@ export interface IAIConfig {
     sendWithShiftEnter: boolean;
     showTokenUsage: boolean;
     commandsRequiringApproval: string[];
+    commandsAutoRenderMimeBundles: string[];
+    trustedMimeTypesForAutoRender: string[];
     showCellDiff: boolean;
     showFileDiff: boolean;
     diffDisplayMode: 'split' | 'unified';

package/lib/models/settings-model.js

@@ -33,6 +33,8 @@ export class AISettingsModel extends VDomModel {
             'runmenu:run-all',
             'jupyterlab-ai-commands:run-cell'
         ],
+        commandsAutoRenderMimeBundles: ['jupyterlab-ai-commands:execute-in-kernel'],
+        trustedMimeTypesForAutoRender: ['text/html'],
         systemPrompt: `You are Jupyternaut, an AI coding assistant built specifically for the JupyterLab environment.
 
 ## Your Core Mission