@datalayer/agent-runtimes 1.0.5 → 1.0.6

package/lib/config/AgentConfiguration.js

@@ -8,6 +8,7 @@ import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash,
 import { ToolsIcon, KeyIcon, SyncIcon, PlusIcon, XIcon, LinkExternalIcon, } from '@primer/octicons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
+import { getSkillSpec, getSkillSpecs } from '../specs/skills';
 import { IdentityCard, IdentityConnect, useIdentity } from '../identity';
 /**
  * Helper: is the selected agent id a library spec?
@@ -17,6 +18,14 @@ export const isSpecSelection = (id) => id.startsWith('spec:');
  * Helper: extract the spec id from a spec selection value.
  */
 export const getSpecId = (id) => id.replace(/^spec:/, '');
+/**
+ * Helper: is the selected agent id a cloud library spec?
+ */
+export const isCloudSpecSelection = (id) => id.startsWith('cloud-spec:');
+/**
+ * Helper: extract the cloud spec id from a cloud selection value.
+ */
+export const getCloudSpecId = (id) => id.replace(/^cloud-spec:/, '');
 /**
  * Token-based identity providers that can be connected via API key
  */
@@ -143,6 +152,35 @@ function IdentityConnectWithStatus({ identityProviders = {}, disabled = false, o
                                                 setTokenInput('');
                                             }, variant: "invisible" })] })] }))] }, tp.provider))) }))] }));
 }
+const normalizeEnvVarRef = (ref) => ref.replace(/:\d+\.\d+\.\d+$/, '');
+const normalizeMcpServerId = (id) => id.replace(/:\d+\.\d+\.\d+$/, '');
+const normalizeToolLabel = (tool) => {
+    if (typeof tool === 'string') {
+        return tool;
+    }
+    if (typeof tool === 'object' && tool !== null) {
+        const toolObj = tool;
+        const fromName = typeof toolObj.name === 'string' && toolObj.name.trim().length > 0
+            ? toolObj.name.trim()
+            : null;
+        if (fromName) {
+            return fromName;
+        }
+        const fromId = typeof toolObj.id === 'string' && toolObj.id.trim().length > 0
+            ? toolObj.id.trim()
+            : null;
+        if (fromId) {
+            return fromId;
+        }
+        const fromTool = typeof toolObj.tool === 'string' && toolObj.tool.trim().length > 0
+            ? toolObj.tool.trim()
+            : null;
+        if (fromTool) {
+            return fromTool;
+        }
+    }
+    return null;
+};
 const AGENT_LIBRARIES = [
     {
         value: 'pydantic-ai',
@@ -206,7 +244,7 @@ const EXTENSIONS = [
  *
  * Form for configuring agent connection settings.
  */
-export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensions, wsUrl, baseUrl, agentName, description, goal, model, systemPrompt, systemPromptCodemodeAddons, tools, sandboxVariant, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, useJupyterSandbox = false, availableSkills = [], selectedSkills = [], selectedMcpServers = [], identityProviders, onIdentityConnect, onIdentityDisconnect, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onDescriptionChange, onGoalChange, onModelChange, onSystemPromptChange, onSystemPromptCodemodeAddonsChange, onToolsChange, onSandboxVariantChange, onAgentSelect, onConnect, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onUseJupyterSandboxChange, onSelectedSkillsChange, onSelectedMcpServersChange, }) => {
+export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensions, wsUrl, baseUrl, agentName, description, goal, model, systemPrompt, systemPromptCodemodeAddons, tools, sandboxVariant, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, useJupyterSandbox = false, availableSkills = [], selectedSkills = [], selectedMcpServers = [], cloudLibrarySpecs = [], cloudLibraryLoading = false, cloudLibraryError = null, launchTarget = 'local', launchStatus = 'idle', launchBaseUrl, identityProviders, onIdentityConnect, onIdentityDisconnect, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onDescriptionChange, onGoalChange, onModelChange, onSystemPromptChange, onSystemPromptCodemodeAddonsChange, onToolsChange, onSandboxVariantChange, onAgentSelect, onConnect, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onUseJupyterSandboxChange, onSelectedSkillsChange, onSelectedMcpServersChange, }) => {
     // Fetch general configuration from the backend (models, etc.)
     const configQuery = useQuery({
         queryKey: ['agent-config', baseUrl],
@@ -250,22 +288,25 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
         retry: 1,
     });
     const librarySpecs = libraryQuery.data || [];
-    // The currently selected library spec (if any)
+    // The currently selected local library spec (if any)
     const selectedSpec = useMemo(() => {
         if (!isSpecSelection(selectedAgentId))
             return null;
         const specId = getSpecId(selectedAgentId);
         return librarySpecs.find(s => s.id === specId) || null;
     }, [selectedAgentId, librarySpecs]);
-    const selectedSpecEntries = useMemo(() => {
-        if (!selectedSpec)
-            return [];
-        return Object.entries(selectedSpec).filter(([, value]) => value !== undefined);
-    }, [selectedSpec]);
+    const selectedCloudSpec = useMemo(() => {
+        if (!isCloudSpecSelection(selectedAgentId))
+            return null;
+        const specId = getCloudSpecId(selectedAgentId);
+        return cloudLibrarySpecs.find(s => s.id === specId) || null;
+    }, [selectedAgentId, cloudLibrarySpecs]);
     // When a spec is selected, form behaves like new-agent but with pre-filled values
-    const isNewAgentMode = selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId);
+    const isNewAgentMode = selectedAgentId === 'new-agent' ||
+        isSpecSelection(selectedAgentId) ||
+        isCloudSpecSelection(selectedAgentId);
     // True when a library spec is selected (fields locked down except Name, URL, Library, Model, Transport, Extensions)
-    const isSpecMode = isSpecSelection(selectedAgentId);
+    const isSpecMode = isSpecSelection(selectedAgentId) || isCloudSpecSelection(selectedAgentId);
     // Entire form is read-only for existing agents and library spec selections.
     const isFormReadOnly = !isNewAgentMode || isSpecMode;
     // Fetch skills from the backend (always available, independent of codemode)
@@ -320,16 +361,157 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
     const configServers = mcpServersQuery.data || configQuery.data?.mcpServers || [];
     const catalogServers = catalogServersQuery.data || [];
     const models = configQuery.data?.models || [];
-    // Use fetched skills when available, otherwise use passed availableSkills (which may be empty)
-    const fetchedSkills = skillsQuery.data?.skills || [];
-    const displaySkills = fetchedSkills.length > 0 ? fetchedSkills : availableSkills;
+    const activeSpec = selectedSpec || selectedCloudSpec;
+    const availableEnvVars = useMemo(() => {
+        const vars = new Set();
+        for (const model of models) {
+            if (model.isAvailable !== false) {
+                for (const envVar of model.requiredEnvVars || []) {
+                    vars.add(normalizeEnvVarRef(envVar));
+                }
+            }
+        }
+        for (const server of [...configServers, ...catalogServers]) {
+            const serverAvailable = server.isAvailable === true || server.isRunning === true;
+            if (!serverAvailable) {
+                continue;
+            }
+            for (const envVar of server.requiredEnvVars || []) {
+                vars.add(normalizeEnvVarRef(envVar));
+            }
+        }
+        return vars;
+    }, [models, configServers, catalogServers]);
+    const skillsFromSelectedSpec = useMemo(() => {
+        if (!activeSpec || !Array.isArray(activeSpec.skills)) {
+            return [];
+        }
+        return activeSpec.skills
+            .map(skillRef => {
+            if (typeof skillRef === 'string') {
+                const catalog = getSkillSpec(skillRef);
+                return {
+                    id: skillRef,
+                    name: catalog?.name || skillRef,
+                    description: catalog?.description,
+                    requiredEnvVars: catalog?.requiredEnvVars || [],
+                };
+            }
+            if (typeof skillRef === 'object' && skillRef !== null) {
+                const skillObj = skillRef;
+                const rawId = skillObj.id || skillObj.name || '';
+                if (!rawId) {
+                    return null;
+                }
+                const catalog = getSkillSpec(rawId);
+                return {
+                    id: rawId,
+                    name: skillObj.name || catalog?.name || rawId,
+                    description: skillObj.description || catalog?.description,
+                    requiredEnvVars: skillObj.requiredEnvVars || catalog?.requiredEnvVars || [],
+                };
+            }
+            return null;
+        })
+            .filter((skill) => skill !== null);
+    }, [activeSpec]);
+    const skillsFromCatalog = useMemo(() => {
+        return getSkillSpecs().map(skill => ({
+            id: skill.id,
+            name: skill.name,
+            description: skill.description,
+            requiredEnvVars: skill.requiredEnvVars || [],
+        }));
+    }, []);
+    const baseSkills = useMemo(() => {
+        if (skillsFromSelectedSpec.length > 0) {
+            return skillsFromSelectedSpec;
+        }
+        return skillsFromCatalog;
+    }, [skillsFromSelectedSpec, skillsFromCatalog]);
+    const displaySkills = useMemo(() => {
+        return baseSkills.map(skill => {
+            const required = (skill.requiredEnvVars || []).map(normalizeEnvVarRef);
+            const envVarsAvailable = required.length === 0 ||
+                required.every(envVar => availableEnvVars.has(envVar));
+            return {
+                ...skill,
+                requiredEnvVars: required,
+                isAvailable: envVarsAvailable,
+            };
+        });
+    }, [baseSkills, availableEnvVars]);
+    const usingSpecSkills = skillsFromSelectedSpec.length > 0;
+    const usingCatalogFallback = !usingSpecSkills;
     const skillsEnabled = selectedSkills.length > 0;
-    const selectedConfigServers = selectedMcpServers
-        .filter(s => s.origin === 'config')
-        .map(s => s.id);
-    const selectedCatalogServers = selectedMcpServers
-        .filter(s => s.origin === 'catalog')
-        .map(s => s.id);
+    const configServerIdSet = useMemo(() => new Set(configServers.map(server => normalizeMcpServerId(server.id))), [configServers]);
+    const catalogServerIdSet = useMemo(() => new Set(catalogServers.map(server => normalizeMcpServerId(server.id))), [catalogServers]);
+    const selectedConfigServers = useMemo(() => {
+        return selectedMcpServers
+            .filter(selection => {
+            const normalizedId = normalizeMcpServerId(selection.id);
+            if (selection.origin === 'config') {
+                return configServerIdSet.has(normalizedId);
+            }
+            if (selection.origin === 'catalog') {
+                return (!catalogServerIdSet.has(normalizedId) &&
+                    configServerIdSet.has(normalizedId));
+            }
+            return false;
+        })
+            .map(selection => normalizeMcpServerId(selection.id));
+    }, [selectedMcpServers, configServerIdSet]);
+    const selectedCatalogServers = useMemo(() => {
+        return selectedMcpServers
+            .filter(selection => {
+            const normalizedId = normalizeMcpServerId(selection.id);
+            if (selection.origin === 'catalog') {
+                return catalogServerIdSet.has(normalizedId);
+            }
+            if (selection.origin === 'config') {
+                return (!configServerIdSet.has(normalizedId) &&
+                    catalogServerIdSet.has(normalizedId));
+            }
+            return false;
+        })
+            .map(selection => normalizeMcpServerId(selection.id));
+    }, [selectedMcpServers, catalogServerIdSet]);
+    const resolvedSpecTools = useMemo(() => {
+        if (!activeSpec || !Array.isArray(activeSpec.tools)) {
+            return [];
+        }
+        return activeSpec.tools
+            .map(tool => normalizeToolLabel(tool))
+            .filter((tool) => !!tool);
+    }, [activeSpec]);
+    const toolsInputValue = isSpecMode && resolvedSpecTools.length > 0
+        ? resolvedSpecTools.join(', ')
+        : tools.join(', ');
+    const toolsInputPlaceholder = isSpecMode
+        ? 'No tools defined by selected spec'
+        : 'runtime-echo, runtime-send-mail';
+    const unresolvedSelectedMcpServers = useMemo(() => {
+        return selectedMcpServers
+            .map(selection => normalizeMcpServerId(selection.id))
+            .filter(id => !configServerIdSet.has(id) && !catalogServerIdSet.has(id))
+            .filter((id, index, arr) => arr.indexOf(id) === index);
+    }, [selectedMcpServers, configServerIdSet, catalogServerIdSet]);
+    const enabledLocalSpecs = [...librarySpecs]
+        .filter(s => s.enabled)
+        .sort((a, b) => {
+        const pkgA = a.id.includes('/') ? a.id.split('/')[0] : '';
+        const pkgB = b.id.includes('/') ? b.id.split('/')[0] : '';
+        const cmp = pkgA.localeCompare(pkgB);
+        return cmp !== 0 ? cmp : a.name.localeCompare(b.name);
+    });
+    const enabledCloudSpecs = [...cloudLibrarySpecs]
+        .filter(s => s.enabled)
+        .sort((a, b) => {
+        const pkgA = a.id.includes('/') ? a.id.split('/')[0] : '';
+        const pkgB = b.id.includes('/') ? b.id.split('/')[0] : '';
+        const cmp = pkgA.localeCompare(pkgB);
+        return cmp !== 0 ? cmp : a.name.localeCompare(b.name);
+    });
     // Preview servers combines both config and catalog selections
     const previewConfigServers = selectedConfigServers.length
         ? configServers.filter(server => selectedConfigServers.includes(server.id))
@@ -341,16 +523,19 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
     const handleConfigServerChange = (serverId, checked) => {
         if (!onSelectedMcpServersChange)
             return;
+        const normalizedServerId = normalizeMcpServerId(serverId);
         if (checked) {
-            if (!selectedMcpServers.some(s => s.id === serverId && s.origin === 'config')) {
+            if (!selectedMcpServers.some(s => normalizeMcpServerId(s.id) === normalizedServerId &&
+                s.origin === 'config')) {
                 onSelectedMcpServersChange([
-                    ...selectedMcpServers,
-                    { id: serverId, origin: 'config' },
+                    ...selectedMcpServers.filter(s => normalizeMcpServerId(s.id) !== normalizedServerId),
+                    { id: normalizedServerId, origin: 'config' },
                 ]);
             }
         }
         else {
-            onSelectedMcpServersChange(selectedMcpServers.filter(s => !(s.id === serverId && s.origin === 'config')));
+            onSelectedMcpServersChange(selectedMcpServers.filter(s => !(normalizeMcpServerId(s.id) === normalizedServerId &&
+                s.origin === 'config')));
         }
     };
     // Handle MCP Catalog server checkbox change
@@ -358,6 +543,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
     const handleCatalogServerChange = async (serverId, checked, isRunning) => {
         if (!onSelectedMcpServersChange)
             return;
+        const normalizedServerId = normalizeMcpServerId(serverId);
         if (checked) {
             // If not running, start the server first
             if (!isRunning) {
@@ -369,15 +555,17 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                     return; // Don't add to selection if enable failed
                 }
             }
-            if (!selectedMcpServers.some(s => s.id === serverId && s.origin === 'catalog')) {
+            if (!selectedMcpServers.some(s => normalizeMcpServerId(s.id) === normalizedServerId &&
+                s.origin === 'catalog')) {
                 onSelectedMcpServersChange([
-                    ...selectedMcpServers,
-                    { id: serverId, origin: 'catalog' },
+                    ...selectedMcpServers.filter(s => normalizeMcpServerId(s.id) !== normalizedServerId),
+                    { id: normalizedServerId, origin: 'catalog' },
                 ]);
             }
         }
         else {
-            onSelectedMcpServersChange(selectedMcpServers.filter(s => !(s.id === serverId && s.origin === 'catalog')));
+            onSelectedMcpServersChange(selectedMcpServers.filter(s => !(normalizeMcpServerId(s.id) === normalizedServerId &&
+                s.origin === 'catalog')));
         }
     };
     const handleSkillChange = (skillId, checked) => {
@@ -420,31 +608,103 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                     fontWeight: 'bold',
                     display: 'block',
                     marginBottom: 3,
-                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), [...librarySpecs]
-                                .filter(s => s.enabled)
-                                .sort((a, b) => {
-                                const pkgA = a.id.includes('/') ? a.id.split('/')[0] : '';
-                                const pkgB = b.id.includes('/') ? b.id.split('/')[0] : '';
-                                const cmp = pkgA.localeCompare(pkgB);
-                                return cmp !== 0 ? cmp : a.name.localeCompare(b.name);
-                            })
-                                .map(spec => {
-                                const pkg = spec.id.includes('/') ? spec.id.split('/')[0] : '';
-                                return (_jsxs(Select.Option, { value: `spec:${spec.id}`, children: [spec.emoji ? `${spec.emoji} ` : '', pkg ? `[${pkg}] ` : '', spec.name] }, `spec:${spec.id}`));
-                            }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: ["[Persona] ", agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: isNewAgentMode
-                            ? selectedSpec
-                                ? `Creating from spec: ${selectedSpec.name} — capabilities are locked`
-                                : 'Configure a new custom agent'
-                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, 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(TextInput, { value: description, onChange: e => onDescriptionChange(e.target.value), placeholder: "Short agent description", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Goal" }), _jsx(TextInput, { value: goal, onChange: e => onGoalChange(e.target.value), placeholder: "User-facing objective", sx: { width: '100%' } })] }), _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'
+                }, 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: {
+                                    display: 'block',
+                                    fontSize: 1,
+                                    fontFamily: 'mono',
+                                    wordBreak: 'break-all',
+                                }, children: launchBaseUrl })] })) : null, _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsxs("optgroup", { label: "Local Agents", children: [_jsx(Select.Option, { value: "new-agent", disabled: selectedAgentId === 'new-agent', children: "+ New Agent..." }), enabledLocalSpecs.map(spec => {
+                                        const pkg = spec.id.includes('/') ? spec.id.split('/')[0] : '';
+                                        const optionValue = `spec:${spec.id}`;
+                                        return (_jsxs(Select.Option, { value: optionValue, disabled: selectedAgentId === optionValue, children: [spec.emoji ? `${spec.emoji} ` : '', pkg ? `[${pkg}] ` : '', spec.name] }, optionValue));
+                                    }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, disabled: true, children: ["[Persona] ", agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsxs("optgroup", { label: "Cloud Agents", children: [cloudLibraryLoading && (_jsx(Select.Option, { value: "__cloud_loading", disabled: true, children: "Loading cloud agents..." })), !cloudLibraryLoading && enabledCloudSpecs.length === 0 && (_jsx(Select.Option, { value: "__cloud_empty", disabled: true, children: "No cloud agents available" })), !cloudLibraryLoading &&
+                                        enabledCloudSpecs.map(spec => {
+                                            const pkg = spec.id.includes('/') ? spec.id.split('/')[0] : '';
+                                            const optionValue = `cloud-spec:${spec.id}`;
+                                            return (_jsxs(Select.Option, { value: optionValue, disabled: selectedAgentId === optionValue, children: [spec.emoji ? `${spec.emoji} ` : '', pkg ? `[${pkg}] ` : '', spec.name] }, optionValue));
+                                        })] })] }), _jsxs(FormControl.Caption, { children: [isNewAgentMode
+                                ? 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'
                             ? 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(TextInput, { value: systemPrompt, onChange: e => onSystemPromptChange(e.target.value), placeholder: "You are a helpful AI assistant.", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt Codemode Addons" }), _jsx(TextInput, { value: systemPromptCodemodeAddons, onChange: e => onSystemPromptCodemodeAddonsChange(e.target.value), placeholder: "Additional codemode instructions", sx: { width: '100%' } })] }), _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: tools.join(', '), onChange: e => onToolsChange(e.target.value
+                            : '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
                                     .split(',')
                                     .map(tool => tool.trim())
-                                    .filter(Boolean)), placeholder: "tool_a, tool_b", 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: {
+                                    .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',
@@ -470,7 +730,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                     color: 'fg.muted',
                                     fontWeight: 'normal',
                                     ml: 2,
-                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), 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: {
+                                }, 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',
@@ -488,7 +748,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                             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 ? (_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: {
+                                        }, 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,
@@ -496,13 +756,16 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                 borderRadius: 1,
                                 backgroundColor: 'canvas.subtle',
                                 opacity: !isNewAgentMode || isSpecMode ? 0.6 : 1,
-                            }, children: [_jsx(Checkbox, { checked: selectedSkills.includes(skill.id), disabled: !isNewAgentMode || isSpecMode, onChange: e => handleSkillChange(skill.id, e.target.checked) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description }))] })] }, skill.id))) }))] }), _jsxs(Box, { sx: {
+                            }, 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',
@@ -513,9 +776,9 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                             color: 'fg.muted',
                                             fontWeight: 'normal',
                                             ml: 2,
-                                        }, children: "\u2014 defined by spec" }))] }), mcpServersQuery.isLoading && _jsx(Spinner, { size: "small" }), !mcpServersQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => mcpServersQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh MCP config servers", children: _jsx(SyncIcon, { size: 14 }) }))] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', marginBottom: 2 }, children: "Servers from your mcp.json configuration file. Started automatically." }), mcpServersQuery.isError && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch MCP config servers. Check that the server is running." }) })), configServers.length === 0 &&
+                                        }, 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" })), 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: {
+                        !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,
@@ -526,7 +789,11 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                     selectedCatalogServers.length > 0
                                     ? 'Using selected MCP servers'
                                     : 'No servers selected — select servers to scope Codemode tools.' }), previewConfigServers.length > 0 ||
-                                previewCatalogServers.length > 0 ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [previewConfigServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014 ", server.tools.length, " tools (config)"] }, server.id))), previewCatalogServers.map(server => (_jsxs(Text, { sx: { fontSize: 0 }, children: [server.name, " \u2014 ", server.tools?.length || 0, " tools (catalog)"] }, server.id)))] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No servers selected." })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 2 }, children: "Exposed meta-tools: list_tool_names, search_tools, get_tool_details, list_servers, execute_code, call_tool (optional)" })] })), configServers.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: configServers.map(server => (_jsxs(Box, { sx: {
+                                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
+                                                ? ` ${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,
@@ -546,6 +813,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                     borderColor: 'border.default',
                     borderRadius: 2,
                     backgroundColor: 'canvas.default',
+                    opacity: isSpecMode ? 0.6 : 1,
                 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
@@ -580,20 +848,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                             flex: 1,
                                         }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), enableCatalogServerMutation.isPending &&
                                                         enableCatalogServerMutation.variables === server.id ? (_jsx(Label, { variant: "accent", size: "small", children: "Starting..." })) : server.isRunning ? (_jsx(Label, { variant: "success", size: "small", children: "Running" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Not Started" })), server.isConfig && (_jsx(Label, { variant: "secondary", size: "small", children: "From Config" }))] }), hasRequiredEnvVars ? (_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: server.requiredEnvVars?.map(envVar => (_jsx(Label, { variant: envVarsAvailable ? 'success' : 'danger', size: "small", children: envVar }, envVar))) })) : (_jsx(Box, { sx: { display: 'flex' }, children: _jsx(Label, { variant: "success", size: "small", children: "No env vars required" }) })), server.tools && server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] }, server.id));
-                        }) })] })), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), selectedSpec && (_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 Spec Attributes" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: selectedSpecEntries.map(([key, value]) => (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: key }), _jsx(Text, { sx: {
-                                        fontSize: 0,
-                                        color: 'fg.muted',
-                                        whiteSpace: 'pre-wrap',
-                                    }, children: typeof value === 'string'
-                                        ? value
-                                        : JSON.stringify(value, null, 2) })] }, key))) })] })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
+                        }) })] })), 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',

package/lib/examples/AgUiSharedStateExample.js

@@ -127,7 +127,8 @@ const AgUiSharedStateExample = () => {
         setRecipe(DEFAULT_RECIPE);
     }, []);
     return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                minHeight: '100vh',
+                height: '100%',
+                overflow: 'auto',
                 backgroundColor: 'canvas.default',
                 padding: 4,
             }, children: [_jsxs(Box, { sx: {

package/lib/examples/AgentCheckpointsExample.js

@@ -49,7 +49,7 @@ const AGENT_SPEC = {
     id: 'monitor-sales-kpis',
     name: 'Monitor Sales KPIs',
     description: 'Monitor and analyze sales KPIs from the CRM system. Generate daily reports, identify trends, and flag anomalies.',
-    model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0',
+    model: 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0',
     protocol: 'vercel-ai',
     memory: 'mem0',
     sandbox_variant: 'jupyter',
@@ -91,7 +91,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
         agentSpec: AGENT_SPEC,
         agentConfig: {
             name: DEMO_AGENT_NAME,
-            model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0',
+            model: 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0',
             protocol: 'vercel-ai',
             description: 'Monitor Sales KPI agent — exercises pause/resume checkpointing',
         },
@@ -436,7 +436,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                                 gap: 3,
                                 px: 3,
                             }, children: [_jsx(AgentIcon, { size: 48 }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Checkpoint Agent" }), _jsxs(Text, { sx: { color: 'fg.muted', textAlign: 'center', maxWidth: 560 }, children: ["Launch a cloud agent runtime with pause/resume checkpointing. The agent will be deployed from the", ' ', _jsx("strong", { children: AGENT_SPEC_ID }), " spec."] }), displayError && (_jsx(Flash, { variant: "danger", sx: { maxWidth: 560, width: '100%' }, children: displayError })), _jsx(Button, { variant: "primary", size: "large", leadingVisual: PlayIcon, onClick: handleLaunch, children: "Launch Agent" })] })) : (isReady || runtimeStatus === 'resumed') &&
-                            runtimeStatus !== 'paused' ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                            runtimeStatus !== 'paused' ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", brandIcon: _jsx(AgentIcon, { size: 16 }), placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'KPIs',
                                     message: "Show me today's sales KPI dashboard",