@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/context/ContextInspector.js

@@ -31,27 +31,7 @@ function formatTokens(tokens) {
  */
 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 }))] }));
+    return (_jsxs(Box, { mb: 2, children: [_jsxs(Box, { as: "button", onClick: () => setExpanded(!expanded), 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, { border: "1px solid", borderColor: "border.default", borderTop: "none", borderRadius: "0 0 6px 6px", p: 2, children: children }))] }));
 }
 /**
  * Tool detail view component
@@ -59,30 +39,7 @@ function CollapsibleSection({ title, icon, count, tokens, defaultExpanded = fals
 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 }))] }));
+    return (_jsxs(Box, { p: 2, mb: 2, bg: "canvas.default", border: "1px solid", borderColor: "border.muted", borderRadius: 2, children: [_jsxs(Box, { 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, { 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", 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", mt: 2, p: 2, bg: "canvas.inset", borderRadius: 2, fontSize: 0, overflow: "auto", maxHeight: 300, children: tool.sourceCode }))] }));
 }
 /**
  * ContextInspector component displays full detailed context snapshot.
@@ -92,84 +49,29 @@ export function ContextInspector({ agentId, apiBase, liveData, }) {
     // REST polling removed — data comes exclusively via WS `agent.snapshot`.
     const contextData = liveData;
     if (!hasLiveData) {
-        return (_jsx(Box, { sx: {
-                p: 3,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Waiting for context data from WebSocket stream..." }) }));
+        return (_jsx(Box, { p: 3, display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Waiting for context data from WebSocket stream..." }) }));
     }
     if (!contextData) {
-        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: "No context data available." }) }));
+        return (_jsx(Box, { p: 3, bg: "attention.subtle", borderRadius: 2, border: "1px solid", borderColor: "attention.muted", children: _jsx(Text, { sx: { color: 'attention.fg' }, children: "No context data available." }) }));
     }
     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 }) }));
+        return (_jsx(Box, { 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
+    return (_jsxs(Box, { children: [_jsxs(Box, { 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: false, 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: {
+                                : 'success.emphasis' }), _jsxs(Box, { 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: false, children: _jsxs(Box, { 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", 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, { p: 2, mb: 2, bg: "canvas.inset", borderRadius: 2, border: "1px solid", borderColor: "border.muted", children: [_jsxs(Box, { 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: "Tool Definitions", 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)))) }), 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: {
+                            }, children: prompt.content })] }, idx)))) }), _jsx(CollapsibleSection, { title: "Tool Definitions", 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)))) }), 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", 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, { 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))) }))] }));
+                                }, 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", 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/context/ContextPanel.js

@@ -303,16 +303,7 @@ export function ContextPanel({ agentId, apiBase, liveData, messageCount = 0, def
                         fontWeight: 'semibold',
                         mb: 2,
                         color: 'fg.muted',
-                    }, children: "Context Usage" }), _jsxs(Box, { sx: {
-                        p: 3,
-                        bg: 'canvas.subtle',
-                        borderRadius: 2,
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading context details..." })] })] }));
+                    }, children: "Context Usage" }), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading context details..." })] })] }));
     }
     if (hasError || !snapshotData) {
         return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
@@ -320,86 +311,31 @@ export function ContextPanel({ agentId, apiBase, liveData, messageCount = 0, def
                         fontWeight: 'semibold',
                         mb: 2,
                         color: 'fg.muted',
-                    }, children: "Context Usage" }), _jsx(Box, { sx: {
-                        p: 3,
-                        bg: 'attention.subtle',
-                        borderRadius: 2,
-                        border: '1px solid',
-                        borderColor: 'attention.muted',
-                    }, children: _jsx(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: "Waiting for context data from WebSocket stream..." }) })] }));
+                    }, children: "Context Usage" }), _jsx(Box, { p: 3, bg: "attention.subtle", borderRadius: 2, border: "1px solid", borderColor: "attention.muted", children: _jsx(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: "Waiting for context data from WebSocket stream..." }) })] }));
     }
     const { totalTokens, contextWindow, sessionUsage, turnUsage, distribution } = snapshotData;
     const sentMessageCount = messageCount > 0
         ? messageCount
         : Math.max(sessionUsage?.turns ?? 0, snapshotData.perRequestUsage?.length > 0 ? 1 : 0);
     const hasDistributionData = distribution?.children && distribution.children.length > 0;
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    mb: 2,
-                }, children: [_jsx(Heading, { as: "h4", sx: {
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Heading, { as: "h4", sx: {
                             fontSize: 1,
                             fontWeight: 'semibold',
                             color: 'fg.muted',
-                        }, children: "Context Usage" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [sentMessageCount > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [sentMessageCount, ' ', sentMessageCount === 1 ? 'message sent' : 'messages sent'] })), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextUsageAsCSV(snapshotData), children: "Download" })] })] }), _jsxs(Box, { sx: {
-                    p: 3,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [_jsx(Box, { sx: { mb: 3 }, children: _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(totalTokens)] }) }), (sessionUsage || turnUsage) && (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 3,
-                            mb: 3,
-                            flexWrap: 'wrap',
-                        }, children: [sessionUsage && (_jsxs(Box, { sx: {
-                                    flex: 1,
-                                    minWidth: 120,
-                                    p: 2,
-                                    bg: 'canvas.default',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.muted',
-                                }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: ["Session (", sessionUsage.turns, " turns)"] }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(sessionUsage.inputTokens + sessionUsage.outputTokens) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [' ', "in ", formatDuration(sessionUsage.durationSeconds)] })] })), turnUsage && (_jsxs(Box, { sx: {
-                                    flex: 1,
-                                    minWidth: 120,
-                                    p: 2,
-                                    bg: 'canvas.default',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.muted',
-                                }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: ["Last Turn (", turnUsage.requests, " reqs)"] }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(turnUsage.inputTokens + turnUsage.outputTokens) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [' ', "in ", formatDuration(turnUsage.durationSeconds)] })] }))] })), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            mb: 2,
-                        }, children: [_jsxs(SegmentedControl, { "aria-label": "View mode", size: "small", onChange: index => {
+                        }, children: "Context Usage" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [sentMessageCount > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [sentMessageCount, ' ', sentMessageCount === 1 ? 'message sent' : 'messages sent'] })), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextUsageAsCSV(snapshotData), children: "Download" })] })] }), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsx(Box, { mb: 3, children: _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(totalTokens)] }) }), (sessionUsage || turnUsage) && (_jsxs(Box, { display: "flex", gap: 3, mb: 3, flexWrap: "wrap", children: [sessionUsage && (_jsxs(Box, { flex: 1, minWidth: 120, p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.muted", children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: ["Session (", sessionUsage.turns, " turns)"] }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(sessionUsage.inputTokens + sessionUsage.outputTokens) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [' ', "in ", formatDuration(sessionUsage.durationSeconds)] })] })), turnUsage && (_jsxs(Box, { flex: 1, minWidth: 120, p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.muted", children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: ["Last Turn (", turnUsage.requests, " reqs)"] }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(turnUsage.inputTokens + turnUsage.outputTokens) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [' ', "in ", formatDuration(turnUsage.durationSeconds)] })] }))] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsxs(SegmentedControl, { "aria-label": "View mode", size: "small", onChange: index => {
                                     const modes = ['overview', 'distribution', 'history'];
                                     setViewMode(modes[index]);
-                                }, children: [_jsx(SegmentedControl.IconButton, { "aria-label": "Overview", selected: viewMode === 'overview', icon: ListUnorderedIcon }), _jsx(SegmentedControl.IconButton, { "aria-label": "Distribution", selected: viewMode === 'distribution', icon: AppsIcon, disabled: !hasDistributionData }), _jsx(SegmentedControl.IconButton, { "aria-label": "History", selected: viewMode === 'history', icon: GraphIcon })] }), viewMode === 'overview' && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), children: showDetails ? 'Less' : 'More' }))] }), viewMode === 'overview' && (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [hasDistributionData &&
+                                }, children: [_jsx(SegmentedControl.IconButton, { "aria-label": "Overview", selected: viewMode === 'overview', icon: ListUnorderedIcon }), _jsx(SegmentedControl.IconButton, { "aria-label": "Distribution", selected: viewMode === 'distribution', icon: AppsIcon, disabled: !hasDistributionData }), _jsx(SegmentedControl.IconButton, { "aria-label": "History", selected: viewMode === 'history', icon: GraphIcon })] }), viewMode === 'overview' && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), children: showDetails ? 'Less' : 'More' }))] }), viewMode === 'overview' && (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [hasDistributionData &&
                                         distribution.children.map(category => {
                                             const CategoryIcon = getCategoryIcon(category.name);
                                             const categoryPercent = (category.value / contextWindow) * 100;
-                                            return (_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 2,
-                                                }, children: [_jsx(Box, { sx: { color: 'fg.muted', width: 20 }, children: _jsx(CategoryIcon, { size: 16 }) }), _jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: category.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', minWidth: 60 }, children: formatTokens(category.value) }), _jsx(Box, { sx: { width: 80 }, children: _jsx(ProgressBar, { progress: categoryPercent, sx: { height: 4 } }) })] }, category.name));
+                                            return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { color: "fg.muted", width: 20, children: _jsx(CategoryIcon, { size: 16 }) }), _jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: category.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', minWidth: 60 }, children: formatTokens(category.value) }), _jsx(Box, { width: 80, children: _jsx(ProgressBar, { progress: categoryPercent, sx: { height: 4 } }) })] }, category.name));
                                         }), !hasDistributionData && (_jsx(Text, { sx: {
                                             color: 'fg.muted',
                                             fontSize: 1,
                                             textAlign: 'center',
                                             py: 2,
-                                        }, children: "No context data yet. Start a conversation to see usage." }))] }), showDetails && hasDistributionData && (_jsxs(Box, { sx: {
-                                    mt: 3,
-                                    p: 2,
-                                    bg: 'canvas.default',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.muted',
-                                    fontSize: 0,
-                                }, children: [snapshotData.systemPromptTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, children: ["System Prompts:", ' ', formatTokens(snapshotData.systemPromptTokens), " tokens"] }), snapshotData.systemPrompts
+                                        }, children: "No context data yet. Start a conversation to see usage." }))] }), showDetails && hasDistributionData && (_jsxs(Box, { mt: 3, p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.muted", fontSize: 0, children: [snapshotData.systemPromptTokens > 0 && (_jsxs(Box, { mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, children: ["System Prompts:", ' ', formatTokens(snapshotData.systemPromptTokens), " tokens"] }), snapshotData.systemPrompts
                                                 .slice(0, 2)
                                                 .map((prompt, idx) => (_jsxs(Text, { sx: {
                                                     display: 'block',
@@ -408,22 +344,11 @@ export function ContextPanel({ agentId, apiBase, liveData, messageCount = 0, def
                                                     color: 'fg.muted',
                                                 }, children: ["\u2022", ' ', prompt.length > 80
                                                         ? prompt.slice(0, 80) + '...'
-                                                        : prompt] }, idx)))] })), snapshotData.toolTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, children: ["Tools: ", formatTokens(snapshotData.toolTokens), " tokens (", snapshotData.tools.length, " tools)"] }), _jsxs(Box, { sx: { ml: 2, mt: 1 }, children: [snapshotData.tools.slice(0, 4).map((tool, idx) => (_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 ", tool.name, ": ", formatTokens(tool.totalTokens)] }, idx))), snapshotData.tools.length > 4 && (_jsxs(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: ["...and ", snapshotData.tools.length - 4, " more"] }))] })] })), (snapshotData.userMessageTokens > 0 ||
-                                        snapshotData.assistantMessageTokens > 0) && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, children: ["Messages:", ' ', formatTokens(snapshotData.userMessageTokens +
-                                                        snapshotData.assistantMessageTokens), ' ', "tokens"] }), _jsxs(Box, { sx: { ml: 2, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 User: ", formatTokens(snapshotData.userMessageTokens)] }), _jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 Assistant:", ' ', formatTokens(snapshotData.assistantMessageTokens)] }), snapshotData.toolCallTokens > 0 && (_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 Tool calls:", ' ', formatTokens(snapshotData.toolCallTokens)] }))] })] }))] }))] })), viewMode === 'distribution' && treemapOption && (_jsx(ReactECharts, { option: treemapOption, style: { height: chartHeight }, opts: { renderer: 'svg' } })), viewMode === 'history' && historyChartOption && (_jsxs(Box, { children: [_jsx(ReactECharts, { option: historyChartOption, style: { height: chartHeight }, opts: { renderer: 'svg' } }), showDetails && snapshotData.perRequestUsage.length > 0 && (_jsx(Box, { sx: {
-                                    mt: 2,
-                                    maxHeight: '150px',
-                                    overflowY: 'auto',
-                                    fontSize: 0,
-                                }, children: snapshotData.perRequestUsage
+                                                        : prompt] }, idx)))] })), snapshotData.toolTokens > 0 && (_jsxs(Box, { mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, children: ["Tools: ", formatTokens(snapshotData.toolTokens), " tokens (", snapshotData.tools.length, " tools)"] }), _jsxs(Box, { ml: 2, mt: 1, children: [snapshotData.tools.slice(0, 4).map((tool, idx) => (_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 ", tool.name, ": ", formatTokens(tool.totalTokens)] }, idx))), snapshotData.tools.length > 4 && (_jsxs(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: ["...and ", snapshotData.tools.length - 4, " more"] }))] })] })), (snapshotData.userMessageTokens > 0 ||
+                                        snapshotData.assistantMessageTokens > 0) && (_jsxs(Box, { mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, children: ["Messages:", ' ', formatTokens(snapshotData.userMessageTokens +
+                                                        snapshotData.assistantMessageTokens), ' ', "tokens"] }), _jsxs(Box, { ml: 2, mt: 1, children: [_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 User: ", formatTokens(snapshotData.userMessageTokens)] }), _jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 Assistant:", ' ', formatTokens(snapshotData.assistantMessageTokens)] }), snapshotData.toolCallTokens > 0 && (_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 Tool calls:", ' ', formatTokens(snapshotData.toolCallTokens)] }))] })] }))] }))] })), viewMode === 'distribution' && treemapOption && (_jsx(ReactECharts, { option: treemapOption, style: { height: chartHeight }, opts: { renderer: 'svg' } })), viewMode === 'history' && historyChartOption && (_jsxs(Box, { children: [_jsx(ReactECharts, { option: historyChartOption, style: { height: chartHeight }, opts: { renderer: 'svg' } }), showDetails && snapshotData.perRequestUsage.length > 0 && (_jsx(Box, { mt: 2, maxHeight: "150px", overflowY: "auto", fontSize: 0, children: snapshotData.perRequestUsage
                                     .slice(-10)
                                     .reverse()
-                                    .map((req, idx) => (_jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        gap: 2,
-                                        py: 1,
-                                        borderBottom: idx < 9 ? '1px solid' : 'none',
-                                        borderColor: 'border.muted',
-                                    }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', minWidth: 30 }, children: ["#", req.requestNum] }), _jsxs(Text, { sx: { color: '#3B82F6' }, children: ["\u2193", formatTokens(req.inputTokens)] }), _jsxs(Text, { sx: { color: '#10B981' }, children: ["\u2191", formatTokens(req.outputTokens)] }), req.toolNames.length > 0 && (_jsxs(Text, { sx: { color: 'fg.muted' }, children: ["\uD83D\uDD27 ", req.toolNames.join(', ')] }))] }, req.requestNum))) }))] })), viewMode === 'history' && !historyChartOption && (_jsx(Box, { sx: { py: 3 }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No history" }) }))] })] }));
+                                    .map((req, idx) => (_jsxs(Box, { display: "flex", gap: 2, py: 1, borderBottom: idx < 9 ? '1px solid' : 'none', borderColor: "border.muted", children: [_jsxs(Text, { sx: { fontWeight: 'semibold', minWidth: 30 }, children: ["#", req.requestNum] }), _jsxs(Text, { sx: { color: '#3B82F6' }, children: ["\u2193", formatTokens(req.inputTokens)] }), _jsxs(Text, { sx: { color: '#10B981' }, children: ["\u2191", formatTokens(req.outputTokens)] }), req.toolNames.length > 0 && (_jsxs(Text, { sx: { color: 'fg.muted' }, children: ["\uD83D\uDD27 ", req.toolNames.join(', ')] }))] }, req.requestNum))) }))] })), viewMode === 'history' && !historyChartOption && (_jsx(Box, { py: 3, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No history" }) }))] })] }));
 }
 export default ContextPanel;

package/lib/context/ContextUsage.js

@@ -5,7 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ContextUsage component - Shows context usage details with token breakdown.
  */
 import { CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, } from '@primer/octicons-react';
-import { Box, Heading, Text, ProgressBar, Spinner } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Heading, Text, ProgressBar, Spinner } from '@primer/react';
 import { useQuery } from '@tanstack/react-query';
 function getLocalApiBase() {
     if (typeof window === 'undefined') {
@@ -73,16 +74,7 @@ export function ContextUsage({ agentId, baseUrl }) {
                         fontWeight: 'semibold',
                         mb: 2,
                         color: 'fg.muted',
-                    }, children: "Cumulative Context Usage" }), _jsxs(Box, { sx: {
-                        p: 3,
-                        bg: 'canvas.subtle',
-                        borderRadius: 2,
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading context details..." })] })] }));
+                    }, children: "Cumulative Context Usage" }), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading context details..." })] })] }));
     }
     if (error || !contextData) {
         return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
@@ -90,13 +82,7 @@ export function ContextUsage({ agentId, baseUrl }) {
                         fontWeight: 'semibold',
                         mb: 2,
                         color: 'fg.muted',
-                    }, children: "Cumulative Context Usage" }), _jsx(Box, { sx: {
-                        p: 3,
-                        bg: 'canvas.subtle',
-                        borderRadius: 2,
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                    }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details" }) })] }));
+                    }, children: "Cumulative Context Usage" }), _jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details" }) })] }));
     }
     const contextUsagePercent = (contextData.usedTokens / contextData.totalTokens) * 100;
     return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
@@ -104,24 +90,10 @@ export function ContextUsage({ agentId, baseUrl }) {
                     fontWeight: 'semibold',
                     mb: 2,
                     color: 'fg.muted',
-                }, children: "Cumulative Context Usage" }), _jsxs(Box, { sx: {
-                    p: 3,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                }, 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: [formatTokens(contextData.usedTokens), " /", ' ', formatTokens(contextData.totalTokens), " tokens"] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [contextUsagePercent.toFixed(0), "%"] })] }), _jsx(ProgressBar, { progress: contextUsagePercent, sx: { height: 8 }, bg: contextUsagePercent > 80 ? 'danger.emphasis' : 'accent.emphasis' })] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: contextData.children.map(category => {
+                }, children: "Cumulative Context Usage" }), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { mb: 3, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 1, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [formatTokens(contextData.usedTokens), " /", ' ', formatTokens(contextData.totalTokens), " tokens"] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [contextUsagePercent.toFixed(0), "%"] })] }), _jsx(ProgressBar, { progress: contextUsagePercent, sx: { height: 8 }, bg: contextUsagePercent > 80 ? 'danger.emphasis' : 'accent.emphasis' })] }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: contextData.children.map(category => {
                             const CategoryIcon = getCategoryIcon(category.name);
                             const categoryPercent = (category.value / contextData.totalTokens) * 100;
-                            return (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                }, children: [_jsx(Box, { sx: { color: 'fg.muted', width: 20 }, children: _jsx(CategoryIcon, { size: 16 }) }), _jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: category.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', minWidth: 60 }, children: formatTokens(category.value) }), _jsx(Box, { sx: { width: 80 }, children: _jsx(ProgressBar, { progress: categoryPercent, sx: { height: 4 } }) })] }, category.name));
+                            return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { color: "fg.muted", width: 20, children: _jsx(CategoryIcon, { size: 16 }) }), _jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: category.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', minWidth: 60 }, children: formatTokens(category.value) }), _jsx(Box, { width: 80, children: _jsx(ProgressBar, { progress: categoryPercent, sx: { height: 4 } }) })] }, category.name));
                         }) })] })] }));
 }
 export default ContextUsage;

package/lib/context/CostTracker.js

@@ -11,7 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module components/context/CostTracker
  */
-import { Box, Heading, Text, ProgressBar, Flash, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Heading, Text, ProgressBar, Flash, Label } from '@primer/react';
 import { CreditCardIcon, AlertIcon } from '@primer/octicons-react';
 function formatUsd(amount) {
     if (amount < 0.01)
@@ -33,7 +34,7 @@ function formatTokens(tokens) {
 export function CostTracker({ agentId: _agentId, compact = false, liveData, }) {
     const costData = liveData;
     if (!costData) {
-        return (_jsx(Box, { sx: { p: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for websocket snapshot..." }) }));
+        return (_jsx(Box, { p: 2, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for websocket snapshot..." }) }));
     }
     const cumulativePercent = costData.cumulativeBudgetUsd != null && costData.cumulativeBudgetUsd > 0
         ? (costData.cumulativeCostUsd / costData.cumulativeBudgetUsd) * 100
@@ -49,54 +50,18 @@ export function CostTracker({ agentId: _agentId, compact = false, liveData, }) {
     const displayUsd = (amount) => hasUnresolvedPricing && amount === 0 ? '…' : formatUsd(amount);
     // Compact: single row summary
     if (compact) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-                px: 2,
-                py: 1,
-            }, children: [_jsx(CreditCardIcon, { size: 14 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Cumulative: ", displayUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
+        return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 2, py: 1, children: [_jsx(CreditCardIcon, { size: 14 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Cumulative: ", displayUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
                             ` (budget ${formatUsd(costData.cumulativeBudgetUsd)})`, ' | ', "Last turn: ", displayUsd(lastTurnCostUsd), costData.perRunBudgetUsd != null &&
                             ` (budget ${formatUsd(costData.perRunBudgetUsd)})`] }), isOverBudget && (_jsx(Label, { variant: "danger", size: "small", children: "Over budget" })), !isOverBudget && isNearBudget && (_jsx(Label, { variant: "attention", size: "small", children: "Near limit" }))] }));
     }
     // Full display
-    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', mb: 2, color: 'fg.muted' }, children: "Cost Tracker" }), isOverBudget && (_jsxs(Flash, { variant: "danger", sx: { mb: 2 }, children: [_jsx(AlertIcon, { size: 16 }), "Cumulative cost (", formatUsd(costData.cumulativeCostUsd), ") exceeds budget (", formatUsd(costData.cumulativeBudgetUsd), ")."] })), hasUnresolvedPricing && costData.requestCount > 0 && (_jsxs(Flash, { variant: "warning", sx: { mb: 2 }, children: [_jsx(AlertIcon, { size: 16 }), "Some model pricing could not be resolved yet, so cost may remain at \u2026 even when requests/tokens are increasing."] })), _jsxs(Box, { sx: {
-                    p: 3,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    mb: 1,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Cumulative" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [displayUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', mb: 2, color: 'fg.muted' }, children: "Cost Tracker" }), isOverBudget && (_jsxs(Flash, { variant: "danger", sx: { mb: 2 }, children: [_jsx(AlertIcon, { size: 16 }), "Cumulative cost (", formatUsd(costData.cumulativeCostUsd), ") exceeds budget (", formatUsd(costData.cumulativeBudgetUsd), ")."] })), hasUnresolvedPricing && costData.requestCount > 0 && (_jsxs(Flash, { variant: "warning", sx: { mb: 2 }, children: [_jsx(AlertIcon, { size: 16 }), "Some model pricing could not be resolved yet, so cost may remain at \u2026 even when requests/tokens are increasing."] })), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { mb: 3, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 1, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Cumulative" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [displayUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
                                                 ` (budget ${formatUsd(costData.cumulativeBudgetUsd)})`] })] }), cumulativePercent != null && (_jsx(ProgressBar, { progress: Math.min(cumulativePercent, 100), sx: { height: 6 }, bg: cumulativePercent > 100
                                     ? 'danger.emphasis'
                                     : cumulativePercent > 80
                                         ? 'attention.emphasis'
-                                        : 'accent.emphasis' }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    mb: 1,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Last turn" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [displayUsd(lastTurnCostUsd), costData.perRunBudgetUsd != null &&
-                                                ` (budget ${formatUsd(costData.perRunBudgetUsd)})`] })] }), lastTurnPercent != null && (_jsx(ProgressBar, { progress: Math.min(lastTurnPercent, 100), sx: { height: 6 }, bg: lastTurnPercent > 80 ? 'danger.emphasis' : 'accent.emphasis' }))] }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 3,
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            pt: 2,
-                        }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Requests" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: costData.requestCount })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Tokens" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(costData.totalTokensUsed) })] })] }), costData.modelBreakdown.length > 0 && (_jsxs(Box, { sx: {
-                            mt: 2,
-                            pt: 2,
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "By model" }), costData.modelBreakdown.map(m => (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center',
-                                    py: '2px',
-                                }, children: [_jsx(Text, { sx: { fontSize: 0 }, children: m.model }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayUsd(m.costUsd), " (", m.requests, " req)", hasUnresolvedPricing && m.costUsd === 0
+                                        : 'accent.emphasis' }))] }), _jsxs(Box, { mb: 3, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 1, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Last turn" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [displayUsd(lastTurnCostUsd), costData.perRunBudgetUsd != null &&
+                                                ` (budget ${formatUsd(costData.perRunBudgetUsd)})`] })] }), lastTurnPercent != null && (_jsx(ProgressBar, { progress: Math.min(lastTurnPercent, 100), sx: { height: 6 }, bg: lastTurnPercent > 80 ? 'danger.emphasis' : 'accent.emphasis' }))] }), _jsxs(Box, { display: "flex", gap: 3, borderTop: "1px solid", borderColor: "border.default", pt: 2, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Requests" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: costData.requestCount })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Tokens" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(costData.totalTokensUsed) })] })] }), costData.modelBreakdown.length > 0 && (_jsxs(Box, { mt: 2, pt: 2, borderTop: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "By model" }), costData.modelBreakdown.map(m => (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", py: "2px", children: [_jsx(Text, { sx: { fontSize: 0 }, children: m.model }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayUsd(m.costUsd), " (", m.requests, " req)", hasUnresolvedPricing && m.costUsd === 0
                                                 ? ' - pricing pending'
                                                 : ''] })] }, m.model)))] }))] })] }));
 }

package/lib/context/MessageHistory.js

@@ -48,26 +48,12 @@ export function MessageDetailView({ message }) {
         role: chatRole,
         parts: [{ type: 'text', text }],
     };
-    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: {
+    return (_jsxs(Box, { 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, { 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(Box, { sx: {
-                    borderWidth: '2px',
-                    borderStyle: 'solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    overflow: 'hidden',
-                }, children: _jsx(TextPart, { text: text, message: uiMessage, isLastPart: false, onRegenerate: () => {
+                        }, 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(Box, { borderWidth: "2px", borderStyle: "solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: _jsx(TextPart, { text: text, message: uiMessage, isLastPart: false, onRegenerate: () => {
                         return;
                     } }) })] }));
 }
@@ -92,27 +78,7 @@ export function MessageHistory({ messages }) {
         }
         return messages.reduce((sum, message) => sum + (message.estimatedTokens || 0), 0);
     }, [messages]);
-    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 })), _jsx(CommentDiscussionIcon, { size: 16 }), _jsx(Text, { sx: { fontWeight: 'semibold', flex: 1, textAlign: 'left' }, children: "Message History" }), _jsx(Label, { variant: "secondary", size: "small", children: messages?.length || 0 }), messageHistoryTokens > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [formatTokens(messageHistoryTokens), " tokens"] }))] }), expanded && (_jsx(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderTop: 'none',
-                    borderRadius: '0 0 6px 6px',
-                    p: 2,
-                }, children: !messages || 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: {
+    return (_jsxs(Box, { mb: 2, children: [_jsxs(Box, { as: "button", onClick: () => setExpanded(!expanded), 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 })), _jsx(CommentDiscussionIcon, { size: 16 }), _jsx(Text, { sx: { fontWeight: 'semibold', flex: 1, textAlign: 'left' }, children: "Message History" }), _jsx(Label, { variant: "secondary", size: "small", children: messages?.length || 0 }), messageHistoryTokens > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [formatTokens(messageHistoryTokens), " tokens"] }))] }), expanded && (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderTop: "none", borderRadius: "0 0 6px 6px", p: 2, children: !messages || messages.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No messages yet" })) : (_jsxs(_Fragment, { children: [outOfContextMessages.length > 0 && (_jsxs(Box, { mb: 3, children: [_jsxs(Text, { sx: {
                                         fontWeight: 'semibold',
                                         fontSize: 1,
                                         color: 'fg.muted',