@datalayer/agent-runtimes 1.0.19 → 1.0.21

package/lib/examples/A2UiViewerExample.js

@@ -345,7 +345,7 @@ function ViewerContent({ onAction, }) {
                     borderColor: 'border.default',
                     borderRadius: 2,
                     p: 3,
-                    backgroundColor: 'canvas.subtle',
+                    backgroundColor: 'canvas.default',
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 3,
@@ -368,14 +368,14 @@ const A2UiViewerExample = () => {
                             py: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDD0D A2UI Viewer" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Standalone viewer scenes powered by MessageProcessor and A2uiSurface." })] }), _jsx(ViewerContent, { onAction: handleAction }), _jsx(Box, { sx: {
                             borderTop: '1px solid',
                             borderColor: 'border.default',
                             p: 3,
                             fontFamily: 'mono',
                             fontSize: 0,
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                             whiteSpace: 'pre-wrap',
                             maxHeight: 180,
                             overflow: 'auto',

package/lib/examples/AgUiAgenticExample.js

@@ -78,7 +78,7 @@ const AgUiAgenticExample = () => {
                                 borderColor: 'danger.muted',
                             }, children: _jsxs(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: ["Failed to initialize managed agent runtime: ", error] }) })), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -89,11 +89,11 @@ const AgUiAgenticExample = () => {
                                     }, children: "Try asking: \"hi\" or \"what can you help with?\"" })] }), _jsxs(Box, { sx: {
                                 marginTop: 4,
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), agenticChatEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: agenticChatEndpoint, title: "Agentic Chat", description: "Chat with a managed AG-UI agent runtime.", position: "bottom-right", defaultOpen: true, suggestions: [
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), agenticChatEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticChatEndpoint, title: "Agentic Chat", description: "Chat with a managed AG-UI agent runtime.", position: "bottom-right", defaultOpen: true, suggestions: [
                         {
                             title: 'What time is it?',
                             message: 'What is the current time?',

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -91,7 +91,7 @@ const AgUiBackendToolRenderingExample = () => {
                                 marginBottom: 4,
                             }, children: ["Ask about the weather anywhere in the world. Weather cards are rendered ", _jsx("strong", { children: "inline in the chat" }), " with dynamic theming!"] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -105,7 +105,7 @@ const AgUiBackendToolRenderingExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), backendToolRenderingEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: backendToolRenderingEndpoint, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderToolResult, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), backendToolRenderingEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: backendToolRenderingEndpoint, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderToolResult, suggestions: [
                         {
                             title: 'Paris weather',
                             message: "What's the weather like in Paris?",

package/lib/examples/AgUiHaikuGenUiExample.js

@@ -129,14 +129,14 @@ const AgUiHaikuGenUiExample = () => {
                                 marginBottom: 4,
                             }, children: "Ask the assistant to generate haiku poetry. Haikus appear both in the chat and in the display area below!" }), _jsx(Box, { sx: {
                                 padding: 5,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
                                 marginBottom: 4,
                             }, children: _jsx(HaikuDisplayWithRef, { ref: displayRef, title: "Your Haiku Collection" }) }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -150,7 +150,7 @@ const AgUiHaikuGenUiExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: haikuGenUiEndpoint, launching: !haikuGenUiEndpoint, launchingMessage: "Starting the haiku agent runtime\u2026", title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderToolResult, hideMessagesAfterToolUI: true, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: haikuGenUiEndpoint, launching: !haikuGenUiEndpoint, launchingMessage: "Starting the haiku agent runtime\u2026", title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderToolResult, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Cherry blossoms',
                             message: 'Write me a haiku about cherry blossoms in spring.',

package/lib/examples/AgUiHumanInTheLoopExample.js

@@ -100,7 +100,7 @@ const StepsFeedback = ({ args, status, respond, result }) => {
     return (_jsxs(Box, { "data-testid": "select-steps", sx: {
             width: '100%',
             padding: 3,
-            backgroundColor: 'canvas.subtle',
+            backgroundColor: 'canvas.default',
             borderRadius: 2,
             border: '1px solid',
             borderColor: 'border.default',
@@ -211,18 +211,18 @@ const AgUiHumanInTheLoopExample = () => {
                                 marginBottom: 4,
                             }, children: "This example demonstrates human review workflows. Ask the AI to create a plan, then use the Reject/Confirm buttons to respond." }), _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: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This demonstrates the \"Human in the Loop\" pattern where AI-generated task plans require human approval before proceeding. The pattern follows CopilotKit's useHumanInTheLoop hook." }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: _jsx("strong", { children: "How it works:" }) }), _jsxs(Box, { as: "ul", sx: { fontSize: 1, color: 'fg.muted', mt: 1, pl: 3 }, children: [_jsx("li", { children: "The agent calls the generate_task_steps tool" }), _jsx("li", { children: "A custom UI renders with toggleable steps" }), _jsx("li", { children: "User clicks Reject or Confirm to send response back" }), _jsx("li", { children: "The UI updates to show Rejected or Accepted state" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Try:" }), " \"Create a plan to learn machine learning\" or \"Plan a trip to Paris in 5 steps\""] })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'accent.subtle',
+                                backgroundColor: 'neutral.muted',
                                 borderRadius: 2,
                                 border: '1px solid',
-                                borderColor: 'accent.muted',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), humanInTheLoopEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: humanInTheLoopEndpoint, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), humanInTheLoopEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: humanInTheLoopEndpoint, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Plan a trip',
                             message: 'Plan a weekend trip to Paris.',

package/lib/examples/AgUiSharedStateExample.js

@@ -163,7 +163,7 @@ const AgUiSharedStateExample = () => {
                                                 color: 'fg.muted',
                                             }, children: "Build a recipe together with AI. Both you and the agent can edit the recipe." })] }), _jsx(Button, { variant: "danger", onClick: handleClear, children: "Clear Recipe" })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -175,7 +175,7 @@ const AgUiSharedStateExample = () => {
                                         marginBottom: 3,
                                     }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold' }, children: "Recipe Builder" }), _jsx(Label, { variant: "accent", children: "Shared State" })] }), _jsx(RecipeDisplay, { recipe: recipe, onUpdate: handleLocalUpdate })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -184,7 +184,7 @@ const AgUiSharedStateExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), sharedStateEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: sharedStateEndpoint, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), sharedStateEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: sharedStateEndpoint, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Pasta recipe',
                             message: 'Help me create a simple pasta recipe.',

package/lib/examples/AgUiToolsBasedGenUiExample.js

@@ -47,7 +47,7 @@ const PlanStepItem = ({ step, index, onClick, isInteractive = false }) => {
                 : step.status === 'completed'
                     ? 'success.subtle'
                     : isEnabled
-                        ? 'canvas.subtle'
+                        ? 'canvas.default'
                         : 'canvas.default',
             border: '1px solid',
             borderColor: step.status === 'in_progress'
@@ -64,7 +64,9 @@ const PlanStepItem = ({ step, index, onClick, isInteractive = false }) => {
             width: '100%',
             '&:hover': isInteractive
                 ? {
-                    backgroundColor: step.status === 'completed' ? 'success.subtle' : 'canvas.inset',
+                    backgroundColor: step.status === 'completed'
+                        ? 'success.subtle'
+                        : 'canvas.default',
                     borderColor: 'accent.muted',
                 }
                 : {},
@@ -242,7 +244,7 @@ const AgUiToolsBasedGenUiExample = () => {
                                 marginBottom: 4,
                             }, children: "Watch the AI create and update a plan in real-time using STATE_SNAPSHOT and STATE_DELTA events." }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -250,7 +252,7 @@ const AgUiToolsBasedGenUiExample = () => {
                                 minHeight: '300px',
                             }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 3 }, children: "Generated Plan" }), _jsx(PlanDisplay, { plan: plan, isInteractive: true, onStepToggle: handleStepToggle, onConfirm: handleConfirm, onReject: handleReject, decision: decision })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -259,7 +261,7 @@ const AgUiToolsBasedGenUiExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), agenticGenerativeUiEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: agenticGenerativeUiEndpoint, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), agenticGenerativeUiEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticGenerativeUiEndpoint, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Project plan',
                             message: 'Create a project plan for building a mobile app.',

package/lib/examples/AgentCheckpointsExample.js

@@ -29,7 +29,8 @@ import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
-import { useAgentsRuntimes, useAgentRuntimes, useAgentRuntimesQuery, useRefreshAgentRuntimes, } from '../hooks/useAgentRuntimes';
+import { useAgentsRuntimes, useAgentRuntimesQuery, useRefreshAgentRuntimes, } from '../hooks/useAgentRuntimes';
+import { useExampleAgentRuntimes as useAgentRuntimes } from './hooks/useExampleAgentRuntimes';
 import { useAgentLifecycle } from '../hooks/useCheckpoints';
 import { useDeletePausedAgentRuntime } from '../hooks/useCheckpoints';
 import { AGENT_STATUS_COLORS } from '../types/agents';
@@ -189,10 +190,10 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
             id: rt.id,
             podName: rt.pod_name,
             name: rt.name,
-            description: rt.environment_title || rt.environment_name,
+            description: rt.environment.title || rt.environment.name,
             status: rt.status,
             protocol: 'vercel-ai',
-            environmentName: rt.environment_name,
+            environmentName: rt.environment.name,
             jupyterBaseUrl: rt.url,
         }));
     }, [agentRuntimes, runningAgentsOverride]);
@@ -312,7 +313,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                             borderRight: '1px solid',
                             borderColor: 'border.default',
                             overflowY: 'auto',
-                            bg: 'canvas.subtle',
+                            bg: 'canvas.default',
                         }, children: [_jsxs(Box, { sx: {
                                     order: 3,
                                     p: 3,
@@ -435,7 +436,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                                 gap: 3,
                                 px: 3,
                             }, children: [_jsx(AgentIcon, { size: 48 }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Checkpoint Agent" }), _jsxs(Text, { sx: { color: 'fg.muted', textAlign: 'center', maxWidth: 560 }, children: ["Launch a cloud agent runtime with pause/resume checkpointing. The agent will be deployed from the", ' ', _jsx("strong", { children: AGENTSPEC_ID }), " spec."] }), displayError && (_jsx(Flash, { variant: "danger", sx: { maxWidth: 560, width: '100%' }, children: displayError })), _jsx(Button, { variant: "primary", size: "large", leadingVisual: PlayIcon, onClick: handleLaunch, children: "Launch Agent" })] })) : (isReady || runtimeStatus === 'resumed') &&
-                            runtimeStatus !== 'paused' ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", brandIcon: _jsx(AgentIcon, { size: 16 }), placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                            runtimeStatus !== 'paused' ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", brandIcon: _jsx(AgentIcon, { size: 16 }), placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: true, kernelIndicatorPlacement: "right", showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'KPIs',
                                     message: "Show me today's sales KPI dashboard",

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;