@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/examples/ScenesExample.js

@@ -142,18 +142,10 @@ function Scene({ scene }) {
     };
     const notReached = runtimeMembers.filter(member => reachedOf(member.id).error);
     const notebookGiver = stage.peers[0] ?? entry;
-    return (_jsxs(Box, { "data-scene-example": scene.id, children: [_jsx(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, "data-scene-assumes": "", children: stage.assumes }), anonymous.status === 'active' && anonymous.expiresAt && (_jsx(Box, { sx: { mb: 3 }, children: _jsx(AnonymousKeyTimer, { expiresAt: anonymous.expiresAt, grantedMs: anonymous.grantedMs, label: `${entry.app.name}'s trial key`, onExpire: () => useAnonymousSessionStore.getState().expire() }) })), anonymous.status === 'expired' && (_jsx(Box, { sx: { mb: 3 }, children: _jsx(AnonymousKeyExpired, { agentName: entry.app.name, onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), entryInBrowser && needsSignIn && (_jsxs(Flash, { variant: "warning", sx: { mb: 3 }, children: [entry.app.name, " asks its model through the Datalayer inference service: sign in, or wait for a visitor\u2019s trial key."] })), notReached.map(member => (_jsx(Flash, { variant: "danger", sx: { mb: 3 }, "data-scene-needs": member.app.id, children: memberNeeds(member, reachedOf(member.id).error ?? '').map(line => (_jsx(Text, { as: "p", sx: { m: 0 }, children: line }, line))) }, member.id))), runtimeMembers.map(member => (_jsx(ReachMember, { member: member, 
+    return (_jsxs(Box, { "data-scene-example": scene.id, children: [_jsx(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, "data-scene-assumes": "", children: stage.assumes }), anonymous.status === 'active' && anonymous.expiresAt && (_jsx(Box, { mb: 3, children: _jsx(AnonymousKeyTimer, { expiresAt: anonymous.expiresAt, grantedMs: anonymous.grantedMs, label: `${entry.app.name}'s trial key`, onExpire: () => useAnonymousSessionStore.getState().expire() }) })), anonymous.status === 'expired' && (_jsx(Box, { mb: 3, children: _jsx(AnonymousKeyExpired, { agentName: entry.app.name, onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), entryInBrowser && needsSignIn && (_jsxs(Flash, { variant: "warning", sx: { mb: 3 }, children: [entry.app.name, " asks its model through the Datalayer inference service: sign in, or wait for a visitor\u2019s trial key."] })), notReached.map(member => (_jsx(Flash, { variant: "danger", sx: { mb: 3 }, "data-scene-needs": member.app.id, children: memberNeeds(member, reachedOf(member.id).error ?? '').map(line => (_jsx(Text, { as: "p", sx: { m: 0 }, children: line }, line))) }, member.id))), runtimeMembers.map(member => (_jsx(ReachMember, { member: member, 
                 // Its requests are the entry's, or the person's own when the
                 // page asks it itself.
-                asker: member.entry ? PERSON : entry.app.name, tracer: inspector, onReached: onReached }, member.id))), _jsx(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.subtle',
-                    px: 2,
-                    pt: 2,
-                    mb: 3,
-                }, children: _jsx(SceneView, { members: transcriptMembers, tracer: inspector, emptyText: `Nothing said yet: ask ${entry.app.name} with one of the suggestions.`, children: _jsx(A2ATeamGraph, { entry: {
+                asker: member.entry ? PERSON : entry.app.name, tracer: inspector, onReached: onReached }, member.id))), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", px: 2, pt: 2, mb: 3, children: _jsx(SceneView, { members: transcriptMembers, tracer: inspector, emptyText: `Nothing said yet: ask ${entry.app.name} with one of the suggestions.`, children: _jsx(A2ATeamGraph, { entry: {
                             id: entry.app.id,
                             name: entry.app.name,
                             emoji: entry.cast.persona.face || entry.app.emoji,
@@ -208,29 +200,18 @@ function Scene({ scene }) {
                             ];
                         })), 
                         // Room for the balloons: suggestions, *more* and a notebook.
-                        balloonRoom: 320 }) }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _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 ", entry.app.name] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: "Or choose one of its suggestions in its balloon: the script\u2019s cues." }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: suggestions[0]?.prompt ?? 'Ask…', onChange: event => setDraft(event.target.value), onKeyDown: event => {
+                        balloonRoom: 320 }) }) }), _jsx(Box, { ref: notebookArea, mb: team.notebook ? 3 : 0, "data-team-notebook-placement": "under-graph" }), _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 ", entry.app.name] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: "Or choose one of its suggestions in its balloon: the script\u2019s cues." }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: suggestions[0]?.prompt ?? 'Ask…', 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' ? PERSON : entry.app.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsxs(Box, { sx: { flex: '1 1 360px', minWidth: 0 }, children: [!team.notebook && stage.peers.length > 0 && (_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: "What the last member asked returns appears here, as it returned it, or as a notebook to run when it gives one." })) })] })), scene.setup.length > 0 && (_jsxs(Box, { sx: { mt: 3 }, "data-scene-setup": "", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1, mb: 1 }, children: "What this scene needs" }), scene.setup.map(line => (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: line }, line)))] }))] })] })] }));
+                                } }), _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' ? PERSON : entry.app.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsxs(Box, { flex: "1 1 360px", minWidth: 0, children: [!team.notebook && stage.peers.length > 0 && (_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: "What the last member asked returns appears here, as it returned it, or as a notebook to run when it gives one." })) })] })), scene.setup.length > 0 && (_jsxs(Box, { mt: 3, "data-scene-setup": "", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1, mb: 1 }, children: "What this scene needs" }), scene.setup.map(line => (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: line }, line)))] }))] })] })] }));
 }
 function Scenes() {
     const scenes = useMemo(() => listSceneSpecs(), []);
     const [selected, setSelected] = useState(scenes[0]?.id ?? '');
     const scene = scenes.find(one => one.id === selected) ?? scenes[0];
-    return (_jsxs(Box, { sx: { p: 4, maxWidth: 1080, mx: 'auto' }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Scenes" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, children: ["The catalogue\u2019s scenes, played against the local servers: each member on a runtime is served over A2A by ", _jsx("code", { children: "serve_scenes.py" }), "; the entry in your browser asks on your token or a visitor\u2019s trial key."] }), _jsx(UnderlineNav, { "aria-label": "Scenes", sx: { mb: 3 }, children: scenes.map(one => (_jsxs(UnderlineNav.Item, { "aria-current": one.id === scene?.id ? 'page' : undefined, onSelect: event => {
+    return (_jsxs(Box, { p: 4, maxWidth: 1080, mx: "auto", children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Scenes" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, children: ["The catalogue\u2019s scenes, played against the local servers: each member on a runtime is served over A2A by ", _jsx("code", { children: "serve_scenes.py" }), "; the entry in your browser asks on your token or a visitor\u2019s trial key."] }), _jsx(UnderlineNav, { "aria-label": "Scenes", sx: { mb: 3 }, children: scenes.map(one => (_jsxs(UnderlineNav.Item, { "aria-current": one.id === scene?.id ? 'page' : undefined, onSelect: event => {
                         event.preventDefault();
                         setSelected(one.id);
                     }, "data-scene-tab": one.id, children: [one.emoji, " ", one.name] }, one.id))) }), scene && _jsx(Scene, { scene: scene }, scene.id)] }));

package/lib/examples/VoiceChatExample.js

@@ -60,6 +60,6 @@ const VoiceChatExample = () => {
         token: token || undefined,
         consentKey: 'voice-chat-example',
     }), [language, voiceSpec.id, token]);
-    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: "Voice chat" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: ["Talk to the assistant instead of typing: hold the microphone in its composer, or ", _jsx("kbd", { children: "Ctrl" }), "+", _jsx("kbd", { children: "Space" }), ", speak, and let go. What you say is heard in this page and never leaves it; the words go in the message box for you to send. Its answers are read aloud as they are written, by Datalayer\u2019s speech service, and not kept.", ' ', _jsx("kbd", { children: "Esc" }), " stops its voice."] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3, mb: 3 }, children: [_jsx(SegmentedControl, { "aria-label": "Language", children: LANGUAGES.map(option => (_jsx(SegmentedControl.Button, { selected: language === option.tag, onClick: () => setLanguage(option.tag), "data-voice-language": option.tag, children: option.label }, option.tag))) }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Voice: ", voiceSpec.name] })] }), voiceSpec.attribution && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: voiceSpec.attribution })), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Models from ", MODELS, ", speech from ", SPEECH, ", the agent at ", SERVER, ". See", ' ', _jsx(Link, { href: "https://agent-runtimes.datalayer.tech/chat/voice", children: "Voice" }), ' ', "for how to run each."] })] }), _jsx(ChatFloating, { defaultViewMode: "assistant", assistantCharacter: "paperclip", protocol: "vercel-ai", endpoint: `${SERVER}/api/v1/vercel-ai/assistant`, title: "Assistant", description: "Hello! Hold the microphone and ask me anything.", position: "bottom-right", useStore: false, voice: voice })] }) }));
+    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: "Voice chat" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: ["Talk to the assistant instead of typing: hold the microphone in its composer, or ", _jsx("kbd", { children: "Ctrl" }), "+", _jsx("kbd", { children: "Space" }), ", speak, and let go. What you say is heard in this page and never leaves it; the words go in the message box for you to send. Its answers are read aloud as they are written, by Datalayer\u2019s speech service, and not kept.", ' ', _jsx("kbd", { children: "Esc" }), " stops its voice."] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, mb: 3, children: [_jsx(SegmentedControl, { "aria-label": "Language", children: LANGUAGES.map(option => (_jsx(SegmentedControl.Button, { selected: language === option.tag, onClick: () => setLanguage(option.tag), "data-voice-language": option.tag, children: option.label }, option.tag))) }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Voice: ", voiceSpec.name] })] }), voiceSpec.attribution && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: voiceSpec.attribution })), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Models from ", MODELS, ", speech from ", SPEECH, ", the agent at ", SERVER, ". See", ' ', _jsx(Link, { href: "https://agent-runtimes.datalayer.tech/chat/voice", children: "Voice" }), ' ', "for how to run each."] })] }), _jsx(ChatFloating, { defaultViewMode: "assistant", assistantCharacter: "paperclip", protocol: "vercel-ai", endpoint: `${SERVER}/api/v1/vercel-ai/assistant`, title: "Assistant", description: "Hello! Hold the microphone and ask me anything.", position: "bottom-right", useStore: false, voice: voice })] }) }));
 };
 export default VoiceChatExample;

package/lib/examples/components/AuthRequiredView.js

@@ -22,12 +22,6 @@ export const AuthRequiredView = () => {
         setAuth(newToken, handle);
         syncTokenToIamStore(newToken);
     }, [setAuth, syncTokenToIamStore]);
-    return (_jsx(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            p: 3,
-        }, children: _jsx(Box, { sx: { width: '100%', maxWidth: 640 }, children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }) }) }) }));
+    return (_jsx(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", p: 3, children: _jsx(Box, { width: "100%", maxWidth: 640, children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }) }) }) }));
 };
 export default AuthRequiredView;

package/lib/examples/components/ErrorView.js

@@ -9,12 +9,5 @@ import { Box } from '@datalayer/primer-addons';
 export const ErrorView = ({ error, detail, onLogout, }) => {
     const message = error || 'Agent failed to start';
     const is401 = String(message).includes('401') || String(detail || '').includes('401');
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '100vh',
-            gap: 3,
-        }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: message }), detail && _jsx(Text, { sx: { color: 'fg.muted' }, children: detail }), is401 && onLogout && (_jsx(Button, { variant: "danger", leadingVisual: SignOutIcon, onClick: onLogout, children: "Sign out" }))] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: message }), detail && _jsx(Text, { sx: { color: 'fg.muted' }, children: detail }), is401 && onLogout && (_jsx(Button, { variant: "danger", leadingVisual: SignOutIcon, onClick: onLogout, children: "Sign out" }))] }));
 };

package/lib/examples/components/ExampleErrorBoundary.js

@@ -49,19 +49,6 @@ export class ExampleErrorBoundary extends React.Component {
         if (!error) {
             return this.props.children;
         }
-        return (_jsx(Box, { sx: { p: 4 }, children: _jsxs(Box, { sx: {
-                    p: 3,
-                    border: '1px solid',
-                    borderColor: 'danger.muted',
-                    borderRadius: 2,
-                    bg: 'danger.subtle',
-                    color: 'danger.fg',
-                }, children: [_jsx(Box, { sx: { fontWeight: 600, mb: 2 }, children: "This example failed to load" }), _jsx(Box, { as: "pre", sx: {
-                            m: 0,
-                            whiteSpace: 'pre-wrap',
-                            wordBreak: 'break-word',
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                        }, children: error.message || String(error) })] }) }));
+        return (_jsx(Box, { p: 4, children: _jsxs(Box, { p: 3, border: "1px solid", borderColor: "danger.muted", borderRadius: 2, bg: "danger.subtle", color: "danger.fg", children: [_jsx(Box, { fontWeight: 600, mb: 2, children: "This example failed to load" }), _jsx(Box, { as: "pre", m: 0, whiteSpace: "pre-wrap", wordBreak: "break-word", fontFamily: "mono", fontSize: 0, children: error.message || String(error) })] }) }));
     }
 }

package/lib/examples/components/FooterMetrics.js

@@ -7,11 +7,5 @@ import { Box } from '@datalayer/primer-addons';
  * Displays token usage and cost.
  */
 export const FooterMetrics = ({ tokens, cost, }) => {
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 3,
-            py: 2,
-            px: 3,
-        }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tokens:", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: tokens.toLocaleString() })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Cost:", ' ', _jsxs(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: ["$", cost.toFixed(2), " USD"] })] })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 3, py: 2, px: 3, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tokens:", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: tokens.toLocaleString() })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Cost:", ' ', _jsxs(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: ["$", cost.toFixed(2), " USD"] })] })] }));
 };

package/lib/examples/components/Header.js

@@ -126,31 +126,14 @@ export const Header = ({ activeSession, agentName, agentDescription, agentStatus
             setIsOptimizing(false);
         }, 2000);
     };
-    return (_jsxs(PageLayout.Header, { divider: "none", children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 3,
-                    py: 2,
-                }, children: [agentName && (_jsx(SessionTabs, { sessions: MOCK_SESSIONS, activeSession: activeSession, agentName: agentName, agentDescription: agentDescription, onSessionChange: onSessionChange, onAddSession: () => {
+    return (_jsxs(PageLayout.Header, { divider: "none", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 3, py: 2, children: [agentName && (_jsx(SessionTabs, { sessions: MOCK_SESSIONS, activeSession: activeSession, agentName: agentName, agentDescription: agentDescription, onSessionChange: onSessionChange, onAddSession: () => {
                             /* Add session */
-                        } })), agentName && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [agentStatus && onToggleStatus && (_jsx(IconButton, { "aria-label": agentStatus === 'running' ? 'Pause agent' : 'Play agent', icon: agentStatus === 'running' ? PauseIcon : PlayIcon, onClick: onToggleStatus, variant: "invisible", size: "small", sx: {
+                        } })), agentName && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [agentStatus && onToggleStatus && (_jsx(IconButton, { "aria-label": agentStatus === 'running' ? 'Pause agent' : 'Play agent', icon: agentStatus === 'running' ? PauseIcon : PlayIcon, onClick: onToggleStatus, variant: "invisible", size: "small", sx: {
                                     color: agentStatus === 'running' ? 'attention.fg' : 'success.fg',
-                                } })), _jsx(HeaderControls, { onToggleContextTree: onToggleContextTree })] })), agentName && (_jsx(Box, { onClick: () => setShowAvatarView(!showAvatarView), sx: { cursor: 'pointer' }, children: _jsxs(AvatarStack, { size: 24, disableExpand: true, children: [_jsx(Avatar, { alt: "Primer logo", src: "https://avatars.githubusercontent.com/primer" }), _jsx(Avatar, { alt: "GitHub logo", src: "https://avatars.githubusercontent.com/github" }), _jsx(Avatar, { alt: "Atom logo", src: "https://avatars.githubusercontent.com/atom" }), _jsx(Avatar, { alt: "GitHub Desktop logo", src: "https://avatars.githubusercontent.com/desktop" })] }) }))] }), agentName && showContextTree && (_jsxs(Box, { sx: {
-                    mt: 2,
-                    p: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.default',
-                }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            mb: 2,
-                        }, children: [_jsxs(Text, { sx: {
+                                } })), _jsx(HeaderControls, { onToggleContextTree: onToggleContextTree })] })), agentName && (_jsx(Box, { onClick: () => setShowAvatarView(!showAvatarView), cursor: "pointer", children: _jsxs(AvatarStack, { size: 24, disableExpand: true, children: [_jsx(Avatar, { alt: "Primer logo", src: "https://avatars.githubusercontent.com/primer" }), _jsx(Avatar, { alt: "GitHub logo", src: "https://avatars.githubusercontent.com/github" }), _jsx(Avatar, { alt: "Atom logo", src: "https://avatars.githubusercontent.com/atom" }), _jsx(Avatar, { alt: "GitHub Desktop logo", src: "https://avatars.githubusercontent.com/desktop" })] }) }))] }), agentName && showContextTree && (_jsxs(Box, { mt: 2, p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsxs(Text, { sx: {
                                     fontSize: 1,
                                     fontWeight: 'bold',
-                                }, children: ["Context Distribution (", totalTokens, " tokens)"] }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: "Details" }), _jsx(Button, { size: "small", onClick: handleOptimize, disabled: isOptimizing, leadingVisual: isOptimizing ? Spinner : ZapIcon, children: "Optimize" })] })] }), _jsx(ReactECharts, { option: {
+                                }, children: ["Context Distribution (", totalTokens, " tokens)"] }), _jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { size: "small", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: "Details" }), _jsx(Button, { size: "small", onClick: handleOptimize, disabled: isOptimizing, leadingVisual: isOptimizing ? Spinner : ZapIcon, children: "Optimize" })] })] }), _jsx(ReactECharts, { option: {
                             series: [
                                 {
                                     type: 'treemap',
@@ -189,58 +172,36 @@ export const Header = ({ activeSession, agentName, agentDescription, agentStatus
                                     ],
                                 },
                             ],
-                        }, style: { height: '300px' } }), showDetails && (_jsxs(Box, { sx: {
-                            mt: 3,
-                            p: 2,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            bg: 'canvas.default',
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), contextData.children.map((category) => (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: [category.name, ": ", (category.value / 1000).toFixed(0), "K tokens"] }), category.children && (_jsx(Box, { sx: { ml: 3, mt: 1 }, children: category.children.map((item) => (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 ", item.name, ": ", (item.value / 1000).toFixed(0), "K tokens"] }, item.name))) }))] }, category.name)))] }))] })), agentName && showAvatarView && (_jsxs(Box, { sx: {
-                    mt: 2,
-                    p: 3,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.default',
-                }, children: [_jsx(Text, { sx: {
+                        }, style: { height: '300px' } }), showDetails && (_jsxs(Box, { mt: 3, p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", fontFamily: "mono", fontSize: 0, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), contextData.children.map((category) => (_jsxs(Box, { mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: [category.name, ": ", (category.value / 1000).toFixed(0), "K tokens"] }), category.children && (_jsx(Box, { ml: 3, mt: 1, children: category.children.map((item) => (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 ", item.name, ": ", (item.value / 1000).toFixed(0), "K tokens"] }, item.name))) }))] }, category.name)))] }))] })), agentName && showAvatarView && (_jsxs(Box, { mt: 2, p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", children: [_jsx(Text, { sx: {
                             fontSize: 1,
                             fontWeight: 'bold',
                             display: 'block',
                             mb: 3,
-                        }, children: "Share and Collaborate" }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { sx: {
+                        }, children: "Share and Collaborate" }), _jsxs(Box, { mb: 3, children: [_jsx(Text, { sx: {
                                     fontSize: 0,
                                     fontWeight: 'semibold',
                                     display: 'block',
                                     mb: 2,
-                                }, children: "Current Members" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "Primer logo", src: "https://avatars.githubusercontent.com/primer" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                }, children: "Current Members" }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Avatar, { size: 32, alt: "Primer logo", src: "https://avatars.githubusercontent.com/primer" }), _jsxs(Box, { flex: 1, children: [_jsx(Text, { sx: {
                                                             fontSize: 0,
                                                             fontWeight: 'semibold',
                                                             display: 'block',
-                                                        }, children: "Primer" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "primer@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Admin" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "GitHub logo", src: "https://avatars.githubusercontent.com/github" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                                        }, children: "Primer" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "primer@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Admin" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Avatar, { size: 32, alt: "GitHub logo", src: "https://avatars.githubusercontent.com/github" }), _jsxs(Box, { flex: 1, children: [_jsx(Text, { sx: {
                                                             fontSize: 0,
                                                             fontWeight: 'semibold',
                                                             display: 'block',
-                                                        }, children: "GitHub" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "support@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "Atom logo", src: "https://avatars.githubusercontent.com/atom" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                                        }, children: "GitHub" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "support@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Avatar, { size: 32, alt: "Atom logo", src: "https://avatars.githubusercontent.com/atom" }), _jsxs(Box, { flex: 1, children: [_jsx(Text, { sx: {
                                                             fontSize: 0,
                                                             fontWeight: 'semibold',
                                                             display: 'block',
-                                                        }, children: "Atom" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "atom@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Only" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Avatar, { size: 32, alt: "GitHub Desktop logo", src: "https://avatars.githubusercontent.com/desktop" }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: {
+                                                        }, children: "Atom" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "atom@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Only" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Avatar, { size: 32, alt: "GitHub Desktop logo", src: "https://avatars.githubusercontent.com/desktop" }), _jsxs(Box, { flex: 1, children: [_jsx(Text, { sx: {
                                                             fontSize: 0,
                                                             fontWeight: 'semibold',
                                                             display: 'block',
-                                                        }, children: "GitHub Desktop" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "desktop@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] })] })] }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Add people" }), _jsx(TextInput, { placeholder: "Enter email address", sx: { width: '100%' } })] }) }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Message" }), _jsx(TextInput, { placeholder: "Optional message for invitees", sx: { width: '100%' } })] }) }), _jsxs(Box, { children: [_jsx(Text, { sx: {
+                                                        }, children: "GitHub Desktop" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "desktop@github.com" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] })] })] }), _jsx(Box, { mb: 3, children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Add people" }), _jsx(TextInput, { placeholder: "Enter email address", sx: { width: '100%' } })] }) }), _jsx(Box, { mb: 3, children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Message" }), _jsx(TextInput, { placeholder: "Optional message for invitees", sx: { width: '100%' } })] }) }), _jsxs(Box, { children: [_jsx(Text, { sx: {
                                     fontSize: 0,
                                     fontWeight: 'semibold',
                                     display: 'block',
                                     mb: 2,
-                                }, children: "General Access" }), _jsx(Box, { sx: {
-                                    p: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    bg: 'canvas.default',
-                                }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Text, { sx: { fontSize: 0 }, children: "foo" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Only" })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Text, { sx: { fontSize: 0 }, children: "bar" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] })] }) })] })] }))] }));
+                                }, children: "General Access" }), _jsx(Box, { p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", children: [_jsx(Text, { sx: { fontSize: 0 }, children: "foo" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Only" })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", children: [_jsx(Text, { sx: { fontSize: 0 }, children: "bar" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Read-Write" })] })] }) })] })] }))] }));
 };

package/lib/examples/components/HeaderControls.js

@@ -12,13 +12,5 @@ export const HeaderControls = ({ onToggleContextTree, }) => {
         120, 200, 150, 180, 170, 210, 200, 220, 180, 210, 230, 250, 260, 270, 280,
         290, 300, 320, 310, 330,
     ];
-    return (_jsx(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 2,
-            cursor: 'pointer',
-            '&:hover': {
-                opacity: 0.8,
-            },
-        }, onClick: onToggleContextTree, children: _jsx(Box, { sx: { width: '120px', height: '30px' }, children: _jsx(Sparklines, { data: sparklineData, width: 120, height: 30, children: _jsx(SparklinesLine, { color: "var(--fgColor-accent, #16A085)", style: { strokeWidth: '2' } }) }) }) }));
+    return (_jsx(Box, { display: "flex", alignItems: "center", gap: 2, cursor: "pointer", hover: { opacity: 0.8 }, onClick: onToggleContextTree, children: _jsx(Box, { width: "120px", height: "30px", children: _jsx(Sparklines, { data: sparklineData, width: 120, height: 30, children: _jsx(SparklinesLine, { color: "var(--fgColor-accent, #16A085)", style: { strokeWidth: '2' } }) }) }) }));
 };

package/lib/examples/components/LexicalEditor.js

@@ -77,12 +77,5 @@ export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, extra
     const handleChange = useCallback((_editorState) => {
         // onChange handler - can be used for tracking changes
     }, []);
-    return (_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(LoadContentPlugin, { content: content }), _jsx(JupyterReactTheme, { useBaseStyles: false, children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: extraItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), children] }) }) }) }));
+    return (_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(LoadContentPlugin, { content: content }), _jsx(JupyterReactTheme, { useBaseStyles: false, children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: extraItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), children] }) }) }) }));
 };

package/lib/examples/components/MainContent.js

@@ -9,17 +9,5 @@ import { McpServerManager } from '../../mcp/McpServerManager';
  * When an agent is running (isConfigured=true), also shows the MCP Server Manager for runtime management.
  */
 export const MainContent = ({ showWelcomeMessage = true, baseUrl, agentId, enableCodemode, selectedMcpServers, onSelectedMcpServersChange, onMcpServersChange, isConfigured, }) => {
-    return (_jsxs(Box, { sx: { height: '100%', overflow: 'auto', padding: 3 }, children: [isConfigured && baseUrl && (_jsx(Box, { sx: {
-                    mb: 4,
-                    p: 3,
-                    bg: 'canvas.default',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                }, children: _jsx(McpServerManager, { baseUrl: baseUrl, agentId: agentId, enableCodemode: enableCodemode, selectedServers: selectedMcpServers, onSelectedServersChange: onSelectedMcpServersChange, onServersChange: onMcpServersChange, disabled: false }) })), showWelcomeMessage && (_jsx(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100%',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure your agent and start a conversation using the chat panel." }) }))] }));
+    return (_jsxs(Box, { height: "100%", overflow: "auto", padding: 3, children: [isConfigured && baseUrl && (_jsx(Box, { mb: 4, p: 3, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: _jsx(McpServerManager, { baseUrl: baseUrl, agentId: agentId, enableCodemode: enableCodemode, selectedServers: selectedMcpServers, onSelectedServersChange: onSelectedMcpServersChange, onServersChange: onMcpServersChange, disabled: false }) })), showWelcomeMessage && (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure your agent and start a conversation using the chat panel." }) }))] }));
 };

package/lib/examples/components/MockFileBrowser.js

@@ -15,7 +15,7 @@ import { Box } from '@datalayer/primer-addons';
  */
 export const MockFileBrowser = ({ codemode = false, }) => {
     const [activeTab, setActiveTab] = useState('sandbox');
-    return (_jsxs(Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { sx: { p: 2, borderBottom: '1px solid', borderColor: 'border.default' }, children: _jsxs(SegmentedControl, { "aria-label": "Left pane navigation", children: [_jsx(SegmentedControl.Button, { selected: activeTab === 'sandbox', onClick: () => setActiveTab('sandbox'), children: "Code" }), _jsx(SegmentedControl.Button, { selected: activeTab === 'tools', onClick: () => setActiveTab('tools'), children: "Tools" })] }) }), _jsx(Box, { sx: { p: 2, flex: 1, overflow: 'auto' }, children: activeTab === 'sandbox' ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { mb: 4 }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: "border.default", children: _jsxs(SegmentedControl, { "aria-label": "Left pane navigation", children: [_jsx(SegmentedControl.Button, { selected: activeTab === 'sandbox', onClick: () => setActiveTab('sandbox'), children: "Code" }), _jsx(SegmentedControl.Button, { selected: activeTab === 'tools', onClick: () => setActiveTab('tools'), children: "Tools" })] }) }), _jsx(Box, { p: 2, flex: 1, overflow: "auto", children: activeTab === 'sandbox' ? (_jsxs(_Fragment, { children: [_jsxs(Box, { mb: 4, children: [_jsx(Text, { sx: {
                                         fontSize: 1,
                                         fontWeight: 'semibold',
                                         display: 'block',
@@ -26,49 +26,13 @@ export const MockFileBrowser = ({ codemode = false, }) => {
                                         display: 'block',
                                         mb: 1,
                                         color: 'fg.muted',
-                                    }, children: "Documents" }), _jsxs(Box, { sx: { fontSize: 0, mb: 2 }, children: [_jsx(Box, { sx: {
-                                                py: 1,
-                                                cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.default' },
-                                            }, children: "\uD83D\uDCC1 notebooks/" }), _jsx(Box, { sx: {
-                                                py: 1,
-                                                pl: 3,
-                                                cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.default' },
-                                            }, children: "\uD83D\uDCD3 analysis.ipynb" }), _jsx(Box, { sx: {
-                                                py: 1,
-                                                pl: 3,
-                                                cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.default' },
-                                            }, children: "\uD83D\uDCD3 demo.ipynb" }), _jsx(Box, { sx: {
-                                                py: 1,
-                                                cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.default' },
-                                            }, children: "\uD83D\uDCC1 data/" }), _jsx(Box, { sx: {
-                                                py: 1,
-                                                pl: 3,
-                                                cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.default' },
-                                            }, children: "\uD83D\uDCC4 dataset.csv" }), _jsx(Box, { sx: {
-                                                py: 1,
-                                                cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.default' },
-                                            }, children: "\uD83D\uDCC1 models/" }), _jsx(Box, { sx: {
-                                                py: 1,
-                                                pl: 3,
-                                                cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.default' },
-                                            }, children: "\uD83D\uDCC4 agent.py" })] }), _jsx(Text, { sx: {
+                                    }, children: "Documents" }), _jsxs(Box, { fontSize: 0, mb: 2, children: [_jsx(Box, { py: 1, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83D\uDCC1 notebooks/" }), _jsx(Box, { py: 1, pl: 3, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83D\uDCD3 analysis.ipynb" }), _jsx(Box, { py: 1, pl: 3, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83D\uDCD3 demo.ipynb" }), _jsx(Box, { py: 1, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83D\uDCC1 data/" }), _jsx(Box, { py: 1, pl: 3, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83D\uDCC4 dataset.csv" }), _jsx(Box, { py: 1, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83D\uDCC1 models/" }), _jsx(Box, { py: 1, pl: 3, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83D\uDCC4 agent.py" })] }), _jsx(Text, { sx: {
                                         fontSize: 0,
                                         fontWeight: 'semibold',
                                         display: 'block',
                                         mb: 1,
                                         color: 'fg.muted',
-                                    }, children: "Buckets" }), _jsx(Box, { sx: { fontSize: 0 }, children: _jsx(Box, { sx: {
-                                            py: 1,
-                                            cursor: 'pointer',
-                                            '&:hover': { bg: 'canvas.default' },
-                                        }, children: "\uD83E\uDEA3 s3://nasa-1" }) })] }), _jsxs(Box, { children: [_jsx(Text, { sx: {
+                                    }, children: "Buckets" }), _jsx(Box, { fontSize: 0, children: _jsx(Box, { py: 1, cursor: "pointer", hover: { bg: 'canvas.default' }, children: "\uD83E\uDEA3 s3://nasa-1" }) })] }), _jsxs(Box, { children: [_jsx(Text, { sx: {
                                         fontSize: 1,
                                         fontWeight: 'semibold',
                                         display: 'block',
@@ -89,7 +53,7 @@ export const MockFileBrowser = ({ codemode = false, }) => {
                                             field: 'type',
                                             renderCell: row => (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: row.type })),
                                         },
-                                    ] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { mb: 4 }, children: [_jsx(Text, { sx: {
+                                    ] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { mb: 4, children: [_jsx(Text, { sx: {
                                         fontSize: 1,
                                         fontWeight: 'semibold',
                                         display: 'block',

package/lib/examples/components/SessionTabs.js

@@ -7,5 +7,5 @@ import { Box } from '@datalayer/primer-addons';
  * Displays the current session name.
  */
 export const SessionTabs = ({ sessions: _sessions, activeSession: _activeSession, agentName = 'Earthquake Detector', agentDescription, onSessionChange: _onSessionChange, onAddSession: _onAddSession, }) => {
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: agentName }), agentDescription && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: agentDescription }))] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: agentName }), agentDescription && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: agentDescription }))] }));
 };

package/lib/examples/components/TimeTravel.js

@@ -7,17 +7,5 @@ import { Box, Slider } from '@datalayer/primer-addons';
  * Slider for navigating through document history.
  */
 export const TimeTravel = ({ value, onChange, min = 0, max = 100, step = 1, }) => {
-    return (_jsxs(Box, { sx: {
-            marginTop: 3,
-            padding: 3,
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            backgroundColor: 'canvas.default',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 3,
-                    marginBottom: 2,
-                }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "Time Travel" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Navigate through history: ", value, " steps"] })] }), _jsx(Slider, { value: value, min: min, max: max, step: step, onChange: onChange, "aria-label": "Time travel slider" })] }));
+    return (_jsxs(Box, { marginTop: 3, padding: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, backgroundColor: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 3, marginBottom: 2, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "Time Travel" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Navigate through history: ", value, " steps"] })] }), _jsx(Slider, { value: value, min: min, max: max, step: step, onChange: onChange, "aria-label": "Time travel slider" })] }));
 };