@jupyterlite/ai 0.12.0 → 0.14.0

package/lib/tools/web.js

@@ -0,0 +1,196 @@
+import { tool } from 'ai';
+import { z } from 'zod';
+const DEFAULT_MAX_CONTENT_CHARS = 20000;
+const MAX_ALLOWED_CONTENT_CHARS = 100000;
+const DEFAULT_TIMEOUT_MS = 20000;
+const MAX_TIMEOUT_MS = 120000;
+/**
+ * Read response body text with a character cap.
+ *
+ * Stops early once the cap is reached to avoid buffering arbitrarily large
+ * payloads in memory.
+ */
+async function readResponseText(response, maxContentChars) {
+    if (!response.body) {
+        const body = await response.text();
+        return {
+            content: body.slice(0, maxContentChars),
+            isTruncated: body.length > maxContentChars,
+            totalChars: body.length,
+            totalCharsExact: true
+        };
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let content = '';
+    let totalChars = 0;
+    let isTruncated = false;
+    let done = false;
+    while (!done) {
+        const readResult = await reader.read();
+        done = readResult.done;
+        if (done) {
+            continue;
+        }
+        const chunk = decoder.decode(readResult.value, { stream: true });
+        if (!chunk) {
+            continue;
+        }
+        totalChars += chunk.length;
+        if (!isTruncated) {
+            const remaining = maxContentChars - content.length;
+            if (chunk.length <= remaining) {
+                content += chunk;
+            }
+            else {
+                content += chunk.slice(0, remaining);
+                isTruncated = true;
+            }
+        }
+        if (isTruncated) {
+            await reader.cancel();
+            return {
+                content,
+                isTruncated: true,
+                totalChars,
+                totalCharsExact: false
+            };
+        }
+    }
+    const tail = decoder.decode();
+    if (tail) {
+        totalChars += tail.length;
+        const remaining = maxContentChars - content.length;
+        if (tail.length <= remaining) {
+            content += tail;
+        }
+        else {
+            content += tail.slice(0, remaining);
+            isTruncated = true;
+        }
+    }
+    return {
+        content,
+        isTruncated,
+        totalChars,
+        totalCharsExact: true
+    };
+}
+/**
+ * Create a browser-native URL fetch tool.
+ *
+ * This is best-effort and subject to normal browser constraints (CORS, CSP,
+ * mixed content, bot protections).
+ */
+export function createBrowserFetchTool() {
+    return tool({
+        title: 'Browser Fetch',
+        description: 'Fetch a URL directly from the browser using HTTP GET for exact URL inspection when CORS/access permits.',
+        inputSchema: z.object({
+            url: z.string().describe('HTTP(S) URL to fetch'),
+            maxContentChars: z
+                .number()
+                .int()
+                .min(1)
+                .max(MAX_ALLOWED_CONTENT_CHARS)
+                .optional()
+                .describe(`Maximum number of response characters to return (default: ${DEFAULT_MAX_CONTENT_CHARS})`),
+            timeoutMs: z
+                .number()
+                .int()
+                .min(1000)
+                .max(MAX_TIMEOUT_MS)
+                .optional()
+                .describe(`Timeout in milliseconds (default: ${DEFAULT_TIMEOUT_MS}, max: ${MAX_TIMEOUT_MS})`)
+        }),
+        execute: async (input) => {
+            const maxContentChars = Math.min(input.maxContentChars ?? DEFAULT_MAX_CONTENT_CHARS, MAX_ALLOWED_CONTENT_CHARS);
+            const timeoutMs = Math.min(input.timeoutMs ?? DEFAULT_TIMEOUT_MS, MAX_TIMEOUT_MS);
+            let parsedUrl;
+            try {
+                parsedUrl = new URL(input.url);
+            }
+            catch {
+                return {
+                    success: false,
+                    errorType: 'invalid_url',
+                    error: 'Invalid URL format',
+                    url: input.url
+                };
+            }
+            if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
+                return {
+                    success: false,
+                    errorType: 'unsupported_protocol',
+                    error: 'Only http:// and https:// URLs are supported',
+                    url: input.url
+                };
+            }
+            const controller = new AbortController();
+            const timeoutHandle = setTimeout(() => controller.abort(), timeoutMs);
+            try {
+                const response = await fetch(parsedUrl.toString(), {
+                    method: 'GET',
+                    credentials: 'omit',
+                    redirect: 'follow',
+                    signal: controller.signal,
+                    headers: {
+                        Accept: 'text/html,text/plain,application/json,text/markdown,*/*;q=0.8'
+                    }
+                });
+                const contentType = response.headers.get('content-type') || '';
+                const contentLength = response.headers.get('content-length');
+                const body = await readResponseText(response, maxContentChars);
+                const success = response.ok;
+                return {
+                    success,
+                    url: response.url,
+                    requestedUrl: parsedUrl.toString(),
+                    status: response.status,
+                    statusText: response.statusText,
+                    contentType,
+                    contentLength,
+                    ...(success
+                        ? {}
+                        : {
+                            errorType: 'http_error',
+                            error: `HTTP ${response.status} ${response.statusText}`
+                        }),
+                    isTruncated: body.isTruncated,
+                    returnedChars: body.content.length,
+                    totalChars: body.totalChars,
+                    totalCharsExact: body.totalCharsExact,
+                    content: body.content,
+                    limitations: 'Browser fetch is subject to CORS, site bot protections, and browser network policy.'
+                };
+            }
+            catch (error) {
+                if (error.name === 'AbortError') {
+                    return {
+                        success: false,
+                        errorType: 'timeout',
+                        error: `Request timed out after ${timeoutMs} ms`,
+                        url: parsedUrl.toString()
+                    };
+                }
+                return {
+                    success: false,
+                    errorType: 'network_or_cors',
+                    error: error instanceof Error && error.message
+                        ? error.message
+                        : 'Fetch failed',
+                    url: parsedUrl.toString(),
+                    likelyCauses: [
+                        'CORS blocked by the target website',
+                        'DNS/network resolution failure',
+                        'TLS/certificate issue',
+                        'Target server rejected browser access'
+                    ]
+                };
+            }
+            finally {
+                clearTimeout(timeoutHandle);
+            }
+        }
+    });
+}

package/lib/widgets/ai-settings.d.ts

@@ -1,11 +1,10 @@
 import { IThemeManager } from '@jupyterlab/apputils';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
-import { ISecretsManager } from 'jupyter-secrets-manager';
 import React from 'react';
 import { AgentManagerFactory } from '../agent';
 import { AISettingsModel } from '../models/settings-model';
-import { type IProviderRegistry } from '../tokens';
+import { type IAISecretsAccess, type IProviderRegistry } from '../tokens';
 /**
  * A JupyterLab widget for AI settings configuration
  */
@@ -24,7 +23,7 @@ export declare class AISettingsWidget extends ReactWidget {
     private _agentManagerFactory?;
     private _themeManager?;
     private _providerRegistry;
-    private _secretsManager?;
+    private _secretsAccess?;
     private _trans;
 }
 /**
@@ -40,13 +39,9 @@ export declare namespace AISettingsWidget {
         themeManager?: IThemeManager;
         providerRegistry: IProviderRegistry;
         /**
-         * The secrets manager.
+         * Access to provider secrets in the shared namespace.
          */
-        secretsManager?: ISecretsManager;
-        /**
-         * The token used to request the secrets manager.
-         */
-        token: symbol;
+        secretsAccess: IAISecretsAccess;
         /**
          * The application language translation bundle.
          */

package/lib/widgets/ai-settings.js

@@ -11,9 +11,9 @@ import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import MoreVert from '@mui/icons-material/MoreVert';
 import Settings from '@mui/icons-material/Settings';
-import { Alert, Box, Button, Card, CardContent, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControl, FormControlLabel, IconButton, InputLabel, List, ListItem, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Select, Switch, Tab, Tabs, TextField, ThemeProvider, Tooltip, Typography, createTheme } from '@mui/material';
+import { Alert, Box, Button, Card, CardContent, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControl, FormControlLabel, IconButton, InputLabel, List, ListItem, ListItemText, Menu, MenuItem, Select, Switch, Tab, Tabs, TextField, ThemeProvider, Tooltip, Typography, createTheme } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
-import { SECRETS_NAMESPACE, SECRETS_REPLACEMENT } from '../tokens';
+import { SECRETS_REPLACEMENT } from '../tokens';
 import { ProviderConfigDialog } from './provider-config-dialog';
 /**
  * Create a theme that uses IThemeManager to detect theme
@@ -41,30 +41,34 @@ export class AISettingsWidget extends ReactWidget {
      */
     constructor(options) {
         super();
-        Private.setToken(options.token);
         this._settingsModel = options.settingsModel;
         this._agentManagerFactory = options.agentManagerFactory;
         this._themeManager = options.themeManager;
         this._providerRegistry = options.providerRegistry;
-        this._secretsManager = options.secretsManager;
+        this._secretsAccess = options.secretsAccess;
         this._trans = options.trans;
         this.id = 'jupyterlite-ai-settings';
         this.title.label = this._trans.__('AI Settings');
         this.title.caption = this._trans.__('Configure AI providers and behavior');
         this.title.closable = true;
+        // Disable the secrets manager if the token is empty.
+        if (!options.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, secretsManager: this._secretsManager, trans: this._trans }));
+        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsAccess: this._secretsAccess, trans: this._trans }));
     }
     _settingsModel;
     _agentManagerFactory;
     _themeManager;
     _providerRegistry;
-    _secretsManager;
+    _secretsAccess;
     _trans;
 }
 /**
@@ -72,7 +76,7 @@ export class AISettingsWidget extends ReactWidget {
  * @param props - Component props containing models and theme manager
  * @returns A React component for AI settings configuration
  */
-const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsManager, trans }) => {
+const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsAccess, trans }) => {
     if (!model) {
         return React.createElement("div", null, trans.__('Settings model not available'));
     }
@@ -169,15 +173,10 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         void promptDebouncer.invoke();
     };
     const getSecretFromManager = async (provider, fieldName) => {
-        const secret = await secretsManager?.get(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`);
-        return secret?.value;
+        return secretsAccess?.get(`${provider}:${fieldName}`);
     };
     const setSecretToManager = async (provider, fieldName, value) => {
-        await secretsManager?.set(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`, {
-            namespace: SECRETS_NAMESPACE,
-            id: `${provider}:${fieldName}`,
-            value
-        });
+        await secretsAccess?.set(`${provider}:${fieldName}`, value);
     };
     /**
      * Attach a secrets field to the secrets manager.
@@ -186,10 +185,10 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
      * @param fieldName - the name of the field.
      */
     const handleSecretField = async (input, provider, fieldName) => {
-        if (!(model.config.useSecretsManager && secretsManager)) {
+        if (!(model.config.useSecretsManager && secretsAccess?.isAvailable)) {
             return;
         }
-        await secretsManager?.attach(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`, input);
+        await secretsAccess.attach(`${provider}:${fieldName}`, input);
     };
     /**
      * Handle adding a new AI provider
@@ -197,7 +196,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
      */
     const handleAddProvider = async (providerConfig) => {
         if (model.config.useSecretsManager &&
-            secretsManager &&
+            secretsAccess?.isAvailable &&
             providerConfig.apiKey) {
             providerConfig.apiKey = SECRETS_REPLACEMENT;
         }
@@ -210,7 +209,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
     const handleEditProvider = async (providerConfig) => {
         if (editingProvider) {
             if (model.config.useSecretsManager &&
-                secretsManager &&
+                secretsAccess?.isAvailable &&
                 providerConfig.apiKey) {
                 providerConfig.apiKey = SECRETS_REPLACEMENT;
             }
@@ -232,7 +231,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
      */
     const openEditDialog = async (provider) => {
         // Retrieve the API key from the secrets manager if necessary.
-        if (model.config.useSecretsManager && secretsManager) {
+        if (model.config.useSecretsManager && secretsAccess?.isAvailable) {
             provider.apiKey =
                 (await getSecretFromManager(provider.provider, 'apiKey')) ?? '';
         }
@@ -271,22 +270,29 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         if (updates.useSecretsManager !== undefined) {
             if (updates.useSecretsManager) {
                 for (const provider of model.config.providers) {
-                    // if the secrets manager doesn't have the current API key, copy the current
+                    const settingsApiKey = provider.apiKey;
+                    // If the secrets manager doesn't have the current API key, set the current
                     // one from settings.
+                    // Update the settings value with SECRETS_REPLACEMENT if a key exist in the
+                    // secrets manager (was already there or a value was set in settings).
                     if (!(await getSecretFromManager(provider.provider, 'apiKey'))) {
-                        setSecretToManager(provider.provider, 'apiKey', provider.apiKey ?? '');
+                        if (settingsApiKey !== undefined) {
+                            setSecretToManager(provider.provider, 'apiKey', settingsApiKey !== SECRETS_REPLACEMENT ? settingsApiKey : '');
+                            provider.apiKey = SECRETS_REPLACEMENT;
+                            await model.updateProvider(provider.id, provider);
+                        }
+                    }
+                    else {
+                        provider.apiKey = SECRETS_REPLACEMENT;
+                        await model.updateProvider(provider.id, provider);
                     }
-                    provider.apiKey = SECRETS_REPLACEMENT;
-                    await model.updateProvider(provider.id, provider);
                 }
             }
             else {
                 for (const provider of model.config.providers) {
                     const apiKey = await getSecretFromManager(provider.provider, 'apiKey');
-                    if (apiKey) {
-                        provider.apiKey = apiKey;
-                        await model.updateProvider(provider.id, provider);
-                    }
+                    provider.apiKey = apiKey;
+                    await model.updateProvider(provider.id, provider);
                 }
             }
         }
@@ -400,7 +406,13 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                             const isActiveCompleter = config.useSameProviderForChatAndCompleter
                                 ? isActive
                                 : config.activeCompleterProvider === provider.id;
+                            const providerInfo = providerRegistry.getProviderInfo(provider.provider);
+                            const providerToolCapabilities = providerInfo?.providerToolCapabilities;
                             const params = provider.parameters;
+                            const webSearchEnabled = !!providerToolCapabilities?.webSearch &&
+                                provider.customSettings?.webSearch?.enabled === true;
+                            const webFetchEnabled = !!providerToolCapabilities?.webFetch &&
+                                provider.customSettings?.webFetch?.enabled === true;
                             return (React.createElement(ListItem, { key: provider.id, sx: {
                                     flexDirection: 'column',
                                     alignItems: 'stretch',
@@ -429,22 +441,25 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             provider.model,
                                             provider.description &&
                                                 ` • ${provider.description}`),
-                                        params &&
-                                            (params.temperature !== undefined ||
-                                                params.maxOutputTokens !== undefined ||
-                                                params.maxTurns !== undefined) && (React.createElement(Box, { sx: {
+                                        (params?.temperature !== undefined ||
+                                            params?.maxOutputTokens !== undefined ||
+                                            params?.maxTurns !== undefined ||
+                                            webSearchEnabled ||
+                                            webFetchEnabled) && (React.createElement(Box, { sx: {
                                                 display: 'flex',
                                                 flexWrap: 'wrap',
                                                 gap: 1,
                                                 mt: 1
                                             } },
-                                            params.temperature !== undefined && (React.createElement(Chip, { label: trans.__('Temp: %1', params.temperature), size: "small", variant: "outlined" })),
-                                            params.maxOutputTokens !== undefined && (React.createElement(Chip, { label: trans.__('Tokens: %1', params.maxOutputTokens), size: "small", variant: "outlined" })),
-                                            params.maxTurns !== undefined && (React.createElement(Chip, { label: trans.__('Turns: %1', params.maxTurns), size: "small", variant: "outlined" }))))),
+                                            params?.temperature !== undefined && (React.createElement(Chip, { label: trans.__('Temp: %1', params.temperature), size: "small", variant: "outlined" })),
+                                            params?.maxOutputTokens !== undefined && (React.createElement(Chip, { label: trans.__('Tokens: %1', params.maxOutputTokens), size: "small", variant: "outlined" })),
+                                            params?.maxTurns !== undefined && (React.createElement(Chip, { label: trans.__('Turns: %1', params.maxTurns), size: "small", variant: "outlined" })),
+                                            webSearchEnabled && (React.createElement(Chip, { label: trans.__('Web Search'), size: "small", variant: "outlined", color: "info" })),
+                                            webFetchEnabled && (React.createElement(Chip, { label: trans.__('Web Fetch'), size: "small", variant: "outlined", color: "info" }))))),
                                     React.createElement(IconButton, { onClick: e => handleMenuClick(e, provider.id), size: "small" },
                                         React.createElement(MoreVert, null)))));
                         }))))),
-                secretsManager !== undefined && (React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSecretsManager, onChange: e => handleConfigUpdate({
+                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')),
@@ -523,19 +538,17 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         React.createElement(Box, null,
                             React.createElement(Typography, { variant: "body1", gutterBottom: true }, trans.__('Commands Requiring Approval')),
                             React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, trans.__('Commands that require user approval before AI can execute them')),
-                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, config.commandsRequiringApproval.map((command, index) => (React.createElement(ListItem, { key: index, divider: true },
-                                React.createElement(ListItemText, { primary: command }),
-                                React.createElement(ListItemSecondaryAction, null,
-                                    React.createElement(IconButton, { onClick: () => {
-                                            const newCommands = [
-                                                ...config.commandsRequiringApproval
-                                            ];
-                                            newCommands.splice(index, 1);
-                                            handleConfigUpdate({
-                                                commandsRequiringApproval: newCommands
-                                            });
-                                        }, size: "small" },
-                                        React.createElement(Delete, null))))))),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, config.commandsRequiringApproval.map((command, index) => (React.createElement(ListItem, { key: index, divider: true, secondaryAction: React.createElement(IconButton, { onClick: () => {
+                                        const newCommands = [
+                                            ...config.commandsRequiringApproval
+                                        ];
+                                        newCommands.splice(index, 1);
+                                        handleConfigUpdate({
+                                            commandsRequiringApproval: newCommands
+                                        });
+                                    }, size: "small" },
+                                    React.createElement(Delete, null)) },
+                                React.createElement(ListItemText, { primary: command }))))),
                             React.createElement(TextField, { fullWidth: true, label: trans.__('Add New Command'), placeholder: trans.__('e.g., notebook:run-cell'), onKeyDown: e => {
                                     if (e.key === 'Enter') {
                                         const value = e.target.value.trim();
@@ -551,7 +564,65 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             e.target.value = '';
                                         }
                                     }
-                                }, helperText: trans.__('Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code') })))))),
+                                }, helperText: trans.__('Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code') })),
+                        React.createElement(Divider, { sx: { my: 2 } }),
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, trans.__('Commands Auto-Rendering MIME Bundles')),
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, trans.__('Only these execute_command command IDs can auto-render MIME bundle outputs in chat')),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, (config.commandsAutoRenderMimeBundles ?? []).map((command, index) => (React.createElement(ListItem, { key: index, divider: true, secondaryAction: React.createElement(IconButton, { onClick: () => {
+                                        const newCommands = [
+                                            ...(config.commandsAutoRenderMimeBundles ??
+                                                [])
+                                        ];
+                                        newCommands.splice(index, 1);
+                                        handleConfigUpdate({
+                                            commandsAutoRenderMimeBundles: newCommands
+                                        });
+                                    }, size: "small" },
+                                    React.createElement(Delete, null)) },
+                                React.createElement(ListItemText, { primary: command }))))),
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Add Auto-Render Command'), placeholder: trans.__('e.g., jupyterlab-ai-commands:execute-in-kernel'), onKeyDown: e => {
+                                    if (e.key === 'Enter') {
+                                        const value = e.target.value.trim();
+                                        const existingCommands = config.commandsAutoRenderMimeBundles ?? [];
+                                        if (value && !existingCommands.includes(value)) {
+                                            const newCommands = [...existingCommands, value];
+                                            handleConfigUpdate({
+                                                commandsAutoRenderMimeBundles: newCommands
+                                            });
+                                            e.target.value = '';
+                                        }
+                                    }
+                                }, helperText: trans.__('Press Enter to add a command. Default: jupyterlab-ai-commands:execute-in-kernel') })),
+                        React.createElement(Divider, { sx: { my: 2 } }),
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, trans.__('Trusted MIME Types for Auto-Render')),
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, trans.__('When auto-rendering command outputs, these MIME types are marked trusted in chat')),
+                            React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, (config.trustedMimeTypesForAutoRender ?? []).map((mimeType, index) => (React.createElement(ListItem, { key: index, divider: true, secondaryAction: React.createElement(IconButton, { onClick: () => {
+                                        const newMimeTypes = [
+                                            ...(config.trustedMimeTypesForAutoRender ??
+                                                [])
+                                        ];
+                                        newMimeTypes.splice(index, 1);
+                                        handleConfigUpdate({
+                                            trustedMimeTypesForAutoRender: newMimeTypes
+                                        });
+                                    }, size: "small" },
+                                    React.createElement(Delete, null)) },
+                                React.createElement(ListItemText, { primary: mimeType }))))),
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Add Trusted MIME Type'), placeholder: trans.__('e.g., text/html'), onKeyDown: e => {
+                                    if (e.key === 'Enter') {
+                                        const value = e.target.value.trim();
+                                        const existingMimeTypes = config.trustedMimeTypesForAutoRender ?? [];
+                                        if (value && !existingMimeTypes.includes(value)) {
+                                            const newMimeTypes = [...existingMimeTypes, value];
+                                            handleConfigUpdate({
+                                                trustedMimeTypesForAutoRender: newMimeTypes
+                                            });
+                                            e.target.value = '';
+                                        }
+                                    }
+                                }, helperText: trans.__('Press Enter to add a MIME type. Default: text/html') })))))),
             activeTab === 2 && (React.createElement(Card, { elevation: 2 },
                 React.createElement(CardContent, null,
                     React.createElement(Box, { sx: {
@@ -565,7 +636,8 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                             React.createElement(Typography, { variant: "h6", component: "h2" }, trans.__('Remote MCP Servers'))),
                         React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddMCPDialog, size: "small" }, trans.__('Add Server'))),
                     React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 } }, trans.__("Configure remote Model Context Protocol (MCP) servers to extend the AI's capabilities with external tools and data sources.")),
-                    config.mcpServers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No MCP servers configured yet. Click "Add Server" to connect to remote MCP services.'))) : (React.createElement(List, null, config.mcpServers.map(server => (React.createElement(ListItem, { key: server.id, divider: true },
+                    config.mcpServers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No MCP servers configured yet. Click "Add Server" to connect to remote MCP services.'))) : (React.createElement(List, null, config.mcpServers.map(server => (React.createElement(ListItem, { key: server.id, divider: true, secondaryAction: React.createElement(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small" },
+                            React.createElement(MoreVert, null)) },
                         React.createElement(ListItemText, { primary: React.createElement(Box, { sx: {
                                     display: 'flex',
                                     alignItems: 'center',
@@ -582,10 +654,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                 React.createElement(Typography, { variant: "body2", color: "text.secondary" }, server.url),
                                 server.enabled && agentManagerFactory && (React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Status: %1', agentManagerFactory.isMCPServerConnected(server.name)
                                     ? trans.__('Connected')
-                                    : trans.__('Connection failed'))))) }),
-                        React.createElement(ListItemSecondaryAction, null,
-                            React.createElement(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small" },
-                                React.createElement(MoreVert, null))))))))))),
+                                    : trans.__('Connection failed'))))) }))))))))),
             React.createElement(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', providerRegistry: providerRegistry, handleSecretField: handleSecretField, trans: trans }),
             React.createElement(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: handleMenuClose },
                 React.createElement(MenuItem, { onClick: () => {
@@ -674,18 +743,3 @@ const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode, trans })
             React.createElement(Button, { onClick: onClose }, trans.__('Cancel')),
             React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !canSave }, mode === 'add' ? trans.__('Add') : trans.__('Save')))));
 };
-var Private;
-(function (Private) {
-    /**
-     * The token to use with the secrets manager, setter and getter.
-     */
-    let secretsToken;
-    function setToken(value) {
-        secretsToken = value;
-    }
-    Private.setToken = setToken;
-    function getToken() {
-        return secretsToken;
-    }
-    Private.getToken = getToken;
-})(Private || (Private = {}));

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

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

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

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