@alpaca-editor/core 1.0.4123 → 1.0.4128

package/src/editor/ai/AgentTerminal.tsx

@@ -4,6 +4,7 @@ import React, {
   useRef,
   useCallback,
   useLayoutEffect,
+  useMemo,
 } from "react";
 import {
   Send,
@@ -14,6 +15,9 @@ import {
   Square,
   Mic,
   MicOff,
+  ChevronDown,
+  ChevronUp,
+  ListTodo,
 } from "lucide-react";
 import { DancingDots } from "./DancingDots";
 import {
@@ -78,6 +82,220 @@ const UserMessage = ({ message }: { message: AgentChatMessage }) => {
   );
 };
 
+// Extract all todos from messages
+interface TodoItem {
+  id?: string;
+  text: string;
+  done?: boolean;
+  note?: string;
+  messageId: string;
+  sourceTitle?: string;
+}
+
+const extractTodosFromMessages = (messages: AgentChatMessage[]): TodoItem[] => {
+  const todos: TodoItem[] = [];
+  const fencedTodoToken = "```todo_list";
+  const plainTodoToken = "todo_list";
+
+  for (const message of messages) {
+    if (message.role !== "assistant" || !message.content) continue;
+
+    const content = message.content;
+    let cursor = 0;
+
+    while (cursor < content.length) {
+      const nextFenced = content.indexOf(fencedTodoToken, cursor);
+      const nextPlain = content.indexOf(plainTodoToken, cursor);
+
+      let todoStart = -1;
+      let isFenced = false;
+
+      if (nextFenced !== -1 && (nextPlain === -1 || nextFenced < nextPlain)) {
+        todoStart = nextFenced;
+        isFenced = true;
+      } else if (nextPlain !== -1) {
+        // Check if it's at line start
+        const before = nextPlain > 0 ? content[nextPlain - 1] : "\n";
+        if (before === "\n" || before === "\r" || nextPlain === 0) {
+          todoStart = nextPlain;
+          isFenced = false;
+        }
+      }
+
+      if (todoStart === -1) break;
+
+      try {
+        let jsonText = "";
+        if (isFenced) {
+          const afterToken = todoStart + fencedTodoToken.length;
+          const closePos = content.indexOf("```", afterToken);
+          if (closePos === -1) break;
+          jsonText = content.slice(afterToken, closePos).trim();
+          cursor = closePos + 3;
+        } else {
+          const afterToken = todoStart + plainTodoToken.length;
+          const braceStart = content.indexOf("{", afterToken);
+          if (braceStart === -1) break;
+
+          let depth = 0;
+          let braceEnd = -1;
+          for (let i = braceStart; i < content.length; i++) {
+            if (content[i] === "{") depth++;
+            if (content[i] === "}") {
+              depth--;
+              if (depth === 0) {
+                braceEnd = i;
+                break;
+              }
+            }
+          }
+          if (braceEnd === -1) break;
+          jsonText = content.slice(braceStart, braceEnd + 1).trim();
+          cursor = braceEnd + 1;
+        }
+
+        const parsed = JSON.parse(jsonText);
+        const todoItems = Array.isArray(parsed) ? parsed : parsed?.items || [];
+        const title = Array.isArray(parsed) ? undefined : parsed?.title;
+
+        todoItems.forEach((item: any) => {
+          if (!item) return;
+          const text =
+            item.text || item.label || String(item.task || item.title || "");
+          if (!text) return;
+          todos.push({
+            id: item.id,
+            text,
+            done: !!(item.done ?? item.completed ?? item.checked),
+            note: item.note || item.description,
+            messageId: message.id,
+            sourceTitle: title,
+          });
+        });
+      } catch (e) {
+        cursor++;
+        continue;
+      }
+    }
+  }
+
+  return todos;
+};
+
+// TodoListPanel component
+const TodoListPanel = ({ messages }: { messages: AgentChatMessage[] }) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const todos = useMemo(() => extractTodosFromMessages(messages), [messages]);
+
+  // Check if there's an active streaming message with todo content
+  const isUpdating = useMemo(() => {
+    return messages.some((msg) => {
+      if (msg.role !== "assistant" || msg.isCompleted) return false;
+      const content = msg.content || "";
+      return content.includes("```todo_list") || content.includes("todo_list");
+    });
+  }, [messages]);
+
+  if (todos.length === 0 && !isUpdating) return null;
+
+  const completedCount = todos.filter((t) => t.done).length;
+  const totalCount = todos.length;
+
+  return (
+    <div className="border-t border-gray-200 bg-gray-50">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors hover:bg-gray-100"
+      >
+        <div className="flex items-center gap-2">
+          <ListTodo className="h-4 w-4 text-gray-500" strokeWidth={1} />
+          <span className="text-xs font-medium text-gray-700">Todo List</span>
+          {isUpdating ? (
+            <span className="flex items-center gap-1 text-xs text-blue-600">
+              <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1} />
+              Updating...
+            </span>
+          ) : (
+            <span className="text-xs text-gray-500">
+              {completedCount}/{totalCount} completed
+            </span>
+          )}
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="h-4 w-4 text-gray-500" strokeWidth={1} />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-gray-500" strokeWidth={1} />
+        )}
+      </button>
+      {isExpanded && (
+        <div className="max-h-64 overflow-y-auto px-4 pb-3">
+          {isUpdating && todos.length === 0 ? (
+            <div className="flex items-center justify-center gap-2 py-4 text-xs text-gray-500">
+              <Loader2 className="h-4 w-4 animate-spin" strokeWidth={1} />
+              <span>Loading todo list...</span>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-1.5">
+                {todos.map((todo, idx) => (
+                  <div
+                    key={todo.id || `${todo.messageId}-${idx}`}
+                    className="flex items-start gap-2 rounded bg-white p-2 text-xs"
+                  >
+                    <div className="flex-shrink-0 pt-0.5">
+                      {todo.done ? (
+                        <div className="flex h-4 w-4 items-center justify-center rounded border-2 border-green-500 bg-green-500">
+                          <svg
+                            className="h-3 w-3 text-white"
+                            fill="none"
+                            strokeWidth={2}
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </div>
+                      ) : (
+                        <div className="h-4 w-4 rounded border-2 border-gray-300" />
+                      )}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div
+                        className={`${
+                          todo.done
+                            ? "text-gray-500 line-through"
+                            : "text-gray-900"
+                        }`}
+                      >
+                        {todo.text}
+                      </div>
+                      {todo.note && (
+                        <div className="mt-0.5 text-xs text-gray-500">
+                          {todo.note}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              {isUpdating && todos.length > 0 && (
+                <div className="mt-2 flex items-center gap-2 rounded bg-blue-50 px-3 py-2 text-xs text-blue-700">
+                  <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1} />
+                  <span>Updating todo list...</span>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
 // Group consecutive assistant messages together for bundling
 interface MessageGroup {
   type: "user" | "assistant-group";
@@ -172,6 +390,8 @@ const convertAgentMessagesToAiFormat = (
               result: toolCall.functionResult,
               error: toolCall.functionError,
             },
+            // Pass through approval info if present on the tool call
+            requiresApproval: (toolCall as any).requiresApproval,
           }))
         : [],
     };
@@ -697,6 +917,7 @@ export function AgentTerminal({
           isCompleted: false,
           responseTimeMs: message.data.responseTimeMs,
           createdDate: new Date().toISOString(),
+          requiresApproval: message.data?.requiresApproval,
         };
 
         // Check for duplicates using the current messages ref
@@ -838,6 +1059,18 @@ export function AgentTerminal({
         messagesRef.current = updated;
         return updated;
       });
+
+      // Dispatch a local event so the UI can attempt reconnect when approvals get resolved while paused
+      try {
+        const ev = new CustomEvent("agent:toolApprovalResolved", {
+          detail: {
+            messageId: resultMessageId,
+            toolCallId: resultToolCallId,
+            approved: !(message.data?.functionError || message.data?.error),
+          },
+        } as any);
+        window.dispatchEvent(ev);
+      } catch {}
       // Tool result activity; reset idle timer
       resetDotsTimer();
     },
@@ -863,9 +1096,21 @@ export function AgentTerminal({
 
         console.log("🔌 connectToStream: Starting stream connection");
 
+        // Expose agent id globally for approval actions
+        (window as any).currentAgentId = currentAgent.id;
+        console.log("🔗 Setting currentAgentId:", currentAgent.id);
+
+        console.log(
+          "🌐 Attempting to connect to agent stream for:",
+          currentAgent.id,
+        );
         await connectToAgentStream(
           currentAgent.id,
           (message: AgentStreamMessage) => {
+            console.log("📨 Received stream message:", {
+              type: message.type,
+              data: message.data,
+            });
             switch (message.type) {
               case "contentChunk":
                 handleContentChunk(message, currentAgent);
@@ -882,6 +1127,53 @@ export function AgentTerminal({
               case "statusUpdate":
                 try {
                   const kind = (message as any)?.data?.kind;
+                  console.log("📡 Received status update:", {
+                    kind,
+                    data: (message as any).data,
+                  });
+                  if (kind === "toolApprovalsRequired") {
+                    const data = (message as any).data || {};
+                    const msgId: string | undefined = data.messageId;
+                    const ids: string[] = data.toolCallIds || [];
+                    console.log(
+                      "⏸️ Approvals required; pausing stream until approval:",
+                      { msgId, ids },
+                    );
+
+                    // Annotate tool calls with a temporary pending marker so UI can reflect paused state on reload
+                    if (msgId && Array.isArray(ids) && ids.length > 0) {
+                      setMessages((prev) => {
+                        const updated = prev.map((m) => {
+                          if (m.id !== msgId) return m;
+                          const existingToolCalls = m.toolCalls || [];
+                          const updatedToolCalls = existingToolCalls.map(
+                            (tc) => {
+                              if (!ids.includes(tc.toolCallId)) return tc;
+                              const fn = tc.functionName || "";
+                              return {
+                                ...tc,
+                                functionName: fn.includes("(pending approval)")
+                                  ? fn
+                                  : fn + " (pending approval)",
+                              };
+                            },
+                          );
+                          return { ...m, toolCalls: updatedToolCalls };
+                        });
+                        messagesRef.current = updated;
+                        return updated;
+                      });
+                    }
+
+                    // Proactively stop the current stream so that the page can be reloaded safely or stay idle until approval
+                    try {
+                      abortControllerRef.current?.abort();
+                      abortControllerRef.current = null;
+                      setIsConnecting(false);
+                      setIsWaitingForResponse(false);
+                    } catch {}
+                    break;
+                  }
                   if (kind === "contextWindow") {
                     const data = (message as any).data || {};
                     // Store last context window status in a ref so we can render it below
@@ -902,8 +1194,10 @@ export function AgentTerminal({
                     // Merge incoming context into local metadata
                     setAgentMetadata((prev) => {
                       const current = (prev || {}) as AgentMetadata;
+                      // Exclude top-level context to avoid duplicate keys when spreading
+                      const { context: _, ...currentWithoutContext } = current;
                       const next: AgentMetadata = {
-                        ...current,
+                        ...currentWithoutContext,
                         additionalData: {
                           ...(current.additionalData || {}),
                           context: nextContext,
@@ -942,6 +1236,58 @@ export function AgentTerminal({
                         return prevAgent;
                       }
                     });
+                  } else if (
+                    kind === "toolApprovalGranted" ||
+                    kind === "toolApprovalRejected"
+                  ) {
+                    const data = (message as any).data || {};
+                    const toolCallId: string | undefined = data.toolCallId;
+                    const msgId: string | undefined = data.messageId;
+                    console.log("🔧 Processing tool approval:", {
+                      kind,
+                      toolCallId,
+                      msgId,
+                      data,
+                    });
+                    if (toolCallId && msgId) {
+                      setMessages((prev) => {
+                        console.log("🔍 Looking for message:", {
+                          targetMsgId: msgId,
+                          availableMessages: prev.map((m) => ({
+                            id: m.id,
+                            toolCallsCount: m.toolCalls?.length || 0,
+                          })),
+                        });
+                        const updated = prev.map((m) => {
+                          if (m.id !== msgId) return m;
+                          const existingToolCalls = m.toolCalls || [];
+                          const updatedToolCalls = existingToolCalls.map(
+                            (tc) => {
+                              if (tc.toolCallId !== toolCallId) return tc;
+                              const suffix =
+                                kind === "toolApprovalGranted"
+                                  ? " (approved)"
+                                  : " (rejected)";
+                              const newFunctionName =
+                                (tc.functionName || "") + suffix;
+                              console.log("🏷️ Updating function name:", {
+                                toolCallId,
+                                oldName: tc.functionName,
+                                newName: newFunctionName,
+                              });
+                              return {
+                                ...tc,
+                                functionName: newFunctionName,
+                              };
+                            },
+                          );
+                          return { ...m, toolCalls: updatedToolCalls };
+                        });
+                        messagesRef.current = updated;
+                        return updated;
+                      });
+                    }
+                    break;
                   }
                 } catch {}
                 break;
@@ -1116,6 +1462,7 @@ export function AgentTerminal({
           setError("Failed to connect to agent stream");
         }
       } finally {
+        console.log("🔌 Stream connection finished, cleaning up");
         setIsConnecting(false);
         // Guard: clear waiting state if connection finished without content
         setIsWaitingForResponse(false);
@@ -1124,11 +1471,100 @@ export function AgentTerminal({
     [agent?.id, handleContentChunk, handleToolCall, handleToolResult],
   );
 
+  // Attempt to reconnect stream when all pending approvals are resolved
+  const attemptReconnectIfNoPending = useCallback(async () => {
+    try {
+      const currentAgent = agent;
+      if (!currentAgent) return;
+
+      // Check if we're already connected
+      if (abortControllerRef.current) {
+        console.log("🔄 Already connected to stream, skipping reconnect");
+        return;
+      }
+
+      const msgs = messagesRef.current || [];
+      const hasPending = msgs.some((m) =>
+        (m.toolCalls || []).some((tc) =>
+          (tc.functionName || "").includes("(pending approval)"),
+        ),
+      );
+
+      if (!hasPending) {
+        console.log("🔄 No pending approvals; reconnecting stream");
+        await connectToStream(currentAgent);
+      } else {
+        console.log("⏸️ Still have pending approvals, not reconnecting yet");
+      }
+    } catch (err) {
+      console.error("❌ Error attempting reconnect:", err);
+    }
+  }, [agent, connectToStream]);
+
+  // Listen for local approval resolution (when stream is paused) to update UI and reconnect
+  useEffect(() => {
+    const onApprovalResolved = (ev: any) => {
+      try {
+        const detail = ev?.detail || {};
+        const messageId: string | undefined = detail.messageId;
+        const toolCallId: string | undefined = detail.toolCallId;
+        const approved: boolean = !!detail.approved;
+        if (!messageId || !toolCallId) return;
+
+        console.log("🔔 Approval resolved:", {
+          messageId,
+          toolCallId,
+          approved,
+        });
+
+        setMessages((prev) => {
+          const updated = prev.map((m) => {
+            if (m.id !== messageId) return m;
+            const updatedToolCalls = (m.toolCalls || []).map((tc) => {
+              if (tc.toolCallId !== toolCallId) return tc;
+              const base = (tc.functionName || "")
+                .replace(" (pending approval)", "")
+                .replace(" (approved)", "")
+                .replace(" (rejected)", "");
+              return {
+                ...tc,
+                functionName: base + (approved ? " (approved)" : " (rejected)"),
+              };
+            });
+            return { ...m, toolCalls: updatedToolCalls };
+          });
+          messagesRef.current = updated;
+          return updated;
+        });
+
+        // Try to reconnect if no more pending approvals remain
+        setTimeout(() => {
+          attemptReconnectIfNoPending();
+        }, 100);
+      } catch (err) {
+        console.error("❌ Error handling approval resolution:", err);
+      }
+    };
+
+    window.addEventListener(
+      "agent:toolApprovalResolved",
+      onApprovalResolved as EventListener,
+    );
+    return () =>
+      window.removeEventListener(
+        "agent:toolApprovalResolved",
+        onApprovalResolved as EventListener,
+      );
+  }, [attemptReconnectIfNoPending]);
+
   // Load agent data and messages
   const loadAgent = useCallback(async () => {
     try {
       if (agentStub.status === "new") {
-        console.log("✅ Setting up new agent");
+        console.log("✅ Setting up new agent", agentStub.id);
+        // Set agent ID immediately for new agents
+        (window as any).currentAgentId = agentStub.id;
+        console.log("🔗 Setting currentAgentId for new agent:", agentStub.id);
         // Derive initial profile from provided metadata if present
         const initialProfileIdFromMeta = (() => {
           try {
@@ -1334,12 +1770,24 @@ export function AgentTerminal({
       setAgent(agentData);
       setMessages(agentData.messages || []);
 
+      // Set agent ID for existing agents too
+      (window as any).currentAgentId = agentData.id;
+      console.log(
+        "🔗 Setting currentAgentId for existing agent:",
+        agentData.id,
+      );
+
       // Parse metadata from DB if present (do not seed for existing agents)
       const parsedMeta: AgentMetadata | null = (() => {
         try {
-          return agentData.metadata
-            ? (JSON.parse(agentData.metadata) as AgentMetadata)
-            : null;
+          if (!agentData.metadata) return null;
+          const meta = JSON.parse(agentData.metadata) as AgentMetadata;
+          // Clean up: remove top-level context if present (should only be in additionalData)
+          if (meta && meta.context) {
+            const { context: _, ...cleanMeta } = meta;
+            return cleanMeta as AgentMetadata;
+          }
+          return meta;
         } catch {
           return null;
         }
@@ -1370,6 +1818,23 @@ export function AgentTerminal({
           // Reset streaming state for reconnection
           shouldCreateNewMessage.current = false;
 
+          // If there are pending approvals in current messages, skip reconnect for now
+          try {
+            const hasPending = (agentData.messages || []).some((m: any) =>
+              (m.toolCalls || []).some(
+                (tc: any) =>
+                  typeof tc?.functionName === "string" &&
+                  tc.functionName.includes("(pending approval)"),
+              ),
+            );
+            if (hasPending) {
+              console.log(
+                "⏸️ loadAgent: Pending approvals detected, delaying stream reconnect",
+              );
+              return;
+            }
+          } catch {}
+
           // Use the existing connectToStream function with the loaded agent data
           await connectToStream(agentData);
         }, 100);
@@ -1530,13 +1995,6 @@ export function AgentTerminal({
     }
   }, [messages, scrollToBottom, shouldAutoScroll]);
 
-  // Re-apply bottom alignment when loading dots appear/disappear, as it changes the content height
-  useEffect(() => {
-    if (shouldAutoScroll) {
-      scrollToBottom();
-    }
-  }, [showDots, shouldAutoScroll, scrollToBottom]);
-
   // Persist any pending settings (mode/model) once an agent exists server-side
   const persistPendingSettingsIfNeeded = useCallback(async () => {
     try {
@@ -1857,8 +2315,10 @@ export function AgentTerminal({
     ) => {
       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: {
@@ -1940,8 +2400,10 @@ export function AgentTerminal({
       return; // Page already exists
     }
 
+    // Exclude top-level context to avoid duplicate keys when spreading
+    const { context: _, ...currentWithoutContext } = current;
     const next: AgentMetadata = {
-      ...current,
+      ...currentWithoutContext,
       additionalData: {
         ...(current.additionalData || {}),
         context: {
@@ -1984,8 +2446,10 @@ export function AgentTerminal({
 
     if (newComponentIds.length === 0) return; // No new components to add
 
+    // Exclude top-level context to avoid duplicate keys when spreading
+    const { context: _, ...currentWithoutContext } = current;
     const next: AgentMetadata = {
-      ...current,
+      ...currentWithoutContext,
       additionalData: {
         ...(current.additionalData || {}),
         context: {
@@ -2025,8 +2489,10 @@ export function AgentTerminal({
     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: {
@@ -2077,8 +2543,10 @@ export function AgentTerminal({
 
     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: {
@@ -2188,8 +2656,10 @@ export function AgentTerminal({
     })();
 
     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: {
@@ -2544,13 +3014,18 @@ export function AgentTerminal({
           })}
         </div>
 
-        {showDots && <DancingDots />}
+        <div className={showDots ? "visible" : "invisible"}>
+          <DancingDots />
+        </div>
         <div ref={messagesEndRef} />
       </div>
 
       {/* Context Info Bar */}
       {renderContextInfoBar()}
 
+      {/* Todo List Panel */}
+      <TodoListPanel messages={messages} />
+
       {/* Input */}
       <div className="border-t border-gray-200 p-4">
         <div className="flex items-stretch gap-2">