@datalayer/agent-runtimes 1.0.18 → 1.0.20

package/lib/examples/{AgentSandboxExample.d.ts → AgentCodeSandboxExample.d.ts}

@@ -1,5 +1,5 @@
 /**
- * AgentSandboxExample
+ * AgentCodeSandboxExample
  *
  * Demonstrates sandbox variant switching (eval / jupyter) with a live
  * sidebar that streams WebSocket messages to and from the
@@ -10,8 +10,8 @@
  * - Sidebar shows live sandbox status, WebSocket event log, and an
  *   interrupt button
  *
- * @module examples/AgentSandboxExample
+ * @module examples/AgentCodeSandboxExample
  */
 import React from 'react';
-declare const AgentSandboxExample: React.FC;
-export default AgentSandboxExample;
+declare const AgentCodeSandboxExample: React.FC;
+export default AgentCodeSandboxExample;

package/lib/examples/{AgentSandboxExample.js → AgentCodeSandboxExample.js}

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * AgentSandboxExample
+ * AgentCodeSandboxExample
  *
  * Demonstrates sandbox variant switching (eval / jupyter) with a live
  * sidebar that streams WebSocket messages to and from the
@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Sidebar shows live sandbox status, WebSocket event log, and an
  *   interrupt button
  *
- * @module examples/AgentSandboxExample
+ * @module examples/AgentCodeSandboxExample
  */
 /// <reference types="vite/client" />
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
@@ -59,7 +59,7 @@ function apiVariantFromUi(variant) {
     return variant;
 }
 // ─── Inner component (after auth) ──────────────────────────────────────────
-const AgentSandboxInner = ({ onLogout, }) => {
+const AgentCodeSandboxInner = ({ onLogout, }) => {
     const { token } = useSimpleAuthStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     const chatAuthToken = token === null ? undefined : token;
@@ -377,9 +377,10 @@ const AgentSandboxInner = ({ onLogout, }) => {
             display: 'flex',
             flexDirection: 'column',
             minHeight: 0,
-            bg: 'canvas.subtle',
+            bg: 'canvas.default',
         }, children: [_jsxs(Box, { sx: {
                     p: 2,
+                    bg: 'canvas.default',
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: "Sandbox Details" }), _jsxs(Box, { sx: {
@@ -441,7 +442,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
                                 py: '2px',
                                 color: entry.direction === 'sent' ? 'accent.fg' : 'fg.default',
                                 bg: entry.direction === 'sent'
-                                    ? 'accent.subtle'
+                                    ? 'neutral.muted'
                                     : 'transparent',
                                 borderBottom: '1px solid',
                                 borderColor: 'border.subtle',
@@ -463,7 +464,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
                     py: 1,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running \u2014 reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs(Box, { sx: { position: 'relative', height: '100%' }, children: [_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Sandbox Agent", brandIcon: _jsx(TerminalIcon, { size: 16 }), placeholder: "Ask the agent to write and run code\u2026", 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(SegmentedControl, { "aria-label": "Sandbox variant", size: "small", onChange: index => {
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running \u2014 reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs(Box, { sx: { position: 'relative', height: '100%' }, children: [_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Sandbox Agent", brandIcon: _jsx(TerminalIcon, { size: 16 }), placeholder: "Ask the agent to write and run code\u2026", 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(SegmentedControl, { "aria-label": "Sandbox variant", size: "small", onChange: index => {
                                                     if (isTransitionLocked)
                                                         return;
                                                     void switchVariant(index === 0 ? 'eval' : 'jupyter');
@@ -495,7 +496,7 @@ const syncTokenToIamStore = (newToken) => {
         iamStore.setState({ token: newToken });
     });
 };
-const AgentSandboxExample = () => {
+const AgentCodeSandboxExample = () => {
     const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
@@ -514,6 +515,6 @@ const AgentSandboxExample = () => {
     if (!token) {
         return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentSandboxInner, { onLogout: handleLogout }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentCodeSandboxInner, { onLogout: handleLogout }) }) }));
 };
-export default AgentSandboxExample;
+export default AgentCodeSandboxExample;

package/lib/examples/AgentCodeSandboxesExample.js

@@ -149,7 +149,7 @@ const AgentCodeSandboxesInner = ({ onLogout, }) => {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: 3,
-                bg: 'canvas.subtle',
+                bg: 'canvas.default',
             }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "SANDBOX VARIANT DEMO" }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Agent Code Sandboxes" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Choose a sandbox variant-backed spec, launch the agent, then run code from chat to compare behavior across sandboxes." }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", selectedOption.specId] }), _jsxs(Label, { variant: "secondary", children: ["Variant: ", selectedOption.variant] }), _jsx(Label, { variant: "success", children: "Codemode: enabled" })] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Sandbox Variant" }), _jsx("select", { value: selectedSpecId, onChange: event => {
                                 setSelectedSpecId(event.target.value);
                             }, style: {
@@ -164,7 +164,7 @@ const AgentCodeSandboxesInner = ({ onLogout, }) => {
                         void launchAgent();
                     }, disabled: isLaunching, sx: { width: '100%', maxWidth: 420 }, children: isLaunching ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Launching..."] })) : (`Launch ${selectedOption.title}`) }), error && _jsx(ErrorView, { error: error, onLogout: onLogout })] }));
     }
-    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, runtimeId: agentId, title: `Code Sandboxes: ${activeOption.title}`, description: `Spec ${activeOption.specId} (${activeOption.variant})`, brandIcon: _jsx(PackageIcon, { size: 16 }), showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
+    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, runtimeId: agentId, title: `Code Sandboxes: ${activeOption.title}`, description: `Spec ${activeOption.specId} (${activeOption.variant})`, brandIcon: _jsx(PackageIcon, { size: 16 }), showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
             {
                 title: 'Identify sandbox variant',
                 message: 'Use execute_code to print(os.getenv("DATALAYER_CODE_SANDBOX_VARIANT")) and summarize the result.',

package/lib/examples/AgentCodemodeExample.js

@@ -46,7 +46,7 @@ const DEMO_AGENT_CONFIGS = [
         subtitle: 'Raw MCP tools without codemode conversion',
         suggestionMessage: NO_CODEMODE_SUGGESTION_MESSAGE,
         specId: 'example-no-codemode',
-        color: '#0969DA',
+        color: '#16A085',
         baseUrl: NO_CODEMODE_BASE_URL,
     },
     {
@@ -374,7 +374,7 @@ const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onC
             minHeight: 560,
             display: 'flex',
             flexDirection: 'column',
-        }, children: _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: config.baseUrl, agentId: agentId, authToken: token, title: config.title, brandIcon: _jsx(CodeIcon, { size: 16 }), subtitle: config.subtitle, placeholder: "Ask both agents the same request to compare behavior...", description: config.subtitle, showHeader: true, headerActions: isReconnectedAgent ? (_jsx(Label, { size: "small", variant: "attention", children: "Reconnected" })) : undefined, autoFocus: false, height: "100%", runtimeId: agentId, historyEndpoint: `${config.baseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData, codemodeEnabled: codemodeEnabled, onToggleCodemode: handleToggleCodemode, suggestions: [
+        }, children: _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: config.baseUrl, agentId: agentId, authToken: token, title: config.title, brandIcon: _jsx(CodeIcon, { size: 16 }), subtitle: config.subtitle, placeholder: "Ask both agents the same request to compare behavior...", description: config.subtitle, showHeader: true, kernelIndicatorPlacement: "right", headerActions: isReconnectedAgent ? (_jsx(Label, { size: "small", variant: "attention", children: "Reconnected" })) : undefined, autoFocus: false, height: "100%", runtimeId: agentId, historyEndpoint: `${config.baseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData, codemodeEnabled: codemodeEnabled, onToggleCodemode: handleToggleCodemode, suggestions: [
                     {
                         title: 'Datalayer extraction',
                         message: config.suggestionMessage,
@@ -436,7 +436,7 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                 emoji: '🤝',
                 title: 'Tie',
                 message: 'Both agents are tied on token usage.',
-                bg: 'canvas.subtle',
+                bg: 'canvas.default',
                 borderColor: 'border.default',
                 color: 'fg.default',
             };

package/lib/examples/AgentCompactionExample.d.ts

@@ -0,0 +1,12 @@
+/**
+ * AgentCompactionExample
+ *
+ * Demonstrates history compaction. Before launching, the user picks a context
+ * token ceiling (capped at the agentspec model's tokens_limit). A lower ceiling
+ * makes the agent summarize older messages sooner. When compaction runs, a
+ * live panel shows a spinner and the details (from/to tokens, from/to messages,
+ * and time taken).
+ */
+import React from 'react';
+declare const AgentCompactionExample: React.FC;
+export default AgentCompactionExample;

package/lib/examples/AgentCompactionExample.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgentCompactionExample
+ *
+ * Demonstrates history compaction. Before launching, the user picks a context
+ * token ceiling (capped at the agentspec model's tokens_limit). A lower ceiling
+ * makes the agent summarize older messages sooner. When compaction runs, a
+ * live panel shows a spinner and the details (from/to tokens, from/to messages,
+ * and time taken).
+ */
+/// <reference types="vite/client" />
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Text, Spinner, Heading, Label, Button, FormControl, } from '@primer/react';
+import { HistoryIcon, ClockIcon, ArrowRightIcon, CheckCircleIcon, StackIcon, } 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 { useAgentRuntimeCompaction, agentRuntimeStore } from '../stores';
+import { getAgentspecs } from '../specs/agents';
+import { AI_MODEL_CATALOGUE } from '../specs';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useRuntimeTargetStore } from './utils/runtimeTargetStore';
+const AGENT_NAME = 'compaction-example-agent';
+const AGENTSPEC_ID = 'example-monitoring';
+const MIN_MAX_TOKENS = 1000;
+const DEFAULT_MAX_TOKENS = 4000;
+/** Resolve the agentspec model's token limit as the upper bound the user can set. */
+function resolveAgentspecTokenLimit() {
+    const spec = getAgentspecs(AGENTSPEC_ID);
+    const model = spec?.model;
+    const limit = model ? AI_MODEL_CATALOGUE[model]?.tokensLimit : undefined;
+    return typeof limit === 'number' && limit > 0 ? limit : 64000;
+}
+const numberFmt = new Intl.NumberFormat();
+/** Live compaction status: spinner while running, details when complete. */
+const CompactionPanel = ({ maxTokens }) => {
+    const compaction = useAgentRuntimeCompaction();
+    return (_jsxs(Box, { sx: {
+            p: 3,
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+        }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Compaction" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(StackIcon, { size: 14 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Budget: ", numberFmt.format(maxTokens), " tokens"] })] }), !compaction && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No compaction yet. Keep chatting \u2014 once the history exceeds the token budget, older messages are summarized automatically." })), compaction?.phase === 'start' && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: 'attention.emphasis',
+                    borderRadius: 2,
+                    bg: 'attention.subtle',
+                }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "Compacting\u2026" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: ["Summarizing ", numberFmt.format(compaction.beforeMessages), " messages (~", numberFmt.format(compaction.beforeTokens), " tokens)"] })] })] })), compaction?.phase === 'end' && (_jsxs(Box, { sx: {
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: compaction.reduced
+                        ? 'success.emphasis'
+                        : 'border.default',
+                    borderRadius: 2,
+                    bg: compaction.reduced ? 'success.subtle' : 'canvas.subtle',
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(CheckCircleIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: compaction.reduced ? 'Compacted' : 'History already minimal' })] }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 1,
+                            fontSize: 0,
+                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Tokens" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.beforeTokens) }), _jsx(ArrowRightIcon, { size: 12 }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.afterTokens ?? compaction.beforeTokens) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Messages" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.beforeMessages) }), _jsx(ArrowRightIcon, { size: 12 }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.afterMessages ?? compaction.beforeMessages) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ClockIcon, { size: 12 }), _jsx(Text, { sx: { color: 'fg.muted', minWidth: 52 }, children: "Time" }), _jsxs(Text, { sx: { fontFamily: 'mono' }, children: [numberFmt.format(Math.round(compaction.durationMs ?? 0)), " ms"] })] }), typeof compaction.compactionCount === 'number' && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Total runs" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.compactionCount) })] }))] })] }))] }));
+};
+const AgentCompactionInner = ({ onLogout, }) => {
+    const { token } = useSimpleAuthStore();
+    const runtimeTarget = useRuntimeTargetStore(state => state.target);
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const tokenLimit = useRef(resolveAgentspecTokenLimit()).current;
+    const [maxTokensInput, setMaxTokensInput] = useState(Math.min(DEFAULT_MAX_TOKENS, tokenLimit));
+    const [launchedMaxTokens, setLaunchedMaxTokens] = useState(null);
+    const [runtimeStatus, setRuntimeStatus] = useState('idle');
+    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(() => {
+        if (launchedMaxTokens === null)
+            return;
+        let isCancelled = false;
+        const createAgentForTarget = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
+            // Clear any prior compaction status from a previous stream.
+            agentRuntimeStore.getState().setCompaction(null);
+            try {
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'Compaction example – history summarization under a token budget',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENTSPEC_ID,
+                        memory: 'ephemeral',
+                        enable_skills: true,
+                        tools: [],
+                        compactionMaxTokens: launchedMaxTokens,
+                    }),
+                });
+                let resolvedAgentId = agentName;
+                let isAlreadyRunning = false;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || agentName;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const data = await response.json().catch(() => null);
+                        detail =
+                            (typeof data?.detail === 'string' && data.detail) ||
+                                (typeof data?.message === 'string' && data.message) ||
+                                '';
+                    }
+                    else {
+                        detail = await response.text();
+                    }
+                    if (response.status === 409 || /already exists/i.test(detail || '')) {
+                        isAlreadyRunning = true;
+                    }
+                    else {
+                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
+                    }
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReconnectedAgent(isAlreadyRunning);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createAgentForTarget();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, authFetch, runtimeTarget, launchedMaxTokens, agentName]);
+    // Setup phase: choose the compaction token budget before launching.
+    if (launchedMaxTokens === null) {
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                bg: 'canvas.default',
+            }, children: _jsxs(Box, { sx: {
+                    width: 460,
+                    maxWidth: '90%',
+                    p: 4,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.subtle',
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(HistoryIcon, { size: 20 }), _jsx(Heading, { as: "h3", sx: { fontSize: 3 }, children: "History Compaction" })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 0, mb: 3 }, children: "Set the context token budget before launching. When the conversation grows past this budget, older messages are summarized so the input stays within the limit. A lower budget triggers compaction sooner." }), _jsxs(FormControl, { children: [_jsxs(FormControl.Label, { children: ["Max context tokens: ", numberFmt.format(maxTokensInput)] }), _jsx(Box, { sx: { mt: 2 }, children: _jsx("input", { type: "range", min: MIN_MAX_TOKENS, max: tokenLimit, step: 500, value: maxTokensInput, onChange: e => setMaxTokensInput(Number(e.target.value)), style: { width: '100%' } }) }), _jsxs(FormControl.Caption, { children: ["Agentspec max: ", numberFmt.format(tokenLimit), " tokens (model limit)"] })] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', mt: 3 }, children: _jsx(Button, { variant: "primary", leadingVisual: HistoryIcon, onClick: () => setLaunchedMaxTokens(maxTokensInput), children: "Launch agent" }) })] }) }));
+    }
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                gap: 3,
+                bg: 'canvas.default',
+            }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Launching compaction example agent (", runtimeTarget, ")..."] })] }));
+    }
+    if (runtimeStatus === 'error' || hookError) {
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
+    }
+    return (_jsxs(Box, { sx: {
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            bg: 'canvas.default',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    flexShrink: 0,
+                }, children: [_jsx(HistoryIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Compaction Demo" }), isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsx(Label, { variant: "accent", children: runtimeTarget }), _jsxs(Label, { variant: "accent", children: [numberFmt.format(launchedMaxTokens), " tok budget"] })] }), _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: "Compaction Agent", brandIcon: _jsx(HistoryIcon, { size: 16 }), placeholder: "Chat until the history exceeds the token budget...", description: "History summarization under a token budget", showHeader: true, kernelIndicatorPlacement: "right", autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                {
+                                    title: 'Fill the context',
+                                    message: 'Write a detailed, multi-paragraph essay on the history of computing, covering hardware, software, and networking eras.',
+                                },
+                                {
+                                    title: 'Keep going',
+                                    message: 'Now expand each section with more detail and concrete examples, adding at least three paragraphs per era.',
+                                },
+                                {
+                                    title: 'Recall earlier',
+                                    message: 'Summarize everything we have discussed so far in this conversation.',
+                                },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 320,
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: 'auto',
+                        }, children: [_jsx(CompactionPanel, { maxTokens: launchedMaxTokens }), _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: ["Before each model request, the compaction capability estimates the history size. When it exceeds a fraction of the", ' ', numberFmt.format(launchedMaxTokens), "-token budget, older messages are replaced by an LLM-generated summary while recent messages are preserved."] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: ["The budget is capped at the agentspec model's token limit (", numberFmt.format(tokenLimit), "). Lower it to trigger compaction with a shorter conversation."] })] })] })] })] }));
+};
+const AgentCompactionExample = () => {
+    const { token, clearAuth } = useSimpleAuthStore();
+    const handleLogout = useCallback(() => {
+        clearAuth();
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
+    }
+    return (_jsx(ThemedProvider, { children: _jsx(AgentCompactionInner, { onLogout: handleLogout }) }));
+};
+export default AgentCompactionExample;

package/lib/examples/AgentEvalsExample.js

@@ -17,24 +17,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vite/client" />
 import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, Select, FormControl, } from '@primer/react';
+import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, } from '@primer/react';
 import { BeakerIcon, CheckCircleIcon, XCircleIcon, PlayIcon, } 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 { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { resolveExampleAgentRuntimesUrl, useExampleAgentRuntimesUrl, } from './utils/useExampleAgentRuntimesUrl';
+import { useRuntimeTargetStore, } from './utils/runtimeTargetStore';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { useCoreStore } from '@datalayer/core';
 import { Chat } from '../chat';
-import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
+import { useExampleAgentRuntimes as useAgentRuntimes } from './hooks/useExampleAgentRuntimes';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'eval-example-agent';
 const AGENTSPEC_ID = 'example-evals';
-const DEFAULT_EXECUTION_TARGET = (import.meta.env.VITE_AGENT_EVALS_TARGET || 'cloud').toLowerCase() === 'local'
-    ? 'local'
-    : 'cloud';
 const normalizeHttpUrl = (value) => {
     if (typeof value !== 'string') {
         return null;
@@ -72,25 +70,17 @@ const isLocalhostUrl = (value) => {
     }
 };
 // ─── Inner component (rendered after auth) ─────────────────────────────────
-const AgentEvalsInner = ({ onLogout, executionTarget, onExecutionTargetChange }) => {
+const AgentEvalsInner = ({ onLogout, executionTarget }) => {
     const { token } = useSimpleAuthStore();
     const { configuration } = useCoreStore();
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     const localRuntimeBaseUrl = useExampleAgentRuntimesUrl();
     const cloudRuntimeBaseUrl = useMemo(() => {
-        const envRuntimesUrl = normalizeHttpUrl(import.meta.env.VITE_DATALAYER_RUNTIMES_URL);
-        const envAgentRuntimesUrl = normalizeHttpUrl(import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL);
         const configuredRuntimesUrl = normalizeHttpUrl(configuration?.runtimesUrl);
-        if (envRuntimesUrl && !isLocalhostUrl(envRuntimesUrl)) {
-            return envRuntimesUrl;
-        }
         if (configuredRuntimesUrl && !isLocalhostUrl(configuredRuntimesUrl)) {
             return configuredRuntimesUrl;
         }
-        if (envAgentRuntimesUrl && !isLocalhostUrl(envAgentRuntimesUrl)) {
-            return envAgentRuntimesUrl;
-        }
-        return 'https://r1.datalayer.run';
+        return resolveExampleAgentRuntimesUrl('cloud');
     }, [configuration?.runtimesUrl]);
     const { runtime, status: runtimeStatus, isReady, error: hookError, runtimeCreationBaseUrl, } = useAgentRuntimes({
         agentSpecId: AGENTSPEC_ID,
@@ -420,9 +410,9 @@ const AgentEvalsInner = ({ onLogout, executionTarget, onExecutionTargetChange })
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
-                                }, children: ["Runtime API: ", runtimeCreationBaseUrl, "/api/runtimes/v1/runtimes"] })] }), _jsxs(FormControl, { sx: { minWidth: 160 }, children: [_jsx(FormControl.Label, { sx: { fontSize: 0, mb: 1 }, children: "Target" }), _jsxs(Select, { size: "small", value: executionTarget, onChange: e => onExecutionTargetChange(e.target.value), disabled: isRunning, children: [_jsx(Select.Option, { value: "cloud", children: "Cloud" }), _jsx(Select.Option, { value: "local", children: "Local" })] })] })] }), _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: "Eval Agent", brandIcon: _jsx(BeakerIcon, { size: 16 }), placeholder: "Chat with the agent, then run evaluations\u2026", description: latestScore != null
+                                }, children: ["Runtime API: ", runtimeCreationBaseUrl, "/api/runtimes/v1/runtimes"] })] }), _jsxs(Label, { size: "small", variant: "accent", children: ["Target: ", executionTarget === 'cloud' ? 'Cloud' : 'Local'] })] }), _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: "Eval Agent", brandIcon: _jsx(BeakerIcon, { size: 16 }), placeholder: "Chat with the agent, then run evaluations\u2026", description: latestScore != null
                                 ? `Last score: ${(latestScore * 100).toFixed(0)}%`
-                                : 'No evaluations run yet', showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                : 'No evaluations run yet', showHeader: true, kernelIndicatorPlacement: "right", autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'Summarize KPIs',
                                     message: 'Summarize the latest KPI data',
@@ -474,7 +464,7 @@ const syncTokenToIamStore = (token) => {
 const AgentEvalsExample = () => {
     const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
-    const [executionTarget, setExecutionTarget] = useState(DEFAULT_EXECUTION_TARGET);
+    const executionTarget = useRuntimeTargetStore(state => state.target);
     useEffect(() => {
         if (token && !hasSynced.current) {
             hasSynced.current = true;
@@ -491,6 +481,6 @@ const AgentEvalsExample = () => {
     if (!token) {
         return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentEvalsInner, { onLogout: handleLogout, executionTarget: executionTarget, onExecutionTargetChange: setExecutionTarget }, executionTarget) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentEvalsInner, { onLogout: handleLogout, executionTarget: executionTarget }, executionTarget) }) }));
 };
 export default AgentEvalsExample;

package/lib/examples/AgentGuardrailsExample.js

@@ -227,7 +227,7 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
         configuration?.datalayerUrl ||
         OTEL_BASE_URL_ENV ||
         DATALAYER_URL_ENV ||
-        'https://prod1.datalayer.run';
+        agentBaseUrl;
     const podName = agentId;
     const chatAuthToken = token === null ? undefined : token;
     // Authenticated fetch helper (for sidecar endpoints)
@@ -487,7 +487,7 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
                             ? ` (over by $${overBudgetAmountUsd.toFixed(4)}).`
                             : '.', ' ', "Start a new run or increase the run budget before continuing."] }) })), approvals.map(req => (_jsx(Flash, { variant: "warning", sx: { mx: 3, mt: 2 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { flex: 1, fontSize: 1 }, children: [_jsx("strong", { children: req.tool_name }), " requests approval", req.tool_args
                                     ? ` — ${JSON.stringify(req.tool_args).slice(0, 120)}`
-                                    : ''] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleApprove(req.id), disabled: approvalLoading === req.id, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleReject(req.id), disabled: approvalLoading === req.id, children: "Reject" })] }) }, req.id))), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Guardrails Agent", brandIcon: _jsx(ShieldCheckIcon, { size: 16 }), placeholder: "Ask something that triggers tools\u2026", description: "Cost guardrail with OTEL-backed gauge and hook-aware approvals (before_tool_execute, after_tool_execute, on_tool_execute_error, deferred_tool_calls)", showHeader: true, showTokenUsage: true, errorBanner: overBudgetBanner, disableInputPrompt: isOverRunBudget, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                    : ''] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleApprove(req.id), disabled: approvalLoading === req.id, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleReject(req.id), disabled: approvalLoading === req.id, children: "Reject" })] }) }, req.id))), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Guardrails Agent", brandIcon: _jsx(ShieldCheckIcon, { size: 16 }), placeholder: "Ask something that triggers tools\u2026", description: "Cost guardrail with OTEL-backed gauge and hook-aware approvals (before_tool_execute, after_tool_execute, on_tool_execute_error, deferred_tool_calls)", showHeader: true, kernelIndicatorPlacement: "right", showTokenUsage: true, errorBanner: overBudgetBanner, disableInputPrompt: isOverRunBudget, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                         { title: 'Update CRM', message: 'Update the CRM records for Q3' },
                         {
                             title: 'Trigger before_tool_execute',

package/lib/examples/AgentHooksExample.js

@@ -43,7 +43,7 @@ const AgentHooksExample = () => {
     if (error || !agentId) {
         return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start hooks agent", detail: error || 'No agent ID returned' }) }));
     }
-    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, title: "Hooks Agent", brandIcon: _jsx(SyncIcon, { size: 16 }), placeholder: "Ask about lifecycle hooks...", description: "Demonstrates lifecycle hooks and pydantic-style tool hooks: before_tool_execute, after_tool_execute, on_tool_execute_error, deferred_tool_calls", 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: "vercel-ai", baseUrl: baseUrl, agentId: agentId, title: "Hooks Agent", brandIcon: _jsx(SyncIcon, { size: 16 }), placeholder: "Ask about lifecycle hooks...", description: "Demonstrates lifecycle hooks and pydantic-style tool hooks: before_tool_execute, after_tool_execute, on_tool_execute_error, deferred_tool_calls", 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: 'Read the pre-hook marker file',
                 message: 'Use execute_code to read /tmp/agent_runtimes_pre_hook_demo.txt and show its contents.',

package/lib/examples/AgentInferenceProviderExample.js

@@ -37,7 +37,7 @@ const ProviderBadge = ({ provider, }) => (_jsx(Box, { sx: {
         borderColor: 'border.default',
         fontSize: 0,
         color: 'fg.muted',
-        bg: 'canvas.inset',
+        bg: 'canvas.default',
         textTransform: 'uppercase',
         letterSpacing: '0.03em',
     }, children: provider }));
@@ -57,10 +57,8 @@ const AgentInferenceProviderExampleInner = () => {
             return 'local inference';
         }
         const env = import.meta.env ?? {};
-        return (env.VITE_DATALAYER_AI_INFERENCE_URL ||
-            env.VITE_DATALAYER_URL ||
-            'https://prod1.datalayer.run');
-    }, [provider]);
+        return (env.VITE_DATALAYER_AI_INFERENCE_URL || env.VITE_DATALAYER_URL || baseUrl);
+    }, [provider, baseUrl]);
     const authFetch = useCallback((url, init = {}) => {
         return fetch(url, {
             ...init,
@@ -248,7 +246,7 @@ const AgentInferenceProviderExampleInner = () => {
                                 borderRadius: 2,
                                 overflow: 'hidden',
                                 bg: 'canvas.default',
-                            }, children: agentId && !isLaunching ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, authToken: token ?? undefined, title: "Agent Inference Provider Example", subtitle: `Spec: ${AGENTSPEC_ID}`, placeholder: "Ask the inference provider something...", showHeader: true, showNewChatButton: true, showClearButton: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, onMessageSent: content => {
+                            }, children: agentId && !isLaunching ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, authToken: token ?? undefined, title: "Agent Inference Provider Example", subtitle: `Spec: ${AGENTSPEC_ID}`, placeholder: "Ask the inference provider something...", showHeader: true, kernelIndicatorPlacement: "right", showNewChatButton: true, showClearButton: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, onMessageSent: content => {
                                     appendProviderEvent('provider.request', `Sent message via ${provider}`, {
                                         provider,
                                         agentId,
@@ -275,7 +273,7 @@ const AgentInferenceProviderExampleInner = () => {
                         gap: 2,
                         minHeight: 0,
                         overflow: 'hidden',
-                        bg: 'canvas.inset',
+                        bg: 'canvas.default',
                     }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Provider Event Stream" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Low-level request/response events exchanged with the inference provider (newest first)." }), _jsx(Box, { sx: {
                                 flex: 1,
                                 minHeight: 0,
@@ -317,7 +315,7 @@ const AgentInferenceProviderExampleInner = () => {
                                             mb: 0,
                                             p: 2,
                                             borderRadius: 2,
-                                            bg: 'canvas.subtle',
+                                            bg: 'canvas.default',
                                             fontSize: 0,
                                             whiteSpace: 'pre-wrap',
                                             fontFamily: 'mono',

package/lib/examples/AgentLoopExample.js

@@ -135,8 +135,8 @@ function LoopSummary({ loop }) {
                         px: 2,
                         py: '2px',
                         borderRadius: 6,
-                        bg: 'accent.subtle',
-                        color: 'accent.fg',
+                        bg: 'neutral.muted',
+                        color: 'fg.default',
                         fontWeight: 'bold',
                     }, children: [index + 1, ". ", phase] }, phase))) }), loop.objective && (_jsxs(Box, { sx: { color: 'fg.muted' }, children: [_jsx("strong", { children: "Objective:" }), " ", loop.objective] })), loop.termination && (_jsxs(Box, { sx: { color: 'fg.muted', mt: 1 }, children: [_jsx("strong", { children: "Max iterations:" }), " ", loop.termination.maxIterations, " \u00B7", ' ', _jsx("strong", { children: "On blocked:" }), " ", loop.termination.onBlocked] }))] }));
 }
@@ -241,7 +241,7 @@ export function AgentLoopExampleInner({ serviceManager, }) {
                                 p: 3,
                                 borderBottom: '1px solid',
                                 borderColor: 'border.default',
-                                bg: 'canvas.subtle',
+                                bg: 'canvas.default',
                             }, children: [_jsxs(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',