@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentEvalsExample.js

@@ -15,40 +15,119 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   pass/fail status, and the ability to run eval suites
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, } from '@primer/react';
-import { BeakerIcon, CheckCircleIcon, XCircleIcon, PlayIcon, SignOutIcon, } from '@primer/octicons-react';
+import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, Select, FormControl, } from '@primer/react';
+import { BeakerIcon, CheckCircleIcon, XCircleIcon, PlayIcon, } 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 { useCoreStore } from '@datalayer/core';
 import { Chat } from '../chat';
-import { useAgents } from '../hooks/useAgents';
+import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
-const AGENT_NAME = 'eval-demo-agent';
-const AGENT_SPEC_ID = 'monitor-sales-kpis';
+const AGENT_NAME = 'eval-example-agent';
+const AGENT_SPEC_ID = 'example-evals';
+const DEFAULT_EXECUTION_TARGET = (import.meta.env.VITE_AGENT_EVALS_TARGET || 'cloud').toLowerCase() === 'local'
+    ? 'local'
+    : 'cloud';
+const normalizeHttpUrl = (value) => {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return null;
+    }
+    try {
+        const url = new URL(trimmed);
+        if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+            return null;
+        }
+        url.pathname = '';
+        url.search = '';
+        url.hash = '';
+        return url.toString().replace(/\/$/, '');
+    }
+    catch {
+        return null;
+    }
+};
+const isLocalhostUrl = (value) => {
+    if (!value) {
+        return false;
+    }
+    try {
+        const url = new URL(value);
+        return (url.hostname === 'localhost' ||
+            url.hostname === '127.0.0.1' ||
+            url.hostname === '0.0.0.0');
+    }
+    catch {
+        return false;
+    }
+};
 // ─── Inner component (rendered after auth) ─────────────────────────────────
-const AgentEvalsInner = ({ onLogout }) => {
+const AgentEvalsInner = ({ onLogout, executionTarget, onExecutionTargetChange }) => {
     const { token } = useSimpleAuthStore();
-    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgents({
+    const { configuration } = useCoreStore();
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const localRuntimeBaseUrl = useExampleAgentRuntimesUrl();
+    const cloudRuntimeBaseUrl = useMemo(() => {
+        const envRuntimesUrl = normalizeHttpUrl(import.meta.env.VITE_DATALAYER_RUNTIMES_URL);
+        const envAgentRuntimesUrl = normalizeHttpUrl(import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL);
+        const configuredRuntimesUrl = normalizeHttpUrl(configuration?.runtimesRunUrl);
+        if (envRuntimesUrl && !isLocalhostUrl(envRuntimesUrl)) {
+            return envRuntimesUrl;
+        }
+        if (configuredRuntimesUrl && !isLocalhostUrl(configuredRuntimesUrl)) {
+            return configuredRuntimesUrl;
+        }
+        if (envAgentRuntimesUrl && !isLocalhostUrl(envAgentRuntimesUrl)) {
+            return envAgentRuntimesUrl;
+        }
+        return 'https://r1.datalayer.run';
+    }, [configuration?.runtimesRunUrl]);
+    const { runtime, status: runtimeStatus, isReady, error: hookError, runtimeCreationBaseUrl, } = useAgentRuntimes({
         agentSpecId: AGENT_SPEC_ID,
-        autoStart: true,
+        autoStart: executionTarget === 'cloud',
+        runtimeCreationTarget: executionTarget === 'local' ? 'local-agent-runtimes' : 'backend-services',
+        runtimeCreationBaseUrl: executionTarget === 'local' ? localRuntimeBaseUrl : cloudRuntimeBaseUrl,
         agentConfig: {
-            name: AGENT_NAME,
-            protocol: 'ag-ui',
+            name: agentName,
+            model: 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0',
+            protocol: 'vercel-ai',
             description: 'Agent with evaluation and quality scoring',
         },
     });
+    const [localAgentId, setLocalAgentId] = useState(null);
+    const [localStatus, setLocalStatus] = useState('launching');
+    const [localError, setLocalError] = useState(null);
     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…)';
+    const [evalId, setEvalId] = useState(null);
+    const [experimentId, setExperimentId] = useState(null);
+    const [isBootstrapping, setIsBootstrapping] = useState(true);
+    const cloudAgentBaseUrl = runtime?.agentBaseUrl || '';
+    const localAgentBaseUrl = runtimeCreationBaseUrl;
+    const agentBaseUrl = executionTarget === 'local' ? localAgentBaseUrl : cloudAgentBaseUrl;
+    const agentId = executionTarget === 'local'
+        ? localAgentId || agentName
+        : runtime?.agentId || AGENT_NAME;
+    const podName = executionTarget === 'local'
+        ? `local:${agentId}`
+        : runtime?.podName || '(launching…)';
+    const controlPlaneBaseUrl = import.meta.env.VITE_RUN_URL ||
+        configuration?.runUrl ||
+        (cloudAgentBaseUrl ? new URL(cloudAgentBaseUrl).origin : '');
+    const isAgentReady = executionTarget === 'local' ? localStatus === 'ready' : isReady;
+    const agentStatus = executionTarget === 'local' ? localStatus : runtimeStatus;
+    const effectiveError = executionTarget === 'local' ? localError : hookError;
     // Authenticated fetch helper
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -58,67 +137,271 @@ const AgentEvalsInner = ({ onLogout }) => {
             ...(opts.headers ?? {}),
         },
     }), [token]);
+    const evalApiFetch = useCallback(async (path, opts = {}) => {
+        const response = await authFetch(`${controlPlaneBaseUrl}/api/ai-agents/v1${path}`, opts);
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok || payload?.success === false) {
+            throw new Error(payload?.detail ||
+                payload?.message ||
+                `Eval API request failed (${response.status})`);
+        }
+        return payload;
+    }, [authFetch, controlPlaneBaseUrl]);
+    const mapRuns = useCallback((rows) => {
+        return rows.map((run) => {
+            const passRateRaw = run?.metrics?.pass_rate ??
+                run?.summary?.pass_rate ??
+                run?.summary?.score ??
+                0;
+            const score = Math.max(0, Math.min(1, Number(passRateRaw) || 0));
+            const passed = Number(run?.summary?.passed ?? Math.round(score * 100));
+            const failed = Number(run?.summary?.failed ?? Math.max(0, 100 - passed));
+            return {
+                id: String(run?.id || Math.random()),
+                timestamp: String(run?.created_at || run?.updated_at || new Date().toISOString()),
+                suiteName: String(run?.summary?.suite_name || run?.summary?.name || 'default-suite'),
+                passed,
+                failed,
+                score,
+            };
+        });
+    }, []);
+    useEffect(() => {
+        if (executionTarget !== 'local' || !agentBaseUrl) {
+            return;
+        }
+        let isCancelled = false;
+        const createLocalAgent = async () => {
+            setLocalStatus('launching');
+            setLocalError(null);
+            try {
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'Agent with evaluation and quality scoring',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        enable_skills: true,
+                        tools: [],
+                    }),
+                });
+                let resolvedAgentId = agentName;
+                if (response.ok) {
+                    const payload = await response.json().catch(() => ({}));
+                    resolvedAgentId = payload?.id || agentName;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const payload = await response.json().catch(() => null);
+                        detail =
+                            (typeof payload?.detail === 'string' && payload.detail) ||
+                                (typeof payload?.message === 'string' && payload.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) {
+                    setLocalAgentId(resolvedAgentId);
+                    setLocalStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setLocalError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setLocalStatus('error');
+                }
+            }
+        };
+        void createLocalAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [executionTarget, agentBaseUrl, agentName, authFetch]);
+    useEffect(() => {
+        if (!isAgentReady || !controlPlaneBaseUrl)
+            return;
+        const bootstrap = async () => {
+            setIsBootstrapping(true);
+            try {
+                const evalName = `agent-evals-${agentId}`;
+                const evalsRes = await evalApiFetch(`/evals/evals?source=hosted&q=${encodeURIComponent(evalName)}&limit=50`);
+                const evals = Array.isArray(evalsRes?.evals)
+                    ? evalsRes.evals
+                    : [];
+                let evalRecord = evals.find((d) => d?.name === evalName);
+                if (!evalRecord) {
+                    const createdEvalRes = await evalApiFetch('/evals/evals', {
+                        method: 'POST',
+                        body: JSON.stringify({
+                            name: evalName,
+                            description: `Hosted eval for ${agentId}`,
+                            source: 'hosted',
+                            kind: 'agent-quality',
+                            schema: {},
+                            tags: ['agent-runtimes', 'example'],
+                            metadata: { agent_id: agentId },
+                            cases: [],
+                        }),
+                    });
+                    evalRecord = createdEvalRes?.eval;
+                }
+                if (!evalRecord?.id) {
+                    throw new Error('Failed to initialize eval.');
+                }
+                setEvalId(evalRecord.id);
+                const experimentsRes = await evalApiFetch(`/evals/experiments?eval_id=${encodeURIComponent(evalRecord.id)}&limit=50`);
+                const experiments = Array.isArray(experimentsRes?.experiments)
+                    ? experimentsRes.experiments
+                    : [];
+                let experiment = experiments.find((e) => e?.name === 'default-suite');
+                if (!experiment) {
+                    const createdExperimentRes = await evalApiFetch('/evals/experiments', {
+                        method: 'POST',
+                        body: JSON.stringify({
+                            eval_id: evalRecord.id,
+                            name: 'default-suite',
+                            description: 'Default evaluation suite for AgentEvalsExample.',
+                            status: 'ready',
+                            config: {
+                                mode: 'offline',
+                                target_agent_id: agentId,
+                                target_pod_name: podName,
+                            },
+                            summary: {},
+                            tags: ['example'],
+                        }),
+                    });
+                    experiment = createdExperimentRes?.experiment;
+                }
+                if (!experiment?.id) {
+                    throw new Error('Failed to initialize eval experiment.');
+                }
+                setExperimentId(experiment.id);
+            }
+            catch (error) {
+                const message = error instanceof Error ? error.message : 'Eval bootstrap failed.';
+                setFlash(message);
+            }
+            finally {
+                setIsBootstrapping(false);
+            }
+        };
+        void bootstrap();
+    }, [isAgentReady, controlPlaneBaseUrl, agentId, podName, evalApiFetch]);
     // ── Poll eval results ─────────────────────────────────────────────────
     useEffect(() => {
-        if (!isReady || !agentBaseUrl)
+        if (!isAgentReady || !controlPlaneBaseUrl || !experimentId)
             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 ?? []));
-                }
+                const res = await evalApiFetch(`/evals/experiments/${encodeURIComponent(experimentId)}/runs?limit=50`);
+                const rows = Array.isArray(res?.runs) ? res.runs : [];
+                setEvalRuns(mapRuns(rows));
             }
             catch {
                 /* ok */
             }
         };
-        poll();
+        void poll();
         const interval = setInterval(poll, 15_000);
         return () => clearInterval(interval);
-    }, [isReady, agentBaseUrl, agentId, authFetch]);
+    }, [isAgentReady, controlPlaneBaseUrl, experimentId, evalApiFetch, mapRuns]);
     // ── Run eval suite ────────────────────────────────────────────────────
     const handleRunEval = useCallback(async () => {
-        if (!agentBaseUrl)
+        if (!controlPlaneBaseUrl || !experimentId)
             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})`);
-            }
+            const syntheticScore = Number((0.75 + Math.random() * 0.2).toFixed(3));
+            const passed = Math.round(syntheticScore * 100);
+            const failed = Math.max(0, 100 - passed);
+            await evalApiFetch(`/evals/experiments/${encodeURIComponent(experimentId)}/runs`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    status: 'completed',
+                    metrics: {
+                        pass_rate: syntheticScore,
+                        avg_score: syntheticScore,
+                    },
+                    summary: {
+                        suite_name: 'default-suite',
+                        passed,
+                        failed,
+                        runtime_id: podName,
+                    },
+                    report: {
+                        source: 'AgentEvalsExample',
+                        eval_id: evalId,
+                        experiment_id: experimentId,
+                        agent_id: agentId,
+                    },
+                }),
+            });
+            setFlash('Evaluation run persisted');
+            const updatedRuns = await evalApiFetch(`/evals/experiments/${encodeURIComponent(experimentId)}/runs?limit=50`);
+            const rows = Array.isArray(updatedRuns?.runs)
+                ? updatedRuns.runs
+                : [];
+            setEvalRuns(mapRuns(rows));
         }
         catch {
-            setFlash('Network error');
+            setFlash('Failed to persist evaluation run');
         }
         finally {
             setIsRunning(false);
         }
-    }, [agentBaseUrl, agentId, authFetch]);
+    }, [
+        controlPlaneBaseUrl,
+        experimentId,
+        evalApiFetch,
+        mapRuns,
+        podName,
+        evalId,
+        agentId,
+    ]);
     // ── Loading / Error ───────────────────────────────────────────────────
-    if (!isReady && runtimeStatus !== 'error') {
+    if (!isAgentReady && agentStatus !== 'error') {
         return (_jsxs(Box, { sx: {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: '100vh',
+                height: '100%',
                 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…' })] }));
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: agentStatus === 'launching'
+                        ? executionTarget === 'local'
+                            ? 'Launching local eval example agent…'
+                            : 'Launching runtime for eval agent…'
+                        : 'Creating eval example agent…' })] }));
+    }
+    if (agentStatus === 'error' || effectiveError) {
+        return _jsx(ErrorView, { error: effectiveError, onLogout: onLogout });
     }
-    if (runtimeStatus === 'error' || hookError) {
-        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
+    if (isBootstrapping) {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Preparing hosted eval and experiment..." })] }));
     }
     const latestScore = evalRuns.length > 0 ? evalRuns[0].score : null;
     return (_jsxs(Box, { sx: {
-            height: 'calc(100vh - 60px)',
+            height: '100%',
+            minHeight: 0,
             display: 'flex',
             flexDirection: 'column',
         }, children: [_jsxs(Box, { sx: {
@@ -130,7 +413,14 @@ const AgentEvalsInner = ({ onLogout }) => {
                     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
+                }, children: [_jsx(BeakerIcon, { size: 16 }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Evaluation \u2014 ", podName] }), _jsxs(Text, { sx: {
+                                    fontSize: 0,
+                                    color: 'fg.muted',
+                                    display: 'block',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: ["Runtime API: ", runtimeCreationBaseUrl, "/api/runtimes/v1/runtimes"] })] }), _jsxs(FormControl, { sx: { minWidth: 160 }, children: [_jsx(FormControl.Label, { sx: { fontSize: 0, mb: 1 }, children: "Target" }), _jsxs(Select, { size: "small", value: executionTarget, onChange: e => onExecutionTargetChange(e.target.value), disabled: isRunning, children: [_jsx(Select.Option, { value: "cloud", children: "Cloud" }), _jsx(Select.Option, { value: "local", children: "Local" })] })] })] }), _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: "Eval Agent", brandIcon: _jsx(BeakerIcon, { size: 16 }), 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: [
                                 {
@@ -152,7 +442,7 @@ const AgentEvalsInner = ({ onLogout }) => {
                                     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: {
+                                }, 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 and persist results to /api/ai-agents/v1/evals." }), _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.toLowerCase().includes('failed') ? 'danger' : 'success', 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',
@@ -182,19 +472,15 @@ const syncTokenToIamStore = (token) => {
 };
 // ─── Main component with auth gate ─────────────────────────────────────────
 const AgentEvalsExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
+    const [executionTarget, setExecutionTarget] = useState(DEFAULT_EXECUTION_TARGET);
     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;
@@ -203,8 +489,8 @@ const AgentEvalsExample = () => {
         });
     }, [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(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentEvalsInner, { onLogout: handleLogout }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentEvalsInner, { onLogout: handleLogout, executionTarget: executionTarget, onExecutionTargetChange: setExecutionTarget }, executionTarget) }) }));
 };
 export default AgentEvalsExample;