@datalayer/agent-runtimes 0.0.2

package/lib/examples/ag-ui/haiku/InlineHaikuCard.js

@@ -0,0 +1,117 @@
+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.
+ */
+/**
+ * InlineHaikuCard - A beautiful haiku card component for inline rendering.
+ *
+ * Inspired by the AG-UI Dojo implementation, this component renders haiku
+ * poetry with gradient backgrounds and Japanese/English text.
+ *
+ * @module examples/ag-ui/haiku/InlineHaikuCard
+ */
+import { Spinner } from '@primer/react';
+/**
+ * Default gradient if none specified
+ */
+const DEFAULT_GRADIENT = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+/**
+ * InlineHaikuCard Component
+ *
+ * Renders a beautiful haiku card inline in the chat or in a display area with:
+ * - Custom gradient background
+ * - Japanese text (decorative, larger)
+ * - English translation (below)
+ * - Decorative corner accents
+ */
+export function InlineHaikuCard({ haiku, status, error, size = 'normal', }) {
+    const isLarge = size === 'large';
+    const cardWidth = isLarge ? 400 : 300;
+    const japaneseSize = isLarge ? 24 : 18;
+    const englishSize = isLarge ? 14 : 12;
+    const padding = isLarge ? 24 : 16;
+    // Show loading state for inProgress or executing
+    if (status === 'inProgress' || status === 'executing' || !haiku) {
+        return (_jsxs("div", { style: {
+                background: DEFAULT_GRADIENT,
+                borderRadius: 12,
+                padding: padding,
+                marginTop: 12,
+                marginBottom: 8,
+                maxWidth: cardWidth,
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+            }, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { style: { color: 'white', fontSize: 14 }, children: status === 'inProgress'
+                        ? 'Composing haiku...'
+                        : 'Generating haiku...' })] }));
+    }
+    // Show error state
+    if (status === 'error') {
+        return (_jsx("div", { style: {
+                backgroundColor: '#E53E3E',
+                borderRadius: 12,
+                padding: padding,
+                marginTop: 12,
+                marginBottom: 8,
+                maxWidth: cardWidth,
+                width: '100%',
+            }, children: _jsxs("span", { style: { color: 'white', fontSize: 14 }, children: ["Error: ", error || 'Failed to generate haiku'] }) }));
+    }
+    const gradient = haiku.gradient || DEFAULT_GRADIENT;
+    return (_jsxs("div", { "data-testid": "haiku-card", style: {
+            background: gradient,
+            borderRadius: 12,
+            marginTop: 12,
+            marginBottom: 8,
+            maxWidth: cardWidth,
+            width: '100%',
+            overflow: 'hidden',
+            position: 'relative',
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    width: 60,
+                    height: 60,
+                    background: 'rgba(255, 255, 255, 0.1)',
+                    borderBottomLeftRadius: '100%',
+                } }), _jsx("div", { style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    width: 40,
+                    height: 40,
+                    background: 'rgba(255, 255, 255, 0.08)',
+                    borderTopRightRadius: '100%',
+                } }), _jsxs("div", { style: {
+                    padding: padding,
+                    position: 'relative',
+                    zIndex: 1,
+                }, children: [_jsx("div", { "data-testid": "haiku-japanese", style: {
+                            marginBottom: isLarge ? 20 : 16,
+                        }, children: haiku.japanese.map((line, index) => (_jsx("p", { style: {
+                                color: 'white',
+                                fontSize: japaneseSize,
+                                fontWeight: 500,
+                                margin: 0,
+                                marginBottom: index < haiku.japanese.length - 1 ? 4 : 0,
+                                textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+                                lineHeight: 1.4,
+                            }, children: line }, `jp-${index}`))) }), _jsx("div", { style: {
+                            width: 40,
+                            height: 2,
+                            background: 'rgba(255, 255, 255, 0.4)',
+                            marginBottom: isLarge ? 16 : 12,
+                        } }), _jsx("div", { "data-testid": "haiku-english", children: haiku.english.map((line, index) => (_jsx("p", { style: {
+                                color: 'rgba(255, 255, 255, 0.85)',
+                                fontSize: englishSize,
+                                fontStyle: 'italic',
+                                margin: 0,
+                                marginBottom: index < haiku.english.length - 1 ? 2 : 0,
+                                lineHeight: 1.5,
+                            }, children: line }, `en-${index}`))) })] })] }));
+}
+export default InlineHaikuCard;

package/lib/examples/ag-ui/haiku/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Haiku example components for AG-UI tool-based generative UI.
+ *
+ * This folder contains haiku-specific components that demonstrate
+ * tool-based generative UI where the backend generates haiku content
+ * that is rendered both inline in chat and in a main display area.
+ *
+ * @module examples/ag-ui/haiku
+ */
+export { InlineHaikuCard, type InlineHaikuCardProps, type HaikuResult, } from './InlineHaikuCard';
+export { HaikuDisplay, type HaikuDisplayProps } from './HaikuDisplay';

package/lib/examples/ag-ui/haiku/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Haiku example components for AG-UI tool-based generative UI.
+ *
+ * This folder contains haiku-specific components that demonstrate
+ * tool-based generative UI where the backend generates haiku content
+ * that is rendered both inline in chat and in a main display area.
+ *
+ * @module examples/ag-ui/haiku
+ */
+export { InlineHaikuCard, } from './InlineHaikuCard';
+export { HaikuDisplay } from './HaikuDisplay';

package/lib/examples/ag-ui/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AG-UI example components.
+ *
+ * This folder contains components that demonstrate various AG-UI patterns
+ * including weather cards, haiku generation, and other tool-based UIs.
+ *
+ * @module examples/ag-ui
+ */
+export { InlineWeatherCard, type InlineWeatherCardProps, type WeatherResult, } from './weather';
+export { InlineHaikuCard, HaikuDisplay, type InlineHaikuCardProps, type HaikuDisplayProps, type HaikuResult, } from './haiku';

package/lib/examples/ag-ui/index.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AG-UI example components.
+ *
+ * This folder contains components that demonstrate various AG-UI patterns
+ * including weather cards, haiku generation, and other tool-based UIs.
+ *
+ * @module examples/ag-ui
+ */
+// Weather components
+export { InlineWeatherCard, } from './weather';
+// Haiku components
+export { InlineHaikuCard, HaikuDisplay, } from './haiku';

package/lib/examples/ag-ui/weather/InlineWeatherCard.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Weather data structure returned by the backend tool
+ */
+export interface WeatherResult {
+    temperature: number;
+    feelsLike: number;
+    humidity: number;
+    windSpeed: number;
+    windGust?: number;
+    conditions: string;
+    location: string;
+}
+/**
+ * Props for InlineWeatherCard
+ * Status aligned with CopilotKit's useRenderToolCall pattern
+ */
+export interface InlineWeatherCardProps {
+    /** Location being queried */
+    location?: string;
+    /** Weather result data */
+    result?: WeatherResult;
+    /**
+     * Current status:
+     * - 'inProgress': Arguments are being streamed
+     * - 'executing': Tool is executing on backend
+     * - 'complete': Tool completed successfully
+     * - 'error': Tool execution failed
+     */
+    status: 'inProgress' | 'executing' | 'complete' | 'error';
+    /** Error message if status is 'error' */
+    error?: string;
+}
+/**
+ * InlineWeatherCard Component
+ *
+ * Renders a beautiful weather card inline in the chat with:
+ * - Dynamic background color based on weather conditions
+ * - Weather icon (sun, rain, cloud)
+ * - Temperature in both Celsius and Fahrenheit
+ * - Humidity, wind speed, and feels like temperature
+ */
+export declare function InlineWeatherCard({ location, result, status, error, }: InlineWeatherCardProps): import("react/jsx-runtime").JSX.Element;
+export default InlineWeatherCard;

package/lib/examples/ag-ui/weather/InlineWeatherCard.js

@@ -0,0 +1,180 @@
+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.
+ */
+/**
+ * InlineWeatherCard - A beautiful weather card component for inline rendering.
+ *
+ * Inspired by the AG-UI Dojo implementation, this component renders weather
+ * data with dynamic theming based on weather conditions.
+ *
+ * @module components/chat/components/InlineWeatherCard
+ */
+import { Spinner } from '@primer/react';
+/**
+ * Get theme color based on weather conditions
+ */
+function getThemeColor(conditions) {
+    const conditionLower = conditions.toLowerCase();
+    if (conditionLower.includes('clear') || conditionLower.includes('sunny')) {
+        return '#667eea'; // Purple-blue for clear
+    }
+    if (conditionLower.includes('rain') ||
+        conditionLower.includes('storm') ||
+        conditionLower.includes('drizzle')) {
+        return '#4A5568'; // Gray for rain
+    }
+    if (conditionLower.includes('cloud') || conditionLower.includes('overcast')) {
+        return '#718096'; // Slate for clouds
+    }
+    if (conditionLower.includes('snow') || conditionLower.includes('frost')) {
+        return '#63B3ED'; // Light blue for snow
+    }
+    if (conditionLower.includes('fog') || conditionLower.includes('mist')) {
+        return '#A0AEC0'; // Light gray for fog
+    }
+    return '#764ba2'; // Default purple
+}
+/**
+ * Sun icon SVG
+ */
+function SunIcon() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 56, height: 56, color: '#FED7AA' }, children: [_jsx("circle", { cx: "12", cy: "12", r: "5" }), _jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42", strokeWidth: "2", stroke: "currentColor" })] }));
+}
+/**
+ * Rain icon SVG
+ */
+function RainIcon() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 56, height: 56, color: '#90CDF4' }, children: [_jsx("path", { d: "M12 4C8.68629 4 6 6.68629 6 10C6 10.5523 5.55228 11 5 11C4.44772 11 4 10.5523 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 10.5523 19.5523 11 19 11C18.4477 11 18 10.5523 18 10C18 6.68629 15.3137 4 12 4Z" }), _jsx("path", { d: "M8 14L6 22M12 14L10 22M16 14L14 22", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round" })] }));
+}
+/**
+ * Cloud icon SVG
+ */
+function CloudIcon() {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 56, height: 56, color: '#E2E8F0' }, children: _jsx("path", { d: "M6.5 19C3.46243 19 1 16.5376 1 13.5C1 10.4624 3.46243 8 6.5 8C6.66896 8 6.83618 8.00748 7.00129 8.02216C8.04619 5.61876 10.3459 4 13 4C16.3137 4 19 6.68629 19 10C19 10.0736 18.9983 10.1469 18.9948 10.2198C21.2505 10.6646 23 12.6392 23 15C23 17.7614 20.7614 20 18 20H6.5C6.5 20 6.5 19 6.5 19Z" }) }));
+}
+/**
+ * Get weather icon based on conditions
+ */
+function WeatherIcon({ conditions }) {
+    if (!conditions)
+        return _jsx(CloudIcon, {});
+    const conditionLower = conditions.toLowerCase();
+    if (conditionLower.includes('clear') || conditionLower.includes('sunny')) {
+        return _jsx(SunIcon, {});
+    }
+    if (conditionLower.includes('rain') ||
+        conditionLower.includes('drizzle') ||
+        conditionLower.includes('snow') ||
+        conditionLower.includes('thunderstorm')) {
+        return _jsx(RainIcon, {});
+    }
+    return _jsx(CloudIcon, {});
+}
+/**
+ * InlineWeatherCard Component
+ *
+ * Renders a beautiful weather card inline in the chat with:
+ * - Dynamic background color based on weather conditions
+ * - Weather icon (sun, rain, cloud)
+ * - Temperature in both Celsius and Fahrenheit
+ * - Humidity, wind speed, and feels like temperature
+ */
+export function InlineWeatherCard({ location, result, status, error, }) {
+    // Show loading state for inProgress or executing (or when result not yet available)
+    if (status === 'inProgress' || status === 'executing' || !result) {
+        const themeColor = '#667eea';
+        const message = status === 'inProgress'
+            ? `Preparing to fetch weather${location ? ` for ${location}` : ''}...`
+            : `Fetching weather for ${location || 'location'}...`;
+        return (_jsxs("div", { style: {
+                backgroundColor: themeColor,
+                borderRadius: 12,
+                padding: 16,
+                marginTop: 12,
+                marginBottom: 8,
+                maxWidth: 320,
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+            }, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { style: { color: 'white', fontSize: 14 }, children: message })] }));
+    }
+    // Show error state
+    if (status === 'error') {
+        return (_jsx("div", { style: {
+                backgroundColor: '#E53E3E',
+                borderRadius: 12,
+                padding: 16,
+                marginTop: 12,
+                marginBottom: 8,
+                maxWidth: 320,
+                width: '100%',
+            }, children: _jsxs("span", { style: { color: 'white', fontSize: 14 }, children: ["Error: ", error || 'Failed to fetch weather'] }) }));
+    }
+    const themeColor = getThemeColor(result.conditions);
+    const celsiusTemp = result.temperature;
+    const fahrenheitTemp = ((celsiusTemp * 9) / 5 + 32).toFixed(1);
+    return (_jsx("div", { "data-testid": "weather-card", style: {
+            backgroundColor: themeColor,
+            borderRadius: 12,
+            marginTop: 12,
+            marginBottom: 8,
+            maxWidth: 320,
+            width: '100%',
+            overflow: 'hidden',
+        }, children: _jsxs("div", { style: {
+                backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                padding: 16,
+                width: '100%',
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }, children: [_jsxs("div", { children: [_jsx("h3", { "data-testid": "weather-city", style: {
+                                        fontSize: 18,
+                                        fontWeight: 'bold',
+                                        color: 'white',
+                                        margin: 0,
+                                        textTransform: 'capitalize',
+                                    }, children: result.location || location }), _jsx("p", { style: { color: 'white', margin: 0, fontSize: 14, marginTop: 4 }, children: "Current Weather" })] }), _jsx(WeatherIcon, { conditions: result.conditions })] }), _jsxs("div", { style: {
+                        marginTop: 16,
+                        display: 'flex',
+                        alignItems: 'flex-end',
+                        justifyContent: 'space-between',
+                    }, children: [_jsxs("div", { style: { fontSize: 32, fontWeight: 'bold', color: 'white' }, children: [_jsxs("span", { children: [celsiusTemp, "\u00B0 C"] }), _jsxs("span", { style: {
+                                        fontSize: 14,
+                                        color: 'rgba(255, 255, 255, 0.6)',
+                                        marginLeft: 8,
+                                    }, children: ["/ ", fahrenheitTemp, "\u00B0 F"] })] }), _jsx("div", { style: {
+                                fontSize: 14,
+                                color: 'white',
+                                textTransform: 'capitalize',
+                            }, children: result.conditions })] }), _jsx("div", { style: {
+                        marginTop: 16,
+                        paddingTop: 16,
+                        borderTop: '1px solid rgba(255, 255, 255, 0.3)',
+                    }, children: _jsxs("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: '1fr 1fr 1fr',
+                            gap: 8,
+                            textAlign: 'center',
+                        }, children: [_jsxs("div", { "data-testid": "weather-humidity", children: [_jsx("p", { style: { color: 'white', fontSize: 12, margin: 0 }, children: "Humidity" }), _jsxs("p", { style: {
+                                            color: 'white',
+                                            fontWeight: 500,
+                                            margin: 0,
+                                            marginTop: 4,
+                                        }, children: [result.humidity, "%"] })] }), _jsxs("div", { "data-testid": "weather-wind", children: [_jsx("p", { style: { color: 'white', fontSize: 12, margin: 0 }, children: "Wind" }), _jsxs("p", { style: {
+                                            color: 'white',
+                                            fontWeight: 500,
+                                            margin: 0,
+                                            marginTop: 4,
+                                        }, children: [result.windSpeed, " km/h"] })] }), _jsxs("div", { "data-testid": "weather-feels-like", children: [_jsx("p", { style: { color: 'white', fontSize: 12, margin: 0 }, children: "Feels Like" }), _jsxs("p", { style: {
+                                            color: 'white',
+                                            fontWeight: 500,
+                                            margin: 0,
+                                            marginTop: 4,
+                                        }, children: [result.feelsLike, "\u00B0"] })] })] }) })] }) }));
+}
+export default InlineWeatherCard;

package/lib/examples/ag-ui/weather/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Weather example components for AG-UI backend tool rendering.
+ *
+ * This folder contains weather-specific components that demonstrate
+ * inline tool rendering similar to CopilotKit's useCopilotAction pattern.
+ *
+ * @module examples/ag-ui/weather
+ */
+export { InlineWeatherCard, type InlineWeatherCardProps, type WeatherResult, } from './InlineWeatherCard';

package/lib/examples/ag-ui/weather/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Weather example components for AG-UI backend tool rendering.
+ *
+ * This folder contains weather-specific components that demonstrate
+ * inline tool rendering similar to CopilotKit's useCopilotAction pattern.
+ *
+ * @module examples/ag-ui/weather
+ */
+export { InlineWeatherCard, } from './InlineWeatherCard';

package/lib/examples/components/AgentConfiguration.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { Agent } from '../stores/examplesStore';
+import type { Transport, Extension } from '../../components/chat';
+type AgentLibrary = 'pydantic-ai' | 'langchain' | 'jupyter-ai';
+export type { AgentLibrary };
+export type { Transport };
+export type { Extension };
+declare const AGENT_LIBRARIES: {
+    value: AgentLibrary;
+    label: string;
+    description: string;
+    disabled?: boolean;
+}[];
+declare const TRANSPORTS: {
+    value: Transport;
+    label: string;
+    description: string;
+}[];
+declare const EXTENSIONS: {
+    value: Extension;
+    label: string;
+    description: string;
+}[];
+interface AgentConfigurationProps {
+    agentLibrary: AgentLibrary;
+    transport: Transport;
+    extensions: Extension[];
+    wsUrl: string;
+    baseUrl: string;
+    agentName: string;
+    agents: readonly Agent[];
+    selectedAgentId: string;
+    isCreatingAgent?: boolean;
+    createError?: string | null;
+    onAgentLibraryChange: (library: AgentLibrary) => void;
+    onTransportChange: (transport: Transport) => void;
+    onExtensionsChange: (extensions: Extension[]) => void;
+    onWsUrlChange: (url: string) => void;
+    onBaseUrlChange: (url: string) => void;
+    onAgentNameChange: (name: string) => void;
+    onAgentSelect: (agentId: string) => void;
+    onConnect: () => void;
+}
+/**
+ * Agent Configuration Component
+ *
+ * Form for configuring agent connection settings.
+ */
+export declare const AgentConfiguration: React.FC<AgentConfigurationProps>;
+export { AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS };

package/lib/examples/components/AgentConfiguration.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, TextInput, Button, FormControl, Select, CheckboxGroup, Checkbox, Spinner, Flash, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+const AGENT_LIBRARIES = [
+    {
+        value: 'pydantic-ai',
+        label: 'Pydantic AI',
+        description: 'Type-safe agents with Pydantic models',
+    },
+    {
+        value: 'langchain',
+        label: 'LangChain',
+        description: 'Complex chains and agent workflows',
+        disabled: true,
+    },
+    {
+        value: 'jupyter-ai',
+        label: 'Simple AI',
+        description: 'Simple notebook integration',
+        disabled: true,
+    },
+];
+const TRANSPORTS = [
+    {
+        value: 'ag-ui',
+        label: 'AG-UI',
+        description: 'Pydantic AI native UI transport',
+    },
+    {
+        value: 'acp',
+        label: 'ACP (Agent Client Protocol)',
+        description: 'Standard WebSocket-based transport',
+    },
+    {
+        value: 'vercel-ai',
+        label: 'Vercel AI',
+        description: 'HTTP streaming with Vercel AI',
+    },
+    {
+        value: 'vercel-ai-jupyter',
+        label: 'Vercel AI (Jupyter)',
+        description: 'Vercel AI via Jupyter server endpoint',
+    },
+    {
+        value: 'a2a',
+        label: 'A2A (Agent-to-Agent)',
+        description: 'Inter-agent communication',
+    },
+];
+const EXTENSIONS = [
+    {
+        value: 'mcp-ui',
+        label: 'MCP-UI',
+        description: 'MCP UI resources extension',
+    },
+    {
+        value: 'a2ui',
+        label: 'A2UI',
+        description: 'Agent-to-UI extension',
+    },
+];
+/**
+ * Agent Configuration Component
+ *
+ * Form for configuring agent connection settings.
+ */
+export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, agents, selectedAgentId, isCreatingAgent = false, createError = null, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onAgentSelect, onConnect, }) => {
+    // Determine which extensions are enabled based on transport
+    const isExtensionEnabled = (ext) => {
+        if (selectedAgentId !== 'new-agent')
+            return false;
+        if (transport === 'ag-ui')
+            return true; // Both mcp-ui and a2ui enabled
+        if (transport === 'a2a')
+            return ext === 'a2ui'; // Only a2ui enabled
+        return false; // All others disabled
+    };
+    // Handle extension checkbox change
+    const handleExtensionChange = (ext, checked) => {
+        if (checked) {
+            onExtensionsChange([...extensions, ext]);
+        }
+        else {
+            onExtensionsChange(extensions.filter(e => e !== ext));
+        }
+    };
+    return (_jsxs(Box, { sx: {
+            padding: 3,
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            backgroundColor: 'canvas.subtle',
+        }, children: [_jsx(Text, { sx: {
+                    fontSize: 2,
+                    fontWeight: 'bold',
+                    display: 'block',
+                    marginBottom: 3,
+                }, children: "Connection Settings" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: selectedAgentId === 'new-agent'
+                            ? 'Configure a new custom agent'
+                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
+                            ? onWsUrlChange(e.target.value)
+                            : onBaseUrlChange(e.target.value), disabled: selectedAgentId !== 'new-agent', placeholder: transport === 'acp'
+                            ? 'ws://localhost:8000/api/v1/acp/ws'
+                            : 'http://localhost:8000', sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: transport === 'acp'
+                            ? 'The WebSocket endpoint of your agent-runtimes server'
+                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), disabled: selectedAgentId !== 'new-agent', placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(CheckboxGroup, { sx: { marginBottom: 3 }, disabled: true, children: [_jsx(CheckboxGroup.Label, { children: "MCP Servers (Coming Soon)" }), _jsx(CheckboxGroup.Caption, { children: "Select MCP servers to connect to" }), _jsxs(FormControl, { disabled: true, children: [_jsx(Checkbox, { value: "github", defaultChecked: true, disabled: true }), _jsx(FormControl.Label, { children: "GitHub" })] }), _jsxs(FormControl, { disabled: true, children: [_jsx(Checkbox, { value: "anaconda", disabled: true }), _jsx(FormControl.Label, { children: "Anaconda" })] }), _jsxs(FormControl, { disabled: true, children: [_jsx(Checkbox, { value: "tavily", disabled: true }), _jsx(FormControl.Label, { children: "Tavily" })] })] }), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
+                    !agentName ||
+                    (transport === 'acp' ? !wsUrl : !baseUrl), sx: { width: '100%' }, children: isCreatingAgent ? (_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 2,
+                    }, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { children: "Creating Agent..." })] })) : selectedAgentId === 'new-agent' ? ('Create the Agent') : agents.find(a => a.id === selectedAgentId)?.status === 'running' ? ('Connect to the Agent') : ('Start and Connect to the Agent') })] }));
+};
+export { AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS };

package/lib/examples/components/AgentsDataTable.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface AgentsDataTableProps {
+    onToggleStatus?: (agentId: string) => void;
+    showAuthor?: boolean;
+    showLastEdited?: boolean;
+}
+/**
+ * Agents Data Table Component
+ *
+ * Displays agents in a table format with status controls.
+ */
+export declare const AgentsDataTable: React.FC<AgentsDataTableProps>;
+export {};