Add Persistence, Clear All, and Structured Positioning

src/App.jsx

@@ -1,5 +1,5 @@
 // 📦 Imports
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import ReactFlow, {
   Background,
   Controls,
@@ -15,7 +15,7 @@ import { saveAs } from 'file-saver';
 // 🧠 Initial State & Helpers
 const initialNodes = [];
 const initialEdges = [];
-let nodeId = 1;
+// let nodeId = 1; // Moved into App component as useRef
 
 const getColor = (type) => {
   switch (type) {
@@ -27,9 +27,9 @@ const getColor = (type) => {
 };
 
 // 🤖 AI Logic with Domino Effect Thinking (Updated: Using Puter AI API)
-const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef) => {
+const createAIChildren = async (text, parentId, parentPosition, setNodes, setEdges, stopGenerationRef, nodeIdRef, depth = 1) => {
   try {
-    if (stopGenerationRef.current) return;
+    if (stopGenerationRef.current || depth < 0) return;
     const res = await axios.post(
       'https://api.puter.com/v1/chat/completions',
       {
@@ -64,13 +64,18 @@ Return only 3 outputs: one of each type.`
     const childTypes = ['positive', 'neutral', 'negative'];
 
     const newNodes = lines.map((line, idx) => {
-      const newId = `${nodeId++}`;
+      const newId = `${nodeIdRef.current++}`;
+      const offsets = [
+        { x: 350, y: -150 }, // positive
+        { x: 350, y: 0 },    // neutral
+        { x: 350, y: 150 }   // negative
+      ];
       return {
         id: newId,
         data: { label: line.replace(/^\d+\.\s*/, '') },
         position: {
-          x: 300 + Math.random() * 300,
-          y: 200 + Math.random() * 300
+          x: parentPosition.x + offsets[idx].x,
+          y: parentPosition.y + offsets[idx].y
         },
         style: {
           background: getColor(childTypes[idx]),
@@ -96,7 +101,7 @@ Return only 3 outputs: one of each type.`
     // Recursively expand each child one level deep
     for (const n of newNodes) {
       if (stopGenerationRef.current) break;
-      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef);
+      await createAIChildren(n.data.label, n.id, n.position, setNodes, setEdges, stopGenerationRef, nodeIdRef, depth - 1);
     }
 
   } catch (err) {
@@ -109,13 +114,40 @@ Return only 3 outputs: one of each type.`
 
 // 🔧 App Component
 export default function App() {
-  const [nodes, setNodes] = useState(initialNodes);
-  const [edges, setEdges] = useState(initialEdges);
+  const [nodes, setNodes] = useState(() => {
+    const saved = localStorage.getItem('nodeverse-nodes');
+    return saved ? JSON.parse(saved) : initialNodes;
+  });
+  const [edges, setEdges] = useState(() => {
+    const saved = localStorage.getItem('nodeverse-edges');
+    return saved ? JSON.parse(saved) : initialEdges;
+  });
   const [prompt, setPrompt] = useState('');
   const [loading, setLoading] = useState(false);
   const stopGenerationRef = useRef(false);
+
+  const nodeIdRef = useRef(
+    nodes.length > 0
+      ? Math.max(...nodes.map(n => parseInt(n.id) || 0)) + 1
+      : 1
+  );
+
+  useEffect(() => {
+    localStorage.setItem('nodeverse-nodes', JSON.stringify(nodes));
+    localStorage.setItem('nodeverse-edges', JSON.stringify(edges));
+  }, [nodes, edges]);
+
   const reactFlowWrapper = useRef(null);
 
+  const handleClear = () => {
+    if (nodes.length === 0) return;
+    if (window.confirm('Are you sure you want to clear the entire mind map?')) {
+      setNodes([]);
+      setEdges([]);
+      nodeIdRef.current = 1;
+    }
+  };
+
   const handleExport = () => {
     if (reactFlowWrapper.current) {
       html2canvas(reactFlowWrapper.current).then((canvas) => {
@@ -131,7 +163,7 @@ export default function App() {
     setLoading(true);
     stopGenerationRef.current = false;
 
-    const rootId = `${nodeId++}`;
+    const rootId = `${nodeIdRef.current++}`;
     const rootNode = {
       id: rootId,
       data: { label: prompt },
@@ -150,7 +182,7 @@ export default function App() {
     setNodes([rootNode]);
     setEdges([]);
 
-    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(prompt, rootId, rootNode.position, setNodes, setEdges, stopGenerationRef, nodeIdRef);
 
     setPrompt('');
     setLoading(false);
@@ -162,9 +194,10 @@ export default function App() {
   };
 
   const onNodeClick = async (_event, node) => {
+    if (loading) return;
     stopGenerationRef.current = false;
     setLoading(true);
-    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(node.data.label, node.id, node.position, setNodes, setEdges, stopGenerationRef, nodeIdRef);
     setLoading(false);
   };
 
@@ -230,6 +263,22 @@ export default function App() {
           >
             ⏹ Stop
           </button>
+          <button
+            onClick={handleClear}
+            disabled={loading || nodes.length === 0}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#f44336',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: loading || nodes.length === 0 ? 'not-allowed' : 'pointer',
+              opacity: loading || nodes.length === 0 ? 0.7 : 1,
+            }}
+          >
+            Clear All
+          </button>
           <button
             onClick={handleExport}
             disabled={loading || nodes.length === 0}