@parhelia/core 0.1.12565 → 0.1.12570

package/dist/editor/ai/ToolCallDisplay.js

@@ -5,8 +5,7 @@ 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 { approveToolCall, createOperationAllowance, rejectToolCall, updateAgentSettings, } from "../services/agentService";
-import { formatTime } from "../utils";
+import { approveToolCall, rejectToolCall, updateAgentSettings } from "../services/agentService";
 // Custom dark theme styles for JSON view
 const darkJsonStyles = {
     ...defaultStyles,
@@ -50,7 +49,7 @@ const getToolIcon = (toolName) => {
         "remove-component": _jsx(Trash2, { strokeWidth: 1, size: 14 }),
         "move-components": _jsx(Edit, { strokeWidth: 1, size: 14 }),
         "get-placeholders": _jsx(Code, { strokeWidth: 1, size: 14 }),
-        "get-component-schema-with-placeholders": _jsx(Code, { strokeWidth: 1, size: 14 }),
+        "get-component-props-and-placeholders": _jsx(Code, { strokeWidth: 1, size: 14 }),
         // Search operations
         "search-content": _jsx(Search, { strokeWidth: 1, size: 14 }),
         "search-images": _jsx(FileSearch, { strokeWidth: 1, size: 14 }),
@@ -69,45 +68,6 @@ const getToolIcon = (toolName) => {
     };
     return iconMap[toolName] || iconMap.default;
 };
-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 = [];
-    if (createdDate) {
-        const parsed = new Date(createdDate);
-        if (!Number.isNaN(parsed.getTime())) {
-            parts.push(formatTime(parsed));
-        }
-    }
-    const duration = formatToolDuration(durationMs);
-    if (duration) {
-        parts.push(duration);
-    }
-    return parts.length > 0 ? parts.join(" • ") : null;
-};
 // Helper function to normalize tool calls to a common format
 const normalizeToolCall = (toolCall) => {
     if ("functionName" in toolCall) {
@@ -118,14 +78,10 @@ const normalizeToolCall = (toolCall) => {
             function: {
                 name: toolCall.functionName,
                 arguments: toolCall.functionArguments,
-                result: toolCall.functionResultRichContent || toolCall.functionResult,
+                result: toolCall.functionResult,
                 error: toolCall.functionError,
             },
             requiresApproval: toolCall.requiresApproval,
-            isPruned: toolCall.isPruned,
-            prunedAt: toolCall.prunedAt,
-            responseTimeMs: toolCall.responseTimeMs,
-            createdDate: toolCall.createdDate,
         };
     }
     // Already in base format
@@ -177,129 +133,6 @@ const parseJsonString = (json) => {
         }
     }
 };
-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: "mb-2 block overflow-hidden rounded border border-gray-200 bg-white transition-colors hover:border-gray-300", children: [_jsx("img", { src: preview.src, alt: preview.alt, loading: "lazy", className: "max-h-40 w-auto max-w-full bg-gray-100 object-contain" }), (preview.fileName || preview.dimensions) && (_jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-gray-100 px-2 py-1 text-[10px] text-gray-500", 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);
@@ -308,7 +141,7 @@ const renderJsonOrText = (json) => {
     }
     // If parsing failed, display as plain text
     const jsonString = typeof json === "string" ? json : String(json);
-    return (_jsx("div", { className: "font-mono text-xs wrap-break-word whitespace-pre-wrap text-gray-700", children: jsonString }));
+    return (_jsx("div", { className: "font-mono text-xs break-words whitespace-pre-wrap text-gray-700", children: jsonString }));
 };
 // Expandable panel component
 const ExpandablePanel = ({ title, children, defaultExpanded = false, actionButton, }) => {
@@ -316,15 +149,9 @@ const ExpandablePanel = ({ title, children, defaultExpanded = false, actionButto
     return (_jsxs("div", { className: "border-b border-gray-100 last:border-b-0", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex flex-1 cursor-pointer items-center gap-1.5 px-3 py-1.5 transition-colors hover:bg-gray-50/50", onClick: () => setIsExpanded(!isExpanded), children: [isExpanded ? (_jsx(ChevronDown, { size: 12, strokeWidth: 1.5, className: "text-gray-400 transition-transform" })) : (_jsx(ChevronRight, { size: 12, strokeWidth: 1.5, className: "text-gray-400 transition-transform" })), _jsx("span", { className: "text-[10px] font-medium text-gray-500", children: title })] }), actionButton && (_jsx("div", { className: "pr-2", onClick: (e) => e.stopPropagation(), children: actionButton }))] }), isExpanded && (_jsx("div", { className: "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]);
+const ToolCallDetails = memo(({ toolCall, result }) => {
+    const hasError = toolCall.function?.error;
+    const hasOutput = result || hasError;
     // Memoize parsed input data to prevent re-parsing on every render
     const parsedInput = useMemo(() => {
         return parseJsonString(toolCall.function?.arguments || "");
@@ -333,31 +160,6 @@ const ToolCallDetails = memo(({ toolCall, result, }) => {
     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 || "";
@@ -368,194 +170,63 @@ const ToolCallDetails = memo(({ toolCall, result, }) => {
     }, [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: "mt-1 ml-5 overflow-hidden rounded border border-gray-200/60 bg-gray-50/40", children: [_jsx(ExpandablePanel, { title: "Input", defaultExpanded: !hasOutput, actionButton: _jsx(CopyButton, { textToCopy: inputTextToCopy, iconOnly: true, className: "cursor-pointer text-gray-400 hover:text-gray-600" }), children: _jsx("div", { className: "rounded bg-white p-2 text-xs", children: parsedInput !== null ? (_jsx(MemoizedJsonView, { data: parsedInput })) : (_jsx("div", { className: "font-mono text-xs wrap-break-word whitespace-pre-wrap text-gray-700", children: toolCall.function?.arguments || "" })) }) }), hasOutput && (_jsx(ExpandablePanel, { title: isPruned ? "Pruned" : hasError ? "Error" : "Output", defaultExpanded: true, actionButton: _jsx(CopyButton, { textToCopy: outputTextToCopy, iconOnly: true, className: "cursor-pointer text-gray-400 hover:text-gray-600" }), children: isPruned ? (_jsxs("div", { className: "rounded border-l-2 border-slate-400 bg-slate-50/70 p-2 text-xs text-slate-700", children: [_jsx("div", { className: "mb-1 text-[10px] font-medium text-slate-600", children: "Pruned from AI context" }), _jsx("div", { className: "mb-2 text-slate-600", 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: "font-mono text-xs wrap-break-word whitespace-pre-wrap text-gray-700", children: String(displayPrunedOutput ?? prunedOutput) }))] })) : null] })) : hasError ? (_jsxs("div", { className: "rounded border-l-2 border-red-400 bg-red-50/60 p-2 text-xs text-red-700", children: [_jsx("div", { className: "mb-1 text-[10px] font-medium text-red-600", children: "Error" }), _jsx("div", { className: "text-red-600", 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: "font-mono text-xs wrap-break-word whitespace-pre-wrap text-gray-700", children: String(displayOutput ?? (result || "")) }))] })) }))] }));
+    }, [hasError, toolCall.function?.error, parsedOutput, result]);
+    return (_jsxs("div", { className: "mt-1 ml-5 overflow-hidden rounded border border-gray-200/60 bg-gray-50/40", children: [_jsx(ExpandablePanel, { title: "Input", defaultExpanded: !hasOutput, actionButton: _jsx(CopyButton, { textToCopy: inputTextToCopy, iconOnly: true, className: "cursor-pointer text-gray-400 hover:text-gray-600" }), children: _jsx("div", { className: "rounded bg-white p-2 text-xs", children: parsedInput !== null ? (_jsx(MemoizedJsonView, { data: parsedInput })) : (_jsx("div", { className: "font-mono text-xs break-words whitespace-pre-wrap text-gray-700", children: toolCall.function?.arguments || "" })) }) }), hasOutput && (_jsx(ExpandablePanel, { title: hasError ? "Error" : "Output", defaultExpanded: true, actionButton: _jsx(CopyButton, { textToCopy: outputTextToCopy, iconOnly: true, className: "cursor-pointer text-gray-400 hover:text-gray-600" }), children: hasError ? (_jsxs("div", { className: "rounded border-l-2 border-red-400 bg-red-50/60 p-2 text-xs text-red-700", children: [_jsx("div", { className: "mb-1 text-[10px] font-medium text-red-600", children: "Error" }), _jsx("div", { className: "text-red-600", children: toolCall.function?.error })] })) : (_jsx("div", { className: "rounded bg-white p-2 text-xs", children: parsedOutput !== null ? (_jsx(MemoizedJsonView, { data: parsedOutput })) : (_jsx("div", { className: "font-mono text-xs break-words whitespace-pre-wrap text-gray-700", children: 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);
+        prevProps.toolCall.function?.error === nextProps.toolCall.function?.error);
 });
 ToolCallDetails.displayName = "ToolCallDetails";
-export function ToolCallDisplay({ toolCalls, finished, openPopovers, setOpenPopovers, messageId, agentId, allPendingApprovals = [], onSwitchToAutonomous, seenApprovalDialogs, onApprovalDialogShown, browserCaptureInlinePrompt, }) {
-    const [batchRiskAction, setBatchRiskAction] = useState(null);
+export function ToolCallDisplay({ toolCalls, finished, openPopovers, setOpenPopovers, messageId, agentId, allPendingApprovals = [], onSwitchToAutonomous, seenApprovalDialogs, onApprovalDialogShown, }) {
+    const [isApprovingAll, setIsApprovingAll] = useState(false);
     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]);
-    useEffect(() => {
-        if (!userToggled) {
-            setIsGroupExpanded(hasPendingApprovalsInGroup);
-        }
-    }, [userToggled, hasPendingApprovalsInGroup]);
-    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]);
     if (!toolCalls || toolCalls.length === 0) {
         return null;
     }
-    const resolvePendingToolCalls = async (pendingToolCalls, approved) => {
-        if (!agentId || pendingToolCalls.length === 0)
-            return;
-        const actionLabel = approved ? "approve" : "reject";
-        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: {
-                        messageId: pending.dbMessageId || pending.messageId,
-                        toolCallId: pending.toolCallId,
-                        approved,
-                    },
-                }));
-            }
-            catch (error) {
-                console.error(`Failed to ${actionLabel} tool call ${pending.toolCallId}:`, error);
-            }
-        }));
-    };
     // Helper to approve all pending tool calls with a specific risk level
     const handleApproveAllByRisk = async (riskLevel) => {
-        if (!agentId || batchRiskAction)
+        if (!agentId || isApprovingAll)
             return;
         const matchingPending = allPendingApprovals.filter((p) => (p.riskLevel || undefined) === riskLevel);
         if (matchingPending.length === 0)
             return;
-        setBatchRiskAction("approve");
+        setIsApprovingAll(true);
         try {
-            await resolvePendingToolCalls(matchingPending, true);
-        }
-        finally {
-            setBatchRiskAction(null);
-        }
-    };
-    const handleRejectAllByRisk = async (riskLevel) => {
-        if (!agentId || batchRiskAction)
-            return;
-        const matchingPending = allPendingApprovals.filter((p) => (p.riskLevel || undefined) === riskLevel);
-        if (matchingPending.length === 0)
-            return;
-        setBatchRiskAction("reject");
-        try {
-            await resolvePendingToolCalls(matchingPending, false);
+            // Approve all matching tool calls in parallel
+            await Promise.all(matchingPending.map(async (pending) => {
+                try {
+                    await approveToolCall({
+                        agentId,
+                        messageId: pending.dbMessageId || pending.messageId,
+                        toolCallId: pending.toolCallId,
+                    });
+                    // Dispatch event to update UI
+                    window.dispatchEvent(new CustomEvent("agent:toolApprovalResolved", {
+                        detail: {
+                            messageId: pending.dbMessageId || pending.messageId,
+                            toolCallId: pending.toolCallId,
+                            approved: true,
+                        },
+                    }));
+                }
+                catch (error) {
+                    console.error(`Failed to approve tool call ${pending.toolCallId}:`, error);
+                }
+            }));
         }
         finally {
-            setBatchRiskAction(null);
+            setIsApprovingAll(false);
         }
     };
     // Helper to switch to autonomous mode
@@ -564,14 +235,29 @@ export function ToolCallDisplay({ toolCalls, finished, openPopovers, setOpenPopo
             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");
-            }
+            await updateAgentSettings(agentId, { mode: "autonomous" });
             onSwitchToAutonomous?.();
             // After switching to autonomous, approve all remaining pending tool calls
             if (allPendingApprovals.length > 0) {
-                await resolvePendingToolCalls(allPendingApprovals, true);
+                await Promise.all(allPendingApprovals.map(async (pending) => {
+                    try {
+                        await approveToolCall({
+                            agentId,
+                            messageId: pending.dbMessageId || pending.messageId,
+                            toolCallId: pending.toolCallId,
+                        });
+                        window.dispatchEvent(new CustomEvent("agent:toolApprovalResolved", {
+                            detail: {
+                                messageId: pending.dbMessageId || pending.messageId,
+                                toolCallId: pending.toolCallId,
+                                approved: true,
+                            },
+                        }));
+                    }
+                    catch (error) {
+                        console.error(`Failed to approve tool call ${pending.toolCallId}:`, error);
+                    }
+                }));
             }
         }
         catch (error) {
@@ -582,101 +268,56 @@ export function ToolCallDisplay({ toolCalls, finished, openPopovers, setOpenPopo
             setIsSwitchingMode(false);
         }
     };
-    const showGroupHeader = toolCalls.length > 0;
-    return (_jsxs("div", { className: "flex flex-col", children: [showGroupHeader && (_jsxs("div", { className: "group flex cursor-pointer items-center gap-1.5 rounded-md px-1 py-1 text-xs text-gray-500 transition-all hover:bg-gray-100/60 hover:text-gray-700", onClick: () => {
-                    setIsGroupExpanded((prev) => !prev);
-                    setUserToggled(true);
-                }, children: [_jsx("div", { className: "flex items-center transition-transform group-hover:scale-110", children: isGroupExpanded ? (_jsx(ChevronDown, { size: 14, strokeWidth: 1.5, className: "text-gray-500" })) : (_jsx(ChevronRight, { size: 14, strokeWidth: 1.5, className: "text-gray-500" })) }), _jsx("div", { className: "flex items-center text-gray-500", children: _jsx(Wrench, { strokeWidth: 1, size: 14 }) }), _jsxs("span", { className: `font-medium ${!allToolCallsCompleted ? "animate-text-shimmer" : ""}`, children: [toolCalls.length, " tool call", toolCalls.length !== 1 ? "s" : ""] }), !isGroupExpanded && groupSummary && (_jsx("span", { className: "ml-1 min-w-0 flex-1 truncate text-[10px] text-gray-400", 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: "ml-1 shrink-0 text-[10px] text-red-500", children: ["(", groupSummary.errorCount, " error", groupSummary.errorCount !== 1 ? "s" : "", ")"] }))] })), shouldShowGroupBrowserCaptureInlinePrompt && browserCaptureInlinePrompt && (_jsx("div", { className: "mt-2 ml-5 rounded-lg border border-blue-200 bg-blue-50 p-3 text-[11px] text-blue-900", 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-semibold", children: browserCaptureInlinePrompt.label }), _jsx("div", { className: "mt-1 text-blue-800", children: browserCaptureInlinePrompt.description })] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: _jsx("button", { type: "button", className: "rounded border border-blue-300 bg-white px-2 py-1 text-[11px] font-medium text-blue-900 disabled:cursor-not-allowed disabled:opacity-60", disabled: browserCaptureInlinePrompt.isPending, onClick: (event) => {
-                                    event.stopPropagation();
-                                    browserCaptureInlinePrompt.onAction();
-                                }, children: browserCaptureInlinePrompt.actionLabel }) })] }) })), isGroupExpanded && (_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;
-                    // Check if this tool call's approval dialog has already been shown (for deduplication)
-                    const toolCallIdForApproval = "toolCallId" in originalToolCall
-                        ? originalToolCall.toolCallId
-                        : toolCall.id;
-                    const approvalAlreadyShown = seenApprovalDialogs?.has(toolCallIdForApproval) ?? false;
-                    // 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 hideAutonomousSwitch = baseFunctionName === "delete-item" ||
-                        baseFunctionName === "delete-items";
-                    const isApproved = originalFunctionName.includes("(approved)");
-                    const isRejected = originalFunctionName.includes("(rejected)");
-                    const isPending = originalFunctionName.includes("(pending approval)");
-                    // Treat only approved/rejected as final; pending should still show buttons
-                    const hasApprovalStatus = isApproved || isRejected;
-                    // 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 flex cursor-pointer items-center gap-1.5 rounded-md px-1 py-1 text-xs text-gray-600 transition-all hover:bg-gray-100/60 hover:text-gray-800", onClick: () => {
-                                    setOpenPopovers((prev) => ({
-                                        ...prev,
-                                        [popoverKey]: !prev[popoverKey],
-                                    }));
-                                }, children: [_jsx("div", { className: "flex items-center transition-transform group-hover:scale-110", children: isExpanded ? (_jsx(ChevronDown, { size: 14, strokeWidth: 1.5, className: "text-gray-500" })) : (_jsx(ChevronRight, { size: 14, strokeWidth: 1.5, className: "text-gray-500" })) }), isCompleted ? (_jsx("div", { className: `flex items-center transition-all ${toolCall.function?.error && !isPruned
-                                            ? "text-red-500"
-                                            : isPruned
-                                                ? "text-slate-500"
-                                                : "text-green-600"}`, children: getToolIcon(toolCall?.function?.name || "") })) : finalApprovalInfo && !hasApprovalStatus ? (_jsx("div", { className: "flex items-center text-amber-600 transition-all", children: getToolIcon(toolCall?.function?.name || "") })) : isStreaming || !finished ? (
-                                    // Show spinner when tool call arguments are still being streamed or tool is executing
-                                    _jsx(Spinner, { size: "xs" })) : (
-                                    // Turn finished but tool call not completed - show static icon
-                                    _jsx("div", { className: "flex items-center text-gray-400 transition-all", children: getToolIcon(toolCall?.function?.name || "") })), _jsxs("div", { className: "inline-flex flex-1 items-center gap-2", children: [_jsxs("span", { className: `font-medium transition-colors ${toolCall.function?.error && !isPruned
-                                                    ? "text-red-600"
-                                                    : isPruned
-                                                        ? "text-slate-600"
-                                                        : ""}`, 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: "ml-1 text-red-500", children: "(error)" })), isPruned && (_jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-700", children: [_jsx("span", { children: "\u2702" }), " Pruned"] })), finalApprovalInfo && isApproved && (_jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold text-green-700", children: [_jsx("span", { children: "\u2713" }), " Approved"] })), finalApprovalInfo && isRejected && (_jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-semibold text-red-700", children: [_jsx("span", { children: "\u2717" }), " Rejected"] })), finalApprovalInfo && isPending && (_jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700", children: [_jsx("span", { children: "\u23F8" }), " Pending approval"] }))] }), toolCallMeta && (_jsx("span", { className: "ml-auto shrink-0 text-[10px] text-gray-400", children: toolCallMeta }))] })] }), isExpanded && (_jsx(ToolCallDetails, { toolCall: toolCall, result: toolResult })), !shouldShowGroupBrowserCaptureInlinePrompt &&
-                                shouldShowBrowserCaptureInlinePrompt &&
-                                browserCaptureInlinePrompt && (_jsx("div", { className: "mt-2 ml-5 rounded-lg border border-blue-200 bg-blue-50 p-3 text-[11px] text-blue-900", 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-semibold", children: browserCaptureInlinePrompt.label }), _jsx("div", { className: "mt-1 text-blue-800", children: browserCaptureInlinePrompt.description })] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: _jsx("button", { type: "button", className: "rounded border border-blue-300 bg-white px-2 py-1 text-[11px] font-medium text-blue-900 disabled:cursor-not-allowed disabled:opacity-60", disabled: browserCaptureInlinePrompt.isPending, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    browserCaptureInlinePrompt.onAction();
-                                                }, children: browserCaptureInlinePrompt.actionLabel }) })] }) })), !isCompleted && finalApprovalInfo && !hasApprovalStatus && (_jsx(ApprovalDialog, { toolCallId: toolCallIdForApproval, onApprovalDialogShown: onApprovalDialogShown, finalApprovalInfo: finalApprovalInfo, isAgentToolCall: isAgentToolCall, originalToolCall: originalToolCall, toolCall: toolCall, messageId: toolCallMessageId, agentId: agentId, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: onSwitchToAutonomous, hideAutonomousSwitch: hideAutonomousSwitch, isSwitchingMode: isSwitchingMode, setIsSwitchingMode: setIsSwitchingMode, batchRiskAction: batchRiskAction, handleApproveAllByRisk: handleApproveAllByRisk, handleRejectAllByRisk: handleRejectAllByRisk, handleSwitchToAutonomous: handleSwitchToAutonomous }))] }, toolCallKey));
-                }) }))] }));
+    return (_jsx("div", { className: "flex flex-col", children: toolCalls.map((originalToolCall, toolIndex) => {
+            const toolCall = normalizeToolCall(originalToolCall);
+            const toolResult = toolCall.function?.result;
+            const popoverKey = `${messageId}-${toolIndex}`;
+            const isAgentToolCall = "isCompleted" in originalToolCall;
+            // 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;
+            // Check if this tool call's approval dialog has already been shown (for deduplication)
+            const toolCallIdForApproval = "toolCallId" in originalToolCall ? originalToolCall.toolCallId : toolCall.id;
+            const approvalAlreadyShown = seenApprovalDialogs?.has(toolCallIdForApproval) ?? false;
+            // 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 isApproved = originalFunctionName.includes("(approved)");
+            const isRejected = originalFunctionName.includes("(rejected)");
+            const isPending = originalFunctionName.includes("(pending approval)");
+            // Treat only approved/rejected as final; pending should still show buttons
+            const hasApprovalStatus = isApproved || isRejected;
+            // Debug logging removed for performance
+            const isExpanded = openPopovers[popoverKey] || false;
+            return (_jsxs("div", { children: [_jsxs("div", { className: "group flex cursor-pointer items-center gap-1.5 rounded-md px-1 py-1 text-xs text-gray-600 transition-all hover:bg-gray-100/60 hover:text-gray-800", onClick: () => {
+                            setOpenPopovers((prev) => ({
+                                ...prev,
+                                [popoverKey]: !prev[popoverKey],
+                            }));
+                        }, children: [_jsx("div", { className: "flex items-center transition-transform group-hover:scale-110", children: isExpanded ? (_jsx(ChevronDown, { size: 14, strokeWidth: 1.5, className: "text-gray-500" })) : (_jsx(ChevronRight, { size: 14, strokeWidth: 1.5, className: "text-gray-500" })) }), isCompleted ? (_jsx("div", { className: `flex items-center transition-all ${toolCall.function?.error ? "text-red-500" : "text-green-600"}`, children: getToolIcon(toolCall?.function?.name || "") })) : finalApprovalInfo && !hasApprovalStatus ? (_jsx("div", { className: "flex items-center text-amber-600 transition-all", children: getToolIcon(toolCall?.function?.name || "") })) : isStreaming || !finished ? (
+                            // Show spinner when tool call arguments are still being streamed or tool is executing
+                            _jsx(Spinner, { size: "xs" })) : (
+                            // Turn finished but tool call not completed - show static icon
+                            _jsx("div", { className: "flex items-center text-gray-400 transition-all", children: getToolIcon(toolCall?.function?.name || "") })), _jsx("div", { className: "inline-flex flex-1 items-center gap-2", children: _jsxs("span", { className: `font-medium transition-colors ${toolCall.function?.error ? "text-red-600" : ""}`, children: [(originalFunctionName ||
+                                            toolCall?.function?.name ||
+                                            toolCall?.displayName ||
+                                            "(function name missing)")
+                                            .replace(" (approved)", "")
+                                            .replace(" (rejected)", "")
+                                            .replace(" (pending approval)", ""), toolCall.function?.error && !isRejected && (_jsx("span", { className: "ml-1 text-red-500", children: "(error)" })), finalApprovalInfo && isApproved && (_jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold text-green-700", children: [_jsx("span", { children: "\u2713" }), " Approved"] })), finalApprovalInfo && isRejected && (_jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-semibold text-red-700", children: [_jsx("span", { children: "\u2717" }), " Rejected"] })), finalApprovalInfo && isPending && (_jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700", children: [_jsx("span", { children: "\u23F8" }), " Pending approval"] }))] }) })] }), isExpanded && (_jsx(ToolCallDetails, { toolCall: toolCall, result: toolResult })), !isCompleted && finalApprovalInfo && !hasApprovalStatus && (_jsx(ApprovalDialog, { toolCallId: toolCallIdForApproval, onApprovalDialogShown: onApprovalDialogShown, finalApprovalInfo: finalApprovalInfo, isAgentToolCall: isAgentToolCall, originalToolCall: originalToolCall, toolCall: toolCall, messageId: messageId, agentId: agentId, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: onSwitchToAutonomous, isSwitchingMode: isSwitchingMode, setIsSwitchingMode: setIsSwitchingMode, isApprovingAll: isApprovingAll, setIsApprovingAll: setIsApprovingAll, handleApproveAllByRisk: handleApproveAllByRisk, handleSwitchToAutonomous: handleSwitchToAutonomous }))] }, toolIndex));
+        }) }));
 }
 // Separate component for approval dialog to properly handle useEffect
-function ApprovalDialog({ toolCallId, onApprovalDialogShown, finalApprovalInfo, isAgentToolCall, originalToolCall, toolCall, messageId, agentId, allPendingApprovals, onSwitchToAutonomous, hideAutonomousSwitch, isSwitchingMode, setIsSwitchingMode, batchRiskAction, handleApproveAllByRisk, handleRejectAllByRisk, handleSwitchToAutonomous, }) {
+function ApprovalDialog({ toolCallId, onApprovalDialogShown, finalApprovalInfo, isAgentToolCall, originalToolCall, toolCall, messageId, agentId, allPendingApprovals, onSwitchToAutonomous, isSwitchingMode, setIsSwitchingMode, isApprovingAll, setIsApprovingAll, handleApproveAllByRisk, handleSwitchToAutonomous, }) {
     const hasMarkedAsShown = useRef(false);
-    const [isCreatingAllowance, setIsCreatingAllowance] = useState(false);
     // Mark dialog as shown on mount to prevent duplicate dialogs
     // The dialog stays visible until hasApprovalStatus becomes true (after approve/reject)
     useEffect(() => {
@@ -699,44 +340,7 @@ function ApprovalDialog({ toolCallId, onApprovalDialogShown, finalApprovalInfo,
             hasMarkedAsShown.current = true;
         }
     };
-    const getActualMessageId = () => {
-        return isAgentToolCall
-            ? originalToolCall.dbMessageId || originalToolCall.messageId
-            : messageId;
-    };
-    const dispatchApprovalResolved = (actualMessageId, approved) => {
-        const ev = new CustomEvent("agent:toolApprovalResolved", {
-            detail: {
-                messageId: actualMessageId,
-                toolCallId: toolCall.id,
-                approved,
-            },
-        });
-        window.dispatchEvent(ev);
-    };
-    const approveCurrentToolCall = async () => {
-        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;
-    return (_jsxs("div", { className: "mt-2 overflow-hidden rounded-lg border border-amber-200 bg-linear-to-br from-amber-50 to-amber-50/30 shadow-sm", children: [_jsx("div", { className: "border-b border-amber-200/60 bg-amber-50/80 p-3", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: `mt-1 h-2.5 w-2.5 rounded-full shadow-sm ${finalApprovalInfo.riskLevel === "high"
+    return (_jsxs("div", { className: "mt-2 overflow-hidden rounded-lg border border-amber-200 bg-gradient-to-br from-amber-50 to-amber-50/30 shadow-sm", children: [_jsx("div", { className: "border-b border-amber-200/60 bg-amber-50/80 p-3", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: `mt-1 h-2.5 w-2.5 rounded-full shadow-sm ${finalApprovalInfo.riskLevel === "high"
                                 ? "bg-red-500 ring-2 ring-red-200"
                                 : finalApprovalInfo.riskLevel === "medium"
                                     ? "bg-amber-500 ring-2 ring-amber-200"
@@ -744,32 +348,13 @@ function ApprovalDialog({ toolCallId, onApprovalDialogShown, finalApprovalInfo,
                                         ? "bg-red-100 text-red-700"
                                         : finalApprovalInfo.riskLevel === "medium"
                                             ? "bg-amber-100 text-amber-700"
-                                            : "bg-green-100 text-green-700"}`, children: [_jsx("span", { className: "font-normal", children: "Risk:" }), _jsx("span", { className: "uppercase", children: finalApprovalInfo.riskLevel })] }))] })] }) }), _jsxs("div", { className: "flex flex-col gap-2 bg-white/60 p-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [showAllowInScopeButton && (_jsx(Button, { size: "sm", variant: "outline", disabled: isCreatingAllowance, onClick: async () => {
-                                    markAsShown();
-                                    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: isCreatingAllowance
-                                    ? "Allowing..."
-                                    : `Allow deletes in ${allowableScope?.parentItemPath}` })), _jsx(Button, { size: "sm", variant: "secondary", "data-testid": "agent-reject-button", onClick: async () => {
+                                            : "bg-green-100 text-green-700"}`, children: [_jsx("span", { className: "font-normal", children: "Risk:" }), _jsx("span", { className: "uppercase", children: finalApprovalInfo.riskLevel })] }))] })] }) }), _jsxs("div", { className: "flex flex-col gap-2 bg-white/60 p-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", "data-testid": "agent-reject-button", onClick: async () => {
                                     markAsShown(); // Mark as shown when user interacts
-                                    const actualMessageId = getActualMessageId();
+                                    // Use the dbMessageId from AgentToolCall if available, otherwise fall back to messageId or prop
+                                    const actualMessageId = isAgentToolCall
+                                        ? originalToolCall.dbMessageId ||
+                                            originalToolCall.messageId
+                                        : messageId;
                                     if (!agentId) {
                                         console.error("❌ Cannot reject tool call: agentId is missing");
                                         return;
@@ -790,21 +375,53 @@ function ApprovalDialog({ toolCallId, onApprovalDialogShown, finalApprovalInfo,
                                             toolCallId: toolCall.id,
                                         });
                                         console.log("✅ Reject successful:", result);
-                                        dispatchApprovalResolved(actualMessageId, false);
+                                        const ev = new CustomEvent("agent:toolApprovalResolved", {
+                                            detail: {
+                                                messageId: actualMessageId,
+                                                toolCallId: toolCall.id,
+                                                approved: false,
+                                            },
+                                        });
+                                        window.dispatchEvent(ev);
                                     }
                                     catch (error) {
                                         console.error("❌ Reject failed:", error);
                                     }
                                 }, children: "Reject" }), _jsx(Button, { size: "sm", "data-testid": "agent-approve-button", onClick: async () => {
                                     markAsShown(); // Mark as shown when user interacts
+                                    // Use the dbMessageId from AgentToolCall if available, otherwise fall back to messageId or prop
+                                    const actualMessageId = isAgentToolCall
+                                        ? originalToolCall.dbMessageId ||
+                                            originalToolCall.messageId
+                                        : messageId;
+                                    if (!agentId) {
+                                        console.error("❌ Cannot approve tool call: agentId is missing");
+                                        return;
+                                    }
+                                    if (!actualMessageId) {
+                                        console.error("❌ Cannot approve tool call: messageId is missing");
+                                        return;
+                                    }
                                     console.log("✅ Approving tool call:", {
                                         agentId,
-                                        messageId: getActualMessageId(),
+                                        messageId: actualMessageId,
                                         toolCallId: toolCall.id,
                                     });
                                     try {
-                                        await approveCurrentToolCall();
-                                        console.log("✅ Approve successful");
+                                        const result = await approveToolCall({
+                                            agentId,
+                                            messageId: actualMessageId,
+                                            toolCallId: toolCall.id,
+                                        });
+                                        console.log("✅ Approve successful:", result);
+                                        const ev = new CustomEvent("agent:toolApprovalResolved", {
+                                            detail: {
+                                                messageId: actualMessageId,
+                                                toolCallId: toolCall.id,
+                                                approved: true,
+                                            },
+                                        });
+                                        window.dispatchEvent(ev);
                                     }
                                     catch (error) {
                                         console.error("❌ Approve failed:", error);
@@ -814,24 +431,15 @@ function ApprovalDialog({ toolCallId, onApprovalDialogShown, finalApprovalInfo,
                         const currentRiskLevel = finalApprovalInfo?.riskLevel;
                         const sameRiskCount = allPendingApprovals.filter((p) => (p.riskLevel || undefined) === currentRiskLevel).length;
                         const totalPendingCount = allPendingApprovals.length;
-                        const showSwitchToAutonomous = !hideAutonomousSwitch;
-                        const showResolveAllByRisk = sameRiskCount > 1;
                         // Only show batch actions if there's more than 1 pending approval
                         if (totalPendingCount <= 1)
                             return null;
-                        if (!showSwitchToAutonomous && !showResolveAllByRisk)
-                            return null;
                         const riskLabel = currentRiskLevel
-                            ? currentRiskLevel.charAt(0).toUpperCase() +
-                                currentRiskLevel.slice(1)
+                            ? currentRiskLevel.charAt(0).toUpperCase() + currentRiskLevel.slice(1)
                             : "Same";
-                        return (_jsxs("div", { className: `flex flex-wrap items-center gap-2 border-t border-amber-200/60 pt-2 ${showSwitchToAutonomous && showResolveAllByRisk
-                                ? "justify-between"
-                                : "justify-end"}`, children: [showSwitchToAutonomous && (_jsx(Button, { size: "sm", variant: "outline", disabled: isSwitchingMode, onClick: handleSwitchToAutonomous, className: "text-xs", children: isSwitchingMode ? "Switching..." : "Switch to Autonomous" })), showResolveAllByRisk && (_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", "data-testid": "agent-reject-all-button", disabled: batchRiskAction !== null, onClick: () => handleRejectAllByRisk(currentRiskLevel), className: "text-xs", children: batchRiskAction === "reject"
-                                                ? "Rejecting..."
-                                                : `Reject All ${riskLabel} (${sameRiskCount})` }), _jsx(Button, { size: "sm", variant: "outline", "data-testid": "agent-approve-all-button", disabled: batchRiskAction !== null, onClick: () => handleApproveAllByRisk(currentRiskLevel), className: "text-xs", children: batchRiskAction === "approve"
-                                                ? "Approving..."
-                                                : `Approve All ${riskLabel} (${sameRiskCount})` })] }))] }));
+                        return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-amber-200/60 pt-2", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: isSwitchingMode, onClick: handleSwitchToAutonomous, className: "text-xs", children: isSwitchingMode ? "Switching..." : "Switch to Autonomous" }), sameRiskCount > 1 && (_jsx(Button, { size: "sm", variant: "outline", disabled: isApprovingAll, onClick: () => handleApproveAllByRisk(currentRiskLevel), className: "text-xs", children: isApprovingAll
+                                        ? "Approving..."
+                                        : `Approve All ${riskLabel} (${sameRiskCount})` }))] }));
                     })()] })] }));
 }
 //# sourceMappingURL=ToolCallDisplay.js.map