@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/context/ContextInspector.js

@@ -5,29 +5,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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 { Text, 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, useEffect } from 'react';
-const RETRY_INTERVAL_SECONDS = 5;
+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
  */
@@ -143,34 +129,10 @@ function MessageDetailView({ message }) {
 /**
  * ContextInspector component displays full detailed context snapshot.
  */
-export function ContextInspector({ agentId, apiBase }) {
-    const [retryCountdown, setRetryCountdown] = useState(RETRY_INTERVAL_SECONDS);
-    const { data: contextData, isLoading, error, refetch, } = 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: RETRY_INTERVAL_SECONDS * 1000,
-        refetchOnMount: 'always',
-        staleTime: 0,
-    });
-    const hasRetryError = Boolean(error) || Boolean(contextData?.error);
-    useEffect(() => {
-        if (!hasRetryError) {
-            setRetryCountdown(RETRY_INTERVAL_SECONDS);
-            return;
-        }
-        setRetryCountdown(RETRY_INTERVAL_SECONDS);
-        const timer = window.setInterval(() => {
-            setRetryCountdown(prev => prev <= 1 ? RETRY_INTERVAL_SECONDS : prev - 1);
-        }, 1000);
-        return () => window.clearInterval(timer);
-    }, [hasRetryError]);
+export function ContextInspector({ agentId, apiBase, liveData, }) {
+    const hasLiveData = liveData !== undefined;
+    // REST polling removed — data comes exclusively via WS `agent.snapshot`.
+    const contextData = liveData;
     // Separate messages by in_context status
     const { inContextMessages, outOfContextMessages } = useMemo(() => {
         if (!contextData?.messages) {
@@ -181,30 +143,28 @@ export function ContextInspector({ agentId, apiBase }) {
             outOfContextMessages: contextData.messages.filter(m => !m.inContext),
         };
     }, [contextData?.messages]);
-    if (isLoading) {
-        return (_jsxs(Box, { sx: {
+    const messageHistoryTokens = useMemo(() => {
+        if (!contextData?.messages) {
+            return 0;
+        }
+        return contextData.messages.reduce((sum, message) => sum + (message.estimatedTokens || 0), 0);
+    }, [contextData?.messages]);
+    if (!hasLiveData) {
+        return (_jsx(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..." })] }));
+            }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Waiting for context data from WebSocket stream..." }) }));
     }
-    if (error || !contextData) {
+    if (!contextData) {
         return (_jsx(Box, { sx: {
                 p: 3,
                 bg: 'attention.subtle',
                 borderRadius: 2,
                 border: '1px solid',
                 borderColor: 'attention.muted',
-            }, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: 2,
-                }, children: [_jsxs(Text, { sx: { color: 'attention.fg' }, children: ["Service not available for context snapshot. Retrying in", ' ', retryCountdown, " second", retryCountdown === 1 ? '' : 's', "..."] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
-                            setRetryCountdown(RETRY_INTERVAL_SECONDS);
-                            void refetch();
-                        }, children: "Retry now" })] }) }));
+            }, children: _jsx(Text, { sx: { color: 'attention.fg' }, children: "No context data available." }) }));
     }
     if (contextData.error) {
         return (_jsx(Box, { sx: {
@@ -213,15 +173,7 @@ export function ContextInspector({ agentId, apiBase }) {
                 borderRadius: 2,
                 border: '1px solid',
                 borderColor: 'attention.muted',
-            }, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: 2,
-                }, children: [_jsx(Text, { sx: { color: 'attention.fg' }, children: `${contextData.error} Retrying in ${retryCountdown} second${retryCountdown === 1 ? '' : 's'}...` }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
-                            setRetryCountdown(RETRY_INTERVAL_SECONDS);
-                            void refetch();
-                        }, children: "Retry now" })] }) }));
+            }, 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
@@ -258,7 +210,7 @@ export function ContextInspector({ agentId, apiBase }) {
                                 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: {
+                            }, 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)))) }), _jsx(CollapsibleSection, { title: "Message History", icon: CommentDiscussionIcon, count: contextData.messages.length, tokens: messageHistoryTokens, 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',

package/lib/context/ContextPanel.d.ts

@@ -98,6 +98,8 @@ export interface ContextPanelProps {
     agentId: string;
     /** API base URL for fetching context data */
     apiBase?: string;
+    /** Live context snapshot pushed by websocket; skips internal polling when provided */
+    liveData?: ContextSnapshotResponse | null;
     /** Number of messages in conversation (from chat store) */
     messageCount?: number;
     /** Default view mode */
@@ -108,5 +110,5 @@ export interface ContextPanelProps {
 /**
  * ContextPanel component - unified context usage display.
  */
-export declare function ContextPanel({ agentId, apiBase, messageCount, defaultView, chartHeight, }: ContextPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextPanel({ agentId, apiBase, liveData, messageCount, defaultView, chartHeight, }: ContextPanelProps): import("react/jsx-runtime").JSX.Element;
 export default ContextPanel;

package/lib/context/ContextPanel.js

@@ -7,12 +7,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Token distribution treemap
  * - Historic usage time-series chart
  */
-import { CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, GraphIcon, ListUnorderedIcon, } from '@primer/octicons-react';
+import { CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, GraphIcon, AppsIcon, ListUnorderedIcon, DownloadIcon, } from '@primer/octicons-react';
 import { Heading, Text, ProgressBar, Spinner, Button, SegmentedControl, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { useQuery } from '@tanstack/react-query';
 import ReactECharts from 'echarts-for-react';
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 /**
  * Format token count for display
  */
@@ -29,8 +28,11 @@ function formatTokens(tokens) {
  * Format duration
  */
 function formatDuration(seconds) {
+    if (!Number.isFinite(seconds) || Number.isNaN(seconds) || seconds < 0) {
+        return '0ms';
+    }
     if (seconds < 1) {
-        return `${Math.round(seconds * 1000)}ms`;
+        return `${Math.max(0, Math.round(seconds * 1000))}ms`;
     }
     if (seconds < 60) {
         return `${seconds.toFixed(1)}s`;
@@ -39,6 +41,89 @@ function formatDuration(seconds) {
     const secs = Math.round(seconds % 60);
     return `${minutes}m ${secs}s`;
 }
+function csvCell(value) {
+    const text = String(value ?? '');
+    if (/[",\n]/.test(text)) {
+        return `"${text.replace(/"/g, '""')}"`;
+    }
+    return text;
+}
+function downloadContextUsageAsCSV(data) {
+    const rows = [];
+    rows.push(['Context Usage Snapshot for Agent', data.agentId]);
+    rows.push(['Generated At', new Date().toISOString()]);
+    rows.push([]);
+    rows.push(['Summary']);
+    rows.push(['Total Tokens', data.totalTokens]);
+    rows.push(['Context Window', data.contextWindow]);
+    rows.push(['System Prompt Tokens', data.systemPromptTokens]);
+    rows.push(['Tool Tokens', data.toolTokens]);
+    rows.push(['History Tokens', data.historyTokens]);
+    rows.push(['Current Message Tokens', data.currentMessageTokens]);
+    rows.push(['User Message Tokens', data.userMessageTokens]);
+    rows.push(['Assistant Message Tokens', data.assistantMessageTokens]);
+    rows.push([]);
+    if (data.sessionUsage) {
+        rows.push(['Session Usage']);
+        rows.push(['Input Tokens', data.sessionUsage.inputTokens]);
+        rows.push(['Output Tokens', data.sessionUsage.outputTokens]);
+        rows.push(['Requests', data.sessionUsage.requests]);
+        rows.push(['Tool Calls', data.sessionUsage.toolCalls]);
+        rows.push(['Turns', data.sessionUsage.turns]);
+        rows.push(['Duration Seconds', data.sessionUsage.durationSeconds]);
+        rows.push([]);
+    }
+    if (data.turnUsage) {
+        rows.push(['Last Turn Usage']);
+        rows.push(['Input Tokens', data.turnUsage.inputTokens]);
+        rows.push(['Output Tokens', data.turnUsage.outputTokens]);
+        rows.push(['Requests', data.turnUsage.requests]);
+        rows.push(['Tool Calls', data.turnUsage.toolCalls]);
+        rows.push(['Duration Seconds', data.turnUsage.durationSeconds]);
+        rows.push([]);
+    }
+    rows.push(['Distribution']);
+    rows.push(['Category', 'Tokens']);
+    for (const category of data.distribution?.children ?? []) {
+        rows.push([category.name, category.value]);
+    }
+    rows.push([]);
+    if (data.perRequestUsage.length > 0) {
+        rows.push(['Per Request Usage']);
+        rows.push([
+            'Request #',
+            'Input Tokens',
+            'Output Tokens',
+            'Duration Ms',
+            'Tool Names',
+            'Timestamp',
+            'Turn ID',
+        ]);
+        for (const request of data.perRequestUsage) {
+            rows.push([
+                request.requestNum,
+                request.inputTokens,
+                request.outputTokens,
+                request.durationMs,
+                request.toolNames.join('; '),
+                request.timestamp ?? '',
+                request.turnId ?? '',
+            ]);
+        }
+    }
+    const csv = rows.map(row => row.map(csvCell).join(',')).join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    const ts = new Date().toISOString().replace(/[:.]/g, '-');
+    link.download = `context-usage-${data.agentId}-${ts}.csv`;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
 /**
  * Get icon for context category
  */
@@ -59,56 +144,17 @@ function getCategoryIcon(name) {
             return ClockIcon;
     }
 }
-const RETRY_INTERVAL_SECONDS = 5;
-/**
- * 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'
-        : '';
-}
 /**
  * ContextPanel component - unified context usage display.
  */
-export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView = 'overview', chartHeight = '200px', }) {
+export function ContextPanel({ agentId, apiBase, liveData, messageCount = 0, defaultView = 'overview', chartHeight = '200px', }) {
     const [viewMode, setViewMode] = useState(defaultView);
     const [showDetails, setShowDetails] = useState(false);
-    const [retryCountdown, setRetryCountdown] = useState(RETRY_INTERVAL_SECONDS);
-    const { data: snapshotData, isLoading, error, refetch, } = useQuery({
-        queryKey: ['context-snapshot', agentId, apiBase],
-        queryFn: async () => {
-            const base = getApiBase(apiBase);
-            const response = await fetch(`${base}/api/v1/configure/agents/${encodeURIComponent(agentId)}/context-snapshot`);
-            if (!response.ok) {
-                throw new Error('Failed to fetch context snapshot');
-            }
-            return response.json();
-        },
-        refetchInterval: RETRY_INTERVAL_SECONDS * 1000,
-        refetchOnMount: 'always',
-        staleTime: 0,
-    });
-    useEffect(() => {
-        if (!error) {
-            setRetryCountdown(RETRY_INTERVAL_SECONDS);
-            return;
-        }
-        setRetryCountdown(RETRY_INTERVAL_SECONDS);
-        const timer = window.setInterval(() => {
-            setRetryCountdown(prev => prev <= 1 ? RETRY_INTERVAL_SECONDS : prev - 1);
-        }, 1000);
-        return () => window.clearInterval(timer);
-    }, [error]);
+    const hasLiveData = liveData !== undefined;
+    // REST polling removed — data comes exclusively via WS `agent.snapshot`.
+    const snapshotData = liveData;
+    const showLoading = !hasLiveData;
+    const hasError = false;
     // Build historic usage chart data from perRequestUsage
     const historyChartOption = useMemo(() => {
         if (!snapshotData?.perRequestUsage ||
@@ -251,7 +297,7 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [snapshotData?.distribution]);
-    if (isLoading) {
+    if (showLoading) {
         return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
                         fontSize: 1,
                         fontWeight: 'semibold',
@@ -268,7 +314,7 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                         gap: 2,
                     }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading context details..." })] })] }));
     }
-    if (error || !snapshotData) {
+    if (hasError || !snapshotData) {
         return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
                         fontSize: 1,
                         fontWeight: 'semibold',
@@ -280,19 +326,13 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                         borderRadius: 2,
                         border: '1px solid',
                         borderColor: 'attention.muted',
-                    }, children: _jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            gap: 2,
-                        }, children: [_jsxs(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: ["Service not available for context usage. Retrying in", ' ', retryCountdown, " second", retryCountdown === 1 ? '' : 's', "..."] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
-                                    setRetryCountdown(RETRY_INTERVAL_SECONDS);
-                                    void refetch();
-                                }, children: "Retry now" })] }) })] }));
+                    }, 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;
-    const hasHistoryData = snapshotData.perRequestUsage && snapshotData.perRequestUsage.length > 0;
     return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
@@ -302,7 +342,7 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                             fontSize: 1,
                             fontWeight: 'semibold',
                             color: 'fg.muted',
-                        }, children: "Context Usage" }), messageCount > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [messageCount, " ", messageCount === 1 ? 'message' : 'messages'] }))] }), _jsxs(Box, { sx: {
+                        }, 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,
@@ -337,7 +377,7 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                         }, children: [_jsxs(SegmentedControl, { "aria-label": "View mode", size: "small", onChange: index => {
                                     const modes = ['overview', 'distribution', 'history'];
                                     setViewMode(modes[index]);
-                                }, children: [_jsx(SegmentedControl.Button, { selected: viewMode === 'overview', leadingIcon: ListUnorderedIcon, children: "Overview" }), _jsx(SegmentedControl.Button, { selected: viewMode === 'distribution', leadingIcon: GraphIcon, disabled: !hasDistributionData, children: "Distribution" }), _jsx(SegmentedControl.Button, { selected: viewMode === 'history', leadingIcon: ClockIcon, disabled: !hasHistoryData, children: "History" })] }), 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, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [hasDistributionData &&
                                         distribution.children.map(category => {
                                             const CategoryIcon = getCategoryIcon(category.name);
                                             const categoryPercent = (category.value / contextWindow) * 100;
@@ -384,6 +424,6 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                                         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))) }))] }))] })] }));
+                                    }, 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" }) }))] })] }));
 }
 export default ContextPanel;

package/lib/context/ContextUsage.d.ts

@@ -25,9 +25,11 @@ export interface ContextDetailsResponse {
 export interface ContextUsageProps {
     /** Agent ID for fetching context details (required) */
     agentId: string;
+    /** Optional base URL override (defaults to local 8765 or same-origin) */
+    baseUrl?: string;
 }
 /**
  * ContextUsage component displays token usage breakdown by category.
  */
-export declare function ContextUsage({ agentId }: ContextUsageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextUsage({ agentId, baseUrl }: ContextUsageProps): import("react/jsx-runtime").JSX.Element;
 export default ContextUsage;

package/lib/context/ContextUsage.js

@@ -52,11 +52,11 @@ function getCategoryIcon(name) {
 /**
  * ContextUsage component displays token usage breakdown by category.
  */
-export function ContextUsage({ agentId }) {
+export function ContextUsage({ agentId, baseUrl }) {
     const { data: contextData, isLoading, error, } = useQuery({
-        queryKey: ['context-details', agentId],
+        queryKey: ['context-details', agentId, baseUrl],
         queryFn: async () => {
-            const apiBase = getLocalApiBase();
+            const apiBase = baseUrl || getLocalApiBase();
             const response = await fetch(`${apiBase}/api/v1/configure/agents/${encodeURIComponent(agentId)}/context-details`);
             if (!response.ok) {
                 throw new Error('Failed to fetch context details');

package/lib/context/CostTracker.d.ts

@@ -3,8 +3,8 @@
  */
 export interface CostUsageResponse {
     agentId: string;
-    /** Cost for the current run in USD */
-    currentRunCostUsd: number;
+    /** Cost for the last completed turn in USD */
+    lastTurnCostUsd: number;
     /** Total cumulative cost in USD */
     cumulativeCostUsd: number;
     /** Per-run budget limit (from guardrails) */
@@ -23,15 +23,21 @@ export interface CostUsageResponse {
         costUsd: number;
         requests: number;
     }>;
+    /** Optional run traces with pricing resolution info */
+    runs?: Array<{
+        pricingResolved: boolean;
+    }>;
 }
 export interface CostTrackerProps {
     /** Agent ID for fetching cost data */
     agentId: string;
     /** Compact mode — show only the summary bar */
     compact?: boolean;
+    /** Live cost data pushed by websocket (single source of truth). */
+    liveData?: CostUsageResponse | null;
 }
 /**
  * Displays running cost and budget utilization for an agent.
  */
-export declare function CostTracker({ agentId, compact }: CostTrackerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CostTracker({ agentId: _agentId, compact, liveData, }: CostTrackerProps): import("react/jsx-runtime").JSX.Element;
 export default CostTracker;

package/lib/context/CostTracker.js

@@ -11,17 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module components/context/CostTracker
  */
-import { Box, Heading, Text, ProgressBar, Spinner, Flash, Label, } from '@primer/react';
+import { Box, Heading, Text, ProgressBar, Flash, Label } from '@primer/react';
 import { CreditCardIcon, AlertIcon } from '@primer/octicons-react';
-import { useQuery } from '@tanstack/react-query';
-function getLocalApiBase() {
-    if (typeof window === 'undefined')
-        return '';
-    const host = window.location.hostname;
-    return host === 'localhost' || host === '127.0.0.1'
-        ? 'http://127.0.0.1:8765'
-        : '';
-}
 function formatUsd(amount) {
     if (amount < 0.01)
         return `$${amount.toFixed(4)}`;
@@ -39,38 +30,23 @@ function formatTokens(tokens) {
 /**
  * Displays running cost and budget utilization for an agent.
  */
-export function CostTracker({ agentId, compact = false }) {
-    const { data: costData, isLoading, error, } = useQuery({
-        queryKey: ['cost-usage', agentId],
-        queryFn: async () => {
-            const apiBase = getLocalApiBase();
-            const response = await fetch(`${apiBase}/api/v1/configure/agents/${encodeURIComponent(agentId)}/cost-usage`);
-            if (!response.ok)
-                throw new Error('Failed to fetch cost data');
-            return response.json();
-        },
-        refetchInterval: 5000,
-        staleTime: 0,
-    });
-    if (isLoading) {
-        return (_jsxs(Box, { sx: {
-                p: 2,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading cost\u2026" })] }));
-    }
-    if (error || !costData) {
-        return (_jsx(Box, { sx: { p: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Cost data unavailable" }) }));
+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..." }) }));
     }
     const cumulativePercent = costData.cumulativeBudgetUsd != null && costData.cumulativeBudgetUsd > 0
         ? (costData.cumulativeCostUsd / costData.cumulativeBudgetUsd) * 100
         : null;
-    const runPercent = costData.perRunBudgetUsd != null && costData.perRunBudgetUsd > 0
-        ? (costData.currentRunCostUsd / costData.perRunBudgetUsd) * 100
+    const lastTurnCostUsd = costData.lastTurnCostUsd;
+    const lastTurnPercent = costData.perRunBudgetUsd != null && costData.perRunBudgetUsd > 0
+        ? (lastTurnCostUsd / costData.perRunBudgetUsd) * 100
         : null;
     const isOverBudget = cumulativePercent != null && cumulativePercent > 100;
     const isNearBudget = cumulativePercent != null && cumulativePercent > 80;
+    const hasUnresolvedPricing = Array.isArray(costData.runs) &&
+        costData.runs.some(run => run.pricingResolved === false);
+    const displayUsd = (amount) => hasUnresolvedPricing && amount === 0 ? '…' : formatUsd(amount);
     // Compact: single row summary
     if (compact) {
         return (_jsxs(Box, { sx: {
@@ -79,11 +55,12 @@ export function CostTracker({ agentId, compact = false }) {
                 gap: 2,
                 px: 2,
                 py: 1,
-            }, children: [_jsx(CreditCardIcon, { size: 14 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Run: ", formatUsd(costData.currentRunCostUsd), " | Total:", ' ', formatUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
-                            ` / ${formatUsd(costData.cumulativeBudgetUsd)}`] }), isOverBudget && (_jsx(Label, { variant: "danger", size: "small", children: "Over budget" })), !isOverBudget && isNearBudget && (_jsx(Label, { variant: "attention", size: "small", children: "Near limit" }))] }));
+            }, 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), ")."] })), _jsxs(Box, { sx: {
+    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,
@@ -93,17 +70,17 @@ export function CostTracker({ agentId, compact = false }) {
                                     display: 'flex',
                                     justifyContent: 'space-between',
                                     mb: 1,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Current run" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatUsd(costData.currentRunCostUsd), costData.perRunBudgetUsd != null &&
-                                                ` / ${formatUsd(costData.perRunBudgetUsd)}`] })] }), runPercent != null && (_jsx(ProgressBar, { progress: Math.min(runPercent, 100), sx: { height: 6 }, bg: runPercent > 80 ? 'danger.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: "Cumulative" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
-                                                ` / ${formatUsd(costData.cumulativeBudgetUsd)}`] })] }), cumulativePercent != null && (_jsx(ProgressBar, { progress: Math.min(cumulativePercent, 100), sx: { height: 6 }, bg: cumulativePercent > 100
+                                }, 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: {
+                                        : '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',
@@ -119,6 +96,8 @@ export function CostTracker({ agentId, compact = false }) {
                                     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: [formatUsd(m.costUsd), " (", m.requests, " req)"] })] }, m.model)))] }))] })] }));
+                                }, 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)))] }))] })] }));
 }
 export default CostTracker;

package/lib/context/CostUsageChart.d.ts

@@ -0,0 +1,12 @@
+export interface CostUsageChartProps {
+    serviceName?: string;
+    agentId?: string;
+    apiKey?: string;
+    runUrl?: string;
+    wsRunUrl?: string;
+    liveCumulativeUsd?: number;
+    liveTimestampMs?: number | null;
+    height?: number;
+}
+export declare function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl, liveCumulativeUsd, liveTimestampMs, height, }: CostUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export default CostUsageChart;