@alpaca-editor/core 1.0.4184 → 1.0.4185

package/src/agents-view/AgentsView.tsx

@@ -1,49 +1,40 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
   Agent,
-  getActiveAgents,
-  GetAgentsParams,
-  getAgent,
+  getAgentsGrouped,
+  getClosedAgentsByProfile,
+  ProfileAgentsGroup as ProfileGroup,
   closeAgent,
   deleteAgent,
 } from "../editor/services/agentService";
-import { getAgentStatusConfig } from "../editor/ai/AgentStatusBadge";
 import { cn } from "../lib/utils";
-import {
-  Trash,
-  X,
-  RefreshCw,
-  Play,
-  Search,
-  Users,
-  XCircle,
-} from "lucide-react";
+import { RefreshCw, Search, XCircle } from "lucide-react";
 import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
 import { useEditContext } from "../editor/client/editContext";
-import { SecretAgentIcon } from "../editor/ui/Icons";
+import { AgentCard } from "./AgentCard";
+import { ProfileAgentsGroup } from "./ProfileAgentsGroup";
 
 /**
- * Agents overview view that displays all agents for the current user
- * (including closed and shared agents) grouped by profile with interactive controls
+ * Agents overview view that displays active agents at the top
+ * and closed agents grouped by profile below with interactive controls
  */
 export function AgentsView() {
   const editContext = useEditContext();
-  const [agents, setAgents] = useState<Agent[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
-  const [hasMore, setHasMore] = useState(false);
+  const [activeAgents, setActiveAgents] = useState<Agent[]>([]);
+  const [profileGroups, setProfileGroups] = useState<ProfileGroup[]>([]);
+  const [expandedProfiles, setExpandedProfiles] = useState<Set<string>>(
+    new Set(),
+  );
+  const [loadingMoreForProfile, setLoadingMoreForProfile] = useState<
+    string | null
+  >(null);
   const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
+  const [initialLoad, setInitialLoad] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
   const [showOnlyMyAgents, setShowOnlyMyAgents] = useState(false);
-  const agentsRef = useRef<Agent[]>([]);
-
-  // Keep ref in sync with state
-  useEffect(() => {
-    agentsRef.current = agents;
-  }, [agents]);
 
   // Debounce search term
   useEffect(() => {
@@ -54,53 +45,35 @@ export function AgentsView() {
     return () => clearTimeout(timer);
   }, [searchTerm]);
 
-  const loadAgents = useCallback(
-    async (reset: boolean = false) => {
-      try {
-        if (reset) {
-          setLoading(true);
-          setError(null);
-        } else {
-          setLoadingMore(true);
-        }
+  const loadAgents = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
 
-        const skip = reset ? 0 : agentsRef.current.length;
-        const params: GetAgentsParams = {
-          skip,
-          limit: 50,
-          includeShared: !showOnlyMyAgents,
-          includeOwned: true,
-          searchTerm: debouncedSearchTerm || undefined,
-        };
-
-        const response = await getActiveAgents(params);
-
-        if (reset) {
-          setAgents(response.agents);
-        } else {
-          setAgents((prev) => [...prev, ...response.agents]);
-        }
+      const response = await getAgentsGrouped(
+        debouncedSearchTerm || undefined,
+        !showOnlyMyAgents, // includeShared
+        true, // includeOwned
+      );
 
-        setTotalCount(response.totalCount);
-        setHasMore(response.hasMore);
-      } catch (err: any) {
-        console.error("Failed to load agents:", err);
-        setError(
-          err?.message || "Failed to load agents. Please try again later.",
-        );
-      } finally {
-        setLoading(false);
-        setLoadingMore(false);
-        setRefreshing(false);
-      }
-    },
-    [showOnlyMyAgents, debouncedSearchTerm],
-  );
+      setActiveAgents(response.activeAgents);
+      setProfileGroups(response.closedAgentsByProfile);
+    } catch (err: any) {
+      console.error("Failed to load agents:", err);
+      setError(
+        err?.message || "Failed to load agents. Please try again later.",
+      );
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+      setInitialLoad(false);
+    }
+  }, [showOnlyMyAgents, debouncedSearchTerm]);
 
-  // Initial load
+  // Initial load and reload when filters change
   useEffect(() => {
-    loadAgents(true);
-  }, [showOnlyMyAgents, debouncedSearchTerm]);
+    loadAgents();
+  }, [loadAgents]);
 
   // Subscribe to websocket messages for real-time agent updates
   useEffect(() => {
@@ -119,8 +92,8 @@ export function AgentsView() {
             return;
           }
 
-          setAgents((prevAgents) => {
-            // Check if agent already exists
+          // Update or add agent in active agents list
+          setActiveAgents((prevAgents) => {
             const existingAgentIndex = prevAgents.findIndex(
               (agent) => agent.id === agentId,
             );
@@ -137,7 +110,7 @@ export function AgentsView() {
               };
               return updatedAgents;
             } else {
-              // Add new agent - reload to get full details
+              // Agent not found - reload to get full details
               loadAgents();
               return prevAgents;
             }
@@ -146,10 +119,12 @@ export function AgentsView() {
           const { agentId, agentName, agentDescription } =
             message.payload || {};
           if (!agentId) return;
-          // Update the agent name and/or description in the list
-          setAgents((prevAgents) => {
+
+          // Update agent in active agents list
+          setActiveAgents((prevAgents) => {
             const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
             if (existingIndex === -1) return prevAgents;
+
             const updatedAgents = [...prevAgents];
             const existingAgent = updatedAgents[existingIndex]!;
             updatedAgents[existingIndex] = {
@@ -163,8 +138,8 @@ export function AgentsView() {
             return updatedAgents;
           });
         } else if (message.type === "agent:run:closed") {
-          // Reload agents when one is closed - it should still appear in the list
-          loadAgents(true);
+          // Reload agents when one is closed - it should move to closed section
+          loadAgents();
         }
       },
     );
@@ -174,12 +149,61 @@ export function AgentsView() {
 
   const handleRefresh = async () => {
     setRefreshing(true);
-    await loadAgents(true);
+    await loadAgents();
+  };
+
+  const handleToggleProfile = (profileId: string | null) => {
+    const key = profileId || "null";
+    setExpandedProfiles((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(key)) {
+        newSet.delete(key);
+      } else {
+        newSet.add(key);
+      }
+      return newSet;
+    });
   };
 
-  const handleLoadMore = () => {
-    if (!loadingMore && hasMore) {
-      loadAgents(false);
+  const handleLoadMoreForProfile = async (profileId: string | null) => {
+    if (!profileId || loadingMoreForProfile) return;
+
+    try {
+      setLoadingMoreForProfile(profileId);
+
+      // Find the current profile group
+      const profileGroup = profileGroups.find((g) => g.profileId === profileId);
+      if (!profileGroup) return;
+
+      const currentCount = profileGroup.agents.length;
+
+      // Load more agents for this profile
+      const response = await getClosedAgentsByProfile(
+        profileId,
+        currentCount,
+        10,
+        debouncedSearchTerm || undefined,
+      );
+
+      // Update the profile group with new agents
+      setProfileGroups((prevGroups) =>
+        prevGroups.map((group) => {
+          if (group.profileId === profileId) {
+            return {
+              ...group,
+              agents: [...group.agents, ...response.agents],
+            };
+          }
+          return group;
+        }),
+      );
+    } catch (err: any) {
+      console.error("Failed to load more agents:", err);
+      editContext?.showToast(
+        `Failed to load more agents: ${err?.message || "Unknown error"}`,
+      );
+    } finally {
+      setLoadingMoreForProfile(null);
     }
   };
 
@@ -204,7 +228,8 @@ export function AgentsView() {
       accept: async () => {
         try {
           await closeAgent(agentId);
-          setAgents((prev) => prev.filter((a) => a.id !== agentId));
+          // Reload to move agent from active to closed section
+          loadAgents();
         } catch (err: any) {
           console.error("Failed to close agent:", err);
           editContext?.showToast(
@@ -230,7 +255,15 @@ export function AgentsView() {
       accept: async () => {
         try {
           await deleteAgent(agentId);
-          setAgents((prev) => prev.filter((a) => a.id !== agentId));
+          // Remove from both active and closed lists
+          setActiveAgents((prev) => prev.filter((a) => a.id !== agentId));
+          setProfileGroups((prevGroups) =>
+            prevGroups.map((group) => ({
+              ...group,
+              agents: group.agents.filter((a) => a.id !== agentId),
+              totalClosedCount: Math.max(0, group.totalClosedCount - 1),
+            })),
+          );
         } catch (err: any) {
           console.error("Failed to delete agent:", err);
           editContext?.showToast(
@@ -242,6 +275,15 @@ export function AgentsView() {
     });
   };
 
+  const handleAgentClick = (agent: Agent) => {
+    // Only select the agent in the agents panel; do not switch views
+    window.dispatchEvent(
+      new CustomEvent("editor:selectAgent", {
+        detail: { agentId: agent.id },
+      }),
+    );
+  };
+
   const formatDateTime = (dateString: string) => {
     try {
       const date = new Date(dateString);
@@ -251,10 +293,8 @@ export function AgentsView() {
     }
   };
 
-  // No client-side filtering needed - backend handles it
-  // Just display the agents as returned from the API
-
-  if (loading) {
+  // Show full-screen loading only on initial load
+  if (initialLoad && loading) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-sm text-gray-500">Loading agents...</div>
@@ -262,32 +302,23 @@ export function AgentsView() {
     );
   }
 
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="max-w-md text-center">
-          <div className="mb-4 text-sm text-red-600">{error}</div>
-          <button
-            onClick={handleRefresh}
-            className="rounded bg-blue-500 px-4 py-2 text-xs text-white hover:bg-blue-600"
-          >
-            Retry
-          </button>
-        </div>
-      </div>
-    );
-  }
+  const totalActiveCount = activeAgents.length;
+  const totalClosedCount = profileGroups.reduce(
+    (sum, group) => sum + group.totalClosedCount,
+    0,
+  );
+  const totalCount = totalActiveCount + totalClosedCount;
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="absolute inset-0 flex flex-col">
       {/* Header */}
-      <div className="border-b border-gray-200 bg-white p-4">
+      <div className="flex-shrink-0 border-b border-gray-200 bg-white p-4">
         <div className="mb-3 flex items-center justify-between">
           <div>
             <h2 className="text-lg font-semibold text-gray-900">Agents</h2>
             <p className="text-xs text-gray-500">
-              Showing {agents.length} of {totalCount} agent
-              {totalCount !== 1 ? "s" : ""}
+              {totalActiveCount} active, {totalClosedCount} closed ({totalCount}{" "}
+              total)
             </p>
           </div>
           <div className="flex items-center gap-2">
@@ -343,159 +374,93 @@ export function AgentsView() {
         </div>
       </div>
 
-      {/* Agents List */}
-      <div className="flex-1 overflow-auto">
-        {agents.length === 0 ? (
+      {/* Content */}
+      <div className="relative flex-1 overflow-y-auto">
+        {/* Loading overlay - shows subtle indicator without hiding content */}
+        {loading && !initialLoad && (
+          <div className="absolute top-2 left-1/2 z-10 -translate-x-1/2 rounded-md bg-white px-3 py-1.5 shadow-md">
+            <div className="flex items-center gap-2 text-sm text-gray-600">
+              <RefreshCw className="size-3 animate-spin" strokeWidth={1} />
+              <span>Loading...</span>
+            </div>
+          </div>
+        )}
+
+        {error ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="max-w-md text-center">
+              <div className="mb-4 text-sm text-red-600">{error}</div>
+              <button
+                onClick={handleRefresh}
+                className="rounded bg-blue-500 px-4 py-2 text-xs text-white hover:bg-blue-600"
+              >
+                Retry
+              </button>
+            </div>
+          </div>
+        ) : totalCount === 0 && !loading ? (
           <div className="flex h-full items-center justify-center text-sm text-gray-500">
             {searchTerm.trim()
               ? "No agents match your search"
               : "No agents found"}
           </div>
         ) : (
-          <div className="space-y-2 p-4">
-            {agents.map((agent) => {
-              const statusConfig = getAgentStatusConfig(agent);
-              return (
-                <div
-                  key={agent.id}
-                  className="cursor-pointer rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md"
-                  onClick={() => {
-                    // Only select the agent in the agents panel; do not switch views
-                    window.dispatchEvent(
-                      new CustomEvent("editor:selectAgent", {
-                        detail: { agentId: agent.id },
-                      }),
-                    );
-                  }}
-                >
-                  <div className="flex items-start justify-between">
-                    {/* Agent Icon */}
-                    <div className="mr-3 flex-shrink-0">
-                      {agent.profileSvgIcon ? (
-                        <div
-                          className="flex h-6 w-6 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full"
-                          dangerouslySetInnerHTML={{
-                            __html: agent.profileSvgIcon,
-                          }}
-                        />
-                      ) : (
-                        <SecretAgentIcon
-                          size={24}
-                          strokeWidth={1}
-                          className="text-gray-400"
-                        />
-                      )}
-                    </div>
-
-                    <div className="min-w-0 flex-1">
-                      {/* Agent Name & Status */}
-                      <div className="mb-1 flex items-center gap-2">
-                        <div
-                          className={cn(
-                            "h-2 w-2 flex-shrink-0 rounded-full",
-                            statusConfig.color,
-                            statusConfig.shouldPulse && "animate-pulse",
-                          )}
-                          title={statusConfig.label}
-                        />
-                        <h4 className="truncate font-medium text-gray-900">
-                          {agent.name}
-                        </h4>
-                        {agent.isShared && (
-                          <div className="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5 text-xs text-blue-700">
-                            <Users className="size-3" strokeWidth={1} />
-                            <span>Shared</span>
-                          </div>
-                        )}
-                      </div>
-
-                      {/* Shared Agent Owner */}
-                      {agent.isShared && agent.ownerName && (
-                        <p className="mb-1 text-xs text-gray-500">
-                          Created by {agent.ownerName}
-                        </p>
-                      )}
-
-                      {/* Agent Description */}
-                      {agent.description && (
-                        <p className="mb-2 truncate text-xs text-gray-500">
-                          {agent.description}
-                        </p>
-                      )}
-
-                      {/* Agent Details */}
-                      <div className="space-y-1 text-xs text-gray-600">
-                        <div className="flex items-center gap-2">
-                          <span className="font-medium">Updated:</span>
-                          <span>{formatDateTime(agent.updatedDate)}</span>
-                        </div>
-                        {agent.messageCount !== undefined &&
-                          agent.messageCount > 0 && (
-                            <div className="flex items-center gap-2">
-                              <span className="font-medium">Messages:</span>
-                              <span>{agent.messageCount}</span>
-                            </div>
-                          )}
-                        {agent.totalCost !== undefined &&
-                          agent.totalCost > 0 && (
-                            <div className="flex items-center gap-2">
-                              <span className="font-medium">Cost:</span>
-                              <span>${agent.totalCost.toFixed(4)}</span>
-                              {agent.totalTokensUsed !== undefined && (
-                                <span className="text-gray-400">
-                                  ({agent.totalTokensUsed.toLocaleString()}{" "}
-                                  tokens)
-                                </span>
-                              )}
-                            </div>
-                          )}
-                      </div>
-                    </div>
-
-                    {/* Actions */}
-                    <div className="ml-3 flex gap-1">
-                      <SimpleIconButton
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleResumeAgent(agent);
-                        }}
-                        icon={<Play className="size-3" strokeWidth={1.5} />}
-                        label="Resume Agent"
-                        className="text-blue-600 opacity-60 hover:text-blue-700 hover:opacity-100"
-                      />
-                      <SimpleIconButton
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleCloseAgent(agent.id, agent.name);
-                        }}
-                        icon={<X className="size-3" strokeWidth={1.5} />}
-                        label="Close Agent"
-                        className="text-gray-600 opacity-60 hover:text-gray-800 hover:opacity-100"
-                      />
-                      <SimpleIconButton
-                        onClick={(e) =>
-                          handleDeleteAgent(agent.id, agent.name, e)
-                        }
-                        icon={<Trash className="size-3" strokeWidth={1.5} />}
-                        label="Delete Agent"
-                        className="text-red-600 opacity-60 hover:text-red-700 hover:opacity-100"
-                      />
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-
-            {/* Load More Button */}
-            {hasMore && (
-              <div className="flex justify-center pt-4">
-                <button
-                  onClick={handleLoadMore}
-                  disabled={loadingMore}
-                  className="rounded-lg border border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
-                >
-                  {loadingMore ? "Loading..." : "Load More"}
-                </button>
+          <div className={cn("space-y-4 p-4", loading && "opacity-60")}>
+            {/* Active Agents Section */}
+            {activeAgents.length > 0 && (
+              <div className="space-y-2">
+                <h3 className="text-sm font-semibold text-gray-700">
+                  Active Agents
+                </h3>
+                {activeAgents.map((agent) => (
+                  <AgentCard
+                    key={agent.id}
+                    agent={agent}
+                    onClick={handleAgentClick}
+                    onResume={handleResumeAgent}
+                    onClose={handleCloseAgent}
+                    onDelete={handleDeleteAgent}
+                    formatDateTime={formatDateTime}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Closed Agents by Profile Section */}
+            {profileGroups.length > 0 && (
+              <div className="space-y-2">
+                <h3 className="text-sm font-semibold text-gray-700">
+                  Closed Agents by Profile
+                </h3>
+                {profileGroups.map((profileGroup) => {
+                  const profileKey = profileGroup.profileId || "null";
+                  const isExpanded = expandedProfiles.has(profileKey);
+                  const isLoadingMore =
+                    loadingMoreForProfile === profileGroup.profileId;
+                  const hasMore =
+                    profileGroup.agents.length < profileGroup.totalClosedCount;
+
+                  return (
+                    <ProfileAgentsGroup
+                      key={profileKey}
+                      profileGroup={profileGroup}
+                      isExpanded={isExpanded}
+                      isLoadingMore={isLoadingMore}
+                      hasMore={hasMore}
+                      onToggle={() =>
+                        handleToggleProfile(profileGroup.profileId)
+                      }
+                      onLoadMore={() =>
+                        handleLoadMoreForProfile(profileGroup.profileId)
+                      }
+                      onAgentClick={handleAgentClick}
+                      onResumeAgent={handleResumeAgent}
+                      onCloseAgent={handleCloseAgent}
+                      onDeleteAgent={handleDeleteAgent}
+                      formatDateTime={formatDateTime}
+                    />
+                  );
+                })}
               </div>
             )}
           </div>