fix: added self healing

Author: grantiguess

src/DebugOverlay.jsx

@@ -84,7 +84,7 @@ const DebugOverlay = ({ debugData, hideOverlay }) => {
   }, [resizing, resizeInitial, size]);
 
   return (
-    <div 
+    <div
       className="debug-overlay"
       style={{
         position: 'fixed',
@@ -102,7 +102,7 @@ const DebugOverlay = ({ debugData, hideOverlay }) => {
         borderRadius: '10px'
       }}
     >
-      <div 
+      <div
         className="drag-handle"
         style={{
           width: '60px',
@@ -114,10 +114,10 @@ const DebugOverlay = ({ debugData, hideOverlay }) => {
         }}
         onMouseDown={handleMouseDown}
       />
-      <div style={{ 
-        position: 'sticky', 
-        top: 0, 
-        backgroundColor: 'rgba(0, 0, 0, 0.9)', 
+      <div style={{
+        position: 'sticky',
+        top: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
         padding: '5px 10px',
         marginBottom: '10px',
         borderBottom: '1px solid rgba(255,255,255,0.2)',
@@ -126,12 +126,12 @@ const DebugOverlay = ({ debugData, hideOverlay }) => {
         alignItems: 'center'
       }}>
         <strong>Debug Mode</strong>
-        <button 
-          onClick={hideOverlay} 
-          style={{ 
-            background: 'none', 
-            border: 'none', 
-            color: '#EFE8E5', 
+        <button
+          onClick={hideOverlay}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: '#EFE8E5',
             cursor: 'pointer',
             padding: 0
           }}
@@ -141,22 +141,26 @@ const DebugOverlay = ({ debugData, hideOverlay }) => {
         </button>
       </div>
 
-      {debugData && typeof debugData === 'object' && Object.entries(debugData).map(([key, value]) => (
-        <div key={key} style={{ 
-          borderBottom: '1px solid rgba(255,255,255,0.1)',
-          padding: '5px 0',
-          marginBottom: '5px'
-        }}>
-          <strong style={{ color: '#66d9ef' }}>{key}:</strong>
-          <pre style={{ 
-            margin: '5px 0',
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-all'
+
+
+      {
+        debugData && typeof debugData === 'object' && Object.entries(debugData).map(([key, value]) => (
+          <div key={key} style={{
+            borderBottom: '1px solid rgba(255,255,255,0.1)',
+            padding: '5px 0',
+            marginBottom: '5px'
           }}>
-            {typeof value === 'object' ? JSON.stringify(value, null, 2) : value}
-          </pre>
-        </div>
-      ))}
+            <strong style={{ color: '#66d9ef' }}>{key}:</strong>
+            <pre style={{
+              margin: '5px 0',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all'
+            }}>
+              {typeof value === 'object' ? JSON.stringify(value, null, 2) : value}
+            </pre>
+          </div>
+        ))
+      }
       <div style={{ marginTop: '10px', borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '10px' }}>
         <strong>Full Debug Data:</strong>
         <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', margin: 0, fontFamily: "'EmOne', sans-serif", fontSize: '12px' }}>
@@ -176,7 +180,7 @@ const DebugOverlay = ({ debugData, hideOverlay }) => {
         }}
         onMouseDown={handleResizeMouseDown}
       />
-    </div>
+    </div >
   );
 };
 

src/Node.jsx

@@ -196,8 +196,20 @@ const Node = ({
   // Filter nodes and edges for the current graph definition
   const currentGraphNodes = useMemo(() => {
     if (!isPreviewing || !currentGraphId) return [];
-    return getHydratedNodesForGraph(currentGraphId)(storeState);
-  }, [isPreviewing, currentGraphId, storeState]);
+    const nodes = getHydratedNodesForGraph(currentGraphId)(storeState);
+    // Diagnostic logging
+    console.log('[Node Decompose Debug]', {
+      nodeName,
+      prototypeId,
+      definitionGraphIds,
+      currentGraphId,
+      graphData: storeState.graphs.get(currentGraphId),
+      instanceCount: storeState.graphs.get(currentGraphId)?.instances?.size || 0,
+      hydratedNodeCount: nodes.length,
+      nodes: nodes.map(n => ({ id: n.id, name: n.name, prototypeId: n.prototypeId }))
+    });
+    return nodes;
+  }, [isPreviewing, currentGraphId, storeState, nodeName, prototypeId, definitionGraphIds]);
 
   const currentGraphEdges = useMemo(() => {
     if (!isPreviewing || !currentGraphId) return [];
@@ -228,41 +240,7 @@ const Node = ({
     }
   }, [isPreviewing]);
 
-  // Self-healing effect: when previewing starts but no definitions found, search for orphan graphs
-  useEffect(() => {
-    if (!isPreviewing || !prototypeId || !storeActions) return;
-
-    // Check if we already have definitions (from prototype spread)
-    if (definitionGraphIds.length > 0) return;
-
-    // No definitions on the hydrated node - check if there are orphan graphs
-    const currentState = useGraphStore.getState();
-    const graphs = currentState.graphs;
-
-    let orphanGraphId = null;
-    try {
-      for (const [gId, g] of graphs.entries()) {
-        if (Array.isArray(g.definingNodeIds) && g.definingNodeIds.includes(prototypeId)) {
-          orphanGraphId = gId;
-          break;
-        }
-      }
-    } catch (_) { }
-
-    if (orphanGraphId) {
-      console.log('[Node] Self-healing: Found orphan definition graph. Repairing link.', {
-        prototypeId,
-        orphanGraphId
-      });
-      // Repair the link
-      storeActions.updateNodePrototype(prototypeId, draft => {
-        draft.definitionGraphIds = Array.isArray(draft.definitionGraphIds) ? draft.definitionGraphIds : [];
-        if (!draft.definitionGraphIds.includes(orphanGraphId)) {
-          draft.definitionGraphIds.push(orphanGraphId);
-        }
-      });
-    }
-  }, [isPreviewing, prototypeId, definitionGraphIds.length, storeActions]);
+  // (Self-healing removed - issue is not orphan graphs but empty definition graphs)
 
   // Navigation functions
   const navigateToPreviousDefinition = () => {

src/NodeCanvas.jsx

@@ -4716,9 +4716,8 @@ function NodeCanvas() {
 
   // Keep currentPieMenuData.buttons in sync with targetPieMenuButtons so UI reflects state changes (e.g., Save/Unsave) immediately
   useEffect(() => {
-    if (!currentPieMenuData) return;
     setCurrentPieMenuData(prev => prev ? { ...prev, buttons: targetPieMenuButtons } : prev);
-  }, [targetPieMenuButtons, currentPieMenuData]);
+  }, [targetPieMenuButtons]);
 
   // Effect to restore view state on graph change or center if no stored state
   useLayoutEffect(() => {
@@ -6631,6 +6630,9 @@ function NodeCanvas() {
 
     // Dragging Node or Group Logic (only after long-press has set draggingNodeInfo)
     if (draggingNodeInfo) {
+      if (!mouseMoved.current) {
+        mouseMoved.current = true;
+      }
       // Movement Zoom-Out: Trigger when drag actually starts moving (not on mousedown)
       // This ensures zoom-out happens after movement threshold, preventing reset during delay
       if (!zoomOutInitiatedRef.current && dragZoomSettings.enabled) {

src/Panel.jsx

@@ -359,6 +359,7 @@ const INITIAL_PANEL_WIDTH = 280; // Match NodeCanvas default
 
 // Feature flag: toggle visibility of the "All Things" tab in the left panel header
 const ENABLE_ALL_THINGS_TAB = true;
+const ENABLE_AI_AGENT = false;
 
 // Helper to read width from storage
 const getInitialWidth = (side, defaultValue) => {
@@ -1660,7 +1661,7 @@ const Panel = memo(forwardRef(
             onLoadWikidataCatalog={handleLoadWikidataCatalog}
           />
         );
-      } else if (leftViewActive === 'ai') {
+      } else if (ENABLE_AI_AGENT && leftViewActive === 'ai') {
         panelContent = (
           <LeftAIView
             compact={panelWidth < 300}
@@ -1912,13 +1913,15 @@ const Panel = memo(forwardRef(
                 </div>
 
                 {/* AI Wizard Button */}
-                <div
-                  title="AI Wizard"
-                  style={{ /* Common Button Styles */ width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: leftViewActive === 'ai' ? '#bdb5b5' : '#979090', zIndex: 2 }}
-                  onClick={() => setLeftViewActive('ai')}
-                >
-                  <Sparkles size={20} color="#260000" />
-                </div>
+                {ENABLE_AI_AGENT && (
+                  <div
+                    title="AI Wizard"
+                    style={{ /* Common Button Styles */ width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: leftViewActive === 'ai' ? '#bdb5b5' : '#979090', zIndex: 2 }}
+                    onClick={() => setLeftViewActive('ai')}
+                  >
+                    <Sparkles size={20} color="#260000" />
+                  </div>
+                )}
 
                 {/* History Button */}
                 <div

src/RedstringMenu.jsx

@@ -893,6 +893,19 @@ const RedstringMenu = ({
                           Reset Onboarding Flow
                         </div>
 
+                        <div
+                          className="submenu-item"
+                          onClick={() => {
+                            console.log('[Debug] Repair Graph Links clicked');
+                            closeAllMenus();
+                            useGraphStore.getState().repairGraphLinkages();
+                          }}
+                          style={{ cursor: 'pointer' }}
+                        >
+                          <RefreshCw size={14} style={{ marginRight: '8px' }} />
+                          Repair Broken Graph Links
+                        </div>
+
                         <div
                           className="submenu-item"
                           onMouseEnter={handleRegularSubmenuItemHover}

src/components/panel/SharedPanelContent.jsx

@@ -1663,6 +1663,13 @@ const SharedPanelContent = ({
                 </button>
               </div>
             )}
+
+            <div style={{ marginTop: '8px', fontSize: '9px', color: '#999', fontFamily: "'EmOne', sans-serif" }}>
+              {isHomeTab && graphData?.id && (
+                <div style={{ marginBottom: '2px' }}>Graph ID: {graphData.id}</div>
+              )}
+              ID: {nodeData.id}
+            </div>
           </div>
         ) : (
           // Default origin information for all nodes
@@ -1809,6 +1816,13 @@ const SharedPanelContent = ({
                 </>
               );
             })()}
+
+            <div style={{ marginTop: '8px', fontSize: '9px', color: '#999', fontFamily: "'EmOne', sans-serif" }}>
+              {isHomeTab && graphData?.id && (
+                <div style={{ marginBottom: '2px' }}>Graph ID: {graphData.id}</div>
+              )}
+              ID: {nodeData.id}
+            </div>
           </div>
         )}
       </CollapsibleSection>

src/store/graphStore.jsx

@@ -754,6 +754,12 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
           }
         });
 
+        // Validate: don't create empty definition graphs
+        if (memberInstances.length === 0) {
+          console.warn(`[convertGroupToNodeGroup] Group ${groupId} has no valid members. Aborting conversion to prevent empty definition.`);
+          return;
+        }
+
         memberInstances.forEach(({ instId, instance }) => {
           const newInstId = uuidv4();
           instanceIdMap.set(instId, newInstId);
@@ -1448,6 +1454,16 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
         // Delete the instance
         graph.instances.delete(instanceId);
 
+        // Clean up group membership - remove this instance from any groups it belongs to
+        if (graph.groups) {
+          for (const [groupId, group] of graph.groups.entries()) {
+            if (group.memberInstanceIds?.includes(instanceId)) {
+              group.memberInstanceIds = group.memberInstanceIds.filter(id => id !== instanceId);
+              console.log(`[removeNodeInstance] Removed instance ${instanceId} from group ${groupId}`);
+            }
+          }
+        }
+
         // Ensure any soft-deletion bookkeeping is cleared
         draft.pendingDeletions.delete(instanceId);
 
@@ -1495,6 +1511,19 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
           draft.pendingDeletions.delete(instanceId);
         });
 
+        // Clean up group membership for all deleted instances
+        if (graph.groups) {
+          for (const [groupId, group] of graph.groups.entries()) {
+            if (group.memberInstanceIds) {
+              const originalLength = group.memberInstanceIds.length;
+              group.memberInstanceIds = group.memberInstanceIds.filter(id => !instanceIdSet.has(id));
+              if (group.memberInstanceIds.length !== originalLength) {
+                console.log(`[removeMultipleNodeInstances] Cleaned up ${originalLength - group.memberInstanceIds.length} stale members from group ${groupId}`);
+              }
+            }
+          }
+        }
+
         console.log(`[removeMultipleNodeInstances] Deleted ${instanceIdSet.size} instances and ${edgesToDelete.length} edges`);
       }));
     },
@@ -2269,6 +2298,46 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
       console.log(`[Store createGraphWithId] Created and activated graph ${graphId} ('${name}')`);
     })),
 
+    // Repair tool to re-sync bidirectional links between graphs and their defining nodes
+    repairGraphLinkages: () => {
+      console.log('[Repair Tool] Starting bidirectional link repair...');
+      set(produce((draft) => {
+        let repairCount = 0;
+
+        // Iterate all graphs
+        for (const [graphId, graph] of draft.graphs.entries()) {
+          // Check if graph defines any nodes
+          const definingNodeIds = graph.definingNodeIds || [];
+
+          definingNodeIds.forEach(prototypeId => {
+            const prototype = draft.nodePrototypes.get(prototypeId);
+            if (!prototype) {
+              console.warn(`[Repair Tool] Graph "${graph.name}" (${graphId}) defines missing prototype ${prototypeId}`);
+              return;
+            }
+
+            // Ensure prototype links back to this graph
+            if (!Array.isArray(prototype.definitionGraphIds)) {
+              prototype.definitionGraphIds = [];
+            }
+
+            if (!prototype.definitionGraphIds.includes(graphId)) {
+              prototype.definitionGraphIds.push(graphId);
+              console.log(`[Repair Tool] 🛠️ FIXED: Linked Node "${prototype.name}" back to definition Graph "${graph.name}"`);
+              repairCount++;
+            }
+          });
+        }
+
+        if (repairCount > 0) {
+          console.log(`[Repair Tool] ✅ Completed with ${repairCount} repairs.`);
+          // Force a store update trigger if needed, though Immer should handle it
+        } else {
+          console.log('[Repair Tool] No broken links found.');
+        }
+      }));
+    },
+
     // Creates a new graph, assigns it as a definition to a prototype, and makes it active
     createAndAssignGraphDefinition: (prototypeId) => {
       let newGraphId = null;