@parhelia/core 0.1.11151 → 0.1.11180

package/dist/editor/client/EditorShell.js

@@ -8,7 +8,7 @@ import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
 import { getOperationsContext } from "./operations";
 import { handleErrorResult } from "./helpers";
-import { executeFieldAction as executeFieldServerAction, connectSocket, getEditHistory, getSessionHistory, getAllHistory, releaseFieldLocks, validateItems, } from "../services/editService";
+import { executeFieldAction as executeFieldServerAction, connectSocket, getEditHistory, releaseFieldLocks, validateItems, } from "../services/editService";
 import { useEditorWebSocket } from "./hooks/useEditorWebSocket";
 import { useSocketMessageHandler } from "./hooks/useSocketMessageHandler";
 import "react-json-view-lite/dist/index.css";
@@ -45,6 +45,7 @@ import { DevModeIndicator } from "./ui/DevModeIndicator";
 import { useWorkbox } from "./hooks/useWorkbox";
 import { useMediaSelector } from "./hooks/useMediaSelector";
 import { useGlobalEditorKeyDown } from "./hooks/useGlobalEditorKeyDown";
+import { useStartupChecks } from "../settings/status/index";
 export function EditorShell({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, parheliaSettings, setUserPreferences, children, }) {
     const router = useRouter();
     const pathname = usePathname();
@@ -76,6 +77,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [validationResult, setValidationResult] = useState();
     const [editHistory, setEditHistory] = useState([]);
     const [historyMode, setHistoryMode] = useState("global");
+    const [showOnlyMyChanges, setShowOnlyMyChanges] = useState(true);
     const [recentEdits, setRecentEdits] = useState([]);
     const addRecentEdit = useCallback((edit) => {
         setRecentEdits((prevEditedFields) => {
@@ -107,6 +109,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     searchParams.get("view") ??
         configuration.editor.views[0]?.name ??
         "splash-screen");
+    const viewNameRef = useRef(viewName);
+    useEffect(() => {
+        viewNameRef.current = viewName;
+    }, [viewName]);
     const [previousViewName, setPreviousViewName] = useState(undefined);
     const [compareMode, setCompareMode] = useState(false);
     const [compareTo, setCompareTo] = useState();
@@ -222,6 +228,25 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [isInitialLoad, setIsInitialLoad] = useState(true);
     // Wizard state - managed centrally instead of reading URL directly
     const [currentWizardId, setCurrentWizardId] = useState(null);
+    // Startup checks - run blocking checks on app startup
+    const startupChecks = useStartupChecks(configuration.statusChecks);
+    // Redirect to status panel if blocking issues are found
+    useEffect(() => {
+        if (startupChecks.state !== "complete")
+            return;
+        if (!startupChecks.hasBlockingIssues)
+            return;
+        // Don't redirect if already on the status panel
+        const currentView = searchParams.get("view");
+        const currentPanel = searchParams.get("ccpanel");
+        if (currentView === "settings" && currentPanel === "status")
+            return;
+        // Redirect to the status panel
+        const url = new URL(window.location.href);
+        url.searchParams.set("view", "settings");
+        url.searchParams.set("ccpanel", "status");
+        router.push(url.toString(), { scroll: false });
+    }, [startupChecks.state, startupChecks.hasBlockingIssues, searchParams, router]);
     // Handle initial mode setup from URL (only on initial load)
     useEffect(() => {
         if (!isInitialLoad)
@@ -481,7 +506,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 const urlParams = new URLSearchParams(window.location.search);
                 // Handle view changes
                 const urlView = urlParams.get("view");
-                if (urlView && urlView !== viewName) {
+                if (urlView && urlView !== viewNameRef.current) {
                     setViewName(urlView);
                 }
                 // Handle wizard ID changes
@@ -521,26 +546,18 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                             version,
                         }, {
                             addToBrowseHistory: false, // Don't add to history since this is navigation
+                            skipViewChange: true, // View is already set by popstate handler above
                         });
                     }
                 }
             }
         };
-        // Also track any other URL changes with a MutationObserver fallback
-        const checkUrlChange = () => {
-            const currentUrl = window.location.href;
-            if (currentUrl !== lastUrl) {
-                lastUrl = currentUrl;
-            }
-        };
-        const urlCheckInterval = setInterval(checkUrlChange, 100);
         window.addEventListener("message", handleMessage);
         window.addEventListener("popstate", handlePopState);
         return () => {
             window.removeEventListener("message", handleMessage);
             window.removeEventListener("popstate", handlePopState);
             clearInterval(interval);
-            clearInterval(urlCheckInterval);
         };
     }, []);
     const isMobile = useMediaQuery("(max-width: 768px)");
@@ -701,67 +718,120 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const loadHistory = useDebouncedCallback(async () => {
         if (!sessionId)
             return;
-        const result = await getSessionHistory(sessionId);
+        const result = await getEditHistory({ sessionId });
         if (handleErrorResult(result, ui, state))
             return;
-        setEditHistory(result.data || []);
+        setEditHistory((prev) => {
+            const next = result.data || [];
+            if (!prev.length)
+                return next;
+            if (!next.length)
+                return next;
+            const prevById = new Map(prev.map((x) => [x.id, x]));
+            return next.map((op) => {
+                const prior = prevById.get(op.id);
+                if (!prior)
+                    return op;
+                // Preserve client/websocket-populated fields if the server response omits them.
+                return {
+                    ...op,
+                    description: op.description ?? prior.description,
+                    focus: op.focus ?? prior.focus,
+                    user: op.user ?? prior.user,
+                };
+            });
+        });
     }, 200);
-    const refreshHistory = useCallback(async (mode, filterBySession = true) => {
+    const refreshHistory = useCallback(async (mode, filterBySession) => {
         const currentMode = mode || historyMode;
+        // Use showOnlyMyChanges state if filterBySession not explicitly provided
+        const shouldFilterBySession = filterBySession !== undefined ? filterBySession : showOnlyMyChanges;
         if (currentMode === "global") {
-            if (!filterBySession) {
-                // Show all operations globally (across all sessions) with limit of 500
-                console.log("[EditorShell] Loading all operations globally (all sessions)");
-                const result = await getAllHistory(500);
-                if (handleErrorResult(result, ui, state)) {
-                    console.error("[EditorShell] Failed to load all history:", result);
-                    return;
-                }
-                console.log("[EditorShell] Loaded", result.data?.length || 0, "operations (all sessions)");
-                setEditHistory(result.data || []);
-                return;
-            }
-            // Filter by session
-            if (!sessionId) {
-                console.warn("[EditorShell] Cannot load history: sessionId is not available");
-                return;
-            }
-            console.log("[EditorShell] Loading session history for sessionId:", sessionId);
-            const result = await getSessionHistory(sessionId);
+            // Global mode: optionally filter by session
+            const result = await getEditHistory({
+                sessionId: shouldFilterBySession ? sessionId : undefined,
+                limit: shouldFilterBySession ? 100 : 500,
+            });
             if (handleErrorResult(result, ui, state)) {
-                console.error("[EditorShell] Failed to load session history:", result);
+                console.error("[EditorShell] Failed to load history:", result);
                 return;
             }
-            console.log("[EditorShell] Loaded", result.data?.length || 0, "operations");
-            setEditHistory(result.data || []);
+            setEditHistory((prev) => {
+                const next = result.data || [];
+                if (!prev.length)
+                    return next;
+                if (!next.length)
+                    return next;
+                const prevById = new Map(prev.map((x) => [x.id, x]));
+                return next.map((op) => {
+                    const prior = prevById.get(op.id);
+                    if (!prior)
+                        return op;
+                    // Preserve client/websocket-populated fields if the server response omits them.
+                    return {
+                        ...op,
+                        description: op.description ?? prior.description,
+                        focus: op.focus ?? prior.focus,
+                        user: op.user ?? prior.user,
+                    };
+                });
+            });
         }
         else {
             // Page-centric or current-version mode - need current item
             const currentItem = contentEditorItem?.descriptor;
             if (!currentItem) {
-                console.warn("[EditorShell] Cannot load page-centric history: no item loaded");
+                console.warn("[EditorShell] Cannot load page-centric/current-version history: no item loaded");
                 setEditHistory([]);
                 return;
             }
-            console.log("[EditorShell] Loading item history for:", currentItem.id, "mode:", currentMode, "filterBySession:", filterBySession);
-            const result = await getEditHistory(currentItem);
+            // For page-centric: fetch all versions (itemId + language only)
+            // For current-version: fetch specific version (itemId + language + version)
+            const itemFilter = currentMode === "page-centric"
+                ? { id: currentItem.id, language: currentItem.language, version: 0 } // version 0 signals "all versions" to backend
+                : currentItem;
+            // Request item-scoped history, optionally filtered by session
+            const result = await getEditHistory({
+                item: itemFilter,
+                sessionId: shouldFilterBySession ? sessionId : undefined,
+            });
             if (handleErrorResult(result, ui, state)) {
                 console.error("[EditorShell] Failed to load item history:", result);
                 return;
             }
             let operations = result.data || [];
-            // Filter by session if requested
-            if (filterBySession) {
-                operations = operations.filter((op) => op.sessionId === sessionId);
-            }
-            // Filter by version if current-version mode
+            // Client-side version filtering for current-version mode
             if (currentMode === "current-version") {
-                operations = operations.filter((op) => op.mainItem?.version === currentItem.version);
+                // Defensive filter: only include operations for the current version
+                operations = operations.filter((op) => {
+                    // If mainItem is missing, exclude the operation
+                    if (!op.mainItem) {
+                        return false;
+                    }
+                    return op.mainItem.version === currentItem.version;
+                });
             }
-            console.log("[EditorShell] Loaded", operations.length, "operations");
-            setEditHistory(operations);
+            setEditHistory((prev) => {
+                if (!prev.length)
+                    return operations;
+                if (!operations.length)
+                    return operations;
+                const prevById = new Map(prev.map((x) => [x.id, x]));
+                return operations.map((op) => {
+                    const prior = prevById.get(op.id);
+                    if (!prior)
+                        return op;
+                    // Preserve client/websocket-populated fields if the server response omits them.
+                    return {
+                        ...op,
+                        description: op.description ?? prior.description,
+                        focus: op.focus ?? prior.focus,
+                        user: op.user ?? prior.user,
+                    };
+                });
+            });
         }
-    }, [sessionId, historyMode, contentEditorItem]);
+    }, [sessionId, historyMode, showOnlyMyChanges, contentEditorItem]);
     // defined below after loadItem/loadItemVersions/requestRefresh
     const requestRefresh = useCallback((mode) => {
         const refreshTimer = globalThis.editorRefreshTimer;
@@ -789,7 +859,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         loadComments();
         loadSuggestedEdits();
     }, [currentItemDescriptor]);
-    // Load history on initialization or when mode/item changes
+    // Load history on initialization or when mode/item/filter changes
     useEffect(() => {
         if (historyMode === "global" && sessionId) {
             // Use refreshHistory for immediate load on initialization
@@ -805,6 +875,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [
         sessionId,
         historyMode,
+        showOnlyMyChanges,
         currentItemDescriptor?.id,
         currentItemDescriptor?.language,
         currentItemDescriptor?.version,
@@ -1039,8 +1110,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         }
         if (!options?.skipViewChange &&
             ((!item.hasLayout && viewName === "page-editor") ||
-                viewName == "splash-screen" ||
-                viewName == "control-center")) {
+                viewName == "splash-screen")) {
             setViewName("content-tree");
         }
         // ensure this is object has no additional properties
@@ -1049,8 +1119,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setCurrentItemDescriptor(itemToLoad);
         setContentEditorItem(item);
         setSelection([]);
-        // Load history (session-based) and add to browse history
-        loadHistory();
+        // History will be refreshed automatically by the useEffect watching currentItemDescriptor
+        // Don't call loadHistory() here as it would override mode-aware history loading
         if (options?.addToBrowseHistory ||
             options?.addToBrowseHistory === undefined) {
             addToBrowseHistory(item);
@@ -1064,7 +1134,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         itemsRepository,
         setContentEditorItem,
         viewName,
-        loadHistory,
         addToBrowseHistory,
         addNavigationEntry,
     ]);
@@ -1103,6 +1172,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         itemsRepository,
         user,
         editHistory,
+        showOnlyMyChanges,
         refreshHistory,
         suggestedEdits,
         setSuggestedEdits,
@@ -1161,9 +1231,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             contentEditorItem?.version === op.mainItem?.version) {
             setInsertMode(false);
         }
-        // Refresh history from server to ensure consistency
-        refreshHistory();
-    }, [contentEditorItem, setEditHistory, setInsertMode, refreshHistory]);
+        // Note: We intentionally do NOT call refreshHistory() here.
+        // The websocket 'edit-operation' handler updates the operation directly in history.
+        // Calling refreshHistory here causes a race condition where stale server data
+        // arrives before the server has processed the redo, causing UI flicker.
+    }, [contentEditorItem, setEditHistory, setInsertMode]);
     const ui = {
         showErrorToast,
         confirmationDialogRef,
@@ -1175,6 +1247,52 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         currentItemDescriptor,
         validate,
     });
+    // Function to update a single operation in history directly (used by websocket handler)
+    // Only updates operations that match the current history mode/filter scope
+    const updateOperationInHistory = useCallback((op) => {
+        // Check if operation matches current history scope
+        const matchesScope = () => {
+            // Session filter
+            if (showOnlyMyChanges && op.sessionId !== sessionId) {
+                return false;
+            }
+            // Mode-specific filtering
+            if (historyMode === "global") {
+                // Global mode: accept all operations (session filter already applied above)
+                return true;
+            }
+            else if (historyMode === "page-centric") {
+                // Page-centric: must match current item id + language (any version)
+                if (!contentEditorItem || !op.mainItem)
+                    return false;
+                return (op.mainItem.id === contentEditorItem.id &&
+                    op.mainItem.language === contentEditorItem.language);
+            }
+            else if (historyMode === "current-version") {
+                // Current-version: must match current item id + language + version
+                if (!contentEditorItem || !op.mainItem)
+                    return false;
+                return (op.mainItem.id === contentEditorItem.id &&
+                    op.mainItem.language === contentEditorItem.language &&
+                    op.mainItem.version === contentEditorItem.version);
+            }
+            return false;
+        };
+        if (!matchesScope()) {
+            // Operation doesn't match current scope, don't update history
+            return;
+        }
+        setEditHistory((prev) => {
+            const existingOpIndex = prev.findIndex((x) => x.id === op.id);
+            if (existingOpIndex >= 0) {
+                const next = [...prev];
+                next[existingOpIndex] = op;
+                return next;
+            }
+            // If operation doesn't exist and matches scope, add it
+            return [op, ...prev];
+        });
+    }, [historyMode, showOnlyMyChanges, sessionId, contentEditorItem]);
     // WebSocket message handler and connection
     const messageHandler = useSocketMessageHandler({
         sessionId,
@@ -1191,16 +1309,15 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setQuotaInfo,
         requestRefresh,
         currentItemRef,
-        loadHistory,
         addRecentEdit,
         socketMessageListeners,
         isItemUsedInCurrentPage,
+        updateOperationInHistory,
     });
     const { socketRef: socketInstanceRef } = useEditorWebSocket({
         sessionId,
         onMessage: messageHandler,
         onOpen: () => {
-            console.log("Connected!");
             // Increment socket connection version to trigger re-subscriptions
             setSocketConnectionVersion((v) => v + 1);
         },
@@ -1317,21 +1434,16 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [operations, ignoreBlur, sessionId]);
     // Quick switcher handlers
     const showQuickSwitcher = useCallback((show) => {
-        console.log(`[QuickSwitcher] showQuickSwitcher called: show=${show}, historyLength=${navigationHistory.length}`);
         if (show && navigationHistory.length > 1) {
             setQuickSwitcherVisible(true);
             // Start with index 1 (second entry - previous entry) for quick switching
             setQuickSwitcherSelectedIndex(1);
-            console.log("[QuickSwitcher] Switcher opened, selected index: 1");
-            console.log("[QuickSwitcher] Navigation history:", navigationHistory.map((h, i) => `[${i}] ${h.displayName}`));
         }
         else {
             setQuickSwitcherVisible(false);
-            console.log("[QuickSwitcher] Switcher closed");
         }
     }, [navigationHistory]);
     const cycleQuickSwitcher = useCallback((direction) => {
-        console.log(`[QuickSwitcher] cycleQuickSwitcher: direction=${direction}, visible=${quickSwitcherVisible}`);
         if (!quickSwitcherVisible)
             return;
         const maxItems = Math.min(5, navigationHistory.length);
@@ -1377,15 +1489,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     }
                     break;
             }
-            console.log(`[QuickSwitcher] Cycling from index ${current} to ${newIndex} (${columns} columns)`);
             return newIndex;
         });
     }, [quickSwitcherVisible, browseHistory]);
     const handleQuickSwitcherSelect = useCallback((index) => {
-        console.log(`[QuickSwitcher] Selecting entry at index ${index}`);
         const selectedEntry = navigationHistory[index];
         if (selectedEntry) {
-            console.log(`[QuickSwitcher] Navigating to:`, selectedEntry);
             // First switch view
             if (selectedEntry.viewName !== viewName) {
                 // Avoid inserting a duplicate navigation entry; we'll explicitly move the
@@ -1402,7 +1511,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     contentEditorItem.language !== selectedEntry.item.language ||
                     contentEditorItem.version !== selectedEntry.item.version;
                 if (isDifferentItem) {
-                    console.log(`[QuickSwitcher] Loading different item:`, selectedEntry.item);
                     loadItem({
                         id: selectedEntry.item.id,
                         language: selectedEntry.item.language,
@@ -1414,9 +1522,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         skipNavigationHistory: true,
                     });
                 }
-                else {
-                    console.log(`[QuickSwitcher] Same item, skipping reload`);
-                }
             }
             // Move selected entry to first position in navigation history by identity
             setNavigationHistory((history) => {
@@ -1801,7 +1906,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 operations.addComponent(dragObject.typeId, placeholderKey, index, currentItemDescriptorRef.current);
                 return;
             }
-            console.log("dragObject", dragObject);
             if (dragObject.type == "component" ||
                 (dragObject.type == "items" && dragObject.items)) {
                 const parentComponent = parentId && page ? getComponentById(parentId, page) : null;
@@ -1822,7 +1926,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         linkedComponentItem: dragObject.items[0],
                         title: "Link component",
                     };
-                    console.log("op", op);
                 }
                 else {
                     const componentIds = dragObject.components?.map((c) => c.id) ?? [];
@@ -1867,7 +1970,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     //dialogContext,
                 });
             }
-            console.log("Field action before setActiveFieldActions");
             if (actionButton.action) {
                 setActiveFieldActions((prevFieldActions) => {
                     const isSameField = (x) => x.field.fieldId == fieldDescriptor.fieldId &&
@@ -1887,10 +1989,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         : op;
                     return [...prevFieldActions.filter((x) => !isSameField(x)), mergedOp];
                 });
-                console.log("Field action after setActiveFieldActions");
                 try {
                     await executeFieldServerAction(fieldDescriptor.item, fieldDescriptor.fieldId, contentEditorItem.descriptor, actionButton.action, editContext.sessionId, selectedRange?.text || "", parameters || {}, (data) => {
-                        console.log("Field action progress", data);
                         // Update progress message if available
                         if (data?.responseText) {
                             op.message = data.responseText;
@@ -1899,7 +1999,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                             ]);
                         }
                     });
-                    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") {
@@ -1965,11 +2064,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         editHistory,
         historyMode,
         setHistoryMode,
+        showOnlyMyChanges,
+        setShowOnlyMyChanges,
         refreshHistory,
         isRefreshing,
         activeSessions,
         unlockField: async () => {
-            console.log("[EditContext.unlockField] Clearing lockedField state");
             setLockedField(undefined); // Clear client-side lock state
             await releaseFieldLocks(sessionId);
         },
@@ -2165,7 +2265,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         focusedField,
         setFocusedField: setFocusedFieldWithLock,
         unlockField: async () => {
-            console.log("[FieldsEditContext.unlockField] Clearing lockedField state");
             setLockedField(undefined); // Clear client-side lock state
             await releaseFieldLocks(sessionId);
         },