@datalayer/agent-runtimes 0.0.9 → 0.0.11

package/lib/components/AgentConfiguration.js

@@ -0,0 +1,585 @@
+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 { 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, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { IdentityConnect, useIdentity } from '../identity';
+import { IdentityCard } from './chat';
+/**
+ * Helper: is the selected agent id a library spec?
+ */
+export const isSpecSelection = (id) => id.startsWith('spec:');
+/**
+ * Helper: extract the spec id from a spec selection value.
+ */
+export const getSpecId = (id) => id.replace(/^spec:/, '');
+/**
+ * Token-based identity providers that can be connected via API key
+ */
+const TOKEN_PROVIDERS = [
+    {
+        provider: 'kaggle',
+        name: 'Kaggle',
+        description: 'Access Kaggle datasets and notebooks',
+        iconUrl: 'https://www.kaggle.com/static/images/favicon.ico',
+        color: '#20beff',
+        helpUrl: 'https://www.kaggle.com/settings/account',
+        helpText: 'Get your API key from the Account page',
+        placeholder: 'Enter your Kaggle API key',
+    },
+];
+/**
+ * Combined component that shows:
+ * - Connected identities with token status (from AgentIdentity)
+ * - Connect buttons only for providers NOT yet connected (from IdentityConnect)
+ * - Token input for token-based providers (Kaggle, etc.)
+ */
+function IdentityConnectWithStatus({ identityProviders = {}, disabled = false, onConnect, onDisconnect, }) {
+    const { identities, connectWithToken, disconnect } = useIdentity();
+    const [expandedTokenProvider, setExpandedTokenProvider] = useState(null);
+    const [tokenInput, setTokenInput] = useState('');
+    const [isConnecting, setIsConnecting] = useState(false);
+    // Get list of connected provider names
+    const connectedProviders = useMemo(() => new Set(identities.map(id => id.provider)), [identities]);
+    // Get providers that have config and are already connected (OAuth providers)
+    // Plus any token-based providers that are connected (no config needed)
+    const connectedIdentities = useMemo(() => {
+        const providerKeys = Object.keys(identityProviders);
+        return identities.filter(id => providerKeys.includes(id.provider) ||
+            (id.authType === 'token' && id.isConnected));
+    }, [identities, identityProviders]);
+    // Get OAuth providers that are NOT yet connected
+    const unconnectedProviders = useMemo(() => {
+        const providerKeys = Object.keys(identityProviders);
+        const unconnected = {};
+        for (const provider of providerKeys) {
+            if (!connectedProviders.has(provider)) {
+                unconnected[provider] = identityProviders[provider];
+            }
+        }
+        return unconnected;
+    }, [identityProviders, connectedProviders]);
+    // Get token providers that are NOT yet connected
+    const unconnectedTokenProviders = useMemo(() => {
+        return TOKEN_PROVIDERS.filter(tp => !connectedProviders.has(tp.provider));
+    }, [connectedProviders]);
+    const hasUnconnected = Object.keys(unconnectedProviders).length > 0;
+    const hasUnconnectedToken = unconnectedTokenProviders.length > 0;
+    // Check if there's anything to show
+    const hasContent = connectedIdentities.length > 0 || hasUnconnected || hasUnconnectedToken;
+    // Handle token connection
+    const handleTokenConnect = useCallback(async (provider, displayName, iconUrl) => {
+        if (!tokenInput.trim())
+            return;
+        setIsConnecting(true);
+        try {
+            const identity = await connectWithToken(provider, tokenInput.trim(), {
+                displayName,
+                iconUrl,
+            });
+            onConnect?.(identity);
+            setTokenInput('');
+            setExpandedTokenProvider(null);
+        }
+        catch (err) {
+            console.error(`Failed to connect ${provider}:`, err);
+        }
+        finally {
+            setIsConnecting(false);
+        }
+    }, [tokenInput, connectWithToken, onConnect]);
+    // Handle token disconnect
+    const handleTokenDisconnect = useCallback(async (provider) => {
+        try {
+            await disconnect(provider);
+            onDisconnect?.(provider);
+        }
+        catch (err) {
+            console.error(`Failed to disconnect ${provider}:`, err);
+        }
+    }, [disconnect, onDisconnect]);
+    if (!hasContent) {
+        return null;
+    }
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [connectedIdentities.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: connectedIdentities.map(identity => (_jsx(IdentityCard, { identity: identity, providerConfig: identityProviders?.[identity.provider], showExpirationDetails: true, allowReconnect: !disabled && identity.authType !== 'token', onConnect: onConnect, onDisconnect: identity.authType === 'token'
+                        ? () => handleTokenDisconnect(identity.provider)
+                        : onDisconnect }, identity.provider))) })), hasUnconnected && (_jsx(IdentityConnect, { providers: unconnectedProviders, layout: "list", showHeader: false, size: "medium", showDescriptions: true, disabled: disabled, onConnect: onConnect, onDisconnect: onDisconnect })), hasUnconnectedToken && !disabled && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: unconnectedTokenProviders.map(tp => (_jsxs(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: expandedTokenProvider === tp.provider
+                            ? tp.color
+                            : 'border.default',
+                        borderRadius: 2,
+                        overflow: 'hidden',
+                    }, children: [_jsxs(Box, { as: "button", onClick: () => {
+                                setExpandedTokenProvider(expandedTokenProvider === tp.provider ? null : tp.provider);
+                                setTokenInput('');
+                            }, sx: {
+                                width: '100%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                padding: 2,
+                                backgroundColor: 'canvas.subtle',
+                                border: 'none',
+                                cursor: 'pointer',
+                                '&:hover': {
+                                    backgroundColor: 'canvas.inset',
+                                },
+                            }, children: [tp.iconUrl ? (_jsx("img", { src: tp.iconUrl, alt: tp.name, style: { width: 20, height: 20 } })) : (_jsx(KeyIcon, { size: 20 })), _jsxs(Box, { sx: { flex: 1, textAlign: 'left' }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', display: 'block' }, children: ["Connect ", tp.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: tp.description })] }), _jsx(PlusIcon, { size: 16 })] }), expandedTokenProvider === tp.provider && (_jsxs(Box, { sx: { padding: 3, backgroundColor: 'canvas.default' }, children: [_jsxs(Box, { sx: {
+                                        mb: 2,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 1,
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: tp.helpText }), _jsx(Button, { as: "a", href: tp.helpUrl, target: "_blank", rel: "noopener noreferrer", variant: "invisible", size: "small", leadingVisual: LinkExternalIcon, sx: { fontSize: 0 }, children: "Get API Key" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { type: "password", placeholder: tp.placeholder, value: tokenInput, onChange: e => setTokenInput(e.target.value), onKeyDown: e => {
+                                                if (e.key === 'Enter' && tokenInput.trim()) {
+                                                    handleTokenConnect(tp.provider, tp.name, tp.iconUrl);
+                                                }
+                                            }, sx: { flex: 1 }, disabled: isConnecting, autoFocus: true }), _jsx(Button, { onClick: () => handleTokenConnect(tp.provider, tp.name, tp.iconUrl), disabled: !tokenInput.trim() || isConnecting, variant: "primary", children: isConnecting ? _jsx(Spinner, { size: "small" }) : 'Connect' }), _jsx(IconButton, { icon: XIcon, "aria-label": "Cancel", onClick: () => {
+                                                setExpandedTokenProvider(null);
+                                                setTokenInput('');
+                                            }, variant: "invisible" })] })] }))] }, tp.provider))) }))] }));
+}
+const AGENT_LIBRARIES = [
+    {
+        value: 'pydantic-ai',
+        label: 'Pydantic AI',
+        description: 'Type-safe agents with Pydantic models',
+    },
+    {
+        value: 'langchain',
+        label: 'LangChain',
+        description: 'Complex chains and agent workflows',
+        disabled: true,
+    },
+    {
+        value: 'jupyter-ai',
+        label: 'Simple AI',
+        description: 'Simple notebook integration',
+        disabled: true,
+    },
+];
+const TRANSPORTS = [
+    {
+        value: 'ag-ui',
+        label: 'AG-UI',
+        description: 'Pydantic AI native UI transport',
+    },
+    {
+        value: 'acp',
+        label: 'ACP (Agent Client Protocol)',
+        description: 'Standard WebSocket-based transport',
+    },
+    {
+        value: 'vercel-ai',
+        label: 'Vercel AI',
+        description: 'HTTP streaming with Vercel AI',
+    },
+    {
+        value: 'vercel-ai-jupyter',
+        label: 'Vercel AI (Jupyter)',
+        description: 'Vercel AI via Jupyter server endpoint',
+    },
+    {
+        value: 'a2a',
+        label: 'A2A (Agent-to-Agent)',
+        description: 'Inter-agent communication',
+    },
+];
+const EXTENSIONS = [
+    {
+        value: 'mcp-ui',
+        label: 'MCP-UI',
+        description: 'MCP UI resources extension',
+    },
+    {
+        value: 'a2ui',
+        label: 'A2UI',
+        description: 'Agent-to-UI extension',
+    },
+];
+/**
+ * Agent Configuration Component
+ *
+ * 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, 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 () => {
+            const response = await fetch(`${baseUrl}/api/v1/configure`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch configuration');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl,
+        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 agent specs from library
+    const libraryQuery = useQuery({
+        queryKey: ['agent-library', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/agents/library`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch agent library');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        retry: 1,
+    });
+    const librarySpecs = libraryQuery.data || [];
+    // The currently selected library spec (if any)
+    const selectedSpec = useMemo(() => {
+        if (!isSpecSelection(selectedAgentId))
+            return null;
+        const specId = getSpecId(selectedAgentId);
+        return librarySpecs.find(s => s.id === specId) || null;
+    }, [selectedAgentId, librarySpecs]);
+    // When a spec is selected, form behaves like new-agent but with pre-filled values
+    const isNewAgentMode = selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId);
+    // True when a library spec is selected (fields locked down except Name, URL, Library, Model, Transport, Extensions)
+    const isSpecMode = isSpecSelection(selectedAgentId);
+    // Fetch skills from the backend (only when codemode is enabled)
+    const skillsQuery = useQuery({
+        queryKey: ['agent-skills', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/skills`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch skills');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl && enableCodemode,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        retry: 1,
+    });
+    // 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 skillsEnabled = selectedSkills.length > 0;
+    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) {
+            if (!selectedMcpServers.some(s => s.id === serverId && s.origin === 'config')) {
+                onSelectedMcpServersChange([
+                    ...selectedMcpServers,
+                    { id: serverId, origin: 'config' },
+                ]);
+            }
+        }
+        else {
+            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) => {
+        if (checked) {
+            onSelectedSkillsChange?.([...selectedSkills, skillId]);
+        }
+        else {
+            onSelectedSkillsChange?.(selectedSkills.filter(id => id !== skillId));
+        }
+    };
+    // MCP servers are disabled for existing agents and when a spec is selected
+    const mcpServersDisabled = !isNewAgentMode || isSpecMode;
+    // Determine which extensions are enabled based on transport
+    const isExtensionEnabled = (ext) => {
+        if (!isNewAgentMode)
+            return false;
+        if (transport === 'ag-ui')
+            return true; // Both mcp-ui and a2ui enabled
+        if (transport === 'a2a')
+            return ext === 'a2ui'; // Only a2ui enabled
+        return false; // All others disabled
+    };
+    // Handle extension checkbox change
+    const handleExtensionChange = (ext, checked) => {
+        if (checked) {
+            onExtensionsChange([...extensions, ext]);
+        }
+        else {
+            onExtensionsChange(extensions.filter(e => e !== ext));
+        }
+    };
+    return (_jsxs(Box, { sx: {
+            padding: 3,
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            backgroundColor: 'canvas.subtle',
+        }, children: [_jsx(Text, { sx: {
+                    fontSize: 2,
+                    fontWeight: 'bold',
+                    display: 'block',
+                    marginBottom: 3,
+                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), librarySpecs
+                                .filter(s => s.enabled)
+                                .map(spec => (_jsxs(Select.Option, { value: `spec:${spec.id}`, children: [spec.emoji ? `${spec.emoji} ` : '', spec.name] }, `spec:${spec.id}`))), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: isNewAgentMode
+                            ? selectedSpec
+                                ? `Creating from spec: ${selectedSpec.name} — capabilities are locked`
+                                : 'Configure a new custom agent'
+                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), disabled: !isNewAgentMode, placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
+                            ? onWsUrlChange(e.target.value)
+                            : onBaseUrlChange(e.target.value), disabled: !isNewAgentMode, placeholder: transport === 'acp'
+                            ? 'ws://localhost:8000/api/v1/acp/ws'
+                            : 'http://localhost:8000', sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: transport === 'acp'
+                            ? 'The WebSocket endpoint of your agent-runtimes server'
+                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: !isNewAgentMode, sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), disabled: !isNewAgentMode || models.length === 0, sx: { width: '100%' }, children: models.length === 0 ? (_jsx(Select.Option, { value: "", children: "Loading models..." })) : (models.map(m => (_jsxs(Select.Option, { value: m.id, disabled: !m.isAvailable, children: [m.name, !m.isAvailable && ' (API key required)'] }, m.id)))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), disabled: !isNewAgentMode, sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(Box, { sx: {
+                    marginBottom: 3,
+                    padding: 3,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    backgroundColor: 'canvas.default',
+                    opacity: isSpecMode ? 0.6 : 1,
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            marginBottom: 2,
+                        }, children: [_jsx(KeyIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "Connected Accounts" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 3 }, children: "Connect your accounts to give the agent access to external services like GitHub repositories, Google services, or Kaggle datasets." }), _jsx(IdentityConnectWithStatus, { identityProviders: identityProviders, disabled: !isNewAgentMode || isSpecMode, onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect })] }), _jsxs(Box, { sx: {
+                    marginBottom: 3,
+                    padding: 3,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    backgroundColor: 'canvas.default',
+                    opacity: isSpecMode ? 0.6 : 1,
+                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: ["Agent Capabilities", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                    fontSize: 0,
+                                    color: 'fg.muted',
+                                    fontWeight: 'normal',
+                                    ml: 2,
+                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, 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: !isNewAgentMode || isSpecMode, 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: !isNewAgentMode || isSpecMode, 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: !isNewAgentMode || isSpecMode, 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',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    backgroundColor: 'canvas.default',
+                    opacity: isSpecMode ? 0.6 : enableCodemode ? 1 : 0.5,
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            marginBottom: 2,
+                        }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Skills", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                            fontSize: 0,
+                                            color: 'fg.muted',
+                                            fontWeight: 'normal',
+                                            ml: 2,
+                                        }, children: "\u2014 defined by spec" }))] }), skillsQuery.isLoading && _jsx(Spinner, { size: "small" }), enableCodemode && !skillsQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => skillsQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh skills", children: _jsx(SyncIcon, { size: 14 }) }))] }), !enableCodemode ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable Codemode to use skills." })) : skillsQuery.isError ? (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch skills. Check that the server is running." }) })) : displaySkills.length === 0 && !skillsQuery.isLoading ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills available." })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: displaySkills.map(skill => (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                padding: 2,
+                                borderRadius: 1,
+                                backgroundColor: 'canvas.subtle',
+                                opacity: !isNewAgentMode || isSpecMode ? 0.6 : 1,
+                            }, children: [_jsx(Checkbox, { checked: selectedSkills.includes(skill.id), disabled: !isNewAgentMode || isSpecMode, onChange: e => handleSkillChange(skill.id, e.target.checked) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description }))] })] }, skill.id))) }))] }), _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 }), _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["MCP Config Servers", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                            fontSize: 0,
+                                            color: 'fg.muted',
+                                            fontWeight: 'normal',
+                                            ml: 2,
+                                        }, children: "\u2014 defined by spec" }))] }), 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: selectedConfigServers.length > 0 ||
+                                    selectedCatalogServers.length > 0
+                                    ? 'Using selected MCP servers'
+                                    : '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 ? 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: "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',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 2,
+                    }, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { children: "Creating Agent..." })] })) : isNewAgentMode ? (selectedSpec ? (`Create from "${selectedSpec.name}"`) : ('Create the Agent')) : agents.find(a => a.id === selectedAgentId)?.status === 'running' ? ('Connect to the Agent') : ('Start and Connect to the Agent') })] }));
+};
+export { AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS };

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 {};