@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/examples/AgentSkillsExample.js

@@ -13,12 +13,12 @@ import { BriefcaseIcon, FileIcon } from '@primer/octicons-react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { Chat } from '../chat';
 import { useSkills, useSkillActions } from '../hooks';
 const queryClient = new QueryClient();
 const AGENT_NAME = 'skills-example-agent';
 const AGENTSPEC_ID = 'example-skills';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const SkillCard = ({ skill, onToggle, onToggleApproval }) => {
     const [showDefinition, setShowDefinition] = useState(false);
     const sourceVariant = skill.source_variant ?? 'unknown';
@@ -68,7 +68,7 @@ const AgentSkillsInner = ({ onLogout }) => {
     const [hookError, setHookError] = useState(null);
     const [agentId, setAgentId] = useState(agentName);
     const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
-    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
     const chatAuthToken = token === null ? undefined : token;
     // WS-sourced skills (reads from codemodeStatus pushed via monitoring WS)
     const skillsQuery = useSkills(isReady);
@@ -176,7 +176,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: '100vh',
+                height: '100%',
                 gap: 3,
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching skills example agent..." })] }));
     }
@@ -184,7 +184,7 @@ const AgentSkillsInner = ({ onLogout }) => {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     return (_jsxs(Box, { sx: {
-            height: 'calc(100vh - 60px)',
+            height: '100%',
             display: 'flex',
             flexDirection: 'column',
         }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
@@ -192,7 +192,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                     py: 1,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: `Skills Demo Agent`, brandIcon: _jsx(BriefcaseIcon, { size: 16 }), placeholder: "Ask the agent to use its skills...", showHeader: true, showNewChatButton: true, showClearButton: false, showTokenUsage: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Skills: ", skills.length] }) }), suggestions: [
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: `Skills Demo Agent`, brandIcon: _jsx(BriefcaseIcon, { size: 16 }), placeholder: "Ask the agent to use its skills...", showHeader: true, showNewChatButton: true, showClearButton: true, showTokenUsage: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Skills: ", skills.length] }) }), suggestions: [
                                 {
                                     title: 'List available skills',
                                     message: 'List all your available skills and what they can do.',
@@ -248,7 +248,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                                         }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "Skill Statuses" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "secondary", children: "available" }), _jsx(Text, { children: "In catalog, not yet enabled" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "attention", children: "enabled" }), _jsx(Text, { children: "Enabled, loading pending" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Label, { size: "small", variant: "success", children: "loaded" }), _jsx(Text, { children: "SKILL.md loaded, in system prompt" })] })] })] })] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
-    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+    import('../state/substates').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -264,7 +264,7 @@ const AgentSkillsExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        import('../state/substates').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentSubagentsExample.js

@@ -24,9 +24,9 @@ import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 const AGENT_NAME = 'subagents-example-agent';
 const AGENTSPEC_ID = 'example-subagents';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const SUBAGENTS = [
     {
         name: 'researcher',
@@ -51,7 +51,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
     const [hookError, setHookError] = useState(null);
     const [agentId, setAgentId] = useState(agentName);
     const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
-    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
     const chatAuthToken = token === null ? undefined : token;
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -132,7 +132,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: '100vh',
+                height: '100%',
                 gap: 3,
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching subagents example agent..." })] }));
     }
@@ -140,7 +140,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     return (_jsxs(Box, { sx: {
-            height: 'calc(100vh - 60px)',
+            height: '100%',
             display: 'flex',
             flexDirection: 'column',
         }, children: [_jsxs(Box, { sx: {

package/lib/examples/AgentToolApprovalsExample.js

@@ -13,12 +13,12 @@ import { CheckCircleIcon } from '@primer/octicons-react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { Chat } from '../chat';
 import { useAgentRuntimeApprovals } from '../stores/agentRuntimeStore';
 const queryClient = new QueryClient();
 const AGENT_NAME_PREFIX = 'tool-approval-example-agent';
 const DEFAULT_AGENTSPEC_ID = 'example-tool-approvals';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const getSelectedAgentspecIdFromUi = () => {
     const params = new URLSearchParams(window.location.search);
     const directKeys = [
@@ -71,7 +71,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
     const [agentId, setAgentId] = useState(agentName);
     const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
     const chatAuthToken = token === null ? undefined : token;
-    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
     const podName = 'localhost';
     const approvals = useAgentRuntimeApprovals();
     const pendingApprovalCount = useMemo(() => approvals.filter(approval => approval.status === 'pending' &&
@@ -188,7 +188,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
                     py: 1,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: `Tool Approval Agent - ${podName}`, brandIcon: _jsx(CheckCircleIcon, { size: 16 }), placeholder: "Ask for actions that require approval...", showHeader: true, showNewChatButton: true, showClearButton: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Pending: ", pendingApprovalCount] }), _jsxs("label", { style: {
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: `Tool Approval Agent - ${podName}`, brandIcon: _jsx(CheckCircleIcon, { size: 16 }), placeholder: "Ask for actions that require approval...", showHeader: true, showNewChatButton: true, showClearButton: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Pending: ", pendingApprovalCount] }), _jsxs("label", { style: {
                                         display: 'flex',
                                         alignItems: 'center',
                                         gap: 6,
@@ -223,7 +223,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
                         ], submitOnSuggestionClick: true }) }) })] }));
 };
 const syncTokenToIamStore = (token) => {
-    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+    import('../state/substates').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -239,7 +239,7 @@ const AgentToolApprovalsExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        import('../state/substates').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentTriggersExample.js

@@ -25,6 +25,7 @@ import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useConnectedIdentities } from '../identity';
 import { ToolApprovalBanner, ToolApprovalDialog, } from '../chat/tools';
 import { useAgentEvents, useDeleteAgentEvent, useMarkEventRead, useMarkEventUnread, useAIAgentsWebSocket, } from '../hooks';
@@ -34,11 +35,10 @@ const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'trigger-example-agent';
 const AGENTSPEC_ID = 'example-one-trigger';
-const APPROVAL_AGENT_NAME = 'trigger-approval-example-agent';
-const APPROVAL_AGENTSPEC_ID = 'example-one-trigger-approval';
+const APPROVAL_AGENT_NAME = 'trigger-approval-agent';
+const APPROVAL_AGENTSPEC_ID = 'example-tool-approvals';
 const ONCE_TRIGGER_PROMPT = "List the user's top 3 public and top 3 private GitHub repositories, ranked by recent activity, and provide a brief summary of each. Execute exactly two tool calls: run_skill_script(skill_name='github', script_name='list_repos', kwargs={visibility:'public', sort:'updated', limit:3, format:'json'}) and run_skill_script(skill_name='github', script_name='list_repos', kwargs={visibility:'private', sort:'updated', limit:3, format:'json'}). Do not call list_skills/load_skill/read_skill_resource. Do not retry. If a tool call fails, report failure_reason/error/stderr exactly as returned.";
 const ONCE_TRIGGER_APPROVAL_PROMPT = 'Use the runtime_sensitive_echo tool once.';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const DEFAULT_CRON = '0 8 * * *'; // daily at 08:00 UTC
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentTriggerInner = ({ onLogout, }) => {
@@ -58,7 +58,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
     const [isReady, setIsReady] = useState(false);
     const [hookError, setHookError] = useState(null);
     const [agentId, setAgentId] = useState(agentName);
-    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
     const chatAuthToken = token === null ? undefined : token;
     // Cron state
     const [cronExpr, setCronExpr] = useState(DEFAULT_CRON);
@@ -807,7 +807,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: '100vh',
+                height: '100%',
                 gap: 3,
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching runtime for trigger agent..." })] }));
     }
@@ -822,7 +822,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
             padding: 0,
             minWidth: 0,
         }, children: _jsxs(Box, { sx: {
-                height: 'calc(100vh - 60px)',
+                height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
             }, children: [_jsxs(Box, { sx: {
@@ -855,7 +855,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                 setActiveApproval(null);
                             }
                         }
-                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Trigger Agent", brandIcon: _jsx(ZapIcon, { size: 16 }), description: `View-only trigger output. Cron: ${cronExpr} | Webhook: ${webhookEnabled ? 'on' : 'off'} | Event: ${eventSubscribed ? eventTopic : 'none'}`, showHeader: true, autoFocus: false, height: "100%", runtimeId: agentId, showInput: true, disableInputPrompt: true, showModelSelector: false, showToolsMenu: true, showSkillsMenu: true })) : (_jsx(Box, { sx: {
+                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Trigger Agent", brandIcon: _jsx(ZapIcon, { size: 16 }), description: `View-only trigger output. Cron: ${cronExpr} | Webhook: ${webhookEnabled ? 'on' : 'off'} | Event: ${eventSubscribed ? eventTopic : 'none'}`, showHeader: true, autoFocus: false, height: "100%", runtimeId: agentId, showInput: true, disableInputPrompt: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true })) : (_jsx(Box, { sx: {
                                     height: '100%',
                                     display: 'flex',
                                     alignItems: 'center',
@@ -1315,7 +1315,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {
-    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+    import('../state/substates').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -1332,7 +1332,7 @@ const AgentTriggersExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        import('../state/substates').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);

package/lib/examples/AgentspecsExample.js

@@ -211,11 +211,11 @@ const resolveCloudRuntimeBaseUrlFromSpec = (spec) => {
         return null;
     }
     const preferredKeys = [
-        'runtimesRunUrl',
-        'runtimeRunUrl',
+        'runtimesUrl',
+        'runtimeUrl',
         'runtimes_url',
         'runtime_url',
-        'runUrl',
+        'datalayerUrl',
         'baseUrl',
         'endpoint',
     ];
@@ -298,13 +298,13 @@ githubClientId, kaggleToken, }) => {
     const { configuration } = useCoreStore();
     const { token } = useSimpleAuthStore();
     const cloudCatalogBaseUrl = useMemo(() => {
-        const configured = normalizeHttpUrl(configuration?.runtimesRunUrl);
+        const configured = normalizeHttpUrl(configuration?.runtimesUrl);
         const envConfigured = normalizeHttpUrl(import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL);
         if (configured && !isLocalhostUrl(configured)) {
             return configured;
         }
         return envConfigured || 'https://r1.datalayer.run';
-    }, [configuration?.runtimesRunUrl]);
+    }, [configuration?.runtimesUrl]);
     const isCloudMode = isCloudSpecSelection(selectedAgentId);
     const selectedSpec = selectedCloudSpec || selectedLibrarySpec;
     const cloudRuntimeCreationBaseUrl = useMemo(() => {
@@ -770,42 +770,64 @@ githubClientId, kaggleToken, }) => {
             const specId = isSpecSelection(selectedAgentId)
                 ? getSpecId(selectedAgentId)
                 : undefined;
-            const response = await fetch(`${baseUrl}/api/v1/agents`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    name: agentName,
-                    description: description || `Agent created via UI (${agentLibrary})`,
-                    goal: goal || undefined,
-                    agent_library: agentLibrary,
-                    transport: transport,
-                    model: model,
-                    system_prompt: systemPrompt || DEFAULT_SYSTEM_PROMPT,
-                    system_prompt_codemode_addons: systemPromptCodemodeAddons || undefined,
-                    tools: tools,
-                    sandbox_variant: sandboxVariant || undefined,
-                    enable_skills: enableSkills,
-                    enable_codemode: enableCodemode,
-                    allow_direct_tool_calls: allowDirectToolCalls,
-                    enable_tool_reranker: enableToolReranker,
-                    selected_mcp_servers: selectedMcpServers,
-                    skills: selectedSkills,
-                    jupyter_sandbox: useJupyterSandbox ? jupyterSandboxUrl : undefined,
-                    agent_spec: mergedSpecForLaunch,
-                    ...(specId ? { agent_spec_id: specId } : {}),
-                }),
-            });
-            if (!response.ok) {
-                const errorData = await response
-                    .json()
-                    .catch(() => ({ detail: 'Unknown error' }));
-                throw new Error(errorData.detail || `Failed to create agent: ${response.status}`);
+            const createRequestBody = {
+                name: agentName,
+                description: description || `Agent created via UI (${agentLibrary})`,
+                goal: goal || undefined,
+                agent_library: agentLibrary,
+                transport: transport,
+                model: model,
+                system_prompt: systemPrompt || DEFAULT_SYSTEM_PROMPT,
+                system_prompt_codemode_addons: systemPromptCodemodeAddons || undefined,
+                tools: tools,
+                sandbox_variant: sandboxVariant || undefined,
+                enable_skills: enableSkills,
+                enable_codemode: enableCodemode,
+                allow_direct_tool_calls: allowDirectToolCalls,
+                enable_tool_reranker: enableToolReranker,
+                selected_mcp_servers: selectedMcpServers,
+                skills: selectedSkills,
+                jupyter_sandbox: useJupyterSandbox ? jupyterSandboxUrl : undefined,
+                agent_spec: mergedSpecForLaunch,
+                ...(specId ? { agent_spec_id: specId } : {}),
+            };
+            const tryCreate = async () => {
+                const response = await fetch(`${baseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(createRequestBody),
+                });
+                if (!response.ok) {
+                    const errorData = await response
+                        .json()
+                        .catch(() => ({ detail: 'Unknown error' }));
+                    throw new Error(errorData.detail || `Failed to create agent: ${response.status}`);
+                }
+                const data = await response.json();
+                console.log('[AgentRuntimeExample] Agent created:', data);
+                return data.id;
+            };
+            try {
+                return await tryCreate();
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to create agent';
+                const alreadyExists = /already exists/i.test(errorMessage);
+                // If the agent already exists, terminate (delete) it then retry once.
+                if (alreadyExists && agentName) {
+                    console.warn(`[AgentRuntimeExample] Agent '${agentName}' already exists, deleting and retrying create once.`);
+                    const deleteResponse = await fetch(`${baseUrl}/api/v1/agents/${encodeURIComponent(agentName)}`, {
+                        method: 'DELETE',
+                    });
+                    if (deleteResponse.ok) {
+                        return await tryCreate();
+                    }
+                    throw new Error(`Failed to delete existing agent '${agentName}' before retry: ${deleteResponse.status}`);
+                }
+                throw error;
             }
-            const data = await response.json();
-            console.log('[AgentRuntimeExample] Agent created:', data);
-            return data.id;
         }
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Failed to create agent';
@@ -1021,7 +1043,7 @@ githubClientId, kaggleToken, }) => {
                                                     showModelSelector: true,
                                                     showToolsMenu: true,
                                                     showSkillsMenu: true,
-                                                    showInformation: false,
+                                                    showInformation: true,
                                                     codemodeEnabled: enableCodemode,
                                                     initialModel: model,
                                                     mcpServers: selectedMcpServers,

package/lib/examples/ChatCustomExample.js

@@ -3,13 +3,13 @@ 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 { useCallback, useEffect, useRef, useState } from 'react';
+import { useMemo } from 'react';
 import { Spinner, Text } from '@primer/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 import { Chat } from '../chat';
 // Create a query client for React Query
 const queryClient = new QueryClient({
@@ -24,28 +24,24 @@ const queryClient = new QueryClient({
 });
 const AGENT_NAME = 'datalayer-assistant';
 /**
- * Hook to ensure the agent exists on the server
- * Creates the agent if it doesn't exist
+ * Agent Runtime Custom Example Component
+ *
+ * Demonstrates the unified Chat component with AG-UI transport
+ * and all necessary providers:
+ * - QueryClientProvider for data fetching
+ * - Auto-creates agent on the server if it doesn't exist
  */
-function useEnsureAgent(baseUrl) {
-    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
-    const [agentId, setAgentId] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const createAgent = useCallback(async () => {
-        try {
-            const response = await fetch(`${baseUrl}/api/v1/agents`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    name: agentName,
-                    description: 'Datalayer AI Assistant - Your helpful coding companion',
-                    agent_library: 'pydantic-ai',
-                    transport: 'ag-ui',
-                    model: 'openai:gpt-4o-mini',
-                    system_prompt: `You are custom chat assistant, a helpful AI assistant specialized in data science, Python programming, and Jupyter notebooks.
+const AgentRuntimeCustomExample = () => {
+    const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
+    const { agentId, status, error, isReady } = useExampleAgentRuntime({
+        exampleId: 'ChatCustomExample',
+        agentName,
+        agentConfig: {
+            description: 'Datalayer AI Assistant - Your helpful coding companion',
+            agentLibrary: 'pydantic-ai',
+            protocol: 'ag-ui',
+            model: 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0',
+            systemPrompt: `You are custom chat assistant, a helpful AI assistant specialized in data science, Python programming, and Jupyter notebooks.
 
 You can help users with:
 - Writing and debugging Python code
@@ -55,60 +51,10 @@ You can help users with:
 - General programming questions
 
 Be concise, helpful, and provide working code examples when appropriate.`,
-                }),
-            });
-            if (!response.ok) {
-                const errorData = await response
-                    .json()
-                    .catch(() => ({ detail: 'Unknown error' }));
-                throw new Error(errorData.detail || `Failed to create agent: ${response.status}`);
-            }
-            const data = await response.json();
-            console.log('[AgentRuntimeCustomExample] Agent created:', data);
-            return data.id;
-        }
-        catch (err) {
-            console.error('[AgentRuntimeCustomExample] Error creating agent:', err);
-            throw err;
-        }
-    }, [agentName, baseUrl]);
-    const initAgent = useCallback(async () => {
-        setIsLoading(true);
-        setError(null);
-        try {
-            console.log('[AgentRuntimeCustomExample] Creating new agent...');
-            const newAgentId = await createAgent();
-            if (newAgentId) {
-                setAgentId(newAgentId);
-            }
-            else {
-                setError('Failed to create agent');
-            }
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to initialize agent';
-            setError(errorMessage);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [createAgent]);
-    useEffect(() => {
-        initAgent();
-    }, [initAgent]);
-    return { agentId, isLoading, error, retry: initAgent };
-}
-/**
- * Agent Runtime Custom Example Component
- *
- * Demonstrates the unified Chat component with AG-UI transport
- * and all necessary providers:
- * - QueryClientProvider for data fetching
- * - Auto-creates agent on the server if it doesn't exist
- */
-const AgentRuntimeCustomExample = () => {
-    const baseUrl = useExampleAgentRuntimesUrl();
-    const { agentId, isLoading, error, retry } = useEnsureAgent(baseUrl);
+        },
+    });
+    const isLoading = !isReady && status !== 'error';
+    const retry = () => window.location.reload();
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',

package/lib/examples/ChatExample.js

@@ -15,12 +15,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Backend: POST /api/v1/agents  →  /api/v1/ag-ui/{agentId}/
  */
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 import { ErrorView } from './components';
 import { Chat } from '../chat';
 setupPrimerPortals();
@@ -28,49 +29,17 @@ const AGENTSPEC_ID = 'example-simple';
 const AGENT_NAME = 'simple';
 const AgentRuntimeChatExample = () => {
     const baseUrl = useExampleAgentRuntimesUrl();
-    const [agentId, setAgentId] = useState(null);
-    const [error, setError] = useState(null);
-    const [isCreating, setIsCreating] = useState(true);
-    // Create the agent on mount — always create a fresh instance with a random
-    // slug so that each run starts with clean OTEL data.
-    useEffect(() => {
-        let cancelled = false;
-        const name = uniqueAgentId(AGENT_NAME);
-        const createAgent = async () => {
-            try {
-                const response = await fetch(`${baseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        name,
-                        agent_spec_id: AGENTSPEC_ID,
-                        transport: 'ag-ui',
-                    }),
-                });
-                if (!response.ok) {
-                    const data = await response
-                        .json()
-                        .catch(() => ({ detail: 'Unknown error' }));
-                    throw new Error(data.detail || `Failed to create agent: ${response.status}`);
-                }
-                const data = await response.json();
-                if (!cancelled) {
-                    setAgentId(data.id);
-                    setIsCreating(false);
-                }
-            }
-            catch (err) {
-                if (!cancelled) {
-                    setError(err instanceof Error ? err.message : 'Failed to create agent');
-                    setIsCreating(false);
-                }
-            }
-        };
-        createAgent();
-        return () => {
-            cancelled = true;
-        };
-    }, [baseUrl]);
+    const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
+    const { agentId, error, status, isReady } = useExampleAgentRuntime({
+        exampleId: 'ChatExample',
+        agentName,
+        specId: AGENTSPEC_ID,
+        agentConfig: {
+            protocol: 'ag-ui',
+            agentSpecId: AGENTSPEC_ID,
+        },
+    });
+    const isCreating = !isReady && status !== 'error';
     // Loading state while agent is being created
     if (isCreating) {
         return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {