@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/context/CostUsageChart.js

@@ -7,6 +7,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
 import { buildOtelWebSocketUrl } from '@datalayer/core/lib/otel';
 import { toMetricValue } from '../hooks/useMonitoring';
+import { fetchOtelMetricRows } from '../hooks/useMonitoring';
 import { subscribeOtelWs } from './otelWsPool';
 import { agentRuntimeStore, getMonitoringCacheKey, useAgentRuntimeStore, } from '../stores/agentRuntimeStore';
 const COST_RUN_METRIC = 'agent_runtimes.capability.cost.run.usd';
@@ -89,9 +90,7 @@ function extractCostPoints(rows, agentId) {
         const metricName = row.metric_name;
         return (metricName === COST_CUMULATIVE_METRIC || metricName === COST_RUN_METRIC);
     });
-    if (agentId) {
-        filtered = filtered.filter(row => extractAgentId(row) === agentId);
-    }
+    filtered = filtered.filter(row => agentIdMatches(row, agentId));
     const byTimestamp = new Map();
     for (const row of filtered) {
         const ts = rowTimestampKey(row);
@@ -111,22 +110,31 @@ function extractCostPoints(rows, agentId) {
     });
     for (const [, groupRows] of sorted) {
         const cumulativeRows = groupRows.filter(r => r.metric_name === COST_CUMULATIVE_METRIC);
-        if (cumulativeRows.length === 0)
-            continue;
         const runRows = groupRows.filter(r => r.metric_name === COST_RUN_METRIC);
-        // Cumulative metric values represent the running total. Repeated snapshot
-        // rows for the same timestamp should not be summed; keep the highest value.
-        const cumulativeUsd = cumulativeRows.reduce((max, row) => Math.max(max, toMetricValue(row)), 0);
-        const costUsd = runRows.reduce((sum, row) => sum + toMetricValue(row), 0);
-        if (!Number.isFinite(cumulativeUsd) || !Number.isFinite(costUsd))
+        if (cumulativeRows.length === 0 && runRows.length === 0)
             continue;
-        const timestampKey = rowTimestampKey(cumulativeRows[0]);
+        // Resolve the running total for this timestamp. Preference order:
+        //   1. `agent.cost.cumulative_usd` attribute — the exact tracked total,
+        //      emitted on both the run counter and the cumulative histogram and
+        //      independent of the exporter's temporality.
+        //   2. The `cost.run.usd` counter value — exported with cumulative
+        //      temporality, so each data point already holds the running total.
+        //   3. The cumulative histogram metric value (least reliable, since a
+        //      histogram `sum` aggregates every recorded observation).
+        const attrCumulative = maxDefined(groupRows, extractCumulativeAttr);
+        const runCumulative = maxDefined(runRows, finiteMetricValue);
+        const histogramCumulative = maxDefined(cumulativeRows, finiteMetricValue);
+        const cumulativeUsd = attrCumulative ?? runCumulative ?? histogramCumulative ?? 0;
+        if (!Number.isFinite(cumulativeUsd))
+            continue;
+        const anchorRow = cumulativeRows[0] ?? runRows[0];
+        const timestampKey = rowTimestampKey(anchorRow);
         if (!timestampKey)
             continue;
         points.push({
             timestampKey,
-            timestampMs: rowTimestampMs(cumulativeRows[0]),
-            costUsd,
+            timestampMs: rowTimestampMs(anchorRow),
+            costUsd: cumulativeUsd,
             cumulativeUsd,
         });
     }
@@ -140,7 +148,7 @@ function extractServiceName(row) {
             return candidate;
         }
     }
-    const resourceAttributes = row.resource_attributes;
+    const resourceAttributes = parseResourceAttributes(row.resource_attributes);
     if (resourceAttributes && typeof resourceAttributes === 'object') {
         const nested = resourceAttributes['service.name'];
         if (typeof nested === 'string' && nested.length > 0) {
@@ -149,6 +157,75 @@ function extractServiceName(row) {
     }
     return undefined;
 }
+function parseResourceAttributes(attrs) {
+    if (attrs && typeof attrs === 'object' && !Array.isArray(attrs)) {
+        return attrs;
+    }
+    if (typeof attrs === 'string') {
+        try {
+            const parsed = JSON.parse(attrs);
+            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                return parsed;
+            }
+        }
+        catch {
+            // Ignore malformed resource attributes payloads.
+        }
+    }
+    return {};
+}
+function extractRuntimeId(row) {
+    const directCandidates = [
+        row.runtime_id,
+        row.runtime,
+        row.pod_name,
+        row.k8s_pod_name,
+    ];
+    for (const candidate of directCandidates) {
+        if (typeof candidate === 'string' && candidate.trim().length > 0) {
+            return candidate.trim();
+        }
+    }
+    const parsedAttrs = parseAttributes(row.attributes);
+    const attrs = parsedAttrs &&
+        typeof parsedAttrs === 'object' &&
+        !Array.isArray(parsedAttrs)
+        ? parsedAttrs
+        : {};
+    const attrCandidates = [
+        attrs['runtime.id'],
+        attrs['runtime.pod_name'],
+        attrs['k8s.pod.name'],
+    ];
+    for (const candidate of attrCandidates) {
+        if (typeof candidate === 'string' && candidate.trim().length > 0) {
+            return candidate.trim();
+        }
+    }
+    const resourceAttributes = parseResourceAttributes(row.resource_attributes);
+    const resourceCandidates = [
+        resourceAttributes['runtime.id'],
+        resourceAttributes['runtime.pod_name'],
+        resourceAttributes['k8s.pod.name'],
+    ];
+    for (const candidate of resourceCandidates) {
+        if (typeof candidate === 'string' && candidate.trim().length > 0) {
+            return candidate.trim();
+        }
+    }
+    return undefined;
+}
+function rowMatchesSource(row, serviceName, runtimeId) {
+    const resolvedServiceName = String(serviceName || '').trim();
+    const resolvedRuntimeId = String(runtimeId || '').trim();
+    if (!resolvedServiceName && !resolvedRuntimeId) {
+        return true;
+    }
+    const serviceMatches = resolvedServiceName.length > 0 &&
+        extractServiceName(row) === resolvedServiceName;
+    const runtimeMatches = resolvedRuntimeId.length > 0 && extractRuntimeId(row) === resolvedRuntimeId;
+    return serviceMatches || runtimeMatches;
+}
 /** Extract `agent.id` from span/trace attributes. */
 function extractAgentId(row) {
     const attrs = parseAttributes(row.attributes);
@@ -157,11 +234,56 @@ function extractAgentId(row) {
         return aid;
     return undefined;
 }
-export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl, liveCumulativeUsd, liveTimestampMs, height = 160, }) {
+/**
+ * Extract the exact cumulative cost (USD) carried on the metric attributes as
+ * `agent.cost.cumulative_usd`. This is emitted on every cost metric and is the
+ * authoritative running total regardless of the exporter's temporality.
+ */
+function extractCumulativeAttr(row) {
+    const attrs = parseAttributes(row.attributes);
+    const candidate = attrs['agent.cost.cumulative_usd'];
+    if (typeof candidate === 'number' && Number.isFinite(candidate)) {
+        return candidate;
+    }
+    if (typeof candidate === 'string') {
+        const parsed = Number(candidate);
+        if (Number.isFinite(parsed))
+            return parsed;
+    }
+    return undefined;
+}
+/**
+ * Match a metric row against the requested agent. Rows fetched from the
+ * normalized metrics endpoint can arrive without attributes (so `agent.id`
+ * is unknown); those are kept because the service/runtime scope already
+ * narrows the data to this runtime's agent.
+ */
+function agentIdMatches(row, agentId) {
+    if (!agentId)
+        return true;
+    const rowAgentId = extractAgentId(row);
+    return rowAgentId === undefined || rowAgentId === agentId;
+}
+/** `toMetricValue` guarded to only return finite numbers. */
+function finiteMetricValue(row) {
+    const value = toMetricValue(row);
+    return Number.isFinite(value) ? value : undefined;
+}
+/** Reduce rows to the maximum value produced by `selector`, ignoring gaps. */
+function maxDefined(rows, selector) {
+    return rows.reduce((max, row) => {
+        const value = selector(row);
+        if (value === undefined)
+            return max;
+        return max === undefined ? value : Math.max(max, value);
+    }, undefined);
+}
+export function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height = 160, }) {
+    const cacheServiceKey = String(serviceName || runtimeId || '').trim() || undefined;
     const monitoringCache = useAgentRuntimeStore(s => s.monitoringCache);
     const mergeCostPoints = useAgentRuntimeStore(s => s.mergeCostPoints);
     const upsertLocalCostPoint = useAgentRuntimeStore(s => s.upsertLocalCostPoint);
-    const cachedEntry = useMemo(() => resolveMonitoringEntry(monitoringCache, serviceName, agentId), [agentId, monitoringCache, serviceName]);
+    const cachedEntry = useMemo(() => resolveMonitoringEntry(monitoringCache, cacheServiceKey, agentId), [agentId, cacheServiceKey, monitoringCache]);
     const [points, setPoints] = useState([]);
     const initialTimestampMsRef = useRef(Date.now());
     const mergePoints = (existing, incoming) => {
@@ -196,16 +318,87 @@ export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl,
     };
     // ── Reset state on source switch ──────────────────────────────
     useEffect(() => {
-        if (!serviceName) {
+        if (!cacheServiceKey) {
             setPoints([]);
             return;
         }
         setPoints((cachedEntry?.costPoints ?? []).map(localPointToCostPoint));
         initialTimestampMsRef.current = Date.now();
-    }, [agentId, cachedEntry, serviceName]);
+    }, [agentId, cacheServiceKey, cachedEntry]);
+    // Bootstrap chart with existing OTEL cost metrics before websocket updates.
+    useEffect(() => {
+        if (!cacheServiceKey || !apiKey || !datalayerUrl) {
+            return;
+        }
+        let cancelled = false;
+        const loadInitialMetrics = async () => {
+            try {
+                const [runRows, cumulativeRows] = await Promise.all([
+                    fetchOtelMetricRows({
+                        metric: COST_RUN_METRIC,
+                        serviceName,
+                        datalayerUrl,
+                        apiKey,
+                        limit: 1000,
+                    }),
+                    fetchOtelMetricRows({
+                        metric: COST_CUMULATIVE_METRIC,
+                        serviceName,
+                        datalayerUrl,
+                        apiKey,
+                        limit: 1000,
+                    }),
+                ]);
+                if (cancelled) {
+                    return;
+                }
+                const rows = [...runRows, ...cumulativeRows].filter(row => {
+                    const castedRow = row;
+                    if (!rowMatchesSource(castedRow, serviceName, runtimeId)) {
+                        return false;
+                    }
+                    return agentIdMatches(castedRow, agentId);
+                });
+                const initialPoints = extractCostPoints(rows, agentId);
+                if (cancelled || initialPoints.length === 0) {
+                    return;
+                }
+                mergeCostPoints({
+                    serviceName: cacheServiceKey,
+                    agentId,
+                    points: initialPoints.map(point => ({
+                        timestampMs: point.timestampMs,
+                        cumulativeUsd: point.cumulativeUsd,
+                    })),
+                });
+                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, cacheServiceKey, agentId);
+                if (mergedEntry) {
+                    setPoints(mergedEntry.costPoints.map(localPointToCostPoint));
+                }
+                else {
+                    setPoints(initialPoints);
+                }
+            }
+            catch {
+                // Fail open: websocket updates can still populate the chart.
+            }
+        };
+        void loadInitialMetrics();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        agentId,
+        apiKey,
+        cacheServiceKey,
+        datalayerUrl,
+        mergeCostPoints,
+        runtimeId,
+        serviceName,
+    ]);
     // Apply immediate post-turn updates from the monitoring websocket snapshot.
     useEffect(() => {
-        if (!serviceName)
+        if (!cacheServiceKey)
             return;
         if (typeof liveCumulativeUsd !== 'number' ||
             !Number.isFinite(liveCumulativeUsd)) {
@@ -221,12 +414,12 @@ export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl,
             cumulativeUsd: Math.max(0, liveCumulativeUsd),
         };
         upsertLocalCostPoint({
-            serviceName,
+            serviceName: cacheServiceKey,
             agentId,
             timestampMs,
             cumulativeUsd: livePoint.cumulativeUsd,
         });
-        const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+        const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, cacheServiceKey, agentId);
         if (mergedEntry) {
             setPoints(mergedEntry.costPoints.map(localPointToCostPoint));
         }
@@ -235,6 +428,7 @@ export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl,
         }
     }, [
         agentId,
+        cacheServiceKey,
         liveCumulativeUsd,
         liveTimestampMs,
         serviceName,
@@ -242,10 +436,10 @@ export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl,
     ]);
     // ── WebSocket subscription (shared connection pool) ─────────
     useEffect(() => {
-        if (!serviceName || !apiKey)
+        if (!cacheServiceKey || !apiKey)
             return;
-        const rawBaseUrl = wsRunUrl ||
-            runUrl ||
+        const rawBaseUrl = wsUrl ||
+            datalayerUrl ||
             (typeof window !== 'undefined' ? window.location.origin : '');
         if (!rawBaseUrl)
             return;
@@ -258,9 +452,9 @@ export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl,
                 window.location.protocol === 'https:'
                 ? 'https:'
                 : 'http:'}//${typeof window !== 'undefined' ? window.location.host : ''}${rawBaseUrl}`;
-        let wsUrl;
+        let resolvedWsUrl;
         try {
-            wsUrl = buildOtelWebSocketUrl({
+            resolvedWsUrl = buildOtelWebSocketUrl({
                 baseUrl: baseWithProtocol,
                 token: apiKey,
             });
@@ -268,28 +462,26 @@ export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl,
         catch {
             return;
         }
-        const unsubscribe = subscribeOtelWs(wsUrl, msg => {
+        const unsubscribe = subscribeOtelWs(resolvedWsUrl, msg => {
             if (msg.signal !== 'metrics')
                 return;
             const rows = Array.isArray(msg.data) ? msg.data : [];
-            let matchingRows = rows.filter(row => extractServiceName(row) === serviceName);
-            // Filter by agent.id when specified.
-            if (agentId) {
-                matchingRows = matchingRows.filter(row => extractAgentId(row) === agentId);
-            }
+            let matchingRows = rows.filter(row => rowMatchesSource(row, serviceName, runtimeId));
+            // Keep rows for this agent (or rows without an agent.id attribute).
+            matchingRows = matchingRows.filter(row => agentIdMatches(row, agentId));
             if (matchingRows.length === 0)
                 return;
             const newPoints = extractCostPoints(matchingRows, agentId);
             if (newPoints.length > 0) {
                 mergeCostPoints({
-                    serviceName,
+                    serviceName: cacheServiceKey,
                     agentId,
                     points: newPoints.map(point => ({
                         timestampMs: point.timestampMs,
                         cumulativeUsd: point.cumulativeUsd,
                     })),
                 });
-                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, cacheServiceKey, agentId);
                 if (mergedEntry) {
                     setPoints(mergedEntry.costPoints.map(localPointToCostPoint));
                 }
@@ -299,7 +491,16 @@ export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl,
             }
         });
         return unsubscribe;
-    }, [agentId, apiKey, mergeCostPoints, runUrl, serviceName, wsRunUrl]);
+    }, [
+        agentId,
+        apiKey,
+        cacheServiceKey,
+        mergeCostPoints,
+        datalayerUrl,
+        runtimeId,
+        serviceName,
+        wsUrl,
+    ]);
     // ── Chart options ─────────────────────────────────────────────
     const option = useMemo(() => {
         const chartData = points.length > 0

package/lib/context/MessageHistory.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Message detail from API.
+ */
+export interface MessageDetail {
+    role: string;
+    content: string;
+    estimatedTokens: number;
+    timestamp: string | null;
+    inContext: boolean;
+    toolName: string | null;
+    toolCallId: string | null;
+    isToolCall: boolean;
+    isToolResult: boolean;
+}
+/**
+ * Single message detail view.
+ */
+export declare function MessageDetailView({ message }: {
+    message: MessageDetail;
+}): import("react/jsx-runtime").JSX.Element;
+export interface MessageHistoryProps {
+    /** Full ordered list of conversation messages. */
+    messages: MessageDetail[];
+}
+/**
+ * Renders the conversation message history split into out-of-context and
+ * in-context groups.
+ */
+export declare function MessageHistory({ messages }: MessageHistoryProps): import("react/jsx-runtime").JSX.Element;
+export default MessageHistory;

package/lib/context/MessageHistory.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025-2026 Datalayer, Inc.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * MessageHistory component - Renders the agent conversation message history,
+ * splitting messages into "in context" and "out of context" groups. Shared by
+ * the ContextInspector (Configuration tab) and the Monitoring tab so both
+ * surfaces display identical message details.
+ */
+import { Text, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiModelIcon, TerminalIcon, CommentDiscussionIcon, CheckCircleIcon, XCircleIcon, InfoIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
+import { useMemo, useState } from 'react';
+import { TextPart } from '../chat/parts/TextPart';
+/**
+ * Format token count for display.
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+}
+/**
+ * Single message detail view.
+ */
+export function MessageDetailView({ message }) {
+    const roleColors = {
+        user: 'accent.fg',
+        assistant: 'success.fg',
+        system: 'attention.fg',
+        tool: 'done.fg',
+    };
+    const roleIcons = {
+        user: CommentDiscussionIcon,
+        assistant: AiModelIcon,
+        system: InfoIcon,
+        tool: TerminalIcon,
+    };
+    const RoleIcon = roleIcons[message.role] || CommentDiscussionIcon;
+    const text = String(message.content || '');
+    const chatRole = message.role === 'user' ? 'user' : 'assistant';
+    const uiMessage = {
+        id: `history-${message.role}-${message.timestamp || 'now'}-${message.toolCallId || 'no-tool'}`,
+        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: {
+                            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: () => {
+                        return;
+                    } }) })] }));
+}
+/**
+ * Renders the conversation message history split into out-of-context and
+ * in-context groups.
+ */
+export function MessageHistory({ messages }) {
+    const [expanded, setExpanded] = useState(false);
+    const { inContextMessages, outOfContextMessages } = useMemo(() => {
+        if (!messages) {
+            return { inContextMessages: [], outOfContextMessages: [] };
+        }
+        return {
+            inContextMessages: messages.filter(m => m.inContext),
+            outOfContextMessages: messages.filter(m => !m.inContext),
+        };
+    }, [messages]);
+    const messageHistoryTokens = useMemo(() => {
+        if (!messages) {
+            return 0;
+        }
+        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: {
+                                        fontWeight: 'semibold',
+                                        fontSize: 1,
+                                        color: 'fg.muted',
+                                        mb: 2,
+                                        display: 'block',
+                                    }, children: ["Out of Context (", outOfContextMessages.length, ")"] }), outOfContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `out-${idx}`)))] })), inContextMessages.length > 0 && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        fontWeight: 'semibold',
+                                        fontSize: 1,
+                                        color: 'success.fg',
+                                        mb: 2,
+                                        display: 'block',
+                                    }, children: ["In Context (", inContextMessages.length, ")"] }), inContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `in-${idx}`)))] }))] })) }))] }));
+}
+export default MessageHistory;

package/lib/context/TokenUsageChart.d.ts

@@ -1,9 +1,10 @@
 export interface TokenUsageChartProps {
     serviceName?: string;
     agentId?: string;
+    runtimeId?: string;
     apiKey?: string;
-    runUrl?: string;
-    wsRunUrl?: string;
+    datalayerUrl?: string;
+    wsUrl?: string;
     liveSystemPromptTokens?: number;
     liveToolsDescriptionTokens?: number;
     liveUserMessageTokens?: number;
@@ -13,5 +14,5 @@ export interface TokenUsageChartProps {
     height?: number;
     days?: number;
 }
-export declare function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height, }: TokenUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height, }: TokenUsageChartProps): import("react/jsx-runtime").JSX.Element;
 export default TokenUsageChart;