@datalayer/agent-runtimes 1.0.29 → 1.3.10

package/lib/examples/AgentLoopExample.js

@@ -26,16 +26,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module examples/AgentLoopExample
  */
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook, useJupyter } from '@datalayer/jupyter-react';
+import { Notebook } from '@datalayer/jupyter-react';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
-import { ThemedJupyterProvider } from './utils/themedProvider';
+import { ThemedJupyterProvider, ThemedProvider } from './utils/themedProvider';
 import { ChatSidebar } from '../chat';
-import { DEFAULT_MODEL, listLoops, getLoop, DEFAULT_LOOP } from '../specs';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
+import { listLoops, getLoop, DEFAULT_LOOP } from '../specs';
+import { useExampleJupyterAgent } from './hooks/useExampleJupyterAgent';
 import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
+import { ExampleNotebookToolbar } from './utils/notebookToolbarItems';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'agent-loop-example';
 // Use the imported Matplotlib notebook as the working surface for the loop.
@@ -82,28 +82,9 @@ function buildLoopSystemPrompt(loop) {
     }
     lines.push(`Keep loop state (dataframes, charts, intermediate results) in the notebook/runtime, not in the prompt. ` +
         `For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. ` +
-        `Use executeCode only for temporary inspection code that should not modify notebook cells.`);
+        `Use executeCodeInNotebook only for temporary inspection code that should not modify notebook cells.`);
     return lines.join('\n\n');
 }
-function getJupyterSandboxUrl(serviceManager) {
-    const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
-    if (envUrl) {
-        return envUrl;
-    }
-    const baseUrl = serviceManager?.serverSettings?.baseUrl?.replace(/\/$/, '');
-    if (!baseUrl) {
-        return undefined;
-    }
-    if (baseUrl.includes('token=')) {
-        return baseUrl;
-    }
-    const token = serviceManager?.serverSettings?.token;
-    if (!token) {
-        return baseUrl;
-    }
-    const separator = baseUrl.includes('?') ? '&' : '?';
-    return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
-}
 function NotebookUI({ serviceManager }) {
     if (!serviceManager) {
         return (_jsx(Box, { sx: {
@@ -114,7 +95,17 @@ function NotebookUI({ serviceManager }) {
                 color: 'fg.muted',
             }, children: "Loading Simple services..." }));
     }
-    return (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "100%", cellSidebarMargin: 120, startDefaultKernel: true }));
+    /*
+     * Scoped to the notebook, not to the example.
+     *
+     * `JupyterReactTheme` nests a Primer theme of its own, and Primer tokens
+     * resolve against the nearest one — so anything rendered inside it reads
+     * `canvas.default` from that theme rather than from the Datalayer theme the
+     * picker drives. Wrapping the whole example is why its chrome came out
+     * white while every other example followed the theme; the working examples
+     * all wrap the notebook alone.
+     */
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, serviceManager: serviceManager, height: "100%", cellSidebarMargin: 120, startDefaultKernel: true }) }));
 }
 /**
  * A compact, read-only summary of the selected loop specification.
@@ -141,71 +132,30 @@ function LoopSummary({ loop }) {
                     }, children: [index + 1, ". ", phase] }, phase))) }), loop.objective && (_jsxs(Box, { sx: { color: 'fg.muted' }, children: [_jsx("strong", { children: "Objective:" }), " ", loop.objective] })), loop.termination && (_jsxs(Box, { sx: { color: 'fg.muted', mt: 1 }, children: [_jsx("strong", { children: "Max iterations:" }), " ", loop.termination.maxIterations, " \u00B7", ' ', _jsx("strong", { children: "On blocked:" }), " ", loop.termination.onBlocked] }))] }));
 }
 export function AgentLoopExampleInner({ serviceManager, }) {
-    const baseUrl = useExampleAgentRuntimesUrl();
-    const vercelAiEndpoint = `${baseUrl}/api/v1/vercel-ai/${DEFAULT_AGENT_ID}`;
-    const [createRequested, setCreateRequested] = useState(false);
     // All available loops come from the generated loop catalogue.
     const loops = useMemo(() => listLoops(), []);
     const [selectedLoopId, setSelectedLoopId] = useState(DEFAULT_LOOP);
     const selectedLoop = useMemo(() => getLoop(selectedLoopId) ?? loops[0], [selectedLoopId, loops]);
-    const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
     const systemPrompt = useMemo(() => buildLoopSystemPrompt(selectedLoop), [selectedLoop]);
-    const { agentId, isReady, status, error, createAgent } = useExampleAgentRuntime({
+    // The tools. Which of the chat and the harness runs them depends on
+    // where the loop turns, and the hook decides that.
+    const tools = useNotebookTools(NOTEBOOK_ID);
+    const { agentReady, protocol: protocolConfig, chatFrontendTools, error, unavailableReason, createAttempted, } = useExampleJupyterAgent({
         exampleId: 'AgentLoopExample',
         agentName: DEFAULT_AGENT_ID,
-        autoCreateAgent: false,
-        agentConfig: {
-            name: DEFAULT_AGENT_ID,
-            description: `Loop agent (${selectedLoop.name}) for AgentLoopExample`,
-            protocol: 'vercel-ai',
-            model: DEFAULT_MODEL,
-            systemPrompt,
-            enableCodemode: false,
-            sandboxVariant: 'jupyter',
-            jupyterSandbox: jupyterSandboxUrl,
-        },
-    });
-    // Launch the loop agent once the sandbox is ready, using the loop that was
-    // selected at launch time.
-    useEffect(() => {
-        if (!jupyterSandboxUrl || createRequested || agentId) {
-            return;
-        }
-        setCreateRequested(true);
-        void createAgent({
-            name: DEFAULT_AGENT_ID,
-            description: `Loop agent (${selectedLoop.name}) for AgentLoopExample`,
-            protocol: 'vercel-ai',
-            model: DEFAULT_MODEL,
-            systemPrompt,
-            enableCodemode: false,
-            sandboxVariant: 'jupyter',
-            jupyterSandbox: jupyterSandboxUrl,
-        }).catch(() => {
-            setCreateRequested(false);
-        });
-    }, [
-        jupyterSandboxUrl,
-        createRequested,
-        agentId,
-        createAgent,
-        selectedLoop.name,
+        description: `Loop agent (${selectedLoop.name}) for AgentLoopExample`,
         systemPrompt,
-    ]);
-    const effectiveReady = isReady || status === 'ready';
-    const isLoopSelectorDisabled = createRequested;
+        serviceManager,
+        frontendTools: tools,
+    });
+    // One failed attempt is reported, not retried — see `useExampleJupyterAgent`.
+    const chatError = error || unavailableReason;
+    // The example's own agent, not merely the runtime: on the cloud target the
+    // runtime is ready before this agent has been registered on it.
+    const effectiveReady = agentReady;
+    const isLoopSelectorDisabled = createAttempted;
     // Get notebook tools for ChatSidebar
-    const tools = useNotebookTools(NOTEBOOK_ID);
     // Build Vercel AI protocol config
-    const protocolConfig = useMemo(() => {
-        return {
-            type: 'vercel-ai',
-            endpoint: vercelAiEndpoint,
-            agentId: DEFAULT_AGENT_ID,
-            enableConfigQuery: true,
-            configEndpoint: `${baseUrl}/api/v1/configure`,
-        };
-    }, [baseUrl, vercelAiEndpoint]);
     // Chat suggestions derived from the selected loop.
     const suggestions = useMemo(() => [
         {
@@ -228,10 +178,16 @@ export function AgentLoopExampleInner({ serviceManager, }) {
         },
     ], [selectedLoop]);
     return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
-                height: 'calc(100vh - 70px)',
-                width: '100vw',
+                // The wrapper is the viewport, not the window: it sits below the
+                // header and beside the sidebar, so viewport units size this box to
+                // an area it is not in — and the wrapper paints no background of its
+                // own, so wherever this box failed to reach showed through white.
+                height: '100%',
+                width: '100%',
                 display: 'flex',
                 overflow: 'hidden',
+                bg: 'canvas.default',
+                color: 'fg.default',
             }, children: [_jsxs(Box, { sx: {
                         flex: 1,
                         display: 'flex',
@@ -273,13 +229,13 @@ export function AgentLoopExampleInner({ serviceManager, }) {
                                     overflow: 'hidden',
                                 }, children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), effectiveReady && (_jsx(ChatSidebar, { title: `${selectedLoop.emoji} ${selectedLoop.name}`, protocol: protocolConfig, position: "right", width: 400, clickOutsideToClose: false, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
                         protocol: protocolConfig,
-                        frontendTools: tools,
+                        frontendTools: chatFrontendTools,
                         useStore: false,
                         showModelSelector: true,
                         showToolsMenu: true,
                         showSkillsMenu: true,
                         suggestions,
-                    } })), error && (_jsxs(Box, { sx: {
+                    } })), chatError && (_jsxs(Box, { sx: {
                         position: 'fixed',
                         bottom: 20,
                         right: 20,
@@ -289,16 +245,12 @@ export function AgentLoopExampleInner({ serviceManager, }) {
                         borderRadius: 2,
                         maxWidth: 320,
                         zIndex: 999,
-                    }, children: [_jsx("strong", { children: "Error:" }), " ", error] }))] }) }));
+                    }, children: [_jsx("strong", { children: "Error:" }), " ", chatError] }))] }) }));
 }
 /**
  * Main example component with Jupyter provider wrapper.
  */
-export function AgentLoopExample() {
-    return (_jsx(ThemedJupyterProvider, { children: _jsx(SimpleWrapper, {}) }));
-}
-function SimpleWrapper() {
-    const { serviceManager } = useJupyter();
-    return _jsx(AgentLoopExampleInner, { serviceManager: serviceManager });
+export function AgentLoopExample({ serviceManager, }) {
+    return (_jsx(ThemedProvider, { children: _jsx(AgentLoopExampleInner, { serviceManager: serviceManager }) }));
 }
 export default AgentLoopExample;

package/lib/examples/AgentMCPExample.js

@@ -13,7 +13,10 @@ import { GlobeIcon, CheckCircleIcon, ServerIcon, XCircleIcon, ToolsIcon, } from
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { Chat } from '../chat';
+import { waitForAgent } from './utils/waitForAgent';
+import { LoopEmbed } from '../loop';
+import { AgentMcpPlugin } from '../loop/plugins/agent-mcp';
+import { createChatExtrasPlugin } from '../loop/plugins/chat-extras';
 import { useAIAgentsWebSocket } from '../hooks';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { parseAgentStreamMessage } from '../types/stream';
@@ -21,8 +24,6 @@ import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../types/mcp';
 import { MCP_SERVER_LIBRARY } from '../specs/mcpServers';
 const queryClient = new QueryClient();
 const AGENT_NAME = 'mcp-example-agent';
-// Must match agentspecs/agentspecs/agents/example-mcp.yaml `id`.
-const AGENTSPEC_ID = 'example-mcp';
 /* ── Aggregate MCP status helpers ─────────────────────── */
 function deriveAggregate(servers) {
     if (!servers || servers.length === 0)
@@ -129,6 +130,7 @@ const AgentMCPInner = ({ onLogout }) => {
     // agent-runtime store — no local state needed.
     const agentBaseUrl = useExampleAgentRuntimesUrl();
     const chatAuthToken = token === null ? undefined : token;
+    void chatAuthToken;
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -140,57 +142,28 @@ const AgentMCPInner = ({ onLogout }) => {
     // ── Create agent ──────────────────────────────────────
     useEffect(() => {
         let isCancelled = false;
+        const controller = new AbortController();
         const createAgent = async () => {
             setRuntimeStatus('launching');
             setIsReady(false);
             setHookError(null);
             setIsReconnectedAgent(false);
             try {
-                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        name: agentName,
-                        description: 'MCP example agent – web crawling and research via Tavily',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        enable_codemode: false,
-                        enable_skills: true,
-                        tools: [],
-                    }),
+                // The Loop creates the agent from the capacity plugin's blueprint as
+                // it mounts; the page only waits until the server has it, so its own
+                // sockets and reads address an agent that exists.
+                const found = await waitForAgent(agentBaseUrl, agentName, {
+                    signal: controller.signal,
                 });
-                let resolvedAgentId = agentName;
-                let isAlreadyRunning = false;
-                if (response.ok) {
-                    const data = await response.json();
-                    resolvedAgentId = data?.id || agentName;
-                }
-                else {
-                    const contentType = response.headers.get('content-type') || '';
-                    let detail = '';
-                    if (contentType.includes('application/json')) {
-                        const data = await response.json().catch(() => null);
-                        detail =
-                            (typeof data?.detail === 'string' && data.detail) ||
-                                (typeof data?.message === 'string' && data.message) ||
-                                '';
-                    }
-                    else {
-                        detail = await response.text();
-                    }
-                    if (response.status === 409 || /already exists/i.test(detail || '')) {
-                        isAlreadyRunning = true;
-                    }
-                    else {
-                        throw new Error(detail || `Failed to create agent: ${response.status}`);
-                    }
-                }
-                if (!isCancelled) {
-                    setAgentId(resolvedAgentId);
-                    setIsReconnectedAgent(isAlreadyRunning);
-                    setIsReady(true);
-                    setRuntimeStatus('ready');
+                if (isCancelled)
+                    return;
+                if (!found) {
+                    throw new Error(`The agent '${agentName}' did not appear on ${agentBaseUrl}.`);
                 }
+                setAgentId(agentName);
+                setIsReconnectedAgent(false);
+                setIsReady(true);
+                setRuntimeStatus('ready');
             }
             catch (error) {
                 if (!isCancelled) {
@@ -202,6 +175,7 @@ const AgentMCPInner = ({ onLogout }) => {
         void createAgent();
         return () => {
             isCancelled = true;
+            controller.abort();
         };
     }, [agentBaseUrl, agentName, authFetch]);
     // ── WebSocket: receive MCP status + fullContext tools from agent.snapshot ─
@@ -347,7 +321,7 @@ const AgentMCPInner = ({ onLogout }) => {
         const readyServers = servers
             .filter(s => s.status === 'started')
             .map(s => s.id);
-        // Build enabled_tools_by_server so the InputFooter ToolsMenu can render
+        // Build enabled_tools_by_server so the ToolsMenu can render
         // tools as enabled immediately on first open.
         const enabledToolsByServer = derivedEnabledToolsByServer;
         const approvedToolsByServer = derivedApprovedToolsByServer;
@@ -365,16 +339,14 @@ const AgentMCPInner = ({ onLogout }) => {
     }, [liveMcpStatus, mcpServers]);
     const totalTools = mcpServers.reduce((sum, s) => sum + s.toolsCount, 0);
     const aggregate = deriveAggregate(mcpStatusData?.servers ?? []);
-    if (!isReady && runtimeStatus !== 'error') {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching MCP example agent..." })] }));
-    }
+    // The chat column is the shared loop; the live MCP status the footer shows
+    // reaches it through the chat-extras channel. The server panel on the right
+    // is the example's own.
+    const { plugin: extrasPlugin, setExtras } = useMemo(() => createChatExtrasPlugin(), []);
+    const chatPlugins = useMemo(() => [AgentMcpPlugin, extrasPlugin], [extrasPlugin]);
+    useEffect(() => {
+        setExtras({ mcpStatusData: mcpStatusData ?? null });
+    }, [mcpStatusData, setExtras]);
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
@@ -387,28 +359,7 @@ const AgentMCPInner = ({ onLogout }) => {
                     py: 1,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "MCP Demo Agent", brandIcon: _jsx(GlobeIcon, { size: 16 }), placeholder: "Ask the agent to search the web or explore GitHub...", showHeader: true, kernelIndicatorPlacement: "right", showNewChatButton: true, showClearButton: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, showToolApprovalBanner: true, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["MCP Tools: ", totalTools] }) }), suggestions: [
-                                {
-                                    title: '🔍 Search the web',
-                                    message: 'Search the web for recent news about AI agents.',
-                                },
-                                {
-                                    title: '🐙 GitHub repos',
-                                    message: 'Find trending open-source Python projects on GitHub.',
-                                },
-                                {
-                                    title: '📚 Research topic',
-                                    message: 'Research best practices for building RAG applications.',
-                                },
-                                {
-                                    title: '⚡ Compare frameworks',
-                                    message: 'Compare popular JavaScript frameworks in 2024.',
-                                },
-                                {
-                                    title: '😄 Tell me a joke',
-                                    message: 'Use your jokes skill to tell me a random joke.',
-                                },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }), _jsxs(Box, { sx: {
                             width: 320,
                             minWidth: 260,
                             borderLeft: '1px solid',

package/lib/examples/AgentMemoryExample.js

@@ -24,15 +24,17 @@ import { Box } from '@datalayer/primer-addons';
 import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { waitForAgent } from './utils/waitForAgent';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { AgentMemoryPlugin } from '../loop/plugins/agent-memory';
 import { listRuntimeMemories } from '../api/runtimes/runtimes';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useRuntimeTargetStore } from './utils/runtimeTargetStore';
+const LOOP_PLUGINS_AGENTMEM = [AgentMemoryPlugin];
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'memory-example-agent';
-const AGENTSPEC_ID = 'example-memory';
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentMemoryInner = ({ onLogout }) => {
     const { token } = useSimpleAuthStore();
@@ -50,7 +52,7 @@ const AgentMemoryInner = ({ onLogout }) => {
     const [searchResults, setSearchResults] = useState([]);
     const [searchAttempted, setSearchAttempted] = useState(false);
     const [searching, setSearching] = useState(false);
-    const podName = isReady ? `local:${agentId}` : '(launching…)';
+    const runtimeName = isReady ? `local:${agentId}` : '(launching…)';
     // Authenticated fetch helper (for sidecar endpoints)
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -62,51 +64,26 @@ const AgentMemoryInner = ({ onLogout }) => {
     }), [token]);
     useEffect(() => {
         let isCancelled = false;
+        const controller = new AbortController();
         const createLocalAgent = async () => {
             setRuntimeStatus('launching');
             setIsReady(false);
             setHookError(null);
             try {
-                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        name: agentName,
-                        description: 'Agent with persistent memory',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        memory: runtimeTarget === 'local' ? 'sqlite' : 'mem0',
-                        enable_skills: true,
-                        tools: [],
-                    }),
+                // The Loop creates the agent from the capacity plugin's blueprint as
+                // it mounts; the page only waits until the server has it, so its own
+                // sockets and reads address an agent that exists.
+                const found = await waitForAgent(agentBaseUrl, agentName, {
+                    signal: controller.signal,
                 });
-                let resolvedAgentId = agentName;
-                if (response.ok) {
-                    const data = await response.json();
-                    resolvedAgentId = data?.id || agentName;
-                }
-                else {
-                    const contentType = response.headers.get('content-type') || '';
-                    let detail = '';
-                    if (contentType.includes('application/json')) {
-                        const data = await response.json().catch(() => null);
-                        detail =
-                            (typeof data?.detail === 'string' && data.detail) ||
-                                (typeof data?.message === 'string' && data.message) ||
-                                '';
-                    }
-                    else {
-                        detail = await response.text();
-                    }
-                    if (!(response.status === 409 || /already exists/i.test(detail))) {
-                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
-                    }
-                }
-                if (!isCancelled) {
-                    setAgentId(resolvedAgentId);
-                    setIsReady(true);
-                    setRuntimeStatus('ready');
+                if (isCancelled)
+                    return;
+                if (!found) {
+                    throw new Error(`The agent '${agentName}' did not appear on ${agentBaseUrl}.`);
                 }
+                setAgentId(agentName);
+                setIsReady(true);
+                setRuntimeStatus('ready');
             }
             catch (error) {
                 if (!isCancelled) {
@@ -118,6 +95,7 @@ const AgentMemoryInner = ({ onLogout }) => {
         void createLocalAgent();
         return () => {
             isCancelled = true;
+            controller.abort();
         };
     }, [agentBaseUrl, agentName, authFetch, runtimeTarget]);
     // ── Fetch memory list ────────────────────────────────────────────────────
@@ -214,17 +192,6 @@ const AgentMemoryInner = ({ onLogout }) => {
         void fetchMemories();
     }, [fetchMemories]);
     // ── Loading state ────────────────────────────────────────────────────────
-    if (!isReady && runtimeStatus !== 'error') {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                gap: 3,
-                bg: 'canvas.default',
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local memory-enabled agent\u2026" })] }));
-    }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
@@ -243,22 +210,12 @@ const AgentMemoryInner = ({ onLogout }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Durable Memory \u2014 ", podName] })] }), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
+                }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Durable Memory \u2014 ", runtimeName] })] }), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
                             flex: 1,
                             minWidth: 0,
                             borderRight: '1px solid',
                             borderColor: 'border.default',
-                        }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Memory Agent", brandIcon: _jsx(DatabaseIcon, { size: 16 }), placeholder: "Chat \u2014 the agent remembers you across sessions\u2026", description: "Agent with persistent memory", showHeader: true, kernelIndicatorPlacement: "right", showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
-                                {
-                                    title: 'Remember',
-                                    message: 'My favourite colour is midnight blue.',
-                                },
-                                { title: 'Recall', message: 'What is my favourite colour?' },
-                                {
-                                    title: 'Preference',
-                                    message: 'I prefer reports in bullet-point format.',
-                                },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                        }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTMEM }) }), _jsxs(Box, { sx: {
                             width: 340,
                             flexShrink: 0,
                             display: 'flex',