@datalayer/agent-runtimes 0.0.8 → 0.0.10

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;