@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -20,7 +20,7 @@ import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
 import { ChatFloating } from '../chat';
-import { InlineWeatherCard } from './ag-ui/weather';
+import { InlineWeatherCard } from './components/weather';
 // AG-UI endpoint for backend tool rendering example
 const BACKEND_TOOL_RENDERING_ENDPOINT = 'http://localhost:8765/api/v1/examples/backend_tool_rendering/';
 /**

package/lib/examples/AgUiHaikuGenUiExample.d.ts

@@ -12,7 +12,7 @@
  * Backend: /api/v1/examples/haiku_generative_ui/
  */
 import React from 'react';
-import { type HaikuResult } from './ag-ui/haiku';
+import { type HaikuResult } from './components/haiku';
 /**
  * Ref handle for haiku state synchronization between chat and main display
  */

package/lib/examples/AgUiHaikuGenUiExample.js

@@ -21,7 +21,7 @@ import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
 import { ChatFloating } from '../chat';
-import { InlineHaikuCard, HaikuDisplay } from './ag-ui/haiku';
+import { InlineHaikuCard, HaikuDisplay, } from './components/haiku';
 // AG-UI endpoint for haiku generative UI example
 const HAIKU_ENDPOINT = 'http://localhost:8765/api/v1/examples/haiku_generative_ui/';
 /**

package/lib/examples/AgUiSharedStateExample.js

@@ -127,7 +127,8 @@ const AgUiSharedStateExample = () => {
         setRecipe(DEFAULT_RECIPE);
     }, []);
     return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                minHeight: '100vh',
+                height: '100%',
+                overflow: 'auto',
                 backgroundColor: 'canvas.default',
                 padding: 4,
             }, children: [_jsxs(Box, { sx: {

package/lib/examples/AgentCheckpointsExample.js

@@ -23,18 +23,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useEffect, useRef, useMemo, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, IconButton, Spinner, Label, Flash, Heading, Tooltip, } from '@primer/react';
-import { AlertIcon, PlayIcon, SquareIcon, HistoryIcon, CheckCircleIcon, WorkflowIcon, SignOutIcon, XCircleIcon, ClockIcon, TagIcon, GlobeIcon, ZapIcon, GraphIcon, AiModelIcon, PeopleIcon, SidebarCollapseIcon, SidebarExpandIcon, SyncIcon, AgentIcon, } from '@primer/octicons-react';
+import { AlertIcon, PlayIcon, SquareIcon, HistoryIcon, CheckCircleIcon, XCircleIcon, ClockIcon, TagIcon, GlobeIcon, ZapIcon, GraphIcon, AiModelIcon, PeopleIcon, SidebarCollapseIcon, SidebarExpandIcon, SyncIcon, AgentIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { ErrorView } from './components';
-import { coreStore } from '@datalayer/core';
+import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { SignInSimple } from '@datalayer/core/lib/views/iam';
-import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { Chat } from '../chat';
-import { useAgents } from '../hooks/useAgents';
+import { useAgentRuntimes, useAgentRuntimesQuery, useRefreshAgentRuntimes, useDeleteAgentRuntime, } from '../hooks/useAgentRuntimes';
 import { useAgentLifecycle } from '../hooks/useCheckpoints';
-import { useAgentRuntimes, useRefreshAgentRuntimes, useDeleteAgentRuntime, } from '../hooks/useAgents';
 import { useDeletePausedAgentRuntime } from '../hooks/useCheckpoints';
 import { AGENT_STATUS_COLORS } from '../types/agents';
 const queryClient = new QueryClient();
@@ -53,8 +49,8 @@ const AGENT_SPEC = {
     id: 'monitor-sales-kpis',
     name: 'Monitor Sales KPIs',
     description: 'Monitor and analyze sales KPIs from the CRM system. Generate daily reports, identify trends, and flag anomalies.',
-    model: 'bedrock:us.anthropic.claude-3-5-haiku-20241022-v1:0',
-    protocol: 'ag-ui',
+    model: 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0',
+    protocol: 'vercel-ai',
     memory: 'mem0',
     sandbox_variant: 'jupyter',
     environment_name: 'ai-agents-env',
@@ -89,14 +85,14 @@ const SpecRow = ({ icon: Icon, label, value }) => (_jsxs(Box, { sx: {
     }, children: [Icon && (_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0, mt: '2px' }, children: _jsx(Icon, { size: 12 }) })), _jsx(Text, { sx: { color: 'fg.muted', flexShrink: 0, minWidth: 80 }, children: label }), _jsx(Text, { sx: { fontWeight: 'semibold', wordBreak: 'break-word' }, children: value })] }));
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentCheckpointsInner = ({ onLogout, }) => {
-    const { token } = useSimpleAuthStore();
-    const { runtime, status: runtimeStatus, endpoint: _agentEndpoint, isReady, error: hookError, launchRuntime, connectToRuntime, disconnect, } = useAgents({
+    const { runtime, status: runtimeStatus, endpoint: _agentEndpoint, isReady, error: hookError, launchRuntime, connectToRuntime, disconnect, } = useAgentRuntimes({
         agentSpecId: AGENT_SPEC_ID,
         autoStart: false,
         agentSpec: AGENT_SPEC,
         agentConfig: {
             name: DEMO_AGENT_NAME,
-            protocol: 'ag-ui',
+            model: 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0',
+            protocol: 'vercel-ai',
             description: 'Monitor Sales KPI agent — exercises pause/resume checkpointing',
         },
     });
@@ -109,7 +105,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
         launchRuntime,
     });
     // Agent runtimes from the focused hook
-    const { data: agentRuntimes } = useAgentRuntimes();
+    const { data: agentRuntimes } = useAgentRuntimesQuery();
     const refetchRuntimes = useRefreshAgentRuntimes();
     const deleteRuntimeMutation = useDeleteAgentRuntime();
     const deletePausedRuntimeMutation = useDeletePausedAgentRuntime();
@@ -196,7 +192,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
             name: rt.name,
             description: rt.environment_title || rt.environment_name,
             status: rt.status,
-            protocol: 'ag-ui',
+            protocol: 'vercel-ai',
             environmentName: rt.environment_name,
             jupyterBaseUrl: rt.url,
         }));
@@ -309,7 +305,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                                     runtimeStatus === 'paused' ||
                                     runtimeStatus === 'resumed', children: "Checkpoint (Light) + Terminate" }), _jsx(Button, { size: "small", leadingVisual: SquareIcon, onClick: () => handlePause('criu'), disabled: actionLoading ||
                                     runtimeStatus === 'paused' ||
-                                    runtimeStatus === 'resumed', children: "Checkpoint (CRIU) + Terminate" }), runtimeStatus === 'paused' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode), disabled: actionLoading, children: resumeMode === 'light' ? 'Resume (light)' : 'Resume (criu)' }), _jsx(Button, { size: "small", variant: resumeMode === 'light' ? 'primary' : 'invisible', onClick: () => setResumeMode('light'), disabled: actionLoading, children: "Light" }), _jsx(Button, { size: "small", variant: resumeMode === 'criu' ? 'primary' : 'invisible', onClick: () => setResumeMode('criu'), disabled: actionLoading, children: "CRIU checkpoint" })] })) : null, _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: handleTerminate, disabled: actionLoading, children: "Terminate" })] })), actionLoading && _jsx(Spinner, { size: "small" }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), displayError && (_jsx(Flash, { variant: "danger", sx: { mx: 3, mt: 2 }, children: displayError })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [sidebarOpen && (_jsxs(Box, { sx: {
+                                    runtimeStatus === 'resumed', children: "Checkpoint (CRIU) + Terminate" }), runtimeStatus === 'paused' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: () => handleResume(resumeMode), disabled: actionLoading, children: resumeMode === 'light' ? 'Resume (light)' : 'Resume (criu)' }), _jsx(Button, { size: "small", variant: resumeMode === 'light' ? 'primary' : 'invisible', onClick: () => setResumeMode('light'), disabled: actionLoading, children: "Light" }), _jsx(Button, { size: "small", variant: resumeMode === 'criu' ? 'primary' : 'invisible', onClick: () => setResumeMode('criu'), disabled: actionLoading, children: "CRIU checkpoint" })] })) : null, _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: handleTerminate, disabled: actionLoading, children: "Terminate" })] })), actionLoading && _jsx(Spinner, { size: "small" })] }), displayError && (_jsx(Flash, { variant: "danger", sx: { mx: 3, mt: 2 }, children: displayError })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [sidebarOpen && (_jsxs(Box, { sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             width: SIDEBAR_WIDTH,
@@ -440,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: AGENT_SPEC_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: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: false, 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: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'KPIs',
                                     message: "Show me today's sales KPI dashboard",
@@ -462,7 +458,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
 };
 // ─── Main component with auth gate ─────────────────────────────────────────
 const AgentCheckpointsExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     // Sync persisted token (from a previous session) to iamStore on mount
     useEffect(() => {
@@ -474,13 +470,6 @@ const AgentCheckpointsExample = () => {
         }
     }, [token]);
     // Wrap setAuth to also sync the token to iamStore on sign-in
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        import('@datalayer/core/lib/state').then(({ iamStore }) => {
-            iamStore.setState({ token: newToken });
-        });
-    }, [setAuth]);
     // Clear iamStore token on logout
     const handleLogout = useCallback(() => {
         clearAuth();
@@ -489,11 +478,8 @@ const AgentCheckpointsExample = () => {
             iamStore.setState({ token: undefined });
         });
     }, [clearAuth]);
-    const loginUrl = useRef(`${coreStore.getState().configuration?.iamRunUrl ||
-        coreStore.getState().configuration?.runUrl ||
-        'https://prod1.datalayer.run'}/api/iam/v1/login`).current;
     if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), loginUrl: loginUrl, title: "Agent Checkpointing", description: "Sign in to launch and checkpoint durable agents.", leadingIcon: _jsx(WorkflowIcon, { size: 24 }) }) }));
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(ThemedProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(AgentCheckpointsInner, { onLogout: handleLogout }) }) }));
 };

package/lib/examples/AgentCodemodeExample.d.ts

@@ -1,13 +1,11 @@
 /**
  * AgentCodemodeExample
  *
- * Demonstrates Codemode: tools that return structured outputs with schemas
- * rendered inline as executable code blocks, diffs, or file previews.
+ * Compares two tooling modes side-by-side:
+ * - MCP tools without codemode conversion
+ * - MCP tools with codemode conversion
  *
- * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
- *   Runtimes API and deploys an agent on its sidecar
- * - Shows a code panel alongside the chat displaying tool outputs with
- *   syntax highlighting, diff views, and the ability to accept/reject changes
+ * A sidebar gauge tracks consumed tokens for each agent in real time.
  */
 import React from 'react';
 declare const AgentCodemodeExample: React.FC;