@datalayer/agent-runtimes 1.0.4 → 1.0.6

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, isKernelBusy = 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, isKernelBusy: isKernelBusy, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
 }
 export default InputPrompt;

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

@@ -16,10 +16,12 @@ export interface InputPromptFooterProps {
     isLoading?: boolean;
     /** Whether the send button should be disabled */
     sendDisabled?: boolean;
+    /** Whether the connected kernel is currently busy */
+    isKernelBusy?: boolean;
     /** Callback when the send button is clicked */
     onSend: () => void;
     /** Callback when the stop button is clicked */
     onStop?: () => void;
 }
-export declare function InputPromptFooter({ children, rightContent, isLoading, sendDisabled, onSend, onStop, }: InputPromptFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPromptFooter({ children, rightContent, isLoading, sendDisabled, isKernelBusy, onSend, onStop, }: InputPromptFooterProps): import("react/jsx-runtime").JSX.Element;
 export default InputPromptFooter;

package/lib/chat/prompt/InputPromptFooter.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { PaperAirplaneIcon, SquareCircleIcon } from '@primer/octicons-react';
-export function InputPromptFooter({ children, rightContent, isLoading = false, sendDisabled = false, onSend, onStop, }) {
+import { PaperAirplaneIcon, SquareCircleIcon, PauseIcon, } from '@primer/octicons-react';
+export function InputPromptFooter({ children, rightContent, isLoading = false, sendDisabled = false, isKernelBusy = false, onSend, onStop, }) {
     return (_jsxs(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
@@ -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" })) : isKernelBusy ? (_jsx(IconButton, { icon: PauseIcon, "aria-label": "Pause (kernel busy)", onClick: onStop, size: "small", variant: "invisible", disabled: !onStop })) : (_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);
+}

package/lib/client/AgentsMixin.d.ts

@@ -13,7 +13,6 @@
 import type { Constructor } from '@datalayer/core/lib/client/utils/mixins';
 import type { AgentEvent, CreateAgentEventRequest, GetAgentEventResponse, ListAgentEventsParams, ListAgentEventsResponse, UpdateAgentEventRequest, RunningAgent, AgentUsageSummary, ConversationCheckpoint, AgentNotification, NotificationFilters, OutputArtifact, EvalReport, RunEvalsRequest, ContextUsage, CostUsage, AgentSpec } from '../types';
 import type { CreateAgentRuntimeRequest, CreateRuntimeApiResponse } from '../types/agents-lifecycle';
-import type { ToolApproval, ToolApprovalFilters } from '../types/tool-approvals';
 /** Agents mixin providing durable agent management. */
 export declare function AgentsMixin<TBase extends Constructor>(Base: TBase): {
     new (...args: any[]): {
@@ -53,23 +52,6 @@ export declare function AgentsMixin<TBase extends Constructor>(Base: TBase): {
          * @returns Usage summary including tokens, cost, iterations
          */
         getAgentUsage(podName: string, agentId?: string): Promise<AgentUsageSummary>;
-        /**
-         * List tool approval requests, optionally filtered.
-         * @param filters - Optional filters (status, agentId)
-         * @returns Array of tool approval records
-         */
-        getToolApprovals(filters?: ToolApprovalFilters): Promise<ToolApproval[]>;
-        /**
-         * Approve a tool execution request.
-         * @param approvalId - ID of the approval to approve
-         */
-        approveToolRequest(approvalId: string): Promise<void>;
-        /**
-         * Reject a tool execution request.
-         * @param approvalId - ID of the approval to reject
-         * @param reason - Optional rejection reason
-         */
-        rejectToolRequest(approvalId: string, reason?: string): Promise<void>;
         /**
          * List notifications, optionally filtered.
          * @param filters - Optional filters (level, read status)

package/lib/client/AgentsMixin.js

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import * as agents from '../api/agents';
-import * as toolApprovals from '../api/tool-approvals';
 import * as notifications from '../api/notifications';
 import * as events from '../api/events';
 import * as output from '../api/output';
@@ -80,35 +79,12 @@ export function AgentsMixin(Base) {
         // ========================================================================
         // Tool Approvals
         // ========================================================================
-        /**
-         * List tool approval requests, optionally filtered.
-         * @param filters - Optional filters (status, agentId)
-         * @returns Array of tool approval records
-         */
-        async getToolApprovals(filters) {
-            const token = this.getToken();
-            const baseUrl = this.getIamRunUrl();
-            return toolApprovals.getToolApprovals(token, filters, baseUrl);
-        }
-        /**
-         * Approve a tool execution request.
-         * @param approvalId - ID of the approval to approve
-         */
-        async approveToolRequest(approvalId) {
-            const token = this.getToken();
-            const baseUrl = this.getIamRunUrl();
-            return toolApprovals.approveToolRequest(token, approvalId, baseUrl);
-        }
-        /**
-         * Reject a tool execution request.
-         * @param approvalId - ID of the approval to reject
-         * @param reason - Optional rejection reason
-         */
-        async rejectToolRequest(approvalId, reason) {
-            const token = this.getToken();
-            const baseUrl = this.getIamRunUrl();
-            return toolApprovals.rejectToolRequest(token, approvalId, reason, baseUrl);
-        }
+        //
+        // Tool approval interactions have been removed from the REST mixin.
+        // All approval flows (list / approve / reject / realtime updates) now
+        // travel exclusively over the AI Agents websocket stream. Use the
+        // `useToolApprovals` React hook (or send `tool_approval_decision`
+        // messages directly on the stream) instead.
         // ========================================================================
         // Notifications
         // ========================================================================
@@ -353,6 +329,11 @@ export function AgentsMixin(Base) {
         async createAgentRuntime(data) {
             const token = this.getToken();
             const runtimesRunUrl = this.getRuntimesRunUrl();
+            const normalizedVolumeUids = Array.isArray(data.volumeUids)
+                ? data.volumeUids.map(uid => String(uid || '').trim()).filter(Boolean)
+                : data.volumeUid
+                    ? [String(data.volumeUid).trim()]
+                    : [];
             return requestDatalayerAPI({
                 url: `${runtimesRunUrl}/api/runtimes/v1/runtimes`,
                 method: 'POST',
@@ -366,6 +347,15 @@ export function AgentsMixin(Base) {
                     enable_codemode: data.enableCodemode ?? false,
                     agent_spec_id: data.agentSpecId || undefined,
                     agent_spec: data.agentSpec || undefined,
+                    user_account_handle: data.userAccountHandle || undefined,
+                    billable_account_uid: data.billableAccountUid || undefined,
+                    billable_account_type: data.billableAccountType || undefined,
+                    billable_account_handle: data.billableAccountHandle || undefined,
+                    billable_source_organization_uid: data.billableSourceOrganizationUid || undefined,
+                    billable_source_organization_handle: data.billableSourceOrganizationHandle || undefined,
+                    mount_home_folder: data.mountHomeFolder ?? false,
+                    volume_uids: normalizedVolumeUids.length > 0 ? normalizedVolumeUids : undefined,
+                    volume_uid: normalizedVolumeUids[0] || data.volumeUid || undefined,
                 },
             });
         }