@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/examples/AgentOutputsExample.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * AgentOutputsExample
  *
  * Demonstrates rich output rendering for agent responses. The agent (spec
- * `example-outputs`) is prompted to return exactly one of four output types per
+ * `example-output`) is prompted to return exactly one of four output types per
  * response:
  *   - TABLE  → GitHub-flavored Markdown table
  *   - JSON   → ```json fenced block
@@ -15,27 +15,29 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   - FILE   → fenced block whose info string is a file extension and
  *              whose first line is `# filename: <name.ext>`
  *
+ * The Loop creates the agent from the plugin's blueprint when it connects.
  * We subscribe to the chat store, detect the output type of the latest
  * assistant message, auto-switch the sidebar tab, and render the payload
  * inline in the sidebar.
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Button, Spinner, Heading, Label } from '@primer/react';
+import { Text, Button, Heading, Label } from '@primer/react';
 import { TableIcon, FileIcon, CodeIcon, GraphIcon, DownloadIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { AuthRequiredView, ErrorView } from './components';
+import { AuthRequiredView } from './components';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { AgentOutputsPlugin } from '../loop/plugins/agent-outputs';
 import { useChatStore } from '../stores/chatStore';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+const LOOP_PLUGINS_AGENTOUT = [AgentOutputsPlugin];
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'outputs-example-agent';
-const AGENTSPEC_ID = 'demo-outputs';
 // ─── Output detection ──────────────────────────────────────────────────────
 const FENCE_RE = /```([a-zA-Z0-9_+-]*)\n([\s\S]*?)```/g;
 const MD_TABLE_RE = /(^|\n)\s*\|[^\n]+\|\s*\n\s*\|[\s:|-]+\|\s*\n(\s*\|[^\n]+\|\s*\n?)+/;
@@ -273,89 +275,11 @@ const ChartView = ({ source }) => {
     return (_jsx(ReactECharts, { option: option, style: { height: 280, width: '100%' } }));
 };
 // ─── Inner component (rendered after auth) ─────────────────────────────────
-const AgentOutputsInner = ({ onLogout, }) => {
-    const { token } = useSimpleAuthStore();
+const AgentOutputsInner = () => {
+    // The Loop creates the agent from the plugin's blueprint when it connects;
+    // a fresh id per page load keeps each visit on its own agent.
     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 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: 'Agent with rich output rendering (table/JSON/chart/file)',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        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 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 createAgent();
-        return () => {
-            isCancelled = true;
-        };
-    }, [agentBaseUrl, agentName, authFetch]);
     const [activeTab, setActiveTab] = useState('table');
     const [detected, setDetected] = useState([]);
     const lastTextByIdRef = useRef(new Map());
@@ -392,22 +316,6 @@ const AgentOutputsInner = ({ onLogout, }) => {
         const unsub = useChatStore.subscribe(state => state.messages, process);
         return unsub;
     }, []);
-    // ── Loading / Error ───────────────────────────────────────────────────
-    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: runtimeStatus === 'launching'
-                        ? 'Launching outputs example agent...'
-                        : 'Creating outputs example agent...' })] }));
-    }
-    if (runtimeStatus === 'error' || hookError) {
-        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
-    }
     const filtered = detected.filter(d => d.tab === activeTab);
     const countByTab = (tab) => detected.filter(d => d.tab === tab).length;
     const download = (d) => {
@@ -425,12 +333,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
-        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
-                    px: 3,
-                    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: {
+        }, children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 2,
@@ -439,24 +342,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _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: "Outputs Demo Agent", brandIcon: _jsx(FileIcon, { size: 16 }), placeholder: "Ask for a Table, JSON, Chart, or File\u2026", description: `${detected.length} detected output${detected.length !== 1 ? 's' : ''}`, showHeader: true, kernelIndicatorPlacement: "right", showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
-                                {
-                                    title: 'Table',
-                                    message: 'Generate a Markdown table of the top 5 US cities by population, with columns City, State, Population.',
-                                },
-                                {
-                                    title: 'JSON',
-                                    message: 'Return a JSON object describing a fictitious product catalog with 3 items (id, name, price, tags).',
-                                },
-                                {
-                                    title: 'Chart',
-                                    message: 'Produce a bar chart ECharts spec (valid JSON, with `// chart` on the first line of the fenced block) showing monthly sales for Jan–Jun.',
-                                },
-                                {
-                                    title: 'File',
-                                    message: 'Create a downloadable CSV file with sample sales data for the last 7 days. Output it inside a ```csv fenced block whose first line is `# filename: sales.csv`.',
-                                },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                }, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _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: agentName, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTOUT }) }), _jsxs(Box, { sx: {
                             width: 420,
                             borderLeft: '1px solid',
                             borderColor: 'border.default',
@@ -484,7 +370,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
                                             borderColor: activeTab === t.key ? 'accent.fg' : 'transparent',
                                             fontWeight: activeTab === t.key ? 'bold' : 'normal',
                                         }, children: [t.label, n > 0 ? ` (${n})` : ''] }, t.key));
-                                }) }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Use one of the suggestion buttons in the chat to produce one \u2014 the side panel will switch to the matching tab automatically."] })) : (filtered.map((d, idx) => (_jsxs(Box, { sx: {
+                                }) }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Use one of the openers in the chat to produce one \u2014 the side panel will switch to the matching tab automatically."] })) : (filtered.map((d, idx) => (_jsxs(Box, { sx: {
                                             p: 2,
                                             mb: 2,
                                             border: '1px solid',
@@ -534,7 +420,7 @@ const syncTokenToIamStore = (token) => {
 };
 // ─── Main component with auth gate ─────────────────────────────────────────
 const AgentOutputsExample = () => {
-    const { token, clearAuth } = useSimpleAuthStore();
+    const { token } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -542,16 +428,9 @@ const AgentOutputsExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleLogout = useCallback(() => {
-        clearAuth();
-        hasSynced.current = false;
-        import('../state/substates').then(({ iamStore }) => {
-            iamStore.setState({ token: undefined });
-        });
-    }, [clearAuth]);
     if (!token) {
         return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentOutputsInner, { onLogout: handleLogout }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentOutputsInner, {}) }) }));
 };
 export default AgentOutputsExample;

package/lib/examples/AgentParametersExample.js

@@ -6,15 +6,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useMemo, useState } from 'react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { Button, Heading, Label, Spinner, Text } from '@primer/react';
-import { FileIcon } from '@primer/octicons-react';
 import validator from '@rjsf/validator-ajv8';
 import { Form, yamlSchemaToJsonSchema } from '@datalayer/primer-rjsf';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 import { ErrorView } from './components';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { AgentParametersPlugin } from '../loop/plugins/agent-parameters';
+const LOOP_PLUGINS_AGENTPAR = [AgentParametersPlugin];
 setupPrimerPortals();
 const AGENTSPEC_ID = 'example-parameters';
 const AGENT_NAME = 'parameters-demo';
@@ -103,7 +103,6 @@ function hasRequiredValues(schema, formData) {
     });
 }
 const AgentParametersExample = () => {
-    const baseUrl = useExampleAgentRuntimesUrl();
     const [agentName] = useState(() => uniqueAgentId(AGENT_NAME));
     const [showSchemaForm, setShowSchemaForm] = useState(false);
     const [isSchemaLoading, setIsSchemaLoading] = useState(false);
@@ -112,13 +111,13 @@ const AgentParametersExample = () => {
     const [isCreating, setIsCreating] = useState(false);
     const [error, setError] = useState(null);
     const [formTouched, setFormTouched] = useState(false);
-    const { agentId, error: runtimeError, createAgent, } = useExampleAgentRuntime({
+    const { agentId, error: runtimeError, createAgent, baseUrl, } = useExampleAgentRuntime({
         exampleId: 'AgentParametersExample',
         agentName,
         specId: AGENTSPEC_ID,
         autoCreateAgent: false,
         agentConfig: {
-            protocol: 'vercel-ai',
+            protocol: 'ag-ui',
             agentSpecId: AGENTSPEC_ID,
         },
     });
@@ -161,7 +160,7 @@ const AgentParametersExample = () => {
         try {
             await createAgent({
                 name: agentName,
-                protocol: 'vercel-ai',
+                protocol: 'ag-ui',
                 agentSpecId: AGENTSPEC_ID,
                 createPayload: {
                     agent_parameters: formData,
@@ -222,15 +221,6 @@ const AgentParametersExample = () => {
                                 event?.stopPropagation();
                             }, noHtml5Validate: true }) })), _jsx(Button, { variant: "primary", size: "small", type: "button", onClick: launchAgent, disabled: !canLaunch || isCreating, sx: { width: '100%' }, children: isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Launching..."] })) : ('Launch Agent') }), schema && formTouched && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Parameters are sent as agent_parameters in the create-agent request." })), effectiveError && (_jsx(ErrorView, { error: "Launch failed", detail: effectiveError }))] }) }));
     }
-    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, title: `Parameterized Agent: ${String(formData.project ?? 'Project')}`, brandIcon: _jsx(FileIcon, { size: 16 }), placeholder: "Ask something about your configured project...", description: `Role: ${String(formData.role ?? 'n/a')} · Tone: ${String(formData.tone ?? 'n/a')}`, showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
-            {
-                title: 'Print demo_params',
-                message: 'Use execute_code to print(demo_params) from the sandbox, then explain what it is.',
-            },
-            {
-                title: 'Inspect demo_params',
-                message: "Use execute_code to print('demo_params =', demo_params) and confirm its type.",
-            },
-        ], submitOnSuggestionClick: true }));
+    return (_jsx(LoopEmbed, { serverUrl: baseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTPAR }));
 };
 export default AgentParametersExample;

package/lib/examples/AgentSkillsExample.js

@@ -8,14 +8,16 @@ 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 { Button, Dialog, Heading, Label, Spinner, Text, Token as PrimerToken, } from '@primer/react';
+import { Button, Dialog, Heading, Label, Text, Token as PrimerToken, } from '@primer/react';
 import { BriefcaseIcon, FileIcon } from '@primer/octicons-react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { Chat } from '../chat';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
+import { LoopEmbed } from '../loop';
+import { AgentSkillsPlugin } from '../loop/plugins/agent-skills';
 import { useSkills, useSkillActions } from '../hooks';
+const LOOP_PLUGINS_AGENTSKI = [AgentSkillsPlugin];
 const queryClient = new QueryClient();
 const AGENT_NAME = 'skills-example-agent';
 const AGENTSPEC_ID = 'example-skills';
@@ -63,13 +65,20 @@ const SkillCard = ({ skill, onToggle, onToggleApproval }) => {
 const AgentSkillsInner = ({ onLogout }) => {
     const { token } = useSimpleAuthStore();
     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 { agentId = agentName, baseUrl: agentBaseUrl, status: runtimeStatus, isReady, error: hookError, } = useExampleAgentRuntime({
+        exampleId: 'AgentSkillsExample',
+        agentName,
+        specId: AGENTSPEC_ID,
+        agentConfig: {
+            description: 'Agent with skills example - module, package and file based skills',
+            protocol: 'ag-ui',
+            agentSpecId: AGENTSPEC_ID,
+            enableSkills: true,
+            tools: [],
+        },
+    });
     const chatAuthToken = token === null ? undefined : token;
+    void chatAuthToken;
     // WS-sourced skills (reads from codemodeStatus pushed via monitoring WS)
     const skillsQuery = useSkills(isReady);
     const skills = useMemo(() => skillsQuery.data?.skills ?? [], [skillsQuery.data]);
@@ -95,157 +104,34 @@ const AgentSkillsInner = ({ onLogout }) => {
     const fileBasedSkills = skills.filter(s => s.source_variant === 'path');
     const packageBasedSkills = skills.filter(s => s.source_variant === 'package');
     const moduleBasedSkills = skills.filter(s => s.source_variant === 'module');
-    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 createAgent = async () => {
-            setRuntimeStatus('launching');
-            setIsReady(false);
-            setHookError(null);
-            setIsReconnectedAgent(false);
-            try {
-                // Create local agent runtime using the example-full spec.
-                // The spec contains module-based, package-based and file-based skills.
-                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        name: agentName,
-                        description: 'Agent with skills example - module, package and file based skills',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        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 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 createAgent();
-        return () => {
-            isCancelled = true;
-        };
-    }, [agentBaseUrl, agentName, authFetch]);
-    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 skills example agent..." })] }));
-    }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    return (_jsxs(Box, { sx: {
+    return (_jsx(Box, { sx: {
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
-        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
-                    px: 3,
-                    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: `Skills Demo Agent`, brandIcon: _jsx(BriefcaseIcon, { size: 16 }), placeholder: "Ask the agent to use its skills...", showHeader: true, kernelIndicatorPlacement: "right", showNewChatButton: true, showClearButton: true, showTokenUsage: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Skills: ", skills.length] }) }), suggestions: [
-                                {
-                                    title: 'List available skills',
-                                    message: 'List all your available skills and what they can do.',
-                                },
-                                {
-                                    title: '👤 Who am I',
-                                    message: 'Use the datalayer-whoami skill to tell me who I am, including my user identity and available context.',
-                                },
-                                {
-                                    title: '🌐 Crawl a webpage',
-                                    message: 'Use the crawl skill to fetch the content of https://datalayer.ai and summarize it.',
-                                },
-                                {
-                                    title: '📅 Generate an event',
-                                    message: 'Use the events skill to create a new event named "team-sync" with status "pending" and describe it.',
-                                },
-                                {
-                                    title: '🐙 GitHub repos',
-                                    message: 'Use the GitHub skill to show two sections: first, the top 3 recently updated public repositories from the datalayer organization; second, my top 3 recently updated private repositories. Keep the output clear and concise.',
-                                },
-                                {
-                                    title: '📄 Read a PDF',
-                                    message: 'Use the PDF skill to extract the text from a PDF file at /tmp/sample.pdf and show me the first 200 characters.',
-                                },
-                                {
-                                    title: '📝 Summarize text',
-                                    message: 'Use the text summarizer skill to summarize the following: "Artificial intelligence has transformed many industries. Machine learning enables computers to learn from data. Natural language processing allows machines to understand human language. Computer vision gives machines the ability to interpret images. These technologies are reshaping healthcare, finance, education, and transportation."',
-                                },
-                                {
-                                    title: '😄 Tell me a joke',
-                                    message: 'Use the jokes skill to tell me a random joke.',
-                                },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
-                            width: 320,
-                            minWidth: 280,
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            minHeight: 0,
-                            bg: 'canvas.default',
-                        }, children: [_jsxs(Box, { sx: {
-                                    p: 2,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(BriefcaseIcon, { size: 16 }), "Agent Skills"] }) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [skills.length, " skill", skills.length !== 1 ? 's' : '', " \u00B7", ' ', skills.filter(s => s.status === 'loaded').length, " loaded \u00B7", ' ', skills.filter(s => s.approved).length, " approved"] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: [fileBasedSkills.length, " file-based \u00B7", ' ', packageBasedSkills.length, " package-based \u00B7", ' ', moduleBasedSkills.length, " module-based"] })] }), _jsxs(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: [skills.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for skills snapshot..." })) : (skills.map(skill => (_jsx(SkillCard, { skill: skill, onToggle: toggleSkill, onToggleApproval: toggleSkillApproval }, skill.id)))), _jsxs(Box, { sx: {
-                                            mt: 3,
-                                            p: 2,
-                                            borderRadius: 2,
-                                            bg: 'canvas.default',
-                                            border: '1px solid',
-                                            borderColor: 'border.muted',
-                                        }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "Skill Statuses" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "secondary", children: "available" }), _jsx(Text, { children: "In catalog, not yet enabled" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "attention", children: "enabled" }), _jsx(Text, { children: "Enabled, loading pending" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Label, { size: "small", variant: "success", children: "loaded" }), _jsx(Text, { children: "SKILL.md loaded, in system prompt" })] })] })] })] })] })] })] }));
+        }, children: _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: LOOP_PLUGINS_AGENTSKI }) }), _jsxs(Box, { sx: {
+                        width: 320,
+                        minWidth: 280,
+                        borderLeft: '1px solid',
+                        borderColor: 'border.default',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minHeight: 0,
+                        bg: 'canvas.default',
+                    }, children: [_jsxs(Box, { sx: {
+                                p: 2,
+                                borderBottom: '1px solid',
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(BriefcaseIcon, { size: 16 }), "Agent Skills"] }) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [skills.length, " skill", skills.length !== 1 ? 's' : '', " \u00B7", ' ', skills.filter(s => s.status === 'loaded').length, " loaded \u00B7", ' ', skills.filter(s => s.approved).length, " approved"] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: [fileBasedSkills.length, " file-based \u00B7", ' ', packageBasedSkills.length, " package-based \u00B7", ' ', moduleBasedSkills.length, " module-based"] })] }), _jsxs(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: [skills.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for skills snapshot..." })) : (skills.map(skill => (_jsx(SkillCard, { skill: skill, onToggle: toggleSkill, onToggleApproval: toggleSkillApproval }, skill.id)))), _jsxs(Box, { sx: {
+                                        mt: 3,
+                                        p: 2,
+                                        borderRadius: 2,
+                                        bg: 'canvas.default',
+                                        border: '1px solid',
+                                        borderColor: 'border.muted',
+                                    }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "Skill Statuses" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "secondary", children: "available" }), _jsx(Text, { children: "In catalog, not yet enabled" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "attention", children: "enabled" }), _jsx(Text, { children: "Enabled, loading pending" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Label, { size: "small", variant: "success", children: "loaded" }), _jsx(Text, { children: "SKILL.md loaded, in system prompt" })] })] })] })] })] })] }) }));
 };
 const syncTokenToIamStore = (token) => {
     import('../state/substates').then(({ iamStore }) => {

package/lib/examples/AgentSubagentsExample.d.ts

@@ -1,13 +1,14 @@
 /**
  * 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
  */
 import React from 'react';
 declare const AgentSubagentsExample: React.FC;