@datalayer/agent-runtimes 1.0.3 → 1.0.5

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

@@ -1,20 +1,27 @@
-import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, ModelConfig, SkillInfo } from '../../types';
+import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, McpToolsetsStatusResponse, ModelConfig, SkillInfo } from '../../types';
 export interface InputToolbarProps {
     input: string;
     setInput: (value: string) => void;
     isLoading: boolean;
+    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 +35,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, 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,14 +17,14 @@ 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, 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, }) {
     // 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) &&
+    const hasContext = Boolean(agentUsage && !agentUsage.error && agentUsage.totalTokens > 0);
+    return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, 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 && hasContext && agentUsage && (_jsx(TokenUsageBar, { agentUsage: agentUsage, padding: padding })), (showModelSelector || showToolsMenu || showSkillsMenu) &&
                 (hasConfigData || hasSkillsData) && (_jsxs(Box, { sx: {
                     display: 'flex',
                     gap: 2,
@@ -34,13 +34,29 @@ export function InputToolbar({ input, setInput, isLoading, placeholder, autoFocu
                     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: [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 }))] }))] }));
 }
 // ---------------------------------------------------------------------------
 // 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 +76,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 +96,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 +139,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

@@ -40,6 +40,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 +58,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, 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;

package/lib/chat/prompt/InputPrompt.js

@@ -8,7 +8,7 @@ import { InputPromptLexical } from './InputPromptLexical';
 /**
  * InputPrompt — Integrated chat input with header, input area, and footer.
  */
-export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…', isLoading = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }) {
+export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…', isLoading = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, readOnly = false, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }) {
     // ---- Controlled / uncontrolled state -----------------------------------
     const [internalInput, setInternalInput] = useState('');
     const input = controlledValue !== undefined ? controlledValue : internalInput;
@@ -46,14 +46,14 @@ export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…',
     }, [isLoading, variant]);
     // ---- Send / Stop handlers ----------------------------------------------
     const handleSend = useCallback(() => {
-        if (!input.trim() || isLoading || disabled)
+        if (!input.trim() || isLoading || disabled || readOnly)
             return;
         const message = input.trim();
         if (controlledValue === undefined) {
             setInput('');
         }
         onSend(message);
-    }, [input, isLoading, disabled, onSend, setInput, controlledValue]);
+    }, [input, isLoading, disabled, readOnly, onSend, setInput, controlledValue]);
     const handleStop = useCallback(() => {
         onStop?.();
     }, [onStop]);
@@ -78,6 +78,6 @@ export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…',
                         borderColor: 'accent.fg',
                         boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#0969da'}`,
                     },
-                }, children: [_jsx(InputPromptHeader, { children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, onSubmit: handleSend, autoFocus: autoFocus })) : (_jsx(InputPromptText, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, onSubmit: handleSend, inputRef: inputRef })), _jsx(InputPromptFooter, { isLoading: isLoading, sendDisabled: !input.trim() || disabled, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
+                }, children: [_jsx(InputPromptHeader, { children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, autoFocus: autoFocus })) : (_jsx(InputPromptText, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, inputRef: inputRef })), _jsx(InputPromptFooter, { isLoading: isLoading, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
 }
 export default InputPrompt;

package/lib/chat/prompt/InputPromptFooter.js

@@ -10,6 +10,6 @@ export function InputPromptFooter({ children, rightContent, isLoading = false, s
             px: 2,
             pt: 1,
             pb: 2,
-        }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: onStop, size: "small" })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: onSend, disabled: sendDisabled, size: "small" }))] })] }));
+        }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: onStop, size: "small", variant: "invisible" })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] }));
 }
 export default InputPromptFooter;

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

@@ -7,10 +7,12 @@ export interface InputPromptLexicalProps {
     placeholder?: string;
     /** Whether the input is disabled */
     disabled?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
     /** Callback when the user presses Enter (without Shift) */
     onSubmit?: () => void;
     /** Auto-focus the editor on mount */
     autoFocus?: boolean;
 }
-export declare function InputPromptLexical({ value, onChange, placeholder, disabled, onSubmit, autoFocus, }: InputPromptLexicalProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPromptLexical({ value, onChange, placeholder, disabled, readOnly, onSubmit, autoFocus, }: InputPromptLexicalProps): import("react/jsx-runtime").JSX.Element;
 export default InputPromptLexical;

package/lib/chat/prompt/InputPromptLexical.js

@@ -38,17 +38,17 @@ const EDITOR_CONFIG = {
     },
 };
 // ---- Enter-to-submit plugin ---------------------------------------------
-function EnterSubmitPlugin({ onSubmit, disabled, }) {
+function EnterSubmitPlugin({ onSubmit, disabled, readOnly, }) {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
-            if (event?.shiftKey || disabled)
+            if (event?.shiftKey || disabled || readOnly)
                 return false;
             event?.preventDefault();
             onSubmit?.();
             return true;
         }, COMMAND_PRIORITY_HIGH);
-    }, [editor, onSubmit, disabled]);
+    }, [editor, onSubmit, disabled, readOnly]);
     return null;
 }
 // ---- Sync plugin (controlled component bridge) --------------------------
@@ -94,7 +94,14 @@ function AutoFocusPlugin({ autoFocus }) {
     }, [editor, autoFocus]);
     return null;
 }
-export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, onSubmit, autoFocus = false, }) {
+function ReadOnlyPlugin({ readOnly }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        editor.setEditable(!readOnly);
+    }, [editor, readOnly]);
+    return null;
+}
+export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, autoFocus = false, }) {
     return (_jsx(Box, { sx: {
             px: 2,
             py: 1,
@@ -117,6 +124,6 @@ export function InputPromptLexical({ value, onChange, placeholder = 'Ask anythin
                             fontSize: 1,
                             pointerEvents: 'none',
                             userSelect: 'none',
-                        }, children: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(SyncPlugin, { value: value, onChange: onChange }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, disabled: disabled }), _jsx(AutoFocusPlugin, { autoFocus: autoFocus })] }) }));
+                        }, children: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(SyncPlugin, { value: value, onChange: onChange }), _jsx(ReadOnlyPlugin, { readOnly: readOnly || disabled }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, disabled: disabled, readOnly: readOnly }), _jsx(AutoFocusPlugin, { autoFocus: autoFocus })] }) }));
 }
 export default InputPromptLexical;

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

@@ -15,10 +15,12 @@ export interface InputPromptTextProps {
     placeholder?: string;
     /** Whether the input is disabled */
     disabled?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
     /** Callback when the user presses Enter (without Shift) */
     onSubmit?: () => void;
     /** Ref forwarded to the underlying textarea */
     inputRef?: Ref<HTMLTextAreaElement>;
 }
-export declare function InputPromptText({ value, onChange, placeholder, disabled, onSubmit, inputRef, }: InputPromptTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPromptText({ value, onChange, placeholder, disabled, readOnly, onSubmit, inputRef, }: InputPromptTextProps): import("react/jsx-runtime").JSX.Element;
 export default InputPromptText;

package/lib/chat/prompt/InputPromptText.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, } from 'react';
 import { Textarea } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-export function InputPromptText({ value, onChange, placeholder = 'Ask anything…', disabled = false, onSubmit, inputRef, }) {
+export function InputPromptText({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, inputRef, }) {
     // Auto-resize
     const adjustHeight = useCallback(() => {
         const el = inputRef && 'current' in inputRef
@@ -41,7 +41,7 @@ export function InputPromptText({ value, onChange, placeholder = 'Ask anything
             onSubmit?.();
         }
     }, [onSubmit]);
-    return (_jsx(Box, { sx: { px: 2, py: 1 }, children: _jsx(Textarea, { ref: inputRef, value: value, onChange: e => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, sx: {
+    return (_jsx(Box, { sx: { px: 2, py: 1 }, children: _jsx(Textarea, { ref: inputRef, value: value, onChange: e => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly, sx: {
                 width: '100%',
                 resize: 'none',
                 minHeight: '40px',

package/lib/chat/tools/ToolApprovalBanner.js

@@ -46,7 +46,7 @@ export function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, o
                     justifyContent: 'space-between',
                     px: 3,
                     py: 2,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [pendingApprovals.length, " tool", ' ', pendingApprovals.length === 1 ? 'approval' : 'approvals', " pending"] })] }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [onApproveAll && pendingApprovals.length > 1 && (_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: onApproveAll, children: "Approve all" })), collapsible && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setCollapsed(true), children: "Collapse" })), onDismiss && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: XIcon, onClick: onDismiss, "aria-label": "Dismiss" }))] })] }), _jsx(Box, { sx: { px: 3, pb: 2 }, children: pendingApprovals.map(approval => (_jsxs(Box, { sx: {
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [pendingApprovals.length, " tool", ' ', pendingApprovals.length === 1 ? 'approval' : 'approvals', " pending"] })] }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [onApproveAll && pendingApprovals.length >= 1 && (_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: onApproveAll, children: "Approve all" })), collapsible && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setCollapsed(true), children: "Collapse" })), onDismiss && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: XIcon, onClick: onDismiss, "aria-label": "Dismiss" }))] })] }), _jsx(Box, { sx: { px: 3, pb: 2 }, children: pendingApprovals.map(approval => (_jsxs(Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',

package/lib/chat/tools/ToolCallDisplay.d.ts

@@ -28,6 +28,8 @@ export interface ToolCallDisplayProps {
     approvalRequired?: boolean;
     /** Approval state for this tool call */
     approvalState?: 'pending' | 'approved' | 'denied';
+    /** Where the approval decision originated */
+    approvalDecisionSource?: 'inline' | 'external';
     /** Called when user approves this tool call */
     onApprove?: () => void;
     /** Called when user denies this tool call */
@@ -45,5 +47,5 @@ export interface ToolCallDisplayProps {
  * - Color-coded status indicators
  * - Rich error display distinguishing execution errors from code errors
  */
-export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired, approvalState, onApprove, onDeny, approvalLoading, }: ToolCallDisplayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading, }: ToolCallDisplayProps): import("react/jsx-runtime").JSX.Element;
 export default ToolCallDisplay;

package/lib/chat/tools/ToolCallDisplay.js

@@ -124,7 +124,7 @@ function getArgsSummary(args) {
  * - Color-coded status indicators
  * - Rich error display distinguishing execution errors from code errors
  */
-export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired = false, approvalState, onApprove, onDeny, approvalLoading = false, }) {
+export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired = false, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading = false, }) {
     const [isExpanded, setIsExpanded] = useState(false);
     // Determine effective exit code from props or execution result
     const effectiveExitCode = exitCode ?? executionResult?.exit_code;
@@ -265,7 +265,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         wordBreak: 'break-word',
                                     }, children: typeof result === 'string'
                                         ? result
-                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsx(Text, { sx: { color: 'success.fg', fontSize: 1 }, children: "Approved. Executing tool." })) : approvalState === 'denied' ? (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: "Denied. Tool will not run." })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: "This tool requires your approval to run." }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: "Deny" })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'success.fg', fontSize: 1, display: 'block' }, children: "Approved. Executing tool." }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Approved from sidebar." }))] })) : approvalState === 'denied' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, display: 'block' }, children: "Denied. Tool will not run." }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Decision came from sidebar." }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: "This tool requires your approval to run." }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: "Deny" })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',

package/lib/chat/usage/TokenUsageBar.js

@@ -29,6 +29,19 @@ export function TokenUsageBar({ agentUsage, padding }) {
     const hasSession = agentUsage.sessionUsage &&
         (agentUsage.sessionUsage.inputTokens > 0 ||
             agentUsage.sessionUsage.outputTokens > 0);
+    const hasCostUsage = !!agentUsage.costUsage &&
+        (agentUsage.costUsage.cumulativeCostUsd > 0 ||
+            agentUsage.costUsage.lastTurnCostUsd > 0);
+    const sessionUsage = agentUsage.sessionUsage;
+    const turnUsage = agentUsage.turnUsage;
+    const costUsage = agentUsage.costUsage;
+    const formatUsd = (amount) => {
+        if (amount < 0.01)
+            return `$${amount.toFixed(4)}`;
+        if (amount < 1)
+            return `$${amount.toFixed(3)}`;
+        return `$${amount.toFixed(2)}`;
+    };
     // Build pie chart data
     const usedTokens = agentUsage.totalTokens;
     const windowTokens = agentUsage.contextWindow;
@@ -180,7 +193,12 @@ export function TokenUsageBar({ agentUsage, padding }) {
                                     color: 'fg.default',
                                     display: 'block',
                                     mb: 2,
-                                }, children: "Context Window" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default' }, children: formatTokenCount(usedTokens) }), ' / ', formatTokenCount(windowTokens), ' tokens'] }), _jsxs(Text, { sx: {
+                                }, children: "Context Window" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default' }, children: formatTokenCount(usedTokens) }), ' / ', formatTokenCount(windowTokens), ' tokens'] }), agentUsage.costUsage && (_jsxs(Text, { sx: {
+                                    fontSize: 0,
+                                    color: 'fg.muted',
+                                    display: 'block',
+                                    mb: 2,
+                                }, children: ['cost ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default' }, children: formatUsd(agentUsage.costUsage.lastTurnCostUsd) }), ' turn · ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default' }, children: formatUsd(agentUsage.costUsage.cumulativeCostUsd) }), ' total'] })), _jsxs(Text, { sx: {
                                     fontSize: 0,
                                     color: pct > 90
                                         ? 'danger.fg'
@@ -209,5 +227,5 @@ export function TokenUsageBar({ agentUsage, padding }) {
                                     display: 'block',
                                     mt: 2,
                                     fontStyle: 'italic',
-                                }, children: "Quality may decline as limit nears." }))] }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(agentUsage.totalTokens) }), ' / ', formatTokenCount(agentUsage.contextWindow), ' ctx'] }), hasSession && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· ', formatTokenCount(agentUsage.sessionUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.sessionUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), hasTurn && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· turn ', formatTokenCount(agentUsage.turnUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.turnUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] }))] }));
+                                }, children: "Quality may decline as limit nears." }))] }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(agentUsage.totalTokens) }), ' / ', formatTokenCount(agentUsage.contextWindow), ' ctx'] }), hasCostUsage && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· cost ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatUsd(costUsage?.lastTurnCostUsd ?? 0) }), ' turn / ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatUsd(costUsage?.cumulativeCostUsd ?? 0) })] })), hasSession && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· ', formatTokenCount(sessionUsage?.inputTokens ?? 0), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(sessionUsage?.outputTokens ?? 0), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), hasTurn && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· turn ', formatTokenCount(turnUsage?.inputTokens ?? 0), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(turnUsage?.outputTokens ?? 0), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] }))] }));
 }

package/lib/client/AgentRuntimesClientContext.d.ts

@@ -0,0 +1,53 @@
+/**
+ * React context and hook for injecting an {@link IAgentRuntimesClient}
+ * implementation into the chat component tree.
+ *
+ * Consumers wrap the `<Chat>` component with `<AgentRuntimesClientProvider>`
+ * and pass the implementation of their choice — the default
+ * `SdkAgentRuntimesClient` for browser / Node, or a bridge
+ * implementation in the VSCode webview sandbox. Components and hooks inside
+ * the tree call {@link useAgentRuntimesClient} to retrieve the current client
+ * without knowing anything about how it talks to the backend.
+ *
+ * @module client/AgentRuntimesClientContext
+ */
+import type { ReactNode } from 'react';
+import type { IAgentRuntimesClient } from './IAgentRuntimesClient';
+/** Props for {@link AgentRuntimesClientProvider}. */
+export interface AgentRuntimesClientProviderProps {
+    /** Client implementation to make available to descendants. */
+    client: IAgentRuntimesClient;
+    /** Descendants that should see the provided client. */
+    children: ReactNode;
+}
+/**
+ * Provides an {@link IAgentRuntimesClient} instance to every descendant.
+ *
+ * @param props - Provider props.
+ *
+ * @returns A React element that exposes `props.client` to descendants.
+ */
+export declare function AgentRuntimesClientProvider(props: AgentRuntimesClientProviderProps): JSX.Element;
+/**
+ * Reads the active {@link IAgentRuntimesClient} from context.
+ *
+ * @returns The active client.
+ *
+ * @throws When called outside an {@link AgentRuntimesClientProvider}. Prefer a
+ *   loud failure to silently falling back to a default client, because a
+ *   missing provider usually indicates a wiring bug (especially in the VSCode
+ *   webview where the default client would make forbidden direct HTTP calls).
+ */
+export declare function useAgentRuntimesClient(): IAgentRuntimesClient;
+/**
+ * Reads the current {@link IAgentRuntimesClient} from context without
+ * throwing.
+ *
+ * Use this variant in code paths that want to fall back to some other behavior
+ * when no provider is mounted (for example, legacy hook implementations that
+ * currently still make direct network calls and are being migrated
+ * incrementally).
+ *
+ * @returns The active client, or `null` when no provider is mounted.
+ */
+export declare function useOptionalAgentRuntimesClient(): IAgentRuntimesClient | null;

package/lib/client/AgentRuntimesClientContext.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+/**
+ * React context carrying the active {@link IAgentRuntimesClient}. `null` when
+ * no provider is mounted — in that case {@link useAgentRuntimesClient} throws
+ * so callers fail loudly rather than silently making no-op HTTP calls.
+ */
+const AgentRuntimesClientContext = createContext(null);
+/**
+ * Provides an {@link IAgentRuntimesClient} instance to every descendant.
+ *
+ * @param props - Provider props.
+ *
+ * @returns A React element that exposes `props.client` to descendants.
+ */
+export function AgentRuntimesClientProvider(props) {
+    const { client, children } = props;
+    // Memoize the context value so identity only changes when the client
+    // reference itself changes.
+    const value = useMemo(() => client, [client]);
+    return (_jsx(AgentRuntimesClientContext.Provider, { value: value, children: children }));
+}
+/**
+ * Reads the active {@link IAgentRuntimesClient} from context.
+ *
+ * @returns The active client.
+ *
+ * @throws When called outside an {@link AgentRuntimesClientProvider}. Prefer a
+ *   loud failure to silently falling back to a default client, because a
+ *   missing provider usually indicates a wiring bug (especially in the VSCode
+ *   webview where the default client would make forbidden direct HTTP calls).
+ */
+export function useAgentRuntimesClient() {
+    const client = useContext(AgentRuntimesClientContext);
+    if (client === null) {
+        throw new Error('useAgentRuntimesClient must be called inside an <AgentRuntimesClientProvider>. ' +
+            'Wrap your <Chat> component (or the subtree that uses agent-runtimes hooks) ' +
+            'with <AgentRuntimesClientProvider client={...}>.');
+    }
+    return client;
+}
+/**
+ * Reads the current {@link IAgentRuntimesClient} from context without
+ * throwing.
+ *
+ * Use this variant in code paths that want to fall back to some other behavior
+ * when no provider is mounted (for example, legacy hook implementations that
+ * currently still make direct network calls and are being migrated
+ * incrementally).
+ *
+ * @returns The active client, or `null` when no provider is mounted.
+ */
+export function useOptionalAgentRuntimesClient() {
+    return useContext(AgentRuntimesClientContext);
+}