@datalayer/agent-runtimes 1.0.4 → 1.0.5

package/lib/context/TokenUsageChart.js

@@ -3,9 +3,12 @@ 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, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
-import { fetchOtelMetricRows, toMetricValue } from '../hooks/useMonitoring';
+import { buildOtelWebSocketUrl } from '@datalayer/core/lib/otel';
+import { toMetricValue } from '../hooks/useMonitoring';
+import { subscribeOtelWs } from './otelWsPool';
+import { agentRuntimeStore, getMonitoringCacheKey, useAgentRuntimeStore, } from '../stores/agentRuntimeStore';
 const SERIES = [
     {
         label: 'System prompt',
@@ -20,7 +23,7 @@ const SERIES = [
         metric: 'agent_runtimes.prompt.turn.user_message_tokens',
     },
     {
-        label: 'AI messages',
+        label: 'Agent messages',
         metric: 'agent_runtimes.prompt.turn.ai_message_tokens',
     },
     {
@@ -28,65 +31,148 @@ const SERIES = [
         metric: 'agent_runtimes.prompt.turn.tools_usage_tokens',
     },
 ];
-function emptyDay() {
+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.tokenTurns.length > 0;
+        });
+        if (byAgent)
+            return byAgent[1];
+    }
+    if (serviceName) {
+        const byService = Object.entries(monitoringCache).find(([key, entry]) => {
+            return key.startsWith(`${serviceName}::`) && entry.tokenTurns.length > 0;
+        });
+        if (byService)
+            return byService[1];
+    }
+    return undefined;
+}
+function localTokenTurnToPoint(turn) {
+    return {
+        turnNumber: turn.turnNumber,
+        timestampMs: turn.timestampMs,
+        values: {
+            'System prompt': turn.systemPromptTokens,
+            'Tools description': turn.toolsDescriptionTokens,
+            'User messages': turn.userMessageTokens,
+            'Agent messages': turn.aiMessageTokens,
+            'Tools usage': turn.toolsUsageTokens,
+        },
+    };
+}
+function pointToLocalTokenTurn(point) {
+    return {
+        turnNumber: point.turnNumber,
+        timestampMs: point.timestampMs,
+        systemPromptTokens: point.values['System prompt'],
+        toolsDescriptionTokens: point.values['Tools description'],
+        userMessageTokens: point.values['User messages'],
+        aiMessageTokens: point.values['Agent messages'],
+        toolsUsageTokens: point.values['Tools usage'],
+        totalTokens: point.values['System prompt'] +
+            point.values['Tools description'] +
+            point.values['User messages'] +
+            point.values['Agent messages'] +
+            point.values['Tools usage'],
+    };
+}
+function emptyValues() {
     return SERIES.reduce((acc, s) => {
         acc[s.label] = 0;
         return acc;
     }, {});
 }
-const DEFAULT_DAYS = 7;
-/** Build a fallback list of day keys for the last N days. */
-function buildFallbackDays(days) {
-    const result = [];
-    const now = new Date();
-    for (let i = days - 1; i >= 0; i--) {
-        const d = new Date(now);
-        d.setDate(now.getDate() - i);
-        result.push(d.toISOString().slice(0, 10));
-    }
-    return result;
-}
-/** Build a contiguous list of day keys between min and max (inclusive),
- *  always padding at least one day on each side so single-day data is visible. */
-function fillDayRange(sortedKeys) {
-    if (sortedKeys.length === 0)
-        return [];
-    const start = new Date(sortedKeys[0] + 'T00:00:00');
-    const end = new Date(sortedKeys[sortedKeys.length - 1] + 'T00:00:00');
-    // Pad one day before and after so a single-point line/area is visible
-    start.setDate(start.getDate() - 1);
-    end.setDate(end.getDate() + 1);
-    const filled = [];
-    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
-        filled.push(d.toISOString().slice(0, 10));
-    }
-    return filled;
-}
-function toDayKey(row) {
-    // Prefer nanosecond integer timestamps (OTEL schema)
+const COMPLETIONS_METRIC = 'agent_runtimes.prompt.turn.completions';
+/** Convert nanosecond OTEL timestamp to milliseconds.
+ *  Also accepts ISO date strings (from normalised OtelMetric responses). */
+function nanoToMs(row) {
     const nanoTs = row.timestamp_unix_nano ?? row.observed_timestamp_unix_nano;
-    if (typeof nanoTs === 'number' && nanoTs > 0) {
-        return new Date(nanoTs / 1_000_000).toISOString().slice(0, 10);
-    }
+    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 new Date(parsed / 1_000_000).toISOString().slice(0, 10);
+        if (Number.isFinite(parsed) && parsed > 0)
+            return parsed / 1_000_000;
+    }
+    // Fallback: ISO timestamp string from normalised OtelMetric
+    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();
+}
+/** Return a stable grouping key from a metric row's timestamp. */
+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;
+    // Normalised OtelMetric: use the ISO timestamp
+    const iso = row.timestamp;
+    if (typeof iso === 'string' && iso.length > 0)
+        return iso;
+    return '';
+}
+/**
+ * Group metric rows by timestamp, sort chronologically,
+ * and extract cumulative values by watching the completions counter.
+ */
+function extractTurnsFromRows(rows, initialState) {
+    const byTimestamp = new Map();
+    for (const row of rows) {
+        const ts = rowTimestampKey(row);
+        if (!ts)
+            continue;
+        let group = byTimestamp.get(ts);
+        if (!group) {
+            group = [];
+            byTimestamp.set(ts, group);
         }
+        group.push(row);
     }
-    // Fallback to ISO string timestamps
-    const candidates = [
-        row.timestamp,
-        row.observed_timestamp,
-        row.time,
-        row.created_at,
-    ];
-    for (const candidate of candidates) {
-        if (typeof candidate === 'string' && candidate.length >= 10) {
-            return candidate.slice(0, 10);
+    const sortedGroups = [...byTimestamp.entries()].sort((a, b) => {
+        const na = Number(a[0]);
+        const nb = Number(b[0]);
+        // Both numeric (nanosecond timestamps)
+        if (Number.isFinite(na) && Number.isFinite(nb))
+            return na - nb;
+        // ISO strings: lexicographic comparison works for ISO 8601
+        return a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0;
+    });
+    const turns = [];
+    let prev = initialState;
+    for (const [, groupRows] of sortedGroups) {
+        // Sum ALL completions rows in this group — each OTEL attribute combination
+        // (e.g. baseline vs vercel-ai) produces a separate counter, and we need
+        // the total across all of them to detect new turns.
+        const completionsRows = groupRows.filter(r => r.metric_name === COMPLETIONS_METRIC);
+        if (completionsRows.length === 0)
+            continue;
+        const newCompletions = completionsRows.reduce((sum, r) => sum + toMetricValue(r), 0);
+        if (newCompletions <= prev.completions)
+            continue;
+        // Sum values per metric across all attribute sets so that baseline (0)
+        // and real-protocol rows (non-zero) are combined correctly.
+        const current = emptyValues();
+        for (const seriesItem of SERIES) {
+            const metricRows = groupRows.filter(r => r.metric_name === seriesItem.metric);
+            current[seriesItem.label] = metricRows.reduce((sum, r) => sum + toMetricValue(r), 0);
         }
+        turns.push({
+            turnNumber: newCompletions,
+            timestampMs: nanoToMs(completionsRows[0]),
+            values: current,
+        });
+        prev = { completions: newCompletions, values: current };
     }
-    return undefined;
+    return { turns, finalState: prev };
 }
 function extractServiceName(row) {
     const directCandidates = [row.service_name, row.service, row.serviceName];
@@ -104,185 +190,237 @@ function extractServiceName(row) {
     }
     return undefined;
 }
-export function TokenUsageChart({ serviceName, apiKey, runUrl, wsRunUrl, height = 160, days = DEFAULT_DAYS, }) {
-    const [dayData, setDayData] = useState({});
-    // Derive contiguous day keys and display labels from the data,
-    // falling back to the last N days when there is no data yet.
-    const { filledKeys, dayLabels } = useMemo(() => {
-        const rawKeys = Object.keys(dayData).sort();
-        const filled = rawKeys.length > 0 ? fillDayRange(rawKeys) : buildFallbackDays(days);
-        const labels = filled.map(k => new Date(k + 'T00:00:00').toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric',
-        }));
-        return { filledKeys: filled, dayLabels: labels };
-    }, [dayData, days]);
+/** Extract `agent.id` from the `attributes` field of a metric row. */
+function extractAgentId(row) {
+    const attrs = row.attributes;
+    if (typeof attrs === 'string') {
+        try {
+            const parsed = JSON.parse(attrs);
+            if (typeof parsed === 'object' && parsed !== null) {
+                const aid = parsed['agent.id'];
+                if (typeof aid === 'string')
+                    return aid;
+            }
+        }
+        catch {
+            // ignore
+        }
+    }
+    else if (typeof attrs === 'object' && attrs !== null) {
+        const aid = attrs['agent.id'];
+        if (typeof aid === 'string')
+            return aid;
+    }
+    return undefined;
+}
+export function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height = 160, }) {
+    const monitoringCache = useAgentRuntimeStore(s => s.monitoringCache);
+    const mergeTokenTurns = useAgentRuntimeStore(s => s.mergeTokenTurns);
+    const appendLocalTokenTurnFull = useAgentRuntimeStore(s => s.appendLocalTokenTurnFull);
+    const cachedEntry = useMemo(() => resolveMonitoringEntry(monitoringCache, serviceName, agentId), [agentId, monitoringCache, serviceName]);
+    const [turns, setTurns] = useState([]);
+    const initialTimestampMsRef = useRef(Date.now());
+    const cumulativeRef = useRef({
+        completions: 0,
+        values: emptyValues(),
+    });
+    // ── Reset state on source switch ──────────────────────────────
     useEffect(() => {
         if (!serviceName) {
-            setDayData({});
+            setTurns([]);
+            initialTimestampMsRef.current = Date.now();
+            cumulativeRef.current = { completions: 0, values: emptyValues() };
             return;
         }
-        let cancelled = false;
-        const load = async () => {
-            const result = {};
-            await Promise.all(SERIES.map(async (item) => {
-                try {
-                    const rows = await fetchOtelMetricRows({
-                        metric: item.metric,
-                        serviceName,
-                        runUrl,
-                        apiKey,
-                        limit: 500,
-                    });
-                    for (const row of rows) {
-                        const typedRow = row;
-                        const dayKey = toDayKey(typedRow);
-                        if (!dayKey) {
-                            continue;
-                        }
-                        if (!result[dayKey]) {
-                            result[dayKey] = emptyDay();
-                        }
-                        const value = toMetricValue(typedRow);
-                        result[dayKey][item.label] += value;
-                    }
-                }
-                catch {
-                    return;
-                }
-            }));
-            if (!cancelled) {
-                setDayData(result);
-            }
-        };
-        load();
-        return () => {
-            cancelled = true;
-        };
-    }, [apiKey, runUrl, serviceName]);
+        const hydratedTurns = (cachedEntry?.tokenTurns ?? []).map(localTokenTurnToPoint);
+        setTurns(hydratedTurns);
+        initialTimestampMsRef.current = Date.now();
+        const latestTurn = hydratedTurns[hydratedTurns.length - 1];
+        cumulativeRef.current = latestTurn
+            ? { completions: latestTurn.turnNumber, values: latestTurn.values }
+            : { completions: 0, values: emptyValues() };
+    }, [agentId, cachedEntry, serviceName]);
+    // Apply immediate post-turn token totals from monitoring snapshots.
     useEffect(() => {
-        if (!serviceName || !apiKey) {
+        if (!serviceName)
             return;
+        const rawValues = [
+            liveSystemPromptTokens,
+            liveToolsDescriptionTokens,
+            liveUserMessageTokens,
+            liveAgentMessageTokens,
+            liveToolsUsageTokens,
+        ];
+        if (!rawValues.some(v => typeof v === 'number' && Number.isFinite(v))) {
+            return;
+        }
+        const systemPromptTokens = Math.max(0, liveSystemPromptTokens ?? 0);
+        const toolsDescriptionTokens = Math.max(0, liveToolsDescriptionTokens ?? 0);
+        const userMessageTokens = Math.max(0, liveUserMessageTokens ?? 0);
+        const aiMessageTokens = Math.max(0, liveAgentMessageTokens ?? 0);
+        const toolsUsageTokens = Math.max(0, liveToolsUsageTokens ?? 0);
+        const totalTokens = systemPromptTokens +
+            toolsDescriptionTokens +
+            userMessageTokens +
+            aiMessageTokens +
+            toolsUsageTokens;
+        const timestampMs = typeof liveTimestampMs === 'number' && Number.isFinite(liveTimestampMs)
+            ? liveTimestampMs
+            : Date.now();
+        appendLocalTokenTurnFull({
+            serviceName,
+            agentId,
+            timestampMs,
+            systemPromptTokens,
+            toolsDescriptionTokens,
+            userMessageTokens,
+            aiMessageTokens,
+            toolsUsageTokens,
+            totalTokens,
+        });
+        const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+        if (mergedEntry) {
+            setTurns(mergedEntry.tokenTurns.map(localTokenTurnToPoint));
         }
+    }, [
+        agentId,
+        appendLocalTokenTurnFull,
+        liveAgentMessageTokens,
+        liveSystemPromptTokens,
+        liveTimestampMs,
+        liveToolsDescriptionTokens,
+        liveToolsUsageTokens,
+        liveUserMessageTokens,
+        serviceName,
+    ]);
+    // ── WebSocket subscription (shared connection pool) ─────────
+    useEffect(() => {
+        if (!serviceName || !apiKey)
+            return;
         const rawBaseUrl = wsRunUrl ||
             runUrl ||
             (typeof window !== 'undefined' ? window.location.origin : '');
-        if (!rawBaseUrl) {
+        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;
-        if (rawBaseUrl.startsWith('http://')) {
-            wsUrl = `ws://${rawBaseUrl.slice(7)}`;
+        try {
+            wsUrl = buildOtelWebSocketUrl({
+                baseUrl: baseWithProtocol,
+                token: apiKey,
+            });
         }
-        else if (rawBaseUrl.startsWith('https://')) {
-            wsUrl = `wss://${rawBaseUrl.slice(8)}`;
-        }
-        else if (rawBaseUrl.startsWith('ws://') ||
-            rawBaseUrl.startsWith('wss://')) {
-            wsUrl = rawBaseUrl;
-        }
-        else {
-            const proto = typeof window !== 'undefined' && window.location.protocol === 'https:'
-                ? 'wss:'
-                : 'ws:';
-            wsUrl = `${proto}//${typeof window !== 'undefined' ? window.location.host : ''}${rawBaseUrl}`;
+        catch {
+            return;
         }
-        wsUrl = `${wsUrl.replace(/\/$/, '')}/api/otel/v1/ws?token=${encodeURIComponent(apiKey)}`;
-        const ws = new WebSocket(wsUrl);
-        ws.onmessage = event => {
-            try {
-                const msg = JSON.parse(event.data);
-                if (msg.signal !== 'metrics') {
-                    return;
-                }
-                const rows = Array.isArray(msg.data) ? msg.data : [];
-                const matchingRows = rows.filter(row => extractServiceName(row) === serviceName);
-                if (matchingRows.length === 0) {
-                    return;
-                }
-                // Update chart directly from WS data (bypasses HTTP fetch which
-                // may fail due to CORS when the UI runs on a different origin).
-                setDayData(prev => {
-                    const updated = { ...prev };
-                    for (const row of matchingRows) {
-                        const metricName = row.metric_name;
-                        const seriesItem = SERIES.find(s => s.metric === metricName);
-                        if (!seriesItem) {
-                            continue;
-                        }
-                        const dayKey = toDayKey(row);
-                        if (!dayKey) {
-                            continue;
-                        }
-                        if (!updated[dayKey]) {
-                            updated[dayKey] = emptyDay();
-                        }
-                        else {
-                            // Clone to avoid mutating prev
-                            updated[dayKey] = { ...updated[dayKey] };
-                        }
-                        const value = toMetricValue(row);
-                        updated[dayKey][seriesItem.label] += value;
-                    }
-                    return updated;
-                });
+        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);
             }
-            catch {
+            if (matchingRows.length === 0)
                 return;
+            const { turns: newTurns, finalState } = extractTurnsFromRows(matchingRows, cumulativeRef.current);
+            if (newTurns.length > 0) {
+                cumulativeRef.current = finalState;
+                mergeTokenTurns({
+                    serviceName,
+                    agentId,
+                    turns: newTurns.map(pointToLocalTokenTurn),
+                });
+                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+                if (mergedEntry) {
+                    setTurns(mergedEntry.tokenTurns.map(localTokenTurnToPoint));
+                }
+                else {
+                    setTurns(prev => [...prev, ...newTurns]);
+                }
             }
-        };
-        return () => {
-            ws.close();
-        };
-    }, [apiKey, runUrl, serviceName, wsRunUrl]);
-    const option = useMemo(() => ({
-        tooltip: {
-            trigger: 'axis',
-            textStyle: { fontSize: 10 },
-            confine: true,
-        },
-        legend: {
-            data: SERIES.map(item => item.label),
-            top: 0,
-            textStyle: { fontSize: 9 },
-            itemWidth: 10,
-            itemHeight: 8,
-            itemGap: 6,
-        },
-        grid: {
-            left: 30,
-            right: 8,
-            top: 24,
-            bottom: 18,
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: dayLabels,
-            axisLabel: { fontSize: 9 },
-            axisLine: { lineStyle: { color: '#d0d7de' } },
-        },
-        yAxis: SERIES.map((_, index) => ({
-            type: 'value',
-            scale: true,
-            show: false,
-            splitLine: {
-                show: index === 0,
-                lineStyle: { color: '#f0f0f0' },
+        });
+        return unsubscribe;
+    }, [agentId, apiKey, mergeTokenTurns, runUrl, serviceName, wsRunUrl]);
+    // ── Chart options ─────────────────────────────────────────────
+    const option = useMemo(() => {
+        const legendLabels = Array.from(new Set(SERIES.map(item => item.label)));
+        const baselineTimestampMs = turns.length > 0
+            ? Math.max(0, Math.min(initialTimestampMsRef.current, turns[0].timestampMs - 1))
+            : initialTimestampMsRef.current;
+        return {
+            animation: false,
+            animationDuration: 0,
+            animationDurationUpdate: 0,
+            tooltip: {
+                trigger: 'axis',
+                textStyle: { fontSize: 10 },
+                confine: true,
+            },
+            legend: {
+                data: legendLabels,
+                top: 0,
+                textStyle: { fontSize: 9 },
+                itemWidth: 10,
+                itemHeight: 8,
+                itemGap: 6,
+            },
+            grid: {
+                left: 45,
+                right: 15,
+                top: 24,
+                bottom: 20,
             },
-        })),
-        series: SERIES.map((item, index) => ({
-            name: item.label,
-            type: 'line',
-            yAxisIndex: index,
-            data: filledKeys.map(k => dayData[k]?.[item.label] ?? 0),
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 4,
-            lineStyle: { width: 1.5 },
-        })),
-        color: ['#2da44e', '#0969da', '#8250df', '#bf8700', '#cf222e'],
-    }), [dayLabels, filledKeys, dayData]);
+            xAxis: {
+                type: 'time',
+                min: 'dataMin',
+                max: 'dataMax',
+                axisLabel: { fontSize: 9 },
+                axisLine: { lineStyle: { color: '#d0d7de' } },
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    fontSize: 9,
+                    formatter: (v) => {
+                        if (v >= 1000)
+                            return `${(v / 1000).toFixed(1)}K`;
+                        return String(v);
+                    },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: '#f0f0f0' },
+                },
+            },
+            series: SERIES.map(item => ({
+                name: item.label,
+                type: 'line',
+                animation: false,
+                smooth: false,
+                lineStyle: { width: 2 },
+                areaStyle: { opacity: 0.15 },
+                symbol: 'circle',
+                symbolSize: 4,
+                data: turns.length > 0
+                    ? [
+                        [baselineTimestampMs, 0],
+                        ...turns.map(t => [t.timestampMs, t.values[item.label]]),
+                    ]
+                    : [[initialTimestampMsRef.current, 0]],
+            })),
+            color: ['#2da44e', '#0969da', '#8250df', '#bf8700', '#cf222e'],
+        };
+    }, [turns]);
     return (_jsx(ReactECharts, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' }, notMerge: true, lazyUpdate: true }));
 }
 export default TokenUsageChart;

package/lib/context/TurnGraphChart.d.ts

@@ -0,0 +1,39 @@
+/**
+ * TurnGraphChart — ECharts force-directed graph built from OTEL traces.
+ *
+ * Each graph run emitted by ``run_graph_with_telemetry`` /
+ * ``run_beta_graph_with_telemetry`` produces one OTEL trace whose spans map
+ * directly to pydantic-graph nodes.  This component:
+ *
+ *  1. Fetches recent traces from the Datalayer OTEL service using
+ *     ``createOtelClient`` from ``@datalayer/core/lib/otel``  (TypeScript-side
+ *     fetch, Python-side emission).
+ *  2. Filters and groups spans by ``agent.id`` attribute and ``trace_id``.
+ *  3. Renders the latest run as an ECharts ``graph`` type (force-directed),
+ *     with:
+ *     - Node size ∝ span duration
+ *     - Node colour by type (start / step / end / error)
+ *     - Edges following the parent→child span hierarchy
+ *     - Rich hover tooltips (duration, type, error)
+ *  4. Shows a small "run history" selector so the user can browse past runs.
+ */
+import { type CSSProperties } from 'react';
+export interface TurnGraphChartProps {
+    /** OTEL service name — typically ``"agent-runtimes"``. */
+    serviceName: string;
+    /** Filter spans to this agent ID (matches ``agent.id`` span attribute). */
+    agentId?: string;
+    /** Base URL for the Datalayer OTEL service. */
+    runUrl?: string;
+    /** JWT / API key for OTEL auth. */
+    apiKey?: string;
+    /**
+     * Auto-refresh interval in ms (default 10 000).
+     * Set to 0 to disable polling.
+     */
+    autoRefreshMs?: number;
+    height?: number | string;
+    style?: CSSProperties;
+}
+export declare const TurnGraphChart: React.FC<TurnGraphChartProps>;
+export default TurnGraphChart;