@datalayer/agent-runtimes 0.0.9 → 0.0.10

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.
 /**
@@ -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;

package/lib/components/chat/components/ContextInspector.js

@@ -0,0 +1,261 @@
+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.
+/**
+ * ContextInspector component - Shows detailed context snapshot with full tool schemas,
+ * message history with in_context flags, and model configuration.
+ */
+import { Text, Spinner, Button, Label, ProgressBar } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiModelIcon, TerminalIcon, CommentDiscussionIcon, DatabaseIcon, KeyIcon, CodeIcon, CheckCircleIcon, XCircleIcon, ChevronDownIcon, ChevronRightIcon, InfoIcon, } from '@primer/octicons-react';
+import { useQuery } from '@tanstack/react-query';
+import React, { useState, useMemo } from 'react';
+/**
+ * Get the API base URL for fetching context data.
+ * If apiBase prop is provided, use it.
+ * Otherwise, fall back to localhost for local development.
+ */
+function getApiBase(apiBase) {
+    if (apiBase) {
+        return apiBase;
+    }
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
+/**
+ * Format token count for display
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+}
+/**
+ * Collapsible section component
+ */
+function CollapsibleSection({ title, icon, count, tokens, defaultExpanded = false, children, }) {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    return (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Box, { as: "button", onClick: () => setExpanded(!expanded), sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    width: '100%',
+                    p: 2,
+                    bg: 'canvas.subtle',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    cursor: 'pointer',
+                    '&:hover': {
+                        bg: 'canvas.inset',
+                    },
+                }, children: [expanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })), React.createElement(icon, { size: 16 }), _jsx(Text, { sx: { fontWeight: 'semibold', flex: 1, textAlign: 'left' }, children: title }), count !== undefined && (_jsx(Label, { variant: "secondary", size: "small", children: count })), tokens !== undefined && tokens > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [formatTokens(tokens), " tokens"] }))] }), expanded && (_jsx(Box, { sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderTop: 'none',
+                    borderRadius: '0 0 6px 6px',
+                    p: 2,
+                }, children: children }))] }));
+}
+/**
+ * Tool detail view component
+ */
+function ToolDetailView({ tool }) {
+    const [showSchema, setShowSchema] = useState(false);
+    const [showSource, setShowSource] = useState(false);
+    return (_jsxs(Box, { sx: {
+            p: 2,
+            mb: 2,
+            bg: 'canvas.default',
+            border: '1px solid',
+            borderColor: 'border.muted',
+            borderRadius: 2,
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontFamily: 'mono', fontSize: 1 }, children: tool.name }), _jsx(Label, { size: "small", variant: "secondary", children: tool.sourceType }), tool.isAsync && (_jsx(Label, { size: "small", variant: "accent", children: "async" })), tool.requiresApproval && (_jsx(Label, { size: "small", variant: "attention", children: "requires approval" })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: [formatTokens(tool.totalTokens), " tokens"] })] }), tool.description && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block', mb: 2 }, children: tool.description })), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsxs(Button, { size: "small", variant: "invisible", onClick: () => setShowSchema(!showSchema), children: [showSchema ? 'Hide' : 'Show', " Schema"] }), tool.sourceCode && (_jsxs(Button, { size: "small", variant: "invisible", onClick: () => setShowSource(!showSource), children: [showSource ? 'Hide' : 'Show', " Source"] }))] }), showSchema && (_jsx(Box, { as: "pre", sx: {
+                    mt: 2,
+                    p: 2,
+                    bg: 'canvas.inset',
+                    borderRadius: 2,
+                    fontSize: 0,
+                    overflow: 'auto',
+                    maxHeight: 200,
+                }, children: JSON.stringify(tool.parametersSchema, null, 2) })), showSource && tool.sourceCode && (_jsx(Box, { as: "pre", sx: {
+                    mt: 2,
+                    p: 2,
+                    bg: 'canvas.inset',
+                    borderRadius: 2,
+                    fontSize: 0,
+                    overflow: 'auto',
+                    maxHeight: 300,
+                }, children: tool.sourceCode }))] }));
+}
+/**
+ * Message detail view component
+ */
+function MessageDetailView({ message }) {
+    const roleColors = {
+        user: 'accent.fg',
+        assistant: 'success.fg',
+        system: 'attention.fg',
+        tool: 'done.fg',
+    };
+    const roleIcons = {
+        user: CommentDiscussionIcon,
+        assistant: AiModelIcon,
+        system: InfoIcon,
+        tool: TerminalIcon,
+    };
+    const RoleIcon = roleIcons[message.role] || CommentDiscussionIcon;
+    return (_jsxs(Box, { sx: {
+            p: 2,
+            mb: 1,
+            bg: message.inContext ? 'canvas.default' : 'canvas.inset',
+            border: '1px solid',
+            borderColor: message.inContext ? 'border.default' : 'border.muted',
+            borderRadius: 2,
+            opacity: message.inContext ? 1 : 0.7,
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(RoleIcon, { size: 14 }), _jsx(Text, { sx: {
+                            fontWeight: 'semibold',
+                            fontSize: 0,
+                            color: roleColors[message.role] || 'fg.default',
+                            textTransform: 'capitalize',
+                        }, children: message.role }), message.toolName && (_jsx(Label, { size: "small", variant: "secondary", children: message.toolName })), message.isToolCall && (_jsx(Label, { size: "small", variant: "accent", children: "call" })), message.isToolResult && (_jsx(Label, { size: "small", variant: "success", children: "result" })), message.inContext ? (_jsx(CheckCircleIcon, { size: 12, fill: "var(--fgColor-success)" })) : (_jsx(XCircleIcon, { size: 12, fill: "var(--fgColor-muted)" })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: [formatTokens(message.estimatedTokens), " tokens"] })] }), _jsx(Text, { sx: {
+                    fontSize: 0,
+                    fontFamily: 'mono',
+                    display: 'block',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    maxHeight: 100,
+                    overflow: 'auto',
+                }, children: message.content.length > 500
+                    ? message.content.slice(0, 500) + '...'
+                    : message.content })] }));
+}
+/**
+ * ContextInspector component displays full detailed context snapshot.
+ */
+export function ContextInspector({ agentId, apiBase }) {
+    const { data: contextData, isLoading, error, } = useQuery({
+        queryKey: ['full-context', agentId, apiBase],
+        queryFn: async () => {
+            const base = getApiBase(apiBase);
+            const response = await fetch(`${base}/api/v1/configure/agents/${encodeURIComponent(agentId)}/full-context`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch full context');
+            }
+            return response.json();
+        },
+        refetchInterval: 30000, // Refresh every 30 seconds (less frequent than snapshot)
+        refetchOnMount: 'always',
+        staleTime: 0,
+    });
+    // Separate messages by in_context status
+    const { inContextMessages, outOfContextMessages } = useMemo(() => {
+        if (!contextData?.messages) {
+            return { inContextMessages: [], outOfContextMessages: [] };
+        }
+        return {
+            inContextMessages: contextData.messages.filter(m => m.inContext),
+            outOfContextMessages: contextData.messages.filter(m => !m.inContext),
+        };
+    }, [contextData?.messages]);
+    if (isLoading) {
+        return (_jsxs(Box, { sx: {
+                p: 3,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, color: 'fg.muted' }, children: "Loading full context snapshot..." })] }));
+    }
+    if (error || !contextData) {
+        return (_jsx(Box, { sx: {
+                p: 3,
+                bg: 'danger.subtle',
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'danger.muted',
+            }, children: _jsx(Text, { sx: { color: 'danger.fg' }, children: "Failed to load context snapshot" }) }));
+    }
+    if (contextData.error) {
+        return (_jsx(Box, { sx: {
+                p: 3,
+                bg: 'attention.subtle',
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'attention.muted',
+            }, children: _jsx(Text, { sx: { color: 'attention.fg' }, children: contextData.error }) }));
+    }
+    const { tokenSummary, modelConfiguration } = contextData;
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', mb: 1 }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Context Usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow)] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [tokenSummary.usagePercent.toFixed(1), "%"] })] }), _jsx(ProgressBar, { progress: tokenSummary.usagePercent, sx: { height: 8 }, bg: tokenSummary.usagePercent > 80
+                            ? 'danger.emphasis'
+                            : 'accent.emphasis' }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 3,
+                            mt: 2,
+                            flexWrap: 'wrap',
+                            fontSize: 0,
+                            color: 'fg.muted',
+                        }, children: [_jsxs(Text, { children: ["System: ", formatTokens(tokenSummary.systemPrompts)] }), _jsxs(Text, { children: ["Tools: ", formatTokens(tokenSummary.tools)] }), tokenSummary.memory > 0 && (_jsxs(Text, { children: ["Memory: ", formatTokens(tokenSummary.memory)] })), _jsxs(Text, { children: ["History: ", formatTokens(tokenSummary.history)] }), _jsxs(Text, { children: ["Current: ", formatTokens(tokenSummary.current)] })] })] }), _jsx(CollapsibleSection, { title: "Model Configuration", icon: AiModelIcon, defaultExpanded: true, children: _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Model:" }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: modelConfiguration.modelName || 'Not specified' }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Context Window:" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatTokens(modelConfiguration.contextWindow), " tokens"] }), Object.keys(modelConfiguration.settings).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Settings:" }), _jsx(Box, { as: "pre", sx: {
+                                        fontSize: 0,
+                                        p: 2,
+                                        bg: 'canvas.inset',
+                                        borderRadius: 2,
+                                        overflow: 'auto',
+                                    }, children: JSON.stringify(modelConfiguration.settings, null, 2) })] }))] }) }), _jsx(CollapsibleSection, { title: "System Prompts", icon: InfoIcon, count: contextData.systemPrompts.length, tokens: contextData.systemPromptTokens, children: contextData.systemPrompts.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No system prompts configured" })) : (contextData.systemPrompts.map((prompt, idx) => (_jsxs(Box, { sx: {
+                        p: 2,
+                        mb: 2,
+                        bg: 'canvas.inset',
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'border.muted',
+                    }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                mb: 1,
+                            }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Prompt ", idx + 1] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [formatTokens(prompt.tokens), " tokens"] })] }), _jsx(Text, { as: "pre", sx: {
+                                fontSize: 0,
+                                whiteSpace: 'pre-wrap',
+                                wordBreak: 'break-word',
+                                maxHeight: 200,
+                                overflow: 'auto',
+                            }, children: prompt.content })] }, idx)))) }), _jsx(CollapsibleSection, { title: "Tools", icon: TerminalIcon, count: contextData.tools.length, tokens: contextData.toolTokens, children: contextData.tools.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No tools configured" })) : (contextData.tools.map((tool, idx) => (_jsx(ToolDetailView, { tool: tool }, idx)))) }), _jsx(CollapsibleSection, { title: "Message History", icon: CommentDiscussionIcon, count: contextData.messages.length, children: contextData.messages.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No messages yet" })) : (_jsxs(_Fragment, { children: [outOfContextMessages.length > 0 && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Text, { sx: {
+                                        fontWeight: 'semibold',
+                                        fontSize: 1,
+                                        color: 'fg.muted',
+                                        mb: 2,
+                                        display: 'block',
+                                    }, children: ["Out of Context (", outOfContextMessages.length, ")"] }), outOfContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `out-${idx}`)))] })), inContextMessages.length > 0 && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        fontWeight: 'semibold',
+                                        fontSize: 1,
+                                        color: 'success.fg',
+                                        mb: 2,
+                                        display: 'block',
+                                    }, children: ["In Context (", inContextMessages.length, ")"] }), inContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `in-${idx}`)))] }))] })) }), contextData.memoryBlocks.length > 0 && (_jsx(CollapsibleSection, { title: "Memory Blocks", icon: DatabaseIcon, count: contextData.memoryBlocks.length, tokens: contextData.memoryTokens, children: contextData.memoryBlocks.map((block, idx) => (_jsx(Box, { as: "pre", sx: {
+                        p: 2,
+                        mb: 2,
+                        bg: 'canvas.inset',
+                        borderRadius: 2,
+                        fontSize: 0,
+                        overflow: 'auto',
+                    }, children: JSON.stringify(block, null, 2) }, idx))) })), Object.keys(contextData.toolEnvironment).length > 0 && (_jsx(CollapsibleSection, { title: "Tool Environment", icon: KeyIcon, count: Object.keys(contextData.toolEnvironment).length, children: _jsx(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }, children: Object.entries(contextData.toolEnvironment).map(([key, value]) => (_jsxs(React.Fragment, { children: [_jsx(Text, { sx: {
+                                    fontFamily: 'mono',
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                }, children: key }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 1, color: 'fg.muted' }, children: value })] }, key))) }) })), contextData.toolRules.length > 0 && (_jsx(CollapsibleSection, { title: "Tool Rules", icon: CodeIcon, count: contextData.toolRules.length, children: contextData.toolRules.map((rule, idx) => (_jsx(Box, { as: "pre", sx: {
+                        p: 2,
+                        mb: 2,
+                        bg: 'canvas.inset',
+                        borderRadius: 2,
+                        fontSize: 0,
+                        overflow: 'auto',
+                    }, children: JSON.stringify(rule, null, 2) }, idx))) }))] }));
+}
+export default ContextInspector;