@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/examples/AgentMonitoringExample.js

@@ -14,14 +14,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Shows a monitoring panel alongside the chat with key operational signals
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Spinner, Heading, Label } from '@primer/react';
+import { Text, Heading, Label } from '@primer/react';
 import { GraphIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { waitForAgent } from './utils/waitForAgent';
 import { ContextPanel, } from '../context/ContextPanel';
 import { CostTracker } from '../context/CostTracker';
 import { CostUsageChart } from '../context/CostUsageChart';
@@ -34,9 +35,10 @@ 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';
+import { LoopEmbed } from '../loop';
+import { AgentMonitoringPlugin } from '../loop/plugins/agent-monitoring';
+import { createChatExtrasPlugin } from '../loop/plugins/chat-extras';
 const AGENT_NAME = 'monitoring-example-agent';
-const AGENTSPEC_ID = 'example-monitoring';
 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).
@@ -52,26 +54,34 @@ const AgentMonitoringInner = ({ onLogout, }) => {
     const [agentId, setAgentId] = useState(agentName);
     const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
     const [alerts, setAlerts] = useState([]);
+    void alerts;
     const [liveContext, setLiveContext] = useState(undefined);
     const [liveContextSnapshot, setLiveContextSnapshot] = useState(undefined);
     const [liveCost, setLiveCost] = useState(undefined);
     const [liveMcpStatus, setLiveMcpStatus] = useState(undefined);
+    // The chat column is the shared loop; the live MCP status the footer shows
+    // reaches it through the chat-extras channel.
+    const { plugin: extrasPlugin, setExtras } = useMemo(() => createChatExtrasPlugin(), []);
+    const chatPlugins = useMemo(() => [AgentMonitoringPlugin, extrasPlugin], [extrasPlugin]);
+    useEffect(() => {
+        setExtras({ mcpStatusData: liveMcpStatus ?? null });
+    }, [liveMcpStatus, setExtras]);
     const [monitorLastSnapshotAt, setMonitorLastSnapshotAt] = useState(null);
     const [liveGraphTelemetry, setLiveGraphTelemetry] = useState(undefined);
     const agentBaseUrl = useExampleAgentRuntimesUrl();
-    const otelBaseUrl = configuration?.otelInUrl ||
-        OTEL_IN_BASE_URL_ENV ||
+    const otelBaseUrl = OTEL_IN_BASE_URL_ENV ||
         configuration?.otelUrl ||
         configuration?.otelUrl ||
         OTEL_BASE_URL_ENV ||
         OTEL_URL_ENV ||
         agentBaseUrl;
-    const podName = agentId;
+    const runtimeName = agentId;
     // The OTEL service_name resource attribute is 'agent-runtimes' (the
     // application name), NOT the individual agent ID.  Use the correct value
     // so the TokenUsageChart WS filter and HTTP query match actual rows.
     const otelServiceName = 'agent-runtimes';
     const chatAuthToken = token === null ? undefined : token;
+    void chatAuthToken;
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -82,56 +92,27 @@ const AgentMonitoringInner = ({ onLogout, }) => {
     }), [token]);
     useEffect(() => {
         let isCancelled = false;
+        const controller = new AbortController();
         const createLocalAgent = async () => {
             setRuntimeStatus('launching');
             setIsReady(false);
             setHookError(null);
             setIsReconnectedAgent(false);
             try {
-                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        name: agentName,
-                        description: 'MCP monitoring example – web crawling via Tavily with live cost/token metrics',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        enable_skills: true,
-                        tools: [],
-                    }),
+                // The Loop creates the agent from the capacity plugin's blueprint as
+                // it mounts; the page only waits until the server has it, so its own
+                // sockets and reads address an agent that exists.
+                const found = await waitForAgent(agentBaseUrl, agentName, {
+                    signal: controller.signal,
                 });
-                let resolvedAgentId = agentName;
-                let isAlreadyRunning = false;
-                if (response.ok) {
-                    const data = await response.json();
-                    resolvedAgentId = data?.id || agentName;
-                }
-                else {
-                    const contentType = response.headers.get('content-type') || '';
-                    let detail = '';
-                    if (contentType.includes('application/json')) {
-                        const data = await response.json().catch(() => null);
-                        detail =
-                            (typeof data?.detail === 'string' && data.detail) ||
-                                (typeof data?.message === 'string' && data.message) ||
-                                '';
-                    }
-                    else {
-                        detail = await response.text();
-                    }
-                    if (response.status === 409 || /already exists/i.test(detail || '')) {
-                        isAlreadyRunning = true;
-                    }
-                    else {
-                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
-                    }
-                }
-                if (!isCancelled) {
-                    setAgentId(resolvedAgentId);
-                    setIsReconnectedAgent(isAlreadyRunning);
-                    setIsReady(true);
-                    setRuntimeStatus('ready');
+                if (isCancelled)
+                    return;
+                if (!found) {
+                    throw new Error(`The agent '${agentName}' did not appear on ${agentBaseUrl}.`);
                 }
+                setAgentId(agentName);
+                setIsReady(true);
+                setRuntimeStatus('ready');
             }
             catch (error) {
                 if (!isCancelled) {
@@ -143,6 +124,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
         void createLocalAgent();
         return () => {
             isCancelled = true;
+            controller.abort();
         };
     }, [agentBaseUrl, agentName, authFetch]);
     const handleMonitoringStreamMessage = useCallback((message) => {
@@ -277,16 +259,6 @@ const AgentMonitoringInner = ({ onLogout, }) => {
         // Keep the UI quiet and rely on stream snapshots for now.
         setAlerts([]);
     }, [isReady, agentId]);
-    if (!isReady && runtimeStatus !== 'error') {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local monitoring example agent..." })] }));
-    }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
@@ -303,7 +275,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(GraphIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Monitoring \u2014 ", podName] }), isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Label, { variant: monitorSocket.connectionState === 'connected'
+                }, children: [_jsx(GraphIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Monitoring \u2014 ", runtimeName] }), isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Label, { variant: monitorSocket.connectionState === 'connected'
                             ? 'success'
                             : 'secondary', children: ["WS: ", monitorSocket.connectionState] })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsxs(Box, { sx: {
                             width: 320,
@@ -337,40 +309,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, 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.',
-                                },
-                                {
-                                    title: '🔍 Single tool call',
-                                    message: 'Use the Tavily web search tool to find the latest news about pydantic-graph. Make a single search call.',
-                                },
-                                {
-                                    title: '🌀 Parallel tool fan-out',
-                                    message: 'Use Tavily to search the web in parallel for these three topics in the same turn: (1) OpenTelemetry traces, (2) agent observability, (3) LLM cost monitoring. Issue all three searches together so the turn graph fans out (Broadcast → Spread → Join).',
-                                },
-                                {
-                                    title: '🧩 Skill call',
-                                    message: 'Use the datalayer-whoami skill to identify my profile, then summarize it.',
-                                },
-                                {
-                                    title: '😄 Joke skill',
-                                    message: 'Use the jokes skill to tell me a random dad joke, then wrap it in one-sentence commentary.',
-                                },
-                                {
-                                    title: '🧪 Mixed tools + skills',
-                                    message: 'In one turn: (a) use Tavily to search for "OTEL traces best practices", (b) call the datalayer-whoami skill, (c) call the jokes skill. Summarize all three results together. This should produce a Broadcast → three Spread nodes → Join in the Turn Execution Graph.',
-                                },
-                                {
-                                    title: 'Monitoring summary',
-                                    message: 'Summarize my current token usage, cost status, and recent turn activity.',
-                                },
-                                {
-                                    title: 'Turn usage analysis',
-                                    message: 'Analyze the last turn usage and explain which parts drove input and output tokens.',
-                                },
-                            ], submitOnSuggestionClick: true, contextSnapshot: liveContextSnapshot, mcpStatusData: liveMcpStatus }) }), _jsxs(Box, { sx: {
+                                                }, children: ["Last close: ", monitorSocket.lastClose.detail] }))] }))] })] }), _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }), _jsxs(Box, { sx: {
                             width: 360,
                             minWidth: 320,
                             borderLeft: '1px solid',

package/lib/examples/AgentNotificationsExample.js

@@ -14,17 +14,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   channels and review recent notifications
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Button, Spinner, Heading, Label, TextInput, Flash, Timeline, } from '@primer/react';
+import { Text, Button, Heading, Label, TextInput, Flash, Timeline, } from '@primer/react';
 import { AlertIcon, BellIcon, MailIcon, CheckCircleIcon, MuteIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { useAgentRuntimeStore } from '../stores';
+import { AgentNotificationsPlugin } from '../loop/plugins/agent-notifications';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'notification-example-agent';
@@ -40,11 +42,18 @@ const alertVariant = (severity) => {
 const AgentNotificationsInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
-    const agentBaseUrl = useExampleAgentRuntimesUrl();
-    const [runtimeStatus, setRuntimeStatus] = useState('launching');
-    const [isReady, setIsReady] = useState(false);
-    const [hookError, setHookError] = useState(null);
-    const [agentId, setAgentId] = useState(agentName);
+    const { agentId = agentName, baseUrl: agentBaseUrl, status: runtimeStatus, isReady, error: hookError, } = useExampleAgentRuntime({
+        exampleId: 'AgentNotificationsExample',
+        agentName,
+        specId: AGENTSPEC_ID,
+        agentConfig: {
+            description: 'Agent with multi-channel notification support',
+            protocol: 'ag-ui',
+            agentSpecId: AGENTSPEC_ID,
+            enableSkills: true,
+            tools: [],
+        },
+    });
     const [notifications, setNotifications] = useState([]);
     const [channels, setChannels] = useState([
         { channel: 'in-app', enabled: true },
@@ -54,7 +63,10 @@ const AgentNotificationsInner = ({ onLogout, }) => {
     const [editTargets, setEditTargets] = useState({});
     const [isSaving, setIsSaving] = useState(false);
     const [flash, setFlash] = useState(null);
-    const podName = isReady ? `local:${agentId}` : '(launching…)';
+    const runtimeName = isReady ? `local:${agentId}` : '(launching…)';
+    // A new snapshot means a turn ended: the poll above runs again on it.
+    const fullContext = useAgentRuntimeStore(state => state.fullContext);
+    const plugins = useMemo(() => [AgentNotificationsPlugin], []);
     // Authenticated fetch helper
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -64,65 +76,6 @@ const AgentNotificationsInner = ({ onLogout, }) => {
             ...(opts.headers ?? {}),
         },
     }), [token]);
-    useEffect(() => {
-        let isCancelled = false;
-        const createLocalAgent = async () => {
-            setRuntimeStatus('launching');
-            setIsReady(false);
-            setHookError(null);
-            try {
-                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        name: agentName,
-                        description: 'Agent with multi-channel notification support',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        enable_skills: true,
-                        tools: [],
-                    }),
-                });
-                let resolvedAgentId = agentName;
-                if (response.ok) {
-                    const data = await response.json();
-                    resolvedAgentId = data?.id || agentName;
-                }
-                else {
-                    const contentType = response.headers.get('content-type') || '';
-                    let detail = '';
-                    if (contentType.includes('application/json')) {
-                        const data = await response.json().catch(() => null);
-                        detail =
-                            (typeof data?.detail === 'string' && data.detail) ||
-                                (typeof data?.message === 'string' && data.message) ||
-                                '';
-                    }
-                    else {
-                        detail = await response.text();
-                    }
-                    if (!(response.status === 409 || /already exists/i.test(detail))) {
-                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
-                    }
-                }
-                if (!isCancelled) {
-                    setAgentId(resolvedAgentId);
-                    setIsReady(true);
-                    setRuntimeStatus('ready');
-                }
-            }
-            catch (error) {
-                if (!isCancelled) {
-                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
-                    setRuntimeStatus('error');
-                }
-            }
-        };
-        void createLocalAgent();
-        return () => {
-            isCancelled = true;
-        };
-    }, [agentBaseUrl, agentName, authFetch]);
     // ── Poll notifications ────────────────────────────────────────────────
     useEffect(() => {
         if (!isReady || !agentBaseUrl)
@@ -151,9 +104,11 @@ const AgentNotificationsInner = ({ onLogout, }) => {
             }
         };
         poll();
-        const interval = setInterval(poll, 10_000);
+        // Often enough to feel live, and again as soon as a turn ends: the
+        // agent's notification should be in the panel by the time it says so.
+        const interval = setInterval(poll, 3_000);
         return () => clearInterval(interval);
-    }, [isReady, agentBaseUrl, agentId, authFetch]);
+    }, [isReady, agentBaseUrl, agentId, authFetch, fullContext]);
     // ── Toggle / save channel ─────────────────────────────────────────────
     const handleToggleChannel = useCallback(async (ch) => {
         if (!agentBaseUrl)
@@ -188,6 +143,20 @@ const AgentNotificationsInner = ({ onLogout, }) => {
             setIsSaving(false);
         }
     }, [agentBaseUrl, agentId, channels, editTargets, authFetch]);
+    // ── Mark one read ─────────────────────────────────────────────────────
+    const handleMarkRead = useCallback(async (id) => {
+        if (!agentBaseUrl)
+            return;
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/notifications/${id}/read`, { method: 'POST' });
+            if (res.ok) {
+                setNotifications(prev => prev.map(n => (n.id === id ? { ...n, read: true } : n)));
+            }
+        }
+        catch {
+            /* ok */
+        }
+    }, [agentBaseUrl, agentId, authFetch]);
     // ── Send test notification ────────────────────────────────────────────
     const handleTestNotification = useCallback(async () => {
         if (!agentBaseUrl)
@@ -207,24 +176,18 @@ const AgentNotificationsInner = ({ onLogout, }) => {
         }
     }, [agentBaseUrl, agentId, authFetch]);
     // ── Loading / Error ───────────────────────────────────────────────────
-    if (!isReady && runtimeStatus !== 'error') {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local notification agent\u2026" })] }));
-    }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     const unreadCount = notifications.filter(n => !n.read).length;
-    const recentAlerts = notifications.slice(0, 10).map(n => ({
+    // Alerts are the notifications the agent marked as more than information.
+    const recentAlerts = notifications
+        .filter(n => n.level === 'warning' || n.level === 'critical')
+        .slice(0, 10)
+        .map(n => ({
         id: n.id,
         title: n.title,
-        severity: n.read ? 'info' : 'warning',
+        severity: n.level === 'critical' ? 'critical' : 'warning',
         timestamp: n.timestamp,
     }));
     const channelIcon = (ch) => {
@@ -250,16 +213,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, 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',
-                                },
-                                {
-                                    title: 'Daily digest',
-                                    message: 'Set up a daily email digest of KPI summaries',
-                                },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                }, children: [_jsx(BellIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Notifications \u2014 ", runtimeName] }), 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(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }) }), _jsxs(Box, { sx: {
                             width: 380,
                             borderLeft: '1px solid',
                             borderColor: 'border.default',
@@ -312,10 +266,17 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                                                     justifyContent: 'space-between',
                                                     alignItems: 'center',
                                                     mb: 1,
-                                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: alert.title }), _jsx(Label, { size: "small", variant: alertVariant(alert.severity), children: alert.severity })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: new Date(alert.timestamp).toLocaleString() })] }, alert.id))))] }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Notifications" }), notifications.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No notifications yet." })) : (_jsx(Timeline, { children: notifications.slice(0, 25).map(n => (_jsxs(Timeline.Item, { children: [_jsx(Timeline.Badge, { children: n.read ? _jsx(CheckCircleIcon, {}) : _jsx(BellIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsx(Text, { sx: {
+                                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: alert.title }), _jsx(Label, { size: "small", variant: alertVariant(alert.severity), children: alert.severity })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: new Date(alert.timestamp).toLocaleString() })] }, alert.id))))] }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Notifications" }), notifications.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No notifications yet." })) : (_jsx(Timeline, { children: notifications.slice(0, 25).map(n => (_jsxs(Timeline.Item, { "data-notification": n.id, children: [_jsx(Timeline.Badge, { sx: { cursor: n.read ? 'default' : 'pointer' }, onClick: () => {
+                                                        if (!n.read)
+                                                            void handleMarkRead(n.id);
+                                                    }, title: n.read ? 'Read' : 'Mark as read', children: n.read ? _jsx(CheckCircleIcon, {}) : _jsx(BellIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: n.read ? 'normal' : 'bold',
-                                                            }, children: n.title }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1 }, children: n.body }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [new Date(n.timestamp).toLocaleString(), " via", ' ', _jsx(Label, { size: "small", variant: "secondary", children: n.channel })] })] })] }, n.id))) }))] })] })] })] }));
+                                                            }, children: n.title }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1 }, children: n.body }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [new Date(n.timestamp).toLocaleString(), " via", ' ', _jsx(Label, { size: "small", variant: "secondary", children: n.channel }), ' ', n.delivery ? (_jsx(Label, { size: "small", variant: n.delivery === 'sent' || n.delivery === 'stored'
+                                                                        ? 'success'
+                                                                        : n.delivery === 'failed'
+                                                                            ? 'danger'
+                                                                            : 'attention', title: n.detail ?? undefined, children: n.delivery })) : null] })] })] }, n.id))) }))] })] })] })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/AgentOtelExample.js

@@ -30,7 +30,9 @@ import { OtelHeader, DashboardView, SqlView, SystemView, useSimpleAuthStore, } f
 import { useCoreStore } from '@datalayer/core';
 import { ThemedProvider } from './utils/themedProvider';
 import { AuthRequiredView } from './components';
-import { ChatSidebar } from '../chat';
+import { LoopEmbed } from '../loop';
+import { uniqueAgentId } from './utils/agentId';
+import { AgentOtelPlugin } from '../loop/plugins/agent-otel';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 // ─── Environment / defaults ────────────────────────────────────────────────
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL ?? '';
@@ -39,7 +41,6 @@ const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL ?? '';
 const OTEL_IN_BASE_URL_ENV = import.meta.env.VITE_OTEL_IN_BASE_URL ?? '';
 const OTEL_URL_ENV = import.meta.env.VITE_DATALAYER_OTEL_URL ?? '';
 const DEFAULT_AGENT_PROTOCOL = 'vercel-ai';
-const DEFAULT_AGENT_LIBRARY = 'pydantic-ai';
 /** Spec id this example always launches. */
 const AGENTSPEC_ID = 'example-otel';
 /**
@@ -55,31 +56,9 @@ const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, c
         setError(null);
         try {
             const transport = DEFAULT_AGENT_PROTOCOL;
-            const res = await fetch(`${baseUrl}/api/v1/agents`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    name: AGENTSPEC_ID,
-                    description: `Launched from AgentOtelExample`,
-                    agent_library: DEFAULT_AGENT_LIBRARY,
-                    transport,
-                    agent_spec_id: AGENTSPEC_ID,
-                }),
-            });
-            if (!res.ok) {
-                const err = await res.json().catch(() => ({ detail: 'Unknown error' }));
-                const detail = typeof err?.detail === 'string' ? err.detail : 'Unknown error';
-                // 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] || AGENTSPEC_ID;
-                    onConnected(existingId, transport);
-                    return;
-                }
-                throw new Error(detail || `Failed to create agent: ${res.status}`);
-            }
-            const data = await res.json();
-            onConnected(data.id, transport);
+            // The Loop creates the agent from the otel capacity plugin's blueprint
+            // once it mounts on this id; the launcher only picks the id.
+            onConnected(uniqueAgentId(AGENTSPEC_ID), transport);
         }
         catch (e) {
             setError(e instanceof Error ? e.message : 'Failed to launch agent');
@@ -135,8 +114,7 @@ const TAB_SX = (active) => ({
 const AgentOtelExampleInner = ({ token }) => {
     const { configuration } = useCoreStore();
     const agentBaseUrl = useExampleAgentRuntimesUrl();
-    const resolvedUrl = configuration?.otelInUrl ||
-        OTEL_IN_BASE_URL_ENV ||
+    const resolvedUrl = OTEL_IN_BASE_URL_ENV ||
         configuration?.otelUrl ||
         configuration?.otelUrl ||
         OTEL_BASE_URL_ENV ||
@@ -154,11 +132,16 @@ const AgentOtelExampleInner = ({ token }) => {
         signalSetterRef.current?.(signal);
     }, []);
     // ── Agent state ─────────────────────────────────────────────────
+    //
+    // The launch panel creates the `example-otel` agent and reports its id; the
+    // LoopEmbed below runs on the Local target pointed at that same id, so its
+    // `ensureLocalAgent` finds the created agent and reuses it rather than
+    // making a second one. The bespoke launcher and its Disconnect control are
+    // kept — the chat column is the shared loop now, everything around it is the
+    // example's own.
     const [connectedAgentId, setConnectedAgentId] = useState(null);
-    const [connectedAgentTransport, setConnectedAgentTransport] = useState(DEFAULT_AGENT_PROTOCOL);
-    const handleAgentConnected = useCallback((agentId, protocol) => {
+    const handleAgentConnected = useCallback((agentId) => {
         setConnectedAgentId(agentId);
-        setConnectedAgentTransport(protocol);
     }, []);
     const handleAgentDisconnected = useCallback(async () => {
         if (connectedAgentId) {
@@ -173,38 +156,7 @@ const AgentOtelExampleInner = ({ token }) => {
         }
         setConnectedAgentId(null);
     }, [connectedAgentId, agentBaseUrl]);
-    // Build protocol config from connected agent
-    const protocolConfig = useMemo(() => {
-        if (!connectedAgentId)
-            return undefined;
-        if (connectedAgentTransport === 'ag-ui') {
-            return {
-                type: 'ag-ui',
-                endpoint: `${agentBaseUrl}/api/v1/ag-ui/${connectedAgentId}/`,
-                agentId: connectedAgentId,
-            };
-        }
-        if (connectedAgentTransport === 'a2a') {
-            return {
-                type: 'a2a',
-                endpoint: `${agentBaseUrl}/api/v1/a2a/${connectedAgentId}`,
-                agentId: connectedAgentId,
-            };
-        }
-        if (connectedAgentTransport === 'vercel-ai') {
-            return {
-                type: 'vercel-ai',
-                endpoint: `${agentBaseUrl}/api/v1/vercel-ai/${connectedAgentId}`,
-                agentId: connectedAgentId,
-            };
-        }
-        // Fallback – vercel-ai
-        return {
-            type: 'vercel-ai',
-            endpoint: `${agentBaseUrl}/api/v1/vercel-ai/${connectedAgentId}`,
-            agentId: connectedAgentId,
-        };
-    }, [connectedAgentId, connectedAgentTransport, agentBaseUrl]);
+    const otelPlugins = useMemo(() => [AgentOtelPlugin], []);
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -236,30 +188,25 @@ 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, { 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,
-                                suggestions: [
-                                    {
-                                        title: '🔍 Recent traces',
-                                        message: 'What do the most recent traces show?',
-                                    },
-                                    {
-                                        title: '⚠️ Errors',
-                                        message: 'Are there any errors or anomalies in the telemetry?',
-                                    },
-                                    {
-                                        title: '📊 Metrics summary',
-                                        message: 'Give me a summary of the current metrics.',
-                                    },
-                                    {
-                                        title: '🕵️ Root cause',
-                                        message: 'Help me find the root cause of slow requests.',
-                                    },
-                                ],
-                            }
-                            : { useStore: true }, children: _jsx(AgentLaunchPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }) })] })] }));
+                                }, 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 })) })] }), _jsxs(Box, { sx: {
+                            width: 380,
+                            flexShrink: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            bg: 'canvas.default',
+                            minHeight: 0,
+                        }, children: [_jsx(AgentLaunchPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: connectedAgentId ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: connectedAgentId, editors: false, plugins: otelPlugins }, connectedAgentId)) : (_jsx(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        height: '100%',
+                                        px: 3,
+                                        color: 'fg.muted',
+                                        fontSize: 1,
+                                        textAlign: 'center',
+                                    }, children: "Connect an agent to start chatting about your traces, logs, and metrics." })) })] })] })] }));
 };
 /**
  * AgentOtelExample – themed root with auth gate.

package/lib/examples/AgentOutputsExample.d.ts

@@ -2,7 +2,7 @@
  * AgentOutputsExample
  *
  * Demonstrates rich output rendering for agent responses. The agent (spec
- * `example-outputs`) is prompted to return exactly one of four output types per
+ * `example-output`) is prompted to return exactly one of four output types per
  * response:
  *   - TABLE  → GitHub-flavored Markdown table
  *   - JSON   → ```json fenced block
@@ -10,6 +10,7 @@
  *   - FILE   → fenced block whose info string is a file extension and
  *              whose first line is `# filename: <name.ext>`
  *
+ * The Loop creates the agent from the plugin's blueprint when it connects.
  * We subscribe to the chat store, detect the output type of the latest
  * assistant message, auto-switch the sidebar tab, and render the payload
  * inline in the sidebar.