@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/examples/{AgUiHaikuGenUIExample.js → AgUiHaikuGenUiExample.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.
  */
 /**
- * AgUiHaikuGenUIExample
+ * AgUiHaikuGenUiExample
  *
  * Demonstrates tool-based generative UI where the agent generates haiku
  * poetry that is rendered:
@@ -19,8 +19,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
-import { ChatFloating } from '../components/chat';
+import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
+import { ChatFloating } from '../chat';
 import { InlineHaikuCard, HaikuDisplay } from './ag-ui/haiku';
 // AG-UI endpoint for haiku generative UI example
 const HAIKU_ENDPOINT = 'http://localhost:8765/api/v1/examples/haiku_generative_ui/';
@@ -44,7 +44,7 @@ const HaikuDisplayWithRef = forwardRef(({ title }, ref) => {
 });
 HaikuDisplayWithRef.displayName = 'HaikuDisplayWithRef';
 /**
- * AgUiHaikuGenUIExample Component
+ * AgUiHaikuGenUiExample Component
  *
  * Demonstrates tool-based generative UI with haiku generation.
  * The agent has a `generate_haiku` tool that returns structured
@@ -59,7 +59,7 @@ HaikuDisplayWithRef.displayName = 'HaikuDisplayWithRef';
  * - Dynamic gradient backgrounds
  * - Japanese/English text rendering
  */
-const AgUiHaikuGenUIExample = () => {
+const AgUiHaikuGenUiExample = () => {
     const brandColor = useThemeBrandColor();
     // Ref to the main display for adding haikus
     const displayRef = useRef(null);
@@ -134,7 +134,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, { endpoint: HAIKU_ENDPOINT, title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderHaikuToolResult, 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, { protocol: "ag-ui", endpoint: HAIKU_ENDPOINT, title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderHaikuToolResult, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Cherry blossoms',
                             message: 'Write me a haiku about cherry blossoms in spring.',
@@ -149,4 +149,4 @@ const AgUiHaikuGenUIExample = () => {
                         },
                     ] })] }) }));
 };
-export default AgUiHaikuGenUIExample;
+export default AgUiHaikuGenUiExample;

package/lib/examples/AgUiHumanInTheLoopExample.js

@@ -18,8 +18,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import { Text, Checkbox, FormControl, Label, ProgressBar, Button, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
-import { ChatFloating } from '../components/chat';
+import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
+import { ChatFloating } from '../chat';
 import { TasklistIcon, CheckCircleFillIcon, XCircleFillIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for human in the loop example
 const HUMAN_IN_THE_LOOP_ENDPOINT = 'http://localhost:8765/api/v1/examples/human_in_the_loop/';
@@ -207,7 +207,7 @@ const AgUiHumanInTheLoopExample = () => {
                                 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."] })] })] }), _jsx(ChatFloating, { endpoint: HUMAN_IN_THE_LOOP_ENDPOINT, 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: [
+                            }, 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."] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: HUMAN_IN_THE_LOOP_ENDPOINT, 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

@@ -15,8 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Text, Button, TextInput, Label } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
-import { ChatFloating } from '../components/chat';
+import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
+import { ChatFloating } from '../chat';
 import { PlusIcon, XIcon, BeakerIcon, ClockIcon, PersonIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for shared state example
 const SHARED_STATE_ENDPOINT = 'http://localhost:8765/api/v1/examples/shared_state/';
@@ -168,7 +168,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\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: SHARED_STATE_ENDPOINT, 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\"" })] })] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: SHARED_STATE_ENDPOINT, 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.d.ts → AgUiToolsBasedGenUiExample.d.ts}

@@ -1,5 +1,5 @@
 /**
- * AgUiToolsBasedGenUIExample
+ * AgUiToolsBasedGenUiExample
  *
  * Demonstrates tool-based generative UI where the backend calls tools
  * that render UI components. Unlike frontend tools, these are backend
@@ -9,7 +9,7 @@
  */
 import React from 'react';
 /**
- * AgUiToolsBasedGenUIExample Component
+ * AgUiToolsBasedGenUiExample Component
  *
  * Demonstrates tool-based generative UI with AG-UI.
  * The agent uses tools (create_plan, update_plan_step) that emit
@@ -21,5 +21,5 @@ import React from 'react';
  * - Real-time UI updates as agent works
  * - Interactive step selection with Confirm/Reject buttons
  */
-declare const AgUiToolsBasedGenUIExample: React.FC;
-export default AgUiToolsBasedGenUIExample;
+declare const AgUiToolsBasedGenUiExample: React.FC;
+export default AgUiToolsBasedGenUiExample;

package/lib/examples/{AgUiToolsBasedGenUIExample.js → AgUiToolsBasedGenUiExample.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.
  */
 /**
- * AgUiToolsBasedGenUIExample
+ * AgUiToolsBasedGenUiExample
  *
  * Demonstrates tool-based generative UI where the backend calls tools
  * that render UI components. Unlike frontend tools, these are backend
@@ -15,8 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Text, ProgressBar, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
-import { ChatFloating } from '../components/chat';
+import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
+import { ChatFloating } from '../chat';
 import { CheckCircleIcon, CircleIcon, DotFillIcon, CheckIcon, XIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for agentic generative UI example
 const AGENTIC_GENERATIVE_UI_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_generative_ui/';
@@ -156,7 +156,7 @@ const PlanDisplay = ({ plan, isInteractive = true, onStepToggle, onConfirm, onRe
                         : '✗ Plan rejected' }) }))] }));
 };
 /**
- * AgUiToolsBasedGenUIExample Component
+ * AgUiToolsBasedGenUiExample Component
  *
  * Demonstrates tool-based generative UI with AG-UI.
  * The agent uses tools (create_plan, update_plan_step) that emit
@@ -168,7 +168,7 @@ const PlanDisplay = ({ plan, isInteractive = true, onStepToggle, onConfirm, onRe
  * - Real-time UI updates as agent works
  * - Interactive step selection with Confirm/Reject buttons
  */
-const AgUiToolsBasedGenUIExample = () => {
+const AgUiToolsBasedGenUiExample = () => {
     const brandColor = useThemeBrandColor();
     const [plan, setPlan] = useState(null);
     const [decision, setDecision] = useState(null);
@@ -244,7 +244,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" })] })] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_GENERATIVE_UI_ENDPOINT, 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" })] })] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: AGENTIC_GENERATIVE_UI_ENDPOINT, 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.',
@@ -255,4 +255,4 @@ const AgUiToolsBasedGenUIExample = () => {
                         },
                     ] })] }) }));
 };
-export default AgUiToolsBasedGenUIExample;
+export default AgUiToolsBasedGenUiExample;

package/lib/examples/AgentCheckpointsExample.d.ts

@@ -0,0 +1,19 @@
+/**
+ * AgentCheckpointsExample
+ *
+ * Demonstrates launching a agent in the Datalayer cloud,
+ * with pause/resume (checkpoint) and lifecycle controls.
+ *
+ * Uses the `useAgent` hook which:
+ *   1. Creates a cloud agent runtime via the Datalayer Runtimes API
+ *      (environment: 'ai-agents-env')
+ *   2. Deploys an agent on the runtime's agent-runtimes sidecar
+ *   3. Provides pause/resume/terminate lifecycle backed by CRIU
+ *
+ * Prerequisites:
+ *   - Datalayer core configuration (runtimesRunUrl, aiagentsRunUrl)
+ *   - Valid IAM token (set via SignInSimple or iamStore)
+ */
+import React from 'react';
+declare const AgentCheckpointsExample: React.FC;
+export default AgentCheckpointsExample;