@alpaca-editor/core 1.0.4042 → 1.0.4044

package/src/editor/client/EditorClient.tsx

@@ -26,8 +26,6 @@ import {
 import { fieldModificationStore } from "./fieldModificationStore";
 
 import type { OpenDialog } from "./editContext";
-import type { AiTerminalOptions } from "../ai/AiTerminal";
-
 import { EditorConfiguration, MenuItem } from "../../config/types";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
@@ -256,7 +254,16 @@ export function EditorClient({
     });
   }, []);
 
-  const [activeSessions, setActiveSessions] = useState<EditSession[]>([]);
+  const [activeSessions, setActiveSessions] = useState<EditSession[]>(() => {
+    try {
+      const existing = (globalThis as any).__alpacaActiveSessions as
+        | EditSession[]
+        | undefined;
+      return Array.isArray(existing) ? existing : [];
+    } catch {
+      return [];
+    }
+  });
 
   if (typeof window !== "undefined")
     sessionStorage?.setItem("sessionId", sessionId);
@@ -413,6 +420,7 @@ export function EditorClient({
   });
 
   const socketMessageListeners = useRef<Set<(data: any) => void>>(new Set());
+  const socketInstanceRef = useRef<WebSocket | null>(null);
 
   const addSocketMessageListener = useCallback(
     (callback: (message: { type: string; payload: any }) => void) => {
@@ -531,14 +539,15 @@ export function EditorClient({
       }
 
       if (message.type === "active-sessions") {
-        setActiveSessions(() => {
+        setActiveSessions((prev) => {
           // Ensure payload is an array and contains valid session objects
           if (!Array.isArray(message.payload)) {
             console.warn(
               "❌ Active sessions payload is not an array:",
               message.payload,
             );
-            return [];
+            (globalThis as any).__alpacaActiveSessions = prev;
+            return prev; // keep previous instead of clearing to avoid losing user during HMR blips
           }
 
           // Filter out any invalid session objects
@@ -560,8 +569,41 @@ export function EditorClient({
             );
           }
 
+          // If server reports empty list, keep previous to avoid transient blanking during HMR
+          if (validSessions.length === 0 && prev.length > 0) {
+            console.warn(
+              "⚠️ Received empty active sessions; preserving previous list to avoid losing state",
+            );
+            (globalThis as any).__alpacaActiveSessions = prev;
+            return prev;
+          }
+
+          (globalThis as any).__alpacaActiveSessions = validSessions;
           return validSessions;
         });
+
+        // Detect if the current session is missing from the list and self-heal
+        try {
+          const payload = Array.isArray(message.payload)
+            ? (message.payload as any[])
+            : [];
+          const hasMySession = payload.some(
+            (s) => s && s.sessionId === sessionId,
+          );
+          if (!hasMySession) {
+            console.warn(
+              "⚠️ Current session missing from active sessions. Re-sending client-info to recover...",
+            );
+            setTimeout(() => {
+              sendClientInfo();
+            }, 300);
+          }
+        } catch (e) {
+          console.warn(
+            "Failed to verify active sessions for current session!",
+            e,
+          );
+        }
       }
 
       if (message.type === "item-deleted") {
@@ -761,10 +803,61 @@ export function EditorClient({
   );
 
   const user = useMemo(
-    () => activeSessions.find((x) => x.sessionId === sessionId)?.user,
-    [activeSessions, sessionId],
+    () =>
+      activeSessions.find((x) => x.sessionId === sessionId)?.user ||
+      userInfo.user,
+    [activeSessions, sessionId, userInfo.user],
   );
 
+  // Self-heal if our session disappears (e.g., after HMR)
+  const missingSessionRecoveryTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const missingSessionRecoveryAttemptsRef = useRef<number>(0);
+  useEffect(() => {
+    const hasMySession = activeSessions.some((s) => s.sessionId === sessionId);
+    if (hasMySession) {
+      // Reset recovery state when we see ourselves again
+      if (missingSessionRecoveryTimerRef.current) {
+        clearTimeout(missingSessionRecoveryTimerRef.current);
+        missingSessionRecoveryTimerRef.current = null;
+      }
+      missingSessionRecoveryAttemptsRef.current = 0;
+      return;
+    }
+
+    // Only run one recovery timer at a time
+    if (missingSessionRecoveryTimerRef.current) return;
+
+    const attempt = missingSessionRecoveryAttemptsRef.current + 1;
+    const delay = Math.min(250 * Math.pow(2, attempt - 1), 2000);
+
+    console.warn(
+      `⚠️ Current session not present in active sessions. Recovery attempt ${attempt} in ${delay}ms...`,
+    );
+
+    missingSessionRecoveryTimerRef.current = setTimeout(() => {
+      missingSessionRecoveryTimerRef.current = null;
+      missingSessionRecoveryAttemptsRef.current = attempt;
+
+      if (attempt <= 3) {
+        sendClientInfo();
+      } else {
+        // Force a reconnect to refresh presence after several failed nudges
+        try {
+          socketInstanceRef.current?.close(4000, "recover-presence");
+        } catch {
+          // Ignore errors while attempting to recover presence
+        }
+      }
+    }, delay);
+
+    return () => {
+      if (missingSessionRecoveryTimerRef.current) {
+        clearTimeout(missingSessionRecoveryTimerRef.current);
+        missingSessionRecoveryTimerRef.current = null;
+      }
+    };
+  }, [activeSessions, sessionId]);
+
   useEffect(() => {
     if (typeof window === "undefined") return;
 
@@ -919,57 +1012,64 @@ export function EditorClient({
     let reconnectAttempts = 0;
 
     const connectWebSocket = () => {
-      let socket: WebSocket = (globalThis as any).editorSocket;
+      let socket: WebSocket | undefined = (globalThis as any).editorSocket;
+
+      const needsNewSocket =
+        !socket ||
+        socket.readyState === WebSocket.CLOSING ||
+        socket.readyState === WebSocket.CLOSED;
+
+      if (needsNewSocket) {
+        socket = connectSocket(sessionId);
+
+        // Connection opened
+        socket.addEventListener("open", () => {
+          console.log("Connected!");
+          reconnectAttempts = 0; // Reset attempts on successful connection
+          sendClientInfo();
+          requestQuota();
+          //TODO: Load clients
+        });
 
-      if (
-        socket &&
-        (socket.readyState === WebSocket.OPEN ||
-          socket.readyState === WebSocket.CONNECTING)
-      )
-        return;
+        // Handle connection close
+        socket.addEventListener("close", (event) => {
+          // WebSocket connection closed
 
-      socket = connectSocket(sessionId);
+          // Only attempt to reconnect if it wasn't a clean close
+          if (event.code !== 1000) {
+            // Start with 1 second, increase exponentially up to 30 seconds
+            const delay = Math.min(
+              1000 * Math.pow(2, Math.min(reconnectAttempts, 5)),
+              30000,
+            );
+            // Attempting to reconnect with backoff
 
-      // Connection opened
-      socket.addEventListener("open", () => {
-        console.log("Connected!");
-        reconnectAttempts = 0; // Reset attempts on successful connection
-        sendClientInfo();
-        requestQuota();
-        //TODO: Load clients
-      });
+            reconnectTimeout = setTimeout(() => {
+              reconnectAttempts++;
+              connectWebSocket();
+            }, delay);
+          }
+        });
 
-      // Listen for messages
-      socket.addEventListener("message", messageHandler);
+        // Handle connection errors
+        socket.addEventListener("error", (error) => {
+          console.error("WebSocket error:", error);
+        });
 
-      // Handle connection close
-      socket.addEventListener("close", (event) => {
-        console.log("WebSocket connection closed:", event.code, event.reason);
+        (globalThis as any).editorSocket = socket;
+      }
 
-        // Only attempt to reconnect if it wasn't a clean close
-        if (event.code !== 1000) {
-          // Start with 1 second, increase exponentially up to 30 seconds
-          const delay = Math.min(
-            1000 * Math.pow(2, Math.min(reconnectAttempts, 5)),
-            30000,
-          );
-          console.log(
-            `Attempting to reconnect in ${delay}ms... (attempt ${reconnectAttempts + 1})`,
-          );
+      // Always ensure this instance is listening to messages
+      if (socket) {
+        socket.addEventListener("message", messageHandler);
+        socketInstanceRef.current = socket;
 
-          reconnectTimeout = setTimeout(() => {
-            reconnectAttempts++;
-            connectWebSocket();
-          }, delay);
+        // If we attached to an already-open socket, resend client info to refresh presence
+        if (socket.readyState === WebSocket.OPEN) {
+          sendClientInfo();
+          requestQuota();
         }
-      });
-
-      // Handle connection errors
-      socket.addEventListener("error", (error) => {
-        console.error("WebSocket error:", error);
-      });
-
-      (globalThis as any).editorSocket = socket;
+      }
     };
 
     connectWebSocket();
@@ -979,6 +1079,13 @@ export function EditorClient({
       if (reconnectTimeout) {
         clearTimeout(reconnectTimeout);
       }
+      if (socketInstanceRef.current) {
+        socketInstanceRef.current.removeEventListener(
+          "message",
+          messageHandler,
+        );
+        socketInstanceRef.current = null;
+      }
     };
   }, []);
 
@@ -1904,7 +2011,7 @@ export function EditorClient({
     viewName,
   ]);
 
-  const editContext = useMemo(() => {
+  const editContext = useMemo<EditContextType>(() => {
     // console.log('🔄 EditContext useMemo is being recalculated');
     const context = {
       operations: operationsContext.ops,
@@ -2330,7 +2437,7 @@ export function EditorClient({
       loadFavorites,
     };
 
-    return context;
+    return context as unknown as EditContextType;
   }, [
     operations,
     itemsRepository,

package/src/editor/client/editContext.ts

@@ -52,12 +52,7 @@ import {
 import { ItemsRepository } from "./itemsRepository";
 import { MediaSelectorMode } from "../media-selector/MediaSelector";
 import { ComponentCommand } from "../commands/componentCommands";
-import { AiTerminalOptions } from "../ai/AiTerminal";
-import {
-  Wizard,
-  WizardData,
-  WizardPageModel,
-} from "../../page-wizard/PageWizard";
+
 export type DragObject = {
   type: "template" | "component" | "link-component" | "items";
   typeId: string;
@@ -140,6 +135,7 @@ export type EditContextType = {
   };
   comments: Comment[];
   suggestedEdits: SuggestedEdit[];
+  setSuggestedEdits: React.Dispatch<React.SetStateAction<SuggestedEdit[]>>;
   loadComments: () => void;
   setComments: React.Dispatch<React.SetStateAction<Comment[]>>;
   selectedComment: Comment | undefined;

package/src/editor/client/operations.ts

@@ -9,6 +9,7 @@ import {
   SuggestedEdit,
   User,
 } from "../../types";
+
 import {
   FieldDescriptor,
   FullItem,
@@ -45,6 +46,23 @@ import { EditorMode } from "./editContext";
 // Track pending suggested edit save requests to prevent race conditions
 const pendingSuggestedEditSaves = new Map<string, Promise<any>>();
 
+// Track pending suggested edits to prevent creating duplicates before server response
+const pendingSuggestedEdits = new Map<string, SuggestedEdit>();
+
+// Helper function to clean up pending operations for a deleted suggested edit
+export function cleanupPendingSuggestedEditOperations(
+  suggestedEdit: SuggestedEdit,
+  user?: { name: string },
+) {
+  const userKey = user?.name || "unknown";
+  const pendingFieldKey = `${suggestedEdit.itemId}:${suggestedEdit.mainItemLanguage}:${suggestedEdit.mainItemVersion}:${suggestedEdit.fieldId}:${userKey}`;
+  const saveKey = `${suggestedEdit.itemId}:${suggestedEdit.mainItemLanguage}:${suggestedEdit.mainItemVersion}:${suggestedEdit.fieldId}`;
+
+  // Remove from pending operations
+  pendingSuggestedEdits.delete(pendingFieldKey);
+  pendingSuggestedEditSaves.delete(saveKey);
+}
+
 export function getOperationsContext(
   state: {
     page?: Page;
@@ -91,6 +109,12 @@ export function getOperationsContext(
   // Extract values to avoid state object reference issues
   const itemsRepository = state.itemsRepository;
 
+  // Debounced version of createOrUpdateSuggestedEdit to prevent excessive API calls
+  const debouncedCreateOrUpdateSuggestedEdit = useDebouncedCallback(
+    createOrUpdateSuggestedEdit,
+    500, // 500ms delay
+  );
+
   const executeOp = useCallback(
     async (
       op: EditOperation,
@@ -187,7 +211,7 @@ export function getOperationsContext(
         if (executedOp.focus) {
           state.setSelection([executedOp.focus]);
           state.setFocusFieldComponentId(executedOp.focus);
-          
+
           // Clear insert mode immediately after selecting the newly added component
           if (executedOp.type === "add-component") {
             state.setInsertMode(false);
@@ -336,7 +360,7 @@ export function getOperationsContext(
 
         if (op) {
           // Create and track the save promise
-          const savePromise = createOrUpdateSuggestedEdit(op)
+          const savePromise = debouncedCreateOrUpdateSuggestedEdit(op)!
             .then((result) => {
               // Update the suggested edits state with the result from the server
               if (result.type === "success" && result.data) {
@@ -351,6 +375,9 @@ export function getOperationsContext(
             .finally(() => {
               // Remove from pending saves when complete
               pendingSuggestedEditSaves.delete(fieldKey);
+              // Also remove from pending edits since it's now persisted
+              const pendingFieldKey = `${field.item.id}:${field.item.language}:${field.item.version}:${field.fieldId}:${state.user?.name || "unknown"}`;
+              pendingSuggestedEdits.delete(pendingFieldKey);
             });
 
           pendingSuggestedEditSaves.set(fieldKey, savePromise);
@@ -807,6 +834,19 @@ async function getOrMergeSuggestedEditOp(
   }
   const page = state.page;
 
+  // Create a unique key for this field to check for pending edits
+  const fieldKey = `${field.item.id}:${field.item.language}:${field.item.version}:${field.fieldId}:${state.user?.name || "unknown"}`;
+
+  // First check if there's a pending suggested edit for this field
+  const pendingEdit = pendingSuggestedEdits.get(fieldKey);
+  if (pendingEdit) {
+    // Update the pending edit instead of creating a new one
+    pendingEdit.newValue = newVal || "";
+    pendingEdit.updated = new Date().toISOString();
+    pendingEdit.updatedBy = state.user?.name || "unknown";
+    return pendingEdit;
+  }
+
   // Attempt to find an existing suggested edit by the same user for this field.
   const existing = state.suggestedEdits.find(
     (edit) =>
@@ -819,6 +859,7 @@ async function getOrMergeSuggestedEditOp(
       edit.status === "pending", // or any status that indicates it's open for further editing.
   );
 
+
   if (existing) {
     // Update the existing suggestion.
     existing.newValue = newVal || "";
@@ -846,6 +887,9 @@ async function getOrMergeSuggestedEditOp(
       type: "FieldValue",
     };
 
+    // Add to pending edits to prevent race conditions
+    pendingSuggestedEdits.set(fieldKey, newEdit);
+
     state.setSuggestedEdits([...state.suggestedEdits, newEdit]);
     return newEdit;
   }

package/src/editor/commands/componentCommands.tsx

@@ -95,6 +95,7 @@ function getInsertCommand(
   const item = components[0];
   if (!item) return null;
   if (!item.placeholders || item.placeholders.length === 0) return null;
+  if (editContext.mode === "suggestions") return null;
   return {
     id: "insert",
     icon: <Plus size={defaultIconSize} />,
@@ -112,6 +113,7 @@ function getDuplicateCommand(
   editContext: EditContextType,
 ): ComponentCommand | null {
   if (components.length !== 1) return null;
+  if (editContext.mode === "suggestions") return null;
 
   return {
     id: "duplicate",
@@ -295,6 +297,8 @@ function getDeleteCommand(
   components: Component[],
   editContext: EditContextType,
 ): ComponentCommand | null {
+  if (editContext.mode === "suggestions") return null;
+
   const applicableComponents = components.filter(
     (c) =>
       ((!isPlaceholder(c) && !c.layoutId) ||

package/src/editor/media-selector/Thumbnails.tsx

@@ -16,7 +16,10 @@ export function Thumbnails({
   onHide: () => void;
 }) {
   return (
-    <div className="absolute inset-0 flex flex-col overflow-auto p-2">
+    <div 
+      data-testid="media-selector-thumbnails-container"
+      className="absolute inset-0 flex flex-col overflow-auto p-2"
+    >
       <div className="flex flex-wrap content-start items-start gap-4">
         {images?.map((t) => (
           <div

package/src/editor/page-editor-chrome/FrameMenu.tsx

@@ -388,6 +388,7 @@ export function FrameMenu({
                           ev.stopPropagation();
                           b.onClick(ev);
                         }}
+                        data-testid={`frame-menu-${b.id}`}
                       >
                         {typeof b.icon === "string" ? (
                           <i className={b.icon + " cursor-pointer text-sm"} />

package/src/editor/page-editor-chrome/InlineEditor.tsx

@@ -612,7 +612,7 @@ export function InlineEditor({
         // Otherwise, gather all suggestions for this field.
         const fieldSuggestions = context.suggestedEdits.filter(
           (s: any) =>
-            s.status === "Pending" &&
+            s.status === "pending" &&
             s.fieldId === fieldId &&
             s.itemId === itemId &&
             s.mainItemLanguage === language &&
@@ -699,7 +699,7 @@ export function InlineEditor({
   ]);
 
   useEffect(() => {
-    if (!context || compareView || context.mode === "preview") return;
+    if (!context || compareView) return;
 
     const iframeDoc = pageViewContext.editorIframe?.contentWindow?.document;
     if (!iframeDoc) return;
@@ -712,11 +712,35 @@ export function InlineEditor({
     );
 
     allFieldEls.forEach(async (el) => {
-      if (context.mode === "suggestions" || context.showSuggestedEdits) return;
-      // don't stomp on the one that's live‑editing
-      if (el === context.inlineEditingFieldElement) return;
+      // don't stomp on the one that's live‑editing (only in non-preview modes)
+      if (
+        context.mode !== "preview" &&
+        el === context.inlineEditingFieldElement
+      )
+        return;
 
       const fieldId = el.getAttribute("data-fieldid")!;
+      const itemId = el.getAttribute("data-itemid")!;
+      const language = el.getAttribute("data-language")!;
+      const version = parseInt(el.getAttribute("data-version")!, 10);
+
+      // In suggestions mode (but not preview), only reset fields that don't have any suggested edits
+      if (
+        context.mode === "suggestions" ||
+        (context.mode !== "preview" && context.showSuggestedEdits)
+      ) {
+        const hasActiveSuggestions = context.suggestedEdits.some(
+          (edit) =>
+            edit.status === "pending" &&
+            edit.fieldId === fieldId &&
+            edit.itemId === itemId &&
+            edit.mainItemLanguage === language &&
+            edit.mainItemVersion === version,
+        );
+
+        // If field has active suggestions, don't reset it (let the other hook handle it)
+        if (hasActiveSuggestions) return;
+      }
 
       const realField = await context.itemsRepository.getItem({
         id: fieldId,
@@ -729,10 +753,6 @@ export function InlineEditor({
         return;
       }
 
-      const itemId = el.getAttribute("data-itemid")!;
-      const language = el.getAttribute("data-language")!;
-      const version = parseInt(el.getAttribute("data-version")!, 10);
-
       // lookup baseline
       const loaded = await context.itemsRepository.getItem({
         id: itemId,
@@ -742,21 +762,23 @@ export function InlineEditor({
       const repoF = loaded?.fields.find((f) => f.id === fieldId);
       let value = repoF?.rawValue ?? "";
 
-      // override with any local edit
-      const mod = modifiedFieldsContext?.modifiedFields.find(
-        (m) =>
-          m.fieldId === fieldId &&
-          m.item.id === itemId &&
-          m.item.language === language &&
-          m.item.version === version,
-      );
+      // override with any local edit (only in non-preview modes)
+      if (context.mode !== "preview") {
+        const mod = modifiedFieldsContext?.modifiedFields.find(
+          (m) =>
+            m.fieldId === fieldId &&
+            m.item.id === itemId &&
+            m.item.language === language &&
+            m.item.version === version,
+        );
 
-      if (mod) value = mod.value as string;
+        if (mod) value = mod.value as string;
+      }
 
       // write it in
       el.innerHTML = value;
     });
-  }, [context.mode, context.showSuggestedEdits]);
+  }, [context.mode, context.showSuggestedEdits, context.suggestedEdits]);
 
   return null;
 }

package/src/editor/reviews/SuggestedEdit.tsx

@@ -5,6 +5,7 @@ import {
   deleteSuggestedEdit,
   createOrUpdateSuggestedEdit,
 } from "../services/suggestedEditsService";
+import { cleanupPendingSuggestedEditOperations } from "../client/operations";
 import { Button } from "../../components/ui/button";
 import { formatDate } from "../utils";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
@@ -171,8 +172,28 @@ export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
                 <Button
                   variant="outline"
                   onClick={async () => {
-                    await deleteSuggestedEdit(edit);
-                    setDeletePopoverOpen(false);
+                    try {
+                      await deleteSuggestedEdit(edit);
+                      // Clean up pending operations to prevent race conditions
+                      cleanupPendingSuggestedEditOperations(
+                        edit,
+                        editContext?.user,
+                      );
+                      // Immediately update local state to reflect deletion
+                      if (
+                        editContext?.setSuggestedEdits &&
+                        editContext?.suggestedEdits
+                      ) {
+                        const updatedEdits = editContext.suggestedEdits.filter(
+                          (e) => e.id !== edit.id,
+                        );
+                        editContext.setSuggestedEdits(updatedEdits);
+                      }
+                    } catch (error) {
+                      console.error("Failed to delete suggested edit:", error);
+                    } finally {
+                      setDeletePopoverOpen(false);
+                    }
                   }}
                 >
                   Delete

package/src/editor/reviews/SuggestionDisplayPopover.tsx

@@ -15,6 +15,7 @@ import {
   deleteSuggestedEdit,
   createOrUpdateSuggestedEdit,
 } from "../services/suggestedEditsService";
+import { cleanupPendingSuggestedEditOperations } from "../client/operations";
 import {
   Check,
   Trash2,
@@ -108,9 +109,23 @@ export function SuggestionDisplayPopover({
       return;
     }
 
-    await deleteSuggestedEdit(suggestion);
-    setIsOpen(false);
-    onSuggestionUpdated?.();
+    try {
+      await deleteSuggestedEdit(suggestion);
+      // Clean up pending operations to prevent race conditions
+      cleanupPendingSuggestedEditOperations(suggestion, editContext?.user);
+      // Immediately update local state to reflect deletion
+      if (editContext?.setSuggestedEdits && editContext?.suggestedEdits) {
+        const updatedEdits = editContext.suggestedEdits.filter(
+          (e) => e.id !== suggestion.id,
+        );
+        editContext.setSuggestedEdits(updatedEdits);
+      }
+    } catch (error) {
+      console.error("Failed to delete suggested edit:", error);
+    } finally {
+      setIsOpen(false);
+      onSuggestionUpdated?.();
+    }
   };
 
   const handleApplyPatch = async () => {