@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/context/TokenUsageChart.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 SERIES = [
@@ -181,7 +182,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) {
@@ -190,34 +191,101 @@ function extractServiceName(row) {
     }
     return undefined;
 }
-/** Extract `agent.id` from the `attributes` field of a metric row. */
-function extractAgentId(row) {
-    const attrs = row.attributes;
+function parseAttributes(attrs) {
+    if (attrs && typeof attrs === 'object' && !Array.isArray(attrs)) {
+        return attrs;
+    }
     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;
+            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                return parsed;
             }
         }
         catch {
-            // ignore
+            // Ignore malformed attributes payloads.
         }
     }
-    else if (typeof attrs === 'object' && attrs !== null) {
-        const aid = attrs['agent.id'];
-        if (typeof aid === 'string')
-            return aid;
+    return {};
+}
+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 attrs = parseAttributes(row.attributes);
+    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 the `attributes` field of a metric row. */
+function extractAgentId(row) {
+    const parsed = parseAttributes(row.attributes);
+    const aid = parsed['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, }) {
+export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height = 160, }) {
+    const cacheServiceKey = String(serviceName || runtimeId || '').trim() || undefined;
     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 cachedEntry = useMemo(() => resolveMonitoringEntry(monitoringCache, cacheServiceKey, agentId), [agentId, cacheServiceKey, monitoringCache]);
     const [turns, setTurns] = useState([]);
     const initialTimestampMsRef = useRef(Date.now());
     const cumulativeRef = useRef({
@@ -226,7 +294,7 @@ export function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl
     });
     // ── Reset state on source switch ──────────────────────────────
     useEffect(() => {
-        if (!serviceName) {
+        if (!cacheServiceKey) {
             setTurns([]);
             initialTimestampMsRef.current = Date.now();
             cumulativeRef.current = { completions: 0, values: emptyValues() };
@@ -239,10 +307,82 @@ export function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl
         cumulativeRef.current = latestTurn
             ? { completions: latestTurn.turnNumber, values: latestTurn.values }
             : { completions: 0, values: emptyValues() };
-    }, [agentId, cachedEntry, serviceName]);
+    }, [agentId, cacheServiceKey, cachedEntry]);
+    // Bootstrap chart with historical OTEL metrics so charts are populated even
+    // before the first websocket update arrives.
+    useEffect(() => {
+        if (!cacheServiceKey || !apiKey || !datalayerUrl) {
+            return;
+        }
+        let cancelled = false;
+        const loadInitialMetrics = async () => {
+            try {
+                const metricNames = [COMPLETIONS_METRIC, ...SERIES.map(s => s.metric)];
+                const results = await Promise.all(metricNames.map(metric => fetchOtelMetricRows({
+                    metric,
+                    serviceName,
+                    datalayerUrl,
+                    apiKey,
+                    limit: 1000,
+                })));
+                if (cancelled) {
+                    return;
+                }
+                let rows = results.flat().filter(row => {
+                    const castedRow = row;
+                    if (!rowMatchesSource(castedRow, serviceName, runtimeId)) {
+                        return false;
+                    }
+                    return !agentId || extractAgentId(castedRow) === agentId;
+                });
+                if (rows.length === 0 && runtimeId && !serviceName) {
+                    rows = results.flat().filter(row => {
+                        const castedRow = row;
+                        return (rowMatchesSource(castedRow, undefined, runtimeId) &&
+                            (!agentId || extractAgentId(castedRow) === agentId));
+                    });
+                }
+                const { turns: initialTurns, finalState } = extractTurnsFromRows(rows, {
+                    completions: 0,
+                    values: emptyValues(),
+                });
+                if (cancelled || initialTurns.length === 0) {
+                    return;
+                }
+                cumulativeRef.current = finalState;
+                mergeTokenTurns({
+                    serviceName: cacheServiceKey,
+                    agentId,
+                    turns: initialTurns.map(pointToLocalTokenTurn),
+                });
+                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, cacheServiceKey, agentId);
+                if (mergedEntry) {
+                    setTurns(mergedEntry.tokenTurns.map(localTokenTurnToPoint));
+                }
+                else {
+                    setTurns(initialTurns);
+                }
+            }
+            catch {
+                // Fail open: websocket updates can still populate the chart.
+            }
+        };
+        void loadInitialMetrics();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        agentId,
+        apiKey,
+        cacheServiceKey,
+        datalayerUrl,
+        mergeTokenTurns,
+        runtimeId,
+        serviceName,
+    ]);
     // Apply immediate post-turn token totals from monitoring snapshots.
     useEffect(() => {
-        if (!serviceName)
+        if (!cacheServiceKey)
             return;
         const rawValues = [
             liveSystemPromptTokens,
@@ -268,7 +408,7 @@ export function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl
             ? liveTimestampMs
             : Date.now();
         appendLocalTokenTurnFull({
-            serviceName,
+            serviceName: cacheServiceKey,
             agentId,
             timestampMs,
             systemPromptTokens,
@@ -278,12 +418,13 @@ export function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl
             toolsUsageTokens,
             totalTokens,
         });
-        const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+        const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, cacheServiceKey, agentId);
         if (mergedEntry) {
             setTurns(mergedEntry.tokenTurns.map(localTokenTurnToPoint));
         }
     }, [
         agentId,
+        cacheServiceKey,
         appendLocalTokenTurnFull,
         liveAgentMessageTokens,
         liveSystemPromptTokens,
@@ -295,10 +436,10 @@ export function TokenUsageChart({ 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;
@@ -311,9 +452,9 @@ export function TokenUsageChart({ 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,
             });
@@ -321,11 +462,11 @@ export function TokenUsageChart({ 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);
+            let matchingRows = rows.filter(row => rowMatchesSource(row, serviceName, runtimeId));
             // Filter by agent.id when specified.
             if (agentId) {
                 matchingRows = matchingRows.filter(row => extractAgentId(row) === agentId);
@@ -336,11 +477,11 @@ export function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl
             if (newTurns.length > 0) {
                 cumulativeRef.current = finalState;
                 mergeTokenTurns({
-                    serviceName,
+                    serviceName: cacheServiceKey,
                     agentId,
                     turns: newTurns.map(pointToLocalTokenTurn),
                 });
-                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, serviceName, agentId);
+                const mergedEntry = resolveMonitoringEntry(agentRuntimeStore.getState().monitoringCache, cacheServiceKey, agentId);
                 if (mergedEntry) {
                     setTurns(mergedEntry.tokenTurns.map(localTokenTurnToPoint));
                 }
@@ -350,7 +491,16 @@ export function TokenUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl
             }
         });
         return unsubscribe;
-    }, [agentId, apiKey, mergeTokenTurns, runUrl, serviceName, wsRunUrl]);
+    }, [
+        agentId,
+        apiKey,
+        cacheServiceKey,
+        mergeTokenTurns,
+        datalayerUrl,
+        runtimeId,
+        serviceName,
+        wsUrl,
+    ]);
     // ── Chart options ─────────────────────────────────────────────
     const option = useMemo(() => {
         const legendLabels = Array.from(new Set(SERIES.map(item => item.label)));

package/lib/context/TurnGraphChart.d.ts

@@ -24,7 +24,7 @@ export interface TurnGraphChartProps {
     /** Filter spans to this agent ID (matches ``agent.id`` span attribute). */
     agentId?: string;
     /** Base URL for the Datalayer OTEL service. */
-    runUrl?: string;
+    datalayerUrl?: string;
     /** JWT / API key for OTEL auth. */
     apiKey?: string;
     /**

package/lib/context/TurnGraphChart.js

@@ -386,7 +386,7 @@ function buildOption(run) {
         ],
     };
 }
-export const TurnGraphChart = ({ serviceName, agentId, runUrl, apiKey, autoRefreshMs = 10_000, height = 320, style, }) => {
+export const TurnGraphChart = ({ serviceName, agentId, datalayerUrl, apiKey, autoRefreshMs = 10_000, height = 320, style, }) => {
     const [runs, setRuns] = useState([]);
     const [selectedIdx, setSelectedIdx] = useState(0);
     const [loading, setLoading] = useState(false);
@@ -440,12 +440,12 @@ export const TurnGraphChart = ({ serviceName, agentId, runUrl, apiKey, autoRefre
         };
     }, []);
     const fetchData = useCallback(async () => {
-        if (!runUrl || !apiKey)
+        if (!datalayerUrl || !apiKey)
             return;
         setLoading(true);
         setError(null);
         try {
-            const client = createOtelClient({ baseUrl: runUrl, token: apiKey });
+            const client = createOtelClient({ baseUrl: datalayerUrl, token: apiKey });
             const result = await client.fetchTraces({ serviceName, limit: 200 });
             if (mountedRef.current)
                 upsertRunsFromSpans(result.data, 'replace');
@@ -459,9 +459,9 @@ export const TurnGraphChart = ({ serviceName, agentId, runUrl, apiKey, autoRefre
             if (mountedRef.current)
                 setLoading(false);
         }
-    }, [runUrl, apiKey, serviceName, upsertRunsFromSpans]);
+    }, [datalayerUrl, apiKey, serviceName, upsertRunsFromSpans]);
     const { connected: wsConnected, error: wsError } = useOtelWebSocket({
-        baseUrl: runUrl,
+        baseUrl: datalayerUrl,
         token: apiKey,
         callbacks: {
             onTraces: spans => {
@@ -480,7 +480,7 @@ export const TurnGraphChart = ({ serviceName, agentId, runUrl, apiKey, autoRefre
     const selectedRun = runs[selectedIdx];
     const option = useMemo(() => (selectedRun ? buildOption(selectedRun) : null), [selectedRun]);
     // Not configured — caller didn't pass auth.
-    if (!runUrl || !apiKey)
+    if (!datalayerUrl || !apiKey)
         return null;
     if (loading && runs.length === 0) {
         return (_jsx(Box, { sx: { color: 'fg.muted', fontSize: 1, py: 2 }, children: "Loading OTEL traces\u2026" }));

package/lib/examples/A2UiAgentExample.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A2UiAgentExample
+ *
+ * A comprehensive, real-world A2UI generative-UI example. The agent
+ * (agentspec: `example-a2ui-agent`) exposes a single backend tool,
+ * `render_a2ui_surface`, that turns a natural-language request into a
+ * validated A2UI v0.9 surface (createSurface + updateComponents +
+ * updateDataModel). The frontend renders the returned messages live:
+ *
+ * - INLINE in the chat as a compact confirmation card.
+ * - In the main canvas as a fully interactive A2UI surface (forms, cards,
+ *   choice pickers, sliders, date pickers, ...).
+ *
+ * Submitting the rendered surface emits an A2UI client action which we display
+ * in a "Submitted values" panel, closing the generate → interact loop.
+ *
+ * This mirrors the working tool-based generative UI pattern (see
+ * AgUiHaikuGenUiExample) but renders A2UI surfaces instead of bespoke cards.
+ */
+import React from 'react';
+declare const A2UiAgentExample: React.FC;
+export default A2UiAgentExample;