@datalayer/agent-runtimes 0.0.9 → 0.0.11

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

@@ -0,0 +1,263 @@
+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(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow), " (", Math.round(tokenSummary.usagePercent), "%)"] }), _jsx(ProgressBar, { progress: Math.min(tokenSummary.usagePercent, 100), sx: { mt: 2, height: 8 }, bg: tokenSummary.usagePercent > 90
+                            ? 'danger.emphasis'
+                            : tokenSummary.usagePercent > 70
+                                ? 'attention.emphasis'
+                                : 'success.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;

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

@@ -0,0 +1,112 @@
+/**
+ * Distribution child item for treemap
+ */
+interface DistributionChild {
+    name: string;
+    value: number;
+    children?: DistributionChild[];
+}
+/**
+ * Distribution data for treemap
+ */
+interface Distribution {
+    name: string;
+    value: number;
+    children: DistributionChild[];
+}
+/**
+ * Request usage snapshot - historic per-request data
+ */
+interface RequestUsageSnapshot {
+    requestNum: number;
+    inputTokens: number;
+    outputTokens: number;
+    toolNames: string[];
+    timestamp: string | null;
+    turnId: string | null;
+    durationMs: number;
+}
+/**
+ * Tool snapshot
+ */
+interface ToolSnapshot {
+    name: string;
+    description: string | null;
+    parametersTokens: number;
+    totalTokens: number;
+}
+/**
+ * Turn usage
+ */
+interface TurnUsage {
+    inputTokens: number;
+    outputTokens: number;
+    requests: number;
+    toolCalls: number;
+    toolNames: string[];
+    durationSeconds: number;
+}
+/**
+ * Session usage
+ */
+interface SessionUsage {
+    inputTokens: number;
+    outputTokens: number;
+    requests: number;
+    toolCalls: number;
+    turns: number;
+    durationSeconds: number;
+}
+/**
+ * Context snapshot response from API
+ */
+export interface ContextSnapshotResponse {
+    agentId: string;
+    systemPrompts: string[];
+    systemPromptTokens: number;
+    tools: ToolSnapshot[];
+    toolTokens: number;
+    historyToolCallTokens: number;
+    historyToolReturnTokens: number;
+    currentToolCallTokens: number;
+    currentToolReturnTokens: number;
+    toolCallTokens: number;
+    toolReturnTokens: number;
+    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;
+}
+type ViewMode = 'overview' | 'distribution' | 'history';
+export interface ContextPanelProps {
+    /** Agent ID for fetching context details (required) */
+    agentId: string;
+    /** API base URL for fetching context data */
+    apiBase?: string;
+    /** Number of messages in conversation (from chat store) */
+    messageCount?: number;
+    /** Default view mode */
+    defaultView?: ViewMode;
+    /** Height for charts */
+    chartHeight?: string;
+}
+/**
+ * ContextPanel component - unified context usage display.
+ */
+export declare function ContextPanel({ agentId, apiBase, messageCount, defaultView, chartHeight, }: ContextPanelProps): import("react/jsx-runtime").JSX.Element;
+export default ContextPanel;