@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentToolApprovalsExample.js

@@ -7,60 +7,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { ErrorView } from './components';
-import { Button, Heading, SegmentedControl, Spinner, Text, } from '@primer/react';
-import { SignOutIcon, ToolsIcon } from '@primer/octicons-react';
-import { useCoreStore } from '@datalayer/core';
-import { DEFAULT_SERVICE_URLS } from '@datalayer/core/lib/api/constants';
+import { AuthRequiredView, ErrorView } from './components';
+import { Spinner, Text } from '@primer/react';
+import { CheckCircleIcon } from '@primer/octicons-react';
 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 { uniqueAgentId } from './utils/agentId';
 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;
-};
+import { useAgentRuntimeApprovals } from '../stores/agentRuntimeStore';
 const queryClient = new QueryClient();
-const AGENT_NAME_PREFIX = 'tool-approval-demo-agent';
-const DEFAULT_AGENT_SPEC_ID = 'demo-full';
+const AGENT_NAME_PREFIX = 'tool-approval-example-agent';
+const DEFAULT_AGENT_SPEC_ID = 'example-tool-approvals';
 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 = [
@@ -91,36 +49,25 @@ const buildAgentNameForSpec = (specId) => {
         .replace(/[^a-z0-9]+/g, '-')
         .replace(/^-+|-+$/g, '')
         .slice(0, 48);
-    return slug ? `${AGENT_NAME_PREFIX}-${slug}` : AGENT_NAME_PREFIX;
+    const base = slug ? `${AGENT_NAME_PREFIX}-${slug}` : AGENT_NAME_PREFIX;
+    return uniqueAgentId(base);
 };
-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 toolRespondersRef = useRef(new Map());
-    const respondedToolCallsRef = 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 approvals = useAgentRuntimeApprovals();
+    const pendingApprovalCount = useMemo(() => approvals.filter(approval => approval.status === 'pending' &&
+        (!agentId || approval.agent_id === agentId)).length, [approvals, agentId]);
+    const createAttemptedRef = useRef(false);
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -129,30 +76,11 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
             ...(opts.headers ?? {}),
         },
     }), [token]);
-    const emitServerToolDecision = useCallback((toolName, toolArgs, approved, approvalId, message) => {
-        const signature = approvalSignature(toolName, toolArgs);
-        const responder = toolRespondersRef.current.get(signature);
-        if (!responder?.respond) {
-            return false;
-        }
-        if (respondedToolCallsRef.current.has(responder.toolCallId)) {
-            return false;
-        }
-        setToolApprovalState(prev => ({
-            ...prev,
-            [responder.toolCallId]: approved ? 'approved' : 'denied',
-        }));
-        respondedToolCallsRef.current.add(responder.toolCallId);
-        responder.respond({
-            type: 'tool-approval-decision',
-            approved,
-            approvalId,
-            toolName: responder.toolName || toolName,
-            ...(message ? { message } : {}),
-        });
-        return true;
-    }, []);
     useEffect(() => {
+        if (createAttemptedRef.current) {
+            return;
+        }
+        createAttemptedRef.current = true;
         let isCancelled = false;
         const createLocalAgent = async () => {
             setRuntimeStatus('launching');
@@ -218,448 +146,22 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
             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 approved = wsEvent === 'tool_approval_approved';
-                            emitServerToolDecision(approval.tool_name, approval.tool_args ?? {}, approved, approval.id, approval.note);
-                            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,
-        emitServerToolDecision,
-    ]);
-    // 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, UI/continuation updates are websocket-driven only.
-            // The click only sends approve to the server; local chat reacts when
-            // tool_approval_approved is received.
-            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, UI/continuation updates are websocket-driven only.
-            // The click only sends reject to the server; local chat reacts when
-            // tool_approval_rejected is received.
-            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, toolName, respond) => {
-        const ok = await approve(requestId, 'Approved from tool message card');
-        if (ok) {
-            if (mode !== 'server') {
-                setToolApprovalState(prev => ({ ...prev, [toolCallId]: 'approved' }));
-                respond?.({
-                    type: 'tool-approval-decision',
-                    approved: true,
-                    approvalId: requestId,
-                    toolName,
-                });
-            }
-        }
-    }, [approve, mode]);
-    const handleToolLevelDeny = useCallback(async (toolCallId, requestId, toolName, respond) => {
-        const ok = await reject(requestId, 'Rejected from tool message card');
-        if (ok) {
-            if (mode !== 'server') {
-                setToolApprovalState(prev => ({ ...prev, [toolCallId]: 'denied' }));
-                respond?.({
-                    type: 'tool-approval-decision',
-                    approved: false,
-                    approvalId: requestId,
-                    toolName,
-                });
-            }
-        }
-    }, [reject, mode]);
-    const renderToolResult = useCallback(({ toolCallId, toolName, args, result, status, error, respond }) => {
-        const signature = approvalSignature(toolName, args);
-        if (respond && status === 'inProgress') {
-            toolRespondersRef.current.set(signature, {
-                toolCallId,
-                toolName,
-                respond,
-            });
-        }
-        else if (status === 'complete' || status === 'error') {
-            toolRespondersRef.current.delete(signature);
-        }
-        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, toolName, respond)
-                : undefined, onDeny: matchedApproval
-                ? () => void handleToolLevelDeny(toolCallId, matchedApproval.id, toolName, respond)
-                : 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',
+                height: '100%',
                 gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching tool approval demo..." })] }));
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching tool approvals example agent..." })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    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)',
+            height: '100%',
+            minHeight: 0,
             display: 'flex',
             flexDirection: 'column',
         }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
@@ -667,41 +169,32 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
                     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] })] }));
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsx(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}`, brandIcon: _jsx(CheckCircleIcon, { size: 16 }), 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: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Pending: ", pendingApprovalCount] }) }), suggestions: [
+                            {
+                                title: 'List your tools',
+                                message: 'list your tools',
+                            },
+                            {
+                                title: 'Sensitive tool with delegated allow',
+                                message: "Call the runtime_sensitive_echo tool with text 'hello' and reason 'audit', then explain the before_tool_execute decision and reply with the tool result.",
+                            },
+                            {
+                                title: 'Sensitive tool denied by Python hook',
+                                message: "Call the runtime_sensitive_echo tool with text 'danger' and reason 'delete project', then explain why it was denied.",
+                            },
+                            {
+                                title: 'Non-sensitive tool baseline',
+                                message: "Call the runtime_echo tool with text 'hello world', then reply with the tool result.",
+                            },
+                            {
+                                title: 'Inspect audit entries',
+                                message: 'Use execute_code to print the latest entries from /tmp/agent_runtimes_tool_approvals_audit.jsonl and summarize decision + execution status.',
+                            },
+                            {
+                                title: 'Explain deferred approvals hook',
+                                message: 'Explain how deferred_tool_calls resolves approval-required tool requests inline when a decision is already available.',
+                            },
+                        ], submitOnSuggestionClick: true }) }) })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('@datalayer/core/lib/state').then(({ iamStore }) => {
@@ -709,7 +202,7 @@ const syncTokenToIamStore = (token) => {
     });
 };
 const AgentToolApprovalsExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -717,11 +210,6 @@ const AgentToolApprovalsExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -730,7 +218,7 @@ const AgentToolApprovalsExample = () => {
         });
     }, [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(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentToolApprovalsInner, { onLogout: handleLogout }) }) }));
 };