@datalayer/agent-runtimes 1.0.18 → 1.0.20

package/lib/examples/AgentSubagentsExample.js

@@ -6,45 +6,66 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentSubagentsExample
  *
- * Demonstrates multi-agent delegation using subagents-pydantic-ai.
+ * 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.
  *
- * - Creates a local agent from the 'example-subagents' spec
+ * - 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
  */
 /// <reference types="vite/client" />
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { Text, Spinner, Heading, Label, Timeline } from '@primer/react';
-import { PeopleIcon, PersonIcon, CheckCircleFillIcon, ClockIcon, XCircleFillIcon, } from '@primer/octicons-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 { SubagentChatPanel } from '../chat/messages/ChatMessageList';
+import { useAgentRuntimeActiveSubagentToolCallId } from '../stores';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useRuntimeTargetStore } from './utils/runtimeTargetStore';
 const AGENT_NAME = 'subagents-example-agent';
 const AGENTSPEC_ID = 'example-subagents';
 const SUBAGENTS = [
     {
         name: 'researcher',
         description: 'Researches topics, gathers facts, and provides detailed analysis',
-        preferredMode: 'sync',
-        typicalComplexity: 'moderate',
-        canAskQuestions: true,
     },
     {
         name: 'writer',
         description: 'Writes clear, structured content based on research or instructions',
-        preferredMode: 'sync',
-        typicalComplexity: 'moderate',
-        canAskQuestions: false,
     },
 ];
+/** Fixed height (px) for the active-subagent chat viewport. */
+const ACTIVE_PANEL_HEIGHT = 280;
+/**
+ * Shows the currently active (running) subagent and its streamed messages.
+ * Falls back to a placeholder when no subagent is active.
+ */
+const ActiveSubagentPanel = () => {
+    const activeToolCallId = useAgentRuntimeActiveSubagentToolCallId();
+    return (_jsxs(Box, { sx: {
+            p: 3,
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+        }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Active Subagent" }), activeToolCallId ? (_jsx(SubagentChatPanel, { toolCallId: activeToolCallId, height: ACTIVE_PANEL_HEIGHT })) : (_jsx(Box, { sx: {
+                    height: ACTIVE_PANEL_HEIGHT,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    border: '1px solid',
+                    borderColor: 'border.muted',
+                    borderRadius: 2,
+                    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);
@@ -63,7 +84,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
     }), [token]);
     useEffect(() => {
         let isCancelled = false;
-        const createLocalAgent = async () => {
+        const createAgentForTarget = async () => {
             setRuntimeStatus('launching');
             setIsReady(false);
             setHookError(null);
@@ -77,6 +98,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
                         agent_spec_id: AGENTSPEC_ID,
+                        memory: 'ephemeral',
                         enable_skills: true,
                         tools: [],
                     }),
@@ -121,11 +143,11 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                 }
             }
         };
-        void createLocalAgent();
+        void createAgentForTarget();
         return () => {
             isCancelled = true;
         };
-    }, [agentBaseUrl, authFetch]);
+    }, [agentBaseUrl, authFetch, runtimeTarget]);
     if (!isReady && runtimeStatus !== 'error') {
         return (_jsxs(Box, { sx: {
                 display: 'flex',
@@ -134,7 +156,8 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                 justifyContent: 'center',
                 height: '100%',
                 gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching subagents example agent..." })] }));
+                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 });
@@ -143,6 +166,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
+            bg: 'canvas.default',
         }, children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
@@ -152,7 +176,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                     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" })), _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, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                }, 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.',
@@ -172,35 +196,20 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                             display: 'flex',
                             flexDirection: 'column',
                             overflow: 'auto',
-                        }, children: [_jsxs(Box, { sx: {
+                        }, 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 }), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [_jsx(Label, { size: "small", variant: "secondary", children: sa.preferredMode }), _jsx(Label, { size: "small", variant: "secondary", children: sa.typicalComplexity }), sa.canAskQuestions && (_jsx(Label, { size: "small", variant: "accent", children: "can ask questions" }))] })] })] }, sa.name))) })] }), _jsxs(Box, { sx: {
+                                }, 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: 'task',
-                                                desc: 'Assign a task to a subagent',
-                                                icon: ClockIcon,
-                                            },
-                                            {
-                                                name: 'check_task',
-                                                desc: 'Check status of a running task',
-                                                icon: CheckCircleFillIcon,
-                                            },
-                                            {
-                                                name: 'list_active_tasks',
-                                                desc: 'View all active delegated tasks',
+                                                name: 'delegate_task',
+                                                desc: 'Run a named subagent on a task and return its answer',
                                                 icon: PeopleIcon,
                                             },
-                                            {
-                                                name: 'soft_cancel_task',
-                                                desc: 'Gracefully cancel a task',
-                                                icon: XCircleFillIcon,
-                                            },
                                         ].map(tool => (_jsxs(Box, { sx: {
                                                 p: 2,
                                                 border: '1px solid',
@@ -213,7 +222,7 @@ const AgentSubagentsInner = ({ onLogout, }) => {
                                                                 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: "task" }), " tool. Each subagent runs independently with its own model, instructions, and context."] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: "Subagents can be configured with different execution modes (sync, async, auto), complexity hints, and question-asking capabilities for interactive workflows." })] })] })] })] }));
+                                                            }, 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();

package/lib/examples/AgentToolApprovalsExample.js

@@ -188,7 +188,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, 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: {
+                }, 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,

package/lib/examples/AgentTriggersExample.js

@@ -855,7 +855,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                 setActiveApproval(null);
                             }
                         }
-                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Trigger Agent", brandIcon: _jsx(ZapIcon, { size: 16 }), description: `View-only trigger output. Cron: ${cronExpr} | Webhook: ${webhookEnabled ? 'on' : 'off'} | Event: ${eventSubscribed ? eventTopic : 'none'}`, showHeader: true, autoFocus: false, height: "100%", runtimeId: agentId, showInput: true, disableInputPrompt: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true })) : (_jsx(Box, { sx: {
+                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Trigger Agent", brandIcon: _jsx(ZapIcon, { size: 16 }), description: `View-only trigger output. Cron: ${cronExpr} | Webhook: ${webhookEnabled ? 'on' : 'off'} | Event: ${eventSubscribed ? eventTopic : 'none'}`, showHeader: true, kernelIndicatorPlacement: "right", autoFocus: false, height: "100%", runtimeId: agentId, showInput: true, disableInputPrompt: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true })) : (_jsx(Box, { sx: {
                                     height: '100%',
                                     display: 'flex',
                                     alignItems: 'center',
@@ -900,7 +900,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                         borderBottom: '1px solid',
                                         borderColor: 'border.default',
                                     }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(ZapIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Once Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Launch a single streaming run for the once-trigger prompt and watch tool calls, tool results, and assistant text update in real time." }), _jsxs(Box, { sx: {
-                                                bg: 'canvas.subtle',
+                                                bg: 'canvas.default',
                                                 border: '1px solid',
                                                 borderColor: 'border.default',
                                                 borderRadius: 2,
@@ -1029,7 +1029,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                             : JSON.stringify(msg.content);
                                                         return (_jsxs(Box, { sx: {
                                                                 p: 2,
-                                                                bg: 'canvas.subtle',
+                                                                bg: 'canvas.default',
                                                                 borderRadius: 2,
                                                                 border: '1px solid',
                                                                 borderColor: 'border.default',
@@ -1183,7 +1183,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                             : JSON.stringify(msg.content);
                                                         return (_jsxs(Box, { sx: {
                                                                 p: 2,
-                                                                bg: 'canvas.subtle',
+                                                                bg: 'canvas.default',
                                                                 borderRadius: 2,
                                                                 border: '1px solid',
                                                                 borderColor: 'border.default',
@@ -1212,7 +1212,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                         : content })] }, `approval-msg-${msg.id}`));
                                                     }) }))] })), _jsxs(Box, { sx: { mt: 2, display: 'grid', gap: 2 }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Stream once (local curl)" }), _jsx(Box, { sx: {
                                                                 mt: 1,
-                                                                bg: 'canvas.subtle',
+                                                                bg: 'canvas.default',
                                                                 borderRadius: 2,
                                                                 p: 2,
                                                                 fontFamily: 'mono',
@@ -1227,7 +1227,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                         borderBottom: '1px solid',
                                         borderColor: 'border.default',
                                     }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(GlobeIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Webhook Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Generate a unique URL that triggers this agent on incoming HTTP POST requests. Useful for CI/CD pipelines, external services, or custom integrations." }), webhookUrl ? (_jsxs(_Fragment, { children: [_jsx(Label, { variant: webhookEnabled ? 'success' : 'secondary', sx: { mb: 2, display: 'inline-block' }, children: webhookEnabled ? 'Active' : 'Disabled' }), _jsx(Box, { sx: {
-                                                        bg: 'canvas.subtle',
+                                                        bg: 'canvas.default',
                                                         p: 2,
                                                         borderRadius: 2,
                                                         mb: 2,
@@ -1235,7 +1235,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                         fontSize: 0,
                                                         wordBreak: 'break-all',
                                                     }, children: webhookUrl }), webhookSecret && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: "Secret:" }), _jsx(Box, { sx: {
-                                                                bg: 'canvas.subtle',
+                                                                bg: 'canvas.default',
                                                                 p: 2,
                                                                 borderRadius: 2,
                                                                 mt: 1,
@@ -1258,12 +1258,10 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                 new Date(a.created_at).getTime())
                                                 .map((evt) => (_jsxs(Box, { sx: {
                                                     p: 2,
-                                                    bg: evt.read ? 'canvas.subtle' : 'accent.subtle',
+                                                    bg: evt.read ? 'canvas.default' : 'neutral.muted',
                                                     borderRadius: 2,
                                                     border: '1px solid',
-                                                    borderColor: evt.read
-                                                        ? 'border.default'
-                                                        : 'accent.muted',
+                                                    borderColor: 'border.default',
                                                 }, children: [_jsxs(Box, { sx: {
                                                             display: 'flex',
                                                             alignItems: 'center',

package/lib/examples/AgentspecsExample.js

@@ -22,7 +22,8 @@ import { ThemedProvider } from './utils/themedProvider';
 import { isSpecSelection, getSpecId, isCloudSpecSelection, getCloudSpecId, } from '../config/AgentConfiguration';
 import { MockFileBrowser, MainContent, Header } from './components';
 import { useChatStore } from '../stores';
-import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
+import { useExampleAgentRuntimes as useAgentRuntimes } from './hooks/useExampleAgentRuntimes';
+import { resolveExampleAgentRuntimesUrl, useExampleAgentRuntimesUrl, } from './utils/useExampleAgentRuntimesUrl';
 // Create a query client for React Query
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -68,7 +69,7 @@ function ChatWithJupyterStatus({ baseUrl, isConfigured, enableCodemode, useJupyt
 // Default configuration - use environment variable if available
 // Note: Vercel AI connects to Jupyter server (8888), other protocols connect to agent-runtimes server (8765)
 const DEFAULT_WS_URL = import.meta.env.VITE_ACP_WS_URL || 'ws://localhost:8765/api/v1/acp/ws';
-const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const DEFAULT_BASE_URL = resolveExampleAgentRuntimesUrl('local');
 const DEFAULT_AGENT_ID = 'example-agent';
 const DEFAULT_SYSTEM_PROMPT = 'You are a helpful AI assistant.';
 const RIGHT_PANE_WIDTH = {
@@ -297,15 +298,21 @@ githubClientId, kaggleToken, }) => {
     const enableSkills = selectedSkills.length > 0;
     const { configuration } = useCoreStore();
     const { token } = useSimpleAuthStore();
+    const localAgentRuntimesBaseUrl = useExampleAgentRuntimesUrl();
     const cloudCatalogBaseUrl = useMemo(() => {
         const configured = normalizeHttpUrl(configuration?.runtimesUrl);
-        const envConfigured = normalizeHttpUrl(import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL);
+        const resolvedCloudBaseUrl = normalizeHttpUrl(resolveExampleAgentRuntimesUrl('cloud'));
         if (configured && !isLocalhostUrl(configured)) {
             return configured;
         }
-        return envConfigured || 'https://r1.datalayer.run';
+        return resolvedCloudBaseUrl || DEFAULT_BASE_URL;
     }, [configuration?.runtimesUrl]);
     const isCloudMode = isCloudSpecSelection(selectedAgentId);
+    useEffect(() => {
+        if (!isCloudMode) {
+            setBaseUrl(localAgentRuntimesBaseUrl);
+        }
+    }, [isCloudMode, localAgentRuntimesBaseUrl]);
     const selectedSpec = selectedCloudSpec || selectedLibrarySpec;
     const cloudRuntimeCreationBaseUrl = useMemo(() => {
         if (!isCloudMode) {
@@ -342,7 +349,7 @@ githubClientId, kaggleToken, }) => {
     // Jupyter sandbox URL (used when useJupyterSandbox is true)
     // Can be configured via VITE_JUPYTER_SANDBOX_URL environment variable
     const jupyterSandboxUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL ||
-        'http://localhost:8888/api/jupyter-server?token=60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
+        'http://0.0.0.0:8888/api/jupyter-server?token=60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
     const handleSelectedServersChange = React.useCallback((newServers) => {
         const oldServers = selectedMcpServers;
         // Find added and removed servers
@@ -1036,6 +1043,7 @@ githubClientId, kaggleToken, }) => {
                                                     agentId: effectiveAgentId,
                                                     title: currentAgent?.name || agentName || 'AI Assistant',
                                                     brandIcon: _jsx(AgentIcon, { size: 16 }),
+                                                    kernelIndicatorPlacement: 'right',
                                                     autoConnect: true,
                                                     autoFocus: true,
                                                     placeholder: 'Type your message to the agent...',

package/lib/examples/CellExample.d.ts

@@ -0,0 +1,6 @@
+import { ServiceManager } from '@jupyterlab/services';
+type IJupyterCellExampleProps = {
+    serviceManager?: ServiceManager.IManager;
+};
+export declare const CellExample: (props: IJupyterCellExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default CellExample;

package/lib/examples/CellExample.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { getServiceManagerRuntimeEnvironmentDetails } from '../hooks/useAgentRuntimes';
+import { ThemedJupyterProvider } from './utils/themedProvider';
+import { Button, Heading, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+const CELL_ID = 'cell-example-1';
+const DEFAULT_SOURCE = `from IPython.display import display
+
+for i in range(10):
+    display('I am a long string which is repeatedly added to the dom in separated divs: %d' % i)`;
+const CellExampleContent = ({ serviceManager }) => {
+    const isLocalSandbox = useMemo(() => {
+        const rawBaseUrl = String(serviceManager?.serverSettings.baseUrl || '').trim();
+        if (!rawBaseUrl) {
+            return true;
+        }
+        try {
+            const parsed = new URL(rawBaseUrl);
+            return (parsed.hostname === 'localhost' ||
+                parsed.hostname === '127.0.0.1' ||
+                parsed.hostname === '0.0.0.0');
+        }
+        catch {
+            return true;
+        }
+    }, [serviceManager?.serverSettings.baseUrl]);
+    const { defaultKernel } = useJupyter({
+        serviceManager,
+        // Local mode: start a fresh kernel so the example always renders.
+        // Cloud mode: attach to the sandbox's already-running kernel.
+        startDefaultKernel: isLocalSandbox,
+        ...(isLocalSandbox ? {} : { useRunningKernelIndex: 0 }),
+    });
+    const activeKernel = defaultKernel;
+    const fallbackKernelEnvironmentName = useMemo(() => {
+        const rawBaseUrl = String(serviceManager?.serverSettings.baseUrl || '').trim();
+        if (!rawBaseUrl) {
+            return 'local-jupyter-server';
+        }
+        try {
+            const parsed = new URL(rawBaseUrl);
+            if (parsed.hostname === 'localhost' ||
+                parsed.hostname === '127.0.0.1' ||
+                parsed.hostname === '0.0.0.0') {
+                return 'local-jupyter-server';
+            }
+            return `${parsed.hostname} jupyter-server`;
+        }
+        catch {
+            return 'local-jupyter-server';
+        }
+    }, [serviceManager?.serverSettings.baseUrl]);
+    const runtimeEnvironment = useMemo(() => getServiceManagerRuntimeEnvironmentDetails(serviceManager), [serviceManager]);
+    const kernelEnvironmentName = runtimeEnvironment?.environmentTitle ||
+        runtimeEnvironment?.environmentName ||
+        fallbackKernelEnvironmentName;
+    // `Cell` creates its adapter once and does not re-wire when the `kernel`
+    // prop changes. Key the cell by the kernel/server identity so switching
+    // runtimes (e.g. local -> cloud) remounts it against the new kernel.
+    const cellRemountKey = useMemo(() => {
+        if (!activeKernel) {
+            return 'no-kernel';
+        }
+        const base = String(activeKernel.connection?.serverSettings?.baseUrl ||
+            serviceManager?.serverSettings.baseUrl ||
+            '');
+        return `${base}::${activeKernel.id}`;
+    }, [activeKernel, serviceManager?.serverSettings.baseUrl]);
+    const cellsStore = useCellsStore();
+    const kernelsStore = useKernelsStore();
+    return (_jsxs(Box, { p: 4, children: [_jsx(Heading, { as: "h1", sx: { fontSize: 3, mb: 3 }, children: "Cell Example" }), _jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: ['1fr', null, 'repeat(3, minmax(0, 1fr))'],
+                    gap: 3,
+                    mb: 3,
+                }, children: [_jsx(Box, { children: _jsxs(Text, { as: "p", sx: { mb: 0, wordBreak: 'break-word' }, children: ["Source: ", cellsStore.getSource(CELL_ID)] }) }), _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { mb: 2 }, children: ["Outputs Count: ", cellsStore.getOutputsCount(CELL_ID)] }), _jsxs(Box, { sx: { mb: 2 }, children: ["Kernel State:", ' ', _jsx(Label, { children: activeKernel && kernelsStore.getExecutionState(activeKernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase:", ' ', _jsx(Label, { children: activeKernel && kernelsStore.getExecutionPhase(activeKernel.id) })] })] }), _jsxs(Box, { children: [_jsx(Button, { sx: { mb: 3 }, onClick: () => cellsStore.execute(CELL_ID), disabled: !activeKernel, children: "Run Cell" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 3 }, children: [_jsx(Box, { children: "Code Sandbox:" }), _jsx(KernelIndicator, { kernel: activeKernel && activeKernel.connection, environmentName: kernelEnvironmentName, cpu: runtimeEnvironment?.cpu, memory: runtimeEnvironment?.memory, gpu: runtimeEnvironment?.gpu, bordered: false, position: "bottom-left" })] }), !activeKernel && (_jsx(Text, { as: "p", sx: { mb: 0, color: 'fg.muted' }, children: "Waiting for an existing sandbox kernel connection." }))] })] }), activeKernel ? (_jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID, kernel: activeKernel }, cellRemountKey)) : null] }));
+};
+export const CellExample = (props) => {
+    const { serviceManager } = props;
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(CellExampleContent, { serviceManager: serviceManager }) }));
+};
+export default CellExample;

package/lib/examples/ChatCustomExample.js

@@ -95,7 +95,7 @@ Be concise, helpful, and provide working code examples when appropriate.`,
                                         textDecoration: 'underline',
                                         border: 'none',
                                         background: 'none',
-                                    }, children: "Retry" })] })) : agentId ? (_jsx(Chat, { protocol: "ag-ui", agentId: agentId, showModelSelector: true, showToolsMenu: true, height: "100%", suggestions: [
+                                    }, children: "Retry" })] })) : agentId ? (_jsx(Chat, { kernelIndicatorPlacement: "right", protocol: "ag-ui", agentId: agentId, showModelSelector: true, showToolsMenu: true, height: "100%", suggestions: [
                                 {
                                     title: '👋 Say hello',
                                     message: 'Hello! What can you help me with today?',

package/lib/examples/ChatExample.js

@@ -57,7 +57,7 @@ const AgentRuntimeChatExample = () => {
         return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start agent", detail: error || 'No agent ID returned' }) }));
     }
     // Agent is ready — render the Chat component
-    return (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
+    return (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", 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: 'Hello',
                 message: 'Hello, what can you do?',

package/lib/examples/ChatStandaloneExample.js

@@ -114,14 +114,14 @@ const AgentRuntimePopupStandaloneExample = () => {
                                 marginBottom: 4,
                             }, children: "A standalone floating chat popup with props-based message handling. Click the chat button in the bottom-right corner to start!" }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
                                 marginBottom: 4,
                             }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Features" }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3 }, children: [_jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Props-based Handler" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Implement your own ", _jsx("code", { children: "onSendMessage" }), " function to connect to any AI backend"] })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Streaming Support" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Use the ", _jsx("code", { children: "onChunk" }), " callback for real-time streaming responses"] })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Full Customization" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Brand colors, icons, position, keyboard shortcuts, and more" })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "No Backend Required" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Unlike AG-UI examples, this works without a server (demo mode)" })] })] })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',

package/lib/examples/HomeExample.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@datalayer/primer-addons';
-import { Heading, Text, TextInput } from '@primer/react';
+import { Heading, Text, TextInput, Label } from '@primer/react';
 import { SearchIcon } from '@primer/octicons-react';
 const HomeExample = ({ examples = [], searchQuery = '', onSearchChange, onSelectExample, }) => {
     const sortedExamples = [...examples].sort((a, b) => a.title.localeCompare(b.title));
@@ -37,41 +37,42 @@ const HomeExample = ({ examples = [], searchQuery = '', onSearchChange, onSelect
                             'repeat(4, minmax(0, 1fr))',
                         ],
                         gap: 3,
-                    }, children: sortedExamples.map(example => (_jsxs(Box, { as: "button", onClick: () => onSelectExample?.(example.id), sx: {
-                            textAlign: 'left',
+                    }, children: sortedExamples.map(example => (_jsxs(Box, { role: "button", tabIndex: 0, onClick: () => onSelectExample?.(example.id), onKeyDown: event => {
+                            if (event.key === 'Enter' || event.key === ' ') {
+                                event.preventDefault();
+                                onSelectExample?.(example.id);
+                            }
+                        }, sx: {
+                            bg: 'canvas.default',
+                            p: 4,
+                            borderRadius: '12px',
                             border: '1px solid',
                             borderColor: 'border.default',
-                            borderRadius: 2,
-                            p: 3,
-                            bg: 'canvas.subtle',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 2,
                             cursor: 'pointer',
-                            transition: 'all 120ms ease-in-out',
-                            ':hover': {
+                            transition: 'box-shadow 0.2s, transform 0.2s, border-color 0.2s',
+                            '&:hover': {
+                                boxShadow: 'shadow.large',
                                 transform: 'translateY(-2px)',
                                 borderColor: 'accent.emphasis',
-                                boxShadow: 'shadow.medium',
-                                bg: 'canvas.default',
                             },
-                        }, children: [_jsx(Text, { sx: { fontWeight: 600, fontSize: 2, display: 'block' }, children: example.title }), _jsx(Text, { sx: {
-                                    color: 'fg.muted',
-                                    fontSize: 1,
-                                    display: 'block',
-                                    mt: 1,
-                                }, children: example.description }), _jsx(Text, { sx: {
+                            '&:focus-visible': {
+                                outline: '2px solid',
+                                outlineColor: 'accent.emphasis',
+                                outlineOffset: '2px',
+                            },
+                        }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'bold' }, children: example.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, lineHeight: 1.6 }, children: example.description }), _jsx(Text, { sx: {
                                     color: 'fg.muted',
                                     fontSize: 0,
-                                    display: 'block',
-                                    mt: 2,
                                     fontFamily: 'mono',
-                                }, children: example.id }), example.tags.length > 0 && (_jsx(Box, { sx: { mt: 2, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: example.tags.map(tag => (_jsx(Box, { sx: {
-                                        fontSize: 0,
-                                        px: 2,
-                                        py: '2px',
-                                        borderRadius: 999,
-                                        bg: 'canvas.inset',
-                                        color: 'fg.muted',
-                                        border: '1px solid',
-                                        borderColor: 'border.muted',
-                                    }, children: tag }, `${example.id}-${tag}`))) }))] }, example.id))) }))] }) }));
+                                }, children: example.id }), example.tags.length > 0 && (_jsx(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 1,
+                                    flexWrap: 'wrap',
+                                    mt: 'auto',
+                                    pt: 2,
+                                }, children: example.tags.map(tag => (_jsx(Label, { variant: "secondary", children: tag }, `${example.id}-${tag}`))) }))] }, example.id))) }))] }) }));
 };
 export default HomeExample;

package/lib/examples/Lexical2Example.js

@@ -187,7 +187,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
                             p: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            bg: 'canvas.subtle',
+                            bg: 'canvas.default',
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',
@@ -207,7 +207,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
                             display: 'flex',
                             overflow: 'hidden',
                             bg: 'canvas.default',
-                        }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _jsx(ChatFloating, { useStore: true, title: "AI Assistant", position: "bottom-right", width: 400, height: 550, defaultOpen: false, showNewChatButton: true, showClearButton: true, showSettingsButton: false, clickOutsideToClose: true, escapeToClose: true, enableKeyboardShortcuts: true, toggleShortcut: "/", buttonTooltip: "Open AI Assistant", showPoweredBy: true, poweredByProps: {
+                        }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _jsx(ChatFloating, { kernelIndicatorPlacement: "right", useStore: true, title: "AI Assistant", position: "bottom-right", width: 400, height: 550, defaultOpen: false, showNewChatButton: true, showClearButton: true, showSettingsButton: false, clickOutsideToClose: true, escapeToClose: true, enableKeyboardShortcuts: true, toggleShortcut: "/", buttonTooltip: "Open AI Assistant", showPoweredBy: true, poweredByProps: {
                     brandName: 'Datalayer',
                     brandUrl: 'https://datalayer.ai',
                 }, onOpen: () => {

package/lib/examples/LexicalAgentExample.js

@@ -245,7 +245,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), effectiveReady && (_jsx(ChatFloating, { protocol: "vercel-ai", endpoint: vercelAiEndpoint, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), effectiveReady && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "vercel-ai", endpoint: vercelAiEndpoint, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/LexicalAgentSidebarExample.js

@@ -181,13 +181,13 @@ export function ChatLexicalAgentExampleInner({ serviceManager, }) {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                    bg: 'canvas.subtle',
+                                    bg: 'canvas.default',
                                 }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Agent Runtime Lexical Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Next generation chat with Lexical editor integration (NO Provider!)" })] }), _jsx(Box, { sx: {
                                     flex: 1,
                                     display: 'flex',
                                     overflow: 'hidden',
                                     bg: 'canvas.default',
-                                }, children: _jsx(LexicalEditor, { serviceManager: serviceManager, endpoint: vercelAiEndpoint }) })] }), effectiveReady && (_jsx(ChatSidebar, { title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                                }, children: _jsx(LexicalEditor, { serviceManager: serviceManager, endpoint: vercelAiEndpoint }) })] }), effectiveReady && (_jsx(ChatSidebar, { kernelIndicatorPlacement: "right", title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
                             protocol: protocolConfig,
                             frontendTools: tools,
                             useStore: true,