@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/examples/AgentNotificationsExample.js

@@ -18,27 +18,36 @@ 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 { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
 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';
+import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'notification-demo-agent';
 const AGENT_SPEC_ID = 'monitor-sales-kpis';
+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({
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgentRuntimes({
         agentSpecId: AGENT_SPEC_ID,
         autoStart: true,
         agentConfig: {
-            name: AGENT_NAME,
-            protocol: 'ag-ui',
+            name: agentName,
+            model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0',
+            protocol: 'vercel-ai',
             description: 'Agent with multi-channel notification support',
         },
     });
@@ -160,16 +169,15 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                         : 'Creating notification demo agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        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':
@@ -193,7 +201,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", 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',
@@ -232,7 +240,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))) }))] })] })] })] }));
@@ -245,7 +276,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) {
@@ -253,11 +284,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;
@@ -266,7 +292,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

@@ -28,9 +28,9 @@ import { Text, Button, Select, FormControl } 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 ────────────────────────────────────────────────
@@ -274,8 +274,7 @@ const AgentOtelExampleInner = ({ token, onSignOut }) => {
  */
 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, onSignOut: clearAuth })) }));
 };
 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
+ * `demo-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;