@datalayer/agent-runtimes 0.0.9 → 0.0.11

package/lib/examples/AgentSpaceFormExample.js

@@ -9,13 +9,14 @@ import { PageLayout, IconButton } from '@primer/react';
 import { SidebarCollapseIcon, SidebarExpandIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { Blankslate } from '@primer/react/experimental';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 import { DatalayerThemeProvider } from '@datalayer/core';
-import { Chat } from '../components/chat';
+import { Chat, useChatStore } from '../components/chat';
 import { useAgentsStore } from './stores/examplesStore';
 import { useIdentity } from '../identity';
-import { MockFileBrowser, MainContent, Header, FooterMetrics, AgentConfiguration, } from './components';
+import { MockFileBrowser, MainContent, Header, FooterMetrics, AgentConfiguration, } from '../components';
+import { isSpecSelection, getSpecId } from '../components/AgentConfiguration';
 // Create a query client for React Query
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -27,6 +28,47 @@ const queryClient = new QueryClient({
         },
     },
 });
+/**
+ * Hook to fetch codemode status and compute Jupyter error banner.
+ * Must be used inside QueryClientProvider.
+ */
+function useJupyterSandboxStatus(baseUrl, isConfigured, enableCodemode, useJupyterSandbox) {
+    const { data: codemodeStatus } = useQuery({
+        queryKey: ['codemode-status', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/configure/codemode-status`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch codemode status');
+            }
+            return response.json();
+        },
+        enabled: isConfigured && enableCodemode && useJupyterSandbox,
+        refetchInterval: 10000, // Refresh every 10 seconds
+    });
+    return React.useMemo(() => {
+        if (!isConfigured || !enableCodemode || !useJupyterSandbox) {
+            return undefined;
+        }
+        const sandbox = codemodeStatus?.sandbox;
+        if (!sandbox) {
+            return undefined;
+        }
+        // Check if Jupyter variant is selected but not connected
+        if (sandbox.variant === 'local-jupyter' && !sandbox.jupyter_connected) {
+            return {
+                message: sandbox.jupyter_error
+                    ? `Jupyter Sandbox Error: ${sandbox.jupyter_error}`
+                    : 'Jupyter Sandbox not connected. Code execution may fail.',
+                variant: 'danger',
+            };
+        }
+        return undefined;
+    }, [isConfigured, enableCodemode, useJupyterSandbox, codemodeStatus]);
+}
+function ChatWithJupyterStatus({ baseUrl, isConfigured, enableCodemode, useJupyterSandbox, chatProps, }) {
+    const jupyterErrorBanner = useJupyterSandboxStatus(baseUrl, isConfigured, enableCodemode, useJupyterSandbox);
+    return _jsx(Chat, { ...chatProps, errorBanner: jupyterErrorBanner });
+}
 // Default configuration - use environment variable if available
 // Note: Vercel AI connects to Jupyter server (8888), other protocols connect to agent-runtimes server (8765)
 const DEFAULT_WS_URL = import.meta.env.VITE_ACP_WS_URL || 'ws://localhost:8765/api/v1/acp/ws';
@@ -80,11 +122,70 @@ githubClientId, kaggleToken, }) => {
     // Agent capabilities state (moved from Header toggles)
     const [selectedSkills, setSelectedSkills] = useState([]);
     const [enableCodemode, setEnableCodemode] = useState(initialEnableCodemode);
+    const [useJupyterSandbox, setUseJupyterSandbox] = useState(false);
     const [allowDirectToolCalls, setAllowDirectToolCalls] = useState(initialAllowDirectToolCalls);
     const [enableToolReranker, setEnableToolReranker] = useState(initialEnableToolReranker);
     const [selectedMcpServers, setSelectedMcpServers] = useState(initialSelectedMcpServers);
     const autoSelectRef = useRef(false);
     const enableSkills = selectedSkills.length > 0;
+    // =====================================================================
+    // Two-Container Codemode Architecture
+    // =====================================================================
+    //
+    // When Jupyter sandbox is enabled, the architecture uses two containers:
+    //
+    // ┌─────────────────────────────────────┐  ┌─────────────────────────────────┐
+    // │  agent-runtimes (port 8765)         │  │  jupyter server (port 8888)     │
+    // │  ┌─────────────────────────────┐    │  │  ┌─────────────────────────┐    │
+    // │  │  MCP Servers (stdio)        │    │  │  │  Jupyter Kernel         │    │
+    // │  │  - github, filesystem, etc  │◀───┼──┼──│  executes generated     │    │
+    // │  └─────────────────────────────┘    │  │  │  Python code            │    │
+    // │  ┌─────────────────────────────┐    │  │  └─────────────────────────┘    │
+    // │  │  /api/v1/mcp/proxy/*        │    │  │                                 │
+    // │  │  HTTP proxy for tool calls  │    │  │  Tool calls go via HTTP to     │
+    // │  └─────────────────────────────┘    │  │  agent-runtimes MCP proxy      │
+    // └─────────────────────────────────────┘  └─────────────────────────────────┘
+    //
+    // The backend automatically configures mcp_proxy_url when jupyter_sandbox
+    // is provided, defaulting to http://0.0.0.0:8765/api/v1/mcp/proxy
+    //
+    // =====================================================================
+    // Jupyter sandbox URL (used when useJupyterSandbox is true)
+    // Can be configured via VITE_JUPYTER_SANDBOX_URL environment variable
+    const jupyterSandboxUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL ||
+        'http://localhost:8888/api/jupyter-server?token=60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
+    const handleSelectedServersChange = React.useCallback((newServers) => {
+        const oldServers = selectedMcpServers;
+        // Find added and removed servers
+        const oldIds = new Set(oldServers.map(s => `${s.id}:${s.origin}`));
+        const newIds = new Set(newServers.map(s => `${s.id}:${s.origin}`));
+        const added = newServers.filter(s => !oldIds.has(`${s.id}:${s.origin}`));
+        const removed = oldServers.filter(s => !newIds.has(`${s.id}:${s.origin}`));
+        // Add system message about tool changes if there are any
+        if ((added.length > 0 || removed.length > 0) && isConfigured) {
+            let messageContent = '';
+            if (added.length > 0) {
+                const addedNames = added.map(s => `${s.id} (${s.origin})`).join(', ');
+                messageContent += `🔧 Tools added: ${addedNames}. `;
+            }
+            if (removed.length > 0) {
+                const removedNames = removed
+                    .map(s => `${s.id} (${s.origin})`)
+                    .join(', ');
+                messageContent += `🔧 Tools removed: ${removedNames}. You no longer have access to these tools.`;
+            }
+            if (messageContent) {
+                const systemMessage = {
+                    id: `system-mcp-${Date.now()}`,
+                    role: 'system',
+                    content: messageContent.trim(),
+                    createdAt: new Date(),
+                };
+                useChatStore.getState().addMessage(systemMessage);
+            }
+        }
+        setSelectedMcpServers(newServers);
+    }, [selectedMcpServers, isConfigured]);
     // Merge deprecated props into identityProviders for backward compatibility
     const mergedIdentityProviders = React.useMemo(() => {
         const merged = { ...identityProviders };
@@ -180,12 +281,11 @@ githubClientId, kaggleToken, }) => {
         if (!enabled) {
             setAllowDirectToolCalls(false);
             setEnableToolReranker(false);
+            setUseJupyterSandbox(false);
         }
     };
     // UI state
     const [activeSession, setActiveSession] = useState('session-1');
-    const [richEditor, setRichEditor] = useState(false);
-    const [durable, setDurable] = useState(true);
     const [codemode, _] = useState(false);
     const [showContextTree, setShowContextTree] = useState(false);
     const [showNotebook] = useState(true);
@@ -224,7 +324,7 @@ githubClientId, kaggleToken, }) => {
                 const servers = data?.mcpServers || [];
                 const available = servers.filter((s) => s.isAvailable);
                 if (available.length > 0) {
-                    setSelectedMcpServers([available[0].id]);
+                    setSelectedMcpServers([{ id: available[0].id, origin: 'config' }]);
                     autoSelectRef.current = true;
                 }
             }
@@ -234,7 +334,26 @@ githubClientId, kaggleToken, }) => {
         };
         void loadServers();
     }, [autoSelectMcpServers, enableCodemode, selectedMcpServers, baseUrl]);
-    const handleAgentSelect = (agentId) => {
+    // Track previous MCP servers to detect changes
+    const prevMcpServersRef = useRef(selectedMcpServers);
+    // Cache for library specs (fetched on-demand, outside QueryClientProvider)
+    const librarySpecsRef = useRef(null);
+    const fetchLibrarySpecs = useCallback(async () => {
+        if (librarySpecsRef.current)
+            return librarySpecsRef.current;
+        try {
+            const response = await fetch(`${baseUrl}/api/v1/agents/library`);
+            if (!response.ok)
+                return [];
+            const data = await response.json();
+            librarySpecsRef.current = data;
+            return data;
+        }
+        catch {
+            return [];
+        }
+    }, [baseUrl]);
+    const handleAgentSelect = async (agentId) => {
         setSelectedAgentId(agentId);
         setCreateError(null);
         if (agentId === 'new-agent') {
@@ -242,6 +361,23 @@ githubClientId, kaggleToken, }) => {
             setAgentName(DEFAULT_AGENT_ID);
             setTransport('ag-ui');
         }
+        else if (isSpecSelection(agentId)) {
+            // Populate form fields from the selected library spec
+            const specId = getSpecId(agentId);
+            const specs = await fetchLibrarySpecs();
+            const spec = specs.find(s => s.id === specId);
+            if (spec) {
+                setAgentName(spec.id);
+                // Keep current transport, model, agentLibrary - user can override
+                if (spec.skills.length > 0) {
+                    setSelectedSkills(spec.skills);
+                    setEnableCodemode(true);
+                }
+                if (spec.systemPromptCodemodeAddons) {
+                    setEnableCodemode(true);
+                }
+            }
+        }
         else {
             const agent = agents.find(a => a.id === agentId);
             if (agent) {
@@ -257,6 +393,10 @@ githubClientId, kaggleToken, }) => {
         setIsCreatingAgent(true);
         setCreateError(null);
         try {
+            // Resolve spec ID if creating from a library spec
+            const specId = isSpecSelection(selectedAgentId)
+                ? getSpecId(selectedAgentId)
+                : undefined;
             const response = await fetch(`${baseUrl}/api/v1/agents`, {
                 method: 'POST',
                 headers: {
@@ -275,6 +415,8 @@ githubClientId, kaggleToken, }) => {
                     enable_tool_reranker: enableToolReranker,
                     selected_mcp_servers: selectedMcpServers,
                     skills: selectedSkills,
+                    jupyter_sandbox: useJupyterSandbox ? jupyterSandboxUrl : undefined,
+                    ...(specId ? { agent_spec_id: specId } : {}),
                 }),
             });
             if (!response.ok) {
@@ -308,6 +450,9 @@ githubClientId, kaggleToken, }) => {
         enableToolReranker,
         selectedMcpServers,
         selectedSkills,
+        useJupyterSandbox,
+        jupyterSandboxUrl,
+        selectedAgentId,
     ]);
     /**
      * Delete an agent via the API
@@ -329,9 +474,16 @@ githubClientId, kaggleToken, }) => {
             return false;
         }
     }, [baseUrl]);
+    // Track MCP servers for reference (no longer triggers recreation)
+    // MCP server updates are now handled via PATCH endpoint by McpServerManager
+    useEffect(() => {
+        prevMcpServersRef.current = selectedMcpServers;
+    }, [selectedMcpServers]);
+    // True when creating a new agent (blank or from a library spec)
+    const isNewMode = selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId);
     const handleConnect = async () => {
-        // For existing agents (not new-agent), ensure transport and agentName are set
-        if (selectedAgentId !== 'new-agent') {
+        // For existing agents (not new-agent or spec), ensure transport and agentName are set
+        if (!isNewMode) {
             const agent = agents.find(a => a.id === selectedAgentId);
             if (agent) {
                 setTransport(agent.transport);
@@ -368,14 +520,13 @@ githubClientId, kaggleToken, }) => {
     };
     const handleReset = async () => {
         // Delete the agent from the server if we created it
-        if (selectedAgentId === 'new-agent' && agentName) {
+        if ((selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId)) &&
+            agentName) {
             await deleteAgentOnServer(agentName);
         }
         setIsConfigured(false);
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: selectedAgentId === 'new-agent' ? undefined : currentAgent?.name, agentDescription: selectedAgentId === 'new-agent'
-                            ? undefined
-                            : currentAgent?.description, agentStatus: currentAgent?.status, richEditor: richEditor, durable: durable, showContextTree: showContextTree, isNewAgent: selectedAgentId === 'new-agent', isConfigured: isConfigured, onSessionChange: setActiveSession, onRichEditorChange: setRichEditor, onDurableChange: setDurable, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
                             ? () => toggleAgentStatus(currentAgent.id)
                             : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',
@@ -389,7 +540,7 @@ githubClientId, kaggleToken, }) => {
                                         border: '1px solid',
                                         borderLeft: 'none',
                                         borderColor: 'border.default',
-                                    } }) }), _jsx(PageLayout.Pane, { position: "start", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '90px' }, children: selectedAgentId === 'new-agent' ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "New Agent" }), _jsx(Box, { sx: { textAlign: 'center' }, children: _jsx(Blankslate.Description, { children: "Configure your new agent using the settings on the right" }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { sx: {
+                                    } }) }), _jsx(PageLayout.Pane, { position: "start", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '90px' }, children: isNewMode ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "Agent Runtimes" }), _jsx(Box, { sx: { textAlign: 'center' }, children: _jsx(Blankslate.Description, { children: "Expose AI Agents through multiple protocols." }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { sx: {
                             position: 'fixed',
                             left: 0,
                             top: '50%',
@@ -401,7 +552,11 @@ githubClientId, kaggleToken, }) => {
                                 border: '1px solid',
                                 borderLeft: 'none',
                                 borderColor: 'border.default',
-                            } }) })), _jsx(PageLayout.Content, { children: _jsx(MainContent, { showNotebook: showNotebook, timeTravel: timeTravel, onTimeTravelChange: setTimeTravel, richEditor: richEditor, notebookFile: currentAgent?.notebookFile, lexicalFile: currentAgent?.lexicalFile, isNewAgent: selectedAgentId === 'new-agent' }) }), rightPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                            } }) })), _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...');
+                                // The Chat component will pick up the new selectedMcpServers via props
+                            } }) }), rightPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',
                                     right: 0,
                                     top: '50%',
@@ -418,29 +573,54 @@ githubClientId, kaggleToken, }) => {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         p: 2,
-                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, model: model, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onModelChange: setModel, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableCodemodeChange: handleEnableCodemodeChange, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedSkillsChange: setSelectedSkills, onSelectedMcpServersChange: setSelectedMcpServers })) : (
+                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, model: model, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onModelChange: setModel, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableCodemodeChange: handleEnableCodemodeChange, onUseJupyterSandboxChange: setUseJupyterSandbox, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedSkillsChange: setSelectedSkills, onSelectedMcpServersChange: setSelectedMcpServers })) : (
                                     /* Chat Interface */
-                                    _jsx(Box, { sx: { flex: 1 }, children: _jsx(Chat, { transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, title: currentAgent?.name || agentName || 'AI Assistant', autoConnect: true, autoFocus: true, placeholder: "Type your message to the agent...", height: "calc(100vh - 250px)", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, codemodeEnabled: enableCodemode, initialModel: model, initialMcpServers: selectedMcpServers, initialSkills: selectedSkills, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, suggestions: [
-                                                {
-                                                    title: '👋 Say hello',
-                                                    message: 'Hello! What can you help me with today?',
-                                                },
-                                                {
-                                                    title: '💡 Get ideas',
-                                                    message: 'Can you suggest some creative project ideas?',
-                                                },
-                                                {
-                                                    title: '📝 Explain concepts',
-                                                    message: 'Can you explain how AI agents work?',
+                                    _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(ChatWithJupyterStatus, { baseUrl: baseUrl, isConfigured: isConfigured, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, chatProps: {
+                                                transport: currentAgent?.transport || transport,
+                                                extensions: extensions,
+                                                wsUrl: wsUrl,
+                                                baseUrl: baseUrl,
+                                                agentId: currentAgent?.id || agentName,
+                                                title: currentAgent?.name || agentName || 'AI Assistant',
+                                                autoConnect: true,
+                                                autoFocus: true,
+                                                placeholder: 'Type your message to the agent...',
+                                                height: 'calc(100vh - 150px)',
+                                                showModelSelector: true,
+                                                showToolsMenu: true,
+                                                showSkillsMenu: true,
+                                                codemodeEnabled: enableCodemode,
+                                                initialModel: model,
+                                                mcpServers: selectedMcpServers,
+                                                initialSkills: selectedSkills,
+                                                identityProviders: oauthProvidersConfig,
+                                                onIdentityConnect: handleIdentityConnect,
+                                                onIdentityDisconnect: handleIdentityDisconnect,
+                                                suggestions: [
+                                                    {
+                                                        title: '👋 Say hello',
+                                                        message: 'Hello! What can you help me with today?',
+                                                    },
+                                                    {
+                                                        title: '💡 Get ideas',
+                                                        message: 'Can you suggest some creative project ideas?',
+                                                    },
+                                                    {
+                                                        title: '📝 Explain concepts',
+                                                        message: 'Can you explain how AI agents work?',
+                                                    },
+                                                    {
+                                                        title: '🔧 Help with code',
+                                                        message: 'Can you help me write some Python code?',
+                                                    },
+                                                ],
+                                                onDisconnect: handleReset,
+                                                onMessageSent: (_content) => {
+                                                    // Message sent
                                                 },
-                                                {
-                                                    title: '🔧 Help with code',
-                                                    message: 'Can you help me write some Python code?',
+                                                onMessageReceived: (_message) => {
+                                                    // Message received
                                                 },
-                                            ], onDisconnect: handleReset, onMessageSent: (_content) => {
-                                                // Message sent
-                                            }, onMessageReceived: (_message) => {
-                                                // Message received
                                             } }) })) }) })] })) : (_jsx(Box, { sx: {
                             position: 'fixed',
                             right: 0,

package/lib/examples/CopilotKitLexicalExample.d.ts

@@ -26,6 +26,7 @@ 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

@@ -48,11 +48,12 @@ import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
 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 { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copilotkit/lexicalHooks';
 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';
@@ -146,7 +147,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                         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(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _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(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
 });
 function LexicalWithTools({ content, serviceManager, }) {
     // Get all actions for this lexical document

package/lib/examples/index.d.ts

@@ -18,3 +18,4 @@ export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExampl
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';
 export { default as JupyterCellExample } from './JupyterCellExample';
 export { default as JupyterNotebookExample } from './JupyterNotebookExample';
+export type { Agent, AgentStatus, AgentsState, Transport, } from './stores/examplesStore';

package/lib/examples/stores/notebooks/NotebookExample2.ipynb.json

@@ -1,48 +1,48 @@
 {
-  "cells": [
-    {
-      "cell_type": "code",
-      "execution_count": 1,
-      "metadata": {},
-      "outputs": [
+    "cells": [
         {
-          "data": {
-            "text/plain": ["4"]
-          },
-          "execution_count": 1,
-          "metadata": {},
-          "output_type": "execute_result"
+            "cell_type": "code",
+            "execution_count": 1,
+            "metadata": {},
+            "outputs": [
+                {
+                    "data": {
+                        "text/plain": ["4"]
+                    },
+                    "execution_count": 1,
+                    "metadata": {},
+                    "output_type": "execute_result"
+                }
+            ],
+            "source": ["2+2"]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": []
+        }
+    ],
+    "metadata": {
+        "kernelspec": {
+            "display_name": "Python (ipykernel)",
+            "language": "python",
+            "name": "python"
+        },
+        "language_info": {
+            "codemirror_mode": {
+                "name": "ipython",
+                "version": 3
+            },
+            "file_extension": ".py",
+            "mimetype": "text/x-python",
+            "name": "python",
+            "nbconvert_exporter": "python",
+            "pygments_lexer": "ipython3",
+            "version": "3.10.4"
         }
-      ],
-      "source": ["2+2"]
-    },
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "metadata": {},
-      "outputs": [],
-      "source": []
-    }
-  ],
-  "metadata": {
-    "kernelspec": {
-      "display_name": "Python (ipykernel)",
-      "language": "python",
-      "name": "python"
     },
-    "language_info": {
-      "codemirror_mode": {
-        "name": "ipython",
-        "version": 3
-      },
-      "file_extension": ".py",
-      "mimetype": "text/x-python",
-      "name": "python",
-      "nbconvert_exporter": "python",
-      "pygments_lexer": "ipython3",
-      "version": "3.10.4"
-    }
-  },
-  "nbformat": 4,
-  "nbformat_minor": 4
+    "nbformat": 4,
+    "nbformat_minor": 4
 }

package/lib/hooks/useAGUI.d.ts

@@ -33,7 +33,7 @@ export interface UseAGUIOptions {
  * Hook to manage chat state with AG-UI protocol.
  *
  * This hook provides an interface to the AG-UI protocol endpoint
- * at /api/v1/ag-ui/{agent_id}/ which is powered by Pydantic AI's
+ * at /api/v1/ag-ui/{agent_id}/ (trailing slash required) which is powered by Pydantic AI's
  * native AGUIApp. The AG-UI protocol accepts POST requests with
  * prompts and streams back agent responses.
  *

package/lib/hooks/useAGUI.js

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from 'react';
  * Hook to manage chat state with AG-UI protocol.
  *
  * This hook provides an interface to the AG-UI protocol endpoint
- * at /api/v1/ag-ui/{agent_id}/ which is powered by Pydantic AI's
+ * at /api/v1/ag-ui/{agent_id}/ (trailing slash required) which is powered by Pydantic AI's
  * native AGUIApp. The AG-UI protocol accepts POST requests with
  * prompts and streams back agent responses.
  *

package/lib/identity/types.d.ts

@@ -226,7 +226,7 @@ export interface TokenProviderConfig {
     displayName: string;
     /** Icon URL */
     iconUrl?: string;
-    /** Profile URL template (use {username} placeholder) */
+    /** Profile URL template (use `{username}` placeholder) */
     profileUrlTemplate?: string;
     /** User info endpoint (called with Bearer token) */
     userInfoUrl?: string;

package/lib/index.d.ts

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

package/lib/index.js

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

package/lib/runtime/index.d.ts

@@ -28,8 +28,11 @@
  * ```
  */
 export { useRuntimeStore, useRuntime, useAgent, useRuntimeStatus, useRuntimeError, useIsLaunching, getRuntimeState, subscribeToRuntime, } from './runtimeStore';
+export type { RuntimeStore, RuntimeStoreState, RuntimeStoreActions, } from './runtimeStore';
 export { useAgentConnection } from './useAgentConnection';
+export type { UseAgentConnectionReturn, UseAgentConnectionOptions, } from './useAgentConnection';
 export { useAgentRuntime } from './useAgentRuntime';
+export type { UseAgentRuntimeReturn, UseAgentRuntimeOptions, } from './useAgentRuntime';
 export type { IRuntimeLocation, IRuntimeType, IRuntimeCapabilities, IRuntimePod, IRuntimeOptions, IRuntimeDesc, } from './types';
 export type { RuntimeConnection, AgentRuntimeStatus as RuntimeStatus, AgentConfig, AgentConnection, AgentRuntimeState, } from './types';
 export { DEFAULT_AGENT_CONFIG } from './types';

package/lib/runtime/runtimeStore.d.ts

@@ -3,7 +3,7 @@ import type { IRuntimeOptions, RuntimeConnection, AgentRuntimeStatus, AgentConfi
 /**
  * Runtime store state interface.
  */
-interface RuntimeStoreState {
+export interface RuntimeStoreState {
     /** Current runtime connection */
     runtime: RuntimeConnection | null;
     /** Current agent connection */
@@ -18,7 +18,7 @@ interface RuntimeStoreState {
 /**
  * Runtime store actions interface.
  */
-interface RuntimeStoreActions {
+export interface RuntimeStoreActions {
     /** Launch a new runtime */
     launchRuntime: (options: IRuntimeOptions) => Promise<RuntimeConnection>;
     /** Connect to an existing runtime */
@@ -39,7 +39,7 @@ interface RuntimeStoreActions {
     /** Reset store to initial state */
     reset: () => void;
 }
-type RuntimeStore = RuntimeStoreState & RuntimeStoreActions;
+export type RuntimeStore = RuntimeStoreState & RuntimeStoreActions;
 /**
  * Zustand store for runtime management.
  *
@@ -74,4 +74,3 @@ export declare const getRuntimeState: () => RuntimeStore;
  * Subscribe to runtime store changes (for use outside React).
  */
 export declare const subscribeToRuntime: (listener: (state: RuntimeStore, prevState: RuntimeStore) => void) => () => void;
-export {};

package/lib/runtime/useAgentConnection.d.ts

@@ -1,11 +1,11 @@
 import type { AgentConfig, AgentConnection } from './types';
-interface UseAgentConnectionOptions {
+export interface UseAgentConnectionOptions {
     /** Agent configuration */
     config?: AgentConfig;
     /** Auto-create agent when runtime is ready */
     autoCreate?: boolean;
 }
-interface UseAgentConnectionReturn {
+export interface UseAgentConnectionReturn {
     /** Current agent connection */
     agent: AgentConnection | null;
     /** Whether the agent is ready */
@@ -43,4 +43,3 @@ interface UseAgentConnectionReturn {
  * ```
  */
 export declare function useAgentConnection(options?: UseAgentConnectionOptions): UseAgentConnectionReturn;
-export {};