@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/examples/AgUiHaikuGenUiExample.js

@@ -110,14 +110,7 @@ const AgUiHaikuGenUiExample = () => {
     }), []);
     // Tool name to match and CSS file to load are read from the agent spec.
     const renderToolResult = useSpecRenderToolResult(AGENTSPEC_ID, haikuRenderers);
-    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,
@@ -125,30 +118,7 @@ const AgUiHaikuGenUiExample = () => {
                                 fontSize: 2,
                                 color: 'fg.muted',
                                 marginBottom: 4,
-                            }, children: "Ask the assistant to generate haiku poetry. Haikus appear both in the chat and in the display area below!" }), _jsx(Box, { sx: {
-                                padding: 5,
-                                backgroundColor: 'canvas.default',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                marginBottom: 4,
-                            }, children: _jsx(HaikuDisplayWithRef, { ref: displayRef, title: "Your Haiku Collection" }) }), _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: "tool-based generative UI" }), " with AG-UI. When the agent generates a haiku using the", ' ', _jsx("code", { children: "generate_haiku" }), " tool, it's rendered as a beautiful card both in the chat and in the main display area above."] }), _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\uDFA8 Beautiful gradient backgrounds matching mood" }), _jsx("li", { children: "\uD83C\uDDEF\uD83C\uDDF5 Japanese text with English translation" }), _jsx("li", { children: "\uD83D\uDCDA Carousel to browse your haiku collection" }), _jsx("li", { children: "\uD83D\uDD04 Real-time rendering as the tool executes" }), _jsx("li", { children: "\u2728 Synchronized display between chat and main view" })] })] }), _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: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: haikuGenUiEndpoint, launching: !haikuGenUiEndpoint, launchingMessage: "Starting the haiku agent runtime\u2026", title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderToolResult, hideMessagesAfterToolUI: true, suggestions: [
+                            }, children: "Ask the assistant to generate haiku poetry. Haikus appear both in the chat and in the display area below!" }), _jsx(Box, { padding: 5, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", marginBottom: 4, children: _jsx(HaikuDisplayWithRef, { ref: displayRef, title: "Your Haiku Collection" }) }), _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: "tool-based generative UI" }), " with AG-UI. When the agent generates a haiku using the", ' ', _jsx("code", { children: "generate_haiku" }), " tool, it's rendered as a beautiful card both in the chat and in the main display area above."] }), _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\uDFA8 Beautiful gradient backgrounds matching mood" }), _jsx("li", { children: "\uD83C\uDDEF\uD83C\uDDF5 Japanese text with English translation" }), _jsx("li", { children: "\uD83D\uDCDA Carousel to browse your haiku collection" }), _jsx("li", { children: "\uD83D\uDD04 Real-time rendering as the tool executes" }), _jsx("li", { children: "\u2728 Synchronized display between chat and main view" })] })] }), _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: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: haikuGenUiEndpoint, launching: !haikuGenUiEndpoint, launchingMessage: "Starting the haiku agent runtime\u2026", title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderToolResult, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Cherry blossoms',
                             message: 'Write me a haiku about cherry blossoms in spring.',

package/lib/examples/AgUiHumanInTheLoopExample.js

@@ -96,36 +96,12 @@ const StepsFeedback = ({ args, status, respond, result }) => {
             });
         }
     };
-    return (_jsxs(Box, { "data-testid": "select-steps", sx: {
-            width: '100%',
-            padding: 3,
-            backgroundColor: 'canvas.default',
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: 'border.default',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: 3,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TasklistIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Select Steps" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [enabledCount, "/", displaySteps.length, " Selected"] }), _jsx(Label, { variant: status === 'executing' ? 'accent' : 'secondary', size: "small", children: status === 'executing' ? 'Ready' : 'Waiting' })] })] }), _jsx(ProgressBar, { progress: progress, barSize: "small", sx: { mb: 3 } }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }, children: displaySteps.map((step, index) => (_jsxs(Box, { "data-testid": "step-item", sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        padding: 2,
-                        borderRadius: 2,
-                        backgroundColor: step.status === 'enabled' ? 'success.subtle' : 'canvas.default',
-                        border: '1px solid',
-                        borderColor: step.status === 'enabled' ? 'success.muted' : 'border.muted',
-                        opacity: status !== 'executing' ? 0.7 : 1,
-                        cursor: status === 'executing' ? 'pointer' : 'default',
-                        transition: 'all 0.2s ease',
-                    }, onClick: () => status === 'executing' && handleStepToggle(index), children: [_jsx(FormControl, { disabled: status !== 'executing', children: _jsx(Checkbox, { checked: step.status === 'enabled', onChange: () => handleStepToggle(index), disabled: status !== 'executing' }) }), _jsx(Text, { "data-testid": "step-text", sx: {
+    return (_jsxs(Box, { "data-testid": "select-steps", width: "100%", padding: 3, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(TasklistIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Select Steps" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [enabledCount, "/", displaySteps.length, " Selected"] }), _jsx(Label, { variant: status === 'executing' ? 'accent' : 'secondary', size: "small", children: status === 'executing' ? 'Ready' : 'Waiting' })] })] }), _jsx(ProgressBar, { progress: progress, barSize: "small", sx: { mb: 3 } }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, mb: 3, children: displaySteps.map((step, index) => (_jsxs(Box, { "data-testid": "step-item", display: "flex", alignItems: "center", gap: 2, padding: 2, borderRadius: 2, backgroundColor: step.status === 'enabled' ? 'success.subtle' : 'canvas.default', border: "1px solid", borderColor: step.status === 'enabled' ? 'success.muted' : 'border.muted', opacity: status !== 'executing' ? 0.7 : 1, cursor: status === 'executing' ? 'pointer' : 'default', transition: "all 0.2s ease", onClick: () => status === 'executing' && handleStepToggle(index), children: [_jsx(FormControl, { disabled: status !== 'executing', children: _jsx(Checkbox, { checked: step.status === 'enabled', onChange: () => handleStepToggle(index), disabled: status !== 'executing' }) }), _jsx(Text, { "data-testid": "step-text", sx: {
                                 flex: 1,
                                 fontSize: 1,
                                 textDecoration: step.status === 'disabled' ? 'line-through' : 'none',
                                 color: step.status === 'disabled' ? 'fg.muted' : 'fg.default',
-                            }, children: step.description }), step.status === 'enabled' && (_jsx(CheckCircleFillIcon, { size: 16, className: "color-fg-success" }))] }, index))) }), accepted === null && (_jsxs(Box, { sx: { display: 'flex', justifyContent: 'center', gap: 3, mt: 3 }, children: [_jsxs(Button, { variant: "default", disabled: status !== 'executing', onClick: handleReject, sx: {
+                            }, children: step.description }), step.status === 'enabled' && (_jsx(CheckCircleFillIcon, { size: 16, className: "color-fg-success" }))] }, index))) }), accepted === null && (_jsxs(Box, { display: "flex", justifyContent: "center", gap: 3, mt: 3, children: [_jsxs(Button, { variant: "default", disabled: status !== 'executing', onClick: handleReject, sx: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 1,
@@ -137,17 +113,7 @@ const StepsFeedback = ({ args, status, respond, result }) => {
                             '&:hover': {
                                 backgroundColor: 'success.emphasis',
                             },
-                        }, children: [_jsx(CheckCircleFillIcon, { size: 14 }), "Confirm", _jsx(Label, { variant: "accent", size: "small", sx: { ml: 1, backgroundColor: 'rgba(255,255,255,0.2)' }, children: enabledCount })] })] })), accepted !== null && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 3 }, children: _jsx(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        px: 4,
-                        py: 2,
-                        borderRadius: 2,
-                        backgroundColor: accepted ? 'success.subtle' : 'danger.subtle',
-                        border: '1px solid',
-                        borderColor: accepted ? 'success.muted' : 'danger.muted',
-                    }, children: accepted ? (_jsxs(_Fragment, { children: [_jsx(CheckCircleFillIcon, { size: 16, className: "color-fg-success" }), _jsx(Text, { sx: { fontWeight: 'semibold', color: 'success.fg' }, children: "Accepted" })] })) : (_jsxs(_Fragment, { children: [_jsx(XCircleFillIcon, { size: 16, className: "color-fg-danger" }), _jsx(Text, { sx: { fontWeight: 'semibold', color: 'danger.fg' }, children: "Rejected" })] })) }) }))] }));
+                        }, children: [_jsx(CheckCircleFillIcon, { size: 14 }), "Confirm", _jsx(Label, { variant: "accent", size: "small", sx: { ml: 1, backgroundColor: 'rgba(255,255,255,0.2)' }, children: enabledCount })] })] })), accepted !== null && (_jsx(Box, { display: "flex", justifyContent: "center", mt: 3, children: _jsx(Box, { display: "flex", alignItems: "center", gap: 2, px: 4, py: 2, borderRadius: 2, backgroundColor: accepted ? 'success.subtle' : 'danger.subtle', border: "1px solid", borderColor: accepted ? 'success.muted' : 'danger.muted', children: accepted ? (_jsxs(_Fragment, { children: [_jsx(CheckCircleFillIcon, { size: 16, className: "color-fg-success" }), _jsx(Text, { sx: { fontWeight: 'semibold', color: 'success.fg' }, children: "Accepted" })] })) : (_jsxs(_Fragment, { children: [_jsx(XCircleFillIcon, { size: 16, className: "color-fg-danger" }), _jsx(Text, { sx: { fontWeight: 'semibold', color: 'danger.fg' }, children: "Rejected" })] })) }) }))] }));
 };
 /**
  * Render function for the generate_task_steps tool
@@ -192,14 +158,7 @@ const AgUiHumanInTheLoopExample = () => {
         },
     });
     const humanInTheLoopEndpoint = agentId != null ? `${baseUrl}/api/v1/ag-ui/${agentId}/` : undefined;
-    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,
@@ -207,20 +166,7 @@ const AgUiHumanInTheLoopExample = () => {
                                 fontSize: 2,
                                 color: 'fg.muted',
                                 marginBottom: 4,
-                            }, children: "This example demonstrates human review workflows. Ask the AI to create a plan, then use the Reject/Confirm buttons to respond." }), _jsxs(Box, { sx: {
-                                padding: 4,
-                                backgroundColor: 'canvas.default',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                marginBottom: 4,
-                            }, 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 demonstrates the \"Human in the Loop\" pattern where AI-generated task plans require human approval before proceeding. The pattern follows CopilotKit's useHumanInTheLoop hook." }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: _jsx("strong", { children: "How it works:" }) }), _jsxs(Box, { as: "ul", sx: { fontSize: 1, color: 'fg.muted', mt: 1, pl: 3 }, children: [_jsx("li", { children: "The agent calls the generate_task_steps tool" }), _jsx("li", { children: "A custom UI renders with toggleable steps" }), _jsx("li", { children: "User clicks Reject or Confirm to send response back" }), _jsx("li", { children: "The UI updates to show Rejected or Accepted state" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Try:" }), " \"Create a plan to learn machine learning\" or \"Plan a trip to Paris in 5 steps\""] })] }), _jsxs(Box, { sx: {
-                                padding: 4,
-                                backgroundColor: 'neutral.muted',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), humanInTheLoopEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: humanInTheLoopEndpoint, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
+                            }, children: "This example demonstrates human review workflows. Ask the AI to create a plan, then use the Reject/Confirm buttons to respond." }), _jsxs(Box, { padding: 4, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", marginBottom: 4, 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 demonstrates the \"Human in the Loop\" pattern where AI-generated task plans require human approval before proceeding. The pattern follows CopilotKit's useHumanInTheLoop hook." }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: _jsx("strong", { children: "How it works:" }) }), _jsxs(Box, { as: "ul", fontSize: 1, color: "fg.muted", mt: 1, pl: 3, children: [_jsx("li", { children: "The agent calls the generate_task_steps tool" }), _jsx("li", { children: "A custom UI renders with toggleable steps" }), _jsx("li", { children: "User clicks Reject or Confirm to send response back" }), _jsx("li", { children: "The UI updates to show Rejected or Accepted state" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Try:" }), " \"Create a plan to learn machine learning\" or \"Plan a trip to Paris in 5 steps\""] })] }), _jsxs(Box, { padding: 4, backgroundColor: "neutral.muted", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), humanInTheLoopEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: humanInTheLoopEndpoint, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Plan a trip',
                             message: 'Plan a weekend trip to Paris.',

package/lib/examples/AgUiSharedStateExample.js

@@ -41,13 +41,8 @@ const IngredientsList = ({ ingredients, onAdd, onRemove }) => {
             setNewIngredient('');
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Text, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', marginBottom: 2 }, children: "Ingredients" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, marginBottom: 2 }, children: [_jsx(TextInput, { value: newIngredient, onChange: e => setNewIngredient(e.target.value), placeholder: "Add an ingredient...", onKeyDown: e => e.key === 'Enter' && handleAdd(), sx: { flex: 1 } }), _jsx(Button, { onClick: handleAdd, leadingVisual: PlusIcon, size: "small", children: "Add" })] }), ingredients.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No ingredients yet" })) : (_jsx(Box, { as: "ul", sx: { listStyle: 'none', padding: 0, margin: 0 }, children: ingredients.map((ingredient, index) => (_jsxs(Box, { as: "li", sx: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        padding: 1,
+    return (_jsxs(Box, { children: [_jsx(Text, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', marginBottom: 2 }, children: "Ingredients" }), _jsxs(Box, { display: "flex", gap: 2, marginBottom: 2, children: [_jsx(TextInput, { value: newIngredient, onChange: e => setNewIngredient(e.target.value), placeholder: "Add an ingredient...", onKeyDown: e => e.key === 'Enter' && handleAdd(), sx: { flex: 1 } }), _jsx(Button, { onClick: handleAdd, leadingVisual: PlusIcon, size: "small", children: "Add" })] }), ingredients.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No ingredients yet" })) : (_jsx(Box, { as: "ul", listStyle: "none", padding: 0, margin: 0, children: ingredients.map((ingredient, index) => (_jsxs(Box, { as: "li", display: "flex", justifyContent: "space-between", alignItems: "center", padding: 1, borderColor: "border.default", sx: {
                         borderBottom: '1px solid',
-                        borderColor: 'border.default',
                         '&:last-child': { borderBottom: 'none' },
                     }, children: [_jsx(Text, { sx: { fontSize: 1 }, children: ingredient }), _jsx(Button, { variant: "invisible", size: "small", onClick: () => onRemove(index), "aria-label": "Remove", children: _jsx(XIcon, { size: 12 }) })] }, index))) }))] }));
 };
@@ -63,28 +58,19 @@ const InstructionsList = ({ instructions, onAdd, onRemove }) => {
             setNewInstruction('');
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Text, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', marginBottom: 2 }, children: "Instructions" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, marginBottom: 2 }, children: [_jsx(TextInput, { value: newInstruction, onChange: e => setNewInstruction(e.target.value), placeholder: "Add an instruction...", onKeyDown: e => e.key === 'Enter' && handleAdd(), sx: { flex: 1 } }), _jsx(Button, { onClick: handleAdd, leadingVisual: PlusIcon, size: "small", children: "Add" })] }), instructions.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No instructions yet" })) : (_jsx(Box, { as: "ol", sx: { paddingLeft: 3, margin: 0 }, children: instructions.map((instruction, index) => (_jsxs(Box, { as: "li", sx: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'flex-start',
-                        marginBottom: 2,
-                    }, children: [_jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: instruction }), _jsx(Button, { variant: "invisible", size: "small", onClick: () => onRemove(index), "aria-label": "Remove", children: _jsx(XIcon, { size: 12 }) })] }, index))) }))] }));
+    return (_jsxs(Box, { children: [_jsx(Text, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', marginBottom: 2 }, children: "Instructions" }), _jsxs(Box, { display: "flex", gap: 2, marginBottom: 2, children: [_jsx(TextInput, { value: newInstruction, onChange: e => setNewInstruction(e.target.value), placeholder: "Add an instruction...", onKeyDown: e => e.key === 'Enter' && handleAdd(), sx: { flex: 1 } }), _jsx(Button, { onClick: handleAdd, leadingVisual: PlusIcon, size: "small", children: "Add" })] }), instructions.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No instructions yet" })) : (_jsx(Box, { as: "ol", paddingLeft: 3, margin: 0, children: instructions.map((instruction, index) => (_jsxs(Box, { as: "li", display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 2, children: [_jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: instruction }), _jsx(Button, { variant: "invisible", size: "small", onClick: () => onRemove(index), "aria-label": "Remove", children: _jsx(XIcon, { size: 12 }) })] }, index))) }))] }));
 };
 /**
  * RecipeDisplay Component
  * Main recipe editor/display
  */
 const RecipeDisplay = ({ recipe, onUpdate }) => {
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { children: [_jsx(TextInput, { value: recipe.title, onChange: e => onUpdate({ title: e.target.value }), placeholder: "Recipe title...", sx: {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Box, { children: [_jsx(TextInput, { value: recipe.title, onChange: e => onUpdate({ title: e.target.value }), placeholder: "Recipe title...", sx: {
                             fontSize: 2,
                             fontWeight: 'bold',
                             marginBottom: 2,
                             width: '100%',
-                        } }), _jsx(TextInput, { as: "textarea", value: recipe.description, onChange: e => onUpdate({ description: e.target.value }), placeholder: "Recipe description...", sx: { width: '100%', minHeight: '60px', resize: 'vertical' } })] }), _jsxs(Box, { sx: { display: 'flex', gap: 4, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(PersonIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Servings:" }), _jsx(TextInput, { type: "number", value: recipe.servings, onChange: e => onUpdate({ servings: parseInt(e.target.value) || 0 }), sx: { width: '60px' }, min: 1 })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ClockIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Prep:" }), _jsx(TextInput, { value: recipe.prepTime, onChange: e => onUpdate({ prepTime: e.target.value }), placeholder: "30 min", sx: { width: '80px' } })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(BeakerIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Cook:" }), _jsx(TextInput, { value: recipe.cookTime, onChange: e => onUpdate({ cookTime: e.target.value }), placeholder: "1 hour", sx: { width: '80px' } })] })] }), _jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: ['1fr', '1fr 1fr'],
-                    gap: 4,
-                }, children: [_jsx(IngredientsList, { ingredients: recipe.ingredients, onAdd: ingredient => onUpdate({ ingredients: [...recipe.ingredients, ingredient] }), onRemove: index => onUpdate({
+                        } }), _jsx(TextInput, { as: "textarea", value: recipe.description, onChange: e => onUpdate({ description: e.target.value }), placeholder: "Recipe description...", sx: { width: '100%', minHeight: '60px', resize: 'vertical' } })] }), _jsxs(Box, { display: "flex", gap: 4, flexWrap: "wrap", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(PersonIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Servings:" }), _jsx(TextInput, { type: "number", value: recipe.servings, onChange: e => onUpdate({ servings: parseInt(e.target.value) || 0 }), sx: { width: '60px' }, min: 1 })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(ClockIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Prep:" }), _jsx(TextInput, { value: recipe.prepTime, onChange: e => onUpdate({ prepTime: e.target.value }), placeholder: "30 min", sx: { width: '80px' } })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(BeakerIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Cook:" }), _jsx(TextInput, { value: recipe.cookTime, onChange: e => onUpdate({ cookTime: e.target.value }), placeholder: "1 hour", sx: { width: '80px' } })] })] }), _jsxs(Box, { display: "grid", gridTemplateColumns: ['1fr', '1fr 1fr'], gap: 4, children: [_jsx(IngredientsList, { ingredients: recipe.ingredients, onAdd: ingredient => onUpdate({ ingredients: [...recipe.ingredients, ingredient] }), onRemove: index => onUpdate({
                             ingredients: recipe.ingredients.filter((_, i) => i !== index),
                         }) }), _jsx(InstructionsList, { instructions: recipe.instructions, onAdd: instruction => onUpdate({ instructions: [...recipe.instructions, instruction] }), onRemove: index => onUpdate({
                             instructions: recipe.instructions.filter((_, i) => i !== index),
@@ -139,50 +125,14 @@ const AgUiSharedStateExample = () => {
     const handleClear = useCallback(() => {
         setRecipe(DEFAULT_RECIPE);
     }, []);
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                height: '100%',
-                overflow: 'auto',
-                backgroundColor: 'canvas.default',
-                padding: 4,
-            }, children: [_jsxs(Box, { sx: {
-                        maxWidth: '900px',
-                        margin: '0 auto',
-                    }, children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'flex-start',
-                                marginBottom: 4,
-                            }, children: [_jsxs(Box, { children: [_jsx(Text, { as: "h1", sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { height: "100%", overflow: "auto", backgroundColor: "canvas.default", padding: 4, children: [_jsxs(Box, { maxWidth: "900px", margin: "0 auto", children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 4, children: [_jsxs(Box, { children: [_jsx(Text, { as: "h1", sx: {
                                                 fontSize: 4,
                                                 fontWeight: 'bold',
                                                 marginBottom: 2,
                                             }, children: "AG-UI Shared State Example" }), _jsx(Text, { as: "p", sx: {
                                                 fontSize: 2,
                                                 color: 'fg.muted',
-                                            }, children: "Build a recipe together with AI. Both you and the agent can edit the recipe." })] }), _jsx(Button, { variant: "danger", onClick: handleClear, children: "Clear Recipe" })] }), _jsxs(Box, { sx: {
-                                padding: 4,
-                                backgroundColor: 'canvas.default',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                marginBottom: 4,
-                            }, children: [_jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        alignItems: 'center',
-                                        marginBottom: 3,
-                                    }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold' }, children: "Recipe Builder" }), _jsx(Label, { variant: "accent", children: "Shared State" })] }), _jsx(RecipeDisplay, { recipe: recipe, onUpdate: handleLocalUpdate })] }), _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 bidirectional shared state with AG-UI. The recipe state is shared between the frontend and the AI agent. When you make changes, they're available to the agent. When the agent updates the recipe (via", _jsx("code", { children: "display_recipe" }), " tool), it emits STATE_SNAPSHOT events that update the frontend."] }), _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: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), sharedStateEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: sharedStateEndpoint, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: "Build a recipe together with AI. Both you and the agent can edit the recipe." })] }), _jsx(Button, { variant: "danger", onClick: handleClear, children: "Clear Recipe" })] }), _jsxs(Box, { padding: 4, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", marginBottom: 4, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold' }, children: "Recipe Builder" }), _jsx(Label, { variant: "accent", children: "Shared State" })] }), _jsx(RecipeDisplay, { recipe: recipe, onUpdate: handleLocalUpdate })] }), _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 bidirectional shared state with AG-UI. The recipe state is shared between the frontend and the AI agent. When you make changes, they're available to the agent. When the agent updates the recipe (via", _jsx("code", { children: "display_recipe" }), " tool), it emits STATE_SNAPSHOT events that update the frontend."] }), _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: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), sharedStateEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: sharedStateEndpoint, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Pasta recipe',
                             message: 'Help me create a simple pasta recipe.',

package/lib/examples/AgUiToolsBasedGenUiExample.js

@@ -36,68 +36,31 @@ const PlanStepItem = ({ step, index, onClick, isInteractive = false }) => {
         completed: 'success.fg',
     };
     const isEnabled = step.enabled !== false;
-    return (_jsxs(Box, { as: isInteractive ? 'button' : 'div', onClick: isInteractive ? onClick : undefined, sx: {
-            display: 'flex',
-            gap: 2,
-            padding: 3,
-            borderRadius: 2,
-            backgroundColor: step.status === 'in_progress'
-                ? 'attention.subtle'
-                : step.status === 'completed'
+    return (_jsxs(Box, { as: isInteractive ? 'button' : 'div', onClick: isInteractive ? onClick : undefined, display: "flex", gap: 2, padding: 3, borderRadius: 2, backgroundColor: step.status === 'in_progress'
+            ? 'attention.subtle'
+            : step.status === 'completed'
+                ? 'success.subtle'
+                : isEnabled
+                    ? 'canvas.default'
+                    : 'canvas.default', border: "1px solid", borderColor: step.status === 'in_progress'
+            ? 'attention.muted'
+            : step.status === 'completed'
+                ? 'success.muted'
+                : isEnabled
+                    ? 'border.default'
+                    : 'border.muted', cursor: isInteractive ? 'pointer' : 'default', opacity: isEnabled ? 1 : 0.6, transition: "all 0.2s ease", textAlign: "left", width: "100%", hover: isInteractive
+            ? {
+                backgroundColor: step.status === 'completed'
                     ? 'success.subtle'
-                    : isEnabled
-                        ? 'canvas.default'
-                        : 'canvas.default',
-            border: '1px solid',
-            borderColor: step.status === 'in_progress'
-                ? 'attention.muted'
-                : step.status === 'completed'
-                    ? 'success.muted'
-                    : isEnabled
-                        ? 'border.default'
-                        : 'border.muted',
-            cursor: isInteractive ? 'pointer' : 'default',
-            opacity: isEnabled ? 1 : 0.6,
-            transition: 'all 0.2s ease',
-            textAlign: 'left',
-            width: '100%',
-            '&:hover': isInteractive
-                ? {
-                    backgroundColor: step.status === 'completed'
-                        ? 'success.subtle'
-                        : 'canvas.default',
-                    borderColor: 'accent.muted',
-                }
-                : {},
-        }, children: [_jsx(Box, { sx: {
-                    color: statusColor[step.status],
-                    flexShrink: 0,
-                    marginTop: '2px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: 20,
-                    height: 20,
-                }, children: isInteractive ? (_jsx(Box, { sx: {
-                        width: 18,
-                        height: 18,
-                        borderRadius: 1,
-                        border: '2px solid',
-                        borderColor: isEnabled ? 'accent.fg' : 'border.muted',
-                        backgroundColor: isEnabled ? 'accent.fg' : 'transparent',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }, children: isEnabled && _jsx(CheckIcon, { size: 12, fill: "white" }) })) : (statusIcon[step.status]) }), _jsx(Box, { sx: { flex: 1 }, children: _jsxs(Text, { sx: {
+                    : 'canvas.default',
+                borderColor: 'accent.muted',
+            }
+            : {}, children: [_jsx(Box, { color: statusColor[step.status], flexShrink: 0, marginTop: "2px", display: "flex", alignItems: "center", justifyContent: "center", width: 20, height: 20, children: isInteractive ? (_jsx(Box, { width: 18, height: 18, borderRadius: 1, border: "2px solid", borderColor: isEnabled ? 'accent.fg' : 'border.muted', backgroundColor: isEnabled ? 'accent.fg' : 'transparent', display: "flex", alignItems: "center", justifyContent: "center", children: isEnabled && _jsx(CheckIcon, { size: 12, fill: "white" }) })) : (statusIcon[step.status]) }), _jsx(Box, { flex: 1, children: _jsxs(Text, { sx: {
                         fontWeight: 'medium',
                         fontSize: 1,
                         textDecoration: !isEnabled ? 'line-through' : 'none',
                         color: !isEnabled ? 'fg.muted' : 'fg.default',
-                    }, children: [index + 1, ". ", step.description] }) }), step.status !== 'pending' && (_jsx(Box, { sx: {
-                    fontSize: 0,
-                    color: step.status === 'completed' ? 'success.fg' : 'attention.fg',
-                    textTransform: 'capitalize',
-                }, children: step.status === 'in_progress' ? 'In Progress' : step.status }))] }));
+                    }, children: [index + 1, ". ", step.description] }) }), step.status !== 'pending' && (_jsx(Box, { fontSize: 0, color: step.status === 'completed' ? 'success.fg' : 'attention.fg', textTransform: "capitalize", children: step.status === 'in_progress' ? 'In Progress' : step.status }))] }));
 };
 /**
  * PlanDisplay Component
@@ -105,14 +68,7 @@ const PlanStepItem = ({ step, index, onClick, isInteractive = false }) => {
  */
 const PlanDisplay = ({ plan, isInteractive = true, onStepToggle, onConfirm, onReject, decision, }) => {
     if (!plan) {
-        return (_jsxs(Box, { sx: {
-                textAlign: 'center',
-                padding: 5,
-                color: 'fg.muted',
-                border: '2px dashed',
-                borderColor: 'border.muted',
-                borderRadius: 2,
-            }, children: [_jsx(Text, { sx: { fontSize: 2, display: 'block', marginBottom: 2 }, children: "\uD83D\uDCCB No plan created yet" }), _jsx(Text, { sx: { fontSize: 1, display: 'block' }, children: "Ask the AI to create a plan for you." }), _jsx(Text, { sx: {
+        return (_jsxs(Box, { textAlign: "center", padding: 5, color: "fg.muted", border: "2px dashed", borderColor: "border.muted", borderRadius: 2, children: [_jsx(Text, { sx: { fontSize: 2, display: 'block', marginBottom: 2 }, children: "\uD83D\uDCCB No plan created yet" }), _jsx(Text, { sx: { fontSize: 1, display: 'block' }, children: "Ask the AI to create a plan for you." }), _jsx(Text, { sx: {
                         fontSize: 0,
                         display: 'block',
                         marginTop: 2,
@@ -123,34 +79,9 @@ const PlanDisplay = ({ plan, isInteractive = true, onStepToggle, onConfirm, onRe
     const completedSteps = plan.steps.filter(s => s.status === 'completed').length;
     const totalSteps = plan.steps.length;
     const progress = totalSteps > 0 ? (completedSteps / totalSteps) * 100 : 0;
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { marginBottom: 4 }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            marginBottom: 2,
-                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.default' }, children: "Select Steps" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: isInteractive
+    return (_jsxs(Box, { children: [_jsxs(Box, { marginBottom: 4, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.default' }, children: "Select Steps" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: isInteractive
                                     ? `${enabledSteps}/${totalSteps} selected`
-                                    : `${completedSteps}/${totalSteps} completed` })] }), _jsx(ProgressBar, { progress: progress })] }), _jsx(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 2,
-                    marginBottom: 4,
-                }, children: plan.steps.map((step, index) => (_jsx(PlanStepItem, { step: step, index: index, isInteractive: isInteractive && !decision, onClick: () => onStepToggle?.(index) }, index))) }), isInteractive && !decision && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    gap: 3,
-                    paddingTop: 3,
-                    borderTop: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [_jsxs(Button, { variant: "danger", onClick: onReject, size: "large", children: [_jsx(XIcon, { size: 16 }), _jsx(Text, { sx: { marginLeft: 1 }, children: "Reject" })] }), _jsxs(Button, { variant: "primary", onClick: onConfirm, size: "large", children: [_jsx(CheckIcon, { size: 16 }), _jsxs(Text, { sx: { marginLeft: 1 }, children: ["Confirm (", enabledSteps, ")"] })] })] })), decision && (_jsx(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    padding: 3,
-                    backgroundColor: decision === 'confirmed' ? 'success.subtle' : 'danger.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: decision === 'confirmed' ? 'success.muted' : 'danger.muted',
-                }, children: _jsx(Text, { sx: {
+                                    : `${completedSteps}/${totalSteps} completed` })] }), _jsx(ProgressBar, { progress: progress })] }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, marginBottom: 4, children: plan.steps.map((step, index) => (_jsx(PlanStepItem, { step: step, index: index, isInteractive: isInteractive && !decision, onClick: () => onStepToggle?.(index) }, index))) }), isInteractive && !decision && (_jsxs(Box, { display: "flex", justifyContent: "center", gap: 3, paddingTop: 3, borderTop: "1px solid", borderColor: "border.default", children: [_jsxs(Button, { variant: "danger", onClick: onReject, size: "large", children: [_jsx(XIcon, { size: 16 }), _jsx(Text, { sx: { marginLeft: 1 }, children: "Reject" })] }), _jsxs(Button, { variant: "primary", onClick: onConfirm, size: "large", children: [_jsx(CheckIcon, { size: 16 }), _jsxs(Text, { sx: { marginLeft: 1 }, children: ["Confirm (", enabledSteps, ")"] })] })] })), decision && (_jsx(Box, { display: "flex", justifyContent: "center", padding: 3, backgroundColor: decision === 'confirmed' ? 'success.subtle' : 'danger.subtle', borderRadius: 2, border: "1px solid", borderColor: decision === 'confirmed' ? 'success.muted' : 'danger.muted', children: _jsx(Text, { sx: {
                         fontWeight: 'semibold',
                         color: decision === 'confirmed' ? 'success.fg' : 'danger.fg',
                     }, children: decision === 'confirmed'
@@ -225,14 +156,7 @@ const AgUiToolsBasedGenUiExample = () => {
         setDecision('rejected');
         console.log('Plan rejected');
     }, []);
-    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,
@@ -240,26 +164,7 @@ const AgUiToolsBasedGenUiExample = () => {
                                 fontSize: 2,
                                 color: 'fg.muted',
                                 marginBottom: 4,
-                            }, children: "Watch the AI create and update a plan in real-time using STATE_SNAPSHOT and STATE_DELTA events." }), _jsxs(Box, { sx: {
-                                padding: 4,
-                                backgroundColor: 'canvas.default',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                marginBottom: 4,
-                                minHeight: '300px',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 3 }, children: "Generated Plan" }), _jsx(PlanDisplay, { plan: plan, isInteractive: true, onStepToggle: handleStepToggle, onConfirm: handleConfirm, onReject: handleReject, decision: decision })] }), _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 example shows how AG-UI enables tool-based generative UI. The agent has two tools: ", _jsx("code", { children: "create_plan" }), " emits a STATE_SNAPSHOT with the full plan, and", ' ', _jsx("code", { children: "update_plan_step" }), " emits STATE_DELTA events with JSON Patch operations for efficient incremental updates."] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "AG-UI Events Used:" }), _jsxs(Box, { as: "ul", sx: {
-                                                paddingLeft: 3,
-                                                marginTop: 1,
-                                                fontSize: 1,
-                                                color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), agenticGenerativeUiEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticGenerativeUiEndpoint, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
+                            }, children: "Watch the AI create and update a plan in real-time using STATE_SNAPSHOT and STATE_DELTA events." }), _jsxs(Box, { padding: 4, backgroundColor: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", marginBottom: 4, minHeight: "300px", children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 3 }, children: "Generated Plan" }), _jsx(PlanDisplay, { plan: plan, isInteractive: true, onStepToggle: handleStepToggle, onConfirm: handleConfirm, onReject: handleReject, decision: decision })] }), _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 example shows how AG-UI enables tool-based generative UI. The agent has two tools: ", _jsx("code", { children: "create_plan" }), " emits a STATE_SNAPSHOT with the full plan, and", ' ', _jsx("code", { children: "update_plan_step" }), " emits STATE_DELTA events with JSON Patch operations for efficient incremental updates."] }), _jsxs(Box, { marginTop: 3, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "AG-UI Events Used:" }), _jsxs(Box, { as: "ul", paddingLeft: 3, marginTop: 1, fontSize: 1, color: "fg.muted", children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), agenticGenerativeUiEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticGenerativeUiEndpoint, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Project plan',
                             message: 'Create a project plan for building a mobile app.',

package/lib/examples/AgentA2AExample.js

@@ -37,20 +37,6 @@ const AgentA2AExample = () => {
     const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
     const plugins = useMemo(() => [AgentA2APlugin, A2ASidebarPlugin], []);
     const remoteAgents = remoteAgentCount();
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                bg: 'canvas.default',
-            }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        px: 3,
-                        py: 2,
-                        borderBottom: '1px solid',
-                        borderColor: 'border.default',
-                        flexShrink: 0,
-                    }, children: [_jsx(BroadcastIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "A2A Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [remoteAgents, " A2A agent", remoteAgents === 1 ? '' : 's'] })] }), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(LoopEmbed, { serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", showAgentVariants: true, agentId: agentName, defaultEditor: "none", showHeader: true, plugins: plugins }) })] }) }));
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(BroadcastIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "A2A Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [remoteAgents, " A2A agent", remoteAgents === 1 ? '' : 's'] })] }), _jsx(Box, { flex: 1, minHeight: 0, children: _jsx(LoopEmbed, { serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", showAgentVariants: true, agentId: agentName, defaultEditor: "none", showHeader: true, plugins: plugins }) })] }) }));
 };
 export default AgentA2AExample;

package/lib/examples/AgentA2ATeamExample.js

@@ -114,19 +114,11 @@ function AgentA2ATeam() {
     const accountingWhere = accountingKey
         ? `on a runtime, ${new URL(accountingUrl).host}, with a temporary key`
         : `on a runtime, ${new URL(accountingUrl).host}`;
-    return (_jsxs(Box, { sx: { p: 4, maxWidth: 1080, mx: 'auto' }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agents A2A Team" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, children: [TEAM.emoji, " ", _jsx("strong", { children: TEAM.name }), ": ", TEAM.description] }), ((anonymous.status === 'active' && anonymous.expiresAt) ||
-                (accountingKeyClock && !accountingKeyEnded)) && (_jsxs(Box, { sx: { display: 'flex', gap: 4, flexWrap: 'wrap', mb: 3 }, children: [anonymous.status === 'active' && anonymous.expiresAt && (_jsx(AnonymousKeyTimer, { expiresAt: anonymous.expiresAt, grantedMs: anonymous.grantedMs, label: `${SALES.name}'s trial key`, onExpire: () => useAnonymousSessionStore.getState().expire() })), accountingKeyClock && !accountingKeyEnded && (_jsx(AnonymousKeyTimer, { expiresAt: accountingKeyClock.expiresAt, grantedMs: accountingKeyClock.grantedMs, label: `${ACCOUNTING.name}'s temporary key`, onExpire: () => setAccountingKeyEnded(true) }))] })), anonymous.status === 'expired' && (_jsx(Box, { sx: { mb: 3 }, children: _jsx(AnonymousKeyExpired, { agentName: SALES.name, 
+    return (_jsxs(Box, { p: 4, maxWidth: 1080, mx: "auto", children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agents A2A Team" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, children: [TEAM.emoji, " ", _jsx("strong", { children: TEAM.name }), ": ", TEAM.description] }), ((anonymous.status === 'active' && anonymous.expiresAt) ||
+                (accountingKeyClock && !accountingKeyEnded)) && (_jsxs(Box, { display: "flex", gap: 4, flexWrap: "wrap", mb: 3, children: [anonymous.status === 'active' && anonymous.expiresAt && (_jsx(AnonymousKeyTimer, { expiresAt: anonymous.expiresAt, grantedMs: anonymous.grantedMs, label: `${SALES.name}'s trial key`, onExpire: () => useAnonymousSessionStore.getState().expire() })), accountingKeyClock && !accountingKeyEnded && (_jsx(AnonymousKeyTimer, { expiresAt: accountingKeyClock.expiresAt, grantedMs: accountingKeyClock.grantedMs, label: `${ACCOUNTING.name}'s temporary key`, onExpire: () => setAccountingKeyEnded(true) }))] })), anonymous.status === 'expired' && (_jsx(Box, { mb: 3, children: _jsx(AnonymousKeyExpired, { agentName: SALES.name, 
                     // Sales runs in this page: what ended is its model's key, and
                     // signing in gives it the person's own.
-                    onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), accountingKeyEnded && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: [ACCOUNTING.name, "\u2019s temporary key has ended: it no longer answers. Make a new one with", ' ', _jsx("code", { children: "examples/sales-accounting-a2a/make_temp_key.py" }), " and reload."] })), needsSignIn && (_jsx(Flash, { variant: "warning", sx: { mb: 3 }, children: "Sales asks its model through the Datalayer inference service: sign in, or wait for a visitor's trial key." })), peerError && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: ["Accounting is not reachable at ", accountingUrl, ": ", peerError, " Serve it with", ' ', _jsx("code", { children: "python examples/sales-accounting-a2a/serve_accounting.py" }), ' ', "on the local server, or", ' ', _jsx("code", { children: "loop apps run accounting.yaml --cloud --a2a" }), " and set", ' ', _jsx("code", { children: "VITE_A2A_ACCOUNTING_URL" }), "."] })), _jsx(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.subtle',
-                    px: 2,
-                    pt: 2,
-                    mb: 3,
-                }, children: _jsx(SceneView, { members: sceneMembers, tracer: inspector, emptyText: "Ask Sales: what it says to Accounting, what Accounting reads in Odoo and answers, line by line, shows here.", children: _jsx(A2ATeamGraph, { entry: {
+                    onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), accountingKeyEnded && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: [ACCOUNTING.name, "\u2019s temporary key has ended: it no longer answers. Make a new one with", ' ', _jsx("code", { children: "examples/sales-accounting-a2a/make_temp_key.py" }), " and reload."] })), needsSignIn && (_jsx(Flash, { variant: "warning", sx: { mb: 3 }, children: "Sales asks its model through the Datalayer inference service: sign in, or wait for a visitor's trial key." })), peerError && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: ["Accounting is not reachable at ", accountingUrl, ": ", peerError, " Serve it with", ' ', _jsx("code", { children: "python examples/sales-accounting-a2a/serve_accounting.py" }), ' ', "on the local server, or", ' ', _jsx("code", { children: "loop apps run accounting.yaml --cloud --a2a" }), " and set", ' ', _jsx("code", { children: "VITE_A2A_ACCOUNTING_URL" }), "."] })), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", px: 2, pt: 2, mb: 3, children: _jsx(SceneView, { members: sceneMembers, tracer: inspector, emptyText: "Ask Sales: what it says to Accounting, what Accounting reads in Odoo and answers, line by line, shows here.", children: _jsx(A2ATeamGraph, { entry: {
                             id: SALES.id,
                             name: SALES.name,
                             emoji: SALES.emoji,
@@ -178,30 +170,14 @@ function AgentA2ATeam() {
                             },
                         }, flow: team.flow, calls: team.calls, 
                         // Room for the balloons: suggestions, *more* and a notebook.
-                        balloonRoom: 320, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _jsx(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'],
-                    gap: 3,
-                    mb: 3,
-                }, "data-team-inspectors": "", children: [SALES, ACCOUNTING].map(member => (_jsxs(Box, { sx: { minWidth: 0 }, "data-team-inspector": member.id, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: [member.emoji, " ", member.name, "\u2019s Agent Inspector"] }), _jsx(AgentInspector, { tracer: inspector, agent: member.name, compact: true, maxHeight: 360, exportName: `agent-inspector-${member.id}`, emptyText: member === SALES
+                        balloonRoom: 320, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }) }), _jsx(Box, { ref: notebookArea, mb: team.notebook ? 3 : 0, "data-team-notebook-placement": "under-graph" }), _jsx(Box, { display: "grid", gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'], gap: 3, mb: 3, "data-team-inspectors": "", children: [SALES, ACCOUNTING].map(member => (_jsxs(Box, { minWidth: 0, "data-team-inspector": member.id, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: [member.emoji, " ", member.name, "\u2019s Agent Inspector"] }), _jsx(AgentInspector, { tracer: inspector, agent: member.name, compact: true, maxHeight: 360, exportName: `agent-inspector-${member.id}`, emptyText: member === SALES
                                 ? 'Its model turns, its call to Accounting and the A2A requests it sends, with what came back, show here.'
-                                : 'The A2A requests sent to it, its Odoo MCP calls and what it sends back show here.' })] }, member.id))) }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { flex: '1 1 420px', minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: ["Or choose one of ", SALES.name, "\u2019s suggestions in its balloon."] }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
+                                : 'The A2A requests sent to it, its Odoo MCP calls and what it sends back show here.' })] }, member.id))) }), _jsxs(Box, { display: "flex", gap: 3, flexWrap: "wrap", children: [_jsxs(Box, { flex: "1 1 420px", minWidth: 0, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: ["Or choose one of ", SALES.name, "\u2019s suggestions in its balloon."] }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
                                     if (event.key === 'Enter' && !event.shiftKey) {
                                         event.preventDefault();
                                         send(draft);
                                     }
-                                } }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { variant: "primary", disabled: !team.ready || team.busy || !draft.trim(), onClick: () => send(draft), children: "Ask" }), team.busy && _jsx(Button, { onClick: team.stop, children: "Stop" })] }), _jsx(Box, { sx: { mt: 3 }, "data-team-conversation": "", children: team.turns.map((turn, index) => (_jsxs(Box, { sx: {
-                                        p: 2,
-                                        mb: 2,
-                                        borderRadius: 2,
-                                        bg: turn.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
-                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: turn.role === 'user' ? 'You' : SALES.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsx(Box, { sx: { flex: '1 1 360px', minWidth: 0 }, children: !team.notebook && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "The report" }), _jsx(Box, { sx: {
-                                        p: 3,
-                                        border: '1px solid',
-                                        borderColor: 'border.default',
-                                        borderRadius: 2,
-                                        minHeight: 120,
-                                    }, "data-team-report": "", children: team.report ? (_jsx(Streamdown, { children: team.report })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "The report Accounting returns appears here, as it returned it, or as a notebook to run when it gives one." })) })] })) })] })] }));
+                                } }), _jsxs(Box, { display: "flex", gap: 2, mt: 2, children: [_jsx(Button, { variant: "primary", disabled: !team.ready || team.busy || !draft.trim(), onClick: () => send(draft), children: "Ask" }), team.busy && _jsx(Button, { onClick: team.stop, children: "Stop" })] }), _jsx(Box, { mt: 3, "data-team-conversation": "", children: team.turns.map((turn, index) => (_jsxs(Box, { p: 2, mb: 2, borderRadius: 2, bg: turn.role === 'user' ? 'accent.subtle' : 'canvas.subtle', children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: turn.role === 'user' ? 'You' : SALES.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsx(Box, { flex: "1 1 360px", minWidth: 0, children: !team.notebook && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "The report" }), _jsx(Box, { p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, minHeight: 120, "data-team-report": "", children: team.report ? (_jsx(Streamdown, { children: team.report })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "The report Accounting returns appears here, as it returned it, or as a notebook to run when it gives one." })) })] })) })] })] }));
 }
 export function AgentA2ATeamExample() {
     return (_jsx(ThemedProvider, { children: _jsx(AgentA2ATeam, {}) }));