@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/Agent.js

@@ -93,27 +93,11 @@ export const Agent = () => {
     }, [agentId]);
     // Loading state while verifying agent
     if (!isReady && !error) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "..."] })] }) }));
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, bg: "canvas.default", children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "..."] })] }) }));
     }
     // Error state
     if (error) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect to agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, bg: "canvas.default", children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect to agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
     }
     // Agent is ready — render the Chat component
     return (_jsx(DatalayerThemeProvider, { children: _jsx(Chat, { protocol: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Agent", placeholder: "Send a message...", description: "Chat with the agent", showHeader: true, height: '100vh', showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [

package/lib/AgentDocument.js

@@ -207,26 +207,13 @@ const LexicalPanel = React.memo(function LexicalPanel({ serviceManager, kernelId
     }, []);
     const agentId = getAgentId();
     const agUiEndpoint = `${BASE_URL}/api/v1/ag-ui/${encodeURIComponent(agentId)}/`;
-    return (_jsx(Box, { sx: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'auto',
-            borderRight: '1px solid',
-            borderColor: 'border.default',
-        }, children: _jsx(Box, { sx: { padding: 3 }, children: _jsxs(LexicalConfigProvider, { lexicalId: DOCUMENT_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, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterReactTheme, { colormode: colormode, backgroundColor: backgroundColor, children: _jsx(KernelPluginsInner, { serviceManager: serviceManager, kernelId: kernelId, onKernelReady: onKernelReady }) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+    return (_jsx(Box, { flex: 1, display: "flex", flexDirection: "column", overflow: "auto", borderRight: "1px solid", borderColor: "border.default", children: _jsx(Box, { padding: 3, children: _jsxs(LexicalConfigProvider, { lexicalId: DOCUMENT_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, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterReactTheme, { colormode: colormode, backgroundColor: backgroundColor, children: _jsx(KernelPluginsInner, { serviceManager: serviceManager, kernelId: kernelId, onKernelReady: onKernelReady }) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                         type: 'ag-ui',
                                         endpoint: agUiEndpoint,
                                     }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) }) }));
 });
 const ChatPanel = ({ agentId, tools, kernel }) => {
-    return (_jsx(Box, { sx: {
-            width: '420px',
-            minWidth: '320px',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-        }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Agent Document", placeholder: "Ask about the document...", description: "Chat with the agent to manipulate the document", showHeader: true, height: "100%", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, disableInternalJupyterTheme: true, frontendTools: tools, autoFocus: true, runtimeId: agentId, kernel: kernel, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+    return (_jsx(Box, { width: "420px", minWidth: "320px", display: "flex", flexDirection: "column", overflow: "hidden", children: _jsx(Chat, { protocol: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Agent Document", placeholder: "Ask about the document...", description: "Chat with the agent to manipulate the document", showHeader: true, height: "100%", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, disableInternalJupyterTheme: true, frontendTools: tools, autoFocus: true, runtimeId: agentId, kernel: kernel, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
                 {
                     title: 'Insert heading',
                     message: 'Insert a heading that says "Welcome"',
@@ -347,50 +334,13 @@ export const AgentDocument = () => {
     }, [kernelId]);
     // Loading
     if (!isReady && !error) {
-        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "\u2026"] })] }) }));
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, bg: "canvas.default", children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "\u2026"] })] }) }));
     }
     // Error
     if (error) {
-        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, bg: "canvas.default", children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
     }
     // Ready — lexical editor + chat side-by-side
-    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                height: '100vh',
-                width: '100vw',
-                overflow: 'hidden',
-                bg: 'canvas.default',
-            }, children: [_jsx(Box, { sx: {
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        alignItems: 'center',
-                        px: 3,
-                        py: 2,
-                        borderBottom: '1px solid',
-                        borderColor: 'border.default',
-                        flexShrink: 0,
-                    }, children: _jsx(AppearanceControlsWithStore, { useStore: useAgentDocumentThemeStore }) }), _jsxs(Box, { sx: {
-                        display: 'flex',
-                        flex: 1,
-                        minHeight: 0,
-                        overflow: 'hidden',
-                    }, children: [serviceManager && kernelResolved && (_jsx(LexicalPanel, { serviceManager: serviceManager, kernelId: kernelId, colormode: resolvedMode, backgroundColor: themeBackground, onToolsReady: handleToolsReady, onKernelReady: handleKernelReady })), _jsx(ChatPanel, { agentId: agentId, tools: tools, kernel: documentKernel })] })] }) }));
+    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { display: "flex", flexDirection: "column", height: "100vh", width: "100vw", overflow: "hidden", bg: "canvas.default", children: [_jsx(Box, { display: "flex", justifyContent: "flex-end", alignItems: "center", px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: _jsx(AppearanceControlsWithStore, { useStore: useAgentDocumentThemeStore }) }), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: [serviceManager && kernelResolved && (_jsx(LexicalPanel, { serviceManager: serviceManager, kernelId: kernelId, colormode: resolvedMode, backgroundColor: themeBackground, onToolsReady: handleToolsReady, onKernelReady: handleKernelReady })), _jsx(ChatPanel, { agentId: agentId, tools: tools, kernel: documentKernel })] })] }) }));
 };
 export default AgentDocument;

package/lib/AgentNode.js

@@ -6,9 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { AiAgentIcon, AlienIcon } from '@datalayer/icons-react';
-import { DatalayerLogoText, DatalayerThemeProvider, getColorPalette, getLogoColors, setupPrimerPortals, themeConfigs, } from '@datalayer/primer-addons';
+import { Box, DatalayerLogoText, DatalayerThemeProvider, getColorPalette, getLogoColors, setupPrimerPortals, themeConfigs, } from '@datalayer/primer-addons';
 import { AppearanceMenu } from '@datalayer/primer-addons/lib/components/appearance';
-import { ActionList, ActionMenu, Box, Button, Heading, Label, PageHeader, PageLayout, Spinner, Text, } from '@primer/react';
+import { ActionList, ActionMenu, Button, Heading, Label, PageHeader, PageLayout, Spinner, Text, } from '@primer/react';
 import { CommentIcon, HomeIcon, KeyAsteriskIcon, LockIcon, MoonIcon, PeopleIcon, PersonIcon, GearIcon, SignOutIcon, } from '@primer/octicons-react';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
 import { UserAvatar } from '@datalayer/core/lib/components/avatars';
@@ -203,50 +203,13 @@ function AgentNodeProfileView({ token, onTokenExpired, avatarFallbackBackground,
             roles: Array.isArray(u.roles) ? u.roles : [],
         };
     }, [user]);
-    return (_jsx(Box, { sx: {
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            p: 4,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 3,
-        }, children: !token ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Sign in to view your profile." })) : !display ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading profile\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Heading, { sx: { fontSize: 2, mb: 2 }, children: "Profile" }), _jsxs(Box, { sx: {
-                        display: 'grid',
-                        gridTemplateColumns: [
-                            '1fr',
-                            null,
-                            'minmax(280px, 1fr) minmax(320px, 2fr)',
-                        ],
-                        gap: 4,
-                        alignItems: 'start',
-                    }, children: [_jsxs(Box, { sx: {
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: 2,
-                                p: 3,
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 3,
-                            }, children: [_jsx(Box, { sx: { textAlign: 'left' }, children: _jsx(UserBadge, { token: token, variant: "small", onTokenExpired: onTokenExpired }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [hasRealAvatar(display.avatarUrl) ? (_jsx(UserAvatar, { avatarUrl: display.avatarUrl, size: 72, square: false })) : (_jsx(Box, { sx: {
-                                                width: 72,
-                                                height: 72,
-                                                borderRadius: '50%',
-                                                bg: avatarFallbackBackground || 'accent.subtle',
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
+    return (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 4, display: "flex", flexDirection: "column", gap: 3, children: !token ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Sign in to view your profile." })) : !display ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading profile\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Heading, { sx: { fontSize: 2, mb: 2 }, children: "Profile" }), _jsxs(Box, { display: "grid", gridTemplateColumns: [
+                        '1fr',
+                        null,
+                        'minmax(280px, 1fr) minmax(320px, 2fr)',
+                    ], gap: 4, alignItems: "start", children: [_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, display: "flex", flexDirection: "column", gap: 3, children: [_jsx(Box, { textAlign: "left", children: _jsx(UserBadge, { token: token, variant: "small", onTokenExpired: onTokenExpired }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, children: [hasRealAvatar(display.avatarUrl) ? (_jsx(UserAvatar, { avatarUrl: display.avatarUrl, size: 72, square: false })) : (_jsx(Box, { width: 72, height: 72, borderRadius: "50%", bg: avatarFallbackBackground || 'accent.subtle', display: "flex", alignItems: "center", justifyContent: "center", sx: {
                                                 '--datalayer-icon-fg': avatarFallbackForeground || 'accent.fg',
-                                            }, children: _jsx(AlienIcon, { size: 34, themed: true, colormode: true }) })), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Heading, { sx: { fontSize: 3, mb: 1 }, children: display.headingDisplayName }), display.handle && (_jsx(Text, { sx: { color: 'fg.muted' }, children: display.handle }))] })] }), display.id && (_jsx(Box, { children: _jsx(Label, { size: "large", variant: "secondary", children: display.id }) }))] }), _jsxs(Box, { sx: {
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: 2,
-                                p: 3,
-                                display: 'grid',
-                                gridTemplateColumns: '1fr 2fr',
-                                rowGap: 2,
-                                columnGap: 3,
-                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Username" }), _jsx(Text, { children: display.username || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Display name" }), _jsx(Text, { children: display.displayName || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Email" }), _jsx(Text, { children: display.email || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Initials" }), _jsx(Text, { children: display.initials || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Origin" }), _jsx(Text, { children: display.origin || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Roles" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: display.roles.length > 0 ? (display.roles.map(role => (_jsx(Label, { size: "small", variant: "secondary", children: role }, role)))) : (_jsx(Text, { children: "-" })) })] })] })] })) }));
+                                            }, children: _jsx(AlienIcon, { size: 34, themed: true, colormode: true }) })), _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Heading, { sx: { fontSize: 3, mb: 1 }, children: display.headingDisplayName }), display.handle && (_jsx(Text, { sx: { color: 'fg.muted' }, children: display.handle }))] })] }), display.id && (_jsx(Box, { children: _jsx(Label, { size: "large", variant: "secondary", children: display.id }) }))] }), _jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, display: "grid", gridTemplateColumns: "1fr 2fr", rowGap: 2, columnGap: 3, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Username" }), _jsx(Text, { children: display.username || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Display name" }), _jsx(Text, { children: display.displayName || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Email" }), _jsx(Text, { children: display.email || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Initials" }), _jsx(Text, { children: display.initials || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Origin" }), _jsx(Text, { children: display.origin || '-' }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: "Roles" }), _jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: display.roles.length > 0 ? (display.roles.map(role => (_jsx(Label, { size: "small", variant: "secondary", children: role }, role)))) : (_jsx(Text, { children: "-" })) })] })] })] })) }));
 }
 export function AgentNode() {
     const { token, setAuth, clearAuth } = useSimpleAuthStore();
@@ -1093,65 +1056,21 @@ export function AgentNode() {
                 }
             }, children: label }));
     };
-    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsx(Box, { sx: {
-                minHeight: '100vh',
-                bg: 'canvas.default',
-                color: 'fg.default',
-            }, children: _jsxs(PageLayout, { containerWidth: "full", padding: "normal", sx: { bg: 'canvas.default', color: 'fg.default' }, style: { minHeight: '100vh', overflow: 'visible' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { children: _jsx(PageHeader.Title, { children: _jsx(Box, { as: "a", href: "https://datalayer.ai", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open Datalayer website", sx: { display: 'inline-flex', alignItems: 'center' }, children: _jsx(DatalayerLogoText, { size: 24, inverse: true, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) }) }) }), _jsx(PageHeader.Actions, { children: _jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: 2,
-                                            fontSize: 2,
-                                            lineHeight: '22px',
-                                        }, children: [token && (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "chat", label: "Chat", leadingVisual: CommentIcon }), _jsx(StepEntry, { entryStep: "gallery", label: "Agents", leadingVisual: AiAgentIcon }), _jsx(StepEntry, { entryStep: "config", label: "Configuration", leadingVisual: GearIcon })] })), !token ? null : (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "profile", label: "Profile", leadingVisual: PersonIcon }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleSignOut, leadingVisual: SignOutIcon, sx: { color: 'fg.default' }, children: "Sign out" })] })), _jsx(AppearanceMenu, { colorMode: colorMode, themeVariant: themeVariant, onColorModeChange: setColorMode, onThemeChange: nextTheme => setTheme(nextTheme, false), shape: "circle" })] }) })] }) }), _jsxs(PageLayout.Content, { children: [_jsx(Box, { "aria-live": "polite", sx: {
-                                    position: 'fixed',
-                                    top: 0,
-                                    left: 0,
-                                    right: 0,
-                                    zIndex: 1000,
-                                    pointerEvents: 'none',
-                                    display: 'flex',
-                                    justifyContent: 'stretch',
-                                }, children: _jsx(Box, { role: banner?.kind === 'error' ? 'alert' : 'status', sx: {
-                                        pointerEvents: banner ? 'auto' : 'none',
-                                        width: '100%',
-                                        px: 4,
-                                        py: 4,
-                                        borderRadius: 0,
-                                        borderBottom: '1px solid',
-                                        borderColor: banner?.kind === 'error'
-                                            ? 'danger.emphasis'
-                                            : banner?.kind === 'warning'
-                                                ? 'attention.emphasis'
-                                                : banner?.kind === 'success'
-                                                    ? 'success.emphasis'
-                                                    : 'accent.emphasis',
-                                        bg: banner?.kind === 'error'
-                                            ? 'danger.subtle'
-                                            : banner?.kind === 'warning'
-                                                ? 'attention.subtle'
-                                                : banner?.kind === 'success'
-                                                    ? 'success.subtle'
-                                                    : 'accent.subtle',
-                                        color: 'fg.default',
-                                        boxShadow: banner ? '0 4px 16px rgba(0, 0, 0, 0.12)' : 'none',
-                                        opacity: banner ? 1 : 0,
-                                        transform: banner ? 'translateY(0)' : 'translateY(-100%)',
-                                        transition: banner
-                                            ? 'opacity 600ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1)'
-                                            : 'opacity 250ms ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1)',
-                                        textAlign: 'center',
-                                    }, children: _jsx(Text, { sx: { fontSize: 3, fontWeight: 'bold' }, children: banner?.message ?? '' }) }) }), !token && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(Box, { sx: { color: 'fg.muted', display: 'inline-flex' }, children: _jsx(KeyAsteriskIcon, { size: 18 }) }), _jsx(Heading, { sx: { fontSize: 3, m: 0 }, children: "Agent Node" })] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Authenticate, configure Private/Shared/Sleep mode, then chat from this node." })] })), step === 'auth' && (_jsx(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderTop: '3px solid',
-                                    borderTopColor: cfg.brandColor,
-                                    borderRadius: 2,
-                                    p: 4,
-                                    backgroundImage: `linear-gradient(135deg, ${authGradient.from}1A 0%, ${authGradient.to}1A 100%)`,
-                                }, children: _jsx(Box, { sx: {
-                                        maxWidth: 640,
-                                        mx: 'auto',
+    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsx(Box, { minHeight: "100vh", bg: "canvas.default", color: "fg.default", children: _jsxs(PageLayout, { containerWidth: "full", padding: "normal", sx: { bg: 'canvas.default', color: 'fg.default' }, style: { minHeight: '100vh', overflow: 'visible' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { children: _jsx(PageHeader.Title, { children: _jsx(Box, { as: "a", href: "https://datalayer.ai", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open Datalayer website", display: "inline-flex", alignItems: "center", children: _jsx(DatalayerLogoText, { size: 24, inverse: true, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) }) }) }), _jsx(PageHeader.Actions, { children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, fontSize: 2, lineHeight: "22px", children: [token && (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "chat", label: "Chat", leadingVisual: CommentIcon }), _jsx(StepEntry, { entryStep: "gallery", label: "Agents", leadingVisual: AiAgentIcon }), _jsx(StepEntry, { entryStep: "config", label: "Configuration", leadingVisual: GearIcon })] })), !token ? null : (_jsxs(_Fragment, { children: [_jsx(StepEntry, { entryStep: "profile", label: "Profile", leadingVisual: PersonIcon }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleSignOut, leadingVisual: SignOutIcon, sx: { color: 'fg.default' }, children: "Sign out" })] })), _jsx(AppearanceMenu, { colorMode: colorMode, themeVariant: themeVariant, onColorModeChange: setColorMode, onThemeChange: nextTheme => setTheme(nextTheme, false), shape: "circle" })] }) })] }) }), _jsxs(PageLayout.Content, { children: [_jsx(Box, { "aria-live": "polite", position: "fixed", top: 0, left: 0, right: 0, zIndex: 1000, pointerEvents: "none", display: "flex", justifyContent: "stretch", children: _jsx(Box, { role: banner?.kind === 'error' ? 'alert' : 'status', pointerEvents: banner ? 'auto' : 'none', width: "100%", px: 4, py: 4, borderRadius: 0, borderBottom: "1px solid", borderColor: banner?.kind === 'error'
+                                        ? 'danger.emphasis'
+                                        : banner?.kind === 'warning'
+                                            ? 'attention.emphasis'
+                                            : banner?.kind === 'success'
+                                                ? 'success.emphasis'
+                                                : 'accent.emphasis', bg: banner?.kind === 'error'
+                                        ? 'danger.subtle'
+                                        : banner?.kind === 'warning'
+                                            ? 'attention.subtle'
+                                            : banner?.kind === 'success'
+                                                ? 'success.subtle'
+                                                : 'accent.subtle', color: "fg.default", boxShadow: banner ? '0 4px 16px rgba(0, 0, 0, 0.12)' : 'none', opacity: banner ? 1 : 0, transform: banner ? 'translateY(0)' : 'translateY(-100%)', transition: banner
+                                        ? 'opacity 600ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1)'
+                                        : 'opacity 250ms ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1)', textAlign: "center", children: _jsx(Text, { sx: { fontSize: 3, fontWeight: 'bold' }, children: banner?.message ?? '' }) }) }), !token && (_jsxs(Box, { mb: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1, children: [_jsx(Box, { color: "fg.muted", display: "inline-flex", children: _jsx(KeyAsteriskIcon, { size: 18 }) }), _jsx(Heading, { sx: { fontSize: 3, m: 0 }, children: "Agent Node" })] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Authenticate, configure Private/Shared/Sleep mode, then chat from this node." })] })), step === 'auth' && (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderTop: "3px solid", borderTopColor: cfg.brandColor, borderRadius: 2, p: 4, backgroundImage: `linear-gradient(135deg, ${authGradient.from}1A 0%, ${authGradient.to}1A 100%)`, children: _jsx(Box, { maxWidth: 640, mx: "auto", sx: {
                                         // SignInSimple renders a full-height shell; scope overrides
                                         // here so the auth view inherits this page layout/theme.
                                         '& > div': {
@@ -1173,114 +1092,23 @@ export function AgentNode() {
                                         '& h2, & h3': {
                                             color: cfg.brandColor,
                                         },
-                                    }, children: _jsx(SignInSimple, { loginUrl: signInLoginUrl, onSignIn: handleSignIn, onApiKeySignIn: handleApiKeySignIn, title: "Agent Node", description: "Sign in to configure node settings and run authenticated chat sessions.", leadingIcon: _jsx(Box, { sx: { color: cfg.brandColor, display: 'inline-flex' }, children: _jsx(HomeIcon, { size: 24 }) }) }) }) })), step === 'config' && (_jsxs(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    p: 3,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 3,
-                                }, children: [_jsxs(Box, { sx: {
-                                            display: 'grid',
-                                            gridTemplateColumns: ['1fr', null, '1fr 1fr'],
-                                            gap: 4,
-                                            alignItems: 'start',
-                                        }, children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    gap: 3,
-                                                }, children: [_jsxs(Box, { sx: {
-                                                            border: '1px solid',
-                                                            borderColor: 'border.default',
-                                                            borderRadius: 2,
-                                                            p: 3,
-                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Mode" }), _jsx(Box, { sx: {
-                                                                    display: 'grid',
-                                                                    gridTemplateColumns: 'repeat(3, 1fr)',
-                                                                    gap: 3,
-                                                                }, children: MODE_CARDS.map(card => {
+                                    }, children: _jsx(SignInSimple, { loginUrl: signInLoginUrl, onSignIn: handleSignIn, onApiKeySignIn: handleApiKeySignIn, title: "Agent Node", description: "Sign in to configure node settings and run authenticated chat sessions.", leadingIcon: _jsx(Box, { color: cfg.brandColor, display: "inline-flex", children: _jsx(HomeIcon, { size: 24 }) }) }) }) })), step === 'config' && (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { display: "grid", gridTemplateColumns: ['1fr', null, '1fr 1fr'], gap: 4, alignItems: "start", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Mode" }), _jsx(Box, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 3, children: MODE_CARDS.map(card => {
                                                                     const isSelected = configuration.mode === card.mode;
                                                                     const Icon = card.Icon;
                                                                     return (_jsxs(Box, { as: "button", type: "button", onClick: () => setConfiguration(prev => ({
                                                                             ...prev,
                                                                             mode: card.mode,
-                                                                        })), "aria-pressed": isSelected, sx: {
-                                                                            textAlign: 'left',
-                                                                            cursor: 'pointer',
-                                                                            display: 'flex',
-                                                                            flexDirection: 'column',
-                                                                            gap: 2,
-                                                                            p: 3,
-                                                                            borderRadius: 2,
-                                                                            border: '1px solid',
-                                                                            borderColor: isSelected
-                                                                                ? cfg.brandColor
-                                                                                : 'border.default',
-                                                                            bg: isSelected
-                                                                                ? 'canvas.subtle'
-                                                                                : 'canvas.default',
-                                                                            color: 'fg.default',
-                                                                            boxShadow: isSelected
-                                                                                ? `0 0 0 1px ${cfg.brandColor}`
-                                                                                : 'none',
-                                                                            '&:hover': {
-                                                                                borderColor: cfg.brandColor,
-                                                                            },
-                                                                        }, children: [_jsxs(Box, { sx: {
-                                                                                    display: 'flex',
-                                                                                    alignItems: 'center',
-                                                                                    gap: 2,
-                                                                                    color: isSelected
-                                                                                        ? cfg.brandColor
-                                                                                        : 'fg.default',
-                                                                                }, children: [_jsx(Icon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: card.name })] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: card.description })] }, card.mode));
-                                                                }) })] }), _jsxs(Box, { sx: {
-                                                            border: '1px solid',
-                                                            borderColor: 'border.default',
-                                                            borderRadius: 2,
-                                                            p: 3,
-                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Inference" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, mb: 2 }, children: "Used inference provider for newly launched agent sessions." }), _jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    gap: 2,
-                                                                    flexWrap: 'wrap',
-                                                                    mb: inferenceProvider === 'datalayer' ? 2 : 0,
-                                                                }, children: [_jsx(Button, { size: "small", variant: inferenceProvider === 'local'
+                                                                        })), "aria-pressed": isSelected, textAlign: "left", cursor: "pointer", display: "flex", flexDirection: "column", gap: 2, p: 3, borderRadius: 2, border: "1px solid", borderColor: isSelected ? cfg.brandColor : 'border.default', bg: isSelected ? 'canvas.subtle' : 'canvas.default', color: "fg.default", boxShadow: isSelected
+                                                                            ? `0 0 0 1px ${cfg.brandColor}`
+                                                                            : 'none', hover: { borderColor: cfg.brandColor }, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, color: isSelected ? cfg.brandColor : 'fg.default', children: [_jsx(Icon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold' }, children: card.name })] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: card.description })] }, card.mode));
+                                                                }) })] }), _jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Inference" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, mb: 2 }, children: "Used inference provider for newly launched agent sessions." }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", mb: inferenceProvider === 'datalayer' ? 2 : 0, children: [_jsx(Button, { size: "small", variant: inferenceProvider === 'local'
                                                                             ? 'primary'
                                                                             : 'default', onClick: () => setInferenceProvider('local'), children: "local" }), _jsx(Button, { size: "small", variant: inferenceProvider === 'datalayer'
                                                                             ? 'primary'
-                                                                            : 'default', onClick: () => setInferenceProvider('datalayer'), children: "datalayer" })] }), inferenceProvider === 'datalayer' && (_jsxs(Box, { sx: {
-                                                                    border: '1px solid',
-                                                                    borderColor: 'border.default',
-                                                                    borderRadius: 2,
-                                                                    p: 2,
-                                                                    bg: 'canvas.subtle',
-                                                                    display: 'flex',
-                                                                    flexDirection: 'column',
-                                                                    gap: 1,
-                                                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Models ai-inference serves" }), inferenceModels.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: inferenceModelsNote ??
+                                                                            : 'default', onClick: () => setInferenceProvider('datalayer'), children: "datalayer" })] }), inferenceProvider === 'datalayer' && (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, bg: "canvas.subtle", display: "flex", flexDirection: "column", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Models ai-inference serves" }), inferenceModels.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: inferenceModelsNote ??
                                                                             'The runtime has not said which models ai-inference serves.' })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { children: inferenceModels.length === 1
                                                                                     ? inferenceModels[0]
-                                                                                    : `${inferenceModels.length} models` }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(ActionList, { children: inferenceModels.map(model => (_jsx(ActionList.Item, { inactiveText: "Selection is locked", children: model }, model))) }) })] }))] }))] }), iamUser ? (_jsxs(Box, { sx: {
-                                                            border: '1px solid',
-                                                            borderColor: 'border.default',
-                                                            borderRadius: 2,
-                                                            p: 3,
-                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Billing Entity" }), _jsx(BillingEntitySelect, { value: configuration.billing_entity_uid || '', onChange: handleBillingEntityChange, onSelectedAccountChange: handleSelectedAccountChange, onAccountsResolved: handleAccountsResolved })] })) : (_jsxs(Box, { sx: {
-                                                            border: '1px solid',
-                                                            borderColor: 'border.default',
-                                                            borderRadius: 2,
-                                                            p: 3,
-                                                        }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Billing Entity" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Loading billing entities..." })] })] }))] }), _jsx(Box, { sx: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    gap: 2,
-                                                }, children: _jsxs(Box, { sx: {
-                                                        border: '1px solid',
-                                                        borderColor: 'border.default',
-                                                        borderRadius: 2,
-                                                        p: 3,
-                                                    }, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Share" }), _jsx(ShareAccessComponent, { isOpen: true, displayMode: "inline", requestUrl: `${AGENT_RUNTIMES_BASE_URL}/api/v1/agent-node/sharing`, resourceLabel: "Agent Node", resourceName: "this Agent Node", onClose: handleSharingInlineClose })] }) })] }), error && _jsx(Text, { sx: { color: 'danger.fg' }, children: error }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { variant: "primary", onClick: saveConfiguration, disabled: isSaving, children: isSaving ? 'Saving...' : 'Save' }) })] })), step === 'profile' && (_jsx(AgentNodeProfileView, { token: token, onTokenExpired: handleSignOut, avatarFallbackBackground: avatarPalette.bgAlt, avatarFallbackForeground: avatarPalette.primary })), step === 'gallery' && (_jsx(AgentNodeGallery, { baseUrl: AGENT_RUNTIMES_BASE_URL, token: token, activeAgentId: configuration.active_agent_id, onLaunchError: message => {
+                                                                                    : `${inferenceModels.length} models` }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(ActionList, { children: inferenceModels.map(model => (_jsx(ActionList.Item, { inactiveText: "Selection is locked", children: model }, model))) }) })] }))] }))] }), iamUser ? (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Billing Entity" }), _jsx(BillingEntitySelect, { value: configuration.billing_entity_uid || '', onChange: handleBillingEntityChange, onSelectedAccountChange: handleSelectedAccountChange, onAccountsResolved: handleAccountsResolved })] })) : (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Billing Entity" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Loading billing entities..." })] })] }))] }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: _jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, children: [_jsx(Heading, { sx: { fontSize: 2, m: 0, mb: 2 }, children: "Share" }), _jsx(ShareAccessComponent, { isOpen: true, displayMode: "inline", requestUrl: `${AGENT_RUNTIMES_BASE_URL}/api/v1/agent-node/sharing`, resourceLabel: "Agent Node", resourceName: "this Agent Node", onClose: handleSharingInlineClose })] }) })] }), error && _jsx(Text, { sx: { color: 'danger.fg' }, children: error }), _jsx(Box, { display: "flex", justifyContent: "flex-end", children: _jsx(Button, { variant: "primary", onClick: saveConfiguration, disabled: isSaving, children: isSaving ? 'Saving...' : 'Save' }) })] })), step === 'profile' && (_jsx(AgentNodeProfileView, { token: token, onTokenExpired: handleSignOut, avatarFallbackBackground: avatarPalette.bgAlt, avatarFallbackForeground: avatarPalette.primary })), step === 'gallery' && (_jsx(AgentNodeGallery, { baseUrl: AGENT_RUNTIMES_BASE_URL, token: token, activeAgentId: configuration.active_agent_id, onLaunchError: message => {
                                     showBanner('error', message);
                                 }, onLaunched: (agentId, protocol) => {
                                     setSelectedAgentId(agentId);
@@ -1318,11 +1146,6 @@ export function AgentNode() {
                                         active_agent_id: undefined,
                                     }));
                                     setStep('gallery');
-                                } })), step === 'chat' && (_jsx(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    overflow: 'hidden',
-                                }, children: isSaasOnlyChat ? (_jsxs(Box, { sx: { p: 4 }, children: [_jsx(Heading, { sx: { fontSize: 2, mb: 2 }, children: "Chat From SaaS" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "This Agent Node deployment is configured for SaaS-only chat. Use the Datalayer Agent Nodes view to open chat sessions over the runtimes tunnel." })] })) : (_jsx(Chat, { protocol: activeAgentProtocol, baseUrl: AGENT_RUNTIMES_BASE_URL, agentId: selectedAgentId, title: chatTitle, placeholder: "Send a message...", description: chatDescription, suggestions: chatSuggestions, submitOnSuggestionClick: true, showHeader: true, height: '70vh', showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, enableEphemeralNotebook: true, enableEphemeralDocument: true, initialEphemeralSurfaceMode: "notebook", runtimeId: selectedAgentId, ephemeralRuntimeOverride: sandboxRuntimeOverride, kernelEnvironmentName: sandboxEnvironmentName, themeVariant: themeVariant, colorMode: colorMode, ephemeralNotebookCollaborationProvider: ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId: ephemeralCollaborationDocumentId, ephemeralDocumentCollaboration: ephemeralDocumentCollaboration, historyEndpoint: `${AGENT_RUNTIMES_BASE_URL}/api/v1/history` })) }))] })] }) }) }));
+                                } })), step === 'chat' && (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: isSaasOnlyChat ? (_jsxs(Box, { p: 4, children: [_jsx(Heading, { sx: { fontSize: 2, mb: 2 }, children: "Chat From SaaS" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "This Agent Node deployment is configured for SaaS-only chat. Use the Datalayer Agent Nodes view to open chat sessions over the runtimes tunnel." })] })) : (_jsx(Chat, { protocol: activeAgentProtocol, baseUrl: AGENT_RUNTIMES_BASE_URL, agentId: selectedAgentId, title: chatTitle, placeholder: "Send a message...", description: chatDescription, suggestions: chatSuggestions, submitOnSuggestionClick: true, showHeader: true, height: '70vh', showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, enableEphemeralNotebook: true, enableEphemeralDocument: true, initialEphemeralSurfaceMode: "notebook", runtimeId: selectedAgentId, ephemeralRuntimeOverride: sandboxRuntimeOverride, kernelEnvironmentName: sandboxEnvironmentName, themeVariant: themeVariant, colorMode: colorMode, ephemeralNotebookCollaborationProvider: ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId: ephemeralCollaborationDocumentId, ephemeralDocumentCollaboration: ephemeralDocumentCollaboration, historyEndpoint: `${AGENT_RUNTIMES_BASE_URL}/api/v1/history` })) }))] })] }) }) }));
 }
 export default AgentNode;

package/lib/AgentNotebook.js

@@ -168,27 +168,11 @@ function useNotebookKernel(notebookId, active) {
     }, [notebookId, active]);
     return kernel;
 }
-const NotebookPanel = ({ serviceManager, kernelId, colormode, backgroundColor, }) => (_jsx(Box, { sx: {
-        flex: 1,
-        minWidth: '360px',
-        minHeight: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        borderRight: '1px solid',
-        borderColor: 'border.default',
-    }, children: _jsx(JupyterReactTheme, { colormode: colormode, backgroundColor: backgroundColor, children: _jsx(Notebook, { nbformat: EmptyNotebook, id: NOTEBOOK_ID, serviceManager: serviceManager, kernelId: kernelId, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, cellSidebarMargin: 120, startDefaultKernel: !kernelId }) }) }));
+const NotebookPanel = ({ serviceManager, kernelId, colormode, backgroundColor, }) => (_jsx(Box, { flex: 1, minWidth: "360px", minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden", borderRight: "1px solid", borderColor: "border.default", children: _jsx(JupyterReactTheme, { colormode: colormode, backgroundColor: backgroundColor, children: _jsx(Notebook, { nbformat: EmptyNotebook, id: NOTEBOOK_ID, serviceManager: serviceManager, kernelId: kernelId, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, cellSidebarMargin: 120, startDefaultKernel: !kernelId }) }) }));
 const ChatPanel = ({ agentId, kernel }) => {
     // Register notebook tools so the agent can manipulate cells
     const notebookTools = useNotebookTools(NOTEBOOK_ID);
-    return (_jsx(Box, { sx: {
-            width: '420px',
-            minWidth: '320px',
-            flexShrink: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-        }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Agent Notebook", placeholder: "Ask about the notebook...", description: "Chat with the agent to manipulate the notebook", showHeader: true, height: "100%", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, disableInternalJupyterTheme: true, frontendTools: notebookTools, autoFocus: true, runtimeId: agentId, kernel: kernel, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+    return (_jsx(Box, { width: "420px", minWidth: "320px", flexShrink: 0, display: "flex", flexDirection: "column", overflow: "hidden", children: _jsx(Chat, { protocol: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Agent Notebook", placeholder: "Ask about the notebook...", description: "Chat with the agent to manipulate the notebook", showHeader: true, height: "100%", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, disableInternalJupyterTheme: true, frontendTools: notebookTools, autoFocus: true, runtimeId: agentId, kernel: kernel, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
                 {
                     title: 'Add a cell',
                     message: 'Insert a new code cell into the notebook',
@@ -296,51 +280,13 @@ export const AgentNotebook = () => {
     }, [kernelId]);
     // Loading
     if (!isReady && !error) {
-        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "\u2026"] })] }) }));
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, bg: "canvas.default", children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "\u2026"] })] }) }));
     }
     // Error
     if (error) {
-        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", gap: 3, bg: "canvas.default", children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
     }
     // Ready — notebook + chat side-by-side
-    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                height: '100vh',
-                width: '100vw',
-                overflow: 'hidden',
-                bg: 'canvas.default',
-            }, children: [_jsx(Box, { sx: {
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        alignItems: 'center',
-                        px: 3,
-                        height: `${TOP_BAR_HEIGHT}px`,
-                        boxSizing: 'border-box',
-                        borderBottom: '1px solid',
-                        borderColor: 'border.default',
-                        flexShrink: 0,
-                    }, children: _jsx(AppearanceControlsWithStore, { useStore: useAgentNotebookThemeStore }) }), _jsxs(Box, { sx: {
-                        display: 'flex',
-                        flex: 1,
-                        minHeight: 0,
-                        overflow: 'hidden',
-                    }, children: [serviceManager && (_jsx(NotebookPanel, { serviceManager: serviceManager, kernelId: kernelId, colormode: resolvedMode, backgroundColor: themeBackground })), _jsx(ChatPanel, { agentId: agentId, kernel: notebookKernel })] })] }) }));
+    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { display: "flex", flexDirection: "column", height: "100vh", width: "100vw", overflow: "hidden", bg: "canvas.default", children: [_jsx(Box, { display: "flex", justifyContent: "flex-end", alignItems: "center", px: 3, height: `${TOP_BAR_HEIGHT}px`, boxSizing: "border-box", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: _jsx(AppearanceControlsWithStore, { useStore: useAgentNotebookThemeStore }) }), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: [serviceManager && (_jsx(NotebookPanel, { serviceManager: serviceManager, kernelId: kernelId, colormode: resolvedMode, backgroundColor: themeBackground })), _jsx(ChatPanel, { agentId: agentId, kernel: notebookKernel })] })] }) }));
 };
 export default AgentNotebook;