@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/examples/AssistantExample.js

@@ -153,18 +153,18 @@ const AssistantExample = () => {
     };
     const isClippyJs = typeof character !== 'string' &&
         Object.values(clippyJs).includes(character);
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', bg: 'canvas.default', p: 4 }, children: [_jsxs(Box, { sx: { maxWidth: 720, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Assistant" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "The chat as a character on the page. It greets you, acts out what the agent is doing, and says the agent\u2019s words in a balloon while the conversation is closed. Click it to talk, drag it to move it, hover it to send it away." }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [CATALOGUE.map(option => (_jsx(Button, { variant: option.id === character ? 'primary' : 'default', onClick: () => {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { minHeight: "100vh", bg: "canvas.default", p: 4, children: [_jsxs(Box, { maxWidth: 720, mx: "auto", children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Assistant" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "The chat as a character on the page. It greets you, acts out what the agent is doing, and says the agent\u2019s words in a balloon while the conversation is closed. Click it to talk, drag it to move it, hover it to send it away." }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [CATALOGUE.map(option => (_jsx(Button, { variant: option.id === character ? 'primary' : 'default', onClick: () => {
                                         setCharacter(option.id);
                                         setLoadError(undefined);
                                     }, "aria-pressed": option.id === character, "data-assistant-character": option.id, children: option.name }, option.id))), pixel && (_jsxs(Button, { variant: character === pixel ? 'primary' : 'default', onClick: () => {
                                         setCharacter(pixel);
                                         setLoadError(undefined);
-                                    }, "aria-pressed": character === pixel, "data-assistant-character": "sprite", children: [pixel.name, " (sprite)"] }))] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The balloon" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: [_jsx("strong", { children: "History" }), ": the whole conversation, counted in its header \u2014 closed, every message listed and scrolled; open, the composer last. ", _jsx("strong", { children: "Current" }), ": only what it says or does now \u2014 the answer as it is written, or the tool it calls (\u201CUsing current_time\u2026\u201D) \u2014 in one compact balloon. Either way, a tool call is said in the balloon."] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, "data-assistant-balloon-toggle": "", children: [_jsx(Text, { id: "assistant-balloon-history", sx: { fontWeight: 'semibold' }, children: "History" }), _jsx(ToggleSwitch, { "aria-labelledby": "assistant-balloon-history", size: "small", checked: balloon === 'history', 
+                                    }, "aria-pressed": character === pixel, "data-assistant-character": "sprite", children: [pixel.name, " (sprite)"] }))] }), _jsxs(Box, { as: "section", mt: 4, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The balloon" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: [_jsx("strong", { children: "History" }), ": the whole conversation, counted in its header \u2014 closed, every message listed and scrolled; open, the composer last. ", _jsx("strong", { children: "Current" }), ": only what it says or does now \u2014 the answer as it is written, or the tool it calls (\u201CUsing current_time\u2026\u201D) \u2014 in one compact balloon. Either way, a tool call is said in the balloon."] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, "data-assistant-balloon-toggle": "", children: [_jsx(Text, { id: "assistant-balloon-history", sx: { fontWeight: 'semibold' }, children: "History" }), _jsx(ToggleSwitch, { "aria-labelledby": "assistant-balloon-history", size: "small", checked: balloon === 'history', 
                                             // Controlled, Primer's switch flips only through its click.
-                                            onClick: () => setBalloon(balloon === 'history' ? 'current' : 'history') }), _jsx(Text, { "aria-live": "polite", "data-toggle-state": "", sx: { color: 'fg.muted' }, children: balloon === 'history' ? 'History' : 'Current' })] })] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The clippy.js characters" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["Fetched when picked from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr and read as data by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: CLIPPY_JS_CHARACTERS.map(name => {
+                                            onClick: () => setBalloon(balloon === 'history' ? 'current' : 'history') }), _jsx(Text, { "aria-live": "polite", "data-toggle-state": "", sx: { color: 'fg.muted' }, children: balloon === 'history' ? 'History' : 'Current' })] })] }), _jsxs(Box, { as: "section", mt: 4, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The clippy.js characters" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["Fetched when picked from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr and read as data by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: CLIPPY_JS_CHARACTERS.map(name => {
                                         const picked = clippyJs[name] !== undefined && character === clippyJs[name];
                                         return (_jsx(Button, { variant: picked ? 'primary' : 'default', onClick: () => void pickClippyJs(name), disabled: fetching !== undefined, "aria-pressed": picked, "data-assistant-character": `clippy-js-${name.toLowerCase()}`, children: fetching === name ? `${name}…` : name }, name));
-                                    }) })] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "A character you bring" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["The characters of Microsoft Office \u2014 Clippy, Merlin, Links and the others \u2014 are Microsoft\u2019s. Load only a character file you have the right to use: a Microsoft Agent ", _jsx("code", { children: ".acs" }), " file, or a clippy.js character\u2019s ", _jsx("code", { children: "agent.js" }), " and map image. It is read in this page and sent nowhere."] }), _jsx("input", { type: "file", multiple: true, accept: CHARACTER_FILES_ACCEPT, "aria-label": "Character files", onChange: async (event) => {
+                                    }) })] }), _jsxs(Box, { as: "section", mt: 4, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "A character you bring" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["The characters of Microsoft Office \u2014 Clippy, Merlin, Links and the others \u2014 are Microsoft\u2019s. Load only a character file you have the right to use: a Microsoft Agent ", _jsx("code", { children: ".acs" }), " file, or a clippy.js character\u2019s ", _jsx("code", { children: "agent.js" }), " and map image. It is read in this page and sent nowhere."] }), _jsx("input", { type: "file", multiple: true, accept: CHARACTER_FILES_ACCEPT, "aria-label": "Character files", onChange: async (event) => {
                                         const files = Array.from(event.target.files ?? []);
                                         if (!files.length) {
                                             return;
@@ -178,7 +178,7 @@ const AssistantExample = () => {
                                         }
                                     } }), loadError && (_jsx(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mt: 2 }, children: loadError })), typeof character !== 'string' &&
                                     character !== pixel &&
-                                    !isClippyJs && (_jsxs(Text, { as: "p", sx: { mt: 2 }, children: ["Playing ", character.name, "."] }))] })] }), agentError && (_jsx(Box, { sx: { maxWidth: 720, mx: 'auto', mt: 3 }, children: _jsx(Text, { as: "p", role: "alert", sx: { color: 'danger.fg' }, children: agentError }) })), agentReady && (_jsx(ChatFloating, { defaultViewMode: "assistant", assistantCharacter: drawn, balloonDisplay: balloon, protocol: "ag-ui", endpoint: `${SERVER}/api/v1/ag-ui/${AGENT_ID}/`, title: "Assistant", description: "Hello! Ask me anything about this page.", position: "bottom-right", useStore: false, 
+                                    !isClippyJs && (_jsxs(Text, { as: "p", sx: { mt: 2 }, children: ["Playing ", character.name, "."] }))] })] }), agentError && (_jsx(Box, { maxWidth: 720, mx: "auto", mt: 3, children: _jsx(Text, { as: "p", role: "alert", sx: { color: 'danger.fg' }, children: agentError }) })), agentReady && (_jsx(ChatFloating, { defaultViewMode: "assistant", assistantCharacter: drawn, balloonDisplay: balloon, protocol: "ag-ui", endpoint: `${SERVER}/api/v1/ag-ui/${AGENT_ID}/`, title: "Assistant", description: "Hello! Ask me anything about this page.", position: "bottom-right", useStore: false, 
                     // Ask a decision beside the composer: Jev, through this server.
                     decisions: { serverUrl: SERVER }, 
                     // Right-click the character: its menu.

package/lib/examples/AssistantGalleryExample.js

@@ -60,18 +60,7 @@ function ModePanel({ mode, character, pose, presence, balloon, insist, onToggle,
         : presence === 'arriving'
             ? 'greeting'
             : stateOfPose(pose);
-    return (_jsxs(Box, { ref: panelRef, "data-gallery-mode": mode, sx: {
-            position: 'relative',
-            flex: '1 1 320px',
-            minWidth: 0,
-            height: PANEL_HEIGHT,
-            bg: 'canvas.default',
-            color: 'fg.default',
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            overflow: 'visible',
-        }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { ref: panelRef, "data-gallery-mode": mode, position: "relative", flex: "1 1 320px", minWidth: 0, height: PANEL_HEIGHT, bg: "canvas.default", color: "fg.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "visible", children: [_jsx(Text, { sx: {
                     position: 'absolute',
                     top: 2,
                     left: 3,
@@ -80,11 +69,7 @@ function ModePanel({ mode, character, pose, presence, balloon, insist, onToggle,
                     color: 'fg.muted',
                     textTransform: 'uppercase',
                     letterSpacing: '0.04em',
-                }, children: mode }), presence === 'away' ? (_jsxs(Box, { sx: {
-                    position: 'absolute',
-                    left: spot.left,
-                    top: spot.top + STAGE_SIZE / 2 - 16,
-                }, children: [_jsxs(Button, { size: "small", onClick: onCallBack, "data-gallery-call-back": "", children: ["Call ", character.name, " back"] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1 }, children: ["Sent away ", AWAY_WORDS[away], "."] })] })) : (_jsx(AssistantStage, { character: character.character, state: state, size: STAGE_SIZE, place: { position: 'absolute', left: spot.left, top: spot.top }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: false, onToggle: onToggle, balloon: presence === 'here' ? balloon : undefined, balloonDisplay: display, expandTarget: expandTarget, insist: insist, onDismiss: onDismiss }, `${character.id}-${replay}`)), pose === 'aside' && presence === 'here' && (_jsx(GalleryObstacle, { sx: {
+                }, children: mode }), presence === 'away' ? (_jsxs(Box, { position: "absolute", left: spot.left, top: spot.top + STAGE_SIZE / 2 - 16, children: [_jsxs(Button, { size: "small", onClick: onCallBack, "data-gallery-call-back": "", children: ["Call ", character.name, " back"] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1 }, children: ["Sent away ", AWAY_WORDS[away], "."] })] })) : (_jsx(AssistantStage, { character: character.character, state: state, size: STAGE_SIZE, place: { position: 'absolute', left: spot.left, top: spot.top }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: false, onToggle: onToggle, balloon: presence === 'here' ? balloon : undefined, balloonDisplay: display, expandTarget: expandTarget, insist: insist, onDismiss: onDismiss }, `${character.id}-${replay}`)), pose === 'aside' && presence === 'here' && (_jsx(GalleryObstacle, { sx: {
                     left: spot.left - 12,
                     top: spot.top - 12,
                     width: STAGE_SIZE + 24,
@@ -93,7 +78,7 @@ function ModePanel({ mode, character, pose, presence, balloon, insist, onToggle,
 }
 /** A two-way choice as a Primer toggle: its label, the switch, what is on. */
 function GalleryToggle({ id, label, on, onChange, state, ...rest }) {
-    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, ...rest, children: [_jsx(Text, { id: id, sx: { fontSize: 1, fontWeight: 'semibold' }, children: label }), _jsx(ToggleSwitch, { "aria-labelledby": id, size: "small", checked: on, 
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, ...rest, children: [_jsx(Text, { id: id, sx: { fontSize: 1, fontWeight: 'semibold' }, children: label }), _jsx(ToggleSwitch, { "aria-labelledby": id, size: "small", checked: on, 
                 // Controlled, Primer's switch flips only through its click.
                 onClick: () => onChange(!on) }), _jsx(Text, { "aria-live": "polite", "data-toggle-state": "", sx: { fontSize: 1, color: 'fg.muted' }, children: state })] }));
 }
@@ -102,12 +87,7 @@ function InModes({ modes, stacked = false, children, }) {
     const { theme } = useExampleThemeStore();
     const config = themeConfigs[theme] ?? themeConfigs.loop;
     const shown = modes === 'both' ? ['light', 'dark'] : [modes];
-    return (_jsx(Box, { sx: {
-            display: 'flex',
-            flexDirection: stacked ? 'column' : 'row',
-            gap: 3,
-            flexWrap: 'wrap',
-        }, children: shown.map(mode => (_jsx(Box, { sx: { flex: '1 1 320px', minWidth: 0 }, children: _jsx(DatalayerThemeProvider, { colorMode: mode, theme: config.primerTheme, themeStyles: config.themeStyles, children: children(mode) }) }, mode))) }));
+    return (_jsx(Box, { display: "flex", flexDirection: stacked ? 'column' : 'row', gap: 3, flexWrap: "wrap", children: shown.map(mode => (_jsx(Box, { flex: "1 1 320px", minWidth: 0, children: _jsx(DatalayerThemeProvider, { colorMode: mode, theme: config.primerTheme, themeStyles: config.themeStyles, children: children(mode) }) }, mode))) }));
 }
 const AssistantGalleryExample = () => {
     const { characters: ours, problem } = useGalleryCharacters();
@@ -187,39 +167,15 @@ const AssistantGalleryExample = () => {
         withNotebook ||
         pose === 'waiting' ||
         pose === 'paused';
-    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: {
-                minHeight: '100vh',
-                bg: 'canvas.default',
-                color: 'fg.default',
-                p: 4,
-            }, children: _jsxs(Box, { sx: { maxWidth: 1200, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Assistant gallery" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["Every character in every state the floating assistant acts, with its balloon, in light and dark. Datalayer\u2019s four and the owl are what the enabled plugins contribute to", ' ', _jsx("code", { children: "loop.assistant.character" }), "; Pixel is a test sprite of our own, read through the clippy.js reader. No agent is behind it: the words are a sample conversation."] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["The characters clippy.js publishes \u2014 Clippy, Merlin, Links, Rover and the others \u2014 are loaded on request from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr (about 15 MB) and read by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsxs(Box, { as: "section", "aria-label": "Gallery controls", sx: {
-                            display: 'grid',
-                            gap: 3,
-                            mb: 4,
-                            p: 3,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            bg: 'canvas.subtle',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    gap: 3,
-                                    flexWrap: 'wrap',
-                                    alignItems: 'center',
-                                }, children: [_jsxs(SegmentedControl, { "aria-label": "View", children: [_jsx(SegmentedControl.Button, { selected: view === 'stage', onClick: () => setView('stage'), children: "One at a time" }), _jsx(SegmentedControl.Button, { selected: view === 'grid', onClick: () => setView('grid'), "data-gallery-view": "grid", children: "Grid" })] }), _jsx(SegmentedControl, { "aria-label": "Colour mode", children: ['light', 'dark', 'both'].map(option => (_jsx(SegmentedControl.Button, { selected: modes === option, onClick: () => setModes(option), children: option === 'both'
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { minHeight: "100vh", bg: "canvas.default", color: "fg.default", p: 4, children: _jsxs(Box, { maxWidth: 1200, mx: "auto", children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Assistant gallery" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["Every character in every state the floating assistant acts, with its balloon, in light and dark. Datalayer\u2019s four and the owl are what the enabled plugins contribute to", ' ', _jsx("code", { children: "loop.assistant.character" }), "; Pixel is a test sprite of our own, read through the clippy.js reader. No agent is behind it: the words are a sample conversation."] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["The characters clippy.js publishes \u2014 Clippy, Merlin, Links, Rover and the others \u2014 are loaded on request from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr (about 15 MB) and read by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsxs(Box, { as: "section", "aria-label": "Gallery controls", display: "grid", gap: 3, mb: 4, p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", children: [_jsxs(Box, { display: "flex", gap: 3, flexWrap: "wrap", alignItems: "center", children: [_jsxs(SegmentedControl, { "aria-label": "View", children: [_jsx(SegmentedControl.Button, { selected: view === 'stage', onClick: () => setView('stage'), children: "One at a time" }), _jsx(SegmentedControl.Button, { selected: view === 'grid', onClick: () => setView('grid'), "data-gallery-view": "grid", children: "Grid" })] }), _jsx(SegmentedControl, { "aria-label": "Colour mode", children: ['light', 'dark', 'both'].map(option => (_jsx(SegmentedControl.Button, { selected: modes === option, onClick: () => setModes(option), children: option === 'both'
                                                 ? 'Side by side'
                                                 : option === 'light'
                                                     ? 'Light'
-                                                    : 'Dark' }, option))) }), _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: still, onChange: event => setStill(event.target.checked) }), _jsx(FormControl.Label, { children: "Reduced motion" })] }), _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: withClippyJs, onChange: event => setWithClippyJs(event.target.checked), "data-gallery-clippy-js": "" }), _jsxs(FormControl.Label, { children: ["clippy.js characters", clippyJs.loading ? ' (loading…)' : ''] })] }), _jsx(Button, { onClick: () => setReplay(replay + 1), children: "Replay the motions" })] }), view === 'stage' && (_jsxs(_Fragment, { children: [_jsx(Box, { role: "group", "aria-label": "Character", sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: characters.map(option => (_jsx(Button, { size: "small", variant: option.id === character.id ? 'primary' : 'default', "aria-pressed": option.id === character.id, "data-gallery-character": option.id, onClick: () => setCharacterId(option.id), children: option.name }, option.id))) }), _jsx(Box, { role: "group", "aria-label": "State", sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: GALLERY_POSES.map(option => (_jsx(Button, { size: "small", variant: option === pose ? 'primary' : 'default', "aria-pressed": option === pose, "data-gallery-pose": option, onClick: () => {
+                                                    : 'Dark' }, option))) }), _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: still, onChange: event => setStill(event.target.checked) }), _jsx(FormControl.Label, { children: "Reduced motion" })] }), _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: withClippyJs, onChange: event => setWithClippyJs(event.target.checked), "data-gallery-clippy-js": "" }), _jsxs(FormControl.Label, { children: ["clippy.js characters", clippyJs.loading ? ' (loading…)' : ''] })] }), _jsx(Button, { onClick: () => setReplay(replay + 1), children: "Replay the motions" })] }), view === 'stage' && (_jsxs(_Fragment, { children: [_jsx(Box, { role: "group", "aria-label": "Character", display: "flex", gap: 2, flexWrap: "wrap", children: characters.map(option => (_jsx(Button, { size: "small", variant: option.id === character.id ? 'primary' : 'default', "aria-pressed": option.id === character.id, "data-gallery-character": option.id, onClick: () => setCharacterId(option.id), children: option.name }, option.id))) }), _jsx(Box, { role: "group", "aria-label": "State", display: "flex", gap: 2, flexWrap: "wrap", children: GALLERY_POSES.map(option => (_jsx(Button, { size: "small", variant: option === pose ? 'primary' : 'default', "aria-pressed": option === pose, "data-gallery-pose": option, onClick: () => {
                                                 setPose(option);
                                                 setDecision(undefined);
                                                 setReplay(replay + 1);
-                                            }, children: GALLERY_POSE_LABELS[option] }, option))) }), _jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            gap: 2,
-                                            flexWrap: 'wrap',
-                                            alignItems: 'center',
-                                        }, children: [_jsx(GalleryToggle, { id: "gallery-balloon-history", label: "History", on: display === 'history', onChange: on => setDisplay(on ? 'history' : 'current'), state: display === 'history' ? 'History' : 'Current', "data-gallery-balloon-toggle": "" }), _jsx(GalleryToggle, { id: "gallery-expand-into-page", label: "Expand into the page", on: expandIntoPage, onChange: setExpandIntoPage, state: expandIntoPage ? 'The page area' : 'An overlay', "data-gallery-expand-toggle": "" }), _jsx(Button, { onClick: say, "data-gallery-say": "", children: "Say something" }), _jsx(Button, { "data-gallery-tool": toolPhase ?? 'none', onClick: () => setToolPhase(toolPhase === undefined
+                                            }, children: GALLERY_POSE_LABELS[option] }, option))) }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center", children: [_jsx(GalleryToggle, { id: "gallery-balloon-history", label: "History", on: display === 'history', onChange: on => setDisplay(on ? 'history' : 'current'), state: display === 'history' ? 'History' : 'Current', "data-gallery-balloon-toggle": "" }), _jsx(GalleryToggle, { id: "gallery-expand-into-page", label: "Expand into the page", on: expandIntoPage, onChange: setExpandIntoPage, state: expandIntoPage ? 'The page area' : 'An overlay', "data-gallery-expand-toggle": "" }), _jsx(Button, { onClick: say, "data-gallery-say": "", children: "Say something" }), _jsx(Button, { "data-gallery-tool": toolPhase ?? 'none', onClick: () => setToolPhase(toolPhase === undefined
                                                     ? 'running'
                                                     : toolPhase === 'running'
                                                         ? 'done'
@@ -231,19 +187,6 @@ const AssistantGalleryExample = () => {
                                                         ? 'Tool done'
                                                         : toolPhase === 'done'
                                                             ? 'Tool failed'
-                                                            : 'No tool' }), _jsx(Button, { "data-gallery-notebook": withNotebook ? 'on' : 'off', "aria-pressed": withNotebook, onClick: () => setWithNotebook(!withNotebook), children: withNotebook ? 'Take the notebook' : 'Give a notebook' }), saying !== undefined && (_jsx(Button, { variant: "invisible", onClick: () => setSaying(undefined), children: "Hush" })), presence === 'away' ? (_jsx(Button, { onClick: callBack, children: "Call it back" })) : (_jsx(Button, { onClick: () => sendAway('page'), disabled: presence !== 'here', "data-gallery-send-away": "", children: "Send it away" })), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Drag the character to move it; hover it for its own send-away menu." }), decision && (_jsx(Text, { role: "status", sx: { fontSize: 1 }, children: decision }))] })] }))] }), problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["The test sprite could not be read: ", problem] })), clippyJs.problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["A clippy.js character could not be read: ", clippyJs.problem] })), _jsx(Still, { still: still, children: view === 'stage' ? (_jsx(InModes, { modes: modes, children: mode => (_jsx(ModePanel, { mode: mode, character: character, pose: pose, presence: presence, balloon: balloon, insist: insist, onToggle: () => saying === undefined ? say() : setSaying(undefined), onDismiss: sendAway, onCallBack: callBack, away: away, replay: replay, display: display, expandTarget: expandIntoPage ? expandArea : undefined })) })) : (_jsx(InModes, { modes: modes, stacked: true, children: mode => (_jsxs(Box, { "data-gallery-mode": mode, sx: {
-                                    bg: 'canvas.default',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    p: 2,
-                                    overflowX: 'auto',
-                                }, children: [_jsx(AssistantGalleryGrid, { characters: characters }, replay), _jsx(GalleryBalloons, { character: character })] })) })) }), view === 'stage' && expandIntoPage && (_jsxs(Box, { as: "section", "aria-label": "Expanded here", sx: {
-                            mt: 4,
-                            p: 3,
-                            border: '1px dashed',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                        }, children: [_jsxs(Text, { as: "p", sx: { m: 0, mb: 2, color: 'fg.muted', fontSize: 1 }, children: ["Expanded here: what the balloon\u2019s ", _jsx("em", { children: "Expand" }), " draws large when the page names an area for it \u2014 the notebook, to edit and run on the browser sandbox. Without one, it opens in an overlay."] }), _jsx(Box, { ref: expandArea, "data-gallery-expand-target": "" })] }))] }) }) }));
+                                                            : 'No tool' }), _jsx(Button, { "data-gallery-notebook": withNotebook ? 'on' : 'off', "aria-pressed": withNotebook, onClick: () => setWithNotebook(!withNotebook), children: withNotebook ? 'Take the notebook' : 'Give a notebook' }), saying !== undefined && (_jsx(Button, { variant: "invisible", onClick: () => setSaying(undefined), children: "Hush" })), presence === 'away' ? (_jsx(Button, { onClick: callBack, children: "Call it back" })) : (_jsx(Button, { onClick: () => sendAway('page'), disabled: presence !== 'here', "data-gallery-send-away": "", children: "Send it away" })), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Drag the character to move it; hover it for its own send-away menu." }), decision && (_jsx(Text, { role: "status", sx: { fontSize: 1 }, children: decision }))] })] }))] }), problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["The test sprite could not be read: ", problem] })), clippyJs.problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["A clippy.js character could not be read: ", clippyJs.problem] })), _jsx(Still, { still: still, children: view === 'stage' ? (_jsx(InModes, { modes: modes, children: mode => (_jsx(ModePanel, { mode: mode, character: character, pose: pose, presence: presence, balloon: balloon, insist: insist, onToggle: () => saying === undefined ? say() : setSaying(undefined), onDismiss: sendAway, onCallBack: callBack, away: away, replay: replay, display: display, expandTarget: expandIntoPage ? expandArea : undefined })) })) : (_jsx(InModes, { modes: modes, stacked: true, children: mode => (_jsxs(Box, { "data-gallery-mode": mode, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, overflowX: "auto", children: [_jsx(AssistantGalleryGrid, { characters: characters }, replay), _jsx(GalleryBalloons, { character: character })] })) })) }), view === 'stage' && expandIntoPage && (_jsxs(Box, { as: "section", "aria-label": "Expanded here", mt: 4, p: 3, border: "1px dashed", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Text, { as: "p", sx: { m: 0, mb: 2, color: 'fg.muted', fontSize: 1 }, children: ["Expanded here: what the balloon\u2019s ", _jsx("em", { children: "Expand" }), " draws large when the page names an area for it \u2014 the notebook, to edit and run on the browser sandbox. Without one, it opens in an overlay."] }), _jsx(Box, { ref: expandArea, "data-gallery-expand-target": "" })] }))] }) }) }));
 };
 export default AssistantGalleryExample;

package/lib/examples/CellExample.js

@@ -70,12 +70,7 @@ const CellExampleContent = ({ serviceManager }) => {
     }, [activeKernel, serviceManager?.serverSettings.baseUrl]);
     const cellsStore = useCellsStore();
     const kernelsStore = useKernelsStore();
-    return (_jsxs(Box, { p: 4, children: [_jsx(Heading, { as: "h1", sx: { fontSize: 3, mb: 3 }, children: "Cell Example" }), _jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: ['1fr', null, 'repeat(3, minmax(0, 1fr))'],
-                    gap: 3,
-                    mb: 3,
-                }, children: [_jsx(Box, { children: _jsxs(Text, { as: "p", sx: { mb: 0, wordBreak: 'break-word' }, children: ["Source: ", cellsStore.getSource(CELL_ID)] }) }), _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { mb: 2 }, children: ["Outputs Count: ", cellsStore.getOutputsCount(CELL_ID)] }), _jsxs(Box, { sx: { mb: 2 }, children: ["Kernel State:", ' ', _jsx(Label, { children: activeKernel && kernelsStore.getExecutionState(activeKernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase:", ' ', _jsx(Label, { children: activeKernel && kernelsStore.getExecutionPhase(activeKernel.id) })] })] }), _jsxs(Box, { children: [_jsx(Button, { sx: { mb: 3 }, onClick: () => cellsStore.execute(CELL_ID), disabled: !activeKernel, children: "Run Cell" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 3 }, children: [_jsx(Box, { children: "Code Sandbox:" }), _jsx(KernelIndicator, { kernel: activeKernel && activeKernel.connection, environmentName: kernelEnvironmentName, cpu: runtimeEnvironment?.cpu, memory: runtimeEnvironment?.memory, gpu: runtimeEnvironment?.gpu, bordered: false, position: "bottom-left" })] }), !activeKernel && (_jsx(Text, { as: "p", sx: { mb: 0, color: 'fg.muted' }, children: "Waiting for an existing sandbox kernel connection." }))] })] }), activeKernel ? (_jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID, kernel: activeKernel }, cellRemountKey)) : null] }));
+    return (_jsxs(Box, { p: 4, children: [_jsx(Heading, { as: "h1", sx: { fontSize: 3, mb: 3 }, children: "Cell Example" }), _jsxs(Box, { display: "grid", gridTemplateColumns: ['1fr', null, 'repeat(3, minmax(0, 1fr))'], gap: 3, mb: 3, children: [_jsx(Box, { children: _jsxs(Text, { as: "p", sx: { mb: 0, wordBreak: 'break-word' }, children: ["Source: ", cellsStore.getSource(CELL_ID)] }) }), _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { mb: 2 }, children: ["Outputs Count: ", cellsStore.getOutputsCount(CELL_ID)] }), _jsxs(Box, { mb: 2, children: ["Kernel State:", ' ', _jsx(Label, { children: activeKernel && kernelsStore.getExecutionState(activeKernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase:", ' ', _jsx(Label, { children: activeKernel && kernelsStore.getExecutionPhase(activeKernel.id) })] })] }), _jsxs(Box, { children: [_jsx(Button, { sx: { mb: 3 }, onClick: () => cellsStore.execute(CELL_ID), disabled: !activeKernel, children: "Run Cell" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 3, children: [_jsx(Box, { children: "Code Sandbox:" }), _jsx(KernelIndicator, { kernel: activeKernel && activeKernel.connection, environmentName: kernelEnvironmentName, cpu: runtimeEnvironment?.cpu, memory: runtimeEnvironment?.memory, gpu: runtimeEnvironment?.gpu, bordered: false, position: "bottom-left" })] }), !activeKernel && (_jsx(Text, { as: "p", sx: { mb: 0, color: 'fg.muted' }, children: "Waiting for an existing sandbox kernel connection." }))] })] }), activeKernel ? (_jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID, kernel: activeKernel }, cellRemountKey)) : null] }));
 };
 export const CellExample = (props) => {
     const { serviceManager } = props;

package/lib/examples/ChatCustomExample.js

@@ -55,41 +55,12 @@ Be concise, helpful, and provide working code examples when appropriate.`,
     });
     const isLoading = !isReady && status !== 'error';
     const retry = () => window.location.reload();
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100vh',
-                    backgroundColor: 'canvas.default',
-                }, children: [_jsxs(Box, { as: "header", sx: {
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            padding: 3,
-                        }, children: [_jsx(Text, { sx: {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(Box, { display: "flex", flexDirection: "column", height: "100vh", backgroundColor: "canvas.default", children: [_jsxs(Box, { as: "header", borderBottom: "1px solid", borderColor: "border.default", padding: 3, children: [_jsx(Text, { sx: {
                                     fontSize: 3,
                                     fontWeight: 'bold',
                                     display: 'block',
                                     marginBottom: 1,
-                                }, children: "Custom Chat Example" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Interactive chat interface with AI assistance" })] }), _jsx(Box, { as: "main", sx: {
-                            flex: 1,
-                            overflow: 'hidden',
-                            display: 'flex',
-                            flexDirection: 'column',
-                        }, children: isLoading ? (_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: "Initializing agent..." })] })) : error ? (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                height: '100%',
-                                gap: 3,
-                                p: 4,
-                            }, children: [_jsx(Text, { sx: { color: 'danger.fg', fontWeight: 'bold' }, children: "Failed to initialize agent" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: error }), _jsx(Text, { as: "button", onClick: retry, sx: {
+                                }, children: "Custom Chat Example" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Interactive chat interface with AI assistance" })] }), _jsx(Box, { as: "main", flex: 1, overflow: "hidden", display: "flex", flexDirection: "column", children: isLoading ? (_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: "Initializing agent..." })] })) : error ? (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: 3, p: 4, children: [_jsx(Text, { sx: { color: 'danger.fg', fontWeight: 'bold' }, children: "Failed to initialize agent" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: error }), _jsx(Text, { as: "button", onClick: retry, sx: {
                                         color: 'accent.fg',
                                         cursor: 'pointer',
                                         textDecoration: 'underline',

package/lib/examples/ChatExample.js

@@ -60,15 +60,7 @@ const AgentRuntimeChatExample = () => {
     const isCreating = !inBrowser && !isReady && status !== 'error';
     // Loading state while agent is being created
     if (isCreating) {
-        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Creating agent from ", AGENTSPEC_ID, "..."] })] }) }));
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, bg: "canvas.default", children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Creating agent from ", AGENTSPEC_ID, "..."] })] }) }));
     }
     // Error state. In the browser there is no agent id to have — the loop is
     // here — so the only thing that can be missing is the sign-in the inference

package/lib/examples/ChatStandaloneExample.js

@@ -97,14 +97,7 @@ const AgentRuntimePopupStandaloneExample = () => {
             throw err;
         }
     }, []);
-    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,
@@ -112,28 +105,7 @@ const AgentRuntimePopupStandaloneExample = () => {
                                 fontSize: 2,
                                 color: 'fg.muted',
                                 marginBottom: 4,
-                            }, children: "A standalone floating chat popup with props-based message handling. Click the chat button in the bottom-right corner to start!" }), _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: "Key Features" }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3 }, children: [_jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Props-based Handler" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Implement your own ", _jsx("code", { children: "onSendMessage" }), " function to connect to any AI backend"] })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Streaming Support" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Use the ", _jsx("code", { children: "onChunk" }), " callback for real-time streaming responses"] })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Full Customization" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Brand colors, icons, position, keyboard shortcuts, and more" })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "No Backend Required" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Unlike AG-UI examples, this works without a server (demo mode)" })] })] })] }), _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: "Usage Example" }), _jsx(Box, { as: "pre", sx: {
-                                        backgroundColor: 'neutral.emphasisPlus',
-                                        color: 'fg.onEmphasis',
-                                        padding: 3,
-                                        borderRadius: 2,
-                                        overflow: 'auto',
-                                        fontSize: 0,
-                                    }, children: _jsx("code", { children: `<ChatStandalone
+                            }, children: "A standalone floating chat popup with props-based message handling. Click the chat button in the bottom-right corner to start!" }), _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: "Key Features" }), _jsxs(Box, { as: "ul", paddingLeft: 3, children: [_jsxs(Box, { as: "li", marginBottom: 2, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Props-based Handler" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Implement your own ", _jsx("code", { children: "onSendMessage" }), " function to connect to any AI backend"] })] }), _jsxs(Box, { as: "li", marginBottom: 2, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Streaming Support" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Use the ", _jsx("code", { children: "onChunk" }), " callback for real-time streaming responses"] })] }), _jsxs(Box, { as: "li", marginBottom: 2, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Full Customization" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Brand colors, icons, position, keyboard shortcuts, and more" })] }), _jsxs(Box, { as: "li", marginBottom: 2, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "No Backend Required" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Unlike AG-UI examples, this works without a server (demo mode)" })] })] })] }), _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: "Usage Example" }), _jsx(Box, { as: "pre", backgroundColor: "neutral.emphasisPlus", color: "fg.onEmphasis", padding: 3, borderRadius: 2, overflow: "auto", fontSize: 0, children: _jsx("code", { children: `<ChatStandalone
   title="My Assistant"
   onSendMessage={async (message, options) => {
     // Your custom AI logic here
@@ -147,12 +119,6 @@ const AgentRuntimePopupStandaloneExample = () => {
   }}
   brandColor="#7c3aed"
   position="bottom-right"
-/>` }) })] }), _jsxs(Box, { sx: {
-                                padding: 4,
-                                backgroundColor: 'attention.subtle',
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'attention.muted',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "When to Use" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginBottom: 2 }, children: ["Use ", _jsx("strong", { children: "ChatStandalone" }), " when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have a custom AI backend that does not use AG-UI/ACP" }), _jsx("li", { children: "You want full control over the message handling logic" }), _jsx("li", { children: "You need to integrate with a specific API (OpenAI, etc.)" }), _jsx("li", { children: "You want a quick demo without setting up a backend server" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginTop: 2 }, children: ["Use ", _jsx("strong", { children: "ChatFloating" }), " instead when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have an AG-UI compatible backend" }), _jsx("li", { children: "You need built-in tool rendering support" }), _jsx("li", { children: "You want automatic protocol handling" })] })] })] }), _jsx(ChatStandalone, { title: "Demo Assistant", onSendMessage: handleSendMessage, position: "bottom-right", enableStreaming: true, emptyStateMessage: "Hi! I'm a demo assistant. Try asking me for the time, a joke, or what I can do!", buttonTooltip: "Chat with Demo Assistant", showPoweredBy: true })] }) }));
+/>` }) })] }), _jsxs(Box, { padding: 4, backgroundColor: "attention.subtle", borderRadius: 2, border: "1px solid", borderColor: "attention.muted", children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "When to Use" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginBottom: 2 }, children: ["Use ", _jsx("strong", { children: "ChatStandalone" }), " when:"] }), _jsxs(Box, { as: "ul", paddingLeft: 3, fontSize: 1, children: [_jsx("li", { children: "You have a custom AI backend that does not use AG-UI/ACP" }), _jsx("li", { children: "You want full control over the message handling logic" }), _jsx("li", { children: "You need to integrate with a specific API (OpenAI, etc.)" }), _jsx("li", { children: "You want a quick demo without setting up a backend server" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginTop: 2 }, children: ["Use ", _jsx("strong", { children: "ChatFloating" }), " instead when:"] }), _jsxs(Box, { as: "ul", paddingLeft: 3, fontSize: 1, children: [_jsx("li", { children: "You have an AG-UI compatible backend" }), _jsx("li", { children: "You need built-in tool rendering support" }), _jsx("li", { children: "You want automatic protocol handling" })] })] })] }), _jsx(ChatStandalone, { title: "Demo Assistant", onSendMessage: handleSendMessage, position: "bottom-right", enableStreaming: true, emptyStateMessage: "Hi! I'm a demo assistant. Try asking me for the time, a joke, or what I can do!", buttonTooltip: "Chat with Demo Assistant", showPoweredBy: true })] }) }));
 };
 export default AgentRuntimePopupStandaloneExample;

package/lib/examples/CopilotKitLexicalExample.js

@@ -77,30 +77,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
     const handleChange = useCallback((_editorState) => {
         // onChange handler - can be used for tracking changes
     }, []);
-    return (_jsx(Box, { sx: {
-            height: '100vh',
-            width: '100vw',
-            display: 'flex',
-            overflow: 'hidden',
-        }, children: _jsxs(Box, { sx: {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'auto',
-                padding: 3,
-            }, children: [_jsxs(Box, { sx: {
-                        marginBottom: 3,
-                        paddingBottom: 3,
-                        borderBottom: '1px solid',
-                        borderColor: 'border.default',
-                    }, children: [_jsx("h1", { children: "CopilotKit Lexical Example" }), _jsx("p", { children: "Platform-agnostic tool usage with CopilotKit integration. Use the AI copilot to manipulate the document." })] }), _jsx(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        padding: 3,
-                        backgroundColor: 'canvas.default',
-                        minHeight: '600px',
-                    }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(TableCellResizerPlugin, {}), _jsx(LoadContentPlugin, { content: content }), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
+    return (_jsx(Box, { height: "100vh", width: "100vw", display: "flex", overflow: "hidden", children: _jsxs(Box, { flex: 1, display: "flex", flexDirection: "column", overflow: "auto", padding: 3, children: [_jsxs(Box, { marginBottom: 3, paddingBottom: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx("h1", { children: "CopilotKit Lexical Example" }), _jsx("p", { children: "Platform-agnostic tool usage with CopilotKit integration. Use the AI copilot to manipulate the document." })] }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, padding: 3, backgroundColor: "canvas.default", minHeight: "600px", children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(TableCellResizerPlugin, {}), _jsx(LoadContentPlugin, { content: content }), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
 });
 function LexicalWithTools({ content, serviceManager, }) {
     // Get all actions for this lexical document

package/lib/examples/DecksAgent.js

@@ -13,7 +13,7 @@ registerDeckComponents(exampleDeckComponents);
 // Module-level, so the embed builds its reactor once rather than on every
 // render of this component.
 const DECK_PLUGINS = [LoopDecksPlugin, DeckViewPlugin];
-const DecksAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", agentId: "example-decks", 
+const DecksAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", agentId: "example-decks", 
             /* The deck open beside the chat from the first frame. */
             defaultEditor: "deck", 
             /* The header carries the editor choice — deck, notebook, document, or

package/lib/examples/DocumentPageAgent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { LoopEmbed } from '../loop';
-const DocumentPageAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", 
+const DocumentPageAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", 
             /* The Loop Shell's agent: it drives the document tools — insert a
                block, run a code block, read the document — as readily as the
                notebook's, and its openers work on either. */

package/lib/examples/HomeExample.js

@@ -4,75 +4,27 @@ import { Heading, Text, TextInput, Label } from '@primer/react';
 import { SearchIcon } from '@primer/octicons-react';
 const HomeExample = ({ examples = [], searchQuery = '', onSearchChange, onSelectExample, }) => {
     const sortedExamples = [...examples].sort((a, b) => a.title.localeCompare(b.title));
-    return (_jsx(Box, { sx: {
-            width: '100%',
-            height: '100%',
-            overflow: 'auto',
-            bg: 'canvas.default',
-        }, children: _jsxs(Box, { sx: {
-                maxWidth: '1600px',
-                margin: '0 auto',
-                p: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 3,
-            }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        gap: 3,
-                        flexWrap: 'wrap',
-                    }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agent Runtimes Examples" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Browse all examples as cards and open any flow in one click." })] }), _jsx(TextInput, { autoFocus: true, value: searchQuery, onChange: event => onSearchChange?.(event.target.value), placeholder: "Search examples", leadingVisual: SearchIcon, sx: { minWidth: ['100%', '320px'] } })] }), sortedExamples.length === 0 ? (_jsx(Box, { sx: {
-                        border: '1px dashed',
-                        borderColor: 'border.default',
-                        borderRadius: 3,
-                        p: 4,
-                        textAlign: 'center',
-                        color: 'fg.muted',
-                    }, children: "No examples match your search." })) : (_jsx(Box, { sx: {
-                        display: 'grid',
-                        gridTemplateColumns: [
-                            '1fr',
-                            'repeat(2, minmax(0, 1fr))',
-                            'repeat(4, minmax(0, 1fr))',
-                        ],
-                        gap: 3,
-                    }, children: sortedExamples.map(example => (_jsxs(Box, { role: "button", tabIndex: 0, onClick: () => onSelectExample?.(example.id), onKeyDown: event => {
+    return (_jsx(Box, { width: "100%", height: "100%", overflow: "auto", bg: "canvas.default", children: _jsxs(Box, { maxWidth: "1600px", margin: "0 auto", p: 4, display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 3, flexWrap: "wrap", children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agent Runtimes Examples" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Browse all examples as cards and open any flow in one click." })] }), _jsx(TextInput, { autoFocus: true, value: searchQuery, onChange: event => onSearchChange?.(event.target.value), placeholder: "Search examples", leadingVisual: SearchIcon, sx: { minWidth: ['100%', '320px'] } })] }), sortedExamples.length === 0 ? (_jsx(Box, { border: "1px dashed", borderColor: "border.default", borderRadius: 3, p: 4, textAlign: "center", color: "fg.muted", children: "No examples match your search." })) : (_jsx(Box, { display: "grid", gridTemplateColumns: [
+                        '1fr',
+                        'repeat(2, minmax(0, 1fr))',
+                        'repeat(4, minmax(0, 1fr))',
+                    ], gap: 3, children: sortedExamples.map(example => (_jsxs(Box, { role: "button", tabIndex: 0, onClick: () => onSelectExample?.(example.id), onKeyDown: event => {
                             if (event.key === 'Enter' || event.key === ' ') {
                                 event.preventDefault();
                                 onSelectExample?.(example.id);
                             }
-                        }, sx: {
-                            bg: 'canvas.default',
-                            p: 4,
-                            borderRadius: '12px',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2,
-                            cursor: 'pointer',
-                            transition: 'box-shadow 0.2s, transform 0.2s, border-color 0.2s',
-                            '&:hover': {
-                                boxShadow: 'shadow.large',
-                                transform: 'translateY(-2px)',
-                                borderColor: 'accent.emphasis',
-                            },
-                            '&:focus-visible': {
-                                outline: '2px solid',
-                                outlineColor: 'accent.emphasis',
-                                outlineOffset: '2px',
-                            },
+                        }, bg: "canvas.default", p: 4, borderRadius: "12px", border: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", gap: 2, cursor: "pointer", transition: "box-shadow 0.2s, transform 0.2s, border-color 0.2s", hover: {
+                            boxShadow: 'shadow.large',
+                            transform: 'translateY(-2px)',
+                            borderColor: 'accent.emphasis',
+                        }, focusVisible: {
+                            outline: '2px solid',
+                            outlineColor: 'accent.emphasis',
+                            outlineOffset: '2px',
                         }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'bold' }, children: example.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, lineHeight: 1.6 }, children: example.description }), _jsx(Text, { sx: {
                                     color: 'fg.muted',
                                     fontSize: 0,
                                     fontFamily: 'mono',
-                                }, children: example.id }), example.tags.length > 0 && (_jsx(Box, { sx: {
-                                    display: 'flex',
-                                    gap: 1,
-                                    flexWrap: 'wrap',
-                                    mt: 'auto',
-                                    pt: 2,
-                                }, children: example.tags.map(tag => (_jsx(Label, { variant: "secondary", children: tag }, `${example.id}-${tag}`))) }))] }, example.id))) }))] }) }));
+                                }, children: example.id }), example.tags.length > 0 && (_jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", mt: "auto", pt: 2, children: example.tags.map(tag => (_jsx(Label, { variant: "secondary", children: tag }, `${example.id}-${tag}`))) }))] }, example.id))) }))] }) }));
 };
 export default HomeExample;

package/lib/examples/Lexical2Example.js

@@ -110,13 +110,7 @@ function LexicalEditor({ serviceManager: _serviceManager, }) {
     const onChange = useCallback((_editorState) => {
         // Could persist state here
     }, []);
-    return (_jsx(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: _jsxs(Box, { sx: {
-                position: 'relative',
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'hidden',
-            }, children: [_jsx("div", { ref: onRef, style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: _jsx(ContentEditable, { placeholder: _jsx("div", { style: {
+    return (_jsx(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: _jsxs(Box, { position: "relative", flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsx("div", { ref: onRef, style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: _jsx(ContentEditable, { placeholder: _jsx("div", { style: {
                                 position: 'absolute',
                                 top: '24px',
                                 left: '24px',
@@ -156,37 +150,14 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
             useChatStore.getState().setInferenceProvider(null);
         };
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(LexicalToolRegistrar, {}), _jsx(CustomToolsRegistrar, {}), _jsxs(Box, { sx: {
-                    height: '100vh',
-                    width: '100vw',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    overflow: 'hidden',
-                }, children: [_jsxs(Box, { sx: {
-                            p: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.default',
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                        }, children: [_jsxs("div", { children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Chat Lexical Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Sidebar popup chat with Lexical editor integration." })] }), _jsx(Box, { sx: {
-                                    display: 'flex',
-                                    gap: 2,
-                                    alignItems: 'center',
-                                }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Press", ' ', _jsx("kbd", { style: {
+    return (_jsxs(_Fragment, { children: [_jsx(LexicalToolRegistrar, {}), _jsx(CustomToolsRegistrar, {}), _jsxs(Box, { height: "100vh", width: "100vw", display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.default", display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs("div", { children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Chat Lexical Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Sidebar popup chat with Lexical editor integration." })] }), _jsx(Box, { display: "flex", gap: 2, alignItems: "center", children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Press", ' ', _jsx("kbd", { style: {
                                                 padding: '2px 6px',
                                                 borderRadius: '4px',
                                                 backgroundColor: 'var(--bgColor-neutral-muted)',
                                                 border: '1px solid var(--borderColor-default)',
                                                 fontFamily: 'monospace',
                                                 fontSize: '12px',
-                                            }, children: "\u2318/" }), ' ', "or click the button to open chat"] }) })] }), _jsx(Box, { sx: {
-                            flex: 1,
-                            display: 'flex',
-                            overflow: 'hidden',
-                            bg: 'canvas.default',
-                        }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _jsx(ChatFloating, { kernelIndicatorPlacement: "right", useStore: true, title: "AI Assistant", position: "bottom-right", width: 400, height: 550, defaultOpen: false, showNewChatButton: true, showClearButton: true, showSettingsButton: false, clickOutsideToClose: true, escapeToClose: true, enableKeyboardShortcuts: true, toggleShortcut: "/", buttonTooltip: "Open AI Assistant", showPoweredBy: true, poweredByProps: {
+                                            }, children: "\u2318/" }), ' ', "or click the button to open chat"] }) })] }), _jsx(Box, { flex: 1, display: "flex", overflow: "hidden", bg: "canvas.default", children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _jsx(ChatFloating, { kernelIndicatorPlacement: "right", useStore: true, title: "AI Assistant", position: "bottom-right", width: 400, height: 550, defaultOpen: false, showNewChatButton: true, showClearButton: true, showSettingsButton: false, clickOutsideToClose: true, escapeToClose: true, enableKeyboardShortcuts: true, toggleShortcut: "/", buttonTooltip: "Open AI Assistant", showPoweredBy: true, poweredByProps: {
                     brandName: 'Datalayer',
                     brandUrl: 'https://datalayer.ai',
                 }, onOpen: () => {