@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/examples/AgentGuardrailsExample.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgentGuardrailsExample
+ *
+ * Demonstrates cost budget guardrails and tool approval flow for durable agents.
+ *
+ * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ *   Runtimes API and deploys an agent on its sidecar
+ * - Shows a real-time cost tracker alongside the chat
+ * - Surfaces tool approval requests: when the agent calls a tool marked
+ *   `approval: manual`, a banner appears with Approve / Reject buttons
+ */
+/// <reference types="vite/client" />
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, } from '@primer/react';
+import { AlertIcon, ShieldCheckIcon, CheckIcon, XIcon, SignOutIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+const queryClient = new QueryClient();
+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';
+// ─── Constants ─────────────────────────────────────────────────────────────
+const AGENT_NAME = 'guardrails-demo-agent';
+const AGENT_SPEC_ID = 'monitor-sales-kpis';
+const COST_LIMIT_USD = 5.0;
+// ─── Inner component (rendered after auth) ─────────────────────────────────
+const AgentGuardrailsInner = ({ 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 cost budget and tool approval guardrails',
+        },
+    });
+    // Cost tracking
+    const [costUsd, setCostUsd] = useState(0);
+    const [totalTokens, setTotalTokens] = useState(0);
+    // Tool approval queue
+    const [approvals, setApprovals] = useState([]);
+    const [approvalLoading, setApprovalLoading] = useState(null);
+    const agentBaseUrl = runtime?.agentBaseUrl || '';
+    const agentId = runtime?.agentId || AGENT_NAME;
+    const podName = runtime?.podName || '(launching…)';
+    // Authenticated fetch helper (for sidecar endpoints)
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    // ── Poll cost + tool approvals ───────────────────────────────────────────
+    useEffect(() => {
+        if (!isReady || !agentBaseUrl)
+            return;
+        const poll = async () => {
+            try {
+                // Cost usage
+                const costRes = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/cost`);
+                if (costRes.ok) {
+                    const d = await costRes.json();
+                    setCostUsd(d.total_cost_usd ?? d.cost ?? 0);
+                    setTotalTokens(d.total_tokens ?? 0);
+                }
+            }
+            catch {
+                /* endpoint may not be wired */
+            }
+            try {
+                // Tool approvals
+                const apprRes = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/tool-approvals?status=pending`);
+                if (apprRes.ok) {
+                    const d = await apprRes.json();
+                    setApprovals(Array.isArray(d) ? d : (d.requests ?? []));
+                }
+            }
+            catch {
+                /* ok */
+            }
+        };
+        poll();
+        const interval = setInterval(poll, 5_000);
+        return () => clearInterval(interval);
+    }, [isReady, agentBaseUrl, agentId, authFetch]);
+    // ── Approve / Reject ─────────────────────────────────────────────────────
+    const handleApprove = useCallback(async (requestId) => {
+        if (!agentBaseUrl)
+            return;
+        setApprovalLoading(requestId);
+        try {
+            await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/tool-approvals/${requestId}/approve`, { method: 'POST' });
+            setApprovals(prev => prev.filter(a => a.id !== requestId));
+        }
+        catch {
+            /* ok */
+        }
+        finally {
+            setApprovalLoading(null);
+        }
+    }, [agentBaseUrl, agentId, authFetch]);
+    const handleReject = useCallback(async (requestId) => {
+        if (!agentBaseUrl)
+            return;
+        setApprovalLoading(requestId);
+        try {
+            await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/tool-approvals/${requestId}/reject`, {
+                method: 'POST',
+                body: JSON.stringify({ reason: 'User rejected' }),
+            });
+            setApprovals(prev => prev.filter(a => a.id !== requestId));
+        }
+        catch {
+            /* ok */
+        }
+        finally {
+            setApprovalLoading(null);
+        }
+    }, [agentBaseUrl, agentId, authFetch]);
+    // ── Loading / Error ──────────────────────────────────────────────────────
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
+                        ? 'Launching runtime for guardrails agent…'
+                        : 'Creating guardrails 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' })] }));
+    }
+    const costPercent = Math.min((costUsd / COST_LIMIT_USD) * 100, 100);
+    const costColor = costPercent > 80
+        ? 'danger.fg'
+        : costPercent > 50
+            ? 'attention.fg'
+            : 'success.fg';
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 3,
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    flexShrink: 0,
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Guardrails Demo \u2014 ", podName] })] }), _jsxs(Box, { sx: { flex: 1, maxWidth: 300 }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    fontSize: 0,
+                                    mb: 1,
+                                }, children: [_jsxs(Text, { sx: { color: costColor, fontWeight: 'semibold' }, children: ["$", costUsd.toFixed(4)] }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["/ $", COST_LIMIT_USD.toFixed(2), " limit"] })] }), _jsx(ProgressBar, { progress: costPercent, sx: { height: 6 } })] }), _jsxs(Label, { variant: "secondary", children: [totalTokens.toLocaleString(), " tokens"] }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), approvals.map(req => (_jsx(Flash, { variant: "warning", sx: { mx: 3, mt: 2 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { flex: 1, fontSize: 1 }, children: [_jsx("strong", { children: req.tool_name }), " requests approval", req.arguments
+                                    ? ` — ${JSON.stringify(req.arguments).slice(0, 120)}`
+                                    : ''] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleApprove(req.id), disabled: approvalLoading === req.id, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleReject(req.id), disabled: approvalLoading === req.id, children: "Reject" })] }) }, req.id))), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Guardrails Agent", placeholder: "Ask something that triggers tools\u2026", description: "Agent with $5 cost limit and tool approval gates", showHeader: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                        { title: 'Update CRM', message: 'Update the CRM records for Q3' },
+                        { title: 'Report', message: 'Generate the weekly KPI report' },
+                    ], submitOnSuggestionClick: true }) })] }));
+};
+// ─── Sync token to core IAM store ──────────────────────────────────────────
+const syncTokenToIamStore = (token) => {
+    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        iamStore.setState({ token });
+    });
+};
+// ─── Main component with auth gate ─────────────────────────────────────────
+const AgentGuardrailsExample = () => {
+    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const hasSynced = useRef(false);
+    useEffect(() => {
+        if (token && !hasSynced.current) {
+            hasSynced.current = true;
+            syncTokenToIamStore(token);
+        }
+    }, [token]);
+    const handleSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        hasSynced.current = true;
+        syncTokenToIamStore(newToken);
+    }, [setAuth]);
+    const handleLogout = useCallback(() => {
+        clearAuth();
+        hasSynced.current = false;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: undefined });
+        });
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Guardrails Agent", description: "Sign in to use agents with cost and tool guardrails.", leadingIcon: _jsx(ShieldCheckIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentGuardrailsInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentGuardrailsExample;

package/lib/examples/AgentMemoryExample.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AgentMemoryExample
+ *
+ * Demonstrates the Mem0 memory backend for durable agents.
+ * Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ * Runtimes API, then deploys an agent with persistent memory on its sidecar.
+ *
+ * The left panel shows a standard Chat. The right panel shows the
+ * agent's memory contents (fetched from the runtime sidecar) and lets
+ * you search them.
+ */
+import React from 'react';
+declare const AgentMemoryExample: React.FC;
+export default AgentMemoryExample;

package/lib/examples/AgentMemoryExample.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgentMemoryExample
+ *
+ * Demonstrates the Mem0 memory backend for durable agents.
+ * Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ * Runtimes API, then deploys an agent with persistent memory on its sidecar.
+ *
+ * The left panel shows a standard Chat. The right panel shows the
+ * agent's memory contents (fetched from the runtime sidecar) and lets
+ * you search them.
+ */
+/// <reference types="vite/client" />
+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 { AlertIcon, SearchIcon, DatabaseIcon, SignOutIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+const queryClient = new QueryClient();
+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';
+// ─── Constants ─────────────────────────────────────────────────────────────
+const AGENT_NAME = 'memory-demo-agent';
+const AGENT_SPEC_ID = 'monitor-sales-kpis'; // uses mem0 memory
+// ─── Inner component (rendered after auth) ─────────────────────────────────
+const AgentMemoryInner = ({ 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 Mem0 persistent memory',
+        },
+    });
+    const [memories, setMemories] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const agentBaseUrl = runtime?.agentBaseUrl || '';
+    const agentId = runtime?.agentId || AGENT_NAME;
+    const podName = runtime?.podName || '(launching…)';
+    // Authenticated fetch helper (for sidecar endpoints)
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    // ── Fetch memory list ────────────────────────────────────────────────────
+    const fetchMemories = useCallback(async () => {
+        if (!isReady || !agentBaseUrl)
+            return;
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/memory`);
+            if (res.ok) {
+                const data = await res.json();
+                setMemories(Array.isArray(data) ? data : (data.memories ?? []));
+            }
+        }
+        catch {
+            // Endpoint may not be wired yet — that's ok
+        }
+    }, [isReady, agentBaseUrl, agentId, authFetch]);
+    useEffect(() => {
+        if (isReady) {
+            fetchMemories();
+            const interval = setInterval(fetchMemories, 10_000);
+            return () => clearInterval(interval);
+        }
+    }, [isReady, fetchMemories]);
+    // ── Search memory ────────────────────────────────────────────────────────
+    const handleSearch = useCallback(async () => {
+        if (!isReady || !agentBaseUrl || !searchQuery.trim())
+            return;
+        setSearching(true);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/memory/search`, {
+                method: 'POST',
+                body: JSON.stringify({ query: searchQuery, limit: 5 }),
+            });
+            if (res.ok) {
+                const data = await res.json();
+                setSearchResults(Array.isArray(data) ? data : (data.results ?? []));
+            }
+        }
+        catch {
+            // Endpoint may not exist yet
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [isReady, agentBaseUrl, agentId, searchQuery, authFetch]);
+    // ── Loading state ────────────────────────────────────────────────────────
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
+                        ? 'Launching runtime for memory agent…'
+                        : 'Creating memory-enabled 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' })] }));
+    }
+    // ── Main layout ──────────────────────────────────────────────────────────
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    flexShrink: 0,
+                }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Durable Memory \u2014 ", podName] }), 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: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
+                            flex: 1,
+                            minWidth: 0,
+                            borderRight: '1px solid',
+                            borderColor: 'border.default',
+                        }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Memory Agent", 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: [
+                                {
+                                    title: 'Remember',
+                                    message: 'My favourite colour is midnight blue.',
+                                },
+                                { title: 'Recall', message: 'What is my favourite colour?' },
+                                {
+                                    title: 'Preference',
+                                    message: 'I prefer reports in bullet-point format.',
+                                },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 340,
+                            flexShrink: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            bg: 'canvas.subtle',
+                        }, 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: {
+                                    px: 3,
+                                    py: 2,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Text, { sx: {
+                                            fontWeight: 'semibold',
+                                            fontSize: 0,
+                                            display: 'block',
+                                            mb: 1,
+                                        }, children: ["Search Results (", searchResults.length, ")"] }), searchResults.map((entry, i) => (_jsxs(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 }), 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: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                            mb: 2,
+                                        }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Stored Memories (", memories.length, ")"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: fetchMemories, children: "Refresh" })] }), memories.length === 0 ? (_jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No memories yet. Start chatting \u2014 the agent will remember facts and preferences automatically." })) : (memories.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 }) }, entry.id || i))))] })] })] })] }));
+};
+// ─── Sync token to core IAM store ──────────────────────────────────────────
+const syncTokenToIamStore = (token) => {
+    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        iamStore.setState({ token });
+    });
+};
+// ─── Main component with auth gate ─────────────────────────────────────────
+const AgentMemoryExample = () => {
+    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const hasSynced = useRef(false);
+    useEffect(() => {
+        if (token && !hasSynced.current) {
+            hasSynced.current = true;
+            syncTokenToIamStore(token);
+        }
+    }, [token]);
+    const handleSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        hasSynced.current = true;
+        syncTokenToIamStore(newToken);
+    }, [setAuth]);
+    const handleLogout = useCallback(() => {
+        clearAuth();
+        hasSynced.current = false;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: undefined });
+        });
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Memory Agent", description: "Sign in to use agents with persistent memory.", leadingIcon: _jsx(DatabaseIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentMemoryInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentMemoryExample;

package/lib/examples/AgentMonitoringExample.d.ts

@@ -0,0 +1,13 @@
+/**
+ * AgentMonitoringExample
+ *
+ * Demonstrates runtime and agent monitoring with a live metrics panel,
+ * health status, and recent alert history.
+ *
+ * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ *   Runtimes API and deploys an agent on its sidecar
+ * - Shows a monitoring panel alongside the chat with key operational signals
+ */
+import React from 'react';
+declare const AgentMonitoringExample: React.FC;
+export default AgentMonitoringExample;