@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/context/TokenUsageChart.js

@@ -0,0 +1,288 @@
+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 ReactECharts from 'echarts-for-react';
+import { fetchOtelMetricRows, toMetricValue } from '../hooks/useMonitoring';
+const SERIES = [
+    {
+        label: 'System prompt',
+        metric: 'agent_runtimes.prompt.turn.system_prompt_tokens',
+    },
+    {
+        label: 'Tools description',
+        metric: 'agent_runtimes.prompt.turn.tools_description_tokens',
+    },
+    {
+        label: 'User messages',
+        metric: 'agent_runtimes.prompt.turn.user_message_tokens',
+    },
+    {
+        label: 'AI messages',
+        metric: 'agent_runtimes.prompt.turn.ai_message_tokens',
+    },
+    {
+        label: 'Tools usage',
+        metric: 'agent_runtimes.prompt.turn.tools_usage_tokens',
+    },
+];
+function emptyDay() {
+    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 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 === '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);
+        }
+    }
+    // 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);
+        }
+    }
+    return undefined;
+}
+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;
+}
+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]);
+    useEffect(() => {
+        if (!serviceName) {
+            setDayData({});
+            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]);
+    useEffect(() => {
+        if (!serviceName || !apiKey) {
+            return;
+        }
+        const rawBaseUrl = wsRunUrl ||
+            runUrl ||
+            (typeof window !== 'undefined' ? window.location.origin : '');
+        if (!rawBaseUrl) {
+            return;
+        }
+        let wsUrl;
+        if (rawBaseUrl.startsWith('http://')) {
+            wsUrl = `ws://${rawBaseUrl.slice(7)}`;
+        }
+        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}`;
+        }
+        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;
+                });
+            }
+            catch {
+                return;
+            }
+        };
+        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' },
+            },
+        })),
+        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]);
+    return (_jsx(ReactECharts, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' }, notMerge: true, lazyUpdate: true }));
+}
+export default TokenUsageChart;

package/lib/examples/A2UiComponentGalleryExample.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A2UiComponentGalleryExample
+ *
+ * Showcases the full catalog of A2UI components rendered via @a2ui/react.
+ * Uses static A2UI JSON messages (no backend required) to demonstrate:
+ * - Text, Button, CheckBox, Slider, TextField, DateTimeInput
+ * - MultipleChoice (default, chips, filterable)
+ * - Row, Column, Card, List, Tabs, Divider, Modal
+ * - Icon, Image, Video, AudioPlayer
+ *
+ * All messages follow the A2UI three-step pattern:
+ *   beginRendering → surfaceUpdate → dataModelUpdate
+ */
+import React from 'react';
+/**
+ * A2UiComponentGalleryExample — Kitchen sink of all A2UI components.
+ * No backend required — uses static A2UI JSON messages rendered client-side.
+ */
+declare const A2UiComponentGalleryExample: React.FC;
+export default A2UiComponentGalleryExample;