@parhelia/core 0.1.12902 → 0.1.12904

package/dist/editor/ai/terminal/components/ToolCallDisplay.js

@@ -1,842 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo, memo, useEffect } from "react";
-import { JsonView, defaultStyles } from "react-json-view-lite";
-import "react-json-view-lite/dist/index.css";
-import { Spinner } from "../../../ui/Spinner";
-import { Button } from "../../../../components/ui/button";
-import { CopyButton } from "../../../../components/ui/copy-button";
-import { Tooltip, TooltipTrigger, TooltipContent, } from "../../../../components/ui/tooltip";
-import { approveToolCall, approveToolCalls, createOperationAllowance, rejectToolCall, updateAgentSettings, } from "../../../services/agentService";
-import { formatTime, formatDateTime } from "../../../utils";
-// Custom dark theme styles for JSON view
-const darkJsonStyles = {
-    ...defaultStyles,
-    container: "dark-json-container",
-    label: "dark-json-label",
-    punctuation: "dark-json-punctuation",
-    stringValue: "dark-json-string",
-    numberValue: "dark-json-number",
-    booleanValue: "dark-json-boolean",
-    nullValue: "dark-json-null",
-    undefinedValue: "dark-json-undefined",
-};
-// JSON view light theme CSS
-const JsonLightThemeStyles = () => (_jsx("style", { children: `
-    .dark-json-container { color: var(--color-neutral-grey-100); }
-    .dark-json-label { color: var(--color-feedback-blue); font-weight: 500; }
-    .dark-json-punctuation { color: var(--color-neutral-grey-50); }
-    .dark-json-string { color: var(--color-feedback-green); }
-    .dark-json-number { color: var(--color-feedback-orange); }
-    .dark-json-boolean { color: var(--color-highlight-100); }
-    .dark-json-null { color: var(--color-feedback-red); }
-    .dark-json-undefined { color: var(--color-feedback-red); }
-  ` }));
-import { ChevronDown, ChevronRight, Check, CheckCircle2, X, XCircle, ShieldCheck, Wrench, Zap, } from "lucide-react";
-const ToolCallStatusIcon = ({ failed }) => {
-    const Icon = failed ? XCircle : CheckCircle2;
-    return (_jsx(Icon, { strokeWidth: 1.75, size: 14, className: failed ? "text-feedback-red" : "text-feedback-green" }));
-};
-const formatToolDuration = (durationMs) => {
-    if (typeof durationMs !== "number" ||
-        !Number.isFinite(durationMs) ||
-        durationMs < 0) {
-        return null;
-    }
-    if (durationMs < 1000) {
-        return `${Math.round(durationMs)}ms`;
-    }
-    if (durationMs < 10_000) {
-        return `${(durationMs / 1000).toFixed(1)}s`;
-    }
-    if (durationMs < 60_000) {
-        return `${Math.round(durationMs / 1000)}s`;
-    }
-    const totalSeconds = Math.round(durationMs / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    if (minutes < 60) {
-        return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-    }
-    const hours = Math.floor(minutes / 60);
-    const remainingMinutes = minutes % 60;
-    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
-};
-const formatToolCallMeta = (createdDate, durationMs) => {
-    const parts = [];
-    let tooltip = null;
-    if (createdDate) {
-        const parsed = new Date(createdDate);
-        if (!Number.isNaN(parsed.getTime())) {
-            parts.push(formatTime(parsed));
-            tooltip = formatDateTime(parsed);
-        }
-    }
-    const duration = formatToolDuration(durationMs);
-    if (duration) {
-        parts.push(duration);
-    }
-    return parts.length > 0 ? { display: parts.join(" • "), tooltip } : null;
-};
-// Helper function to normalize tool calls to a common format
-const normalizeToolCall = (toolCall) => {
-    if ("functionName" in toolCall) {
-        // Agent tool call format
-        return {
-            id: toolCall.toolCallId,
-            displayName: toolCall.functionName,
-            function: {
-                name: toolCall.functionName,
-                arguments: toolCall.functionArguments,
-                result: toolCall.functionResultRichContent || toolCall.functionResult,
-                error: toolCall.functionError,
-            },
-            requiresApproval: toolCall.requiresApproval,
-            isPruned: toolCall.isPruned,
-            prunedAt: toolCall.prunedAt,
-            responseTimeMs: toolCall.responseTimeMs,
-            createdDate: toolCall.createdDate,
-        };
-    }
-    // Already in base format
-    return toolCall;
-};
-// Memoized JSON viewer component to prevent re-renders during streaming
-const MemoizedJsonView = memo(({ data }) => {
-    return (_jsxs("div", { className: "font-mono text-xs", style: { fontSize: "12px" }, children: [_jsx(JsonLightThemeStyles, {}), _jsx(JsonView, { data: data, shouldExpandNode: (level) => level < 2, style: darkJsonStyles })] }));
-}, (prevProps, nextProps) => {
-    // Only re-render if the data actually changed (deep comparison by stringifying)
-    return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data);
-});
-MemoizedJsonView.displayName = "MemoizedJsonView";
-const MAX_AUTO_PARSE_JSON_CHARS = 25_000;
-// Helper function to parse JSON string to object
-const parseJsonString = (json) => {
-    // If it's already an object, return it directly
-    if (typeof json === "object" && json !== null) {
-        return json;
-    }
-    // Convert to string if not already
-    const jsonString = typeof json === "string" ? json : String(json);
-    const trimmed = jsonString.trim();
-    if (!trimmed || trimmed.length > MAX_AUTO_PARSE_JSON_CHARS) {
-        return null;
-    }
-    const firstChar = trimmed[0];
-    if (firstChar !== "{" && firstChar !== "[" && firstChar !== '"') {
-        return null;
-    }
-    // Try to parse as JSON
-    try {
-        let parsed = JSON.parse(trimmed);
-        // If the result is still a string that looks like JSON, parse it again
-        if (typeof parsed === "string" &&
-            (parsed.startsWith("{") || parsed.startsWith("["))) {
-            try {
-                parsed = JSON.parse(parsed);
-            }
-            catch {
-                // Keep the first parsed value when nested JSON is incomplete.
-            }
-        }
-        return parsed;
-    }
-    catch {
-        // Try to handle double-escaped JSON
-        try {
-            const unescaped = trimmed.replace(/\\"/g, '"').replace(/\\\\/g, "\\");
-            const parsed = JSON.parse(unescaped);
-            return parsed;
-        }
-        catch {
-            // If all parsing fails, return null to indicate we should display as plain text
-            return null;
-        }
-    }
-};
-const isImageDataUrl = (value) => {
-    return typeof value === "string" && /^data:image\//i.test(value.trim());
-};
-const getInlineImageSource = (value) => {
-    if (isImageDataUrl(value)) {
-        return value.trim();
-    }
-    if (!value || typeof value !== "object") {
-        return null;
-    }
-    const candidate = value;
-    if (isImageDataUrl(candidate.dataUrl)) {
-        return candidate.dataUrl.trim();
-    }
-    if (isImageDataUrl(candidate.url)) {
-        return candidate.url.trim();
-    }
-    if (isImageDataUrl(candidate.src)) {
-        return candidate.src.trim();
-    }
-    const imageUrlCandidate = candidate.imageUrl ?? candidate.image_url;
-    if (imageUrlCandidate && typeof imageUrlCandidate === "object") {
-        const imageUrlRecord = imageUrlCandidate;
-        if (isImageDataUrl(imageUrlRecord.url)) {
-            return imageUrlRecord.url.trim();
-        }
-    }
-    return null;
-};
-const extractInlineToolResultImage = (value) => {
-    const directSource = getInlineImageSource(value);
-    if (directSource) {
-        return {
-            src: directSource,
-            alt: "Tool result image",
-        };
-    }
-    if (Array.isArray(value)) {
-        for (const entry of value) {
-            const preview = extractInlineToolResultImage(entry);
-            if (preview) {
-                return preview;
-            }
-        }
-        return null;
-    }
-    if (!value || typeof value !== "object") {
-        return null;
-    }
-    const candidate = value;
-    const nestedImage = candidate.image && typeof candidate.image === "object"
-        ? candidate.image
-        : undefined;
-    const richImageSource = getInlineImageSource(candidate.imageUrl ??
-        candidate.image_url);
-    const src = isImageDataUrl(nestedImage?.dataUrl)
-        ? nestedImage?.dataUrl.trim()
-        : isImageDataUrl(candidate.dataUrl)
-            ? candidate.dataUrl.trim()
-            : richImageSource
-                ? richImageSource
-                : null;
-    if (!src) {
-        return null;
-    }
-    const width = typeof candidate.imageWidth === "number" &&
-        Number.isFinite(candidate.imageWidth)
-        ? candidate.imageWidth
-        : typeof nestedImage?.width === "number" &&
-            Number.isFinite(nestedImage.width)
-            ? nestedImage.width
-            : undefined;
-    const height = typeof candidate.imageHeight === "number" &&
-        Number.isFinite(candidate.imageHeight)
-        ? candidate.imageHeight
-        : typeof nestedImage?.height === "number" &&
-            Number.isFinite(nestedImage.height)
-            ? nestedImage.height
-            : undefined;
-    return {
-        src,
-        alt: candidate.scope
-            ? `Screenshot result (${candidate.scope})`
-            : "Tool result image",
-        fileName: nestedImage?.fileName || candidate.fileName,
-        dimensions: width && height
-            ? `${Math.round(width)} x ${Math.round(height)}`
-            : undefined,
-    };
-};
-const sanitizeInlineImageDataForDisplay = (value) => {
-    if (isImageDataUrl(value)) {
-        return "[image data URL omitted from preview]";
-    }
-    if (Array.isArray(value)) {
-        let hasChanges = false;
-        const sanitizedItems = value.map((entry) => {
-            const sanitizedEntry = sanitizeInlineImageDataForDisplay(entry);
-            if (sanitizedEntry !== entry) {
-                hasChanges = true;
-            }
-            return sanitizedEntry;
-        });
-        return hasChanges ? sanitizedItems : value;
-    }
-    if (!value || typeof value !== "object") {
-        return value;
-    }
-    const candidate = value;
-    let hasChanges = false;
-    const clone = {};
-    Object.entries(candidate).forEach(([key, entryValue]) => {
-        const sanitizedValue = sanitizeInlineImageDataForDisplay(entryValue);
-        clone[key] = sanitizedValue;
-        if (sanitizedValue !== entryValue) {
-            hasChanges = true;
-        }
-    });
-    return hasChanges ? clone : value;
-};
-const InlineToolResultPreview = ({ preview, }) => {
-    return (_jsxs("a", { href: preview.src, target: "_blank", rel: "noopener noreferrer", className: "border-border-default hover:border-border-default mb-2 block overflow-hidden rounded border bg-white transition-colors", children: [_jsx("img", { src: preview.src, alt: preview.alt, loading: "lazy", className: "bg-neutral-grey-5 max-h-40 w-auto max-w-full object-contain" }), (preview.fileName || preview.dimensions) && (_jsxs("div", { className: "border-border-default badge-pad text-neutral-grey-50 flex items-center justify-between gap-3 border-t text-[10px]", children: [_jsx("span", { className: "truncate", children: preview.fileName || "Screenshot" }), preview.dimensions && (_jsx("span", { className: "shrink-0", children: preview.dimensions }))] }))] }));
-};
-// Helper function to render JSON or text
-const renderJsonOrText = (json) => {
-    const parsed = parseJsonString(json);
-    if (parsed !== null) {
-        return _jsx(MemoizedJsonView, { data: parsed });
-    }
-    // If parsing failed, display as plain text
-    const jsonString = typeof json === "string" ? json : String(json);
-    return (_jsx("div", { className: "text-neutral-grey-100 font-mono text-xs wrap-break-word whitespace-pre-wrap", children: jsonString }));
-};
-const DISCLOSURE_TRANSITION_MS = 200;
-const AnimatedDisclosureContent = ({ isExpanded, children, contentClassName = "min-h-0 overflow-hidden", }) => {
-    const [shouldRender, setShouldRender] = useState(isExpanded);
-    const [isAnimatingOpen, setIsAnimatingOpen] = useState(isExpanded);
-    useEffect(() => {
-        if (isExpanded) {
-            setShouldRender(true);
-            setIsAnimatingOpen(false);
-            let secondAnimationFrameId = null;
-            const animationFrameId = window.requestAnimationFrame(() => {
-                secondAnimationFrameId = window.requestAnimationFrame(() => {
-                    setIsAnimatingOpen(true);
-                });
-            });
-            return () => {
-                window.cancelAnimationFrame(animationFrameId);
-                if (secondAnimationFrameId !== null) {
-                    window.cancelAnimationFrame(secondAnimationFrameId);
-                }
-            };
-        }
-        setIsAnimatingOpen(false);
-        const timeoutId = window.setTimeout(() => {
-            setShouldRender(false);
-        }, DISCLOSURE_TRANSITION_MS);
-        return () => window.clearTimeout(timeoutId);
-    }, [isExpanded]);
-    if (!shouldRender) {
-        return null;
-    }
-    return (_jsx("div", { className: "grid transition-[grid-template-rows,opacity,transform] duration-200 ease-out motion-reduce:transition-none", style: {
-            gridTemplateRows: isAnimatingOpen ? "1fr" : "0fr",
-            opacity: isAnimatingOpen ? 1 : 0,
-            transform: isAnimatingOpen ? "translateY(0)" : "translateY(-2px)",
-        }, "aria-hidden": !isExpanded, children: _jsx("div", { className: contentClassName, children: children }) }));
-};
-// Expandable panel component
-const ExpandablePanel = ({ title, children, defaultExpanded = false, actionButton, }) => {
-    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-    return (_jsxs("div", { className: "border-border-default border-b last:border-b-0", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "hover:bg-neutral-grey-5/50 flex flex-1 cursor-pointer items-center gap-1.5 px-3 py-1.5 transition-colors", onClick: () => setIsExpanded(!isExpanded), children: [_jsx(ChevronRight, { size: 12, strokeWidth: 1.5, className: `text-neutral-grey-50 transition-transform duration-200 ease-out motion-reduce:transition-none ${isExpanded ? "rotate-90" : "rotate-0"}` }), _jsx("span", { className: "text-neutral-grey-50 text-[10px] font-medium", children: title })] }), actionButton && (_jsx("div", { className: "pr-2", onClick: (e) => e.stopPropagation(), children: actionButton }))] }), _jsx(AnimatedDisclosureContent, { isExpanded: isExpanded, contentClassName: "min-h-0 w-full overflow-auto px-3 pb-2", children: children })] }));
-};
-// Helper function to create expandable tool call details
-const ToolCallDetails = memo(({ toolCall, result, }) => {
-    const isPruned = !!toolCall.isPruned;
-    const hasError = !!toolCall.function?.error && !isPruned;
-    const hasOutput = !!result || hasError || isPruned;
-    const prunedOutput = useMemo(() => {
-        if (!isPruned)
-            return "";
-        return result || toolCall.function?.error || "";
-    }, [isPruned, result, toolCall.function?.error]);
-    // Memoize parsed input data to prevent re-parsing on every render
-    const parsedInput = useMemo(() => {
-        return parseJsonString(toolCall.function?.arguments || "");
-    }, [toolCall.function?.arguments]);
-    // Memoize parsed output data to prevent re-parsing on every render
-    const parsedOutput = useMemo(() => {
-        return parseJsonString(result || "");
-    }, [result]);
-    const parsedPrunedOutput = useMemo(() => {
-        return parseJsonString(prunedOutput);
-    }, [prunedOutput]);
-    const outputPreview = useMemo(() => {
-        if (isPruned) {
-            return extractInlineToolResultImage(parsedPrunedOutput ?? prunedOutput);
-        }
-        if (hasError) {
-            return null;
-        }
-        return extractInlineToolResultImage(parsedOutput ?? (result || ""));
-    }, [
-        hasError,
-        isPruned,
-        parsedOutput,
-        parsedPrunedOutput,
-        prunedOutput,
-        result,
-    ]);
-    const displayPrunedOutput = useMemo(() => {
-        return sanitizeInlineImageDataForDisplay(parsedPrunedOutput ?? prunedOutput);
-    }, [parsedPrunedOutput, prunedOutput]);
-    const displayOutput = useMemo(() => {
-        return sanitizeInlineImageDataForDisplay(parsedOutput ?? (result || ""));
-    }, [parsedOutput, result]);
-    // Get text to copy for input
-    const inputTextToCopy = useMemo(() => {
-        const args = toolCall.function?.arguments || "";
-        if (parsedInput !== null) {
-            return JSON.stringify(parsedInput, null, 2);
-        }
-        return args;
-    }, [toolCall.function?.arguments, parsedInput]);
-    // Get text to copy for output
-    const outputTextToCopy = useMemo(() => {
-        if (isPruned) {
-            if (parsedPrunedOutput !== null) {
-                return JSON.stringify(parsedPrunedOutput, null, 2);
-            }
-            return typeof prunedOutput === "object"
-                ? JSON.stringify(prunedOutput, null, 2)
-                : prunedOutput;
-        }
-        if (hasError) {
-            return toolCall.function?.error || "";
-        }
-        if (parsedOutput !== null) {
-            return JSON.stringify(parsedOutput, null, 2);
-        }
-        if (typeof result === "object") {
-            return JSON.stringify(result, null, 2);
-        }
-        return result || "";
-    }, [
-        hasError,
-        isPruned,
-        toolCall.function?.error,
-        parsedOutput,
-        parsedPrunedOutput,
-        prunedOutput,
-        result,
-    ]);
-    return (_jsxs("div", { className: "border-border-default/60 bg-neutral-grey-5/40 mt-1 ml-5 overflow-hidden rounded border", children: [_jsx(ExpandablePanel, { title: "Input", defaultExpanded: !hasOutput, actionButton: _jsx(CopyButton, { textToCopy: inputTextToCopy, iconOnly: true, className: "text-neutral-grey-50 hover:text-neutral-grey-50 cursor-pointer" }), children: _jsx("div", { className: "rounded bg-white p-2 text-xs", children: parsedInput !== null ? (_jsx(MemoizedJsonView, { data: parsedInput })) : (_jsx("div", { className: "text-neutral-grey-100 font-mono text-xs wrap-break-word whitespace-pre-wrap", children: toolCall.function?.arguments || "" })) }) }), hasOutput && (_jsx(ExpandablePanel, { title: isPruned ? "Pruned" : hasError ? "Error" : "Output", defaultExpanded: true, actionButton: _jsx(CopyButton, { textToCopy: outputTextToCopy, iconOnly: true, className: "text-neutral-grey-50 hover:text-neutral-grey-50 cursor-pointer" }), children: isPruned ? (_jsxs("div", { className: "border-border-default bg-neutral-grey-5/70 text-neutral-grey-100 rounded border-l-2 p-2 text-xs", children: [_jsx("div", { className: "text-neutral-grey-50 mb-1 text-[10px] font-medium", children: "Pruned from AI context" }), _jsx("div", { className: "text-neutral-grey-50 mb-2", children: "This tool call completed, but its output was pruned from future agent context to save tokens." }), prunedOutput ? (_jsxs("div", { className: "rounded bg-white p-2 text-xs", children: [outputPreview && (_jsx(InlineToolResultPreview, { preview: outputPreview })), displayPrunedOutput !== null &&
-                                    typeof displayPrunedOutput === "object" ? (_jsx(MemoizedJsonView, { data: displayPrunedOutput })) : (_jsx("div", { className: "text-neutral-grey-100 font-mono text-xs wrap-break-word whitespace-pre-wrap", children: String(displayPrunedOutput ?? prunedOutput) }))] })) : null] })) : hasError ? (_jsxs("div", { className: "border-feedback-red bg-feedback-red-light/60 text-feedback-red rounded border-l-2 p-2 text-xs", children: [_jsx("div", { className: "text-feedback-red mb-1 text-[10px] font-medium", children: "Error" }), _jsx("div", { className: "text-feedback-red", children: toolCall.function?.error })] })) : (_jsxs("div", { className: "rounded bg-white p-2 text-xs", children: [outputPreview && (_jsx(InlineToolResultPreview, { preview: outputPreview })), displayOutput !== null && typeof displayOutput === "object" ? (_jsx(MemoizedJsonView, { data: displayOutput })) : (_jsx("div", { className: "text-neutral-grey-100 font-mono text-xs wrap-break-word whitespace-pre-wrap", children: String(displayOutput ?? (result || "")) }))] })) }))] }));
-}, (prevProps, nextProps) => {
-    // Only re-render if the data actually changed
-    return (prevProps.toolCall.id === nextProps.toolCall.id &&
-        prevProps.toolCall.function?.arguments ===
-            nextProps.toolCall.function?.arguments &&
-        prevProps.result === nextProps.result &&
-        prevProps.toolCall.function?.error ===
-            nextProps.toolCall.function?.error &&
-        prevProps.toolCall.isPruned === nextProps.toolCall.isPruned);
-});
-ToolCallDetails.displayName = "ToolCallDetails";
-const AnimatedToolCallDetails = ({ isExpanded, children, }) => {
-    return (_jsx(AnimatedDisclosureContent, { isExpanded: isExpanded, children: children }));
-};
-export function ToolCallDisplay({ toolCalls, finished, openPopovers, setOpenPopovers, messageId, agentId, allPendingApprovals = [], onSwitchToAutonomous, browserCaptureInlinePrompt, readOnly = false, }) {
-    const [batchRiskAction, setBatchRiskAction] = useState(null);
-    const [isSwitchingMode, setIsSwitchingMode] = useState(false);
-    const [isGroupExpanded, setIsGroupExpanded] = useState(() => {
-        return (toolCalls?.some((tc) => {
-            if (!tc.requiresApproval)
-                return false;
-            const funcName = ("functionName" in tc
-                ? tc.functionName
-                : normalizeToolCall(tc).function?.name) || "";
-            return (!funcName.includes("(approved)") && !funcName.includes("(rejected)"));
-        }) ?? false);
-    });
-    const [userToggled, setUserToggled] = useState(false);
-    const hasPendingApprovalsInGroup = useMemo(() => {
-        if (!toolCalls)
-            return false;
-        return toolCalls.some((tc) => {
-            if (!tc.requiresApproval)
-                return false;
-            const funcName = ("functionName" in tc
-                ? tc.functionName
-                : normalizeToolCall(tc).function?.name) || "";
-            return (!funcName.includes("(approved)") && !funcName.includes("(rejected)"));
-        });
-    }, [toolCalls]);
-    const isGroupExpandedForRender = !userToggled && hasPendingApprovalsInGroup ? true : isGroupExpanded;
-    const groupSummary = useMemo(() => {
-        if (!toolCalls || toolCalls.length === 0)
-            return null;
-        const uniqueNames = [
-            ...new Set(toolCalls
-                .map((tc) => {
-                const normalized = normalizeToolCall(tc);
-                return (("functionName" in tc
-                    ? tc.functionName
-                    : normalized.function?.name) || "")
-                    .replace(/ \(approved\)/g, "")
-                    .replace(/ \(rejected\)/g, "")
-                    .replace(/ \(pending approval\)/g, "")
-                    .trim();
-            })
-                .filter(Boolean)),
-        ];
-        const errorCount = toolCalls.filter((tc) => {
-            const normalized = normalizeToolCall(tc);
-            return !!normalized.function?.error && !normalized.isPruned;
-        }).length;
-        return { uniqueNames, errorCount };
-    }, [toolCalls]);
-    const shouldShowGroupBrowserCaptureInlinePrompt = useMemo(() => {
-        if (!browserCaptureInlinePrompt || !toolCalls?.length)
-            return false;
-        return toolCalls.some((tc) => {
-            const normalized = normalizeToolCall(tc);
-            const originalFunctionName = ("functionName" in tc ? tc.functionName : normalized.function?.name) ||
-                "";
-            const baseFunctionName = originalFunctionName
-                .replace(" (approved)", "")
-                .replace(" (rejected)", "")
-                .replace(" (pending approval)", "")
-                .trim()
-                .toLowerCase();
-            const approvalInfo = tc.requiresApproval || normalized.requiresApproval;
-            const isCompleted = "isCompleted" in tc
-                ? tc.isCompleted
-                : !!(normalized.function?.result || normalized.function?.error) &&
-                    !approvalInfo;
-            return (browserCaptureInlinePrompt.toolNames.includes(baseFunctionName) &&
-                !isCompleted &&
-                !normalized.function?.error);
-        });
-    }, [browserCaptureInlinePrompt, toolCalls]);
-    const allToolCallsCompleted = useMemo(() => {
-        if (!toolCalls || toolCalls.length === 0)
-            return false;
-        return toolCalls.every((tc) => {
-            const isAgentToolCall = "isCompleted" in tc;
-            if (isAgentToolCall)
-                return tc.isCompleted;
-            const normalized = normalizeToolCall(tc);
-            const approvalInfo = tc.requiresApproval || normalized.requiresApproval;
-            return (!!(normalized.function?.result || normalized.function?.error) &&
-                !approvalInfo);
-        });
-    }, [toolCalls]);
-    const groupHasFailedToolCall = useMemo(() => {
-        if (!toolCalls || toolCalls.length === 0)
-            return false;
-        return toolCalls.some((tc) => {
-            const normalized = normalizeToolCall(tc);
-            const functionName = ("functionName" in tc ? tc.functionName : normalized.function?.name) ||
-                "";
-            const isRejected = functionName.toLowerCase().includes("(rejected)");
-            return ((!!normalized.function?.error && !normalized.isPruned) || isRejected);
-        });
-    }, [toolCalls]);
-    if (!toolCalls || toolCalls.length === 0) {
-        return null;
-    }
-    const resolvePendingToolCalls = async (pendingToolCalls, approved) => {
-        if (readOnly)
-            return;
-        if (!agentId || pendingToolCalls.length === 0)
-            return;
-        const actionLabel = approved ? "approve" : "reject";
-        if (approved && pendingToolCalls.length > 1) {
-            const result = await approveToolCalls({
-                agentId,
-                toolCalls: pendingToolCalls.map((pending) => ({
-                    messageId: pending.dbMessageId || pending.messageId,
-                    toolCallId: pending.toolCallId,
-                })),
-            });
-            const approvedToolCallIds = result.approvedToolCallIds && result.approvedToolCallIds.length > 0
-                ? new Set(result.approvedToolCallIds)
-                : new Set(pendingToolCalls.map((pending) => pending.toolCallId));
-            pendingToolCalls.forEach((pending) => {
-                if (!approvedToolCallIds.has(pending.toolCallId)) {
-                    return;
-                }
-                window.dispatchEvent(new CustomEvent("agent:toolApprovalResolved", {
-                    detail: {
-                        agentId,
-                        messageId: pending.dbMessageId || pending.messageId,
-                        toolCallId: pending.toolCallId,
-                        approved: true,
-                    },
-                }));
-            });
-            return;
-        }
-        await Promise.all(pendingToolCalls.map(async (pending) => {
-            try {
-                const params = {
-                    agentId,
-                    messageId: pending.dbMessageId || pending.messageId,
-                    toolCallId: pending.toolCallId,
-                };
-                if (approved) {
-                    await approveToolCall(params);
-                }
-                else {
-                    await rejectToolCall(params);
-                }
-                window.dispatchEvent(new CustomEvent("agent:toolApprovalResolved", {
-                    detail: {
-                        agentId,
-                        messageId: pending.dbMessageId || pending.messageId,
-                        toolCallId: pending.toolCallId,
-                        approved,
-                    },
-                }));
-            }
-            catch (error) {
-                console.error(`Failed to ${actionLabel} tool call ${pending.toolCallId}:`, error);
-            }
-        }));
-    };
-    // Helper to approve/reject all pending tool calls at once
-    const handleApproveAllPending = async () => {
-        if (!agentId || batchRiskAction)
-            return;
-        if (allPendingApprovals.length === 0)
-            return;
-        setBatchRiskAction("approve");
-        try {
-            await resolvePendingToolCalls(allPendingApprovals, true);
-        }
-        finally {
-            setBatchRiskAction(null);
-        }
-    };
-    const handleRejectAllPending = async () => {
-        if (!agentId || batchRiskAction)
-            return;
-        if (allPendingApprovals.length === 0)
-            return;
-        setBatchRiskAction("reject");
-        try {
-            await resolvePendingToolCalls(allPendingApprovals, false);
-        }
-        finally {
-            setBatchRiskAction(null);
-        }
-    };
-    // Helper to switch to autonomous mode
-    const handleSwitchToAutonomous = async () => {
-        if (readOnly)
-            return;
-        if (!agentId || isSwitchingMode)
-            return;
-        setIsSwitchingMode(true);
-        try {
-            const result = await updateAgentSettings(agentId, { mode: "autonomous" });
-            if (result.success === false || result.updates?.mode === false) {
-                throw new Error("Mode change was not applied");
-            }
-            onSwitchToAutonomous?.();
-            // After switching to autonomous, approve all remaining pending tool calls
-            if (allPendingApprovals.length > 0) {
-                await resolvePendingToolCalls(allPendingApprovals, true);
-            }
-        }
-        catch (error) {
-            console.error("Failed to switch to autonomous mode:", error);
-            alert(`Failed to switch to autonomous mode: ${error?.message || "Unknown error"}`);
-        }
-        finally {
-            setIsSwitchingMode(false);
-        }
-    };
-    const showGroupHeader = toolCalls.length > 0;
-    return (_jsxs("div", { className: "flex flex-col", children: [showGroupHeader && (_jsxs("div", { className: "group text-neutral-grey-50 hover:bg-neutral-grey-5/60 hover:text-neutral-grey-100 flex cursor-pointer items-center gap-1.5 rounded-md px-1 py-1 text-xs transition-all", onClick: () => {
-                    setIsGroupExpanded(!isGroupExpandedForRender);
-                    setUserToggled(true);
-                }, children: [_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center transition-transform group-hover:scale-110", children: isGroupExpandedForRender ? (_jsx(ChevronDown, { size: 14, strokeWidth: 1.5, className: "text-neutral-grey-50" })) : (_jsx(ChevronRight, { size: 14, strokeWidth: 1.5, className: "text-neutral-grey-50" })) }), _jsx("div", { className: "text-neutral-grey-50 flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(Wrench, { strokeWidth: 1.5, size: 14 }) }), _jsxs("span", { className: `leading-4 font-medium ${!allToolCallsCompleted && !groupHasFailedToolCall
-                            ? "animate-text-shimmer"
-                            : ""}`, children: [toolCalls.length, " tool call", toolCalls.length !== 1 ? "s" : ""] }), !isGroupExpandedForRender && groupSummary && (_jsx("span", { className: "text-neutral-grey-50 ml-1 min-w-0 flex-1 truncate text-[10px] leading-4", children: groupSummary.uniqueNames.length <= 3
-                            ? groupSummary.uniqueNames.join(", ")
-                            : `${groupSummary.uniqueNames.slice(0, 2).join(", ")} +${groupSummary.uniqueNames.length - 2} more` })), groupSummary && groupSummary.errorCount > 0 && (_jsxs("span", { className: "text-feedback-red ml-1 shrink-0 text-[10px] leading-4", children: ["(", groupSummary.errorCount, " error", groupSummary.errorCount !== 1 ? "s" : "", ")"] })), _jsx("div", { className: "ml-auto flex h-4 w-4 shrink-0 items-center justify-center", children: groupHasFailedToolCall || allToolCallsCompleted ? (_jsx(ToolCallStatusIcon, { failed: groupHasFailedToolCall })) : (_jsx(Spinner, { size: "xs" })) })] })), shouldShowGroupBrowserCaptureInlinePrompt &&
-                browserCaptureInlinePrompt && (_jsx("div", { className: "border-feedback-blue bg-feedback-blue-light text-feedback-blue mt-2 ml-5 rounded-lg border p-3 text-[11px]", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium", children: browserCaptureInlinePrompt.label }), _jsx("div", { className: "text-feedback-blue mt-1", children: browserCaptureInlinePrompt.description })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", className: "border-feedback-blue badge-pad text-feedback-blue rounded border bg-white text-[11px] font-medium disabled:cursor-not-allowed disabled:opacity-60", disabled: browserCaptureInlinePrompt.isPending, onClick: (event) => {
-                                        event.stopPropagation();
-                                        browserCaptureInlinePrompt.onAction();
-                                    }, children: browserCaptureInlinePrompt.actionLabel }), browserCaptureInlinePrompt.onCancel && (_jsx("button", { type: "button", className: "border-feedback-blue badge-pad text-feedback-blue rounded border bg-white text-[11px] font-medium disabled:cursor-not-allowed disabled:opacity-60", disabled: browserCaptureInlinePrompt.isPending, onClick: (event) => {
-                                        event.stopPropagation();
-                                        browserCaptureInlinePrompt.onCancel?.();
-                                    }, children: browserCaptureInlinePrompt.cancelLabel ?? "Cancel" }))] })] }) })), _jsx("div", { className: userToggled
-                    ? "grid transition-[grid-template-rows] duration-200 ease-out"
-                    : "grid", style: {
-                    gridTemplateRows: isGroupExpandedForRender ? "1fr" : "0fr",
-                }, "aria-hidden": !isGroupExpandedForRender, children: _jsx("div", { className: "overflow-hidden", children: _jsx("div", { className: "ml-4", children: toolCalls.map((originalToolCall, toolIndex) => {
-                            const toolCall = normalizeToolCall(originalToolCall);
-                            const toolResult = toolCall.function?.result;
-                            const isAgentToolCall = "isCompleted" in originalToolCall;
-                            const toolCallKey = ("toolCallId" in originalToolCall
-                                ? originalToolCall.toolCallId
-                                : toolCall.id) || `${messageId}-${toolIndex}`;
-                            const popoverKey = `${messageId}-${toolCallKey}`;
-                            const isPruned = !!toolCall.isPruned;
-                            const toolCallMeta = formatToolCallMeta(toolCall.createdDate, toolCall.responseTimeMs);
-                            // Get approval information to check if tool call is pending approval
-                            const approvalInfo = originalToolCall.requiresApproval || toolCall.requiresApproval;
-                            const isCompleted = isAgentToolCall
-                                ? originalToolCall.isCompleted
-                                : !!(toolResult || toolCall.function?.error) && !approvalInfo;
-                            // Check if tool call is currently streaming (arguments still being generated)
-                            const isStreaming = isAgentToolCall &&
-                                "isStreaming" in originalToolCall &&
-                                originalToolCall.isStreaming === true;
-                            // Use the approval info from the backend
-                            const finalApprovalInfo = approvalInfo;
-                            const toolCallIdForApproval = "toolCallId" in originalToolCall
-                                ? originalToolCall.toolCallId
-                                : toolCall.id;
-                            // Check if this tool call has been approved/rejected (look for status indicators in function name)
-                            // The AgentTerminal adds " (approved)" or " (rejected)" or " (pending approval)" to the functionName field
-                            const originalFunctionName = ("functionName" in originalToolCall
-                                ? originalToolCall.functionName
-                                : toolCall?.function?.name) || "";
-                            const baseFunctionName = originalFunctionName
-                                .replace(" (approved)", "")
-                                .replace(" (rejected)", "")
-                                .replace(" (pending approval)", "")
-                                .trim()
-                                .toLowerCase();
-                            const isApproved = originalFunctionName.includes("(approved)");
-                            const isRejected = originalFunctionName.includes("(rejected)");
-                            // Treat only approved/rejected as final; pending should still show buttons
-                            const hasApprovalStatus = isApproved || isRejected;
-                            const hasFailed = (!!toolCall.function?.error && !isPruned) || isRejected;
-                            const isAwaitingApproval = !!finalApprovalInfo && !hasApprovalStatus;
-                            const showPendingStatus = !hasFailed &&
-                                !isCompleted &&
-                                (isAwaitingApproval || isStreaming || !finished);
-                            // Debug logging removed for performance
-                            const isExpanded = openPopovers[popoverKey] || false;
-                            const shouldShowBrowserCaptureInlinePrompt = !!browserCaptureInlinePrompt &&
-                                browserCaptureInlinePrompt.toolNames.includes(baseFunctionName) &&
-                                !isCompleted &&
-                                !toolCall.function?.error;
-                            const toolCallMessageId = originalToolCall.messageId || toolCall.messageId || messageId;
-                            return (_jsxs("div", { children: [_jsxs("div", { className: "group text-neutral-grey-50 hover:bg-neutral-grey-5/60 hover:text-neutral-grey-100 flex cursor-pointer items-center gap-1.5 rounded-md px-1 py-1 text-xs transition-all", onClick: () => {
-                                            setOpenPopovers((prev) => ({
-                                                ...prev,
-                                                [popoverKey]: !prev[popoverKey],
-                                            }));
-                                        }, children: [_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center transition-transform group-hover:scale-110", children: _jsx(ChevronRight, { size: 14, strokeWidth: 1.5, className: `text-neutral-grey-50 transition-transform duration-200 ease-out motion-reduce:transition-none ${isExpanded ? "rotate-90" : "rotate-0"}` }) }), _jsx("div", { className: "text-neutral-grey-50 flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(Wrench, { strokeWidth: 1.5, size: 14 }) }), _jsxs("div", { className: "inline-flex min-w-0 flex-1 items-center gap-2", children: [_jsxs("span", { className: `shrink-0 leading-4 font-medium transition-colors ${toolCall.function?.error && !isPruned
-                                                            ? "text-feedback-red"
-                                                            : isPruned
-                                                                ? "text-neutral-grey-50"
-                                                                : ""}`, children: [(originalFunctionName ||
-                                                                toolCall?.function?.name ||
-                                                                toolCall?.displayName ||
-                                                                "(function name missing)")
-                                                                .replace(" (approved)", "")
-                                                                .replace(" (rejected)", "")
-                                                                .replace(" (pending approval)", ""), toolCall.function?.error &&
-                                                                !isRejected &&
-                                                                !isPruned && (_jsx("span", { className: "text-feedback-red ml-1 leading-4", children: "(error)" })), isPruned && (_jsxs("span", { className: "rounded-badge bg-neutral-grey-5 badge-pad-sm text-2xs text-neutral-grey-100 ml-2 inline-flex items-center gap-1 font-medium", children: [_jsx("span", { children: "\u2702" }), " Pruned"] })), finalApprovalInfo && isRejected && (_jsxs("span", { className: "rounded-badge bg-feedback-red-light badge-pad-sm text-2xs text-feedback-red ml-2 inline-flex items-center gap-1 font-medium", children: [_jsx("span", { children: "\u2717" }), " Rejected"] }))] }), finalApprovalInfo?.summary && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "text-neutral-grey-50 min-w-0 flex-1 cursor-help truncate text-xs leading-4 italic", children: finalApprovalInfo.summary }) }), _jsx(TooltipContent, { side: "top", className: "max-w-md", children: finalApprovalInfo.summary })] })), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [!isCompleted &&
-                                                                finalApprovalInfo &&
-                                                                !hasApprovalStatus && (_jsx(ApprovalDialog, { toolCallId: toolCallIdForApproval, finalApprovalInfo: finalApprovalInfo, isAgentToolCall: isAgentToolCall, originalToolCall: originalToolCall, toolCall: toolCall, messageId: toolCallMessageId, agentId: agentId, readOnly: readOnly })), toolCallMeta &&
-                                                                (toolCallMeta.tooltip ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "text-neutral-grey-50 cursor-help text-[10px] leading-4", children: toolCallMeta.display }) }), _jsx(TooltipContent, { side: "top", children: toolCallMeta.tooltip })] })) : (_jsx("span", { className: "text-neutral-grey-50 text-[10px] leading-4", children: toolCallMeta.display }))), _jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center transition-all", children: hasFailed ? (_jsx(ToolCallStatusIcon, { failed: true })) : showPendingStatus ? (_jsx(Spinner, { size: "xs" })) : (_jsx(ToolCallStatusIcon, { failed: false })) })] })] })] }), _jsx(AnimatedToolCallDetails, { isExpanded: isExpanded, children: _jsx(ToolCallDetails, { toolCall: toolCall, result: toolResult }) }), !shouldShowGroupBrowserCaptureInlinePrompt &&
-                                        shouldShowBrowserCaptureInlinePrompt &&
-                                        browserCaptureInlinePrompt && (_jsx("div", { className: "border-feedback-blue bg-feedback-blue-light text-feedback-blue mt-2 ml-5 rounded-lg border p-3 text-[11px]", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium", children: browserCaptureInlinePrompt.label }), _jsx("div", { className: "text-feedback-blue mt-1", children: browserCaptureInlinePrompt.description })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", className: "border-feedback-blue badge-pad text-feedback-blue rounded border bg-white text-[11px] font-medium disabled:cursor-not-allowed disabled:opacity-60", disabled: browserCaptureInlinePrompt.isPending, onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                browserCaptureInlinePrompt.onAction();
-                                                            }, children: browserCaptureInlinePrompt.actionLabel }), browserCaptureInlinePrompt.onCancel && (_jsx("button", { type: "button", className: "border-feedback-blue badge-pad text-feedback-blue rounded border bg-white text-[11px] font-medium disabled:cursor-not-allowed disabled:opacity-60", disabled: browserCaptureInlinePrompt.isPending, onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                browserCaptureInlinePrompt.onCancel?.();
-                                                            }, children: browserCaptureInlinePrompt.cancelLabel ??
-                                                                "Cancel" }))] })] }) }))] }, toolCallKey));
-                        }) }) }) }), (() => {
-                if (!hasPendingApprovalsInGroup)
-                    return null;
-                const totalPending = allPendingApprovals.length;
-                const isPlural = totalPending !== 1;
-                const uniqueRisks = Array.from(new Set(allPendingApprovals.map((p) => p.riskLevel || undefined)));
-                const singleRisk = uniqueRisks.length === 1 ? uniqueRisks[0] : undefined;
-                const showRiskBadge = singleRisk === "high";
-                // Hide autonomous switch if any pending tool call in the group is a delete
-                const hideAutonomousSwitch = toolCalls.some((tc) => {
-                    if (!tc.requiresApproval)
-                        return false;
-                    const name = ("functionName" in tc
-                        ? tc.functionName
-                        : normalizeToolCall(tc).function?.name) || "";
-                    const base = name
-                        .replace(" (approved)", "")
-                        .replace(" (rejected)", "")
-                        .replace(" (pending approval)", "")
-                        .trim()
-                        .toLowerCase();
-                    return base === "delete-item" || base === "delete-items";
-                });
-                const isApproving = batchRiskAction === "approve";
-                const isRejecting = batchRiskAction === "reject";
-                const isBusy = batchRiskAction !== null || isSwitchingMode;
-                const countSuffix = isPlural ? ` All (${totalPending})` : "";
-                return (_jsxs("div", { className: "mt-2 flex flex-col gap-2 p-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showRiskBadge && (_jsx("span", { className: "rounded-badge bg-feedback-red-light badge-pad-sm text-2xs text-feedback-red ring-feedback-red inline-flex shrink-0 items-center font-medium ring-1 ring-inset", children: singleRisk })), _jsxs("span", { className: "text-neutral-grey-50 truncate text-xs", children: [totalPending, " action", isPlural ? "s" : "", " awaiting approval"] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "sm", "data-testid": "agent-approve-all-button", disabled: isBusy || readOnly, onClick: handleApproveAllPending, title: readOnly ? "Read-only access" : undefined, className: "bg-feedback-green hover:bg-feedback-green h-7 gap-1.5 px-2.5 text-xs text-white shadow-xs", children: [isApproving ? (_jsx(Spinner, { size: "xs" })) : (_jsx(Check, { size: 12, strokeWidth: 2.5 })), "Approve", countSuffix] }), _jsxs(Button, { size: "sm", variant: "outline", "data-testid": "agent-reject-all-button", disabled: isBusy || readOnly, onClick: handleRejectAllPending, title: readOnly ? "Read-only access" : undefined, className: "border-feedback-red text-feedback-red hover:border-feedback-red hover:bg-feedback-red-light hover:text-feedback-red h-7 gap-1.5 bg-white px-2.5 text-xs", children: [isRejecting ? (_jsx(Spinner, { size: "xs" })) : (_jsx(X, { size: 12, strokeWidth: 2.5 })), "Reject", countSuffix] }), !hideAutonomousSwitch && (_jsxs(Button, { size: "sm", variant: "ghost", disabled: isBusy || readOnly, onClick: handleSwitchToAutonomous, title: readOnly
-                                        ? "Read-only access"
-                                        : "Stop asking for approval and let the agent run autonomously", className: "text-neutral-grey-50 hover:text-neutral-grey-100 ml-auto h-7 gap-1.5 px-2 text-xs", children: [isSwitchingMode ? (_jsx(Spinner, { size: "xs" })) : (_jsx(Zap, { size: 12, strokeWidth: 2 })), isSwitchingMode ? "Switching" : "Autonomous"] }))] })] }));
-            })()] }));
-}
-function ApprovalDialog({ toolCallId, finalApprovalInfo, isAgentToolCall, originalToolCall, toolCall, messageId, agentId, readOnly = false, }) {
-    const [isCreatingAllowance, setIsCreatingAllowance] = useState(false);
-    const getActualMessageId = () => {
-        return isAgentToolCall
-            ? originalToolCall.dbMessageId || originalToolCall.messageId
-            : messageId;
-    };
-    const dispatchApprovalResolved = (actualMessageId, approved) => {
-        const ev = new CustomEvent("agent:toolApprovalResolved", {
-            detail: {
-                agentId,
-                messageId: actualMessageId,
-                toolCallId: toolCall.id,
-                approved,
-            },
-        });
-        window.dispatchEvent(ev);
-    };
-    const approveCurrentToolCall = async () => {
-        if (readOnly)
-            return;
-        const actualMessageId = getActualMessageId();
-        if (!agentId) {
-            console.error("Cannot approve tool call: agentId is missing");
-            return;
-        }
-        if (!actualMessageId) {
-            console.error("Cannot approve tool call: messageId is missing");
-            return;
-        }
-        await approveToolCall({
-            agentId,
-            messageId: actualMessageId,
-            toolCallId: toolCall.id,
-        });
-        dispatchApprovalResolved(actualMessageId, true);
-    };
-    const allowableScope = finalApprovalInfo.allowableScope;
-    const showAllowInScopeButton = !!agentId &&
-        allowableScope?.operationType === "delete" &&
-        !!allowableScope.parentItemId &&
-        !!allowableScope.parentItemPath;
-    const riskLevel = finalApprovalInfo.riskLevel;
-    return (_jsxs(_Fragment, { children: [riskLevel === "high" && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "bg-feedback-red-light badge-pad-sm text-feedback-red shrink-0 cursor-help rounded text-[10px] font-medium", children: riskLevel }) }), _jsxs(TooltipContent, { side: "top", className: "max-w-xs", children: [_jsxs("div", { className: "font-medium", children: ["Risk: ", riskLevel.toUpperCase()] }), _jsx("div", { className: "mt-0.5 font-normal opacity-90", children: finalApprovalInfo.summary })] })] })), showAllowInScopeButton && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": isCreatingAllowance
-                                ? "Allowing..."
-                                : `Allow deletes in ${allowableScope?.parentItemPath}`, disabled: isCreatingAllowance || readOnly, className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex size-5 shrink-0 items-center justify-center rounded disabled:cursor-not-allowed disabled:opacity-60", onClick: async (e) => {
-                                e.stopPropagation();
-                                if (readOnly)
-                                    return;
-                                if (!agentId || !allowableScope?.parentItemId)
-                                    return;
-                                setIsCreatingAllowance(true);
-                                try {
-                                    await createOperationAllowance({
-                                        agentId,
-                                        itemId: allowableScope.parentItemId,
-                                        operationType: "delete",
-                                        scopeType: "itemSubtree",
-                                    });
-                                    await approveCurrentToolCall();
-                                }
-                                catch (error) {
-                                    console.error("Failed to create operation allowance:", error);
-                                    alert(`Failed to allow deletes in scope: ${error?.message || "Unknown error"}`);
-                                }
-                                finally {
-                                    setIsCreatingAllowance(false);
-                                }
-                            }, children: _jsx(ShieldCheck, { className: "size-3" }) }) }), _jsx(TooltipContent, { side: "top", children: isCreatingAllowance
-                            ? "Allowing..."
-                            : `Allow deletes in ${allowableScope?.parentItemPath}` })] }))] }));
-}
-//# sourceMappingURL=ToolCallDisplay.js.map