@datalayer/agent-runtimes 0.0.9 → 0.0.11

package/lib/components/chat/components/Chat.d.ts

@@ -1,4 +1,6 @@
 import { type Suggestion } from './base/ChatBase';
+import type { ModelConfig } from './base/ChatBase';
+import type { McpServerSelection } from '../types';
 import type { OAuthProvider, OAuthProviderConfig, Identity } from '../../../identity';
 /**
  * Supported transports (communication transports)
@@ -54,10 +56,21 @@ export interface ChatProps {
     showSkillsMenu?: boolean;
     /** Indicate tools are accessed via Codemode meta-tools */
     codemodeEnabled?: boolean;
+    /**
+     * Show token usage bar between input and selectors.
+     * @default true
+     */
+    showTokenUsage?: boolean;
     /** Initial model ID to select (e.g., 'openai:gpt-4o-mini') */
     initialModel?: string;
-    /** Initial MCP server IDs to enable (others will be disabled) */
-    initialMcpServers?: string[];
+    /**
+     * Override the list of available models.
+     * When provided, this list replaces the models returned by the config endpoint.
+     * Use this to restrict the model selector to a specific subset of models.
+     */
+    availableModels?: ModelConfig[];
+    /** MCP server selections to enable (others will be disabled) */
+    mcpServers?: McpServerSelection[];
     /** Initial skill IDs to enable */
     initialSkills?: string[];
     /** Clear messages when component mounts or agentId changes */
@@ -82,6 +95,27 @@ export interface ChatProps {
     onIdentityConnect?: (identity: Identity) => void;
     /** Callback when identity disconnects */
     onIdentityDisconnect?: (provider: OAuthProvider) => void;
+    /**
+     * Runtime ID for conversation persistence.
+     * When provided, messages are fetched from the server API on page reload
+     * and prevents message mixing between different agent spaces.
+     */
+    runtimeId?: string;
+    /**
+     * Endpoint URL for fetching conversation history.
+     * When runtimeId is provided, this endpoint is called to fetch
+     * the conversation history on mount.
+     * If not provided, defaults to `{protocol.endpoint}/history`.
+     */
+    historyEndpoint?: string;
+    /**
+     * Error banner to display at the top of the chat.
+     * Use this to show sandbox connection errors or other warnings.
+     */
+    errorBanner?: {
+        message: string;
+        variant?: 'danger' | 'warning';
+    };
 }
 /**
  * Chat Component
@@ -124,5 +158,5 @@ export interface ChatProps {
  * />
  * ```
  */
-export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, initialMcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, errorBanner, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/lib/components/chat/components/Chat.js

@@ -70,7 +70,7 @@ function getEndpointPath(transport, agentId) {
         case 'ag-ui':
             return `/api/v1/ag-ui/${agentId}/`;
         case 'a2a':
-            // A2A requires trailing slash
+            // A2A requires trailing slash for FastA2A compatibility
             return `/api/v1/a2a/agents/${agentId}/`;
         case 'acp':
             return `/api/v1/acp/ws/${agentId}`;
@@ -130,7 +130,7 @@ function getProtocolType(transport) {
  * />
  * ```
  */
-export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = false, codemodeEnabled = false, initialModel, initialMcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, }) {
+export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = false, codemodeEnabled = false, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, errorBanner, }) {
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
@@ -282,16 +282,35 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
                     display: showDetails ? 'flex' : 'none',
                     flexDirection: 'column',
                     height: '100%',
-                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsx(Box, { sx: {
+                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsxs(Box, { sx: {
                     display: showDetails ? 'none' : 'flex',
                     flexDirection: 'column',
                     height: '100%',
-                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, initialMcpServers: initialMcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
-                        showNewChat: true,
-                        showClear: true,
-                        onNewChat: handleNewChat,
-                    }, avatarConfig: {
-                        showAvatars: true,
-                    }, backgroundColor: "canvas.default", focusTrigger: focusTrigger }) })] }));
+                }, children: [errorBanner && (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            px: 3,
+                            py: 2,
+                            bg: errorBanner.variant === 'warning'
+                                ? 'attention.subtle'
+                                : 'danger.subtle',
+                            borderBottom: '1px solid',
+                            borderColor: errorBanner.variant === 'warning'
+                                ? 'attention.muted'
+                                : 'danger.muted',
+                        }, children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning' ? 'attention.fg' : 'danger.fg' }), _jsx(Text, { sx: {
+                                    fontSize: 1,
+                                    color: errorBanner.variant === 'warning'
+                                        ? 'attention.fg'
+                                        : 'danger.fg',
+                                    flex: 1,
+                                }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
+                            showNewChat: true,
+                            showClear: true,
+                            onNewChat: handleNewChat,
+                        }, avatarConfig: {
+                            showAvatars: true,
+                        }, backgroundColor: "canvas.default", focusTrigger: focusTrigger })] })] }));
 }
 export default Chat;

package/lib/components/chat/components/ChatFloating.d.ts

@@ -20,7 +20,7 @@ export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCa
  */
 export interface ChatFloatingProps {
     /**
-     * AG-UI endpoint URL (e.g., http://localhost:8000/api/v1/examples/agentic_chat/).
+     * AG-UI endpoint URL (e.g., http://localhost:8000/api/v1/examples/agentic_chat).
      * When provided with useStore=false, enables AG-UI protocol mode.
      */
     endpoint?: string;
@@ -135,6 +135,12 @@ export interface ChatFloatingProps {
      * @default false
      */
     showPanelBackdrop?: boolean;
+    /**
+     * Override the list of available models.
+     * When provided, this list replaces the models returned by the config endpoint.
+     * Use this to restrict the model selector to a specific subset of models.
+     */
+    availableModels?: ModelConfig[];
     /**
      * Show model selector in footer.
      * @default false
@@ -150,6 +156,25 @@ export interface ChatFloatingProps {
      * @default false
      */
     showSkillsMenu?: boolean;
+    /**
+     * Show token usage bar between input and selectors.
+     * @default true
+     */
+    showTokenUsage?: boolean;
+    /**
+     * Runtime ID used to scope and persist conversation history.
+     * When provided, history is fetched on mount from the historyEndpoint.
+     */
+    runtimeId?: string;
+    /**
+     * Endpoint URL for fetching conversation history.
+     * Defaults to `{protocol.endpoint}/history` when runtimeId is set.
+     */
+    historyEndpoint?: string;
+    /**
+     * Auth token for the history endpoint.
+     */
+    historyAuthToken?: string;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -157,5 +182,5 @@ export interface ChatFloatingProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, showModelSelector, showToolsMenu, showSkillsMenu, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, runtimeId, historyEndpoint, historyAuthToken, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;

package/lib/components/chat/components/ChatFloating.js

@@ -43,7 +43,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, panelProps, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -68,15 +68,23 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             return protocolProp;
         if (!endpoint)
             return undefined;
-        // Extract base URL from endpoint (e.g., http://localhost:8765/api/v1/ag-ui/agent/ -> http://localhost:8765)
-        const baseUrl = endpoint.match(/^(https?:\/\/[^/]+)/)?.[1] || '';
+        // Extract base URL from endpoint - everything before /api/v1/
+        // e.g., https://prod1.datalayer.run/agent-runtimes/pool1/rt123/api/v1/ag-ui/default/
+        //     -> https://prod1.datalayer.run/agent-runtimes/pool1/rt123
+        const baseUrl = endpoint.match(/^(.*?)\/api\/v1\//)?.[1] ||
+            endpoint.match(/^(https?:\/\/[^/]+)/)?.[1] ||
+            '';
+        // Extract agentId from endpoint path (e.g., .../ag-ui/default/ -> default)
+        const agentIdMatch = endpoint.match(/\/ag-ui\/([^/]+)/);
+        const extractedAgentId = agentIdMatch ? agentIdMatch[1] : undefined;
         return {
             type: 'ag-ui',
             endpoint,
-            // Enable config query for model/tools/skills selector
-            enableConfigQuery: showModelSelector || showToolsMenu || showSkillsMenu,
+            agentId: extractedAgentId,
+            // Enable config query for model/tools/skills selector or token usage
+            enableConfigQuery: showModelSelector || showToolsMenu || showSkillsMenu || showTokenUsage,
             // Config endpoint is at /api/v1/configure (global, not per-agent)
-            configEndpoint: showModelSelector || showToolsMenu || showSkillsMenu
+            configEndpoint: showModelSelector || showToolsMenu || showSkillsMenu || showTokenUsage
                 ? `${baseUrl}/api/v1/configure`
                 : undefined,
         };
@@ -86,6 +94,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         showModelSelector,
         showToolsMenu,
         showSkillsMenu,
+        showTokenUsage,
     ]);
     // Clear messages when endpoint/protocol changes (e.g., switching examples)
     useEffect(() => {
@@ -364,9 +373,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: viewMode === 'panel' || isMobile ? 0 : '12px',
-                    boxShadow: viewMode === 'panel'
-                        ? '-4px 0 20px rgba(0, 0, 0, 0.15)'
-                        : '0 8px 30px rgba(0, 0, 0, 0.12)',
+                    boxShadow: viewMode === 'panel' ? 'shadow.large' : 'shadow.extra-large',
                     overflow: 'hidden',
                     transform: viewMode === 'panel'
                         ? isOpen
@@ -393,6 +400,6 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         ...poweredByProps,
                     }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, ...panelProps, children: children }) })] }));
+                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, ...panelProps, children: children }) })] }));
 }
 export default ChatFloating;

package/lib/components/chat/components/ChatPopupStandalone.js

@@ -382,7 +382,7 @@ export function ChatPopupStandalone({ onSendMessage, title = 'Chat', description
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: isMobile ? 0 : '12px',
-                    boxShadow: '0 8px 30px rgba(0, 0, 0, 0.12)',
+                    boxShadow: 'shadow.extra-large',
                     overflow: 'hidden',
                     transform: getAnimationTransform(isOpen),
                     opacity: isOpen ? 1 : 0,

package/lib/components/chat/components/ChatSidebar.d.ts

@@ -59,7 +59,7 @@ export interface ChatSidebarProps {
     /**
      * Handler for sending messages.
      * When provided, this is used instead of protocol mode.
-     * Signature: (message, messages, options?) => Promise<string | void>
+     * Signature: `(message, messages, options?) => Promise<string | void>`
      */
     onSendMessage?: MessageHandler;
     /** Enable streaming mode (default: true) */

package/lib/components/chat/components/ChatStandalone.d.ts

@@ -19,7 +19,7 @@ export interface ChatStandaloneProps {
     /**
      * Handler for sending messages - REQUIRED.
      * This function will be called when the user sends a message.
-     * Signature: (message, messages, options?) => Promise<string | void>
+     * Signature: `(message, messages, options?) => Promise<string | void>`
      * - message: The user's message text
      * - messages: All messages in the conversation (including the new user message)
      * - options: Streaming callbacks (onChunk, onComplete, onError, signal)

package/lib/components/chat/components/ChatStandalone.js

@@ -292,7 +292,7 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: isMobile ? 0 : '12px',
-                    boxShadow: '0 8px 30px rgba(0, 0, 0, 0.12)',
+                    boxShadow: 'shadow.extra-large',
                     overflow: 'hidden',
                     transform: getAnimationTransform(isOpen),
                     opacity: isOpen ? 1 : 0,

package/lib/components/chat/components/ContextDistribution.d.ts

@@ -14,6 +14,54 @@ interface Distribution {
     value: number;
     children: DistributionChild[];
 }
+/**
+ * Tool snapshot
+ */
+interface ToolSnapshot {
+    name: string;
+    description: string | null;
+    parametersTokens: number;
+    totalTokens: number;
+}
+/**
+ * Message snapshot
+ */
+interface MessageSnapshot {
+    role: string;
+    content: string;
+    estimatedTokens: number;
+    timestamp: string | null;
+}
+/**
+ * Request usage snapshot
+ */
+interface RequestUsageSnapshot {
+    requestNum: number;
+    inputTokens: number;
+    outputTokens: number;
+    toolNames: string[];
+    timestamp: string | null;
+    turnId: string | null;
+}
+/**
+ * Turn usage
+ */
+interface TurnUsage {
+    inputTokens: number;
+    outputTokens: number;
+    requests: number;
+    toolCalls: number;
+    toolNames: string[];
+}
+/**
+ * Session usage
+ */
+interface SessionUsage {
+    inputTokens: number;
+    outputTokens: number;
+    requests: number;
+    toolCalls: number;
+}
 /**
  * Context snapshot response from API
  */
@@ -21,16 +69,32 @@ export interface ContextSnapshotResponse {
     agentId: string;
     systemPrompts: string[];
     systemPromptTokens: number;
-    messages: Array<{
-        role: string;
-        content: string;
-        estimatedTokens: number;
-        timestamp: string | null;
-    }>;
+    tools: ToolSnapshot[];
+    toolTokens: number;
+    historyToolCallTokens: number;
+    historyToolReturnTokens: number;
+    currentToolCallTokens: number;
+    currentToolReturnTokens: number;
+    toolCallTokens: number;
+    toolReturnTokens: number;
+    messages: MessageSnapshot[];
+    historyUserTokens: number;
+    historyAssistantTokens: number;
+    currentUserTokens: number;
+    currentAssistantTokens: number;
+    historyTokens: number;
+    currentMessageTokens: number;
     userMessageTokens: number;
     assistantMessageTokens: number;
     totalTokens: number;
+    modelInputTokens: number | null;
+    modelOutputTokens: number | null;
+    sumResponseInputTokens: number;
+    sumResponseOutputTokens: number;
+    perRequestUsage: RequestUsageSnapshot[];
     contextWindow: number;
+    turnUsage: TurnUsage | null;
+    sessionUsage: SessionUsage | null;
     distribution: Distribution;
     error?: string;
 }

package/lib/components/chat/components/ContextDistribution.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright (c) 2025-2026 Datalayer, Inc.
 // Distributed under the terms of the Modified BSD License.
 /**
@@ -67,7 +67,7 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                 borderColor: 'border.default',
             }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context distribution" }) }));
     }
-    const { distribution, totalTokens, contextWindow } = snapshotData;
+    const { distribution, totalTokens } = snapshotData;
     const hasData = distribution.children && distribution.children.length > 0;
     // ECharts option for treemap
     const chartOption = {
@@ -121,7 +121,7 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     mb: 2,
-                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " /", ' ', formatTokens(contextWindow), " tokens)"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: showDetails ? 'Hide Details' : 'Show Details' })] }), hasData ? (_jsx(ReactECharts, { option: chartOption, style: { height }, opts: { renderer: 'svg' } })) : (_jsx(Box, { sx: {
+                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " total)"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: showDetails ? 'Hide Details' : 'Show Details' })] }), hasData ? (_jsx(ReactECharts, { option: chartOption, style: { height }, opts: { renderer: 'svg' } })) : (_jsx(Box, { sx: {
                     p: 4,
                     bg: 'canvas.subtle',
                     borderRadius: 2,
@@ -139,8 +139,15 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                     bg: 'canvas.default',
                     fontFamily: 'mono',
                     fontSize: 0,
-                }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), snapshotData.systemPromptTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["System Prompts: ", formatTokens(snapshotData.systemPromptTokens), ' ', "tokens"] }), snapshotData.systemPrompts.map((prompt, idx) => (_jsxs(Text, { sx: { display: 'block', ml: 3, mt: 1, color: 'fg.muted' }, children: ["\u2022", ' ', prompt.length > 100 ? prompt.slice(0, 100) + '...' : prompt] }, idx)))] })), (snapshotData.userMessageTokens > 0 ||
-                        snapshotData.assistantMessageTokens > 0) && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Messages:", ' ', formatTokens(snapshotData.userMessageTokens +
-                                        snapshotData.assistantMessageTokens), ' ', "tokens"] }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 User Messages:", ' ', formatTokens(snapshotData.userMessageTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Assistant Responses:", ' ', formatTokens(snapshotData.assistantMessageTokens), " tokens"] })] })] }))] }))] }));
+                }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), snapshotData.systemPromptTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["System Prompts: ", formatTokens(snapshotData.systemPromptTokens), ' ', "tokens"] }), snapshotData.systemPrompts.map((prompt, idx) => (_jsxs(Text, { sx: { display: 'block', ml: 3, mt: 1, color: 'fg.muted' }, children: ["\u2022", ' ', prompt.length > 100 ? prompt.slice(0, 100) + '...' : prompt] }, idx)))] })), snapshotData.toolTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Tool Definitions: ", formatTokens(snapshotData.toolTokens), " tokens (", snapshotData.tools.length, " tools)"] }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [snapshotData.tools.slice(0, 5).map((tool, idx) => (_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 ", tool.name, ": ", formatTokens(tool.totalTokens), " tokens"] }, idx))), snapshotData.tools.length > 5 && (_jsxs(Text, { sx: {
+                                            display: 'block',
+                                            color: 'fg.muted',
+                                            fontStyle: 'italic',
+                                        }, children: ["...and ", snapshotData.tools.length - 5, " more tools"] }))] })] })), (snapshotData.historyUserTokens > 0 ||
+                        snapshotData.historyAssistantTokens > 0 ||
+                        snapshotData.historyToolCallTokens > 0) && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["History:", ' ', formatTokens(snapshotData.historyUserTokens +
+                                        snapshotData.historyAssistantTokens +
+                                        snapshotData.historyToolCallTokens +
+                                        snapshotData.historyToolReturnTokens), ' ', "tokens"] }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 User Messages:", ' ', formatTokens(snapshotData.historyUserTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Assistant Responses:", ' ', formatTokens(snapshotData.historyAssistantTokens), " tokens"] }), snapshotData.historyToolCallTokens > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Calls:", ' ', formatTokens(snapshotData.historyToolCallTokens), " tokens"] })), snapshotData.historyToolReturnTokens > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Returns:", ' ', formatTokens(snapshotData.historyToolReturnTokens), " tokens"] }))] })] })), snapshotData.currentUserTokens > 0 && (_jsx(Box, { sx: { mb: 2 }, children: _jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Current User: ", formatTokens(snapshotData.currentUserTokens), ' ', "tokens"] }) })), snapshotData.turnUsage && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Turn Usage (model-reported):" }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Input: ", formatTokens(snapshotData.turnUsage.inputTokens), ' ', "tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Output: ", formatTokens(snapshotData.turnUsage.outputTokens), ' ', "tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Requests: ", snapshotData.turnUsage.requests] }), snapshotData.turnUsage.toolCalls > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Calls: ", snapshotData.turnUsage.toolCalls, snapshotData.turnUsage.toolNames.length > 0 && (_jsxs(_Fragment, { children: [" (", snapshotData.turnUsage.toolNames.join(', '), ")"] }))] }))] })] })), snapshotData.sessionUsage && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Session Totals:" }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Input:", ' ', formatTokens(snapshotData.sessionUsage.inputTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Output:", ' ', formatTokens(snapshotData.sessionUsage.outputTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Requests: ", snapshotData.sessionUsage.requests] }), snapshotData.sessionUsage.toolCalls > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Tool Calls: ", snapshotData.sessionUsage.toolCalls] }))] })] }))] }))] }));
 }
 export default ContextDistribution;

package/lib/components/chat/components/ContextInspector.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Tool detail from API
+ */
+interface ToolDetail {
+    name: string;
+    description: string | null;
+    parametersSchema: Record<string, unknown>;
+    parametersTokens: number;
+    totalTokens: number;
+    sourceType: string;
+    isAsync: boolean;
+    requiresApproval: boolean;
+    sourceCode: string | null;
+}
+/**
+ * Message detail from API
+ */
+interface MessageDetail {
+    role: string;
+    content: string;
+    estimatedTokens: number;
+    timestamp: string | null;
+    inContext: boolean;
+    toolName: string | null;
+    toolCallId: string | null;
+    isToolCall: boolean;
+    isToolResult: boolean;
+}
+/**
+ * System prompt from API
+ */
+interface SystemPrompt {
+    content: string;
+    tokens: number;
+}
+/**
+ * Token summary from API
+ */
+interface TokenSummary {
+    systemPrompts: number;
+    tools: number;
+    memory: number;
+    history: number;
+    current: number;
+    total: number;
+    contextWindow: number;
+    usagePercent: number;
+}
+/**
+ * Full context response from API
+ */
+export interface FullContextResponse {
+    agentId: string;
+    modelConfiguration: {
+        modelName: string | null;
+        contextWindow: number;
+        settings: Record<string, unknown>;
+    };
+    systemPrompts: SystemPrompt[];
+    systemPromptTokens: number;
+    tools: ToolDetail[];
+    toolTokens: number;
+    messages: MessageDetail[];
+    memoryBlocks: Record<string, unknown>[];
+    memoryTokens: number;
+    toolEnvironment: Record<string, string>;
+    toolRules: Record<string, unknown>[];
+    tokenSummary: TokenSummary;
+    error?: string;
+}
+export interface ContextInspectorProps {
+    /** Agent ID for fetching full context */
+    agentId: string;
+    /** API base URL for fetching context data */
+    apiBase?: string;
+}
+/**
+ * ContextInspector component displays full detailed context snapshot.
+ */
+export declare function ContextInspector({ agentId, apiBase }: ContextInspectorProps): import("react/jsx-runtime").JSX.Element;
+export default ContextInspector;