@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/context/TurnGraphChart.js

@@ -0,0 +1,538 @@
+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.
+ */
+/**
+ * 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 { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import ReactECharts from 'echarts-for-react';
+import { createOtelClient, useOtelWebSocket } from '@datalayer/core/lib/otel';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
+// ── Colour palette ─────────────────────────────────────────────────────────
+//
+// Colours and symbols mirror the pydantic-graph beta node vocabulary
+// (https://pydantic.dev/docs/ai/graph/beta):
+//
+//   - step       → executes an async function
+//   - decision   → conditional branching
+//   - spread     → parallel processing of iterables
+//   - broadcast  → send the same data to multiple parallel paths
+//   - join       → aggregate results from parallel execution (reducer)
+//   - reducer    → alias for the reducer half of a join
+//   - start/end  → graph entry / exit markers
+const NODE_COLORS = {
+    root: '#58a6ff',
+    start: '#58a6ff',
+    step: '#3fb950',
+    end: '#f85149',
+    end_or_continue: '#d29922',
+    join: '#bc8cff',
+    reducer: '#a371f7',
+    decision: '#f0883e',
+    broadcast: '#2dd4bf',
+    spread: '#79c0ff',
+    error: '#da3633',
+    parallel: '#79c0ff',
+    default: '#8b949e',
+};
+/** Mapping of node type → ECharts symbol shape, for at-a-glance recognition. */
+const NODE_SYMBOLS = {
+    root: 'circle',
+    start: 'circle',
+    step: 'roundRect',
+    decision: 'diamond',
+    broadcast: 'triangle',
+    spread: 'arrow',
+    join: 'pin',
+    reducer: 'pin',
+    end: 'circle',
+    end_or_continue: 'diamond',
+    parallel: 'arrow',
+    error: 'circle',
+    default: 'roundRect',
+};
+/** Human-readable legend entries used by the UI. */
+const LEGEND_ENTRIES = [
+    { type: 'start', label: 'Start', description: 'Graph entry point' },
+    { type: 'step', label: 'Step', description: 'Async function execution' },
+    { type: 'decision', label: 'Decision', description: 'Conditional branching' },
+    {
+        type: 'broadcast',
+        label: 'Broadcast',
+        description: 'Send data to multiple parallel paths',
+    },
+    {
+        type: 'spread',
+        label: 'Spread',
+        description: 'Parallel processing of iterables',
+    },
+    {
+        type: 'join',
+        label: 'Join',
+        description: 'Aggregate parallel results (reducer)',
+    },
+    { type: 'end', label: 'End', description: 'Graph exit point' },
+];
+function spanColor(span) {
+    if (span.status_code === 'ERROR')
+        return NODE_COLORS.error;
+    const rawType = span.attributes?.['graph.node.type'] ?? '';
+    const nodeType = rawType.toLowerCase();
+    if (nodeType in NODE_COLORS) {
+        return (NODE_COLORS[nodeType] ?? NODE_COLORS.step);
+    }
+    if (span.span_name === 'agent.graph.run')
+        return NODE_COLORS.root;
+    return NODE_COLORS.step;
+}
+function formatDur(ms) {
+    if (ms < 1)
+        return '<1ms';
+    if (ms < 1000)
+        return `${ms.toFixed(1)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+}
+function nanoToIso(val) {
+    const n = Number(val);
+    if (!Number.isFinite(n) || n <= 0)
+        return '';
+    if (n > 1e15)
+        return new Date(n / 1e6).toISOString();
+    if (n > 1e12)
+        return new Date(n / 1e3).toISOString();
+    return new Date(n).toISOString();
+}
+function parseAttrs(raw) {
+    if (typeof raw === 'object' && raw !== null) {
+        return raw;
+    }
+    if (typeof raw === 'string' && raw.trim().length > 0) {
+        try {
+            const parsed = JSON.parse(raw);
+            if (typeof parsed === 'object' && parsed !== null) {
+                return parsed;
+            }
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return undefined;
+}
+function normalizeSpan(raw) {
+    const source = raw;
+    const durationMs = source.duration_ms != null
+        ? Number(source.duration_ms)
+        : source.duration_ns != null
+            ? Number(source.duration_ns) / 1e6
+            : 0;
+    return {
+        trace_id: String(source.trace_id ?? ''),
+        span_id: String(source.span_id ?? ''),
+        parent_span_id: source.parent_span_id != null && String(source.parent_span_id).length > 0
+            ? String(source.parent_span_id)
+            : undefined,
+        span_name: String(source.span_name ?? source.operation_name ?? source.name ?? ''),
+        service_name: String(source.service_name ?? ''),
+        kind: String(source.kind ?? source.span_kind ?? 'INTERNAL'),
+        start_time: typeof source.start_time === 'string' && source.start_time.length > 0
+            ? source.start_time
+            : nanoToIso(source.start_time_unix_nano),
+        end_time: typeof source.end_time === 'string' && source.end_time.length > 0
+            ? source.end_time
+            : nanoToIso(source.end_time_unix_nano),
+        duration_ms: Number.isFinite(durationMs) ? durationMs : 0,
+        status_code: source.status_code != null ? String(source.status_code) : undefined,
+        status_message: source.status_message != null ? String(source.status_message) : undefined,
+        attributes: parseAttrs(source.attributes),
+    };
+}
+function isGraphSpan(span) {
+    return (span.span_name === 'agent.graph.run' ||
+        span.span_name.startsWith('graph.node.'));
+}
+// ── ECharts option builder ─────────────────────────────────────────────────
+/**
+ * Compute a left-to-right layered DAG layout for the spans.
+ *
+ * Execution traces are strictly hierarchical (parent → child spans), so a
+ * fixed layered layout produces a far cleaner visual than force-directed
+ * relaxation — matching the "Layout: none + manual positions" pattern used
+ * by several ECharts graph examples for DAGs.
+ *
+ * Each span is placed at:
+ *   x = depth * columnWidth
+ *   y = indexWithinLayer * rowHeight - verticalCentre
+ *
+ * Root spans (no parent or parent missing from trace) anchor depth 0.
+ */
+function computeLayout(spans) {
+    const spanById = new Map(spans.map(s => [s.span_id, s]));
+    const childrenByParent = new Map();
+    const roots = [];
+    for (const s of spans) {
+        if (s.parent_span_id && spanById.has(s.parent_span_id)) {
+            const list = childrenByParent.get(s.parent_span_id) ?? [];
+            list.push(s.span_id);
+            childrenByParent.set(s.parent_span_id, list);
+        }
+        else {
+            roots.push(s.span_id);
+        }
+    }
+    // Preserve execution order within a layer by sorting children by start time.
+    for (const [parent, kids] of childrenByParent) {
+        kids.sort((a, b) => {
+            const sa = spanById.get(a)?.start_time ?? '';
+            const sb = spanById.get(b)?.start_time ?? '';
+            return sa.localeCompare(sb);
+        });
+        childrenByParent.set(parent, kids);
+    }
+    // BFS depth assignment from every root.
+    const depthById = new Map();
+    const queue = roots.map(r => [r, 0]);
+    while (queue.length > 0) {
+        const next = queue.shift();
+        if (!next)
+            break;
+        const [spanId, depth] = next;
+        if (depthById.has(spanId))
+            continue;
+        depthById.set(spanId, depth);
+        for (const child of childrenByParent.get(spanId) ?? []) {
+            queue.push([child, depth + 1]);
+        }
+    }
+    // Defensive: any span we never reached (orphan) → depth 0.
+    for (const s of spans) {
+        if (!depthById.has(s.span_id))
+            depthById.set(s.span_id, 0);
+    }
+    // Bucket spans by depth.
+    const byDepth = new Map();
+    for (const [spanId, depth] of depthById) {
+        const list = byDepth.get(depth) ?? [];
+        list.push(spanId);
+        byDepth.set(depth, list);
+    }
+    // Preserve start-time order within each depth layer.
+    for (const [depth, ids] of byDepth) {
+        ids.sort((a, b) => {
+            const sa = spanById.get(a)?.start_time ?? '';
+            const sb = spanById.get(b)?.start_time ?? '';
+            return sa.localeCompare(sb);
+        });
+        byDepth.set(depth, ids);
+    }
+    const columnWidth = 180;
+    const rowHeight = 90;
+    const positions = new Map();
+    for (const [depth, ids] of byDepth) {
+        const count = ids.length;
+        const totalHeight = (count - 1) * rowHeight;
+        const yStart = -totalHeight / 2;
+        ids.forEach((spanId, idx) => {
+            positions.set(spanId, {
+                x: depth * columnWidth,
+                y: yStart + idx * rowHeight,
+            });
+        });
+    }
+    return positions;
+}
+function buildOption(run) {
+    const { spans } = run;
+    const spanById = new Map(spans.map(s => [s.span_id, s]));
+    const maxDur = Math.max(...spans.map(s => s.duration_ms ?? 1), 1);
+    const positions = computeLayout(spans);
+    const nodes = spans.map(s => {
+        const isRoot = s.span_name === 'agent.graph.run';
+        const dur = s.duration_ms ?? 1;
+        const nodeId = s.attributes?.['graph.node.id'] ??
+            s.span_id.slice(0, 8);
+        const nodeType = s.attributes?.['graph.node.type'] ??
+            (isRoot ? 'root' : 'step');
+        const status = s.attributes?.['graph.node.status'] ??
+            'completed';
+        const label = isRoot ? '▶ Run' : nodeId.replace('__', '');
+        const hasError = s.status_code === 'ERROR' ||
+            status === 'error' ||
+            !!s.attributes?.['error.message'];
+        const symbol = NODE_SYMBOLS[nodeType.toLowerCase()] ??
+            (isRoot ? 'circle' : NODE_SYMBOLS.default);
+        const pos = positions.get(s.span_id) ?? { x: 0, y: 0 };
+        return {
+            id: s.span_id,
+            name: label,
+            x: pos.x,
+            y: pos.y,
+            symbol,
+            symbolSize: isRoot ? 44 : 22 + Math.round((dur / maxDur) * 26),
+            itemStyle: {
+                color: hasError ? NODE_COLORS.error : spanColor(s),
+                borderWidth: isRoot ? 3 : dur > maxDur * 0.5 ? 2 : 1,
+                borderColor: hasError ? NODE_COLORS.error : 'rgba(240,246,252,0.25)',
+                shadowBlur: isRoot ? 12 : 4,
+                shadowColor: 'rgba(0,0,0,0.35)',
+            },
+            label: {
+                show: true,
+                position: 'bottom',
+                distance: 8,
+                fontSize: isRoot ? 12 : 11,
+                color: '#c9d1d9',
+                formatter: label,
+                backgroundColor: 'rgba(13,17,23,0.7)',
+                padding: [2, 6],
+                borderRadius: 3,
+            },
+            value: dur,
+            // Custom tooltip via series-level formatter below.
+            _meta: {
+                nodeId,
+                nodeType,
+                status,
+                dur,
+                isRoot,
+                error: s.attributes?.['error.message'],
+            },
+        };
+    });
+    const links = [];
+    for (const s of spans) {
+        if (s.parent_span_id && spanById.has(s.parent_span_id)) {
+            const isError = s.status_code === 'ERROR';
+            links.push({
+                source: s.parent_span_id,
+                target: s.span_id,
+                lineStyle: {
+                    color: isError ? NODE_COLORS.error : '#6e7681',
+                    width: isError ? 2 : 1.4,
+                    curveness: 0.15,
+                    opacity: 0.9,
+                },
+            });
+        }
+    }
+    return {
+        backgroundColor: 'transparent',
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: '#161b22',
+            borderColor: '#30363d',
+            textStyle: { color: '#c9d1d9', fontSize: 12 },
+            formatter: (params) => {
+                const meta = params?.data?._meta;
+                if (!meta)
+                    return '';
+                const lines = [
+                    `<b>${meta.nodeId}</b>`,
+                    `Type: ${meta.nodeType}`,
+                    `Status: ${meta.status}`,
+                    `Duration: ${formatDur(Number(meta.dur))}`,
+                ];
+                if (meta.error) {
+                    lines.push(`<span style="color:${NODE_COLORS.error}">Error: ${meta.error}</span>`);
+                }
+                return lines.join('<br/>');
+            },
+        },
+        series: [
+            {
+                type: 'graph',
+                // Layered DAG: positions are precomputed per-node, so 'none' gives
+                // us a stable, non-jittery layout (mirrors the static DAG samples
+                // in https://echarts.apache.org/examples/en/index.html#chart-type-graph).
+                layout: 'none',
+                roam: true,
+                draggable: true,
+                data: nodes,
+                links,
+                edgeSymbol: ['none', 'arrow'],
+                edgeSymbolSize: [0, 9],
+                lineStyle: { opacity: 0.9, curveness: 0.15 },
+                emphasis: {
+                    focus: 'adjacency',
+                    lineStyle: { width: 3, opacity: 1 },
+                    label: { show: true },
+                },
+                labelLayout: { hideOverlap: true },
+                autoCurveness: true,
+                zoom: 1,
+                animation: true,
+                animationDuration: 400,
+                animationEasingUpdate: 'cubicOut',
+            },
+        ],
+    };
+}
+export const TurnGraphChart = ({ serviceName, agentId, runUrl, apiKey, autoRefreshMs = 10_000, height = 320, style, }) => {
+    const [runs, setRuns] = useState([]);
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const mountedRef = useRef(true);
+    const upsertRunsFromSpans = useCallback((incoming, mode = 'merge') => {
+        const normalized = incoming.map(normalizeSpan);
+        const spansByTrace = new Map();
+        for (const span of normalized) {
+            if (!isGraphSpan(span))
+                continue;
+            if (agentId &&
+                span.attributes?.['agent.id'] &&
+                span.attributes['agent.id'] !== agentId) {
+                continue;
+            }
+            const list = spansByTrace.get(span.trace_id) ?? [];
+            list.push(span);
+            spansByTrace.set(span.trace_id, list);
+        }
+        const incomingRuns = [];
+        for (const [traceId, spans] of spansByTrace.entries()) {
+            const root = spans.find(s => s.span_name === 'agent.graph.run') ?? spans[0];
+            if (!root)
+                continue;
+            incomingRuns.push({
+                traceId,
+                rootSpan: root,
+                spans,
+                startTime: new Date(root.start_time),
+                durationMs: root.duration_ms ?? 0,
+            });
+        }
+        setRuns(prev => {
+            const merged = new Map();
+            if (mode === 'merge') {
+                for (const run of prev)
+                    merged.set(run.traceId, run);
+            }
+            for (const run of incomingRuns)
+                merged.set(run.traceId, run);
+            const sorted = Array.from(merged.values()).sort((a, b) => b.startTime.getTime() - a.startTime.getTime());
+            return sorted.slice(0, 20);
+        });
+        setSelectedIdx(prev => Math.max(0, prev));
+    }, [agentId]);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const fetchData = useCallback(async () => {
+        if (!runUrl || !apiKey)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const client = createOtelClient({ baseUrl: runUrl, token: apiKey });
+            const result = await client.fetchTraces({ serviceName, limit: 200 });
+            if (mountedRef.current)
+                upsertRunsFromSpans(result.data, 'replace');
+        }
+        catch (err) {
+            if (mountedRef.current) {
+                setError(err instanceof Error ? err.message : String(err));
+            }
+        }
+        finally {
+            if (mountedRef.current)
+                setLoading(false);
+        }
+    }, [runUrl, apiKey, serviceName, upsertRunsFromSpans]);
+    const { connected: wsConnected, error: wsError } = useOtelWebSocket({
+        baseUrl: runUrl,
+        token: apiKey,
+        callbacks: {
+            onTraces: spans => {
+                upsertRunsFromSpans(spans, 'merge');
+            },
+        },
+    });
+    useEffect(() => {
+        void fetchData();
+        // WebSocket is the primary live feed; keep HTTP polling only as fallback.
+        if (autoRefreshMs > 0 && !wsConnected) {
+            const id = setInterval(() => void fetchData(), autoRefreshMs);
+            return () => clearInterval(id);
+        }
+    }, [fetchData, autoRefreshMs, wsConnected]);
+    const selectedRun = runs[selectedIdx];
+    const option = useMemo(() => (selectedRun ? buildOption(selectedRun) : null), [selectedRun]);
+    // Not configured — caller didn't pass auth.
+    if (!runUrl || !apiKey)
+        return null;
+    if (loading && runs.length === 0) {
+        return (_jsx(Box, { sx: { color: 'fg.muted', fontSize: 1, py: 2 }, children: "Loading OTEL traces\u2026" }));
+    }
+    if (error && runs.length === 0) {
+        return (_jsxs(Box, { sx: { color: 'danger.fg', fontSize: 0, py: 1 }, children: ["OTEL trace fetch failed: ", error] }));
+    }
+    if (!option) {
+        return (_jsx(Box, { sx: { color: 'fg.muted', fontSize: 1, py: 2 }, children: "No graph trace data yet \u2014 run a pydantic-graph agent to see execution turns here." }));
+    }
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [runs.length > 1 && (_jsx(Box, { sx: {
+                    display: 'flex',
+                    gap: 1,
+                    flexWrap: 'wrap',
+                    mb: 1,
+                }, children: runs.slice(0, 8).map((run, idx) => (_jsxs(Box, { onClick: () => setSelectedIdx(idx), sx: {
+                        px: 2,
+                        py: '2px',
+                        borderRadius: 2,
+                        fontSize: 0,
+                        cursor: 'pointer',
+                        border: '1px solid',
+                        borderColor: idx === selectedIdx ? 'accent.emphasis' : 'border.default',
+                        bg: idx === selectedIdx ? 'accent.subtle' : 'canvas.subtle',
+                        color: idx === selectedIdx ? 'accent.fg' : 'fg.muted',
+                        userSelect: 'none',
+                        whiteSpace: 'nowrap',
+                    }, children: ["#", runs.length - idx, " \u00A0", run.startTime.toLocaleTimeString([], {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            second: '2-digit',
+                        }), run.durationMs ? ` (${formatDur(run.durationMs)})` : ''] }, run.traceId))) })), _jsx(Box, { sx: {
+                    display: 'flex',
+                    gap: 2,
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    fontSize: 0,
+                    color: 'fg.muted',
+                    px: 1,
+                    py: '2px',
+                }, "aria-label": "Graph node legend", children: LEGEND_ENTRIES.map(entry => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, title: entry.description, children: [_jsx(Box, { "aria-hidden": true, sx: {
+                                width: 10,
+                                height: 10,
+                                borderRadius: entry.type === 'decision'
+                                    ? 0
+                                    : entry.type === 'broadcast' || entry.type === 'spread'
+                                        ? '2px'
+                                        : '50%',
+                                transform: entry.type === 'decision' ? 'rotate(45deg)' : 'none',
+                                bg: NODE_COLORS[entry.type] ?? NODE_COLORS.default,
+                            } }), _jsx(Text, { sx: { fontSize: 0 }, children: entry.label })] }, entry.type))) }), _jsx(ReactECharts, { option: option, style: { height, width: '100%', ...style }, opts: { renderer: 'svg' }, notMerge: false }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [selectedRun.spans.length - 1, " node(s)", selectedRun.durationMs
+                        ? ` · ${formatDur(selectedRun.durationMs)} total`
+                        : '', wsConnected ? ' · ws live' : ' · ws disconnected', wsError ? ` · ws error: ${wsError}` : '', loading ? ' · refreshing…' : '', error ? ` · fetch error: ${error}` : ''] })] }));
+};
+export default TurnGraphChart;

package/lib/context/otelWsPool.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared WebSocket connection pool for the OTEL service.
+ *
+ * Multiple chart components that subscribe to the same OTEL WS URL will
+ * share a single underlying WebSocket connection via reference counting.
+ */
+type OtelWsMessage = {
+    signal?: string;
+    data?: Array<Record<string, unknown>>;
+    count?: number;
+};
+type MessageListener = (msg: OtelWsMessage) => void;
+/**
+ * Subscribe to a shared OTEL WebSocket connection.
+ *
+ * Returns an unsubscribe function.  When the last subscriber unsubscribes,
+ * the underlying WebSocket is closed and removed from the pool.
+ */
+export declare function subscribeOtelWs(wsUrl: string, listener: MessageListener): () => void;
+export {};

package/lib/context/otelWsPool.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+const pool = new Map();
+function connectEntry(entry) {
+    if (entry.disposed || entry.listeners.size === 0)
+        return;
+    const ws = new WebSocket(entry.url);
+    ws.onmessage = (event) => {
+        try {
+            const msg = JSON.parse(event.data);
+            for (const listener of entry.listeners) {
+                listener(msg);
+            }
+        }
+        catch {
+            // Ignore unparseable messages.
+        }
+    };
+    ws.onerror = () => { };
+    ws.onclose = () => {
+        entry.ws = null;
+        if (entry.disposed || entry.listeners.size === 0)
+            return;
+        entry.reconnectTimer = setTimeout(() => connectEntry(entry), 2000);
+    };
+    entry.ws = ws;
+}
+/**
+ * Subscribe to a shared OTEL WebSocket connection.
+ *
+ * Returns an unsubscribe function.  When the last subscriber unsubscribes,
+ * the underlying WebSocket is closed and removed from the pool.
+ */
+export function subscribeOtelWs(wsUrl, listener) {
+    let entry = pool.get(wsUrl);
+    if (!entry) {
+        entry = {
+            ws: null,
+            listeners: new Set(),
+            reconnectTimer: null,
+            disposed: false,
+            url: wsUrl,
+        };
+        pool.set(wsUrl, entry);
+    }
+    entry.listeners.add(listener);
+    // If the WS isn't connected yet (first subscriber or after full teardown),
+    // start the connection.
+    if (!entry.ws && !entry.disposed) {
+        connectEntry(entry);
+    }
+    return () => {
+        if (!entry)
+            return;
+        entry.listeners.delete(listener);
+        if (entry.listeners.size === 0) {
+            entry.disposed = true;
+            if (entry.reconnectTimer) {
+                clearTimeout(entry.reconnectTimer);
+                entry.reconnectTimer = null;
+            }
+            entry.ws?.close();
+            entry.ws = null;
+            pool.delete(wsUrl);
+        }
+    };
+}

package/lib/examples/A2UiComponentGalleryExample.d.ts

@@ -1,20 +1,3 @@
-/**
- * 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;