@datalayer/agent-runtimes 0.0.9 → 0.0.11

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" }) }))] }));
 };

package/lib/components/McpServerManager.d.ts

@@ -0,0 +1,30 @@
+import type { McpServerSelection } from './chat/types';
+export type { McpServerSelection };
+export interface McpServerManagerProps {
+    /** Base URL for the API */
+    baseUrl: string;
+    /** Agent ID for updating the running agent's MCP servers */
+    agentId?: string;
+    /** Whether codemode is enabled - affects tool regeneration on add/remove */
+    enableCodemode?: boolean;
+    /** Currently selected MCP servers (for selection mode) */
+    selectedServers?: McpServerSelection[];
+    /** Callback when server selection changes */
+    onSelectedServersChange?: (servers: McpServerSelection[]) => void;
+    /** Callback when MCP servers are added/removed (for codemode tool regeneration) */
+    onServersChange?: () => void;
+    /** Whether the manager is disabled (e.g., for existing agents) */
+    disabled?: boolean;
+}
+/**
+ * McpServerManager - Manage MCP servers for agent spaces
+ *
+ * Features:
+ * - View MCP Catalog servers (predefined, can be enabled on-demand)
+ * - Add/Enable servers from the catalog
+ * - Remove/Disable active catalog servers
+ * - View MCP Config servers from mcp.json (read-only, auto-started)
+ * - Trigger codemode tool regeneration on changes
+ */
+export declare function McpServerManager({ baseUrl, agentId, enableCodemode, selectedServers, onSelectedServersChange, onServersChange, disabled, }: McpServerManagerProps): import("react/jsx-runtime").JSX.Element;
+export default McpServerManager;

package/lib/components/McpServerManager.js

@@ -0,0 +1,331 @@
+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 { useCallback, useMemo, useState } from 'react';
+import { Text, Button, Flash, Label, Spinner, IconButton, TextInput, } from '@primer/react';
+import { ToolsIcon, PlusIcon, TrashIcon, SyncIcon, ServerIcon, CheckIcon, SearchIcon, } from '@primer/octicons-react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+/**
+ * McpServerManager - Manage MCP servers for agent spaces
+ *
+ * Features:
+ * - View MCP Catalog servers (predefined, can be enabled on-demand)
+ * - Add/Enable servers from the catalog
+ * - Remove/Disable active catalog servers
+ * - View MCP Config servers from mcp.json (read-only, auto-started)
+ * - Trigger codemode tool regeneration on changes
+ */
+export function McpServerManager({ baseUrl, agentId, enableCodemode = false, selectedServers = [], onSelectedServersChange, onServersChange, disabled = false, }) {
+    const queryClient = useQueryClient();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [error, setError] = useState(null);
+    // Fetch all available servers (catalog + mcp.json running servers)
+    const catalogQuery = useQuery({
+        queryKey: ['mcp-available', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/mcp/servers/available`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch available MCP servers');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        retry: 1,
+    });
+    // Enable server mutation
+    const enableMutation = 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: () => {
+            setError(null);
+            // Invalidate queries to refresh the list
+            queryClient.invalidateQueries({ queryKey: ['mcp-servers', baseUrl] });
+            queryClient.invalidateQueries({ queryKey: ['mcp-available', baseUrl] });
+            // Also invalidate the config query to refresh tools menu in Chat
+            queryClient.invalidateQueries({
+                queryKey: ['models', `${baseUrl}/api/v1/configure`],
+            });
+            // Notify parent about server changes (for codemode tool regeneration or other updates)
+            onServersChange?.();
+        },
+        onError: (error) => {
+            setError(error.message);
+        },
+    });
+    // Disable server mutation
+    const disableMutation = useMutation({
+        mutationFn: async (serverName) => {
+            const response = await fetch(`${baseUrl}/api/v1/mcp/servers/catalog/${serverName}/disable`, { method: 'DELETE' });
+            if (!response.ok) {
+                const error = await response
+                    .json()
+                    .catch(() => ({ detail: 'Unknown error' }));
+                throw new Error(error.detail || 'Failed to disable server');
+            }
+        },
+        onSuccess: () => {
+            setError(null);
+            // Invalidate queries to refresh the list
+            queryClient.invalidateQueries({ queryKey: ['mcp-servers', baseUrl] });
+            queryClient.invalidateQueries({ queryKey: ['mcp-available', baseUrl] });
+            // Also invalidate the config query to refresh tools menu in Chat
+            queryClient.invalidateQueries({
+                queryKey: ['models', `${baseUrl}/api/v1/configure`],
+            });
+            // Notify parent about server changes (for codemode tool regeneration or other updates)
+            onServersChange?.();
+        },
+        onError: (error) => {
+            setError(error.message);
+        },
+    });
+    // Update agent's MCP servers mutation
+    const updateAgentMcpServersMutation = useMutation({
+        mutationFn: async (newServers) => {
+            if (!agentId)
+                return;
+            const response = await fetch(`${baseUrl}/api/v1/agents/${agentId}/mcp-servers`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ selected_mcp_servers: newServers }),
+            });
+            if (!response.ok) {
+                const error = await response
+                    .json()
+                    .catch(() => ({ detail: 'Unknown error' }));
+                throw new Error(error.detail || 'Failed to update agent MCP servers');
+            }
+            return response.json();
+        },
+        onSuccess: () => {
+            setError(null);
+            // Also invalidate the config query to refresh tools menu in Chat
+            queryClient.invalidateQueries({
+                queryKey: ['models', `${baseUrl}/api/v1/configure`],
+            });
+            // Notify parent about server changes
+            onServersChange?.();
+        },
+        onError: (error) => {
+            setError(error.message);
+        },
+    });
+    // Separate servers into categories based on running status and config flag
+    // The /available endpoint returns all servers with isRunning and isConfig flags
+    const { assignedConfigServers, assignedCatalogServers } = useMemo(() => {
+        const all = catalogQuery.data || [];
+        const assignedConfig = [];
+        const assignedCatalog = [];
+        all.forEach(server => {
+            const isConfigSelected = selectedServers.some(s => s.id === server.id && s.origin === 'config');
+            const isCatalogSelected = selectedServers.some(s => s.id === server.id && s.origin === 'catalog');
+            if (server.isConfig) {
+                // mcp.json config servers (only shown if running)
+                if (server.isRunning && isConfigSelected) {
+                    assignedConfig.push(server);
+                }
+            }
+            else {
+                // Catalog servers - show in running section if running
+                if (server.isRunning && isCatalogSelected) {
+                    assignedCatalog.push(server);
+                }
+            }
+        });
+        return {
+            assignedConfigServers: assignedConfig,
+            assignedCatalogServers: assignedCatalog,
+        };
+    }, [catalogQuery.data, selectedServers]);
+    // Get servers that are not yet running (available to enable)
+    // This includes catalog servers that are NOT running and NOT config servers
+    const availableCatalogServers = useMemo(() => {
+        const all = catalogQuery.data || [];
+        // Filter to catalog servers (isConfig=false) that are NOT currently running
+        return all.filter(server => !server.isRunning && !server.isConfig);
+    }, [catalogQuery.data]);
+    // Filter catalog servers by search query
+    const filteredCatalogServers = useMemo(() => {
+        if (!searchQuery.trim())
+            return availableCatalogServers;
+        const query = searchQuery.toLowerCase();
+        return availableCatalogServers.filter(server => server.name.toLowerCase().includes(query) ||
+            server.id.toLowerCase().includes(query) ||
+            server.tools.some(t => t.name.toLowerCase().includes(query)));
+    }, [availableCatalogServers, searchQuery]);
+    // Handle enabling a server
+    const handleEnableServer = useCallback((serverName) => {
+        enableMutation.mutate(serverName, {
+            onSuccess: () => {
+                // After enabling, automatically add to selected servers
+                // Since we are enabling from catalog, origin is catalog
+                const selection = {
+                    id: serverName,
+                    origin: 'catalog',
+                };
+                const exists = selectedServers?.some(s => s.id === serverName && s.origin === 'catalog');
+                if (!exists) {
+                    const newServers = [...(selectedServers || []), selection];
+                    onSelectedServersChange?.(newServers);
+                    // Update the running agent's MCP servers
+                    if (agentId) {
+                        updateAgentMcpServersMutation.mutate(newServers);
+                    }
+                }
+            },
+        });
+    }, [
+        enableMutation,
+        selectedServers,
+        onSelectedServersChange,
+        agentId,
+        updateAgentMcpServersMutation,
+    ]);
+    // Handle disabling a server
+    const handleDisableServer = useCallback((serverName) => {
+        disableMutation.mutate(serverName);
+        // Also remove from selected servers so the Chat tools menu updates
+        if (selectedServers) {
+            const newServers = selectedServers.filter(s => !(s.id === serverName && s.origin === 'catalog'));
+            // Only update if changed
+            if (newServers.length !== selectedServers.length) {
+                onSelectedServersChange?.(newServers);
+                // Update the running agent's MCP servers
+                if (agentId) {
+                    updateAgentMcpServersMutation.mutate(newServers);
+                }
+            }
+        }
+    }, [
+        disableMutation,
+        selectedServers,
+        onSelectedServersChange,
+        agentId,
+        updateAgentMcpServersMutation,
+    ]);
+    // Handle removing a server from selection (without disabling it globally)
+    const handleRemoveServer = useCallback((serverName, isConfig) => {
+        if (selectedServers) {
+            const origin = isConfig ? 'config' : 'catalog';
+            const newServers = selectedServers.filter(s => !(s.id === serverName && s.origin === origin));
+            // Only update if changed
+            if (newServers.length !== selectedServers.length) {
+                onSelectedServersChange?.(newServers);
+                // Update the running agent's MCP servers
+                if (agentId) {
+                    updateAgentMcpServersMutation.mutate(newServers);
+                }
+            }
+        }
+    }, [
+        selectedServers,
+        onSelectedServersChange,
+        agentId,
+        updateAgentMcpServersMutation,
+    ]);
+    // Handle refreshing the server lists
+    const handleRefresh = useCallback(() => {
+        queryClient.invalidateQueries({ queryKey: ['mcp-servers', baseUrl] });
+        queryClient.invalidateQueries({ queryKey: ['mcp-available', baseUrl] });
+    }, [queryClient, baseUrl]);
+    // Handle server selection (for agent configuration)
+    const handleServerSelect = useCallback((server, selected) => {
+        // Determine origin
+        const origin = server.isConfig ? 'config' : 'catalog';
+        const selectionItem = { id: server.id, origin };
+        let newSelection;
+        if (selected) {
+            newSelection = [...(selectedServers || []), selectionItem];
+        }
+        else {
+            newSelection = (selectedServers || []).filter(s => !(s.id === server.id && s.origin === origin));
+        }
+        onSelectedServersChange?.(newSelection);
+    }, [selectedServers, onSelectedServersChange]);
+    const isLoading = catalogQuery.isLoading;
+    const isMutating = enableMutation.isPending || disableMutation.isPending;
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: "MCP Server Management" })] }), _jsx(IconButton, { icon: SyncIcon, "aria-label": "Refresh server lists", size: "small", onClick: handleRefresh, disabled: isLoading || isMutating })] }), error && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: error }) })), enableCodemode && (_jsx(Flash, { variant: "default", children: _jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Codemode enabled:" }), " Adding or removing MCP servers will regenerate the Codemode tool registry."] }) })), isLoading && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, py: 3 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading MCP servers..." })] })), !isLoading && assignedConfigServers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Assigned Configured Servers (", assignedConfigServers.length, ")"] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "These servers are from ~/.datalayer/mcp.json and assigned to this agent." }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: assignedConfigServers.map(server => (_jsx(ServerCard, { server: server, variant: "config", disabled: disabled, isSelected: true, onSelect: onSelectedServersChange ? handleServerSelect : undefined, onRemove: () => handleRemoveServer(server.id, true) }, server.id))) })] })), !isLoading && assignedCatalogServers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Assigned Catalog Servers (", assignedCatalogServers.length, ")"] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: assignedCatalogServers.map(server => (_jsx(ServerCard, { server: server, variant: "active", disabled: disabled || isMutating, isSelected: true, onSelect: onSelectedServersChange ? handleServerSelect : undefined, onRemove: () => handleDisableServer(server.id), isRemoving: disableMutation.isPending &&
+                                disableMutation.variables === server.id }, server.id))) })] })), !isLoading && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Available from Catalog (", availableCatalogServers.length, ")"] }), availableCatalogServers.length > 3 && (_jsx(TextInput, { leadingVisual: SearchIcon, placeholder: "Search servers...", value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { width: '100%' } })), filteredCatalogServers.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: searchQuery
+                            ? 'No servers match your search.'
+                            : 'All catalog servers are already enabled.' })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: filteredCatalogServers.map(server => (_jsx(ServerCard, { server: server, variant: "catalog", disabled: disabled || isMutating, onAdd: () => handleEnableServer(server.id), isAdding: enableMutation.isPending &&
+                                enableMutation.variables === server.id }, server.id))) }))] }))] }));
+}
+function ServerCard({ server, variant, disabled = false, isSelected = false, onSelect, onAdd, onRemove, isAdding = false, isRemoving = false, }) {
+    // Check availability based on isAvailable field from the server
+    const isAvailable = server.isAvailable !== false;
+    const missingEnvVars = !isAvailable && server.requiredEnvVars && server.requiredEnvVars.length > 0;
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 2,
+            padding: 2,
+            borderRadius: 2,
+            backgroundColor: 'canvas.subtle',
+            border: '1px solid',
+            borderColor: isSelected ? 'accent.emphasis' : 'border.default',
+            opacity: disabled || !isAvailable ? 0.6 : 1,
+            cursor: onSelect && !disabled && isAvailable ? 'pointer' : 'default',
+        }, onClick: () => {
+            if (onSelect && !disabled && isAvailable) {
+                onSelect(server, !isSelected);
+            }
+        }, children: [_jsx(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 32,
+                    height: 32,
+                    borderRadius: 2,
+                    backgroundColor: variant === 'config' ? 'attention.subtle' : 'accent.subtle',
+                    flexShrink: 0,
+                }, children: _jsx(ServerIcon, { size: 16 }) }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: server.name }), variant === 'active' && (_jsx(Label, { variant: "success", size: "small", children: "Active" })), variant === 'config' && (_jsx(Label, { variant: "attention", size: "small", children: "Config" })), !isAvailable && (_jsx(Label, { variant: "danger", size: "small", children: "Missing env vars" })), isSelected && (_jsxs(Label, { variant: "accent", size: "small", children: [_jsx(CheckIcon, { size: 12 }), " Selected"] }))] }), server.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: server.description })), missingEnvVars && (_jsxs(Box, { sx: {
+                            fontSize: 0,
+                            color: 'danger.fg',
+                            mb: 1,
+                            p: 1,
+                            bg: 'danger.subtle',
+                            borderRadius: 1,
+                        }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', display: 'block', mb: 1 }, children: "Missing environment variables:" }), server.requiredEnvVars.map(envVar => (_jsx(Text, { as: "code", sx: {
+                                    display: 'inline-block',
+                                    mr: 1,
+                                    mb: 1,
+                                    px: 1,
+                                    py: '2px',
+                                    bg: 'canvas.default',
+                                    borderRadius: 1,
+                                    fontFamily: 'mono',
+                                    fontSize: 0,
+                                }, children: envVar }, envVar)))] })), server.tools.length > 0 && (_jsxs(Text, { sx: {
+                            fontSize: 0,
+                            color: 'fg.muted',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] })), server.transport && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Transport: ", server.transport] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [variant === 'catalog' && onAdd && (_jsx(Button, { variant: "primary", size: "small", leadingVisual: isAdding ? Spinner : PlusIcon, onClick: e => {
+                            e.stopPropagation();
+                            onAdd();
+                        }, disabled: disabled || !isAvailable || isAdding, children: "Add" })), variant === 'active' && onRemove && (_jsx(Button, { variant: "danger", size: "small", leadingVisual: isRemoving ? Spinner : TrashIcon, onClick: e => {
+                            e.stopPropagation();
+                            onRemove();
+                        }, disabled: disabled || isRemoving, children: "Remove" })), variant === 'config' && onRemove && (_jsx(Button, { variant: "danger", size: "small", leadingVisual: isRemoving ? Spinner : TrashIcon, onClick: e => {
+                            e.stopPropagation();
+                            onRemove();
+                        }, disabled: disabled || isRemoving, children: "Remove" })), variant === 'config' && !onRemove && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "Auto-started from mcp.json" }))] })] }));
+}
+export default McpServerManager;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface MockFileBrowserProps {
+export interface MockFileBrowserProps {
     codemode?: boolean;
 }
 /**
@@ -9,4 +9,3 @@ interface MockFileBrowserProps {
  * In production, this would be replaced with a real Simple UI FileBrowser component.
  */
 export declare const MockFileBrowser: React.FC<MockFileBrowserProps>;
-export {};

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

@@ -1,10 +1,10 @@
 import React from 'react';
-interface Session {
+export interface Session {
     id: string;
     name: string;
     active: boolean;
 }
-interface SessionTabsProps {
+export interface SessionTabsProps {
     sessions: Session[];
     activeSession: string;
     agentName?: string;
@@ -18,4 +18,3 @@ interface SessionTabsProps {
  * Displays the current session name.
  */
 export declare const SessionTabs: React.FC<SessionTabsProps>;
-export {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface TimeTravelProps {
+export interface TimeTravelProps {
     value: number;
     onChange: (value: number) => void;
     min?: number;
@@ -12,4 +12,3 @@ interface TimeTravelProps {
  * Slider for navigating through document history.
  */
 export declare const TimeTravel: React.FC<TimeTravelProps>;
-export {};

package/lib/components/chat/components/AgentDetails.d.ts

@@ -10,6 +10,8 @@ export interface AgentDetailsProps {
     messageCount: number;
     /** Agent ID for context usage tracking */
     agentId?: string;
+    /** API base URL for fetching context data */
+    apiBase?: string;
     /** Identity provider configurations */
     identityProviders?: {
         [K in OAuthProvider]?: {
@@ -28,5 +30,5 @@ export interface AgentDetailsProps {
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export declare function AgentDetails({ name, protocol, url, messageCount, agentId, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentDetails({ name, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
 export default AgentDetails;