@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/examples/AgentCodemodeExample.js

@@ -0,0 +1,262 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgentCodemodeExample
+ *
+ * Demonstrates Codemode: tools that return structured outputs with schemas
+ * rendered inline as executable code blocks, diffs, or file previews.
+ *
+ * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ *   Runtimes API and deploys an agent on its sidecar
+ * - Shows a code panel alongside the chat displaying tool outputs with
+ *   syntax highlighting, diff views, and the ability to accept/reject changes
+ */
+/// <reference types="vite/client" />
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Text, Button, Spinner, Heading, Label, Flash } from '@primer/react';
+import { AlertIcon, CodeIcon, DiffIcon, FileCodeIcon, CheckIcon, XIcon, SignOutIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+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 { ThemedProvider } from './utils/themedProvider';
+import { useAgents } from '../hooks/useAgents';
+import { Chat } from '../chat';
+const queryClient = new QueryClient();
+// ─── Constants ─────────────────────────────────────────────────────────────
+const AGENT_NAME = 'codemode-demo-agent';
+const AGENT_SPEC_ID = 'monitor-sales-kpis';
+// ─── Inner component (rendered after auth) ─────────────────────────────────
+const AgentCodemodeInner = ({ 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 Codemode structured tool outputs',
+        },
+    });
+    const [codeView, setCodeView] = useState('output');
+    const [artifacts, setArtifacts] = useState([]);
+    const [selectedId, setSelectedId] = useState(null);
+    const [flash, setFlash] = useState(null);
+    const agentBaseUrl = runtime?.agentBaseUrl || '';
+    const agentId = runtime?.agentId || AGENT_NAME;
+    const podName = runtime?.podName || '(launching…)';
+    // Authenticated fetch helper
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    // ── Poll code artifacts ───────────────────────────────────────────────
+    useEffect(() => {
+        if (!isReady || !agentBaseUrl)
+            return;
+        const poll = async () => {
+            try {
+                const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/codemode/artifacts`);
+                if (res.ok) {
+                    const d = await res.json();
+                    setArtifacts(Array.isArray(d) ? d : (d.artifacts ?? []));
+                }
+            }
+            catch {
+                /* ok */
+            }
+        };
+        poll();
+        const interval = setInterval(poll, 5_000);
+        return () => clearInterval(interval);
+    }, [isReady, agentBaseUrl, agentId, authFetch]);
+    // ── Accept / Reject ───────────────────────────────────────────────────
+    const handleDecision = useCallback(async (artifactId, decision) => {
+        if (!agentBaseUrl)
+            return;
+        setFlash(null);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/codemode/artifacts/${artifactId}`, {
+                method: 'PATCH',
+                body: JSON.stringify({ status: decision }),
+            });
+            if (res.ok) {
+                setArtifacts(prev => prev.map(a => a.id === artifactId ? { ...a, status: decision } : a));
+                setFlash(`Change ${decision}`);
+            }
+        }
+        catch {
+            setFlash('Network error');
+        }
+    }, [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 codemode agent…'
+                        : 'Creating codemode 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 selected = artifacts.find(a => a.id === selectedId) ?? artifacts[0] ?? null;
+    const pendingCount = artifacts.filter(a => a.status === 'pending').length;
+    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(CodeIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Codemode \u2014 ", podName] }), pendingCount > 0 && (_jsxs(Label, { variant: "attention", size: "small", children: [pendingCount, " pending"] })), 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: "Codemode Agent", placeholder: "Ask the agent to generate or modify code\u2026", description: `${artifacts.length} code artifact${artifacts.length !== 1 ? 's' : ''}`, showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                {
+                                    title: 'Generate script',
+                                    message: 'Write a Python script to analyze the KPI data',
+                                },
+                                {
+                                    title: 'Refactor',
+                                    message: 'Refactor the last code block for readability',
+                                },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 480,
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [_jsx(Box, { sx: {
+                                    display: 'flex',
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                    flexShrink: 0,
+                                }, children: [
+                                    {
+                                        key: 'output',
+                                        icon: FileCodeIcon,
+                                        label: 'Output',
+                                    },
+                                    { key: 'diff', icon: DiffIcon, label: 'Diff' },
+                                ].map(t => (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: t.icon, onClick: () => setCodeView(t.key), sx: {
+                                        flex: 1,
+                                        borderRadius: 0,
+                                        borderBottom: codeView === t.key ? '2px solid' : '2px solid transparent',
+                                        borderColor: codeView === t.key ? 'accent.fg' : 'transparent',
+                                        fontWeight: codeView === t.key ? 'bold' : 'normal',
+                                    }, children: t.label }, t.key))) }), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
+                                            width: 140,
+                                            borderRight: '1px solid',
+                                            borderColor: 'border.default',
+                                            overflow: 'auto',
+                                        }, children: artifacts.length === 0 ? (_jsx(Text, { sx: {
+                                                p: 2,
+                                                color: 'fg.muted',
+                                                fontSize: 0,
+                                                display: 'block',
+                                            }, children: "No artifacts yet." })) : (artifacts.map(a => (_jsxs(Box, { onClick: () => setSelectedId(a.id), sx: {
+                                                p: 2,
+                                                borderBottom: '1px solid',
+                                                borderColor: 'border.muted',
+                                                bg: selected?.id === a.id ? 'accent.subtle' : 'transparent',
+                                                cursor: 'pointer',
+                                                ':hover': { bg: 'canvas.subtle' },
+                                            }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', display: 'block' }, children: a.tool_name }), _jsx(Label, { size: "small", variant: a.status === 'accepted'
+                                                        ? 'success'
+                                                        : a.status === 'rejected'
+                                                            ? 'danger'
+                                                            : 'attention', children: a.status })] }, a.id)))) }), _jsx(Box, { sx: {
+                                            flex: 1,
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            overflow: 'auto',
+                                        }, children: selected ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                                        p: 2,
+                                                        borderBottom: '1px solid',
+                                                        borderColor: 'border.default',
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        alignItems: 'center',
+                                                        flexShrink: 0,
+                                                    }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: selected.tool_name }), _jsx(Label, { size: "small", variant: "secondary", sx: { ml: 1 }, children: selected.language })] }), selected.status === 'pending' && (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleDecision(selected.id, 'accepted'), children: "Accept" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleDecision(selected.id, 'rejected'), children: "Reject" })] }))] }), _jsx(Box, { sx: {
+                                                        flex: 1,
+                                                        overflow: 'auto',
+                                                        bg: 'canvas.subtle',
+                                                        p: 3,
+                                                    }, children: _jsx(Box, { as: "pre", sx: {
+                                                            fontFamily: 'mono',
+                                                            fontSize: 0,
+                                                            m: 0,
+                                                            whiteSpace: 'pre-wrap',
+                                                            wordBreak: 'break-word',
+                                                        }, children: codeView === 'diff' && selected.diff
+                                                            ? selected.diff
+                                                            : selected.content }) })] })) : (_jsx(Box, { sx: {
+                                                flex: 1,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                            }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Ask the agent to generate code to see it here." }) })) })] }), flash && (_jsx(Flash, { variant: flash.includes('accepted')
+                                    ? 'success'
+                                    : flash.includes('rejected')
+                                        ? 'warning'
+                                        : 'danger', sx: { m: 2, fontSize: 0 }, children: flash }))] })] })] }));
+};
+// ─── 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 AgentCodemodeExample = () => {
+    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: "Agent Codemode", description: "Sign in to use Codemode with structured tool outputs.", leadingIcon: _jsx(CodeIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentCodemodeInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentCodemodeExample;

package/lib/examples/AgentEvalsExample.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AgentEvalsExample
+ *
+ * Demonstrates agent evaluation workflows: scoring agent responses, tracking
+ * quality metrics, and reviewing evaluation history over time.
+ *
+ * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ *   Runtimes API and deploys an agent on its sidecar
+ * - Shows an evaluation panel alongside the chat with quality scores,
+ *   pass/fail status, and the ability to run eval suites
+ */
+import React from 'react';
+declare const AgentEvalsExample: React.FC;
+export default AgentEvalsExample;

package/lib/examples/AgentEvalsExample.js

@@ -0,0 +1,216 @@
+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.
+ */
+/**
+ * AgentEvalsExample
+ *
+ * Demonstrates agent evaluation workflows: scoring agent responses, tracking
+ * quality metrics, and reviewing evaluation history over time.
+ *
+ * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ *   Runtimes API and deploys an agent on its sidecar
+ * - Shows an evaluation panel alongside the chat with quality scores,
+ *   pass/fail status, and the ability to run eval suites
+ */
+/// <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, BeakerIcon, CheckCircleIcon, XCircleIcon, PlayIcon, SignOutIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+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 = 'eval-demo-agent';
+const AGENT_SPEC_ID = 'monitor-sales-kpis';
+// ─── Inner component (rendered after auth) ─────────────────────────────────
+const AgentEvalsInner = ({ 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 evaluation and quality scoring',
+        },
+    });
+    const [evalRuns, setEvalRuns] = useState([]);
+    const [isRunning, setIsRunning] = useState(false);
+    const [flash, setFlash] = useState(null);
+    const agentBaseUrl = runtime?.agentBaseUrl || '';
+    const agentId = runtime?.agentId || AGENT_NAME;
+    const podName = runtime?.podName || '(launching…)';
+    // Authenticated fetch helper
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    // ── Poll eval results ─────────────────────────────────────────────────
+    useEffect(() => {
+        if (!isReady || !agentBaseUrl)
+            return;
+        const poll = async () => {
+            try {
+                const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/eval/runs`);
+                if (res.ok) {
+                    const d = await res.json();
+                    setEvalRuns(Array.isArray(d) ? d : (d.runs ?? []));
+                }
+            }
+            catch {
+                /* ok */
+            }
+        };
+        poll();
+        const interval = setInterval(poll, 15_000);
+        return () => clearInterval(interval);
+    }, [isReady, agentBaseUrl, agentId, authFetch]);
+    // ── Run eval suite ────────────────────────────────────────────────────
+    const handleRunEval = useCallback(async () => {
+        if (!agentBaseUrl)
+            return;
+        setIsRunning(true);
+        setFlash(null);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/eval/run`, { method: 'POST' });
+            if (res.ok) {
+                setFlash('Evaluation suite started');
+            }
+            else {
+                setFlash(`Failed to start eval (${res.status})`);
+            }
+        }
+        catch {
+            setFlash('Network error');
+        }
+        finally {
+            setIsRunning(false);
+        }
+    }, [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 eval agent…'
+                        : 'Creating eval 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 latestScore = evalRuns.length > 0 ? evalRuns[0].score : null;
+    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(BeakerIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Evaluation \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: { 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: "Eval Agent", placeholder: "Chat with the agent, then run evaluations\u2026", description: latestScore != null
+                                ? `Last score: ${(latestScore * 100).toFixed(0)}%`
+                                : 'No evaluations run yet', showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                {
+                                    title: 'Summarize KPIs',
+                                    message: 'Summarize the latest KPI data',
+                                },
+                                {
+                                    title: 'Run eval',
+                                    message: 'Evaluate your last 10 responses',
+                                },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 350,
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: 'auto',
+                        }, children: [_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(BeakerIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Run Evaluation" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Execute the default evaluation suite against recent agent responses. Results are scored automatically." }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: handleRunEval, disabled: isRunning, sx: { width: '100%' }, children: isRunning ? 'Running…' : 'Run Eval Suite' }), flash && (_jsx(Flash, { variant: flash.includes('started') ? '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: "Evaluation History" }), evalRuns.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No evaluation runs recorded yet." })) : (evalRuns.slice(0, 20).map(run => (_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: 0, fontWeight: 'bold' }, children: run.suiteName }), _jsxs(Label, { variant: run.score >= 0.8
+                                                            ? 'success'
+                                                            : run.score >= 0.5
+                                                                ? 'attention'
+                                                                : 'danger', size: "small", children: [(run.score * 100).toFixed(0), "%"] })] }), _jsx(ProgressBar, { progress: run.score * 100, sx: { mb: 1 } }), _jsxs(Box, { sx: {
+                                                    display: 'flex',
+                                                    justifyContent: 'space-between',
+                                                    fontSize: 0,
+                                                    color: 'fg.muted',
+                                                }, children: [_jsxs(Text, { children: [_jsx(CheckCircleIcon, { size: 12 }), " ", run.passed, " passed"] }), _jsxs(Text, { children: [_jsx(XCircleIcon, { size: 12 }), " ", run.failed, " failed"] }), _jsx(Text, { children: new Date(run.timestamp).toLocaleDateString() })] })] }, run.id))))] })] })] })] }));
+};
+// ─── 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 AgentEvalsExample = () => {
+    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: "Agent Evaluation", description: "Sign in to evaluate agent quality and review scores.", leadingIcon: _jsx(BeakerIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentEvalsInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentEvalsExample;

package/lib/examples/AgentGuardrailsExample.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+import React from 'react';
+declare const AgentGuardrailsExample: React.FC;
+export default AgentGuardrailsExample;