@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/examples/AgentTriggersExample.js

@@ -15,30 +15,49 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - Lists recent trigger history and next scheduled run
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
+import React, { 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 { ClockIcon, SyncIcon, CheckCircleIcon, XCircleIcon, PlayIcon, GlobeIcon, ZapIcon, EyeIcon, EyeClosedIcon, TrashIcon, CopyIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
 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 { useConnectedIdentities } from '../identity';
+import { ToolApprovalBanner, ToolApprovalDialog, } from '../chat/tools';
 import { useAgentEvents, useDeleteAgentEvent, useMarkEventRead, useMarkEventUnread, useAIAgentsWebSocket, } from '../hooks';
+import { VercelAIAdapter } from '../protocols';
+import { createUserMessage } from '../types/messages';
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'trigger-demo-agent';
 const AGENT_SPEC_ID = 'demo-one-trigger';
+const APPROVAL_AGENT_NAME = 'trigger-approval-demo-agent';
+const APPROVAL_AGENT_SPEC_ID = 'demo-one-trigger-approval';
+const ONCE_TRIGGER_PROMPT = "List the user's top 3 public and top 3 private GitHub repositories, ranked by recent activity, and provide a brief summary of each. Execute exactly two tool calls: run_skill_script(skill_name='github', script_name='list_repos', kwargs={visibility:'public', sort:'updated', limit:3, format:'json'}) and run_skill_script(skill_name='github', script_name='list_repos', kwargs={visibility:'private', sort:'updated', limit:3, format:'json'}). Do not call list_skills/load_skill/read_skill_resource. Do not retry. If a tool call fails, report failure_reason/error/stderr exactly as returned.";
+const ONCE_TRIGGER_APPROVAL_PROMPT = 'Use the runtime_sensitive_echo tool once.';
 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 connectedIdentities = useConnectedIdentities();
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const approvalAgentName = useRef(uniqueAgentId(APPROVAL_AGENT_NAME)).current;
+    const identitiesForRuns = React.useMemo(() => {
+        return connectedIdentities
+            .filter(identity => identity.token?.accessToken)
+            .map(identity => ({
+            provider: identity.provider,
+            accessToken: identity.token.accessToken,
+        }));
+    }, [connectedIdentities]);
+    const [runtimeStatus, setRuntimeStatus] = useState('idle');
     const [isReady, setIsReady] = useState(false);
     const [hookError, setHookError] = useState(null);
-    const [agentId, setAgentId] = useState(AGENT_NAME);
+    const [agentId, setAgentId] = useState(agentName);
     const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
     const chatAuthToken = token === null ? undefined : token;
     // Cron state
@@ -54,24 +73,143 @@ const AgentTriggerInner = ({ onLogout, }) => {
     // Once trigger state
     const [isLaunchingOnce, setIsLaunchingOnce] = useState(false);
     const [onceFlash, setOnceFlash] = useState(null);
+    const [lastOnceStartedAt, setLastOnceStartedAt] = useState(null);
+    const [hasTriggeredOnce, setHasTriggeredOnce] = useState(false);
+    const [streamedOnceOutput, setStreamedOnceOutput] = useState(null);
+    const [streamedOnceEndedAt, setStreamedOnceEndedAt] = useState(null);
     // Webhook state
     const [webhookUrl, setWebhookUrl] = useState(null);
     const [webhookSecret, setWebhookSecret] = useState(null);
     const [webhookEnabled, setWebhookEnabled] = useState(false);
+    // Sidebar messages state
+    const [sidebarMessages, setSidebarMessages] = useState([]);
+    const [sidebarMessagesError, setSidebarMessagesError] = useState(null);
     // Event state
     const [eventTopic, setEventTopic] = useState('');
     const [eventFilter, setEventFilter] = useState('');
     const [eventSubscribed, setEventSubscribed] = useState(false);
+    // Approval agent state
+    const [approvalAgentId, setApprovalAgentId] = useState(approvalAgentName);
+    const [approvalAgentReady, setApprovalAgentReady] = useState(false);
+    const [isLaunchingApproval, setIsLaunchingApproval] = useState(false);
+    const [hasTriggeredApproval, setHasTriggeredApproval] = useState(false);
+    const [approvalFlash, setApprovalFlash] = useState(null);
+    const toApprovalRequest = useCallback((payload) => ({
+        id: payload.id,
+        tool_name: payload.tool_name,
+        tool_args: payload.tool_args,
+        tool_call_id: payload.tool_call_id ?? undefined,
+        note: payload.note ?? undefined,
+        created_at: payload.created_at,
+        status: payload.status,
+        agent_id: payload.agent_id,
+    }), []);
+    const [approvals, setApprovals] = useState([]);
+    const [approvalLoading, setApprovalLoading] = useState(null);
+    const [approvalError, setApprovalError] = useState(null);
+    const [activeApproval, setActiveApproval] = useState(null);
+    // Approval sidebar messages
+    const [approvalSidebarMessages, setApprovalSidebarMessages] = useState([]);
+    const approvalStreamRef = useRef(null);
     // 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({
+    // ── WebSocket to datalayer-ai-agents: agent events + tool approvals ─────
+    // Single connection handles both agent:{agentId} channel events and the
+    // user's own channel (auto-subscribed) for tool_approval_* events.
+    // This mirrors the approval flow used by the /agents/tool-approvals UI page
+    // so that approving from either surface produces identical behaviour.
+    const handleAIAgentsMessage = useCallback((msg) => {
+        const event = msg.event;
+        const data = msg.data;
+        // Handle tool-approvals-history response (seeds initial pending list).
+        if (msg.type === 'tool-approvals-history') {
+            const rawList = Array.isArray(data?.approvals) ? data.approvals : [];
+            const pending = rawList.filter(a => (!a.agent_id || a.agent_id === approvalAgentId) &&
+                a.status === 'pending');
+            setApprovals(pending.map(toApprovalRequest));
+            return;
+        }
+        if (!event)
+            return;
+        if (event === 'tool_approval_created') {
+            const approval = toApprovalRequest(data);
+            if (approval.agent_id && approval.agent_id !== approvalAgentId)
+                return;
+            setApprovals(prev => [
+                approval,
+                ...prev.filter(a => a.id !== approval.id),
+            ]);
+            return;
+        }
+        if (event === 'tool_approval_approved' ||
+            event === 'tool_approval_rejected') {
+            const record = data;
+            if (record?.agent_id && record.agent_id !== approvalAgentId)
+                return;
+            setApprovals(prev => prev.filter(a => a.id !== record?.id));
+            // When approved and we have a live deferred-tool stream, send the
+            // continuation so the agent can execute the tool and produce output.
+            // This path fires when the user approves from a DIFFERENT UI surface
+            // (e.g. /agents/tool-approvals page) rather than this panel.
+            // handleApprove() clears approvalStreamRef before reaching here, so
+            // this block only runs for external approvals (no double-send).
+            if (event === 'tool_approval_approved') {
+                const stream = approvalStreamRef.current;
+                if (stream) {
+                    approvalStreamRef.current = null;
+                    const toolCallId = stream.adapter.getDeferredToolCallId(record?.tool_name ?? '');
+                    if (toolCallId) {
+                        void stream.adapter
+                            .sendToolResult(toolCallId, {
+                            toolCallId,
+                            success: true,
+                            result: {
+                                approved: true,
+                                approvalId: record?.id,
+                                message: 'Approved from external UI',
+                            },
+                        })
+                            .finally(() => {
+                            stream.unsubscribe();
+                            stream.adapter.disconnect();
+                        });
+                    }
+                    else {
+                        stream.unsubscribe();
+                        stream.adapter.disconnect();
+                    }
+                }
+            }
+        }
+    }, [approvalAgentId, toApprovalRequest]);
+    const { send: sendToAIAgents, connectionState: aiAgentsConnectionState } = useAIAgentsWebSocket({
         channels: agentId ? [`agent:${agentId}`] : [],
+        onMessage: handleAIAgentsMessage,
     });
+    // Request pending approvals for the active approval agent once connected.
+    const approvalHistoryAskedRef = useRef(false);
+    useEffect(() => {
+        if (aiAgentsConnectionState !== 'connected' ||
+            !hasTriggeredApproval ||
+            !approvalAgentId) {
+            approvalHistoryAskedRef.current = false;
+            return;
+        }
+        if (approvalHistoryAskedRef.current)
+            return;
+        approvalHistoryAskedRef.current = sendToAIAgents({
+            type: 'tool-approvals-history',
+        });
+    }, [
+        aiAgentsConnectionState,
+        hasTriggeredApproval,
+        approvalAgentId,
+        sendToAIAgents,
+    ]);
     // Authenticated fetch helper (for sidecar endpoints)
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -81,77 +219,394 @@ const AgentTriggerInner = ({ onLogout, }) => {
             ...(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;
+    // ── Create agent on demand (no startup on initial page load) ────────────
+    const createAgent = useCallback(async () => {
+        setRuntimeStatus('launching');
+        setIsReady(false);
+        setHookError(null);
+        try {
+            const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    name: agentName,
+                    description: 'Agent with cron, webhook, event, and manual triggers',
+                    agent_library: 'pydantic-ai',
+                    transport: 'vercel-ai',
+                    agent_spec_id: AGENT_SPEC_ID,
+                }),
+            });
+            let resolvedAgentId = agentName;
+            if (response.ok) {
+                const data = await response.json();
+                resolvedAgentId = data?.id || agentName;
+            }
+            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 {
-                    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}`);
-                    }
+                    detail = await response.text();
                 }
-                if (!isCancelled) {
-                    setAgentId(resolvedAgentId);
-                    setIsReady(true);
-                    setRuntimeStatus('ready');
+                if (response.status === 409 || /already exists/i.test(detail || '')) {
+                    // Agent already running — reuse it
                 }
-            }
-            catch (error) {
-                if (!isCancelled) {
-                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
-                    setRuntimeStatus('error');
+                else {
+                    throw new Error(detail || `Failed to create agent: ${response.status}`);
                 }
             }
-        };
-        void createAgent();
-        return () => {
-            isCancelled = true;
-        };
-    }, [agentBaseUrl, authFetch]);
+            setAgentId(resolvedAgentId);
+            setIsReady(true);
+            setRuntimeStatus('ready');
+            return true;
+        }
+        catch (error) {
+            setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+            setRuntimeStatus('error');
+            return false;
+        }
+    }, [agentBaseUrl, authFetch, agentName]);
+    const ensureRuntimeReady = useCallback(async () => {
+        if (isReady) {
+            return true;
+        }
+        return createAgent();
+    }, [isReady, createAgent]);
     // ── 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.
+    const upsertSidebarMessage = useCallback((setMessages, message) => {
+        setMessages(prev => {
+            const idx = prev.findIndex(m => m.id === message.id);
+            if (idx >= 0) {
+                const next = [...prev];
+                next[idx] = { ...next[idx], ...message };
+                return next;
+            }
+            return [...prev, message];
+        });
+    }, []);
+    const streamRunMessages = useCallback(async (targetAgentId, prompt, setMessages, setError, options) => {
+        const endpoint = `${agentBaseUrl}/api/v1/vercel-ai/${encodeURIComponent(targetAgentId)}`;
+        if (options?.keepAliveForApproval && approvalStreamRef.current) {
+            approvalStreamRef.current.unsubscribe();
+            approvalStreamRef.current.adapter.disconnect();
+            approvalStreamRef.current = null;
+        }
+        const adapter = new VercelAIAdapter({
+            protocol: 'vercel-ai',
+            baseUrl: endpoint,
+            agentId: targetAgentId,
+            headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+        });
+        let latestAssistantText = null;
+        let pendingApproval = false;
+        const unsubscribe = adapter.subscribe(event => {
+            if (event.type === 'message' && event.message) {
+                const msg = event.message;
+                const content = typeof msg.content === 'string'
+                    ? msg.content
+                    : JSON.stringify(msg.content);
+                if (msg.role === 'assistant') {
+                    latestAssistantText = content;
+                }
+                upsertSidebarMessage(setMessages, {
+                    id: msg.id,
+                    role: msg.role,
+                    content,
+                    createdAt: msg.createdAt?.toISOString(),
+                });
+                return;
+            }
+            if (event.type === 'tool-call' && event.toolCall) {
+                upsertSidebarMessage(setMessages, {
+                    id: `tool-call-${event.toolCall.toolCallId}`,
+                    role: 'tool',
+                    content: `${event.toolCall.toolName}(${JSON.stringify(event.toolCall.args)})`,
+                    createdAt: event.timestamp.toISOString(),
+                });
+                return;
+            }
+            if (event.type === 'tool-result' && event.toolResult) {
+                const resultObj = event.toolResult.result &&
+                    typeof event.toolResult.result === 'object'
+                    ? event.toolResult.result
+                    : undefined;
+                if (resultObj?.pending_approval === true) {
+                    pendingApproval = true;
+                }
+                upsertSidebarMessage(setMessages, {
+                    id: `tool-result-${event.toolResult.toolCallId}`,
+                    role: 'tool',
+                    content: JSON.stringify(event.toolResult.result),
+                    createdAt: event.timestamp.toISOString(),
+                });
+            }
+        });
+        try {
+            setError(null);
+            await adapter.connect();
+            await adapter.sendMessage(createUserMessage(prompt), {
+                identities: identitiesForRuns,
+            });
+            return { finalAssistantText: latestAssistantText, pendingApproval };
+        }
+        catch (error) {
+            setError(error instanceof Error ? error.message : 'Streaming request failed');
+            throw error;
+        }
+        finally {
+            if (options?.keepAliveForApproval) {
+                approvalStreamRef.current = { adapter, unsubscribe };
+            }
+            else {
+                unsubscribe();
+                adapter.disconnect();
+            }
+        }
+    }, [agentBaseUrl, token, identitiesForRuns, upsertSidebarMessage]);
+    useEffect(() => {
+        return () => {
+            if (approvalStreamRef.current) {
+                approvalStreamRef.current.unsubscribe();
+                approvalStreamRef.current.adapter.disconnect();
+                approvalStreamRef.current = null;
+            }
+        };
+    }, []);
+    // ── Create approval agent on demand ─────────────────────────────────────
+    const createApprovalAgent = useCallback(async () => {
+        const createRequest = () => authFetch(`${agentBaseUrl}/api/v1/agents`, {
+            method: 'POST',
+            body: JSON.stringify({
+                name: approvalAgentName,
+                description: 'Agent with once trigger and tool approval',
+                agent_library: 'pydantic-ai',
+                transport: 'vercel-ai',
+                agent_spec_id: APPROVAL_AGENT_SPEC_ID,
+                enable_codemode: false,
+            }),
+        });
+        try {
+            let response = await createRequest();
+            let resolvedId = approvalAgentName;
+            if (response.ok) {
+                const data = await response.json();
+                resolvedId = data?.id || approvalAgentName;
+            }
+            else {
+                const contentType = response.headers.get('content-type') || '';
+                let detail = '';
+                if (contentType.includes('application/json')) {
+                    const data = await response.json().catch(() => null);
+                    detail = data?.detail || data?.message || '';
+                }
+                else {
+                    detail = await response.text();
+                }
+                const alreadyExists = response.status === 409 || /already exists/i.test(detail || '');
+                if (!alreadyExists) {
+                    console.warn('Failed to create approval agent:', detail);
+                    return false;
+                }
+                // Ensure latest spec/config is applied instead of reusing stale agent state.
+                await authFetch(`${agentBaseUrl}/api/v1/agents/${encodeURIComponent(approvalAgentName)}`, {
+                    method: 'DELETE',
+                }).catch(() => undefined);
+                response = await createRequest();
+                if (!response.ok) {
+                    console.warn('Failed to recreate approval agent after conflict');
+                    return false;
+                }
+                const recreated = await response.json().catch(() => null);
+                resolvedId = recreated?.id || approvalAgentName;
+            }
+            setApprovalAgentId(resolvedId);
+            setApprovalAgentReady(true);
+            return true;
+        }
+        catch (error) {
+            console.warn('Approval agent creation failed:', error);
+            return false;
+        }
+    }, [agentBaseUrl, authFetch, approvalAgentName]);
+    // Approval sidebar messages are populated from live Vercel stream events.
+    // ── Approve / Reject handlers ───────────────────────────────────────────
+    const handleApprove = useCallback(async (requestId) => {
+        setApprovalLoading(requestId);
+        setApprovalError(null);
+        try {
+            const approval = approvals.find(a => a.id === requestId);
+            const stream = approvalStreamRef.current;
+            // Send the decision via the datalayer-ai-agents WS (same path as the
+            // /agents/tool-approvals UI page).
+            const sentDecision = sendToAIAgents({
+                type: 'tool_approval_decision',
+                approvalId: requestId,
+                approved: true,
+            });
+            if (!sentDecision && !stream) {
+                throw new Error('AI Agents WebSocket is not connected and no local approval stream is active');
+            }
+            // Send the Vercel AI continuation so the agent can execute the tool.
+            // Clear approvalStreamRef FIRST so the incoming tool_approval_approved
+            // WS event doesn't trigger a duplicate sendToolResult.
+            if (stream) {
+                approvalStreamRef.current = null;
+                const toolCallId = approval?.tool_call_id ??
+                    stream.adapter.getDeferredToolCallId(approval?.tool_name ?? '');
+                if (toolCallId) {
+                    await stream.adapter.sendToolResult(toolCallId, {
+                        toolCallId,
+                        success: true,
+                        result: {
+                            approved: true,
+                            approvalId: requestId,
+                            message: 'Approved from trigger panel',
+                        },
+                    });
+                }
+                stream.unsubscribe();
+                stream.adapter.disconnect();
+            }
+            setApprovals(prev => prev.filter(a => a.id !== requestId));
+            return true;
+        }
+        catch (error) {
+            setApprovalError(error instanceof Error ? error.message : 'Failed to approve');
+            return false;
+        }
+        finally {
+            setApprovalLoading(null);
+        }
+    }, [approvals, sendToAIAgents]);
+    const handleReject = useCallback(async (requestId, note) => {
+        setApprovalLoading(requestId);
+        setApprovalError(null);
+        try {
+            const approval = approvals.find(a => a.id === requestId);
+            const stream = approvalStreamRef.current;
+            // Send the decision via the datalayer-ai-agents WS (same path as the
+            // /agents/tool-approvals UI page).
+            const sentDecision = sendToAIAgents({
+                type: 'tool_approval_decision',
+                approvalId: requestId,
+                approved: false,
+                ...(note ? { note } : {}),
+            });
+            if (!sentDecision && !stream) {
+                throw new Error('AI Agents WebSocket is not connected and no local approval stream is active');
+            }
+            // Send the Vercel AI continuation so the agent can record the rejection.
+            // Clear approvalStreamRef FIRST to prevent a duplicate call from the
+            // incoming tool_approval_rejected WS event.
+            if (stream) {
+                approvalStreamRef.current = null;
+                const toolCallId = approval?.tool_call_id ??
+                    stream.adapter.getDeferredToolCallId(approval?.tool_name ?? '');
+                if (toolCallId) {
+                    await stream.adapter.sendToolResult(toolCallId, {
+                        toolCallId,
+                        success: true,
+                        result: {
+                            approved: false,
+                            approvalId: requestId,
+                            message: note || 'Rejected from trigger panel',
+                        },
+                    });
+                }
+                stream.unsubscribe();
+                stream.adapter.disconnect();
+            }
+            setApprovals(prev => prev.filter(a => a.id !== requestId));
+            return true;
+        }
+        catch (error) {
+            setApprovalError(error instanceof Error ? error.message : 'Failed to reject');
+            return false;
+        }
+        finally {
+            setApprovalLoading(null);
+        }
+    }, [approvals, sendToAIAgents]);
+    // ── Launch once trigger with approval ────────────────────────────────────
+    const handleLaunchOnceApproval = useCallback(async () => {
+        if (!agentBaseUrl)
+            return;
+        const ready = await ensureRuntimeReady();
+        if (!ready)
+            return;
+        let approvalReady = approvalAgentReady;
+        if (!approvalReady) {
+            approvalReady = await createApprovalAgent();
+        }
+        if (!approvalReady)
+            return;
+        setIsLaunchingApproval(true);
+        setHasTriggeredApproval(true);
+        setApprovalFlash(null);
+        setApprovalSidebarMessages([]);
+        setSidebarMessagesError(null);
+        const runId = `once-approval-${Date.now()}`;
+        const startTime = new Date().toISOString();
+        setTriggerHistory(prev => [
+            {
+                id: runId,
+                timestamp: startTime,
+                status: 'running',
+                source: 'once',
+            },
+            ...prev,
+        ]);
+        try {
+            setApprovalFlash('Once trigger launched.');
+            await streamRunMessages(approvalAgentId, ONCE_TRIGGER_APPROVAL_PROMPT, setApprovalSidebarMessages, setSidebarMessagesError, { keepAliveForApproval: true });
+            setTriggerHistory(prev => prev.map(r => r.id === runId
+                ? {
+                    ...r,
+                    status: 'success',
+                    duration_ms: Date.now() - new Date(startTime).getTime(),
+                }
+                : r));
+        }
+        catch {
+            setApprovalFlash('Network error');
+            setTriggerHistory(prev => prev.map(r => r.id === runId ? { ...r, status: 'failure' } : r));
+        }
+        finally {
+            setIsLaunchingApproval(false);
+        }
+    }, [
+        agentBaseUrl,
+        approvalAgentReady,
+        createApprovalAgent,
+        approvalAgentId,
+        streamRunMessages,
+        ensureRuntimeReady,
+    ]);
+    // ── Pending approvals for banner/dialog ──────────────────────────────────
+    const pendingApprovals = approvals.map(req => ({
+        id: req.id,
+        toolName: req.tool_name,
+        toolDescription: req.note,
+        args: req.tool_args ?? {},
+        agentId: approvalAgentId,
+        requestedAt: req.created_at ?? new Date().toISOString(),
+    }));
     // ── Update cron ──────────────────────────────────────────────────────────
     const handleUpdateCron = useCallback(async () => {
         if (!agentBaseUrl || !editCron.trim())
             return;
+        const ready = await ensureRuntimeReady();
+        if (!ready)
+            return;
         setIsUpdating(true);
         try {
             const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger`, {
@@ -171,11 +626,14 @@ const AgentTriggerInner = ({ onLogout, }) => {
         finally {
             setIsUpdating(false);
         }
-    }, [agentBaseUrl, agentId, editCron, authFetch]);
+    }, [agentBaseUrl, agentId, editCron, authFetch, ensureRuntimeReady]);
     // ── Manual trigger ───────────────────────────────────────────────────────
     const handleTriggerNow = useCallback(async () => {
         if (!agentBaseUrl)
             return;
+        const ready = await ensureRuntimeReady();
+        if (!ready)
+            return;
         setIsTriggeringNow(true);
         setTriggerFlash(null);
         const runId = `manual-${Date.now()}`;
@@ -190,7 +648,13 @@ const AgentTriggerInner = ({ onLogout, }) => {
             ...prev,
         ]);
         try {
-            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/run`, { method: 'POST', body: JSON.stringify({ source: 'manual' }) });
+            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/run`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    source: 'manual',
+                    identities: identitiesForRuns,
+                }),
+            });
             if (res.ok) {
                 setTriggerFlash('Trigger fired successfully');
                 setTriggerHistory(prev => prev.map(r => r.id === runId
@@ -213,11 +677,14 @@ const AgentTriggerInner = ({ onLogout, }) => {
         finally {
             setIsTriggeringNow(false);
         }
-    }, [agentBaseUrl, agentId, authFetch]);
+    }, [agentBaseUrl, agentId, authFetch, identitiesForRuns, ensureRuntimeReady]);
     // ── Webhook management ─────────────────────────────────────────────────
     const handleGenerateWebhook = useCallback(async () => {
         if (!agentBaseUrl)
             return;
+        const ready = await ensureRuntimeReady();
+        if (!ready)
+            return;
         setIsUpdating(true);
         try {
             const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/webhook`, { method: 'POST' });
@@ -234,10 +701,13 @@ const AgentTriggerInner = ({ onLogout, }) => {
         finally {
             setIsUpdating(false);
         }
-    }, [agentBaseUrl, agentId, authFetch]);
+    }, [agentBaseUrl, agentId, authFetch, ensureRuntimeReady]);
     const handleToggleWebhook = useCallback(async () => {
         if (!agentBaseUrl)
             return;
+        const ready = await ensureRuntimeReady();
+        if (!ready)
+            return;
         try {
             await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/webhook`, {
                 method: 'PATCH',
@@ -248,11 +718,14 @@ const AgentTriggerInner = ({ onLogout, }) => {
         catch {
             /* ok */
         }
-    }, [agentBaseUrl, agentId, webhookEnabled, authFetch]);
+    }, [agentBaseUrl, agentId, webhookEnabled, authFetch, ensureRuntimeReady]);
     // ── Event subscription ─────────────────────────────────────────────────
     const handleSubscribeEvent = useCallback(async () => {
         if (!agentBaseUrl || !eventTopic.trim())
             return;
+        const ready = await ensureRuntimeReady();
+        if (!ready)
+            return;
         setIsUpdating(true);
         try {
             const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/trigger/event`, {
@@ -272,15 +745,31 @@ const AgentTriggerInner = ({ onLogout, }) => {
         finally {
             setIsUpdating(false);
         }
-    }, [agentBaseUrl, agentId, eventTopic, eventFilter, authFetch]);
+    }, [
+        agentBaseUrl,
+        agentId,
+        eventTopic,
+        eventFilter,
+        authFetch,
+        ensureRuntimeReady,
+    ]);
     // ── Launch once trigger ──────────────────────────────────────────────────
     const handleLaunchOnce = useCallback(async () => {
         if (!agentBaseUrl)
             return;
+        const ready = await ensureRuntimeReady();
+        if (!ready)
+            return;
         setIsLaunchingOnce(true);
         setOnceFlash(null);
+        setStreamedOnceOutput(null);
+        setStreamedOnceEndedAt(null);
+        setSidebarMessages([]);
+        setSidebarMessagesError(null);
         const runId = `once-${Date.now()}`;
         const startTime = new Date().toISOString();
+        setLastOnceStartedAt(startTime);
+        setHasTriggeredOnce(true);
         setTriggerHistory(prev => [
             {
                 id: runId,
@@ -291,21 +780,17 @@ const AgentTriggerInner = ({ onLogout, }) => {
             ...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));
-            }
+            setOnceFlash('Once trigger launched — streaming live output.');
+            const streamResult = await streamRunMessages(agentId, ONCE_TRIGGER_PROMPT, setSidebarMessages, setSidebarMessagesError);
+            setStreamedOnceOutput(streamResult.finalAssistantText);
+            setStreamedOnceEndedAt(new Date().toISOString());
+            setTriggerHistory(prev => prev.map(r => r.id === runId
+                ? {
+                    ...r,
+                    status: 'success',
+                    duration_ms: Date.now() - new Date(startTime).getTime(),
+                }
+                : r));
         }
         catch {
             setOnceFlash('Network error');
@@ -314,9 +799,9 @@ const AgentTriggerInner = ({ onLogout, }) => {
         finally {
             setIsLaunchingOnce(false);
         }
-    }, [agentBaseUrl, agentId, authFetch]);
+    }, [agentBaseUrl, agentId, streamRunMessages, ensureRuntimeReady]);
     // ── Loading / Error ──────────────────────────────────────────────────────
-    if (!isReady && runtimeStatus !== 'error') {
+    if (runtimeStatus === 'launching') {
         return (_jsxs(Box, { sx: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -324,168 +809,509 @@ const AgentTriggerInner = ({ onLogout, }) => {
                 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…' })] }));
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching runtime for trigger agent..." })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
+    }
+    const triggerRunCurl = `curl -N -X POST '${agentBaseUrl}/api/v1/vercel-ai/${agentId}' -H 'Content-Type: application/json' -H 'Accept: text/event-stream'${token ? " -H 'Authorization: Bearer <TOKEN>'" : ''} --data '{"messages":[{"role":"user","parts":[{"type":"text","text":"${ONCE_TRIGGER_PROMPT.replace(/"/g, '\\"')}"}]}],"trigger":"submit-message","sdkVersion":6}'`;
+    const isAgentLaunching = isLaunchingOnce || isLaunchingApproval;
+    return (_jsx("fieldset", { disabled: isAgentLaunching, style: {
+            border: 0,
+            margin: 0,
+            padding: 0,
+            minWidth: 0,
+        }, children: _jsxs(Box, { sx: {
+                height: 'calc(100vh - 60px)',
                 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: {
+            }, 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] }), !isReady && (_jsx(Button, { size: "small", variant: "primary", onClick: () => void createAgent(), children: "Start Runtime" })), _jsxs(Label, { variant: aiAgentsConnectionState === 'connected' ? 'success' : 'secondary', children: ["Approvals WS: ", aiAgentsConnectionState] })] }), _jsx(ToolApprovalBanner, { pendingApprovals: pendingApprovals, onReview: approval => {
+                        const req = approvals.find(a => a.id === approval.id) || null;
+                        setActiveApproval(req);
+                    }, onApproveAll: async () => {
+                        for (const a of approvals) {
+                            await handleApprove(a.id);
+                        }
+                    } }), _jsx(ToolApprovalDialog, { isOpen: !!activeApproval, toolName: activeApproval?.tool_name ?? '', toolDescription: activeApproval?.note, args: activeApproval?.tool_args ?? {}, onApprove: async () => {
+                        if (activeApproval) {
+                            const ok = await handleApprove(activeApproval.id);
+                            if (ok) {
+                                setActiveApproval(null);
+                            }
+                        }
+                    }, onDeny: async () => {
+                        if (activeApproval) {
+                            const ok = await handleReject(activeApproval.id, 'Rejected from dialog');
+                            if (ok) {
+                                setActiveApproval(null);
+                            }
+                        }
+                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Trigger Agent", description: `View-only trigger output. Cron: ${cronExpr} | Webhook: ${webhookEnabled ? 'on' : 'off'} | Event: ${eventSubscribed ? eventTopic : 'none'}`, showHeader: true, autoFocus: false, height: "100%", runtimeId: agentId, showInput: true, disableInputPrompt: true, showModelSelector: false, showToolsMenu: true, showSkillsMenu: true })) : (_jsx(Box, { sx: {
+                                    height: '100%',
                                     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',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    p: 4,
+                                }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Runtime is not started yet. Use Start Runtime or launch a trigger to start it." }) })) }), _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 a single streaming run for the once-trigger prompt and watch tool calls, tool results, and assistant text update in real time." }), _jsxs(Box, { sx: {
+                                                bg: 'canvas.subtle',
+                                                border: '1px solid',
+                                                borderColor: 'border.default',
+                                                borderRadius: 2,
+                                                p: 2,
+                                                mb: 2,
+                                                display: 'grid',
+                                                gap: 1,
+                                            }, children: [_jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Agent ID:" }), " ", agentId] }), _jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Base URL:" }), " ", agentBaseUrl] }), lastOnceStartedAt && (_jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Last once launch:" }), ' ', new Date(lastOnceStartedAt).toLocaleString()] }))] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: ZapIcon, onClick: handleLaunchOnce, disabled: isLaunchingOnce, sx: { width: '100%' }, children: isLaunchingOnce ? 'Launching…' : 'Launch Once' }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: ZapIcon, onClick: handleLaunchOnceApproval, disabled: isLaunchingApproval, sx: { width: '100%', mt: 2 }, children: isLaunchingApproval
+                                                ? 'Launching…'
+                                                : 'Launch Once with Approval' }), onceFlash && (_jsx(Flash, { variant: onceFlash.includes('launched') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: onceFlash })), approvalFlash && (_jsx(Flash, { variant: approvalFlash.includes('launched') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: approvalFlash })), hasTriggeredOnce && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Generated Output" }), (() => {
+                                                    const outputEvent = lastOnceStartedAt
+                                                        ? [...agentEvents]
+                                                            .filter(e => e.kind === 'agent-output' &&
+                                                            new Date(e.created_at).getTime() >=
+                                                                new Date(lastOnceStartedAt).getTime() - 5000)
+                                                            .sort((a, b) => new Date(b.created_at).getTime() -
+                                                            new Date(a.created_at).getTime())[0]
+                                                        : undefined;
+                                                    const hasStreamFallback = !outputEvent &&
+                                                        !isLaunchingOnce &&
+                                                        streamedOnceOutput !== null;
+                                                    if (!outputEvent && !hasStreamFallback) {
+                                                        return (_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                gap: 2,
+                                                                mb: 2,
+                                                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for agent output\u2026" })] }));
+                                                    }
+                                                    const p = outputEvent?.payload;
+                                                    const outputText = outputEvent
+                                                        ? p?.outputs
+                                                            ? String(p.outputs)
+                                                            : ''
+                                                        : (streamedOnceOutput ?? '');
+                                                    const exitStatus = outputEvent
+                                                        ? p?.exit_status
+                                                        : 'completed';
+                                                    const durationMs = outputEvent
+                                                        ? p?.duration_ms
+                                                        : lastOnceStartedAt && streamedOnceEndedAt
+                                                            ? new Date(streamedOnceEndedAt).getTime() -
+                                                                new Date(lastOnceStartedAt).getTime()
+                                                            : undefined;
+                                                    const endedAt = outputEvent
+                                                        ? p?.ended_at
+                                                        : streamedOnceEndedAt;
+                                                    return (_jsxs(Box, { sx: {
+                                                            mb: 2,
+                                                            border: '1px solid',
+                                                            borderColor: exitStatus === 'error'
+                                                                ? 'danger.muted'
+                                                                : 'success.muted',
+                                                            borderRadius: 2,
+                                                            overflow: 'hidden',
+                                                        }, children: [_jsxs(Box, { sx: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: 1,
+                                                                    px: 2,
+                                                                    py: 1,
+                                                                    bg: exitStatus === 'error'
+                                                                        ? 'danger.subtle'
+                                                                        : 'success.subtle',
+                                                                    borderBottom: '1px solid',
+                                                                    borderColor: exitStatus === 'error'
+                                                                        ? 'danger.muted'
+                                                                        : 'success.muted',
+                                                                }, children: [_jsx(Label, { variant: exitStatus === 'error' ? 'danger' : 'success', size: "small", children: exitStatus ?? 'completed' }), durationMs != null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [(Number(durationMs) / 1000).toFixed(1), "s"] })), endedAt && (_jsx(Text, { sx: {
+                                                                            fontSize: 0,
+                                                                            color: 'fg.muted',
+                                                                            ml: 'auto',
+                                                                            whiteSpace: 'nowrap',
+                                                                        }, children: new Date(endedAt).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1 }, onClick: () => navigator.clipboard.writeText(outputText), children: _jsx(CopyIcon, { size: 12 }) })] }), _jsx(Box, { sx: {
+                                                                    p: 2,
+                                                                    bg: 'canvas.default',
+                                                                    maxHeight: 300,
+                                                                    overflow: 'auto',
+                                                                }, children: _jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        color: 'fg.default',
+                                                                        display: 'block',
+                                                                        whiteSpace: 'pre-wrap',
+                                                                        wordBreak: 'break-word',
+                                                                        fontFamily: 'mono',
+                                                                    }, children: outputText || '(empty output)' }) })] }));
+                                                })()] })), hasTriggeredOnce && (_jsxs(_Fragment, { children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: ["Streaming Messages", isLaunchingOnce && (_jsx(Spinner, { size: "small", sx: {
+                                                                ml: 2,
+                                                                verticalAlign: 'middle',
+                                                                width: 14,
+                                                                height: 14,
+                                                                minWidth: 14,
+                                                                minHeight: 14,
+                                                            } }))] }), sidebarMessagesError ? (_jsx(Flash, { variant: "danger", sx: { fontSize: 0, mb: 2 }, children: sidebarMessagesError })) : sidebarMessages.filter(msg => msg.role !== 'user')
+                                                    .length === 0 ? (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 2,
+                                                        mb: 2,
+                                                    }, children: [_jsx(Spinner, { size: "small", sx: {
+                                                                width: 16,
+                                                                height: 16,
+                                                                minWidth: 16,
+                                                                minHeight: 16,
+                                                            } }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for streaming messages\u2026" })] })) : (_jsx(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        gap: 2,
+                                                        mb: 2,
+                                                    }, children: sidebarMessages
+                                                        .slice()
+                                                        .filter(msg => msg.role !== 'user')
+                                                        .sort((a, b) => {
+                                                        const ta = a.createdAt
+                                                            ? new Date(a.createdAt).getTime()
+                                                            : 0;
+                                                        const tb = b.createdAt
+                                                            ? new Date(b.createdAt).getTime()
+                                                            : 0;
+                                                        return tb - ta;
+                                                    })
+                                                        .slice(0, 10)
+                                                        .map(msg => {
+                                                        const content = typeof msg.content === 'string'
+                                                            ? msg.content
+                                                            : JSON.stringify(msg.content);
+                                                        return (_jsxs(Box, { sx: {
+                                                                p: 2,
+                                                                bg: 'canvas.subtle',
+                                                                borderRadius: 2,
+                                                                border: '1px solid',
+                                                                borderColor: 'border.default',
+                                                            }, children: [_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: 1,
+                                                                        mb: 1,
+                                                                    }, children: [_jsx(Label, { size: "small", variant: msg.role === 'assistant'
+                                                                                ? 'accent'
+                                                                                : msg.role === 'tool'
+                                                                                    ? 'success'
+                                                                                    : 'secondary', children: msg.role }), msg.createdAt && (_jsx(Text, { sx: {
+                                                                                fontSize: 0,
+                                                                                color: 'fg.muted',
+                                                                                marginLeft: 'auto',
+                                                                                whiteSpace: 'nowrap',
+                                                                            }, children: new Date(msg.createdAt).toLocaleTimeString() }))] }), _jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        color: 'fg.default',
+                                                                        display: 'block',
+                                                                        whiteSpace: 'pre-wrap',
+                                                                        wordBreak: 'break-word',
+                                                                    }, children: content.length > 320
+                                                                        ? `${content.slice(0, 320)}…`
+                                                                        : content })] }, `once-msg-${msg.id}`));
+                                                    }) }))] })), hasTriggeredApproval && approvals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Pending Tool Approvals" }), _jsx(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        gap: 2,
+                                                        mb: 2,
+                                                    }, children: approvals.map(a => (_jsxs(Box, { sx: {
                                                             p: 2,
+                                                            border: '1px solid',
+                                                            borderColor: 'attention.muted',
                                                             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: {
+                                                            bg: 'attention.subtle',
+                                                        }, children: [_jsxs(Text, { sx: {
+                                                                    fontWeight: 600,
+                                                                    fontSize: 1,
+                                                                    display: 'block',
+                                                                    mb: 1,
+                                                                }, children: ["\uD83D\uDEE1\uFE0F ", a.tool_name] }), a.tool_args && (_jsx(Text, { sx: {
+                                                                    fontSize: 0,
+                                                                    color: 'fg.muted',
+                                                                    display: 'block',
+                                                                    mb: 2,
+                                                                    fontFamily: 'mono',
+                                                                }, children: JSON.stringify(a.tool_args) })), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: () => void handleApprove(a.id), disabled: approvalLoading === a.id, children: approvalLoading === a.id
+                                                                            ? 'Approving…'
+                                                                            : 'Approve' }), _jsx(Button, { size: "small", variant: "danger", onClick: () => void handleReject(a.id, 'Rejected from trigger panel'), disabled: approvalLoading === a.id, children: "Reject" })] })] }, a.id))) })] })), hasTriggeredApproval && (_jsxs(_Fragment, { children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: ["Approval Agent Messages", isLaunchingApproval && (_jsx(Spinner, { size: "small", sx: {
+                                                                ml: 2,
+                                                                verticalAlign: 'middle',
+                                                                width: 14,
+                                                                height: 14,
+                                                                minWidth: 14,
+                                                                minHeight: 14,
+                                                            } }))] }), hasTriggeredApproval && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Generated Output" }), (() => {
+                                                            const latestAssistantOutput = approvalSidebarMessages
+                                                                .filter(msg => msg.role === 'assistant')
+                                                                .sort((a, b) => {
+                                                                const ta = a.createdAt
+                                                                    ? new Date(a.createdAt).getTime()
+                                                                    : 0;
+                                                                const tb = b.createdAt
+                                                                    ? new Date(b.createdAt).getTime()
+                                                                    : 0;
+                                                                return tb - ta;
+                                                            })[0];
+                                                            if (!latestAssistantOutput) {
+                                                                return (_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: 2,
+                                                                        mb: 2,
+                                                                    }, children: [_jsx(Spinner, { size: "small", sx: {
+                                                                                width: 16,
+                                                                                height: 16,
+                                                                                minWidth: 16,
+                                                                                minHeight: 16,
+                                                                            } }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for agent output\u2026" })] }));
+                                                            }
+                                                            const outputText = typeof latestAssistantOutput.content === 'string'
+                                                                ? latestAssistantOutput.content
+                                                                : JSON.stringify(latestAssistantOutput.content);
+                                                            return (_jsxs(Box, { sx: {
+                                                                    mb: 2,
+                                                                    border: '1px solid',
+                                                                    borderColor: 'success.muted',
+                                                                    borderRadius: 2,
+                                                                    overflow: 'hidden',
+                                                                }, children: [_jsxs(Box, { sx: {
+                                                                            display: 'flex',
+                                                                            alignItems: 'center',
+                                                                            gap: 1,
+                                                                            px: 2,
+                                                                            py: 1,
+                                                                            bg: 'success.subtle',
+                                                                            borderBottom: '1px solid',
+                                                                            borderColor: 'success.muted',
+                                                                        }, children: [_jsx(Label, { variant: "success", size: "small", children: "completed" }), latestAssistantOutput.createdAt && (_jsx(Text, { sx: {
+                                                                                    fontSize: 0,
+                                                                                    color: 'fg.muted',
+                                                                                    ml: 'auto',
+                                                                                    whiteSpace: 'nowrap',
+                                                                                }, children: new Date(latestAssistantOutput.createdAt).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1 }, onClick: () => navigator.clipboard.writeText(outputText), children: _jsx(CopyIcon, { size: 12 }) })] }), _jsx(Box, { sx: {
+                                                                            p: 2,
+                                                                            bg: 'canvas.default',
+                                                                            maxHeight: 300,
+                                                                            overflow: 'auto',
+                                                                        }, children: _jsx(Text, { sx: {
+                                                                                fontSize: 0,
+                                                                                color: 'fg.default',
+                                                                                display: 'block',
+                                                                                whiteSpace: 'pre-wrap',
+                                                                                wordBreak: 'break-word',
+                                                                                fontFamily: 'mono',
+                                                                            }, children: outputText || '(empty output)' }) })] }));
+                                                        })()] })), approvalSidebarMessages.filter(msg => msg.role !== 'user')
+                                                    .length === 0 ? (_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: {
+                                                        gap: 2,
+                                                        mb: 2,
+                                                    }, children: [_jsx(Spinner, { size: "small", sx: {
+                                                                width: 16,
+                                                                height: 16,
+                                                                minWidth: 16,
+                                                                minHeight: 16,
+                                                            } }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for approval agent messages\u2026" })] })) : (_jsx(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        gap: 2,
+                                                        mb: 2,
+                                                    }, children: approvalSidebarMessages
+                                                        .slice()
+                                                        .filter(msg => msg.role !== 'user')
+                                                        .sort((a, b) => {
+                                                        const ta = a.createdAt
+                                                            ? new Date(a.createdAt).getTime()
+                                                            : 0;
+                                                        const tb = b.createdAt
+                                                            ? new Date(b.createdAt).getTime()
+                                                            : 0;
+                                                        return tb - ta;
+                                                    })
+                                                        .slice(0, 10)
+                                                        .map(msg => {
+                                                        const content = typeof msg.content === 'string'
+                                                            ? msg.content
+                                                            : JSON.stringify(msg.content);
+                                                        return (_jsxs(Box, { sx: {
+                                                                p: 2,
+                                                                bg: 'canvas.subtle',
+                                                                borderRadius: 2,
+                                                                border: '1px solid',
+                                                                borderColor: 'border.default',
+                                                            }, children: [_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: 1,
+                                                                        mb: 1,
+                                                                    }, children: [_jsx(Label, { size: "small", variant: msg.role === 'assistant'
+                                                                                ? 'accent'
+                                                                                : msg.role === 'tool'
+                                                                                    ? 'success'
+                                                                                    : 'secondary', children: msg.role }), msg.createdAt && (_jsx(Text, { sx: {
+                                                                                fontSize: 0,
+                                                                                color: 'fg.muted',
+                                                                                marginLeft: 'auto',
+                                                                                whiteSpace: 'nowrap',
+                                                                            }, children: new Date(msg.createdAt).toLocaleTimeString() }))] }), _jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        color: 'fg.default',
+                                                                        display: 'block',
+                                                                        whiteSpace: 'pre-wrap',
+                                                                        wordBreak: 'break-word',
+                                                                    }, children: content.length > 320
+                                                                        ? `${content.slice(0, 320)}…`
+                                                                        : content })] }, `approval-msg-${msg.id}`));
+                                                    }) }))] })), _jsxs(Box, { sx: { mt: 2, display: 'grid', gap: 2 }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Stream once (local curl)" }), _jsx(Box, { sx: {
+                                                                mt: 1,
+                                                                bg: 'canvas.subtle',
+                                                                borderRadius: 2,
+                                                                p: 2,
+                                                                fontFamily: 'mono',
+                                                                fontSize: 0,
+                                                                wordBreak: 'break-all',
+                                                            }, children: triggerRunCurl })] }), _jsx(Button, { size: "small", leadingVisual: CopyIcon, onClick: () => navigator.clipboard.writeText(triggerRunCurl), children: "Copy streaming command" })] })] })), 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,
-                                                                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))) }))] })] })] })] }));
+                                                            }, 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-output'
+                                                                        ? '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-output' && 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-output' &&
+                                                                        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) => {
@@ -495,7 +1321,7 @@ const syncTokenToIamStore = (token) => {
 };
 // ─── Main component with auth gate ─────────────────────────────────────────
 const AgentTriggersExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -503,11 +1329,6 @@ const AgentTriggersExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -516,7 +1337,7 @@ const AgentTriggersExample = () => {
         });
     }, [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(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentTriggerInner, { onLogout: handleLogout }) }) }));
 };