@datalayer/agent-runtimes 0.0.11 → 1.0.0

package/lib/examples/{AgentSpaceFormExample.js → AgentRuntimeFormExample.js}

@@ -13,9 +13,11 @@ import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-que
 import { Box } from '@datalayer/primer-addons';
 import { DatalayerThemeProvider } from '@datalayer/core';
 import { Chat, useChatStore } from '../components/chat';
+import { DEFAULT_MODEL } from '../specs';
 import { useAgentsStore } from './stores/examplesStore';
 import { useIdentity } from '../identity';
-import { MockFileBrowser, MainContent, Header, FooterMetrics, AgentConfiguration, } from '../components';
+import { MockFileBrowser, MainContent, Header, FooterMetrics, } from './components';
+import { AgentConfiguration, } from '../components';
 import { isSpecSelection, getSpecId } from '../components/AgentConfiguration';
 // Create a query client for React Query
 const queryClient = new QueryClient({
@@ -107,7 +109,7 @@ const DEFAULT_IDENTITY_PROVIDERS = {
         }
         : {}),
 };
-const AgentSpaceFormExample = ({ initialWsUrl = DEFAULT_WS_URL, initialBaseUrl = DEFAULT_BASE_URL, initialAgentName = DEFAULT_AGENT_ID, initialAgentLibrary = 'pydantic-ai', initialTransport = 'ag-ui', initialModel = 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0', initialEnableCodemode = false, initialAllowDirectToolCalls = false, initialEnableToolReranker = false, initialSelectedMcpServers = [], autoSelectMcpServers = false, identityProviders = DEFAULT_IDENTITY_PROVIDERS, 
+const AgentRuntimeFormExample = ({ initialWsUrl = DEFAULT_WS_URL, initialBaseUrl = DEFAULT_BASE_URL, initialAgentName = DEFAULT_AGENT_ID, initialAgentLibrary = 'pydantic-ai', initialTransport = 'ag-ui', initialModel = DEFAULT_MODEL, initialEnableCodemode = false, initialAllowDirectToolCalls = false, initialEnableToolReranker = false, initialSelectedMcpServers = [], autoSelectMcpServers = false, identityProviders = DEFAULT_IDENTITY_PROVIDERS, 
 // Deprecated props - merged into identityProviders for backward compat
 githubClientId, kaggleToken, }) => {
     const [wsUrl, setWsUrl] = useState(initialWsUrl);
@@ -259,10 +261,10 @@ githubClientId, kaggleToken, }) => {
             connectedTokenProvidersRef.current.add(provider);
             connectWithToken(provider, token, { displayName, iconUrl })
                 .then(() => {
-                console.log(`[AgentSpaceFormExample] ${provider} connected with token`);
+                console.log(`[AgentRuntimeFormExample] ${provider} connected with token`);
             })
                 .catch(err => {
-                console.error(`[AgentSpaceFormExample] Failed to connect ${provider}:`, err);
+                console.error(`[AgentRuntimeFormExample] Failed to connect ${provider}:`, err);
                 // Remove from attempted set so we can retry
                 connectedTokenProvidersRef.current.delete(provider);
             });
@@ -270,10 +272,10 @@ githubClientId, kaggleToken, }) => {
     }, [tokenProviders, connectWithToken, isIdentityConnected]);
     // Handle identity connect/disconnect
     const handleIdentityConnect = useCallback((identity) => {
-        console.log('[AgentSpaceFormExample] Identity connected:', identity.provider, identity.userInfo?.name || identity.userInfo?.email);
+        console.log('[AgentRuntimeFormExample] Identity connected:', identity.provider, identity.userInfo?.name || identity.userInfo?.email);
     }, []);
     const handleIdentityDisconnect = useCallback((provider) => {
-        console.log('[AgentSpaceFormExample] Identity disconnected:', provider);
+        console.log('[AgentRuntimeFormExample] Identity disconnected:', provider);
     }, []);
     // Handle codemode change - keep MCP server selections to scope codemode tools
     const handleEnableCodemodeChange = (enabled) => {
@@ -554,7 +556,7 @@ githubClientId, kaggleToken, }) => {
                                 borderColor: 'border.default',
                             } }) })), _jsx(PageLayout.Content, { children: _jsx(MainContent, { showNotebook: showNotebook, timeTravel: timeTravel, onTimeTravelChange: setTimeTravel, richEditor: false, notebookFile: currentAgent?.notebookFile, lexicalFile: currentAgent?.lexicalFile, isNewAgent: isNewMode, isConfigured: isConfigured, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, enableCodemode: enableCodemode, selectedMcpServers: selectedMcpServers, onSelectedMcpServersChange: handleSelectedServersChange, onMcpServersChange: () => {
                                 // Trigger codemode tool regeneration when MCP servers change at runtime
-                                console.log('[AgentSpaceFormExample] MCP servers changed, regenerating codemode tools...');
+                                console.log('[AgentRuntimeFormExample] MCP servers changed, regenerating codemode tools...');
                                 // The Chat component will pick up the new selectedMcpServers via props
                             } }) }), rightPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',
@@ -642,4 +644,4 @@ githubClientId, kaggleToken, }) => {
                             zIndex: 10,
                         }, children: selectedAgentId !== 'new-agent' && (_jsx(FooterMetrics, { tokens: 1523552, cost: 2.01 })) })] }) }) }));
 };
-export default AgentSpaceFormExample;
+export default AgentRuntimeFormExample;

package/lib/examples/AgentRuntimeLexical2Example.d.ts

@@ -27,7 +27,6 @@ import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 /**
  * Chat Lexical Example with Simple integration

package/lib/examples/AgentRuntimeLexical2Example.js

@@ -54,7 +54,6 @@ import { ChatFloating, useChatStore, useFrontendTool, DatalayerInferenceProvider
 import { useLexicalToolActions, ActionRegistrar, } from '../tools/adapters/copilotkit/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'chat-popup-lexical-example';

package/lib/examples/AgentRuntimeLexicalExample.d.ts

@@ -25,7 +25,6 @@ import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 /**
  * Main Agent Runtime lexical example component
  */

package/lib/examples/AgentRuntimeLexicalExample.js

@@ -49,11 +49,11 @@ import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin,
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
 import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
+import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'agui-lexical-example';
 // Base URL for agent-runtimes server
@@ -187,6 +187,8 @@ function LexicalToolsPlugin({ onToolsReady, }) {
 const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, serviceManager, onToolsReady, }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
+    // AI actions registered as toolbar items via the primer-addons toolbar extensibility
+    const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } = useChatInlineToolbarItems();
     const onRef = (_floatingAnchorElem) => {
         if (_floatingAnchorElem !== null) {
             setFloatingAnchorElem(_floatingAnchorElem);
@@ -213,10 +215,10 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                     padding: 3,
                     backgroundColor: 'canvas.default',
                     minHeight: '600px',
-                }, 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, { content: content }), _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(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                }, 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, { content: content }), _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(SimpleKernelPluginsInner, {}) }), 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: AG_UI_ENDPOINT,
-                                        } })] }) })] }) })] }));
+                                        }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
 });
 function LexicalWithChat({ content, serviceManager, }) {
     // Ensure the agent exists before rendering chat
@@ -244,7 +246,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", tools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/AgentRuntimeLexicalSidebarExample.d.ts

@@ -26,7 +26,6 @@ import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 /**
  * Agent Runtime Lexical Sidebar Example with Simple integration

package/lib/examples/AgentRuntimeLexicalSidebarExample.js

@@ -49,10 +49,11 @@ import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, LexicalConfigProvider, LexicalStatePlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 // Import Chat components
 import { ChatSidebar, } from '../components/chat';
+import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
+import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'chat-lexical-example';
@@ -72,6 +73,8 @@ function CodeHighlightingPlugin() {
 function LexicalEditor({ serviceManager }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
+    // AI actions registered as toolbar items
+    const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } = useChatInlineToolbarItems();
     const onRef = (_floatingAnchorElem) => {
         if (_floatingAnchorElem !== null) {
             setFloatingAnchorElem(_floatingAnchorElem);
@@ -98,7 +101,10 @@ function LexicalEditor({ serviceManager }) {
                                     left: '24px',
                                     color: 'var(--fgColor-muted)',
                                     pointerEvents: 'none',
-                                }, children: "Start typing or use the chat to create content..." }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(OnChangePlugin, { onChange: onChange }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(CodeHighlightingPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterInputOutputPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, {}), _jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] })] }) }));
+                                }, children: "Start typing or use the chat to create content..." }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(OnChangePlugin, { onChange: onChange }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(CodeHighlightingPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterInputOutputPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, {}), _jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                                type: 'ag-ui',
+                                endpoint: `${DEFAULT_BASE_URL}/api/v1/examples/${DEFAULT_AGENT_ID}/`,
+                            }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] })] }) }));
 }
 export function ChatLexicalExampleInner({ serviceManager, }) {
     // Get lexical tools for ChatSidebar

package/lib/examples/AgentRuntimeNotebookExample.js

@@ -17,12 +17,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React, { useEffect, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook } from '@datalayer/jupyter-react';
+import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
 // Import Matplotlib notebook
 import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+import { DEFAULT_MODEL } from '../specs';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'agui-notebook-example';
 // Use the imported Matplotlib notebook
@@ -54,7 +55,7 @@ function useEnsureAgent(agentId, baseUrl) {
                         description: 'Demo agent for notebook example',
                         agent_library: 'pydantic-ai',
                         transport: 'ag-ui',
-                        model: 'openai:gpt-4o-mini',
+                        model: DEFAULT_MODEL,
                         system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. You can help with code, explanations, and data analysis.',
                     }),
                 });
@@ -106,13 +107,13 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                     borderRadius: 2,
                     padding: 3,
                     backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+                }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
 });
 function NotebookWithChat({ serviceManager, }) {
     // Ensure the agent exists before rendering chat
     const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
     // Get notebook tools for ChatFloating
-    const tools = useNotebookTools(NOTEBOOK_ID);
+    const frontendTools = useNotebookTools(NOTEBOOK_ID);
     return (_jsxs(Box, { sx: {
             height: '100vh',
             width: '100vw',
@@ -127,7 +128,7 @@ function NotebookWithChat({ serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", tools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Add a cell',
                         message: 'Insert a random cell to the notebook',

package/lib/examples/CopilotKitLexicalExample.d.ts

@@ -26,7 +26,6 @@ import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
 import '@copilotkit/react-ui/styles.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 /**
  * Main CopilotKit lexical example component

package/lib/examples/CopilotKitLexicalExample.js

@@ -53,7 +53,6 @@ import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copil
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
 import '@copilotkit/react-ui/styles.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'agui-lexical-example';

package/lib/examples/CopilotKitNotebookExample.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook } from '@datalayer/jupyter-react';
+import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
 // CopilotKit imports
 import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
@@ -50,7 +50,7 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                         borderRadius: 8,
                         padding: 24,
                         backgroundColor: 'var(--bgColor-default)',
-                    }, children: serviceManager ? (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
+                    }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
 });
 /**
  * Component to register actions with CopilotKit.

package/lib/examples/JupyterNotebookExample.js

@@ -10,12 +10,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+import { JupyterReactTheme, Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 const NOTEBOOK_ID = 'notebook-example-1';
 export const JupyterNotebookExample = (props) => {
     const { serviceManager } = props;
     const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }) }))] }));
 };
 export default JupyterNotebookExample;

package/lib/{components → examples/components}/Header.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { AgentStatus } from '../../types/Types';
 export interface HeaderProps {
     activeSession: string;
     agentName?: string;
     agentDescription?: string;
-    agentStatus?: 'running' | 'paused';
+    agentStatus?: AgentStatus;
     showContextTree: boolean;
     isNewAgent?: boolean;
     isConfigured?: boolean;

package/lib/{components → examples/components}/HeaderControls.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@datalayer/primer-addons';
-import { Sparklines, SparklinesLine } from './sparklines';
+import { Sparklines, SparklinesLine } from '../../components/sparklines';
 /**
  * Header Controls Component
  *

package/lib/{components → examples/components}/LexicalEditor.d.ts

@@ -12,11 +12,16 @@ import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-swift';
 import React from 'react';
 import type { ServiceManager } from '@jupyterlab/services';
+import type { ToolbarItem } from '@datalayer/primer-addons';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '../examples/lexical/lexical-theme.css';
+import '../lexical/lexical-theme.css';
 export interface LexicalEditorProps {
     content?: string;
     serviceManager?: ServiceManager.IManager;
+    /** Optional extra toolbar items (e.g. AI actions from useChatInlineToolbarItems) */
+    extraItems?: ToolbarItem[];
+    /** Optional additional children to render inside the LexicalComposer */
+    children?: React.ReactNode;
 }
 /**
  * Lexical Editor Component

package/lib/{components → examples/components}/LexicalEditor.js

@@ -34,9 +34,9 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, } from '@datalayer/jupyter-lexical';
-import { editorConfig } from '../examples/lexical/editorConfig';
+import { editorConfig } from '../lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '../examples/lexical/lexical-theme.css';
+import '../lexical/lexical-theme.css';
 const LEXICAL_ID = 'agent-runtime-lexical-editor';
 const INITIAL_CONTENT = undefined;
 /**
@@ -97,7 +97,7 @@ function SimpleKernelPluginsInner() {
  *
  * Rich text editor with Simple integration.
  */
-export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, }) => {
+export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, extraItems, children, }) => {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
     const onRef = (_floatingAnchorElem) => {
@@ -115,5 +115,5 @@ export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, }) =>
             padding: 3,
             backgroundColor: 'canvas.default',
             minHeight: '600px',
-        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _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, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) }));
+        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _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, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: extraItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), children] }) }) }) }));
 };

package/lib/{components → examples/components}/MainContent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ServiceManager } from '@jupyterlab/services';
-import { type McpServerSelection } from './McpServerManager';
+import { type McpServerSelection } from '../../components/McpServerManager';
 export interface MainContentProps {
     showNotebook: boolean;
     timeTravel: number;

package/lib/{components → examples/components}/MainContent.js

@@ -9,9 +9,9 @@ import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, Viewer } from '@datalayer/jupyter-react';
 import { TimeTravel } from './TimeTravel';
 import { LexicalEditor } from './LexicalEditor';
-import { McpServerManager } from './McpServerManager';
-import matplotlib from '../examples/stores/notebooks/NotebookExample2.ipynb.json';
-import emptyNotebook from '../examples/stores/notebooks/Empty.ipynb.json';
+import { McpServerManager, } from '../../components/McpServerManager';
+import matplotlib from '../stores/notebooks/NotebookExample2.ipynb.json';
+import emptyNotebook from '../stores/notebooks/Empty.ipynb.json';
 /**
  * Main Content Component
  *
@@ -30,7 +30,8 @@ export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, rich
         }
         else if (notebookFile) {
             // Dynamically import the notebook based on the file name
-            import(/* @vite-ignore */ `../stores/agents/${notebookFile}`)
+            import(
+            /* webpackIgnore: true */ /* @vite-ignore */ `../stores/agents/${notebookFile}`)
                 .then(module => {
                 setNotebookData(module.default);
             })
@@ -46,7 +47,8 @@ export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, rich
     React.useEffect(() => {
         if (lexicalFile && !isNewAgent) {
             // Dynamically import the lexical file based on the file name
-            import(/* @vite-ignore */ `../stores/agents/${lexicalFile}`)
+            import(
+            /* webpackIgnore: true */ /* @vite-ignore */ `../stores/agents/${lexicalFile}`)
                 .then(module => {
                 // Convert the JSON to a string if needed
                 setLexicalContent(typeof module.default === 'string'

package/lib/examples/components/index.d.ts

@@ -0,0 +1,16 @@
+export { MockFileBrowser } from './MockFileBrowser';
+export type { MockFileBrowserProps } from './MockFileBrowser';
+export { MainContent } from './MainContent';
+export type { MainContentProps } from './MainContent';
+export { SessionTabs } from './SessionTabs';
+export type { SessionTabsProps, Session } from './SessionTabs';
+export { Header } from './Header';
+export type { HeaderProps } from './Header';
+export { HeaderControls } from './HeaderControls';
+export type { HeaderControlsProps } from './HeaderControls';
+export { FooterMetrics } from './FooterMetrics';
+export type { FooterMetricsProps } from './FooterMetrics';
+export { TimeTravel } from './TimeTravel';
+export type { TimeTravelProps } from './TimeTravel';
+export { LexicalEditor } from './LexicalEditor';
+export type { LexicalEditorProps } from './LexicalEditor';

package/lib/examples/components/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// Example/layout components
+export { MockFileBrowser } from './MockFileBrowser';
+export { MainContent } from './MainContent';
+export { SessionTabs } from './SessionTabs';
+export { Header } from './Header';
+export { HeaderControls } from './HeaderControls';
+export { FooterMetrics } from './FooterMetrics';
+export { TimeTravel } from './TimeTravel';
+export { LexicalEditor } from './LexicalEditor';

package/lib/examples/example-selector.js

@@ -16,7 +16,7 @@ export const EXAMPLES = {
     AgUiSharedStateExample: () => import('./AgUiSharedStateExample'),
     AgUiToolsBasedGenUIExample: () => import('./AgUiToolsBasedGenUIExample'),
     AgentRuntimeCustomExample: () => import('./AgentRuntimeCustomExample'),
-    AgentSpaceFormExample: () => import('./AgentSpaceFormExample'),
+    AgentRuntimeFormExample: () => import('./AgentRuntimeFormExample'),
     AgentRuntimeLexicalSidebarExample: () => import('./AgentRuntimeLexicalSidebarExample'),
     AgentRuntimeNotebookExample: () => import('./AgentRuntimeNotebookExample'),
     AgentRuntimeNotebookSidebarExample: () => import('./AgentRuntimeNotebookSidebarExample'),
@@ -24,6 +24,7 @@ export const EXAMPLES = {
     //  AgentRuntimeLexical2Example: () =>
     //    import('./AgentRuntimeLexical2Example'),
     AgentRuntimeStandaloneExample: () => import('./AgentRuntimeStandaloneExample'),
+    AgentRuntimeChatExample: () => import('./AgentRuntimeChatExample'),
     CopilotKitNotebookExample: () => import('./CopilotKitNotebookExample'),
     CopilotKitLexicalExample: () => import('./CopilotKitLexicalExample'),
     DatalayerNotebookExample: () => import('./DatalayerNotebookExample'),

package/lib/examples/index.d.ts

@@ -12,7 +12,7 @@ export { default as AgentRuntimeLexicalSidebarExample } from './AgentRuntimeLexi
 export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookExample';
 export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
 export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
-export { default as AgentSpaceFormExample } from './AgentSpaceFormExample';
+export { default as AgentRuntimeFormExample } from './AgentRuntimeFormExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';

package/lib/examples/index.js

@@ -16,7 +16,7 @@ export { default as AgentRuntimeLexicalSidebarExample } from './AgentRuntimeLexi
 export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookExample';
 export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
 export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
-export { default as AgentSpaceFormExample } from './AgentSpaceFormExample';
+export { default as AgentRuntimeFormExample } from './AgentRuntimeFormExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';

package/lib/examples/main.js

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
-import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
+import { coreStore, iamStore, createDatalayerServiceManager, DatalayerThemeProvider, } from '@datalayer/core';
 import { useChatStore } from '../components/chat/store';
 import { OAuthCallback } from '../identity';
 import { EXAMPLES } from './example-selector';
@@ -292,7 +292,7 @@ export const ExampleApp = () => {
     if (serviceManager) {
         exampleProps.serviceManager = serviceManager;
     }
-    return (_jsx(JupyterReactTheme, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
+    return (_jsx(DatalayerThemeProvider, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
                         position: 'fixed',
                         top: 0,
                         left: 0,

package/lib/examples/stores/examplesStore.d.ts

@@ -1,26 +1,5 @@
-export type AgentStatus = 'running' | 'paused';
-export type Transport = 'acp' | 'ag-ui' | 'vercel-ai' | 'a2a';
-export interface Agent {
-    id: string;
-    name: string;
-    description: string;
-    author: string;
-    lastEdited: string;
-    screenshot: string;
-    status?: AgentStatus;
-    transport: Transport;
-    avatarUrl: string;
-    notebookFile: string;
-    lexicalFile: string;
-    stars: number;
-    notifications: number;
-}
-export type AgentsState = {
-    agents: readonly Agent[];
-    getAgentById: (id: string) => Agent | undefined;
-    updateAgentStatus: (id: string, status: AgentStatus) => void;
-    toggleAgentStatus: (id: string) => void;
-};
+import type { Agent, AgentStatus, AgentsState, Transport } from '../../types/Types';
+export type { Agent, AgentStatus, AgentsState, Transport };
 export declare const agentsStore: any;
 export declare function useAgentsStore(): AgentsState;
 export declare function useAgentsStore<T>(selector: (state: AgentsState) => T): T;

package/lib/index.d.ts

@@ -3,4 +3,5 @@ export * from './state';
 export * from './runtime';
 export * from './identity';
 export * from './config';
-export type { ConversationEntry, MCPServer, AgentSkillSpec, AgentSpec, AIModel, FrontendConfig, BuiltinTool, MCPServerTool, } from './types';
+export * from './specs';
+export type { ConversationEntry, MCPServer, AgentSkillSpec, AgentSpec, AIModelRuntime, FrontendConfig, BuiltinTool, MCPServerTool, } from './types/Types';

package/lib/index.js

@@ -7,3 +7,4 @@ export * from './state';
 export * from './runtime';
 export * from './identity';
 export * from './config';
+export * from './specs';

package/lib/lexical/ChatInlinePlugin.d.ts

@@ -11,11 +11,22 @@ export declare const RESTORE_SELECTION_COMMAND: LexicalCommand<null>;
 export interface ChatInlinePluginProps {
     /** Protocol configuration for the AI agent */
     protocol: ChatInlineProtocolConfig;
+    /** Whether the AI chat panel is open (controlled by useChatInlineToolbarItems) */
+    isOpen: boolean;
+    /** Callback to close the AI chat panel */
+    onClose: () => void;
+    /** A pending prompt to submit automatically (from toolbar dropdown action) */
+    pendingPrompt?: string | null;
+    /** Callback after the pending prompt has been consumed */
+    onPendingPromptConsumed?: () => void;
     /** Optional: Container element for the portal (defaults to document.body) */
     portalContainer?: HTMLElement;
 }
 /**
- * ChatInlinePlugin - Floating AI toolbar for Lexical text selection.
+ * ChatInlinePlugin - Floating AI chat panel for Lexical text selection.
+ *
+ * This plugin is controlled externally via `isOpen` prop. It positions a
+ * ChatInline component near the text selection when open.
  */
-export declare function ChatInlinePlugin({ protocol, portalContainer, }: ChatInlinePluginProps): JSX.Element | null;
+export declare function ChatInlinePlugin({ protocol, isOpen, onClose, pendingPrompt, onPendingPromptConsumed, portalContainer, }: ChatInlinePluginProps): JSX.Element | null;
 export default ChatInlinePlugin;