@alpaca-editor/core 1.0.4064 → 1.0.4066

package/src/editor/ai/Agents.tsx

@@ -16,9 +16,16 @@ import {
   getClosedAgents,
   closeAgent as closeAgentService,
   deleteAgent,
+  AgentMetadata,
 } from "../services/agentService";
 import { AgentTerminal } from "./AgentTerminal";
 import { useEditContext } from "../client/editContext";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { Button } from "../../components/ui/button";
 
 // function convertAgentMessagesToTerminalMessages(
 //   agentMessages: AgentChatMessage[],
@@ -49,13 +56,30 @@ const ACTIVE_AGENT_STORAGE_KEY = "editor.activeAgentId";
 export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
   const [agents, setAgents] = useState<Agent[]>([]);
   const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
+  const activeAgentIdRef = useRef<string | null>(null);
   const [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
   const [menuPopoverOpen, setMenuPopoverOpen] = useState(false);
   const [loadingAgents, setLoadingAgents] = useState(false);
   const [inactiveAgents, setInactiveAgents] = useState<Agent[]>([]);
+  const [historyFilter, setHistoryFilter] = useState("");
+  const [initialMetadataMap, setInitialMetadataMap] = useState<
+    Record<string, AgentMetadata | undefined>
+  >({});
 
   const editContext = useEditContext();
 
+  // Helper function to filter agents by name
+  const getFilteredInactiveAgents = (): Agent[] => {
+    if (!historyFilter.trim()) {
+      return inactiveAgents;
+    }
+
+    const filterLower = historyFilter.toLowerCase();
+    return inactiveAgents.filter((agent) =>
+      agent.name.toLowerCase().includes(filterLower),
+    );
+  };
+
   // Helper function to get the most recently updated agent
   const getMostRecentAgent = (agentList: Agent[]): Agent | null => {
     if (agentList.length === 0) return null;
@@ -69,6 +93,7 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
   // Helper function to set active agent and persist to localStorage
   const setActiveAgentIdWithStorage = (agentId: string | null) => {
     setActiveAgentId(agentId);
+    activeAgentIdRef.current = agentId;
 
     if (agentId) {
       localStorage.setItem(ACTIVE_AGENT_STORAGE_KEY, agentId);
@@ -77,26 +102,43 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
     }
   };
 
-  // Initialize with a default agent if none exist
-  useEffect(() => {
-    if (agents.length === 0) {
-      const defaultAgent: Agent = {
-        status: "new",
-        id: crypto.randomUUID(),
-        name: `New Agent`,
-        updatedDate: new Date().toISOString(),
-        userId: "",
-      };
-      setAgents([defaultAgent]);
-      setActiveAgentId(defaultAgent.id);
-    }
-  }, [agents.length]);
 
   // Load agents from backend on mount
   useEffect(() => {
     loadAgentsFromBackend();
   }, []);
 
+  // Listen for external requests to add a new agent (e.g., AI command)
+  useEffect(() => {
+    const handleAddNewAgent = (ev: Event) => {
+      let initialMetadata: AgentMetadata | undefined = undefined;
+      try {
+        const ce = ev as unknown as CustomEvent;
+        initialMetadata = (ce.detail && (ce.detail as any).metadata) as
+          | AgentMetadata
+          | undefined;
+      } catch {}
+
+      addAgent(initialMetadata);
+      // Ensure the prompt focuses after the agent tab mounts
+      setTimeout(() => {
+        try {
+          window.dispatchEvent(new CustomEvent("editor:focusAgentPrompt"));
+        } catch {}
+      }, 60);
+    };
+
+    window.addEventListener(
+      "editor:addNewAgent",
+      handleAddNewAgent as EventListener,
+    );
+    return () =>
+      window.removeEventListener(
+        "editor:addNewAgent",
+        handleAddNewAgent as EventListener,
+      );
+  }, []);
+
   // Subscribe to websocket messages for agent-started events
   useEffect(() => {
     if (!editContext?.addSocketMessageListener) return;
@@ -210,7 +252,7 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
   //   return null;
   // };
 
-  const addAgent = () => {
+  const addAgent = (metadata?: AgentMetadata) => {
     const newAgent: Agent = {
       status: "new",
       id: crypto.randomUUID(),
@@ -220,6 +262,9 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
     };
     setAgents((prev) => [...prev, newAgent]);
     setActiveAgentIdWithStorage(newAgent.id);
+    if (metadata) {
+      setInitialMetadataMap((prev) => ({ ...prev, [newAgent.id]: metadata }));
+    }
   };
 
   const closeAgent = async (agentId: string) => {
@@ -235,7 +280,7 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
       const filtered = prev.filter((a) => a.id !== agentId);
 
       // If we're closing the active terminal, switch to the most recent remaining one or clear storage
-      if (activeAgentId === agentId) {
+      if (activeAgentIdRef.current === agentId) {
         if (filtered.length > 0) {
           const mostRecentAgent = getMostRecentAgent(filtered);
           setActiveAgentIdWithStorage(mostRecentAgent?.id || null);
@@ -249,10 +294,12 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
   };
 
   const closeOtherAgents = async () => {
-    if (!activeAgentId) return;
+    if (!activeAgentIdRef.current) return;
 
     // Get agents to close (all except active)
-    const agentsToClose = agents.filter((a) => a.id !== activeAgentId);
+    const agentsToClose = agents.filter(
+      (a) => a.id !== activeAgentIdRef.current,
+    );
 
     // Permanently close each agent in the backend
     const closePromises = agentsToClose.map(async (agent) => {
@@ -267,7 +314,7 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
     await Promise.all(closePromises);
 
     setAgents((prev) => {
-      return prev.filter((a) => a.id === activeAgentId);
+      return prev.filter((a) => a.id === activeAgentIdRef.current);
     });
     setMenuPopoverOpen(false);
   };
@@ -333,11 +380,22 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
     );
   }
 
+  // Empty state when no agents are open
+  if (!loadingAgents && agents.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Button onClick={() => addAgent()}>
+          <Plus className="mr-2 h-4 w-4" strokeWidth={1} /> Create agent
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full flex-col">
       {/* Tab Header */}
       <div className="flex items-center border-b border-gray-200 bg-gray-50">
-        <div className="flex flex-1 overflow-x-auto">
+        <div className="scrollbar-hide flex flex-1 overflow-x-auto">
           {agents.map((agent) => (
             <div
               key={agent.id}
@@ -374,121 +432,160 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
                     getTabsMenuItems(),
                   );
                   // Then update the active tab on the next tick to avoid interfering with positioning
-                }, 200);
+                }, 150);
                 setActiveAgentIdWithStorage(agent.id);
               }}
             >
-              <span className="truncate">{agent.name}</span>
-              {agents.length > 1 && (
-                <SimpleIconButton
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    closeAgent(agent.id);
-                  }}
-                  icon={<X className="size-2" strokeWidth={1} />}
-                  label="Close"
-                  className="ml-1 opacity-60 hover:opacity-100"
-                />
-              )}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="truncate" title={agent.name}>
+                    {agent.name}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>{agent.name}</TooltipContent>
+              </Tooltip>
+              <SimpleIconButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  closeAgent(agent.id);
+                }}
+                icon={<X className="size-2" strokeWidth={1} />}
+                label="Close"
+                className="ml-1 opacity-60 hover:opacity-100"
+              />
             </div>
           ))}
         </div>
 
         {/* History Popover */}
-        <div className="flex items-center px-1">
-          <Popover
-            open={historyPopoverOpen}
-            onOpenChange={setHistoryPopoverOpen}
-          >
-            <PopoverTrigger asChild>
-              <SimpleIconButton
-                onClick={() => {}}
-                icon={<History className="size-4" strokeWidth={1} />}
-                label="Agent History"
-                className="text-gray-600 hover:text-gray-800"
-              />
-            </PopoverTrigger>
-            <PopoverContent className="w-64 p-0" align="end">
-              <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500">
-                Closed Agents
-              </div>
-              <div className="max-h-80 overflow-y-auto">
-                {inactiveAgents.length === 0 ? (
-                  <div className="px-3 py-2 text-xs text-gray-500">
-                    No closed agents found
+        {agents.length > 0 && (
+          <div className="flex items-center px-1">
+            <Popover
+              open={historyPopoverOpen}
+              onOpenChange={(open) => {
+                setHistoryPopoverOpen(open);
+                if (!open) {
+                  setHistoryFilter(""); // Clear filter when popover closes
+                }
+              }}
+            >
+              <PopoverTrigger asChild>
+                <SimpleIconButton
+                  onClick={() => {}}
+                  icon={<History className="size-4" strokeWidth={1} />}
+                  label="Agent History"
+                  className="text-gray-600 hover:text-gray-800"
+                />
+              </PopoverTrigger>
+              <PopoverContent className="w-64 p-0" align="end">
+                <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500">
+                  Closed Agents
+                </div>
+                {inactiveAgents.length > 0 && (
+                  <div className="border-b border-gray-100 px-3 py-2">
+                    <input
+                      type="text"
+                      placeholder="Filter agents..."
+                      value={historyFilter}
+                      onChange={(e) => setHistoryFilter(e.target.value)}
+                      className="w-full rounded border border-gray-200 px-2 py-1 text-xs focus:border-blue-500 focus:outline-none"
+                    />
                   </div>
-                ) : (
-                  inactiveAgents.map((agent) => (
-                    <div
-                      key={agent.id}
-                      className="cursor-pointer border-b border-gray-50 px-3 py-2 text-xs hover:bg-gray-50"
-                      onClick={() => openAgentFromHistory(agent)}
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="min-w-0 flex-1">
-                          <div className="truncate font-medium text-gray-900">
-                            {agent.name}
-                          </div>
-                          <div className="text-xs text-gray-400">
-                            {new Date(agent.updatedDate).toLocaleString()}
+                )}
+                <div className="max-h-80 overflow-y-auto">
+                  {(() => {
+                    const filteredAgents = getFilteredInactiveAgents();
+
+                    if (inactiveAgents.length === 0) {
+                      return (
+                        <div className="px-3 py-2 text-xs text-gray-500">
+                          No closed agents found
+                        </div>
+                      );
+                    }
+
+                    if (filteredAgents.length === 0) {
+                      return (
+                        <div className="px-3 py-2 text-xs text-gray-500">
+                          No agents match your filter
+                        </div>
+                      );
+                    }
+
+                    return filteredAgents.map((agent) => (
+                      <div
+                        key={agent.id}
+                        className="cursor-pointer border-b border-gray-50 px-3 py-2 text-xs hover:bg-gray-50"
+                        onClick={() => openAgentFromHistory(agent)}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="min-w-0 flex-1">
+                            <div className="truncate font-medium text-gray-900">
+                              {agent.name}
+                            </div>
+                            <div className="text-xs text-gray-400">
+                              {new Date(agent.updatedDate).toLocaleString()}
+                            </div>
                           </div>
+                          <SimpleIconButton
+                            onClick={(e) => deleteAgentFromHistory(agent.id, e)}
+                            icon={<Trash className="size-3" strokeWidth={1} />}
+                            label="Delete Agent"
+                            className="ml-2 text-red-600 opacity-60 hover:text-red-700 hover:opacity-100"
+                          />
                         </div>
-                        <SimpleIconButton
-                          onClick={(e) => deleteAgentFromHistory(agent.id, e)}
-                          icon={<Trash className="size-3" strokeWidth={1} />}
-                          label="Delete Agent"
-                          className="ml-2 text-red-600 opacity-60 hover:text-red-700 hover:opacity-100"
-                        />
                       </div>
-                    </div>
-                  ))
-                )}
-              </div>
-            </PopoverContent>
-          </Popover>
-        </div>
+                    ));
+                  })()}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
 
         {/* Menu Popover */}
-        <div className="flex items-center px-1">
-          <Popover open={menuPopoverOpen} onOpenChange={setMenuPopoverOpen}>
-            <PopoverTrigger asChild>
-              <SimpleIconButton
-                onClick={() => {}}
-                icon={<MoreVertical className="size-4" strokeWidth={1} />}
-                label="Menu"
-                className="text-gray-600 hover:text-gray-800"
-              />
-            </PopoverTrigger>
-            <PopoverContent className="w-48 p-0" align="end">
-              <div className="py-1">
-                {getTabsMenuItems().map((item) =>
-                  item.separator ? (
-                    <div key={item.id} className="my-1 h-px bg-gray-100" />
-                  ) : (
-                    <button
-                      key={item.id}
-                      onClick={async (e) => {
-                        if (item.command) await item.command(e);
-                        setMenuPopoverOpen(false);
-                      }}
-                      disabled={!!item.disabled}
-                      className="w-full px-3 py-2 text-left text-xs hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-400"
-                    >
-                      {item.label}
-                    </button>
-                  ),
-                )}
-              </div>
-            </PopoverContent>
-          </Popover>
-        </div>
+        {agents.length > 0 && (
+          <div className="flex items-center px-1">
+            <Popover open={menuPopoverOpen} onOpenChange={setMenuPopoverOpen}>
+              <PopoverTrigger asChild>
+                <SimpleIconButton
+                  onClick={() => {}}
+                  icon={<MoreVertical className="size-4" strokeWidth={1} />}
+                  label="Menu"
+                  className="text-gray-600 hover:text-gray-800"
+                />
+              </PopoverTrigger>
+              <PopoverContent className="w-48 p-0" align="end">
+                <div className="py-1">
+                  {getTabsMenuItems().map((item) =>
+                    item.separator ? (
+                      <div key={item.id} className="my-1 h-px bg-gray-100" />
+                    ) : (
+                      <button
+                        key={item.id}
+                        onClick={async (e) => {
+                          if (item.command) await item.command(e);
+                          setMenuPopoverOpen(false);
+                        }}
+                        disabled={!!item.disabled}
+                        className="w-full px-3 py-2 text-left text-xs hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-400"
+                      >
+                        {item.label}
+                      </button>
+                    ),
+                  )}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
 
         {/* Add Terminal Button */}
         <div className="flex items-center px-1">
           <SimpleIconButton
-            onClick={addAgent}
+            onClick={() => addAgent()}
             icon={<Plus className="size-4" strokeWidth={1} />}
-            label="Add Terminal"
+            label={agents.length === 0 ? "Create Agent" : "Add Agent"}
             className="text-gray-600 hover:text-gray-800"
           />
         </div>
@@ -509,7 +606,10 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
               activeAgentId === agent.id ? "block" : "hidden",
             )}
           >
-            <AgentTerminal agentStub={agent} />
+            <AgentTerminal
+              agentStub={agent}
+              initialMetadata={initialMetadataMap[agent.id]}
+            />
           </div>
         ))}
       </div>

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 
 import { useEditContext } from "../client/editContext";
 import { EditOperation } from "../../types";
@@ -6,17 +6,80 @@ import { Message } from "./AiTerminal";
 import { ToolCallDisplay } from "./ToolCallDisplay";
 
 import { X, Bot, Loader2 } from "lucide-react";
+import { Button } from "../../components/ui/button";
+
+type QuickAction = {
+  id?: string;
+  label: string;
+  prompt?: string;
+  value?: string;
+  style?: "primary" | "secondary" | "destructive" | "outline";
+};
+
+function parseQuickActionsFromContent(content?: string): {
+  cleanText: string;
+  actions: QuickAction[];
+} {
+  if (!content) return { cleanText: "", actions: [] };
+
+  // Match fenced code blocks like ```quick_action_buttons ...```
+  const fenceRegex = /```quick_action_buttons\s+([\s\S]*?)```/gi;
+
+  let cleanText = content;
+  const actions: QuickAction[] = [];
+
+  let match: RegExpExecArray | null;
+  while ((match = fenceRegex.exec(content)) !== null) {
+    const jsonText = match[1]?.trim();
+    if (!jsonText) {
+      continue;
+    }
+    try {
+      const parsed = JSON.parse(jsonText);
+      const rawActions =
+        parsed?.actions || parsed?.buttons || parsed?.choices || [];
+      if (Array.isArray(rawActions)) {
+        rawActions.forEach((a) => {
+          if (!a) return;
+          const action: QuickAction = {
+            id: a.id,
+            label: a.label || a.text || String(a.value || a.prompt || ""),
+            prompt: a.prompt,
+            value: a.value,
+            style: a.style,
+          };
+          if (action.label) actions.push(action);
+        });
+      }
+    } catch {}
+    // Remove this code block from the rendered text
+    cleanText = cleanText.replace(match[0], "");
+  }
+
+  return { cleanText: cleanText.trim(), actions };
+}
+
+function simpleFormatToHtml(text: string): string {
+  return text
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\n/g, "<br/>");
+}
 
 export function AiResponseMessage({
   messages,
   finished,
   editOperations,
   error,
+  onQuickAction,
 }: {
   messages: Message[];
   finished: boolean;
   editOperations: EditOperation[];
   error?: string;
+  onQuickAction?: (
+    action: { label: string; prompt?: string; value?: string },
+    message: Message,
+  ) => void;
 }) {
   const editContext = useEditContext();
   if (!editContext) return <></>;
@@ -108,6 +171,13 @@ export function AiResponseMessage({
                 ? message.tool_calls
                 : preservedToolCalls[message.id] || [];
 
+            // Extract quick actions from content
+            const { cleanText, actions } = parseQuickActionsFromContent(
+              (message.content || message.formattedContent || "") as string,
+            );
+
+            const html = simpleFormatToHtml(cleanText);
+
             return (
               <div
                 key={filteredIndex}
@@ -116,9 +186,43 @@ export function AiResponseMessage({
                 <div
                   className="prose prose-sm max-w-none text-sm text-gray-700 select-text"
                   dangerouslySetInnerHTML={{
-                    __html: message.formattedContent || message.content || "",
+                    __html: html,
                   }}
                 />
+
+                {actions.length > 0 && (
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {actions.map((a, idx) => {
+                      const variant =
+                        a.style === "destructive"
+                          ? "destructive"
+                          : a.style === "outline"
+                            ? "outline"
+                            : a.style === "secondary"
+                              ? "secondary"
+                              : "default"; // primary
+                      return (
+                        <Button
+                          key={(a.id || a.label || "btn") + "-" + idx}
+                          size="sm"
+                          variant={variant as any}
+                          onClick={() =>
+                            onQuickAction?.(
+                              {
+                                label: a.label,
+                                prompt: a.prompt,
+                                value: a.value,
+                              },
+                              message,
+                            )
+                          }
+                        >
+                          {a.label}
+                        </Button>
+                      );
+                    })}
+                  </div>
+                )}
                 <ToolCallDisplay
                   toolCalls={toolCalls}
                   finished={finished}

package/src/editor/ai/AiTerminal.tsx

@@ -279,6 +279,20 @@ export function AiTerminal({
           messages={formattedMessages}
           editOperations={response.editOperations}
           finished={isFinished}
+          onQuickAction={(action) => {
+            const text = (
+              action.prompt ||
+              action.value ||
+              action.label ||
+              ""
+            ).trim();
+            if (!text) return;
+            // Submit this as a new command
+            commandHandler(text, (node, done) => {
+              TerminalService.emit("response", node);
+              if (done) TerminalService.emit("response", undefined);
+            });
+          }}
         />,
         isFinished,
       );
@@ -289,6 +303,19 @@ export function AiTerminal({
           messages={messagesRef.current}
           editOperations={response.editOperations}
           finished={isFinished}
+          onQuickAction={(action) => {
+            const text = (
+              action.prompt ||
+              action.value ||
+              action.label ||
+              ""
+            ).trim();
+            if (!text) return;
+            commandHandler(text, (node, done) => {
+              TerminalService.emit("response", node);
+              if (done) TerminalService.emit("response", undefined);
+            });
+          }}
         />,
         isFinished,
       );