@datalayer/agent-runtimes 1.0.1 → 1.0.3

package/lib/examples/AgentTriggersExample.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AgentTriggersExample
+ *
+ * Demonstrates multiple trigger types for agents: cron schedules,
+ * webhook URLs, event-based listeners, and manual invocations.
+ *
+ * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ *   Runtimes API and deploys an agent via its sidecar
+ * - Shows a tabbed control panel to configure each trigger type
+ * - Lists recent trigger history and next scheduled run
+ */
+import React from 'react';
+declare const AgentTriggersExample: React.FC;
+export default AgentTriggersExample;

package/lib/examples/AgentTriggersExample.js

@@ -0,0 +1,523 @@
+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.
+ */
+/**
+ * AgentTriggersExample
+ *
+ * Demonstrates multiple trigger types for agents: cron schedules,
+ * webhook URLs, event-based listeners, and manual invocations.
+ *
+ * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
+ *   Runtimes API and deploys an agent via its sidecar
+ * - Shows a tabbed control panel to configure each trigger type
+ * - Lists recent trigger history and next scheduled run
+ */
+/// <reference types="vite/client" />
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Text, Button, Spinner, Heading, Label, TextInput, Flash, Timeline, Truncate, Tooltip, } from '@primer/react';
+import { AlertIcon, ClockIcon, SyncIcon, CheckCircleIcon, XCircleIcon, PlayIcon, SignOutIcon, GlobeIcon, ZapIcon, EyeIcon, EyeClosedIcon, TrashIcon, CopyIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+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 { useAgentEvents, useDeleteAgentEvent, useMarkEventRead, useMarkEventUnread, useAIAgentsWebSocket, } from '../hooks';
+const queryClient = new QueryClient();
+// ─── Constants ─────────────────────────────────────────────────────────────
+const AGENT_NAME = 'trigger-demo-agent';
+const AGENT_SPEC_ID = 'demo-one-trigger';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const DEFAULT_CRON = '0 8 * * *'; // daily at 08:00 UTC
+// ─── Inner component (rendered after auth) ─────────────────────────────────
+const AgentTriggerInner = ({ onLogout, }) => {
+    const { token } = useSimpleAuthStore();
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(AGENT_NAME);
+    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const chatAuthToken = token === null ? undefined : token;
+    // Cron state
+    const [cronExpr, setCronExpr] = useState(DEFAULT_CRON);
+    const [editCron, setEditCron] = useState(DEFAULT_CRON);
+    const [nextRun, setNextRun] = useState(null);
+    const [triggerHistory, setTriggerHistory] = useState([]);
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [isTriggeringNow, setIsTriggeringNow] = useState(false);
+    const [triggerFlash, setTriggerFlash] = useState(null);
+    // Tab state
+    const [activeTab, setActiveTab] = useState('once');
+    // Once trigger state
+    const [isLaunchingOnce, setIsLaunchingOnce] = useState(false);
+    const [onceFlash, setOnceFlash] = useState(null);
+    // Webhook state
+    const [webhookUrl, setWebhookUrl] = useState(null);
+    const [webhookSecret, setWebhookSecret] = useState(null);
+    const [webhookEnabled, setWebhookEnabled] = useState(false);
+    // Event state
+    const [eventTopic, setEventTopic] = useState('');
+    const [eventFilter, setEventFilter] = useState('');
+    const [eventSubscribed, setEventSubscribed] = useState(false);
+    // Events hooks
+    const eventsQuery = useAgentEvents(agentId);
+    const deleteEventMutation = useDeleteAgentEvent(agentId);
+    const markReadMutation = useMarkEventRead(agentId);
+    const markUnreadMutation = useMarkEventUnread(agentId);
+    const agentEvents = eventsQuery.data?.events ?? [];
+    // WebSocket for real-time event updates
+    useAIAgentsWebSocket({
+        channels: agentId ? [`agent:${agentId}`] : [],
+    });
+    // Authenticated fetch helper (for sidecar endpoints)
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    // ── Create agent on local server ─────────────────────────────────────────
+    useEffect(() => {
+        let isCancelled = false;
+        const createAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            try {
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: AGENT_NAME,
+                        description: 'Agent with cron, webhook, event, and manual triggers',
+                        agent_library: 'pydantic-ai',
+                        transport: 'ag-ui',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        tools: [],
+                    }),
+                });
+                let resolvedAgentId = AGENT_NAME;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || AGENT_NAME;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const data = await response.json().catch(() => null);
+                        detail =
+                            (typeof data?.detail === 'string' && data.detail) ||
+                                (typeof data?.message === 'string' && data.message) ||
+                                '';
+                    }
+                    else {
+                        detail = await response.text();
+                    }
+                    if (response.status === 409 || /already exists/i.test(detail || '')) {
+                        // Agent already running — reuse it
+                    }
+                    else {
+                        throw new Error(detail || `Failed to create agent: ${response.status}`);
+                    }
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, authFetch]);
+    // ── Poll trigger metadata ─────────────────────────────────────────────
+    // TODO: enable once the ai-agents service exposes /trigger and
+    //       /trigger/history endpoints on the platform API.
+    //       Currently these endpoints don't exist on either the local
+    //       agent-runtimes server or the ai-agents service.
+    // ── Update cron ──────────────────────────────────────────────────────────
+    const handleUpdateCron = useCallback(async () => {
+        if (!agentBaseUrl || !editCron.trim())
+            return;
+        setIsUpdating(true);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger`, {
+                method: 'PUT',
+                body: JSON.stringify({ cron: editCron.trim() }),
+            });
+            if (res.ok) {
+                const d = await res.json();
+                setCronExpr(d.cron ?? editCron.trim());
+                if (d.next_run)
+                    setNextRun(d.next_run);
+            }
+        }
+        catch {
+            /* ok */
+        }
+        finally {
+            setIsUpdating(false);
+        }
+    }, [agentBaseUrl, agentId, editCron, authFetch]);
+    // ── Manual trigger ───────────────────────────────────────────────────────
+    const handleTriggerNow = useCallback(async () => {
+        if (!agentBaseUrl)
+            return;
+        setIsTriggeringNow(true);
+        setTriggerFlash(null);
+        const runId = `manual-${Date.now()}`;
+        const startTime = new Date().toISOString();
+        setTriggerHistory(prev => [
+            {
+                id: runId,
+                timestamp: startTime,
+                status: 'running',
+                source: 'manual',
+            },
+            ...prev,
+        ]);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/run`, { method: 'POST', body: JSON.stringify({ source: 'manual' }) });
+            if (res.ok) {
+                setTriggerFlash('Trigger fired successfully');
+                setTriggerHistory(prev => prev.map(r => r.id === runId
+                    ? {
+                        ...r,
+                        status: 'success',
+                        duration_ms: Date.now() - new Date(startTime).getTime(),
+                    }
+                    : r));
+            }
+            else {
+                setTriggerFlash(`Trigger failed (${res.status})`);
+                setTriggerHistory(prev => prev.map(r => r.id === runId ? { ...r, status: 'failure' } : r));
+            }
+        }
+        catch {
+            setTriggerFlash('Network error');
+            setTriggerHistory(prev => prev.map(r => r.id === runId ? { ...r, status: 'failure' } : r));
+        }
+        finally {
+            setIsTriggeringNow(false);
+        }
+    }, [agentBaseUrl, agentId, authFetch]);
+    // ── Webhook management ─────────────────────────────────────────────────
+    const handleGenerateWebhook = useCallback(async () => {
+        if (!agentBaseUrl)
+            return;
+        setIsUpdating(true);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/webhook`, { method: 'POST' });
+            if (res.ok) {
+                const d = await res.json();
+                setWebhookUrl(d.url ?? null);
+                setWebhookSecret(d.secret ?? null);
+                setWebhookEnabled(true);
+            }
+        }
+        catch {
+            /* ok */
+        }
+        finally {
+            setIsUpdating(false);
+        }
+    }, [agentBaseUrl, agentId, authFetch]);
+    const handleToggleWebhook = useCallback(async () => {
+        if (!agentBaseUrl)
+            return;
+        try {
+            await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/webhook`, {
+                method: 'PATCH',
+                body: JSON.stringify({ enabled: !webhookEnabled }),
+            });
+            setWebhookEnabled(prev => !prev);
+        }
+        catch {
+            /* ok */
+        }
+    }, [agentBaseUrl, agentId, webhookEnabled, authFetch]);
+    // ── Event subscription ─────────────────────────────────────────────────
+    const handleSubscribeEvent = useCallback(async () => {
+        if (!agentBaseUrl || !eventTopic.trim())
+            return;
+        setIsUpdating(true);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/event`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    topic: eventTopic.trim(),
+                    filter: eventFilter.trim() || undefined,
+                }),
+            });
+            if (res.ok) {
+                setEventSubscribed(true);
+            }
+        }
+        catch {
+            /* ok */
+        }
+        finally {
+            setIsUpdating(false);
+        }
+    }, [agentBaseUrl, agentId, eventTopic, eventFilter, authFetch]);
+    // ── Launch once trigger ──────────────────────────────────────────────────
+    const handleLaunchOnce = useCallback(async () => {
+        if (!agentBaseUrl)
+            return;
+        setIsLaunchingOnce(true);
+        setOnceFlash(null);
+        const runId = `once-${Date.now()}`;
+        const startTime = new Date().toISOString();
+        setTriggerHistory(prev => [
+            {
+                id: runId,
+                timestamp: startTime,
+                status: 'running',
+                source: 'once',
+            },
+            ...prev,
+        ]);
+        try {
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/run`, { method: 'POST', body: JSON.stringify({ source: 'once' }) });
+            if (res.ok) {
+                setOnceFlash('Once trigger launched — agent will run and terminate.');
+                setTriggerHistory(prev => prev.map(r => r.id === runId
+                    ? {
+                        ...r,
+                        status: 'success',
+                        duration_ms: Date.now() - new Date(startTime).getTime(),
+                    }
+                    : r));
+            }
+            else {
+                setOnceFlash(`Launch failed (${res.status})`);
+                setTriggerHistory(prev => prev.map(r => r.id === runId ? { ...r, status: 'failure' } : r));
+            }
+        }
+        catch {
+            setOnceFlash('Network error');
+            setTriggerHistory(prev => prev.map(r => r.id === runId ? { ...r, status: 'failure' } : r));
+        }
+        finally {
+            setIsLaunchingOnce(false);
+        }
+    }, [agentBaseUrl, agentId, authFetch]);
+    // ── Loading / Error ──────────────────────────────────────────────────────
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
+                        ? 'Launching runtime for trigger agent…'
+                        : 'Creating trigger demo agent…' })] }));
+    }
+    if (runtimeStatus === 'error' || hookError) {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+    }
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    flexShrink: 0,
+                }, children: [_jsx(ClockIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Triggers \u2014 ", agentId] }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Trigger Agent", placeholder: "Ask about your scheduled or event-driven KPI reports\u2026", description: `Cron: ${cronExpr} | Webhook: ${webhookEnabled ? 'on' : 'off'} | Event: ${eventSubscribed ? eventTopic : 'none'}`, showHeader: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                                {
+                                    title: 'Last run',
+                                    message: 'What happened in the last scheduled run?',
+                                },
+                                { title: 'KPIs today', message: "Show me today's KPI summary" },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 380,
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: 'auto',
+                        }, children: [_jsx(Box, { sx: {
+                                    display: 'flex',
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                    flexShrink: 0,
+                                }, children: [
+                                    { key: 'once', icon: ZapIcon, label: 'Once' },
+                                    { key: 'cron', icon: ClockIcon, label: 'Cron' },
+                                    {
+                                        key: 'webhook',
+                                        icon: GlobeIcon,
+                                        label: 'Webhook',
+                                    },
+                                    { key: 'event', icon: ZapIcon, label: 'Event' },
+                                    {
+                                        key: 'manual',
+                                        icon: PlayIcon,
+                                        label: 'Manual',
+                                    },
+                                ].map(t => (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: t.icon, onClick: () => setActiveTab(t.key), sx: {
+                                        flex: 1,
+                                        borderRadius: 0,
+                                        borderBottom: activeTab === t.key ? '2px solid' : '2px solid transparent',
+                                        borderColor: activeTab === t.key ? 'accent.fg' : 'transparent',
+                                        fontWeight: activeTab === t.key ? 'bold' : 'normal',
+                                    }, children: t.label }, t.key))) }), activeTab === 'once' && (_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(ZapIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Once Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Launch the agent once. It will execute its trigger prompt, emit lifecycle events (AGENT_STARTED / AGENT_ENDED), and then terminate the runtime automatically." }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: ZapIcon, onClick: handleLaunchOnce, disabled: isLaunchingOnce, sx: { width: '100%' }, children: isLaunchingOnce ? 'Launching…' : 'Launch Once' }), onceFlash && (_jsx(Flash, { variant: onceFlash.includes('launched') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: onceFlash }))] })), activeTab === 'cron' && (_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(ClockIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Cron Schedule" })] }), _jsxs(Label, { variant: "primary", sx: { mb: 2, display: 'inline-block' }, children: ["Current: ", cronExpr] }), nextRun && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Next run: ", new Date(nextRun).toLocaleString()] })), _jsxs(Box, { sx: { display: 'flex', gap: 2, mb: 2 }, children: [_jsx(TextInput, { value: editCron, onChange: e => setEditCron(e.target.value), placeholder: "* * * * *", sx: { flex: 1 }, size: "small" }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: SyncIcon, onClick: handleUpdateCron, disabled: isUpdating, children: isUpdating ? 'Saving…' : 'Update' })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: "Standard cron syntax: minute hour day month weekday" })] })), activeTab === 'webhook' && (_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(GlobeIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Webhook Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Generate a unique URL that triggers this agent on incoming HTTP POST requests. Useful for CI/CD pipelines, external services, or custom integrations." }), webhookUrl ? (_jsxs(_Fragment, { children: [_jsx(Label, { variant: webhookEnabled ? 'success' : 'secondary', sx: { mb: 2, display: 'inline-block' }, children: webhookEnabled ? 'Active' : 'Disabled' }), _jsx(Box, { sx: {
+                                                    bg: 'canvas.subtle',
+                                                    p: 2,
+                                                    borderRadius: 2,
+                                                    mb: 2,
+                                                    fontFamily: 'mono',
+                                                    fontSize: 0,
+                                                    wordBreak: 'break-all',
+                                                }, children: webhookUrl }), webhookSecret && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: "Secret:" }), _jsx(Box, { sx: {
+                                                            bg: 'canvas.subtle',
+                                                            p: 2,
+                                                            borderRadius: 2,
+                                                            mt: 1,
+                                                            fontFamily: 'mono',
+                                                            fontSize: 0,
+                                                        }, children: webhookSecret })] })), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", leadingVisual: CopyIcon, onClick: () => navigator.clipboard.writeText(webhookUrl), children: "Copy URL" }), _jsx(Button, { size: "small", variant: webhookEnabled ? 'danger' : 'primary', onClick: handleToggleWebhook, children: webhookEnabled ? 'Disable' : 'Enable' })] })] })) : (_jsx(Button, { size: "small", variant: "primary", leadingVisual: GlobeIcon, onClick: handleGenerateWebhook, disabled: isUpdating, sx: { width: '100%' }, children: isUpdating ? 'Generating…' : 'Generate Webhook URL' }))] })), activeTab === 'event' && (_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(ZapIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Event Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Subscribe to a Kafka topic or internal event stream. The agent triggers on matching messages." }), eventSubscribed ? (_jsxs(_Fragment, { children: [_jsxs(Label, { variant: "success", sx: { mb: 2, display: 'inline-block' }, children: ["Subscribed to: ", eventTopic] }), eventFilter && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Filter: ", eventFilter] })), _jsx(Button, { size: "small", variant: "danger", onClick: () => setEventSubscribed(false), sx: { width: '100%' }, children: "Unsubscribe" })] })) : (_jsxs(_Fragment, { children: [_jsx(TextInput, { value: eventTopic, onChange: e => setEventTopic(e.target.value), placeholder: "e.g. kpi.daily-report", sx: { width: '100%', mb: 2 }, size: "small" }), _jsx(TextInput, { value: eventFilter, onChange: e => setEventFilter(e.target.value), placeholder: "Optional JSONPath filter", sx: { width: '100%', mb: 2 }, size: "small" }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: ZapIcon, onClick: handleSubscribeEvent, disabled: isUpdating || !eventTopic.trim(), sx: { width: '100%' }, children: isUpdating ? 'Subscribing…' : 'Subscribe' })] }))] })), activeTab === 'manual' && (_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(PlayIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Manual Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Fire the agent immediately. This is equivalent to the cron job executing but bypasses the schedule." }), _jsx(Button, { size: "small", leadingVisual: PlayIcon, onClick: handleTriggerNow, disabled: isTriggeringNow, sx: { width: '100%' }, children: isTriggeringNow ? 'Triggering…' : 'Trigger Now' }), triggerFlash && (_jsx(Flash, { variant: triggerFlash.includes('success') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: triggerFlash }))] })), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Trigger History" }), triggerHistory.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No trigger runs recorded yet." })) : (_jsx(Timeline, { children: triggerHistory.slice(0, 20).map(rec => (_jsxs(Timeline.Item, { children: [_jsx(Timeline.Badge, { children: rec.status === 'success' ? (_jsx(CheckCircleIcon, {})) : rec.status === 'failure' ? (_jsx(XCircleIcon, {})) : (_jsx(Spinner, { size: "small" })) }), _jsx(Timeline.Body, { children: _jsxs(Text, { sx: { fontSize: 0 }, children: [new Date(rec.timestamp).toLocaleString(), ' — ', _jsx(Label, { variant: rec.status === 'success'
+                                                                    ? 'success'
+                                                                    : rec.status === 'failure'
+                                                                        ? 'danger'
+                                                                        : 'accent', size: "small", children: rec.status }), rec.duration_ms != null && (_jsxs(Text, { sx: { ml: 1, color: 'fg.muted' }, children: ["(", (rec.duration_ms / 1000).toFixed(1), "s)"] }))] }) })] }, rec.id))) })), _jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Agent Events" }), agentEvents.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No agent events yet." })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [...agentEvents]
+                                            .sort((a, b) => new Date(b.created_at).getTime() -
+                                            new Date(a.created_at).getTime())
+                                            .map((evt) => (_jsxs(Box, { sx: {
+                                                p: 2,
+                                                bg: evt.read ? 'canvas.subtle' : 'accent.subtle',
+                                                borderRadius: 2,
+                                                border: '1px solid',
+                                                borderColor: evt.read
+                                                    ? 'border.default'
+                                                    : 'accent.muted',
+                                            }, children: [_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 1,
+                                                        mb: 1,
+                                                    }, children: [_jsx(Label, { variant: evt.kind === 'agent-started'
+                                                                ? 'accent'
+                                                                : evt.kind === 'agent-ended'
+                                                                    ? 'success'
+                                                                    : evt.kind?.includes('alert')
+                                                                        ? 'danger'
+                                                                        : 'attention', size: "small", children: evt.kind }), _jsx(Text, { sx: { flex: 1, fontSize: 0, fontWeight: 'bold' }, children: evt.title }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                whiteSpace: 'nowrap',
+                                                            }, children: new Date(evt.created_at).toLocaleString() }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
+                                                                const payload = {
+                                                                    eventId: String(evt.id),
+                                                                    eventAgentId: String(evt.agent_id || agentId || ''),
+                                                                };
+                                                                if (evt.read) {
+                                                                    markUnreadMutation.mutate(payload);
+                                                                }
+                                                                else {
+                                                                    markReadMutation.mutate(payload);
+                                                                }
+                                                            }, sx: { p: 1 }, children: evt.read ? (_jsx(EyeClosedIcon, { size: 12 })) : (_jsx(EyeIcon, { size: 12 })) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => deleteEventMutation.mutate(evt.id), sx: { p: 1, color: 'danger.fg' }, children: _jsx(TrashIcon, { size: 12 }) })] }), evt.payload &&
+                                                    (() => {
+                                                        const p = evt.payload;
+                                                        return (_jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [evt.kind === 'agent-ended' && p.outputs && (_jsx(Tooltip, { text: String(p.outputs), direction: "n", children: _jsx("button", { type: "button", "aria-label": String(p.outputs), style: {
+                                                                            all: 'unset',
+                                                                            display: 'block',
+                                                                            width: '100%',
+                                                                            cursor: 'default',
+                                                                        }, children: _jsxs(Box, { sx: {
+                                                                                mb: 1,
+                                                                                display: 'flex',
+                                                                                alignItems: 'baseline',
+                                                                                gap: 1,
+                                                                                minWidth: 0,
+                                                                            }, children: [_jsx(Text, { as: "span", sx: {
+                                                                                        fontWeight: 'bold',
+                                                                                        color: 'fg.default',
+                                                                                        whiteSpace: 'nowrap',
+                                                                                    }, children: "Output:" }), _jsx(Truncate, { title: String(p.outputs), maxWidth: "100%", sx: { minWidth: 0, flex: 1 }, children: String(p.outputs) })] }) }) })), evt.kind === 'agent-ended' &&
+                                                                    p.duration_ms != null && (_jsxs(Text, { as: "p", children: ["Duration:", ' ', (Number(p.duration_ms) / 1000).toFixed(1), "s"] })), evt.kind?.includes('guardrail') && p.message && (_jsx(Text, { as: "p", children: String(p.message) }))] }));
+                                                    })()] }, evt.id))) }))] })] })] })] }));
+};
+// ─── Sync token to core IAM store ──────────────────────────────────────────
+const syncTokenToIamStore = (token) => {
+    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        iamStore.setState({ token });
+    });
+};
+// ─── Main component with auth gate ─────────────────────────────────────────
+const AgentTriggersExample = () => {
+    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const hasSynced = useRef(false);
+    useEffect(() => {
+        if (token && !hasSynced.current) {
+            hasSynced.current = true;
+            syncTokenToIamStore(token);
+        }
+    }, [token]);
+    const handleSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        hasSynced.current = true;
+        syncTokenToIamStore(newToken);
+    }, [setAuth]);
+    const handleLogout = useCallback(() => {
+        clearAuth();
+        hasSynced.current = false;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: undefined });
+        });
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Triggers", description: "Sign in to configure cron, webhook, event, and manual triggers.", leadingIcon: _jsx(ClockIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentTriggerInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentTriggersExample;

package/lib/examples/{AgentRuntimeFormExample.d.ts → AgentspecExample.d.ts}

@@ -1,13 +1,12 @@
 import React from 'react';
-import type { Transport } from '../components/chat';
-import { type AgentLibrary, type McpServerSelection } from '../components';
+import type { AgentLibrary, McpServerSelection, Protocol } from '../types';
 /**
  * Agent Runtime Example Component
  *
  * Demonstrates the multi-transport, multi-agent architecture of agent-runtimes.
  *
  * Features:
- * - Agent library selection (Pydantic AI, LangChain, Simple AI)
+ * - Agent library selection (Pydantic AI, LangChain, Google ADK, etc.)
  * - Transport selection (ACP, AG-UI, A2A)
  * - Configurable WebSocket URL and Agent ID
  * - Real-time streaming responses
@@ -59,7 +58,7 @@ type AgentRuntimeFormExampleProps = {
     initialBaseUrl?: string;
     initialAgentName?: string;
     initialAgentLibrary?: AgentLibrary;
-    initialTransport?: Transport;
+    initialTransport?: Protocol;
     initialModel?: string;
     initialEnableCodemode?: boolean;
     initialAllowDirectToolCalls?: boolean;