@datalayer/agent-runtimes 1.0.9 → 1.0.17

package/lib/examples/AgentMCPExample.js

@@ -15,14 +15,14 @@ import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { Chat } from '../chat';
 import { useAIAgentsWebSocket } from '../hooks';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { parseAgentStreamMessage } from '../types/stream';
 import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../types/mcp';
 import { MCP_SERVER_LIBRARY } from '../specs/mcpServers';
 const queryClient = new QueryClient();
 const AGENT_NAME = 'mcp-example-agent';
 // Must match agentspecs/agentspecs/agents/example-mcp.yaml `id`.
-const AGENT_SPEC_ID = 'example-mcp';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const AGENTSPEC_ID = 'example-mcp';
 /* ── Aggregate MCP status helpers ─────────────────────── */
 function deriveAggregate(servers) {
     if (!servers || servers.length === 0)
@@ -127,7 +127,7 @@ const AgentMCPInner = ({ onLogout }) => {
     const [liveMcpStatus, setLiveMcpStatus] = useState(undefined);
     // Pending approvals are now managed internally by ChatBase via the Zustand
     // agent-runtime store — no local state needed.
-    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
     const chatAuthToken = token === null ? undefined : token;
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -153,7 +153,7 @@ const AgentMCPInner = ({ onLogout }) => {
                         description: 'MCP example agent – web crawling and research via Tavily',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         enable_codemode: false,
                         enable_skills: true,
                         tools: [],
@@ -371,7 +371,7 @@ const AgentMCPInner = ({ 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 MCP example agent..." })] }));
     }
@@ -379,7 +379,7 @@ const AgentMCPInner = ({ 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: {
@@ -387,7 +387,7 @@ const AgentMCPInner = ({ 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: "MCP Demo Agent", brandIcon: _jsx(GlobeIcon, { size: 16 }), placeholder: "Ask the agent to search the web or explore GitHub...", showHeader: true, showNewChatButton: true, showClearButton: false, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, showToolApprovalBanner: true, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["MCP Tools: ", totalTools] }) }), 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: "MCP Demo Agent", brandIcon: _jsx(GlobeIcon, { size: 16 }), placeholder: "Ask the agent to search the web or explore GitHub...", showHeader: true, showNewChatButton: true, showClearButton: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, showToolApprovalBanner: true, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["MCP Tools: ", totalTools] }) }), suggestions: [
                                 {
                                     title: '🔍 Search the web',
                                     message: 'Search the web for recent news about AI agents.',
@@ -453,7 +453,7 @@ const AgentMCPInner = ({ onLogout }) => {
                                                                 }, children: [_jsx(ToolsIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Tools:" }), " Individual capabilities exposed by each server (search, fetch, etc.)"] })] })] })] })] }))] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
-    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+    import('../state/substates').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -469,7 +469,7 @@ const AgentMCPExample = () => {
     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/AgentMemoryExample.js

@@ -28,7 +28,7 @@ import { Chat } from '../chat';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'memory-example-agent';
-const AGENT_SPEC_ID = 'example-memory';
+const AGENTSPEC_ID = 'example-memory';
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentMemoryInner = ({ onLogout }) => {
     const { token } = useSimpleAuthStore();
@@ -66,7 +66,7 @@ const AgentMemoryInner = ({ onLogout }) => {
                         description: 'Agent with Mem0 persistent memory',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         enable_skills: true,
                         tools: [],
                     }),
@@ -162,7 +162,7 @@ const AgentMemoryInner = ({ 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 local memory-enabled agent\u2026" })] }));
     }
@@ -171,7 +171,7 @@ const AgentMemoryInner = ({ onLogout }) => {
     }
     // ── Main layout ──────────────────────────────────────────────────────────
     return (_jsxs(Box, { sx: {
-            height: 'calc(100vh - 60px)',
+            height: '100%',
             display: 'flex',
             flexDirection: 'column',
         }, children: [_jsxs(Box, { sx: {
@@ -244,7 +244,7 @@ const AgentMemoryInner = ({ 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 });
     });
 };
@@ -261,7 +261,7 @@ const AgentMemoryExample = () => {
     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/AgentMonitoringExample.js

@@ -30,15 +30,18 @@ import { GraphFlowChart } from '../context/GraphFlowChart';
 import { TurnGraphChart } from '../context/TurnGraphChart';
 import { useAIAgentsWebSocket } from '../hooks';
 import { parseAgentStreamMessage } from '../types/stream';
-import { useCoreStore } from '@datalayer/core/lib/state';
+import { useCoreStore } from '../state/substates';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
 const AGENT_NAME = 'monitoring-example-agent';
-const AGENT_SPEC_ID = 'example-monitoring';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const AGENTSPEC_ID = 'example-monitoring';
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL;
-const DATALAYER_RUN_URL_ENV = import.meta.env.DATALAYER_RUN_URL;
+// Consume-side OTEL override (DATALAYER_OTEL_IN_URL). When set, telemetry is
+// read from here instead of VITE_OTEL_BASE_URL (e.g. prod during local dev).
+const OTEL_IN_BASE_URL_ENV = import.meta.env.VITE_OTEL_IN_BASE_URL;
+const DATALAYER_URL_ENV = import.meta.env.VITE_DATALAYER_URL;
 const AgentMonitoringInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
@@ -55,11 +58,13 @@ const AgentMonitoringInner = ({ onLogout, }) => {
     const [liveMcpStatus, setLiveMcpStatus] = useState(undefined);
     const [monitorLastSnapshotAt, setMonitorLastSnapshotAt] = useState(null);
     const [liveGraphTelemetry, setLiveGraphTelemetry] = useState(undefined);
-    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
-    const otelBaseUrl = configuration?.otelRunUrl ||
-        configuration?.runUrl ||
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
+    const otelBaseUrl = configuration?.otelInUrl ||
+        OTEL_IN_BASE_URL_ENV ||
+        configuration?.otelUrl ||
+        configuration?.datalayerUrl ||
         OTEL_BASE_URL_ENV ||
-        DATALAYER_RUN_URL_ENV ||
+        DATALAYER_URL_ENV ||
         'https://prod1.datalayer.run';
     const podName = agentId;
     // The OTEL service_name resource attribute is 'agent-runtimes' (the
@@ -90,7 +95,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                         description: 'MCP monitoring example – web crawling via Tavily with live cost/token metrics',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         enable_skills: true,
                         tools: [],
                     }),
@@ -139,54 +144,119 @@ const AgentMonitoringInner = ({ onLogout, }) => {
         return () => {
             isCancelled = true;
         };
-    }, [agentBaseUrl, authFetch]);
+    }, [agentBaseUrl, agentName, authFetch]);
     const handleMonitoringStreamMessage = useCallback((message) => {
         try {
             const stream = parseAgentStreamMessage(message?.raw ?? message);
             if (!stream || stream.type !== 'agent.snapshot') {
                 return;
             }
+            // Snapshot payloads may arrive with camelCase (TS types) or snake_case
+            // (Python backend) keys. Read both for consistency with the UI.
+            const asRecord = (value) => value && typeof value === 'object'
+                ? value
+                : {};
+            const pick = (source, keys) => {
+                for (const key of keys) {
+                    const value = source[key];
+                    if (value !== undefined && value !== null) {
+                        return value;
+                    }
+                }
+                return undefined;
+            };
+            const pickNumber = (source, keys, fallback = 0) => {
+                const value = pick(source, keys);
+                const parsed = Number(value);
+                return Number.isFinite(parsed) ? parsed : fallback;
+            };
+            const pickOptionalNumber = (source, keys) => {
+                const value = pick(source, keys);
+                if (value === undefined || value === null) {
+                    return null;
+                }
+                const parsed = Number(value);
+                return Number.isFinite(parsed) ? parsed : null;
+            };
+            const payloadRecord = asRecord(stream.payload);
             const payload = stream.payload;
-            if (payload.contextSnapshot) {
-                setLiveContext(payload.contextSnapshot);
-                setLiveContextSnapshot(payload.contextSnapshot);
+            const contextSnapshot = pick(payloadRecord, [
+                'contextSnapshot',
+                'context_snapshot',
+            ]);
+            if (contextSnapshot) {
+                setLiveContext(contextSnapshot);
+                setLiveContextSnapshot(contextSnapshot);
                 setMonitorLastSnapshotAt(Date.now());
             }
-            if (payload.mcpStatus !== undefined) {
-                setLiveMcpStatus(payload.mcpStatus ?? undefined);
+            const mcpStatus = pick(payloadRecord, ['mcpStatus', 'mcp_status']);
+            if (mcpStatus !== undefined) {
+                setLiveMcpStatus(mcpStatus ?? undefined);
             }
             if (payload.graphTelemetry) {
                 setLiveGraphTelemetry(payload.graphTelemetry);
             }
-            const snapshotCost = payload.contextSnapshot?.costUsage ?? payload.costUsage;
-            if (!snapshotCost) {
+            const snapshotCost = asRecord(pick(asRecord(contextSnapshot), ['costUsage', 'cost_usage']) ??
+                pick(payloadRecord, ['costUsage', 'cost_usage']));
+            if (!snapshotCost || Object.keys(snapshotCost).length === 0) {
                 return;
             }
+            const modelBreakdown = pick(snapshotCost, [
+                'modelBreakdown',
+                'model_breakdown',
+            ]);
+            const runs = pick(snapshotCost, ['runs']);
             setLiveCost({
                 agentId,
-                lastTurnCostUsd: Number(snapshotCost.lastTurnCostUsd ?? 0),
-                cumulativeCostUsd: Number(snapshotCost.cumulativeCostUsd ?? 0),
-                perRunBudgetUsd: snapshotCost.perRunBudgetUsd == null
-                    ? null
-                    : Number(snapshotCost.perRunBudgetUsd),
-                cumulativeBudgetUsd: snapshotCost.cumulativeBudgetUsd == null
-                    ? null
-                    : Number(snapshotCost.cumulativeBudgetUsd),
-                requestCount: Number(snapshotCost.requestCount ?? 0),
-                totalTokensUsed: Number(snapshotCost.totalTokensUsed ?? 0),
-                modelBreakdown: Array.isArray(snapshotCost.modelBreakdown)
-                    ? snapshotCost.modelBreakdown.map(item => ({
-                        model: String(item.model ?? 'unknown'),
-                        inputTokens: Number(item.inputTokens ?? 0),
-                        outputTokens: Number(item.outputTokens ?? 0),
-                        costUsd: Number(item.costUsd ?? 0),
-                        requests: Number(item.requests ?? 0),
-                    }))
+                lastTurnCostUsd: pickNumber(snapshotCost, [
+                    'lastTurnCostUsd',
+                    'last_turn_cost_usd',
+                ]),
+                cumulativeCostUsd: pickNumber(snapshotCost, [
+                    'cumulativeCostUsd',
+                    'cumulative_cost_usd',
+                ]),
+                perRunBudgetUsd: pickOptionalNumber(snapshotCost, [
+                    'perRunBudgetUsd',
+                    'per_run_budget_usd',
+                ]),
+                cumulativeBudgetUsd: pickOptionalNumber(snapshotCost, [
+                    'cumulativeBudgetUsd',
+                    'cumulative_budget_usd',
+                ]),
+                requestCount: pickNumber(snapshotCost, [
+                    'requestCount',
+                    'request_count',
+                ]),
+                totalTokensUsed: pickNumber(snapshotCost, [
+                    'totalTokensUsed',
+                    'total_tokens_used',
+                ]),
+                modelBreakdown: Array.isArray(modelBreakdown)
+                    ? modelBreakdown.map(entry => {
+                        const item = asRecord(entry);
+                        return {
+                            model: String(pick(item, ['model']) ?? 'unknown'),
+                            inputTokens: pickNumber(item, [
+                                'inputTokens',
+                                'input_tokens',
+                            ]),
+                            outputTokens: pickNumber(item, [
+                                'outputTokens',
+                                'output_tokens',
+                            ]),
+                            costUsd: pickNumber(item, ['costUsd', 'cost_usd']),
+                            requests: pickNumber(item, ['requests']),
+                        };
+                    })
                     : [],
-                runs: Array.isArray(snapshotCost.runs)
-                    ? snapshotCost.runs.map(item => ({
-                        pricingResolved: Boolean(item.pricingResolved),
-                    }))
+                runs: Array.isArray(runs)
+                    ? runs.map(entry => {
+                        const item = asRecord(entry);
+                        return {
+                            pricingResolved: Boolean(pick(item, ['pricingResolved', 'pricing_resolved'])),
+                        };
+                    })
                     : undefined,
             });
         }
@@ -213,7 +283,7 @@ const AgentMonitoringInner = ({ 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 local monitoring example agent..." })] }));
     }
@@ -221,7 +291,7 @@ const AgentMonitoringInner = ({ 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: {
@@ -254,11 +324,11 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Token Usage" }), _jsx(TokenUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, runUrl: otelBaseUrl, liveSystemPromptTokens: liveContextSnapshot?.systemPromptTokens, liveUserMessageTokens: liveContextSnapshot?.userMessageTokens, liveAgentMessageTokens: liveContextSnapshot?.assistantMessageTokens, liveToolsUsageTokens: liveContextSnapshot?.toolTokens, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Token Usage" }), _jsx(TokenUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, datalayerUrl: otelBaseUrl, liveSystemPromptTokens: liveContextSnapshot?.systemPromptTokens, liveUserMessageTokens: liveContextSnapshot?.userMessageTokens, liveAgentMessageTokens: liveContextSnapshot?.assistantMessageTokens, liveToolsUsageTokens: liveContextSnapshot?.toolTokens, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Cost" }), _jsx(CostUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, runUrl: otelBaseUrl, liveCumulativeUsd: liveCost?.cumulativeCostUsd, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Cost" }), _jsx(CostUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, datalayerUrl: otelBaseUrl, liveCumulativeUsd: liveCost?.cumulativeCostUsd, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
@@ -335,10 +405,10 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Turn Execution Graph (OTEL traces)" }), _jsx(TurnGraphChart, { serviceName: otelServiceName, agentId: agentId, runUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Turn Execution Graph (OTEL traces)" }), _jsx(TurnGraphChart, { serviceName: otelServiceName, agentId: agentId, datalayerUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
-    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+    import('../state/substates').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
@@ -354,7 +424,7 @@ const AgentMonitoringExample = () => {
     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/AgentNotificationsExample.js

@@ -28,7 +28,7 @@ import { Chat } from '../chat';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'notification-example-agent';
-const AGENT_SPEC_ID = 'example-notifications';
+const AGENTSPEC_ID = 'example-notifications';
 const alertVariant = (severity) => {
     if (severity === 'critical')
         return 'danger';
@@ -78,7 +78,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                         description: 'Agent with multi-channel notification support',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         enable_skills: true,
                         tools: [],
                     }),
@@ -213,7 +213,7 @@ const AgentNotificationsInner = ({ 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 local notification agent\u2026" })] }));
     }
@@ -238,7 +238,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
         }
     };
     return (_jsxs(Box, { sx: {
-            height: 'calc(100vh - 60px)',
+            height: '100%',
             display: 'flex',
             flexDirection: 'column',
         }, children: [_jsxs(Box, { sx: {
@@ -319,7 +319,7 @@ const AgentNotificationsInner = ({ 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 });
     });
 };
@@ -336,7 +336,7 @@ const AgentNotificationsExample = () => {
     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/AgentOtelExample.d.ts

@@ -7,9 +7,9 @@
  * is a ChatSidebar whose agent is selected from the agent-runtimes library spec
  * list and launched on demand.
  *
- * The OTEL backend is configured via `configuration.otelRunUrl` when available
- * (falling back to `configuration.runUrl`, then `VITE_OTEL_BASE_URL`, then
- * `VITE_DATALAYER_RUN_URL`, then https://prod1.datalayer.run).
+ * The OTEL backend is configured via `configuration.otelUrl` when available
+ * (falling back to `configuration.datalayerUrl`, then `VITE_OTEL_BASE_URL`, then
+ * `VITE_DATALAYER_URL`, then https://prod1.datalayer.run).
  * Agent routes use `VITE_BASE_URL` when provided, otherwise the same resolved
  * direct run URL to avoid proxy-relative calls.
  *

package/lib/examples/AgentOtelExample.js

@@ -12,9 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * is a ChatSidebar whose agent is selected from the agent-runtimes library spec
  * list and launched on demand.
  *
- * The OTEL backend is configured via `configuration.otelRunUrl` when available
- * (falling back to `configuration.runUrl`, then `VITE_OTEL_BASE_URL`, then
- * `VITE_DATALAYER_RUN_URL`, then https://prod1.datalayer.run).
+ * The OTEL backend is configured via `configuration.otelUrl` when available
+ * (falling back to `configuration.datalayerUrl`, then `VITE_OTEL_BASE_URL`, then
+ * `VITE_DATALAYER_URL`, then https://prod1.datalayer.run).
  * Agent routes use `VITE_BASE_URL` when provided, otherwise the same resolved
  * direct run URL to avoid proxy-relative calls.
  *
@@ -34,7 +34,10 @@ import { AuthRequiredView } from './components';
 import { ChatSidebar } from '../chat';
 // ─── Environment / defaults ────────────────────────────────────────────────
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL ?? '';
-const DATALAYER_RUN_URL_ENV = import.meta.env.VITE_DATALAYER_RUN_URL ?? '';
+// Consume-side OTEL override (DATALAYER_OTEL_IN_URL). When set, telemetry is
+// read from here instead of VITE_OTEL_BASE_URL (e.g. prod during local dev).
+const OTEL_IN_BASE_URL_ENV = import.meta.env.VITE_OTEL_IN_BASE_URL ?? '';
+const DATALAYER_URL_ENV = import.meta.env.VITE_DATALAYER_URL ?? '';
 /**
  * Base URL of the agent-runtimes server.
  * Defaults to proxy-relative calls when VITE_BASE_URL is unset.
@@ -43,7 +46,7 @@ const AGENT_BASE_URL_ENV = import.meta.env.VITE_BASE_URL || '';
 const DEFAULT_AGENT_PROTOCOL = 'vercel-ai';
 const DEFAULT_AGENT_LIBRARY = 'pydantic-ai';
 /** Spec id this example always launches. */
-const AGENT_SPEC_ID = 'example-otel';
+const AGENTSPEC_ID = 'example-otel';
 /**
  * Small form for picking an agent spec and launching it.
  * Renders as the `children` of the ChatSidebar so it appears above the chat.
@@ -61,11 +64,11 @@ const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, c
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    name: AGENT_SPEC_ID,
+                    name: AGENTSPEC_ID,
                     description: `Launched from AgentOtelExample`,
                     agent_library: DEFAULT_AGENT_LIBRARY,
                     transport,
-                    agent_spec_id: AGENT_SPEC_ID,
+                    agent_spec_id: AGENTSPEC_ID,
                 }),
             });
             if (!res.ok) {
@@ -74,7 +77,7 @@ const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, c
                 // Reuse existing agent when backend reports duplicate creation.
                 if (res.status === 409 || /already exists/i.test(detail)) {
                     const idMatch = detail.match(/Agent with ID '([^']+)' already exists/i);
-                    const existingId = idMatch?.[1] || AGENT_SPEC_ID;
+                    const existingId = idMatch?.[1] || AGENTSPEC_ID;
                     onConnected(existingId, transport);
                     return;
                 }
@@ -121,7 +124,7 @@ const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, c
             gap: 2,
             flexShrink: 0,
             bg: 'canvas.subtle',
-        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "AGENT" }), loading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENT_SPEC_ID, "\u2026"] })] })) : error ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }), _jsx(Button, { variant: "primary", size: "small", onClick: handleLaunch, leadingVisual: PlugIcon, sx: { width: '100%' }, children: "Retry" })] })) : (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENT_SPEC_ID, "\u2026"] }))] }));
+        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "AGENT" }), loading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENTSPEC_ID, "\u2026"] })] })) : error ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }), _jsx(Button, { variant: "primary", size: "small", onClick: handleLaunch, leadingVisual: PlugIcon, sx: { width: '100%' }, children: "Retry" })] })) : (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENTSPEC_ID, "\u2026"] }))] }));
 };
 const TAB_SX = (active) => ({
     px: 3,
@@ -136,12 +139,14 @@ const TAB_SX = (active) => ({
 });
 const AgentOtelExampleInner = ({ token }) => {
     const { configuration } = useCoreStore();
-    const resolvedRunUrl = configuration?.otelRunUrl ||
-        configuration?.runUrl ||
+    const resolvedUrl = configuration?.otelInUrl ||
+        OTEL_IN_BASE_URL_ENV ||
+        configuration?.otelUrl ||
+        configuration?.datalayerUrl ||
         OTEL_BASE_URL_ENV ||
-        DATALAYER_RUN_URL_ENV ||
+        DATALAYER_URL_ENV ||
         'https://prod1.datalayer.run';
-    const otelBaseUrl = resolvedRunUrl;
+    const otelBaseUrl = resolvedUrl;
     const agentBaseUrl = AGENT_BASE_URL_ENV;
     // ── OTEL view state ─────────────────────────────────────────────
     const [view, setView] = useState('dashboard');
@@ -180,7 +185,7 @@ const AgentOtelExampleInner = ({ token }) => {
         if (connectedAgentTransport === 'ag-ui') {
             return {
                 type: 'ag-ui',
-                endpoint: `${agentBaseUrl}/api/v1/examples/${connectedAgentId}/`,
+                endpoint: `${agentBaseUrl}/api/v1/ag-ui/${connectedAgentId}/`,
                 agentId: connectedAgentId,
             };
         }
@@ -208,7 +213,7 @@ const AgentOtelExampleInner = ({ token }) => {
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
-            height: 'calc(100vh - 90px)',
+            height: '100%',
             overflow: 'hidden',
             bg: 'canvas.default',
             color: 'fg.default',

package/lib/examples/AgentOutputsExample.js

@@ -31,11 +31,11 @@ import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { Chat } from '../chat';
 import { useChatStore } from '../stores/chatStore';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'outputs-example-agent';
-const AGENT_SPEC_ID = 'demo-outputs';
-const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const AGENTSPEC_ID = 'demo-outputs';
 // ─── Output detection ──────────────────────────────────────────────────────
 const FENCE_RE = /```([a-zA-Z0-9_+-]*)\n([\s\S]*?)```/g;
 const MD_TABLE_RE = /(^|\n)\s*\|[^\n]+\|\s*\n\s*\|[\s:|-]+\|\s*\n(\s*\|[^\n]+\|\s*\n?)+/;
@@ -281,7 +281,7 @@ const AgentOutputsInner = ({ 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,
@@ -306,7 +306,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
                         description: 'Agent with rich output rendering (table/JSON/chart/file)',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
-                        agent_spec_id: AGENT_SPEC_ID,
+                        agent_spec_id: AGENTSPEC_ID,
                         enable_skills: true,
                         tools: [],
                     }),
@@ -399,7 +399,7 @@ const AgentOutputsInner = ({ 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: runtimeStatus === 'launching'
                         ? 'Launching outputs example agent...'
@@ -422,7 +422,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
         URL.revokeObjectURL(url);
     };
     return (_jsxs(Box, { sx: {
-            height: 'calc(100vh - 60px)',
+            height: '100%',
             display: 'flex',
             flexDirection: 'column',
         }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
@@ -528,7 +528,7 @@ const AgentOutputsInner = ({ 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 });
     });
 };
@@ -545,7 +545,7 @@ const AgentOutputsExample = () => {
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
-        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        import('../state/substates').then(({ iamStore }) => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);