@datalayer/agent-runtimes 0.0.5 → 0.0.7

package/lib/components/chat/components/ContextUsage.js

@@ -0,0 +1,127 @@
+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.
+/**
+ * ContextUsage component - Shows context usage details with token breakdown.
+ */
+import { CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, } from '@primer/octicons-react';
+import { Box, Heading, Text, ProgressBar, Spinner } from '@primer/react';
+import { useQuery } from '@tanstack/react-query';
+function getLocalApiBase() {
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
+/**
+ * Format token count for display
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+}
+/**
+ * Get icon for context category
+ */
+function getCategoryIcon(name) {
+    switch (name.toLowerCase()) {
+        case 'files':
+            return FileIcon;
+        case 'messages':
+            return CommentDiscussionIcon;
+        case 'tools':
+            return ToolsIcon;
+        case 'memory':
+            return DatabaseIcon;
+        case 'system':
+            return FileIcon;
+        case 'cache':
+            return DatabaseIcon;
+        default:
+            return ClockIcon;
+    }
+}
+/**
+ * ContextUsage component displays token usage breakdown by category.
+ */
+export function ContextUsage({ agentId }) {
+    const { data: contextData, isLoading, error, } = useQuery({
+        queryKey: ['context-details', agentId],
+        queryFn: async () => {
+            const apiBase = getLocalApiBase();
+            const response = await fetch(`${apiBase}/api/v1/configure/agents/${encodeURIComponent(agentId)}/context-details`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch context details');
+            }
+            return response.json();
+        },
+        refetchInterval: 10000, // Refresh every 10 seconds
+        refetchOnMount: 'always', // Always refetch when component mounts
+        staleTime: 0, // Data is always considered stale
+    });
+    if (isLoading) {
+        return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                        fontSize: 1,
+                        fontWeight: 'semibold',
+                        mb: 2,
+                        color: 'fg.muted',
+                    }, children: "Cumulative Context Usage" }), _jsxs(Box, { sx: {
+                        p: 3,
+                        bg: 'canvas.subtle',
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading context details..." })] })] }));
+    }
+    if (error || !contextData) {
+        return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                        fontSize: 1,
+                        fontWeight: 'semibold',
+                        mb: 2,
+                        color: 'fg.muted',
+                    }, children: "Cumulative Context Usage" }), _jsx(Box, { sx: {
+                        p: 3,
+                        bg: 'canvas.subtle',
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                    }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details" }) })] }));
+    }
+    const contextUsagePercent = (contextData.usedTokens / contextData.totalTokens) * 100;
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                    fontSize: 1,
+                    fontWeight: 'semibold',
+                    mb: 2,
+                    color: 'fg.muted',
+                }, children: "Cumulative Context Usage" }), _jsxs(Box, { sx: {
+                    p: 3,
+                    bg: 'canvas.subtle',
+                    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(contextData.usedTokens), " /", ' ', formatTokens(contextData.totalTokens), " tokens"] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [contextUsagePercent.toFixed(0), "%"] })] }), _jsx(ProgressBar, { progress: contextUsagePercent, sx: { height: 8 }, bg: contextUsagePercent > 80 ? 'danger.emphasis' : 'accent.emphasis' })] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: contextData.children.map(category => {
+                            const CategoryIcon = getCategoryIcon(category.name);
+                            const categoryPercent = (category.value / contextData.totalTokens) * 100;
+                            return (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                }, children: [_jsx(Box, { sx: { color: 'fg.muted', width: 20 }, children: _jsx(CategoryIcon, { size: 16 }) }), _jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: category.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', minWidth: 60 }, children: formatTokens(category.value) }), _jsx(Box, { sx: { width: 80 }, children: _jsx(ProgressBar, { progress: categoryPercent, sx: { height: 4 } }) })] }, category.name));
+                        }) })] })] }));
+}
+export default ContextUsage;

package/lib/components/chat/components/base/ChatBase.d.ts

@@ -201,6 +201,10 @@ export interface ChatBaseProps {
     showModelSelector?: boolean;
     /** Show tools menu (for protocols that support it) */
     showToolsMenu?: boolean;
+    /** Initial model ID to select (e.g., 'openai:gpt-4o-mini') */
+    initialModel?: string;
+    /** Initial MCP server IDs to enable (others will be disabled) */
+    initialMcpServers?: string[];
     /** Custom class name */
     className?: string;
     /** Custom loading state */
@@ -305,6 +309,6 @@ export interface ChatBaseProps {
 /**
  * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
  */
-export declare function ChatBase({ title, showHeader, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, className, loadingState, headerActions, useStore: useStoreMode, protocol, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBase({ title, showHeader, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, initialModel, initialMcpServers, className, loadingState, headerActions, useStore: useStoreMode, protocol, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
 export type { PoweredByTagProps };
 export default ChatBase;

package/lib/components/chat/components/base/ChatBase.js

@@ -160,7 +160,7 @@ function useConfigQuery(enabled, configEndpoint, authToken) {
 /**
  * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
  */
-export function ChatBase({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, className, loadingState, headerActions, 
+export function ChatBase({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, initialModel, initialMcpServers, className, loadingState, headerActions, 
 // Mode selection
 useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
 // Extended props
@@ -169,15 +169,15 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     const existingQueryClient = useContext(QueryClientContext);
     // If no QueryClient is available, wrap with our internal provider
     if (!existingQueryClient) {
-        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }) }));
+        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, initialModel: initialModel, initialMcpServers: initialMcpServers, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }) }));
     }
     // QueryClient already available, render inner component directly
-    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }));
+    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, initialModel: initialModel, initialMcpServers: initialMcpServers, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }));
 }
 /**
  * Inner ChatBase component - contains all the actual logic
  */
-function ChatBaseInner({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, className, loadingState, headerActions, 
+function ChatBaseInner({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, initialModel, initialMcpServers, className, loadingState, headerActions, 
 // Mode selection
 useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
 // Extended props
@@ -269,27 +269,52 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     // Initialize model and tools when config is available
     useEffect(() => {
         if (configQuery.data && !selectedModel) {
-            // Select first available model, or fallback to first model if none available
-            const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
-            const firstModel = firstAvailableModel || configQuery.data.models[0];
-            if (firstModel) {
-                setSelectedModel(firstModel.id);
-                const allToolIds = configQuery.data.builtinTools?.map(tool => tool.id) || [];
-                setEnabledTools(allToolIds);
+            // Use initialModel if provided, otherwise select first available model
+            if (initialModel) {
+                // Check if the initial model exists in the config
+                const modelExists = configQuery.data.models.some(m => m.id === initialModel);
+                if (modelExists) {
+                    setSelectedModel(initialModel);
+                }
+                else {
+                    // Fallback to first available model if initialModel not found
+                    const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
+                    const firstModel = firstAvailableModel || configQuery.data.models[0];
+                    if (firstModel) {
+                        setSelectedModel(firstModel.id);
+                    }
+                }
             }
-            // Initialize MCP server tools - all enabled by default
+            else {
+                // No initialModel provided, select first available model
+                const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
+                const firstModel = firstAvailableModel || configQuery.data.models[0];
+                if (firstModel) {
+                    setSelectedModel(firstModel.id);
+                }
+            }
+            const allToolIds = configQuery.data.builtinTools?.map(tool => tool.id) || [];
+            setEnabledTools(allToolIds);
+            // Initialize MCP server tools
             if (configQuery.data.mcpServers) {
                 const newEnabledMcpTools = new Map();
                 for (const server of configQuery.data.mcpServers) {
                     if (server.isAvailable && server.enabled) {
-                        const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
-                        newEnabledMcpTools.set(server.id, enabledToolNames);
+                        // If initialMcpServers is provided, only enable those servers
+                        // If not provided, enable all available servers
+                        const shouldEnableServer = initialMcpServers
+                            ? initialMcpServers.includes(server.id)
+                            : true;
+                        if (shouldEnableServer) {
+                            const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
+                            newEnabledMcpTools.set(server.id, enabledToolNames);
+                        }
                     }
                 }
                 setEnabledMcpTools(newEnabledMcpTools);
             }
         }
-    }, [configQuery.data, selectedModel]);
+    }, [configQuery.data, selectedModel, initialModel, initialMcpServers]);
     // Helper to toggle MCP tool enabled state
     const toggleMcpTool = useCallback((serverId, toolName) => {
         setEnabledMcpTools(prev => {

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

@@ -9,6 +9,8 @@ export { ChatSidebar, type ChatSidebarProps } from './ChatSidebar';
 export { ChatStandalone, type ChatStandaloneProps, type MessageHandler, } from './ChatStandalone';
 export { ChatBase, type ChatBaseProps, type ProtocolConfig, } from './base/ChatBase';
 export { AgentDetails, type AgentDetailsProps } from './AgentDetails';
+export { ContextUsage, type ContextUsageProps, type ContextDetailsResponse, } from './ContextUsage';
+export { ContextDistribution, type ContextDistributionProps, type ContextSnapshotResponse, } from './ContextDistribution';
 export { ToolApprovalDialog, useToolApprovalDialog, type ToolApprovalDialogProps, } from './elements/ToolApprovalDialog';
 export { PoweredByTag, type PoweredByTagProps } from './elements/PoweredByTag';
 export { FloatingBrandButton, type FloatingBrandButtonProps, } from './elements/FloatingBrandButton';

package/lib/components/chat/components/index.js

@@ -13,6 +13,8 @@ export { ChatSidebar } from './ChatSidebar';
 export { ChatStandalone, } from './ChatStandalone';
 export { ChatBase, } from './base/ChatBase';
 export { AgentDetails } from './AgentDetails';
+export { ContextUsage, } from './ContextUsage';
+export { ContextDistribution, } from './ContextDistribution';
 export { ToolApprovalDialog, useToolApprovalDialog, } from './elements/ToolApprovalDialog';
 export { PoweredByTag } from './elements/PoweredByTag';
 export { FloatingBrandButton, } from './elements/FloatingBrandButton';

package/lib/examples/AgentSpaceFormExample.js

@@ -59,12 +59,31 @@ const AgentSpaceFormExample = () => {
     const [agentLibrary, setAgentLibrary] = useState('pydantic-ai');
     const [transport, setTransport] = useState('ag-ui');
     const [extensions, setExtensions] = useState([]);
+    const [model, setModel] = useState('openai:gpt-4o-mini');
     const [isConfigured, setIsConfigured] = useState(false);
+    // Agent capabilities state (moved from Header toggles)
+    const [enableSkills, setEnableSkills] = useState(false);
+    const [enableCodemode, setEnableCodemode] = useState(false);
+    const [allowDirectToolCalls, setAllowDirectToolCalls] = useState(false);
+    const [enableToolReranker, setEnableToolReranker] = useState(false);
+    const [selectedMcpServers, setSelectedMcpServers] = useState([]);
+    // Handle codemode change - clear MCP servers when enabled
+    const handleEnableCodemodeChange = (enabled) => {
+        setEnableCodemode(enabled);
+        if (enabled) {
+            // Clear selected MCP servers when codemode is enabled
+            setSelectedMcpServers([]);
+        }
+        if (!enabled) {
+            setAllowDirectToolCalls(false);
+            setEnableToolReranker(false);
+        }
+    };
     // UI state
     const [activeSession, setActiveSession] = useState('session-1');
     const [richEditor, setRichEditor] = useState(false);
     const [durable, setDurable] = useState(true);
-    const [codemode, setCodemode] = useState(false);
+    const [codemode, _] = useState(false);
     const [showContextTree, setShowContextTree] = useState(false);
     const [showNotebook] = useState(true);
     const [leftPaneVisible, setLeftPaneVisible] = useState(true);
@@ -116,8 +135,13 @@ const AgentSpaceFormExample = () => {
                     description: `Agent created via UI (${agentLibrary})`,
                     agent_library: agentLibrary,
                     transport: transport,
-                    model: 'openai:gpt-4o-mini',
+                    model: model,
                     system_prompt: 'You are a helpful AI assistant.',
+                    enable_skills: enableSkills,
+                    enable_codemode: enableCodemode,
+                    allow_direct_tool_calls: allowDirectToolCalls,
+                    enable_tool_reranker: enableToolReranker,
+                    selected_mcp_servers: enableCodemode ? [] : selectedMcpServers,
                 }),
             });
             if (!response.ok) {
@@ -139,7 +163,18 @@ const AgentSpaceFormExample = () => {
         finally {
             setIsCreatingAgent(false);
         }
-    }, [baseUrl, agentName, agentLibrary, transport]);
+    }, [
+        baseUrl,
+        agentName,
+        agentLibrary,
+        transport,
+        model,
+        enableSkills,
+        enableCodemode,
+        allowDirectToolCalls,
+        enableToolReranker,
+        selectedMcpServers,
+    ]);
     /**
      * Delete an agent via the API
      */
@@ -206,7 +241,7 @@ const AgentSpaceFormExample = () => {
     };
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: selectedAgentId === 'new-agent' ? undefined : currentAgent?.name, agentDescription: selectedAgentId === 'new-agent'
                             ? undefined
-                            : currentAgent?.description, agentStatus: currentAgent?.status, richEditor: richEditor, durable: durable, codemode: codemode, showContextTree: showContextTree, isNewAgent: selectedAgentId === 'new-agent', isConfigured: isConfigured, onSessionChange: setActiveSession, onRichEditorChange: setRichEditor, onDurableChange: setDurable, onCodemodeChange: setCodemode, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
+                            : currentAgent?.description, agentStatus: currentAgent?.status, richEditor: richEditor, durable: durable, showContextTree: showContextTree, isNewAgent: selectedAgentId === 'new-agent', isConfigured: isConfigured, onSessionChange: setActiveSession, onRichEditorChange: setRichEditor, onDurableChange: setDurable, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
                             ? () => toggleAgentStatus(currentAgent.id)
                             : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',
@@ -249,9 +284,9 @@ const AgentSpaceFormExample = () => {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         p: 2,
-                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onAgentSelect: handleAgentSelect, onConnect: handleConnect })) : (
+                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, model: model, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableSkills: enableSkills, enableCodemode: enableCodemode, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, selectedMcpServers: selectedMcpServers, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onModelChange: setModel, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableSkillsChange: setEnableSkills, onEnableCodemodeChange: handleEnableCodemodeChange, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedMcpServersChange: setSelectedMcpServers })) : (
                                     /* Chat Interface */
-                                    _jsx(Box, { sx: { flex: 1 }, children: _jsx(Chat, { transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, title: currentAgent?.name || agentName || 'AI Assistant', autoConnect: true, autoFocus: true, placeholder: "Type your message to the agent...", height: "calc(100vh - 250px)", suggestions: [
+                                    _jsx(Box, { sx: { flex: 1 }, children: _jsx(Chat, { transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, title: currentAgent?.name || agentName || 'AI Assistant', autoConnect: true, autoFocus: true, placeholder: "Type your message to the agent...", height: "calc(100vh - 250px)", showModelSelector: true, showToolsMenu: true, initialModel: model, initialMcpServers: selectedMcpServers, suggestions: [
                                                 {
                                                     title: '👋 Say hello',
                                                     message: 'Hello! What can you help me with today?',

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

@@ -43,6 +43,16 @@ declare const EXTENSIONS: {
     label: string;
     description: string;
 }[];
+/**
+ * AI Model configuration from backend
+ */
+export interface AIModelConfig {
+    id: string;
+    name: string;
+    builtinTools?: string[];
+    requiredEnvVars?: string[];
+    isAvailable?: boolean;
+}
 interface AgentConfigurationProps {
     agentLibrary: AgentLibrary;
     transport: Transport;
@@ -50,18 +60,30 @@ interface AgentConfigurationProps {
     wsUrl: string;
     baseUrl: string;
     agentName: string;
+    model: string;
     agents: readonly Agent[];
     selectedAgentId: string;
     isCreatingAgent?: boolean;
     createError?: string | null;
+    enableSkills?: boolean;
+    enableCodemode?: boolean;
+    allowDirectToolCalls?: boolean;
+    enableToolReranker?: boolean;
+    selectedMcpServers?: string[];
     onAgentLibraryChange: (library: AgentLibrary) => void;
     onTransportChange: (transport: Transport) => void;
     onExtensionsChange: (extensions: Extension[]) => void;
     onWsUrlChange: (url: string) => void;
     onBaseUrlChange: (url: string) => void;
     onAgentNameChange: (name: string) => void;
+    onModelChange: (model: string) => void;
     onAgentSelect: (agentId: string) => void;
     onConnect: () => void;
+    onEnableSkillsChange?: (enabled: boolean) => void;
+    onEnableCodemodeChange?: (enabled: boolean) => void;
+    onAllowDirectToolCallsChange?: (enabled: boolean) => void;
+    onEnableToolRerankerChange?: (enabled: boolean) => void;
+    onSelectedMcpServersChange?: (servers: string[]) => void;
 }
 /**
  * Agent Configuration Component

package/lib/examples/components/AgentConfiguration.js

@@ -1,11 +1,6 @@
 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.
- */
-import React from 'react';
-import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash, Label, ActionList, } from '@primer/react';
-import { CheckIcon, XIcon, ToolsIcon } from '@primer/octicons-react';
+import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash, Label, } from '@primer/react';
+import { ToolsIcon } from '@primer/octicons-react';
 import { useQuery } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 const AGENT_LIBRARIES = [
@@ -71,7 +66,7 @@ const EXTENSIONS = [
  *
  * Form for configuring agent connection settings.
  */
-export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, agents, selectedAgentId, isCreatingAgent = false, createError = null, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onAgentSelect, onConnect, }) => {
+export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, model, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableSkills = false, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, selectedMcpServers = [], onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onModelChange, onAgentSelect, onConnect, onEnableSkillsChange, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onSelectedMcpServersChange, }) => {
     // Fetch MCP servers configuration from the backend
     const configQuery = useQuery({
         queryKey: ['agent-config', baseUrl],
@@ -87,6 +82,18 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
         retry: 1,
     });
     const mcpServers = configQuery.data?.mcpServers || [];
+    const models = configQuery.data?.models || [];
+    // Handle MCP server checkbox change
+    const handleMcpServerChange = (serverId, checked) => {
+        if (checked) {
+            onSelectedMcpServersChange?.([...selectedMcpServers, serverId]);
+        }
+        else {
+            onSelectedMcpServersChange?.(selectedMcpServers.filter(id => id !== serverId));
+        }
+    };
+    // MCP servers are disabled when codemode is enabled
+    const mcpServersDisabled = enableCodemode || selectedAgentId !== 'new-agent';
     // Determine which extensions are enabled based on transport
     const isExtensionEnabled = (ext) => {
         if (selectedAgentId !== 'new-agent')
@@ -119,7 +126,14 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                     marginBottom: 3,
                 }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: selectedAgentId === 'new-agent'
                             ? 'Configure a new custom agent'
-                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "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(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'
+                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), disabled: selectedAgentId !== 'new-agent' || models.length === 0, sx: { width: '100%' }, children: models.length === 0 ? (_jsx(Select.Option, { value: "", children: "Loading models..." })) : (models.map(m => (_jsxs(Select.Option, { value: m.id, disabled: !m.isAvailable, children: [m.name, !m.isAvailable && ' (API key required)'] }, m.id)))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(Box, { sx: {
+                    marginBottom: 3,
+                    padding: 3,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    backgroundColor: 'canvas.default',
+                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: "Agent Capabilities" }), _jsxs(Box, { sx: { display: 'flex', gap: 4 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableSkills, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableSkillsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Skills" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Enable reusable skill compositions" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] })] }), enableSkills && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: selectedAgentId !== 'new-agent', onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: selectedAgentId !== 'new-agent', onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] })] }))] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
                             ? onWsUrlChange(e.target.value)
                             : onBaseUrlChange(e.target.value), disabled: selectedAgentId !== 'new-agent', placeholder: transport === 'acp'
                             ? 'ws://localhost:8000/api/v1/acp/ws'
@@ -139,7 +153,20 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                             marginBottom: 2,
                         }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Servers" }), configQuery.isLoading && _jsx(Spinner, { size: "small" })] }), configQuery.isError && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch MCP servers. Check that the server is running." }) })), mcpServers.length === 0 &&
                         !configQuery.isLoading &&
-                        !configQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP servers configured." })), mcpServers.length > 0 && (_jsx(ActionList, { children: mcpServers.map((server, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: server.isAvailable ? (_jsx(CheckIcon, { size: 16 })) : (_jsx(XIcon, { size: 16 })) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), _jsx(Label, { variant: server.isAvailable ? 'success' : 'secondary', size: "small", children: server.isAvailable ? 'Available' : 'Not Available' })] }), server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] })] }, server.id))) }))] }), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
+                        !configQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP servers configured." })), enableCodemode && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "MCP servers are disabled when Codemode is enabled. Codemode provides its own tool discovery and execution." }) })), mcpServers.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: mcpServers.map(server => (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                gap: 2,
+                                padding: 2,
+                                borderRadius: 1,
+                                backgroundColor: 'canvas.subtle',
+                                opacity: mcpServersDisabled || !server.isAvailable ? 0.6 : 1,
+                            }, children: [_jsx(Checkbox, { checked: !enableCodemode && selectedMcpServers.includes(server.id), disabled: mcpServersDisabled || !server.isAvailable, onChange: e => handleMcpServerChange(server.id, e.target.checked) }), _jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 1,
+                                        flex: 1,
+                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), _jsx(Label, { variant: server.isAvailable ? 'success' : 'secondary', size: "small", children: server.isAvailable ? 'Available' : 'Not Available' })] }), server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] }, server.id))) }))] }), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
                     !agentName ||
                     (transport === 'acp' ? !wsUrl : !baseUrl), sx: { width: '100%' }, children: isCreatingAgent ? (_jsxs(Box, { sx: {
                         display: 'flex',

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

@@ -6,14 +6,12 @@ interface HeaderProps {
     agentStatus?: 'running' | 'paused';
     richEditor: boolean;
     durable: boolean;
-    codemode: boolean;
     showContextTree: boolean;
     isNewAgent?: boolean;
     isConfigured?: boolean;
     onSessionChange: (sessionId: string) => void;
     onRichEditorChange: (value: boolean) => void;
     onDurableChange: (value: boolean) => void;
-    onCodemodeChange: (value: boolean) => void;
     onToggleContextTree: () => void;
     onToggleStatus?: () => void;
 }

package/lib/examples/components/Header.js

@@ -112,7 +112,7 @@ const OPTIMIZED_CONTEXT_DATA = {
  * Main header for the agent runtime interface with session tabs,
  * toggle switches, controls, and optional context treemap.
  */
-export const Header = ({ activeSession, agentName, agentDescription, agentStatus, richEditor, durable, codemode, showContextTree, isNewAgent = false, isConfigured = false, onSessionChange, onRichEditorChange, onDurableChange, onCodemodeChange, onToggleContextTree, onToggleStatus, }) => {
+export const Header = ({ activeSession, agentName, agentDescription, agentStatus, richEditor, durable, showContextTree, isNewAgent = false, isConfigured = false, onSessionChange, onRichEditorChange, onDurableChange, onToggleContextTree, onToggleStatus, }) => {
     const [isOptimizing, setIsOptimizing] = useState(false);
     const [contextData, setContextData] = useState(MOCK_CONTEXT_DATA);
     const [totalTokens, setTotalTokens] = useState('1.52M');
@@ -121,7 +121,6 @@ export const Header = ({ activeSession, agentName, agentDescription, agentStatus
     const [openOverlay, setOpenOverlay] = useState(null);
     const richEditorRef = useRef(null);
     const durableRef = useRef(null);
-    const codemodeRef = useRef(null);
     const handleOptimize = () => {
         setIsOptimizing(true);
         setTimeout(() => {
@@ -142,20 +141,7 @@ export const Header = ({ activeSession, agentName, agentDescription, agentStatus
                             alignItems: 'center',
                             gap: 3,
                             marginLeft: 'auto',
-                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: codemode, onClick: () => onCodemodeChange(!codemode), "aria-labelledby": "codemode-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "codemode-label", sx: { fontSize: 0 }, children: "Codemode" }), _jsx(IconButton, { ref: codemodeRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Codemode info", onClick: () => setOpenOverlay(openOverlay === 'codemode' ? null : 'codemode') }), _jsx(AnchoredOverlay, { open: openOverlay === 'codemode', onOpen: () => setOpenOverlay('codemode'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: codemodeRef, children: _jsxs(Box, { sx: {
-                                                p: 3,
-                                                maxWidth: '300px',
-                                                bg: 'canvas.overlay',
-                                                border: '1px solid',
-                                                borderColor: 'border.default',
-                                                borderRadius: 2,
-                                                boxShadow: 'shadow.large',
-                                            }, children: [_jsx(Text, { sx: {
-                                                        fontSize: 0,
-                                                        display: 'block',
-                                                        mb: 1,
-                                                        fontWeight: 'bold',
-                                                    }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Optimize the agent for code-focused tasks including code generation, debugging, and technical problem-solving." })] }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: richEditor, onClick: () => onRichEditorChange(!richEditor), "aria-labelledby": "rich-editor-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "rich-editor-label", sx: { fontSize: 0 }, children: "Rich Editor" }), _jsx(IconButton, { ref: richEditorRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Rich Editor info", onClick: () => setOpenOverlay(openOverlay === 'richEditor' ? null : 'richEditor') }), _jsx(AnchoredOverlay, { open: openOverlay === 'richEditor', onOpen: () => setOpenOverlay('richEditor'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: richEditorRef, children: _jsxs(Box, { sx: {
+                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: richEditor, onClick: () => onRichEditorChange(!richEditor), "aria-labelledby": "rich-editor-label", disabled: isNewAgent || !isConfigured }), _jsx(Text, { id: "rich-editor-label", sx: { fontSize: 0 }, children: "Rich Editor" }), _jsx(IconButton, { ref: richEditorRef, icon: InfoIcon, size: "small", variant: "invisible", "aria-label": "Rich Editor info", onClick: () => setOpenOverlay(openOverlay === 'richEditor' ? null : 'richEditor') }), _jsx(AnchoredOverlay, { open: openOverlay === 'richEditor', onOpen: () => setOpenOverlay('richEditor'), onClose: () => setOpenOverlay(null), renderAnchor: () => _jsx("span", {}), anchorRef: richEditorRef, children: _jsxs(Box, { sx: {
                                                 p: 3,
                                                 maxWidth: '300px',
                                                 bg: 'canvas.overlay',

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './state';
+export * from './runtime';

package/lib/index.js

@@ -4,3 +4,4 @@
  */
 export * from './components';
 export * from './state';
+export * from './runtime';

package/lib/runtime/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Runtime management module for agent-runtimes.
+ *
+ * Provides a Zustand store and hooks for launching and managing cloud runtimes
+ * with integrated AI agent support.
+ *
+ * @module runtime
+ *
+ * @example
+ * ```typescript
+ * import { useRuntimeStore, useRuntime, useAgent } from '@datalayer/agent-runtimes/lib/runtime';
+ *
+ * // Launch a new runtime
+ * const { launchRuntime, createAgent } = useRuntimeStore();
+ * const runtime = await launchRuntime({ environmentName: 'python-simple', creditsLimit: 100 });
+ * const agent = await createAgent({ model: 'anthropic:claude-sonnet-4-5' });
+ *
+ * // Use in ChatFloating
+ * <ChatFloating endpoint={agent.endpoint} />
+ *
+ * // Or connect to an existing runtime
+ * const { connectToRuntime } = useRuntimeStore();
+ * connectToRuntime({
+ *   podName: 'my-pod',
+ *   environmentName: 'python-simple',
+ *   serviceManager: myServiceManager,
+ * });
+ * ```
+ */
+export { useRuntimeStore, useRuntime, useAgent, useRuntimeStatus, useRuntimeError, useIsLaunching, getRuntimeState, subscribeToRuntime, } from './runtimeStore';
+export { useAgentConnection } from './useAgentConnection';
+export { useAgentRuntime } from './useAgentRuntime';
+export type { IRuntimeLocation, IRuntimeType, IRuntimeCapabilities, IRuntimePod, IRuntimeOptions, IRuntimeDesc, } from './types';
+export type { RuntimeConnection, AgentRuntimeStatus as RuntimeStatus, AgentConfig, AgentConnection, AgentRuntimeState, } from './types';
+export { DEFAULT_AGENT_CONFIG } from './types';