@jupyterlite/ai 0.9.1 → 0.11.0

package/lib/tokens.d.ts

@@ -1,7 +1,6 @@
 import { Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
-import { FunctionTool, Model } from '@openai/agents';
-import { LanguageModelV2 } from '@ai-sdk/provider';
+import type { Tool, LanguageModel } from 'ai';
 import { AgentManager } from './agent';
 import type { AISettingsModel } from './models/settings-model';
 import type { IModelOptions } from './providers/models';
@@ -19,7 +18,7 @@ export declare namespace CommandIds {
 /**
  * Type definition for a tool
  */
-export type ITool = FunctionTool<any, any, any>;
+export type ITool = Tool;
 /**
  * Interface for token usage statistics from AI model interactions
  */
@@ -89,7 +88,7 @@ export declare const IProviderRegistry: Token<IProviderRegistry>;
  * Interface for a provider factory function that creates language models
  */
 export interface IProviderFactory {
-    (options: IModelOptions): LanguageModelV2;
+    (options: IModelOptions): LanguageModel;
 }
 /**
  * Provider information
@@ -165,11 +164,11 @@ export interface IProviderRegistry {
     /**
      * Create a chat model instance for the given provider.
      */
-    createChatModel(id: string, options: IModelOptions): Model | null;
+    createChatModel(id: string, options: IModelOptions): LanguageModel | null;
     /**
      * Create a completion model instance for the given provider.
      */
-    createCompletionModel(id: string, options: IModelOptions): LanguageModelV2 | null;
+    createCompletionModel(id: string, options: IModelOptions): LanguageModel | null;
     /**
      * Get all available provider IDs.
      */

package/lib/tools/commands.d.ts

@@ -6,6 +6,7 @@ import { AISettingsModel } from '../models/settings-model';
  */
 export declare function createDiscoverCommandsTool(commands: CommandRegistry): ITool;
 /**
- * Create a tool to execute a specific JupyterLab command
+ * Create a tool to execute a specific JupyterLab command.
+ * Commands in the settings' commandsRequiringApproval list will need approval.
  */
 export declare function createExecuteCommandTool(commands: CommandRegistry, settingsModel: AISettingsModel): ITool;

package/lib/tools/commands.js

@@ -1,19 +1,18 @@
-import { tool } from '@openai/agents';
+import { tool } from 'ai';
 import { z } from 'zod';
 /**
  * Create a tool to discover all available commands and their metadata
  */
 export function createDiscoverCommandsTool(commands) {
     return tool({
-        name: 'discover_commands',
+        title: 'Discover Commands',
         description: 'Discover all available JupyterLab commands with their metadata, arguments, and descriptions',
-        parameters: z.object({
-            // currently unused, but could be used to filter commands by a search term
+        inputSchema: z.object({
             query: z
                 .string()
                 .optional()
                 .nullable()
-                .describe('Optional search query to filter commands')
+                .describe("Optional search query to filter commands. It doesn't need to be provided to list all commands")
         }),
         execute: async (input) => {
             const { query } = input;
@@ -57,23 +56,23 @@ export function createDiscoverCommandsTool(commands) {
     });
 }
 /**
- * Create a tool to execute a specific JupyterLab command
+ * Create a tool to execute a specific JupyterLab command.
+ * Commands in the settings' commandsRequiringApproval list will need approval.
  */
 export function createExecuteCommandTool(commands, settingsModel) {
     return tool({
-        name: 'execute_command',
+        title: 'Execute Command',
         description: 'Execute a specific JupyterLab command with optional arguments',
-        parameters: z.object({
+        inputSchema: z.object({
             commandId: z.string().describe('The ID of the command to execute'),
             args: z
-                .any()
+                .record(z.string(), z.unknown())
                 .optional()
-                .describe('Optional arguments to pass to the command')
+                .describe('Optional arguments object to pass to the command (must be an object, not a string)')
         }),
-        needsApproval: async (context, { commandId }) => {
-            // Use configurable list of commands requiring approval
-            const commandsRequiringApproval = settingsModel.config.commandsRequiringApproval;
-            return commandsRequiringApproval.some(cmd => commandId.includes(cmd) || cmd.includes(commandId));
+        needsApproval: (input) => {
+            const commandsRequiringApproval = settingsModel.config.commandsRequiringApproval || [];
+            return commandsRequiringApproval.includes(input.commandId);
         },
         execute: async (input) => {
             const { commandId, args } = input;
@@ -84,44 +83,32 @@ export function createExecuteCommandTool(commands, settingsModel) {
                     error: `Command '${commandId}' does not exist. Use 'discover_commands' to see available commands.`
                 };
             }
-            try {
-                // Execute the command
-                const result = await commands.execute(commandId, args);
-                // Handle Widget objects specially (including subclasses like DocumentWidget)
-                let serializedResult;
-                if (result &&
-                    typeof result === 'object' &&
-                    (result.constructor?.name?.includes('Widget') || result.id)) {
-                    serializedResult = {
-                        type: result.constructor?.name || 'Widget',
-                        id: result.id,
-                        title: result.title?.label || result.title,
-                        className: result.className
-                    };
-                }
-                else {
-                    // For other objects, try JSON serialization with fallback
-                    try {
-                        serializedResult = JSON.parse(JSON.stringify(result));
-                    }
-                    catch {
-                        serializedResult = result
-                            ? '[Complex object - cannot serialize]'
-                            : 'Command executed successfully';
-                    }
-                }
-                return {
-                    success: true,
-                    commandId,
-                    result: serializedResult
+            // Execute the command
+            const result = await commands.execute(commandId, args);
+            // Handle Widget objects specially by extracting id and title
+            let serializedResult;
+            if (result && typeof result === 'object' && result.id) {
+                serializedResult = {
+                    id: result.id,
+                    title: result.title?.label || result.title
                 };
             }
-            catch (error) {
-                return {
-                    success: false,
-                    error: `Failed to execute command '${commandId}': ${error instanceof Error ? error.message : String(error)}`
-                };
+            else {
+                // For other objects, try JSON serialization with fallback
+                try {
+                    serializedResult = JSON.parse(JSON.stringify(result));
+                }
+                catch {
+                    serializedResult = result
+                        ? '[Complex object - cannot serialize]'
+                        : 'Command executed successfully';
+                }
             }
+            return {
+                success: true,
+                commandId,
+                result: serializedResult
+            };
         }
     });
 }

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

@@ -1,5 +1,6 @@
 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';
@@ -24,6 +25,7 @@ export declare class AISettingsWidget extends ReactWidget {
     private _themeManager?;
     private _providerRegistry;
     private _secretsManager?;
+    private _trans;
 }
 /**
  * Namespace for AISettingsWidget types and interfaces
@@ -45,5 +47,9 @@ export declare namespace AISettingsWidget {
          * The token used to request the secrets manager.
          */
         token: symbol;
+        /**
+         * The application language translation bundle.
+         */
+        trans: TranslationBundle;
     }
 }

package/lib/widgets/ai-settings.js

@@ -46,9 +46,10 @@ export class AISettingsWidget extends ReactWidget {
         this._themeManager = options.themeManager;
         this._providerRegistry = options.providerRegistry;
         this._secretsManager = options.secretsManager;
+        this._trans = options.trans;
         this.id = 'jupyterlite-ai-settings';
-        this.title.label = 'AI Settings';
-        this.title.caption = 'Configure AI providers and behavior';
+        this.title.label = this._trans.__('AI Settings');
+        this.title.caption = this._trans.__('Configure AI providers and behavior');
         this.title.closable = true;
     }
     /**
@@ -56,22 +57,23 @@ export class AISettingsWidget extends ReactWidget {
      * @returns A React element containing the AI settings interface
      */
     render() {
-        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsManager: this._secretsManager }));
+        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsManager: this._secretsManager, trans: this._trans }));
     }
     _settingsModel;
     _agentManagerFactory;
     _themeManager;
     _providerRegistry;
     _secretsManager;
+    _trans;
 }
 /**
  * The main AI settings component that provides configuration UI
  * @param props - Component props containing models and theme manager
  * @returns A React component for AI settings configuration
  */
-const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsManager }) => {
+const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsManager, trans }) => {
     if (!model) {
-        return React.createElement("div", null, "Settings model not available");
+        return React.createElement("div", null, trans.__('Settings model not available'));
     }
     const [config, setConfig] = useState(model.config || {});
     const [theme, setTheme] = useState(() => createJupyterLabTheme(themeManager));
@@ -358,28 +360,28 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
             } },
             React.createElement(Box, { sx: { mb: 2, display: 'flex', alignItems: 'center', gap: 2 } },
                 React.createElement(Settings, { color: "primary", sx: { fontSize: 24 } }),
-                React.createElement(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600 } }, "AI Settings")),
+                React.createElement(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600 } }, trans.__('AI Settings'))),
             React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider', mb: 2 } },
                 React.createElement(Tabs, { value: activeTab, onChange: (_, newValue) => setActiveTab(newValue) },
-                    React.createElement(Tab, { label: "Providers" }),
-                    React.createElement(Tab, { label: "Behavior" }),
-                    React.createElement(Tab, { label: "MCP Servers" }))),
+                    React.createElement(Tab, { label: trans.__('Providers') }),
+                    React.createElement(Tab, { label: trans.__('Behavior') }),
+                    React.createElement(Tab, { label: trans.__('MCP Servers') }))),
             activeTab === 0 && (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
                 config.providers.length > 0 && (React.createElement(Card, { elevation: 2 },
                     React.createElement(CardContent, null,
-                        React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Default Providers"),
+                        React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, trans.__('Default Providers')),
                         React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
                             React.createElement(FormControl, { fullWidth: true },
-                                React.createElement(InputLabel, null, "Chat Provider"),
-                                React.createElement(Select, { value: config.defaultProvider, label: "Chat Provider", onChange: e => model.setActiveProvider(e.target.value) }, config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name))))),
+                                React.createElement(InputLabel, null, trans.__('Chat Provider')),
+                                React.createElement(Select, { value: config.defaultProvider, label: trans.__('Chat Provider'), onChange: e => model.setActiveProvider(e.target.value) }, config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name))))),
                             React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSameProviderForChatAndCompleter, onChange: e => handleConfigUpdate({
                                         useSameProviderForChatAndCompleter: e.target.checked
-                                    }), color: "primary" }), label: "Use same provider for chat and completions" }),
+                                    }), color: "primary" }), label: trans.__('Use same provider for chat and completions') }),
                             !config.useSameProviderForChatAndCompleter && (React.createElement(FormControl, { fullWidth: true },
-                                React.createElement(InputLabel, null, "Completion Provider"),
-                                React.createElement(Select, { value: config.activeCompleterProvider || '', label: "Completion Provider", className: "jp-ai-completion-provider-select", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
+                                React.createElement(InputLabel, null, trans.__('Completion Provider')),
+                                React.createElement(Select, { value: config.activeCompleterProvider || '', label: trans.__('Completion Provider'), className: "jp-ai-completion-provider-select", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
                                     React.createElement(MenuItem, { value: "" },
-                                        React.createElement("em", null, "No completion")),
+                                        React.createElement("em", null, trans.__('No completion'))),
                                     config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name)))))))))),
                 React.createElement(Card, { elevation: 2 },
                     React.createElement(CardContent, null,
@@ -390,9 +392,9 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                 mb: 2
                             } },
                             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
-                                React.createElement(Typography, { variant: "h6", component: "h2" }, "Configured Providers")),
-                            React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddDialog, size: "small" }, "Add Provider")),
-                        config.providers.length === 0 ? (React.createElement(Alert, { severity: "info" }, "No providers configured yet. Click \"Add Provider\" to get started.")) : (React.createElement(List, null, config.providers.map(provider => {
+                                React.createElement(Typography, { variant: "h6", component: "h2" }, trans.__('Configured Providers'))),
+                            React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddDialog, size: "small" }, trans.__('Add Provider'))),
+                        config.providers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No providers configured yet. Click "Add Provider" to get started.'))) : (React.createElement(List, null, config.providers.map(provider => {
                             const isActive = config.defaultProvider === provider.id;
                             const isActiveCompleter = config.useSameProviderForChatAndCompleter
                                 ? isActive
@@ -418,8 +420,8 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                                 mb: 0.5
                                             } },
                                             React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, provider.name),
-                                            isActive && (React.createElement(Chip, { label: "Chat", size: "small", color: "primary", icon: React.createElement(CheckCircle, null) })),
-                                            isActiveCompleter && (React.createElement(Chip, { label: "Completion", size: "small", color: "secondary", icon: React.createElement(CheckCircle, null) }))),
+                                            isActive && (React.createElement(Chip, { label: trans.__('Chat'), size: "small", color: "primary", icon: React.createElement(CheckCircle, null) })),
+                                            isActiveCompleter && (React.createElement(Chip, { label: trans.__('Completion'), size: "small", color: "secondary", icon: React.createElement(CheckCircle, null) }))),
                                         React.createElement(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true },
                                             provider.provider,
                                             " \u2022 ",
@@ -428,67 +430,67 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                                 ` • ${provider.description}`),
                                         params &&
                                             (params.temperature !== undefined ||
-                                                params.maxTokens !== undefined ||
+                                                params.maxOutputTokens !== undefined ||
                                                 params.maxTurns !== undefined) && (React.createElement(Box, { sx: {
                                                 display: 'flex',
                                                 flexWrap: 'wrap',
                                                 gap: 1,
                                                 mt: 1
                                             } },
-                                            params.temperature !== undefined && (React.createElement(Chip, { label: `Temp: ${params.temperature}`, size: "small", variant: "outlined" })),
-                                            params.maxTokens !== undefined && (React.createElement(Chip, { label: `Tokens: ${params.maxTokens}`, size: "small", variant: "outlined" })),
-                                            params.maxTurns !== undefined && (React.createElement(Chip, { label: `Turns: ${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" }))))),
                                     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({
                             useSecretsManager: e.target.checked
                         }), color: "primary", sx: { alignSelf: 'flex-start' } }), label: React.createElement("div", null,
-                        React.createElement("span", null, "Use the secrets manager to manage API keys"),
-                        !config.useSecretsManager && (React.createElement(Alert, { severity: "warning", icon: React.createElement(Error, null), sx: { mb: 2 } }, "The secrets are stored in plain text in settings"))) })))),
+                        React.createElement("span", null, trans.__('Use the secrets manager to manage API keys')),
+                        !config.useSecretsManager && (React.createElement(Alert, { severity: "warning", icon: React.createElement(Error, null), sx: { mb: 2 } }, trans.__('The secrets are stored in plain text in settings')))) })))),
             activeTab === 1 && (React.createElement(Card, { elevation: 2 },
                 React.createElement(CardContent, null,
-                    React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Behavior Settings"),
+                    React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, trans.__('Behavior Settings')),
                     React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.toolsEnabled, onChange: e => handleConfigUpdate({
                                     toolsEnabled: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Enable Tools"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Allow the AI to use tools like notebook operations, code execution, and file management")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Enable Tools')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Allow the AI to use tools like notebook operations, code execution, and file management'))) }),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.sendWithShiftEnter, onChange: e => handleConfigUpdate({
                                     sendWithShiftEnter: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Send with Shift+Enter"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Use Shift+Enter to send messages (Enter creates new line)")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Send with Shift+Enter')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Use Shift+Enter to send messages (Enter creates new line)'))) }),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showTokenUsage, onChange: e => handleConfigUpdate({
                                     showTokenUsage: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Show Token Usage"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Display token usage information in the chat toolbar")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Show Token Usage')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Display token usage information in the chat toolbar'))) }),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showCellDiff, onChange: e => handleConfigUpdate({
                                     showCellDiff: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Show Cell Diff"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Show diff view when AI modifies cell content")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Show Cell Diff')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Show diff view when AI modifies cell content'))) }),
                         config.showCellDiff && (React.createElement(FormControl, { sx: { ml: 4 } },
-                            React.createElement(InputLabel, null, "Diff Display Mode"),
-                            React.createElement(Select, { value: config.diffDisplayMode, label: "Diff Display Mode", onChange: e => handleConfigUpdate({
+                            React.createElement(InputLabel, null, trans.__('Diff Display Mode')),
+                            React.createElement(Select, { value: config.diffDisplayMode, label: trans.__('Diff Display Mode'), onChange: e => handleConfigUpdate({
                                     diffDisplayMode: e.target.value
                                 }) },
-                                React.createElement(MenuItem, { value: "split" }, "Split View"),
-                                React.createElement(MenuItem, { value: "unified" }, "Unified View")))),
+                                React.createElement(MenuItem, { value: "split" }, trans.__('Split View')),
+                                React.createElement(MenuItem, { value: "unified" }, trans.__('Unified View'))))),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showFileDiff, onChange: e => handleConfigUpdate({
                                     showFileDiff: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Show File Diff"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Show diff view when AI modifies file content")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Show File Diff')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Show diff view when AI modifies file content'))) }),
                         React.createElement(Divider, { sx: { my: 1 } }),
-                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: "System Prompt", value: systemPromptValue, onChange: e => handleSystemPromptChange(e.target.value), placeholder: "Define the AI's behavior and personality...", helperText: "Instructions that define how the AI should behave and respond" }),
-                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: "Completion System Prompt", value: completionPromptValue, onChange: e => handleCompletionPromptChange(e.target.value), placeholder: "Define how the AI should generate code completions...", helperText: "Instructions that define how the AI should generate code completions" }),
+                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: trans.__('System Prompt'), value: systemPromptValue, onChange: e => handleSystemPromptChange(e.target.value), placeholder: trans.__("Define the AI's behavior and personality..."), helperText: trans.__('Instructions that define how the AI should behave and respond') }),
+                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: trans.__('Completion System Prompt'), value: completionPromptValue, onChange: e => handleCompletionPromptChange(e.target.value), placeholder: trans.__('Define how the AI should generate code completions...'), helperText: trans.__('Instructions that define how the AI should generate code completions') }),
                         React.createElement(Divider, { sx: { my: 2 } }),
                         React.createElement(Box, null,
-                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, "Commands Requiring Approval"),
-                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, "Commands that require user approval before AI can execute them"),
+                            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,
@@ -502,7 +504,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             });
                                         }, size: "small" },
                                         React.createElement(Delete, null))))))),
-                            React.createElement(TextField, { fullWidth: true, label: "Add New Command", placeholder: "e.g., notebook:run-cell", onKeyDown: e => {
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Add New Command'), placeholder: trans.__('e.g., notebook:run-cell'), onKeyDown: e => {
                                     if (e.key === 'Enter') {
                                         const value = e.target.value.trim();
                                         if (value &&
@@ -517,7 +519,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             e.target.value = '';
                                         }
                                     }
-                                }, helperText: "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') })))))),
             activeTab === 2 && (React.createElement(Card, { elevation: 2 },
                 React.createElement(CardContent, null,
                     React.createElement(Box, { sx: {
@@ -528,10 +530,10 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         } },
                         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
                             React.createElement(Cable, { color: "primary" }),
-                            React.createElement(Typography, { variant: "h6", component: "h2" }, "Remote MCP Servers")),
-                        React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddMCPDialog, size: "small" }, "Add Server")),
-                    React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 } }, "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" }, "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 },
+                            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 },
                         React.createElement(ListItemText, { primary: React.createElement(Box, { sx: {
                                     display: 'flex',
                                     alignItems: 'center',
@@ -546,16 +548,13 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                         enabled: e.target.checked
                                     }), size: "small", color: "primary" })), secondary: React.createElement(Box, null,
                                 React.createElement(Typography, { variant: "body2", color: "text.secondary" }, server.url),
-                                server.enabled && agentManagerFactory && (React.createElement(Typography, { variant: "caption", color: "text.secondary" },
-                                    "Status:",
-                                    ' ',
-                                    agentManagerFactory.isMCPServerConnected(server.name)
-                                        ? 'Connected'
-                                        : 'Connection failed'))) }),
+                                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))))))))))),
-            React.createElement(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', providerRegistry: providerRegistry, handleSecretField: handleSecretField }),
+            React.createElement(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', providerRegistry: providerRegistry, handleSecretField: handleSecretField, trans: trans }),
             React.createElement(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: handleMenuClose },
                 React.createElement(MenuItem, { onClick: () => {
                         const provider = config.providers.find(p => p.id === menuProviderId);
@@ -564,11 +563,11 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         }
                     } },
                     React.createElement(Edit, { sx: { mr: 1 } }),
-                    "Edit"),
+                    trans.__('Edit')),
                 React.createElement(MenuItem, { onClick: () => handleDeleteProvider(menuProviderId), sx: { color: 'error.main' } },
                     React.createElement(Delete, { sx: { mr: 1 } }),
-                    "Delete")),
-            React.createElement(MCPServerDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false), onSave: editingMCPServer ? handleEditMCPServer : handleAddMCPServer, initialConfig: editingMCPServer, mode: editingMCPServer ? 'edit' : 'add' }),
+                    trans.__('Delete'))),
+            React.createElement(MCPServerDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false), onSave: editingMCPServer ? handleEditMCPServer : handleAddMCPServer, initialConfig: editingMCPServer, mode: editingMCPServer ? 'edit' : 'add', trans: trans }),
             React.createElement(Menu, { anchorEl: mcpMenuAnchor, open: Boolean(mcpMenuAnchor), onClose: handleMCPMenuClose },
                 React.createElement(MenuItem, { onClick: () => {
                         const server = config.mcpServers.find(s => s.id === mcpMenuServerId);
@@ -577,17 +576,17 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         }
                     } },
                     React.createElement(Edit, { sx: { mr: 1 } }),
-                    "Edit"),
+                    trans.__('Edit')),
                 React.createElement(MenuItem, { onClick: () => handleDeleteMCPServer(mcpMenuServerId), sx: { color: 'error.main' } },
                     React.createElement(Delete, { sx: { mr: 1 } }),
-                    "Delete")))));
+                    trans.__('Delete'))))));
 };
 /**
  * Dialog component for adding/editing MCP server configurations
  * @param props - Component props for the MCP server dialog
  * @returns A React component for MCP server configuration
  */
-const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode }) => {
+const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode, trans }) => {
     const [name, setName] = useState(initialConfig?.name || '');
     const [url, setUrl] = useState(initialConfig?.url || '');
     const [enabled, setEnabled] = useState(initialConfig?.enabled ?? true);
@@ -631,15 +630,17 @@ const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode }) => {
     };
     const canSave = name.trim() && url.trim() && _isValidUrl(url.trim());
     return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "sm", fullWidth: true },
-        React.createElement(DialogTitle, null, mode === 'add' ? 'Add MCP Server' : 'Edit MCP Server'),
+        React.createElement(DialogTitle, null, mode === 'add'
+            ? trans.__('Add MCP Server')
+            : trans.__('Edit MCP Server')),
         React.createElement(DialogContent, null,
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, pt: 1 } },
-                React.createElement(TextField, { autoFocus: true, fullWidth: true, label: "Server Name", value: name, onChange: e => setName(e.target.value), placeholder: "My MCP Server", helperText: "A friendly name to identify this MCP server" }),
-                React.createElement(TextField, { fullWidth: true, label: "Server URL", value: url, onChange: e => setUrl(e.target.value), placeholder: "https://example.com/mcp", helperText: "The HTTP/HTTPS URL of the MCP server", error: Boolean(url.trim() && !_isValidUrl(url.trim())) }),
-                React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: enabled, onChange: e => setEnabled(e.target.checked), color: "primary" }), label: "Enable this server" }))),
+                React.createElement(TextField, { autoFocus: true, fullWidth: true, label: trans.__('Server Name'), value: name, onChange: e => setName(e.target.value), placeholder: trans.__('My MCP Server'), helperText: trans.__('A friendly name to identify this MCP server') }),
+                React.createElement(TextField, { fullWidth: true, label: trans.__('Server URL'), value: url, onChange: e => setUrl(e.target.value), placeholder: trans.__('https://example.com/mcp'), helperText: trans.__('The HTTP/HTTPS URL of the MCP server'), error: Boolean(url.trim() && !_isValidUrl(url.trim())) }),
+                React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: enabled, onChange: e => setEnabled(e.target.checked), color: "primary" }), label: trans.__('Enable this server') }))),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: onClose }, "Cancel"),
-            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !canSave }, mode === 'add' ? 'Add' : 'Save'))));
+            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) {

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

@@ -1,5 +1,6 @@
 import { ChatWidget } from '@jupyter/chat';
 import { MainAreaWidget } from '@jupyterlab/apputils';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { CommandRegistry } from '@lumino/commands';
 import { AIChatModel } from '../chat-model';
 import { AISettingsModel } from '../models/settings-model';
@@ -7,6 +8,7 @@ export declare namespace MainAreaChat {
     interface IOptions extends MainAreaWidget.IOptions<ChatWidget> {
         commands: CommandRegistry;
         settingsModel: AISettingsModel;
+        trans: TranslationBundle;
     }
 }
 /**

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

@@ -10,6 +10,7 @@ export class MainAreaChat extends MainAreaWidget {
     constructor(options) {
         super(options);
         this.title.label = this.content.model.name;
+        const { trans } = options;
         // add the move to side button.
         this.toolbar.addItem('moveToSide', new CommandToolbarButton({
             commands: options.commands,
@@ -24,12 +25,14 @@ export class MainAreaChat extends MainAreaWidget {
         const tokenUsageWidget = new TokenUsageWidget({
             tokenUsageChanged: this.model.tokenUsageChanged,
             settingsModel: options.settingsModel,
-            initialTokenUsage: this.model.agentManager.tokenUsage
+            initialTokenUsage: this.model.agentManager.tokenUsage,
+            translator: trans
         });
         this.toolbar.addItem('token-usage', tokenUsageWidget);
         // Add the approval button, tied to the chat widget.
         this._approvalButtons = new ApprovalButtons({
-            chatPanel: this.content
+            chatPanel: this.content,
+            agentManager: this.model.agentManager
         });
     }
     dispose() {

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

@@ -1,3 +1,4 @@
+import type { TranslationBundle } from '@jupyterlab/translation';
 import React from 'react';
 import { IProviderConfig } from '../models/settings-model';
 import type { IProviderRegistry } from '../tokens';
@@ -9,6 +10,7 @@ interface IProviderConfigDialogProps {
     mode: 'add' | 'edit';
     providerRegistry: IProviderRegistry;
     handleSecretField: (input: HTMLInputElement, provider: string, fieldName: string) => Promise<void>;
+    trans: TranslationBundle;
 }
 export declare const ProviderConfigDialog: React.FC<IProviderConfigDialogProps>;
 export {};