@datalayer/agent-runtimes 1.0.9 → 1.0.17

package/lib/examples/AgentParametersExample.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { Button, Heading, Label, Spinner, Text } from '@primer/react';
 import { FileIcon } from '@primer/octicons-react';
@@ -12,10 +12,11 @@ import { Form, yamlSchemaToJsonSchema } from '@datalayer/primer-rjsf';
 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();
-const AGENT_SPEC_ID = 'example-parameters';
+const AGENTSPEC_ID = 'example-parameters';
 const AGENT_NAME = 'parameters-demo';
 function isRecord(value) {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
@@ -103,14 +104,24 @@ function hasRequiredValues(schema, formData) {
 }
 const AgentParametersExample = () => {
     const baseUrl = useExampleAgentRuntimesUrl();
+    const [agentName] = useState(() => uniqueAgentId(AGENT_NAME));
     const [showSchemaForm, setShowSchemaForm] = useState(false);
     const [isSchemaLoading, setIsSchemaLoading] = useState(false);
     const [schema, setSchema] = useState(null);
     const [formData, setFormData] = useState({});
-    const [agentId, setAgentId] = useState(null);
     const [isCreating, setIsCreating] = useState(false);
     const [error, setError] = useState(null);
     const [formTouched, setFormTouched] = useState(false);
+    const { agentId, error: runtimeError, createAgent, } = useExampleAgentRuntime({
+        exampleId: 'AgentParametersExample',
+        agentName,
+        specId: AGENTSPEC_ID,
+        autoCreateAgent: false,
+        agentConfig: {
+            protocol: 'vercel-ai',
+            agentSpecId: AGENTSPEC_ID,
+        },
+    });
     const hasRequired = useMemo(() => hasRequiredValues(schema, formData), [schema, formData]);
     const canLaunch = useMemo(() => {
         return showSchemaForm && schema !== null && !isSchemaLoading && hasRequired;
@@ -123,7 +134,7 @@ const AgentParametersExample = () => {
         setIsSchemaLoading(true);
         setError(null);
         try {
-            const response = await fetch(`${baseUrl}/api/v1/agents/library/${AGENT_SPEC_ID}`);
+            const response = await fetch(`${baseUrl}/api/v1/agents/library/${AGENTSPEC_ID}`);
             if (!response.ok) {
                 throw new Error(`Failed to load schema: ${response.status}`);
             }
@@ -148,25 +159,14 @@ const AgentParametersExample = () => {
         setIsCreating(true);
         setError(null);
         try {
-            const name = uniqueAgentId(AGENT_NAME);
-            const response = await fetch(`${baseUrl}/api/v1/agents`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    name,
-                    agent_spec_id: AGENT_SPEC_ID,
-                    transport: 'vercel-ai',
+            await createAgent({
+                name: agentName,
+                protocol: 'vercel-ai',
+                agentSpecId: AGENTSPEC_ID,
+                createPayload: {
                     agent_parameters: formData,
-                }),
+                },
             });
-            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();
-            setAgentId(data.id);
         }
         catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to launch agent');
@@ -175,18 +175,7 @@ const AgentParametersExample = () => {
             setIsCreating(false);
         }
     };
-    useEffect(() => {
-        return () => {
-            if (!agentId) {
-                return;
-            }
-            void fetch(`${baseUrl}/api/v1/agents/${encodeURIComponent(agentId)}`, {
-                method: 'DELETE',
-            }).catch(() => {
-                // Ignore teardown failures in example mode.
-            });
-        };
-    }, [agentId, baseUrl]);
+    const effectiveError = error || runtimeError;
     if (!agentId) {
         return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     maxWidth: 760,
@@ -206,7 +195,7 @@ const AgentParametersExample = () => {
                             alignItems: 'center',
                             gap: 2,
                             flexWrap: 'wrap',
-                        }, children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", AGENT_SPEC_ID] }), _jsx(Label, { variant: "secondary", children: "Transport: vercel-ai" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "primary", size: "small", type: "button", onClick: loadSchemaForm, disabled: isSchemaLoading, children: isSchemaLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Loading Schema..."] })) : ('Show Parameter Form') }), schema && (_jsx(Button, { variant: "invisible", size: "small", type: "button", onClick: () => {
+                        }, children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", AGENTSPEC_ID] }), _jsx(Label, { variant: "secondary", children: "Transport: vercel-ai" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "primary", size: "small", type: "button", onClick: loadSchemaForm, disabled: isSchemaLoading, children: isSchemaLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Loading Schema..."] })) : ('Show Parameter Form') }), schema && (_jsx(Button, { variant: "invisible", size: "small", type: "button", onClick: () => {
                                     setShowSchemaForm(v => !v);
                                 }, children: showSchemaForm ? 'Hide Form' : 'Show Form' }))] }), schema && (_jsxs(Box, { sx: {
                             display: 'flex',
@@ -231,8 +220,7 @@ const AgentParametersExample = () => {
                             }, onSubmit: (_, event) => {
                                 event?.preventDefault();
                                 event?.stopPropagation();
-                                // Prevent implicit form submission; launching is click-only.
-                            }, noHtml5Validate: true }) })), _jsx(Button, { variant: "primary", size: "small", type: "button", onClick: launchAgent, disabled: !canLaunch || isCreating, sx: { width: '100%' }, children: isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Launching..."] })) : ('Launch Agent') }), schema && formTouched && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Parameters are sent as agent_parameters in the create-agent request." })), error && _jsx(ErrorView, { error: "Launch failed", detail: error })] }) }));
+                            }, noHtml5Validate: true }) })), _jsx(Button, { variant: "primary", size: "small", type: "button", onClick: launchAgent, disabled: !canLaunch || isCreating, sx: { width: '100%' }, children: isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Launching..."] })) : ('Launch Agent') }), schema && formTouched && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Parameters are sent as agent_parameters in the create-agent request." })), effectiveError && (_jsx(ErrorView, { error: "Launch failed", detail: effectiveError }))] }) }));
     }
     return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, title: `Parameterized Agent: ${String(formData.project ?? 'Project')}`, brandIcon: _jsx(FileIcon, { size: 16 }), placeholder: "Ask something about your configured project...", description: `Role: ${String(formData.role ?? 'n/a')} · Tone: ${String(formData.tone ?? 'n/a')}`, showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
             {

package/lib/examples/AgentSandboxExample.js

@@ -27,13 +27,13 @@ import { CodeIcon, StopIcon, TerminalIcon } 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 { SANDBOX_STATUS_COLORS, SANDBOX_STATUS_LABELS } from '../types/sandbox';
 // ─── Constants ─────────────────────────────────────────────────────────────
 const queryClient = new QueryClient();
 const AGENT_NAME = 'sandbox-example-agent';
-const AGENT_SPEC_ID = 'example-full';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const AGENTSPEC_ID = 'example-full';
 let _logId = 0;
 function tsNow() {
     return new Date().toISOString().slice(11, 23); // HH:MM:SS.mmm
@@ -63,7 +63,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     const chatAuthToken = token === null ? undefined : token;
-    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
     // ── Agent lifecycle ──
     const [runtimeStatus, setRuntimeStatus] = useState('launching');
     const [isReady, setIsReady] = useState(false);
@@ -120,7 +120,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
                         description: 'Agent with sandbox code execution',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         system_prompt: 'You are a helpful AI assistant with a Python execution sandbox. ' +
                             'When asked to run code, count, loop, assign variables, compute, or ' +
                             'perform any programming task, use the execute_code tool to run ' +
@@ -463,7 +463,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
                     py: 1,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running \u2014 reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs(Box, { sx: { position: 'relative', height: '100%' }, children: [_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Sandbox Agent", brandIcon: _jsx(TerminalIcon, { size: 16 }), placeholder: "Ask the agent to write and run code\u2026", 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(SegmentedControl, { "aria-label": "Sandbox variant", size: "small", onChange: index => {
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running \u2014 reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs(Box, { sx: { position: 'relative', height: '100%' }, children: [_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Sandbox Agent", brandIcon: _jsx(TerminalIcon, { size: 16 }), placeholder: "Ask the agent to write and run code\u2026", 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(SegmentedControl, { "aria-label": "Sandbox variant", size: "small", onChange: index => {
                                                     if (isTransitionLocked)
                                                         return;
                                                     void switchVariant(index === 0 ? 'eval' : 'jupyter');
@@ -491,7 +491,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
 };
 // ─── Auth wrapper ──────────────────────────────────────────────────────────
 const syncTokenToIamStore = (newToken) => {
-    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+    import('../state/substates').then(({ iamStore }) => {
         iamStore.setState({ token: newToken });
     });
 };
@@ -507,7 +507,7 @@ const AgentSandboxExample = () => {
     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/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 AGENT_SPEC_ID = 'example-skills';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const AGENTSPEC_ID = 'example-skills';
 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);
@@ -120,7 +120,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                         description: 'Agent with skills example - module, package and file based skills',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         enable_skills: true,
                         tools: [],
                     }),
@@ -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 AGENT_SPEC_ID = 'example-subagents';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const AGENTSPEC_ID = 'example-subagents';
 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,
@@ -76,7 +76,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                         description: 'Subagents example – multi-agent delegation with researcher and writer',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         enable_skills: true,
                         tools: [],
                     }),
@@ -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,13 +13,13 @@ 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_AGENT_SPEC_ID = 'example-tool-approvals';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
-const getSelectedAgentSpecIdFromUi = () => {
+const DEFAULT_AGENTSPEC_ID = 'example-tool-approvals';
+const getSelectedAgentspecIdFromUi = () => {
     const params = new URLSearchParams(window.location.search);
     const directKeys = [
         'agent_spec_id',
@@ -41,7 +41,7 @@ const getSelectedAgentSpecIdFromUi = () => {
             return specId;
         }
     }
-    return DEFAULT_AGENT_SPEC_ID;
+    return DEFAULT_AGENTSPEC_ID;
 };
 const buildAgentNameForSpec = (specId) => {
     const slug = specId
@@ -52,22 +52,34 @@ const buildAgentNameForSpec = (specId) => {
     const base = slug ? `${AGENT_NAME_PREFIX}-${slug}` : AGENT_NAME_PREFIX;
     return uniqueAgentId(base);
 };
+const parseDisableToolApprovalsFromUi = () => {
+    const params = new URLSearchParams(window.location.search);
+    const raw = params.get('disable_tool_approvals') ??
+        params.get('disableToolApprovals') ??
+        '';
+    const normalized = raw.trim().toLowerCase();
+    return ['1', 'true', 'yes', 'on'].includes(normalized);
+};
 const AgentToolApprovalsInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
-    const [selectedSpecId] = useState(() => getSelectedAgentSpecIdFromUi());
-    const agentName = useMemo(() => buildAgentNameForSpec(selectedSpecId), [selectedSpecId]);
+    const [selectedSpecId] = useState(() => getSelectedAgentspecIdFromUi());
+    const [disableToolApprovals, setDisableToolApprovals] = useState(() => parseDisableToolApprovalsFromUi());
+    const agentName = useMemo(() => buildAgentNameForSpec(`${selectedSpecId}-${disableToolApprovals ? 'no-approvals' : 'approvals'}`), [selectedSpecId, disableToolApprovals]);
     const [runtimeStatus, setRuntimeStatus] = useState('launching');
     const [isReady, setIsReady] = useState(false);
     const [hookError, setHookError] = useState(null);
     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' &&
         (!agentId || approval.agent_id === agentId)).length, [approvals, agentId]);
     const createAttemptedRef = useRef(false);
+    useEffect(() => {
+        createAttemptedRef.current = false;
+    }, [agentName]);
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -99,6 +111,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
                         enable_skills: false,
                         skills: [],
                         tools: ['runtime-echo', 'runtime-sensitive-echo'],
+                        disableToolApprovals: disableToolApprovals,
                     }),
                 });
                 let resolvedAgentId = agentName;
@@ -145,7 +158,13 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
         return () => {
             isCancelled = true;
         };
-    }, [agentBaseUrl, authFetch, agentName, selectedSpecId]);
+    }, [
+        agentBaseUrl,
+        authFetch,
+        agentName,
+        disableToolApprovals,
+        selectedSpecId,
+    ]);
     if (!isReady && runtimeStatus !== 'error') {
         return (_jsxs(Box, { sx: {
                 display: 'flex',
@@ -169,7 +188,14 @@ 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: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Pending: ", pendingApprovalCount] }) }), suggestions: [
+                }, 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,
+                                        color: 'var(--fgColor-muted)',
+                                        fontSize: 12,
+                                        cursor: 'pointer',
+                                    }, children: [_jsx("input", { type: "checkbox", checked: disableToolApprovals, onChange: event => setDisableToolApprovals(event.currentTarget.checked) }), "Disable tool approvals"] })] }), suggestions: [
                             {
                                 title: 'List your tools',
                                 message: 'list your tools',
@@ -197,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 });
     });
 };
@@ -213,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';
@@ -33,12 +34,11 @@ import { createUserMessage } from '../types/messages';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'trigger-example-agent';
-const AGENT_SPEC_ID = 'example-one-trigger';
-const APPROVAL_AGENT_NAME = 'trigger-approval-example-agent';
-const APPROVAL_AGENT_SPEC_ID = 'example-one-trigger-approval';
+const AGENTSPEC_ID = 'example-one-trigger';
+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);
@@ -232,7 +232,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                     description: 'Agent with cron, webhook, event, and manual triggers',
                     agent_library: 'pydantic-ai',
                     transport: 'vercel-ai',
-                    agent_spec_id: AGENT_SPEC_ID,
+                    agent_spec_id: AGENTSPEC_ID,
                 }),
             });
             let resolvedAgentId = agentName;
@@ -390,7 +390,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                 description: 'Agent with once trigger and tool approval',
                 agent_library: 'pydantic-ai',
                 transport: 'vercel-ai',
-                agent_spec_id: APPROVAL_AGENT_SPEC_ID,
+                agent_spec_id: APPROVAL_AGENTSPEC_ID,
                 enable_codemode: false,
             }),
         });
@@ -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]);