@datalayer/agent-runtimes 0.0.7 → 0.0.8

package/lib/examples/components/AgentConfiguration.js

@@ -1,8 +1,141 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash, Label, } from '@primer/react';
-import { ToolsIcon } from '@primer/octicons-react';
+/*
+ * 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',
@@ -66,7 +199,7 @@ const EXTENSIONS = [
  *
  * Form for configuring agent connection settings.
  */
-export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, model, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableSkills = false, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, selectedMcpServers = [], onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onModelChange, onAgentSelect, onConnect, onEnableSkillsChange, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onSelectedMcpServersChange, }) => {
+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],
@@ -81,8 +214,29 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
         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) {
@@ -92,8 +246,16 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
             onSelectedMcpServersChange?.(selectedMcpServers.filter(id => id !== serverId));
         }
     };
-    // MCP servers are disabled when codemode is enabled
-    const mcpServersDisabled = enableCodemode || selectedAgentId !== 'new-agent';
+    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')
@@ -126,20 +288,53 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                     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(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: {
+                            : '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: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: "Agent Capabilities" }), _jsxs(Box, { sx: { display: 'flex', gap: 4 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableSkills, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableSkillsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Skills" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Enable reusable skill compositions" })] })] }), _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" })] })] })] }), enableSkills && 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(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(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(Box, { sx: {
+                }, 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',
@@ -151,9 +346,18 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                             alignItems: 'center',
                             gap: 2,
                             marginBottom: 2,
-                        }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Servers" }), configQuery.isLoading && _jsx(Spinner, { size: "small" })] }), configQuery.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 &&
+                        }, 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: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "MCP servers are disabled when Codemode is enabled. Codemode provides its own tool discovery and execution." }) })), mcpServers.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: mcpServers.map(server => (_jsxs(Box, { sx: {
+                        !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,
@@ -161,7 +365,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                                 borderRadius: 1,
                                 backgroundColor: 'canvas.subtle',
                                 opacity: mcpServersDisabled || !server.isAvailable ? 0.6 : 1,
-                            }, children: [_jsx(Checkbox, { checked: !enableCodemode && selectedMcpServers.includes(server.id), disabled: mcpServersDisabled || !server.isAvailable, onChange: e => handleMcpServerChange(server.id, e.target.checked) }), _jsxs(Box, { sx: {
+                            }, 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,

package/lib/examples/components/LexicalEditor.js

@@ -99,6 +99,7 @@ function SimpleKernelPluginsInner() {
  */
 export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, }) => {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
     const onRef = (_floatingAnchorElem) => {
         if (_floatingAnchorElem !== null) {
             setFloatingAnchorElem(_floatingAnchorElem);
@@ -114,5 +115,5 @@ export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, }) =>
             padding: 3,
             backgroundColor: 'canvas.default',
             minHeight: '600px',
-        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) }));
+        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) }));
 };

package/lib/examples/components/MockFileBrowser.js

@@ -96,8 +96,12 @@ export const MockFileBrowser = ({ codemode = false, }) => {
                                         mb: 2,
                                     }, children: codemode ? 'Codemode Tools' : 'MCP Tools' }), _jsx(DataTable, { "aria-label": codemode ? 'Codemode Tools table' : 'MCP Tools table', data: codemode
                                         ? [
-                                            { id: 1, tool: 'execute_code' },
-                                            { id: 2, tool: 'search_tool' },
+                                            { id: 1, tool: 'list_tool_names' },
+                                            { id: 2, tool: 'search_tools' },
+                                            { id: 3, tool: 'get_tool_details' },
+                                            { id: 4, tool: 'list_servers' },
+                                            { id: 5, tool: 'execute_code' },
+                                            { id: 6, tool: 'call_tool (optional)' },
                                         ]
                                         : [
                                             { id: 1, tool: 'search_dataset' },

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

@@ -6,6 +6,5 @@ export { HeaderControls } from './HeaderControls';
 export { FooterMetrics } from './FooterMetrics';
 export { TimeTravel } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
-export { Rating } from './Rating';
 export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';
 export type { AgentLibrary, Transport, Extension, MCPServerConfig, MCPServerTool, } from './AgentConfiguration';

package/lib/examples/components/index.js

@@ -10,5 +10,4 @@ export { HeaderControls } from './HeaderControls';
 export { FooterMetrics } from './FooterMetrics';
 export { TimeTravel } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
-export { Rating } from './Rating';
 export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';

package/lib/examples/example-selector.js

@@ -17,7 +17,6 @@ export const EXAMPLES = {
     AgUiToolsBasedGenUIExample: () => import('./AgUiToolsBasedGenUIExample'),
     AgentRuntimeCustomExample: () => import('./AgentRuntimeCustomExample'),
     AgentSpaceFormExample: () => import('./AgentSpaceFormExample'),
-    AgentSpaceHomeExample: () => import('./AgentSpaceHomeExample'),
     AgentRuntimeLexicalSidebarExample: () => import('./AgentRuntimeLexicalSidebarExample'),
     AgentRuntimeNotebookExample: () => import('./AgentRuntimeNotebookExample'),
     AgentRuntimeNotebookSidebarExample: () => import('./AgentRuntimeNotebookSidebarExample'),

package/lib/examples/index.d.ts

@@ -13,7 +13,6 @@ export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookEx
 export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
 export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
 export { default as AgentSpaceFormExample } from './AgentSpaceFormExample';
-export { default as AgentSpaceHomeExample } from './AgentSpaceHomeExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';

package/lib/examples/index.js

@@ -17,7 +17,6 @@ export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookEx
 export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
 export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
 export { default as AgentSpaceFormExample } from './AgentSpaceFormExample';
-export { default as AgentSpaceHomeExample } from './AgentSpaceHomeExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';

package/lib/examples/lexical/editorConfig.d.ts

@@ -7,7 +7,7 @@ import { HashtagNode } from '@lexical/hashtag';
 import { MarkNode } from '@lexical/mark';
 import { OverflowNode } from '@lexical/overflow';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { EquationNode, ImageNode, YouTubeNode, JupyterCellNode, JupyterInputNode, JupyterInputHighlightNode, JupyterOutputNode, InlineCompletionNode } from '@datalayer/jupyter-lexical';
+import { EquationNode, ImageNode, YouTubeNode, ExcalidrawNode, CollapsibleContainerNode, CollapsibleTitleNode, CollapsibleContentNode, JupyterCellNode, JupyterInputNode, JupyterInputHighlightNode, JupyterOutputNode, InlineCompletionNode } from '@datalayer/jupyter-lexical';
 /**
  * Lexical editor configuration
  */
@@ -71,6 +71,7 @@ export declare const editorConfig: {
         hr: string;
         mark: string;
     };
-    nodes: (typeof HeadingNode | typeof QuoteNode | typeof ListNode | typeof ListItemNode | typeof CodeNode | typeof CodeHighlightNode | typeof LinkNode | typeof TableNode | typeof TableCellNode | typeof TableRowNode | typeof HashtagNode | typeof MarkNode | typeof OverflowNode | typeof HorizontalRuleNode | typeof EquationNode | typeof ImageNode | typeof YouTubeNode | typeof JupyterCellNode | typeof JupyterInputNode | typeof JupyterInputHighlightNode | typeof JupyterOutputNode | typeof InlineCompletionNode)[];
+    editorState: string;
+    nodes: (typeof HeadingNode | typeof QuoteNode | typeof ListNode | typeof ListItemNode | typeof CodeNode | typeof CodeHighlightNode | typeof LinkNode | typeof TableNode | typeof TableCellNode | typeof TableRowNode | typeof HashtagNode | typeof MarkNode | typeof OverflowNode | typeof HorizontalRuleNode | typeof EquationNode | typeof ImageNode | typeof YouTubeNode | typeof ExcalidrawNode | typeof CollapsibleContainerNode | typeof CollapsibleTitleNode | typeof CollapsibleContentNode | typeof JupyterCellNode | typeof JupyterInputNode | typeof JupyterInputHighlightNode | typeof JupyterOutputNode | typeof InlineCompletionNode)[];
     onError(_error: Error): void;
 };

package/lib/examples/lexical/editorConfig.js

@@ -11,8 +11,9 @@ import { HashtagNode } from '@lexical/hashtag';
 import { MarkNode } from '@lexical/mark';
 import { OverflowNode } from '@lexical/overflow';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { EquationNode, ImageNode, YouTubeNode, JupyterCellNode, JupyterInputNode, JupyterInputHighlightNode, JupyterOutputNode, InlineCompletionNode, } from '@datalayer/jupyter-lexical';
+import { EquationNode, ImageNode, YouTubeNode, ExcalidrawNode, CollapsibleContainerNode, CollapsibleTitleNode, CollapsibleContentNode, JupyterCellNode, JupyterInputNode, JupyterInputHighlightNode, JupyterOutputNode, InlineCompletionNode, } from '@datalayer/jupyter-lexical';
 import { lexicalTheme } from './theme';
+import initialContent from './initial-content.json';
 /**
  * Lexical editor configuration
  */
@@ -20,6 +21,7 @@ export const editorConfig = {
     namespace: 'AgUiLexicalEditor',
     editable: true,
     theme: lexicalTheme,
+    editorState: JSON.stringify(initialContent),
     nodes: [
         // Basic rich text nodes
         HeadingNode,
@@ -43,6 +45,10 @@ export const editorConfig = {
         EquationNode,
         ImageNode,
         YouTubeNode,
+        ExcalidrawNode,
+        CollapsibleContainerNode,
+        CollapsibleTitleNode,
+        CollapsibleContentNode,
         JupyterCellNode,
         JupyterInputNode,
         JupyterInputHighlightNode,