@datalayer/agent-runtimes 0.0.5 → 0.0.8

package/lib/components/chat/components/base/ChatBase.js

@@ -19,7 +19,7 @@ import { useContext } from 'react';
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { Heading, Text, Spinner, IconButton, Textarea, Button, ActionMenu, ActionList, LabelGroup, Label, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { AlertIcon, PlusIcon, TrashIcon, GearIcon, PersonIcon, PaperAirplaneIcon, SquareCircleIcon, ToolsIcon, AiModelIcon, } from '@primer/octicons-react';
+import { AlertIcon, PlusIcon, TrashIcon, GearIcon, PersonIcon, PaperAirplaneIcon, SquareCircleIcon, ToolsIcon, AiModelIcon, BriefcaseIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { useQuery, QueryClient, QueryClientProvider, QueryClientContext, } from '@tanstack/react-query';
 import { Streamdown } from 'streamdown';
@@ -157,31 +157,75 @@ function useConfigQuery(enabled, configEndpoint, authToken) {
         enabled,
     });
 }
+/**
+ * Hook to fetch available skills from backend
+ */
+function useSkillsQuery(enabled, baseEndpoint, authToken) {
+    const queryClient = useContext(QueryClientContext);
+    // If no QueryClient is available, return a mock result
+    if (!queryClient) {
+        return {
+            data: undefined,
+            isLoading: false,
+            isError: false,
+            error: null,
+            refetch: () => Promise.resolve({ data: undefined }),
+        };
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useQuery({
+        queryFn: async () => {
+            if (!baseEndpoint) {
+                return { skills: [], total: 0 };
+            }
+            // Derive skills endpoint from config endpoint
+            const skillsEndpoint = baseEndpoint.replace('/configure', '/skills');
+            const headers = {
+                'Content-Type': 'application/json',
+            };
+            if (authToken) {
+                headers['Authorization'] = `Bearer ${authToken}`;
+            }
+            const response = await fetch(skillsEndpoint, { headers });
+            if (!response.ok) {
+                throw new Error(`Skills fetch failed: ${response.statusText}`);
+            }
+            return response.json();
+        },
+        queryKey: ['skills', baseEndpoint || 'jupyter'],
+        enabled,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+    });
+}
 /**
  * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
  */
-export function ChatBase({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, className, loadingState, headerActions, 
+export function ChatBase({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, initialMcpServers, initialSkills, className, loadingState, headerActions, 
 // Mode selection
 useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
 // Extended props
-brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, }) {
+brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, 
+// Identity/Authorization props
+onAuthorizationRequired, connectedIdentities, }) {
     // Check if QueryClientProvider is already available
     const existingQueryClient = useContext(QueryClientContext);
     // If no QueryClient is available, wrap with our internal provider
     if (!existingQueryClient) {
-        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }) }));
+        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, initialMcpServers: initialMcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities }) }));
     }
     // QueryClient already available, render inner component directly
-    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }));
+    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, initialMcpServers: initialMcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities }));
 }
 /**
  * Inner ChatBase component - contains all the actual logic
  */
-function ChatBaseInner({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, className, loadingState, headerActions, 
+function ChatBaseInner({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, initialMcpServers, initialSkills, className, loadingState, headerActions, 
 // Mode selection
 useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
 // Extended props
-brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, }) {
+brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, 
+// Identity/Authorization props
+onAuthorizationRequired, connectedIdentities, }) {
     // Ensure Primer's default portal has high z-index for ActionMenu overlays
     useHighZIndexPortal();
     // Store (optional for message persistence)
@@ -202,9 +246,13 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     // Note: legacy _enabledTools for backend-defined tools from config query
     // Frontend tools are passed via frontendTools prop
     const [_enabledTools, setEnabledTools] = useState([]);
+    // Skills state - tracks which skills are enabled
+    const [enabledSkills, setEnabledSkills] = useState(new Set());
     // Config query (for protocols that support it)
     // Safely handles missing QueryClientProvider
     const configQuery = useConfigQuery(Boolean(protocol?.enableConfigQuery), protocol?.configEndpoint, protocol?.authToken);
+    // Skills query (for protocols that support it)
+    const skillsQuery = useSkillsQuery(Boolean(protocol?.enableConfigQuery) && showSkillsMenu, protocol?.configEndpoint, protocol?.authToken);
     // Refs
     const adapterRef = useRef(null);
     const unsubscribeRef = useRef(null);
@@ -214,6 +262,10 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     const messagesEndRef = useRef(null);
     const inputRef = useRef(null);
     const abortControllerRef = useRef(null);
+    // Use a ref for connectedIdentities to avoid infinite loops in useCallback
+    // (the array reference changes on every render even if contents are the same)
+    const connectedIdentitiesRef = useRef(connectedIdentities);
+    connectedIdentitiesRef.current = connectedIdentities;
     // Auto-focus input on mount
     useEffect(() => {
         if (autoFocus && inputRef.current) {
@@ -255,7 +307,8 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
             textarea.style.height = 'auto';
             // Set height to scrollHeight, capped at maxHeight (120px)
             const maxHeight = 120;
-            const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+            const minHeight = 40;
+            const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
             textarea.style.height = `${newHeight}px`;
             // Add overflow if content exceeds maxHeight
             textarea.style.overflowY =
@@ -266,30 +319,66 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     useEffect(() => {
         adjustTextareaHeight();
     }, [input, adjustTextareaHeight]);
+    // Ensure textarea has a minimum height on mount
+    useEffect(() => {
+        const timer = setTimeout(adjustTextareaHeight, 0);
+        return () => clearTimeout(timer);
+    }, [adjustTextareaHeight]);
     // Initialize model and tools when config is available
     useEffect(() => {
         if (configQuery.data && !selectedModel) {
-            // Select first available model, or fallback to first model if none available
-            const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
-            const firstModel = firstAvailableModel || configQuery.data.models[0];
-            if (firstModel) {
-                setSelectedModel(firstModel.id);
-                const allToolIds = configQuery.data.builtinTools?.map(tool => tool.id) || [];
-                setEnabledTools(allToolIds);
+            // Use initialModel if provided, otherwise select first available model
+            if (initialModel) {
+                // Check if the initial model exists in the config
+                const modelExists = configQuery.data.models.some(m => m.id === initialModel);
+                if (modelExists) {
+                    setSelectedModel(initialModel);
+                }
+                else {
+                    // Fallback to first available model if initialModel not found
+                    const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
+                    const firstModel = firstAvailableModel || configQuery.data.models[0];
+                    if (firstModel) {
+                        setSelectedModel(firstModel.id);
+                    }
+                }
+            }
+            else {
+                // No initialModel provided, select first available model
+                const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
+                const firstModel = firstAvailableModel || configQuery.data.models[0];
+                if (firstModel) {
+                    setSelectedModel(firstModel.id);
+                }
             }
-            // Initialize MCP server tools - all enabled by default
+            const allToolIds = configQuery.data.builtinTools?.map(tool => tool.id) || [];
+            setEnabledTools(allToolIds);
+            // Initialize MCP server tools
             if (configQuery.data.mcpServers) {
                 const newEnabledMcpTools = new Map();
                 for (const server of configQuery.data.mcpServers) {
                     if (server.isAvailable && server.enabled) {
-                        const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
-                        newEnabledMcpTools.set(server.id, enabledToolNames);
+                        // If initialMcpServers is provided, only enable those servers
+                        // If not provided, enable all available servers
+                        const shouldEnableServer = initialMcpServers
+                            ? initialMcpServers.includes(server.id)
+                            : true;
+                        if (shouldEnableServer) {
+                            const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
+                            newEnabledMcpTools.set(server.id, enabledToolNames);
+                        }
                     }
                 }
                 setEnabledMcpTools(newEnabledMcpTools);
             }
         }
-    }, [configQuery.data, selectedModel]);
+    }, [configQuery.data, selectedModel, initialModel, initialMcpServers]);
+    // Initialize enabled skills from initialSkills prop
+    useEffect(() => {
+        if (initialSkills && initialSkills.length > 0) {
+            setEnabledSkills(new Set(initialSkills));
+        }
+    }, [initialSkills]);
     // Helper to toggle MCP tool enabled state
     const toggleMcpTool = useCallback((serverId, toolName) => {
         setEnabledMcpTools(prev => {
@@ -318,6 +407,23 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
             return newMap;
         });
     }, []);
+    // Helper to toggle skill enabled state
+    const toggleSkill = useCallback((skillId) => {
+        setEnabledSkills(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(skillId)) {
+                newSet.delete(skillId);
+            }
+            else {
+                newSet.add(skillId);
+            }
+            return newSet;
+        });
+    }, []);
+    // Helper to toggle all skills
+    const toggleAllSkills = useCallback((allSkillIds, enable) => {
+        setEnabledSkills(enable ? new Set(allSkillIds) : new Set());
+    }, []);
     // Get all enabled MCP tool names (for sending with requests)
     const getEnabledMcpToolNames = useCallback(() => {
         const toolNames = [];
@@ -326,6 +432,10 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
         });
         return toolNames;
     }, [enabledMcpTools]);
+    // Get all enabled skill IDs (for sending with requests)
+    const getEnabledSkillIds = useCallback(() => {
+        return Array.from(enabledSkills);
+    }, [enabledSkills]);
     // Load messages from store on mount when useStoreMode is enabled
     useEffect(() => {
         if (useStoreMode) {
@@ -338,10 +448,16 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     // Derived state
     const messages = displayItems.filter((item) => !isToolCallMessage(item));
     const ready = true;
-    // Notify parent when messages change
+    // Track previous message count to avoid unnecessary callbacks
+    const prevMessageCountRef = useRef(0);
+    // Notify parent when messages change (only when count actually changes)
     useEffect(() => {
-        onMessagesChange?.(messages);
-    }, [messages, onMessagesChange]);
+        const currentCount = messages.length;
+        if (currentCount !== prevMessageCountRef.current) {
+            prevMessageCountRef.current = currentCount;
+            onMessagesChange?.(messages);
+        }
+    }, [displayItems, onMessagesChange]); // Use displayItems instead of messages to avoid infinite loop
     // Padding based on compact mode
     const padding = compact ? 2 : 3;
     // Default avatar config
@@ -548,16 +664,58 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                                 const isHumanInTheLoop = existingToolCall.args &&
                                     'steps' in existingToolCall.args &&
                                     Array.isArray(existingToolCall.args.steps);
+                                // Extract rich error information from result if available
+                                const resultData = event.toolResult.result;
+                                let executionError;
+                                let codeError;
+                                let exitCode;
+                                let hasError = !!event.toolResult.error;
+                                if (resultData && typeof resultData === 'object') {
+                                    // Check for execution_error (infrastructure/sandbox errors)
+                                    if (resultData.execution_error &&
+                                        typeof resultData.execution_error === 'string') {
+                                        executionError = resultData.execution_error;
+                                        hasError = true;
+                                    }
+                                    // Check for code_error (Python exceptions)
+                                    if (resultData.code_error &&
+                                        typeof resultData.code_error === 'object') {
+                                        const ce = resultData.code_error;
+                                        codeError = {
+                                            name: ce.name || 'Error',
+                                            value: ce.value || 'Unknown error',
+                                            traceback: ce.traceback,
+                                        };
+                                        hasError = true;
+                                    }
+                                    // Check for exit_code (non-zero exit from sys.exit())
+                                    if ('exit_code' in resultData) {
+                                        const ec = resultData.exit_code;
+                                        exitCode = typeof ec === 'number' ? ec : null;
+                                        // Non-zero exit code counts as an error condition
+                                        if (exitCode != null && exitCode !== 0) {
+                                            hasError = true;
+                                        }
+                                    }
+                                    // Check for execution_ok flag
+                                    if ('execution_ok' in resultData &&
+                                        resultData.execution_ok === false) {
+                                        hasError = true;
+                                    }
+                                }
                                 const updatedToolCall = {
                                     ...existingToolCall,
                                     result: event.toolResult.result,
                                     // Keep executing for HITL, otherwise mark complete/error
-                                    status: event.toolResult.error
+                                    status: hasError
                                         ? 'error'
                                         : isHumanInTheLoop
                                             ? 'executing'
                                             : 'complete',
                                     error: event.toolResult.error,
+                                    executionError,
+                                    codeError,
+                                    exitCode,
                                 };
                                 toolCallsRef.current.set(toolCallId, updatedToolCall);
                                 setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
@@ -724,8 +882,9 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                     description: tool.description,
                     parameters: tool.parameters || { type: 'object', properties: {} },
                 }));
-                // Get enabled MCP tool names
+                // Get enabled MCP tool names and skill IDs
                 const enabledMcpToolNames = getEnabledMcpToolNames();
+                const enabledSkillIds = getEnabledSkillIds();
                 await adapterRef.current.sendMessage(userMessage, {
                     threadId: threadIdRef.current,
                     messages: allMessages,
@@ -733,6 +892,10 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                     tools: toolsForRequest,
                     // Include enabled MCP tools as builtin_tools for backend
                     builtinTools: enabledMcpToolNames,
+                    // Include enabled skills for backend
+                    skills: enabledSkillIds,
+                    // Include connected identities with access tokens (use ref to avoid infinite loops)
+                    identities: connectedIdentitiesRef.current,
                 });
             }
         }
@@ -760,6 +923,7 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
         onSendMessage,
         enableStreaming,
         getEnabledMcpToolNames,
+        getEnabledSkillIds,
     ]);
     // Handle stop
     const handleStop = useCallback(() => {
@@ -1018,7 +1182,7 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                             status: item.status,
                             error: item.error,
                             respond,
-                        })) : (_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error }));
+                        })) : (_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode }));
                         // Skip if custom render returns null/undefined
                         if (toolUI === null || toolUI === undefined)
                             return null;
@@ -1281,7 +1445,8 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                                     maxHeight: '120px',
                                     overflow: 'hidden',
                                     transition: 'height 0.1s ease-out',
-                                }, rows: 1 }), isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: handleStop, sx: { alignSelf: 'flex-end' } })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: handleSend, disabled: !input.trim(), sx: { alignSelf: 'flex-end' } }))] }) }), (showModelSelector || showToolsMenu) && configQuery.data && (_jsxs(Box, { sx: {
+                                }, rows: 1 }), isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: handleStop, sx: { alignSelf: 'flex-end' } })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: handleSend, disabled: !input.trim(), sx: { alignSelf: 'flex-end' } }))] }) }), (showModelSelector || showToolsMenu || showSkillsMenu) &&
+                    (configQuery.data || skillsQuery.data) && (_jsxs(Box, { sx: {
                         display: 'flex',
                         gap: 2,
                         px: padding,
@@ -1290,61 +1455,100 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                         borderColor: 'border.default',
                         alignItems: 'center',
                         bg: 'canvas.subtle',
-                    }, children: [showToolsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: ToolsIcon, "aria-label": "Tools", variant: "invisible", size: "small" }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: {
+                    }, children: [showToolsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: ToolsIcon, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Tools", getEnabledMcpToolNames().length > 0 &&
+                                                    ` (${getEnabledMcpToolNames().length})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: {
                                             maxHeight: '60vh',
                                             overflowY: 'auto',
-                                        }, children: _jsx(ActionList, { children: configQuery.data?.mcpServers &&
-                                                configQuery.data.mcpServers.length > 0 ? (configQuery.data.mcpServers.map(server => {
-                                                const serverTools = enabledMcpTools.get(server.id);
-                                                const allToolNames = server.tools.map(t => t.name);
-                                                const enabledCount = serverTools?.size ?? 0;
-                                                const allEnabled = enabledCount === allToolNames.length &&
-                                                    allToolNames.length > 0;
-                                                return (_jsxs(ActionList.Group, { title: `${server.name}${server.isAvailable ? '' : ' (unavailable)'}`, children: [server.isAvailable &&
-                                                            server.tools.length > 0 && (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                alignItems: 'center',
-                                                                justifyContent: 'space-between',
-                                                                px: 3,
-                                                                py: 2,
-                                                                borderBottom: '1px solid',
-                                                                borderColor: 'border.muted',
-                                                            }, children: [_jsxs(Text, { id: `toggle-all-${server.id}`, sx: {
-                                                                        fontSize: 0,
-                                                                        fontWeight: 'semibold',
-                                                                        color: 'fg.muted',
-                                                                    }, children: ["Enable all (", enabledCount, "/", allToolNames.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: allEnabled, onClick: () => toggleAllMcpServerTools(server.id, allToolNames, !allEnabled), "aria-labelledby": `toggle-all-${server.id}` })] })), server.isAvailable && server.tools.length > 0 ? (server.tools.map(tool => {
-                                                            const isEnabled = serverTools?.has(tool.name) ?? false;
-                                                            return (_jsxs(Box, { sx: {
+                                        }, children: _jsxs(ActionList, { children: [codemodeEnabled && (_jsx(ActionList.Group, { title: "Codemode", children: _jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "MCP tools are accessible via Codemode meta-tools (search_tools, list_tool_names, execute_code)." }) }) })), configQuery.data?.mcpServers &&
+                                                    configQuery.data.mcpServers.length > 0 ? (configQuery.data.mcpServers.map(server => {
+                                                    const serverTools = enabledMcpTools.get(server.id);
+                                                    const allToolNames = server.tools.map(t => t.name);
+                                                    const enabledCount = serverTools?.size ?? 0;
+                                                    const allEnabled = enabledCount === allToolNames.length &&
+                                                        allToolNames.length > 0;
+                                                    return (_jsxs(ActionList.Group, { title: `${server.name}${server.isAvailable ? '' : ' (unavailable)'}`, children: [server.isAvailable &&
+                                                                server.tools.length > 0 && (_jsxs(Box, { sx: {
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     justifyContent: 'space-between',
                                                                     px: 3,
                                                                     py: 2,
-                                                                    '&:hover': {
-                                                                        backgroundColor: 'canvas.subtle',
-                                                                    },
-                                                                }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-tool-${server.id}-${tool.name}`, sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Text, { sx: {
-                                                                                    display: 'block',
-                                                                                    fontSize: 0,
-                                                                                    color: 'fg.muted',
-                                                                                    overflow: 'hidden',
-                                                                                    textOverflow: 'ellipsis',
-                                                                                    whiteSpace: 'nowrap',
-                                                                                }, children: tool.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => toggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }, `${server.id}-${tool.name}`));
-                                                        })) : server.isAvailable ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
-                                                                    color: 'fg.muted',
-                                                                    fontStyle: 'italic',
-                                                                }, children: "No tools discovered" }) })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                    borderBottom: '1px solid',
+                                                                    borderColor: 'border.muted',
+                                                                }, children: [_jsxs(Text, { id: `toggle-all-${server.id}`, sx: {
+                                                                            fontSize: 0,
+                                                                            fontWeight: 'semibold',
+                                                                            color: 'fg.muted',
+                                                                        }, children: ["Enable all (", enabledCount, "/", allToolNames.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: allEnabled, onClick: () => toggleAllMcpServerTools(server.id, allToolNames, !allEnabled), "aria-labelledby": `toggle-all-${server.id}` })] })), server.isAvailable &&
+                                                                server.tools.length > 0 ? (server.tools.map(tool => {
+                                                                const isEnabled = serverTools?.has(tool.name) ?? false;
+                                                                return (_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        justifyContent: 'space-between',
+                                                                        px: 3,
+                                                                        py: 2,
+                                                                        '&:hover': {
+                                                                            backgroundColor: 'canvas.subtle',
+                                                                        },
+                                                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-tool-${server.id}-${tool.name}`, sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Text, { sx: {
+                                                                                        display: 'block',
+                                                                                        fontSize: 0,
+                                                                                        color: 'fg.muted',
+                                                                                        overflow: 'hidden',
+                                                                                        textOverflow: 'ellipsis',
+                                                                                        whiteSpace: 'nowrap',
+                                                                                    }, children: tool.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => toggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }, `${server.id}-${tool.name}`));
+                                                            })) : server.isAvailable ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                        color: 'fg.muted',
+                                                                        fontStyle: 'italic',
+                                                                    }, children: "No tools discovered" }) })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                        color: 'fg.muted',
+                                                                        fontStyle: 'italic',
+                                                                    }, children: "Server unavailable" }) }))] }, server.id));
+                                                })) : (_jsx(ActionList.Group, { title: "Available Tools", children: availableTools.length > 0 ? (availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
+                                                                        width: 8,
+                                                                        height: 8,
+                                                                        borderRadius: '50%',
+                                                                        backgroundColor: 'success.emphasis',
+                                                                    } }) }), tool.name] }, tool.id)))) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                color: 'fg.muted',
+                                                                fontStyle: 'italic',
+                                                            }, children: "No tools available" }) })) }))] }) }) })] })), showSkillsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: BriefcaseIcon, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Skills", enabledSkills.size > 0 && ` (${enabledSkills.size})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: {
+                                            maxHeight: '60vh',
+                                            overflowY: 'auto',
+                                        }, children: _jsx(ActionList, { children: skillsQuery.isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skillsQuery.data?.skills &&
+                                                skillsQuery.data.skills.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'space-between',
+                                                            px: 3,
+                                                            py: 2,
+                                                            borderBottom: '1px solid',
+                                                            borderColor: 'border.muted',
+                                                        }, children: [_jsxs(Text, { id: "toggle-all-skills", sx: {
+                                                                    fontSize: 0,
+                                                                    fontWeight: 'semibold',
                                                                     color: 'fg.muted',
-                                                                    fontStyle: 'italic',
-                                                                }, children: "Server unavailable" }) }))] }, server.id));
-                                            })) : (_jsx(ActionList.Group, { title: "Available Tools", children: availableTools.length > 0 ? (availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
-                                                                    width: 8,
-                                                                    height: 8,
-                                                                    borderRadius: '50%',
-                                                                    backgroundColor: 'success.emphasis',
-                                                                } }) }), tool.name] }, tool.id)))) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools available" }) })) })) }) }) })] })), showModelSelector && models.length > 0 && selectedModel && (_jsxs(Box, { sx: {
+                                                                }, children: ["Enable all (", enabledSkills.size, "/", skillsQuery.data.skills.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.size ===
+                                                                    skillsQuery.data.skills.length, onClick: () => toggleAllSkills(skillsQuery.data.skills.map(s => s.id), enabledSkills.size !==
+                                                                    skillsQuery.data.skills.length), "aria-labelledby": "toggle-all-skills" })] }), skillsQuery.data.skills.map(skill => (_jsxs(Box, { sx: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'space-between',
+                                                            px: 3,
+                                                            py: 2,
+                                                            '&:hover': {
+                                                                backgroundColor: 'canvas.subtle',
+                                                            },
+                                                        }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: {
+                                                                            display: 'block',
+                                                                            fontSize: 0,
+                                                                            color: 'fg.muted',
+                                                                            overflow: 'hidden',
+                                                                            textOverflow: 'ellipsis',
+                                                                            whiteSpace: 'nowrap',
+                                                                        }, children: skill.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.has(skill.id), onClick: () => toggleSkill(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] }, skill.id)))] })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No skills available" }) })) }) }) })] })), showModelSelector && models.length > 0 && selectedModel && (_jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 alignItems: 'flex-end',
@@ -1372,7 +1576,7 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                     bg: 'danger.subtle',
                     borderBottom: '1px solid',
                     borderColor: 'danger.muted',
-                }, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error.message })] })), _jsx(Box, { sx: { flex: 1, overflow: 'auto', bg: 'canvas.default' }, children: children ? (children) : (_jsx(Box, { sx: {
+                }, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error.message })] })), _jsx(Box, { sx: { flex: 1, flexGrow: 1, overflow: 'auto', bg: 'canvas.default' }, children: children ? (children) : (_jsx(Box, { sx: {
                         display: 'flex',
                         flexDirection: 'column',
                         minHeight: '100%',

package/lib/components/chat/components/display/ToolCallDisplay.d.ts

@@ -1,4 +1,9 @@
 import type { ToolCallStatus } from '../base/ChatBase';
+import type { CodeError, ExecutionResult } from '../../types/execution';
+/**
+ * Error type classification for display purposes
+ */
+export type ErrorType = 'execution' | 'code' | 'exit' | 'unknown';
 export interface ToolCallDisplayProps {
     /** Tool call ID */
     toolCallId: string;
@@ -10,8 +15,16 @@ export interface ToolCallDisplayProps {
     result?: unknown;
     /** Current status */
     status: ToolCallStatus;
-    /** Error message if failed */
+    /** Error message if failed (backwards compatible) */
     error?: string;
+    /** Rich execution result with detailed error information */
+    executionResult?: ExecutionResult;
+    /** Code error details (Python exception) */
+    codeError?: CodeError;
+    /** Exit code when code called sys.exit() */
+    exitCode?: number | null;
+    /** Execution/infrastructure error message */
+    executionError?: string;
 }
 /**
  * ToolCallDisplay component - Default display for tool calls in chat
@@ -21,6 +34,7 @@ export interface ToolCallDisplayProps {
  * - Shows tool name, status icon, and brief summary when collapsed
  * - Expands to show full parameters and results
  * - Color-coded status indicators
+ * - Rich error display distinguishing execution errors from code errors
  */
-export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, }: ToolCallDisplayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, }: ToolCallDisplayProps): import("react/jsx-runtime").JSX.Element;
 export default ToolCallDisplay;