@datalayer/agent-runtimes 0.0.2

package/lib/examples/AgUiAgenticExample.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { ChatFloating } from '../components/chat';
+// AG-UI endpoint for agentic chat example
+const AGENTIC_CHAT_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_chat/';
+/**
+ * AgUiAgenticExample Component
+ *
+ * Shows a floating chat button that opens a chat popup connected to
+ * the Agentic Chat AG-UI example.
+ *
+ * Features demonstrated:
+ * - Basic AG-UI SSE streaming
+ * - Tool calling (current_time tool)
+ * - Floating popup interface
+ */
+const AgUiAgenticExample = () => {
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                minHeight: '100vh',
+                backgroundColor: 'canvas.default',
+                padding: 4,
+            }, children: [_jsxs(Box, { sx: {
+                        maxWidth: '800px',
+                        margin: '0 auto',
+                    }, children: [_jsx(Text, { as: "h1", sx: {
+                                fontSize: 4,
+                                fontWeight: 'bold',
+                                marginBottom: 2,
+                            }, children: "AG-UI: Agentic Example" }), _jsx(Text, { as: "p", sx: {
+                                fontSize: 2,
+                                color: 'fg.muted',
+                                marginBottom: 4,
+                            }, children: "Click the chat button in the bottom-right corner to start a conversation with an AI agent that can use tools." }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Available Tools" }), _jsx(Box, { as: "ul", sx: { paddingLeft: 3 }, children: _jsxs(Box, { as: "li", sx: { marginBottom: 1 }, children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 1 }, children: "current_time()" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [' ', "- Returns the current date and time"] })] }) }), _jsx(Text, { as: "p", sx: {
+                                        fontSize: 1,
+                                        color: 'fg.muted',
+                                        marginTop: 3,
+                                    }, children: "Try asking: \"What time is it?\" or \"What's the current date?\"" })] }), _jsxs(Box, { sx: {
+                                marginTop: 4,
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                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"] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_CHAT_ENDPOINT, title: "Agentic Chat", description: "Chat with an AI agent that can use tools like getting the current time.", position: "bottom-right", brandColor: "#7c3aed", defaultOpen: true, suggestions: [
+                        {
+                            title: 'What time is it?',
+                            message: 'What is the current time?',
+                        },
+                        {
+                            title: "Today's date",
+                            message: "What's the current date?",
+                        },
+                    ] })] }) }));
+};
+export default AgUiAgenticExample;

package/lib/examples/AgUiBackendToolRenderingExample.d.ts

@@ -0,0 +1,30 @@
+/**
+ * AgUiBackendToolRenderingExample
+ *
+ * Demonstrates backend tool rendering where tools execute on the server
+ * and return structured data that the frontend renders INLINE in the chat.
+ *
+ * This example shows a weather assistant that fetches real weather data
+ * and renders beautiful weather cards directly in the chat conversation,
+ * similar to the AG-UI Dojo implementation.
+ *
+ * Backend: /api/v1/examples/backend_tool_rendering/
+ */
+import React from 'react';
+/**
+ * AgUiBackendToolRenderingExample Component
+ *
+ * Demonstrates backend tool rendering with AG-UI.
+ * The agent has a `get_weather` tool that calls the Open-Meteo API
+ * and returns weather data. This data is rendered INLINE in the chat
+ * as a beautiful weather card with dynamic theming.
+ *
+ * Features demonstrated:
+ * - Backend tool execution
+ * - Real API integration (Open-Meteo)
+ * - INLINE rendering of tool results in chat
+ * - Dynamic theming based on weather conditions
+ * - Loading states while fetching data
+ */
+declare const AgUiBackendToolRenderingExample: React.FC;
+export default AgUiBackendToolRenderingExample;

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -0,0 +1,103 @@
+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.
+ */
+/**
+ * AgUiBackendToolRenderingExample
+ *
+ * Demonstrates backend tool rendering where tools execute on the server
+ * and return structured data that the frontend renders INLINE in the chat.
+ *
+ * This example shows a weather assistant that fetches real weather data
+ * and renders beautiful weather cards directly in the chat conversation,
+ * similar to the AG-UI Dojo implementation.
+ *
+ * Backend: /api/v1/examples/backend_tool_rendering/
+ */
+import { useCallback } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { ChatFloating } from '../components/chat';
+import { InlineWeatherCard } from './ag-ui/weather';
+// AG-UI endpoint for backend tool rendering example
+const BACKEND_TOOL_RENDERING_ENDPOINT = 'http://localhost:8765/api/v1/examples/backend_tool_rendering/';
+/**
+ * Render function for tool results - renders weather cards inline in chat
+ */
+const renderWeatherToolResult = (context) => {
+    // Only render for the get_weather tool
+    if (context.toolName !== 'get_weather') {
+        return null;
+    }
+    // Extract location from args
+    const location = context.args?.location;
+    // Cast result to WeatherResult if available
+    const weatherResult = context.result;
+    return (_jsx(InlineWeatherCard, { location: location, result: weatherResult, status: context.status, error: context.error }));
+};
+/**
+ * AgUiBackendToolRenderingExample Component
+ *
+ * Demonstrates backend tool rendering with AG-UI.
+ * The agent has a `get_weather` tool that calls the Open-Meteo API
+ * and returns weather data. This data is rendered INLINE in the chat
+ * as a beautiful weather card with dynamic theming.
+ *
+ * Features demonstrated:
+ * - Backend tool execution
+ * - Real API integration (Open-Meteo)
+ * - INLINE rendering of tool results in chat
+ * - Dynamic theming based on weather conditions
+ * - Loading states while fetching data
+ */
+const AgUiBackendToolRenderingExample = () => {
+    // Optional: still track weather for sidebar display if needed
+    const handleStateUpdate = useCallback((_state) => {
+        // State updates are still available if needed for other purposes
+        // Uncomment to debug: console.log('[WeatherExample] State update:', _state);
+    }, []);
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                minHeight: '100vh',
+                backgroundColor: 'canvas.default',
+                padding: 4,
+            }, children: [_jsxs(Box, { sx: {
+                        maxWidth: '800px',
+                        margin: '0 auto',
+                    }, children: [_jsx(Text, { as: "h1", sx: {
+                                fontSize: 4,
+                                fontWeight: 'bold',
+                                marginBottom: 2,
+                            }, children: "AG-UI: Backend Tool Rendering (Inline)" }), _jsxs(Text, { as: "p", sx: {
+                                fontSize: 2,
+                                color: 'fg.muted',
+                                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',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: ["This demonstrates ", _jsx("strong", { children: "inline backend tool rendering" }), ' ', "with AG-UI. When the agent calls the ", _jsx("code", { children: "get_weather" }), ' ', "tool, the result is rendered as a beautiful weather card directly in the chat conversation, similar to the AG-UI Dojo implementation."] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Features:" }), _jsxs(Box, { as: "ul", sx: {
+                                                paddingLeft: 3,
+                                                marginTop: 1,
+                                                fontSize: 1,
+                                                color: 'fg.muted',
+                                            }, children: [_jsx("li", { children: "\uD83C\uDF24\uFE0F Dynamic background colors based on weather conditions" }), _jsx("li", { children: "\uD83C\uDFA8 Weather icons (sun, rain, cloud)" }), _jsx("li", { children: "\uD83C\uDF21\uFE0F Temperature in both Celsius and Fahrenheit" }), _jsx("li", { children: "\uD83D\uDCA8 Humidity, wind speed, and feels-like stats" }), _jsx("li", { children: "\u23F3 Loading spinner while fetching data" })] })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Try these prompts:" }), _jsxs(Box, { as: "ul", sx: {
+                                                paddingLeft: 3,
+                                                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?\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: BACKEND_TOOL_RENDERING_ENDPOINT, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: "#667eea", onStateUpdate: handleStateUpdate, renderToolResult: renderWeatherToolResult, suggestions: [
+                        {
+                            title: 'Paris weather',
+                            message: "What's the weather like in Paris?",
+                        },
+                        {
+                            title: 'Tokyo forecast',
+                            message: 'Show me the weather forecast for Tokyo.',
+                        },
+                    ] })] }) }));
+};
+export default AgUiBackendToolRenderingExample;

package/lib/examples/AgUiHaikuGenUIExample.d.ts

@@ -0,0 +1,44 @@
+/**
+ * AgUiHaikuGenUIExample
+ *
+ * Demonstrates tool-based generative UI where the agent generates haiku
+ * poetry that is rendered:
+ * 1. INLINE in the chat conversation
+ * 2. In a main display area (carousel) for a richer experience
+ *
+ * This follows the AG-UI Dojo pattern where tool results are rendered
+ * as UI components in both locations.
+ *
+ * Backend: /api/v1/examples/haiku_generative_ui/
+ */
+import React from 'react';
+import { type HaikuResult } from './ag-ui/haiku';
+/**
+ * Ref handle for haiku state synchronization between chat and main display
+ */
+export interface HaikuDisplayHandle {
+    /** Add a new haiku to the display */
+    addHaiku: (haiku: HaikuResult) => void;
+    /** Get current haikus */
+    getHaikus: () => HaikuResult[];
+    /** Clear all haikus */
+    clearHaikus: () => void;
+}
+/**
+ * AgUiHaikuGenUIExample Component
+ *
+ * Demonstrates tool-based generative UI with haiku generation.
+ * The agent has a `generate_haiku` tool that returns structured
+ * haiku data. This data is rendered:
+ * - INLINE in the chat as a haiku card
+ * - In the main view as part of a carousel
+ *
+ * Features demonstrated:
+ * - Tool-based generative UI
+ * - Ref-based state synchronization between chat and main view
+ * - Carousel display for multiple haikus
+ * - Dynamic gradient backgrounds
+ * - Japanese/English text rendering
+ */
+declare const AgUiHaikuGenUIExample: React.FC;
+export default AgUiHaikuGenUIExample;

package/lib/examples/AgUiHaikuGenUIExample.js

@@ -0,0 +1,151 @@
+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.
+ */
+/**
+ * AgUiHaikuGenUIExample
+ *
+ * Demonstrates tool-based generative UI where the agent generates haiku
+ * poetry that is rendered:
+ * 1. INLINE in the chat conversation
+ * 2. In a main display area (carousel) for a richer experience
+ *
+ * This follows the AG-UI Dojo pattern where tool results are rendered
+ * as UI components in both locations.
+ *
+ * Backend: /api/v1/examples/haiku_generative_ui/
+ */
+import { useState, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { ChatFloating } from '../components/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/';
+/**
+ * HaikuDisplayWithRef - A display component that exposes a ref for external control.
+ *
+ * This allows the chat's tool rendering to update the main display
+ * when new haikus are generated.
+ */
+const HaikuDisplayWithRef = forwardRef(({ title }, ref) => {
+    const [haikus, setHaikus] = useState([]);
+    // Expose methods via ref
+    useImperativeHandle(ref, () => ({
+        addHaiku: (haiku) => {
+            setHaikus(prev => [haiku, ...prev]); // Newest first
+        },
+        getHaikus: () => haikus,
+        clearHaikus: () => setHaikus([]),
+    }));
+    return _jsx(HaikuDisplay, { haikus: haikus, title: title });
+});
+HaikuDisplayWithRef.displayName = 'HaikuDisplayWithRef';
+/**
+ * AgUiHaikuGenUIExample Component
+ *
+ * Demonstrates tool-based generative UI with haiku generation.
+ * The agent has a `generate_haiku` tool that returns structured
+ * haiku data. This data is rendered:
+ * - INLINE in the chat as a haiku card
+ * - In the main view as part of a carousel
+ *
+ * Features demonstrated:
+ * - Tool-based generative UI
+ * - Ref-based state synchronization between chat and main view
+ * - Carousel display for multiple haikus
+ * - Dynamic gradient backgrounds
+ * - Japanese/English text rendering
+ */
+const AgUiHaikuGenUIExample = () => {
+    // Ref to the main display for adding haikus
+    const displayRef = useRef(null);
+    // Track processed tool call IDs to avoid duplicates
+    const processedToolCallIds = useRef(new Set());
+    /**
+     * Render function for tool results - renders haiku cards inline in chat
+     * and also updates the main display
+     */
+    const renderHaikuToolResult = useCallback((context) => {
+        // Only render for the generate_haiku tool
+        if (context.toolName !== 'generate_haiku') {
+            return null;
+        }
+        // Extract haiku data from args (the tool's parameters are what we render)
+        const args = context.args;
+        // Build haiku result from args
+        const haiku = args.japanese && args.english
+            ? {
+                japanese: args.japanese,
+                english: args.english,
+                gradient: args.gradient ||
+                    'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            }
+            : undefined;
+        // When tool completes successfully, add to main display (deduplicated)
+        if (context.status === 'complete' &&
+            haiku &&
+            displayRef.current &&
+            context.toolCallId &&
+            !processedToolCallIds.current.has(context.toolCallId)) {
+            processedToolCallIds.current.add(context.toolCallId);
+            displayRef.current.addHaiku(haiku);
+        }
+        return (_jsx(InlineHaikuCard, { haiku: haiku, status: context.status, error: context.error }));
+    }, []);
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                minHeight: '100vh',
+                backgroundColor: 'canvas.default',
+                padding: 4,
+            }, children: [_jsxs(Box, { sx: {
+                        maxWidth: '800px',
+                        margin: '0 auto',
+                    }, children: [_jsx(Text, { as: "h1", sx: {
+                                fontSize: 4,
+                                fontWeight: 'bold',
+                                marginBottom: 2,
+                            }, children: "AG-UI: Haiku Generative UI" }), _jsx(Text, { as: "p", sx: {
+                                fontSize: 2,
+                                color: 'fg.muted',
+                                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',
+                                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',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: ["This demonstrates ", _jsx("strong", { children: "tool-based generative UI" }), " with AG-UI. When the agent generates a haiku using the", ' ', _jsx("code", { children: "generate_haiku" }), " tool, it's rendered as a beautiful card both in the chat and in the main display area above."] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Features:" }), _jsxs(Box, { as: "ul", sx: {
+                                                paddingLeft: 3,
+                                                marginTop: 1,
+                                                fontSize: 1,
+                                                color: 'fg.muted',
+                                            }, children: [_jsx("li", { children: "\uD83C\uDFA8 Beautiful gradient backgrounds matching mood" }), _jsx("li", { children: "\uD83C\uDDEF\uD83C\uDDF5 Japanese text with English translation" }), _jsx("li", { children: "\uD83D\uDCDA Carousel to browse your haiku collection" }), _jsx("li", { children: "\uD83D\uDD04 Real-time rendering as the tool executes" }), _jsx("li", { children: "\u2728 Synchronized display between chat and main view" })] })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Try these prompts:" }), _jsxs(Box, { as: "ul", sx: {
+                                                paddingLeft: 3,
+                                                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: "#667eea", defaultOpen: true, renderToolResult: renderHaikuToolResult, hideMessagesAfterToolUI: true, suggestions: [
+                        {
+                            title: 'Cherry blossoms',
+                            message: 'Write me a haiku about cherry blossoms in spring.',
+                        },
+                        {
+                            title: 'Night coding',
+                            message: 'Create a haiku about coding late at night.',
+                        },
+                        {
+                            title: 'Mountain path',
+                            message: 'Generate a haiku about hiking a mountain trail.',
+                        },
+                    ] })] }) }));
+};
+export default AgUiHaikuGenUIExample;

package/lib/examples/AgUiHumanInTheLoopExample.d.ts

@@ -0,0 +1,26 @@
+/**
+ * AgUiHumanInTheLoopExample
+ *
+ * Demonstrates a floating chat popup that connects to the AG-UI
+ * Human in the Loop example backend. This shows how to implement
+ * approval workflows where the human must approve generated plans.
+ *
+ * Backend: /api/v1/examples/human_in_the_loop/
+ *
+ * Pattern: Uses renderToolResult with respond callback for human-in-the-loop
+ * interactions, matching the CopilotKit useHumanInTheLoop pattern.
+ */
+import React from 'react';
+/**
+ * AgUiHumanInTheLoopExample Component
+ *
+ * Demonstrates human-in-the-loop approval patterns with AG-UI.
+ * The agent generates task steps that require human approval before proceeding.
+ *
+ * Features demonstrated:
+ * - Tool call rendering with Reject/Confirm buttons
+ * - respond callback for sending user decisions back to the agent
+ * - UI state changes based on user actions
+ */
+declare const AgUiHumanInTheLoopExample: React.FC;
+export default AgUiHumanInTheLoopExample;

package/lib/examples/AgUiHumanInTheLoopExample.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgUiHumanInTheLoopExample
+ *
+ * Demonstrates a floating chat popup that connects to the AG-UI
+ * Human in the Loop example backend. This shows how to implement
+ * approval workflows where the human must approve generated plans.
+ *
+ * Backend: /api/v1/examples/human_in_the_loop/
+ *
+ * Pattern: Uses renderToolResult with respond callback for human-in-the-loop
+ * interactions, matching the CopilotKit useHumanInTheLoop pattern.
+ */
+import { useState, useEffect } from 'react';
+import { Text, Checkbox, FormControl, Label, ProgressBar, Button, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { ChatFloating } from '../components/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/';
+/**
+ * StepsFeedback Component
+ *
+ * Renders the task steps with Reject/Confirm buttons.
+ * Matches the CopilotKit pattern for human-in-the-loop tool rendering.
+ */
+const StepsFeedback = ({ args, status, respond, result }) => {
+    const [localSteps, setLocalSteps] = useState([]);
+    const [accepted, setAccepted] = useState(null);
+    // Helper to normalize steps - handles both string[] and TaskStep[]
+    const normalizeSteps = (rawSteps) => {
+        if (!rawSteps || !Array.isArray(rawSteps))
+            return [];
+        return rawSteps.map(step => {
+            // Handle string steps (from tool args)
+            if (typeof step === 'string') {
+                return { description: step, status: 'enabled' };
+            }
+            // Handle TaskStep objects (from state snapshot)
+            return {
+                description: step.description || '',
+                status: step.status || 'enabled',
+            };
+        });
+    };
+    // Initialize local steps when status becomes executing
+    useEffect(() => {
+        if (status === 'executing' && localSteps.length === 0) {
+            const normalized = normalizeSteps(args.steps);
+            if (normalized.length > 0) {
+                setLocalSteps(normalized);
+            }
+        }
+    }, [status, args.steps, localSteps.length]);
+    // Check if result has accepted status (for completed state)
+    useEffect(() => {
+        if (status === 'complete' && result && accepted === null) {
+            const r = result;
+            if (typeof r.accepted === 'boolean') {
+                setAccepted(r.accepted);
+            }
+        }
+    }, [status, result, accepted]);
+    const normalizedSteps = normalizeSteps(args.steps);
+    if (normalizedSteps.length === 0) {
+        return null;
+    }
+    const displaySteps = localSteps.length > 0 ? localSteps : normalizedSteps;
+    const enabledCount = displaySteps.filter(s => s.status === 'enabled').length;
+    const progress = displaySteps.length > 0 ? (enabledCount / displaySteps.length) * 100 : 0;
+    const handleStepToggle = (index) => {
+        setLocalSteps(prev => prev.map((step, i) => i === index
+            ? {
+                ...step,
+                status: step.status === 'enabled' ? 'disabled' : 'enabled',
+            }
+            : step));
+    };
+    const handleReject = () => {
+        if (respond) {
+            setAccepted(false);
+            respond({ accepted: false });
+        }
+    };
+    const handleConfirm = () => {
+        if (respond) {
+            setAccepted(true);
+            respond({
+                accepted: true,
+                steps: localSteps.filter(step => step.status === 'enabled'),
+            });
+        }
+    };
+    return (_jsxs(Box, { "data-testid": "select-steps", sx: {
+            width: '100%',
+            padding: 3,
+            backgroundColor: 'canvas.subtle',
+            borderRadius: 2,
+            border: '1px solid',
+            borderColor: 'border.default',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 3,
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TasklistIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Select Steps" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [enabledCount, "/", displaySteps.length, " Selected"] }), _jsx(Label, { variant: status === 'executing' ? 'accent' : 'secondary', size: "small", children: status === 'executing' ? 'Ready' : 'Waiting' })] })] }), _jsx(ProgressBar, { progress: progress, barSize: "small", sx: { mb: 3 } }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }, children: displaySteps.map((step, index) => (_jsxs(Box, { "data-testid": "step-item", sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        padding: 2,
+                        borderRadius: 2,
+                        backgroundColor: step.status === 'enabled' ? 'success.subtle' : 'canvas.default',
+                        border: '1px solid',
+                        borderColor: step.status === 'enabled' ? 'success.muted' : 'border.muted',
+                        opacity: status !== 'executing' ? 0.7 : 1,
+                        cursor: status === 'executing' ? 'pointer' : 'default',
+                        transition: 'all 0.2s ease',
+                    }, onClick: () => status === 'executing' && handleStepToggle(index), children: [_jsx(FormControl, { disabled: status !== 'executing', children: _jsx(Checkbox, { checked: step.status === 'enabled', onChange: () => handleStepToggle(index), disabled: status !== 'executing' }) }), _jsx(Text, { "data-testid": "step-text", sx: {
+                                flex: 1,
+                                fontSize: 1,
+                                textDecoration: step.status === 'disabled' ? 'line-through' : 'none',
+                                color: step.status === 'disabled' ? 'fg.muted' : 'fg.default',
+                            }, children: step.description }), step.status === 'enabled' && (_jsx(CheckCircleFillIcon, { size: 16, className: "color-fg-success" }))] }, index))) }), accepted === null && (_jsxs(Box, { sx: { display: 'flex', justifyContent: 'center', gap: 3, mt: 3 }, children: [_jsxs(Button, { variant: "default", disabled: status !== 'executing', onClick: handleReject, sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                        }, children: [_jsx(XCircleFillIcon, { size: 14 }), "Reject"] }), _jsxs(Button, { variant: "primary", disabled: status !== 'executing', onClick: handleConfirm, sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            backgroundColor: 'success.emphasis',
+                            '&:hover': {
+                                backgroundColor: 'success.emphasis',
+                            },
+                        }, children: [_jsx(CheckCircleFillIcon, { size: 14 }), "Confirm", _jsx(Label, { variant: "accent", size: "small", sx: { ml: 1, backgroundColor: 'rgba(255,255,255,0.2)' }, children: enabledCount })] })] })), accepted !== null && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 3 }, children: _jsx(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        px: 4,
+                        py: 2,
+                        borderRadius: 2,
+                        backgroundColor: accepted ? 'success.subtle' : 'danger.subtle',
+                        border: '1px solid',
+                        borderColor: accepted ? 'success.muted' : 'danger.muted',
+                    }, children: accepted ? (_jsxs(_Fragment, { children: [_jsx(CheckCircleFillIcon, { size: 16, className: "color-fg-success" }), _jsx(Text, { sx: { fontWeight: 'semibold', color: 'success.fg' }, children: "Accepted" })] })) : (_jsxs(_Fragment, { children: [_jsx(XCircleFillIcon, { size: 16, className: "color-fg-danger" }), _jsx(Text, { sx: { fontWeight: 'semibold', color: 'danger.fg' }, children: "Rejected" })] })) }) }))] }));
+};
+/**
+ * Render function for the generate_task_steps tool
+ *
+ * This matches the CopilotKit pattern where:
+ * - args: Tool arguments (the steps array)
+ * - status: 'inProgress' | 'executing' | 'complete' | 'error'
+ * - respond: Callback to send result back (only when status === 'executing')
+ * - result: Tool result (only when status === 'complete')
+ */
+const renderTaskStepsTool = (context) => {
+    const { toolName, args, status, respond, result } = context;
+    // Only render for the generate_task_steps tool
+    if (toolName !== 'generate_task_steps') {
+        return null;
+    }
+    return (_jsx(StepsFeedback, { args: args, status: status, respond: respond, result: result }));
+};
+/**
+ * AgUiHumanInTheLoopExample Component
+ *
+ * Demonstrates human-in-the-loop approval patterns with AG-UI.
+ * The agent generates task steps that require human approval before proceeding.
+ *
+ * Features demonstrated:
+ * - Tool call rendering with Reject/Confirm buttons
+ * - respond callback for sending user decisions back to the agent
+ * - UI state changes based on user actions
+ */
+const AgUiHumanInTheLoopExample = () => {
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                minHeight: '100vh',
+                backgroundColor: 'canvas.default',
+                padding: 4,
+            }, children: [_jsxs(Box, { sx: {
+                        maxWidth: '800px',
+                        margin: '0 auto',
+                    }, children: [_jsx(Text, { as: "h1", sx: {
+                                fontSize: 4,
+                                fontWeight: 'bold',
+                                marginBottom: 2,
+                            }, children: "AG-UI: Human in the Loop Example" }), _jsx(Text, { as: "p", sx: {
+                                fontSize: 2,
+                                color: 'fg.muted',
+                                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',
+                                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',
+                                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: "#059669", renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
+                        {
+                            title: 'Plan a trip',
+                            message: 'Plan a weekend trip to Paris.',
+                        },
+                        {
+                            title: 'Organize party',
+                            message: 'Plan a birthday party for next Saturday.',
+                        },
+                    ] })] }) }));
+};
+export default AgUiHumanInTheLoopExample;