@datalayer/agent-runtimes 0.0.9 → 0.0.10

package/README.md

@@ -11,6 +11,7 @@
 # 🤖 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)
 [![PyPI - Version](https://img.shields.io/pypi/v/agent-runtimes)](https://pypi.org/project/agent-runtimes)
 
 **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.
@@ -40,7 +41,7 @@ Agent Runtimes solves the complexity of deploying AI agents by providing:
 - **MCP-UI**: Interactive UI resources protocol with React/Web Components
 - **A2A**: Agent-to-agent communication
 
-### Multi-Agent Support  
+### Multi-Agent Support
 - **Pydantic AI**: Type-safe agents (fully implemented)
 - **LangChain**: Complex workflows (adapter ready)
 - **Jupyter AI**: Notebook integration (adapter ready)

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

@@ -1,15 +1,13 @@
 import React from 'react';
-import type { Agent } from '../stores/examplesStore';
-import type { Transport, Extension } from '../../components/chat';
-import type { OAuthProvider, Identity } from '../../identity';
+import type { Agent } from '../examples/stores/examplesStore';
+import type { Transport, Extension } from './chat';
+import type { McpServerSelection } from './McpServerManager';
+import type { OAuthProvider, Identity } from '../identity';
+import type { MCPServerTool as MCPServerToolType } from '../types';
 /**
- * MCP Server Tool type
+ * MCP Server Tool type (re-exported from types.ts)
  */
-export interface MCPServerTool {
-    name: string;
-    description?: string;
-    enabled: boolean;
-}
+export type MCPServerTool = MCPServerToolType;
 export interface SkillOption {
     id: string;
     name: string;
@@ -27,7 +25,12 @@ export interface MCPServerConfig {
     command?: string;
     args?: string[];
     isAvailable?: boolean;
+    isRunning?: boolean;
+    /** True if this server is from mcp.json config (vs catalog) */
+    isConfig?: boolean;
     transport?: string;
+    /** Required environment variables for this server */
+    requiredEnvVars?: string[];
 }
 type AgentLibrary = 'pydantic-ai' | 'langchain' | 'jupyter-ai';
 export type { AgentLibrary };
@@ -59,7 +62,7 @@ export interface AIModelConfig {
     requiredEnvVars?: string[];
     isAvailable?: boolean;
 }
-interface AgentConfigurationProps {
+export interface AgentConfigurationProps {
     agentLibrary: AgentLibrary;
     transport: Transport;
     extensions: Extension[];
@@ -74,9 +77,11 @@ interface AgentConfigurationProps {
     enableCodemode?: boolean;
     allowDirectToolCalls?: boolean;
     enableToolReranker?: boolean;
+    useJupyterSandbox?: boolean;
     availableSkills?: SkillOption[];
     selectedSkills?: string[];
-    selectedMcpServers?: string[];
+    /** Selected MCP servers */
+    selectedMcpServers?: McpServerSelection[];
     identityProviders?: {
         [K in OAuthProvider]?: {
             clientId: string;
@@ -97,8 +102,18 @@ interface AgentConfigurationProps {
     onEnableCodemodeChange?: (enabled: boolean) => void;
     onAllowDirectToolCallsChange?: (enabled: boolean) => void;
     onEnableToolRerankerChange?: (enabled: boolean) => void;
+    onUseJupyterSandboxChange?: (enabled: boolean) => void;
     onSelectedSkillsChange?: (skills: string[]) => void;
-    onSelectedMcpServersChange?: (servers: string[]) => void;
+    /** Callback when MCP server selection changes */
+    onSelectedMcpServersChange?: (servers: McpServerSelection[]) => void;
+    /** Rich editor mode */
+    richEditor?: boolean;
+    /** Callback when rich editor changes */
+    onRichEditorChange?: (enabled: boolean) => void;
+    /** Durable mode */
+    durable?: boolean;
+    /** Callback when durable changes */
+    onDurableChange?: (enabled: boolean) => void;
 }
 /**
  * Agent Configuration Component

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

@@ -6,10 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useCallback } from 'react';
 import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash, Label, IconButton, } from '@primer/react';
 import { ToolsIcon, KeyIcon, SyncIcon, PlusIcon, XIcon, LinkExternalIcon, } from '@primer/octicons-react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { IdentityConnect, useIdentity } from '../../identity';
-import { IdentityCard } from '../../components/chat';
+import { IdentityConnect, useIdentity } from '../identity';
+import { IdentityCard } from './chat';
 /**
  * Token-based identity providers that can be connected via API key
  */
@@ -199,8 +199,8 @@ const EXTENSIONS = [
  *
  * Form for configuring agent connection settings.
  */
-export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, model, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, availableSkills = [], selectedSkills = [], selectedMcpServers = [], identityProviders, onIdentityConnect, onIdentityDisconnect, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onModelChange, onAgentSelect, onConnect, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onSelectedSkillsChange, onSelectedMcpServersChange, }) => {
-    // Fetch MCP servers configuration from the backend
+export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, model, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, useJupyterSandbox = false, availableSkills = [], selectedSkills = [], selectedMcpServers = [], identityProviders, onIdentityConnect, onIdentityDisconnect, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onModelChange, onAgentSelect, onConnect, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onUseJupyterSandboxChange, onSelectedSkillsChange, onSelectedMcpServersChange, }) => {
+    // Fetch general configuration from the backend (models, etc.)
     const configQuery = useQuery({
         queryKey: ['agent-config', baseUrl],
         queryFn: async () => {
@@ -214,6 +214,20 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
         staleTime: 1000 * 60 * 5, // 5 minutes
         retry: 1,
     });
+    // Fetch MCP Config servers from mcp.json (user-defined servers)
+    const mcpServersQuery = useQuery({
+        queryKey: ['mcp-config', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/mcp/servers/config`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch MCP config servers');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl,
+        staleTime: 1000 * 60 * 1, // 1 minute (refresh more often for running status)
+        retry: 1,
+    });
     // Fetch skills from the backend (only when codemode is enabled)
     const skillsQuery = useQuery({
         queryKey: ['agent-skills', baseUrl],
@@ -228,22 +242,102 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
         staleTime: 1000 * 60 * 5, // 5 minutes
         retry: 1,
     });
-    const mcpServers = configQuery.data?.mcpServers || [];
+    // Fetch MCP Catalog servers (predefined servers that can be enabled on-demand)
+    const catalogServersQuery = useQuery({
+        queryKey: ['mcp-catalog', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/mcp/servers/catalog`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch MCP catalog servers');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        retry: 1,
+    });
+    // Query client for invalidating queries
+    const queryClient = useQueryClient();
+    // Mutation to enable a catalog server
+    const enableCatalogServerMutation = useMutation({
+        mutationFn: async (serverName) => {
+            const response = await fetch(`${baseUrl}/api/v1/mcp/servers/catalog/${serverName}/enable`, { method: 'POST' });
+            if (!response.ok) {
+                const error = await response
+                    .json()
+                    .catch(() => ({ detail: 'Unknown error' }));
+                throw new Error(error.detail || 'Failed to enable server');
+            }
+            return response.json();
+        },
+        onSuccess: () => {
+            // Refresh both config and catalog queries to get updated running status
+            queryClient.invalidateQueries({ queryKey: ['mcp-config', baseUrl] });
+            queryClient.invalidateQueries({ queryKey: ['mcp-catalog', baseUrl] });
+        },
+    });
+    // Use MCP servers from dedicated query, fallback to configQuery for backwards compatibility
+    const configServers = mcpServersQuery.data || configQuery.data?.mcpServers || [];
+    const catalogServers = catalogServersQuery.data || [];
     const models = configQuery.data?.models || [];
     // Use fetched skills when codemode is enabled, otherwise use passed availableSkills (which may be empty)
     const fetchedSkills = skillsQuery.data?.skills || [];
     const displaySkills = enableCodemode ? fetchedSkills : availableSkills;
-    const previewServers = selectedMcpServers.length
-        ? mcpServers.filter(server => selectedMcpServers.includes(server.id))
-        : [];
     const skillsEnabled = selectedSkills.length > 0;
-    // Handle MCP server checkbox change
-    const handleMcpServerChange = (serverId, checked) => {
+    const selectedConfigServers = selectedMcpServers
+        .filter(s => s.origin === 'config')
+        .map(s => s.id);
+    const selectedCatalogServers = selectedMcpServers
+        .filter(s => s.origin === 'catalog')
+        .map(s => s.id);
+    // Preview servers combines both config and catalog selections
+    const previewConfigServers = selectedConfigServers.length
+        ? configServers.filter(server => selectedConfigServers.includes(server.id))
+        : [];
+    const previewCatalogServers = selectedCatalogServers.length
+        ? catalogServers.filter(server => selectedCatalogServers.includes(server.id))
+        : [];
+    // Handle MCP Config server checkbox change
+    const handleConfigServerChange = (serverId, checked) => {
+        if (!onSelectedMcpServersChange)
+            return;
         if (checked) {
-            onSelectedMcpServersChange?.([...selectedMcpServers, serverId]);
+            if (!selectedMcpServers.some(s => s.id === serverId && s.origin === 'config')) {
+                onSelectedMcpServersChange([
+                    ...selectedMcpServers,
+                    { id: serverId, origin: 'config' },
+                ]);
+            }
         }
         else {
-            onSelectedMcpServersChange?.(selectedMcpServers.filter(id => id !== serverId));
+            onSelectedMcpServersChange(selectedMcpServers.filter(s => !(s.id === serverId && s.origin === 'config')));
+        }
+    };
+    // Handle MCP Catalog server checkbox change
+    // If selected and not running, enable (start) the server first
+    const handleCatalogServerChange = async (serverId, checked, isRunning) => {
+        if (!onSelectedMcpServersChange)
+            return;
+        if (checked) {
+            // If not running, start the server first
+            if (!isRunning) {
+                try {
+                    await enableCatalogServerMutation.mutateAsync(serverId);
+                }
+                catch (error) {
+                    console.error('Failed to enable catalog server:', error);
+                    return; // Don't add to selection if enable failed
+                }
+            }
+            if (!selectedMcpServers.some(s => s.id === serverId && s.origin === 'catalog')) {
+                onSelectedMcpServersChange([
+                    ...selectedMcpServers,
+                    { id: serverId, origin: 'catalog' },
+                ]);
+            }
+        }
+        else {
+            onSelectedMcpServersChange(selectedMcpServers.filter(s => !(s.id === serverId && s.origin === 'catalog')));
         }
     };
     const handleSkillChange = (skillId, checked) => {
@@ -313,7 +407,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                     borderColor: 'border.default',
                     borderRadius: 2,
                     backgroundColor: 'canvas.default',
-                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: "Agent Capabilities" }), _jsx(Box, { sx: { display: 'flex', gap: 4 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: selectedAgentId !== 'new-agent', onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] })] }))] }), _jsxs(Box, { sx: {
+                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: "Agent Capabilities" }), _jsx(Box, { sx: { display: 'flex', gap: 4 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: selectedAgentId !== 'new-agent', onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: selectedAgentId !== 'new-agent', onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter kernel instead of local-eval" })] })] })] }))] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
@@ -346,31 +440,85 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                             alignItems: 'center',
                             gap: 2,
                             marginBottom: 2,
-                        }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Servers" }), configQuery.isLoading && _jsx(Spinner, { size: "small" }), !configQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => configQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh MCP servers", children: _jsx(SyncIcon, { size: 14 }) }))] }), configQuery.isError && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch MCP servers. Check that the server is running." }) })), mcpServers.length === 0 &&
-                        !configQuery.isLoading &&
-                        !configQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP servers configured." })), enableCodemode && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "When Codemode is enabled, selected MCP servers are used to build the Codemode tool registry (tools are exposed via Codemode meta tools like search and execute_code)." }) })), enableCodemode && (_jsxs(Box, { sx: {
+                        }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Config Servers" }), mcpServersQuery.isLoading && _jsx(Spinner, { size: "small" }), !mcpServersQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => mcpServersQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh MCP config servers", children: _jsx(SyncIcon, { size: 14 }) }))] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', marginBottom: 2 }, children: "Servers from your mcp.json configuration file. Started automatically." }), mcpServersQuery.isError && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch MCP config servers. Check that the server is running." }) })), configServers.length === 0 &&
+                        !mcpServersQuery.isLoading &&
+                        !mcpServersQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP config servers found. Add servers to ~/.datalayer/mcp.json" })), enableCodemode && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "When Codemode is enabled, selected MCP servers are used to build the Codemode tool registry (tools are exposed via Codemode meta tools like search and execute_code)." }) })), enableCodemode && (_jsxs(Box, { sx: {
                             marginBottom: 2,
                             padding: 2,
                             borderRadius: 1,
                             border: '1px solid',
                             borderColor: 'border.default',
                             backgroundColor: 'canvas.subtle',
-                        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold', display: 'block' }, children: "Codemode registry preview" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: selectedMcpServers.length > 0
+                        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold', display: 'block' }, children: "Codemode registry preview" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: selectedConfigServers.length > 0 ||
+                                    selectedCatalogServers.length > 0
                                     ? 'Using selected MCP servers'
-                                    : 'No servers selected — select servers to scope Codemode tools.' }), previewServers.length > 0 ? (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: previewServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014 ", server.tools.length, " tools"] }, server.id))) })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No servers selected." })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 2 }, children: "Exposed meta-tools: list_tool_names, search_tools, get_tool_details, list_servers, execute_code, call_tool (optional)" })] })), mcpServers.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: mcpServers.map(server => (_jsxs(Box, { sx: {
+                                    : 'No servers selected — select servers to scope Codemode tools.' }), previewConfigServers.length > 0 ||
+                                previewCatalogServers.length > 0 ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [previewConfigServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014 ", server.tools.length, " tools (config)"] }, server.id))), previewCatalogServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014 ", server.tools?.length || 0, " tools (catalog)"] }, server.id)))] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No servers selected." })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 2 }, children: "Exposed meta-tools: list_tool_names, search_tools, get_tool_details, list_servers, execute_code, call_tool (optional)" })] })), configServers.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: configServers.map(server => (_jsxs(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'flex-start',
                                 gap: 2,
                                 padding: 2,
                                 borderRadius: 1,
                                 backgroundColor: 'canvas.subtle',
-                                opacity: mcpServersDisabled || !server.isAvailable ? 0.6 : 1,
-                            }, children: [_jsx(Checkbox, { checked: selectedMcpServers.includes(server.id), disabled: mcpServersDisabled || !server.isAvailable, onChange: e => handleMcpServerChange(server.id, e.target.checked) }), _jsxs(Box, { sx: {
+                                opacity: mcpServersDisabled ? 0.6 : 1,
+                            }, children: [_jsx(Checkbox, { checked: selectedConfigServers.includes(server.id), disabled: mcpServersDisabled, onChange: e => handleConfigServerChange(server.id, e.target.checked) }), _jsxs(Box, { sx: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 1,
                                         flex: 1,
-                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), _jsx(Label, { variant: server.isAvailable ? 'success' : 'secondary', size: "small", children: server.isAvailable ? 'Available' : 'Not Available' })] }), server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] }, server.id))) }))] }), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
+                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), _jsx(Label, { variant: "success", size: "small", children: "Running" })] }), server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] }, server.id))) }))] }), catalogServers.length > 0 && (_jsxs(Box, { sx: {
+                    marginBottom: 3,
+                    padding: 3,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    backgroundColor: 'canvas.default',
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            marginBottom: 2,
+                        }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Catalog Servers" })] }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: 'fg.muted',
+                            marginBottom: 2,
+                        }, children: "Predefined servers that can be enabled on-demand. Select to start and add to your agent." }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: catalogServers.map(server => {
+                            // If required env vars are not provided, treat as available
+                            const hasRequiredEnvVars = (server.requiredEnvVars?.length || 0) > 0;
+                            const envVarsAvailable = hasRequiredEnvVars
+                                ? server.isAvailable === true
+                                : true;
+                            const isRunning = server.isRunning === true;
+                            const canSelect = envVarsAvailable || isRunning;
+                            return (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'flex-start',
+                                    gap: 2,
+                                    padding: 2,
+                                    borderRadius: 1,
+                                    backgroundColor: 'canvas.subtle',
+                                    opacity: mcpServersDisabled || !canSelect ? 0.6 : 1,
+                                }, children: [_jsx(Checkbox, { checked: selectedCatalogServers.includes(server.id), disabled: mcpServersDisabled ||
+                                            enableCatalogServerMutation.isPending ||
+                                            !canSelect, onChange: e => handleCatalogServerChange(server.id, e.target.checked, isRunning) }), _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 1,
+                                            flex: 1,
+                                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), enableCatalogServerMutation.isPending &&
+                                                        enableCatalogServerMutation.variables === server.id ? (_jsx(Label, { variant: "accent", size: "small", children: "Starting..." })) : server.isRunning ? (_jsx(Label, { variant: "success", size: "small", children: "Running" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Not Started" })), server.isConfig && (_jsx(Label, { variant: "secondary", size: "small", children: "From Config" }))] }), hasRequiredEnvVars ? (_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: server.requiredEnvVars?.map(envVar => (_jsx(Label, { variant: envVarsAvailable ? 'success' : 'danger', size: "small", children: envVar }, envVar))) })) : (_jsx(Box, { sx: { display: 'flex' }, children: _jsx(Label, { variant: "success", size: "small", children: "No env vars required" }) })), server.tools && server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] }, server.id));
+                        }) })] })), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2,
+                    marginBottom: 3,
+                    padding: 3,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    opacity: 0.6,
+                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.muted' }, children: "Coming Soon" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: false, disabled: true, onChange: () => { } }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Rich Editor" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014 Enable rich text editing with formatting options" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: false, disabled: true, onChange: () => { } }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Durable" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014 Persist agent state across sessions" })] })] }), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
                     !agentName ||
                     (transport === 'acp' ? !wsUrl : !baseUrl), sx: { width: '100%' }, children: isCreatingAgent ? (_jsxs(Box, { sx: {
                         display: 'flex',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface FooterMetricsProps {
+export interface FooterMetricsProps {
     tokens: number;
     cost: number;
 }
@@ -9,4 +9,3 @@ interface FooterMetricsProps {
  * Displays token usage and cost.
  */
 export declare const FooterMetrics: React.FC<FooterMetricsProps>;
-export {};

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

@@ -1,17 +1,13 @@
 import React from 'react';
-interface HeaderProps {
+export interface HeaderProps {
     activeSession: string;
     agentName?: string;
     agentDescription?: string;
     agentStatus?: 'running' | 'paused';
-    richEditor: boolean;
-    durable: boolean;
     showContextTree: boolean;
     isNewAgent?: boolean;
     isConfigured?: boolean;
     onSessionChange: (sessionId: string) => void;
-    onRichEditorChange: (value: boolean) => void;
-    onDurableChange: (value: boolean) => void;
     onToggleContextTree: () => void;
     onToggleStatus?: () => void;
 }
@@ -22,4 +18,3 @@ interface HeaderProps {
  * toggle switches, controls, and optional context treemap.
  */
 export declare const Header: React.FC<HeaderProps>;
-export {};

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

@@ -3,9 +3,9 @@ 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.
  */
-import { useState, useRef } from 'react';
-import { Text, Button, PageLayout, ToggleSwitch, AvatarStack, Avatar, Spinner, TextInput, FormControl, AnchoredOverlay, IconButton, } from '@primer/react';
-import { ZapIcon, ListUnorderedIcon, InfoIcon, PlayIcon, PauseIcon, } from '@primer/octicons-react';
+import { useState } from 'react';
+import { Text, Button, PageLayout, AvatarStack, Avatar, Spinner, TextInput, FormControl, IconButton, } from '@primer/react';
+import { ZapIcon, ListUnorderedIcon, PlayIcon, PauseIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import ReactECharts from 'echarts-for-react';
 import { SessionTabs } from './SessionTabs';
@@ -112,15 +112,12 @@ const OPTIMIZED_CONTEXT_DATA = {
  * Main header for the agent runtime interface with session tabs,
  * toggle switches, controls, and optional context treemap.
  */
-export const Header = ({ activeSession, agentName, agentDescription, agentStatus, richEditor, durable, showContextTree, isNewAgent = false, isConfigured = false, onSessionChange, onRichEditorChange, onDurableChange, onToggleContextTree, onToggleStatus, }) => {
+export const Header = ({ activeSession, agentName, agentDescription, agentStatus, showContextTree, isNewAgent = false, isConfigured = false, onSessionChange, onToggleContextTree, onToggleStatus, }) => {
     const [isOptimizing, setIsOptimizing] = useState(false);
     const [contextData, setContextData] = useState(MOCK_CONTEXT_DATA);
     const [totalTokens, setTotalTokens] = useState('1.52M');
     const [showDetails, setShowDetails] = useState(false);
     const [showAvatarView, setShowAvatarView] = useState(false);
-    const [openOverlay, setOpenOverlay] = useState(null);
-    const richEditorRef = useRef(null);
-    const durableRef = useRef(null);
     const handleOptimize = () => {
         setIsOptimizing(true);
         setTimeout(() => {
@@ -136,38 +133,7 @@ export const Header = ({ activeSession, agentName, agentDescription, agentStatus
                     py: 2,
                 }, children: [agentName && (_jsx(SessionTabs, { sessions: MOCK_SESSIONS, activeSession: activeSession, agentName: agentName, agentDescription: agentDescription, onSessionChange: onSessionChange, onAddSession: () => {
                             /* Add session */
-                        } })), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 3,
-                            marginLeft: 'auto',
-                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: richEditor, onClick: () => onRichEditorChange(!richEditor), "aria-labelledby": "rich-editor-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "rich-editor-label", sx: { fontSize: 0 }, children: "Rich Editor" }), _jsx(IconButton, { ref: richEditorRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Rich Editor info", onClick: () => setOpenOverlay(openOverlay === 'richEditor' ? null : 'richEditor') }), _jsx(AnchoredOverlay, { open: openOverlay === 'richEditor', onOpen: () => setOpenOverlay('richEditor'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: richEditorRef, children: _jsxs(Box, { sx: {
-                                                p: 3,
-                                                maxWidth: '300px',
-                                                bg: 'canvas.overlay',
-                                                border: '1px solid',
-                                                borderColor: 'border.default',
-                                                borderRadius: 2,
-                                                boxShadow: 'shadow.large',
-                                            }, children: [_jsx(Text, { sx: {
-                                                        fontSize: 0,
-                                                        display: 'block',
-                                                        mb: 1,
-                                                        fontWeight: 'bold',
-                                                    }, children: "Rich Editor" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable rich text editing with formatting options, markdown support, and visual enhancements for a better editing experience." })] }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: durable, onClick: () => onDurableChange(!durable), "aria-labelledby": "durable-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "durable-label", sx: { fontSize: 0 }, children: "Durable" }), _jsx(IconButton, { ref: durableRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Durable info", onClick: () => setOpenOverlay(openOverlay === 'durable' ? null : 'durable') }), _jsx(AnchoredOverlay, { open: openOverlay === 'durable', onOpen: () => setOpenOverlay('durable'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: durableRef, children: _jsxs(Box, { sx: {
-                                                p: 3,
-                                                maxWidth: '300px',
-                                                bg: 'canvas.overlay',
-                                                border: '1px solid',
-                                                borderColor: 'border.default',
-                                                borderRadius: 2,
-                                                boxShadow: 'shadow.large',
-                                            }, children: [_jsx(Text, { sx: {
-                                                        fontSize: 0,
-                                                        display: 'block',
-                                                        mb: 1,
-                                                        fontWeight: 'bold',
-                                                    }, children: "Durable" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Persist agent state and conversation history across sessions. Your work is automatically saved and restored when you return." })] }) })] })] }), agentName && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [agentStatus && onToggleStatus && (_jsx(IconButton, { "aria-label": agentStatus === 'running' ? 'Pause agent' : 'Play agent', icon: agentStatus === 'running' ? PauseIcon : PlayIcon, onClick: onToggleStatus, variant: "invisible", size: "small", sx: {
+                        } })), agentName && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [agentStatus && onToggleStatus && (_jsx(IconButton, { "aria-label": agentStatus === 'running' ? 'Pause agent' : 'Play agent', icon: agentStatus === 'running' ? PauseIcon : PlayIcon, onClick: onToggleStatus, variant: "invisible", size: "small", sx: {
                                     color: agentStatus === 'running' ? 'attention.fg' : 'success.fg',
                                 } })), _jsx(HeaderControls, { onToggleContextTree: onToggleContextTree })] })), agentName && (_jsx(Box, { onClick: () => setShowAvatarView(!showAvatarView), sx: { cursor: 'pointer' }, children: _jsxs(AvatarStack, { size: 24, disableExpand: true, children: [_jsx(Avatar, { alt: "Primer logo", src: "https://avatars.githubusercontent.com/primer" }), _jsx(Avatar, { alt: "GitHub logo", src: "https://avatars.githubusercontent.com/github" }), _jsx(Avatar, { alt: "Atom logo", src: "https://avatars.githubusercontent.com/atom" }), _jsx(Avatar, { alt: "GitHub Desktop logo", src: "https://avatars.githubusercontent.com/desktop" })] }) }))] }), agentName && showContextTree && (_jsxs(Box, { sx: {
                     mt: 2,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface HeaderControlsProps {
+export interface HeaderControlsProps {
     onToggleContextTree: () => void;
 }
 /**
@@ -8,4 +8,3 @@ interface HeaderControlsProps {
  * Contains the context toggle sparkline.
  */
 export declare const HeaderControls: React.FC<HeaderControlsProps>;
-export {};

package/lib/{examples/components → 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 '../../components/sparklines';
+import { Sparklines, SparklinesLine } from './sparklines';
 /**
  * Header Controls Component
  *

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

@@ -13,8 +13,8 @@ import 'prismjs/components/prism-swift';
 import React from 'react';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '../lexical/lexical-theme.css';
-interface LexicalEditorProps {
+import '../examples/lexical/lexical-theme.css';
+export interface LexicalEditorProps {
     content?: string;
     serviceManager?: ServiceManager.IManager;
 }
@@ -24,4 +24,3 @@ interface LexicalEditorProps {
  * Rich text editor with Simple integration.
  */
 export declare const LexicalEditor: React.FC<LexicalEditorProps>;
-export {};

package/lib/{examples/components → 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 '../lexical/editorConfig';
+import { editorConfig } from '../examples/lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '../lexical/lexical-theme.css';
+import '../examples/lexical/lexical-theme.css';
 const LEXICAL_ID = 'agent-runtime-lexical-editor';
 const INITIAL_CONTENT = undefined;
 /**

package/lib/components/MainContent.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ServiceManager } from '@jupyterlab/services';
+import { type McpServerSelection } from './McpServerManager';
+export interface MainContentProps {
+    showNotebook: boolean;
+    timeTravel: number;
+    onTimeTravelChange: (value: number) => void;
+    richEditor: boolean;
+    notebookFile?: string;
+    lexicalFile?: string;
+    isNewAgent?: boolean;
+    serviceManager?: ServiceManager.IManager;
+    /** Base URL for MCP API */
+    baseUrl?: string;
+    /** Agent ID for updating the running agent */
+    agentId?: string;
+    /** Whether codemode is enabled */
+    enableCodemode?: boolean;
+    /** Currently selected MCP servers */
+    selectedMcpServers?: McpServerSelection[];
+    /** Callback when MCP server selection changes */
+    onSelectedMcpServersChange?: (servers: McpServerSelection[]) => void;
+    /** Callback when MCP servers are added/removed (for codemode regeneration) */
+    onMcpServersChange?: () => void;
+    /** Whether the agent is configured and running */
+    isConfigured?: boolean;
+}
+/**
+ * Main Content Component
+ *
+ * Displays the main content area with Simple notebook viewer or Lexical editor and time travel.
+ * When an agent is running (isConfigured=true), also shows the MCP Server Manager for runtime management.
+ */
+export declare const MainContent: React.FC<MainContentProps>;

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

@@ -7,16 +7,18 @@ import React from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, Viewer } from '@datalayer/jupyter-react';
-import matplotlib from '../stores/notebooks/Matplotlib.ipynb.json';
-import emptyNotebook from '../stores/notebooks/Empty.ipynb.json';
 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';
 /**
  * Main Content Component
  *
  * Displays the main content area with Simple notebook viewer or Lexical editor and time travel.
+ * When an agent is running (isConfigured=true), also shows the MCP Server Manager for runtime management.
  */
-export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, richEditor, notebookFile, lexicalFile, isNewAgent, serviceManager, }) => {
+export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, richEditor, notebookFile, lexicalFile, isNewAgent, serviceManager, baseUrl, agentId, enableCodemode, selectedMcpServers, onSelectedMcpServersChange, onMcpServersChange, isConfigured, }) => {
     // Use the provided notebook or fall back to matplotlib demo
     const [notebookData, setNotebookData] = React.useState(matplotlib);
     const [lexicalContent, setLexicalContent] = React.useState(undefined);
@@ -59,10 +61,17 @@ export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, rich
             setLexicalContent(undefined);
         }
     }, [lexicalFile, isNewAgent]);
-    return (_jsx(Box, { sx: { height: '100%', overflow: 'auto', padding: 3 }, children: showNotebook ? (_jsxs(_Fragment, { children: [richEditor ? (_jsx(LexicalEditor, { serviceManager: serviceManager, content: lexicalContent })) : (_jsx(JupyterReactTheme, { children: _jsx(Viewer, { nbformat: notebookData, outputs: true }) })), !isNewAgent && (_jsx(TimeTravel, { value: timeTravel, onChange: onTimeTravelChange }))] })) : (_jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-            }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Select a file to view or create a new notebook" }) })) }));
+    return (_jsxs(Box, { sx: { height: '100%', overflow: 'auto', padding: 3 }, children: [isConfigured && baseUrl && (_jsx(Box, { sx: {
+                    mb: 4,
+                    p: 3,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                }, children: _jsx(McpServerManager, { baseUrl: baseUrl, agentId: agentId, enableCodemode: enableCodemode, selectedServers: selectedMcpServers, onSelectedServersChange: onSelectedMcpServersChange, onServersChange: onMcpServersChange, disabled: false }) })), showNotebook ? (_jsxs(_Fragment, { children: [richEditor ? (_jsx(LexicalEditor, { serviceManager: serviceManager, content: lexicalContent })) : (_jsx(JupyterReactTheme, { children: _jsx(Viewer, { nbformat: notebookData, outputs: true }) })), !isNewAgent && (_jsx(TimeTravel, { value: timeTravel, onChange: onTimeTravelChange }))] })) : (_jsx(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100%',
+                }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Select a file to view or create a new notebook" }) }))] }));
 };