@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/examples/LexicalAgentExample.js

@@ -103,25 +103,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
     const handleChange = useCallback((_editorState) => {
         // onChange handler - can be used for tracking changes
     }, []);
-    return (_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: "Lexical Example" }), _jsx("p", { children: "Platform-agnostic usage with agent-runtimes integration. Use the AI Agent to manipulate the Document." })] }), _jsx(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    padding: 3,
-                    backgroundColor: 'canvas.default',
-                    minHeight: '600px',
-                }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _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(TableCellResizerPlugin, {}), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, { serviceManager: serviceManager }) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+    return (_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: "Lexical Example" }), _jsx("p", { children: "Platform-agnostic usage with agent-runtimes integration. Use the AI Agent to manipulate the Document." })] }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, padding: 3, backgroundColor: "canvas.default", minHeight: "600px", children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _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(TableCellResizerPlugin, {}), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, { serviceManager: serviceManager }) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                             type: 'vercel-ai',
                                             endpoint,
                                         }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
@@ -158,21 +140,7 @@ function LexicalWithChat({ content, serviceManager, }) {
         console.log('[LexicalWithChat] 🔄 Tools received, updating state');
         setTools(newTools);
     }, []);
-    return (_jsxs(Box, { sx: {
-            height: '100vh',
-            width: '100vw',
-            display: 'flex',
-            overflow: 'hidden',
-        }, children: [_jsx(LexicalUI, { content: content, serviceManager: serviceManager, endpoint: protocolConfig.endpoint, onToolsReady: handleToolsReady }), chatError && (_jsxs(Box, { sx: {
-                    position: 'fixed',
-                    bottom: 20,
-                    right: 20,
-                    padding: 3,
-                    backgroundColor: 'danger.subtle',
-                    color: 'danger.fg',
-                    borderRadius: 2,
-                    maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", chatError] })), effectiveReady && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: protocolConfig, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: chatFrontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+    return (_jsxs(Box, { height: "100vh", width: "100vw", display: "flex", overflow: "hidden", children: [_jsx(LexicalUI, { content: content, serviceManager: serviceManager, endpoint: protocolConfig.endpoint, onToolsReady: handleToolsReady }), chatError && (_jsxs(Box, { position: "fixed", bottom: 20, right: 20, padding: 3, backgroundColor: "danger.subtle", color: "danger.fg", borderRadius: 2, maxWidth: 300, children: [_jsx("strong", { children: "Error:" }), " ", chatError] })), effectiveReady && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: protocolConfig, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: chatFrontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/LexicalAgentSidebarExample.js

@@ -91,7 +91,7 @@ function LexicalEditor({ serviceManager, endpoint }) {
      * inside it is what made them read `canvas.default` from the stock light
      * palette — the same trap `NotebookAgentSidebarExample` documents.
      */
-    return (_jsx(LexicalPrimerThemeProvider, { useStore: useExampleThemeStore, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsxs(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: [_jsx(LexicalStatePlugin, {}), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { ref: onRef, children: _jsx(ContentEditable, { placeholder: _jsx("div", { style: {
+    return (_jsx(LexicalPrimerThemeProvider, { useStore: useExampleThemeStore, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsxs(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: [_jsx(LexicalStatePlugin, {}), _jsxs(Box, { position: "relative", width: "100%", children: [_jsx("div", { ref: onRef, children: _jsx(ContentEditable, { placeholder: _jsx("div", { style: {
                                             position: 'absolute',
                                             top: '24px',
                                             left: '24px',
@@ -123,29 +123,7 @@ export function ChatLexicalAgentExampleInner({ serviceManager, }) {
     const effectiveReady = agentReady;
     // Get lexical tools for ChatSidebar
     // Build Vercel AI protocol config
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                    height: 'calc(100vh - 70px)',
-                    width: '100vw',
-                    display: 'flex',
-                    overflow: 'hidden',
-                }, children: [_jsxs(Box, { sx: {
-                            flex: 1,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'hidden',
-                        }, children: [_jsxs(Box, { sx: {
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                    bg: 'canvas.default',
-                                }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Lexical Agent Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Next generation chat with Lexical editor integration" })] }), _jsx(Box, { sx: {
-                                    flex: 1,
-                                    minHeight: 0,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    overflow: 'auto',
-                                    bg: 'canvas.default',
-                                }, children: _jsx(LexicalEditor, { serviceManager: serviceManager, endpoint: protocolConfig.endpoint }) })] }), effectiveReady && (_jsx(ChatSidebar, { kernelIndicatorPlacement: "right", title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { height: "calc(100vh - 70px)", width: "100vw", display: "flex", overflow: "hidden", children: [_jsxs(Box, { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.default", children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Lexical Agent Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Next generation chat with Lexical editor integration" })] }), _jsx(Box, { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflow: "auto", bg: "canvas.default", children: _jsx(LexicalEditor, { serviceManager: serviceManager, endpoint: protocolConfig.endpoint }) })] }), effectiveReady && (_jsx(ChatSidebar, { kernelIndicatorPlacement: "right", title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
                             protocol: protocolConfig,
                             frontendTools: chatFrontendTools,
                             useStore: true,
@@ -170,16 +148,7 @@ export function ChatLexicalAgentExampleInner({ serviceManager, }) {
                                     message: 'Can you summarize the content in the editor?',
                                 },
                             ],
-                        } }))] }), chatError && (_jsxs(Box, { sx: {
-                    position: 'fixed',
-                    bottom: 20,
-                    right: 20,
-                    padding: 3,
-                    backgroundColor: 'danger.subtle',
-                    color: 'danger.fg',
-                    borderRadius: 2,
-                    maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", chatError] }))] }));
+                        } }))] }), chatError && (_jsxs(Box, { position: "fixed", bottom: 20, right: 20, padding: 3, backgroundColor: "danger.subtle", color: "danger.fg", borderRadius: 2, maxWidth: 300, children: [_jsx("strong", { children: "Error:" }), " ", chatError] }))] }));
 }
 /**
  * The example, in the app's theme, on the shell's runtime.

package/lib/examples/LoopAppComputerExample.js

@@ -51,7 +51,7 @@ function computerDesk() {
 }
 const LoopAppComputerExample = () => {
     const app = useMemo(computerDesk, []);
-    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(AppRenderer, { app: app, 
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(AppRenderer, { app: app, 
                 // The examples Vite server has no /api proxy.
                 serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", sidebar: true }) }) }));
 };

package/lib/examples/LoopShellExample.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { useReactor } from '@datalayer/reactor/react';
 import { registerDeckComponents, registerDecks } from '@datalayer/decks';
@@ -55,7 +55,7 @@ export function LoopShellExample({ serverUrl = resolveExampleAgentRuntimesUrl('l
     // Registered here rather than inside the workspace, because this component
     // built it; the workspace is told not to manage it a second time.
     useReactor(reactor);
-    const shell = (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(Box, { sx: { height: '100%', minHeight: 0 }, children: _jsx(LoopWorkspace, { serverUrl: serverUrl, agentId: agentId, reactor: reactor, manageReactor: false, 
+    const shell = (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(Box, { height: "100%", minHeight: 0, children: _jsx(LoopWorkspace, { serverUrl: serverUrl, agentId: agentId, reactor: reactor, manageReactor: false, 
                 // The header stays for the one thing living in it — the editor
                 // selector on its trailing edge — but offers no view switcher:
                 // a blank shell with one control is the example.

package/lib/examples/LoopStrategyExample.js

@@ -87,13 +87,7 @@ function buildStrategySystemPrompt(strategy) {
 }
 function NotebookUI({ serviceManager }) {
     if (!serviceManager) {
-        return (_jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                color: 'fg.muted',
-            }, children: "Loading Simple services..." }));
+        return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "fg.muted", children: "Loading Simple services..." }));
     }
     /*
      * Scoped to the notebook, not to the example.
@@ -111,25 +105,7 @@ function NotebookUI({ serviceManager }) {
  * A compact, read-only summary of the selected strategy specification.
  */
 function StrategySummary({ strategy }) {
-    return (_jsxs(Box, { sx: {
-            mt: 2,
-            p: 2,
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            bg: 'canvas.default',
-            fontSize: 0,
-        }, children: [_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 2, mb: 1 }, children: strategy.phases.map((phase, index) => (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 1,
-                        px: 2,
-                        py: '2px',
-                        borderRadius: 6,
-                        bg: 'neutral.muted',
-                        color: 'fg.default',
-                        fontWeight: 'bold',
-                    }, children: [index + 1, ". ", phase] }, phase))) }), strategy.objective && (_jsxs(Box, { sx: { color: 'fg.muted' }, children: [_jsx("strong", { children: "Objective:" }), " ", strategy.objective] })), strategy.termination && (_jsxs(Box, { sx: { color: 'fg.muted', mt: 1 }, children: [_jsx("strong", { children: "Max iterations:" }), " ", strategy.termination.maxIterations, ' ', "\u00B7 ", _jsx("strong", { children: "On blocked:" }), " ", strategy.termination.onBlocked] }))] }));
+    return (_jsxs(Box, { mt: 2, p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", fontSize: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 1, children: strategy.phases.map((phase, index) => (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, px: 2, py: "2px", borderRadius: 6, bg: "neutral.muted", color: "fg.default", fontWeight: "bold", children: [index + 1, ". ", phase] }, phase))) }), strategy.objective && (_jsxs(Box, { color: "fg.muted", children: [_jsx("strong", { children: "Objective:" }), " ", strategy.objective] })), strategy.termination && (_jsxs(Box, { color: "fg.muted", mt: 1, children: [_jsx("strong", { children: "Max iterations:" }), " ", strategy.termination.maxIterations, ' ', "\u00B7 ", _jsx("strong", { children: "On blocked:" }), " ", strategy.termination.onBlocked] }))] }));
 }
 export function LoopStrategyExampleInner({ serviceManager, }) {
     // All available strategies come from the generated strategy catalogue.
@@ -177,57 +153,19 @@ export function LoopStrategyExampleInner({ serviceManager, }) {
             message: 'Summarize the key findings and produce a final, decision-oriented report.',
         },
     ], [selectedStrategy]);
-    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
-                // The wrapper is the viewport, not the window: it sits below the
-                // header and beside the sidebar, so viewport units size this box to
-                // an area it is not in — and the wrapper paints no background of its
-                // own, so wherever this box failed to reach showed through white.
-                height: '100%',
-                width: '100%',
-                display: 'flex',
-                overflow: 'hidden',
-                bg: 'canvas.default',
-                color: 'fg.default',
-            }, children: [_jsxs(Box, { sx: {
-                        flex: 1,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        overflow: 'hidden',
-                    }, children: [_jsxs(Box, { sx: {
-                                p: 3,
-                                borderBottom: '1px solid',
-                                borderColor: 'border.default',
-                                bg: 'canvas.default',
-                            }, children: [_jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                        gap: 3,
-                                        flexWrap: 'wrap',
-                                    }, children: [_jsxs(Box, { children: [_jsxs("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: [selectedStrategy.emoji, " Loop Strategy Example"] }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Define and launch an agent reasoning strategy \u2014 observe, think, act, evaluate \u2014 over a live notebook." })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, title: isStrategySelectorDisabled
+    return (_jsx(_Fragment, { children: _jsxs(Box
+        // The wrapper is the viewport, not the window: it sits below the
+        // header and beside the sidebar, so viewport units size this box to
+        // an area it is not in — and the wrapper paints no background of its
+        // own, so wherever this box failed to reach showed through white.
+        , { 
+            // The wrapper is the viewport, not the window: it sits below the
+            // header and beside the sidebar, so viewport units size this box to
+            // an area it is not in — and the wrapper paints no background of its
+            // own, so wherever this box failed to reach showed through white.
+            height: "100%", width: "100%", display: "flex", overflow: "hidden", bg: "canvas.default", color: "fg.default", children: [_jsxs(Box, { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, flexWrap: "wrap", children: [_jsxs(Box, { children: [_jsxs("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: [selectedStrategy.emoji, " Loop Strategy Example"] }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Define and launch an agent reasoning strategy \u2014 observe, think, act, evaluate \u2014 over a live notebook." })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, title: isStrategySelectorDisabled
                                                 ? 'Strategy selector is temporarily disabled while launching the agent'
-                                                : 'Choose a strategy', children: [_jsx(Box, { as: "label", sx: { fontSize: 1, fontWeight: 'bold' }, children: "Strategy" }), _jsx(Box, { as: "select", value: selectedStrategyId, onChange: (e) => setSelectedStrategyId(e.target.value), disabled: isStrategySelectorDisabled, "aria-label": "Strategy specification", sx: {
-                                                        px: 2,
-                                                        py: '6px',
-                                                        fontSize: 1,
-                                                        borderRadius: 2,
-                                                        border: '1px solid',
-                                                        borderColor: 'border.default',
-                                                        bg: 'canvas.default',
-                                                        color: 'fg.default',
-                                                    }, children: strategies.map(strategy => (_jsxs("option", { value: strategy.id, children: [strategy.emoji, " ", strategy.name] }, strategy.id))) })] })] }), _jsx(StrategySummary, { strategy: selectedStrategy })] }), _jsx(Box, { sx: {
-                                flex: 1,
-                                display: 'flex',
-                                overflow: 'hidden',
-                                bg: 'canvas.default',
-                                p: 3,
-                            }, children: _jsx(Box, { sx: {
-                                    flex: 1,
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    overflow: 'hidden',
-                                }, children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), effectiveReady && (_jsx(ChatSidebar, { title: `${selectedStrategy.emoji} ${selectedStrategy.name}`, protocol: protocolConfig, position: "right", width: 400, clickOutsideToClose: false, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                                                : 'Choose a strategy', children: [_jsx(Box, { as: "label", fontSize: 1, fontWeight: "bold", children: "Strategy" }), _jsx(Box, { as: "select", value: selectedStrategyId, onChange: (e) => setSelectedStrategyId(e.target.value), disabled: isStrategySelectorDisabled, "aria-label": "Strategy specification", px: 2, py: "6px", fontSize: 1, borderRadius: 2, border: "1px solid", borderColor: "border.default", bg: "canvas.default", color: "fg.default", children: strategies.map(strategy => (_jsxs("option", { value: strategy.id, children: [strategy.emoji, " ", strategy.name] }, strategy.id))) })] })] }), _jsx(StrategySummary, { strategy: selectedStrategy })] }), _jsx(Box, { flex: 1, display: "flex", overflow: "hidden", bg: "canvas.default", p: 3, children: _jsx(Box, { flex: 1, border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), effectiveReady && (_jsx(ChatSidebar, { title: `${selectedStrategy.emoji} ${selectedStrategy.name}`, protocol: protocolConfig, position: "right", width: 400, clickOutsideToClose: false, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
                         protocol: protocolConfig,
                         frontendTools: chatFrontendTools,
                         useStore: false,
@@ -235,17 +173,7 @@ export function LoopStrategyExampleInner({ serviceManager, }) {
                         showToolsMenu: true,
                         showSkillsMenu: true,
                         suggestions,
-                    } })), chatError && (_jsxs(Box, { sx: {
-                        position: 'fixed',
-                        bottom: 20,
-                        right: 20,
-                        padding: 3,
-                        backgroundColor: 'danger.subtle',
-                        color: 'danger.fg',
-                        borderRadius: 2,
-                        maxWidth: 320,
-                        zIndex: 999,
-                    }, children: [_jsx("strong", { children: "Error:" }), " ", chatError] }))] }) }));
+                    } })), chatError && (_jsxs(Box, { position: "fixed", bottom: 20, right: 20, padding: 3, backgroundColor: "danger.subtle", color: "danger.fg", borderRadius: 2, maxWidth: 320, zIndex: 999, children: [_jsx("strong", { children: "Error:" }), " ", chatError] }))] }) }));
 }
 /**
  * Main example component with Jupyter provider wrapper.

package/lib/examples/LoopWorkspaceEmbed.js

@@ -23,27 +23,11 @@ export function preloadLoopWorkspace() {
 }
 /** Rendered while the editor and its runtime are arriving. */
 function WorkspaceLoading() {
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 3,
-        }, children: [_jsx(Spinner, {}), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Starting the workspace\u2026" })] }));
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 3, children: [_jsx(Spinner, {}), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Starting the workspace\u2026" })] }));
 }
 /** Said when the workspace will not start, and the host offered nothing better. */
 function WorkspaceUnavailable() {
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 2,
-            px: 4,
-            textAlign: 'center',
-        }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'semibold' }, children: "The live workspace could not start in this browser." }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 420 }, children: "It needs a modern browser that can run Python in a worker." })] }));
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, px: 4, textAlign: "center", children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'semibold' }, children: "The live workspace could not start in this browser." }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 420 }, children: "It needs a modern browser that can run Python in a worker." })] }));
 }
 /** Keeps a failing workspace from taking its host's page with it. */
 class WorkspaceBoundary extends Component {

package/lib/examples/LoopWorkspaceExample.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { useReactor, useSignalValue } from '@datalayer/reactor/react';
 import { buildLoopReactor, LoopWorkspace } from '../loop/shell';
@@ -125,7 +125,7 @@ serverUrl = resolveExampleAgentRuntimesUrl('local'), agentId = 'loop-workspace',
          * The room around it is what makes the frame read as a window sitting
          * on a page rather than as a border drawn at the edges of the screen.
          */
-        _jsx(Box, { sx: { height: '100%', minHeight: 0, p: 3, boxSizing: 'border-box' }, children: _jsx(WindowFrame, { title: _jsx(Box, { as: "span", sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Loop" }), children: shell }) })) : (_jsx(Box, { sx: { height: '100%', minHeight: 0 }, children: shell })) }));
+        _jsx(Box, { height: "100%", minHeight: 0, p: 3, boxSizing: "border-box", children: _jsx(WindowFrame, { title: _jsx(Box, { as: "span", fontSize: 1, fontWeight: "semibold", children: "Loop" }), children: shell }) })) : (_jsx(Box, { height: "100%", minHeight: 0, children: shell })) }));
     // A host that owns the theme gets the workspace and nothing else.
     if (inheritTheme) {
         return workspace;

package/lib/examples/NotebookAgentExample.js

@@ -16,24 +16,7 @@ const NOTEBOOK_ID = 'agui-notebook-example';
 const NOTEBOOK_CONTENT = MatplotlibNotebook;
 const AGENT_ID = 'notebook-agent-runtime-example';
 const NotebookUI = React.memo(function NotebookUI({ serviceManager, onSessionConnection, }) {
-    return (_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(Box, { as: "h1", sx: { margin: 0 }, children: "Notebook Agent Example" }), _jsx("p", { children: "Platform-agnostic usage with agent-runtimes integration. Use the AI Agent to manipulate the Notebook." })] }), _jsx(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    padding: 3,
-                    backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, serviceManager: serviceManager, onSessionConnection: onSessionConnection, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+    return (_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(Box, { as: "h1", margin: 0, children: "Notebook Agent Example" }), _jsx("p", { children: "Platform-agnostic usage with agent-runtimes integration. Use the AI Agent to manipulate the Notebook." })] }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, padding: 3, backgroundColor: "canvas.default", children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, serviceManager: serviceManager, onSessionConnection: onSessionConnection, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { padding: 3, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
 });
 function NotebookWithChat({ serviceManager, }) {
     const [notebookKernel, setNotebookKernel] = useState(null);
@@ -56,21 +39,7 @@ function NotebookWithChat({ serviceManager, }) {
     const handleSessionConnection = useCallback((session) => {
         setNotebookKernel(session?.kernel ?? null);
     }, []);
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            width: '100%',
-            display: 'flex',
-            overflow: 'hidden',
-        }, children: [_jsx(NotebookUI, { serviceManager: serviceManager, onSessionConnection: handleSessionConnection }), chatError && (_jsxs(Box, { sx: {
-                    position: 'fixed',
-                    bottom: 20,
-                    right: 20,
-                    padding: 3,
-                    backgroundColor: 'danger.subtle',
-                    color: 'danger.fg',
-                    borderRadius: 2,
-                    maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", chatError] })), effectiveReady && (_jsx(ChatFloating, { protocol: protocolConfig, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: chatFrontendTools, useStore: false, 
+    return (_jsxs(Box, { height: "100%", width: "100%", display: "flex", overflow: "hidden", children: [_jsx(NotebookUI, { serviceManager: serviceManager, onSessionConnection: handleSessionConnection }), chatError && (_jsxs(Box, { position: "fixed", bottom: 20, right: 20, padding: 3, backgroundColor: "danger.subtle", color: "danger.fg", borderRadius: 2, maxWidth: 300, children: [_jsx("strong", { children: "Error:" }), " ", chatError] })), effectiveReady && (_jsx(ChatFloating, { protocol: protocolConfig, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: chatFrontendTools, useStore: false, 
                 /*
                   Every control this chat has, which is what an example is for.
       

package/lib/examples/NotebookAgentSidebarExample.js

@@ -35,13 +35,7 @@ const NOTEBOOK_CONTENT = MatplotlibNotebook;
 const DEFAULT_AGENT_ID = import.meta.env.VITE_AGENT_ID || 'notebook-sidebar-agent-runtime-example';
 function NotebookUI({ serviceManager }) {
     if (!serviceManager) {
-        return (_jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                color: 'fg.muted',
-            }, children: "Loading Simple services..." }));
+        return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "fg.muted", children: "Loading Simple services..." }));
     }
     return (
     // Only the notebook is wrapped. `JupyterReactTheme` nests a Primer theme
@@ -71,34 +65,7 @@ export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
     const effectiveReady = agentReady;
     // Get notebook tools for ChatSidebar
     // Build Vercel AI protocol config
-    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
-                height: 'calc(100vh - 70px)',
-                width: '100vw',
-                display: 'flex',
-                overflow: 'hidden',
-            }, children: [_jsxs(Box, { sx: {
-                        flex: 1,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        overflow: 'hidden',
-                    }, children: [_jsxs(Box, { sx: {
-                                p: 3,
-                                borderBottom: '1px solid',
-                                borderColor: 'border.default',
-                                bg: 'canvas.default',
-                            }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Notebook Chat Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Chat with Jupyter Notebook integration" })] }), _jsx(Box, { sx: {
-                                flex: 1,
-                                display: 'flex',
-                                overflow: 'hidden',
-                                bg: 'canvas.default',
-                                p: 3,
-                            }, children: _jsx(Box, { sx: {
-                                    flex: 1,
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    overflow: 'hidden',
-                                }, children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), effectiveReady && (_jsx(ChatSidebar, { title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+    return (_jsx(_Fragment, { children: _jsxs(Box, { height: "calc(100vh - 70px)", width: "100vw", display: "flex", overflow: "hidden", children: [_jsxs(Box, { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.default", children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Notebook Chat Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Chat with Jupyter Notebook integration" })] }), _jsx(Box, { flex: 1, display: "flex", overflow: "hidden", bg: "canvas.default", p: 3, children: _jsx(Box, { flex: 1, border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), effectiveReady && (_jsx(ChatSidebar, { title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
                         protocol: protocolConfig,
                         frontendTools: chatFrontendTools,
                         useStore: false,
@@ -123,17 +90,7 @@ export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
                                 message: 'Can you suggest improvements for the code?',
                             },
                         ],
-                    } })), chatError && (_jsxs(Box, { sx: {
-                        position: 'fixed',
-                        bottom: 20,
-                        right: 20,
-                        padding: 3,
-                        backgroundColor: 'danger.subtle',
-                        color: 'danger.fg',
-                        borderRadius: 2,
-                        maxWidth: 320,
-                        zIndex: 999,
-                    }, children: [_jsx("strong", { children: "Error:" }), " ", chatError] }))] }) }));
+                    } })), chatError && (_jsxs(Box, { position: "fixed", bottom: 20, right: 20, padding: 3, backgroundColor: "danger.subtle", color: "danger.fg", borderRadius: 2, maxWidth: 320, zIndex: 999, children: [_jsx("strong", { children: "Error:" }), " ", chatError] }))] }) }));
 }
 /**
  * The example, in the app's theme.

package/lib/examples/NotebookCollaborationExample.js

@@ -155,36 +155,6 @@ const NotebookCollaborationExample = (props) => {
             collaborationProviders.forEach(provider => provider?.dispose());
         };
     }, [collaborationProviders]);
-    return (_jsx(ThemedJupyterProvider, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Notebook Collaboration Example" }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }), enableCollaboration && runtimeTarget !== 'datalayer' && (_jsx(Box, { sx: { mt: 1, color: 'fg.muted', fontSize: 0 }, children: "Real-time Datalayer collaboration requires the cloud runtime target. Local mode does not expose a collaboration room." }))] }), (!configuration?.spacerUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure spacerUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), collaborationError && (_jsxs(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: ["Collaboration could not start: ", collaborationError] })), enableCollaboration && collaborationReady ? (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        gap: 2,
-                        flexDirection: 'row',
-                    }, children: [_jsxs(Box, { sx: {
-                                flex: 1,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: 2,
-                            }, children: [_jsx(Box, { sx: {
-                                        p: 2,
-                                        bg: 'canvas.default',
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.default',
-                                        fontWeight: 'bold',
-                                    }, children: "Collaborator 1" }), serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, path: ROOM_PATH, height: "calc(100vh - 280px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider1 })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." }))] }), _jsxs(Box, { sx: {
-                                flex: 1,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: 2,
-                            }, children: [_jsx(Box, { sx: {
-                                        p: 2,
-                                        bg: 'canvas.default',
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.default',
-                                        fontWeight: 'bold',
-                                    }, children: "Collaborator 2" }), serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, path: ROOM_PATH, height: "calc(100vh - 280px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: false, collaborationProvider: collaborationProvider2 })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." }))] })] })) : (_jsx(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                    }, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider1 })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." })) })), _jsxs(Box, { sx: { mt: 2, fontSize: 1, color: 'fg.subtle' }, children: [_jsx(Box, { as: "p", sx: { m: 0, mb: 2 }, children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs(Box, { as: "ul", sx: { m: 0, pl: 3, '& li': { mb: 1 } }, children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (spacerUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Notebook Collaboration Example" }), _jsxs(Box, { mb: 3, children: [_jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }), enableCollaboration && runtimeTarget !== 'datalayer' && (_jsx(Box, { mt: 1, color: "fg.muted", fontSize: 0, children: "Real-time Datalayer collaboration requires the cloud runtime target. Local mode does not expose a collaboration room." }))] }), (!configuration?.spacerUrl || !configuration?.token) && (_jsx(Box, { mb: 2, p: 2, bg: "danger.subtle", children: "Warning: Datalayer configuration is missing. Please configure spacerUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { mb: 2, p: 2, bg: "attention.subtle", children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), collaborationError && (_jsxs(Box, { mb: 2, p: 2, bg: "danger.subtle", children: ["Collaboration could not start: ", collaborationError] })), enableCollaboration && collaborationReady ? (_jsxs(Box, { display: "flex", gap: 2, flexDirection: "row", children: [_jsxs(Box, { flex: 1, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsx(Box, { p: 2, bg: "canvas.default", borderBottom: "1px solid", borderColor: "border.default", fontWeight: "bold", children: "Collaborator 1" }), serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, path: ROOM_PATH, height: "calc(100vh - 280px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider1 })) : (_jsx(Box, { p: 4, textAlign: "center", children: "Loading ServiceManager..." }))] }), _jsxs(Box, { flex: 1, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsx(Box, { p: 2, bg: "canvas.default", borderBottom: "1px solid", borderColor: "border.default", fontWeight: "bold", children: "Collaborator 2" }), serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, path: ROOM_PATH, height: "calc(100vh - 280px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: false, collaborationProvider: collaborationProvider2 })) : (_jsx(Box, { p: 4, textAlign: "center", children: "Loading ServiceManager..." }))] })] })) : (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider1 })) : (_jsx(Box, { p: 4, textAlign: "center", children: "Loading ServiceManager..." })) })), _jsxs(Box, { mt: 2, fontSize: 1, color: "fg.subtle", children: [_jsx(Box, { as: "p", m: 0, mb: 2, children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs(Box, { as: "ul", m: 0, pl: 3, sx: { '& li': { mb: 1 } }, children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (spacerUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
 };
 export default NotebookCollaborationExample;

package/lib/examples/NotebookExample.js

@@ -13,23 +13,6 @@ const NOTEBOOK_ID = 'notebook-example-1';
 export const JupyterNotebookExample = (props) => {
     const { serviceManager } = props;
     const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
-    return (_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(Box, { as: "h1", sx: { margin: 0 }, children: "Notebook Example" }), _jsx("p", { children: "A notebook on the selected sandbox, with the kernel indicator in its toolbar." })] }), _jsx(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    padding: 3,
-                    backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: ExampleNotebookToolbar, height: "calc(100vh - 300px)", cellSidebarMargin: 120 }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+    return (_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(Box, { as: "h1", margin: 0, children: "Notebook Example" }), _jsx("p", { children: "A notebook on the selected sandbox, with the kernel indicator in its toolbar." })] }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, padding: 3, backgroundColor: "canvas.default", children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: ExampleNotebookToolbar, height: "calc(100vh - 300px)", cellSidebarMargin: 120 }) })) : (_jsx(Box, { padding: 3, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
 };
 export default JupyterNotebookExample;

package/lib/examples/NotebookPageAgent.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 NotebookPageAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", 
+const NotebookPageAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", 
             /* The Analyst is the team's front door; the team puts the other
                members one click away in the composer's agents menu. */
             agentId: "jupyter-data-analyst", teamId: "jupyter",