@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/{components/chat/components → context}/ContextInspector.js

@@ -9,7 +9,8 @@ import { Text, Spinner, Button, Label, ProgressBar } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AiModelIcon, TerminalIcon, CommentDiscussionIcon, DatabaseIcon, KeyIcon, CodeIcon, CheckCircleIcon, XCircleIcon, ChevronDownIcon, ChevronRightIcon, InfoIcon, } from '@primer/octicons-react';
 import { useQuery } from '@tanstack/react-query';
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
+const RETRY_INTERVAL_SECONDS = 5;
 /**
  * Get the API base URL for fetching context data.
  * If apiBase prop is provided, use it.
@@ -143,7 +144,8 @@ function MessageDetailView({ message }) {
  * ContextInspector component displays full detailed context snapshot.
  */
 export function ContextInspector({ agentId, apiBase }) {
-    const { data: contextData, isLoading, error, } = useQuery({
+    const [retryCountdown, setRetryCountdown] = useState(RETRY_INTERVAL_SECONDS);
+    const { data: contextData, isLoading, error, refetch, } = useQuery({
         queryKey: ['full-context', agentId, apiBase],
         queryFn: async () => {
             const base = getApiBase(apiBase);
@@ -153,10 +155,22 @@ export function ContextInspector({ agentId, apiBase }) {
             }
             return response.json();
         },
-        refetchInterval: 30000, // Refresh every 30 seconds (less frequent than snapshot)
+        refetchInterval: RETRY_INTERVAL_SECONDS * 1000,
         refetchOnMount: 'always',
         staleTime: 0,
     });
+    const hasRetryError = Boolean(error) || Boolean(contextData?.error);
+    useEffect(() => {
+        if (!hasRetryError) {
+            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+            return;
+        }
+        setRetryCountdown(RETRY_INTERVAL_SECONDS);
+        const timer = window.setInterval(() => {
+            setRetryCountdown(prev => prev <= 1 ? RETRY_INTERVAL_SECONDS : prev - 1);
+        }, 1000);
+        return () => window.clearInterval(timer);
+    }, [hasRetryError]);
     // Separate messages by in_context status
     const { inContextMessages, outOfContextMessages } = useMemo(() => {
         if (!contextData?.messages) {
@@ -178,11 +192,19 @@ export function ContextInspector({ agentId, apiBase }) {
     if (error || !contextData) {
         return (_jsx(Box, { sx: {
                 p: 3,
-                bg: 'danger.subtle',
+                bg: 'attention.subtle',
                 borderRadius: 2,
                 border: '1px solid',
-                borderColor: 'danger.muted',
-            }, children: _jsx(Text, { sx: { color: 'danger.fg' }, children: "Failed to load context snapshot" }) }));
+                borderColor: 'attention.muted',
+            }, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 2,
+                }, children: [_jsxs(Text, { sx: { color: 'attention.fg' }, children: ["Service not available for context snapshot. Retrying in", ' ', retryCountdown, " second", retryCountdown === 1 ? '' : 's', "..."] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
+                            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+                            void refetch();
+                        }, children: "Retry now" })] }) }));
     }
     if (contextData.error) {
         return (_jsx(Box, { sx: {
@@ -191,7 +213,15 @@ export function ContextInspector({ agentId, apiBase }) {
                 borderRadius: 2,
                 border: '1px solid',
                 borderColor: 'attention.muted',
-            }, children: _jsx(Text, { sx: { color: 'attention.fg' }, children: contextData.error }) }));
+            }, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 2,
+                }, children: [_jsx(Text, { sx: { color: 'attention.fg' }, children: `${contextData.error} Retrying in ${retryCountdown} second${retryCountdown === 1 ? '' : 's'}...` }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
+                            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+                            void refetch();
+                        }, children: "Retry now" })] }) }));
     }
     const { tokenSummary, modelConfiguration } = contextData;
     return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow), " (", Math.round(tokenSummary.usagePercent), "%)"] }), _jsx(ProgressBar, { progress: Math.min(tokenSummary.usagePercent, 100), sx: { mt: 2, height: 8 }, bg: tokenSummary.usagePercent > 90
@@ -205,7 +235,7 @@ export function ContextInspector({ agentId, apiBase }) {
                             flexWrap: 'wrap',
                             fontSize: 0,
                             color: 'fg.muted',
-                        }, children: [_jsxs(Text, { children: ["System: ", formatTokens(tokenSummary.systemPrompts)] }), _jsxs(Text, { children: ["Tools: ", formatTokens(tokenSummary.tools)] }), tokenSummary.memory > 0 && (_jsxs(Text, { children: ["Memory: ", formatTokens(tokenSummary.memory)] })), _jsxs(Text, { children: ["History: ", formatTokens(tokenSummary.history)] }), _jsxs(Text, { children: ["Current: ", formatTokens(tokenSummary.current)] })] })] }), _jsx(CollapsibleSection, { title: "Model Configuration", icon: AiModelIcon, defaultExpanded: true, children: _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Model:" }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: modelConfiguration.modelName || 'Not specified' }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Context Window:" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatTokens(modelConfiguration.contextWindow), " tokens"] }), Object.keys(modelConfiguration.settings).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Settings:" }), _jsx(Box, { as: "pre", sx: {
+                        }, children: [_jsxs(Text, { children: ["System: ", formatTokens(tokenSummary.systemPrompts)] }), _jsxs(Text, { children: ["Tools: ", formatTokens(tokenSummary.tools)] }), tokenSummary.memory > 0 && (_jsxs(Text, { children: ["Memory: ", formatTokens(tokenSummary.memory)] })), _jsxs(Text, { children: ["History: ", formatTokens(tokenSummary.history)] }), _jsxs(Text, { children: ["Current: ", formatTokens(tokenSummary.current)] })] })] }), _jsx(CollapsibleSection, { title: "Model Configuration", icon: AiModelIcon, defaultExpanded: false, children: _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Model:" }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: modelConfiguration.modelName || 'Not specified' }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Context Window:" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatTokens(modelConfiguration.contextWindow), " tokens"] }), Object.keys(modelConfiguration.settings).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Settings:" }), _jsx(Box, { as: "pre", sx: {
                                         fontSize: 0,
                                         p: 2,
                                         bg: 'canvas.inset',

package/lib/{components/chat/components → context}/ContextPanel.js

@@ -12,7 +12,7 @@ import { Heading, Text, ProgressBar, Spinner, Button, SegmentedControl, } from '
 import { Box } from '@datalayer/primer-addons';
 import { useQuery } from '@tanstack/react-query';
 import ReactECharts from 'echarts-for-react';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 /**
  * Format token count for display
  */
@@ -59,6 +59,7 @@ function getCategoryIcon(name) {
             return ClockIcon;
     }
 }
+const RETRY_INTERVAL_SECONDS = 5;
 /**
  * Get the API base URL for fetching context data.
  * If apiBase prop is provided, use it.
@@ -82,7 +83,8 @@ function getApiBase(apiBase) {
 export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView = 'overview', chartHeight = '200px', }) {
     const [viewMode, setViewMode] = useState(defaultView);
     const [showDetails, setShowDetails] = useState(false);
-    const { data: snapshotData, isLoading, error, } = useQuery({
+    const [retryCountdown, setRetryCountdown] = useState(RETRY_INTERVAL_SECONDS);
+    const { data: snapshotData, isLoading, error, refetch, } = useQuery({
         queryKey: ['context-snapshot', agentId, apiBase],
         queryFn: async () => {
             const base = getApiBase(apiBase);
@@ -92,10 +94,21 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
             }
             return response.json();
         },
-        refetchInterval: 5000,
+        refetchInterval: RETRY_INTERVAL_SECONDS * 1000,
         refetchOnMount: 'always',
         staleTime: 0,
     });
+    useEffect(() => {
+        if (!error) {
+            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+            return;
+        }
+        setRetryCountdown(RETRY_INTERVAL_SECONDS);
+        const timer = window.setInterval(() => {
+            setRetryCountdown(prev => prev <= 1 ? RETRY_INTERVAL_SECONDS : prev - 1);
+        }, 1000);
+        return () => window.clearInterval(timer);
+    }, [error]);
     // Build historic usage chart data from perRequestUsage
     const historyChartOption = useMemo(() => {
         if (!snapshotData?.perRequestUsage ||
@@ -263,11 +276,19 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                         color: 'fg.muted',
                     }, children: "Context Usage" }), _jsx(Box, { sx: {
                         p: 3,
-                        bg: 'canvas.subtle',
+                        bg: 'attention.subtle',
                         borderRadius: 2,
                         border: '1px solid',
-                        borderColor: 'border.default',
-                    }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details. Make sure the agent is running." }) })] }));
+                        borderColor: 'attention.muted',
+                    }, children: _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: 2,
+                        }, children: [_jsxs(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: ["Service not available for context usage. Retrying in", ' ', retryCountdown, " second", retryCountdown === 1 ? '' : 's', "..."] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
+                                    setRetryCountdown(RETRY_INTERVAL_SECONDS);
+                                    void refetch();
+                                }, children: "Retry now" })] }) })] }));
     }
     const { totalTokens, contextWindow, sessionUsage, turnUsage, distribution } = snapshotData;
     const hasDistributionData = distribution?.children && distribution.children.length > 0;

package/lib/context/CostTracker.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Cost usage response from the agent-runtimes API.
+ */
+export interface CostUsageResponse {
+    agentId: string;
+    /** Cost for the current run in USD */
+    currentRunCostUsd: number;
+    /** Total cumulative cost in USD */
+    cumulativeCostUsd: number;
+    /** Per-run budget limit (from guardrails) */
+    perRunBudgetUsd: number | null;
+    /** Cumulative budget limit (from guardrails) */
+    cumulativeBudgetUsd: number | null;
+    /** Number of model requests made */
+    requestCount: number;
+    /** Total tokens used across all requests */
+    totalTokensUsed: number;
+    /** Breakdown by model */
+    modelBreakdown: Array<{
+        model: string;
+        inputTokens: number;
+        outputTokens: number;
+        costUsd: number;
+        requests: number;
+    }>;
+}
+export interface CostTrackerProps {
+    /** Agent ID for fetching cost data */
+    agentId: string;
+    /** Compact mode — show only the summary bar */
+    compact?: boolean;
+}
+/**
+ * Displays running cost and budget utilization for an agent.
+ */
+export declare function CostTracker({ agentId, compact }: CostTrackerProps): import("react/jsx-runtime").JSX.Element;
+export default CostTracker;

package/lib/context/CostTracker.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * CostTracker component — displays running cost for an agent.
+ *
+ * Shows per-run cost, cumulative cost, and budget utilization
+ * with a progress bar and optional alert when approaching limits.
+ *
+ * @module components/context/CostTracker
+ */
+import { Box, Heading, Text, ProgressBar, Spinner, 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)}`;
+    if (amount < 1)
+        return `$${amount.toFixed(3)}`;
+    return `$${amount.toFixed(2)}`;
+}
+function formatTokens(tokens) {
+    if (tokens >= 1_000_000)
+        return `${(tokens / 1_000_000).toFixed(1)}M`;
+    if (tokens >= 1_000)
+        return `${(tokens / 1_000).toFixed(1)}K`;
+    return tokens.toString();
+}
+/**
+ * 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" }) }));
+    }
+    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
+        : null;
+    const isOverBudget = cumulativePercent != null && cumulativePercent > 100;
+    const isNearBudget = cumulativePercent != null && cumulativePercent > 80;
+    // Compact: single row summary
+    if (compact) {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                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" }))] }));
+    }
+    // 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: {
+                    p: 3,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_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: "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
+                                    ? 'danger.emphasis'
+                                    : cumulativePercent > 80
+                                        ? 'attention.emphasis'
+                                        : 'accent.emphasis' }))] }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 3,
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                            pt: 2,
+                        }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Requests" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: costData.requestCount })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Tokens" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(costData.totalTokensUsed) })] })] }), costData.modelBreakdown.length > 0 && (_jsxs(Box, { sx: {
+                            mt: 2,
+                            pt: 2,
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "By model" }), costData.modelBreakdown.map(m => (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    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)))] }))] })] }));
+}
+export default CostTracker;

package/lib/context/TokenUsageChart.d.ts

@@ -0,0 +1,10 @@
+export interface TokenUsageChartProps {
+    serviceName?: string;
+    apiKey?: string;
+    runUrl?: string;
+    wsRunUrl?: string;
+    height?: number;
+    days?: number;
+}
+export declare function TokenUsageChart({ serviceName, apiKey, runUrl, wsRunUrl, height, days, }: TokenUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export default TokenUsageChart;

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;