@datalayer/agent-runtimes 1.0.10 → 1.0.18

package/README.md

@@ -62,6 +62,87 @@ Agent Runtimes solves the complexity of deploying AI agents by providing:
 - 💾 **Persistence**: DBOS support for durable execution
 - 🔒 **Context Optimization**: LLM context management
 
+## Runtime, Snapshot, and Evals Workflows
+
+The runtime-oriented examples and CLI workflows migrated from `datalayer-core` now live here.
+
+### Python Runtime Quickstart
+
+```python
+from agent_runtimes.client import RuntimeClient
+
+client = RuntimeClient()
+
+# Execute code in a managed runtime
+with client.create_runtime() as runtime:
+    response = runtime.execute("print('Hello from Datalayer!')")
+    print(response.stdout)
+```
+
+### Runtime and Snapshot CLI
+
+```bash
+# List available runtimes
+datalayer runtime list
+
+# Create a new runtime
+datalayer runtime create ai-env --given-name my-runtime-123
+
+# Execute a script in a runtime
+datalayer runtime exec my-script.py --agent <agent-id>
+
+# Create a snapshot from a runtime but do not terminate the runtime
+datalayer snapshots create <pod-name> my-snapshot 'AI work!' False
+```
+
+### Subscription and Credits CLI
+
+```bash
+# End-user billing view
+datalayer subscriptions show
+datalayer subscriptions available
+datalayer subscriptions move
+datalayer subscriptions topups
+datalayer subscriptions dry-run
+
+# Organization and team credits visibility
+datalayer usage org-overview --organization-uid <org_uid>
+datalayer usage team-overview --team-uid <team_uid>
+
+# Monitoring-driven credit management
+datalayer usage org-monitor --organization-uid <org_uid> --window-hours 24
+datalayer usage team-monitor --team-uid <team_uid> --window-hours 24
+
+# Credits transfer operations (owners/admins)
+datalayer usage org-allocate-team --organization-uid <org_uid> --team-uid <team_uid> --amount 50
+datalayer usage org-revoke-team --organization-uid <org_uid> --team-uid <team_uid> --amount 20
+datalayer usage team-allocate-member --team-uid <team_uid> --member-uid <member_uid> --amount 15
+datalayer usage team-revoke-member --team-uid <team_uid> --member-uid <member_uid> --amount 5
+```
+
+### Evals CLI (Multi-Agentspec)
+
+Use comma-separated agentspec ids to create one experiment per agentspec variant:
+
+```bash
+# Creates one experiment per agentspec in the list
+agent-runtimes evals experiments create my-exp \
+  --evalset-id <evalset_id> \
+  --agent-spec-ids example-evals,example-evals-nocodemode,example-custom
+```
+
+Generate a comparison report:
+
+```bash
+agent-runtimes evals report <evalset_id> --run-limit 50 --export
+```
+
+How to interpret grouped comparisons in the report:
+
+- `Within-Agentspec Pairwise Latest-Pass Deltas`: compares experiments using the same agentspec id.
+- `Cross-Agentspec Pairwise Latest-Pass Deltas`: compares experiments using different agentspec ids.
+- Pairwise sections compute all combinations for the selected experiments, not just two agentspecs.
+
 ## Examples
 
 The examples demonstrate how to use the Agent Runtimes functionality in various scenarios and frameworks.
@@ -173,7 +254,7 @@ and propagates those values to the Vite HTML placeholders.
 Override any URL on the command line:
 
 ```bash
-make examples:prod DATALAYER_RUN_URL=https://prod2.datalayer.run
+make examples:prod DATALAYER_URL=https://prod2.datalayer.run
 ```
 
 ### Running against a local `plane local` stack

package/lib/{AgentLexical.d.ts → AgentDocument.d.ts}

@@ -1,12 +1,12 @@
 /**
- * AgentLexical
+ * AgentDocument
  *
- * Standalone Lexical editor + chat interface served at /static/agent-lexical.html.
+ * Standalone Lexical editor + chat interface served at /static/agent-document.html.
  * Connects to the agent-runtimes AG-UI endpoint and provides a Lexical
  * rich-text editor alongside the Chat component with lexical tools registered.
  *
  * The page is opened by codeai with a URL like:
- *   http://127.0.0.1:<port>/static/agent-lexical.html?agentId=<id>
+ *   http://127.0.0.1:<port>/static/agent-document.html?agentId=<id>
  *
  * Query parameters:
  *   - agentId: the agent identifier (required, set by codeai)
@@ -18,5 +18,5 @@ import React from 'react';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './examples/lexical/lexical-theme.css';
 import '../style/primer-primitives.css';
-export declare const AgentLexical: React.FC;
-export default AgentLexical;
+export declare const AgentDocument: React.FC;
+export default AgentDocument;

package/lib/{AgentLexical.js → AgentDocument.js}

@@ -4,14 +4,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * AgentLexical
+ * AgentDocument
  *
- * Standalone Lexical editor + chat interface served at /static/agent-lexical.html.
+ * Standalone Lexical editor + chat interface served at /static/agent-document.html.
  * Connects to the agent-runtimes AG-UI endpoint and provides a Lexical
  * rich-text editor alongside the Chat component with lexical tools registered.
  *
  * The page is opened by codeai with a URL like:
- *   http://127.0.0.1:<port>/static/agent-lexical.html?agentId=<id>
+ *   http://127.0.0.1:<port>/static/agent-document.html?agentId=<id>
  *
  * Query parameters:
  *   - agentId: the agent identifier (required, set by codeai)
@@ -37,10 +37,10 @@ import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
-import { JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, useJupyter, } from '@datalayer/jupyter-react';
+import { AppearanceControlsWithStore, Box, createThemeStore, DatalayerThemeProvider, setupPrimerPortals, themeConfigs, useSystemColorMode, } from '@datalayer/primer-addons';
+import { JupyterReactTheme, disposeServiceManager, loadJupyterConfig, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, useJupyter, } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
-import { ServiceManager } from '@jupyterlab/services';
+import { ServiceManager, ServerConnection } from '@jupyterlab/services';
 import { Chat } from './chat';
 import { ChatInlinePlugin } from './lexical/ChatInlinePlugin';
 import { useChatInlineToolbarItems } from './lexical/useChatInlineToolbarItems';
@@ -52,13 +52,42 @@ import './examples/lexical/lexical-theme.css';
 import '../style/primer-primitives.css';
 setupPrimerPortals();
 const BASE_URL = window.location.origin;
-const LEXICAL_ID = 'agent-lexical';
+const DOCUMENT_ID = 'agent-document';
+const DOCUMENT_THEME_STORAGE_KEY = 'agent-runtimes-agent-document-theme';
+const useAgentDocumentThemeStore = createThemeStore(DOCUMENT_THEME_STORAGE_KEY, {
+    colorMode: 'auto',
+    theme: 'earth',
+});
 function getQueryParam(name) {
     return new URLSearchParams(window.location.search).get(name);
 }
 function getAgentId() {
     return getQueryParam('agentId') || 'default';
 }
+function getKernelId() {
+    const kernelId = getQueryParam('kernelId') || getQueryParam('kernel_id');
+    return kernelId || undefined;
+}
+async function fetchStartupKernelId() {
+    try {
+        const resp = await fetch(`${BASE_URL}/health/startup`);
+        if (!resp.ok) {
+            return undefined;
+        }
+        const payload = await resp.json();
+        const sandbox = payload?.sandbox;
+        if (sandbox?.variant !== 'jupyter') {
+            return undefined;
+        }
+        const kernelId = sandbox?.kernel_id;
+        return typeof kernelId === 'string' && kernelId.length > 0
+            ? kernelId
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
 /**
  * Initialise Jupyter configuration.
  *
@@ -69,24 +98,52 @@ function getAgentId() {
 function initJupyterConfig() {
     loadJupyterConfig();
     const qBaseUrl = getQueryParam('jupyterBaseUrl');
-    const qToken = getQueryParam('jupyterToken');
+    const qToken = getQueryParam('jupyterToken') || getQueryParam('token');
     if (qBaseUrl)
         setJupyterServerUrl(qBaseUrl);
     if (qToken)
         setJupyterServerToken(qToken);
+    let resolvedBaseUrl = qBaseUrl || getJupyterServerUrl();
+    let resolvedToken = qToken || getJupyterServerToken();
     const el = document.getElementById('jupyter-config-data');
     if (el?.textContent) {
         try {
             const cfg = JSON.parse(el.textContent);
-            if (!qBaseUrl && cfg.baseUrl)
+            if (!qBaseUrl && cfg.baseUrl) {
                 setJupyterServerUrl(cfg.baseUrl);
-            if (!qToken && cfg.token)
+                resolvedBaseUrl = cfg.baseUrl;
+            }
+            if (!qToken && cfg.token) {
                 setJupyterServerToken(cfg.token);
+                resolvedToken = cfg.token;
+            }
         }
         catch {
             // ignore
         }
     }
+    return {
+        baseUrl: resolvedBaseUrl,
+        token: resolvedToken,
+    };
+}
+function buildServerSettings(baseUrl, token) {
+    const wsUrl = baseUrl.replace(/^http/, 'ws');
+    const authenticatedFetch = (input, init) => {
+        if (!token) {
+            return fetch(input, init);
+        }
+        const headers = new Headers(init?.headers || undefined);
+        headers.set('Authorization', `token ${token}`);
+        return fetch(input, { ...init, headers });
+    };
+    return ServerConnection.makeSettings({
+        baseUrl,
+        wsUrl,
+        token,
+        appendToken: !!token,
+        fetch: authenticatedFetch,
+    });
 }
 // ─── Lexical plugins ────────────────────────────────────────────────────────
 /**
@@ -128,8 +185,18 @@ function CodeHighlightPlugin() {
     }, [editor]);
     return null;
 }
-function KernelPluginsInner() {
-    const { defaultKernel } = useJupyter();
+function KernelPluginsInner({ serviceManager, kernelId, onKernelReady, }) {
+    const { defaultKernel } = useJupyter({
+        serviceManager,
+        useRunningKernelId: kernelId,
+        startDefaultKernel: !kernelId,
+    });
+    // Lift the live kernel connection of the document's sandbox up so the chat
+    // header's kernel indicator reflects it. `defaultKernel` is created
+    // asynchronously and can change on restart.
+    useEffect(() => {
+        onKernelReady?.(defaultKernel?.connection ?? null);
+    }, [defaultKernel, onKernelReady]);
     return (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, { kernel: defaultKernel }), _jsx(JupyterInputOutputPlugin, { kernel: defaultKernel })] }));
 }
 /**
@@ -137,13 +204,13 @@ function KernelPluginsInner() {
  * Must be rendered inside LexicalConfigProvider context.
  */
 function LexicalToolsPlugin({ onToolsReady, }) {
-    const tools = useLexicalTools(LEXICAL_ID);
+    const tools = useLexicalTools(DOCUMENT_ID);
     useEffect(() => {
         onToolsReady(tools);
     }, [tools, onToolsReady]);
     return null;
 }
-const LexicalPanel = React.memo(function LexicalPanel({ serviceManager, onToolsReady, }) {
+const LexicalPanel = React.memo(function LexicalPanel({ serviceManager, kernelId, colormode, backgroundColor, onToolsReady, onKernelReady, }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
     const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } = useChatInlineToolbarItems();
@@ -164,19 +231,19 @@ const LexicalPanel = React.memo(function LexicalPanel({ serviceManager, onToolsR
             overflow: 'auto',
             borderRight: '1px solid',
             borderColor: 'border.default',
-        }, children: _jsx(Box, { sx: { padding: 3 }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, {}), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(KernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+        }, children: _jsx(Box, { sx: { padding: 3 }, children: _jsxs(LexicalConfigProvider, { lexicalId: DOCUMENT_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, {}), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _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 }) => {
+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 Lexical", placeholder: "Ask about the document...", description: "Chat with the agent to manipulate the document", showHeader: true, height: "100vh", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, frontendTools: tools, autoFocus: true, runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+        }, 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"',
@@ -192,18 +259,33 @@ const ChatPanel = ({ agentId, tools }) => {
             ], submitOnSuggestionClick: true }) }));
 };
 // ─── Main component ─────────────────────────────────────────────────────────
-export const AgentLexical = () => {
+export const AgentDocument = () => {
     const [agentId] = useState(getAgentId);
+    const [kernelId, setKernelId] = useState(getKernelId);
+    const [kernelResolved, setKernelResolved] = useState(() => Boolean(getKernelId()));
     const [isReady, setIsReady] = useState(false);
     const [error, setError] = useState(null);
     const [serviceManager, setServiceManager] = useState(null);
     const [tools, setTools] = useState([]);
+    const [documentKernel, setDocumentKernel] = useState(null);
+    const { colorMode, theme } = useAgentDocumentThemeStore();
+    const themeConfig = themeConfigs[theme];
+    const systemMode = useSystemColorMode();
+    const resolvedMode = colorMode === 'auto' ? systemMode : colorMode;
+    const modeStyles = resolvedMode === 'dark'
+        ? themeConfig.themeStyles.dark
+        : themeConfig.themeStyles.light;
+    const themeBackground = modeStyles.backgroundColor ?? '';
     const handleToolsReady = useCallback((newTools) => {
         setTools(newTools);
     }, []);
+    const handleKernelReady = useCallback((kernel) => {
+        setDocumentKernel(prev => (prev?.id === kernel?.id ? prev : kernel));
+    }, []);
     // Verify the agent exists AND initialise the Jupyter service manager
     useEffect(() => {
         let cancelled = false;
+        let managerForCleanup = null;
         const init = async () => {
             try {
                 // 1. Ensure agent exists — create if missing
@@ -214,7 +296,7 @@ export const AgentLexical = () => {
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
                             name: agentId,
-                            description: 'Agent created by Agent Lexical page',
+                            description: 'Agent created by Agent Document page',
                             agent_library: 'pydantic-ai',
                             transport: 'ag-ui',
                             model: DEFAULT_MODEL,
@@ -227,14 +309,19 @@ export const AgentLexical = () => {
                     }
                 }
                 // 2. Initialise Jupyter
-                initJupyterConfig();
-                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                const jupyterConfig = initJupyterConfig();
+                const serverSettings = buildServerSettings(jupyterConfig.baseUrl, jupyterConfig.token);
                 const manager = new ServiceManager({ serverSettings });
+                managerForCleanup = manager;
                 await manager.ready;
                 if (!cancelled) {
                     setServiceManager(manager);
                     setIsReady(true);
                 }
+                else {
+                    disposeServiceManager(manager);
+                    managerForCleanup = null;
+                }
             }
             catch (err) {
                 if (!cancelled) {
@@ -245,11 +332,39 @@ export const AgentLexical = () => {
         init();
         return () => {
             cancelled = true;
+            if (managerForCleanup) {
+                disposeServiceManager(managerForCleanup);
+                managerForCleanup = null;
+            }
         };
     }, [agentId]);
+    // If kernelId is not provided via URL, reuse the startup sandbox kernel when
+    // available so lexical cells run in the same code sandbox as the agent.
+    useEffect(() => {
+        if (kernelId) {
+            setKernelResolved(true);
+            return;
+        }
+        let cancelled = false;
+        void (async () => {
+            const startupKernelId = await fetchStartupKernelId();
+            if (cancelled) {
+                return;
+            }
+            if (startupKernelId) {
+                setKernelId(startupKernelId);
+            }
+            // Mark resolution complete even when no sandbox kernel exists so the
+            // editor can fall back to a default kernel instead of hanging.
+            setKernelResolved(true);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [kernelId]);
     // Loading
     if (!isReady && !error) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -261,7 +376,7 @@ export const AgentLexical = () => {
     }
     // Error
     if (error) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -272,12 +387,27 @@ export const AgentLexical = () => {
                 }, 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, { children: _jsxs(Box, { sx: {
+    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: [serviceManager && (_jsx(LexicalPanel, { serviceManager: serviceManager, onToolsReady: handleToolsReady })), _jsx(ChatPanel, { agentId: agentId, tools: tools })] }) }));
+            }, 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 })] })] }) }));
 };
-export default AgentLexical;
+export default AgentDocument;

package/lib/AgentNode.js

@@ -13,7 +13,7 @@ import { SignInSimple } from '@datalayer/core/lib/views/iam';
 import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { useIAMStore } from '@datalayer/core/lib/state';
-import { BillableAccountSelect, } from '@datalayer/core/lib/components/billing';
+import { BillingEntitySelect, } from '@datalayer/core/lib/components/billing';
 import { ShareAccessComponent } from '@datalayer/core/lib/components/sharing';
 import { useAgentNodeThemeStore } from './agent-node/themeStore';
 import { Chat } from './chat';
@@ -129,7 +129,7 @@ export function AgentNode() {
     const [step, setStep] = useState('auth');
     const [disableAutoBootstrap, setDisableAutoBootstrap] = useState(false);
     const [configuration, setConfiguration] = useState(DEFAULT_CONFIGURATION);
-    const [, setSelectedBillableAccount] = useState(undefined);
+    const [, setSelectedBillingEntity] = useState(undefined);
     const [isSaving, setIsSaving] = useState(false);
     const [error, setError] = useState(null);
     const [inferenceProvider, setInferenceProvider] = useState('datalayer');
@@ -158,9 +158,9 @@ export function AgentNode() {
         };
     }, []);
     const pushCredentials = useCallback((authToken, payloadToken = authToken) => {
-        const runUrl = import.meta.env?.VITE_DATALAYER_RUN_URL ||
+        const datalayerUrl = import.meta.env?.VITE_DATALAYER_URL ||
             'https://prod1.datalayer.run';
-        const runtimesRunUrl = import.meta.env?.VITE_DATALAYER_RUNTIMES_URL || runUrl;
+        const runtimesUrl = import.meta.env?.VITE_DATALAYER_RUNTIMES_URL || datalayerUrl;
         const headers = {
             'Content-Type': 'application/json',
         };
@@ -172,14 +172,14 @@ export function AgentNode() {
             headers,
             body: JSON.stringify({
                 token: payloadToken || null,
-                runtimes_url: payloadToken ? runtimesRunUrl : null,
+                runtimes_url: payloadToken ? runtimesUrl : null,
             }),
         });
     }, []);
-    // Refs kept in sync with state so the BillableAccountSelect callbacks
+    // Refs kept in sync with state so the BillingEntitySelect callbacks
     // (passed via stable identities) can read the latest values without
     // being re-created on every render — re-created callbacks made
-    // BillableAccountSelect re-fire onAccountsResolved and trigger an
+    // BillingEntitySelect re-fire onAccountsResolved and trigger an
     // infinite setState loop.
     const configurationRef = useRef(configuration);
     useEffect(() => {
@@ -189,19 +189,19 @@ export function AgentNode() {
     useEffect(() => {
         iamUserRef.current = iamUser;
     }, [iamUser]);
-    const handleBillableAccountChange = useCallback((uid) => {
-        setConfiguration(prev => ({ ...prev, billable_account_uid: uid }));
+    const handleBillingEntityChange = useCallback((uid) => {
+        setConfiguration(prev => ({ ...prev, billing_entity_uid: uid }));
     }, []);
     const handleSelectedAccountChange = useCallback((account) => {
-        setSelectedBillableAccount(account);
+        setSelectedBillingEntity(account);
         setConfiguration(prev => ({
             ...prev,
-            billable_account_type: account?.accountType,
-            billable_account_handle: account?.accountHandle,
+            billing_entity_type: account?.accountType,
+            billing_entity_handle: account?.accountHandle,
         }));
     }, []);
     const handleAccountsResolved = useCallback((_state) => {
-        // BillableAccountSelect persists the chosen account in a cookie and
+        // BillingEntitySelect persists the chosen account in a cookie and
         // falls back to the personal account when none is stored, so the node
         // no longer needs to force an organization default here.
     }, []);
@@ -343,25 +343,26 @@ export function AgentNode() {
     }, [token, pushCredentials]);
     useEffect(() => {
         import('@datalayer/core/lib/state').then(({ iamStore, coreStore }) => {
-            const runUrl = import.meta.env?.VITE_DATALAYER_RUN_URL ||
+            const datalayerUrl = import.meta.env?.VITE_DATALAYER_URL ||
                 'https://prod1.datalayer.run';
-            const runtimesRunUrl = import.meta.env?.VITE_DATALAYER_RUNTIMES_URL || runUrl;
-            const aiInferenceRunUrl = import.meta.env?.VITE_DATALAYER_AI_INFERENCE_URL || runUrl;
+            const runtimesUrl = import.meta.env?.VITE_DATALAYER_RUNTIMES_URL || datalayerUrl;
+            const aiInferenceUrl = import.meta.env?.VITE_DATALAYER_AI_INFERENCE_URL ||
+                datalayerUrl;
             // Seed all per-service URLs to match the main UI login behavior.
             const coreApi = coreStore.getState();
             const prevCfg = coreApi.configuration ?? {};
             const urls = {
-                iamRunUrl: runUrl,
-                runtimesRunUrl,
-                spacerRunUrl: runUrl,
-                libraryRunUrl: runUrl,
-                aiagentsRunUrl: runUrl,
-                aiinferenceRunUrl: aiInferenceRunUrl,
-                mcpserversRunUrl: runUrl,
-                otelRunUrl: runUrl,
-                growthRunUrl: runUrl,
-                successRunUrl: runUrl,
-                supportRunUrl: runUrl,
+                iamUrl: datalayerUrl,
+                runtimesUrl,
+                spacerUrl: datalayerUrl,
+                libraryUrl: datalayerUrl,
+                aiAgentsUrl: datalayerUrl,
+                aiInferenceUrl: aiInferenceUrl,
+                mcpServersUrl: datalayerUrl,
+                otelUrl: datalayerUrl,
+                growthUrl: datalayerUrl,
+                successUrl: datalayerUrl,
+                supportUrl: datalayerUrl,
             };
             if (typeof coreApi.setConfiguration === 'function') {
                 coreApi.setConfiguration({ ...prevCfg, ...urls });
@@ -372,7 +373,7 @@ export function AgentNode() {
                 }));
             }
             const api = iamStore.getState();
-            iamStore.setState({ token: tokenForCore, iamRunUrl: runUrl });
+            iamStore.setState({ token: tokenForCore, iamUrl: datalayerUrl });
             if (tokenForCore && typeof api.refreshUserByToken === 'function') {
                 void Promise.resolve(api.refreshUserByToken(tokenForCore)).then(() => {
                     queryClient.invalidateQueries({ queryKey: ['organizations'] });
@@ -406,10 +407,10 @@ export function AgentNode() {
     // API keys are exchanged for a session token before login so billing and
     // plans endpoints (/api/iam/v1/plans/*) resolve the correct paid plan.
     const handleApiKeySignIn = async (apiKey) => {
-        const runUrl = import.meta.env?.VITE_DATALAYER_RUN_URL ||
+        const datalayerUrl = import.meta.env?.VITE_DATALAYER_URL ||
             'https://prod1.datalayer.run';
         try {
-            const resp = await fetch(`${runUrl}/api/iam/v1/login`, {
+            const resp = await fetch(`${datalayerUrl}/api/iam/v1/login`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ token: apiKey }),
@@ -662,7 +663,7 @@ export function AgentNode() {
                                                                     display: 'flex',
                                                                     flexDirection: 'column',
                                                                     gap: 1,
-                                                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Bedrock Anthropic model" }), inferenceModels.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No model list available." })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { children: inferenceDefaultModel || inferenceModels[0] }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(ActionList, { selectionVariant: "single", children: inferenceModels.map(model => (_jsx(ActionList.Item, { selected: inferenceDefaultModel === model, inactiveText: "Selection is locked", children: model }, model))) }) })] }))] }))] }), iamUser ? (_jsx(BillableAccountSelect, { value: configuration.billable_account_uid || '', onChange: handleBillableAccountChange, onSelectedAccountChange: handleSelectedAccountChange, onAccountsResolved: handleAccountsResolved })) : (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Run this agent under" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Loading billable accounts..." })] }))] }), _jsxs(Box, { sx: {
+                                                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Bedrock Anthropic model" }), inferenceModels.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No model list available." })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { children: inferenceDefaultModel || inferenceModels[0] }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(ActionList, { selectionVariant: "single", children: inferenceModels.map(model => (_jsx(ActionList.Item, { selected: inferenceDefaultModel === model, inactiveText: "Selection is locked", children: model }, model))) }) })] }))] }))] }), iamUser ? (_jsx(BillingEntitySelect, { value: configuration.billing_entity_uid || '', onChange: handleBillingEntityChange, onSelectedAccountChange: handleSelectedAccountChange, onAccountsResolved: handleAccountsResolved })) : (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Run this agent under" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Loading billing entitys..." })] }))] }), _jsxs(Box, { sx: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 2,