fix: working on duplicate node field history line item bug

Author: grantiguess

src/NodeCanvas.jsx

@@ -132,6 +132,7 @@ function NodeCanvas() {
   const wrapperRef = useRef(null);
   const [orbitData, setOrbitData] = useState({ inner: [], outer: [], all: [] });
   const wasDraggingRef = useRef(false); // Track if a drag just occurred to prevent click events
+  const dragHistoryRecordedRef = useRef(false); // Guard against double recording of drag events
 
   // Helper to measure text width accurately for the group labels
   // We use a cached canvas context to avoid creating it repeatedly
@@ -5060,10 +5061,11 @@ function NodeCanvas() {
         primaryId: instanceId
       });
 
+      dragHistoryRecordedRef.current = false; // Reset history guard
       triggerDragZoomOut(clientX, clientY);
 
       selectedInstanceIds.forEach(id => {
-        storeActions.updateNodeInstance(activeGraphId, id, draft => { draft.scale = 1.15; }, { isDragging: true, phase: 'start' });
+        storeActions.updateNodeInstance(activeGraphId, id, draft => { draft.scale = 1.15; }, { isDragging: true, phase: 'start', ignore: true });
       });
       return true;
     }
@@ -5075,11 +5077,9 @@ function NodeCanvas() {
     const offset = { x: mouseCanvasX - nodeData.x, y: mouseCanvasY - nodeData.y };
     setDraggingNodeInfo({ instanceId, offset, initialPos: { x: nodeData.x, y: nodeData.y } });
 
-
-
+    dragHistoryRecordedRef.current = false; // Reset history guard
     triggerDragZoomOut(clientX, clientY);
-
-    storeActions.updateNodeInstance(activeGraphId, instanceId, draft => { draft.scale = 1.15; }, { isDragging: true, phase: 'start' });
+    storeActions.updateNodeInstance(activeGraphId, instanceId, draft => { draft.scale = 1.15; }, { isDragging: true, phase: 'start', ignore: true });
     return true;
   }, [
     activeGraphId,
@@ -6738,7 +6738,7 @@ function NodeCanvas() {
     }
 
     // Reset scale for dragged nodes
-    if (draggingNodeInfo) {
+    if (draggingNodeInfo && !dragHistoryRecordedRef.current) {
       // --- Manual History Recording for Drag ---
       const patches = [];
       const inversePatches = [];
@@ -6780,7 +6780,13 @@ function NodeCanvas() {
           patches,
           inversePatches
         });
+        dragHistoryRecordedRef.current = true; // Mark as recorded for this drag session
       }
+    }
+
+    // Common finalization logic (always run even if history recorded)
+    if (draggingNodeInfo) {
+      // -----------------------------------------
       // -----------------------------------------
 
       const instanceIdsToReset = new Set();

src/components/panel/views/LeftHistoryView.css

@@ -6,6 +6,7 @@
     background-color: #bdb5b5;
     color: #260000;
     overflow: hidden;
+    font-family: 'EmOne', sans-serif;
 }
 
 /* Header - matches other panels */
@@ -23,12 +24,14 @@
     font-weight: 600;
     color: #260000;
     letter-spacing: -0.01em;
+    font-family: 'EmOne', sans-serif;
 }
 
 .history-stats {
     font-size: 11px;
     opacity: 0.5;
     font-weight: 500;
+    font-family: 'EmOne', sans-serif;
 }
 
 /* Filter Tabs */
@@ -98,14 +101,39 @@
 
 .history-item {
     display: flex;
-    padding: 8px 16px;
-    transition: background-color 0.1s ease;
-    align-items: flex-start;
-    gap: 10px;
+    align-items: center;
+    padding: 7px 12px;
+    gap: 12px;
+    /* Use transparent border to reserve space for the active state/head */
+    border: 3px solid transparent;
+    border-bottom: 3px solid transparent;
+    /* Override bottom separataor? */
+    border-radius: 8px;
+    /* Always rounded */
+
+    margin: 3px 12px;
+    /* Increased margin for better clearance */
+    /* Consistent margin inside container, added vertical spacing */
+    box-sizing: border-box;
+    /* Ensure padding/border don't overflow width */
+    width: auto;
+    /* Let it fill available space minus margins */
+
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+    cursor: pointer;
+    /* Interactive */
+    position: relative;
+    user-select: none;
 }
 
+/* We need a separator line, but border-radius messes with border-bottom full width. 
+   So we might need a pseudo-element for the separator line if we want it?
+   Or just accept the spaced styling. 
+   Let's remove the old border-bottom separator and just rely on spacing or hover. 
+*/
+
 .history-item:hover {
-    background-color: rgba(38, 0, 0, 0.03);
+    background-color: rgba(255, 255, 255, 0.4);
 }
 
 /* Subtly distinguish global actions */
@@ -118,20 +146,21 @@
 }
 
 .history-item.undone {
-    opacity: 0.5;
-    background-color: rgba(0, 0, 0, 0.02);
+    opacity: 0.4;
+    background-color: transparent;
 }
 
 .history-item.head {
-    background-color: rgba(255, 255, 255, 0.7);
-    border-left: 3px solid #8B0000;
-    padding-left: 13px;
-    /* Adjust for border width */
+    background-color: transparent;
+    border-color: #8B0000;
+    /* Padding/margin already handled by base class */
 }
 
 /* Head indicator dot on the right? Or border left? Doing border left above. 
    Also can add the dot. */
 .history-head-indicator {
+    display: none;
+    /* Hide dot since we have the box outline */
     position: absolute;
     right: 12px;
     top: 50%;
@@ -171,10 +200,11 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-family: 'EmOne', sans-serif;
 }
 
 .history-item.undone .history-item-description {
-    text-decoration: line-through;
+    text-decoration: none;
     opacity: 0.7;
 }
 

src/store/graphStore.jsx

@@ -189,6 +189,11 @@ const saveCoordinatorMiddleware = (config) => {
   return (set, get, api) => {
     // Enhance the set function to track change context and capture patches
     const enhancedSet = (...args) => {
+      // DEBUG: Trace why actions are duplicated
+      if (changeContext.type !== 'node_update') { // Filter out noise if needed, or just log all
+        console.log(`[GraphStore] Action: ${changeContext.type}`, new Error().stack.split('\n')[2]);
+      }
+
       // 1. Capture patches via the global listener (hooked into our custom produce wrapper)
       let currentPatches = null;
       let currentInverse = null;

src/store/historyStore.js

@@ -19,6 +19,29 @@ const useHistoryStore = create((set, get) => ({
             ? state.history
             : state.history.slice(0, state.history.length + state.currentIndex + 1);
 
+        // Deduplication Logic:
+        // Check if the new entry is identical to the last one (double-fire protection)
+        const lastAction = newHistory[newHistory.length - 1];
+        console.log('[History] pushAction called:', entry.actionType, entry.description);
+        if (lastAction) {
+            const isSameType = lastAction.actionType === entry.actionType;
+            const isSameDesc = lastAction.description === entry.description;
+            const isRecent = (Date.now() - lastAction.timestamp) < 500; // Within 500ms
+            const timeDiff = Date.now() - lastAction.timestamp;
+
+            console.log('[History] Dedup check:', { isSameType, isSameDesc, isRecent, timeDiff });
+
+            if (isSameType && isSameDesc && isRecent) {
+                // deep check patches
+                const isSamePatches = JSON.stringify(lastAction.patches) === JSON.stringify(entry.patches);
+                console.log('[History] Patches comparison:', { isSamePatches, lastPatchCount: lastAction.patches?.length, newPatchCount: entry.patches?.length });
+                if (isSamePatches) {
+                    console.warn('[History] Duplicate action ignored:', entry.description);
+                    return state; // No change
+                }
+            }
+        }
+
         // Flatten domain if it's an object (just in case)
         const domain = typeof entry.domain === 'object' ? 'global' : entry.domain;