@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/config/AgentConfiguration.js

@@ -114,36 +114,14 @@ function IdentityConnectWithStatus({ identityProviders = {}, disabled = false, o
     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'
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, children: [connectedIdentities.length > 0 && (_jsx(Box, { 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: () => {
+                        : 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, { display: "flex", flexDirection: "column", gap: 2, children: unconnectedTokenProviders.map(tp => (_jsxs(Box, { 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 => {
+                            }, 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, { 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, { padding: 3, backgroundColor: "canvas.default", children: [_jsxs(Box, { 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, { 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);
                                                 }
@@ -591,25 +569,12 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
             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: {
+    return (_jsxs(Box, { 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(Box, { sx: { display: 'flex', gap: 2, mb: 2 }, children: [_jsxs(Label, { variant: launchTarget === 'cloud' ? 'accent' : 'secondary', children: ["Target: ", launchTarget === 'cloud' ? 'Cloud' : 'Local'] }), _jsxs(Label, { variant: launchStatus === 'error' ? 'danger' : 'attention', children: ["Launch: ", launchStatus] })] }), launchBaseUrl ? (_jsxs(Box, { sx: {
-                            mb: 2,
-                            p: 2,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            bg: 'canvas.default',
-                        }, children: [_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: "Launch URL" }), _jsx(Text, { sx: {
+                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Box, { display: "flex", gap: 2, mb: 2, children: [_jsxs(Label, { variant: launchTarget === 'cloud' ? 'accent' : 'secondary', children: ["Target: ", launchTarget === 'cloud' ? 'Cloud' : 'Local'] }), _jsxs(Label, { variant: launchStatus === 'error' ? 'danger' : 'attention', children: ["Launch: ", launchStatus] })] }), launchBaseUrl ? (_jsxs(Box, { mb: 2, p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", children: [_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: "Launch URL" }), _jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 1,
                                     fontFamily: 'mono',
@@ -627,197 +592,47 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                 ? selectedSpec || selectedCloudSpec
                                     ? `Creating from spec: ${(selectedSpec || selectedCloudSpec)?.name} — capabilities are locked`
                                     : 'Configure a new custom agent'
-                                : 'Selected agent - form fields below are disabled', cloudLibraryError ? ` Cloud fetch error: ${cloudLibraryError}` : ''] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Box, { as: "textarea", value: description, onChange: e => onDescriptionChange(e.target.value), placeholder: "Short agent description", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 3, sx: {
-                            width: '100%',
-                            maxWidth: '100%',
-                            minHeight: '88px',
-                            resize: 'vertical',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            p: 2,
-                            fontSize: 1,
-                            whiteSpace: 'pre-wrap',
-                            overflowWrap: 'anywhere',
-                            bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default',
-                            color: isFormReadOnly ? 'fg.muted' : 'fg.default',
-                        } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Goal" }), _jsx(Box, { as: "textarea", value: goal, onChange: e => onGoalChange(e.target.value), placeholder: "User-facing objective", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 3, sx: {
-                            width: '100%',
-                            maxWidth: '100%',
-                            minHeight: '88px',
-                            resize: 'vertical',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            p: 2,
-                            fontSize: 1,
-                            whiteSpace: 'pre-wrap',
-                            overflowWrap: 'anywhere',
-                            bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default',
-                            color: isFormReadOnly ? 'fg.muted' : 'fg.default',
-                        } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
+                                : 'Selected agent - form fields below are disabled', cloudLibraryError ? ` Cloud fetch error: ${cloudLibraryError}` : ''] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Box, { as: "textarea", value: description, onChange: e => onDescriptionChange(e.target.value), placeholder: "Short agent description", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 3, width: "100%", maxWidth: "100%", minHeight: "88px", resize: "vertical", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, fontSize: 1, whiteSpace: "pre-wrap", overflowWrap: "anywhere", bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default', color: isFormReadOnly ? 'fg.muted' : 'fg.default' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Goal" }), _jsx(Box, { as: "textarea", value: goal, onChange: e => onGoalChange(e.target.value), placeholder: "User-facing objective", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 3, width: "100%", maxWidth: "100%", minHeight: "88px", resize: "vertical", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, fontSize: 1, whiteSpace: "pre-wrap", overflowWrap: "anywhere", bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default', color: isFormReadOnly ? 'fg.muted' : 'fg.default' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, 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), 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 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), 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 }, disabled: isFormReadOnly || models.length === 0, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), 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 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), 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: isFormReadOnly || !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt" }), _jsx(Box, { as: "textarea", value: systemPrompt, onChange: e => onSystemPromptChange(e.target.value), placeholder: "You are a helpful AI assistant.", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 5, sx: {
-                            width: '100%',
-                            maxWidth: '100%',
-                            minHeight: '120px',
-                            resize: 'vertical',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            p: 2,
-                            fontFamily: 'mono',
-                            fontSize: 1,
-                            whiteSpace: 'pre-wrap',
-                            overflowWrap: 'anywhere',
-                            bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default',
-                            color: isFormReadOnly ? 'fg.muted' : 'fg.default',
-                            userSelect: isFormReadOnly ? 'none' : 'text',
-                            cursor: isFormReadOnly ? 'not-allowed' : 'text',
-                        } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt Codemode Addons" }), _jsx(Box, { as: "textarea", value: systemPromptCodemodeAddons, onChange: e => onSystemPromptCodemodeAddonsChange(e.target.value), placeholder: "Additional codemode instructions", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 4, sx: {
-                            width: '100%',
-                            maxWidth: '100%',
-                            minHeight: '110px',
-                            resize: 'vertical',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            p: 2,
-                            fontFamily: 'mono',
-                            fontSize: 1,
-                            whiteSpace: 'pre-wrap',
-                            overflowWrap: 'anywhere',
-                            bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default',
-                            color: isFormReadOnly ? 'fg.muted' : 'fg.default',
-                            userSelect: isFormReadOnly ? 'none' : 'text',
-                            cursor: isFormReadOnly ? 'not-allowed' : 'text',
-                        } })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Tools (comma-separated)" }), _jsx(TextInput, { value: toolsInputValue, onChange: e => onToolsChange(e.target.value
+                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(Box, { display: "flex", gap: 3, marginBottom: 3, children: [_jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), 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 }, disabled: isFormReadOnly || models.length === 0, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), 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 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), 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, { display: "flex", flexDirection: "column", gap: 2, children: EXTENSIONS.map(ext => (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: isFormReadOnly || !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt" }), _jsx(Box, { as: "textarea", value: systemPrompt, onChange: e => onSystemPromptChange(e.target.value), placeholder: "You are a helpful AI assistant.", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 5, width: "100%", maxWidth: "100%", minHeight: "120px", resize: "vertical", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, fontFamily: "mono", fontSize: 1, whiteSpace: "pre-wrap", overflowWrap: "anywhere", bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default', color: isFormReadOnly ? 'fg.muted' : 'fg.default', userSelect: isFormReadOnly ? 'none' : 'text', cursor: isFormReadOnly ? 'not-allowed' : 'text' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt Codemode Addons" }), _jsx(Box, { as: "textarea", value: systemPromptCodemodeAddons, onChange: e => onSystemPromptCodemodeAddonsChange(e.target.value), placeholder: "Additional codemode instructions", disabled: isFormReadOnly, readOnly: isFormReadOnly, rows: 4, width: "100%", maxWidth: "100%", minHeight: "110px", resize: "vertical", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, fontFamily: "mono", fontSize: 1, whiteSpace: "pre-wrap", overflowWrap: "anywhere", bg: isFormReadOnly ? 'canvas.subtle' : 'canvas.default', color: isFormReadOnly ? 'fg.muted' : 'fg.default', userSelect: isFormReadOnly ? 'none' : 'text', cursor: isFormReadOnly ? 'not-allowed' : 'text' })] }), _jsxs(Box, { display: "flex", gap: 3, marginBottom: 3, children: [_jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Tools (comma-separated)" }), _jsx(TextInput, { value: toolsInputValue, onChange: e => onToolsChange(e.target.value
                                     .split(',')
                                     .map(tool => tool.trim())
-                                    .filter(Boolean)), placeholder: toolsInputPlaceholder, sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Sandbox Variant" }), _jsxs(Select, { value: sandboxVariant, onChange: e => onSandboxVariantChange(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "", children: "Default" }), _jsx(Select.Option, { value: "eval", children: "eval" }), _jsx(Select.Option, { value: "jupyter", children: "jupyter" })] })] })] }), _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: {
+                                    .filter(Boolean)), placeholder: toolsInputPlaceholder, sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Sandbox Variant" }), _jsxs(Select, { value: sandboxVariant, onChange: e => onSandboxVariantChange(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "", children: "Default" }), _jsx(Select.Option, { value: "eval", children: "eval" }), _jsx(Select.Option, { value: "jupyter", children: "jupyter" })] })] })] }), _jsxs(Box, { marginBottom: 3, padding: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, backgroundColor: "canvas.default", opacity: isSpecMode ? 0.6 : 1, children: [_jsxs(Box, { 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, { 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: "Codemode composes tools with Python for multi-step execution." }) })), skillsEnabled && !enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills will run with a standalone code sandbox for script execution. Enable Codemode to compose skills with other tools." }) })), 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 Sandbox instead of eval Sandbox" })] })] })] }))] }), _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: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Skills", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { display: "flex", gap: 4, opacity: isSpecMode ? 0.6 : 1, children: _jsxs(Box, { 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: "Codemode composes tools with Python for multi-step execution." }) })), skillsEnabled && !enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills will run with a standalone code sandbox for script execution. Enable Codemode to compose skills with other tools." }) })), enableCodemode && (_jsxs(Box, { mt: 3, display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { 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, { 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, { 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 Sandbox instead of eval Sandbox" })] })] })] }))] }), _jsxs(Box, { marginBottom: 3, padding: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, backgroundColor: "canvas.default", opacity: isSpecMode ? 0.6 : 1, children: [_jsxs(Box, { 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" }), !skillsQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => skillsQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh skills", children: _jsx(SyncIcon, { size: 14 }) }))] }), skillsQuery.isError && !usingSpecSkills && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch runtime skills. Using built-in skill specs catalog." }) })), usingSpecSkills && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills are sourced from the selected agent spec." }) })), usingCatalogFallback && !skillsQuery.isLoading && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills are sourced from the local skill specs catalog." }) })), 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.requiredEnvVars &&
-                                            skill.requiredEnvVars.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: skill.requiredEnvVars.map(envVar => (_jsx(Label, { size: "small", variant: skill.isAvailable ? 'success' : 'danger', children: envVar }, `${skill.id}-${envVar}`))) })), (!skill.requiredEnvVars ||
-                                            skill.requiredEnvVars.length === 0) && (_jsx(Label, { size: "small", variant: "success", children: "No env vars required" }))] })] }, skill.id))) }))] }), _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(ToolsIcon, { size: 16 }), _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["MCP Config Servers", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                        }, children: "\u2014 defined by spec" }))] }), skillsQuery.isLoading && _jsx(Spinner, { size: "small" }), !skillsQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => skillsQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh skills", children: _jsx(SyncIcon, { size: 14 }) }))] }), skillsQuery.isError && !usingSpecSkills && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch runtime skills. Using built-in skill specs catalog." }) })), usingSpecSkills && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills are sourced from the selected agent spec." }) })), usingCatalogFallback && !skillsQuery.isLoading && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills are sourced from the local skill specs catalog." }) })), displaySkills.length === 0 && !skillsQuery.isLoading ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills available." })) : (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: displaySkills.map(skill => (_jsxs(Box, { 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, { 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.requiredEnvVars &&
+                                            skill.requiredEnvVars.length > 0 && (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 1, children: skill.requiredEnvVars.map(envVar => (_jsx(Label, { size: "small", variant: skill.isAvailable ? 'success' : 'danger', children: envVar }, `${skill.id}-${envVar}`))) })), (!skill.requiredEnvVars ||
+                                            skill.requiredEnvVars.length === 0) && (_jsx(Label, { size: "small", variant: "success", children: "No env vars required" }))] })] }, skill.id))) }))] }), _jsxs(Box, { marginBottom: 3, padding: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, backgroundColor: "canvas.default", opacity: isSpecMode ? 0.6 : 1, children: [_jsxs(Box, { 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(), disabled: mcpServersDisabled, 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" })), unresolvedSelectedMcpServers.length > 0 && (_jsx(Flash, { variant: "warning", sx: { marginTop: 2, marginBottom: 2 }, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Selected in spec but not available in this environment:", ' ', unresolvedSelectedMcpServers.join(', ')] }) })), 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 ||
+                        !mcpServersQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP config servers found. Add servers to ~/.datalayer/mcp.json" })), unresolvedSelectedMcpServers.length > 0 && (_jsx(Flash, { variant: "warning", sx: { marginTop: 2, marginBottom: 2 }, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Selected in spec but not available in this environment:", ' ', unresolvedSelectedMcpServers.join(', ')] }) })), 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, { 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 > 0
+                                previewCatalogServers.length > 0 ? (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [previewConfigServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014", server.tools.length > 0
                                                 ? ` ${server.tools.length} tools (config)`
                                                 : ' tools discovered when launched (config)'] }, server.id))), previewCatalogServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014", (server.tools?.length || 0) > 0
                                                 ? ` ${server.tools?.length || 0} tools (catalog)`
-                                                : ' tools discovered when launched (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',
-                    opacity: isSpecMode ? 0.6 : 1,
-                }, 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: {
+                                                : ' tools discovered when launched (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, { display: "flex", flexDirection: "column", gap: 2, children: configServers.map(server => (_jsxs(Box, { 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, { display: "flex", flexDirection: "column", gap: 1, flex: 1, children: [_jsxs(Box, { 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, { marginBottom: 3, padding: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, backgroundColor: "canvas.default", opacity: isSpecMode ? 0.6 : 1, children: [_jsxs(Box, { 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 => {
+                        }, children: "Predefined servers that can be enabled on-demand. Select to start and add to your agent." }), _jsx(Box, { 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
@@ -825,30 +640,12 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                 : 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 ||
+                            return (_jsxs(Box, { 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));
+                                            !canSelect, onChange: e => handleCatalogServerChange(server.id, e.target.checked, isRunning) }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, flex: 1, children: [_jsxs(Box, { 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, { display: "flex", flexWrap: "wrap", gap: 1, children: server.requiredEnvVars?.map(envVar => (_jsx(Label, { variant: envVarsAvailable ? 'success' : 'danger', size: "small", children: envVar }, envVar))) })) : (_jsx(Box, { 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 })), _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') })] }));
+                    (transport === 'acp' ? !wsUrl : !baseUrl), sx: { width: '100%' }, children: isCreatingAgent ? (_jsxs(Box, { 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/context/ContextDistribution.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * ContextDistribution component - Shows context distribution as a treemap.
  */
-import { Box, Text, Spinner, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Spinner, Button } from '@primer/react';
 import { ListUnorderedIcon } from '@primer/octicons-react';
 import ReactECharts from 'echarts-for-react';
 import { useState } from 'react';
@@ -31,22 +32,10 @@ export function ContextDistribution({ agentId, height = '250px', liveData, }) {
     const showLoading = !hasLiveData;
     const hasError = false;
     if (showLoading) {
-        return (_jsxs(Box, { sx: {
-                p: 3,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height,
-            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, fontSize: 1, color: 'fg.muted' }, children: "Loading context distribution..." })] }));
+        return (_jsxs(Box, { p: 3, display: "flex", alignItems: "center", justifyContent: "center", height: height, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, fontSize: 1, color: 'fg.muted' }, children: "Loading context distribution..." })] }));
     }
     if (hasError || !snapshotData) {
-        return (_jsx(Box, { sx: {
-                p: 3,
-                bg: 'canvas.subtle',
-                borderRadius: 2,
-                border: '1px solid',
-                borderColor: 'border.default',
-            }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context distribution" }) }));
+        return (_jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context distribution" }) }));
     }
     const { distribution, totalTokens } = snapshotData;
     const hasData = distribution.children && distribution.children.length > 0;
@@ -97,38 +86,15 @@ export function ContextDistribution({ agentId, height = '250px', liveData, }) {
             },
         ],
     };
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    mb: 2,
-                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " total)"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: showDetails ? 'Hide Details' : 'Show Details' })] }), hasData ? (_jsx(ReactECharts, { option: chartOption, style: { height }, opts: { renderer: 'svg' } })) : (_jsx(Box, { sx: {
-                    p: 4,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
-                    textAlign: 'center',
-                    height,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No context data yet. Start a conversation to see context distribution." }) })), showDetails && hasData && (_jsxs(Box, { sx: {
-                    mt: 3,
-                    p: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.default',
-                    fontFamily: 'mono',
-                    fontSize: 0,
-                }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), snapshotData.systemPromptTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["System Prompts: ", formatTokens(snapshotData.systemPromptTokens), ' ', "tokens"] }), snapshotData.systemPrompts.map((prompt, idx) => (_jsxs(Text, { sx: { display: 'block', ml: 3, mt: 1, color: 'fg.muted' }, children: ["\u2022", ' ', prompt.length > 100 ? prompt.slice(0, 100) + '...' : prompt] }, idx)))] })), snapshotData.toolTokens > 0 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Tool Definitions: ", formatTokens(snapshotData.toolTokens), " tokens (", snapshotData.tools.length, " tools)"] }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [snapshotData.tools.slice(0, 5).map((tool, idx) => (_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 ", tool.name, ": ", formatTokens(tool.totalTokens), " tokens"] }, idx))), snapshotData.tools.length > 5 && (_jsxs(Text, { sx: {
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " total)"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: showDetails ? 'Hide Details' : 'Show Details' })] }), hasData ? (_jsx(ReactECharts, { option: chartOption, style: { height }, opts: { renderer: 'svg' } })) : (_jsx(Box, { p: 4, bg: "canvas.subtle", borderRadius: 2, textAlign: "center", height: height, display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No context data yet. Start a conversation to see context distribution." }) })), showDetails && hasData && (_jsxs(Box, { mt: 3, p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", fontFamily: "mono", fontSize: 0, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block', mb: 2 }, children: "Context Breakdown:" }), snapshotData.systemPromptTokens > 0 && (_jsxs(Box, { mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["System Prompts: ", formatTokens(snapshotData.systemPromptTokens), ' ', "tokens"] }), snapshotData.systemPrompts.map((prompt, idx) => (_jsxs(Text, { sx: { display: 'block', ml: 3, mt: 1, color: 'fg.muted' }, children: ["\u2022", ' ', prompt.length > 100 ? prompt.slice(0, 100) + '...' : prompt] }, idx)))] })), snapshotData.toolTokens > 0 && (_jsxs(Box, { mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Tool Definitions: ", formatTokens(snapshotData.toolTokens), " tokens (", snapshotData.tools.length, " tools)"] }), _jsxs(Box, { ml: 3, mt: 1, children: [snapshotData.tools.slice(0, 5).map((tool, idx) => (_jsxs(Text, { sx: { display: 'block', color: 'fg.muted' }, children: ["\u2022 ", tool.name, ": ", formatTokens(tool.totalTokens), " tokens"] }, idx))), snapshotData.tools.length > 5 && (_jsxs(Text, { sx: {
                                             display: 'block',
                                             color: 'fg.muted',
                                             fontStyle: 'italic',
                                         }, children: ["...and ", snapshotData.tools.length - 5, " more tools"] }))] })] })), (snapshotData.historyUserTokens > 0 ||
                         snapshotData.historyAssistantTokens > 0 ||
-                        snapshotData.historyToolCallTokens > 0) && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["History:", ' ', formatTokens(snapshotData.historyUserTokens +
+                        snapshotData.historyToolCallTokens > 0) && (_jsxs(Box, { mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["History:", ' ', formatTokens(snapshotData.historyUserTokens +
                                         snapshotData.historyAssistantTokens +
                                         snapshotData.historyToolCallTokens +
-                                        snapshotData.historyToolReturnTokens), ' ', "tokens"] }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 User Messages:", ' ', formatTokens(snapshotData.historyUserTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Assistant Responses:", ' ', formatTokens(snapshotData.historyAssistantTokens), " tokens"] }), snapshotData.historyToolCallTokens > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Calls:", ' ', formatTokens(snapshotData.historyToolCallTokens), " tokens"] })), snapshotData.historyToolReturnTokens > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Returns:", ' ', formatTokens(snapshotData.historyToolReturnTokens), " tokens"] }))] })] })), snapshotData.currentUserTokens > 0 && (_jsx(Box, { sx: { mb: 2 }, children: _jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Current User: ", formatTokens(snapshotData.currentUserTokens), ' ', "tokens"] }) })), snapshotData.turnUsage && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Turn Usage (model-reported):" }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Input: ", formatTokens(snapshotData.turnUsage.inputTokens), ' ', "tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Output: ", formatTokens(snapshotData.turnUsage.outputTokens), ' ', "tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Requests: ", snapshotData.turnUsage.requests] }), snapshotData.turnUsage.toolCalls > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Calls: ", snapshotData.turnUsage.toolCalls, snapshotData.turnUsage.toolNames.length > 0 && (_jsxs(_Fragment, { children: [" (", snapshotData.turnUsage.toolNames.join(', '), ")"] }))] }))] })] })), snapshotData.sessionUsage && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Session Totals:" }), _jsxs(Box, { sx: { ml: 3, mt: 1 }, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Input:", ' ', formatTokens(snapshotData.sessionUsage.inputTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Output:", ' ', formatTokens(snapshotData.sessionUsage.outputTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Requests: ", snapshotData.sessionUsage.requests] }), snapshotData.sessionUsage.toolCalls > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Tool Calls: ", snapshotData.sessionUsage.toolCalls] }))] })] }))] }))] }));
+                                        snapshotData.historyToolReturnTokens), ' ', "tokens"] }), _jsxs(Box, { ml: 3, mt: 1, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 User Messages:", ' ', formatTokens(snapshotData.historyUserTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Assistant Responses:", ' ', formatTokens(snapshotData.historyAssistantTokens), " tokens"] }), snapshotData.historyToolCallTokens > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Calls:", ' ', formatTokens(snapshotData.historyToolCallTokens), " tokens"] })), snapshotData.historyToolReturnTokens > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Returns:", ' ', formatTokens(snapshotData.historyToolReturnTokens), " tokens"] }))] })] })), snapshotData.currentUserTokens > 0 && (_jsx(Box, { mb: 2, children: _jsxs(Text, { sx: { fontWeight: 'bold' }, children: ["Current User: ", formatTokens(snapshotData.currentUserTokens), ' ', "tokens"] }) })), snapshotData.turnUsage && (_jsxs(Box, { mb: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Turn Usage (model-reported):" }), _jsxs(Box, { ml: 3, mt: 1, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Input: ", formatTokens(snapshotData.turnUsage.inputTokens), ' ', "tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Output: ", formatTokens(snapshotData.turnUsage.outputTokens), ' ', "tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Requests: ", snapshotData.turnUsage.requests] }), snapshotData.turnUsage.toolCalls > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Tool Calls: ", snapshotData.turnUsage.toolCalls, snapshotData.turnUsage.toolNames.length > 0 && (_jsxs(_Fragment, { children: [" (", snapshotData.turnUsage.toolNames.join(', '), ")"] }))] }))] })] })), snapshotData.sessionUsage && (_jsxs(Box, { mb: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Session Totals:" }), _jsxs(Box, { ml: 3, mt: 1, children: [_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Input:", ' ', formatTokens(snapshotData.sessionUsage.inputTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Output:", ' ', formatTokens(snapshotData.sessionUsage.outputTokens), " tokens"] }), _jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Requests: ", snapshotData.sessionUsage.requests] }), snapshotData.sessionUsage.toolCalls > 0 && (_jsxs(Text, { sx: { display: 'block' }, children: ["\u2022 Total Tool Calls: ", snapshotData.sessionUsage.toolCalls] }))] })] }))] }))] }));
 }
 export default ContextDistribution;