@datalayer/agent-runtimes 1.0.5 → 1.0.6

package/lib/examples/AgentMonitoringExample.js

@@ -34,8 +34,8 @@ import { useCoreStore } from '@datalayer/core/lib/state';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
-const AGENT_NAME = 'monitoring-demo-agent';
-const AGENT_SPEC_ID = 'demo-monitoring';
+const AGENT_NAME = 'monitoring-example-agent';
+const AGENT_SPEC_ID = 'example-monitoring';
 const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL;
 const DATALAYER_RUN_URL_ENV = import.meta.env.DATALAYER_RUN_URL;
@@ -87,7 +87,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                     method: 'POST',
                     body: JSON.stringify({
                         name: agentName,
-                        description: 'MCP monitoring demo – web crawling via Tavily with live cost/token metrics',
+                        description: 'MCP monitoring example – web crawling via Tavily with live cost/token metrics',
                         agent_library: 'pydantic-ai',
                         transport: 'vercel-ai',
                         agent_spec_id: AGENT_SPEC_ID,
@@ -215,7 +215,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                 justifyContent: 'center',
                 height: '100vh',
                 gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local monitoring demo agent..." })] }));
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local monitoring example agent..." })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
@@ -267,7 +267,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                                     fontSize: 0,
                                                     mt: 1,
                                                     display: 'block',
-                                                }, children: ["Last close: ", monitorSocket.lastClose.detail] }))] }))] })] }), _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Monitoring Agent", placeholder: "Ask for cost, token usage, and turn-level monitoring insights...", description: `${alerts.length} active alert${alerts.length !== 1 ? 's' : ''}`, showHeader: true, showTokenUsage: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                                }, children: ["Last close: ", monitorSocket.lastClose.detail] }))] }))] })] }), _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Monitoring Agent", brandIcon: _jsx(GraphIcon, { size: 16 }), placeholder: "Ask for cost, token usage, and turn-level monitoring insights...", description: `${alerts.length} active alert${alerts.length !== 1 ? 's' : ''}`, showHeader: true, showTokenUsage: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: '▶ No-tool turn',
                                     message: 'Briefly introduce yourself without calling any tool or skill — produces a linear Start → Model → Decision → End graph.',

package/lib/examples/AgentNotificationsExample.d.ts

@@ -4,8 +4,7 @@
  * Demonstrates notification channels for agents: in-app toasts, email digests,
  * Slack webhook integrations, and notification preference management.
  *
- * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
- *   Runtimes API and deploys an agent on its sidecar
+ * - Creates a local agent-runtimes agent using the `example-notifications` spec
  * - Shows a notification center alongside the chat where users can configure
  *   channels and review recent notifications
  */

package/lib/examples/AgentNotificationsExample.js

@@ -9,8 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Demonstrates notification channels for agents: in-app toasts, email digests,
  * Slack webhook integrations, and notification preference management.
  *
- * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
- *   Runtimes API and deploys an agent on its sidecar
+ * - Creates a local agent-runtimes agent using the `example-notifications` spec
  * - Shows a notification center alongside the chat where users can configure
  *   channels and review recent notifications
  */
@@ -23,13 +22,13 @@ import { Box } from '@datalayer/primer-addons';
 import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
-import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
-const AGENT_NAME = 'notification-demo-agent';
-const AGENT_SPEC_ID = 'monitor-sales-kpis';
+const AGENT_NAME = 'notification-example-agent';
+const AGENT_SPEC_ID = 'example-notifications';
 const alertVariant = (severity) => {
     if (severity === 'critical')
         return 'danger';
@@ -41,16 +40,11 @@ const alertVariant = (severity) => {
 const AgentNotificationsInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
-    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgentRuntimes({
-        agentSpecId: AGENT_SPEC_ID,
-        autoStart: true,
-        agentConfig: {
-            name: agentName,
-            model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0',
-            protocol: 'vercel-ai',
-            description: 'Agent with multi-channel notification support',
-        },
-    });
+    const agentBaseUrl = useExampleAgentRuntimesUrl();
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(agentName);
     const [notifications, setNotifications] = useState([]);
     const [channels, setChannels] = useState([
         { channel: 'in-app', enabled: true },
@@ -60,9 +54,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
     const [editTargets, setEditTargets] = useState({});
     const [isSaving, setIsSaving] = useState(false);
     const [flash, setFlash] = useState(null);
-    const agentBaseUrl = runtime?.agentBaseUrl || '';
-    const agentId = runtime?.agentId || AGENT_NAME;
-    const podName = runtime?.podName || '(launching…)';
+    const podName = isReady ? `local:${agentId}` : '(launching…)';
     // Authenticated fetch helper
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -72,6 +64,65 @@ const AgentNotificationsInner = ({ onLogout, }) => {
             ...(opts.headers ?? {}),
         },
     }), [token]);
+    useEffect(() => {
+        let isCancelled = false;
+        const createLocalAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            try {
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'Agent with multi-channel notification support',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        enable_skills: true,
+                        tools: [],
+                    }),
+                });
+                let resolvedAgentId = agentName;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || agentName;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const data = await response.json().catch(() => null);
+                        detail =
+                            (typeof data?.detail === 'string' && data.detail) ||
+                                (typeof data?.message === 'string' && data.message) ||
+                                '';
+                    }
+                    else {
+                        detail = await response.text();
+                    }
+                    if (!(response.status === 409 || /already exists/i.test(detail))) {
+                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
+                    }
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createLocalAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, agentName, authFetch]);
     // ── Poll notifications ────────────────────────────────────────────────
     useEffect(() => {
         if (!isReady || !agentBaseUrl)
@@ -164,9 +215,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                 justifyContent: 'center',
                 height: '100vh',
                 gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
-                        ? 'Launching runtime for notification agent…'
-                        : 'Creating notification demo agent…' })] }));
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local notification agent\u2026" })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
@@ -201,7 +250,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(BellIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Notifications \u2014 ", podName] }), unreadCount > 0 && (_jsxs(Label, { variant: "accent", size: "small", children: [unreadCount, " unread"] }))] }), _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, title: "Notification Agent", placeholder: "Ask the agent to send you notifications\u2026", description: `${unreadCount} unread notification${unreadCount !== 1 ? 's' : ''}`, showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                }, children: [_jsx(BellIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Notifications \u2014 ", podName] }), unreadCount > 0 && (_jsxs(Label, { variant: "accent", size: "small", children: [unreadCount, " unread"] }))] }), _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, title: "Notification Agent", brandIcon: _jsx(BellIcon, { size: 16 }), placeholder: "Ask the agent to send you notifications\u2026", description: `${unreadCount} unread notification${unreadCount !== 1 ? 's' : ''}`, showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'Alert me',
                                     message: 'Notify me when KPIs drop below threshold',

package/lib/examples/AgentOtelExample.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 /// <reference types="vite/client" />
 import { useState, useEffect, useCallback, useRef, useMemo, } from 'react';
-import { Text, Button, Select, FormControl } from '@primer/react';
+import { Text, Button, Spinner } from '@primer/react';
 import { TelescopeIcon, PlugIcon, XIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { OtelHeader, DashboardView, SqlView, SystemView, useSimpleAuthStore, } from '@datalayer/core/lib/views/otel';
@@ -32,7 +32,6 @@ import { useCoreStore } from '@datalayer/core';
 import { ThemedProvider } from './utils/themedProvider';
 import { AuthRequiredView } from './components';
 import { ChatSidebar } from '../chat';
-import { DEFAULT_MODEL } from '../specs';
 // ─── Environment / defaults ────────────────────────────────────────────────
 const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL ?? '';
 const DATALAYER_RUN_URL_ENV = import.meta.env.VITE_DATALAYER_RUN_URL ?? '';
@@ -43,69 +42,62 @@ const DATALAYER_RUN_URL_ENV = import.meta.env.VITE_DATALAYER_RUN_URL ?? '';
 const AGENT_BASE_URL_ENV = import.meta.env.VITE_BASE_URL || '';
 const DEFAULT_AGENT_PROTOCOL = 'vercel-ai';
 const DEFAULT_AGENT_LIBRARY = 'pydantic-ai';
+/** Spec id this example always launches. */
+const AGENT_SPEC_ID = 'example-otel';
 /**
  * Small form for picking an agent spec and launching it.
  * Renders as the `children` of the ChatSidebar so it appears above the chat.
  */
-const AgentSelectorPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, connectedAgentName, }) => {
-    const [specs, setSpecs] = useState([]);
-    const [selectedSpecId, setSelectedSpecId] = useState('');
+const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, connectedAgentName, }) => {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    // Fetch library specs on mount
-    useEffect(() => {
-        const load = async () => {
-            try {
-                const res = await fetch(`${baseUrl}/api/v1/agents/library`);
-                if (!res.ok)
-                    throw new Error(`HTTP ${res.status}`);
-                const data = await res.json();
-                setSpecs(data);
-                if (data.length > 0)
-                    setSelectedSpecId(data[0].id);
-            }
-            catch (e) {
-                setError('Could not load agent specs from the backend.');
-                console.warn('[AgentOtelExample] Failed to load library specs:', e);
-            }
-        };
-        void load();
-    }, [baseUrl]);
+    const launchedRef = useRef(false);
     const handleLaunch = useCallback(async () => {
-        if (!selectedSpecId)
-            return;
         setLoading(true);
         setError(null);
         try {
-            const spec = specs.find(s => s.id === selectedSpecId);
-            const transport = spec?.transport ?? DEFAULT_AGENT_PROTOCOL;
+            const transport = DEFAULT_AGENT_PROTOCOL;
             const res = await fetch(`${baseUrl}/api/v1/agents`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    name: selectedSpecId,
+                    name: AGENT_SPEC_ID,
                     description: `Launched from AgentOtelExample`,
                     agent_library: DEFAULT_AGENT_LIBRARY,
                     transport,
-                    model: DEFAULT_MODEL,
-                    system_prompt: 'You are a helpful AI assistant observing OTEL telemetry data.',
-                    agent_spec_id: selectedSpecId,
+                    agent_spec_id: AGENT_SPEC_ID,
                 }),
             });
             if (!res.ok) {
                 const err = await res.json().catch(() => ({ detail: 'Unknown error' }));
-                throw new Error(err.detail || `Failed to create agent: ${res.status}`);
+                const detail = typeof err?.detail === 'string' ? err.detail : 'Unknown error';
+                // Reuse existing agent when backend reports duplicate creation.
+                if (res.status === 409 || /already exists/i.test(detail)) {
+                    const idMatch = detail.match(/Agent with ID '([^']+)' already exists/i);
+                    const existingId = idMatch?.[1] || AGENT_SPEC_ID;
+                    onConnected(existingId, transport);
+                    return;
+                }
+                throw new Error(detail || `Failed to create agent: ${res.status}`);
             }
             const data = await res.json();
             onConnected(data.id, transport);
         }
         catch (e) {
             setError(e instanceof Error ? e.message : 'Failed to launch agent');
+            console.warn('[AgentOtelExample] Failed to launch agent:', e);
         }
         finally {
             setLoading(false);
         }
-    }, [selectedSpecId, specs, baseUrl, onConnected]);
+    }, [baseUrl, onConnected]);
+    // Auto-launch the example-otel agent on mount.
+    useEffect(() => {
+        if (launchedRef.current || isConnected)
+            return;
+        launchedRef.current = true;
+        void handleLaunch();
+    }, [handleLaunch, isConnected]);
     if (isConnected) {
         return (_jsxs(Box, { sx: {
                 px: 3,
@@ -129,7 +121,7 @@ const AgentSelectorPanel = ({ baseUrl, onConnected, onDisconnected, isConnected,
             gap: 2,
             flexShrink: 0,
             bg: 'canvas.subtle',
-        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "SELECT AGENT" }), specs.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { visuallyHidden: true, children: "Agent spec" }), _jsx(Select, { value: selectedSpecId, onChange: e => setSelectedSpecId(e.target.value), block: true, size: "small", disabled: loading, children: specs.map(s => (_jsx(Select.Option, { value: s.id, children: s.name ?? s.id }, s.id))) })] }), _jsx(Button, { variant: "primary", size: "small", onClick: handleLaunch, disabled: loading || !selectedSpecId, leadingVisual: PlugIcon, sx: { width: '100%' }, children: loading ? 'Launching…' : 'Launch Agent' })] })) : error ? (_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading specs\u2026" })), error && specs.length > 0 && (_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }))] }));
+        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "AGENT" }), loading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENT_SPEC_ID, "\u2026"] })] })) : error ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }), _jsx(Button, { variant: "primary", size: "small", onClick: handleLaunch, leadingVisual: PlugIcon, sx: { width: '100%' }, children: "Retry" })] })) : (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENT_SPEC_ID, "\u2026"] }))] }));
 };
 const TAB_SX = (active) => ({
     px: 3,
@@ -142,7 +134,7 @@ const TAB_SX = (active) => ({
     borderColor: active ? 'accent.fg' : 'transparent',
     '&:hover': { color: 'fg.default' },
 });
-const AgentOtelExampleInner = ({ token, onSignOut }) => {
+const AgentOtelExampleInner = ({ token }) => {
     const { configuration } = useCoreStore();
     const resolvedRunUrl = configuration?.otelRunUrl ||
         configuration?.runUrl ||
@@ -220,7 +212,7 @@ const AgentOtelExampleInner = ({ token, onSignOut }) => {
             overflow: 'hidden',
             bg: 'canvas.default',
             color: 'fg.default',
-        }, children: [_jsx(OtelHeader, { baseUrl: otelBaseUrl, token: token, onNavigate: handleNavigate, onSignOut: onSignOut, showGenerateButtons: false, trailing: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: otelBaseUrl })] }) }), _jsxs(Box, { sx: {
+        }, children: [_jsx(OtelHeader, { baseUrl: otelBaseUrl, token: token, onNavigate: handleNavigate, showGenerateButtons: true, showAccountControls: false, trailing: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: otelBaseUrl })] }) }), _jsxs(Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     minHeight: 0,
@@ -267,14 +259,13 @@ const AgentOtelExampleInner = ({ token, onSignOut }) => {
                                     },
                                 ],
                             }
-                            : { useStore: true }, children: _jsx(AgentSelectorPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }) })] })] }));
+                            : { useStore: true }, children: _jsx(AgentLaunchPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }) })] })] }));
 };
 /**
  * AgentOtelExample – themed root with auth gate.
  */
 const AgentOtelExample = () => {
     const token = useSimpleAuthStore(s => s.token);
-    const clearAuth = useSimpleAuthStore(s => s.clearAuth);
-    return (_jsx(ThemedProvider, { children: !token ? (_jsx(AuthRequiredView, {})) : (_jsx(AgentOtelExampleInner, { token: token, onSignOut: clearAuth })) }));
+    return (_jsx(ThemedProvider, { children: !token ? _jsx(AuthRequiredView, {}) : _jsx(AgentOtelExampleInner, { token: token }) }));
 };
 export default AgentOtelExample;

package/lib/examples/AgentOutputsExample.d.ts

@@ -2,7 +2,7 @@
  * AgentOutputsExample
  *
  * Demonstrates rich output rendering for agent responses. The agent (spec
- * `demo-outputs`) is prompted to return exactly one of four output types per
+ * `example-outputs`) is prompted to return exactly one of four output types per
  * response:
  *   - TABLE  → GitHub-flavored Markdown table
  *   - JSON   → ```json fenced block

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
- * `demo-outputs`) is prompted to return exactly one of four output types per
+ * `example-outputs`) is prompted to return exactly one of four output types per
  * response:
  *   - TABLE  → GitHub-flavored Markdown table
  *   - JSON   → ```json fenced block
@@ -33,12 +33,27 @@ import { Chat } from '../chat';
 import { useChatStore } from '../stores/chatStore';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
-const AGENT_NAME = 'outputs-demo-agent';
+const AGENT_NAME = 'outputs-example-agent';
 const AGENT_SPEC_ID = 'demo-outputs';
 const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 // ─── 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?)+/;
+/**
+ * Some agents emit a markdown table compressed onto a single logical line by
+ * joining row separators with `||`. Expand that form back to one row per line
+ * so the markdown table renderer can parse it. Idempotent: any pre-existing
+ * `|\n|` boundaries are unaffected.
+ */
+const expandCompactMarkdownTable = (text) => {
+    if (!text)
+        return text;
+    if (!/\|\s*[-:| ]{3,}\|/.test(text))
+        return text;
+    if (!text.includes('||'))
+        return text;
+    return text.replace(/\|\|/g, '|\n|');
+};
 const EXT_LIKE_INFOS = new Set([
     'csv',
     'tsv',
@@ -70,8 +85,28 @@ const detectOutput = (m) => {
     const match = FENCE_RE.exec(text);
     if (match) {
         const info = (match[1] || '').toLowerCase();
-        const body = match[2] ?? '';
+        const rawBody = match[2] ?? '';
+        const body = expandCompactMarkdownTable(rawBody);
         const firstLine = body.split('\n', 1)[0]?.trim() ?? '';
+        // Markdown fenced table should render in the table panel, not as a file.
+        if ((info === 'markdown' || info === 'md') && MD_TABLE_RE.test(body)) {
+            const tableMatch = body.match(MD_TABLE_RE);
+            return {
+                tab: 'table',
+                payload: tableMatch ? tableMatch[0].trim() : body.trim(),
+                messageId: m.id,
+            };
+        }
+        // Bare/unlabeled fence around a markdown table — route to Table tab too.
+        if ((!info || info === 'text' || info === 'plain') &&
+            MD_TABLE_RE.test(body)) {
+            const tableMatch = body.match(MD_TABLE_RE);
+            return {
+                tab: 'table',
+                payload: tableMatch ? tableMatch[0].trim() : body.trim(),
+                messageId: m.id,
+            };
+        }
         // Chart: ```json with `// chart` marker on first line.
         if (info === 'json' && /^\/\/\s*chart\b/i.test(firstLine)) {
             return {
@@ -137,11 +172,12 @@ const detectOutput = (m) => {
         }
     }
     // 2) Markdown table (no fences).
-    if (MD_TABLE_RE.test(text)) {
-        const tableMatch = text.match(MD_TABLE_RE);
+    const expandedText = expandCompactMarkdownTable(text.trim());
+    if (MD_TABLE_RE.test(expandedText)) {
+        const tableMatch = expandedText.match(MD_TABLE_RE);
         return {
             tab: 'table',
-            payload: tableMatch ? tableMatch[0].trim() : text,
+            payload: tableMatch ? tableMatch[0].trim() : expandedText,
             messageId: m.id,
         };
     }
@@ -150,7 +186,10 @@ const detectOutput = (m) => {
 // ─── Table renderer (parses the Markdown pipe syntax) ──────────────────────
 const MarkdownTable = ({ source }) => {
     const { headers, rows } = useMemo(() => {
-        const lines = source
+        // Some model responses compress table rows into one line using `||`.
+        // Normalize that form back to one table row per line.
+        const normalized = expandCompactMarkdownTable(source).trim();
+        const lines = normalized
             .split('\n')
             .map(l => l.trim())
             .filter(l => l.startsWith('|'));
@@ -175,6 +214,7 @@ const MarkdownTable = ({ source }) => {
     }
     return (_jsx(Box, { sx: { overflowX: 'auto' }, children: _jsxs(Box, { as: "table", sx: {
                 width: '100%',
+                tableLayout: 'auto',
                 borderCollapse: 'collapse',
                 fontSize: 0,
                 'th, td': {
@@ -184,6 +224,8 @@ const MarkdownTable = ({ source }) => {
                     py: 1,
                     textAlign: 'left',
                     verticalAlign: 'top',
+                    whiteSpace: 'normal',
+                    wordBreak: 'break-word',
                 },
                 th: { bg: 'canvas.subtle', fontWeight: 'bold' },
             }, children: [_jsx("thead", { children: _jsx("tr", { children: headers.map((h, i) => (_jsx("th", { children: h }, i))) }) }), _jsx("tbody", { children: rows.map((r, i) => (_jsx("tr", { children: r.map((c, j) => (_jsx("td", { children: c }, j))) }, i))) })] }) }));
@@ -316,24 +358,33 @@ const AgentOutputsInner = ({ onLogout, }) => {
     }, [agentBaseUrl, agentName, authFetch]);
     const [activeTab, setActiveTab] = useState('table');
     const [detected, setDetected] = useState([]);
-    const lastProcessedIdRef = useRef(null);
+    const lastTextByIdRef = useRef(new Map());
     // Subscribe to chat store messages and detect outputs in assistant replies.
+    // We re-detect on every change because messages stream incrementally — the
+    // first chunk may only contain a header + one row, and later chunks add the
+    // remaining rows; we always want to keep the latest, most complete output.
     useEffect(() => {
         const process = (messages) => {
             const assistants = messages.filter(m => m.role === 'assistant');
             if (assistants.length === 0)
                 return;
             const last = assistants[assistants.length - 1];
-            if (last.id === lastProcessedIdRef.current)
+            const currentText = messageText(last);
+            if (lastTextByIdRef.current.get(last.id) === currentText)
                 return;
+            lastTextByIdRef.current.set(last.id, currentText);
             const out = detectOutput(last);
             if (!out)
                 return;
-            lastProcessedIdRef.current = last.id;
             setDetected(prev => {
-                if (prev.some(d => d.messageId === out.messageId))
-                    return prev;
-                return [out, ...prev].slice(0, 20);
+                const idx = prev.findIndex(d => d.messageId === out.messageId);
+                if (idx === -1)
+                    return [out, ...prev].slice(0, 20);
+                // Replace the existing detection in place so the panel keeps up with
+                // streaming content.
+                const next = prev.slice();
+                next[idx] = out;
+                return next;
             });
             setActiveTab(out.tab);
         };
@@ -351,8 +402,8 @@ const AgentOutputsInner = ({ onLogout, }) => {
                 height: '100vh',
                 gap: 3,
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
-                        ? 'Launching outputs demo agent...'
-                        : 'Creating outputs demo agent...' })] }));
+                        ? 'Launching outputs example agent...'
+                        : 'Creating outputs example agent...' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
@@ -388,7 +439,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", placeholder: "Ask for a Table, JSON, Chart, or File\u2026", description: `${detected.length} detected output${detected.length !== 1 ? 's' : ''}`, showHeader: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                }, 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, 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.',

package/lib/examples/AgentParametersExample.js

@@ -6,15 +6,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, 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 { ErrorView } from './components';
 import { Chat } from '../chat';
 setupPrimerPortals();
-const BASE_URL = 'http://localhost:8765';
-const AGENT_SPEC_ID = 'demo-parameters';
+const AGENT_SPEC_ID = 'example-parameters';
 const AGENT_NAME = 'parameters-demo';
 function isRecord(value) {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
@@ -101,6 +102,7 @@ function hasRequiredValues(schema, formData) {
     });
 }
 const AgentParametersExample = () => {
+    const baseUrl = useExampleAgentRuntimesUrl();
     const [showSchemaForm, setShowSchemaForm] = useState(false);
     const [isSchemaLoading, setIsSchemaLoading] = useState(false);
     const [schema, setSchema] = useState(null);
@@ -121,7 +123,7 @@ const AgentParametersExample = () => {
         setIsSchemaLoading(true);
         setError(null);
         try {
-            const response = await fetch(`${BASE_URL}/api/v1/agents/library/${AGENT_SPEC_ID}`);
+            const response = await fetch(`${baseUrl}/api/v1/agents/library/${AGENT_SPEC_ID}`);
             if (!response.ok) {
                 throw new Error(`Failed to load schema: ${response.status}`);
             }
@@ -147,7 +149,7 @@ const AgentParametersExample = () => {
         setError(null);
         try {
             const name = uniqueAgentId(AGENT_NAME);
-            const response = await fetch(`${BASE_URL}/api/v1/agents`, {
+            const response = await fetch(`${baseUrl}/api/v1/agents`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
@@ -178,13 +180,13 @@ const AgentParametersExample = () => {
             if (!agentId) {
                 return;
             }
-            void fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(agentId)}`, {
+            void fetch(`${baseUrl}/api/v1/agents/${encodeURIComponent(agentId)}`, {
                 method: 'DELETE',
             }).catch(() => {
                 // Ignore teardown failures in example mode.
             });
         };
-    }, [agentId]);
+    }, [agentId, baseUrl]);
     if (!agentId) {
         return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     maxWidth: 760,
@@ -199,7 +201,7 @@ const AgentParametersExample = () => {
                     flexDirection: 'column',
                     gap: 2,
                     bg: 'canvas.subtle',
-                }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "CONFIGURE AGENT" }), _jsx(Heading, { as: "h2", sx: { fontSize: 2 }, children: "Launch Parameterized Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 620 }, children: "Load the runtime schema directly from demo-parameters, fill the generated form, then launch with validated parameters." }), _jsxs(Box, { sx: {
+                }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "CONFIGURE AGENT" }), _jsx(Heading, { as: "h2", sx: { fontSize: 2 }, children: "Launch Parameterized Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 620 }, children: "Load the runtime schema directly from example-parameters, fill the generated form, then launch with validated parameters." }), _jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 2,
@@ -232,7 +234,7 @@ const AgentParametersExample = () => {
                                 // Prevent implicit form submission; launching is click-only.
                             }, 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." })), error && _jsx(ErrorView, { error: "Launch failed", detail: error })] }) }));
     }
-    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: BASE_URL, agentId: agentId, title: `Parameterized Agent: ${String(formData.project ?? 'Project')}`, placeholder: "Ask something about your configured project...", description: `Role: ${String(formData.role ?? 'n/a')} · Tone: ${String(formData.tone ?? 'n/a')}`, showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+    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, 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.',

package/lib/examples/AgentSandboxExample.d.ts

@@ -5,7 +5,7 @@
  * sidebar that streams WebSocket messages to and from the
  * `/configure/sandbox/ws` endpoint.
  *
- * - Creates a local agent (spec: demo-full) with codemode enabled
+ * - Creates a local agent (spec: example-full) with codemode enabled
  * - SegmentedControl toggles between "eval" and "jupyter" variants
  * - Sidebar shows live sandbox status, WebSocket event log, and an
  *   interrupt button