@datalayer/agent-runtimes 1.0.4 → 1.0.6

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;

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;