@alpaca-editor/core 1.0.4135 → 1.0.4141

package/src/editor/ai/useAgentStatus.ts

@@ -0,0 +1,123 @@
+import { useState, useEffect, useCallback } from "react";
+import { Agent, getActiveAgents } from "../services/agentService";
+import { useEditContext } from "../client/editContext";
+
+export interface AgentStatusSummary {
+  total: number;
+  running: number;
+  waitingForApproval: number;
+  hasActivity: boolean;
+  agents: Agent[];
+}
+
+/**
+ * Hook to track the status of all active agents
+ * Uses WebSocket messages for real-time updates instead of polling
+ */
+export function useAgentStatus(): AgentStatusSummary {
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const editContext = useEditContext();
+
+  const fetchAgentStatus = useCallback(async () => {
+    try {
+      const activeAgents = await getActiveAgents();
+      // Filter out completed, error, and closed agents to match WebSocket behavior
+      // Note: Backend sends status as both enum numbers (0-5) and strings
+      // Enum: New=0, Running=1, WaitingForApproval=2, Completed=3, Error=4, Closed=5
+      const filteredAgents = (activeAgents || []).filter(
+        (agent) => {
+          const status = agent.status;
+          // Handle numeric status (from initial fetch)
+          if (typeof status === "number") {
+            return status !== 3 && status !== 4 && status !== 5; // Not Completed, Error, or Closed
+          }
+          // Handle string status (from WebSocket updates)
+          return status !== "completed" && status !== "error" && status !== "closed";
+        }
+      );
+      setAgents(filteredAgents);
+    } catch (error) {
+      console.error("Failed to fetch agent status:", error);
+      // Don't update agents on error to keep showing last known state
+    }
+  }, []);
+
+  useEffect(() => {
+    // Initial fetch to populate state
+    fetchAgentStatus();
+  }, [fetchAgentStatus]);
+
+  useEffect(() => {
+    if (!editContext?.addSocketMessageListener) return;
+
+    // Subscribe to WebSocket messages for agent status updates
+    const handleMessage = (message: { type: string; payload: any }) => {
+      if (message.type === "agent-status-changed") {
+        // Update agent status in real-time from WebSocket message
+        const { agentId, status, name } = message.payload || {};
+        if (!agentId) return;
+
+        setAgents((prevAgents) => {
+          // Check if agent exists in current list
+          const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
+          
+          if (existingIndex !== -1) {
+            // Update existing agent status
+            const updatedAgents = [...prevAgents];
+            const existingAgent = updatedAgents[existingIndex]!;
+            updatedAgents[existingIndex] = {
+              id: existingAgent.id,
+              name: existingAgent.name,
+              userId: existingAgent.userId,
+              updatedDate: existingAgent.updatedDate,
+              status,
+            };
+            
+            // Remove agent from list if status is completed, error, or closed
+            if (status === "completed" || status === "error" || status === "closed") {
+              return updatedAgents.filter((a) => a.id !== agentId);
+            }
+            
+            return updatedAgents;
+          } else if (status === "running" || status === "waitingForApproval") {
+            // Add new agent to the list if it's in an active state
+            const newAgent: Agent = {
+              id: agentId,
+              name: name || "Agent",
+              userId: "",
+              status,
+              updatedDate: new Date().toISOString(),
+            };
+            return [...prevAgents, newAgent];
+          }
+          
+          return prevAgents;
+        });
+      }
+    };
+
+    // Register the listener and get cleanup function
+    const unsubscribe = editContext.addSocketMessageListener(handleMessage);
+
+    // Cleanup
+    return () => {
+      unsubscribe();
+    };
+  }, [editContext]);
+
+  // Calculate summary
+  // Handle both numeric (1) and string ("running") status values
+  const running = agents.filter((a) => a.status === "running" || a.status === 1).length;
+  const waitingForApproval = agents.filter(
+    (a) => a.status === "waitingForApproval" || a.status === 2,
+  ).length;
+
+  return {
+    total: agents.length,
+    running,
+    waitingForApproval,
+    hasActivity: agents.length > 0,
+    agents,
+  };
+}
+

package/src/editor/client/EditorShell.tsx

@@ -857,12 +857,12 @@ export function EditorShell({
       const item = me?.item;
       const acknowledged =
         !!item &&
-        item.id === currentItemDescriptor.id &&
-        item.language === currentItemDescriptor.language &&
-        item.version === currentItemDescriptor.version;
+        item.id === contentEditorItem?.id &&
+        item.language === contentEditorItem?.language &&
+        item.version === contentEditorItem?.version;
       if (acknowledged) setIsClientInfoAcknowledged(true);
     } catch {}
-  }, [activeSessions, currentItemDescriptor, sessionId]);
+  }, [activeSessions, contentEditorItem, sessionId]);
 
   const loadComments = useCallback(async () => {
     if (!currentItemDescriptor) return;
@@ -1834,6 +1834,8 @@ export function EditorShell({
           });
         }
 
+        console.log("Field action before setActiveFieldActions");
+
         if (actionButton.action) {
           setActiveFieldActions((prevFieldActions) => {
             const isSameField = (x: FieldAction) =>
@@ -1860,6 +1862,9 @@ export function EditorShell({
               mergedOp,
             ];
           });
+
+          console.log("Field action after setActiveFieldActions");
+
           await executeFieldServerAction(
             fieldDescriptor.item,
             fieldDescriptor.fieldId,
@@ -1869,18 +1874,39 @@ export function EditorShell({
             selectedRange?.text || "",
             parameters || {},
             (data: any) => {
-              op.message = data.responseText;
-              setActiveFieldActions((prevFieldActions) => [
-                ...prevFieldActions,
-              ]);
+              console.log("Field action progress", data);
+              // Update progress message if available
+              if (data?.responseText) {
+                op.message = data.responseText;
+                setActiveFieldActions((prevFieldActions) => [
+                  ...prevFieldActions,
+                ]);
+              }
             },
           );
 
+          console.log("Field action completed", op);
+
           itemsRepository.refreshItems([fieldDescriptor.item]);
 
           // Only mark as success if no websocket error has been reported
           if (op.state === "running") {
             op.state = "success";
+            // Auto-dismiss successful actions after a brief delay
+            setTimeout(() => {
+              setActiveFieldActions((prevFieldActions) =>
+                prevFieldActions.filter(
+                  (x) =>
+                    !(
+                      x.field.fieldId === fieldDescriptor.fieldId &&
+                      x.field.item.id === fieldDescriptor.item.id &&
+                      x.field.item.language === fieldDescriptor.item.language &&
+                      x.field.item.version === fieldDescriptor.item.version &&
+                      x.state === "success"
+                    ),
+                ),
+              );
+            }, 500);
           }
           requestRefresh("immediate");
         }

package/src/editor/client/itemsRepository.ts

@@ -408,7 +408,7 @@ export function useItemsRepository(
         timestamp: Date.now(),
         saveSequence: currentSaveSequence,
       };
-      
+
       fieldModificationStore.updateField(updatedField);
 
       addRecentEdit({ ...field, timestamp: Date.now(), user });
@@ -523,7 +523,6 @@ export function useItemsRepository(
         const prevFields = fieldModificationStore.getAllFields();
         const newFields = updateModifiedFields(prevFields);
 
-        
         fieldModificationStore.updateFields(newFields);
         setRevision((prev) => prev + 1);
       }

package/src/editor/commands/localizeItem/LocalizeItemDialog.tsx

@@ -11,7 +11,7 @@ import { DialogProps } from "../../client/editContext";
 import { getLanguagesAndVersions } from "../../services/contentService";
 import { FullItem, ItemDescriptor } from "../../pageModel";
 import { LanguageVersions } from "../../../types";
-import { Checkbox } from "primereact/checkbox";
+import { Checkbox } from "../../../components/ui/checkbox";
 
 import { EditContextType } from "../../client/editContext";
 import { Spinner } from "../../ui/Spinner";
@@ -150,12 +150,12 @@ export function LocalizeItemDialog(
               checked={allLanguages.every(
                 (language) => languageSelection[language.code],
               )}
-              onChange={(e) => {
+              onCheckedChange={(checked) => {
                 setLanguageSelection(
                   Object.fromEntries(
                     Array.from(languageData?.keys() || []).map((language) => [
                       language,
-                      e.checked || false,
+                      Boolean(checked),
                     ]),
                   ),
                 );
@@ -172,10 +172,10 @@ export function LocalizeItemDialog(
                 >
                   <Checkbox
                     checked={languageSelection[language.code] || false}
-                    onChange={(e) => {
+                    onCheckedChange={(checked) => {
                       setLanguageSelection((prev) => ({
                         ...prev,
-                        [language.code]: e.checked || false,
+                        [language.code]: Boolean(checked),
                       }));
                     }}
                   />

package/src/editor/control-center/About.tsx

@@ -138,20 +138,6 @@ export function About() {
                 designs{" "}
               </p>{" "}
             </div>{" "}
-            <div className="rounded-lg bg-gray-50 p-3">
-              {" "}
-              <div className="mb-2 flex items-center justify-between">
-                {" "}
-                <h4 className="text-sm font-medium text-gray-700">
-                  PrimeReact
-                </h4>{" "}
-                <span className="text-xs text-gray-500">MIT License</span>{" "}
-              </div>{" "}
-              <p className="text-xs text-gray-600">
-                {" "}
-                React UI Component Library with rich set of components{" "}
-              </p>{" "}
-            </div>{" "}
             <div className="rounded-lg bg-gray-50 p-3">
               {" "}
               <div className="mb-2 flex items-center justify-between">

package/src/editor/control-center/AllAgentsPanel.tsx

@@ -0,0 +1,300 @@
+import React, { useState, useEffect } from "react";
+import {
+  AgentDetails,
+  getAllAgents,
+  closeAgent,
+  deleteAgent,
+} from "../services/agentService";
+import { getAgentStatusConfig } from "../ai/AgentStatusBadge";
+import { cn } from "../../lib/utils";
+import { Trash, X, RefreshCw } from "lucide-react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+
+/**
+ * Control Center panel that displays all non-closed agents across all users
+ * Admin-only feature for monitoring and managing agents
+ */
+export function AllAgentsPanel() {
+  const [agents, setAgents] = useState<AgentDetails[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const loadAgents = async () => {
+    try {
+      setError(null);
+      const result = await getAllAgents(1000);
+      setAgents(result);
+    } catch (err: any) {
+      console.error("Failed to load agents:", err);
+      setError(
+        err?.message ||
+          "Failed to load agents. Check if you have admin permissions.",
+      );
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    loadAgents();
+  }, []);
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await loadAgents();
+  };
+
+  const handleCloseAgent = async (agentId: string, agentName: string) => {
+    if (
+      !confirm(
+        `Are you sure you want to close agent "${agentName}"? This will stop its execution if running.`,
+      )
+    ) {
+      return;
+    }
+
+    try {
+      await closeAgent(agentId);
+      // Remove from list or reload
+      setAgents((prev) => prev.filter((a) => a.id !== agentId));
+    } catch (err: any) {
+      console.error("Failed to close agent:", err);
+      alert(`Failed to close agent: ${err?.message || "Unknown error"}`);
+    }
+  };
+
+  const handleDeleteAgent = async (
+    agentId: string,
+    agentName: string,
+    event: React.MouseEvent,
+  ) => {
+    event.stopPropagation();
+
+    if (
+      !confirm(
+        `Are you sure you want to permanently delete agent "${agentName}"? This action cannot be undone.`,
+      )
+    ) {
+      return;
+    }
+
+    try {
+      await deleteAgent(agentId);
+      setAgents((prev) => prev.filter((a) => a.id !== agentId));
+    } catch (err: any) {
+      console.error("Failed to delete agent:", err);
+      alert(`Failed to delete agent: ${err?.message || "Unknown error"}`);
+    }
+  };
+
+  const formatDateTime = (dateString: string) => {
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleString();
+    } catch {
+      return dateString;
+    }
+  };
+
+  const filteredAgents = agents.filter((agent) => {
+    if (!searchTerm.trim()) return true;
+    const search = searchTerm.toLowerCase();
+    return (
+      agent.name.toLowerCase().includes(search) ||
+      agent.userId?.toLowerCase().includes(search) ||
+      agent.id.toLowerCase().includes(search)
+    );
+  });
+
+  // Group agents by status
+  const groupedAgents = filteredAgents.reduce(
+    (acc, agent) => {
+      const statusConfig = getAgentStatusConfig(agent);
+      const statusLabel = statusConfig.label.replace("Status: ", "");
+      if (!acc[statusLabel]) {
+        acc[statusLabel] = [];
+      }
+      acc[statusLabel].push(agent);
+      return acc;
+    },
+    {} as Record<string, AgentDetails[]>,
+  );
+
+  // Sort groups by priority
+  const statusOrder = [
+    "Waiting for Approval",
+    "Running",
+    "Error",
+    "New",
+    "Completed",
+  ];
+  const sortedGroups = Object.entries(groupedAgents).sort(([a], [b]) => {
+    const indexA = statusOrder.indexOf(a);
+    const indexB = statusOrder.indexOf(b);
+    if (indexA === -1) return 1;
+    if (indexB === -1) return -1;
+    return indexA - indexB;
+  });
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-sm text-gray-500">Loading agents...</div>
+      </div>
+    );
+  }
+
+  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>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <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">All Agents</h2>
+            <p className="text-xs text-gray-500">
+              Showing {filteredAgents.length} non-closed agent
+              {filteredAgents.length !== 1 ? "s" : ""} across all users
+            </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>
+
+        {/* Search */}
+        <input
+          type="text"
+          placeholder="Search by name, user, 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>
+
+      {/* Agents List */}
+      <div className="flex-1 overflow-auto">
+        {filteredAgents.length === 0 ? (
+          <div className="flex h-full items-center justify-center text-sm text-gray-500">
+            {searchTerm.trim()
+              ? "No agents match your search"
+              : "No non-closed agents found"}
+          </div>
+        ) : (
+          <div className="space-y-6 p-4">
+            {sortedGroups.map(([statusLabel, groupAgents]) => (
+              <div key={statusLabel}>
+                <h3 className="mb-2 text-xs font-semibold tracking-wide text-gray-500 uppercase">
+                  {statusLabel} ({groupAgents.length})
+                </h3>
+                <div className="space-y-2">
+                  {groupAgents.map((agent) => {
+                    const statusConfig = getAgentStatusConfig(agent);
+                    return (
+                      <div
+                        key={agent.id}
+                        className="rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md"
+                      >
+                        <div className="flex items-start justify-between">
+                          <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>
+
+                            {/* Agent Details */}
+                            <div className="space-y-1 text-xs text-gray-600">
+                              <div className="flex items-center gap-2">
+                                <span className="font-medium">User:</span>
+                                <span>{agent.userId || "Unknown"}</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <span className="font-medium">ID:</span>
+                                <span className="font-mono text-xs">
+                                  {agent.id}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <span className="font-medium">Updated:</span>
+                                <span>{formatDateTime(agent.updatedDate)}</span>
+                              </div>
+                              {agent.totalCost > 0 && (
+                                <div className="flex items-center gap-2">
+                                  <span className="font-medium">Cost:</span>
+                                  <span>${agent.totalCost.toFixed(4)}</span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          {/* Actions */}
+                          <div className="ml-3 flex gap-1">
+                            <SimpleIconButton
+                              onClick={() =>
+                                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>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/editor/control-center/WebSocketMessages.tsx

@@ -53,6 +53,7 @@ export function WebSocketMessages() {
       "suggested-edit-updated": "bg-indigo-100 text-indigo-800",
       "suggested-edit-deleted": "bg-red-100 text-red-800",
       "update-quota": "bg-gray-100 text-gray-800",
+      "agent-status-changed": "bg-violet-100 text-violet-800",
     };
     return colors[type] || "bg-gray-100 text-gray-800";
   };