@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/examples/AgentCheckpointsExample.js

@@ -81,13 +81,7 @@ const STATUS_COLORS = AGENT_STATUS_COLORS;
 // ─── Sidebar width ─────────────────────────────────────────────────────────
 const SIDEBAR_WIDTH = 300;
 // ─── Spec attribute row helper ─────────────────────────────────────────────
-const SpecRow = ({ icon: Icon, label, value }) => (_jsxs(Box, { sx: {
-        display: 'flex',
-        alignItems: 'flex-start',
-        gap: 2,
-        fontSize: 0,
-        mb: 1,
-    }, children: [Icon && (_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0, mt: '2px' }, children: _jsx(Icon, { size: 12 }) })), _jsx(Text, { sx: { color: 'fg.muted', flexShrink: 0, minWidth: 80 }, children: label }), _jsx(Text, { sx: { fontWeight: 'semibold', wordBreak: 'break-word' }, children: value })] }));
+const SpecRow = ({ icon: Icon, label, value }) => (_jsxs(Box, { display: "flex", alignItems: "flex-start", gap: 2, fontSize: 0, mb: 1, children: [Icon && (_jsx(Box, { color: "fg.muted", flexShrink: 0, mt: "2px", children: _jsx(Icon, { size: 12 }) })), _jsx(Text, { sx: { color: 'fg.muted', flexShrink: 0, minWidth: 80 }, children: label }), _jsx(Text, { sx: { fontWeight: 'semibold', wordBreak: 'break-word' }, children: value })] }));
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentCheckpointsInner = ({ onLogout, }) => {
     const { runtime, status: runtimeStatus, endpoint: _agentEndpoint, isReady, error: hookError, launchRuntime, connectToRuntime, disconnect, } = useAgentRuntimes({
@@ -283,68 +277,19 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
         return _jsx(ErrorView, { detail: displayError, onLogout: onLogout });
     }
     // ── Running / Paused ─────────────────────────────────────────────────────
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                }, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => setSidebarOpen(prev => !prev), leadingVisual: sidebarOpen ? SidebarCollapseIcon : SidebarExpandIcon, "aria-label": sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar' }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Agent \u2014 ", runtimeName] }), _jsx(Label, { variant: STATUS_COLORS[runtimeStatus], children: runtimeStatus }), (runtimeStatus === 'ready' ||
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => setSidebarOpen(prev => !prev), leadingVisual: sidebarOpen ? SidebarCollapseIcon : SidebarExpandIcon, "aria-label": sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar' }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Agent \u2014 ", runtimeName] }), _jsx(Label, { variant: STATUS_COLORS[runtimeStatus], children: runtimeStatus }), (runtimeStatus === 'ready' ||
                         runtimeStatus === 'resumed' ||
                         runtimeStatus === 'resuming' ||
                         runtimeStatus === 'paused') && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", leadingVisual: SquareIcon, onClick: () => handlePause('light'), disabled: actionLoading ||
                                     runtimeStatus === 'paused' ||
                                     runtimeStatus === 'resumed', children: "Checkpoint (Light) + Terminate" }), _jsx(Button, { size: "small", leadingVisual: SquareIcon, onClick: () => handlePause('criu'), disabled: actionLoading ||
                                     runtimeStatus === 'paused' ||
-                                    runtimeStatus === 'resumed', children: "Checkpoint (CRIU) + Terminate" }), runtimeStatus === 'paused' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode), disabled: actionLoading, children: resumeMode === 'light' ? 'Resume (light)' : 'Resume (criu)' }), _jsx(Button, { size: "small", variant: resumeMode === 'light' ? 'primary' : 'invisible', onClick: () => setResumeMode('light'), disabled: actionLoading, children: "Light" }), _jsx(Button, { size: "small", variant: resumeMode === 'criu' ? 'primary' : 'invisible', onClick: () => setResumeMode('criu'), disabled: actionLoading, children: "CRIU checkpoint" })] })) : null, _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: handleTerminate, disabled: actionLoading, children: "Terminate" })] })), actionLoading && _jsx(Spinner, { size: "small" })] }), displayError && (_jsx(Flash, { variant: "danger", sx: { mx: 3, mt: 2 }, children: displayError })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [sidebarOpen && (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            width: SIDEBAR_WIDTH,
-                            flexShrink: 0,
-                            borderRight: '1px solid',
-                            borderColor: 'border.default',
-                            overflowY: 'auto',
-                            bg: 'canvas.default',
-                        }, children: [_jsxs(Box, { sx: {
-                                    order: 3,
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(Text, { sx: { fontSize: '20px' }, children: AGENTSPEC.emoji }), _jsx(Heading, { as: "h4", sx: { fontSize: 2, m: 0 }, children: AGENTSPEC.name })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 3 }, children: AGENTSPEC.description }), _jsx(SpecRow, { icon: AiModelIcon, label: "Model", value: AGENTSPEC.model }), _jsx(SpecRow, { icon: GlobeIcon, label: "Protocol", value: AGENTSPEC.protocol }), _jsx(SpecRow, { icon: ZapIcon, label: "Memory", value: AGENTSPEC.memory }), _jsx(SpecRow, { icon: GraphIcon, label: "Environment", value: AGENTSPEC.environment_name }), _jsx(SpecRow, { icon: ClockIcon, label: "Trigger", value: AGENTSPEC.trigger.description }), _jsx(SpecRow, { icon: TagIcon, label: "Tags", value: AGENTSPEC.tags.join(', ') }), _jsxs(Box, { sx: {
-                                            mt: 2,
-                                            pt: 2,
-                                            borderTop: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: [_jsx(Text, { sx: {
+                                    runtimeStatus === 'resumed', children: "Checkpoint (CRIU) + Terminate" }), runtimeStatus === 'paused' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode), disabled: actionLoading, children: resumeMode === 'light' ? 'Resume (light)' : 'Resume (criu)' }), _jsx(Button, { size: "small", variant: resumeMode === 'light' ? 'primary' : 'invisible', onClick: () => setResumeMode('light'), disabled: actionLoading, children: "Light" }), _jsx(Button, { size: "small", variant: resumeMode === 'criu' ? 'primary' : 'invisible', onClick: () => setResumeMode('criu'), disabled: actionLoading, children: "CRIU checkpoint" })] })) : null, _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: handleTerminate, disabled: actionLoading, children: "Terminate" })] })), actionLoading && _jsx(Spinner, { size: "small" })] }), displayError && (_jsx(Flash, { variant: "danger", sx: { mx: 3, mt: 2 }, children: displayError })), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, children: [sidebarOpen && (_jsxs(Box, { display: "flex", flexDirection: "column", width: SIDEBAR_WIDTH, flexShrink: 0, borderRight: "1px solid", borderColor: "border.default", overflowY: "auto", bg: "canvas.default", children: [_jsxs(Box, { order: 3, p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(Text, { sx: { fontSize: '20px' }, children: AGENTSPEC.emoji }), _jsx(Heading, { as: "h4", sx: { fontSize: 2, m: 0 }, children: AGENTSPEC.name })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 3 }, children: AGENTSPEC.description }), _jsx(SpecRow, { icon: AiModelIcon, label: "Model", value: AGENTSPEC.model }), _jsx(SpecRow, { icon: GlobeIcon, label: "Protocol", value: AGENTSPEC.protocol }), _jsx(SpecRow, { icon: ZapIcon, label: "Memory", value: AGENTSPEC.memory }), _jsx(SpecRow, { icon: GraphIcon, label: "Environment", value: AGENTSPEC.environment_name }), _jsx(SpecRow, { icon: ClockIcon, label: "Trigger", value: AGENTSPEC.trigger.description }), _jsx(SpecRow, { icon: TagIcon, label: "Tags", value: AGENTSPEC.tags.join(', ') }), _jsxs(Box, { mt: 2, pt: 2, borderTop: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: {
                                                     fontWeight: 'semibold',
                                                     fontSize: 0,
                                                     display: 'block',
                                                     mb: 1,
-                                                }, children: "Advanced" }), _jsx(SpecRow, { label: "Cost limit", value: AGENTSPEC.advanced.cost_limit }), _jsx(SpecRow, { label: "Time limit", value: AGENTSPEC.advanced.time_limit }), _jsx(SpecRow, { label: "Max iterations", value: String(AGENTSPEC.advanced.max_iterations) }), _jsx(SpecRow, { label: "Checkpoint interval", value: `${AGENTSPEC.advanced.checkpoint_interval}s` }), _jsx(SpecRow, { label: "Temperature", value: String(AGENTSPEC.model_config.temperature) }), _jsx(SpecRow, { label: "Max tokens", value: String(AGENTSPEC.model_config.max_tokens) })] })] }), _jsxs(Box, { sx: {
-                                    order: 2,
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(PeopleIcon, { size: 14 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Running Agents (", activeAgents.length, ")"] })] }), activeAgents.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No running agents." })) : (activeAgents.map((a) => (_jsxs(Box, { sx: {
-                                            p: 2,
-                                            mb: 1,
-                                            bg: 'canvas.default',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 1,
-                                                    mb: 1,
-                                                }, children: [_jsx(Label, { variant: STATUS_COLORS[(a.id === agentId || a.name === DEMO_AGENT_NAME
+                                                }, children: "Advanced" }), _jsx(SpecRow, { label: "Cost limit", value: AGENTSPEC.advanced.cost_limit }), _jsx(SpecRow, { label: "Time limit", value: AGENTSPEC.advanced.time_limit }), _jsx(SpecRow, { label: "Max iterations", value: String(AGENTSPEC.advanced.max_iterations) }), _jsx(SpecRow, { label: "Checkpoint interval", value: `${AGENTSPEC.advanced.checkpoint_interval}s` }), _jsx(SpecRow, { label: "Temperature", value: String(AGENTSPEC.model_config.temperature) }), _jsx(SpecRow, { label: "Max tokens", value: String(AGENTSPEC.model_config.max_tokens) })] })] }), _jsxs(Box, { order: 2, p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(PeopleIcon, { size: 14 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Running Agents (", activeAgents.length, ")"] })] }), activeAgents.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No running agents." })) : (activeAgents.map((a) => (_jsxs(Box, { p: 2, mb: 1, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(Label, { variant: STATUS_COLORS[(a.id === agentId || a.name === DEMO_AGENT_NAME
                                                             ? runtimeStatus
                                                             : a.status) ?? 'running'] ?? 'secondary', sx: { fontSize: '10px' }, children: (a.id === agentId || a.name === DEMO_AGENT_NAME
                                                             ? runtimeStatus
@@ -353,51 +298,13 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                                                     color: 'fg.muted',
                                                     display: 'block',
                                                     mb: 1,
-                                                }, children: a.description })), _jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    gap: 1,
-                                                    flexWrap: 'wrap',
-                                                    alignItems: 'center',
-                                                }, children: [a.protocol && (_jsx(Label, { sx: { fontSize: '10px' }, variant: "accent", children: a.protocol })), _jsx(Box, { sx: { flex: 1 } }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: () => handleTerminateRuntime(a), disabled: actionLoading, sx: { fontSize: 0 }, children: "Terminate" })] })] }, a.id))))] }), _jsxs(Box, { sx: {
-                                    order: 1,
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(HistoryIcon, { size: 14 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1, flex: 1 }, children: ["Checkpoints (", checkpoints.length + pausedAgentsWithoutCheckpoint.length, ")"] }), _jsx(IconButton, { "aria-label": "Refresh checkpoints", icon: SyncIcon, size: "small", variant: "invisible", onClick: refreshCheckpoints })] }), pausedAgentsWithoutCheckpoint.map((a) => (_jsxs(Box, { sx: {
-                                            p: 2,
-                                            mb: 1,
-                                            bg: 'canvas.default',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'attention.muted',
-                                        }, children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 1,
-                                                    mb: 1,
-                                                }, children: [_jsx(SquareIcon, { size: 12 }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 0, flex: 1 }, children: a.name ?? a.id }), _jsx(Label, { variant: "severe", sx: { fontSize: '9px' }, children: "paused" })] }), a.description && (_jsx(Text, { sx: {
+                                                }, children: a.description })), _jsxs(Box, { display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center", children: [a.protocol && (_jsx(Label, { sx: { fontSize: '10px' }, variant: "accent", children: a.protocol })), _jsx(Box, { flex: 1 }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: () => handleTerminateRuntime(a), disabled: actionLoading, sx: { fontSize: 0 }, children: "Terminate" })] })] }, a.id))))] }), _jsxs(Box, { order: 1, p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(HistoryIcon, { size: 14 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1, flex: 1 }, children: ["Checkpoints (", checkpoints.length + pausedAgentsWithoutCheckpoint.length, ")"] }), _jsx(IconButton, { "aria-label": "Refresh checkpoints", icon: SyncIcon, size: "small", variant: "invisible", onClick: refreshCheckpoints })] }), pausedAgentsWithoutCheckpoint.map((a) => (_jsxs(Box, { p: 2, mb: 1, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "attention.muted", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(SquareIcon, { size: 12 }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 0, flex: 1 }, children: a.name ?? a.id }), _jsx(Label, { variant: "severe", sx: { fontSize: '9px' }, children: "paused" })] }), a.description && (_jsx(Text, { sx: {
                                                     fontSize: 0,
                                                     color: 'fg.muted',
                                                     display: 'block',
                                                     mb: 1,
-                                                }, children: a.description })), _jsx(Box, { sx: {
-                                                    mt: 2,
-                                                    display: 'flex',
-                                                    justifyContent: 'flex-end',
-                                                }, children: _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode, undefined, a.runtimeName), disabled: actionLoading, children: "Resume" }) })] }, `paused-${a.id}`))), checkpoints.length === 0 &&
-                                        pausedAgentsWithoutCheckpoint.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No checkpoints yet. Use Checkpoint (Light) or Checkpoint create one." })) : (checkpoints.map((ckpt) => (_jsxs(Box, { sx: {
-                                            p: 2,
-                                            mb: 1,
-                                            bg: 'canvas.default',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 1,
-                                                    mb: 1,
-                                                }, children: [ckpt.status === 'failed' ? (_jsx(AlertIcon, { size: 12, fill: "var(--fgColor-danger)" })) : (_jsx(CheckCircleIcon, { size: 12 })), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 0, flex: 1 }, children: ckpt.name }), _jsx(Label, { variant: ckpt.status === 'failed'
+                                                }, children: a.description })), _jsx(Box, { mt: 2, display: "flex", justifyContent: "flex-end", children: _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode, undefined, a.runtimeName), disabled: actionLoading, children: "Resume" }) })] }, `paused-${a.id}`))), checkpoints.length === 0 &&
+                                        pausedAgentsWithoutCheckpoint.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No checkpoints yet. Use Checkpoint (Light) or Checkpoint create one." })) : (checkpoints.map((ckpt) => (_jsxs(Box, { p: 2, mb: 1, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [ckpt.status === 'failed' ? (_jsx(AlertIcon, { size: 12, fill: "var(--fgColor-danger)" })) : (_jsx(CheckCircleIcon, { size: 12 })), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 0, flex: 1 }, children: ckpt.name }), _jsx(Label, { variant: ckpt.status === 'failed'
                                                             ? 'danger'
                                                             : ckpt.status === 'paused'
                                                                 ? 'done'
@@ -412,37 +319,10 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                                                         maxWidth: '100%',
                                                         fontSize: 'var(--text-body-size-small, 12px)',
                                                         color: 'var(--fgColor-danger, var(--color-danger-fg))',
-                                                    }, children: ckpt.status_message }) })), ckpt.agent_spec_id && (_jsx(Label, { sx: { mt: 1, fontSize: '10px' }, variant: "accent", children: ckpt.agent_spec_id })), _jsx(Box, { sx: {
-                                                    mt: 2,
-                                                    display: 'flex',
-                                                    justifyContent: 'flex-end',
-                                                }, children: _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(ckpt.checkpoint_mode || 'light', ckpt.id, ckpt.runtime_uid), disabled: actionLoading || ckpt.status === 'failed', children: "Resume" }) })] }, ckpt.id))))] })] })), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: showLaunchingView ? (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                height: '100%',
-                                gap: 3,
-                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
+                                                    }, children: ckpt.status_message }) })), ckpt.agent_spec_id && (_jsx(Label, { sx: { mt: 1, fontSize: '10px' }, variant: "accent", children: ckpt.agent_spec_id })), _jsx(Box, { mt: 2, display: "flex", justifyContent: "flex-end", children: _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(ckpt.checkpoint_mode || 'light', ckpt.id, ckpt.runtime_uid), disabled: actionLoading || ckpt.status === 'failed', children: "Resume" }) })] }, ckpt.id))))] })] })), _jsx(Box, { flex: 1, minHeight: 0, children: showLaunchingView ? (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: 3, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
                                         ? `Launching runtime for ${AGENTSPEC_ID}…`
-                                        : 'Creating agent on runtime…' })] })) : showNoAgentRunningView ? (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                height: '100%',
-                                gap: 3,
-                                px: 3,
-                            }, children: [_jsx(AgentIcon, { size: 48 }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Checkpoint Agent" }), _jsxs(Text, { sx: { color: 'fg.muted', textAlign: 'center', maxWidth: 560 }, children: ["Launch a cloud agent runtime with pause/resume checkpointing. The agent will be deployed from the", ' ', _jsx("strong", { children: AGENTSPEC_ID }), " spec."] }), displayError && (_jsx(Flash, { variant: "danger", sx: { maxWidth: 560, width: '100%' }, children: displayError })), _jsx(Button, { variant: "primary", size: "large", leadingVisual: PlayIcon, onClick: handleLaunch, children: "Launch Agent" })] })) : (isReady || runtimeStatus === 'resumed') &&
-                            runtimeStatus !== 'paused' ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", agentId: agentId, defaultEditor: "none", showHeader: true, plugins: LOOP_PLUGINS_AGENTCHE })) : (_jsx(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                height: '100%',
-                                color: 'fg.muted',
-                                gap: 3,
-                            }, children: runtimeStatus === 'paused' ? (_jsx(Text, { sx: { fontSize: 2 }, children: "Agent is paused \u2014 click Resume to continue the conversation." })) : runtimeStatus === 'idle' ||
+                                        : 'Creating agent on runtime…' })] })) : showNoAgentRunningView ? (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: 3, px: 3, children: [_jsx(AgentIcon, { size: 48 }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Checkpoint Agent" }), _jsxs(Text, { sx: { color: 'fg.muted', textAlign: 'center', maxWidth: 560 }, children: ["Launch a cloud agent runtime with pause/resume checkpointing. The agent will be deployed from the", ' ', _jsx("strong", { children: AGENTSPEC_ID }), " spec."] }), displayError && (_jsx(Flash, { variant: "danger", sx: { maxWidth: 560, width: '100%' }, children: displayError })), _jsx(Button, { variant: "primary", size: "large", leadingVisual: PlayIcon, onClick: handleLaunch, children: "Launch Agent" })] })) : (isReady || runtimeStatus === 'resumed') &&
+                            runtimeStatus !== 'paused' ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", agentId: agentId, defaultEditor: "none", showHeader: true, plugins: LOOP_PLUGINS_AGENTCHE })) : (_jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", color: "fg.muted", gap: 3, children: runtimeStatus === 'paused' ? (_jsx(Text, { sx: { fontSize: 2 }, children: "Agent is paused \u2014 click Resume to continue the conversation." })) : runtimeStatus === 'idle' ||
                                 runtimeStatus === 'disconnected' ? (_jsx(Text, { sx: { fontSize: 2 }, children: "No active runtime connection. Launch an agent or select one in the sidebar." })) : runtimeStatus === 'error' ? (_jsxs(_Fragment, { children: [_jsx(AlertIcon, { size: 32 }), _jsx(Text, { sx: { fontSize: 2, color: 'danger.fg' }, children: "Agent failed to connect" }), displayError && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: displayError })), _jsx(Button, { variant: "primary", onClick: handleLaunch, children: "Retry Launch" })] })) : (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "medium" }), _jsxs(Text, { sx: { fontSize: 2 }, children: ["Connecting to agent\u2026 (status: ", runtimeStatus, ")"] })] })) })) })] })] }));
 };
 // ─── Runtime checkpoints: the cloud console, behind its auth gate ─────────
@@ -477,21 +357,7 @@ const LOCAL_AGENT_NAME = 'checkpoints-example-agent';
 const ConversationCheckpointsExample = () => {
     const agentName = useMemo(() => uniqueAgentId(LOCAL_AGENT_NAME), []);
     const plugins = useMemo(() => [AgentCheckpointsPlugin, CheckpointsSidebarPlugin], []);
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                bg: 'canvas.default',
-            }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        px: 3,
-                        py: 2,
-                        borderBottom: '1px solid',
-                        borderColor: 'border.default',
-                        flexShrink: 0,
-                    }, children: [_jsx(VersionsIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Checkpoints Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsx(Label, { variant: "accent", children: "conversation checkpoints" })] }), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(LoopEmbed, { serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", showAgentVariants: true, agentId: agentName, editors: false, showHeader: true, plugins: plugins }) })] }) }));
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(VersionsIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Checkpoints Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsx(Label, { variant: "accent", children: "conversation checkpoints" })] }), _jsx(Box, { flex: 1, minHeight: 0, children: _jsx(LoopEmbed, { serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", showAgentVariants: true, agentId: agentName, editors: false, showHeader: true, plugins: plugins }) })] }) }));
 };
 // ─── The example: one capability, at the level the target offers it ─────────
 const AgentCheckpointsExample = () => {

package/lib/examples/AgentCodeSandboxExample.js

@@ -181,130 +181,27 @@ const AgentCodeSandboxInner = () => {
     const statusColor = SANDBOX_STATUS_COLORS[aggregate];
     const statusLabel = SANDBOX_STATUS_LABELS[aggregate];
     // ── Sidebar ──
-    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',
-            borderColor: 'border.default',
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: 0,
-            bg: 'canvas.default',
-        }, children: [_jsxs(Box, { sx: {
-                    p: 2,
-                    bg: 'canvas.default',
-                    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'
+    const sidebar = (_jsxs(Box, { "data-sandbox-sidebar": true, "data-sandbox-aggregate": aggregate, "data-sandbox-variant": liveVariant ?? undefined, width: 360, minWidth: 300, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", minHeight: 0, bg: "canvas.default", children: [_jsxs(Box, { p: 2, bg: "canvas.default", borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: "Sandbox Details" }), _jsxs(Box, { 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: ["Active variant: ", displayedVariant ?? '—', pendingVariant ? ' (switching...)' : ''] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: ["Last switch:", ' ', lastSwitch
+                                        : 'secondary', children: ["WS: ", wsState] }), _jsx(Box, { as: "span", 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: ["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'] })] }), 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,
-                    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' || isTransitionLocked, onClick: sendInterrupt, leadingVisual: StopIcon, block: true, "data-sandbox-interrupt": 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", 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',
-                            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'
-                                    ? 'neutral.muted'
-                                    : 'transparent',
-                                borderBottom: '1px solid',
-                                borderColor: 'border.subtle',
-                                wordBreak: 'break-all',
-                            }, children: [_jsx(Text, { sx: {
+                                : 'n/a'] })] }), switchError && (_jsx(Flash, { variant: "danger", sx: { mx: 2, mt: 2, fontSize: 0, p: 2 }, children: switchError })), sandboxStatus && (_jsxs(Box, { mx: 2, mt: 2, p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", fontSize: 0, fontFamily: "mono", children: [_jsxs(Box, { mb: 1, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "variant: " }), _jsx(Text, { children: sandboxStatus.variant })] }), _jsxs(Box, { mb: 1, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "sandbox_running: " }), _jsx(Text, { children: String(sandboxStatus.sandbox_running) })] }), _jsxs(Box, { 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, { 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, { 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, { 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, { 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", disabled: isTransitionLocked, onClick: () => setWsLog([]), sx: { fontSize: 0, px: 1 }, children: "Clear" })] }), _jsx(Box, { "data-sandbox-ws-log": true, 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, { px: 2, py: "2px", color: entry.direction === 'sent' ? 'accent.fg' : 'fg.default', bg: entry.direction === 'sent' ? 'neutral.muted' : '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: '100%',
-            minHeight: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            bg: 'canvas.default',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    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 => {
+    return (_jsxs(Box, { height: "100%", minHeight: 0, display: "flex", flexDirection: "column", bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", 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, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsxs(Box, { position: "relative", height: "100%", children: [_jsxs(Box, { display: "flex", flexDirection: "column", height: "100%", children: [_jsxs(Box, { 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',
-                                        opacity: 0.35,
-                                        zIndex: 2,
-                                        cursor: 'wait',
-                                    } }))] }) }), sidebar] })] }));
+                                                    }, 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, { flex: 1, minHeight: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) })] }), isTransitionLocked && (_jsx(Box, { position: "absolute", inset: 0, bg: "canvas.default", opacity: 0.35, zIndex: 2, cursor: "wait" }))] }) }), sidebar] })] }));
 };
 const AgentCodeSandboxExample = () => (_jsx(ThemedProvider, { children: _jsx(AgentCodeSandboxInner, {}) }));
 export default AgentCodeSandboxExample;

package/lib/examples/AgentCodeSandboxesExample.js

@@ -37,20 +37,7 @@ const AgentCodeSandboxesInner = () => {
     // sandbox_variant the agent is created with.
     const plugins = useMemo(() => (launched ? [SandboxCapacityPlugins[launched.key]] : []), [launched]);
     if (!launched) {
-        return (_jsxs(Box, { "data-sandboxes-chooser": true, sx: {
-                maxWidth: 840,
-                mx: 'auto',
-                mt: 6,
-                px: 3,
-                py: 3,
-                border: '1px solid',
-                borderColor: 'border.default',
-                borderRadius: 2,
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 3,
-                bg: 'canvas.default',
-            }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "SANDBOX VARIANT DEMO" }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Agent Code Sandboxes" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Choose where the agent's Python should run, launch it, then ask the code where it ran to compare the sandboxes." }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", selected.specId] }), _jsxs(Label, { variant: "secondary", children: ["Variant: ", selected.variant] })] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Sandbox Variant" }), _jsx("select", { value: selectedKey, "data-sandboxes-select": true, onChange: event => setSelectedKey(event.target.value), style: {
+        return (_jsxs(Box, { "data-sandboxes-chooser": true, maxWidth: 840, mx: "auto", mt: 6, px: 3, py: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "flex", flexDirection: "column", gap: 3, bg: "canvas.default", children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "SANDBOX VARIANT DEMO" }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Agent Code Sandboxes" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Choose where the agent's Python should run, launch it, then ask the code where it ran to compare the sandboxes." }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", selected.specId] }), _jsxs(Label, { variant: "secondary", children: ["Variant: ", selected.variant] })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Sandbox Variant" }), _jsx("select", { value: selectedKey, "data-sandboxes-select": true, onChange: event => setSelectedKey(event.target.value), style: {
                                 width: '100%',
                                 maxWidth: 420,
                                 padding: '8px 10px',
@@ -63,24 +50,10 @@ const AgentCodeSandboxesInner = () => {
                         agentId: uniqueAgentId(`code-sandbox-${selected.variant}`),
                     }), sx: { width: '100%', maxWidth: 420 }, children: ["Launch ", selected.displayName] })] }));
     }
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            bg: 'canvas.default',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                }, children: [_jsx(CodespacesIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Code Sandboxes Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", "data-sandboxes-active": active.variant, children: [active.displayName, " \u00B7 ", active.variant] }), _jsx(Button, { size: "small", leadingVisual: SyncIcon, "data-sandboxes-change": true, onClick: () => {
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(CodespacesIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Code Sandboxes Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", "data-sandboxes-active": active.variant, children: [active.displayName, " \u00B7 ", active.variant] }), _jsx(Button, { size: "small", leadingVisual: SyncIcon, "data-sandboxes-change": true, onClick: () => {
                             setSelectedKey(active.key);
                             setLaunched(null);
-                        }, children: "Change sandbox" })] }), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(LoopEmbed, { serverUrl: serverUrl, target: "local", showAgentVariants: true, agentId: launched.agentId, editors: false, showHeader: true, plugins: plugins }, launched.agentId) })] }));
+                        }, children: "Change sandbox" })] }), _jsx(Box, { flex: 1, minHeight: 0, children: _jsx(LoopEmbed, { serverUrl: serverUrl, target: "local", showAgentVariants: true, agentId: launched.agentId, editors: false, showHeader: true, plugins: plugins }, launched.agentId) })] }));
 };
 const AgentCodeSandboxesExample = () => (_jsx(ThemedProvider, { children: _jsx(AgentCodeSandboxesInner, {}) }));
 export default AgentCodeSandboxesExample;

package/lib/examples/AgentCodemodeExample.js

@@ -306,15 +306,7 @@ const AgentRuntimePane = ({ config, active, token, onTokenConsumed, onAgentIdCha
     if (!active) {
         return null;
     }
-    return (_jsx(Box, { sx: {
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            overflow: 'hidden',
-            minHeight: 560,
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(LoopEmbed, { serverUrl: config.baseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }) }));
+    return (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", minHeight: 560, display: "flex", flexDirection: "column", children: _jsx(Box, { flex: 1, minHeight: 0, children: _jsx(LoopEmbed, { serverUrl: config.baseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }) }));
 };
 const AgentCodemodeInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
@@ -464,32 +456,9 @@ const AgentCodemodeInner = ({ onLogout, }) => {
     if (!token) {
         return null;
     }
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Codemode \u2014 MCP Tools vs Codemode Tools" }), _jsx(SegmentedControl, { "aria-label": "Side on screen", size: "small", onChange: index => setActiveKey(DEMO_AGENT_CONFIGS[index]?.key ?? 'no-codemode'), children: DEMO_AGENT_CONFIGS.map(config => (_jsx(SegmentedControl.Button, { selected: config.key === activeKey, "data-codemode-side": config.key, children: config.key === 'codemode' ? 'Codemode tools' : 'MCP tools' }, config.key))) })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [DEMO_AGENT_CONFIGS.filter(c => c.key === 'no-codemode').map(config => (() => {
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Codemode \u2014 MCP Tools vs Codemode Tools" }), _jsx(SegmentedControl, { "aria-label": "Side on screen", size: "small", onChange: index => setActiveKey(DEMO_AGENT_CONFIGS[index]?.key ?? 'no-codemode'), children: DEMO_AGENT_CONFIGS.map(config => (_jsx(SegmentedControl.Button, { selected: config.key === activeKey, "data-codemode-side": config.key, children: config.key === 'codemode' ? 'Codemode tools' : 'MCP tools' }, config.key))) })] }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [DEMO_AGENT_CONFIGS.filter(c => c.key === 'no-codemode').map(config => (() => {
                         const outcome = outcomeFor(config.key);
-                        return (_jsxs(Box, { sx: {
-                                width: 320,
-                                borderRight: '1px solid',
-                                borderColor: 'border.default',
-                                p: 3,
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 3,
-                                flexShrink: 0,
-                                overflow: 'auto',
-                            }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: config.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Tokens consumed (no codemode)." }), _jsx(Text, { sx: {
+                        return (_jsxs(Box, { width: 320, borderRight: "1px solid", borderColor: "border.default", p: 3, display: "flex", flexDirection: "column", gap: 3, flexShrink: 0, overflow: "auto", children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: config.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Tokens consumed (no codemode)." }), _jsx(Text, { sx: {
                                                 color: 'fg.muted',
                                                 fontSize: 0,
                                                 fontFamily: 'mono',
@@ -502,17 +471,7 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                                                 display: 'block',
                                                 mt: 1,
                                                 wordBreak: 'break-all',
-                                            }, children: agentIdByKey[config.key] || 'launching…' })] }), _jsxs(Box, { sx: {
-                                        p: 2,
-                                        borderRadius: 2,
-                                        border: '1px solid',
-                                        bg: outcome.bg,
-                                        borderColor: outcome.borderColor,
-                                        textAlign: 'center',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'center',
-                                    }, children: [_jsx(Text, { sx: { fontSize: 4, lineHeight: 1, mb: 1 }, children: outcome.emoji }), _jsx(Text, { sx: {
+                                            }, children: agentIdByKey[config.key] || 'launching…' })] }), _jsxs(Box, { p: 2, borderRadius: 2, border: "1px solid", bg: outcome.bg, borderColor: outcome.borderColor, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", children: [_jsx(Text, { sx: { fontSize: 4, lineHeight: 1, mb: 1 }, children: outcome.emoji }), _jsx(Text, { sx: {
                                                 fontSize: 0,
                                                 color: outcome.color,
                                                 fontWeight: 'bold',
@@ -527,31 +486,10 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                                         maxHeight: 240,
                                         width: '100%',
                                         flexShrink: 0,
-                                    } }), _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        gap: 2,
-                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Consumed" }), _jsxs(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: [(consumedByAgent[config.key] ?? 0).toLocaleString(), " tokens"] })] }), agentIdByKey[config.key] && (_jsx(ContextPanel, { agentId: agentIdByKey[config.key], apiBase: config.baseUrl, liveData: contextSnapshotByKey[config.key] ?? null, chartHeight: "180px" }))] }, config.key));
-                    })()), _jsx(Box, { sx: {
-                            flex: 1,
-                            minWidth: 0,
-                            p: 3,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'auto',
-                        }, children: DEMO_AGENT_CONFIGS.map(config => (_jsx(AgentRuntimePane, { config: config, active: config.key === activeKey, token: token, onTokenConsumed: handleTokenConsumed, onAgentIdChange: handleAgentIdChange, onContextSnapshot: handleContextSnapshot }, config.key))) }), DEMO_AGENT_CONFIGS.filter(c => c.key === 'codemode').map(config => (() => {
+                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Consumed" }), _jsxs(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: [(consumedByAgent[config.key] ?? 0).toLocaleString(), " tokens"] })] }), agentIdByKey[config.key] && (_jsx(ContextPanel, { agentId: agentIdByKey[config.key], apiBase: config.baseUrl, liveData: contextSnapshotByKey[config.key] ?? null, chartHeight: "180px" }))] }, config.key));
+                    })()), _jsx(Box, { flex: 1, minWidth: 0, p: 3, display: "flex", flexDirection: "column", overflow: "auto", children: DEMO_AGENT_CONFIGS.map(config => (_jsx(AgentRuntimePane, { config: config, active: config.key === activeKey, token: token, onTokenConsumed: handleTokenConsumed, onAgentIdChange: handleAgentIdChange, onContextSnapshot: handleContextSnapshot }, config.key))) }), DEMO_AGENT_CONFIGS.filter(c => c.key === 'codemode').map(config => (() => {
                         const outcome = outcomeFor(config.key);
-                        return (_jsxs(Box, { sx: {
-                                width: 320,
-                                borderLeft: '1px solid',
-                                borderColor: 'border.default',
-                                p: 3,
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 3,
-                                flexShrink: 0,
-                                overflow: 'auto',
-                            }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: config.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Tokens consumed (codemode)." }), _jsx(Text, { sx: {
+                        return (_jsxs(Box, { width: 320, borderLeft: "1px solid", borderColor: "border.default", p: 3, display: "flex", flexDirection: "column", gap: 3, flexShrink: 0, overflow: "auto", children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: config.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Tokens consumed (codemode)." }), _jsx(Text, { sx: {
                                                 color: 'fg.muted',
                                                 fontSize: 0,
                                                 fontFamily: 'mono',
@@ -564,17 +502,7 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                                                 display: 'block',
                                                 mt: 1,
                                                 wordBreak: 'break-all',
-                                            }, children: agentIdByKey[config.key] || 'launching…' })] }), _jsxs(Box, { sx: {
-                                        p: 2,
-                                        borderRadius: 2,
-                                        border: '1px solid',
-                                        bg: outcome.bg,
-                                        borderColor: outcome.borderColor,
-                                        textAlign: 'center',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'center',
-                                    }, children: [_jsx(Text, { sx: { fontSize: 4, lineHeight: 1, mb: 1 }, children: outcome.emoji }), _jsx(Text, { sx: {
+                                            }, children: agentIdByKey[config.key] || 'launching…' })] }), _jsxs(Box, { p: 2, borderRadius: 2, border: "1px solid", bg: outcome.bg, borderColor: outcome.borderColor, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", children: [_jsx(Text, { sx: { fontSize: 4, lineHeight: 1, mb: 1 }, children: outcome.emoji }), _jsx(Text, { sx: {
                                                 fontSize: 0,
                                                 color: outcome.color,
                                                 fontWeight: 'bold',
@@ -589,11 +517,7 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                                         maxHeight: 240,
                                         width: '100%',
                                         flexShrink: 0,
-                                    } }), _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        gap: 2,
-                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Consumed" }), _jsxs(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: [(consumedByAgent[config.key] ?? 0).toLocaleString(), " tokens"] })] }), agentIdByKey[config.key] && (_jsx(ContextPanel, { agentId: agentIdByKey[config.key], apiBase: config.baseUrl, liveData: contextSnapshotByKey[config.key] ?? null, chartHeight: "180px" }))] }, config.key));
+                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Consumed" }), _jsxs(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: [(consumedByAgent[config.key] ?? 0).toLocaleString(), " tokens"] })] }), agentIdByKey[config.key] && (_jsx(ContextPanel, { agentId: agentIdByKey[config.key], apiBase: config.baseUrl, liveData: contextSnapshotByKey[config.key] ?? null, chartHeight: "180px" }))] }, config.key));
                     })())] })] }));
 };
 const syncTokenToIamStore = (token) => {