@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentParametersExample.js

@@ -0,0 +1,248 @@
+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.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { Button, Heading, Label, Spinner, Text } from '@primer/react';
+import { FileIcon } from '@primer/octicons-react';
+import validator from '@rjsf/validator-ajv8';
+import { Form, yamlSchemaToJsonSchema } from '@datalayer/primer-rjsf';
+import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { ErrorView } from './components';
+import { Chat } from '../chat';
+setupPrimerPortals();
+const AGENT_SPEC_ID = 'example-parameters';
+const AGENT_NAME = 'parameters-demo';
+function isRecord(value) {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+function looksLikeJsonSchema(value) {
+    if (!isRecord(value)) {
+        return false;
+    }
+    return (typeof value.type === 'string' ||
+        isRecord(value.properties) ||
+        Array.isArray(value.required));
+}
+function unwrapTypedLiterals(value) {
+    if (Array.isArray(value)) {
+        return value.map(unwrapTypedLiterals);
+    }
+    if (!isRecord(value)) {
+        return value;
+    }
+    const keys = Object.keys(value);
+    const hasTypedDefault = typeof value.type === 'string' && 'default' in value && keys.length <= 2;
+    if (hasTypedDefault) {
+        return unwrapTypedLiterals(value.default);
+    }
+    const normalized = {};
+    for (const [key, nested] of Object.entries(value)) {
+        normalized[key] = unwrapTypedLiterals(nested);
+    }
+    return normalized;
+}
+function hasWrappedSchemaLiterals(value) {
+    const schema = value;
+    const typeIsWrapped = isRecord(schema.type);
+    const requiredHasWrapped = Array.isArray(schema.required) &&
+        schema.required.some(item => isRecord(item));
+    return typeIsWrapped || requiredHasWrapped;
+}
+function toRjsfSchema(parameters) {
+    if (looksLikeJsonSchema(parameters)) {
+        return parameters;
+    }
+    const converted = yamlSchemaToJsonSchema(parameters ?? {});
+    if (hasWrappedSchemaLiterals(converted)) {
+        return unwrapTypedLiterals(converted);
+    }
+    return converted;
+}
+function collectTopLevelDefaults(schema) {
+    const defaults = {};
+    const properties = schema.properties && typeof schema.properties === 'object'
+        ? schema.properties
+        : {};
+    for (const [key, value] of Object.entries(properties)) {
+        if (value &&
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            'default' in value) {
+            defaults[key] = value.default;
+        }
+    }
+    return defaults;
+}
+function hasRequiredValues(schema, formData) {
+    if (!schema ||
+        !Array.isArray(schema.required) ||
+        schema.required.length === 0) {
+        return true;
+    }
+    return schema.required.every(fieldName => {
+        if (typeof fieldName !== 'string') {
+            return true;
+        }
+        const value = formData[fieldName];
+        if (value === undefined || value === null) {
+            return false;
+        }
+        if (typeof value === 'string') {
+            return value.trim().length > 0;
+        }
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+        return true;
+    });
+}
+const AgentParametersExample = () => {
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const [showSchemaForm, setShowSchemaForm] = useState(false);
+    const [isSchemaLoading, setIsSchemaLoading] = useState(false);
+    const [schema, setSchema] = useState(null);
+    const [formData, setFormData] = useState({});
+    const [agentId, setAgentId] = useState(null);
+    const [isCreating, setIsCreating] = useState(false);
+    const [error, setError] = useState(null);
+    const [formTouched, setFormTouched] = useState(false);
+    const hasRequired = useMemo(() => hasRequiredValues(schema, formData), [schema, formData]);
+    const canLaunch = useMemo(() => {
+        return showSchemaForm && schema !== null && !isSchemaLoading && hasRequired;
+    }, [schema, showSchemaForm, isSchemaLoading, hasRequired]);
+    const loadSchemaForm = async () => {
+        if (schema) {
+            setShowSchemaForm(true);
+            return;
+        }
+        setIsSchemaLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(`${baseUrl}/api/v1/agents/library/${AGENT_SPEC_ID}`);
+            if (!response.ok) {
+                throw new Error(`Failed to load schema: ${response.status}`);
+            }
+            const data = (await response.json());
+            const convertedSchema = toRjsfSchema(data.parameters ?? {});
+            setSchema(convertedSchema);
+            setFormData(collectTopLevelDefaults(convertedSchema));
+            setShowSchemaForm(true);
+            setFormTouched(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load schema');
+        }
+        finally {
+            setIsSchemaLoading(false);
+        }
+    };
+    const launchAgent = async () => {
+        if (!canLaunch) {
+            return;
+        }
+        setIsCreating(true);
+        setError(null);
+        try {
+            const name = uniqueAgentId(AGENT_NAME);
+            const response = await fetch(`${baseUrl}/api/v1/agents`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name,
+                    agent_spec_id: AGENT_SPEC_ID,
+                    transport: 'vercel-ai',
+                    agent_parameters: formData,
+                }),
+            });
+            if (!response.ok) {
+                const data = await response
+                    .json()
+                    .catch(() => ({ detail: 'Unknown error' }));
+                throw new Error(data.detail || `Failed to create agent: ${response.status}`);
+            }
+            const data = await response.json();
+            setAgentId(data.id);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to launch agent');
+        }
+        finally {
+            setIsCreating(false);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (!agentId) {
+                return;
+            }
+            void fetch(`${baseUrl}/api/v1/agents/${encodeURIComponent(agentId)}`, {
+                method: 'DELETE',
+            }).catch(() => {
+                // Ignore teardown failures in example mode.
+            });
+        };
+    }, [agentId, baseUrl]);
+    if (!agentId) {
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
+                    maxWidth: 760,
+                    mx: 'auto',
+                    mt: 6,
+                    px: 3,
+                    py: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2,
+                    bg: 'canvas.subtle',
+                }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "CONFIGURE AGENT" }), _jsx(Heading, { as: "h2", sx: { fontSize: 2 }, children: "Launch Parameterized Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 620 }, children: "Load the runtime schema directly from example-parameters, fill the generated form, then launch with validated parameters." }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            flexWrap: 'wrap',
+                        }, children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", AGENT_SPEC_ID] }), _jsx(Label, { variant: "secondary", children: "Transport: vercel-ai" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "primary", size: "small", type: "button", onClick: loadSchemaForm, disabled: isSchemaLoading, children: isSchemaLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Loading Schema..."] })) : ('Show Parameter Form') }), schema && (_jsx(Button, { variant: "invisible", size: "small", type: "button", onClick: () => {
+                                    setShowSchemaForm(v => !v);
+                                }, children: showSchemaForm ? 'Hide Form' : 'Show Form' }))] }), schema && (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 2,
+                            flexWrap: 'wrap',
+                            alignItems: 'center',
+                            py: 2,
+                            px: 3,
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                            bg: 'canvas.subtle',
+                        }, children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Required fields:", ' ', Array.isArray(schema.required) ? schema.required.length : 0] }), _jsx(Label, { variant: hasRequired ? 'success' : 'attention', children: hasRequired ? 'Ready to launch' : 'Complete required fields' })] })), showSchemaForm && schema && (_jsx(Box, { sx: {
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                            p: 2,
+                            bg: 'canvas.default',
+                        }, children: _jsx(Form, { schema: schema, formData: formData, uiSchema: { 'ui:submitButtonOptions': { norender: true } }, validator: validator, onChange: ({ formData: nextData }) => {
+                                setFormTouched(true);
+                                setFormData(nextData ?? {});
+                            }, onSubmit: (_, event) => {
+                                event?.preventDefault();
+                                event?.stopPropagation();
+                                // Prevent implicit form submission; launching is click-only.
+                            }, noHtml5Validate: true }) })), _jsx(Button, { variant: "primary", size: "small", type: "button", onClick: launchAgent, disabled: !canLaunch || isCreating, sx: { width: '100%' }, children: isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Launching..."] })) : ('Launch Agent') }), schema && formTouched && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Parameters are sent as agent_parameters in the create-agent request." })), error && _jsx(ErrorView, { error: "Launch failed", detail: error })] }) }));
+    }
+    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, title: `Parameterized Agent: ${String(formData.project ?? 'Project')}`, brandIcon: _jsx(FileIcon, { size: 16 }), placeholder: "Ask something about your configured project...", description: `Role: ${String(formData.role ?? 'n/a')} · Tone: ${String(formData.tone ?? 'n/a')}`, showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
+            {
+                title: 'Print demo_params',
+                message: 'Use execute_code to print(demo_params) from the sandbox, then explain what it is.',
+            },
+            {
+                title: 'Inspect demo_params',
+                message: "Use execute_code to print('demo_params =', demo_params) and confirm its type.",
+            },
+        ], submitOnSuggestionClick: true }));
+};
+export default AgentParametersExample;

package/lib/examples/AgentSandboxExample.d.ts

@@ -1,12 +1,12 @@
 /**
  * AgentSandboxExample
  *
- * Demonstrates sandbox variant switching (local-eval / jupyter) with a live
+ * Demonstrates sandbox variant switching (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
+ * - 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
  *

package/lib/examples/AgentSandboxExample.js

@@ -6,12 +6,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentSandboxExample
  *
- * Demonstrates sandbox variant switching (local-eval / jupyter) with a live
+ * Demonstrates sandbox variant switching (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
+ * - 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
  *
@@ -21,19 +21,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { AuthRequiredView, ErrorView } from './components';
 import { Button, Flash, Heading, Label, SegmentedControl, Spinner, Text, } from '@primer/react';
-import { CodeIcon, SignOutIcon, StopIcon, TerminalIcon, } from '@primer/octicons-react';
+import { CodeIcon, 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 { uniqueAgentId } from './utils/agentId';
 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 AGENT_NAME = 'sandbox-example-agent';
+const AGENT_SPEC_ID = 'example-full';
 const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 let _logId = 0;
 function tsNow() {
@@ -62,16 +61,18 @@ function apiVariantFromUi(variant) {
 // ─── Inner component (after auth) ──────────────────────────────────────────
 const AgentSandboxInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     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 [agentId, setAgentId] = useState(agentName);
     const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
     // ── Sandbox variant toggle ──
-    const [variant, setVariant] = useState('local-eval');
+    const [variant, setVariant] = useState('eval');
+    const [pendingVariant, setPendingVariant] = useState(null);
     const [variantSwitching, setVariantSwitching] = useState(false);
     const [lastSwitch, setLastSwitch] = useState(null);
     // ── WebSocket state ──
@@ -107,7 +108,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
             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}`, {
+                await authFetch(`${agentBaseUrl}/api/v1/agents/${agentName}`, {
                     method: 'DELETE',
                 }).catch(() => {
                     /* ignore 404 / not-found */
@@ -115,7 +116,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
                 const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
                     method: 'POST',
                     body: JSON.stringify({
-                        name: AGENT_NAME,
+                        name: agentName,
                         description: 'Agent with sandbox code execution',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
@@ -129,13 +130,13 @@ const AgentSandboxInner = ({ onLogout, }) => {
                         tools: [],
                         selected_mcp_servers: [],
                         enable_codemode: true,
-                        sandbox_variant: 'local-eval',
+                        sandbox_variant: 'eval',
                     }),
                 });
-                let resolvedAgentId = AGENT_NAME;
+                let resolvedAgentId = agentName;
                 if (response.ok) {
                     const data = await response.json();
-                    resolvedAgentId = data?.id || AGENT_NAME;
+                    resolvedAgentId = data?.id || agentName;
                 }
                 else {
                     const contentType = response.headers.get('content-type') || '';
@@ -166,11 +167,11 @@ const AgentSandboxInner = ({ onLogout, }) => {
                         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}');
+                    addLog('sent', 'POST /agents/sandbox/configure {variant:eval}');
                     const configureResp = await authFetch(`${agentBaseUrl}/api/v1/agents/sandbox/configure`, {
                         method: 'POST',
                         body: JSON.stringify({
-                            variant: 'local-eval',
+                            variant: 'eval',
                         }),
                     });
                     addLog('recv', `HTTP ${configureResp.status} /agents/sandbox/configure`);
@@ -191,7 +192,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
                     }
                     await restartResp.json().catch(() => null);
                     setLastSwitch({
-                        variant: String(configureData?.variant || 'local-eval'),
+                        variant: String(configureData?.variant || 'eval'),
                         switchedAt: new Date().toISOString(),
                     });
                     setAgentId(resolvedAgentId);
@@ -217,6 +218,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
         if (newVariant === variant)
             return;
         setVariantSwitching(true);
+        setPendingVariant(newVariant);
         try {
             // Keep codemode active, then reconfigure sandbox manager variant.
             addLog('sent', 'POST /configure/codemode/toggle {enabled:true}');
@@ -264,6 +266,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
             setHookError(error instanceof Error ? error.message : 'Failed to switch variant');
         }
         finally {
+            setPendingVariant(null);
             setVariantSwitching(false);
         }
     }, [variant, agentBaseUrl, authFetch]);
@@ -329,6 +332,25 @@ const AgentSandboxInner = ({ onLogout, }) => {
     }, [addLog]);
     // ── 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]);
     const statusColor = SANDBOX_STATUS_COLORS[aggregate];
     const statusLabel = SANDBOX_STATUS_LABELS[aggregate];
     // ── Loading state ──
@@ -338,7 +360,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: '100vh',
+                height: '100%',
                 gap: 3,
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching sandbox demo\u2026" })] }));
     }
@@ -376,7 +398,7 @@ const AgentSandboxInner = ({ 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: ["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: {
                     mx: 2,
@@ -388,7 +410,7 @@ const AgentSandboxInner = ({ 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: 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: {
+                }, 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: {
                     mx: 2,
                     mt: 2,
                     mb: 2,
@@ -408,7 +430,7 @@ const AgentSandboxInner = ({ 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", 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, { sx: {
                             overflow: 'auto',
                             flex: 1,
                             fontFamily: 'mono',
@@ -432,7 +454,8 @@ const AgentSandboxInner = ({ onLogout, }) => {
                                         fontWeight: entry.direction === 'sent' ? 600 : 400,
                                     }, children: [entry.direction === 'sent' ? '▲ ' : '▼ ', entry.raw] })] }, entry.id)))) })] })] }));
     return (_jsxs(Box, { sx: {
-            height: 'calc(100vh - 60px)',
+            height: '100%',
+            minHeight: 0,
             display: 'flex',
             flexDirection: 'column',
         }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
@@ -440,20 +463,31 @@ const AgentSandboxInner = ({ onLogout, }) => {
                     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] })] }));
+                }, 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, 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 => {
+                                                    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: {
+                                        position: 'absolute',
+                                        inset: 0,
+                                        bg: 'canvas.default',
+                                        opacity: 0.35,
+                                        zIndex: 2,
+                                        cursor: 'wait',
+                                    } }))] }) }), sidebar] })] }));
 };
 // ─── Auth wrapper ──────────────────────────────────────────────────────────
 const syncTokenToIamStore = (newToken) => {
@@ -462,7 +496,7 @@ const syncTokenToIamStore = (newToken) => {
     });
 };
 const AgentSandboxExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -470,11 +504,6 @@ const AgentSandboxExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -483,7 +512,7 @@ const AgentSandboxExample = () => {
         });
     }, [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(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentSandboxInner, { onLogout: handleLogout }) }) }));
 };