@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/examples/AgentSubagentsExample.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -6,40 +6,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentSubagentsExample
  *
- * Demonstrates multi-agent delegation using the in-repo subagents capability.
- * The parent agent orchestrates a researcher and a writer subagent,
- * delegating tasks and combining results for the user.
+ * Multi-agent delegation with the in-repo subagents capability. The
+ * orchestrator runs on the local agent-runtimes server, created there by the
+ * Loop from the `example-subagents` blueprint; its researcher and writer are
+ * subagents inside its process, each run in an isolated child run.
  *
- * - Creates an agent from the 'example-subagents' spec on the selected target
- * - Shows a Chat component for interacting with the orchestrator
- * - Sidebar displays subagent info and active task status
+ * - The chat is the demonstration: no notebook or document beside it
+ * - The sidebar keeps the live run in view and lists the subagents the spec
+ *   declares, badged "Running" while a delegation to one is going
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useMemo } from 'react';
 import { Text, Spinner, Heading, Label, Timeline } from '@primer/react';
 import { PeopleIcon, PersonIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { Chat } from '../chat';
+import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { LoopEmbed } from '../loop';
+import { AgentSubagentsPlugin } from '../loop/plugins/agent-subagents';
 import { SubagentChatPanel } from '../chat/messages/ChatMessageList';
-import { useAgentRuntimeActiveSubagentToolCallId } from '../stores';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { useRuntimeTargetStore } from './utils/runtimeTargetStore';
+import { useAgentRuntimeActiveSubagentToolCallId, useAgentRuntimeRunningSubagentNames, } from '../stores';
+import { getAgentspecs } from '../specs/agents';
+const LOOP_PLUGINS_AGENTSUB = [AgentSubagentsPlugin];
 const AGENT_NAME = 'subagents-example-agent';
 const AGENTSPEC_ID = 'example-subagents';
-const SUBAGENTS = [
-    {
-        name: 'researcher',
-        description: 'Researches topics, gathers facts, and provides detailed analysis',
-    },
-    {
-        name: 'writer',
-        description: 'Writes clear, structured content based on research or instructions',
-    },
-];
+/** The subagents the orchestrator can delegate to, from its spec. */
+const declaredSubagents = () => getAgentspecs(AGENTSPEC_ID)?.subagents?.subagents ?? [];
 /** Fixed height (px) for the active-subagent chat viewport. */
 const ACTIVE_PANEL_HEIGHT = 280;
 /**
@@ -63,175 +56,71 @@ const ActiveSubagentPanel = () => {
                     bg: 'canvas.subtle',
                 }, children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No active Subagent" }) }))] }));
 };
-const AgentSubagentsInner = ({ onLogout, }) => {
-    const { token } = useSimpleAuthStore();
-    const runtimeTarget = useRuntimeTargetStore(state => state.target);
-    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
-    const [runtimeStatus, setRuntimeStatus] = useState('launching');
-    const [isReady, setIsReady] = useState(false);
-    const [hookError, setHookError] = useState(null);
-    const [agentId, setAgentId] = useState(agentName);
-    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
-    const agentBaseUrl = useExampleAgentRuntimesUrl();
-    const chatAuthToken = token === null ? undefined : token;
-    const authFetch = useCallback((url, opts = {}) => fetch(url, {
-        ...opts,
-        headers: {
-            'Content-Type': 'application/json',
-            ...(token ? { Authorization: `Bearer ${token}` } : {}),
-            ...(opts.headers ?? {}),
-        },
-    }), [token]);
-    useEffect(() => {
-        let isCancelled = false;
-        const createAgentForTarget = 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: 'Subagents example – multi-agent delegation with researcher and writer',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        memory: 'ephemeral',
-                        enable_skills: true,
-                        tools: [],
-                    }),
-                });
-                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 local agent: ${response.status}`);
-                    }
-                }
-                if (!isCancelled) {
-                    setAgentId(resolvedAgentId);
-                    setIsReconnectedAgent(isAlreadyRunning);
-                    setIsReady(true);
-                    setRuntimeStatus('ready');
-                }
-            }
-            catch (error) {
-                if (!isCancelled) {
-                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
-                    setRuntimeStatus('error');
-                }
-            }
-        };
-        void createAgentForTarget();
-        return () => {
-            isCancelled = true;
-        };
-    }, [agentBaseUrl, authFetch, runtimeTarget]);
-    if (!isReady && runtimeStatus !== 'error') {
-        return (_jsxs(Box, { sx: {
+/**
+ * The subagents the spec declares, each badged "Running" while a delegation
+ * to it is going, so the roster answers "who is working right now" without
+ * reading the active panel.
+ */
+const SubagentRoster = ({ subagents }) => {
+    const running = useAgentRuntimeRunningSubagentNames();
+    return (_jsx(Timeline, { children: subagents.map(sa => {
+            const isRunning = running.includes(sa.name);
+            return (_jsxs(Timeline.Item, { "data-subagent-roster": sa.name, "data-subagent-running": isRunning ? 'true' : undefined, children: [_jsx(Timeline.Badge, { children: _jsx(PersonIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { sx: { mb: 1, display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: sa.name }), isRunning ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), _jsx(Label, { variant: "accent", size: "small", children: "Running" })] })) : null] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: sa.description })] })] }, sa.name));
+        }) }));
+};
+const AgentSubagentsExample = () => {
+    const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
+    const subagents = useMemo(declaredSubagents, []);
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
+                height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                gap: 3,
                 bg: 'canvas.default',
-            }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Launching subagents example agent (", runtimeTarget, ")..."] })] }));
-    }
-    if (runtimeStatus === 'error' || hookError) {
-        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
-    }
-    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(PeopleIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Subagents Demo" }), isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsx(Label, { variant: "accent", children: runtimeTarget }), _jsxs(Label, { variant: "accent", children: [SUBAGENTS.length, " subagents"] })] }), _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: "Subagents Orchestrator", brandIcon: _jsx(PeopleIcon, { size: 16 }), placeholder: "Ask me to research a topic, write content, or both...", description: "Multi-agent delegation with researcher & writer", showHeader: true, kernelIndicatorPlacement: "right", autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
-                                {
-                                    title: 'Research & write',
-                                    message: 'Research the pros and cons of Python async patterns and write a summary.',
-                                },
-                                {
-                                    title: 'Research only',
-                                    message: 'Find recent advances in LLM fine-tuning and provide a detailed analysis.',
-                                },
-                                {
-                                    title: 'Write only',
-                                    message: 'Write a concise guide on REST API design best practices.',
-                                },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
-                            width: 320,
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'auto',
-                        }, children: [_jsx(ActiveSubagentPanel, {}), _jsxs(Box, { sx: {
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Available Subagents" }), _jsx(Timeline, { children: SUBAGENTS.map(sa => (_jsxs(Timeline.Item, { children: [_jsx(Timeline.Badge, { children: _jsx(PersonIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsx(Box, { sx: { mb: 1 }, children: _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: sa.name }) }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: sa.description })] })] }, sa.name))) })] }), _jsxs(Box, { sx: {
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Delegation Tools" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [
-                                            {
-                                                name: 'delegate_task',
-                                                desc: 'Run a named subagent on a task and return its answer',
-                                                icon: PeopleIcon,
-                                            },
-                                        ].map(tool => (_jsxs(Box, { sx: {
-                                                p: 2,
-                                                border: '1px solid',
-                                                borderColor: 'border.default',
-                                                borderRadius: 2,
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: 2,
-                                            }, children: [_jsx(tool.icon, { size: 14 }), _jsxs(Box, { children: [_jsx(Text, { sx: {
-                                                                fontSize: 1,
-                                                                fontWeight: 'bold',
-                                                                fontFamily: 'mono',
-                                                            }, children: tool.name }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 0 }, children: tool.desc })] })] }, tool.name))) })] }), _jsxs(Box, { sx: { p: 3 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "How It Works" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["The orchestrator agent delegates tasks to specialised subagents using the ", _jsx("code", { children: "delegate_task" }), " tool. Each subagent runs in an isolated child run with its own model and instructions."] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: "Token and request usage from each delegation is forwarded to the parent run, so budget limits stay accurate across delegation." })] })] })] })] }));
-};
-const AgentSubagentsExample = () => {
-    const { token, clearAuth } = useSimpleAuthStore();
-    const handleLogout = useCallback(() => {
-        clearAuth();
-    }, [clearAuth]);
-    if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
-    }
-    return (_jsx(ThemedProvider, { children: _jsx(AgentSubagentsInner, { onLogout: handleLogout }) }));
+            }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        px: 3,
+                        py: 2,
+                        borderBottom: '1px solid',
+                        borderColor: 'border.default',
+                        flexShrink: 0,
+                    }, children: [_jsx(PeopleIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Subagents Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [subagents.length, " subagent", subagents.length === 1 ? '' : 's'] })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", showAgentVariants: true, agentId: agentName, 
+                                // The chat alone: delegation is the point here, and a notebook
+                                // or a document beside it would only invite the wrong request.
+                                editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTSUB }) }), _jsxs(Box, { sx: {
+                                width: 320,
+                                borderLeft: '1px solid',
+                                borderColor: 'border.default',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                overflow: 'auto',
+                            }, children: [_jsx(ActiveSubagentPanel, {}), _jsxs(Box, { sx: {
+                                        p: 3,
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.default',
+                                    }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Available Subagents" }), _jsx(SubagentRoster, { subagents: subagents })] }), _jsxs(Box, { sx: {
+                                        p: 3,
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.default',
+                                    }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Delegation Tools" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [
+                                                {
+                                                    name: 'delegate_task',
+                                                    desc: 'Run a named subagent on a task and return its answer',
+                                                    icon: PeopleIcon,
+                                                },
+                                            ].map(tool => (_jsxs(Box, { sx: {
+                                                    p: 2,
+                                                    border: '1px solid',
+                                                    borderColor: 'border.default',
+                                                    borderRadius: 2,
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 2,
+                                                }, children: [_jsx(tool.icon, { size: 14 }), _jsxs(Box, { children: [_jsx(Text, { sx: {
+                                                                    fontSize: 1,
+                                                                    fontWeight: 'bold',
+                                                                    fontFamily: 'mono',
+                                                                }, children: tool.name }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 0 }, children: tool.desc })] })] }, tool.name))) })] }), _jsxs(Box, { sx: { p: 3 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "How It Works" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["The orchestrator agent delegates tasks to specialised subagents using the ", _jsx("code", { children: "delegate_task" }), " tool. Each subagent runs in an isolated child run with its own model and instructions."] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: "Token and request usage from each delegation is forwarded to the parent run, so budget limits stay accurate across delegation." })] })] })] })] }) }));
 };
 export default AgentSubagentsExample;

package/lib/examples/AgentToolApprovalsExample.js

@@ -8,13 +8,14 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 import { AuthRequiredView, ErrorView } from './components';
-import { Spinner, Text } from '@primer/react';
-import { CheckCircleIcon } from '@primer/octicons-react';
+import { Text } from '@primer/react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { waitForAgent } from './utils/waitForAgent';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { createAgentToolApprovalsPlugin } from '../loop/plugins/agent-tool-approvals';
 import { useAgentRuntimeApprovals } from '../stores/agentRuntimeStore';
 const queryClient = new QueryClient();
 const AGENT_NAME_PREFIX = 'tool-approval-example-agent';
@@ -64,18 +65,32 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
     const [selectedSpecId] = useState(() => getSelectedAgentspecIdFromUi());
     const [disableToolApprovals, setDisableToolApprovals] = useState(() => parseDisableToolApprovalsFromUi());
+    void setDisableToolApprovals;
     const agentName = useMemo(() => buildAgentNameForSpec(`${selectedSpecId}-${disableToolApprovals ? 'no-approvals' : 'approvals'}`), [selectedSpecId, disableToolApprovals]);
+    // The capacity for the choice: the Loop creates the agent from its
+    // blueprint, spec and approvals switch included.
+    const plugins = useMemo(() => [
+        createAgentToolApprovalsPlugin({
+            specId: selectedSpecId,
+            disableToolApprovals,
+        }),
+    ], [selectedSpecId, disableToolApprovals]);
     const [runtimeStatus, setRuntimeStatus] = useState('launching');
     const [isReady, setIsReady] = useState(false);
+    // Kept for the effect's bookkeeping; the Loop mounts regardless.
+    void isReady;
     const [hookError, setHookError] = useState(null);
     const [agentId, setAgentId] = useState(agentName);
     const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
     const chatAuthToken = token === null ? undefined : token;
+    void chatAuthToken;
     const agentBaseUrl = useExampleAgentRuntimesUrl();
-    const podName = 'localhost';
+    const runtimeName = 'localhost';
+    void runtimeName;
     const approvals = useAgentRuntimeApprovals();
     const pendingApprovalCount = useMemo(() => approvals.filter(approval => approval.status === 'pending' &&
         (!agentId || approval.agent_id === agentId)).length, [approvals, agentId]);
+    void pendingApprovalCount;
     const createAttemptedRef = useRef(false);
     useEffect(() => {
         createAttemptedRef.current = false;
@@ -94,58 +109,28 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
         }
         createAttemptedRef.current = true;
         let isCancelled = false;
+        const controller = new AbortController();
         const createLocalAgent = 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: 'Agent with runtime tool approvals',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: selectedSpecId,
-                        enable_skills: false,
-                        skills: [],
-                        tools: ['runtime-echo', 'runtime-sensitive-echo'],
-                        disableToolApprovals: disableToolApprovals,
-                    }),
+                // The Loop creates the agent from the capacity plugin's blueprint —
+                // spec, tools and the approvals switch included — as it mounts; the
+                // page waits until the server has it.
+                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 local 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) {
@@ -157,6 +142,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
         void createLocalAgent();
         return () => {
             isCancelled = true;
+            controller.abort();
         };
     }, [
         agentBaseUrl,
@@ -165,16 +151,6 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
         disableToolApprovals,
         selectedSpecId,
     ]);
-    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 tool approvals example agent..." })] }));
-    }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
@@ -188,39 +164,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
                     py: 1,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsx(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: `Tool Approval Agent - ${podName}`, brandIcon: _jsx(CheckCircleIcon, { size: 16 }), placeholder: "Ask for actions that require approval...", showHeader: true, kernelIndicatorPlacement: "right", showNewChatButton: true, showClearButton: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Pending: ", pendingApprovalCount] }), _jsxs("label", { style: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 6,
-                                        color: 'var(--fgColor-muted)',
-                                        fontSize: 12,
-                                        cursor: 'pointer',
-                                    }, children: [_jsx("input", { type: "checkbox", checked: disableToolApprovals, onChange: event => setDisableToolApprovals(event.currentTarget.checked) }), "Disable tool approvals"] })] }), suggestions: [
-                            {
-                                title: 'List your tools',
-                                message: 'list your tools',
-                            },
-                            {
-                                title: 'Sensitive tool with delegated allow',
-                                message: "Call the runtime_sensitive_echo tool with text 'hello' and reason 'audit', then explain the before_tool_execute decision and reply with the tool result.",
-                            },
-                            {
-                                title: 'Sensitive tool denied by Python hook',
-                                message: "Call the runtime_sensitive_echo tool with text 'danger' and reason 'delete project', then explain why it was denied.",
-                            },
-                            {
-                                title: 'Non-sensitive tool baseline',
-                                message: "Call the runtime_echo tool with text 'hello world', then reply with the tool result.",
-                            },
-                            {
-                                title: 'Inspect audit entries',
-                                message: 'Use execute_code to print the latest entries from /tmp/agent_runtimes_tool_approvals_audit.jsonl and summarize decision + execution status.',
-                            },
-                            {
-                                title: 'Explain deferred approvals hook',
-                                message: 'Explain how deferred_tool_calls resolves approval-required tool requests inline when a decision is already available.',
-                            },
-                        ], submitOnSuggestionClick: true }) }) })] }));
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsx(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: plugins }, agentName) }) })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('../state/substates').then(({ iamStore }) => {