@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/chat/messages/ChatMessageList.d.ts

@@ -7,7 +7,7 @@
 import { type ReactNode, type RefObject } from 'react';
 import type { DisplayItem, AvatarConfig, RenderToolResult } from '../../types/chat';
 export interface ToolApprovalConfig {
-    /** Base API URL for the agent runtime (e.g., http://localhost:8765/api/v1) */
+    /** Base API URL for the agent runtime (e.g., `http://localhost:8765/api/v1`). */
     apiBaseUrl: string;
     /** Auth token for API calls */
     authToken?: string;

package/lib/chat/messages/ChatMessageList.js

@@ -9,138 +9,177 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @module chat/messages/MessageList
  */
-import { useState, useEffect, useCallback, } from 'react';
+import { useState, useCallback, useMemo, } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { Streamdown } from 'streamdown';
 import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
 import { ToolCallDisplay } from '../tools/ToolCallDisplay';
 import { isToolCallMessage, getMessageText } from '../../utils';
+import { useAgentRuntimeStore } from '../../stores/agentRuntimeStore';
 // ---------------------------------------------------------------------------
-// DefaultToolCallRenderer — handles tool approval for a single tool call
+// Normalize helper
 // ---------------------------------------------------------------------------
-function DefaultToolCallRenderer({ item, approvalConfig, onRespond, }) {
+function normalizeName(name) {
+    return name
+        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
+        .replace(/[-_]/g, '')
+        .toLowerCase();
+}
+/**
+ * Expand a single-line markdown table (rows joined with `||`) into one row
+ * per line so a markdown renderer can produce a real HTML table. Idempotent:
+ * any pre-existing `|\n|` boundaries are unaffected.
+ */
+function expandCompactMarkdownTableBody(body) {
+    if (!body)
+        return body;
+    if (!/\|\s*[-:| ]{3,}\|/.test(body))
+        return body;
+    if (!body.includes('||'))
+        return body;
+    return body.replace(/\|\|/g, '|\n|');
+}
+/**
+ * Pre-process assistant text for Streamdown:
+ *  - Unwrap ```markdown / ```md fenced blocks so tables render as HTML
+ *    instead of as a code block.
+ *  - Inside any fenced block (or top-level body), expand compact one-line
+ *    markdown tables.
+ */
+function normalizeAssistantMarkdown(text) {
+    if (!text)
+        return text;
+    // Unwrap explicit ```markdown / ```md fences and expand compact tables.
+    let out = text.replace(/```(markdown|md)\s*\n([\s\S]*?)```/gi, (_match, _lang, body) => {
+        const expanded = expandCompactMarkdownTableBody(body.trim());
+        return `\n\n${expanded}\n\n`;
+    });
+    // Also expand compact tables inside other fenced blocks that happen to
+    // carry a markdown table (e.g. bare ``` fences).
+    out = out.replace(/```([a-zA-Z0-9_+-]*)\n([\s\S]*?)```/g, (match, lang, body) => {
+        const expanded = expandCompactMarkdownTableBody(body);
+        if (expanded === body)
+            return match;
+        // If we expanded an unlabeled fence containing a real markdown table,
+        // unwrap it so it renders as a table.
+        if (!lang || /^(text|plain)$/i.test(lang)) {
+            return `\n\n${expanded.trim()}\n\n`;
+        }
+        return `\`\`\`${lang}\n${expanded}\`\`\``;
+    });
+    return out;
+}
+// ---------------------------------------------------------------------------
+// DefaultToolCallRenderer — reads approvals from the Zustand store,
+// sends decisions over the shared WebSocket (no REST polling).
+// ---------------------------------------------------------------------------
+function DefaultToolCallRenderer({ item, onRespond, }) {
     const resultObject = item.result && typeof item.result === 'object'
         ? item.result
         : undefined;
     // Detect pending approval from tool result (pydantic-deferred mode)
     const isPendingFromResult = item.status === 'inProgress' && resultObject?.pending_approval === true;
+    // Extract the approval_id carried in the tool result by the adapter.
+    // This is always available when the SSE stream contained a
+    // `tool-approval-request` event, even when the Zustand store has not been
+    // populated (e.g. no monitoring WS open).
+    const resultApprovalId = typeof resultObject?.approval_id === 'string'
+        ? resultObject.approval_id
+        : undefined;
     // In ai-agents-wrapper mode, the server blocks waiting for approval and
     // never sends a tool-result with pending_approval. The tool stays in
-    // 'executing' status. We proactively poll the approval API to detect if
-    // a pending approval record exists for this tool.
+    // 'executing' status.
     const isExecuting = item.status === 'executing';
-    const [matchedApprovalId, setMatchedApprovalId] = useState(null);
     const [decision, setDecision] = useState();
-    const [loading, setLoading] = useState(false);
-    // Should we poll the approval API?
-    const shouldPoll = (isPendingFromResult || isExecuting) &&
-        !!approvalConfig?.apiBaseUrl &&
-        !decision;
-    // Normalize tool name for matching (strip version suffix, dashes/underscores, lowercase)
-    const normalizedToolName = item.toolName
-        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
-        .replace(/[-_]/g, '')
-        .toLowerCase();
-    // Poll for matching approval record when tool is executing or pending approval
-    useEffect(() => {
-        if (!shouldPoll || !approvalConfig?.apiBaseUrl)
+    const normalizedToolName = useMemo(() => normalizeName(item.toolName), [item.toolName]);
+    // Skill tools (`run_skill_script`, `load_skill`, `read_skill_resource`) are
+    // gated by the server under a synthetic approval ``tool_name`` of the form
+    // ``skill:<skill_id>`` (see ``SkillsGuardrailCapability._request_skill_approval``).
+    // Capture the skill id carried in the tool-call arguments so we can match
+    // the inline approval button against that synthetic approval entry.
+    const skillApprovalKey = useMemo(() => {
+        const SKILL_TOOLS = new Set([
+            'run_skill_script',
+            'load_skill',
+            'read_skill_resource',
+        ]);
+        if (!SKILL_TOOLS.has(item.toolName))
+            return null;
+        const a = (item.args ?? {});
+        const raw = a.skill_name ?? a.skill ?? a.name;
+        if (typeof raw !== 'string' || raw.length === 0)
+            return null;
+        // Strip optional ``<name>:<version>`` suffix to the base skill id.
+        const base = raw.split(':', 1)[0] || raw;
+        return `skill:${base}`.toLowerCase();
+    }, [item.toolName, item.args]);
+    // Read pending approvals from the Zustand store (fed by the agent-runtime WS).
+    const approvals = useAgentRuntimeStore(s => s.approvals);
+    // Prefer an exact match by approval id (when present in SSE tool result).
+    const matchedByResultId = useMemo(() => {
+        if (!resultApprovalId)
+            return null;
+        return approvals.find(a => a.id === resultApprovalId) ?? null;
+    }, [approvals, resultApprovalId]);
+    // Match the synthetic ``skill:<id>`` approval for skill tool calls.  This
+    // runs whenever the tool call is a skill tool so the inline Approve/Deny
+    // buttons surface even when the server is blocked in
+    // ``ToolApprovalManager.request_and_wait`` (status stays ``executing`` and
+    // no ``pending_approval=True`` result is ever emitted).
+    const matchedBySkill = useMemo(() => {
+        if (!skillApprovalKey)
+            return null;
+        return (approvals.find(a => a.tool_name?.toLowerCase() === skillApprovalKey) ??
+            null);
+    }, [approvals, skillApprovalKey]);
+    // Fallback to matching by tool name for inline approval flows that don't
+    // always provide approval_id in the tool result payload.
+    const matchedByName = useMemo(() => {
+        if (!isPendingFromResult && !isExecuting)
+            return null;
+        return (approvals.find(a => normalizeName(a.tool_name) === normalizedToolName) ??
+            null);
+    }, [approvals, normalizedToolName, isPendingFromResult, isExecuting]);
+    const matchedApproval = matchedByResultId ?? matchedBySkill ?? matchedByName;
+    // Prefer the store-matched approval id, fall back to the id from the tool
+    // result (SSE path). This ensures the approve/deny buttons work even when
+    // the monitoring WS is not connected.
+    const effectiveApprovalId = matchedApproval?.id ?? resultApprovalId ?? null;
+    // Reflect approval decisions that happened outside this card (e.g. sidebar).
+    const externalDecision = matchedApproval?.status === 'approved'
+        ? 'approved'
+        : matchedApproval?.status === 'rejected'
+            ? 'denied'
+            : undefined;
+    const makeDecision = useCallback((action) => {
+        if (!effectiveApprovalId)
             return;
-        let cancelled = false;
-        const poll = async () => {
-            try {
-                const headers = {
-                    'Content-Type': 'application/json',
-                };
-                if (approvalConfig.authToken) {
-                    headers['Authorization'] = `Bearer ${approvalConfig.authToken}`;
-                }
-                const res = await fetch(`${approvalConfig.apiBaseUrl}/tool-approvals?status=pending`, { headers });
-                if (!res.ok || cancelled)
-                    return;
-                const data = await res.json();
-                const approvals = Array.isArray(data)
-                    ? data
-                    : (data.approvals ??
-                        data.requests ??
-                        []);
-                // Match by normalized tool name
-                const match = approvals.find(a => {
-                    const aNormalized = String(a.tool_name || '')
-                        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
-                        .replace(/[-_]/g, '')
-                        .toLowerCase();
-                    return aNormalized === normalizedToolName && a.status === 'pending';
-                });
-                if (match && !cancelled) {
-                    setMatchedApprovalId(match.id);
-                }
-            }
-            catch {
-                // Retry on next interval
-            }
-        };
-        poll();
-        const interval = setInterval(poll, 3000);
-        return () => {
-            cancelled = true;
-            clearInterval(interval);
-        };
-    }, [
-        shouldPoll,
-        approvalConfig?.apiBaseUrl,
-        approvalConfig?.authToken,
-        normalizedToolName,
-    ]);
-    const makeDecision = useCallback(async (action) => {
-        if (!matchedApprovalId || !approvalConfig?.apiBaseUrl)
-            return;
-        setLoading(true);
-        try {
-            const headers = {
-                'Content-Type': 'application/json',
-            };
-            if (approvalConfig.authToken) {
-                headers['Authorization'] = `Bearer ${approvalConfig.authToken}`;
-            }
-            const res = await fetch(`${approvalConfig.apiBaseUrl}/tool-approvals/${matchedApprovalId}/${action}`, {
-                method: 'POST',
-                headers,
-                body: JSON.stringify({}),
-            });
-            if (res.ok) {
-                setDecision(action === 'approve' ? 'approved' : 'denied');
-                onRespond({
-                    type: 'tool-approval-decision',
-                    approved: action === 'approve',
-                    approvalId: matchedApprovalId,
-                    toolName: item.toolName,
-                });
-            }
-        }
-        catch {
-            // Allow retry
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [
-        matchedApprovalId,
-        approvalConfig?.apiBaseUrl,
-        approvalConfig?.authToken,
-        onRespond,
-        item.toolCallId,
-        item.toolName,
-    ]);
+        const approved = action === 'approve';
+        // Use ONLY the adapter continuation path (SSE/POST). Sending both WS and
+        // continuation decisions can trigger duplicate approval cycles.
+        setDecision(approved ? 'approved' : 'denied');
+        onRespond({
+            type: 'tool-approval-decision',
+            approved,
+            approvalId: effectiveApprovalId,
+            toolName: item.toolName,
+        });
+    }, [effectiveApprovalId, onRespond, item.toolName]);
     // Show approval UI when we have a confirmed pending approval (from result
-    // or discovered via polling) or after a decision has been made.
-    const hasApproval = isPendingFromResult || !!matchedApprovalId;
-    const approvalState = decision || (hasApproval ? 'pending' : undefined);
-    return (_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, approvalRequired: hasApproval, approvalState: approvalState, onApprove: matchedApprovalId && !decision
-            ? () => void makeDecision('approve')
-            : undefined, onDeny: matchedApprovalId && !decision
-            ? () => void makeDecision('reject')
-            : undefined, approvalLoading: loading }));
+    // or discovered via the store) or after a decision has been made.
+    const hasApproval = isPendingFromResult || !!effectiveApprovalId || !!externalDecision;
+    const approvalState = decision || externalDecision || (hasApproval ? 'pending' : undefined);
+    const approvalDecisionSource = decision
+        ? 'inline'
+        : externalDecision
+            ? 'external'
+            : undefined;
+    return (_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, approvalRequired: hasApproval, approvalState: approvalState, approvalDecisionSource: approvalDecisionSource, onApprove: effectiveApprovalId && !decision && !externalDecision
+            ? () => makeDecision('approve')
+            : undefined, onDeny: effectiveApprovalId && !decision && !externalDecision
+            ? () => makeDecision('reject')
+            : undefined, approvalLoading: false }));
 }
 // ---------------------------------------------------------------------------
 // Component
@@ -271,6 +310,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                     : avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
                                     maxWidth: '85%',
                                     p: 2,
+                                    overflowX: 'auto',
                                     borderRadius: 2,
                                     backgroundColor: isUser ? 'accent.emphasis' : 'canvas.subtle',
                                     // Use primary-button text token for better contrast when
@@ -283,7 +323,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                         fontSize: 1,
                                         whiteSpace: 'pre-wrap',
                                         wordBreak: 'break-word',
-                                    }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
+                                    }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(getMessageText(message) || (isStreaming ? '...' : '')) }) })) })] }) }, message.id));
             }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
                     display: 'flex',
                     alignItems: 'flex-start',

package/lib/chat/messages/ChatMessages.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useRef, useEffect } from 'react';
 import { Text, RelativeTime } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, useThemeStore, getColorPalette } from '@datalayer/primer-addons';
 import { PersonIcon, ToolsIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { useChatMessages, useChatExtensionRegistry, } from '../../stores/chatStore';
@@ -24,6 +24,10 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
     const extensionRegistry = extensionRegistryProp ?? storeExtensionRegistry;
     const containerRef = useRef(null);
     const lastMessageRef = useRef(null);
+    // Resolve a light color from the current user theme palette so the
+    // assistant icon contrasts the saturated `accent.emphasis` avatar bg.
+    const { theme, colorMode } = useThemeStore();
+    const assistantIconColor = getColorPalette(theme, colorMode).primary;
     // Auto-scroll to bottom on new messages
     useEffect(() => {
         if (autoScroll && lastMessageRef.current) {
@@ -73,7 +77,7 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
                             color: message.role === 'user'
                                 ? 'fg.default'
                                 : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
-                        }, children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { size: 16 })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
+                        }, children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { size: 16, color: assistantIconColor })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 2,

package/lib/chat/prompt/InputFooter.d.ts

@@ -1,20 +1,29 @@
-import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, ModelConfig, SkillInfo } from '../../types';
+import type { KernelMessage } from '@jupyterlab/services';
+import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, McpToolsetsStatusResponse, ModelConfig, SkillInfo } from '../../types';
 export interface InputToolbarProps {
     input: string;
     setInput: (value: string) => void;
     isLoading: boolean;
+    kernelStatus?: KernelMessage.Status;
+    connectionConfirmed: boolean;
     placeholder?: string;
     autoFocus: boolean;
     focusTrigger?: number;
     padding: number;
     onSend: () => void;
     onStop: () => void;
+    disableInputPrompt?: boolean;
     showTokenUsage: boolean;
     agentUsage?: ContextSnapshotData;
     showModelSelector: boolean;
     showToolsMenu: boolean;
     showSkillsMenu: boolean;
     codemodeEnabled: boolean;
+    /**
+     * Optional callback invoked when the user toggles codemode from the Tools
+     * menu. When omitted the toggle renders as read-only.
+     */
+    onToggleCodemode?: (enabled: boolean) => void | Promise<void>;
     isA2AProtocol: boolean;
     hasConfigData: boolean;
     hasSkillsData: boolean;
@@ -28,16 +37,22 @@ export interface InputToolbarProps {
     enabledMcpToolCount: number;
     onToggleMcpTool: (serverId: string, toolName: string) => void;
     onToggleAllMcpServerTools: (serverId: string, toolNames: string[], enable: boolean) => void;
+    /** Approved MCP tools per server (default: all tools approved) */
+    approvedMcpTools: Map<string, Set<string>>;
+    onToggleMcpToolApproval: (serverId: string, toolName: string) => void;
     skills: SkillInfo[];
     skillsLoading: boolean;
     enabledSkills: Set<string>;
     onToggleSkill: (skillId: string) => void;
     onToggleAllSkills: (skillIds: string[], enable: boolean) => void;
-    /** API base URL passed to MCP / Sandbox indicators */
+    /** Approved skills set (default: all skills approved) */
+    approvedSkills: Set<string>;
+    onToggleSkillApproval: (skillId: string) => void;
+    /** API base URL passed to MCP indicator */
     apiBase?: string;
-    /** Auth token passed to MCP / Sandbox indicators */
+    /** Auth token passed to MCP indicator */
     authToken?: string;
-    /** Agent ID passed to Sandbox indicator for agent-scoped status */
-    agentId?: string;
+    /** Pre-fetched MCP status from WebSocket — bypasses REST polling */
+    mcpStatusData?: McpToolsetsStatusResponse | null;
 }
-export declare function InputToolbar({ input, setInput, isLoading, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, apiBase, authToken, agentId, }: InputToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputToolbar({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, disableInputPrompt, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputToolbarProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/prompt/InputFooter.js

@@ -17,30 +17,49 @@ import { ToolsIcon, BriefcaseIcon, AiModelIcon } from '@primer/octicons-react';
 import { InputPrompt } from './InputPrompt';
 import { TokenUsageBar } from '../usage/TokenUsageBar';
 import { McpStatusIndicator } from '../indicators/McpStatusIndicator';
-import { SandboxStatusIndicator } from '../indicators/SandboxStatusIndicator';
+import { SkillsStatusIndicator } from '../indicators/SkillsStatusIndicator';
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function InputToolbar({ input, setInput, isLoading, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, apiBase, authToken, agentId, }) {
+export function InputToolbar({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, disableInputPrompt = false, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }) {
+    const isKernelBusy = kernelStatus === 'busy';
+    const showSelectorsBar = showModelSelector || showToolsMenu || showSkillsMenu;
+    const hasSelectorsContent = hasConfigData || hasSkillsData;
     // Show token usage when we have valid context data
-    const hasContext = agentUsage && !agentUsage.error && agentUsage.totalTokens > 0;
-    return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(SandboxStatusIndicator, { apiBase: apiBase, authToken: authToken, agentId: agentId }), _jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken })] }) }), showTokenUsage && hasContext && (_jsx(TokenUsageBar, { agentUsage: agentUsage, padding: padding })), (showModelSelector || showToolsMenu || showSkillsMenu) &&
-                (hasConfigData || hasSkillsData) && (_jsxs(Box, { sx: {
+    const hasContext = Boolean(agentUsage && !agentUsage.error && agentUsage.totalTokens > 0);
+    return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, isKernelBusy: isKernelBusy, disabled: disableInputPrompt, readOnly: !connectionConfirmed, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken, data: mcpStatusData }), _jsx(SkillsStatusIndicator, { skillsCount: skills.length, enabledCount: enabledSkills.size, loading: skillsLoading })] }) }), showTokenUsage && (_jsx(Box, { sx: { minHeight: hasContext && agentUsage ? 28 : 8 }, children: hasContext && agentUsage ? (_jsx(TokenUsageBar, { agentUsage: agentUsage, padding: padding })) : null })), showSelectorsBar && (_jsx(Box, { sx: {
                     display: 'flex',
                     gap: 2,
                     px: padding,
-                    py: 1,
+                    py: 0.5,
+                    minHeight: 36,
                     borderTop: '1px solid',
                     borderColor: 'border.default',
                     alignItems: 'center',
                     bg: 'canvas.subtle',
-                }, children: [showToolsMenu && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, availableTools: availableTools })), showSkillsMenu && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills })), showModelSelector && models.length > 0 && selectedModel && (_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol }))] }))] }));
+                }, children: hasSelectorsContent ? (_jsxs(_Fragment, { children: [showToolsMenu && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: onToggleMcpToolApproval, availableTools: availableTools })), showSkillsMenu && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: onToggleSkillApproval })), showModelSelector && models.length > 0 && selectedModel && (_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol }))] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading controls..." })) }))] }));
 }
 // ---------------------------------------------------------------------------
 // ToolsMenu (private sub-component)
 // ---------------------------------------------------------------------------
-function ToolsMenu({ codemodeEnabled, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, availableTools, }) {
-    return (_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", enabledMcpToolCount > 0 && ` (${enabledMcpToolCount})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, 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)." }) }) })), mcpServers.length > 0 ? (mcpServers.map(server => {
+function ToolsMenu({ codemodeEnabled, onToggleCodemode, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, availableTools: _availableTools, }) {
+    const hasUsableMcpServers = mcpServers.some(server => server.isAvailable);
+    return (_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", enabledMcpToolCount > 0 && ` (${enabledMcpToolCount})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsxs(ActionList, { children: [_jsx(ActionList.Group, { title: "Codemode", children: _jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        px: 3,
+                                        py: 2,
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.muted',
+                                        gap: 2,
+                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: "toggle-codemode", sx: { fontWeight: 'semibold', display: 'block' }, children: "Enable Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: codemodeEnabled
+                                                        ? 'MCP tools accessible via meta-tools (search_tools, execute_code).'
+                                                        : 'Expose MCP tools directly to the model.' })] }), _jsx(ToggleSwitch, { size: "small", checked: codemodeEnabled, disabled: !onToggleCodemode, onClick: () => {
+                                                if (onToggleCodemode) {
+                                                    void onToggleCodemode(!codemodeEnabled);
+                                                }
+                                            }, "aria-labelledby": "toggle-codemode" })] }) }), mcpServers.length > 0 && hasUsableMcpServers ? (mcpServers.map(server => {
                                 const serverTools = enabledMcpTools.get(server.id);
                                 const allToolNames = server.tools.map(t => t.name);
                                 const enabledCount = serverTools?.size ?? 0;
@@ -60,6 +79,10 @@ function ToolsMenu({ codemodeEnabled, mcpServers, enabledMcpTools, enabledMcpToo
                                                         color: 'fg.muted',
                                                     }, children: ["Enable all (", enabledCount, "/", allToolNames.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: allEnabled, onClick: () => onToggleAllMcpServerTools(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;
+                                            const serverApproved = approvedMcpTools.get(server.id);
+                                            // Tools default to NOT approved — user must explicitly
+                                            // approve each one (matches the Skills approval UX).
+                                            const isApproved = serverApproved?.has(tool.name) ?? false;
                                             return (_jsxs(Box, { sx: {
                                                     display: 'flex',
                                                     alignItems: 'center',
@@ -76,20 +99,29 @@ function ToolsMenu({ codemodeEnabled, mcpServers, enabledMcpTools, enabledMcpToo
                                                                     overflow: 'hidden',
                                                                     textOverflow: 'ellipsis',
                                                                     whiteSpace: 'nowrap',
-                                                                }, children: tool.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => onToggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }, `${server.id}-${tool.name}`));
+                                                                }, children: tool.description }))] }), _jsxs(Box, { sx: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: 3,
+                                                        }, children: [_jsxs(Box, { sx: {
+                                                                    display: 'flex',
+                                                                    flexDirection: 'column',
+                                                                    alignItems: 'center',
+                                                                    gap: '2px',
+                                                                }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Enabled" }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => onToggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }), _jsxs(Box, { sx: {
+                                                                    display: 'flex',
+                                                                    flexDirection: 'column',
+                                                                    alignItems: 'center',
+                                                                    gap: '2px',
+                                                                }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Approved" }), _jsx(ToggleSwitch, { size: "small", checked: isApproved, onClick: () => onToggleMcpToolApproval(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" }) })) }))] }) }) })] }));
+                            })) : (_jsx(ActionList.Group, { title: "No MCP Servers", children: _jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No MCP Servers" }) }) }))] }) }) })] }));
 }
 // ---------------------------------------------------------------------------
 // SkillsMenu (private sub-component)
 // ---------------------------------------------------------------------------
-function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, }) {
-    return (_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: skillsLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skills.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, }) {
+    return (_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", skills.length > 0 && ` (${skills.length})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsx(ActionList, { children: skillsLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skills.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',
                                         justifyContent: 'space-between',
@@ -110,14 +142,38 @@ function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill, onTog
                                         '&: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: {
+                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.status && (_jsx(Text, { sx: {
+                                                                fontSize: '10px',
+                                                                px: 1,
+                                                                borderRadius: 2,
+                                                                bg: skill.status === 'loaded'
+                                                                    ? 'success.subtle'
+                                                                    : skill.status === 'enabled'
+                                                                        ? 'attention.subtle'
+                                                                        : 'neutral.subtle',
+                                                                color: skill.status === 'loaded'
+                                                                    ? 'success.fg'
+                                                                    : skill.status === 'enabled'
+                                                                        ? 'attention.fg'
+                                                                        : 'fg.muted',
+                                                            }, children: skill.status }))] }), 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: () => onToggleSkill(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" }) })) }) }) })] }));
+                                                    }, children: skill.description }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        alignItems: 'center',
+                                                        gap: '2px',
+                                                    }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Enabled" }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.has(skill.id), onClick: () => onToggleSkill(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] }), _jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        alignItems: 'center',
+                                                        gap: '2px',
+                                                    }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Approved" }), _jsx(ToggleSwitch, { size: "small", checked: approvedSkills.has(skill.id), onClick: () => onToggleSkillApproval(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" }) })) }) }) })] }));
 }
 // ---------------------------------------------------------------------------
 // ModelSelector (private sub-component)

package/lib/chat/prompt/InputPrompt.d.ts

@@ -24,6 +24,8 @@ export interface InputPromptProps {
     placeholder?: string;
     /** Whether the agent is loading / streaming */
     isLoading?: boolean;
+    /** Whether the connected kernel is currently busy */
+    isKernelBusy?: boolean;
     /** Callback when a message is submitted */
     onSend: (message: string) => void;
     /** Callback when the stop button is clicked */
@@ -40,6 +42,8 @@ export interface InputPromptProps {
     padding?: number;
     /** Whether the prompt is disabled */
     disabled?: boolean;
+    /** Whether the prompt is read-only */
+    readOnly?: boolean;
     /** Additional sx props for the outer container */
     sx?: Record<string, unknown>;
     /** Controlled input value (external state) */
@@ -56,5 +60,5 @@ export interface InputPromptProps {
 /**
  * InputPrompt — Integrated chat input with header, input area, and footer.
  */
-export declare function InputPrompt({ variant, placeholder, isLoading, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }: InputPromptProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPrompt({ variant, placeholder, isLoading, isKernelBusy, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, readOnly, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }: InputPromptProps): import("react/jsx-runtime").JSX.Element;
 export default InputPrompt;