@datalayer/agent-runtimes 0.0.10 → 0.0.12

package/lib/AgentNotebook.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgentNotebook
+ *
+ * Standalone notebook + chat interface served at /static/agent-notebook.html.
+ * Connects to the agent-runtimes AG-UI endpoint and provides a Jupyter
+ * notebook alongside the Chat component with notebook tools registered.
+ *
+ * The page is opened by codeai with a URL like:
+ *   http://127.0.0.1:<port>/static/agent-notebook.html?agentId=<id>
+ *
+ * Query parameters:
+ *   - agentId: the agent identifier (required, set by codeai)
+ *   - jupyterBaseUrl: base URL for the Jupyter server (optional, falls back to jupyter-config-data)
+ *   - jupyterToken: token for the Jupyter server (optional, falls back to jupyter-config-data)
+ */
+import { useEffect, useState } from 'react';
+import { Text, Spinner } from '@primer/react';
+import { AlertIcon } from '@primer/octicons-react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider } from '@datalayer/core';
+import { Notebook, JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, } from '@datalayer/jupyter-react';
+import { ServiceManager } from '@jupyterlab/services';
+import { Chat } from './components/chat';
+import { useNotebookTools } from './tools/adapters/agent-runtimes/notebookHooks';
+import { DEFAULT_MODEL } from './specs';
+import MatplotlibNotebook from './examples/stores/notebooks/Matplotlib.ipynb.json';
+import '../style/primer-primitives.css';
+setupPrimerPortals();
+const BASE_URL = window.location.origin;
+const NOTEBOOK_ID = 'agent-notebook';
+function getQueryParam(name) {
+    return new URLSearchParams(window.location.search).get(name);
+}
+function getAgentId() {
+    return getQueryParam('agentId') || 'default';
+}
+/**
+ * Initialise Jupyter configuration.
+ *
+ * Priority:
+ *   1. Query parameters (jupyterBaseUrl / jupyterToken)
+ *   2. <script id="jupyter-config-data"> block in the HTML page
+ */
+function initJupyterConfig() {
+    // Load embedded config first
+    loadJupyterConfig();
+    // Override with query parameters when supplied by codeai
+    const qBaseUrl = getQueryParam('jupyterBaseUrl');
+    const qToken = getQueryParam('jupyterToken');
+    if (qBaseUrl)
+        setJupyterServerUrl(qBaseUrl);
+    if (qToken)
+        setJupyterServerToken(qToken);
+    // Also check for jupyter-config-data embedded in the page (may contain
+    // values injected at build/serve time)
+    const el = document.getElementById('jupyter-config-data');
+    if (el?.textContent) {
+        try {
+            const cfg = JSON.parse(el.textContent);
+            if (!qBaseUrl && cfg.baseUrl)
+                setJupyterServerUrl(cfg.baseUrl);
+            if (!qToken && cfg.token)
+                setJupyterServerToken(cfg.token);
+        }
+        catch {
+            // ignore
+        }
+    }
+}
+const NotebookPanel = ({ serviceManager }) => (_jsx(Box, { sx: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        borderRight: '1px solid',
+        borderColor: 'border.default',
+    }, children: _jsx(JupyterReactTheme, { children: _jsx(Box, { sx: { height: '100vh' }, children: _jsx(Notebook, { nbformat: MatplotlibNotebook, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "100vh", cellSidebarMargin: 120, startDefaultKernel: true }) }) }) }));
+const ChatPanel = ({ agentId }) => {
+    // Register notebook tools so the agent can manipulate cells
+    const notebookTools = useNotebookTools(NOTEBOOK_ID);
+    return (_jsx(Box, { sx: {
+            width: '420px',
+            minWidth: '320px',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+        }, children: _jsx(Chat, { transport: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Agent Notebook", placeholder: "Ask about the notebook...", description: "Chat with the agent to manipulate the notebook", showHeader: true, height: "100vh", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, frontendTools: notebookTools, autoFocus: true, runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+                {
+                    title: 'Add a cell',
+                    message: 'Insert a new code cell into the notebook',
+                },
+                {
+                    title: 'Run first cell',
+                    message: 'Run the first cell in the notebook',
+                },
+                {
+                    title: 'Show cells',
+                    message: 'Show the notebook cells content and compute the number of cells',
+                },
+            ], submitOnSuggestionClick: true }) }));
+};
+// ─── Main component ─────────────────────────────────────────────────────────
+export const AgentNotebook = () => {
+    const [agentId] = useState(getAgentId);
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    const [serviceManager, setServiceManager] = useState(null);
+    // Verify the agent exists AND initialise the Jupyter service manager
+    useEffect(() => {
+        let cancelled = false;
+        const init = async () => {
+            try {
+                // 1. Ensure agent exists — create if missing
+                const getResp = await fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(agentId)}`);
+                if (!getResp.ok) {
+                    const createResp = await fetch(`${BASE_URL}/api/v1/agents`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            name: agentId,
+                            description: 'Agent created by Agent Notebook page',
+                            agent_library: 'pydantic-ai',
+                            transport: 'ag-ui',
+                            model: DEFAULT_MODEL,
+                            system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. You can help with code, explanations, and data analysis.',
+                        }),
+                    });
+                    if (!createResp.ok && createResp.status !== 400) {
+                        const d = await createResp.json().catch(() => ({}));
+                        throw new Error(d.detail || `Failed to create agent: ${createResp.status}`);
+                    }
+                }
+                // 2. Initialise Jupyter
+                initJupyterConfig();
+                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                const manager = new ServiceManager({ serverSettings });
+                await manager.ready;
+                if (!cancelled) {
+                    setServiceManager(manager);
+                    setIsReady(true);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : 'Failed to initialise');
+                }
+            }
+        };
+        init();
+        return () => {
+            cancelled = true;
+        };
+    }, [agentId]);
+    // Loading
+    if (!isReady && !error) {
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    gap: 3,
+                    bg: 'canvas.default',
+                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "\u2026"] })] }) }));
+    }
+    // Error
+    if (error) {
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    gap: 3,
+                    bg: 'canvas.default',
+                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
+    }
+    // Ready — notebook + chat side-by-side
+    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                display: 'flex',
+                height: '100vh',
+                width: '100vw',
+                overflow: 'hidden',
+                bg: 'canvas.default',
+            }, children: [serviceManager && _jsx(NotebookPanel, { serviceManager: serviceManager }), _jsx(ChatPanel, { agentId: agentId })] }) }));
+};
+export default AgentNotebook;

package/lib/agent-lexical-main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/agent-lexical-main.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createRoot } from 'react-dom/client';
+import { AgentLexical } from './AgentLexical';
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    createRoot(rootElement).render(_jsx(AgentLexical, {}));
+}

package/lib/agent-main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/agent-main.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createRoot } from 'react-dom/client';
+import { Agent } from './Agent';
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    createRoot(rootElement).render(_jsx(Agent, {}));
+}

package/lib/agent-notebook-main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/agent-notebook-main.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createRoot } from 'react-dom/client';
+// import { Agent as AgentNotebook } from './Agent';
+import { AgentNotebook } from './AgentNotebook';
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    createRoot(rootElement).render(_jsx(AgentNotebook, {}));
+}

package/lib/components/AgentConfiguration.d.ts

@@ -1,36 +1,48 @@
 import React from 'react';
-import type { Agent } from '../examples/stores/examplesStore';
-import type { Transport, Extension } from './chat';
+import type { Agent } from '../types/Types';
+import type { Transport } from './chat/components';
+import type { Extension } from './chat/types';
 import type { McpServerSelection } from './McpServerManager';
 import type { OAuthProvider, Identity } from '../identity';
-import type { MCPServerTool as MCPServerToolType } from '../types';
+import type { MCPServerTool as MCPServerToolType } from '../types/Types';
 /**
- * MCP Server Tool type (re-exported from types.ts)
+ * Agent spec entry from the library endpoint.
  */
-export type MCPServerTool = MCPServerToolType;
-export interface SkillOption {
+export interface LibraryAgentSpec {
     id: string;
     name: string;
-    description?: 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;
+    }[];
 }
 /**
- * MCP Server configuration from backend
+ * 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 interface MCPServerConfig {
+export declare const getSpecId: (id: string) => string;
+/**
+ * MCP Server Tool type (re-exported from types.ts)
+ */
+export type MCPServerTool = MCPServerToolType;
+export interface SkillOption {
     id: string;
     name: string;
-    url?: string;
-    enabled: boolean;
-    tools: MCPServerTool[];
-    command?: string;
-    args?: string[];
-    isAvailable?: boolean;
-    isRunning?: boolean;
-    /** True if this server is from mcp.json config (vs catalog) */
-    isConfig?: boolean;
-    transport?: string;
-    /** Required environment variables for this server */
-    requiredEnvVars?: string[];
+    description?: string;
 }
 type AgentLibrary = 'pydantic-ai' | 'langchain' | 'jupyter-ai';
 export type { AgentLibrary };

package/lib/components/AgentConfiguration.js

@@ -8,8 +8,16 @@ 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 { IdentityCard } from './chat/components';
 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,7 +236,33 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
         staleTime: 1000 * 60 * 1, // 1 minute (refresh more often for running status)
         retry: 1,
     });
-    // Fetch skills from the backend (only when codemode is enabled)
+    // 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 (always available, independent of codemode)
     const skillsQuery = useQuery({
         queryKey: ['agent-skills', baseUrl],
         queryFn: async () => {
@@ -238,7 +272,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
             }
             return response.json();
         },
-        enabled: !!baseUrl && enableCodemode,
+        enabled: !!baseUrl,
         staleTime: 1000 * 60 * 5, // 5 minutes
         retry: 1,
     });
@@ -280,9 +314,9 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
     const configServers = mcpServersQuery.data || configQuery.data?.mcpServers || [];
     const catalogServers = catalogServersQuery.data || [];
     const models = configQuery.data?.models || [];
-    // Use fetched skills when codemode is enabled, otherwise use passed availableSkills (which may be empty)
+    // Use fetched skills when available, otherwise use passed availableSkills (which may be empty)
     const fetchedSkills = skillsQuery.data?.skills || [];
-    const displaySkills = enableCodemode ? fetchedSkills : availableSkills;
+    const displaySkills = fetchedSkills.length > 0 ? fetchedSkills : availableSkills;
     const skillsEnabled = selectedSkills.length > 0;
     const selectedConfigServers = selectedMcpServers
         .filter(s => s.origin === 'config')
@@ -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." }) })), 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 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 : 1,
                 }, 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" }), !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: {
                                 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.d.ts

@@ -26,9 +26,11 @@ export interface AgentDetailsProps {
     onIdentityDisconnect?: (provider: OAuthProvider) => void;
     /** Callback to go back to chat view */
     onBack: () => void;
+    /** Whether to show the header with back button (default: true) */
+    showBackHeader?: boolean;
 }
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export declare function AgentDetails({ name, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentDetails({ name, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
 export default AgentDetails;