@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentNotificationsExample.js

@@ -9,8 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Demonstrates notification channels for agents: in-app toasts, email digests,
  * Slack webhook integrations, and notification preference management.
  *
- * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
- *   Runtimes API and deploys an agent on its sidecar
+ * - Creates a local agent-runtimes agent using the `example-notifications` spec
  * - Shows a notification center alongside the chat where users can configure
  *   channels and review recent notifications
  */
@@ -18,31 +17,34 @@ 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, Heading, Label, TextInput, Flash, Timeline, } from '@primer/react';
-import { AlertIcon, BellIcon, MailIcon, CheckCircleIcon, MuteIcon, SignOutIcon, } from '@primer/octicons-react';
+import { AlertIcon, BellIcon, MailIcon, CheckCircleIcon, MuteIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { ErrorView } from './components';
+import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { SignInSimple } from '@datalayer/core/lib/views/iam';
-import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { Chat } from '../chat';
-import { useAgents } from '../hooks/useAgents';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
-const AGENT_NAME = 'notification-demo-agent';
-const AGENT_SPEC_ID = 'monitor-sales-kpis';
+const AGENT_NAME = 'notification-example-agent';
+const AGENT_SPEC_ID = 'example-notifications';
+const alertVariant = (severity) => {
+    if (severity === 'critical')
+        return 'danger';
+    if (severity === 'warning')
+        return 'attention';
+    return 'secondary';
+};
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentNotificationsInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
-    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgents({
-        agentSpecId: AGENT_SPEC_ID,
-        autoStart: true,
-        agentConfig: {
-            name: AGENT_NAME,
-            protocol: 'ag-ui',
-            description: 'Agent with multi-channel notification support',
-        },
-    });
+    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 [notifications, setNotifications] = useState([]);
     const [channels, setChannels] = useState([
         { channel: 'in-app', enabled: true },
@@ -52,9 +54,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
     const [editTargets, setEditTargets] = useState({});
     const [isSaving, setIsSaving] = useState(false);
     const [flash, setFlash] = useState(null);
-    const agentBaseUrl = runtime?.agentBaseUrl || '';
-    const agentId = runtime?.agentId || AGENT_NAME;
-    const podName = runtime?.podName || '(launching…)';
+    const podName = isReady ? `local:${agentId}` : '(launching…)';
     // Authenticated fetch helper
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -64,6 +64,65 @@ 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: AGENT_SPEC_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)
@@ -156,14 +215,18 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                 justifyContent: 'center',
                 height: '100vh',
                 gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
-                        ? 'Launching runtime for notification agent…'
-                        : 'Creating notification demo agent…' })] }));
+            }, 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 => ({
+        id: n.id,
+        title: n.title,
+        severity: n.read ? 'info' : 'warning',
+        timestamp: n.timestamp,
+    }));
     const channelIcon = (ch) => {
         switch (ch) {
             case 'in-app':
@@ -187,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"] })), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Notification Agent", 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, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'Alert me',
                                     message: 'Notify me when KPIs drop below threshold',
@@ -226,7 +289,30 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                                                     })), placeholder: ch.channel === 'email'
                                                         ? 'user@example.com'
                                                         : 'https://hooks.slack.com/…', size: "small", sx: { width: '100%' } }))] }, ch.channel));
-                                    }), _jsx(Button, { size: "small", leadingVisual: BellIcon, onClick: handleTestNotification, sx: { width: '100%' }, children: "Send Test Notification" }), flash && (_jsx(Flash, { variant: flash.includes('sent') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: flash }))] }), _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: {
+                                    }), _jsx(Button, { size: "small", leadingVisual: BellIcon, onClick: handleTestNotification, sx: { width: '100%' }, children: "Send Test Notification" }), flash && (_jsx(Flash, { variant: flash.includes('sent') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: flash }))] }), _jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Alerts" }), recentAlerts.length === 0 ? (_jsxs(Box, { sx: {
+                                            p: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            borderRadius: 2,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 2,
+                                        }, children: [_jsx(CheckCircleIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No active alerts." })] })) : (recentAlerts.map(alert => (_jsxs(Box, { sx: {
+                                            p: 2,
+                                            mb: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            borderRadius: 2,
+                                        }, children: [_jsxs(Box, { sx: {
+                                                    display: 'flex',
+                                                    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: {
                                                                 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))) }))] })] })] })] }));
@@ -239,7 +325,7 @@ const syncTokenToIamStore = (token) => {
 };
 // ─── Main component with auth gate ─────────────────────────────────────────
 const AgentNotificationsExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -247,11 +333,6 @@ const AgentNotificationsExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -260,7 +341,7 @@ const AgentNotificationsExample = () => {
         });
     }, [clearAuth]);
     if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Notifications", description: "Sign in to configure and monitor agent notifications.", leadingIcon: _jsx(BellIcon, { size: 24 }) }) }));
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentNotificationsInner, { onLogout: handleLogout }) }) }));
 };

package/lib/examples/AgentOtelExample.js

@@ -24,15 +24,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 /// <reference types="vite/client" />
 import { useState, useEffect, useCallback, useRef, useMemo, } from 'react';
-import { Text, Button, Select, FormControl } from '@primer/react';
+import { Text, Button, Spinner } from '@primer/react';
 import { TelescopeIcon, PlugIcon, XIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { OtelHeader, DashboardView, SqlView, SystemView, useSimpleAuthStore, } from '@datalayer/core/lib/views/otel';
-import { SignInSimple } from '@datalayer/core/lib/views/iam';
 import { useCoreStore } from '@datalayer/core';
 import { ThemedProvider } from './utils/themedProvider';
+import { AuthRequiredView } from './components';
 import { ChatSidebar } from '../chat';
-import { DEFAULT_MODEL } from '../specs';
 // ─── 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 ?? '';
@@ -43,69 +42,62 @@ const DATALAYER_RUN_URL_ENV = import.meta.env.VITE_DATALAYER_RUN_URL ?? '';
 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';
 /**
  * Small form for picking an agent spec and launching it.
  * Renders as the `children` of the ChatSidebar so it appears above the chat.
  */
-const AgentSelectorPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, connectedAgentName, }) => {
-    const [specs, setSpecs] = useState([]);
-    const [selectedSpecId, setSelectedSpecId] = useState('');
+const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, connectedAgentName, }) => {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    // Fetch library specs on mount
-    useEffect(() => {
-        const load = async () => {
-            try {
-                const res = await fetch(`${baseUrl}/api/v1/agents/library`);
-                if (!res.ok)
-                    throw new Error(`HTTP ${res.status}`);
-                const data = await res.json();
-                setSpecs(data);
-                if (data.length > 0)
-                    setSelectedSpecId(data[0].id);
-            }
-            catch (e) {
-                setError('Could not load agent specs from the backend.');
-                console.warn('[AgentOtelExample] Failed to load library specs:', e);
-            }
-        };
-        void load();
-    }, [baseUrl]);
+    const launchedRef = useRef(false);
     const handleLaunch = useCallback(async () => {
-        if (!selectedSpecId)
-            return;
         setLoading(true);
         setError(null);
         try {
-            const spec = specs.find(s => s.id === selectedSpecId);
-            const transport = spec?.transport ?? DEFAULT_AGENT_PROTOCOL;
+            const transport = DEFAULT_AGENT_PROTOCOL;
             const res = await fetch(`${baseUrl}/api/v1/agents`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    name: selectedSpecId,
+                    name: AGENT_SPEC_ID,
                     description: `Launched from AgentOtelExample`,
                     agent_library: DEFAULT_AGENT_LIBRARY,
                     transport,
-                    model: DEFAULT_MODEL,
-                    system_prompt: 'You are a helpful AI assistant observing OTEL telemetry data.',
-                    agent_spec_id: selectedSpecId,
+                    agent_spec_id: AGENT_SPEC_ID,
                 }),
             });
             if (!res.ok) {
                 const err = await res.json().catch(() => ({ detail: 'Unknown error' }));
-                throw new Error(err.detail || `Failed to create agent: ${res.status}`);
+                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] || AGENT_SPEC_ID;
+                    onConnected(existingId, transport);
+                    return;
+                }
+                throw new Error(detail || `Failed to create agent: ${res.status}`);
             }
             const data = await res.json();
             onConnected(data.id, transport);
         }
         catch (e) {
             setError(e instanceof Error ? e.message : 'Failed to launch agent');
+            console.warn('[AgentOtelExample] Failed to launch agent:', e);
         }
         finally {
             setLoading(false);
         }
-    }, [selectedSpecId, specs, baseUrl, onConnected]);
+    }, [baseUrl, onConnected]);
+    // Auto-launch the example-otel agent on mount.
+    useEffect(() => {
+        if (launchedRef.current || isConnected)
+            return;
+        launchedRef.current = true;
+        void handleLaunch();
+    }, [handleLaunch, isConnected]);
     if (isConnected) {
         return (_jsxs(Box, { sx: {
                 px: 3,
@@ -129,7 +121,7 @@ const AgentSelectorPanel = ({ baseUrl, onConnected, onDisconnected, isConnected,
             gap: 2,
             flexShrink: 0,
             bg: 'canvas.subtle',
-        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "SELECT AGENT" }), specs.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { visuallyHidden: true, children: "Agent spec" }), _jsx(Select, { value: selectedSpecId, onChange: e => setSelectedSpecId(e.target.value), block: true, size: "small", disabled: loading, children: specs.map(s => (_jsx(Select.Option, { value: s.id, children: s.name ?? s.id }, s.id))) })] }), _jsx(Button, { variant: "primary", size: "small", onClick: handleLaunch, disabled: loading || !selectedSpecId, leadingVisual: PlugIcon, sx: { width: '100%' }, children: loading ? 'Launching…' : 'Launch Agent' })] })) : error ? (_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading specs\u2026" })), error && specs.length > 0 && (_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }))] }));
+        }, 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"] }))] }));
 };
 const TAB_SX = (active) => ({
     px: 3,
@@ -142,7 +134,7 @@ const TAB_SX = (active) => ({
     borderColor: active ? 'accent.fg' : 'transparent',
     '&:hover': { color: 'fg.default' },
 });
-const AgentOtelExampleInner = ({ token, onSignOut }) => {
+const AgentOtelExampleInner = ({ token }) => {
     const { configuration } = useCoreStore();
     const resolvedRunUrl = configuration?.otelRunUrl ||
         configuration?.runUrl ||
@@ -220,7 +212,7 @@ const AgentOtelExampleInner = ({ token, onSignOut }) => {
             overflow: 'hidden',
             bg: 'canvas.default',
             color: 'fg.default',
-        }, children: [_jsx(OtelHeader, { baseUrl: otelBaseUrl, token: token, onNavigate: handleNavigate, onSignOut: onSignOut, showGenerateButtons: false, trailing: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: otelBaseUrl })] }) }), _jsxs(Box, { sx: {
+        }, children: [_jsx(OtelHeader, { baseUrl: otelBaseUrl, token: token, onNavigate: handleNavigate, showGenerateButtons: true, showAccountControls: false, trailing: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: otelBaseUrl })] }) }), _jsxs(Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     minHeight: 0,
@@ -267,15 +259,13 @@ const AgentOtelExampleInner = ({ token, onSignOut }) => {
                                     },
                                 ],
                             }
-                            : { useStore: true }, children: _jsx(AgentSelectorPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }) })] })] }));
+                            : { useStore: true }, children: _jsx(AgentLaunchPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }) })] })] }));
 };
 /**
  * AgentOtelExample – themed root with auth gate.
  */
 const AgentOtelExample = () => {
     const token = useSimpleAuthStore(s => s.token);
-    const setAuth = useSimpleAuthStore(s => s.setAuth);
-    const clearAuth = useSimpleAuthStore(s => s.clearAuth);
-    return (_jsx(ThemedProvider, { children: !token ? (_jsx(SignInSimple, { onSignIn: setAuth, onApiKeySignIn: apiKey => setAuth(apiKey, 'api-key-user'), title: "Datalayer OTEL", description: "Sign in to access the observability dashboard.", leadingIcon: _jsx(TelescopeIcon, { size: 24 }) })) : (_jsx(AgentOtelExampleInner, { token: token, onSignOut: clearAuth })) }));
+    return (_jsx(ThemedProvider, { children: !token ? _jsx(AuthRequiredView, {}) : _jsx(AgentOtelExampleInner, { token: token }) }));
 };
 export default AgentOtelExample;

package/lib/examples/AgentOutputsExample.d.ts

@@ -1,13 +1,18 @@
 /**
  * AgentOutputsExample
  *
- * Demonstrates rich output rendering for agent responses: structured data
- * tables, charts, downloadable artifacts, and multi-format output panels.
+ * Demonstrates rich output rendering for agent responses. The agent (spec
+ * `example-outputs`) is prompted to return exactly one of four output types per
+ * response:
+ *   - TABLE  → GitHub-flavored Markdown table
+ *   - JSON   → ```json fenced block
+ *   - CHART  → ```json fenced block whose first line is `// chart` (ECharts)
+ *   - FILE   → fenced block whose info string is a file extension and
+ *              whose first line is `# filename: <name.ext>`
  *
- * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
- *   Runtimes API and deploys an agent on its sidecar
- * - Shows an output gallery alongside the chat with tabs for different
- *   output formats (table, JSON, chart, file)
+ * 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.
  */
 import React from 'react';
 declare const AgentOutputsExample: React.FC;