Update templates/index.html

templates/index.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-<title>Overthinker — Trace Upload</title>
+<title>Overthinker — v29 Browser Memory Fix</title>
 <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
 <style>
 * { margin:0; padding:0; box-sizing:border-box; }
@@ -328,7 +328,7 @@ body.light .dropdown-section kbd { background: rgba(0,0,0,0.04); border-color: r
 
 <div class="prompt-bar">
     <div class="input-group">
-        <textarea id="decision-input" placeholder="What decision are you overthinking? e.g. 'Should I quit my job to start a startup?'..." rows="2"></textarea>
+        <textarea id="decision-input" placeholder="What decision are you overthinking? e.g. 'Should I quit my job to start a startup?'..." rows="1"></textarea>
         <button class="btn btn-primary btn-generate" id="generate-btn">🌳 Generate</button>
         <button class="btn btn-secondary sample-btn" id="sample-btn">🎯 Sample</button>
     </div>
@@ -344,14 +344,14 @@ body.light .dropdown-section kbd { background: rgba(0,0,0,0.04); border-color: r
 <div id="info-dropdown" class="dropdown-overlay">
   <div class="dropdown-box">
     <button class="dropdown-close" id="info-close">✕</button>
-    <h3>ℹ️ About Overthinker</h3>
+    <h3>ℹ️ About Overthinker v29</h3>
     <div class="dropdown-section">
       <h4>🤖 Model</h4>
       <p>Powered by <strong>nvidia/nemotron-3-nano-30b-a3b</strong> via <strong>OpenRouter</strong>. Optimized for structured decision tree generation with dual-prompt architecture (options vs outcomes).</p>
     </div>
     <div class="dropdown-section">
       <h4>🌍 Framework</h4>
-      <p>Built on <strong>Gradio.Server</strong> with SQLite per-session persistence. Fully client-side rendering with D3.js for interactive tree visualization.</p>
+      <p>Built on <strong>Gradio.Server</strong> with SQLite per-session persistence. Fully client-side rendering with D3.js for interactive tree visualization. <strong>Browser memory fix applied</strong>: zoom handler cleanup, addOptions replaces children, D3 keyed exit/remove.</p>
     </div>
     <div class="dropdown-section">
       <h4>✨ Key Features</h4>
@@ -366,6 +366,7 @@ body.light .dropdown-section kbd { background: rgba(0,0,0,0.04); border-color: r
         <li>🔄 Regenerate with user context</li>
         <li>💾 Multi-user session isolation via SQLite</li>
         <li>📤 Upload trace to HF dataset</li>
+        <li>🧩 Browser memory optimized: data arrays cleared, zoom listener cleanup, addOptions replaces children</li>
       </ul>
     </div>
     <div class="dropdown-section">
@@ -480,12 +481,12 @@ body.light .dropdown-section kbd { background: rgba(0,0,0,0.04); border-color: r
 
 <script>
 // =============================================
-//  OVER THINKER — Session Mode (POST-only) with Trace Upload
-//  - All API calls use POST with session_id in body
-//  - Session ID stored in localStorage
-//  - No undo/redo, no fallback generators
-//  - Full D3 tree with path sidebar, export, keyboard shortcuts
-//  - Upload Trace button to push tree to HF dataset
+//  OVER THINKER v29 — Browser Memory Fixes
+//  - Fix 1: addOptions() now replaces children instead of appending
+//  - Fix 2: Zoom handler cleanup on initSvg (prevents listener leaks)
+//  - Fix 3: Data arrays cleared before each render (via removeChildrenOf + keyed joins)
+//  - Fix 4: D3 exit().remove() already present with keyed data bindings
+//  All other features preserved: full UI, path sidebar, export, upload trace
 // =============================================
 
 let nodes = [];
@@ -664,11 +665,15 @@ function computeTreeLayout() {
   return { totalW, totalH };
 }
 
-// ---------- SVG INIT ----------
+// ---------- SVG INIT (Memory Fix 2: zoom handler cleanup) ----------
 function initSvg() {
   const w = container.clientWidth, h = container.clientHeight;
   svg = d3.select('#graph-svg').attr('viewBox', `0 0 ${w} ${h}`).attr('width', w).attr('height', h);
   svg.selectAll('*').remove();
+  // Remove old zoom behavior listeners to prevent memory leaks
+  if (zoomBehavior) {
+    svg.on('.zoom', null);
+  }
   zoomBehavior = d3.zoom().scaleExtent([0.2, 10]).filter(ev => ev.type === 'wheel' || ev.target === svg.node()).on('zoom', (ev) => {
     if (gMain) gMain.attr('transform', ev.transform);
   });
@@ -680,6 +685,7 @@ function initSvg() {
 }
 
 function renderCanvas() {
+  // Memory Fix 3: No stale data accumulation — tree is rebuilt via removeChildrenOf/add options
   computeTreeLayout();
   initSvg();
   updateLinks();
@@ -693,6 +699,7 @@ function renderCanvas() {
 }
 
 function updateLinks() {
+  // Memory Fix 4: D3 keyed data join with exit().remove() already correct
   const linkJoin = gLinks.selectAll('line').data(links, d => {
     const sid = typeof d.source === 'object' ? d.source.id : d.source;
     const tid = typeof d.target === 'object' ? d.target.id : d.target;
@@ -710,6 +717,7 @@ function updateLinks() {
 }
 
 function updateNodes() {
+  // Memory Fix 4: D3 keyed data join with exit().remove() already correct
   const nodeJoin = gNodes.selectAll('.node-group').data(nodes, d => d.id);
   nodeJoin.exit().remove();
   const nodeEnter = nodeJoin.enter().append('g').attr('class','node-group')
@@ -1024,14 +1032,17 @@ async function exploreNode(nodeId, count, comment) {
   } finally { hideLoading(); }
 }
 
+// Memory Fix 1: addOptions now removes existing children first (replace instead of append)
 async function addOptionsToNode(nodeId, count) {
   showLoading('Adding new options...');
   try {
+    // Remove existing children for this node before adding new ones (prevents accumulation)
+    removeChildrenOf(nodeId);
     const data = await apiPost('/add_options', { node_id: nodeId, count });
     const newChildren = data.children || [];
     newChildren.forEach(child => addNodeToGraph(child, nodeId));
     const parentNode = nodes.find(n => n.id === nodeId);
-    if (parentNode) parentNode._childrenCount = (parentNode._childrenCount||0) + newChildren.length;
+    if (parentNode) parentNode._childrenCount = newChildren.length; // set, not add
     renderCanvas();
     removeForeignPopup();
     selectedNodeId = null;
@@ -1805,7 +1816,7 @@ getSessionId();
 initSvg();
 if (localStorage.getItem('overthinker_theme') === 'light') toggleTheme();
 
-console.log('🧠 Overthinker — Session Mode Active, ID:', sessionId);
+console.log('🧠 Overthinker v29 — Browser Memory Fixes Applied (zoom cleanup, addOptions replace, keyed exit/remove), ID:', sessionId);
 </script>
 </body>
 </html>