@alpaca-editor/core 1.0.4176 → 1.0.4179

package/src/agents-view/AgentsView.tsx

@@ -1,61 +1,106 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import {
-  AgentDetails,
+  Agent,
   getActiveAgents,
+  GetAgentsParams,
   getAgent,
   closeAgent,
   deleteAgent,
 } from "../editor/services/agentService";
 import { getAgentStatusConfig } from "../editor/ai/AgentStatusBadge";
 import { cn } from "../lib/utils";
-import { Trash, X, RefreshCw, Play } from "lucide-react";
+import {
+  Trash,
+  X,
+  RefreshCw,
+  Play,
+  Search,
+  Users,
+  XCircle,
+} from "lucide-react";
 import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
 import { useEditContext } from "../editor/client/editContext";
 import { SecretAgentIcon } from "../editor/ui/Icons";
 
 /**
- * Agents overview view that displays all non-closed agents for the current user
- * grouped by profile with interactive controls
+ * Agents overview view that displays all agents for the current user
+ * (including closed and shared agents) grouped by profile with interactive controls
  */
 export function AgentsView() {
   const editContext = useEditContext();
-  const [agents, setAgents] = useState<AgentDetails[]>([]);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
   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[]>([]);
 
-  const loadAgents = async () => {
-    try {
-      setError(null);
-      // Get basic agent list
-      const basicAgents = await getActiveAgents(1000);
+  // Keep ref in sync with state
+  useEffect(() => {
+    agentsRef.current = agents;
+  }, [agents]);
 
-      // Fetch full details for each agent
-      const detailsPromises = basicAgents.map((agent) =>
-        getAgent(agent.id).catch(() => null),
-      );
-      const agentDetails = await Promise.all(detailsPromises);
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 400);
 
-      // Filter out any failed fetches and set the agents
-      const validAgents = agentDetails.filter(
-        (a): a is AgentDetails => a !== null,
-      );
-      setAgents(validAgents);
-    } 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);
-    }
-  };
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  const loadAgents = useCallback(
+    async (reset: boolean = false) => {
+      try {
+        if (reset) {
+          setLoading(true);
+          setError(null);
+        } else {
+          setLoadingMore(true);
+        }
+
+        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]);
+        }
+
+        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],
+  );
+
+  // Initial load
   useEffect(() => {
-    loadAgents();
-  }, []);
+    loadAgents(true);
+  }, [showOnlyMyAgents, debouncedSearchTerm]);
 
   // Subscribe to websocket messages for real-time agent updates
   useEffect(() => {
@@ -97,25 +142,48 @@ export function AgentsView() {
               return prevAgents;
             }
           });
-        } else if (message.type === "agent:run:closed") {
-          // Remove agent from list when closed
-          const { agentId } = message.payload || {};
+        } else if (message.type === "agent:info:updated") {
+          const { agentId, agentName, agentDescription } =
+            message.payload || {};
           if (!agentId) return;
-
-          setAgents((prevAgents) => prevAgents.filter((a) => a.id !== agentId));
+          // Update the agent name and/or description in the list
+          setAgents((prevAgents) => {
+            const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
+            if (existingIndex === -1) return prevAgents;
+            const updatedAgents = [...prevAgents];
+            const existingAgent = updatedAgents[existingIndex]!;
+            updatedAgents[existingIndex] = {
+              ...existingAgent,
+              ...(agentName !== undefined && { name: agentName }),
+              ...(agentDescription !== undefined && {
+                description: agentDescription,
+              }),
+              updatedDate: new Date().toISOString(),
+            };
+            return updatedAgents;
+          });
+        } else if (message.type === "agent:run:closed") {
+          // Reload agents when one is closed - it should still appear in the list
+          loadAgents(true);
         }
       },
     );
 
     return unsubscribe;
-  }, [editContext?.addSocketMessageListener]);
+  }, [editContext?.addSocketMessageListener, loadAgents]);
 
   const handleRefresh = async () => {
     setRefreshing(true);
-    await loadAgents();
+    await loadAgents(true);
   };
 
-  const handleResumeAgent = (agent: AgentDetails) => {
+  const handleLoadMore = () => {
+    if (!loadingMore && hasMore) {
+      loadAgents(false);
+    }
+  };
+
+  const handleResumeAgent = (agent: Agent) => {
     editContext?.switchView("page-editor");
     editContext?.setShowAgentsPanel?.(true);
     // Delay for panel mount, then dispatch event to open existing agent
@@ -183,35 +251,10 @@ export function AgentsView() {
     }
   };
 
-  const filteredAgents = agents.filter((agent) => {
-    if (!searchTerm.trim()) return true;
-    const search = searchTerm.toLowerCase();
-    return (
-      agent.name.toLowerCase().includes(search) ||
-      agent.profileName?.toLowerCase().includes(search) ||
-      agent.id.toLowerCase().includes(search)
-    );
-  });
-
-  // Group agents by profile
-  const groupedAgents = filteredAgents.reduce(
-    (acc, agent) => {
-      const profileName = agent.profileName || "Unknown Profile";
-      if (!acc[profileName]) {
-        acc[profileName] = [];
-      }
-      acc[profileName].push(agent);
-      return acc;
-    },
-    {} as Record<string, AgentDetails[]>,
-  );
-
-  // Sort profile groups by name
-  const sortedProfileGroups = Object.entries(groupedAgents).sort(([a], [b]) =>
-    a.localeCompare(b),
-  );
+  // No client-side filtering needed - backend handles it
+  // Just display the agents as returned from the API
 
-  if (loading) {
+  if (loading && (!agents || agents.length === 0)) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-sm text-gray-500">Loading agents...</div>
@@ -241,171 +284,223 @@ export function AgentsView() {
       <div className="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">My Agents</h2>
+            <h2 className="text-lg font-semibold text-gray-900">Agents</h2>
             <p className="text-xs text-gray-500">
-              Showing {filteredAgents.length} active agent
-              {filteredAgents.length !== 1 ? "s" : ""}
+              Showing {agents?.length || 0} of {totalCount} agent
+              {totalCount !== 1 ? "s" : ""}
             </p>
           </div>
-          <SimpleIconButton
-            onClick={handleRefresh}
-            icon={
-              <RefreshCw
-                className={cn("size-4", refreshing && "animate-spin")}
-                strokeWidth={1.5}
-              />
-            }
-            label="Refresh"
-            disabled={refreshing}
-            className="text-gray-600 hover:text-gray-800"
-          />
+          <div className="flex items-center gap-2">
+            <SimpleIconButton
+              onClick={handleRefresh}
+              icon={
+                <RefreshCw
+                  className={cn("size-4", refreshing && "animate-spin")}
+                  strokeWidth={1}
+                />
+              }
+              label="Refresh"
+              disabled={refreshing}
+              className="text-gray-600 hover:text-gray-800"
+            />
+          </div>
+        </div>
+
+        {/* Filter Toggle */}
+        <div className="mb-3">
+          <label className="flex cursor-pointer items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={showOnlyMyAgents}
+              onChange={(e) => setShowOnlyMyAgents(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            <span className="text-gray-700">Show only my agents</span>
+          </label>
         </div>
 
         {/* Search */}
-        <input
-          type="text"
-          placeholder="Search by name, profile, or agent ID..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-full rounded border border-gray-200 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
-        />
+        <div className="relative">
+          <Search
+            className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
+            strokeWidth={1}
+          />
+          <input
+            type="text"
+            placeholder="Search by name or description..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full rounded border border-gray-200 py-2 pr-10 pl-10 text-sm focus:border-blue-500 focus:outline-none"
+          />
+          {searchTerm && (
+            <button
+              onClick={() => setSearchTerm("")}
+              className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+            >
+              <XCircle className="size-4" strokeWidth={1} />
+            </button>
+          )}
+        </div>
       </div>
 
       {/* Agents List */}
       <div className="flex-1 overflow-auto">
-        {filteredAgents.length === 0 ? (
+        {!agents || agents.length === 0 ? (
           <div className="flex h-full items-center justify-center text-sm text-gray-500">
             {searchTerm.trim()
               ? "No agents match your search"
-              : "No active agents found"}
+              : "No agents found"}
           </div>
         ) : (
-          <div className="space-y-6 p-4">
-            {sortedProfileGroups.map(([profileName, profileAgents]) => (
-              <div key={profileName}>
-                <h3 className="mb-2 text-xs font-semibold tracking-wide text-gray-500 uppercase">
-                  {profileName} ({profileAgents.length})
-                </h3>
-                <div className="space-y-2">
-                  {profileAgents.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 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>
 
-                          <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>
-                            </div>
+                      {/* Shared Agent Owner */}
+                      {agent.isShared && agent.ownerName && (
+                        <p className="mb-1 text-xs text-gray-500">
+                          Created by {agent.ownerName}
+                        </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 > 0 && (
-                                <div className="flex items-center gap-2">
-                                  <span className="font-medium">Messages:</span>
-                                  <span>{agent.messageCount}</span>
-                                </div>
-                              )}
-                              {agent.totalCost > 0 && (
-                                <div className="flex items-center gap-2">
-                                  <span className="font-medium">Cost:</span>
-                                  <span>${agent.totalCost.toFixed(4)}</span>
-                                  <span className="text-gray-400">
-                                    ({agent.totalTokensUsed.toLocaleString()}{" "}
-                                    tokens)
-                                  </span>
-                                </div>
-                              )}
-                            </div>
-                          </div>
+                      {/* Agent Description */}
+                      {agent.description && (
+                        <p className="mb-2 truncate text-xs text-gray-500">
+                          {agent.description}
+                        </p>
+                      )}
 
-                          {/* 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>
+                      {/* 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>
-            ))}
+            )}
           </div>
         )}
       </div>
     </div>
   );
 }
-

package/src/editor/ai/Agents.tsx

@@ -332,10 +332,11 @@ export const Agents = React.memo(function Agents({
               return [...prevAgents, newAgent];
             }
           });
-        } else if (message.type === "agent:name:updated") {
-          const { agentId, agentName } = message.payload || {};
-          if (!agentId || !agentName) return;
-          // Update the agent name in the tabs list
+        } else if (message.type === "agent:info:updated") {
+          const { agentId, agentName, agentDescription } =
+            message.payload || {};
+          if (!agentId) return;
+          // Update the agent name and/or description in the tabs list
           setAgents((prevAgents) => {
             const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
             if (existingIndex === -1) return prevAgents;
@@ -343,7 +344,10 @@ export const Agents = React.memo(function Agents({
             const existingAgent = updatedAgents[existingIndex]!;
             updatedAgents[existingIndex] = {
               ...existingAgent,
-              name: agentName,
+              ...(agentName !== undefined && { name: agentName }),
+              ...(agentDescription !== undefined && {
+                description: agentDescription,
+              }),
               updatedDate: new Date().toISOString(),
             };
             return updatedAgents;
@@ -457,8 +461,14 @@ export const Agents = React.memo(function Agents({
 
       setLoadingAgents(true);
 
-      // Load active agents
-      const activeAgentsResult = await getActiveAgents();
+      // Load active agents (exclude shared agents for the agent panel)
+      const activeAgentsResponse = await getActiveAgents({
+        limit: 1000,
+        includeShared: false, // Agent panel only shows user's own agents
+        includeOwned: true,
+      });
+
+      const activeAgentsResult = activeAgentsResponse.agents;
 
       setAgents(activeAgentsResult);
 

package/src/editor/ai/useAgentStatus.ts

@@ -21,7 +21,12 @@ export function useAgentStatus(): AgentStatusSummary {
 
   const fetchAgentStatus = useCallback(async () => {
     try {
-      const activeAgents = await getActiveAgents();
+      const response = await getActiveAgents({
+        limit: 1000,
+        includeShared: false, // Only show user's own agents in status
+        includeOwned: true,
+      });
+      const activeAgents = response.agents;
       // Filter out completed, error, and closed agents to match WebSocket behavior
       // Note: Backend sends status as both enum numbers (0-7) and strings
       // Enum: New=0, Running=1, WaitingForApproval=2, Completed=3, Error=4, Closed=5, Idle=6, CostLimitReached=7