@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/examples/AgentSandboxExample.js

@@ -0,0 +1,490 @@
+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.
+ */
+/**
+ * AgentSandboxExample
+ *
+ * Demonstrates sandbox variant switching (local-eval / jupyter) with a live
+ * sidebar that streams WebSocket messages to and from the
+ * `/configure/sandbox/ws` endpoint.
+ *
+ * - Creates a local agent (spec: demo-full) with codemode enabled
+ * - SegmentedControl toggles between "local-eval" and "jupyter" variants
+ * - Sidebar shows live sandbox status, WebSocket event log, and an
+ *   interrupt button
+ *
+ * @module examples/AgentSandboxExample
+ */
+/// <reference types="vite/client" />
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
+import { Button, Flash, Heading, Label, SegmentedControl, Spinner, Text, } from '@primer/react';
+import { CodeIcon, SignOutIcon, StopIcon, TerminalIcon, } from '@primer/octicons-react';
+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 { Chat } from '../chat';
+import { SANDBOX_STATUS_COLORS, SANDBOX_STATUS_LABELS } from '../types/sandbox';
+// ─── Constants ─────────────────────────────────────────────────────────────
+const queryClient = new QueryClient();
+const AGENT_NAME = 'sandbox-demo-agent';
+const AGENT_SPEC_ID = 'demo-full';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+let _logId = 0;
+function tsNow() {
+    return new Date().toISOString().slice(11, 23); // HH:MM:SS.mmm
+}
+function formatSwitchTime(isoTs) {
+    const d = new Date(isoTs);
+    return d.toLocaleTimeString();
+}
+// ─── Helpers ───────────────────────────────────────────────────────────────
+function deriveAggregate(status) {
+    if (!status ||
+        status.variant === 'unavailable' ||
+        status.variant === 'error') {
+        return 'unavailable';
+    }
+    if (!status.sandbox_running)
+        return 'stopped';
+    if (status.is_executing)
+        return 'executing';
+    return 'idle';
+}
+function apiVariantFromUi(variant) {
+    return variant;
+}
+// ─── Inner component (after auth) ──────────────────────────────────────────
+const AgentSandboxInner = ({ onLogout, }) => {
+    const { token } = useSimpleAuthStore();
+    const chatAuthToken = token === null ? undefined : token;
+    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    // ── Agent lifecycle ──
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(AGENT_NAME);
+    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    // ── Sandbox variant toggle ──
+    const [variant, setVariant] = useState('local-eval');
+    const [variantSwitching, setVariantSwitching] = useState(false);
+    const [lastSwitch, setLastSwitch] = useState(null);
+    // ── WebSocket state ──
+    const [wsState, setWsState] = useState('closed');
+    const [sandboxStatus, setSandboxStatus] = useState(null);
+    const [wsLog, setWsLog] = useState([]);
+    const wsRef = useRef(null);
+    const reconnectTimerRef = useRef();
+    const addLog = useCallback((direction, raw) => {
+        setWsLog(prev => {
+            const next = [{ id: ++_logId, ts: tsNow(), direction, raw }, ...prev];
+            // Keep newest 200 entries
+            return next.slice(0, 200);
+        });
+    }, []);
+    // ── Auth fetch helper ──
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    // ── Create local agent ──
+    useEffect(() => {
+        let isCancelled = false;
+        const createLocalAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
+            try {
+                // Always delete any existing agent with this name first so we
+                // recreate it with the latest configuration (system prompt, toolsets).
+                await authFetch(`${agentBaseUrl}/api/v1/agents/${AGENT_NAME}`, {
+                    method: 'DELETE',
+                }).catch(() => {
+                    /* ignore 404 / not-found */
+                });
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: AGENT_NAME,
+                        description: 'Agent with sandbox code execution',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        system_prompt: 'You are a helpful AI assistant with a Python execution sandbox. ' +
+                            'When asked to run code, count, loop, assign variables, compute, or ' +
+                            'perform any programming task, use the execute_code tool to run ' +
+                            'Python code in the sandbox. Always use execute_code for Python computation.',
+                        enable_skills: false,
+                        skills: [],
+                        tools: [],
+                        selected_mcp_servers: [],
+                        enable_codemode: true,
+                        sandbox_variant: 'local-eval',
+                    }),
+                });
+                let resolvedAgentId = AGENT_NAME;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || AGENT_NAME;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const data = await response.json().catch(() => null);
+                        detail =
+                            (typeof data?.detail === 'string' && data.detail) ||
+                                (typeof data?.message === 'string' && data.message) ||
+                                '';
+                    }
+                    else {
+                        detail = await response.text();
+                    }
+                    throw new Error(detail || `Failed to create local agent: ${response.status}`);
+                }
+                if (!isCancelled) {
+                    // Ensure codemode is active and sandbox is initialized.
+                    addLog('sent', 'POST /configure/codemode/toggle {enabled:true}');
+                    const toggleResp = await authFetch(`${agentBaseUrl}/api/v1/configure/codemode/toggle`, {
+                        method: 'POST',
+                        body: JSON.stringify({
+                            enabled: true,
+                        }),
+                    });
+                    addLog('recv', `HTTP ${toggleResp.status} /configure/codemode/toggle`);
+                    if (!toggleResp.ok) {
+                        const text = await toggleResp.text().catch(() => '');
+                        throw new Error(text || `Failed to activate codemode (${toggleResp.status})`);
+                    }
+                    addLog('sent', 'POST /agents/sandbox/configure {variant:local-eval}');
+                    const configureResp = await authFetch(`${agentBaseUrl}/api/v1/agents/sandbox/configure`, {
+                        method: 'POST',
+                        body: JSON.stringify({
+                            variant: 'local-eval',
+                        }),
+                    });
+                    addLog('recv', `HTTP ${configureResp.status} /agents/sandbox/configure`);
+                    if (!configureResp.ok) {
+                        const text = await configureResp.text().catch(() => '');
+                        throw new Error(text ||
+                            `Failed to configure initial sandbox (${configureResp.status})`);
+                    }
+                    const configureData = await configureResp.json().catch(() => null);
+                    addLog('sent', 'POST /agents/sandbox/restart');
+                    const restartResp = await authFetch(`${agentBaseUrl}/api/v1/agents/sandbox/restart`, {
+                        method: 'POST',
+                    });
+                    addLog('recv', `HTTP ${restartResp.status} /agents/sandbox/restart`);
+                    if (!restartResp.ok) {
+                        const text = await restartResp.text().catch(() => '');
+                        throw new Error(text || `Failed to restart sandbox (${restartResp.status})`);
+                    }
+                    await restartResp.json().catch(() => null);
+                    setLastSwitch({
+                        variant: String(configureData?.variant || 'local-eval'),
+                        switchedAt: new Date().toISOString(),
+                    });
+                    setAgentId(resolvedAgentId);
+                    setIsReconnectedAgent(false);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createLocalAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, authFetch]);
+    // ── Handle variant switch ──
+    const switchVariant = useCallback(async (newVariant) => {
+        if (newVariant === variant)
+            return;
+        setVariantSwitching(true);
+        try {
+            // Keep codemode active, then reconfigure sandbox manager variant.
+            addLog('sent', 'POST /configure/codemode/toggle {enabled:true}');
+            const toggleResp = await authFetch(`${agentBaseUrl}/api/v1/configure/codemode/toggle`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    enabled: true,
+                }),
+            });
+            addLog('recv', `HTTP ${toggleResp.status} /configure/codemode/toggle`);
+            if (!toggleResp.ok) {
+                const text = await toggleResp.text().catch(() => '');
+                throw new Error(text || `Failed to keep codemode enabled (${toggleResp.status})`);
+            }
+            addLog('sent', `POST /agents/sandbox/configure {variant:${apiVariantFromUi(newVariant)}}`);
+            const configureResp = await authFetch(`${agentBaseUrl}/api/v1/agents/sandbox/configure`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    variant: apiVariantFromUi(newVariant),
+                }),
+            });
+            addLog('recv', `HTTP ${configureResp.status} /agents/sandbox/configure`);
+            if (!configureResp.ok) {
+                const text = await configureResp.text().catch(() => '');
+                throw new Error(text || `Failed to switch variant (${configureResp.status})`);
+            }
+            const configureData = await configureResp.json().catch(() => null);
+            addLog('sent', 'POST /agents/sandbox/restart');
+            const restartResp = await authFetch(`${agentBaseUrl}/api/v1/agents/sandbox/restart`, {
+                method: 'POST',
+            });
+            addLog('recv', `HTTP ${restartResp.status} /agents/sandbox/restart`);
+            if (!restartResp.ok) {
+                const text = await restartResp.text().catch(() => '');
+                throw new Error(text || `Failed to restart sandbox (${restartResp.status})`);
+            }
+            await restartResp.json().catch(() => null);
+            setVariant(newVariant);
+            setLastSwitch({
+                variant: String(configureData?.variant || apiVariantFromUi(newVariant)),
+                switchedAt: new Date().toISOString(),
+            });
+        }
+        catch (error) {
+            setHookError(error instanceof Error ? error.message : 'Failed to switch variant');
+        }
+        finally {
+            setVariantSwitching(false);
+        }
+    }, [variant, agentBaseUrl, authFetch]);
+    // ── WebSocket lifecycle ──
+    useEffect(() => {
+        if (!isReady)
+            return;
+        let disposed = false;
+        const wsBase = agentBaseUrl.replace(/^http/, 'ws');
+        const wsUrl = `${wsBase}/api/v1/configure/sandbox/ws?agent_id=${encodeURIComponent(agentId)}`;
+        function connect() {
+            if (disposed)
+                return;
+            setWsState('connecting');
+            const ws = new WebSocket(wsUrl);
+            ws.onopen = () => {
+                setWsState('connected');
+                wsRef.current = ws;
+                addLog('recv', '— WebSocket connected —');
+            };
+            ws.onmessage = event => {
+                try {
+                    const msg = JSON.parse(event.data);
+                    addLog('recv', event.data);
+                    // Interrupt acks
+                    if (msg.action === 'interrupt')
+                        return;
+                    setSandboxStatus(msg);
+                }
+                catch {
+                    addLog('recv', `[unparseable] ${event.data}`);
+                }
+            };
+            ws.onclose = () => {
+                wsRef.current = null;
+                if (!disposed) {
+                    setWsState('closed');
+                    addLog('recv', '— WebSocket closed, reconnecting… —');
+                    reconnectTimerRef.current = setTimeout(connect, 3000);
+                }
+            };
+            ws.onerror = () => {
+                ws.close();
+            };
+        }
+        connect();
+        return () => {
+            disposed = true;
+            clearTimeout(reconnectTimerRef.current);
+            wsRef.current?.close();
+            wsRef.current = null;
+            setWsState('closed');
+        };
+    }, [isReady, agentBaseUrl, agentId, addLog]);
+    // ── Send interrupt via WS ──
+    const sendInterrupt = useCallback(() => {
+        const ws = wsRef.current;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            const payload = JSON.stringify({ action: 'interrupt' });
+            ws.send(payload);
+            addLog('sent', payload);
+        }
+    }, [addLog]);
+    // ── Derived display ──
+    const aggregate = useMemo(() => deriveAggregate(sandboxStatus), [sandboxStatus]);
+    const statusColor = SANDBOX_STATUS_COLORS[aggregate];
+    const statusLabel = SANDBOX_STATUS_LABELS[aggregate];
+    // ── Loading state ──
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching sandbox demo\u2026" })] }));
+    }
+    // ── Error state ──
+    if (runtimeStatus === 'error' || hookError) {
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
+    }
+    // ── Sidebar ──
+    const sidebar = (_jsxs(Box, { sx: {
+            width: 360,
+            minWidth: 300,
+            borderLeft: '1px solid',
+            borderColor: 'border.default',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            bg: 'canvas.subtle',
+        }, children: [_jsxs(Box, { sx: {
+                    p: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: "Sandbox Details" }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            flexWrap: 'wrap',
+                        }, children: [_jsxs(Label, { variant: wsState === 'connected'
+                                    ? 'success'
+                                    : wsState === 'connecting'
+                                        ? 'attention'
+                                        : 'secondary', children: ["WS: ", wsState] }), _jsx(Box, { as: "span", sx: {
+                                    display: 'inline-block',
+                                    width: 10,
+                                    height: 10,
+                                    borderRadius: '50%',
+                                    bg: statusColor,
+                                    flexShrink: 0,
+                                } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: statusLabel })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: ["Last switch:", ' ', lastSwitch
+                                ? `${lastSwitch.variant} at ${formatSwitchTime(lastSwitch.switchedAt)}`
+                                : 'n/a'] })] }), sandboxStatus && (_jsxs(Box, { sx: {
+                    mx: 2,
+                    mt: 2,
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.default',
+                    fontSize: 0,
+                    fontFamily: 'mono',
+                }, children: [_jsxs(Box, { sx: { mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "variant: " }), _jsx(Text, { children: sandboxStatus.variant })] }), _jsxs(Box, { sx: { mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "sandbox_running: " }), _jsx(Text, { children: String(sandboxStatus.sandbox_running) })] }), _jsxs(Box, { sx: { mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "is_executing: " }), _jsx(Label, { variant: sandboxStatus.is_executing ? 'accent' : 'secondary', children: String(sandboxStatus.is_executing) })] }), sandboxStatus.jupyter_url && (_jsxs(Box, { sx: { mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "jupyter_url: " }), _jsx(Text, { sx: { wordBreak: 'break-all' }, children: sandboxStatus.jupyter_url })] })), sandboxStatus.error && (_jsx(Flash, { variant: "danger", sx: { mt: 1, fontSize: 0, p: 1 }, children: sandboxStatus.error }))] })), _jsx(Box, { sx: { mx: 2, mt: 2 }, children: _jsx(Button, { size: "small", variant: "danger", disabled: aggregate !== 'executing', onClick: sendInterrupt, leadingVisual: StopIcon, block: true, children: "Interrupt Execution" }) }), _jsxs(Box, { sx: {
+                    mx: 2,
+                    mt: 2,
+                    mb: 2,
+                    flex: 1,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.default',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: 0,
+                }, children: [_jsxs(Box, { sx: {
+                            px: 2,
+                            py: 1,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        }, children: [_jsxs(Text, { sx: { fontWeight: 600, fontSize: 0 }, children: ["WebSocket Log (", wsLog.length, ")"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setWsLog([]), sx: { fontSize: 0, px: 1 }, children: "Clear" })] }), _jsx(Box, { sx: {
+                            overflow: 'auto',
+                            flex: 1,
+                            fontFamily: 'mono',
+                            fontSize: '11px',
+                            lineHeight: '18px',
+                        }, children: wsLog.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', p: 2, display: 'block', fontSize: 0 }, children: "No messages yet." })) : (wsLog.map(entry => (_jsxs(Box, { sx: {
+                                px: 2,
+                                py: '2px',
+                                color: entry.direction === 'sent' ? 'accent.fg' : 'fg.default',
+                                bg: entry.direction === 'sent'
+                                    ? 'accent.subtle'
+                                    : 'transparent',
+                                borderBottom: '1px solid',
+                                borderColor: 'border.subtle',
+                                wordBreak: 'break-all',
+                            }, children: [_jsx(Text, { sx: {
+                                        color: 'fg.muted',
+                                        mr: 1,
+                                        userSelect: 'none',
+                                    }, children: entry.ts }), _jsxs(Text, { sx: {
+                                        fontWeight: entry.direction === 'sent' ? 600 : 400,
+                                    }, children: [entry.direction === 'sent' ? '▲ ' : '▼ ', entry.raw] })] }, entry.id)))) })] })] }));
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
+                    px: 3,
+                    py: 1,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running \u2014 reconnected." }) })), _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, authToken: chatAuthToken, title: "Sandbox Agent", placeholder: "Ask the agent to write and run code\u2026", showHeader: true, showNewChatButton: true, showClearButton: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(SegmentedControl, { "aria-label": "Sandbox variant", size: "small", onChange: index => void switchVariant(index === 0 ? 'local-eval' : 'jupyter'), children: [_jsx(SegmentedControl.Button, { selected: variant === 'local-eval', leadingIcon: TerminalIcon, children: "local-eval" }), _jsx(SegmentedControl.Button, { selected: variant === 'jupyter', leadingIcon: CodeIcon, children: "jupyter" })] }), variantSwitching && _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" })] }), suggestions: [
+                                {
+                                    title: 'Run some Python',
+                                    message: 'Write a Python script that computes the first 20 Fibonacci numbers and prints them.',
+                                },
+                                {
+                                    title: 'Generate a plot',
+                                    message: 'Write Python code to generate a matplotlib bar chart of the top 5 programming languages by popularity, and save it to chart.png.',
+                                },
+                                {
+                                    title: 'Long-running task',
+                                    message: 'Write Python code that counts from 1 to 30 with a 1-second sleep between each number, printing each one.',
+                                },
+                            ], submitOnSuggestionClick: true }) }), sidebar] })] }));
+};
+// ─── Auth wrapper ──────────────────────────────────────────────────────────
+const syncTokenToIamStore = (newToken) => {
+    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        iamStore.setState({ token: newToken });
+    });
+};
+const AgentSandboxExample = () => {
+    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: "Sandbox Agent", description: "Sign in to explore sandbox variants and live WebSocket status.", leadingIcon: _jsx(TerminalIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentSandboxInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentSandboxExample;

package/lib/examples/AgentSkillsExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AgentSkillsExample: React.FC;
+export default AgentSkillsExample;