@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/context/TurnGraphChart.js

@@ -483,55 +483,23 @@ export const TurnGraphChart = ({ serviceName, agentId, otelUrl, apiKey, autoRefr
     if (!otelUrl || !apiKey)
         return null;
     if (loading && runs.length === 0) {
-        return (_jsx(Box, { sx: { color: 'fg.muted', fontSize: 1, py: 2 }, children: "Loading OTEL traces\u2026" }));
+        return (_jsx(Box, { 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] }));
+        return (_jsxs(Box, { 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 (_jsx(Box, { 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([], {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [runs.length > 1 && (_jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", mb: 1, children: runs.slice(0, 8).map((run, idx) => (_jsxs(Box, { onClick: () => setSelectedIdx(idx), 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
+                        }), run.durationMs ? ` (${formatDur(run.durationMs)})` : ''] }, run.traceId))) })), _jsx(Box, { 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, { display: "flex", alignItems: "center", gap: 1, title: entry.description, children: [_jsx(Box, { "aria-hidden": true, 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}` : ''] })] }));
 };

package/lib/examples/A2UiAgentExample.js

@@ -142,119 +142,17 @@ const A2UiAgentExample = () => {
         setSurfaceTitle(null);
         setValidationError(null);
     }, [resetSurfaces]);
-    return (_jsx(ThemedProvider, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
-                    minHeight: '100vh',
-                    height: ['auto', 'auto', '100dvh'],
-                    boxSizing: 'border-box',
-                    overflow: ['visible', 'visible', 'hidden'],
-                    display: 'grid',
-                    gridTemplateColumns: [
-                        '1fr',
-                        '1fr',
-                        'minmax(360px, 1fr) minmax(360px, 460px)',
-                    ],
-                    gap: 3,
-                    p: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 3,
-                            minHeight: 0,
-                            overflowY: ['visible', 'visible', 'auto'],
-                        }, children: [_jsxs(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    overflow: 'hidden',
-                                }, children: [_jsxs(Box, { sx: {
-                                            px: 3,
-                                            py: 2,
-                                            borderBottom: '1px solid',
-                                            borderColor: 'border.default',
-                                            bg: 'canvas.default',
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            alignItems: 'center',
-                                        }, children: [_jsxs(Box, { children: [_jsx(Text, { as: "h1", sx: { fontSize: 2, fontWeight: 'bold' }, children: "A2UI Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Ask the agent to build a UI \u2014 it renders a live A2UI surface." })] }), surfaces.length > 0 && (_jsx(Button, { size: "small", variant: "invisible", onClick: clearCanvas, children: "Clear" }))] }), _jsx(Box, { style: themeStyle, sx: {
+    return (_jsx(ThemedProvider, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { minHeight: "100vh", height: ['auto', 'auto', '100dvh'], boxSizing: "border-box", overflow: ['visible', 'visible', 'hidden'], display: "grid", gridTemplateColumns: [
+                    '1fr',
+                    '1fr',
+                    'minmax(360px, 1fr) minmax(360px, 460px)',
+                ], gap: 3, p: 3, bg: "canvas.default", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, minHeight: 0, overflowY: ['visible', 'visible', 'auto'], children: [_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.default", display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { children: [_jsx(Text, { as: "h1", sx: { fontSize: 2, fontWeight: 'bold' }, children: "A2UI Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Ask the agent to build a UI \u2014 it renders a live A2UI surface." })] }), surfaces.length > 0 && (_jsx(Button, { size: "small", variant: "invisible", onClick: clearCanvas, children: "Clear" }))] }), _jsx(Box, { style: themeStyle, sx: {
                                             ...A2UI_RENDER_SCOPE_SX,
                                             p: 3,
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 3,
-                                        }, children: surfaces.length === 0 ? (_jsxs(Box, { sx: {
-                                                textAlign: 'center',
-                                                py: 6,
-                                                px: 3,
-                                                color: 'fg.muted',
-                                                border: '2px dashed',
-                                                borderColor: 'border.muted',
-                                                borderRadius: 2,
-                                            }, children: [_jsx(Text, { sx: { fontSize: 4, display: 'block', mb: 2 }, children: "\uD83C\uDF9B\uFE0F" }), _jsxs(Text, { sx: { fontSize: 1, display: 'block' }, children: ["No surface yet. Try a suggestion in the chat, e.g.", ' ', _jsxs(Text, { as: "span", sx: { fontStyle: 'italic' }, children: ["\"", SUGGESTIONS[0].message, "\""] })] })] })) : (_jsxs(_Fragment, { children: [surfaceTitle && (_jsx(Text, { sx: { fontWeight: 'bold', color: 'fg.default' }, children: surfaceTitle })), validationError && (_jsx(Box, { role: "alert", sx: {
-                                                        px: 3,
-                                                        py: 2,
-                                                        borderRadius: 2,
-                                                        bg: 'danger.subtle',
-                                                        border: '1px solid',
-                                                        borderColor: 'danger.muted',
-                                                        color: 'danger.fg',
-                                                        fontSize: 1,
-                                                    }, children: validationError.message })), surfaces.map(surface => (_jsx(Box, { sx: {
-                                                        border: '1px solid',
-                                                        borderColor: 'border.default',
-                                                        borderRadius: 2,
-                                                        p: 3,
-                                                        bg: 'canvas.default',
-                                                    }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] })) })] }), submissions.length > 0 && (_jsxs(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    overflow: 'hidden',
-                                }, children: [_jsxs(Box, { sx: {
-                                            px: 3,
-                                            py: 2,
-                                            borderBottom: '1px solid',
-                                            borderColor: 'border.default',
-                                            bg: 'success.subtle',
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            alignItems: 'center',
-                                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Submitted values" }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setSubmissions([]), children: "Clear" })] }), _jsx(Box, { sx: {
-                                            p: 3,
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 2,
-                                        }, children: submissions.map(record => (_jsx(Box, { as: "pre", sx: {
-                                                m: 0,
-                                                p: 2,
-                                                borderRadius: 2,
-                                                bg: 'canvas.default',
-                                                border: '1px solid',
-                                                borderColor: 'border.default',
-                                                fontSize: 0,
-                                                overflow: 'auto',
-                                                whiteSpace: 'pre-wrap',
-                                            }, children: JSON.stringify(record.values, null, 2) }, record.id))) })] }))] }), _jsx(Box, { sx: {
-                            position: ['static', 'static', 'sticky'],
-                            top: [0, 0, 3],
-                            alignSelf: ['auto', 'auto', 'start'],
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: ['auto', 'auto', 'calc(100vh - 48px)'],
-                            minHeight: [420, 520, 0],
-                            overflow: 'hidden',
-                            bg: 'canvas.default',
-                        }, children: isCreatingChat ? (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                height: '100%',
-                                gap: 3,
-                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { sx: { p: 3 }, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(LoopEmbed, { serverUrl: baseUrl, target: "local", 
+                                        }, children: surfaces.length === 0 ? (_jsxs(Box, { textAlign: "center", py: 6, px: 3, color: "fg.muted", border: "2px dashed", borderColor: "border.muted", borderRadius: 2, children: [_jsx(Text, { sx: { fontSize: 4, display: 'block', mb: 2 }, children: "\uD83C\uDF9B\uFE0F" }), _jsxs(Text, { sx: { fontSize: 1, display: 'block' }, children: ["No surface yet. Try a suggestion in the chat, e.g.", ' ', _jsxs(Text, { as: "span", sx: { fontStyle: 'italic' }, children: ["\"", SUGGESTIONS[0].message, "\""] })] })] })) : (_jsxs(_Fragment, { children: [surfaceTitle && (_jsx(Text, { sx: { fontWeight: 'bold', color: 'fg.default' }, children: surfaceTitle })), validationError && (_jsx(Box, { role: "alert", px: 3, py: 2, borderRadius: 2, bg: "danger.subtle", border: "1px solid", borderColor: "danger.muted", color: "danger.fg", fontSize: 1, children: validationError.message })), surfaces.map(surface => (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, bg: "canvas.default", children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] })) })] }), submissions.length > 0 && (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", bg: "success.subtle", display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Submitted values" }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setSubmissions([]), children: "Clear" })] }), _jsx(Box, { p: 3, display: "flex", flexDirection: "column", gap: 2, children: submissions.map(record => (_jsx(Box, { as: "pre", m: 0, p: 2, borderRadius: 2, bg: "canvas.default", border: "1px solid", borderColor: "border.default", fontSize: 0, overflow: "auto", whiteSpace: "pre-wrap", children: JSON.stringify(record.values, null, 2) }, record.id))) })] }))] }), _jsx(Box, { position: ['static', 'static', 'sticky'], top: [0, 0, 3], alignSelf: ['auto', 'auto', 'start'], border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "flex", flexDirection: "column", height: ['auto', 'auto', 'calc(100vh - 48px)'], minHeight: [420, 520, 0], overflow: "hidden", bg: "canvas.default", children: isCreatingChat ? (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: 3, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { p: 3, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(LoopEmbed, { serverUrl: baseUrl, target: "local", 
                             // What lets the target take: without the choice the agents
                             // plugin pins the sandbox to the page, whatever `target` says,
                             // and the chat then turns in-page, where the server's tools

package/lib/examples/A2UiComponentsGalleryExample.js

@@ -27,6 +27,6 @@ const ScenePlugin = defineA2uiScenePlugin({
 });
 const A2UiComponentsGalleryExample = () => {
     const plugins = useMemo(() => [ScenePlugin], []);
-    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
 };
 export default A2UiComponentsGalleryExample;

package/lib/examples/A2UiContactCardExample.js

@@ -27,6 +27,6 @@ const ScenePlugin = defineA2uiScenePlugin({
 });
 const A2UiContactCardExample = () => {
     const plugins = useMemo(() => [ScenePlugin], []);
-    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
 };
 export default A2UiContactCardExample;

package/lib/examples/A2UiJupyterOutputExample.js

@@ -299,35 +299,7 @@ function JupyterOutputs({ execution, }) {
             }) }) }));
 }
 function Panel({ title, caption, children, style, sx, }) {
-    return (_jsxs(Box, { sx: {
-            flex: '1 1 0',
-            height: '100%',
-            minWidth: 0,
-            minHeight: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            bg: 'canvas.default',
-            color: 'fg.default',
-            overflow: 'hidden',
-        }, children: [_jsxs(Box, { sx: {
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    bg: 'canvas.default',
-                    color: 'fg.default',
-                }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: title }), _jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: caption })] }), _jsx(Box, { style: style, sx: {
-                    flex: '1 1 0',
-                    minHeight: 0,
-                    overflow: 'auto',
-                    p: 3,
-                    bg: 'canvas.default',
-                    color: 'fg.default',
-                    ...sx,
-                }, children: children })] }));
+    return (_jsxs(Box, { flex: "1 1 0", height: "100%", minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column", border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", color: "fg.default", overflow: "hidden", children: [_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.default", color: "fg.default", children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: title }), _jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: caption })] }), _jsx(Box, { style: style, flex: "1 1 0", minHeight: 0, overflow: "auto", p: 3, bg: "canvas.default", color: "fg.default", sx: sx, children: children })] }));
 }
 const A2UiJupyterOutputExample = () => {
     const { label: targetLabel } = useRuntimeTarget();
@@ -606,7 +578,7 @@ const A2UiJupyterOutputExample = () => {
             return defaultUI;
         }
         const demoActions = SNIPPETS.find(entry => entry.id === kind)?.actions ?? [];
-        return (_jsxs(_Fragment, { children: [defaultUI, demoActions.length > 0 ? (_jsxs(Box, { sx: { mt: 2 }, children: [_jsx(Text, { sx: { display: 'block', mb: 1, fontSize: 0, color: 'fg.muted' }, children: "Choose an action" }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 2 }, children: demoActions.map((action, index) => (_jsx(Button, { size: "small", variant: index === 0 ? 'primary' : 'default', onClick: () => 
+        return (_jsxs(_Fragment, { children: [defaultUI, demoActions.length > 0 ? (_jsxs(Box, { mt: 2, children: [_jsx(Text, { sx: { display: 'block', mb: 1, fontSize: 0, color: 'fg.muted' }, children: "Choose an action" }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: demoActions.map((action, index) => (_jsx(Button, { size: "small", variant: index === 0 ? 'primary' : 'default', onClick: () => 
                                 // A real client action, not a cast: the same shape the
                                 // surface's own buttons emit, so the round-trip cannot
                                 // tell the two apart. `sourceComponentId` says which
@@ -643,15 +615,10 @@ const A2UiJupyterOutputExample = () => {
                             ...previous,
                             [toolCallId]: isOpen,
                         }));
-                    }, sx: { mt: 2 }, children: [_jsx(Box, { as: "summary", sx: {
-                                cursor: 'pointer',
-                                fontSize: 0,
-                                color: 'fg.muted',
-                                // The marker is the affordance; without a list-style the
-                                // triangle disappears in some browsers.
-                                listStyle: 'revert',
-                                '&:hover': { color: 'fg.default' },
-                            }, children: "A2UI surface" }), _jsx(Box, { sx: { mt: 2, ...A2UI_RENDER_SCOPE_SX }, style: themeStyle, children: surfaces.map(surface => (_jsx(A2uiSurfaceComposed, { surface: surface }, surface.id))) })] })) : null, _jsxs(Box, { sx: { mt: 2 }, children: [_jsx(Text, { sx: { display: 'block', mb: 1, fontSize: 0, color: 'fg.muted' }, children: "Jupyter output" }), _jsx(JupyterOutputs, { execution: executed })] })] }));
+                    }, mt: 2, children: [_jsx(Box, { as: "summary", cursor: "pointer", fontSize: 0, color: "fg.muted", 
+                            // The marker is the affordance; without a list-style the
+                            // triangle disappears in some browsers.
+                            listStyle: "revert", hover: { color: 'fg.default' }, children: "A2UI surface" }), _jsx(Box, { mt: 2, sx: A2UI_RENDER_SCOPE_SX, style: themeStyle, children: surfaces.map(surface => (_jsx(A2uiSurfaceComposed, { surface: surface }, surface.id))) })] })) : null, _jsxs(Box, { mt: 2, children: [_jsx(Text, { sx: { display: 'block', mb: 1, fontSize: 0, color: 'fg.muted' }, children: "Jupyter output" }), _jsx(JupyterOutputs, { execution: executed })] })] }));
     }, [executionsByKind, handleAction, openSurfaces, surfaces, themeStyle]);
     const runDemoTool = useMemo(() => ({
         name: 'run_jupyter_output_demo',
@@ -697,75 +664,26 @@ const A2UiJupyterOutputExample = () => {
     useEffect(() => {
         setExtras({ frontendTools: [runDemoTool], renderToolResult });
     }, [runDemoTool, renderToolResult, setExtras]);
-    const outputPanels = (_jsxs(Box, { sx: {
-            flex: '1 1 0',
-            minHeight: 0,
-            height: '100%',
-            display: 'grid',
-            gridTemplateColumns: [
-                'minmax(0, 1fr)',
-                'minmax(0, 1fr)',
-                'repeat(2, minmax(0, 1fr))',
-            ],
-            gridTemplateRows: [
-                'repeat(2, minmax(280px, auto))',
-                'repeat(2, minmax(280px, auto))',
-                'minmax(0, 1fr)',
-            ],
-            gap: 3,
-            alignItems: 'stretch',
-            overflow: ['auto', 'auto', 'hidden'],
-        }, children: [_jsx(Panel, { title: "A2UI Surface", caption: "The outputs read by the server-side converter.", style: themeStyle, sx: A2UI_RENDER_SCOPE_SX, children: surfaces.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: snippet.chat
+    const outputPanels = (_jsxs(Box, { flex: "1 1 0", minHeight: 0, height: "100%", display: "grid", gridTemplateColumns: [
+            'minmax(0, 1fr)',
+            'minmax(0, 1fr)',
+            'repeat(2, minmax(0, 1fr))',
+        ], gridTemplateRows: [
+            'repeat(2, minmax(280px, auto))',
+            'repeat(2, minmax(280px, auto))',
+            'minmax(0, 1fr)',
+        ], gap: 3, alignItems: "stretch", overflow: ['auto', 'auto', 'hidden'], children: [_jsx(Panel, { title: "A2UI Surface", caption: "The outputs read by the server-side converter.", style: themeStyle, sx: A2UI_RENDER_SCOPE_SX, children: surfaces.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: snippet.chat
                         ? 'Choose a chat suggestion to see the surface.'
                         : 'Press Run to see the surface.' })) : (surfaces.map(surface => (_jsx(A2uiSurfaceComposed, { surface: surface }, surface.id)))) }), _jsx(Panel, { title: "Jupyter Output", caption: "The sandbox result rendered by jupyter-react Output.", children: _jsx(JupyterOutputs, { execution: execution }) })] }));
-    return (_jsx(ThemedProvider, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
-                    height: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minHeight: 0,
-                    overflow: 'hidden',
-                    bg: 'canvas.default',
-                    color: 'fg.default',
-                }, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.default',
-                            color: 'fg.default',
-                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDCD3 Jupyter Output as a A2UI Surface" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "One execution, twice: what the kernel said, and what the A2UI converter made of it. The conversion runs on the server, so a terminal and a JupyterLab panel get the same surface from the same code." })] }), !hasAgent || unavailableReason || agentError ? (_jsx(Box, { sx: { p: 3, bg: 'canvas.default', color: 'fg.default' }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: unavailableReason || agentError || (_jsxs(_Fragment, { children: ["This example converts on the server, and the", ' ', _jsx("strong", { children: targetLabel }), " target has no agent-runtimes server beside its sandbox. Switch to ", _jsx("strong", { children: "Local" }), ' ', "or ", _jsx("strong", { children: "Datalayer" }), " in the header to run it."] })) }) })) : (_jsxs(Box, { sx: {
-                            flex: '1 1 0',
-                            minHeight: 0,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 3,
-                            p: 3,
-                            bg: 'canvas.default',
-                            color: 'fg.default',
-                        }, children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(SegmentedControl, { "aria-label": "Output kind", fullWidth: true, children: SNIPPETS.map(entry => (_jsx(SegmentedControl.Button, { selected: entry.id === snippetId, onClick: () => chooseSnippet(entry), children: entry.label }, entry.id))) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: snippet.about })] }), snippet.chat ? (_jsxs(Box, { sx: {
-                                    flex: '1 1 0',
-                                    minHeight: 0,
-                                    display: 'grid',
-                                    gridTemplateColumns: [
-                                        'minmax(0, 1fr)',
-                                        'minmax(0, 1fr)',
-                                        'minmax(320px, 0.7fr) minmax(0, 1.3fr)',
-                                    ],
-                                    gridTemplateRows: [
-                                        'minmax(420px, auto) minmax(560px, auto)',
-                                        'minmax(420px, auto) minmax(560px, auto)',
-                                        'minmax(0, 1fr)',
-                                    ],
-                                    gap: 3,
-                                    overflow: ['auto', 'auto', 'hidden'],
-                                }, children: [_jsx(Box, { sx: {
-                                            minHeight: 0,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            borderRadius: 2,
-                                            overflow: 'hidden',
-                                            bg: 'canvas.default',
-                                        }, children: agentReady && agentId ? (_jsx(LoopEmbed, { serverUrl: serverUrl, target: "local", 
+    return (_jsx(ThemedProvider, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden", bg: "canvas.default", color: "fg.default", children: [_jsxs(Box, { px: 3, py: 3, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.default", color: "fg.default", children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDCD3 Jupyter Output as a A2UI Surface" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "One execution, twice: what the kernel said, and what the A2UI converter made of it. The conversion runs on the server, so a terminal and a JupyterLab panel get the same surface from the same code." })] }), !hasAgent || unavailableReason || agentError ? (_jsx(Box, { p: 3, bg: "canvas.default", color: "fg.default", children: _jsx(Text, { sx: { color: 'fg.muted' }, children: unavailableReason || agentError || (_jsxs(_Fragment, { children: ["This example converts on the server, and the", ' ', _jsx("strong", { children: targetLabel }), " target has no agent-runtimes server beside its sandbox. Switch to ", _jsx("strong", { children: "Local" }), ' ', "or ", _jsx("strong", { children: "Datalayer" }), " in the header to run it."] })) }) })) : (_jsxs(Box, { flex: "1 1 0", minHeight: 0, display: "flex", flexDirection: "column", gap: 3, p: 3, bg: "canvas.default", color: "fg.default", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsx(SegmentedControl, { "aria-label": "Output kind", fullWidth: true, children: SNIPPETS.map(entry => (_jsx(SegmentedControl.Button, { selected: entry.id === snippetId, onClick: () => chooseSnippet(entry), children: entry.label }, entry.id))) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: snippet.about })] }), snippet.chat ? (_jsxs(Box, { flex: "1 1 0", minHeight: 0, display: "grid", gridTemplateColumns: [
+                                    'minmax(0, 1fr)',
+                                    'minmax(0, 1fr)',
+                                    'minmax(320px, 0.7fr) minmax(0, 1.3fr)',
+                                ], gridTemplateRows: [
+                                    'minmax(420px, auto) minmax(560px, auto)',
+                                    'minmax(420px, auto) minmax(560px, auto)',
+                                    'minmax(0, 1fr)',
+                                ], gap: 3, overflow: ['auto', 'auto', 'hidden'], children: [_jsx(Box, { minHeight: 0, border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", bg: "canvas.default", children: agentReady && agentId ? (_jsx(LoopEmbed, { serverUrl: serverUrl, target: "local", 
                                             // No `showAgentVariants` on purpose: without the choice the
                                             // agents plugin pins the sandbox to the page, and this chat is
                                             // meant to turn in the page. The server agent above speaks
@@ -775,25 +693,7 @@ const A2UiJupyterOutputExample = () => {
                                             // calls it.
                                             agentId: agentId, defaultEditor: "none", showHeader: true, 
                                             // A reader asks for one demonstration after another: `+` starts over.
-                                            chatHeaderButtons: true, plugins: chatPlugins })) : (_jsxs(Box, { sx: {
-                                                height: '100%',
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                gap: 2,
-                                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Starting Jupyter output agent\u2026" })] })) }), outputPanels] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { as: "textarea", value: code, onChange: (event) => setCode(event.target.value), spellCheck: false, "aria-label": "Code to run", sx: {
-                                            width: '100%',
-                                            minHeight: '150px',
-                                            p: 2,
-                                            fontFamily: 'mono',
-                                            fontSize: 1,
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            bg: 'canvas.default',
-                                            color: 'fg.default',
-                                            resize: 'vertical',
-                                        } }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Button, { variant: "primary", leadingVisual: PlayIcon, disabled: running || !agentReady || !agentId, onClick: () => void run(code, undefined, snippet.actions ?? []), children: running
+                                            chatHeaderButtons: true, plugins: chatPlugins })) : (_jsxs(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Starting Jupyter output agent\u2026" })] })) }), outputPanels] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { as: "textarea", value: code, onChange: (event) => setCode(event.target.value), spellCheck: false, "aria-label": "Code to run", width: "100%", minHeight: "150px", p: 2, fontFamily: "mono", fontSize: 1, borderRadius: 2, border: "1px solid", borderColor: "border.default", bg: "canvas.default", color: "fg.default", resize: "vertical" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Button, { variant: "primary", leadingVisual: PlayIcon, disabled: running || !agentReady || !agentId, onClick: () => void run(code, undefined, snippet.actions ?? []), children: running
                                                     ? 'Running…'
                                                     : !agentReady
                                                         ? 'Starting Jupyter…'

package/lib/examples/A2UiRestaurantExample.js

@@ -27,6 +27,6 @@ const ScenePlugin = defineA2uiScenePlugin({
 });
 const A2UiRestaurantExample = () => {
     const plugins = useMemo(() => [ScenePlugin], []);
-    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
 };
 export default A2UiRestaurantExample;

package/lib/examples/A2UiViewerExample.js

@@ -46,7 +46,7 @@ const A2UiViewerExample = () => {
     // The header's choice; the shell remounts this example when it changes.
     const target = useRuntimeTargetStore(state => state.target);
     const serverUrl = useExampleAgentRuntimesUrl();
-    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: target, 
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: target, 
                 // An in-page agent has no server to ask; the others need to know
                 // where theirs is.
                 serverUrl: target === 'browser' ? undefined : serverUrl, agentId: AGENTSPEC_ID, 

package/lib/examples/AgUiAgenticExample.js

@@ -47,14 +47,7 @@ const AgUiAgenticExample = () => {
     });
     const agenticChatEndpoint = agentId != null ? `${baseUrl}/api/v1/ag-ui/${agentId}/` : undefined;
     const isLoading = !isReady && status !== 'error';
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                minHeight: '100vh',
-                backgroundColor: 'canvas.default',
-                padding: 4,
-            }, children: [_jsxs(Box, { sx: {
-                        maxWidth: '800px',
-                        margin: '0 auto',
-                    }, children: [_jsx(Text, { as: "h1", sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { minHeight: "100vh", backgroundColor: "canvas.default", padding: 4, children: [_jsxs(Box, { maxWidth: "800px", margin: "0 auto", children: [_jsx(Text, { as: "h1", sx: {
                                 fontSize: 4,
                                 fontWeight: 'bold',
                                 marginBottom: 2,
@@ -62,36 +55,11 @@ const AgUiAgenticExample = () => {
                                 fontSize: 2,
                                 color: 'fg.muted',
                                 marginBottom: 4,
-                            }, children: "Click the chat button in the bottom-right corner to start a conversation with an AI agent. The runtime target (local or cloud) follows your selection in the examples header." }), isLoading && (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                marginBottom: 3,
-                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Starting managed agent runtime..." })] })), error && (_jsx(Box, { sx: {
-                                padding: 3,
-                                marginBottom: 3,
-                                backgroundColor: 'danger.subtle',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'danger.muted',
-                            }, children: _jsxs(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: ["Failed to initialize managed agent runtime: ", error] }) })), _jsxs(Box, { sx: {
-                                padding: 4,
-                                backgroundColor: 'canvas.default',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Runtime Mode" }), _jsx(Box, { as: "ul", sx: { paddingLeft: 3 }, children: _jsxs(Box, { as: "li", sx: { marginBottom: 1 }, children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 1 }, children: "managed runtime + managed agent" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [' ', "- Launches on cloud when the header target is set to cloud"] })] }) }), _jsx(Text, { as: "p", sx: {
+                            }, children: "Click the chat button in the bottom-right corner to start a conversation with an AI agent. The runtime target (local or cloud) follows your selection in the examples header." }), isLoading && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, marginBottom: 3, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Starting managed agent runtime..." })] })), error && (_jsx(Box, { padding: 3, marginBottom: 3, backgroundColor: "danger.subtle", borderRadius: 2, border: "1px solid", borderColor: "danger.muted", children: _jsxs(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: ["Failed to initialize managed agent runtime: ", error] }) })), _jsxs(Box, { padding: 4, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Runtime Mode" }), _jsx(Box, { as: "ul", paddingLeft: 3, children: _jsxs(Box, { as: "li", marginBottom: 1, children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 1 }, children: "managed runtime + managed agent" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [' ', "- Launches on cloud when the header target is set to cloud"] })] }) }), _jsx(Text, { as: "p", sx: {
                                         fontSize: 1,
                                         color: 'fg.muted',
                                         marginTop: 3,
-                                    }, children: "Try asking: \"hi\" or \"what can you help with?\"" })] }), _jsxs(Box, { sx: {
-                                marginTop: 4,
-                                padding: 4,
-                                backgroundColor: 'canvas.default',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), agenticChatEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticChatEndpoint, title: "Agentic Chat", description: "Chat with a managed AG-UI agent runtime.", position: "bottom-right", defaultOpen: true, suggestions: [
+                                    }, children: "Try asking: \"hi\" or \"what can you help with?\"" })] }), _jsxs(Box, { marginTop: 4, padding: 4, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), agenticChatEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticChatEndpoint, title: "Agentic Chat", description: "Chat with a managed AG-UI agent runtime.", position: "bottom-right", defaultOpen: true, suggestions: [
                         {
                             title: 'What time is it?',
                             message: 'What is the current time?',

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -72,14 +72,7 @@ const AgUiBackendToolRenderingExample = () => {
         // State updates are still available if needed for other purposes
         // Uncomment to debug: console.log('[WeatherExample] State update:', _state);
     }, []);
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                minHeight: '100vh',
-                backgroundColor: 'canvas.default',
-                padding: 4,
-            }, children: [_jsxs(Box, { sx: {
-                        maxWidth: '800px',
-                        margin: '0 auto',
-                    }, children: [_jsx(Text, { as: "h1", sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { minHeight: "100vh", backgroundColor: "canvas.default", padding: 4, children: [_jsxs(Box, { maxWidth: "800px", margin: "0 auto", children: [_jsx(Text, { as: "h1", sx: {
                                 fontSize: 4,
                                 fontWeight: 'bold',
                                 marginBottom: 2,
@@ -87,23 +80,7 @@ const AgUiBackendToolRenderingExample = () => {
                                 fontSize: 2,
                                 color: 'fg.muted',
                                 marginBottom: 4,
-                            }, children: ["Ask about the weather anywhere in the world. Weather cards are rendered ", _jsx("strong", { children: "inline in the chat" }), " with dynamic theming!"] }), _jsxs(Box, { sx: {
-                                padding: 4,
-                                backgroundColor: 'canvas.default',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: ["This demonstrates ", _jsx("strong", { children: "inline backend tool rendering" }), ' ', "with AG-UI. When the agent calls the ", _jsx("code", { children: "get_weather" }), ' ', "tool, the result is rendered as a beautiful weather card directly in the chat conversation, similar to the AG-UI Dojo implementation."] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Features:" }), _jsxs(Box, { as: "ul", sx: {
-                                                paddingLeft: 3,
-                                                marginTop: 1,
-                                                fontSize: 1,
-                                                color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\uD83C\uDF24\uFE0F Dynamic background colors based on weather conditions" }), _jsx("li", { children: "\uD83C\uDFA8 Weather icons (sun, rain, cloud)" }), _jsx("li", { children: "\uD83C\uDF21\uFE0F Temperature in both Celsius and Fahrenheit" }), _jsx("li", { children: "\uD83D\uDCA8 Humidity, wind speed, and feels-like stats" }), _jsx("li", { children: "\u23F3 Loading spinner while fetching data" })] })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Try these prompts:" }), _jsxs(Box, { as: "ul", sx: {
-                                                paddingLeft: 3,
-                                                marginTop: 1,
-                                                fontSize: 1,
-                                                color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), backendToolRenderingEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: backendToolRenderingEndpoint, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, onStateUpdate: handleStateUpdate, renderToolResult: renderToolResult, suggestions: [
+                            }, children: ["Ask about the weather anywhere in the world. Weather cards are rendered ", _jsx("strong", { children: "inline in the chat" }), " with dynamic theming!"] }), _jsxs(Box, { padding: 4, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: ["This demonstrates ", _jsx("strong", { children: "inline backend tool rendering" }), ' ', "with AG-UI. When the agent calls the ", _jsx("code", { children: "get_weather" }), ' ', "tool, the result is rendered as a beautiful weather card directly in the chat conversation, similar to the AG-UI Dojo implementation."] }), _jsxs(Box, { marginTop: 3, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Features:" }), _jsxs(Box, { as: "ul", paddingLeft: 3, marginTop: 1, fontSize: 1, color: "fg.muted", children: [_jsx("li", { children: "\uD83C\uDF24\uFE0F Dynamic background colors based on weather conditions" }), _jsx("li", { children: "\uD83C\uDFA8 Weather icons (sun, rain, cloud)" }), _jsx("li", { children: "\uD83C\uDF21\uFE0F Temperature in both Celsius and Fahrenheit" }), _jsx("li", { children: "\uD83D\uDCA8 Humidity, wind speed, and feels-like stats" }), _jsx("li", { children: "\u23F3 Loading spinner while fetching data" })] })] }), _jsxs(Box, { marginTop: 3, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Try these prompts:" }), _jsxs(Box, { as: "ul", paddingLeft: 3, marginTop: 1, fontSize: 1, color: "fg.muted", children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), backendToolRenderingEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: backendToolRenderingEndpoint, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, onStateUpdate: handleStateUpdate, renderToolResult: renderToolResult, suggestions: [
                         {
                             title: 'Paris weather',
                             message: "What's the weather like in Paris?",