@datalayer/agent-runtimes 1.0.19 → 1.0.21

package/lib/examples/AgentMemoryExample.js

@@ -6,8 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentMemoryExample
  *
- * Demonstrates the Mem0 memory backend for durable agents.
- * Creates a local agent-runtimes agent using the `example-memory` spec.
+ * Demonstrates durable agent memory.
+ * Uses a local SQLite store for local runs (offline, no API key) and
+ * pgvector-backed Mem0 (PostgreSQL) for cloud runs when server-side
+ * postgres env is configured.
  *
  * The left panel shows a standard Chat. The right panel shows the
  * agent's memory contents (fetched from the runtime sidecar) and lets
@@ -17,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, TextInput, Heading, Label, Flash, } from '@primer/react';
-import { SearchIcon, DatabaseIcon } from '@primer/octicons-react';
+import { SearchIcon, DatabaseIcon, ListUnorderedIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
@@ -25,7 +27,9 @@ import { uniqueAgentId } from './utils/agentId';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
+import { listRuntimeMemories } from '../api/runtimes/runtimes';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useRuntimeTargetStore } from './utils/runtimeTargetStore';
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'memory-example-agent';
 const AGENTSPEC_ID = 'example-memory';
@@ -34,13 +38,17 @@ const AgentMemoryInner = ({ onLogout }) => {
     const { token } = useSimpleAuthStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     const agentBaseUrl = useExampleAgentRuntimesUrl();
+    const runtimeTarget = useRuntimeTargetStore(state => state.target);
     const [runtimeStatus, setRuntimeStatus] = useState('launching');
     const [isReady, setIsReady] = useState(false);
     const [hookError, setHookError] = useState(null);
     const [agentId, setAgentId] = useState(agentName);
     const [memories, setMemories] = useState([]);
+    const [accountMemories, setAccountMemories] = useState([]);
+    const [accountMemoriesError, setAccountMemoriesError] = useState(null);
     const [searchQuery, setSearchQuery] = useState('');
     const [searchResults, setSearchResults] = useState([]);
+    const [searchAttempted, setSearchAttempted] = useState(false);
     const [searching, setSearching] = useState(false);
     const podName = isReady ? `local:${agentId}` : '(launching…)';
     // Authenticated fetch helper (for sidecar endpoints)
@@ -63,10 +71,11 @@ const AgentMemoryInner = ({ onLogout }) => {
                     method: 'POST',
                     body: JSON.stringify({
                         name: agentName,
-                        description: 'Agent with Mem0 persistent memory',
+                        description: 'Agent with persistent memory',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
                         agent_spec_id: AGENTSPEC_ID,
+                        memory: runtimeTarget === 'local' ? 'sqlite' : 'mem0',
                         enable_skills: true,
                         tools: [],
                     }),
@@ -110,7 +119,7 @@ const AgentMemoryInner = ({ onLogout }) => {
         return () => {
             isCancelled = true;
         };
-    }, [agentBaseUrl, agentName, authFetch]);
+    }, [agentBaseUrl, agentName, authFetch, runtimeTarget]);
     // ── Fetch memory list ────────────────────────────────────────────────────
     const fetchMemories = useCallback(async () => {
         if (!isReady || !agentBaseUrl)
@@ -133,10 +142,48 @@ const AgentMemoryInner = ({ onLogout }) => {
             return () => clearInterval(interval);
         }
     }, [isReady, fetchMemories]);
+    const fetchAccountMemories = useCallback(async () => {
+        if (!isReady || !agentBaseUrl || !token) {
+            return;
+        }
+        try {
+            const response = await listRuntimeMemories(token, { agentId: agentId, limit: 10 }, agentBaseUrl);
+            const normalized = (response.memories || []).map((item) => ({
+                id: String(item?.id || ''),
+                content: String(item?.memory || ''),
+                score: typeof item?.score === 'number' ? item.score : undefined,
+                metadata: item?.metadata && typeof item.metadata === 'object'
+                    ? item.metadata
+                    : undefined,
+            }));
+            setAccountMemories(normalized);
+            setAccountMemoriesError(null);
+        }
+        catch (error) {
+            setAccountMemories([]);
+            const rawMessage = String(error?.message || '');
+            const isMissingEndpoint = /404|not\s*found/i.test(rawMessage);
+            setAccountMemoriesError(isMissingEndpoint
+                ? 'Runtimes memory API endpoint is not available in this environment (expected in local example-only mode).'
+                : rawMessage ||
+                    'Runtimes memory API is not available in this environment.');
+        }
+    }, [agentBaseUrl, agentId, isReady, token]);
+    useEffect(() => {
+        if (!isReady) {
+            return;
+        }
+        void fetchAccountMemories();
+        const interval = setInterval(() => {
+            void fetchAccountMemories();
+        }, 15_000);
+        return () => clearInterval(interval);
+    }, [fetchAccountMemories, isReady]);
     // ── Search memory ────────────────────────────────────────────────────────
     const handleSearch = useCallback(async () => {
         if (!isReady || !agentBaseUrl || !searchQuery.trim())
             return;
+        setSearchAttempted(true);
         setSearching(true);
         try {
             const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/memory/search`, {
@@ -147,14 +194,25 @@ const AgentMemoryInner = ({ onLogout }) => {
                 const data = await res.json();
                 setSearchResults(Array.isArray(data) ? data : (data.results ?? []));
             }
+            else {
+                setSearchResults([]);
+            }
         }
         catch {
             // Endpoint may not exist yet
+            setSearchResults([]);
         }
         finally {
             setSearching(false);
         }
     }, [isReady, agentBaseUrl, agentId, searchQuery, authFetch]);
+    // ── List all memories (clears any active search) ──────────────────────────
+    const handleListAll = useCallback(() => {
+        setSearchQuery('');
+        setSearchResults([]);
+        setSearchAttempted(false);
+        void fetchMemories();
+    }, [fetchMemories]);
     // ── Loading state ────────────────────────────────────────────────────────
     if (!isReady && runtimeStatus !== 'error') {
         return (_jsxs(Box, { sx: {
@@ -164,6 +222,7 @@ const AgentMemoryInner = ({ onLogout }) => {
                 justifyContent: 'center',
                 height: '100%',
                 gap: 3,
+                bg: 'canvas.default',
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local memory-enabled agent\u2026" })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
@@ -174,6 +233,7 @@ const AgentMemoryInner = ({ onLogout }) => {
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
+            bg: 'canvas.default',
         }, children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
@@ -188,7 +248,7 @@ const AgentMemoryInner = ({ onLogout }) => {
                             minWidth: 0,
                             borderRight: '1px solid',
                             borderColor: 'border.default',
-                        }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Memory Agent", brandIcon: _jsx(DatabaseIcon, { size: 16 }), placeholder: "Chat \u2014 the agent remembers you across sessions\u2026", description: "Agent with Mem0 persistent memory", showHeader: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                        }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Memory Agent", brandIcon: _jsx(DatabaseIcon, { size: 16 }), placeholder: "Chat \u2014 the agent remembers you across sessions\u2026", description: "Agent with persistent memory", showHeader: true, kernelIndicatorPlacement: "right", showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'Remember',
                                     message: 'My favourite colour is midnight blue.',
@@ -203,13 +263,15 @@ const AgentMemoryInner = ({ onLogout }) => {
                             flexShrink: 0,
                             display: 'flex',
                             flexDirection: 'column',
-                            bg: 'canvas.subtle',
+                            bg: 'canvas.default',
                         }, children: [_jsxs(Box, { sx: {
                                     px: 3,
                                     py: 2,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Memory Inspector" })] }), _jsx(Label, { variant: "accent", sx: { mb: 2 }, children: "Mem0 backend" }), _jsxs(Box, { sx: { display: 'flex', gap: 1, mt: 2 }, children: [_jsx(TextInput, { size: "small", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: "Search agent memory\u2026", sx: { flex: 1 }, onKeyDown: e => e.key === 'Enter' && handleSearch() }), _jsx(Button, { size: "small", leadingVisual: SearchIcon, onClick: handleSearch, disabled: searching, children: searching ? _jsx(Spinner, { size: "small" }) : 'Search' })] })] }), searchResults.length > 0 && (_jsxs(Box, { sx: {
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Memory Inspector" })] }), _jsx(Label, { variant: "accent", sx: { mb: 2 }, children: runtimeTarget === 'local'
+                                            ? 'SQLite backend (local, persistent)'
+                                            : 'Mem0 pgvector backend (cloud)' }), _jsx(Flash, { variant: "default", sx: { fontSize: 0, mt: 2 }, children: "Memory persistence conditions: for local runs the agent uses a durable SQLite store; for cloud runs it uses Mem0. Durable facts are saved when the model emits a remember action (not every turn)." }), _jsxs(Box, { sx: { display: 'flex', gap: 1, mt: 2 }, children: [_jsx(TextInput, { size: "small", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: "Search agent memory\u2026", sx: { flex: 1 }, onKeyDown: e => e.key === 'Enter' && handleSearch() }), _jsx(Button, { size: "small", leadingVisual: SearchIcon, onClick: handleSearch, disabled: searching, children: searching ? _jsx(Spinner, { size: "small" }) : 'Search' }), _jsx(Button, { size: "small", leadingVisual: ListUnorderedIcon, onClick: handleListAll, children: "List all" })] })] }), searchResults.length > 0 && (_jsxs(Box, { sx: {
                                     px: 3,
                                     py: 2,
                                     borderBottom: '1px solid',
@@ -227,7 +289,15 @@ const AgentMemoryInner = ({ onLogout }) => {
                                             border: '1px solid',
                                             borderColor: 'border.muted',
                                             fontSize: 0,
-                                        }, children: [_jsx(Text, { sx: { display: 'block' }, children: entry.content }), entry.score != null && (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: '10px' }, children: ["score: ", entry.score.toFixed(3)] }))] }, entry.id || i)))] })), _jsxs(Box, { sx: { flex: 1, overflow: 'auto', px: 3, py: 2 }, children: [_jsxs(Box, { sx: {
+                                        }, children: [_jsx(Text, { sx: { display: 'block' }, children: entry.content }), entry.score != null && (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: '10px' }, children: ["score: ", entry.score.toFixed(3)] }))] }, entry.id || i)))] })), searchAttempted &&
+                                !searching &&
+                                searchQuery.trim() &&
+                                searchResults.length === 0 && (_jsx(Box, { sx: {
+                                    px: 3,
+                                    py: 2,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: _jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No matching memories found for this query yet." }) })), _jsxs(Box, { sx: { flex: 1, overflow: 'auto', px: 3, py: 2 }, children: [_jsxs(Box, { sx: {
                                             display: 'flex',
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
@@ -240,7 +310,20 @@ const AgentMemoryInner = ({ onLogout }) => {
                                             border: '1px solid',
                                             borderColor: 'border.muted',
                                             fontSize: 0,
-                                        }, children: _jsx(Text, { sx: { display: 'block' }, children: entry.content }) }, entry.id || i))))] })] })] })] }));
+                                        }, children: _jsx(Text, { sx: { display: 'block' }, children: entry.content }) }, entry.id || i)))), _jsxs(Box, { sx: { mt: 3 }, children: [_jsx(Text, { sx: {
+                                                    fontWeight: 'semibold',
+                                                    fontSize: 0,
+                                                    display: 'block',
+                                                    mb: 2,
+                                                }, children: "Runtimes API (account scoped)" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block', mb: 2 }, children: "Uses listRuntimeMemories against /api/runtimes/v1/memories. This endpoint is only available when the runtimes service is configured; local example-only runs may return Not Found." }), accountMemoriesError ? (_jsx(Flash, { variant: "warning", sx: { fontSize: 0, mb: 2 }, children: accountMemoriesError })) : null, accountMemories.length === 0 ? (_jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No runtime memories returned." })) : (accountMemories.map((entry, i) => (_jsx(Box, { sx: {
+                                                    p: 2,
+                                                    mb: 1,
+                                                    bg: 'canvas.default',
+                                                    borderRadius: 2,
+                                                    border: '1px solid',
+                                                    borderColor: 'border.muted',
+                                                    fontSize: 0,
+                                                }, children: _jsx(Text, { sx: { display: 'block' }, children: entry.content }) }, `runtime-${entry.id || i}`))))] })] })] })] })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/AgentMonitoringExample.js

@@ -65,7 +65,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
         configuration?.datalayerUrl ||
         OTEL_BASE_URL_ENV ||
         DATALAYER_URL_ENV ||
-        'https://prod1.datalayer.run';
+        agentBaseUrl;
     const podName = agentId;
     // The OTEL service_name resource attribute is 'agent-runtimes' (the
     // application name), NOT the individual agent ID.  Use the correct value
@@ -337,7 +337,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                                     fontSize: 0,
                                                     mt: 1,
                                                     display: 'block',
-                                                }, children: ["Last close: ", monitorSocket.lastClose.detail] }))] }))] })] }), _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Monitoring Agent", brandIcon: _jsx(GraphIcon, { size: 16 }), placeholder: "Ask for cost, token usage, and turn-level monitoring insights...", description: `${alerts.length} active alert${alerts.length !== 1 ? 's' : ''}`, showHeader: true, showTokenUsage: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                                }, children: ["Last close: ", monitorSocket.lastClose.detail] }))] }))] })] }), _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Monitoring Agent", brandIcon: _jsx(GraphIcon, { size: 16 }), placeholder: "Ask for cost, token usage, and turn-level monitoring insights...", description: `${alerts.length} active alert${alerts.length !== 1 ? 's' : ''}`, showHeader: true, kernelIndicatorPlacement: "right", showTokenUsage: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: '▶ No-tool turn',
                                     message: 'Briefly introduce yourself without calling any tool or skill — produces a linear Start → Model → Decision → End graph.',

package/lib/examples/AgentNotificationsExample.js

@@ -250,7 +250,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(BellIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Notifications \u2014 ", podName] }), unreadCount > 0 && (_jsxs(Label, { variant: "accent", size: "small", children: [unreadCount, " unread"] }))] }), _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, title: "Notification Agent", brandIcon: _jsx(BellIcon, { size: 16 }), placeholder: "Ask the agent to send you notifications\u2026", description: `${unreadCount} unread notification${unreadCount !== 1 ? 's' : ''}`, showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                }, children: [_jsx(BellIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Notifications \u2014 ", podName] }), unreadCount > 0 && (_jsxs(Label, { variant: "accent", size: "small", children: [unreadCount, " unread"] }))] }), _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, title: "Notification Agent", brandIcon: _jsx(BellIcon, { size: 16 }), placeholder: "Ask the agent to send you notifications\u2026", description: `${unreadCount} unread notification${unreadCount !== 1 ? 's' : ''}`, showHeader: true, kernelIndicatorPlacement: "right", autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'Alert me',
                                     message: 'Notify me when KPIs drop below threshold',

package/lib/examples/AgentOtelExample.d.ts

@@ -9,9 +9,8 @@
  *
  * 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.
+ * `VITE_DATALAYER_URL`, then the resolved runtime base URL).
+ * Agent routes resolve from the shared local/cloud runtime target hook.
  *
  * For Python-side observability, wire in `agent_runtimes/otel.py`:
  *   from agent_runtimes.otel import setup_otel

package/lib/examples/AgentOtelExample.js

@@ -14,9 +14,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-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.
+ * `VITE_DATALAYER_URL`, then the resolved runtime base URL).
+ * Agent routes resolve from the shared local/cloud runtime target hook.
  *
  * For Python-side observability, wire in `agent_runtimes/otel.py`:
  *   from agent_runtimes.otel import setup_otel
@@ -32,17 +31,13 @@ import { useCoreStore } from '@datalayer/core';
 import { ThemedProvider } from './utils/themedProvider';
 import { AuthRequiredView } from './components';
 import { ChatSidebar } from '../chat';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 // ─── Environment / defaults ────────────────────────────────────────────────
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_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.
- */
-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. */
@@ -123,7 +118,7 @@ const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, c
             flexDirection: 'column',
             gap: 2,
             flexShrink: 0,
-            bg: 'canvas.subtle',
+            bg: 'canvas.default',
         }, 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) => ({
@@ -139,15 +134,15 @@ const TAB_SX = (active) => ({
 });
 const AgentOtelExampleInner = ({ token }) => {
     const { configuration } = useCoreStore();
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
     const resolvedUrl = configuration?.otelInUrl ||
         OTEL_IN_BASE_URL_ENV ||
         configuration?.otelUrl ||
         configuration?.datalayerUrl ||
         OTEL_BASE_URL_ENV ||
         DATALAYER_URL_ENV ||
-        'https://prod1.datalayer.run';
+        agentBaseUrl;
     const otelBaseUrl = resolvedUrl;
-    const agentBaseUrl = AGENT_BASE_URL_ENV;
     // ── OTEL view state ─────────────────────────────────────────────
     const [view, setView] = useState('dashboard');
     const signalSetterRef = useRef(null);
@@ -241,7 +236,7 @@ const AgentOtelExampleInner = ({ token }) => {
                                     flex: 1,
                                     minHeight: 0,
                                     overflow: 'hidden',
-                                }, children: view === 'dashboard' ? (_jsx(DashboardView, { baseUrl: otelBaseUrl, wsBaseUrl: otelBaseUrl, token: token, autoRefreshMs: 5000, defaultSignal: "traces", limit: 200, onSignalRef: handleSignalRef })) : view === 'sql' ? (_jsx(SqlView, { baseUrl: otelBaseUrl, token: token })) : (_jsx(SystemView, { baseUrl: otelBaseUrl, token: token })) })] }), _jsx(ChatSidebar, { title: "AI Agent", protocol: protocolConfig, position: "right", width: 380, defaultOpen: true, showNewChatButton: true, showClearButton: true, showSettingsButton: false, clickOutsideToClose: false, placeholder: "Ask the agent about your telemetry data\u2026", description: "Connect an agent to start chatting about your traces, logs, and metrics.", panelProps: protocolConfig
+                                }, children: view === 'dashboard' ? (_jsx(DashboardView, { baseUrl: otelBaseUrl, wsBaseUrl: otelBaseUrl, token: token, autoRefreshMs: 5000, defaultSignal: "traces", limit: 200, onSignalRef: handleSignalRef })) : view === 'sql' ? (_jsx(SqlView, { baseUrl: otelBaseUrl, token: token })) : (_jsx(SystemView, { baseUrl: otelBaseUrl, token: token })) })] }), _jsx(ChatSidebar, { kernelIndicatorPlacement: "right", title: "AI Agent", protocol: protocolConfig, position: "right", width: 380, defaultOpen: true, showNewChatButton: true, showClearButton: true, showSettingsButton: false, clickOutsideToClose: false, placeholder: "Ask the agent about your telemetry data\u2026", description: "Connect an agent to start chatting about your traces, logs, and metrics.", panelProps: protocolConfig
                             ? {
                                 protocol: protocolConfig,
                                 useStore: true,

package/lib/examples/AgentOutputsExample.js

@@ -227,7 +227,7 @@ const MarkdownTable = ({ source }) => {
                     whiteSpace: 'normal',
                     wordBreak: 'break-word',
                 },
-                th: { bg: 'canvas.subtle', fontWeight: 'bold' },
+                th: { bg: 'canvas.default', fontWeight: 'bold' },
             }, children: [_jsx("thead", { children: _jsx("tr", { children: headers.map((h, i) => (_jsx("th", { children: h }, i))) }) }), _jsx("tbody", { children: rows.map((r, i) => (_jsx("tr", { children: r.map((c, j) => (_jsx("td", { children: c }, j))) }, i))) })] }) }));
 };
 // ─── Chart renderer (lazy ECharts) ─────────────────────────────────────────
@@ -264,7 +264,7 @@ const ChartView = ({ source }) => {
                 fontFamily: 'mono',
                 fontSize: 0,
                 whiteSpace: 'pre-wrap',
-                bg: 'canvas.subtle',
+                bg: 'canvas.default',
                 p: 2,
                 borderRadius: 2,
                 m: 0,
@@ -439,7 +439,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _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: "Outputs Demo Agent", brandIcon: _jsx(FileIcon, { size: 16 }), placeholder: "Ask for a Table, JSON, Chart, or File\u2026", description: `${detected.length} detected output${detected.length !== 1 ? 's' : ''}`, showHeader: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                }, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _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: "Outputs Demo Agent", brandIcon: _jsx(FileIcon, { size: 16 }), placeholder: "Ask for a Table, JSON, Chart, or File\u2026", description: `${detected.length} detected output${detected.length !== 1 ? 's' : ''}`, showHeader: true, kernelIndicatorPlacement: "right", showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'Table',
                                     message: 'Generate a Markdown table of the top 5 US cities by population, with columns City, State, Population.',
@@ -497,7 +497,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
                                                     mb: 2,
                                                     gap: 2,
                                                 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: d.filename ?? `${d.tab} output` }), _jsx(Label, { size: "small", variant: "secondary", children: d.tab })] }), d.tab === 'table' && _jsx(MarkdownTable, { source: d.payload }), d.tab === 'json' && (_jsx(Box, { as: "pre", sx: {
-                                                    bg: 'canvas.subtle',
+                                                    bg: 'canvas.default',
                                                     p: 2,
                                                     borderRadius: 2,
                                                     fontFamily: 'mono',
@@ -514,7 +514,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
                                                         return d.payload;
                                                     }
                                                 })() })), d.tab === 'chart' && _jsx(ChartView, { source: d.payload }), d.tab === 'files' && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "pre", sx: {
-                                                            bg: 'canvas.subtle',
+                                                            bg: 'canvas.default',
                                                             p: 2,
                                                             borderRadius: 2,
                                                             fontFamily: 'mono',

package/lib/examples/AgentParametersExample.js

@@ -189,7 +189,7 @@ const AgentParametersExample = () => {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 2,
-                    bg: 'canvas.subtle',
+                    bg: 'canvas.default',
                 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "CONFIGURE AGENT" }), _jsx(Heading, { as: "h2", sx: { fontSize: 2 }, children: "Launch Parameterized Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 620 }, children: "Load the runtime schema directly from example-parameters, fill the generated form, then launch with validated parameters." }), _jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
@@ -207,7 +207,7 @@ const AgentParametersExample = () => {
                             border: '1px solid',
                             borderColor: 'border.default',
                             borderRadius: 2,
-                            bg: 'canvas.subtle',
+                            bg: 'canvas.default',
                         }, children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Required fields:", ' ', Array.isArray(schema.required) ? schema.required.length : 0] }), _jsx(Label, { variant: hasRequired ? 'success' : 'attention', children: hasRequired ? 'Ready to launch' : 'Complete required fields' })] })), showSchemaForm && schema && (_jsx(Box, { sx: {
                             border: '1px solid',
                             borderColor: 'border.default',
@@ -222,7 +222,7 @@ const AgentParametersExample = () => {
                                 event?.stopPropagation();
                             }, 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: [
+    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, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
             {
                 title: 'Print demo_params',
                 message: 'Use execute_code to print(demo_params) from the sandbox, then explain what it is.',

package/lib/examples/AgentSkillsExample.js

@@ -54,7 +54,7 @@ const SkillCard = ({ skill, onToggle, onToggleApproval }) => {
                             wordBreak: 'break-word',
                             m: 0,
                             p: 3,
-                            bg: 'canvas.inset',
+                            bg: 'canvas.default',
                             borderRadius: 2,
                             border: '1px solid',
                             borderColor: 'border.muted',
@@ -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: 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: [
+                }, 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, kernelIndicatorPlacement: "right", 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.',
@@ -233,7 +233,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                             display: 'flex',
                             flexDirection: 'column',
                             minHeight: 0,
-                            bg: 'canvas.subtle',
+                            bg: 'canvas.default',
                         }, children: [_jsxs(Box, { sx: {
                                     p: 2,
                                     borderBottom: '1px solid',
@@ -242,7 +242,7 @@ const AgentSkillsInner = ({ onLogout }) => {
                                             mt: 3,
                                             p: 2,
                                             borderRadius: 2,
-                                            bg: 'canvas.inset',
+                                            bg: 'canvas.default',
                                             border: '1px solid',
                                             borderColor: 'border.muted',
                                         }, 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" })] })] })] })] })] })] })] }));

package/lib/examples/AgentSubagentsExample.d.ts

@@ -1,11 +1,11 @@
 /**
  * AgentSubagentsExample
  *
- * Demonstrates multi-agent delegation using subagents-pydantic-ai.
+ * Demonstrates multi-agent delegation using the in-repo subagents capability.
  * The parent agent orchestrates a researcher and a writer subagent,
  * delegating tasks and combining results for the user.
  *
- * - Creates a local agent from the 'example-subagents' spec
+ * - Creates an agent from the 'example-subagents' spec on the selected target
  * - Shows a Chat component for interacting with the orchestrator
  * - Sidebar displays subagent info and active task status
  */