@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/examples/AgentCodeSandboxExample.js

@@ -6,81 +6,67 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentCodeSandboxExample
  *
- * Demonstrates sandbox variant switching (eval / jupyter) with a live
- * sidebar that streams WebSocket messages to and from the
- * `/configure/sandbox/ws` endpoint.
+ * The code sandbox: the agent runs Python through `execute_code` in a sandbox
+ * the server manages, and the page shows that sandbox.
  *
- * - Creates a local agent (spec: example-full) with codemode enabled
- * - SegmentedControl toggles between "eval" and "jupyter" variants
- * - Sidebar shows live sandbox status, WebSocket event log, and an
- *   interrupt button
+ * - The Loop creates the `example-code-sandbox` agent on the Local target
+ * - A control above the chat switches this agent's sandbox variant (eval /
+ *   jupyter) live, through `/agents/{id}/sandbox/ensure`
+ * - A sidebar follows the sandbox over `/configure/sandbox/ws`: its variant,
+ *   whether it runs and executes, the raw messages, and an interrupt button
  *
  * @module examples/AgentCodeSandboxExample
  */
 /// <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 { AuthRequiredView, ErrorView } from './components';
 import { Button, Flash, Heading, Label, SegmentedControl, Spinner, Text, } from '@primer/react';
-import { CodeIcon, StopIcon, TerminalIcon } from '@primer/octicons-react';
-import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { CodeIcon, CodespacesIcon, StopIcon, TerminalIcon, } from '@primer/octicons-react';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { Chat } from '../chat';
+import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { LoopEmbed } from '../loop';
+import { AgentCodeSandboxPlugin } from '../loop/plugins/agent-code-sandbox';
 import { SANDBOX_STATUS_COLORS, SANDBOX_STATUS_LABELS } from '../types/sandbox';
 // ─── Constants ─────────────────────────────────────────────────────────────
-const queryClient = new QueryClient();
-const AGENT_NAME = 'sandbox-example-agent';
-const AGENTSPEC_ID = 'example-full';
+const AGENT_NAME = 'code-sandbox-example-agent';
+const VARIANTS = ['eval', 'jupyter-server'];
 let _logId = 0;
-function tsNow() {
-    return new Date().toISOString().slice(11, 23); // HH:MM:SS.mmm
+const tsNow = () => new Date().toLocaleTimeString([], { hour12: false });
+function formatSwitchTime(iso) {
+    const d = new Date(iso);
+    return Number.isNaN(d.getTime()) ? iso : d.toLocaleTimeString();
 }
-function formatSwitchTime(isoTs) {
-    const d = new Date(isoTs);
-    return d.toLocaleTimeString();
-}
-// ─── Helpers ───────────────────────────────────────────────────────────────
+/** The one word the sidebar's dot and label say about the sandbox. */
 function deriveAggregate(status) {
-    if (!status ||
-        status.variant === 'unavailable' ||
-        status.variant === 'error') {
+    if (!status)
+        return 'unavailable';
+    if (status.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 AgentCodeSandboxInner = ({ onLogout, }) => {
-    const { token } = useSimpleAuthStore();
-    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
-    const chatAuthToken = token === null ? undefined : token;
-    const agentBaseUrl = useExampleAgentRuntimesUrl();
-    // ── Agent lifecycle ──
-    const [runtimeStatus, setRuntimeStatus] = useState('launching');
-    const [isReady, setIsReady] = useState(false);
-    const [hookError, setHookError] = useState(null);
-    const [agentId, setAgentId] = useState(agentName);
-    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
-    // ── Sandbox variant toggle ──
-    const [variant, setVariant] = useState('eval');
+// ─── The example ───────────────────────────────────────────────────────────
+const AgentCodeSandboxInner = () => {
+    const agentId = useMemo(() => uniqueAgentId(AGENT_NAME), []);
+    const agentBaseUrl = useMemo(() => resolveExampleAgentRuntimesUrl('local'), []);
+    const chatPlugins = useMemo(() => [AgentCodeSandboxPlugin], []);
+    // ── Sandbox variant switch ──
     const [pendingVariant, setPendingVariant] = useState(null);
-    const [variantSwitching, setVariantSwitching] = useState(false);
+    // The variant a switch chose, held until the socket reports it: the status
+    // stream says the old variant until the new sandbox has actually been used.
+    const [chosenVariant, setChosenVariant] = useState(null);
+    const [switchError, setSwitchError] = useState(null);
     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 reconnectTimerRef = useRef(undefined);
     const addLog = useCallback((direction, raw) => {
         setWsLog(prev => {
             const next = [{ id: ++_logId, ts: tsNow(), direction, raw }, ...prev];
@@ -88,192 +74,42 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
             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/${agentName}`, {
-                    method: 'DELETE',
-                }).catch(() => {
-                    /* ignore 404 / not-found */
-                });
-                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        name: agentName,
-                        description: 'Agent with sandbox code execution',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_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: 'eval',
-                    }),
-                });
-                let resolvedAgentId = agentName;
-                if (response.ok) {
-                    const data = await response.json();
-                    resolvedAgentId = data?.id || agentName;
-                }
-                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:eval}');
-                    const configureResp = await authFetch(`${agentBaseUrl}/api/v1/agents/sandbox/configure`, {
-                        method: 'POST',
-                        body: JSON.stringify({
-                            variant: '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 || '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 ──
+    // ── Switch the variant of this agent's sandbox: the server stops the one it
+    //    has and starts one of the asked variant in its place. ──
     const switchVariant = useCallback(async (newVariant) => {
-        if (newVariant === variant)
-            return;
-        setVariantSwitching(true);
         setPendingVariant(newVariant);
+        setSwitchError(null);
+        const path = `/agents/${agentId}/sandbox/ensure`;
         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`, {
+            addLog('sent', `POST ${path} {variant:${newVariant}}`);
+            const response = await fetch(`${agentBaseUrl}/api/v1${path}`, {
                 method: 'POST',
-                body: JSON.stringify({
-                    variant: apiVariantFromUi(newVariant),
-                }),
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ variant: 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})`);
+            addLog('recv', `HTTP ${response.status} ${path}`);
+            if (!response.ok) {
+                const text = await response.text().catch(() => '');
+                throw new Error(text || `Failed to switch the sandbox (${response.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);
+            await response.json().catch(() => null);
             setLastSwitch({
-                variant: String(configureData?.variant || apiVariantFromUi(newVariant)),
+                variant: newVariant,
                 switchedAt: new Date().toISOString(),
             });
+            setChosenVariant(newVariant);
         }
         catch (error) {
-            setHookError(error instanceof Error ? error.message : 'Failed to switch variant');
+            setSwitchError(error instanceof Error ? error.message : 'Failed to switch variant');
         }
         finally {
             setPendingVariant(null);
-            setVariantSwitching(false);
         }
-    }, [variant, agentBaseUrl, authFetch]);
-    // ── WebSocket lifecycle ──
+    }, [agentBaseUrl, agentId, addLog]);
+    // ── WebSocket lifecycle: follows the sandbox from the start; the server
+    //    admits the socket once the Loop has created the agent, and until then
+    //    the reconnect loop simply tries again. ──
     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)}`;
@@ -320,7 +156,7 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
             wsRef.current = null;
             setWsState('closed');
         };
-    }, [isReady, agentBaseUrl, agentId, addLog]);
+    }, [agentBaseUrl, agentId, addLog]);
     // ── Send interrupt via WS ──
     const sendInterrupt = useCallback(() => {
         const ws = wsRef.current;
@@ -330,46 +166,22 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
             addLog('sent', payload);
         }
     }, [addLog]);
+    useEffect(() => {
+        if (chosenVariant && sandboxStatus?.variant === chosenVariant) {
+            setChosenVariant(null);
+        }
+    }, [chosenVariant, sandboxStatus?.variant]);
     // ── Derived display ──
     const aggregate = useMemo(() => deriveAggregate(sandboxStatus), [sandboxStatus]);
-    const displayedVariant = pendingVariant ?? variant;
-    const isTransitionLocked = variantSwitching;
-    // Always use the example's authoritative variant (pending or confirmed)
-    // merged with the live WebSocket execution data.  The WS status may lag
-    // behind after a configure+restart, so we never rely on its `variant` field.
-    const chatSandboxStatus = useMemo(() => {
-        if (sandboxStatus) {
-            return {
-                ...sandboxStatus,
-                variant: displayedVariant,
-            };
-        }
-        // No WS status yet — construct an optimistic placeholder.
-        return {
-            variant: displayedVariant,
-            sandbox_running: true,
-            is_executing: false,
-        };
-    }, [displayedVariant, sandboxStatus]);
+    // The variant on the control is the sandbox's own, as the socket reports
+    // it, except while a switch is under way.
+    const liveVariant = sandboxStatus?.variant ?? null;
+    const displayedVariant = pendingVariant ?? chosenVariant ?? liveVariant;
+    const isTransitionLocked = pendingVariant !== null;
     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: '100%',
-                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: {
+    const sidebar = (_jsxs(Box, { "data-sandbox-sidebar": true, "data-sandbox-aggregate": aggregate, "data-sandbox-variant": liveVariant ?? undefined, sx: {
             width: 360,
             minWidth: 300,
             borderLeft: '1px solid',
@@ -399,9 +211,9 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
                                     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: ["Active variant: ", displayedVariant, pendingVariant ? ' (switching...)' : ''] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: ["Last switch:", ' ', lastSwitch
+                                } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: statusLabel })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: ["Active variant: ", displayedVariant ?? '—', pendingVariant ? ' (switching...)' : ''] }), _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: {
+                                : 'n/a'] })] }), switchError && (_jsx(Flash, { variant: "danger", sx: { mx: 2, mt: 2, fontSize: 0, p: 2 }, children: switchError })), sandboxStatus && (_jsxs(Box, { sx: {
                     mx: 2,
                     mt: 2,
                     p: 2,
@@ -411,7 +223,7 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
                     bg: 'canvas.default',
                     fontSize: 0,
                     fontFamily: 'mono',
-                }, children: [_jsxs(Box, { sx: { mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "variant: " }), _jsx(Text, { children: pendingVariant ? displayedVariant : 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' || isTransitionLocked, onClick: sendInterrupt, leadingVisual: StopIcon, block: true, children: "Interrupt Execution" }) }), _jsxs(Box, { sx: {
+                }, 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' || isTransitionLocked, onClick: sendInterrupt, leadingVisual: StopIcon, block: true, "data-sandbox-interrupt": true, children: "Interrupt Execution" }) }), _jsxs(Box, { sx: {
                     mx: 2,
                     mt: 2,
                     mb: 2,
@@ -431,7 +243,7 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
                             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", disabled: isTransitionLocked, onClick: () => setWsLog([]), sx: { fontSize: 0, px: 1 }, children: "Clear" })] }), _jsx(Box, { sx: {
+                        }, children: [_jsxs(Text, { sx: { fontWeight: 600, fontSize: 0 }, children: ["WebSocket Log (", wsLog.length, ")"] }), _jsx(Button, { size: "small", variant: "invisible", disabled: isTransitionLocked, onClick: () => setWsLog([]), sx: { fontSize: 0, px: 1 }, children: "Clear" })] }), _jsx(Box, { "data-sandbox-ws-log": true, sx: {
                             overflow: 'auto',
                             flex: 1,
                             fontFamily: 'mono',
@@ -459,29 +271,33 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
             minHeight: 0,
             display: 'flex',
             flexDirection: 'column',
-        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
+            bg: 'canvas.default',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
                     px: 3,
-                    py: 1,
+                    py: 2,
                     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: _jsxs(Box, { sx: { position: 'relative', height: '100%' }, children: [_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Sandbox Agent", brandIcon: _jsx(TerminalIcon, { size: 16 }), placeholder: "Ask the agent to write and run code\u2026", showHeader: true, kernelIndicatorPlacement: "right", showNewChatButton: true, showClearButton: true, 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 => {
-                                                    if (isTransitionLocked)
-                                                        return;
-                                                    void switchVariant(index === 0 ? 'eval' : 'jupyter');
-                                                }, children: [_jsx(SegmentedControl.Button, { selected: displayedVariant === 'eval', leadingIcon: TerminalIcon, disabled: isTransitionLocked, children: "eval" }), _jsx(SegmentedControl.Button, { selected: displayedVariant === 'jupyter', leadingIcon: CodeIcon, disabled: isTransitionLocked, children: "jupyter" })] }), variantSwitching && _jsx(Spinner, { size: "small" })] }), 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, sandboxStatusData: chatSandboxStatus }), isTransitionLocked && (_jsx(Box, { sx: {
+                    flexShrink: 0,
+                }, children: [_jsx(CodespacesIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Code Sandbox Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [VARIANTS.length, " sandbox variants"] })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs(Box, { sx: { position: 'relative', height: '100%' }, children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs(Box, { sx: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: 2,
+                                                px: 3,
+                                                py: 2,
+                                                borderBottom: '1px solid',
+                                                borderColor: 'border.default',
+                                                flexShrink: 0,
+                                            }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Sandbox variant" }), _jsxs(SegmentedControl, { "aria-label": "Sandbox variant", size: "small", onChange: index => {
+                                                        if (isTransitionLocked)
+                                                            return;
+                                                        const next = VARIANTS[index];
+                                                        if (next && next !== displayedVariant) {
+                                                            void switchVariant(next);
+                                                        }
+                                                    }, children: [_jsx(SegmentedControl.Button, { selected: displayedVariant === 'eval', leadingIcon: TerminalIcon, disabled: isTransitionLocked, "data-sandbox-variant-button": "eval", children: "eval" }), _jsx(SegmentedControl.Button, { selected: displayedVariant === 'jupyter-server', leadingIcon: CodeIcon, disabled: isTransitionLocked, "data-sandbox-variant-button": "jupyter-server", children: "jupyter" })] }), pendingVariant && _jsx(Spinner, { size: "small" })] }), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) })] }), isTransitionLocked && (_jsx(Box, { sx: {
                                         position: 'absolute',
                                         inset: 0,
                                         bg: 'canvas.default',
@@ -490,31 +306,5 @@ const AgentCodeSandboxInner = ({ onLogout, }) => {
                                         cursor: 'wait',
                                     } }))] }) }), sidebar] })] }));
 };
-// ─── Auth wrapper ──────────────────────────────────────────────────────────
-const syncTokenToIamStore = (newToken) => {
-    import('../state/substates').then(({ iamStore }) => {
-        iamStore.setState({ token: newToken });
-    });
-};
-const AgentCodeSandboxExample = () => {
-    const { token, clearAuth } = useSimpleAuthStore();
-    const hasSynced = useRef(false);
-    useEffect(() => {
-        if (token && !hasSynced.current) {
-            hasSynced.current = true;
-            syncTokenToIamStore(token);
-        }
-    }, [token]);
-    const handleLogout = useCallback(() => {
-        clearAuth();
-        hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
-            iamStore.setState({ token: undefined });
-        });
-    }, [clearAuth]);
-    if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
-    }
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentCodeSandboxInner, { onLogout: handleLogout }) }) }));
-};
+const AgentCodeSandboxExample = () => (_jsx(ThemedProvider, { children: _jsx(AgentCodeSandboxInner, {}) }));
 export default AgentCodeSandboxExample;

package/lib/examples/AgentCodeSandboxesExample.d.ts

@@ -1,3 +1,13 @@
+/**
+ * AgentCodeSandboxesExample
+ *
+ * The code sandbox variants, one agent each: choose where Python should run
+ * — in-process eval, a Jupyter kernel, a container, a cloud runtime — and the
+ * Loop creates an agent on that sandbox from the variant's capacity plugin.
+ * Its first opener asks the code where it ran, which is the proof.
+ *
+ * @module examples/AgentCodeSandboxesExample
+ */
 import React from 'react';
 declare const AgentCodeSandboxesExample: React.FC;
 export default AgentCodeSandboxesExample;