@datalayer/agent-runtimes 1.0.9 → 1.0.17

package/lib/context/MessageHistory.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025-2026 Datalayer, Inc.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * MessageHistory component - Renders the agent conversation message history,
+ * splitting messages into "in context" and "out of context" groups. Shared by
+ * the ContextInspector (Configuration tab) and the Monitoring tab so both
+ * surfaces display identical message details.
+ */
+import { Text, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiModelIcon, TerminalIcon, CommentDiscussionIcon, CheckCircleIcon, XCircleIcon, InfoIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
+import { useMemo, useState } from 'react';
+import { TextPart } from '../chat/parts/TextPart';
+/**
+ * Format token count for display.
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+}
+/**
+ * Single message detail view.
+ */
+export function MessageDetailView({ message }) {
+    const roleColors = {
+        user: 'accent.fg',
+        assistant: 'success.fg',
+        system: 'attention.fg',
+        tool: 'done.fg',
+    };
+    const roleIcons = {
+        user: CommentDiscussionIcon,
+        assistant: AiModelIcon,
+        system: InfoIcon,
+        tool: TerminalIcon,
+    };
+    const RoleIcon = roleIcons[message.role] || CommentDiscussionIcon;
+    const text = String(message.content || '');
+    const chatRole = message.role === 'user' ? 'user' : 'assistant';
+    const uiMessage = {
+        id: `history-${message.role}-${message.timestamp || 'now'}-${message.toolCallId || 'no-tool'}`,
+        role: chatRole,
+        parts: [{ type: 'text', text }],
+    };
+    return (_jsxs(Box, { sx: {
+            p: 2,
+            mb: 1,
+            bg: message.inContext ? 'canvas.default' : 'canvas.inset',
+            border: '1px solid',
+            borderColor: message.inContext ? 'border.default' : 'border.muted',
+            borderRadius: 2,
+            opacity: message.inContext ? 1 : 0.7,
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(RoleIcon, { size: 14 }), _jsx(Text, { sx: {
+                            fontWeight: 'semibold',
+                            fontSize: 0,
+                            color: roleColors[message.role] || 'fg.default',
+                            textTransform: 'capitalize',
+                        }, children: message.role }), message.toolName && (_jsx(Label, { size: "small", variant: "secondary", children: message.toolName })), message.isToolCall && (_jsx(Label, { size: "small", variant: "accent", children: "call" })), message.isToolResult && (_jsx(Label, { size: "small", variant: "success", children: "result" })), message.inContext ? (_jsx(CheckCircleIcon, { size: 12, fill: "var(--fgColor-success)" })) : (_jsx(XCircleIcon, { size: 12, fill: "var(--fgColor-muted)" })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: [formatTokens(message.estimatedTokens), " tokens"] })] }), _jsx(Box, { sx: {
+                    borderWidth: '2px',
+                    borderStyle: 'solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    overflow: 'hidden',
+                }, children: _jsx(TextPart, { text: text, message: uiMessage, isLastPart: false, onRegenerate: () => {
+                        return;
+                    } }) })] }));
+}
+/**
+ * Renders the conversation message history split into out-of-context and
+ * in-context groups.
+ */
+export function MessageHistory({ messages }) {
+    const [expanded, setExpanded] = useState(false);
+    const { inContextMessages, outOfContextMessages } = useMemo(() => {
+        if (!messages) {
+            return { inContextMessages: [], outOfContextMessages: [] };
+        }
+        return {
+            inContextMessages: messages.filter(m => m.inContext),
+            outOfContextMessages: messages.filter(m => !m.inContext),
+        };
+    }, [messages]);
+    const messageHistoryTokens = useMemo(() => {
+        if (!messages) {
+            return 0;
+        }
+        return messages.reduce((sum, message) => sum + (message.estimatedTokens || 0), 0);
+    }, [messages]);
+    return (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Box, { as: "button", onClick: () => setExpanded(!expanded), sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    width: '100%',
+                    p: 2,
+                    bg: 'canvas.subtle',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    cursor: 'pointer',
+                    '&:hover': {
+                        bg: 'canvas.inset',
+                    },
+                }, children: [expanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })), _jsx(CommentDiscussionIcon, { size: 16 }), _jsx(Text, { sx: { fontWeight: 'semibold', flex: 1, textAlign: 'left' }, children: "Message History" }), _jsx(Label, { variant: "secondary", size: "small", children: messages?.length || 0 }), messageHistoryTokens > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [formatTokens(messageHistoryTokens), " tokens"] }))] }), expanded && (_jsx(Box, { sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderTop: 'none',
+                    borderRadius: '0 0 6px 6px',
+                    p: 2,
+                }, children: !messages || messages.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No messages yet" })) : (_jsxs(_Fragment, { children: [outOfContextMessages.length > 0 && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Text, { sx: {
+                                        fontWeight: 'semibold',
+                                        fontSize: 1,
+                                        color: 'fg.muted',
+                                        mb: 2,
+                                        display: 'block',
+                                    }, children: ["Out of Context (", outOfContextMessages.length, ")"] }), outOfContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `out-${idx}`)))] })), inContextMessages.length > 0 && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        fontWeight: 'semibold',
+                                        fontSize: 1,
+                                        color: 'success.fg',
+                                        mb: 2,
+                                        display: 'block',
+                                    }, children: ["In Context (", inContextMessages.length, ")"] }), inContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `in-${idx}`)))] }))] })) }))] }));
+}
+export default MessageHistory;

package/lib/context/TokenUsageChart.d.ts

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

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;