@datalayer/agent-runtimes 0.0.10 → 0.0.12

package/README.md

@@ -8,7 +8,7 @@
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
 
-# 🤖 Agent Runtimes
+# 🤖 🚀 Agent Runtimes
 
 [![Github Actions Status](https://github.com/datalayer/agent-runtimes/actions/workflows/build.yml/badge.svg)](https://github.com/datalayer/agent-runtimes/actions/workflows/build.yml)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/f7f9e08a-884f-4f76-b20d-666d5873716c/deploy-status)](https://app.netlify.com/projects/agent-runtimes/deploys)
@@ -16,7 +16,7 @@
 
 **Agent Runtimes** is a unified platform for deploying, managing, and interacting with AI agents across multiple protocols and frameworks. It provides both a Python server for hosting agents and React components for seamless integration into web and desktop applications.
 
-## 🎯 What is Agent Runtimes?
+## What is Agent Runtimes?
 
 Agent Runtimes solves the complexity of deploying AI agents by providing:
 

package/lib/Agent.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Agent
+ *
+ * Standalone chat interface served at /static/agent.html.
+ * Connects to the agent-runtimes AG-UI endpoint.
+ *
+ * The page is opened by codeai with a URL like:
+ *   http://127.0.0.1:<port>/static/agent.html?agentId=<id>
+ *
+ * On mount it ensures the agent exists — creating it automatically
+ * if it doesn't — then renders the unified Chat component.
+ *
+ * Uses the unified Chat component which handles:
+ * - AG-UI protocol configuration
+ * - AgentDetails panel (via showInformation)
+ * - Conversation history persistence
+ * - Model/tools/skills selectors
+ * - Error and loading states
+ */
+import React from 'react';
+import '../style/primer-primitives.css';
+/**
+ * Agent component — full-page chat interface.
+ *
+ * Reads the `agentId` query-string parameter, waits for the agent
+ * to be available, then renders the Chat.
+ */
+export declare const Agent: React.FC;
+export default Agent;

package/lib/Agent.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Agent
+ *
+ * Standalone chat interface served at /static/agent.html.
+ * Connects to the agent-runtimes AG-UI endpoint.
+ *
+ * The page is opened by codeai with a URL like:
+ *   http://127.0.0.1:<port>/static/agent.html?agentId=<id>
+ *
+ * On mount it ensures the agent exists — creating it automatically
+ * if it doesn't — then renders the unified Chat component.
+ *
+ * Uses the unified Chat component which handles:
+ * - AG-UI protocol configuration
+ * - AgentDetails panel (via showInformation)
+ * - Conversation history persistence
+ * - Model/tools/skills selectors
+ * - Error and loading states
+ */
+import { useEffect, useState } from 'react';
+import { Text, Spinner } from '@primer/react';
+import { AlertIcon } from '@primer/octicons-react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider } from '@datalayer/core';
+import { Chat } from './components/chat';
+import { DEFAULT_MODEL } from './specs';
+import '../style/primer-primitives.css';
+setupPrimerPortals();
+const BASE_URL = window.location.origin;
+function getAgentId() {
+    const params = new URLSearchParams(window.location.search);
+    return params.get('agentId') || 'default';
+}
+/**
+ * Agent component — full-page chat interface.
+ *
+ * Reads the `agentId` query-string parameter, waits for the agent
+ * to be available, then renders the Chat.
+ */
+export const Agent = () => {
+    const [agentId] = useState(getAgentId);
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    // Ensure the agent exists on mount — create it if it doesn't
+    useEffect(() => {
+        let cancelled = false;
+        const ensureAgent = async () => {
+            try {
+                // First check if the agent already exists
+                const getResp = await fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(agentId)}`);
+                if (getResp.ok) {
+                    if (!cancelled)
+                        setIsReady(true);
+                    return;
+                }
+                // Agent doesn't exist — create it
+                const createResp = await fetch(`${BASE_URL}/api/v1/agents`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        name: agentId,
+                        description: 'Agent created by Agent page',
+                        agent_library: 'pydantic-ai',
+                        transport: 'ag-ui',
+                        model: DEFAULT_MODEL,
+                        system_prompt: 'You are a helpful AI assistant. You can help with code, explanations, and data analysis.',
+                    }),
+                });
+                if (createResp.ok || createResp.status === 400) {
+                    // 400 means agent already exists (race condition), which is fine
+                    if (!cancelled)
+                        setIsReady(true);
+                }
+                else {
+                    const errorData = await createResp.json().catch(() => ({}));
+                    throw new Error(errorData.detail || `Failed to create agent: ${createResp.status}`);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : 'Failed to reach agent');
+                }
+            }
+        };
+        ensureAgent();
+        return () => {
+            cancelled = true;
+        };
+    }, [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, "..."] })] }) }));
+    }
+    // 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 })] }) }));
+    }
+    // Agent is ready — render the Chat component
+    return (_jsx(DatalayerThemeProvider, { children: _jsx(Chat, { transport: "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: [
+                {
+                    title: 'Hello',
+                    message: 'Hello, what can you do?',
+                },
+                {
+                    title: 'Help',
+                    message: 'What tools do you have available?',
+                },
+            ], submitOnSuggestionClick: true }) }));
+};
+export default Agent;

package/lib/AgentLexical.d.ts

@@ -0,0 +1,34 @@
+/**
+ * AgentLexical
+ *
+ * Standalone Lexical editor + chat interface served at /static/agent-lexical.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>
+ *
+ * Query parameters:
+ *   - agentId: the agent identifier (required, set by codeai)
+ *   - jupyterBaseUrl: base URL for the Jupyter server (optional, falls back to jupyter-config-data)
+ *   - jupyterToken: token for the Jupyter server (optional, falls back to jupyter-config-data)
+ */
+import 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+import React from 'react';
+import '@datalayer/jupyter-lexical/style/index.css';
+import './examples/lexical/lexical-theme.css';
+import '@datalayer/jupyter-lexical/style/modal-overrides.css';
+import '../style/primer-primitives.css';
+export declare const AgentLexical: React.FC;
+export default AgentLexical;

package/lib/AgentLexical.js

@@ -0,0 +1,296 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgentLexical
+ *
+ * Standalone Lexical editor + chat interface served at /static/agent-lexical.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>
+ *
+ * Query parameters:
+ *   - agentId: the agent identifier (required, set by codeai)
+ *   - jupyterBaseUrl: base URL for the Jupyter server (optional, falls back to jupyter-config-data)
+ *   - jupyterToken: token for the Jupyter server (optional, falls back to jupyter-config-data)
+ */
+import 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { $getRoot, $createParagraphNode } from 'lexical';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { TRANSFORMERS } from '@lexical/markdown';
+import { registerCodeHighlighting } from '@lexical/code';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+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, setupPrimerPortals } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider } from '@datalayer/core';
+import { JupyterReactTheme, loadJupyterConfig, createServerSettings, 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 { Chat } from './components/chat';
+import { ChatInlinePlugin } from './lexical/ChatInlinePlugin';
+import { useChatInlineToolbarItems } from './lexical/useChatInlineToolbarItems';
+import { useLexicalTools } from './tools/adapters/agent-runtimes/lexicalHooks';
+import { editorConfig } from './examples/lexical/editorConfig';
+import { DEFAULT_MODEL } from './specs';
+import '@datalayer/jupyter-lexical/style/index.css';
+import './examples/lexical/lexical-theme.css';
+import '@datalayer/jupyter-lexical/style/modal-overrides.css';
+import '../style/primer-primitives.css';
+setupPrimerPortals();
+const BASE_URL = window.location.origin;
+const LEXICAL_ID = 'agent-lexical';
+function getQueryParam(name) {
+    return new URLSearchParams(window.location.search).get(name);
+}
+function getAgentId() {
+    return getQueryParam('agentId') || 'default';
+}
+/**
+ * Initialise Jupyter configuration.
+ *
+ * Priority:
+ *   1. Query parameters (jupyterBaseUrl / jupyterToken)
+ *   2. <script id="jupyter-config-data"> block in the HTML page
+ */
+function initJupyterConfig() {
+    loadJupyterConfig();
+    const qBaseUrl = getQueryParam('jupyterBaseUrl');
+    const qToken = getQueryParam('jupyterToken');
+    if (qBaseUrl)
+        setJupyterServerUrl(qBaseUrl);
+    if (qToken)
+        setJupyterServerToken(qToken);
+    const el = document.getElementById('jupyter-config-data');
+    if (el?.textContent) {
+        try {
+            const cfg = JSON.parse(el.textContent);
+            if (!qBaseUrl && cfg.baseUrl)
+                setJupyterServerUrl(cfg.baseUrl);
+            if (!qToken && cfg.token)
+                setJupyterServerToken(cfg.token);
+        }
+        catch {
+            // ignore
+        }
+    }
+}
+// ─── Lexical plugins ────────────────────────────────────────────────────────
+/**
+ * Lexical plugin for loading initial content into the editor.
+ */
+function LoadContentPlugin({ content }) {
+    const [editor] = useLexicalComposerContext();
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (!content || !isFirstRender.current) {
+            return;
+        }
+        isFirstRender.current = false;
+        try {
+            const parsed = JSON.parse(content);
+            if (parsed && typeof parsed === 'object' && parsed.root) {
+                const editorState = editor.parseEditorState(content);
+                editor.setEditorState(editorState, { tag: 'history-merge' });
+            }
+            else {
+                throw new Error('Invalid Lexical editor state format');
+            }
+        }
+        catch {
+            editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                const paragraph = $createParagraphNode();
+                root.append(paragraph);
+            }, { tag: 'history-merge' });
+        }
+    }, [content, editor]);
+    return null;
+}
+function CodeHighlightPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}
+function KernelPluginsInner() {
+    const { defaultKernel } = useJupyter();
+    return (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, { kernel: defaultKernel }), _jsx(JupyterInputOutputPlugin, { kernel: defaultKernel })] }));
+}
+/**
+ * Plugin that captures lexical tools and passes them to parent.
+ * Must be rendered inside LexicalConfigProvider context.
+ */
+function LexicalToolsPlugin({ onToolsReady, }) {
+    const tools = useLexicalTools(LEXICAL_ID);
+    useEffect(() => {
+        onToolsReady(tools);
+    }, [tools, onToolsReady]);
+    return null;
+}
+const LexicalPanel = React.memo(function LexicalPanel({ serviceManager, onToolsReady, }) {
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
+    const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } = useChatInlineToolbarItems();
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+    const handleChange = useCallback((_editorState) => {
+        // onChange handler
+    }, []);
+    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: 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: {
+                                        type: 'ag-ui',
+                                        endpoint: agUiEndpoint,
+                                    }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) }) }));
+});
+const ChatPanel = ({ agentId, tools }) => {
+    return (_jsx(Box, { sx: {
+            width: '420px',
+            minWidth: '320px',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+        }, children: _jsx(Chat, { transport: "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: [
+                {
+                    title: 'Insert heading',
+                    message: 'Insert a heading that says "Welcome"',
+                },
+                {
+                    title: 'Add code block',
+                    message: 'Add a Python code block with a hello world example',
+                },
+                {
+                    title: 'Create list',
+                    message: 'Create a bullet list with three items about Jupyter',
+                },
+            ], submitOnSuggestionClick: true }) }));
+};
+// ─── Main component ─────────────────────────────────────────────────────────
+export const AgentLexical = () => {
+    const [agentId] = useState(getAgentId);
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    const [serviceManager, setServiceManager] = useState(null);
+    const [tools, setTools] = useState([]);
+    const handleToolsReady = useCallback((newTools) => {
+        setTools(newTools);
+    }, []);
+    // Verify the agent exists AND initialise the Jupyter service manager
+    useEffect(() => {
+        let cancelled = false;
+        const init = async () => {
+            try {
+                // 1. Ensure agent exists — create if missing
+                const getResp = await fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(agentId)}`);
+                if (!getResp.ok) {
+                    const createResp = await fetch(`${BASE_URL}/api/v1/agents`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            name: agentId,
+                            description: 'Agent created by Agent Lexical page',
+                            agent_library: 'pydantic-ai',
+                            transport: 'ag-ui',
+                            model: DEFAULT_MODEL,
+                            system_prompt: 'You are a helpful AI assistant that helps users work with documents. You can help with writing, editing, and formatting content.',
+                        }),
+                    });
+                    if (!createResp.ok && createResp.status !== 400) {
+                        const d = await createResp.json().catch(() => ({}));
+                        throw new Error(d.detail || `Failed to create agent: ${createResp.status}`);
+                    }
+                }
+                // 2. Initialise Jupyter
+                initJupyterConfig();
+                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                const manager = new ServiceManager({ serverSettings });
+                await manager.ready;
+                if (!cancelled) {
+                    setServiceManager(manager);
+                    setIsReady(true);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : 'Failed to initialise');
+                }
+            }
+        };
+        init();
+        return () => {
+            cancelled = true;
+        };
+    }, [agentId]);
+    // Loading
+    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, "\u2026"] })] }) }));
+    }
+    // Error
+    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" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
+    }
+    // Ready — lexical editor + chat side-by-side
+    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                display: 'flex',
+                height: '100vh',
+                width: '100vw',
+                overflow: 'hidden',
+                bg: 'canvas.default',
+            }, children: [serviceManager && (_jsx(LexicalPanel, { serviceManager: serviceManager, onToolsReady: handleToolsReady })), _jsx(ChatPanel, { agentId: agentId, tools: tools })] }) }));
+};
+export default AgentLexical;

package/lib/AgentNotebook.d.ts

@@ -0,0 +1,19 @@
+/**
+ * AgentNotebook
+ *
+ * Standalone notebook + chat interface served at /static/agent-notebook.html.
+ * Connects to the agent-runtimes AG-UI endpoint and provides a Jupyter
+ * notebook alongside the Chat component with notebook tools registered.
+ *
+ * The page is opened by codeai with a URL like:
+ *   http://127.0.0.1:<port>/static/agent-notebook.html?agentId=<id>
+ *
+ * Query parameters:
+ *   - agentId: the agent identifier (required, set by codeai)
+ *   - jupyterBaseUrl: base URL for the Jupyter server (optional, falls back to jupyter-config-data)
+ *   - jupyterToken: token for the Jupyter server (optional, falls back to jupyter-config-data)
+ */
+import React from 'react';
+import '../style/primer-primitives.css';
+export declare const AgentNotebook: React.FC;
+export default AgentNotebook;