@alpaca-editor/core 1.0.4123 → 1.0.4128

package/src/editor/ai/ContextInfoBar.tsx

@@ -1,7 +1,15 @@
 import React, { useCallback, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { Button } from "../../components/ui/button";
-import { FileText, Puzzle, Type, Plus, ChevronDown, X } from "lucide-react";
+import {
+  FileText,
+  Puzzle,
+  Type,
+  Plus,
+  ChevronDown,
+  ChevronUp,
+  X,
+} from "lucide-react";
 import { getComponentById } from "../componentTreeHelper";
 import {
   AgentDetails,
@@ -39,8 +47,10 @@ export function ContextInfoBar({
     ) => {
       if (!agent?.id) return;
       const current = agentMetadata || {};
+      // Exclude top-level context to avoid duplicate keys when spreading
+      const { context: _, ...currentWithoutContext } = current;
       const next: AgentMetadata = {
-        ...current,
+        ...currentWithoutContext,
         additionalData: {
           ...(current.additionalData || {}),
           context: {
@@ -115,8 +125,10 @@ export function ContextInfoBar({
       return;
     }
 
+    // Exclude top-level context to avoid duplicate keys when spreading
+    const { context: _, ...currentWithoutContext } = current;
     const next: AgentMetadata = {
-      ...current,
+      ...currentWithoutContext,
       additionalData: {
         ...(current.additionalData || {}),
         context: {
@@ -158,8 +170,10 @@ export function ContextInfoBar({
 
     if (newComponentIds.length === 0) return;
 
+    // Exclude top-level context to avoid duplicate keys when spreading
+    const { context: _, ...currentWithoutContext } = current;
     const next: AgentMetadata = {
-      ...current,
+      ...currentWithoutContext,
       additionalData: {
         ...(current.additionalData || {}),
         context: {
@@ -198,8 +212,10 @@ export function ContextInfoBar({
     const newComponentIds = ids.filter((id) => !!id && !existingIds.has(id));
     if (newComponentIds.length === 0) return;
 
+    // Exclude top-level context to avoid duplicate keys when spreading
+    const { context: _, ...currentWithoutContext } = current;
     const next: AgentMetadata = {
-      ...current,
+      ...currentWithoutContext,
       additionalData: {
         ...(current.additionalData || {}),
         context: {
@@ -239,15 +255,34 @@ export function ContextInfoBar({
 
     const pagesToAdd = items
       .filter((it) => !!it?.id)
-      .map((it) => ({ id: it.id, language: it.language, version: it.version }))
+      .map((it) => {
+        const anyIt = it as any;
+        const page = {
+          id: it.id,
+          language: it.language,
+          version: it.version,
+        } as {
+          id: string;
+          language: string;
+          version: number;
+          name?: string;
+          path?: string;
+        };
+        const candidateName = anyIt?.displayName || anyIt?.name;
+        if (candidateName) page.name = candidateName as string;
+        if (anyIt?.path) page.path = anyIt.path as string;
+        return page;
+      })
       .filter(
         (p) => !existingPageIds.has(`${p.id}-${p.language}-${p.version}`),
       );
 
     if (pagesToAdd.length === 0) return;
 
+    // Exclude top-level context to avoid duplicate keys when spreading
+    const { context: _, ...currentWithoutContext } = current;
     const next: AgentMetadata = {
-      ...current,
+      ...currentWithoutContext,
       additionalData: {
         ...(current.additionalData || {}),
         context: {
@@ -502,70 +537,60 @@ export function ContextInfoBar({
 
   return (
     <div
-      className={
-        "flex flex-col gap-2 border-t border-gray-100 px-4 py-2 " +
-        (isDragOver ? "bg-gray-50" : "")
-      }
+      className="border-t border-gray-200 bg-gray-50"
       onDragOver={handleDragOver}
       onDragEnter={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div
-        className="flex cursor-pointer items-center justify-between"
+      <button
         onClick={() => setIsCollapsed(!isCollapsed)}
-        role="button"
+        className="flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors hover:bg-gray-100"
         aria-label={isCollapsed ? "Expand context" : "Collapse context"}
         data-testid="context-toggle"
       >
-        <div className="min-w-0 flex-1">
-          <div className="text-2xs text-gray-1">Context</div>
+        <div className="flex items-center gap-2">
+          <FileText className="h-4 w-4 text-gray-500" strokeWidth={1} />
+          <span className="text-xs font-medium text-gray-700">Context</span>
           {isCollapsed && summaryText && (
-            <div
-              className="text-2xs truncate text-gray-400"
-              title={summaryText}
-            >
-              {summaryText}
-            </div>
+            <span className="text-xs text-gray-500">· {summaryText}</span>
           )}
         </div>
-        <ChevronDown
-          className={
-            "h-3 w-3 text-gray-500 transition-transform " +
-            (isCollapsed ? "rotate-0" : "rotate-180")
-          }
-          strokeWidth={1}
-        />
-      </div>
+        {isCollapsed ? (
+          <ChevronDown className="h-4 w-4 text-gray-500" strokeWidth={1} />
+        ) : (
+          <ChevronUp className="h-4 w-4 text-gray-500" strokeWidth={1} />
+        )}
+      </button>
       {!isCollapsed && (
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center justify-between text-xs text-gray-600">
-            <div className="flex flex-wrap items-center gap-2">{chips}</div>
-          </div>
-          <div className="flex flex-col items-start gap-1">
-            {canAddPage && (
-              <Button
-                size="xs"
-                variant="outline"
-                onClick={addPagesToContext}
-                data-testid="add-current-item"
-              >
-                <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add current
-                item
-              </Button>
-            )}
-            {canAddSelection && (
-              <Button
-                size="xs"
-                variant="outline"
-                onClick={addSelectedComponentsToContext}
-              >
-                <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add selected
-                components
-              </Button>
-            )}
-          </div>
-          <div className="text-2xs text-gray-400">
+        <div className="px-4 pb-3">
+          <div className="flex flex-wrap items-center gap-2 pb-2">{chips}</div>
+          {(canAddPage || canAddSelection) && (
+            <div className="flex flex-col items-start gap-1 pb-2">
+              {canAddPage && (
+                <Button
+                  size="xs"
+                  variant="outline"
+                  onClick={addPagesToContext}
+                  data-testid="add-current-item"
+                >
+                  <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add current
+                  item
+                </Button>
+              )}
+              {canAddSelection && (
+                <Button
+                  size="xs"
+                  variant="outline"
+                  onClick={addSelectedComponentsToContext}
+                >
+                  <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add selected
+                  components
+                </Button>
+              )}
+            </div>
+          )}
+          <div className="text-xs text-gray-500">
             Tip: Drag items or components here to add them
           </div>
         </div>

package/src/editor/ai/ToolCallDisplay.tsx

@@ -10,6 +10,8 @@ import {
 import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 import { Spinner } from "../ui/Spinner";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Button } from "../../components/ui/button";
+import { approveToolCall, rejectToolCall } from "../services/agentService";
 import {
   X,
   FileText,
@@ -73,6 +75,11 @@ const getToolIcon = (toolName: string) => {
 };
 
 // Types for tool calls - supporting both AI and Agent formats
+export type ApprovalInfo = {
+  summary: string;
+  riskLevel?: 'low' | 'medium' | 'high';
+};
+
 export interface BaseToolCall {
   id: string;
   displayName?: string;
@@ -82,6 +89,7 @@ export interface BaseToolCall {
     result?: string;
     error?: string;
   };
+  requiresApproval?: ApprovalInfo;
 }
 
 export interface AgentToolCall {
@@ -95,6 +103,7 @@ export interface AgentToolCall {
   isCompleted: boolean;
   responseTimeMs?: number;
   createdDate: string;
+  requiresApproval?: ApprovalInfo;
 }
 
 interface ToolCallDisplayProps {
@@ -107,6 +116,7 @@ interface ToolCallDisplayProps {
   messageId: string;
 }
 
+
 // Helper function to normalize tool calls to a common format
 const normalizeToolCall = (
   toolCall: BaseToolCall | AgentToolCall,
@@ -122,6 +132,7 @@ const normalizeToolCall = (
         result: toolCall.functionResult,
         error: toolCall.functionError,
       },
+      requiresApproval: toolCall.requiresApproval,
     };
   }
   // Already in base format
@@ -297,13 +308,67 @@ export function ToolCallDisplay({
         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);
+          : !!(toolResult || toolCall.function?.error) && !approvalInfo;
+        
+        // Use the approval info from the backend
+        const finalApprovalInfo = approvalInfo;
+        
+        // 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;
+        
+        console.log("🔍 Approval status check:", {
+          toolCallId: toolCall.id,
+          originalFunctionName,
+          displayName: toolCall?.displayName,
+          functionName: toolCall?.function?.name,
+          isApproved,
+          isRejected,
+          hasApprovalStatus
+        });
+
+        // Debug: Check what we're receiving
+        console.log("🔍 Approval debug:", {
+          toolIndex,
+          functionName: toolCall?.function?.name,
+          originalRequiresApproval: originalToolCall.requiresApproval,
+          normalizedRequiresApproval: toolCall.requiresApproval,
+          approvalInfo,
+          approvalInfoType: typeof approvalInfo,
+          isCompleted,
+          hasApprovalStatus,
+          finalApprovalInfo,
+          shouldShowApprovalUI: !isCompleted && finalApprovalInfo && !hasApprovalStatus,
+          toolResult: toolCall.function?.result,
+          toolError: toolCall.function?.error,
+        });
+
+        // Debug: Check if agent ID is available
+        if (finalApprovalInfo) {
+          console.log("🔍 Agent ID check:", {
+            currentAgentId: (window as any)?.currentAgentId,
+            messageId,
+            toolCallId: toolCall.id,
+            hasAgentId: !!(window as any)?.currentAgentId,
+            windowKeys: Object.keys(window).filter(k => k.includes('agent') || k.includes('Agent'))
+          });
+        }
+
 
         return (
+          <div key={toolIndex}>
           <Popover
-            key={toolIndex}
             enableIframeClickDetection={false}
             open={openPopovers[popoverKey] || false}
             onOpenChange={(open) => {
@@ -314,13 +379,17 @@ export function ToolCallDisplay({
             }}
           >
             <PopoverTrigger asChild>
-              <div className="inline-flex cursor-pointer items-center gap-1 text-xs text-gray-500 hover:text-gray-700">
+              <div className="flex items-center gap-2 text-xs text-gray-500">
                 {isCompleted ? (
                   <div
                     className={`flex items-center ${toolCall.function?.error ? "text-red-500" : ""}`}
                   >
                     {getToolIcon(toolCall?.function?.name || "")}
                   </div>
+                ) : finalApprovalInfo && !hasApprovalStatus ? (
+                  <div className="flex items-center text-amber-600">
+                    {getToolIcon(toolCall?.function?.name || "")}
+                  </div>
                 ) : finished ? (
                   <div className="flex items-center opacity-50">
                     {getToolIcon(toolCall?.function?.name || "")}
@@ -328,14 +397,33 @@ export function ToolCallDisplay({
                 ) : (
                   <Spinner size="xs" />
                 )}
-                <span
-                  className={toolCall.function?.error ? "text-red-500" : ""}
-                >
-                  {toolCall?.displayName ||
-                    toolCall?.function?.name ||
-                    "tool call"}
-                  {toolCall.function?.error && " (error)"}
-                </span>
+                <div className="inline-flex items-center gap-2">
+                  <span
+                    className={`${toolCall.function?.error ? "text-red-500" : "hover:text-gray-700"} cursor-pointer`}
+                  >
+                    {/* Show clean function name without approval suffix */}
+                    {(originalFunctionName || toolCall?.function?.name || "tool call")
+                      .replace(' (approved)', '')
+                      .replace(' (rejected)', '')
+                      .replace(' (pending approval)', '')}
+                    {toolCall.function?.error && " (error)"}
+                    {finalApprovalInfo && isApproved && (
+                      <span className="ml-2 text-xs text-green-600 font-medium">
+                        ✓ Approved
+                      </span>
+                    )}
+                    {finalApprovalInfo && isRejected && (
+                      <span className="ml-2 text-xs text-red-600 font-medium">
+                        ✗ Rejected
+                      </span>
+                    )}
+                    {finalApprovalInfo && isPending && (
+                      <span className="ml-2 text-xs text-amber-600 font-medium">
+                        ⏸ Pending approval
+                      </span>
+                    )}
+                  </span>
+                </div>
               </div>
             </PopoverTrigger>
             <PopoverContent
@@ -358,6 +446,100 @@ export function ToolCallDisplay({
               />
             </PopoverContent>
           </Popover>
+          {!isCompleted && finalApprovalInfo && !hasApprovalStatus && (
+            <div className="border rounded mt-2">
+              <div className="p-3 border-b bg-amber-50">
+                <div className="flex items-start gap-2">
+                  <div className={`w-2 h-2 rounded-full mt-1.5 ${
+                    finalApprovalInfo.riskLevel === 'high' ? 'bg-red-500' :
+                    finalApprovalInfo.riskLevel === 'medium' ? 'bg-amber-500' :
+                    'bg-green-500'
+                  }`} />
+                  <div>
+                    <div className="text-xs font-medium text-gray-900 mb-1">
+                      Action requires approval
+                    </div>
+                    <div className="text-xs text-gray-700">
+                      {finalApprovalInfo.summary}
+                    </div>
+                    {finalApprovalInfo.riskLevel && (
+                      <div className={`text-xs mt-1 font-medium ${
+                        finalApprovalInfo.riskLevel === 'high' ? 'text-red-600' :
+                        finalApprovalInfo.riskLevel === 'medium' ? 'text-amber-600' :
+                        'text-green-600'
+                      }`}>
+                        Risk level: {finalApprovalInfo.riskLevel}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center justify-end gap-2 p-2">
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={async () => {
+                    console.log("🚫 Rejecting tool call:", {
+                      agentId: (window as any)?.currentAgentId,
+                      messageId: messageId,
+                      toolCallId: toolCall.id,
+                    });
+                    try {
+                      const result = await rejectToolCall({
+                        agentId: (window as any)?.currentAgentId,
+                        messageId: messageId,
+                        toolCallId: toolCall.id,
+                      });
+                      console.log("✅ Reject successful:", result);
+                      const ev = new CustomEvent('agent:toolApprovalResolved', {
+                        detail: {
+                          messageId: messageId,
+                          toolCallId: toolCall.id,
+                          approved: false,
+                        },
+                      } as any);
+                      window.dispatchEvent(ev);
+                    } catch (error) {
+                      console.error("❌ Reject failed:", error);
+                    }
+                  }}
+                >
+                  Reject
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={async () => {
+                    console.log("✅ Approving tool call:", {
+                      agentId: (window as any)?.currentAgentId,
+                      messageId: messageId,
+                      toolCallId: toolCall.id,
+                    });
+                    try {
+                      const result = await approveToolCall({
+                        agentId: (window as any)?.currentAgentId,
+                        messageId: messageId,
+                        toolCallId: toolCall.id,
+                      });
+                      console.log("✅ Approve successful:", result);
+                      const ev = new CustomEvent('agent:toolApprovalResolved', {
+                        detail: {
+                          messageId: messageId,
+                          toolCallId: toolCall.id,
+                          approved: true,
+                        },
+                      } as any);
+                      window.dispatchEvent(ev);
+                    } catch (error) {
+                      console.error("❌ Approve failed:", error);
+                    }
+                  }}
+                >
+                  Approve
+                </Button>
+              </div>
+            </div>
+          )}
+          </div>
         );
       })}
     </div>

package/src/editor/ai/types.ts

@@ -1,3 +1,8 @@
+export type ApprovalInfo = {
+  summary: string;
+  riskLevel?: 'low' | 'medium' | 'high';
+};
+
 export type ToolCall = {
   id: string;
   displayName?: string;
@@ -7,6 +12,7 @@ export type ToolCall = {
     result?: string;
     error?: string;
   };
+  requiresApproval?: ApprovalInfo;
 };
 
 export type Message = {

package/src/editor/services/agentService.ts

@@ -86,6 +86,46 @@ export type AgentDetails = Agent & {
   messages?: AgentChatMessage[];
 };
 
+export async function approveToolCall(params: {
+  agentId: string;
+  messageId: string;
+  toolCallId: string;
+  note?: string;
+}): Promise<{ success: boolean }> {
+  const result = await post<{ success: boolean }>(
+    AGENT_BASE_URL + "/approveToolCall",
+    params,
+  );
+  if (result.type !== "success") {
+    throw new Error(
+      `Failed to approve tool call: ${result.summary || "Unknown error"} ${
+        result.details || ""
+      }`,
+    );
+  }
+  return result.data ?? { success: true };
+}
+
+export async function rejectToolCall(params: {
+  agentId: string;
+  messageId: string;
+  toolCallId: string;
+  note?: string;
+}): Promise<{ success: boolean }> {
+  const result = await post<{ success: boolean }>(
+    AGENT_BASE_URL + "/rejectToolCall",
+    params,
+  );
+  if (result.type !== "success") {
+    throw new Error(
+      `Failed to reject tool call: ${result.summary || "Unknown error"} ${
+        result.details || ""
+      }`,
+    );
+  }
+  return result.data ?? { success: true };
+}
+
 // Metadata shape stored on the agent. Server accepts a flexible JSON object; keep it permissive.
 export type AgentMetadata = {
   selection?: string[];
@@ -529,9 +569,12 @@ export async function updateAgentMetadata(
   agentId: string,
   metadata: AgentMetadata,
 ): Promise<{ success: boolean }> {
+  // Remove top-level context to avoid duplicate keys (context should only be in additionalData)
+  const { context: _, ...cleanMetadata } = metadata;
+  
   const result = await post<{ success: boolean }>(
     AGENT_BASE_URL + "/updateMetadata",
-    { agentId, metadata },
+    { agentId, metadata: cleanMetadata },
   );
 
   if (result.type !== "success") {
@@ -611,16 +654,31 @@ export function convertAgentMessagesToTerminalFormat(
 
       // Add tool calls if they exist
       if (agentMessage.toolCalls && agentMessage.toolCalls.length > 0) {
-        terminalMessage.tool_calls = agentMessage.toolCalls.map((tc) => ({
-          id: tc.toolCallId,
-          displayName: tc.functionName,
-          function: {
-            name: tc.functionName,
-            arguments: tc.functionArguments,
-            result: tc.functionResult,
-            error: tc.functionError,
-          },
-        }));
+        terminalMessage.tool_calls = agentMessage.toolCalls.map((tc) => {
+          const requiresApproval =
+            (tc as any)?.requiresApproval === true ||
+            (tc as any)?.requiresApproval === 1 ||
+            (tc as any)?.RequiresApproval === true;
+          const toolCall: any = {
+            id: tc.toolCallId,
+            displayName: tc.functionName,
+            function: {
+              name: tc.functionName,
+              arguments: tc.functionArguments,
+              result: tc.functionResult,
+              error: tc.functionError,
+            },
+          };
+
+          if (requiresApproval) {
+            toolCall.requiresApproval = {
+              summary: `Function call: ${tc.functionName}`,
+              riskLevel: "medium" as const,
+            };
+          }
+
+          return toolCall;
+        });
       }
 
       terminalMessages.push(terminalMessage);