@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/examples/AgentCodeSandboxesExample.js

@@ -1,143 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+/**
+ * AgentCodeSandboxesExample
+ *
+ * The code sandbox variants, one agent each: choose where Python should run
+ * — in-process eval, a Jupyter kernel, a container, a cloud runtime — and the
+ * Loop creates an agent on that sandbox from the variant's capacity plugin.
+ * Its first opener asks the code where it ran, which is the proof.
+ *
+ * @module examples/AgentCodeSandboxesExample
+ */
 /// <reference types="vite/client" />
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Button, Heading, Label, Spinner, Text } from '@primer/react';
-import { PackageIcon } from '@primer/octicons-react';
-import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { Button, Heading, Label, Text } from '@primer/react';
+import { CodespacesIcon, SyncIcon } from '@primer/octicons-react';
 import { ThemedProvider } from './utils/themedProvider';
-import { AuthRequiredView, ErrorView } from './components';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { Chat } from '../chat';
-const SANDBOX_SPEC_OPTIONS = [
-    {
-        variant: 'eval',
-        specId: 'example-sandbox-eval',
-        title: 'Eval Sandbox',
-        description: 'In-process Python execution for quick local iteration.',
-    },
-    {
-        variant: 'jupyter',
-        specId: 'example-sandbox-jupyter',
-        title: 'Jupyter Sandbox',
-        description: 'Kernel-backed execution with notebook-compatible behavior.',
-    },
-    {
-        variant: 'docker',
-        specId: 'example-sandbox-docker',
-        title: 'Docker Sandbox',
-        description: 'Containerized execution for stronger process isolation.',
-    },
-    {
-        variant: 'datalayer',
-        specId: 'example-sandbox-datalayer',
-        title: 'Datalayer Sandbox',
-        description: 'Cloud sandbox runtime powered by Datalayer environments.',
-    },
-    {
-        variant: 'colab',
-        specId: 'example-sandbox-colab',
-        title: 'Colab Sandbox',
-        description: 'Google Colab runtime connector (reuse an already-running kernel).',
-    },
-    {
-        variant: 'kaggle',
-        specId: 'example-sandbox-kaggle',
-        title: 'Kaggle Sandbox',
-        description: 'Kaggle runtime connector (create kernel with API token or attach existing).',
-    },
-    {
-        variant: 'monty',
-        specId: 'example-sandbox-monty',
-        title: 'Monty Sandbox',
-        description: 'Secure in-process interpreter focused on safe snippets.',
-    },
-    {
-        variant: 'modal',
-        specId: 'example-sandbox-modal',
-        title: 'Modal Sandbox',
-        description: 'Modal cloud sandbox for scalable remote code execution.',
-    },
-];
-const AgentCodeSandboxesInner = ({ onLogout, }) => {
-    const { token } = useSimpleAuthStore();
-    const baseUrl = useExampleAgentRuntimesUrl();
-    const [selectedSpecId, setSelectedSpecId] = useState(SANDBOX_SPEC_OPTIONS[0].specId);
-    const [agentId, setAgentId] = useState(null);
-    const [activeSpecId, setActiveSpecId] = useState(null);
-    const [isLaunching, setIsLaunching] = useState(false);
-    const [error, setError] = useState(null);
-    const selectedOption = useMemo(() => SANDBOX_SPEC_OPTIONS.find(option => option.specId === selectedSpecId) ??
-        SANDBOX_SPEC_OPTIONS[0], [selectedSpecId]);
-    const activeOption = useMemo(() => SANDBOX_SPEC_OPTIONS.find(option => option.specId === activeSpecId) ??
-        selectedOption, [activeSpecId, selectedOption]);
-    const authFetch = useCallback((url, opts = {}) => fetch(url, {
-        ...opts,
-        headers: {
-            'Content-Type': 'application/json',
-            ...(token ? { Authorization: `Bearer ${token}` } : {}),
-            ...(opts.headers ?? {}),
-        },
-    }), [token]);
-    const launchAgent = useCallback(async () => {
-        setIsLaunching(true);
-        setError(null);
-        try {
-            if (agentId) {
-                await authFetch(`${baseUrl}/api/v1/agents/${agentId}`, {
-                    method: 'DELETE',
-                }).catch(() => {
-                    // Ignore teardown errors while switching specs.
-                });
-            }
-            const agentName = uniqueAgentId(`code-sandbox-${selectedOption.variant}`);
-            const response = await authFetch(`${baseUrl}/api/v1/agents`, {
-                method: 'POST',
-                body: JSON.stringify({
-                    name: agentName,
-                    description: `Code sandbox demo (${selectedOption.variant})`,
-                    agent_library: 'pydantic-ai',
-                    transport: 'vercel-ai',
-                    agent_spec_id: selectedOption.specId,
-                    enable_codemode: true,
-                    enable_skills: true,
-                    tools: [],
-                }),
-            });
-            if (!response.ok) {
-                const contentType = response.headers.get('content-type') || '';
-                let detail = '';
-                if (contentType.includes('application/json')) {
-                    const payload = await response.json().catch(() => null);
-                    detail =
-                        (typeof payload?.detail === 'string' && payload.detail) ||
-                            (typeof payload?.message === 'string' && payload.message) ||
-                            '';
-                }
-                else {
-                    detail = await response.text().catch(() => '');
-                }
-                throw new Error(detail || `Failed to create agent (${response.status})`);
-            }
-            const payload = await response.json();
-            const createdAgentId = payload?.id || agentName;
-            setAgentId(createdAgentId);
-            setActiveSpecId(selectedOption.specId);
-        }
-        catch (e) {
-            setError(e instanceof Error ? e.message : 'Failed to launch agent');
-        }
-        finally {
-            setIsLaunching(false);
-        }
-    }, [agentId, authFetch, baseUrl, selectedOption]);
-    if (!agentId) {
-        return (_jsxs(Box, { sx: {
+import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { LoopEmbed } from '../loop';
+import { SANDBOX_CAPACITIES, SandboxCapacityPlugins, } from '../loop/plugins/agent-code-sandboxes';
+const AgentCodeSandboxesInner = () => {
+    const serverUrl = useMemo(() => resolveExampleAgentRuntimesUrl('local'), []);
+    const [selectedKey, setSelectedKey] = useState(SANDBOX_CAPACITIES[0].key);
+    const [launched, setLaunched] = useState(null);
+    const selected = SANDBOX_CAPACITIES.find(capacity => capacity.key === selectedKey) ??
+        SANDBOX_CAPACITIES[0];
+    const active = launched
+        ? (SANDBOX_CAPACITIES.find(capacity => capacity.key === launched.key) ??
+            selected)
+        : selected;
+    // One plugin per launch: the variant's capacity, whose blueprint pins the
+    // 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,
@@ -150,9 +50,7 @@ const AgentCodeSandboxesInner = ({ onLogout, }) => {
                 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 a sandbox variant-backed spec, launch the agent, then run code from chat to compare behavior across sandboxes." }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", selectedOption.specId] }), _jsxs(Label, { variant: "secondary", children: ["Variant: ", selectedOption.variant] }), _jsx(Label, { variant: "success", children: "Codemode: enabled" })] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Sandbox Variant" }), _jsx("select", { value: selectedSpecId, onChange: event => {
-                                setSelectedSpecId(event.target.value);
-                            }, style: {
+            }, 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: {
                                 width: '100%',
                                 maxWidth: 420,
                                 padding: '8px 10px',
@@ -160,33 +58,29 @@ const AgentCodeSandboxesInner = ({ onLogout, }) => {
                                 border: '1px solid var(--borderColor-default)',
                                 background: 'var(--bgColor-default)',
                                 color: 'var(--fgColor-default)',
-                            }, children: SANDBOX_SPEC_OPTIONS.map(option => (_jsxs("option", { value: option.specId, children: [option.title, " (", option.variant, ")"] }, option.specId))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: selectedOption.description })] }), _jsx(Button, { variant: "primary", onClick: () => {
-                        void launchAgent();
-                    }, disabled: isLaunching, sx: { width: '100%', maxWidth: 420 }, children: isLaunching ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Launching..."] })) : (`Launch ${selectedOption.title}`) }), error && _jsx(ErrorView, { error: error, onLogout: onLogout })] }));
-    }
-    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, runtimeId: agentId, title: `Code Sandboxes: ${activeOption.title}`, description: `Spec ${activeOption.specId} (${activeOption.variant})`, brandIcon: _jsx(PackageIcon, { size: 16 }), showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
-            {
-                title: 'Identify sandbox variant',
-                message: 'Use execute_code to print(os.getenv("DATALAYER_CODE_SANDBOX_VARIANT")) and summarize the result.',
-            },
-            {
-                title: 'Run numeric workload',
-                message: 'Use execute_code to compute sum(i*i for i in range(10000)) and report timing and result.',
-            },
-            {
-                title: 'Check package availability',
-                message: 'Use execute_code to import pandas and print(pandas.__version__).',
-            },
-        ], submitOnSuggestionClick: true }));
-};
-const AgentCodeSandboxesExample = () => {
-    const { token, clearAuth } = useSimpleAuthStore();
-    const handleLogout = useCallback(() => {
-        clearAuth();
-    }, [clearAuth]);
-    if (!token) {
-        return _jsx(AuthRequiredView, {});
+                            }, children: SANDBOX_CAPACITIES.map(capacity => (_jsxs("option", { value: capacity.key, children: [capacity.displayName, " (", capacity.variant, ")"] }, capacity.key))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: selected.description })] }), _jsxs(Button, { variant: "primary", "data-sandboxes-launch": true, onClick: () => setLaunched({
+                        key: selected.key,
+                        agentId: uniqueAgentId(`code-sandbox-${selected.variant}`),
+                    }), sx: { width: '100%', maxWidth: 420 }, children: ["Launch ", selected.displayName] })] }));
     }
-    return (_jsx(ThemedProvider, { children: _jsx(AgentCodeSandboxesInner, { onLogout: handleLogout }) }));
+    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: () => {
+                            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) })] }));
 };
+const AgentCodeSandboxesExample = () => (_jsx(ThemedProvider, { children: _jsx(AgentCodeSandboxesInner, {}) }));
 export default AgentCodeSandboxesExample;

package/lib/examples/AgentCodemodeExample.d.ts

@@ -1,11 +1,16 @@
 /**
  * AgentCodemodeExample
  *
- * Compares two tooling modes side-by-side:
+ * Compares two tooling modes on the same task:
  * - MCP tools without codemode conversion
  * - MCP tools with codemode conversion
  *
- * A sidebar gauge tracks consumed tokens for each agent in real time.
+ * Each side is its own agent on its own agent-runtimes server, and a gauge
+ * on each side tracks the tokens it consumed in real time. The chat shows
+ * one side at a time, with a switch in the header: the reactor a Loop runs
+ * on is published to a page-global store, so a page hosts one Loop — a
+ * second one would take the first one's place. Both gauges keep counting
+ * whichever side is on screen.
  */
 import React from 'react';
 declare const AgentCodemodeExample: React.FC;

package/lib/examples/AgentCodemodeExample.js

@@ -6,15 +6,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentCodemodeExample
  *
- * Compares two tooling modes side-by-side:
+ * Compares two tooling modes on the same task:
  * - MCP tools without codemode conversion
  * - MCP tools with codemode conversion
  *
- * A sidebar gauge tracks consumed tokens for each agent in real time.
+ * Each side is its own agent on its own agent-runtimes server, and a gauge
+ * on each side tracks the tokens it consumed in real time. The chat shows
+ * one side at a time, with a switch in the header: the reactor a Loop runs
+ * on is published to a page-global store, so a page hosts one Loop — a
+ * second one would take the first one's place. Both gauges keep counting
+ * whichever side is on screen.
  */
 /// <reference types="vite/client" />
 import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
-import { Text, Spinner, Heading, Label, Flash } from '@primer/react';
+import { Text, Heading, SegmentedControl } from '@primer/react';
 import { CodeIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import ReactECharts from 'echarts-for-react';
@@ -24,7 +29,9 @@ import { ThemedProvider } from './utils/themedProvider';
 import { AuthRequiredView } from './components';
 import { uniqueAgentId } from './utils/agentId';
 import { useAIAgentsWebSocket } from '../hooks';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { AgentCodemodePlugin, AgentNoCodemodePlugin, } from '../loop/plugins/agent-codemode';
+import { createChatExtrasPlugin } from '../loop/plugins/chat-extras';
 import { ContextPanel, } from '../context/ContextPanel';
 import { parseAgentStreamMessage, } from '../types/stream';
 import { MCP_SERVER_LIBRARY } from '../specs/mcpServers';
@@ -37,14 +44,11 @@ const NO_CODEMODE_BASE_URL = import.meta.env.VITE_BASE_URL_NO_CODEMODE ||
     import.meta.env.VITE_BASE_URL ||
     'http://localhost:8765';
 const CODEMODE_BASE_URL = import.meta.env.VITE_BASE_URL_CODEMODE || 'http://localhost:8766';
-const NO_CODEMODE_SUGGESTION_MESSAGE = 'Use the MCP extract tool to extract information from https://datalayer.ai, then use your sandbox to persist that information in a variable named "about_datalayer".';
-const CODEMODE_SUGGESTION_MESSAGE = 'Extract information from the https://datalayer.ai website and assign it to the variable "about_datalayer", all in one step using the sandbox';
 const DEMO_AGENT_CONFIGS = [
     {
         key: 'no-codemode',
         title: 'MCP Tools (No Codemode)',
         subtitle: 'Raw MCP tools without codemode conversion',
-        suggestionMessage: NO_CODEMODE_SUGGESTION_MESSAGE,
         specId: 'example-no-codemode',
         color: '#16A085',
         baseUrl: NO_CODEMODE_BASE_URL,
@@ -53,7 +57,6 @@ const DEMO_AGENT_CONFIGS = [
         key: 'codemode',
         title: 'Codemode Tools',
         subtitle: 'MCP tools converted into programmatic tools',
-        suggestionMessage: CODEMODE_SUGGESTION_MESSAGE,
         specId: 'example-codemode',
         color: '#8250DF',
         baseUrl: CODEMODE_BASE_URL,
@@ -67,12 +70,11 @@ function extractConsumedTokens(payload) {
     }
     return Number(payload.contextSnapshot?.totalTokens ?? 0);
 }
-const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onContextSnapshot, }) => {
+const AgentRuntimePane = ({ config, active, token, onTokenConsumed, onAgentIdChange, onContextSnapshot, }) => {
     const runtimeName = useRef(uniqueAgentId(`codemode-${config.key}`)).current;
-    const [runtimeStatus, setRuntimeStatus] = useState('launching');
-    const [hookError, setHookError] = useState(null);
-    const [agentId, setAgentId] = useState(runtimeName);
-    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    // The Loop creates the agent on this pane's server from the capacity
+    // plugin's blueprint, under this name; the pane only has to know it.
+    const agentId = runtimeName;
     const [selectedServerIds, setSelectedServerIds] = useState([]);
     const [agentTools, setAgentTools] = useState([]);
     const [liveMcpStatus, setLiveMcpStatus] = useState(undefined);
@@ -86,81 +88,8 @@ const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onC
         },
     }), [token]);
     useEffect(() => {
-        let cancelled = false;
-        const launchTimeoutMs = 20_000;
-        const createLocalAgent = async () => {
-            setRuntimeStatus('launching');
-            setHookError(null);
-            setIsReconnectedAgent(false);
-            try {
-                const controller = new AbortController();
-                const timeoutId = window.setTimeout(() => {
-                    controller.abort();
-                }, launchTimeoutMs);
-                const response = await authFetch(`${config.baseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    signal: controller.signal,
-                    body: JSON.stringify({
-                        name: runtimeName,
-                        description: config.subtitle,
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: config.specId,
-                        enable_skills: true,
-                        tools: [],
-                    }),
-                });
-                window.clearTimeout(timeoutId);
-                let resolvedAgentId = runtimeName;
-                let alreadyRunning = false;
-                if (response.ok) {
-                    const data = await response.json();
-                    resolvedAgentId = data?.id || runtimeName;
-                }
-                else {
-                    const contentType = response.headers.get('content-type') || '';
-                    let detail = '';
-                    if (contentType.includes('application/json')) {
-                        const data = await response.json().catch(() => null);
-                        detail =
-                            (typeof data?.detail === 'string' && data.detail) ||
-                                (typeof data?.message === 'string' && data.message) ||
-                                '';
-                    }
-                    else {
-                        detail = await response.text();
-                    }
-                    if (response.status === 409 || /already exists/i.test(detail || '')) {
-                        alreadyRunning = true;
-                    }
-                    else {
-                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
-                    }
-                }
-                if (!cancelled) {
-                    setAgentId(resolvedAgentId);
-                    onAgentIdChange?.(config.key, resolvedAgentId);
-                    setIsReconnectedAgent(alreadyRunning);
-                    setRuntimeStatus('ready');
-                }
-            }
-            catch (error) {
-                if (!cancelled) {
-                    const isAbortError = error instanceof DOMException && error.name === 'AbortError';
-                    setHookError(isAbortError
-                        ? `Timed out after ${Math.round(launchTimeoutMs / 1000)}s while creating '${config.specId}' at ${config.baseUrl}. Ensure the no-codemode endpoint is reachable.`
-                        : error instanceof Error
-                            ? `${error.message} (endpoint: ${config.baseUrl}, spec: ${config.specId})`
-                            : `Agent failed to start (endpoint: ${config.baseUrl}, spec: ${config.specId})`);
-                    setRuntimeStatus('error');
-                }
-            }
-        };
-        void createLocalAgent();
-        return () => {
-            cancelled = true;
-        };
-    }, [authFetch, config.specId, config.subtitle, config.baseUrl, runtimeName]);
+        onAgentIdChange?.(config.key, agentId);
+    }, [agentId, config.key, onAgentIdChange]);
     const handleStreamMessage = useCallback((message) => {
         try {
             const stream = parseAgentStreamMessage(message?.raw ?? message);
@@ -192,7 +121,7 @@ const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onC
         }
     }, [config.key, onTokenConsumed, onContextSnapshot]);
     useAIAgentsWebSocket({
-        enabled: runtimeStatus === 'ready',
+        enabled: true,
         baseUrl: config.baseUrl,
         path: '/api/v1/tool-approvals/ws',
         queryParams: { agent_id: agentId },
@@ -200,30 +129,37 @@ const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onC
         reconnectDelayMs: attempt => Math.min(1000 * 2 ** Math.max(0, attempt - 1), 10000),
     });
     // Fetch creation spec to get selected MCP server IDs (for the MCP indicator).
+    // The Loop is creating the agent meanwhile, so ask again until it is there.
     useEffect(() => {
-        if (runtimeStatus !== 'ready')
-            return;
         let cancelled = false;
+        let attempts = 0;
+        let timer;
         const fetchSpec = async () => {
             try {
                 const res = await authFetch(`${config.baseUrl}/api/v1/configure/agents/${agentId}/spec`);
-                if (!res.ok)
+                if (res.ok) {
+                    const spec = await res.json();
+                    const servers = (spec?.selected_mcp_servers ?? []);
+                    if (!cancelled) {
+                        setSelectedServerIds(servers.map(s => s.id));
+                    }
                     return;
-                const spec = await res.json();
-                const servers = (spec?.selected_mcp_servers ?? []);
-                if (!cancelled) {
-                    setSelectedServerIds(servers.map(s => s.id));
                 }
             }
             catch {
-                // Non-fatal.
+                // Not there yet, or not reachable: try again below.
+            }
+            attempts += 1;
+            if (!cancelled && attempts < 60) {
+                timer = window.setTimeout(() => void fetchSpec(), 2000);
             }
         };
         void fetchSpec();
         return () => {
             cancelled = true;
+            window.clearTimeout(timer);
         };
-    }, [runtimeStatus, agentId, authFetch, config.baseUrl]);
+    }, [agentId, authFetch, config.baseUrl]);
     // Build McpServerInfo[] from selected servers + catalog + WS tools.
     const mcpServers = useMemo(() => {
         if (selectedServerIds.length === 0)
@@ -349,22 +285,26 @@ const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onC
             setCodemodeEnabled(prev => !prev);
         }
     }, [authFetch, agentId, config.baseUrl]);
-    if (runtimeStatus === 'launching') {
-        return (_jsxs(Box, { sx: {
-                border: '1px solid',
-                borderColor: 'border.default',
-                borderRadius: 2,
-                p: 3,
-                minHeight: 220,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                gap: 2,
-            }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Launching ", config.title, "..."] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: config.baseUrl })] }));
-    }
-    if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Flash, { variant: "danger", sx: { borderRadius: 2 }, children: [config.title, ": ", hookError || 'Failed to start'] }));
+    // The pane's chat column is the shared loop on this pane's capacity plugin
+    // (codemode vs raw MCP). Its live codemode toggle and MCP/codemode status
+    // reach the footer through the chat-extras channel.
+    const { plugin: extrasPlugin, setExtras } = useMemo(() => createChatExtrasPlugin(), []);
+    const chatPlugins = useMemo(() => [
+        config.key === 'codemode' ? AgentCodemodePlugin : AgentNoCodemodePlugin,
+        extrasPlugin,
+    ], [config.key, extrasPlugin]);
+    useEffect(() => {
+        setExtras({
+            codemodeEnabled,
+            onToggleCodemode: handleToggleCodemode,
+            mcpStatusData: mcpStatusData ?? null,
+        });
+    }, [codemodeEnabled, handleToggleCodemode, mcpStatusData, setExtras]);
+    void codemodeStatusData;
+    // Mounted for its websocket and gauge whichever side is on screen; only
+    // the side on screen mounts a Loop, there being one per page.
+    if (!active) {
+        return null;
     }
     return (_jsx(Box, { sx: {
             border: '1px solid',
@@ -374,12 +314,7 @@ const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onC
             minHeight: 560,
             display: 'flex',
             flexDirection: 'column',
-        }, children: _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: config.baseUrl, agentId: agentId, authToken: token, title: config.title, brandIcon: _jsx(CodeIcon, { size: 16 }), subtitle: config.subtitle, placeholder: "Ask both agents the same request to compare behavior...", description: config.subtitle, showHeader: true, kernelIndicatorPlacement: "right", headerActions: isReconnectedAgent ? (_jsx(Label, { size: "small", variant: "attention", children: "Reconnected" })) : undefined, autoFocus: false, height: "100%", runtimeId: agentId, historyEndpoint: `${config.baseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData, codemodeEnabled: codemodeEnabled, onToggleCodemode: handleToggleCodemode, suggestions: [
-                    {
-                        title: 'Datalayer extraction',
-                        message: config.suggestionMessage,
-                    },
-                ], submitOnSuggestionClick: true }) }) }));
+        }, 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 }) }) }));
 };
 const AgentCodemodeInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
@@ -388,6 +323,7 @@ const AgentCodemodeInner = ({ onLogout, }) => {
         codemode: 0,
     });
     const [agentIdByKey, setAgentIdByKey] = useState({});
+    const [activeKey, setActiveKey] = useState('no-codemode');
     const [contextSnapshotByKey, setContextSnapshotByKey] = useState({});
     const handleAgentIdChange = useCallback((agentKey, agentId) => {
         setAgentIdByKey(prev => prev[agentKey] === agentId ? prev : { ...prev, [agentKey]: agentId });
@@ -541,7 +477,7 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                     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" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [DEMO_AGENT_CONFIGS.filter(c => c.key === 'no-codemode').map(config => (() => {
+                }, 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 => (() => {
                         const outcome = outcomeFor(config.key);
                         return (_jsxs(Box, { sx: {
                                 width: 320,
@@ -600,11 +536,10 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                             flex: 1,
                             minWidth: 0,
                             p: 3,
-                            display: 'grid',
-                            gridTemplateColumns: ['1fr', null, '1fr 1fr'],
-                            gap: 3,
+                            display: 'flex',
+                            flexDirection: 'column',
                             overflow: 'auto',
-                        }, children: DEMO_AGENT_CONFIGS.map(config => (_jsx(AgentRuntimePane, { config: config, token: token, onTokenConsumed: handleTokenConsumed, onAgentIdChange: handleAgentIdChange, onContextSnapshot: handleContextSnapshot }, config.key))) }), DEMO_AGENT_CONFIGS.filter(c => c.key === 'codemode').map(config => (() => {
+                        }, 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,