@datalayer/agent-runtimes 0.0.10 → 0.0.11

package/lib/components/AgentConfiguration.d.ts

@@ -4,6 +4,36 @@ import type { Transport, Extension } from './chat';
 import type { McpServerSelection } from './McpServerManager';
 import type { OAuthProvider, Identity } from '../identity';
 import type { MCPServerTool as MCPServerToolType } from '../types';
+/**
+ * Agent spec entry from the library endpoint.
+ */
+export interface LibraryAgentSpec {
+    id: string;
+    name: string;
+    description: string;
+    tags: string[];
+    enabled: boolean;
+    emoji?: string | null;
+    icon?: string | null;
+    color?: string | null;
+    skills: string[];
+    systemPrompt?: string | null;
+    systemPromptCodemodeAddons?: string | null;
+    suggestions: string[];
+    welcomeMessage?: string | null;
+    mcpServers: {
+        name: string;
+        id: string;
+    }[];
+}
+/**
+ * Helper: is the selected agent id a library spec?
+ */
+export declare const isSpecSelection: (id: string) => boolean;
+/**
+ * Helper: extract the spec id from a spec selection value.
+ */
+export declare const getSpecId: (id: string) => string;
 /**
  * MCP Server Tool type (re-exported from types.ts)
  */

package/lib/components/AgentConfiguration.js

@@ -10,6 +10,14 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 import { IdentityConnect, useIdentity } from '../identity';
 import { IdentityCard } from './chat';
+/**
+ * Helper: is the selected agent id a library spec?
+ */
+export const isSpecSelection = (id) => id.startsWith('spec:');
+/**
+ * Helper: extract the spec id from a spec selection value.
+ */
+export const getSpecId = (id) => id.replace(/^spec:/, '');
 /**
  * Token-based identity providers that can be connected via API key
  */
@@ -228,6 +236,32 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
         staleTime: 1000 * 60 * 1, // 1 minute (refresh more often for running status)
         retry: 1,
     });
+    // Fetch agent specs from library
+    const libraryQuery = useQuery({
+        queryKey: ['agent-library', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/agents/library`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch agent library');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        retry: 1,
+    });
+    const librarySpecs = libraryQuery.data || [];
+    // The currently selected library spec (if any)
+    const selectedSpec = useMemo(() => {
+        if (!isSpecSelection(selectedAgentId))
+            return null;
+        const specId = getSpecId(selectedAgentId);
+        return librarySpecs.find(s => s.id === specId) || null;
+    }, [selectedAgentId, librarySpecs]);
+    // When a spec is selected, form behaves like new-agent but with pre-filled values
+    const isNewAgentMode = selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId);
+    // True when a library spec is selected (fields locked down except Name, URL, Library, Model, Transport, Extensions)
+    const isSpecMode = isSpecSelection(selectedAgentId);
     // Fetch skills from the backend (only when codemode is enabled)
     const skillsQuery = useQuery({
         queryKey: ['agent-skills', baseUrl],
@@ -348,11 +382,11 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
             onSelectedSkillsChange?.(selectedSkills.filter(id => id !== skillId));
         }
     };
-    // MCP servers are disabled for existing agents (new-agent only)
-    const mcpServersDisabled = selectedAgentId !== 'new-agent';
+    // MCP servers are disabled for existing agents and when a spec is selected
+    const mcpServersDisabled = !isNewAgentMode || isSpecMode;
     // Determine which extensions are enabled based on transport
     const isExtensionEnabled = (ext) => {
-        if (selectedAgentId !== 'new-agent')
+        if (!isNewAgentMode)
             return false;
         if (transport === 'ag-ui')
             return true; // Both mcp-ui and a2ui enabled
@@ -380,55 +414,71 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                     fontWeight: 'bold',
                     display: 'block',
                     marginBottom: 3,
-                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: selectedAgentId === 'new-agent'
-                            ? 'Configure a new custom agent'
-                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), disabled: selectedAgentId !== 'new-agent', placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
+                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), librarySpecs
+                                .filter(s => s.enabled)
+                                .map(spec => (_jsxs(Select.Option, { value: `spec:${spec.id}`, children: [spec.emoji ? `${spec.emoji} ` : '', spec.name] }, `spec:${spec.id}`))), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: isNewAgentMode
+                            ? selectedSpec
+                                ? `Creating from spec: ${selectedSpec.name} — capabilities are locked`
+                                : 'Configure a new custom agent'
+                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), disabled: !isNewAgentMode, placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
                             ? onWsUrlChange(e.target.value)
-                            : onBaseUrlChange(e.target.value), disabled: selectedAgentId !== 'new-agent', placeholder: transport === 'acp'
+                            : onBaseUrlChange(e.target.value), disabled: !isNewAgentMode, placeholder: transport === 'acp'
                             ? 'ws://localhost:8000/api/v1/acp/ws'
                             : 'http://localhost:8000', sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: transport === 'acp'
                             ? 'The WebSocket endpoint of your agent-runtimes server'
-                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), disabled: selectedAgentId !== 'new-agent' || models.length === 0, sx: { width: '100%' }, children: models.length === 0 ? (_jsx(Select.Option, { value: "", children: "Loading models..." })) : (models.map(m => (_jsxs(Select.Option, { value: m.id, disabled: !m.isAvailable, children: [m.name, !m.isAvailable && ' (API key required)'] }, m.id)))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(Box, { sx: {
+                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: !isNewAgentMode, sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), disabled: !isNewAgentMode || models.length === 0, sx: { width: '100%' }, children: models.length === 0 ? (_jsx(Select.Option, { value: "", children: "Loading models..." })) : (models.map(m => (_jsxs(Select.Option, { value: m.id, disabled: !m.isAvailable, children: [m.name, !m.isAvailable && ' (API key required)'] }, m.id)))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), disabled: !isNewAgentMode, sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
                     backgroundColor: 'canvas.default',
+                    opacity: isSpecMode ? 0.6 : 1,
                 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 2,
                             marginBottom: 2,
-                        }, children: [_jsx(KeyIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "Connected Accounts" })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 3 }, children: "Connect your accounts to give the agent access to external services like GitHub repositories, Google services, or Kaggle datasets." }), _jsx(IdentityConnectWithStatus, { identityProviders: identityProviders, disabled: selectedAgentId !== 'new-agent', onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect })] }), _jsxs(Box, { sx: {
+                        }, 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',
-                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: "Agent Capabilities" }), _jsx(Box, { sx: { display: 'flex', gap: 4 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: selectedAgentId !== 'new-agent', onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: selectedAgentId !== 'new-agent', onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter kernel instead of local-eval" })] })] })] }))] }), _jsxs(Box, { sx: {
+                    opacity: isSpecMode ? 0.6 : 1,
+                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: ["Agent Capabilities", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                    fontSize: 0,
+                                    color: 'fg.muted',
+                                    fontWeight: 'normal',
+                                    ml: 2,
+                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: !isNewAgentMode || isSpecMode, onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: !isNewAgentMode || isSpecMode, onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter kernel instead of local-eval" })] })] })] }))] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
                     backgroundColor: 'canvas.default',
-                    opacity: enableCodemode ? 1 : 0.5,
+                    opacity: isSpecMode ? 0.6 : enableCodemode ? 1 : 0.5,
                 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 2,
                             marginBottom: 2,
-                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "Skills" }), skillsQuery.isLoading && _jsx(Spinner, { size: "small" }), enableCodemode && !skillsQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => skillsQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh skills", children: _jsx(SyncIcon, { size: 14 }) }))] }), !enableCodemode ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable Codemode to use skills." })) : skillsQuery.isError ? (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch skills. Check that the server is running." }) })) : displaySkills.length === 0 && !skillsQuery.isLoading ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills available." })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: displaySkills.map(skill => (_jsxs(Box, { sx: {
+                        }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Skills", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                            fontSize: 0,
+                                            color: 'fg.muted',
+                                            fontWeight: 'normal',
+                                            ml: 2,
+                                        }, children: "\u2014 defined by spec" }))] }), skillsQuery.isLoading && _jsx(Spinner, { size: "small" }), enableCodemode && !skillsQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => skillsQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh skills", children: _jsx(SyncIcon, { size: 14 }) }))] }), !enableCodemode ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable Codemode to use skills." })) : skillsQuery.isError ? (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch skills. Check that the server is running." }) })) : displaySkills.length === 0 && !skillsQuery.isLoading ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills available." })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: displaySkills.map(skill => (_jsxs(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 2,
                                 padding: 2,
                                 borderRadius: 1,
                                 backgroundColor: 'canvas.subtle',
-                                opacity: selectedAgentId !== 'new-agent' ? 0.6 : 1,
-                            }, children: [_jsx(Checkbox, { checked: selectedSkills.includes(skill.id), disabled: selectedAgentId !== 'new-agent', onChange: e => handleSkillChange(skill.id, e.target.checked) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description }))] })] }, skill.id))) }))] }), _jsxs(Box, { sx: {
+                                opacity: !isNewAgentMode || isSpecMode ? 0.6 : 1,
+                            }, children: [_jsx(Checkbox, { checked: selectedSkills.includes(skill.id), disabled: !isNewAgentMode || isSpecMode, onChange: e => handleSkillChange(skill.id, e.target.checked) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description }))] })] }, skill.id))) }))] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
@@ -440,7 +490,12 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                             alignItems: 'center',
                             gap: 2,
                             marginBottom: 2,
-                        }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Config Servers" }), 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: [_jsx(ToolsIcon, { size: 16 }), _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["MCP Config Servers", isSpecMode && (_jsx(Text, { as: "span", sx: {
+                                            fontSize: 0,
+                                            color: 'fg.muted',
+                                            fontWeight: 'normal',
+                                            ml: 2,
+                                        }, children: "\u2014 defined by spec" }))] }), mcpServersQuery.isLoading && _jsx(Spinner, { size: "small" }), !mcpServersQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => mcpServersQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh MCP config servers", children: _jsx(SyncIcon, { size: 14 }) }))] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', marginBottom: 2 }, children: "Servers from your mcp.json configuration file. Started automatically." }), mcpServersQuery.isError && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch MCP config servers. Check that the server is running." }) })), configServers.length === 0 &&
                         !mcpServersQuery.isLoading &&
                         !mcpServersQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP config servers found. Add servers to ~/.datalayer/mcp.json" })), enableCodemode && (_jsx(Flash, { variant: "default", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "When Codemode is enabled, selected MCP servers are used to build the Codemode tool registry (tools are exposed via Codemode meta tools like search and execute_code)." }) })), enableCodemode && (_jsxs(Box, { sx: {
                             marginBottom: 2,
@@ -525,6 +580,6 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                         alignItems: 'center',
                         justifyContent: 'center',
                         gap: 2,
-                    }, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { children: "Creating Agent..." })] })) : selectedAgentId === 'new-agent' ? ('Create the Agent') : agents.find(a => a.id === selectedAgentId)?.status === 'running' ? ('Connect to the Agent') : ('Start and Connect to the Agent') })] }));
+                    }, 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/components/chat/components/AgentDetails.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * AgentDetails component - Shows detailed information about the agent
  * including name, protocol, URL, message count, and context details.
  */
-import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, ZapIcon, DownloadIcon, } from '@primer/octicons-react';
+import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, ZapIcon, DownloadIcon, NoteIcon, ServerIcon, } from '@primer/octicons-react';
 import { Button, Heading, IconButton, Text, Label, Spinner, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AiAgentIcon } from '@datalayer/icons-react';
@@ -220,6 +220,19 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
             queryClient.invalidateQueries({ queryKey: ['codemode-status'] });
         },
     });
+    // Fetch agent spec (original creation request with separated system prompts)
+    const { data: agentSpec, isLoading: specLoading } = useQuery({
+        queryKey: ['agent-spec', agentId, apiBase],
+        queryFn: async () => {
+            const base = getApiBase(apiBase);
+            const response = await fetch(`${base}/api/v1/configure/agents/${encodeURIComponent(agentId)}/spec`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch agent spec');
+            }
+            return response.json();
+        },
+        enabled: !!agentId,
+    });
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -266,6 +279,151 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
+                                }, children: "Agent Spec" }), _jsx(Box, { sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: specLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading agent spec..." })] })) : agentSpec ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Model:" }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontFamily: 'mono',
+                                                                color: 'fg.default',
+                                                            }, children: agentSpec.model })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Library:" }), _jsx(Label, { variant: "secondary", size: "small", children: agentSpec.agent_library })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Codemode:" }), _jsx(Label, { variant: agentSpec.enable_codemode ? 'accent' : 'secondary', size: "small", children: agentSpec.enable_codemode ? 'Enabled' : 'Disabled' })] }), agentSpec.enable_skills && agentSpec.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Skills:" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: agentSpec.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(NoteIcon, { size: 16 }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontWeight: 'semibold',
+                                                                color: 'fg.muted',
+                                                            }, children: "System Prompt" })] }), _jsx(Box, { sx: {
+                                                        p: 2,
+                                                        bg: 'canvas.default',
+                                                        borderRadius: 2,
+                                                        border: '1px solid',
+                                                        borderColor: 'border.default',
+                                                        maxHeight: 200,
+                                                        overflow: 'auto',
+                                                    }, children: _jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontFamily: 'mono',
+                                                            whiteSpace: 'pre-wrap',
+                                                            wordBreak: 'break-word',
+                                                            color: 'fg.default',
+                                                        }, children: agentSpec.system_prompt }) })] }), agentSpec.system_prompt_codemode_addons && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontWeight: 'semibold',
+                                                                color: 'fg.muted',
+                                                            }, children: "Codemode Addon Prompt" }), agentSpec.enable_codemode ? (_jsx(Label, { variant: "accent", size: "small", children: "Active" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Inactive" }))] }), _jsx(Box, { sx: {
+                                                        p: 2,
+                                                        bg: 'canvas.default',
+                                                        borderRadius: 2,
+                                                        border: '1px solid',
+                                                        borderColor: 'border.default',
+                                                        maxHeight: 200,
+                                                        overflow: 'auto',
+                                                    }, children: _jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontFamily: 'mono',
+                                                            whiteSpace: 'pre-wrap',
+                                                            wordBreak: 'break-word',
+                                                            color: 'fg.default',
+                                                        }, children: agentSpec.system_prompt_codemode_addons }) })] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No agent spec available" })) })] }), agentSpec?.sandbox && (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                    mb: 2,
+                                    color: 'fg.muted',
+                                }, children: "Code Sandbox" }), _jsx(Box, { sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'local-jupyter'
+                                                        ? 'accent'
+                                                        : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100, pl: 4 }, children: "Running:" }), agentSpec.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 1,
+                                                    }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 1,
+                                                    }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'local-jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                width: 100,
+                                                                pl: 4,
+                                                            }, children: "Jupyter URL:" }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontFamily: 'mono',
+                                                                color: 'fg.default',
+                                                                overflow: 'hidden',
+                                                                textOverflow: 'ellipsis',
+                                                                whiteSpace: 'nowrap',
+                                                            }, children: agentSpec.jupyter_sandbox ||
+                                                                agentSpec.sandbox.jupyter_url ||
+                                                                'Not configured' })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                width: 100,
+                                                                pl: 4,
+                                                            }, children: "Connection:" }), agentSpec.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                gap: 1,
+                                                            }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                flexDirection: 'column',
+                                                                gap: 1,
+                                                            }, children: [_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: 1,
+                                                                    }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), agentSpec.sandbox.jupyter_error && (_jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        color: 'danger.fg',
+                                                                        fontFamily: 'mono',
+                                                                        whiteSpace: 'pre-wrap',
+                                                                        wordBreak: 'break-word',
+                                                                    }, children: agentSpec.sandbox.jupyter_error }))] }))] })] })), agentSpec.sandbox.generated_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Generated:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, title: agentSpec.sandbox.generated_path, children: agentSpec.sandbox.generated_path })] })), agentSpec.sandbox.skills_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Skills:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, title: agentSpec.sandbox.skills_path, children: agentSpec.sandbox.skills_path })] })), agentSpec.sandbox.python_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Python:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, title: agentSpec.sandbox.python_path, children: agentSpec.sandbox.python_path })] }))] }) })] })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                    mb: 2,
+                                    color: 'fg.muted',
                                 }, children: "Config MCP Servers" }), _jsx(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',

package/lib/components/chat/components/ContextDistribution.js

@@ -67,7 +67,7 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                 borderColor: 'border.default',
             }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context distribution" }) }));
     }
-    const { distribution, totalTokens, contextWindow } = snapshotData;
+    const { distribution, totalTokens } = snapshotData;
     const hasData = distribution.children && distribution.children.length > 0;
     // ECharts option for treemap
     const chartOption = {
@@ -121,7 +121,7 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     mb: 2,
-                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " /", ' ', formatTokens(contextWindow), " tokens)"] }), _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: {
+                }, 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,

package/lib/components/chat/components/ContextInspector.js

@@ -194,9 +194,11 @@ export function ContextInspector({ agentId, apiBase }) {
             }, children: _jsx(Text, { sx: { color: 'attention.fg' }, children: contextData.error }) }));
     }
     const { tokenSummary, modelConfiguration } = contextData;
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', mb: 1 }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Context Usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow)] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [tokenSummary.usagePercent.toFixed(1), "%"] })] }), _jsx(ProgressBar, { progress: tokenSummary.usagePercent, sx: { height: 8 }, bg: tokenSummary.usagePercent > 80
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow), " (", Math.round(tokenSummary.usagePercent), "%)"] }), _jsx(ProgressBar, { progress: Math.min(tokenSummary.usagePercent, 100), sx: { mt: 2, height: 8 }, bg: tokenSummary.usagePercent > 90
                             ? 'danger.emphasis'
-                            : 'accent.emphasis' }), _jsxs(Box, { sx: {
+                            : tokenSummary.usagePercent > 70
+                                ? 'attention.emphasis'
+                                : 'success.emphasis' }), _jsxs(Box, { sx: {
                             display: 'flex',
                             gap: 3,
                             mt: 2,

package/lib/components/chat/components/ContextPanel.js

@@ -270,7 +270,6 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                     }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details. Make sure the agent is running." }) })] }));
     }
     const { totalTokens, contextWindow, sessionUsage, turnUsage, distribution } = snapshotData;
-    const contextUsagePercent = (totalTokens / contextWindow) * 100;
     const hasDistributionData = distribution?.children && distribution.children.length > 0;
     const hasHistoryData = snapshotData.perRequestUsage && snapshotData.perRequestUsage.length > 0;
     return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
@@ -288,11 +287,7 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                     borderRadius: 2,
                     border: '1px solid',
                     borderColor: 'border.default',
-                }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    mb: 1,
-                                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [formatTokens(totalTokens), " / ", formatTokens(contextWindow), " tokens"] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [contextUsagePercent.toFixed(1), "%"] })] }), _jsx(ProgressBar, { progress: Math.min(contextUsagePercent, 100), sx: { height: 8 }, bg: contextUsagePercent > 80 ? 'danger.emphasis' : 'accent.emphasis' })] }), (sessionUsage || turnUsage) && (_jsxs(Box, { sx: {
+                }, children: [_jsx(Box, { sx: { mb: 3 }, children: _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(totalTokens)] }) }), (sessionUsage || turnUsage) && (_jsxs(Box, { sx: {
                             display: 'flex',
                             gap: 3,
                             mb: 3,

package/lib/components/index.d.ts

@@ -17,8 +17,8 @@ export { TimeTravel } from './TimeTravel';
 export type { TimeTravelProps } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
 export type { LexicalEditorProps } from './LexicalEditor';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';
-export type { AgentLibrary, Transport, Extension, AgentConfigurationProps, SkillOption, MCPServerConfig, MCPServerTool, } from './AgentConfiguration';
+export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';
+export type { AgentLibrary, Transport, Extension, AgentConfigurationProps, SkillOption, MCPServerConfig, MCPServerTool, LibraryAgentSpec, } from './AgentConfiguration';
 export { McpServerManager } from './McpServerManager';
 export type { McpServerSelection, McpServerManagerProps, } from './McpServerManager';
 export type { Agent as ExampleAgent, AgentStatus as ExampleAgentStatus, AgentsState, Transport as ExampleTransport, } from '../examples/stores/examplesStore';

package/lib/components/index.js

@@ -13,5 +13,5 @@ export { HeaderControls } from './HeaderControls';
 export { FooterMetrics } from './FooterMetrics';
 export { TimeTravel } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';
+export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';
 export { McpServerManager } from './McpServerManager';

package/lib/config/agents/code-ai/agents.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Agent Library.
+ *
+ * Predefined agent specifications that can be instantiated as AgentSpaces.
+ * THIS FILE IS AUTO-GENERATED. DO NOT EDIT MANUALLY.
+ * Generated from YAML specifications in specs/agents/
+ */
+import type { AgentSpec } from '../../../types';
+export declare const SIMPLE_AGENT_SPEC: AgentSpec;
+export declare const AGENT_SPECS: Record<string, AgentSpec>;
+/**
+ * Get an agent specification by ID.
+ */
+export declare function getAgentSpecs(agentId: string): AgentSpec | undefined;
+/**
+ * List all available agent specifications.
+ */
+export declare function listAgentSpecs(): AgentSpec[];
+/**
+ * Collect all required environment variables for an agent spec.
+ *
+ * Iterates over the spec's MCP servers and skills and returns the
+ * deduplicated union of their `requiredEnvVars` arrays.
+ */
+export declare function getAgentSpecRequiredEnvVars(spec: AgentSpec): string[];

package/lib/config/agents/code-ai/agents.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// ============================================================================
+// Agent Specs
+// ============================================================================
+// Code Ai Agents
+// ============================================================================
+export const SIMPLE_AGENT_SPEC = {
+    id: 'code-ai/simple',
+    name: 'A Simple Agent',
+    description: `A simple conversational agent. No tools, no MCP servers, no skills — just a helpful AI assistant you can chat with.`,
+    tags: ['simple', 'chat', 'assistant'],
+    enabled: true,
+    mcpServers: [],
+    skills: [],
+    environmentName: 'ai-agents-env',
+    icon: 'share-2',
+    emoji: '🤖',
+    color: '#6366F1',
+    suggestions: [
+        'Tell me a joke',
+        'Explain quantum computing in simple terms',
+        'Help me brainstorm ideas for a weekend project',
+        'Summarize the key points of a topic I describe',
+    ],
+    systemPrompt: `You are a helpful, friendly AI assistant. You do not have access to any external tools, MCP servers, or skills. Answer questions using your training knowledge, be concise, and let the user know if a question is outside your knowledge.
+`,
+    systemPromptCodemodeAddons: undefined,
+};
+// ============================================================================
+// Agent Specs Registry
+// ============================================================================
+export const AGENT_SPECS = {
+    // Code Ai
+    'code-ai/simple': SIMPLE_AGENT_SPEC,
+};
+/**
+ * Get an agent specification by ID.
+ */
+export function getAgentSpecs(agentId) {
+    return AGENT_SPECS[agentId];
+}
+/**
+ * List all available agent specifications.
+ */
+export function listAgentSpecs() {
+    return Object.values(AGENT_SPECS);
+}
+/**
+ * Collect all required environment variables for an agent spec.
+ *
+ * Iterates over the spec's MCP servers and skills and returns the
+ * deduplicated union of their `requiredEnvVars` arrays.
+ */
+export function getAgentSpecRequiredEnvVars(spec) {
+    const vars = new Set();
+    for (const server of spec.mcpServers) {
+        for (const v of server.requiredEnvVars ?? []) {
+            vars.add(v);
+        }
+    }
+    for (const skill of spec.skills) {
+        for (const v of skill.requiredEnvVars ?? []) {
+            vars.add(v);
+        }
+    }
+    return Array.from(vars);
+}

package/lib/config/agents/code-ai/index.d.ts

@@ -0,0 +1 @@
+export * from './agents';

package/lib/config/agents/code-ai/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './agents';