@jupyterlite/ai 0.9.0-a3 → 0.9.0

package/lib/widgets/ai-settings.js

@@ -1,4 +1,5 @@
 import { ReactWidget } from '@jupyterlab/ui-components';
+import { Debouncer } from '@lumino/polling';
 import Add from '@mui/icons-material/Add';
 import Cable from '@mui/icons-material/Cable';
 import CheckCircle from '@mui/icons-material/CheckCircle';
@@ -10,7 +11,7 @@ import ErrorOutline from '@mui/icons-material/ErrorOutline';
 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, Typography, createTheme } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { SECRETS_NAMESPACE, SECRETS_REPLACEMENT } from '../tokens';
 import { ProviderConfigDialog } from './provider-config-dialog';
 /**
@@ -83,6 +84,10 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
     const [editingMCPServer, setEditingMCPServer] = useState();
     const [mcpMenuAnchor, setMcpMenuAnchor] = useState(null);
     const [mcpMenuServerId, setMcpMenuServerId] = useState('');
+    const [systemPromptValue, setSystemPromptValue] = useState(config.systemPrompt);
+    const systemPromptValueRef = React.useRef(config.systemPrompt);
+    const [completionPromptValue, setCompletionPromptValue] = useState(config.completionSystemPrompt);
+    const completionPromptValueRef = React.useRef(config.completionSystemPrompt);
     /**
      * Effect to listen for model state changes and update config
      */
@@ -129,10 +134,48 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
             agentManagerFactory.mcpConnectionChanged.disconnect(onMCPConnectionChanged);
         };
     }, [agentManagerFactory]);
+    // Sync local state when config changes externally
+    useEffect(() => {
+        setSystemPromptValue(config.systemPrompt);
+        systemPromptValueRef.current = config.systemPrompt;
+    }, [config.systemPrompt]);
+    useEffect(() => {
+        setCompletionPromptValue(config.completionSystemPrompt);
+        completionPromptValueRef.current = config.completionSystemPrompt;
+    }, [config.completionSystemPrompt]);
+    const promptDebouncer = useMemo(() => new Debouncer(async () => {
+        await handleConfigUpdate({
+            systemPrompt: systemPromptValueRef.current,
+            completionSystemPrompt: completionPromptValueRef.current
+        });
+    }, 1000), []);
+    // Cleanup debouncer on unmount
+    useEffect(() => {
+        return () => {
+            promptDebouncer.dispose();
+        };
+    }, [promptDebouncer]);
+    const handleSystemPromptChange = (value) => {
+        setSystemPromptValue(value);
+        systemPromptValueRef.current = value;
+        void promptDebouncer.invoke();
+    };
+    const handleCompletionPromptChange = (value) => {
+        setCompletionPromptValue(value);
+        completionPromptValueRef.current = value;
+        void promptDebouncer.invoke();
+    };
     const getSecretFromManager = async (provider, fieldName) => {
         const secret = await secretsManager?.get(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`);
         return secret?.value;
     };
+    const setSecretToManager = async (provider, fieldName, value) => {
+        await secretsManager?.set(Private.getToken(), SECRETS_NAMESPACE, `${provider}:${fieldName}`, {
+            namespace: SECRETS_NAMESPACE,
+            id: `${provider}:${fieldName}`,
+            value
+        });
+    };
     /**
      * Attach a secrets field to the secrets manager.
      * @param input - the DOm element to attach.
@@ -188,9 +231,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
         // Retrieve the API key from the secrets manager if necessary.
         if (model.config.useSecretsManager && secretsManager) {
             provider.apiKey =
-                (await getSecretFromManager(provider.provider, 'apiKey')) ??
-                    provider.apiKey ??
-                    '';
+                (await getSecretFromManager(provider.provider, 'apiKey')) ?? '';
         }
         setEditingProvider(provider);
         setDialogOpen(true);
@@ -227,6 +268,11 @@ 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
+                    // one from settings.
+                    if (!(await getSecretFromManager(provider.provider, 'apiKey'))) {
+                        setSecretToManager(provider.provider, 'apiKey', provider.apiKey ?? '');
+                    }
                     provider.apiKey = SECRETS_REPLACEMENT;
                     await model.updateProvider(provider.id, provider);
                 }
@@ -307,6 +353,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                 overflow: 'auto',
                 p: 2,
                 pb: 4,
+                boxSizing: 'border-box',
                 fontSize: '0.9rem'
             } },
             React.createElement(Box, { sx: { mb: 2, display: 'flex', alignItems: 'center', gap: 2 } },
@@ -318,11 +365,6 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                     React.createElement(Tab, { label: "Behavior" }),
                     React.createElement(Tab, { label: "MCP Servers" }))),
             activeTab === 0 && (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
-                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 will be stored in plain text in settings"))) })),
                 config.providers.length > 0 && (React.createElement(Card, { elevation: 2 },
                     React.createElement(CardContent, null,
                         React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Default Providers"),
@@ -335,9 +377,9 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                     }), color: "primary" }), label: "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", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
+                                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(MenuItem, { value: "" },
-                                        React.createElement("em", null, "Use chat provider")),
+                                        React.createElement("em", null, "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,
@@ -398,7 +440,12 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             params.maxTurns !== undefined && (React.createElement(Chip, { label: `Turns: ${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"))) })))),
             activeTab === 1 && (React.createElement(Card, { elevation: 2 },
                 React.createElement(CardContent, null,
                     React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Behavior Settings"),
@@ -418,8 +465,26 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                 }), 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(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")) }),
+                        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({
+                                    diffDisplayMode: e.target.value
+                                }) },
+                                React.createElement(MenuItem, { value: "split" }, "Split View"),
+                                React.createElement(MenuItem, { value: "unified" }, "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(Divider, { sx: { my: 1 } }),
-                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: "System Prompt", value: config.systemPrompt, onChange: e => handleConfigUpdate({ systemPrompt: 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: "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(Divider, { sx: { my: 2 } }),
                         React.createElement(Box, null,
                             React.createElement(Typography, { variant: "body1", gutterBottom: true }, "Commands Requiring Approval"),

package/lib/widgets/provider-config-dialog.js

@@ -1,7 +1,7 @@
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, MenuItem, Select, Slider, Switch, TextField, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, MenuItem, Select, Slider, Switch, TextField, Typography } from '@mui/material';
 import React from 'react';
 /**
  * Default parameter values for provider configuration
@@ -28,9 +28,10 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                 label: info.name,
                 models: info.defaultModels,
                 apiKeyRequirement: info.apiKeyRequirement,
-                allowCustomModel: id === 'ollama' || id === 'generic', // Ollama and Generic allow custom models
+                allowCustomModel: id === 'generic', // Generic allows custom models
                 supportsBaseURL: info.supportsBaseURL,
-                description: info.description
+                description: info.description,
+                baseUrls: info.baseUrls
             };
         });
     }, [providerRegistry]);
@@ -124,11 +125,17 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                         endAdornment: (React.createElement(InputAdornment, { position: "end" },
                             React.createElement(IconButton, { onClick: () => setShowApiKey(!showApiKey), edge: "end" }, showApiKey ? React.createElement(VisibilityOff, null) : React.createElement(Visibility, null))))
                     } })),
-                selectedProvider?.supportsBaseURL && (React.createElement(TextField, { fullWidth: true, label: "Base URL (Optional)", value: baseURL, onChange: e => setBaseURL(e.target.value), placeholder: provider === 'ollama'
-                        ? 'http://localhost:11434/api'
-                        : 'Custom API endpoint', helperText: provider === 'ollama'
-                        ? 'Ollama server endpoint'
-                        : 'Custom API base URL (e.g., for LiteLLM proxy). Leave empty to use default provider endpoint.' })),
+                selectedProvider?.supportsBaseURL && (React.createElement(Autocomplete, { freeSolo: true, fullWidth: true, options: (selectedProvider.baseUrls ?? []).map(option => option.url), value: baseURL || '', onChange: (_, value) => {
+                        if (value && typeof value === 'string') {
+                            setBaseURL(value);
+                        }
+                    }, inputValue: baseURL || '', renderOption: (props, option) => {
+                        const urlOption = (selectedProvider.baseUrls ?? []).find(u => u.url === option);
+                        return (React.createElement(Box, { component: "li", ...props, key: option },
+                            React.createElement(Box, null,
+                                React.createElement(Typography, { variant: "body2" }, option),
+                                urlOption?.description && (React.createElement(Typography, { variant: "caption", color: "text.secondary" }, urlOption.description)))));
+                    }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, label: "Base URL", placeholder: "https://api.example.com/v1", onChange: e => setBaseURL(e.target.value) })), clearOnBlur: false })),
                 React.createElement(Accordion, { expanded: expandedAdvanced, onChange: (_, isExpanded) => setExpandedAdvanced(isExpanded), sx: {
                         mt: 2,
                         bgcolor: 'transparent',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.9.0-a3",
+    "version": "0.9.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -54,10 +54,11 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@ai-sdk/anthropic": "^2.0.23",
+        "@ai-sdk/anthropic": "^2.0.30",
         "@ai-sdk/google": "^2.0.19",
         "@ai-sdk/mistral": "^2.0.17",
         "@ai-sdk/openai": "^2.0.44",
+        "@ai-sdk/openai-compatible": "^1.0.26",
         "@jupyter/chat": "^0.18.2",
         "@jupyterlab/application": "^4.0.0",
         "@jupyterlab/apputils": "^4.5.6",
@@ -71,11 +72,13 @@
         "@jupyterlab/rendermime": "^4.4.6",
         "@jupyterlab/services": "^7.4.6",
         "@jupyterlab/settingregistry": "^4.0.0",
+        "@jupyterlab/statusbar": "^4.4.6",
         "@jupyterlab/ui-components": "^4.4.6",
         "@lumino/commands": "^2.3.2",
         "@lumino/coreutils": "^2.2.1",
         "@lumino/disposable": "^2.1.4",
         "@lumino/messaging": "^2.0.3",
+        "@lumino/polling": "^2.1.4",
         "@lumino/signaling": "^2.1.4",
         "@lumino/widgets": "^2.7.1",
         "@modelcontextprotocol/sdk": "^1.19.1",
@@ -85,7 +88,6 @@
         "@openai/agents-extensions": "^0.1.5",
         "ai": "^5.0.60",
         "jupyter-secrets-manager": "^0.4.0",
-        "ollama-ai-provider-v2": "^1.4.1",
         "zod": "^3.25.76"
     },
     "devDependencies": {

package/schema/settings-model.json

@@ -163,6 +163,31 @@
       "description": "Instructions that define how the AI should behave and respond",
       "type": "string",
       "default": "You are Jupyternaut, an AI coding assistant built specifically for the JupyterLab environment.\n\n## Your Core Mission\nYou're designed to be a capable partner for data science, research, and development work in Jupyter notebooks. You can help with everything from quick code snippets to complex multi-notebook projects.\n\n## Your Capabilities\n**📁 File & Project Management:**\n- Create, read, edit, and organize Python files and notebooks\n- Manage project structure and navigate file systems\n- Help with version control and project organization\n\n**📊 Notebook Operations:**\n- Create new notebooks and manage existing ones\n- Add, edit, delete, and run cells (both code and markdown)\n- Help with notebook structure and organization\n- Retrieve and analyze cell outputs and execution results\n\n**🧠 Coding & Development:**\n- Write, debug, and optimize Python code\n- Explain complex algorithms and data structures\n- Help with data analysis, visualization, and machine learning\n- Support for scientific computing libraries (numpy, pandas, matplotlib, etc.)\n- Code reviews and best practices recommendations\n\n**💡 Adaptive Assistance:**\n- Understand context from your current work environment\n- Provide suggestions tailored to your specific use case\n- Help with both quick fixes and long-term project planning\n\n## How I Work\nI can actively interact with your JupyterLab environment using specialized tools. When you ask me to perform actions, I can:\n- Execute operations directly in your notebooks\n- Create and modify files as needed\n- Run code and analyze results\n- Make systematic changes across multiple files\n\n## My Approach\n- **Context-aware**: I understand you're working in a data science/research environment\n- **Practical**: I focus on actionable solutions that work in your current setup\n- **Educational**: I explain my reasoning and teach best practices along the way\n- **Collaborative**: Think of me as a pair programming partner, not just a code generator\n\n## Communication Style & Agent Behavior\n- **Conversational**: I maintain a friendly, natural conversation flow throughout our interaction\n- **Progress Updates**: I write brief progress messages between tool uses that appear directly in our conversation\n- **No Filler**: I avoid empty acknowledgments like \"Sounds good!\" or \"Okay, I will...\" - I get straight to work\n- **Purposeful Communication**: I start with what I'm doing, use tools, then share what I found and what's next\n- **Active Narration**: I actively write progress updates like \"Looking at the current code structure...\" or \"Found the issue in the notebook...\" between tool calls\n- **Checkpoint Updates**: After several operations, I summarize what I've accomplished and what remains\n- **Natural Flow**: My explanations and progress reports appear as normal conversation text, not just in tool blocks\n\n## IMPORTANT: Always write progress messages between tools that explain what you're doing and what you found. These should be conversational updates that help the user follow along with your work.\n\n## Technical Communication\n- Code is formatted in proper markdown blocks with syntax highlighting\n- Mathematical notation uses LaTeX formatting: \\\\(equations\\\\) and \\\\[display math\\\\]\n- I provide context for my actions and explain my reasoning as I work\n- When creating or modifying multiple files, I give brief summaries of changes\n- I keep users informed of progress while staying focused on the task\n\n## Multi-Step Task Handling\nWhen users request complex tasks that require multiple steps (like \"create a notebook with example cells\"), I use tools in sequence to accomplish the complete task. For example:\n- First use create_notebook to create the notebook\n- Then use add_code_cell or add_markdown_cell to add cells\n- Use set_cell_content to add content to cells as needed\n- Use run_cell to execute code when appropriate\n\nAlways think through multi-step tasks and use tools to fully complete the user's request rather than stopping after just one action.\n\nReady to help you build something great! What are you working on?"
+    },
+    "completionSystemPrompt": {
+      "title": "Completion System Prompt",
+      "description": "Instructions that define how the AI should generate code completions",
+      "type": "string",
+      "default": "You are an AI code completion assistant. Complete the given code fragment with appropriate code.\nRules:\n- Return only the completion text, no explanations or comments\n- Do not include code block markers (``` or similar)\n- Make completions contextually relevant to the surrounding code and notebook context\n- Follow the language-specific conventions and style guidelines for the detected programming language\n- Keep completions concise but functional\n- Do not repeat the existing code that comes before the cursor\n- Use variables, imports, functions, and other definitions from previous notebook cells when relevant"
+    },
+    "showCellDiff": {
+      "title": "Show Cell Diff",
+      "description": "Show diff view when AI modifies cell content",
+      "type": "boolean",
+      "default": true
+    },
+    "showFileDiff": {
+      "title": "Show File Diff",
+      "description": "Show diff view when AI modifies file content",
+      "type": "boolean",
+      "default": true
+    },
+    "diffDisplayMode": {
+      "title": "Diff Display Mode",
+      "description": "How to display cell diffs (split or unified view)",
+      "type": "string",
+      "enum": ["split", "unified"],
+      "default": "split"
     }
   },
   "additionalProperties": false

package/src/agent.ts

@@ -184,18 +184,18 @@ export interface IAgentEventTypeMap {
   tool_call_start: {
     callId: string;
     toolName: string;
-    input: any;
+    input: string;
   };
   tool_call_complete: {
     callId: string;
     toolName: string;
-    output: any;
+    output: string;
     isError: boolean;
   };
   tool_approval_required: {
     interruptionId: string;
     toolName: string;
-    toolInput: any;
+    toolInput: string;
     callId?: string;
   };
   grouped_approval_required: {
@@ -203,7 +203,7 @@ export interface IAgentEventTypeMap {
     approvals: Array<{
       interruptionId: string;
       toolName: string;
-      toolInput: any;
+      toolInput: string;
     }>;
   };
   error: {
@@ -718,6 +718,22 @@ export class AgentManager {
     }
   }
 
+  /**
+   * Formats tool input for display by pretty-printing JSON strings.
+   * @param input The tool input string to format
+   * @returns Pretty-printed JSON string
+   */
+  private _formatToolInput(input: string): string {
+    try {
+      // Parse and re-stringify with formatting
+      const parsed = JSON.parse(input);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      // If parsing fails, return the string as-is
+      return input;
+    }
+  }
+
   /**
    * Handles the start of a tool call from the model event.
    * @param modelEvent The model event containing tool call information
@@ -726,19 +742,13 @@ export class AgentManager {
     const toolCallId = modelEvent.toolCallId;
     const toolName = modelEvent.toolName;
     const toolInput = modelEvent.input;
-    let parsedToolInput;
-    try {
-      parsedToolInput = JSON.parse(toolInput);
-    } catch (error) {
-      parsedToolInput = {};
-    }
 
     this._agentEvent.emit({
       type: 'tool_call_start',
       data: {
         callId: toolCallId,
         toolName,
-        input: parsedToolInput
+        input: this._formatToolInput(toolInput)
       }
     });
   }
@@ -758,7 +768,7 @@ export class AgentManager {
 
     const isError =
       toolCallOutput.rawItem.type === 'function_call_result' &&
-      (toolCallOutput.rawItem as any).error;
+      toolCallOutput.rawItem.status === 'incomplete';
 
     const toolName =
       toolCallOutput.rawItem.type === 'function_call_result'
@@ -783,10 +793,13 @@ export class AgentManager {
   private async _handleSingleToolApproval(
     interruption: RunToolApprovalItem
   ): Promise<void> {
-    const toolName = (interruption.rawItem as any)?.name || 'Unknown Tool';
-    const toolInput = (interruption.rawItem as any)?.arguments || {};
+    const toolName = interruption.rawItem.name || 'Unknown Tool';
+    const toolInput = interruption.rawItem.arguments || '{}';
     const interruptionId = `int-${Date.now()}-${Math.random()}`;
-    const callId = (interruption.rawItem as any)?.callId;
+    const callId =
+      interruption.rawItem.type === 'function_call'
+        ? interruption.rawItem.callId
+        : undefined;
 
     this._pendingApprovals.set(interruptionId, { interruption });
 
@@ -795,7 +808,7 @@ export class AgentManager {
       data: {
         interruptionId,
         toolName,
-        toolInput,
+        toolInput: this._formatToolInput(toolInput),
         callId
       }
     });
@@ -810,8 +823,8 @@ export class AgentManager {
   ): Promise<void> {
     const groupId = `group-${Date.now()}-${Math.random()}`;
     const approvals = interruptions.map(interruption => {
-      const toolName = (interruption.rawItem as any)?.name || 'Unknown Tool';
-      const toolInput = (interruption.rawItem as any)?.arguments || {};
+      const toolName = interruption.rawItem.name || 'Unknown Tool';
+      const toolInput = interruption.rawItem.arguments || '{}';
       const interruptionId = `int-${Date.now()}-${Math.random()}`;
 
       this._pendingApprovals.set(interruptionId, { interruption, groupId });
@@ -819,7 +832,7 @@ export class AgentManager {
       return {
         interruptionId,
         toolName,
-        toolInput
+        toolInput: this._formatToolInput(toolInput)
       };
     });
 
@@ -921,7 +934,9 @@ Guidelines:
 - Use natural, conversational tone throughout
 
 COMMAND DISCOVERY:
-- When you want to execute JupyterLab commands, ALWAYS use the 'discover_commands' tool first to find available commands and their metadata.
+- When you want to execute JupyterLab commands, ALWAYS use the 'discover_commands' tool first to find available commands and their metadata, with the optional query parameter.
+- The query should typically be a single word, e.g., 'terminal', 'notebook', 'cell', 'file', 'edit', 'view', 'run', etc, to find relevant commands.
+- If searching with a query does not yield the desired command, try again with a different query or use an empty query to list all commands.
 - This ensures you have complete information about command IDs, descriptions, and required arguments before attempting to execute them. Only after discovering the available commands should you use the 'execute_command' tool with the correct command ID and arguments.
 
 TOOL SELECTION GUIDELINES: