@datalayer/agent-runtimes 0.0.9 → 0.0.11

package/lib/examples/components/AgentConfiguration.js

@@ -1,382 +0,0 @@
-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 } from '@tanstack/react-query';
-import { Box } from '@datalayer/primer-addons';
-import { IdentityConnect, useIdentity } from '../../identity';
-import { IdentityCard } from '../../components/chat';
-/**
- * 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, availableSkills = [], selectedSkills = [], selectedMcpServers = [], identityProviders, onIdentityConnect, onIdentityDisconnect, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onModelChange, onAgentSelect, onConnect, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onSelectedSkillsChange, onSelectedMcpServersChange, }) => {
-    // Fetch MCP servers configuration from the backend
-    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 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,
-    });
-    const mcpServers = configQuery.data?.mcpServers || [];
-    const models = configQuery.data?.models || [];
-    // Use fetched skills when codemode is enabled, otherwise use passed availableSkills (which may be empty)
-    const fetchedSkills = skillsQuery.data?.skills || [];
-    const displaySkills = enableCodemode ? fetchedSkills : availableSkills;
-    const previewServers = selectedMcpServers.length
-        ? mcpServers.filter(server => selectedMcpServers.includes(server.id))
-        : [];
-    const skillsEnabled = selectedSkills.length > 0;
-    // Handle MCP server checkbox change
-    const handleMcpServerChange = (serverId, checked) => {
-        if (checked) {
-            onSelectedMcpServersChange?.([...selectedMcpServers, serverId]);
-        }
-        else {
-            onSelectedMcpServersChange?.(selectedMcpServers.filter(id => id !== serverId));
-        }
-    };
-    const handleSkillChange = (skillId, checked) => {
-        if (checked) {
-            onSelectedSkillsChange?.([...selectedSkills, skillId]);
-        }
-        else {
-            onSelectedSkillsChange?.(selectedSkills.filter(id => id !== skillId));
-        }
-    };
-    // MCP servers are disabled for existing agents (new-agent only)
-    const mcpServersDisabled = selectedAgentId !== 'new-agent';
-    // Determine which extensions are enabled based on transport
-    const isExtensionEnabled = (ext) => {
-        if (selectedAgentId !== 'new-agent')
-            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..." }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: selectedAgentId === 'new-agent'
-                            ? '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: selectedAgentId !== 'new-agent', 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: selectedAgentId !== 'new-agent', 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: selectedAgentId !== 'new-agent', 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: selectedAgentId !== 'new-agent' || 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: selectedAgentId !== 'new-agent', 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',
-                }, 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: selectedAgentId !== 'new-agent', onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect })] }), _jsxs(Box, { sx: {
-                    marginBottom: 3,
-                    padding: 3,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    backgroundColor: 'canvas.default',
-                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: "Agent Capabilities" }), _jsx(Box, { sx: { display: 'flex', gap: 4 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: selectedAgentId !== 'new-agent', onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] })] }))] }), _jsxs(Box, { sx: {
-                    marginBottom: 3,
-                    padding: 3,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    backgroundColor: 'canvas.default',
-                    opacity: enableCodemode ? 1 : 0.5,
-                }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            marginBottom: 2,
-                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "Skills" }), 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: selectedAgentId !== 'new-agent' ? 0.6 : 1,
-                            }, children: [_jsx(Checkbox, { checked: selectedSkills.includes(skill.id), disabled: selectedAgentId !== 'new-agent', 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 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Servers" }), configQuery.isLoading && _jsx(Spinner, { size: "small" }), !configQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => configQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh MCP servers", children: _jsx(SyncIcon, { size: 14 }) }))] }), configQuery.isError && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch MCP servers. Check that the server is running." }) })), mcpServers.length === 0 &&
-                        !configQuery.isLoading &&
-                        !configQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP servers configured." })), enableCodemode && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "When Codemode is enabled, selected MCP servers are used to build the Codemode tool registry (tools are exposed via Codemode meta tools like search and execute_code)." }) })), enableCodemode && (_jsxs(Box, { sx: {
-                            marginBottom: 2,
-                            padding: 2,
-                            borderRadius: 1,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
-                        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold', display: 'block' }, children: "Codemode registry preview" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: selectedMcpServers.length > 0
-                                    ? 'Using selected MCP servers'
-                                    : 'No servers selected — select servers to scope Codemode tools.' }), previewServers.length > 0 ? (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: previewServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014 ", server.tools.length, " tools"] }, server.id))) })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No servers selected." })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 2 }, children: "Exposed meta-tools: list_tool_names, search_tools, get_tool_details, list_servers, execute_code, call_tool (optional)" })] })), mcpServers.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: mcpServers.map(server => (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'flex-start',
-                                gap: 2,
-                                padding: 2,
-                                borderRadius: 1,
-                                backgroundColor: 'canvas.subtle',
-                                opacity: mcpServersDisabled || !server.isAvailable ? 0.6 : 1,
-                            }, children: [_jsx(Checkbox, { checked: selectedMcpServers.includes(server.id), disabled: mcpServersDisabled || !server.isAvailable, onChange: e => handleMcpServerChange(server.id, e.target.checked) }), _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: 1,
-                                        flex: 1,
-                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), _jsx(Label, { variant: server.isAvailable ? 'success' : 'secondary', size: "small", children: server.isAvailable ? 'Available' : 'Not Available' })] }), server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] }, server.id))) }))] }), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
-                    !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..." })] })) : selectedAgentId === 'new-agent' ? ('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/MainContent.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { ServiceManager } from '@jupyterlab/services';
-interface MainContentProps {
-    showNotebook: boolean;
-    timeTravel: number;
-    onTimeTravelChange: (value: number) => void;
-    richEditor: boolean;
-    notebookFile?: string;
-    lexicalFile?: string;
-    isNewAgent?: boolean;
-    serviceManager?: ServiceManager.IManager;
-}
-/**
- * Main Content Component
- *
- * Displays the main content area with Simple notebook viewer or Lexical editor and time travel.
- */
-export declare const MainContent: React.FC<MainContentProps>;
-export {};

package/lib/examples/components/index.d.ts

@@ -1,10 +0,0 @@
-export { MockFileBrowser } from './MockFileBrowser';
-export { MainContent } from './MainContent';
-export { SessionTabs } from './SessionTabs';
-export { Header } from './Header';
-export { HeaderControls } from './HeaderControls';
-export { FooterMetrics } from './FooterMetrics';
-export { TimeTravel } from './TimeTravel';
-export { LexicalEditor } from './LexicalEditor';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';
-export type { AgentLibrary, Transport, Extension, MCPServerConfig, MCPServerTool, } from './AgentConfiguration';

package/lib/examples/components/index.js

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-export { MockFileBrowser } from './MockFileBrowser';
-export { MainContent } from './MainContent';
-export { SessionTabs } from './SessionTabs';
-export { Header } from './Header';
-export { HeaderControls } from './HeaderControls';
-export { FooterMetrics } from './FooterMetrics';
-export { TimeTravel } from './TimeTravel';
-export { LexicalEditor } from './LexicalEditor';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';

package/lib/examples/vercel-ai-elements/VercelAiElementsShowcase.d.ts

@@ -1,12 +0,0 @@
-import './showcase.css';
-import '../../../style/base.css';
-import '../../../style/showcase-vercel-ai.css';
-/**
- * Vercel AI Elements Showcase
- *
- * A comprehensive showcase of all available Vercel AI Elements components.
- * This page displays static examples of each component to demonstrate their
- * visual appearance and basic functionality.
- */
-export declare const VercelAiElementsShowcase: React.FC;
-export default VercelAiElementsShowcase;

package/lib/examples/vercel-ai-elements/VercelAiElementsShowcase.js

@@ -1,69 +0,0 @@
-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 } from 'react';
-import { MessageShowcase } from './components/MessageShowcase';
-import { LoaderShowcase } from './components/LoaderShowcase';
-import { CodeBlockShowcase } from './components/CodeBlockShowcase';
-import { SuggestionShowcase } from './components/SuggestionShowcase';
-import { ShimmerShowcase } from './components/ShimmerShowcase';
-import { ArtifactShowcase } from './components/ArtifactShowcase';
-import { SourcesShowcase } from './components/SourcesShowcase';
-import { PromptInputShowcase } from './components/PromptInputShowcase';
-import { ConversationShowcase } from './components/ConversationShowcase';
-import { ModelSelectorShowcase } from './components/ModelSelectorShowcase';
-import { ReasoningShowcase } from './components/ReasoningShowcase';
-import { ToolShowcase } from './components/ToolShowcase';
-import './showcase.css';
-import '../../../style/base.css';
-import '../../../style/showcase-vercel-ai.css';
-/**
- * Vercel AI Elements Showcase
- *
- * A comprehensive showcase of all available Vercel AI Elements components.
- * This page displays static examples of each component to demonstrate their
- * visual appearance and basic functionality.
- */
-export const VercelAiElementsShowcase = () => {
-    const [activeTab, setActiveTab] = useState('message');
-    const components = [
-        { id: 'message', label: 'Message', component: _jsx(MessageShowcase, {}) },
-        {
-            id: 'conversation',
-            label: 'Conversation',
-            component: _jsx(ConversationShowcase, {}),
-        },
-        {
-            id: 'prompt-input',
-            label: 'Prompt Input',
-            component: _jsx(PromptInputShowcase, {}),
-        },
-        {
-            id: 'model-selector',
-            label: 'Model Selector',
-            component: _jsx(ModelSelectorShowcase, {}),
-        },
-        { id: 'artifact', label: 'Artifact', component: _jsx(ArtifactShowcase, {}) },
-        { id: 'code-block', label: 'Code Block', component: _jsx(CodeBlockShowcase, {}) },
-        {
-            id: 'suggestion',
-            label: 'Suggestions',
-            component: _jsx(SuggestionShowcase, {}),
-        },
-        { id: 'sources', label: 'Sources', component: _jsx(SourcesShowcase, {}) },
-        { id: 'reasoning', label: 'Reasoning', component: _jsx(ReasoningShowcase, {}) },
-        { id: 'tool', label: 'Tool', component: _jsx(ToolShowcase, {}) },
-        { id: 'loader', label: 'Loader', component: _jsx(LoaderShowcase, {}) },
-        { id: 'shimmer', label: 'Shimmer', component: _jsx(ShimmerShowcase, {}) },
-    ];
-    return (_jsxs("div", { className: "min-h-screen bg-background", children: [_jsx("header", { className: "border-b bg-card", children: _jsxs("div", { className: "container mx-auto py-6 px-4 md:px-6 lg:px-8", children: [_jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Vercel AI Elements Showcase" }), _jsx("p", { className: "text-muted-foreground mt-2", children: "A comprehensive collection of all available Vercel AI Elements components" })] }) }), _jsx("main", { className: "container mx-auto py-8 px-4 md:px-6 lg:px-8", children: _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "border-b border-border", children: _jsx("nav", { className: "flex gap-1 overflow-x-auto", "aria-label": "Component tabs", children: components.map(component => (_jsx("button", { onClick: () => setActiveTab(component.id), className: `
-                    px-4 py-2 text-sm font-medium whitespace-nowrap
-                    border-b-2 transition-colors
-                    ${activeTab === component.id
-                                        ? 'border-primary text-primary'
-                                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'}
-                  `, "aria-current": activeTab === component.id ? 'page' : undefined, children: component.label }, component.id))) }) }), _jsx("div", { className: "mt-6", children: components.map(component => (_jsx("div", { className: activeTab === component.id ? 'block' : 'hidden', role: "tabpanel", children: _jsxs("div", { className: "border rounded-lg bg-card", children: [_jsxs("div", { className: "border-b px-6 py-4", children: [_jsx("h2", { className: "text-2xl font-semibold text-foreground", children: component.label }), _jsxs("p", { className: "text-muted-foreground mt-1", children: ["Example implementations of the ", component.label, " component"] })] }), _jsx("div", { className: "p-6", children: _jsx("div", { className: "max-h-[calc(100vh-350px)] overflow-y-auto", children: component.component }) })] }) }, component.id))) })] }) })] }));
-};
-export default VercelAiElementsShowcase;

package/lib/examples/vercel-ai-elements/components/ArtifactShowcase.d.ts

@@ -1 +0,0 @@
-export declare const ArtifactShowcase: () => import("react/jsx-runtime").JSX.Element;

package/lib/examples/vercel-ai-elements/components/ArtifactShowcase.js

@@ -1,85 +0,0 @@
-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 { Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, } from '@/components/vercel-ai-elements/artifact';
-import { CodeBlock } from '@/components/vercel-ai-elements/code-block';
-import { CopyIcon, DownloadIcon, PlayIcon, RefreshCwIcon, ShareIcon, } from 'lucide-react';
-const pythonCode = `# Dijkstra's Algorithm implementation
-import heapq
-
-def dijkstra(graph, start):
-    distances = {node: float('inf') for node in graph}
-    distances[start] = 0
-    heap = [(0, start)]
-    visited = set()
-    
-    while heap:
-        current_distance, current_node = heapq.heappop(heap)
-        if current_node in visited:
-            continue
-        visited.add(current_node)
-        
-        for neighbor, weight in graph[current_node].items():
-            distance = current_distance + weight
-            if distance < distances[neighbor]:
-                distances[neighbor] = distance
-                heapq.heappush(heap, (distance, neighbor))
-    
-    return distances
-
-# Example graph
-graph = {
-    'A': {'B': 1, 'C': 4},
-    'B': {'A': 1, 'C': 2, 'D': 5},
-    'C': {'A': 4, 'B': 2, 'D': 1},
-    'D': {'B': 5, 'C': 1}
-}
-
-print(dijkstra(graph, 'A'))`;
-const reactCode = `import React, { useState } from 'react';
-
-function TodoApp() {
-  const [todos, setTodos] = useState([]);
-  const [input, setInput] = useState('');
-
-  const addTodo = () => {
-    if (input.trim()) {
-      setTodos([...todos, { id: Date.now(), text: input, done: false }]);
-      setInput('');
-    }
-  };
-
-  const toggleTodo = (id) => {
-    setTodos(todos.map(todo =>
-      todo.id === id ? { ...todo, done: !todo.done } : todo
-    ));
-  };
-
-  return (
-    <div>
-      <h1>Todo List</h1>
-      <input
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyPress={(e) => e.key === 'Enter' && addTodo()}
-      />
-      <button onClick={addTodo}>Add</button>
-      <ul>
-        {todos.map(todo => (
-          <li
-            key={todo.id}
-            onClick={() => toggleTodo(todo.id)}
-            style={{ textDecoration: todo.done ? 'line-through' : 'none' }}
-          >
-            {todo.text}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}`;
-export const ArtifactShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Code Artifact" }), _jsxs(Artifact, { children: [_jsxs(ArtifactHeader, { children: [_jsxs("div", { children: [_jsx(ArtifactTitle, { children: "Dijkstra's Algorithm Implementation" }), _jsx(ArtifactDescription, { children: "Updated 1 minute ago" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(ArtifactActions, { children: [_jsx(ArtifactAction, { icon: PlayIcon, label: "Run", onClick: () => console.log('Run'), tooltip: "Run code" }), _jsx(ArtifactAction, { icon: CopyIcon, label: "Copy", onClick: () => console.log('Copy'), tooltip: "Copy to clipboard" }), _jsx(ArtifactAction, { icon: RefreshCwIcon, label: "Regenerate", onClick: () => console.log('Regenerate'), tooltip: "Regenerate content" }), _jsx(ArtifactAction, { icon: DownloadIcon, label: "Download", onClick: () => console.log('Download'), tooltip: "Download file" }), _jsx(ArtifactAction, { icon: ShareIcon, label: "Share", onClick: () => console.log('Share'), tooltip: "Share artifact" })] }) })] }), _jsx(ArtifactContent, { className: "p-0", children: _jsx(CodeBlock, { className: "border-none", code: pythonCode, language: "python", showLineNumbers: true }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "React Component Artifact" }), _jsxs(Artifact, { children: [_jsxs(ArtifactHeader, { children: [_jsxs("div", { children: [_jsx(ArtifactTitle, { children: "Todo App Component" }), _jsx(ArtifactDescription, { children: "React component with hooks" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(ArtifactActions, { children: [_jsx(ArtifactAction, { icon: CopyIcon, label: "Copy", onClick: () => console.log('Copy'), tooltip: "Copy to clipboard" }), _jsx(ArtifactAction, { icon: DownloadIcon, label: "Download", onClick: () => console.log('Download'), tooltip: "Download file" })] }) })] }), _jsx(ArtifactContent, { className: "p-0", children: _jsx(CodeBlock, { className: "border-none", code: reactCode, language: "tsx", showLineNumbers: true }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Document Artifact" }), _jsxs(Artifact, { children: [_jsxs(ArtifactHeader, { children: [_jsxs("div", { children: [_jsx(ArtifactTitle, { children: "Project Documentation" }), _jsx(ArtifactDescription, { children: "Generated documentation" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(ArtifactActions, { children: [_jsx(ArtifactAction, { icon: CopyIcon, label: "Copy", onClick: () => console.log('Copy'), tooltip: "Copy to clipboard" }), _jsx(ArtifactAction, { icon: ShareIcon, label: "Share", onClick: () => console.log('Share'), tooltip: "Share artifact" })] }) })] }), _jsx(ArtifactContent, { children: _jsxs("div", { className: "prose prose-sm max-w-none", children: [_jsx("h1", { children: "Getting Started" }), _jsx("p", { children: "This guide will help you get started with the project." }), _jsx("h2", { children: "Installation" }), _jsx("p", { children: "Install the dependencies using npm:" }), _jsx("pre", { children: _jsx("code", { children: "npm install" }) }), _jsx("h2", { children: "Usage" }), _jsx("p", { children: "Run the development server:" }), _jsx("pre", { children: _jsx("code", { children: "npm run dev" }) })] }) })] })] })] }));
-};

package/lib/examples/vercel-ai-elements/components/CodeBlockShowcase.d.ts

@@ -1 +0,0 @@
-export declare const CodeBlockShowcase: () => import("react/jsx-runtime").JSX.Element;