@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/context/CostUsageChart.js

@@ -0,0 +1,378 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+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 { subscribeOtelWs } from './otelWsPool';
+import { agentRuntimeStore, getMonitoringCacheKey, useAgentRuntimeStore, } from '../stores/agentRuntimeStore';
+const COST_RUN_METRIC = 'agent_runtimes.capability.cost.run.usd';
+const COST_CUMULATIVE_METRIC = 'agent_runtimes.capability.cost.cumulative.usd';
+function resolveMonitoringEntry(monitoringCache, serviceName, agentId) {
+    const direct = monitoringCache[getMonitoringCacheKey(serviceName, agentId)];
+    if (direct)
+        return direct;
+    if (agentId) {
+        const byAgent = Object.entries(monitoringCache).find(([key, entry]) => {
+            return key.endsWith(`::${agentId}`) && entry.costPoints.length > 0;
+        });
+        if (byAgent)
+            return byAgent[1];
+    }
+    if (serviceName) {
+        const byService = Object.entries(monitoringCache).find(([key, entry]) => {
+            return key.startsWith(`${serviceName}::`) && entry.costPoints.length > 0;
+        });
+        if (byService)
+            return byService[1];
+    }
+    return undefined;
+}
+function localPointToCostPoint(point) {
+    return {
+        timestampKey: String(point.timestampMs),
+        timestampMs: point.timestampMs,
+        costUsd: 0,
+        cumulativeUsd: point.cumulativeUsd,
+    };
+}
+/** Parse attributes that may arrive as a JSON string (WS) or object (HTTP). */
+function parseAttributes(attrs) {
+    if (attrs && typeof attrs === 'object' && !Array.isArray(attrs)) {
+        return attrs;
+    }
+    if (typeof attrs === 'string') {
+        try {
+            return JSON.parse(attrs);
+        }
+        catch {
+            return {};
+        }
+    }
+    return {};
+}
+/** Convert metric row timestamp to milliseconds. */
+function rowTimestampMs(row) {
+    const nanoTs = row.timestamp_unix_nano ?? row.observed_timestamp_unix_nano;
+    if (typeof nanoTs === 'number' && nanoTs > 0)
+        return nanoTs / 1_000_000;
+    if (typeof nanoTs === 'string' && nanoTs.length > 0) {
+        const parsed = Number(nanoTs);
+        if (Number.isFinite(parsed) && parsed > 0)
+            return parsed / 1_000_000;
+    }
+    const isoTs = row.timestamp;
+    if (typeof isoTs === 'string' && isoTs.length > 0) {
+        const ms = new Date(isoTs).getTime();
+        if (Number.isFinite(ms) && ms > 0)
+            return ms;
+    }
+    return Date.now();
+}
+function rowTimestampKey(row) {
+    const nano = row.timestamp_unix_nano;
+    if (typeof nano === 'number' && nano > 0)
+        return String(nano);
+    if (typeof nano === 'string' && nano.length > 0)
+        return nano;
+    const iso = row.timestamp;
+    if (typeof iso === 'string' && iso.length > 0)
+        return iso;
+    return '';
+}
+/** Extract cost points from cost metrics rows. */
+function extractCostPoints(rows, agentId) {
+    let filtered = rows.filter(row => {
+        const metricName = row.metric_name;
+        return (metricName === COST_CUMULATIVE_METRIC || metricName === COST_RUN_METRIC);
+    });
+    if (agentId) {
+        filtered = filtered.filter(row => extractAgentId(row) === agentId);
+    }
+    const byTimestamp = new Map();
+    for (const row of filtered) {
+        const ts = rowTimestampKey(row);
+        if (!ts)
+            continue;
+        const group = byTimestamp.get(ts) ?? [];
+        group.push(row);
+        byTimestamp.set(ts, group);
+    }
+    const points = [];
+    const sorted = [...byTimestamp.entries()].sort((a, b) => {
+        const na = Number(a[0]);
+        const nb = Number(b[0]);
+        if (Number.isFinite(na) && Number.isFinite(nb))
+            return na - nb;
+        return a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0;
+    });
+    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))
+            continue;
+        const timestampKey = rowTimestampKey(cumulativeRows[0]);
+        if (!timestampKey)
+            continue;
+        points.push({
+            timestampKey,
+            timestampMs: rowTimestampMs(cumulativeRows[0]),
+            costUsd,
+            cumulativeUsd,
+        });
+    }
+    points.sort((a, b) => a.timestampMs - b.timestampMs);
+    return points;
+}
+function extractServiceName(row) {
+    const directCandidates = [row.service_name, row.service, row.serviceName];
+    for (const candidate of directCandidates) {
+        if (typeof candidate === 'string' && candidate.length > 0) {
+            return candidate;
+        }
+    }
+    const resourceAttributes = row.resource_attributes;
+    if (resourceAttributes && typeof resourceAttributes === 'object') {
+        const nested = resourceAttributes['service.name'];
+        if (typeof nested === 'string' && nested.length > 0) {
+            return nested;
+        }
+    }
+    return undefined;
+}
+/** Extract `agent.id` from span/trace attributes. */
+function extractAgentId(row) {
+    const attrs = parseAttributes(row.attributes);
+    const aid = attrs['agent.id'];
+    if (typeof aid === 'string')
+        return aid;
+    return undefined;
+}
+export function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl, liveCumulativeUsd, liveTimestampMs, height = 160, }) {
+    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 [points, setPoints] = useState([]);
+    const initialTimestampMsRef = useRef(Date.now());
+    const mergePoints = (existing, incoming) => {
+        const byTimestamp = new Map();
+        for (const point of existing) {
+            byTimestamp.set(point.timestampKey, point);
+        }
+        for (const point of incoming) {
+            const prev = byTimestamp.get(point.timestampKey);
+            if (!prev) {
+                byTimestamp.set(point.timestampKey, point);
+                continue;
+            }
+            byTimestamp.set(point.timestampKey, {
+                ...prev,
+                timestampMs: Math.max(prev.timestampMs, point.timestampMs),
+                costUsd: Math.max(prev.costUsd, point.costUsd),
+                cumulativeUsd: Math.max(prev.cumulativeUsd, point.cumulativeUsd),
+            });
+        }
+        const merged = Array.from(byTimestamp.values()).sort((a, b) => a.timestampMs - b.timestampMs);
+        // Cumulative cost should never decrease; guard against out-of-order or
+        // duplicate snapshots by enforcing a monotonic series.
+        let runningMax = 0;
+        return merged.map(point => {
+            runningMax = Math.max(runningMax, point.cumulativeUsd);
+            return {
+                ...point,
+                cumulativeUsd: runningMax,
+            };
+        });
+    };
+    // ── Reset state on source switch ──────────────────────────────
+    useEffect(() => {
+        if (!serviceName) {
+            setPoints([]);
+            return;
+        }
+        setPoints((cachedEntry?.costPoints ?? []).map(localPointToCostPoint));
+        initialTimestampMsRef.current = Date.now();
+    }, [agentId, cachedEntry, serviceName]);
+    // Apply immediate post-turn updates from the monitoring websocket snapshot.
+    useEffect(() => {
+        if (!serviceName)
+            return;
+        if (typeof liveCumulativeUsd !== 'number' ||
+            !Number.isFinite(liveCumulativeUsd)) {
+            return;
+        }
+        const timestampMs = typeof liveTimestampMs === 'number' && Number.isFinite(liveTimestampMs)
+            ? liveTimestampMs
+            : Date.now();
+        const livePoint = {
+            timestampKey: `live-${timestampMs}`,
+            timestampMs,
+            costUsd: 0,
+            cumulativeUsd: Math.max(0, liveCumulativeUsd),
+        };
+        upsertLocalCostPoint({
+            serviceName,
+            agentId,
+            timestampMs,
+            cumulativeUsd: livePoint.cumulativeUsd,
+        });
+        const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+        if (mergedEntry) {
+            setPoints(mergedEntry.costPoints.map(localPointToCostPoint));
+        }
+        else {
+            setPoints(prev => mergePoints(prev, [livePoint]));
+        }
+    }, [
+        agentId,
+        liveCumulativeUsd,
+        liveTimestampMs,
+        serviceName,
+        upsertLocalCostPoint,
+    ]);
+    // ── WebSocket subscription (shared connection pool) ─────────
+    useEffect(() => {
+        if (!serviceName || !apiKey)
+            return;
+        const rawBaseUrl = wsRunUrl ||
+            runUrl ||
+            (typeof window !== 'undefined' ? window.location.origin : '');
+        if (!rawBaseUrl)
+            return;
+        const baseWithProtocol = rawBaseUrl.startsWith('http://') ||
+            rawBaseUrl.startsWith('https://') ||
+            rawBaseUrl.startsWith('ws://') ||
+            rawBaseUrl.startsWith('wss://')
+            ? rawBaseUrl
+            : `${typeof window !== 'undefined' &&
+                window.location.protocol === 'https:'
+                ? 'https:'
+                : 'http:'}//${typeof window !== 'undefined' ? window.location.host : ''}${rawBaseUrl}`;
+        let wsUrl;
+        try {
+            wsUrl = buildOtelWebSocketUrl({
+                baseUrl: baseWithProtocol,
+                token: apiKey,
+            });
+        }
+        catch {
+            return;
+        }
+        const unsubscribe = subscribeOtelWs(wsUrl, 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);
+            }
+            if (matchingRows.length === 0)
+                return;
+            const newPoints = extractCostPoints(matchingRows, agentId);
+            if (newPoints.length > 0) {
+                mergeCostPoints({
+                    serviceName,
+                    agentId,
+                    points: newPoints.map(point => ({
+                        timestampMs: point.timestampMs,
+                        cumulativeUsd: point.cumulativeUsd,
+                    })),
+                });
+                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+                if (mergedEntry) {
+                    setPoints(mergedEntry.costPoints.map(localPointToCostPoint));
+                }
+                else {
+                    setPoints(prev => mergePoints(prev, newPoints));
+                }
+            }
+        });
+        return unsubscribe;
+    }, [agentId, apiKey, mergeCostPoints, runUrl, serviceName, wsRunUrl]);
+    // ── Chart options ─────────────────────────────────────────────
+    const option = useMemo(() => {
+        const chartData = points.length > 0
+            ? [
+                [points[0].timestampMs, 0],
+                ...points.map(p => [p.timestampMs, p.cumulativeUsd]),
+            ]
+            : [[initialTimestampMsRef.current, 0]];
+        return {
+            animation: false,
+            animationDuration: 0,
+            animationDurationUpdate: 0,
+            tooltip: {
+                trigger: 'axis',
+                textStyle: { fontSize: 10 },
+                confine: true,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                formatter: (params) => {
+                    if (!Array.isArray(params) || params.length === 0)
+                        return '';
+                    const lines = params.map((p) => `${p.marker} ${p.seriesName}: $${p.value[1].toFixed(6)}`);
+                    return lines.join('<br/>');
+                },
+            },
+            legend: {
+                data: ['Cumulative cost'],
+                top: 0,
+                textStyle: { fontSize: 9 },
+                itemWidth: 10,
+                itemHeight: 8,
+                itemGap: 6,
+            },
+            grid: {
+                left: 50,
+                right: 15,
+                top: 24,
+                bottom: 20,
+            },
+            xAxis: {
+                type: 'time',
+                min: 'dataMin',
+                max: 'dataMax',
+                axisLabel: { fontSize: 9 },
+                axisLine: { lineStyle: { color: '#d0d7de' } },
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                axisLabel: {
+                    fontSize: 9,
+                    formatter: (v) => `$${v.toFixed(4)}`,
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: '#f0f0f0' },
+                },
+            },
+            series: [
+                {
+                    name: 'Cumulative cost',
+                    type: 'line',
+                    smooth: false,
+                    lineStyle: { width: 2 },
+                    areaStyle: { opacity: 0.15 },
+                    symbol: 'circle',
+                    symbolSize: 4,
+                    itemStyle: { color: '#cf222e' },
+                    data: chartData,
+                    animation: false,
+                },
+            ],
+        };
+    }, [points]);
+    return (_jsx(ReactECharts, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' }, notMerge: true, lazyUpdate: true }));
+}
+export default CostUsageChart;

package/lib/context/GraphFlowChart.d.ts

@@ -0,0 +1,16 @@
+/**
+ * GraphFlowChart — ECharts graph visualisation of pydantic-graph execution.
+ *
+ * Renders a force-directed graph showing:
+ * - Static topology (nodes + edges from the graph definition)
+ * - Dynamic execution trace (which nodes were visited, with timing)
+ */
+import { type CSSProperties } from 'react';
+import type { GraphTelemetryData } from '../types/stream';
+export interface GraphFlowChartProps {
+    data: GraphTelemetryData;
+    height?: number | string;
+    style?: CSSProperties;
+}
+export declare const GraphFlowChart: React.FC<GraphFlowChartProps>;
+export default GraphFlowChart;

package/lib/context/GraphFlowChart.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * GraphFlowChart — ECharts graph visualisation of pydantic-graph execution.
+ *
+ * Renders a force-directed graph showing:
+ * - Static topology (nodes + edges from the graph definition)
+ * - Dynamic execution trace (which nodes were visited, with timing)
+ */
+import { useMemo } from 'react';
+import ReactECharts from 'echarts-for-react';
+/** Category definitions for ECharts graph. */
+const CATEGORIES = [
+    { name: 'start', itemStyle: { color: '#58a6ff' } },
+    { name: 'step', itemStyle: { color: '#3fb950' } },
+    { name: 'end', itemStyle: { color: '#f85149' } },
+    { name: 'end_or_continue', itemStyle: { color: '#d29922' } },
+    { name: 'join', itemStyle: { color: '#bc8cff' } },
+    { name: 'decision', itemStyle: { color: '#f0883e' } },
+    { name: 'error', itemStyle: { color: '#da3633' } },
+    { name: 'parallel', itemStyle: { color: '#79c0ff' } },
+];
+const CATEGORY_INDEX = {};
+CATEGORIES.forEach((c, i) => {
+    CATEGORY_INDEX[c.name] = i;
+});
+function getCategoryIndex(category) {
+    return CATEGORY_INDEX[category] ?? CATEGORY_INDEX['step'];
+}
+/** Map node events to a lookup for fast access. */
+function buildEventLookup(events) {
+    const map = new Map();
+    for (const evt of events) {
+        const existing = map.get(evt.nodeId);
+        if (existing) {
+            existing.push(evt);
+        }
+        else {
+            map.set(evt.nodeId, [evt]);
+        }
+    }
+    return map;
+}
+function formatDuration(ms) {
+    if (ms == null)
+        return '—';
+    if (ms < 1)
+        return '<1ms';
+    if (ms < 1000)
+        return `${ms.toFixed(1)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+}
+export const GraphFlowChart = ({ data, height = 320, style, }) => {
+    const option = useMemo(() => {
+        const eventLookup = buildEventLookup(data.events);
+        // Build ECharts nodes
+        const echartsNodes = data.nodes.map((node) => {
+            const nodeEvents = eventLookup.get(node.id) || [];
+            const lastEvent = nodeEvents[nodeEvents.length - 1];
+            const hitCount = nodeEvents.filter(e => e.status === 'completed').length;
+            const hasError = nodeEvents.some(e => e.status === 'error');
+            const totalDuration = nodeEvents.reduce((sum, e) => sum + (e.durationMs ?? 0), 0);
+            // Size based on hit count (bigger = more visits)
+            const baseSize = 30;
+            const symbolSize = baseSize + Math.min(hitCount * 8, 40);
+            // Determine visual category
+            let visualCategory = node.category;
+            if (hasError)
+                visualCategory = 'error';
+            return {
+                id: node.id,
+                name: node.name === '__start__'
+                    ? 'Start'
+                    : node.name === '__end__'
+                        ? 'End'
+                        : node.name,
+                symbolSize,
+                category: getCategoryIndex(visualCategory),
+                value: hitCount,
+                itemStyle: hitCount > 0 ? { borderWidth: 3, borderColor: '#e3b341' } : undefined,
+                label: {
+                    show: true,
+                    fontSize: 11,
+                    color: '#c9d1d9',
+                },
+                tooltip: {
+                    formatter: () => {
+                        const lines = [
+                            `<b>${node.name}</b>`,
+                            `Category: ${node.category}`,
+                            `Executions: ${hitCount}`,
+                        ];
+                        if (totalDuration > 0) {
+                            lines.push(`Total duration: ${formatDuration(totalDuration)}`);
+                        }
+                        if (lastEvent?.status === 'error' && lastEvent.error) {
+                            lines.push(`<span style="color:#f85149">Error: ${lastEvent.error}</span>`);
+                        }
+                        return lines.join('<br/>');
+                    },
+                },
+            };
+        });
+        // Build ECharts edges (links)
+        const echartsLinks = data.edges.map((edge) => {
+            // Check if this edge was traversed in the execution trace
+            const wasTraversed = data.events.some(e => e.nodeId === edge.target && e.parentNodeId === edge.source);
+            return {
+                source: edge.source,
+                target: edge.target,
+                label: edge.label
+                    ? {
+                        show: true,
+                        formatter: edge.label,
+                        fontSize: 9,
+                        color: '#8b949e',
+                    }
+                    : undefined,
+                lineStyle: {
+                    color: wasTraversed ? '#e3b341' : '#484f58',
+                    width: wasTraversed ? 3 : 1.5,
+                    curveness: 0.2,
+                    type: edge.edgeType === 'parallel'
+                        ? 'dashed'
+                        : 'solid',
+                },
+            };
+        });
+        return {
+            tooltip: {
+                trigger: 'item',
+                backgroundColor: '#161b22',
+                borderColor: '#30363d',
+                textStyle: { color: '#c9d1d9', fontSize: 12 },
+            },
+            legend: {
+                data: CATEGORIES.map(c => c.name),
+                top: 4,
+                textStyle: { color: '#8b949e', fontSize: 10 },
+                itemWidth: 12,
+                itemHeight: 12,
+            },
+            series: [
+                {
+                    type: 'graph',
+                    layout: 'force',
+                    roam: true,
+                    draggable: true,
+                    categories: CATEGORIES,
+                    data: echartsNodes,
+                    links: echartsLinks,
+                    force: {
+                        repulsion: 200,
+                        edgeLength: [80, 160],
+                        gravity: 0.1,
+                    },
+                    edgeSymbol: ['none', 'arrow'],
+                    edgeSymbolSize: [0, 8],
+                    emphasis: {
+                        focus: 'adjacency',
+                        lineStyle: { width: 4 },
+                    },
+                    label: {
+                        show: true,
+                        position: 'bottom',
+                        fontSize: 10,
+                    },
+                    lineStyle: {
+                        opacity: 0.7,
+                    },
+                    animation: true,
+                    animationDuration: 500,
+                },
+            ],
+        };
+    }, [data]);
+    return (_jsx(ReactECharts, { option: option, style: { height, width: '100%', ...style }, opts: { renderer: 'canvas' }, notMerge: true }));
+};
+export default GraphFlowChart;

package/lib/context/TokenUsageChart.d.ts

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