Update app.py

app.py

@@ -7,6 +7,7 @@ import time
 import urllib.parse
 import os
 import threading
+from datetime import datetime
 from fastapi import FastAPI, Request, Response, Cookie, BackgroundTasks, Query
 from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
 from typing import Optional, List, Dict
@@ -21,12 +22,19 @@ REDIRECT_URI = "https://topsecrettraders-depthchainindia.hf.space/callback"
 
 CACHE_FILE = "master_cache.json"
 
+# --- SUPABASE CONFIG (FROM v16.txt) ---
+SUPABASE_URL = "https://tuyhtqxfvjndbyjazosi.supabase.co"
+SUPABASE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR1eWh0cXhmdmpuZGJ5amF6b3NpIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2ODE0NjAyMiwiZXhwIjoyMDgzNzIyMDIyfQ.YsmGS67vL5TghB5OOi6pmsPL6rrgx7SNpARHmQ9b5cw"
+
 app = FastAPI()
 
 # ==========================================
-# 2. ROBUST DATA LOADER (THREAD SAFE)
+# 2. ROBUST DATA LOADER & SUPABASE
 # ==========================================
 
+from supabase import create_client, Client
+supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
+
 MASTER_DB = {}
 SEARCH_INDEX = [] 
 
@@ -201,9 +209,33 @@ def startup_event():
         thread.start()
 
 # ==========================================
-# 3. ROUTES
+# 3. ROUTES & HISTORICAL LOGIC
 # ==========================================
 
+def decompress_payload(rich_data: List[Dict]) -> Dict:
+    """
+    Converts the v16.txt rich array format back to Fyers Data format.
+    Input: [ { "u": "NSE:...", "p": 100, "v": 50, "q": [10, 20], "o": [5, 0] }, ... ]
+    Output: { "NSE:...": { "ltp": 100, "v": 50, "totalbuyqty": 10, ... } }
+    """
+    fyers_data = {}
+    for item in rich_data:
+        sym = item.get('u')
+        if not sym: continue
+        
+        # Mapping based on v16.txt logic
+        fyers_data[sym] = {
+            "ltp": item.get('p', 0),
+            "v": item.get('v', 0),
+            "totalbuyqty": item.get('q', [0,0])[0],
+            "totalsellqty": item.get('q', [0,0])[1],
+            "oi": item.get('o', [0,0])[0],
+            "oipercent": item.get('o', [0,0])[1],
+            # Helper for expiry if stored in payload (v16 handles this)
+            "expiry": item.get('e', None) 
+        }
+    return fyers_data
+
 @app.get("/")
 def home(access_token: Optional[str] = Cookie(None)):
     if not access_token:
@@ -279,6 +311,99 @@ def force_refresh(background_tasks: BackgroundTasks):
     background_tasks.add_task(update_master_db)
     return JSONResponse({"s": "ok"})
 
+# --- HISTORICAL API ENDPOINTS ---
+
+@app.get("/api/hist/dates")
+def get_hist_dates(symbol: str):
+    """Fetches unique dates available for a symbol from Supabase"""
+    try:
+        # We fetch recorded_at, convert to date, distinct
+        # Supabase doesn't support easy 'distinct' on derived columns easily in python client without rpc
+        # So we fetch 'time_signature' which is string "YYYY-MM-DD HH:MM:SS"
+        # We'll just fetch entries, order by recency, and extract dates.
+        # Limit to last 500 records to extract unique dates
+        res = supabase.table('snapshots')\
+            .select('time_signature')\
+            .eq('symbol', symbol.upper())\
+            .order('recorded_at', desc=True)\
+            .limit(1000)\
+            .execute()
+        
+        dates = set()
+        for item in res.data:
+            ts_str = item.get('time_signature', '')
+            if ts_str:
+                dates.add(ts_str.split(' ')[0]) # Extract YYYY-MM-DD
+        
+        return JSONResponse(sorted(list(dates), reverse=True))
+    except Exception as e:
+        return JSONResponse({"error": str(e)}, status_code=500)
+
+@app.get("/api/hist/minutes")
+def get_hist_minutes(symbol: str, date: str):
+    """Fetches available minutes for a specific date"""
+    try:
+        # Filter strings starting with date
+        res = supabase.table('snapshots')\
+            .select('time_signature')\
+            .eq('symbol', symbol.upper())\
+            .like('time_signature', f'{date}%')\
+            .order('recorded_at', desc=True)\
+            .execute()
+            
+        minutes = set()
+        for item in res.data:
+            ts_str = item.get('time_signature', '')
+            # Format: YYYY-MM-DD HH:MM:SS -> Extract HH:MM
+            parts = ts_str.split(' ')
+            if len(parts) > 1:
+                time_part = parts[1] # HH:MM:SS
+                minutes.add(time_part[:5]) # HH:MM
+                
+        return JSONResponse(sorted(list(minutes), reverse=True))
+    except Exception as e:
+        return JSONResponse({"error": str(e)}, status_code=500)
+
+@app.get("/api/hist/load")
+def get_hist_data(symbol: str, date: str, minute: str):
+    """
+    Fetches ALL snapshots for a specific minute.
+    Returns a list of { time: "SS", data: {...reconstructed...} }
+    """
+    try:
+        # Construct query pattern like "2025-01-01 09:15%"
+        query_sig = f"{date} {minute}"
+        
+        res = supabase.table('snapshots')\
+            .select('time_signature, payload')\
+            .eq('symbol', symbol.upper())\
+            .like('time_signature', f'{query_sig}%')\
+            .order('recorded_at', desc=False)\
+            .execute()
+            
+        timeline = []
+        for item in res.data:
+            ts = item.get('time_signature', '')
+            sec = ts.split(':')[-1] if ':' in ts else "00"
+            
+            raw_payload = item.get('payload')
+            # Handle if payload is stringified JSON
+            if isinstance(raw_payload, str):
+                raw_payload = json.loads(raw_payload)
+                
+            clean_data = decompress_payload(raw_payload)
+            timeline.append({
+                "s": sec,
+                "d": clean_data
+            })
+            
+        return JSONResponse({"s": "ok", "timeline": timeline})
+        
+    except Exception as e:
+        print(e)
+        return JSONResponse({"error": str(e)}, status_code=500)
+
+
 # ==========================================
 # 4. FRONTEND
 # ==========================================
@@ -306,6 +431,7 @@ HTML_TEMPLATE = """
         .top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
         .btn { background: #fff; border: 1px solid var(--border); padding: 8px 16px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; transition:0.2s; white-space:nowrap; color: var(--text-sub); }
         .btn:hover { border-color: var(--accent); color: var(--accent); background:#f0f7ff; }
+        .btn.active { background: var(--accent); color: white; border-color: var(--accent); }
         
         .icon-btn { padding: 8px; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-sub); transition:0.2s; }
         .icon-btn:hover { background: #f0f0f0; color: var(--text-main); }
@@ -323,6 +449,14 @@ HTML_TEMPLATE = """
         .badge-BSE { background: var(--badge-bse); }
         .badge-MCX { background: var(--badge-mcx); }
 
+        /* HISTORY CONTROLS */
+        .hist-controls { display: none; align-items: center; gap: 10px; margin-left: 20px; padding-left: 20px; border-left: 1px solid #eee; }
+        .hist-sel { padding: 8px; border-radius: 4px; border: 1px solid #ddd; font-weight: bold; font-size: 11px; background: #f9f9f9; }
+        .sec-bar-cont { display: flex; gap: 2px; overflow-x: auto; max-width: 300px; padding: 2px; background: #f0f0f0; border-radius: 4px; }
+        .sec-pill { padding: 2px 5px; font-size: 10px; cursor: pointer; border-radius: 2px; color: #666; font-family:'JetBrains Mono'; }
+        .sec-pill:hover { background: #ddd; color: #000; }
+        .sec-pill.active { background: var(--accent); color: white; font-weight: bold; }
+
         .grid-layout { display: flex; height: calc(100vh - 60px); }
         
         /* Chain Panel */
@@ -533,13 +667,24 @@ HTML_TEMPLATE = """
             <input type="text" class="search-input" id="searchInp" placeholder="SEARCH (e.g. NIFTY, GOLD)..." autocomplete="off">
             <div class="search-dropdown" id="searchRes"></div>
         </div>
-
-        <button class="icon-btn" onclick="refreshDB()" title="Refresh Master DB">
-            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+        
+        <!-- HISTORY TOGGLE -->
+        <button class="btn" id="modeBtn" onclick="toggleMode()">
+            <span id="modeTxt">LIVE</span>
         </button>
+
+        <div class="hist-controls" id="histControls">
+            <select class="hist-sel" id="histDate" onchange="loadHistMinutes()"><option>DATE</option></select>
+            <select class="hist-sel" id="histTime" onchange="loadHistData()"><option>TIME</option></select>
+            <div class="sec-bar-cont" id="secBar"></div>
+        </div>
+
     </div>
     
     <div style="display:flex; gap:20px; align-items:center;">
+        <button class="icon-btn" onclick="refreshDB()" title="Refresh Master DB">
+            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+        </button>
         <div style="text-align:right;">
             <div style="font-size:10px; font-weight:700; color:#aaa; letter-spacing:1px;" id="spotLabel">SPOT</div>
             <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:17px; color:var(--text-main);">0.00</div>
@@ -548,7 +693,7 @@ HTML_TEMPLATE = """
             <span style="color:#888">EXP:</span> <span id="selExpTxt" style="color:var(--text-main)">SELECT</span>
             <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
         </button>
-        <div class="live-dot" id="statusDot" title="Live Connection Status"></div>
+        <div class="live-dot" id="statusDot" title="Connection Status"></div>
         <button class="btn" onclick="location.href='/logout'" style="border:none; color:var(--red); padding:0;">
             <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
         </button>
@@ -614,6 +759,10 @@ HTML_TEMPLATE = """
     let SEARCH_TIMER = null;
     let ATM_STRIKE = 0;
     
+    // HISTORY MODE STATE
+    let IS_HISTORY = false;
+    let CACHED_TIMELINE = []; // Stores {s: "00", d: {...}} for current minute
+
     // DATA STORE FOR INFO MODAL
     let LATEST_ROW_DATA = {};
 
@@ -628,12 +777,9 @@ HTML_TEMPLATE = """
         ]
     };
 
-    // Load Config from LocalStorage with migration check
+    // Load Config from LocalStorage
     let CONFIG = JSON.parse(localStorage.getItem('tst_chain_config')) || JSON.parse(JSON.stringify(DEFAULTS));
-    if(!Array.isArray(CONFIG.side)) {
-        // Migrate old format to new format
-        CONFIG.side = JSON.parse(JSON.stringify(DEFAULTS.side));
-    }
+    if(!Array.isArray(CONFIG.side)) CONFIG.side = JSON.parse(JSON.stringify(DEFAULTS.side));
 
     // Temp state for editing
     let EDITING_COL = null; 
@@ -655,15 +801,147 @@ HTML_TEMPLATE = """
     };
 
     // ===================================
-    // CONFIGURATION LOGIC
+    // HISTORY MODE LOGIC
     // ===================================
+    
+    function toggleMode() {
+        IS_HISTORY = !IS_HISTORY;
+        const btn = document.getElementById('modeBtn');
+        const txt = document.getElementById('modeTxt');
+        const ctrls = document.getElementById('histControls');
+        const dot = document.getElementById('statusDot');
+        
+        if(IS_HISTORY) {
+            btn.classList.add('active');
+            txt.innerText = "HISTORY";
+            ctrls.style.display = "flex";
+            if(POLLER) clearInterval(POLLER); // Stop live polling
+            dot.style.background = "#2962ff"; // Blue for History
+            
+            if(CURRENT_ROOT) loadHistDates();
+        } else {
+            btn.classList.remove('active');
+            txt.innerText = "LIVE";
+            ctrls.style.display = "none";
+            dot.style.background = "#ccc";
+            // Return to live
+            if(CURRENT_ROOT) {
+                loadSymbol(CURRENT_ROOT); 
+            }
+        }
+    }
+
+    async function loadHistDates() {
+        if(!CURRENT_ROOT) return;
+        const sel = document.getElementById('histDate');
+        sel.innerHTML = "<option>LOADING...</option>";
+        
+        try {
+            const res = await fetch(`/api/hist/dates?symbol=${CURRENT_ROOT}`);
+            const dates = await res.json();
+            
+            sel.innerHTML = "<option value=''>SELECT DATE</option>" + 
+                dates.map(d => `<option value="${d}">${d}</option>`).join('');
+                
+        } catch(e) { console.error(e); sel.innerHTML = "<option>ERROR</option>"; }
+    }
+
+    async function loadHistMinutes() {
+        const date = document.getElementById('histDate').value;
+        if(!date) return;
+        
+        const sel = document.getElementById('histTime');
+        sel.innerHTML = "<option>LOADING...</option>";
+        
+        try {
+            const res = await fetch(`/api/hist/minutes?symbol=${CURRENT_ROOT}&date=${date}`);
+            const mins = await res.json();
+            
+            sel.innerHTML = "<option value=''>SELECT TIME</option>" + 
+                mins.map(m => `<option value="${m}">${m}</option>`).join('');
+        } catch(e) { console.error(e); }
+    }
+
+    async function loadHistData() {
+        const date = document.getElementById('histDate').value;
+        const time = document.getElementById('histTime').value;
+        if(!date || !time) return;
+        
+        document.getElementById('loaderMsg').innerText = "FETCHING SNAPSHOTS...";
+        document.getElementById('loader').style.display = 'flex';
+        
+        try {
+            const res = await fetch(`/api/hist/load?symbol=${CURRENT_ROOT}&date=${date}&minute=${time}`);
+            const json = await res.json();
+            
+            CACHED_TIMELINE = json.timeline; // List of {s: "05", d: { ... }}
+            
+            renderSecondBar();
+            
+            // Auto-load first available second
+            if(CACHED_TIMELINE.length > 0) {
+                renderSnapshot(CACHED_TIMELINE[0]);
+            }
+            
+        } catch(e) { alert("Error loading history: " + e); }
+        document.getElementById('loader').style.display = 'none';
+    }
+
+    function renderSecondBar() {
+        const bar = document.getElementById('secBar');
+        bar.innerHTML = CACHED_TIMELINE.map((item, idx) => `
+            <div class="sec-pill ${idx===0?'active':''}" 
+                 onclick="selectSnapshot(${idx})" 
+                 id="pill-${idx}">
+                 :${item.s}
+            </div>
+        `).join('');
+    }
+
+    function selectSnapshot(idx) {
+        document.querySelectorAll('.sec-pill').forEach(p => p.classList.remove('active'));
+        document.getElementById(`pill-${idx}`).classList.add('active');
+        renderSnapshot(CACHED_TIMELINE[idx]);
+    }
+
+    function renderSnapshot(item) {
+        const data = item.d;
+        
+        // 1. Extract Expiries from historical data if needed
+        // Since we are reusing buildChain which relies on CHAIN_DATA (Master), 
+        // we assume Master DB still holds the correct structure. 
+        // BUT for strikes/prices we use 'data'.
+        
+        // Update UI with the historical packet
+        updateUI(data); 
+        
+        // Also ensure Expiries are valid for this historical snapshot
+        // We look into the data items to find distinct expiries present in this snapshot
+        const presentExpiries = new Set();
+        for(let key in data) {
+             // In reconstructed data, expiry is a field if available
+             if(data[key].expiry) {
+                 // Format usually YYYY-MM-DD from v16 reconstruction
+                 // But UI expects Unix Timestamp.
+                 // We need to match it with CHAIN_DATA items.
+                 // Actually, simpler: Let the user filter expiries based on what the Master DB has.
+                 // History mode is just "Overwriting" the live price values.
+             }
+        }
+    }
+
+
+    // ===================================
+    // EXISTING APP LOGIC
+    // ===================================
+
+    // ... (Configuration & Sidebar logic is same) ...
     function applyConfig() {
         document.getElementById('headL_txt').innerText = CONFIG.left.name;
         document.getElementById('headR_txt').innerText = CONFIG.right.name;
         renderSidebar();
     }
 
-    // --- MAIN RENDERER FOR SIDEBAR ---
     function renderSidebar() {
         const con = document.getElementById('sideContainer');
         if(!CONFIG.side || CONFIG.side.length === 0) {
@@ -821,7 +1099,7 @@ HTML_TEMPLATE = """
     function saveAndReload() {
         localStorage.setItem('tst_chain_config', JSON.stringify(CONFIG));
         applyConfig();
-        pollData();
+        if(!IS_HISTORY) pollData();
     }
 
     function closeModal(id) { document.getElementById(id).style.display = 'none'; }
@@ -830,12 +1108,8 @@ HTML_TEMPLATE = """
     // MATH ENGINE
     // ===================================
     function evaluateFormula(formula, vars) {
-        // vars: { CS: number, CB: number, PS: number, PB: number, CO: number, PO: number, CLTP: number, PLTP: number, CV: number, PV: number }
-        // ALL INPUTS ARE RAW NUMBERS (INTEGERS). NO 'K' or 'Cr' here.
         try {
             let exp = formula;
-            // Replace vars with values. 
-            // We use regex with word boundary to ensure CS doesn't match inside CSS
             exp = exp.replace(/CS/g, vars.CS || 0);
             exp = exp.replace(/CB/g, vars.CB || 0);
             exp = exp.replace(/PS/g, vars.PS || 0);
@@ -848,19 +1122,13 @@ HTML_TEMPLATE = """
             exp = exp.replace(/CV/g, vars.CV || 0);
             exp = exp.replace(/PV/g, vars.PV || 0);
             
-            // Safety check: only allow numbers and math ops
             if(/[^0-9+\-*/(). ]/.test(exp)) return 0;
-            
-            // Evaluate
             return new Function('return ' + exp)();
         } catch(e) {
             return 0;
         }
     }
     
-    // ===================================
-    // INFO MODAL LOGIC
-    // ===================================
     function showInfo(cardIdx, rangeIdx) {
         if(!CONFIG.side[cardIdx]) return;
         
@@ -871,10 +1139,9 @@ HTML_TEMPLATE = """
         document.getElementById('infoSpot').innerText = SPOT_PRICE.toFixed(2);
         document.getElementById('infoForm').innerText = formula;
         
-        // RE-RUN SPLIT LOGIC
         const kList = Object.keys(LATEST_ROW_DATA).map(parseFloat).sort((a,b)=>a-b);
         const lowers = kList.filter(k => k < SPOT_PRICE);
-        const uppers = kList.filter(k => k >= SPOT_PRICE); // Exact match goes to upper/call side
+        const uppers = kList.filter(k => k >= SPOT_PRICE);
         
         const selLow = lowers.slice(-range);
         const selHigh = uppers.slice(0, range);
@@ -884,7 +1151,6 @@ HTML_TEMPLATE = """
         
         const table = document.getElementById('infoTable');
         
-        // Headers based on formula vars? No, just show standard vars
         let hHTML = `<tr>
             <th style="width:50px;">STRIKE</th>
             <th>CS</th><th>CB</th><th>PS</th><th>PB</th><th>CALC</th>
@@ -895,7 +1161,6 @@ HTML_TEMPLATE = """
             const val = evaluateFormula(formula, d);
             grandTotal += val;
             
-            // Styling for spot split
             const borderStyle = (k >= SPOT_PRICE && selLow.includes(k- (kList[1]-kList[0]))) ? "border-top:2px solid var(--accent);" : "";
             
             return `
@@ -909,14 +1174,12 @@ HTML_TEMPLATE = """
             </tr>`;
         }).join('');
         
-        // Footer
         rowsHTML += `<tr class="info-row-res">
             <td colspan="5" style="text-align:right;">TOTAL</td>
             <td style="color:${grandTotal>=0?'var(--green)':'var(--red)'}">${grandTotal}</td>
         </tr>`;
         
         table.innerHTML = hHTML + rowsHTML;
-        
         document.getElementById('infoModal').style.display = 'flex';
     }
 
@@ -967,6 +1230,11 @@ HTML_TEMPLATE = """
         document.getElementById('loaderMsg').innerText = "LOADING CHAIN...";
         document.getElementById('loader').style.display = 'flex';
         
+        // Reset History Controls if switching symbol
+        document.getElementById('histDate').innerHTML = "<option>DATE</option>";
+        document.getElementById('histTime').innerHTML = "<option>TIME</option>";
+        document.getElementById('secBar').innerHTML = "";
+        
         try {
             const res = await fetch(`/api/chain?symbol=${root}`);
             if(!res.ok) throw new Error("Symbol not found");
@@ -975,7 +1243,7 @@ HTML_TEMPLATE = """
             CURRENT_ROOT = root;
             CHAIN_DATA = data.items;
             SPOT_SYM = data.spot;
-            SPOT_PRICE = 0; // Reset price on new load
+            SPOT_PRICE = 0; 
 
             FUT_SYMS = CHAIN_DATA.filter(x => x.t === 'FUT').sort((a,b) => a.e - b.e).slice(0, 3);
             
@@ -985,6 +1253,9 @@ HTML_TEMPLATE = """
 
             setupExpiries();
             document.getElementById('loader').style.display = 'none';
+            
+            // If we are in history mode, trigger date load
+            if(IS_HISTORY) loadHistDates();
 
         } catch(e) {
             alert("Error: " + e.message);
@@ -997,13 +1268,16 @@ HTML_TEMPLATE = """
         const exps = [...new Set(opts.map(i => i.e))].sort((a,b) => a-b);
         const today = Math.floor(Date.now()/1000) - 86400;
         
-        const validExps = exps.filter(ts => ts > today);
+        // In history mode, allow past expiries? For now, simpler to just show what Master DB has.
+        // Usually historical analysis is done on near-term data where master DB is still relevant.
+        const validExps = exps; // exps.filter(ts => ts > today); 
+        
         if(validExps.length === 0) { 
             document.getElementById('chainBody').innerHTML = '<div style="padding:20px; text-align:center;">NO OPTIONS DATA</div>';
             return; 
         }
         
-        ACTIVE_EXP = validExps[0];
+        ACTIVE_EXP = validExps.find(ts => ts > today) || validExps[0];
         updateExpText(ACTIVE_EXP);
         
         const grid = document.getElementById('expGrid');
@@ -1040,10 +1314,8 @@ HTML_TEMPLATE = """
         
         const strikes = [...new Set(relevant.map(x => x.k))].sort((a,b) => a-b);
         
-       // DUAL COLUMN RENDER
         body.innerHTML = strikes.map(k => `
             <div class="row" id="row-${k}" data-k="${k}">
-                <!-- LEFT COLUMN -->
                 <div class="graph-col">
                     <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
                         <div class="visual-bar" id="barL-${k}"></div>
@@ -1051,7 +1323,6 @@ HTML_TEMPLATE = """
                         <span class="delta-txt" id="valL-${k}">-</span>
                     </div>
                 </div>
-                <!-- RIGHT COLUMN -->
                 <div class="graph-col">
                     <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
                         <div class="visual-bar" id="barR-${k}"></div>
@@ -1062,8 +1333,9 @@ HTML_TEMPLATE = """
             </div>
         `).join('');
         
-        window.scrolled = false; // Reset scroll state
-        restartPoller();
+        window.scrolled = false;
+        
+        if(!IS_HISTORY) restartPoller();
     }
 
     function restartPoller() {
@@ -1073,7 +1345,7 @@ HTML_TEMPLATE = """
     }
 
     async function pollData() {
-        if(IS_POLLING || !CURRENT_ROOT) return;
+        if(IS_POLLING || !CURRENT_ROOT || IS_HISTORY) return;
         IS_POLLING = true;
         
         try {
@@ -1081,7 +1353,6 @@ HTML_TEMPLATE = """
             const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
             
             if(kList.length > 0) {
-                // LOGIC UPDATE: Select Next Strike just above live price
                 const refPrice = SPOT_PRICE > 0 ? SPOT_PRICE : kList[Math.floor(kList.length/2)];
                 let selectedK = kList.find(k => k >= refPrice);
                 if (selectedK === undefined) selectedK = kList[kList.length - 1];
@@ -1089,9 +1360,9 @@ HTML_TEMPLATE = """
                 ATM_STRIKE = selectedK;
                 const atmIdx = kList.indexOf(selectedK);
                 
+                // Highlight ATM
                 document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
                 const atmRow = document.getElementById(`row-${selectedK}`);
-                
                 if(atmRow) {
                     atmRow.classList.add('atm');
                     if(!window.scrolled && SPOT_PRICE > 0) { 
@@ -1100,7 +1371,7 @@ HTML_TEMPLATE = """
                     }
                 }
 
-                // DETERMINE MAX RANGE NEEDED ACROSS ALL SIDEBAR CARDS
+                // Determine Max Range for Sidebar
                 let maxRange = 10;
                 if(CONFIG.side && Array.isArray(CONFIG.side)) {
                     CONFIG.side.forEach(item => {
@@ -1111,12 +1382,11 @@ HTML_TEMPLATE = """
                     });
                 }
                 
-                // Visible Range (Fixed)
+                // Optimized fetching range
                 const start = Math.max(0, atmIdx - 20);
                 const end = Math.min(kList.length, atmIdx + 20);
                 const viewKs = kList.slice(start, end);
 
-                // Side Calculation Range
                 const rangeStart = Math.max(0, atmIdx - maxRange);
                 const rangeEnd = Math.min(kList.length, atmIdx + maxRange + 1);
                 const calcKs = kList.slice(rangeStart, rangeEnd);
@@ -1153,12 +1423,13 @@ HTML_TEMPLATE = """
     }
 
     function updateUI(data) {
+        // Update Spot
         if(data[SPOT_SYM] && typeof data[SPOT_SYM].ltp === 'number') {
             SPOT_PRICE = data[SPOT_SYM].ltp;
             document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
         }
         
-        // Futures
+        // Update Futures
         const futHTML = FUT_SYMS.map(f => {
             const d = data[f.s];
             if(!d || typeof d.ltp !== 'number') return '';
@@ -1208,10 +1479,9 @@ HTML_TEMPLATE = """
             }
         }
         
-        // STORE GLOBAL FOR INFO MODAL
         LATEST_ROW_DATA = rowData;
 
-        // --- RENDER CHAIN (Main Columns) ---
+        // --- RENDER CHAIN ---
         let maxL = 0, maxR = 0;
         const processedRows = {};
 
@@ -1228,7 +1498,6 @@ HTML_TEMPLATE = """
         for(const k in processedRows) {
             const r = processedRows[k];
             
-            // 1. UPDATE LEFT COLUMN
             const valL = document.getElementById(`valL-${k}`);
             if(valL) {
                 valL.innerText = (r.left>0?"+":"") + fmt(r.left);
@@ -1239,16 +1508,10 @@ HTML_TEMPLATE = """
                     const pct = (Math.abs(r.left) / maxL) * 100;
                     barL.style.left = '0%';
                     barL.style.width = pct + '%';
-                    
-                    if(r.left >= 0) {
-                        barL.style.background = 'var(--green-soft)';
-                    } else {
-                        barL.style.background = 'var(--red-soft)';
-                    }
+                    barL.style.background = r.left >= 0 ? 'var(--green-soft)' : 'var(--red-soft)';
                 }
             }
 
-            // 2. UPDATE RIGHT COLUMN
             const valR = document.getElementById(`valR-${k}`);
             if(valR) {
                 valR.innerText = (r.right>0?"+":"") + fmt(r.right);
@@ -1259,43 +1522,41 @@ HTML_TEMPLATE = """
                     const pct = (Math.abs(r.right) / maxR) * 100;
                     barR.style.left = '0%';
                     barR.style.width = pct + '%';
-                    
-                    if(r.right >= 0) {
-                        barR.style.background = 'var(--green-soft)';
-                    } else {
-                        barR.style.background = 'var(--red-soft)';
-                    }
+                    barR.style.background = r.right >= 0 ? 'var(--green-soft)' : 'var(--red-soft)';
                 }
             }
         }
 
-        // --- SIDEBAR DYNAMIC AGGREGATION (SYMMETRIC OTM LOGIC) ---
+        // ATM Highlighting Logic for History/Manual updates
+        if(IS_HISTORY && SPOT_PRICE > 0) {
+             const kList = Object.keys(rowData).map(parseFloat).sort((a,b)=>a-b);
+             const refPrice = SPOT_PRICE;
+             let selectedK = kList.find(k => k >= refPrice);
+             if (selectedK === undefined) selectedK = kList[kList.length - 1];
+             
+             document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
+             const atmRow = document.getElementById(`row-${selectedK}`);
+             if(atmRow) atmRow.classList.add('atm');
+        }
+
+        // --- SIDEBAR AGGREGATION ---
         if(SPOT_PRICE > 0 && CONFIG.side && CONFIG.side.length > 0) {
             const kList = Object.keys(rowData).map(parseFloat).sort((a,b)=>a-b);
-            
-            // SPLIT LIST BASED ON EXACT SPOT PRICE
             const lowers = kList.filter(k => k < SPOT_PRICE);
-            const uppers = kList.filter(k => k >= SPOT_PRICE); // Include exact match in upper/call bucket
+            const uppers = kList.filter(k => k >= SPOT_PRICE);
 
             CONFIG.side.forEach((item, idx) => {
                 item.ranges.forEach((rng, rIdx) => {
                     const el = document.getElementById(`sv-${idx}-${rIdx}`);
                     if(el) {
-                        // Take 'rng' amount from bottom of lowers (Closest below spot)
                         const selLow = lowers.slice(-rng);
-                        // Take 'rng' amount from top of uppers (Closest above spot)
                         const selHigh = uppers.slice(0, rng);
-                        
-                        // Combine logic
                         const targetStrikes = [...selLow, ...selHigh];
                         
                         let total = 0;
                         for(const k of targetStrikes) {
-                            if(rowData[k]) {
-                                total += evaluateFormula(item.formula, rowData[k]);
-                            }
+                            if(rowData[k]) total += evaluateFormula(item.formula, rowData[k]);
                         }
-
                         el.innerText = (total > 0 ? "+" : "") + fmt(total);
                         el.style.color = total >= 0 ? 'var(--green)' : 'var(--red)';
                     }
@@ -1304,7 +1565,6 @@ HTML_TEMPLATE = """
         }
     }
 
-    // Pure Display Formatting
     function fmt(n) {
         if(!n) return '0';
         let abs = Math.abs(n);