@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/examples/AgentToolApprovalsExample.js

@@ -0,0 +1,672 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/// <reference types="vite/client" />
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Heading, SegmentedControl, Spinner, Text, } from '@primer/react';
+import { AlertIcon, SignOutIcon, ToolsIcon } from '@primer/octicons-react';
+import { useCoreStore } from '@datalayer/core';
+import { DEFAULT_SERVICE_URLS } from '@datalayer/core/lib/api/constants';
+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 { ThemedProvider } from './utils/themedProvider';
+import { Chat } from '../chat';
+import { ToolCallDisplay, ToolApprovalBanner, ToolApprovalDialog, } from '../chat/tools';
+const normalizeToolName = (value) => value.replace(/[-_]/g, '').toLowerCase();
+const AI_AGENTS_API_PREFIX = '/api/ai-agents/v1';
+const stableStringify = (value) => {
+    if (value === null || typeof value !== 'object') {
+        return JSON.stringify(value);
+    }
+    if (Array.isArray(value)) {
+        return `[${value.map(item => stableStringify(item)).join(',')}]`;
+    }
+    const entries = Object.entries(value)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([key, itemValue]) => `${JSON.stringify(key)}:${stableStringify(itemValue)}`);
+    return `{${entries.join(',')}}`;
+};
+const toWsUrl = (baseUrl, path, token) => {
+    try {
+        const url = new URL(baseUrl);
+        url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+        url.pathname = path;
+        if (token) {
+            url.searchParams.set('token', token);
+        }
+        else {
+            url.search = '';
+        }
+        return url.toString();
+    }
+    catch {
+        return null;
+    }
+};
+const normalizeAiAgentsBaseUrl = (rawBaseUrl) => {
+    const trimmed = rawBaseUrl.replace(/\/$/, '');
+    if (trimmed.endsWith(AI_AGENTS_API_PREFIX)) {
+        return trimmed.slice(0, -AI_AGENTS_API_PREFIX.length);
+    }
+    return trimmed;
+};
+const queryClient = new QueryClient();
+const AGENT_NAME_PREFIX = 'tool-approval-demo-agent';
+const DEFAULT_AGENT_SPEC_ID = 'demo-full';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const FALLBACK_AI_AGENTS_BASE_URL = import.meta.env.VITE_AI_AGENTS_URL || DEFAULT_SERVICE_URLS.AI_AGENTS;
+const getSelectedAgentSpecIdFromUi = () => {
+    const params = new URLSearchParams(window.location.search);
+    const directKeys = [
+        'agent_spec_id',
+        'agentSpecId',
+        'spec_id',
+        'specId',
+        'spec',
+    ];
+    for (const key of directKeys) {
+        const value = params.get(key);
+        if (value && value.trim()) {
+            return value.trim();
+        }
+    }
+    const selectedAgentId = params.get('selectedAgentId');
+    if (selectedAgentId?.startsWith('spec:')) {
+        const specId = selectedAgentId.slice('spec:'.length).trim();
+        if (specId) {
+            return specId;
+        }
+    }
+    return DEFAULT_AGENT_SPEC_ID;
+};
+const buildAgentNameForSpec = (specId) => {
+    const slug = specId
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 48);
+    return slug ? `${AGENT_NAME_PREFIX}-${slug}` : AGENT_NAME_PREFIX;
+};
+const approvalSignature = (toolName, args) => `${normalizeToolName(toolName)}::${stableStringify(args ?? {})}`;
+const AgentToolApprovalsInner = ({ onLogout, }) => {
+    const { token } = useSimpleAuthStore();
+    const [selectedSpecId] = useState(() => getSelectedAgentSpecIdFromUi());
+    const agentName = useMemo(() => buildAgentNameForSpec(selectedSpecId), [selectedSpecId]);
+    const [mode, setMode] = useState('local');
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(agentName);
+    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    const [approvals, setApprovals] = useState([]);
+    const [localApprovals, setLocalApprovals] = useState([]);
+    const [activeApproval, setActiveApproval] = useState(null);
+    const [approvalLoading, setApprovalLoading] = useState(null);
+    const [approvalError, setApprovalError] = useState(null);
+    const [toolApprovalState, setToolApprovalState] = useState({});
+    const [wsState, setWsState] = useState('closed');
+    const createdApprovalSignatures = useRef(new Set());
+    const resolveLocalRef = useRef(async () => null);
+    const authFetchRef = useRef((url, opts) => fetch(url, opts));
+    const chatAuthToken = token === null ? undefined : token;
+    const configuredAiAgentsBaseUrl = useCoreStore((s) => s.configuration?.aiagentsRunUrl);
+    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const aiAgentsBaseUrl = normalizeAiAgentsBaseUrl(configuredAiAgentsBaseUrl || FALLBACK_AI_AGENTS_BASE_URL);
+    const podName = 'localhost';
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    useEffect(() => {
+        let isCancelled = false;
+        const createLocalAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
+            try {
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'Agent with runtime tool approvals',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: selectedSpecId,
+                        enable_skills: false,
+                        skills: [],
+                        tools: ['runtime-echo', 'runtime-sensitive-echo'],
+                    }),
+                });
+                let resolvedAgentId = agentName;
+                let isAlreadyRunning = false;
+                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 {
+                        detail = await response.text();
+                    }
+                    if (response.status === 409 || /already exists/i.test(detail || '')) {
+                        isAlreadyRunning = true;
+                    }
+                    else {
+                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
+                    }
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReconnectedAgent(isAlreadyRunning);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createLocalAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, authFetch, agentName, selectedSpecId]);
+    const pollApprovals = useCallback(async () => {
+        if (!isReady) {
+            return;
+        }
+        const fetchPendingApprovals = async (baseUrl, apiPrefix) => {
+            const res = await authFetch(`${baseUrl}${apiPrefix}`);
+            if (!res.ok) {
+                return [];
+            }
+            const data = await res.json();
+            const allApprovals = Array.isArray(data)
+                ? data
+                : (data.approvals ?? data.requests ?? []);
+            return allApprovals
+                .filter((approval) => approval.status === 'pending' &&
+                (approval.agent_id === agentId || !approval.agent_id))
+                .map((approval) => ({
+                ...approval,
+                backendBaseUrl: baseUrl,
+                apiPrefix,
+            }));
+        };
+        const source = mode === 'server'
+            ? {
+                baseUrl: aiAgentsBaseUrl,
+                apiPrefix: `${AI_AGENTS_API_PREFIX}/tool-approvals`,
+            }
+            : { baseUrl: agentBaseUrl, apiPrefix: '/api/v1/tool-approvals' };
+        try {
+            const localPending = await fetchPendingApprovals(agentBaseUrl, '/api/v1/tool-approvals');
+            setLocalApprovals(localPending);
+            const pendingForAgent = await fetchPendingApprovals(source.baseUrl, source.apiPrefix);
+            setApprovals(pendingForAgent);
+        }
+        catch (error) {
+            if (mode === 'server') {
+                setApprovalError(error instanceof Error
+                    ? error.message
+                    : 'Failed to fetch server approvals');
+            }
+        }
+    }, [isReady, mode, aiAgentsBaseUrl, agentBaseUrl, agentId, authFetch]);
+    const resolveLocalApprovalForTool = useCallback(async (toolName, toolArgs) => {
+        const signature = approvalSignature(toolName, toolArgs);
+        const matchFromState = localApprovals.find(approval => approvalSignature(approval.tool_name, approval.tool_args ?? {}) ===
+            signature);
+        if (matchFromState) {
+            return matchFromState;
+        }
+        const res = await authFetch(`${agentBaseUrl}/api/v1/tool-approvals`);
+        if (!res.ok) {
+            return null;
+        }
+        const data = await res.json();
+        const allApprovals = Array.isArray(data)
+            ? data
+            : (data.approvals ?? data.requests ?? []);
+        const pendingLocal = allApprovals
+            .filter((approval) => approval.status === 'pending' &&
+            (approval.agent_id === agentId || !approval.agent_id))
+            .map((approval) => ({
+            ...approval,
+            backendBaseUrl: agentBaseUrl,
+            apiPrefix: '/api/v1/tool-approvals',
+        }));
+        setLocalApprovals(pendingLocal);
+        return (pendingLocal.find(approval => approvalSignature(approval.tool_name, approval.tool_args ?? {}) ===
+            signature) || null);
+    }, [localApprovals, authFetch, agentBaseUrl, agentId]);
+    useEffect(() => {
+        void pollApprovals();
+        const interval = setInterval(pollApprovals, 5000);
+        return () => clearInterval(interval);
+    }, [pollApprovals]);
+    useEffect(() => {
+        if (!isReady || mode !== 'server') {
+            setWsState('closed');
+            return;
+        }
+        const wsUrl = toWsUrl(aiAgentsBaseUrl, `${AI_AGENTS_API_PREFIX}/ws`, chatAuthToken);
+        if (!wsUrl) {
+            setWsState('closed');
+            return;
+        }
+        let closedByCleanup = false;
+        setWsState('connecting');
+        const ws = new WebSocket(wsUrl);
+        ws.onopen = () => {
+            setWsState('connected');
+            void pollApprovals();
+        };
+        ws.onmessage = event => {
+            try {
+                const payload = JSON.parse(String(event.data));
+                const wsEvent = payload?.event;
+                const approval = payload?.data;
+                if (!wsEvent || !approval) {
+                    return;
+                }
+                if (wsEvent === 'tool_approval_created') {
+                    if (approval.status !== 'pending' ||
+                        (approval.agent_id && approval.agent_id !== agentId)) {
+                        return;
+                    }
+                    setApprovals(prev => {
+                        const next = prev.filter(item => item.id !== approval.id);
+                        next.unshift({
+                            ...approval,
+                            backendBaseUrl: aiAgentsBaseUrl,
+                            apiPrefix: `${AI_AGENTS_API_PREFIX}/tool-approvals`,
+                        });
+                        return next;
+                    });
+                    return;
+                }
+                if (wsEvent === 'tool_approval_approved' ||
+                    wsEvent === 'tool_approval_rejected') {
+                    // Remove from the server approval queue.
+                    setApprovals(prev => prev.filter(item => item.id !== approval.id));
+                    // Bridge the decision to the local agent-runtimes approval.
+                    const action = wsEvent === 'tool_approval_approved' ? 'approve' : 'reject';
+                    void (async () => {
+                        try {
+                            const localMatch = await resolveLocalRef.current(approval.tool_name, approval.tool_args ?? {});
+                            if (localMatch) {
+                                const localBaseUrl = `${agentBaseUrl}/api/v1/tool-approvals/${localMatch.id}/${action}`;
+                                await authFetchRef.current(localBaseUrl, {
+                                    method: 'POST',
+                                    body: JSON.stringify(approval.note ? { note: approval.note } : {}),
+                                });
+                            }
+                        }
+                        catch {
+                            // Local bridge errors are non-fatal; poll will reconcile.
+                        }
+                    })();
+                    return;
+                }
+            }
+            catch {
+                // Ignore malformed WS payloads.
+            }
+        };
+        ws.onclose = () => {
+            if (!closedByCleanup) {
+                setWsState('closed');
+            }
+        };
+        ws.onerror = () => {
+            setWsState('closed');
+        };
+        return () => {
+            closedByCleanup = true;
+            ws.close();
+            setWsState('closed');
+        };
+    }, [
+        isReady,
+        mode,
+        aiAgentsBaseUrl,
+        agentBaseUrl,
+        chatAuthToken,
+        agentId,
+        pollApprovals,
+    ]);
+    // Keep refs in sync so the WS handler always has the latest functions.
+    useEffect(() => {
+        resolveLocalRef.current = resolveLocalApprovalForTool;
+    }, [resolveLocalApprovalForTool]);
+    useEffect(() => {
+        authFetchRef.current = authFetch;
+    }, [authFetch]);
+    const approve = useCallback(async (requestId, note) => {
+        setApprovalLoading(requestId);
+        setApprovalError(null);
+        try {
+            const approval = approvals.find(item => item.id === requestId);
+            const baseUrl = approval?.backendBaseUrl ||
+                (mode === 'server' ? aiAgentsBaseUrl : agentBaseUrl);
+            const apiPrefix = approval?.apiPrefix ||
+                (mode === 'server'
+                    ? `${AI_AGENTS_API_PREFIX}/tool-approvals`
+                    : '/api/v1/tool-approvals');
+            const response = await authFetch(`${baseUrl}${apiPrefix}/${requestId}/approve`, {
+                method: 'POST',
+                body: JSON.stringify(note ? { note } : {}),
+            });
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => '');
+                throw new Error(errorText ||
+                    `Failed to approve request (${response.status} ${response.statusText})`);
+            }
+            // In server mode the WS event will remove from queue and bridge to
+            // the local runtime — don't do it here to keep flow server-driven.
+            if (mode !== 'server') {
+                setApprovals(prev => prev.filter(a => a.id !== requestId));
+                void pollApprovals();
+            }
+            return true;
+        }
+        catch (error) {
+            const message = error instanceof Error
+                ? error.message
+                : 'Failed to approve tool request';
+            setApprovalError(message);
+            return false;
+        }
+        finally {
+            setApprovalLoading(null);
+        }
+    }, [approvals, mode, aiAgentsBaseUrl, agentBaseUrl, authFetch, pollApprovals]);
+    const reject = useCallback(async (requestId, note) => {
+        setApprovalLoading(requestId);
+        setApprovalError(null);
+        try {
+            const approval = approvals.find(item => item.id === requestId);
+            const baseUrl = approval?.backendBaseUrl ||
+                (mode === 'server' ? aiAgentsBaseUrl : agentBaseUrl);
+            const apiPrefix = approval?.apiPrefix ||
+                (mode === 'server'
+                    ? `${AI_AGENTS_API_PREFIX}/tool-approvals`
+                    : '/api/v1/tool-approvals');
+            const response = await authFetch(`${baseUrl}${apiPrefix}/${requestId}/reject`, {
+                method: 'POST',
+                body: JSON.stringify(note ? { note } : {}),
+            });
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => '');
+                throw new Error(errorText ||
+                    `Failed to reject request (${response.status} ${response.statusText})`);
+            }
+            // In server mode the WS event will remove from queue and bridge to
+            // the local runtime — don't do it here to keep flow server-driven.
+            if (mode !== 'server') {
+                setApprovals(prev => prev.filter(a => a.id !== requestId));
+                void pollApprovals();
+            }
+            return true;
+        }
+        catch (error) {
+            const message = error instanceof Error
+                ? error.message
+                : 'Failed to reject tool request';
+            setApprovalError(message);
+            return false;
+        }
+        finally {
+            setApprovalLoading(null);
+        }
+    }, [approvals, mode, aiAgentsBaseUrl, agentBaseUrl, authFetch, pollApprovals]);
+    const ensureServerApproval = useCallback(async (toolName, args) => {
+        if (mode !== 'server' || !aiAgentsBaseUrl || !isReady) {
+            return;
+        }
+        const signature = approvalSignature(toolName, args);
+        if (createdApprovalSignatures.current.has(signature)) {
+            return;
+        }
+        const alreadyTracked = approvals.some(approval => approvalSignature(approval.tool_name, approval.tool_args ?? {}) ===
+            signature);
+        if (alreadyTracked) {
+            createdApprovalSignatures.current.add(signature);
+            return;
+        }
+        createdApprovalSignatures.current.add(signature);
+        try {
+            const response = await authFetch(`${aiAgentsBaseUrl}${AI_AGENTS_API_PREFIX}/tool-approvals`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    agent_id: agentId,
+                    pod_name: podName,
+                    tool_name: toolName,
+                    tool_args: args,
+                }),
+            });
+            if (!response.ok) {
+                const text = await response.text().catch(() => '');
+                throw new Error(text ||
+                    `Failed creating server approval (${response.status} ${response.statusText})`);
+            }
+            const created = (await response.json());
+            setApprovals(prev => {
+                const next = prev.filter(item => item.id !== created.id);
+                next.unshift({
+                    ...created,
+                    backendBaseUrl: aiAgentsBaseUrl,
+                    apiPrefix: `${AI_AGENTS_API_PREFIX}/tool-approvals`,
+                });
+                return next;
+            });
+        }
+        catch (error) {
+            createdApprovalSignatures.current.delete(signature);
+            setApprovalError(error instanceof Error
+                ? error.message
+                : 'Failed to create server approval request');
+        }
+    }, [mode, aiAgentsBaseUrl, isReady, approvals, authFetch, agentId, podName]);
+    const pendingApprovals = useMemo(() => approvals.map(req => ({
+        id: req.id,
+        toolName: req.tool_name,
+        toolDescription: req.note,
+        args: req.tool_args ?? {},
+        agentId,
+        requestedAt: req.created_at ?? new Date().toISOString(),
+    })), [approvals, agentId]);
+    const findMatchingApproval = useCallback((toolName, args) => {
+        const normalizedToolName = normalizeToolName(toolName);
+        const argsSig = stableStringify(args ?? {});
+        return (approvals.find(approval => {
+            if (normalizeToolName(approval.tool_name) !== normalizedToolName) {
+                return false;
+            }
+            return stableStringify(approval.tool_args ?? {}) === argsSig;
+        }) || null);
+    }, [approvals]);
+    const handleToolLevelApprove = useCallback(async (toolCallId, requestId) => {
+        const ok = await approve(requestId, 'Approved from tool message card');
+        if (ok) {
+            setToolApprovalState(prev => ({ ...prev, [toolCallId]: 'approved' }));
+        }
+    }, [approve]);
+    const handleToolLevelDeny = useCallback(async (toolCallId, requestId) => {
+        const ok = await reject(requestId, 'Rejected from tool message card');
+        if (ok) {
+            setToolApprovalState(prev => ({ ...prev, [toolCallId]: 'denied' }));
+        }
+    }, [reject]);
+    const renderToolResult = useCallback(({ toolCallId, toolName, args, result, status, error }) => {
+        const matchedApproval = findMatchingApproval(toolName, args);
+        const resultObject = result && typeof result === 'object'
+            ? result
+            : undefined;
+        const pendingByResult = status === 'inProgress' && resultObject?.pending_approval === true;
+        const requiresServerApproval = mode === 'server' &&
+            normalizeToolName(toolName) ===
+                normalizeToolName('runtime_sensitive_echo');
+        if (requiresServerApproval && !matchedApproval) {
+            void ensureServerApproval(toolName, args);
+        }
+        const toolDecision = toolApprovalState[toolCallId];
+        const loadingThisApproval = !!matchedApproval && approvalLoading === matchedApproval.id;
+        const approvalState = toolDecision ||
+            (pendingByResult || requiresServerApproval || !!matchedApproval
+                ? 'pending'
+                : undefined);
+        return (_jsx(ToolCallDisplay, { toolCallId: toolCallId, toolName: toolName, args: args, result: result, status: status, error: error, approvalRequired: !!approvalState, approvalState: approvalState, approvalLoading: loadingThisApproval, onApprove: matchedApproval
+                ? () => void handleToolLevelApprove(toolCallId, matchedApproval.id)
+                : undefined, onDeny: matchedApproval
+                ? () => void handleToolLevelDeny(toolCallId, matchedApproval.id)
+                : undefined }));
+    }, [
+        mode,
+        findMatchingApproval,
+        ensureServerApproval,
+        toolApprovalState,
+        approvalLoading,
+        handleToolLevelApprove,
+        handleToolLevelDeny,
+    ]);
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching tool approval demo..." })] }));
+    }
+    if (runtimeStatus === 'error' || hookError) {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+    }
+    const serverPanel = mode === 'server' ? (_jsxs(Box, { sx: {
+            width: 320,
+            minWidth: 280,
+            borderLeft: '1px solid',
+            borderColor: 'border.default',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            bg: 'canvas.subtle',
+        }, children: [_jsxs(Box, { sx: {
+                    p: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: "Server Approval Queue" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["WebSocket: ", wsState, " \u2022 Pending: ", approvals.length] })] }), _jsx(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: approvals.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No pending approvals." })) : (approvals.map(approval => (_jsxs(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 2,
+                        mb: 2,
+                        bg: 'canvas.default',
+                    }, children: [_jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: approval.tool_name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: approval.id }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: () => void approve(approval.id), children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", onClick: () => void reject(approval.id, 'Rejected from queue'), children: "Reject" })] })] }, approval.id)))) })] })) : null;
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
+                    px: 3,
+                    py: 1,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsx(ToolApprovalBanner, { pendingApprovals: pendingApprovals, onReview: approval => {
+                    const req = approvals.find(a => a.id === approval.id) || null;
+                    setActiveApproval(req);
+                }, onApproveAll: async () => {
+                    for (const approval of approvals) {
+                        await approve(approval.id);
+                    }
+                } }), _jsx(ToolApprovalDialog, { isOpen: !!activeApproval, toolName: activeApproval?.tool_name ?? '', toolDescription: activeApproval?.note, args: activeApproval?.tool_args ?? {}, onApprove: async () => {
+                    if (activeApproval) {
+                        const ok = await approve(activeApproval.id);
+                        if (ok) {
+                            setActiveApproval(null);
+                        }
+                    }
+                }, onDeny: async () => {
+                    if (activeApproval) {
+                        const ok = await reject(activeApproval.id, 'Rejected from tool approval 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 }) })), approvalLoading && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Processing approval request..." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: `Tool Approval Agent - ${podName}`, placeholder: "Ask for actions that require approval...", showHeader: true, showNewChatButton: true, showClearButton: false, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, headerActions: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(SegmentedControl, { "aria-label": "Approval mode", size: "small", onChange: index => setMode(index === 0 ? 'local' : 'server'), children: [_jsx(SegmentedControl.Button, { selected: mode === 'local', children: "Local" }), _jsx(SegmentedControl.Button, { selected: mode === 'server', children: "Server" })] }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Pending: ", pendingApprovals.length] }), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), suggestions: [
+                                {
+                                    title: 'List your tools',
+                                    message: 'list your tools',
+                                },
+                                {
+                                    title: 'Run tool with approval',
+                                    message: "Call the runtime_sensitive_echo tool with text 'hello' and reason 'audit', then reply with the tool result.",
+                                },
+                                {
+                                    title: 'Run tool without approval',
+                                    message: "Call the runtime_echo tool with text 'hello world', then reply with the tool result.",
+                                },
+                            ], renderToolResult: renderToolResult, submitOnSuggestionClick: true }) }), serverPanel] })] }));
+};
+const syncTokenToIamStore = (token) => {
+    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        iamStore.setState({ token });
+    });
+};
+const AgentToolApprovalsExample = () => {
+    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const hasSynced = useRef(false);
+    useEffect(() => {
+        if (token && !hasSynced.current) {
+            hasSynced.current = true;
+            syncTokenToIamStore(token);
+        }
+    }, [token]);
+    const handleSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        hasSynced.current = true;
+        syncTokenToIamStore(newToken);
+    }, [setAuth]);
+    const handleLogout = useCallback(() => {
+        clearAuth();
+        hasSynced.current = false;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: undefined });
+        });
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Tool Approval Agent", description: "Sign in to test local and server-backed tool approvals.", leadingIcon: _jsx(ToolsIcon, { size: 24 }) }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentToolApprovalsInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentToolApprovalsExample;