@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/examples/AgentCheckpointsExample.js

@@ -0,0 +1,506 @@
+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.
+ */
+/**
+ * AgentCheckpointsExample
+ *
+ * Demonstrates launching a agent in the Datalayer cloud,
+ * with pause/resume (checkpoint) and lifecycle controls.
+ *
+ * Uses the `useAgent` hook which:
+ *   1. Creates a cloud agent runtime via the Datalayer Runtimes API
+ *      (environment: 'ai-agents-env')
+ *   2. Deploys an agent on the runtime's agent-runtimes sidecar
+ *   3. Provides pause/resume/terminate lifecycle backed by CRIU
+ *
+ * Prerequisites:
+ *   - Datalayer core configuration (runtimesRunUrl, aiagentsRunUrl)
+ *   - Valid IAM token (set via SignInSimple or iamStore)
+ */
+/// <reference types="vite/client" />
+import { useState, useCallback, useEffect, useRef, useMemo, } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Text, Button, IconButton, Spinner, Label, Flash, Heading, Tooltip, } from '@primer/react';
+import { AlertIcon, PlayIcon, SquareIcon, HistoryIcon, CheckCircleIcon, WorkflowIcon, SignOutIcon, XCircleIcon, ClockIcon, TagIcon, GlobeIcon, ZapIcon, GraphIcon, AiModelIcon, PeopleIcon, SidebarCollapseIcon, SidebarExpandIcon, SyncIcon, AgentIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { coreStore } from '@datalayer/core';
+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';
+import { useAgentLifecycle } from '../hooks/useCheckpoints';
+import { useAgentRuntimes, useRefreshAgentRuntimes, useDeleteAgentRuntime, } from '../hooks/useAgents';
+import { useDeletePausedAgentRuntime } from '../hooks/useCheckpoints';
+import { AGENT_STATUS_COLORS } from '../types/agents';
+const queryClient = new QueryClient();
+// ─── Defaults ──────────────────────────────────────────────────────────────
+const AGENT_SPEC_ID = 'monitor-sales-kpis';
+const DEMO_AGENT_NAME = AGENT_SPEC_ID;
+const LIGHT_CHECKPOINT_MESSAGES = [
+    '[Checkpoint] Captured message history snapshot',
+    '[Checkpoint] Saved conversational context for lightweight resume',
+];
+/**
+ * Agent spec attributes displayed in the sidebar.
+ * In production this would be fetched from the agentspecs service.
+ */
+const AGENT_SPEC = {
+    id: 'monitor-sales-kpis',
+    name: 'Monitor Sales KPIs',
+    description: 'Monitor and analyze sales KPIs from the CRM system. Generate daily reports, identify trends, and flag anomalies.',
+    model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0',
+    protocol: 'ag-ui',
+    memory: 'mem0',
+    sandbox_variant: 'jupyter',
+    environment_name: 'ai-agents-env',
+    tags: ['support', 'chatbot', 'sales', 'kpi', 'monitoring'],
+    trigger: {
+        type: 'schedule',
+        cron: '0 8 * * *',
+        description: 'Every day at 8:00 AM UTC',
+    },
+    model_config: { temperature: 0.3, max_tokens: 4096 },
+    advanced: {
+        cost_limit: '$5.00 per run',
+        time_limit: '300 seconds',
+        max_iterations: 50,
+        checkpoint_interval: 30,
+    },
+    icon: 'graph',
+    emoji: '📊',
+    color: '#2da44e',
+};
+// ─── Status badge ──────────────────────────────────────────────────────────
+const STATUS_COLORS = AGENT_STATUS_COLORS;
+// ─── Sidebar width ─────────────────────────────────────────────────────────
+const SIDEBAR_WIDTH = 300;
+// ─── Spec attribute row helper ─────────────────────────────────────────────
+const SpecRow = ({ icon: Icon, label, value }) => (_jsxs(Box, { sx: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 2,
+        fontSize: 0,
+        mb: 1,
+    }, children: [Icon && (_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0, mt: '2px' }, children: _jsx(Icon, { size: 12 }) })), _jsx(Text, { sx: { color: 'fg.muted', flexShrink: 0, minWidth: 80 }, children: label }), _jsx(Text, { sx: { fontWeight: 'semibold', wordBreak: 'break-word' }, children: value })] }));
+// ─── Inner component (rendered after auth) ─────────────────────────────────
+const AgentCheckpointsInner = ({ onLogout, }) => {
+    const { token } = useSimpleAuthStore();
+    const { runtime, status: runtimeStatus, endpoint: _agentEndpoint, isReady, error: hookError, launchRuntime, connectToRuntime, disconnect, } = useAgents({
+        agentSpecId: AGENT_SPEC_ID,
+        autoStart: false,
+        agentSpec: AGENT_SPEC,
+        agentConfig: {
+            name: DEMO_AGENT_NAME,
+            protocol: 'ag-ui',
+            description: 'Monitor Sales KPI agent — exercises pause/resume checkpointing',
+        },
+    });
+    const { pause, resume, terminate, refreshCheckpoints, checkpoints } = useAgentLifecycle({
+        agentSpecId: AGENT_SPEC_ID,
+        agentSpec: AGENT_SPEC,
+        runtime,
+        connectToRuntime,
+        disconnect,
+        launchRuntime,
+    });
+    // Agent runtimes from the focused hook
+    const { data: agentRuntimes } = useAgentRuntimes();
+    const refetchRuntimes = useRefreshAgentRuntimes();
+    const deleteRuntimeMutation = useDeleteAgentRuntime();
+    const deletePausedRuntimeMutation = useDeletePausedAgentRuntime();
+    const deleteRuntimeByPod = deleteRuntimeMutation.mutateAsync;
+    const deletePausedRuntimeByPod = deletePausedRuntimeMutation.mutateAsync;
+    const [isStarting, setIsStarting] = useState(false);
+    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const [actionLoading, setActionLoading] = useState(false);
+    const [actionError, setActionError] = useState(null);
+    const [runningAgentsOverride, setRunningAgentsOverride] = useState(null);
+    const [resumeMode, setResumeMode] = useState('light');
+    const autoConnectAttemptRef = useRef(null);
+    const displayError = hookError || actionError;
+    const podName = runtime?.podName || '(launching…)';
+    const agentId = runtime?.agentId || AGENT_SPEC_ID;
+    const agentBaseUrl = runtime?.agentBaseUrl || '';
+    const handleLaunch = useCallback(async () => {
+        setIsStarting(true);
+        setActionError(null);
+        try {
+            await launchRuntime();
+            // Auto-create effect will fire once lifecycleStatus='ready' and runtime is set.
+        }
+        catch (e) {
+            setActionError(e instanceof Error ? e.message : 'Launch failed');
+        }
+        finally {
+            setIsStarting(false);
+        }
+    }, [launchRuntime]);
+    // ── Actions ──────────────────────────────────────────────────────────────
+    const refreshAgents = useCallback(async () => {
+        await refetchRuntimes();
+    }, [refetchRuntimes]);
+    const handlePause = useCallback(async (mode) => {
+        setActionLoading(true);
+        setActionError(null);
+        try {
+            await pause(mode, mode === 'light' ? LIGHT_CHECKPOINT_MESSAGES : undefined);
+            await Promise.all([refreshCheckpoints(), refreshAgents()]);
+            await terminate();
+            setRunningAgentsOverride([]);
+        }
+        catch (e) {
+            setActionError(e instanceof Error ? e.message : 'Checkpoint failed');
+        }
+        finally {
+            setActionLoading(false);
+        }
+    }, [pause, refreshCheckpoints, refreshAgents, terminate]);
+    const handleResume = useCallback(async (mode, checkpointId, podName) => {
+        setActionLoading(true);
+        setActionError(null);
+        try {
+            await resume(mode, checkpointId, podName);
+            await Promise.all([refreshCheckpoints(), refreshAgents()]);
+        }
+        catch (e) {
+            setActionError(e instanceof Error ? e.message : 'Resume failed');
+        }
+        finally {
+            setActionLoading(false);
+        }
+    }, [resume, refreshCheckpoints, refreshAgents]);
+    // Refresh lists when a runtime connection is established.
+    useEffect(() => {
+        if (runtime?.podName) {
+            refreshCheckpoints();
+            refreshAgents();
+        }
+    }, [runtime?.podName, refreshCheckpoints, refreshAgents]);
+    // Clear the manual override once a real runtimes fetch lands.
+    useEffect(() => {
+        if (runningAgentsOverride && agentRuntimes) {
+            setRunningAgentsOverride(null);
+        }
+    }, [agentRuntimes, runningAgentsOverride]);
+    const runningAgents = useMemo(() => {
+        if (runningAgentsOverride)
+            return runningAgentsOverride;
+        return (agentRuntimes || []).map(rt => ({
+            id: rt.id,
+            podName: rt.pod_name,
+            name: rt.name,
+            description: rt.environment_title || rt.environment_name,
+            status: rt.status,
+            protocol: 'ag-ui',
+            environmentName: rt.environment_name,
+            jupyterBaseUrl: rt.url,
+        }));
+    }, [agentRuntimes, runningAgentsOverride]);
+    // Auto-bind to matching runtime when idle so actions target a real runtime.
+    useEffect(() => {
+        if (runtime) {
+            autoConnectAttemptRef.current = null;
+            return;
+        }
+        if ((runtimeStatus !== 'idle' && runtimeStatus !== 'disconnected') ||
+            runningAgents.length === 0) {
+            return;
+        }
+        const candidate = runningAgents.find(a => a.name === DEMO_AGENT_NAME) || runningAgents[0];
+        if (!candidate?.jupyterBaseUrl || !candidate.environmentName) {
+            return;
+        }
+        // Prevent reconnect loops to the same runtime while status remains idle/disconnected.
+        if (autoConnectAttemptRef.current === candidate.podName) {
+            return;
+        }
+        autoConnectAttemptRef.current = candidate.podName;
+        connectToRuntime({
+            podName: candidate.podName,
+            environmentName: candidate.environmentName,
+            jupyterBaseUrl: candidate.jupyterBaseUrl,
+        });
+    }, [runtime, runtimeStatus, runningAgents, connectToRuntime]);
+    const handleTerminate = useCallback(async () => {
+        setActionLoading(true);
+        setActionError(null);
+        try {
+            await terminate();
+        }
+        catch (e) {
+            setActionError(e instanceof Error ? e.message : 'Terminate failed');
+        }
+        finally {
+            setActionLoading(false);
+        }
+    }, [terminate]);
+    const handleTerminateRuntime = useCallback(async (agent) => {
+        setActionLoading(true);
+        setActionError(null);
+        try {
+            const isCurrentRuntime = runtime?.podName === agent.podName;
+            const isLastKnownRuntime = runningAgents.length === 1 &&
+                runningAgents[0].podName === agent.podName;
+            if (agent.status === 'paused') {
+                await deletePausedRuntimeByPod(agent.podName);
+            }
+            else {
+                await deleteRuntimeByPod(agent.podName);
+            }
+            // Ensure sidebar terminate resets to the home state like header terminate.
+            if (isCurrentRuntime || isLastKnownRuntime) {
+                await terminate();
+            }
+            await Promise.all([refreshAgents(), refreshCheckpoints()]);
+        }
+        catch (e) {
+            setActionError(e instanceof Error ? e.message : 'Terminate failed');
+        }
+        finally {
+            setActionLoading(false);
+        }
+    }, [
+        deletePausedRuntimeByPod,
+        deleteRuntimeByPod,
+        refreshAgents,
+        refreshCheckpoints,
+        runningAgents,
+        runtime?.podName,
+        terminate,
+    ]);
+    const pausedAgents = runningAgents.filter(a => a.status === 'paused');
+    const activeAgents = runningAgents.filter(a => a.status !== 'paused');
+    const checkpointRuntimeIds = new Set(checkpoints
+        .map((ckpt) => ckpt.runtime_uid)
+        .filter((value) => Boolean(value)));
+    const pausedAgentsWithoutCheckpoint = pausedAgents.filter((a) => !checkpointRuntimeIds.has(a.podName));
+    const showNoAgentRunningView = (runtimeStatus === 'idle' || runtimeStatus === 'disconnected') &&
+        !isStarting;
+    const showLaunchingView = runtimeStatus === 'launching' ||
+        runtimeStatus === 'connecting' ||
+        isStarting;
+    // ── Error ────────────────────────────────────────────────────────────────
+    if (runtimeStatus === 'error' && !runtime) {
+        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', fontSize: 2 }, children: "Agent failed to start" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: displayError })] }));
+    }
+    // ── Running / Paused ─────────────────────────────────────────────────────
+    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(Button, { size: "small", variant: "invisible", onClick: () => setSidebarOpen(prev => !prev), leadingVisual: sidebarOpen ? SidebarCollapseIcon : SidebarExpandIcon, "aria-label": sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar' }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Agent \u2014 ", podName] }), _jsx(Label, { variant: STATUS_COLORS[runtimeStatus], children: runtimeStatus }), (runtimeStatus === 'ready' ||
+                        runtimeStatus === 'resumed' ||
+                        runtimeStatus === 'resuming' ||
+                        runtimeStatus === 'paused') && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", leadingVisual: SquareIcon, onClick: () => handlePause('light'), disabled: actionLoading ||
+                                    runtimeStatus === 'paused' ||
+                                    runtimeStatus === 'resumed', children: "Checkpoint (Light) + Terminate" }), _jsx(Button, { size: "small", leadingVisual: SquareIcon, onClick: () => handlePause('criu'), disabled: actionLoading ||
+                                    runtimeStatus === 'paused' ||
+                                    runtimeStatus === 'resumed', children: "Checkpoint (CRIU) + Terminate" }), runtimeStatus === 'paused' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode), disabled: actionLoading, children: resumeMode === 'light' ? 'Resume (light)' : 'Resume (criu)' }), _jsx(Button, { size: "small", variant: resumeMode === 'light' ? 'primary' : 'invisible', onClick: () => setResumeMode('light'), disabled: actionLoading, children: "Light" }), _jsx(Button, { size: "small", variant: resumeMode === 'criu' ? 'primary' : 'invisible', onClick: () => setResumeMode('criu'), disabled: actionLoading, children: "CRIU checkpoint" })] })) : null, _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: handleTerminate, disabled: actionLoading, children: "Terminate" })] })), actionLoading && _jsx(Spinner, { size: "small" }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), displayError && (_jsx(Flash, { variant: "danger", sx: { mx: 3, mt: 2 }, children: displayError })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [sidebarOpen && (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: SIDEBAR_WIDTH,
+                            flexShrink: 0,
+                            borderRight: '1px solid',
+                            borderColor: 'border.default',
+                            overflowY: 'auto',
+                            bg: 'canvas.subtle',
+                        }, children: [_jsxs(Box, { sx: {
+                                    order: 3,
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(Text, { sx: { fontSize: '20px' }, children: AGENT_SPEC.emoji }), _jsx(Heading, { as: "h4", sx: { fontSize: 2, m: 0 }, children: AGENT_SPEC.name })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 3 }, children: AGENT_SPEC.description }), _jsx(SpecRow, { icon: AiModelIcon, label: "Model", value: AGENT_SPEC.model }), _jsx(SpecRow, { icon: GlobeIcon, label: "Protocol", value: AGENT_SPEC.protocol }), _jsx(SpecRow, { icon: ZapIcon, label: "Memory", value: AGENT_SPEC.memory }), _jsx(SpecRow, { icon: GraphIcon, label: "Environment", value: AGENT_SPEC.environment_name }), _jsx(SpecRow, { icon: ClockIcon, label: "Trigger", value: AGENT_SPEC.trigger.description }), _jsx(SpecRow, { icon: TagIcon, label: "Tags", value: AGENT_SPEC.tags.join(', ') }), _jsxs(Box, { sx: {
+                                            mt: 2,
+                                            pt: 2,
+                                            borderTop: '1px solid',
+                                            borderColor: 'border.default',
+                                        }, children: [_jsx(Text, { sx: {
+                                                    fontWeight: 'semibold',
+                                                    fontSize: 0,
+                                                    display: 'block',
+                                                    mb: 1,
+                                                }, children: "Advanced" }), _jsx(SpecRow, { label: "Cost limit", value: AGENT_SPEC.advanced.cost_limit }), _jsx(SpecRow, { label: "Time limit", value: AGENT_SPEC.advanced.time_limit }), _jsx(SpecRow, { label: "Max iterations", value: String(AGENT_SPEC.advanced.max_iterations) }), _jsx(SpecRow, { label: "Checkpoint interval", value: `${AGENT_SPEC.advanced.checkpoint_interval}s` }), _jsx(SpecRow, { label: "Temperature", value: String(AGENT_SPEC.model_config.temperature) }), _jsx(SpecRow, { label: "Max tokens", value: String(AGENT_SPEC.model_config.max_tokens) })] })] }), _jsxs(Box, { sx: {
+                                    order: 2,
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(PeopleIcon, { size: 14 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Running Agents (", activeAgents.length, ")"] })] }), activeAgents.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No running agents." })) : (activeAgents.map((a) => (_jsxs(Box, { sx: {
+                                            p: 2,
+                                            mb: 1,
+                                            bg: 'canvas.default',
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                        }, children: [_jsxs(Box, { sx: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                    mb: 1,
+                                                }, children: [_jsx(Label, { variant: STATUS_COLORS[(a.id === agentId || a.name === DEMO_AGENT_NAME
+                                                            ? runtimeStatus
+                                                            : a.status) ?? 'running'] ?? 'secondary', sx: { fontSize: '10px' }, children: (a.id === agentId || a.name === DEMO_AGENT_NAME
+                                                            ? runtimeStatus
+                                                            : a.status) ?? 'running' }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 0, flex: 1 }, children: a.name ?? a.id })] }), a.description && (_jsx(Text, { sx: {
+                                                    fontSize: 0,
+                                                    color: 'fg.muted',
+                                                    display: 'block',
+                                                    mb: 1,
+                                                }, children: a.description })), _jsxs(Box, { sx: {
+                                                    display: 'flex',
+                                                    gap: 1,
+                                                    flexWrap: 'wrap',
+                                                    alignItems: 'center',
+                                                }, children: [a.protocol && (_jsx(Label, { sx: { fontSize: '10px' }, variant: "accent", children: a.protocol })), _jsx(Box, { sx: { flex: 1 } }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: () => handleTerminateRuntime(a), disabled: actionLoading, sx: { fontSize: 0 }, children: "Terminate" })] })] }, a.id))))] }), _jsxs(Box, { sx: {
+                                    order: 1,
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(HistoryIcon, { size: 14 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1, flex: 1 }, children: ["Checkpoints (", checkpoints.length + pausedAgentsWithoutCheckpoint.length, ")"] }), _jsx(IconButton, { "aria-label": "Refresh checkpoints", icon: SyncIcon, size: "small", variant: "invisible", onClick: refreshCheckpoints })] }), pausedAgentsWithoutCheckpoint.map((a) => (_jsxs(Box, { sx: {
+                                            p: 2,
+                                            mb: 1,
+                                            bg: 'canvas.default',
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'attention.muted',
+                                        }, children: [_jsxs(Box, { sx: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                    mb: 1,
+                                                }, children: [_jsx(SquareIcon, { size: 12 }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 0, flex: 1 }, children: a.name ?? a.id }), _jsx(Label, { variant: "severe", sx: { fontSize: '9px' }, children: "paused" })] }), a.description && (_jsx(Text, { sx: {
+                                                    fontSize: 0,
+                                                    color: 'fg.muted',
+                                                    display: 'block',
+                                                    mb: 1,
+                                                }, children: a.description })), _jsx(Box, { sx: {
+                                                    mt: 2,
+                                                    display: 'flex',
+                                                    justifyContent: 'flex-end',
+                                                }, children: _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode, undefined, a.podName), disabled: actionLoading, children: "Resume" }) })] }, `paused-${a.id}`))), checkpoints.length === 0 &&
+                                        pausedAgentsWithoutCheckpoint.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No checkpoints yet. Use Checkpoint (Light) or Checkpoint create one." })) : (checkpoints.map((ckpt) => (_jsxs(Box, { sx: {
+                                            p: 2,
+                                            mb: 1,
+                                            bg: 'canvas.default',
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                        }, children: [_jsxs(Box, { sx: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                    mb: 1,
+                                                }, children: [ckpt.status === 'failed' ? (_jsx(AlertIcon, { size: 12, fill: "var(--fgColor-danger)" })) : (_jsx(CheckCircleIcon, { size: 12 })), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 0, flex: 1 }, children: ckpt.name }), _jsx(Label, { variant: ckpt.status === 'failed'
+                                                            ? 'danger'
+                                                            : ckpt.status === 'paused'
+                                                                ? 'done'
+                                                                : 'secondary', sx: { fontSize: '9px', textTransform: 'capitalize' }, children: ckpt.status })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: new Date(ckpt.updated_at).toLocaleString() }), ckpt.checkpoint_mode && (_jsx(Label, { sx: { mt: 1, mr: 1, fontSize: '10px' }, variant: "attention", children: ckpt.checkpoint_mode.toUpperCase() })), ckpt.status_message && (_jsx(Tooltip, { text: ckpt.status_message, direction: "w", children: _jsx("button", { type: "button", style: {
+                                                        all: 'unset',
+                                                        display: 'block',
+                                                        marginTop: 4,
+                                                        cursor: 'pointer',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                        maxWidth: '100%',
+                                                        fontSize: 'var(--text-body-size-small, 12px)',
+                                                        color: 'var(--fgColor-danger, var(--color-danger-fg))',
+                                                    }, children: ckpt.status_message }) })), ckpt.agent_spec_id && (_jsx(Label, { sx: { mt: 1, fontSize: '10px' }, variant: "accent", children: ckpt.agent_spec_id })), _jsx(Box, { sx: {
+                                                    mt: 2,
+                                                    display: 'flex',
+                                                    justifyContent: 'flex-end',
+                                                }, children: _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(ckpt.checkpoint_mode || 'light', ckpt.id, ckpt.runtime_uid), disabled: actionLoading || ckpt.status === 'failed', children: "Resume" }) })] }, ckpt.id))))] })] })), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: showLaunchingView ? (_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: runtimeStatus === 'launching'
+                                        ? `Launching runtime for ${AGENT_SPEC_ID}…`
+                                        : 'Creating agent on runtime…' })] })) : showNoAgentRunningView ? (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                height: '100%',
+                                gap: 3,
+                                px: 3,
+                            }, children: [_jsx(AgentIcon, { size: 48 }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Checkpoint Agent" }), _jsxs(Text, { sx: { color: 'fg.muted', textAlign: 'center', maxWidth: 560 }, children: ["Launch a cloud agent runtime with pause/resume checkpointing. The agent will be deployed from the", ' ', _jsx("strong", { children: AGENT_SPEC_ID }), " spec."] }), displayError && (_jsx(Flash, { variant: "danger", sx: { maxWidth: 560, width: '100%' }, children: displayError })), _jsx(Button, { variant: "primary", size: "large", leadingVisual: PlayIcon, onClick: handleLaunch, children: "Launch Agent" })] })) : (isReady || runtimeStatus === 'resumed') &&
+                            runtimeStatus !== 'paused' ? (_jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                {
+                                    title: 'KPIs',
+                                    message: "Show me today's sales KPI dashboard",
+                                },
+                                {
+                                    title: 'Trends',
+                                    message: 'What are the current revenue trends?',
+                                },
+                            ], submitOnSuggestionClick: true })) : (_jsx(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                height: '100%',
+                                color: 'fg.muted',
+                                gap: 3,
+                            }, children: runtimeStatus === 'paused' ? (_jsx(Text, { sx: { fontSize: 2 }, children: "Agent is paused \u2014 click Resume to continue the conversation." })) : runtimeStatus === 'idle' ||
+                                runtimeStatus === 'disconnected' ? (_jsx(Text, { sx: { fontSize: 2 }, children: "No active runtime connection. Launch an agent or select one in the sidebar." })) : runtimeStatus === 'error' ? (_jsxs(_Fragment, { children: [_jsx(AlertIcon, { size: 32 }), _jsx(Text, { sx: { fontSize: 2, color: 'danger.fg' }, children: "Agent failed to connect" }), displayError && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: displayError })), _jsx(Button, { variant: "primary", onClick: handleLaunch, children: "Retry Launch" })] })) : (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "medium" }), _jsxs(Text, { sx: { fontSize: 2 }, children: ["Connecting to agent\u2026 (status: ", runtimeStatus, ")"] })] })) })) })] })] }));
+};
+// ─── Main component with auth gate ─────────────────────────────────────────
+const AgentCheckpointsExample = () => {
+    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const hasSynced = useRef(false);
+    // Sync persisted token (from a previous session) to iamStore on mount
+    useEffect(() => {
+        if (token && !hasSynced.current) {
+            hasSynced.current = true;
+            import('@datalayer/core/lib/state').then(({ iamStore }) => {
+                iamStore.setState({ token });
+            });
+        }
+    }, [token]);
+    // Wrap setAuth to also sync the token to iamStore on sign-in
+    const handleSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        hasSynced.current = true;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: newToken });
+        });
+    }, [setAuth]);
+    // Clear iamStore token on logout
+    const handleLogout = useCallback(() => {
+        clearAuth();
+        hasSynced.current = false;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: undefined });
+        });
+    }, [clearAuth]);
+    const loginUrl = useRef(`${coreStore.getState().configuration?.iamRunUrl ||
+        coreStore.getState().configuration?.runUrl ||
+        'https://prod1.datalayer.run'}/api/iam/v1/login`).current;
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), loginUrl: loginUrl, title: "Agent Checkpointing", description: "Sign in to launch and checkpoint durable agents.", leadingIcon: _jsx(WorkflowIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(ThemedProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(AgentCheckpointsInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentCheckpointsExample;

package/lib/examples/AgentCodemodeExample.d.ts

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