Update app.py

app.py

@@ -4,13 +4,13 @@ import json
 import threading
 import os
 import time
-from datetime import datetime, timedelta
+from datetime import datetime
 from fastapi import FastAPI, BackgroundTasks
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
 
 # ==========================================
-# 1. CONFIGURATION & STATE
+# 1. CONFIGURATION
 # ==========================================
 app = FastAPI()
 
@@ -21,10 +21,9 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# File persistence
 SYMBOL_FILE = "symbols.json"
 
-# In-Memory Cache (Starts with defaults so app works instantly)
+# Default Cache
 SYMBOL_CACHE = [
     {"symbol": "NIFTY", "name": "Nifty 50", "exchange": "NSE"},
     {"symbol": "BANKNIFTY", "name": "Nifty Bank", "exchange": "NSE"},
@@ -40,18 +39,11 @@ HEADERS = {
 }
 
 # ==========================================
-# 2. BACKEND LOGIC (The "A-Z" Loader)
+# 2. BACKEND LOGIC
 # ==========================================
 def fetch_master_list():
-    """
-    Runs in background. Loops A-Z to find all optionable instruments.
-    """
     global SYMBOL_CACHE
-    print(">>> [SYSTEM] Starting Background Symbol Update (A-Z)...")
-    
     temp_list = []
-    
-    # Loop ASCII 65(A) to 90(Z)
     for i in range(65, 91):
         letter = chr(i)
         try:
@@ -62,62 +54,40 @@ def fetch_master_list():
                 results = data.get("payload", {}).get("results", [])
                 for item in results:
                     details = item.get("item", {})
-                    # Logic: Must have options chain
                     if details.get("has_options_chain") or details.get("symbol") in ["NIFTY", "BANKNIFTY"]:
                         temp_list.append({
                             "symbol": details.get("symbol"),
                             "name": details.get("name"),
                             "exchange": details.get("exchange")
                         })
-            # Polite delay
             time.sleep(0.1)
-        except Exception as e:
-            print(f"Failed to fetch letter {letter}: {e}")
+        except: pass
 
-    # Remove duplicates
     unique = {v['symbol']: v for v in temp_list}.values()
-    
     if len(unique) > 0:
         SYMBOL_CACHE = list(unique)
-        # Save to disk
         with open(SYMBOL_FILE, "w") as f:
             json.dump(SYMBOL_CACHE, f)
-        print(f">>> [SYSTEM] Update Complete. {len(SYMBOL_CACHE)} symbols saved.")
-    else:
-        print(">>> [SYSTEM] Update failed or found 0 symbols. Keeping defaults.")
 
 def load_startup_data():
-    """
-    Called on app boot. Checks if local file is valid (<24h).
-    """
     global SYMBOL_CACHE
-    
-    should_update = True
-    
     if os.path.exists(SYMBOL_FILE):
         try:
-            # Check file age
             file_time = os.path.getmtime(SYMBOL_FILE)
-            if (time.time() - file_time) < 86400: # 24 hours
+            if (time.time() - file_time) < 86400:
                 with open(SYMBOL_FILE, "r") as f:
                     data = json.load(f)
-                    if len(data) > 5:
-                        SYMBOL_CACHE = data
-                        should_update = False
-                        print(f">>> [SYSTEM] Loaded {len(data)} symbols from local cache.")
-        except:
-            print(">>> [SYSTEM] Cache file corrupted.")
-
-    if should_update:
-        # Run in background so we don't block the UI
-        threading.Thread(target=fetch_master_list).start()
+                    if len(data) > 5: SYMBOL_CACHE = data
+                    return
+        except: pass
+    threading.Thread(target=fetch_master_list).start()
 
 @app.on_event("startup")
 def startup_event():
     load_startup_data()
 
 # ==========================================
-# 3. API ROUTES
+# 3. ROUTES
 # ==========================================
 
 @app.get("/")
@@ -126,25 +96,18 @@ def home():
 
 @app.get("/api/search")
 def search(q: str):
-    """
-    Searches the in-memory cache.
-    """
     q = q.upper()
-    # Simple algorithm: Symbol starts with Q or Name contains Q
     res = []
     for s in SYMBOL_CACHE:
         if q in s['symbol'] or q in s['name'].upper():
             res.append(s)
-            if len(res) >= 15: break # Limit results
+            if len(res) >= 15: break
     return JSONResponse(res)
 
 @app.get("/api/reload_db")
 def force_reload(background_tasks: BackgroundTasks):
-    """
-    User triggered manual update.
-    """
     background_tasks.add_task(fetch_master_list)
-    return {"status": "started", "msg": "Background update started."}
+    return {"status": "started"}
 
 @app.get("/api/db_status")
 def db_status():
@@ -152,9 +115,7 @@ def db_status():
 
 @app.get("/api/fetch")
 def fetch_data(symbol: str, exchange: str):
-    """
-    Proxy to GoCharting.
-    """
+    # Proxy to Live API
     url = "https://gocharting.com/api/options/chain"
     params = {
         "exchange": exchange,
@@ -164,7 +125,7 @@ def fetch_data(symbol: str, exchange: str):
         "quote_chain": "true"
     }
     try:
-        r = requests.get(url, headers=HEADERS, params=params, timeout=10)
+        r = requests.get(url, headers=HEADERS, params=params, timeout=8)
         return JSONResponse(r.json())
     except Exception as e:
         return JSONResponse({"status": "error", "msg": str(e)}, status_code=500)
@@ -177,60 +138,60 @@ FRONTEND_HTML = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>GEX TERMINAL [HF]</title>
+    <title>GEX LIVE</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;800&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
     <style>
         :root {
-            --bg: #09090b;
-            --panel: #18181b;
-            --border: #27272a;
-            --text: #e4e4e7;
-            --text-dim: #71717a;
-            --accent: #6366f1;
-            --call-up: #ef4444;    /* Resistance */
-            --put-down: #10b981;   /* Support */
-            --spot: #3b82f6;
+            --bg: #09090b; --panel: #18181b; --border: #27272a;
+            --text: #e4e4e7; --text-dim: #71717a; --accent: #6366f1;
+            --call: #ef4444; --put: #10b981; --spot: #3b82f6;
         }
         body { margin:0; background:var(--bg); color:var(--text); font-family:'Inter'; height:100vh; display:flex; flex-direction:column; overflow:hidden; }
         
         /* HEADER */
         header { height:55px; background:var(--panel); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 20px; justify-content:space-between; }
-        .logo { font-family:'JetBrains Mono'; font-weight:800; letter-spacing:-1px; font-size:18px; }
+        .logo { font-family:'JetBrains Mono'; font-weight:800; font-size:18px; }
         .logo span { color:var(--accent); }
-        
         .search-wrap { position:relative; width:260px; }
         .search-inp { width:100%; background:#000; border:1px solid var(--border); color:#fff; padding:8px 12px; border-radius:6px; font-family:'JetBrains Mono'; font-size:12px; }
         .search-inp:focus { border-color:var(--accent); outline:none; }
-        .results { position:absolute; top:110%; left:0; width:100%; background:var(--panel); border:1px solid var(--border); border-radius:6px; z-index:100; max-height:300px; overflow-y:auto; display:none; }
-        .res-item { padding:8px 12px; border-bottom:1px solid var(--border); cursor:pointer; display:flex; justify-content:space-between; font-size:12px; }
+        .results { position:absolute; top:110%; left:0; width:100%; background:var(--panel); border:1px solid var(--border); z-index:100; max-height:300px; overflow-y:auto; display:none; }
+        .res-item { padding:8px; border-bottom:1px solid var(--border); cursor:pointer; font-size:12px; display:flex; justify-content:space-between; }
         .res-item:hover { background:var(--border); }
 
-        /* MAIN */
+        /* MAIN LAYOUT */
         .layout { display:flex; flex:1; height:calc(100vh - 55px); }
         .sidebar { width:260px; background:#0c0c0e; border-right:1px solid var(--border); padding:20px; display:flex; flex-direction:column; gap:20px; flex-shrink:0; }
         .content { flex:1; position:relative; display:flex; flex-direction:column; padding:20px; }
 
-        /* COMPONENTS */
+        /* CARDS & CONTROLS */
         .card { background:var(--panel); border:1px solid var(--border); padding:15px; border-radius:6px; }
         .lbl { font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; margin-bottom:5px; }
         .val { font-family:'JetBrains Mono'; font-size:22px; font-weight:700; }
-        
         select, input[type=range] { width:100%; background:#000; border:1px solid var(--border); color:#fff; padding:8px; border-radius:4px; margin-top:5px; }
-        
         .btn-group { display:flex; background:#000; border:1px solid var(--border); padding:2px; border-radius:4px; margin-top:5px; }
         .btn { flex:1; text-align:center; padding:6px; font-size:10px; font-weight:600; cursor:pointer; color:var(--text-dim); border-radius:2px; }
         .btn.active { background:var(--border); color:#fff; }
         
-        .reload-btn { font-size:10px; color:var(--accent); cursor:pointer; margin-top:10px; text-decoration:underline; background:none; border:none; padding:0; text-align:left; }
-
-        /* CANVAS */
+        /* LIVE TOGGLE */
+        .live-row { display:flex; align-items:center; justify-content:space-between; background:rgba(0,0,0,0.3); padding:10px; border-radius:6px; border:1px solid var(--border); }
+        .toggle-sw { position:relative; display:inline-block; width:34px; height:20px; }
+        .toggle-sw input { opacity:0; width:0; height:0; }
+        .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#333; transition:.4s; border-radius:20px; }
+        .slider:before { position:absolute; content:""; height:14px; width:14px; left:3px; bottom:3px; background-color:white; transition:.4s; border-radius:50%; }
+        input:checked + .slider { background-color:var(--accent); }
+        input:checked + .slider:before { transform:translateX(14px); }
+
+        .live-dot { width:8px; height:8px; background:#333; border-radius:50%; margin-right:5px; }
+        .live-dot.on { background:#10b981; box-shadow:0 0 8px #10b981; animation:pulse 1.5s infinite; }
+        @keyframes pulse { 0% { opacity:1; } 50% { opacity:0.5; } 100% { opacity:1; } }
+
+        /* CHART */
         .chart-box { flex:1; position:relative; min-height:0; border:1px solid var(--border); background:#000; border-radius:6px; padding:10px; }
-        
-        /* OVERLAYS */
-        .loader { position:absolute; inset:0; background:rgba(9,9,11,0.85); display:none; flex-direction:column; align-items:center; justify-content:center; z-index:50; backdrop-filter:blur(2px); }
+        .loader { position:absolute; inset:0; background:rgba(9,9,11,0.85); display:none; flex-direction:column; align-items:center; justify-content:center; z-index:50; }
         .spin { width:30px; height:30px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:rot 1s linear infinite; }
         @keyframes rot { to { transform:rotate(360deg); } }
     </style>
@@ -238,9 +199,9 @@ FRONTEND_HTML = """
 <body>
 
 <header>
-    <div class="logo">GEX<span>HF</span></div>
+    <div class="logo">GEX<span>LIVE</span></div>
     <div class="search-wrap">
-        <input type="text" class="search-inp" id="sInp" placeholder="Search (e.g. NIFTY, RELIANCE)..." autocomplete="off">
+        <input type="text" class="search-inp" id="sInp" placeholder="Search..." autocomplete="off">
         <div class="results" id="sRes"></div>
     </div>
 </header>
@@ -251,7 +212,22 @@ FRONTEND_HTML = """
         <div class="card" style="border-left:3px solid var(--spot);">
             <div class="lbl">Spot Price</div>
             <div class="val" id="spotPrice">---</div>
-            <div style="font-size:10px; color:var(--text-dim); margin-top:4px;" id="tickerName">BANKNIFTY</div>
+            <div style="font-size:10px; color:var(--text-dim); margin-top:4px; display:flex; justify-content:space-between;">
+                <span id="tickerName">BANKNIFTY</span>
+                <span id="lastUpd">--:--:--</span>
+            </div>
+        </div>
+
+        <!-- LIVE SWITCH -->
+        <div class="live-row">
+            <div style="display:flex; align-items:center;">
+                <div class="live-dot" id="liveDot"></div>
+                <div style="font-size:11px; font-weight:700;">AUTO REFRESH</div>
+            </div>
+            <label class="toggle-sw">
+                <input type="checkbox" id="liveCheck" onchange="toggleLive()">
+                <span class="slider"></span>
+            </label>
         </div>
 
         <!-- CONTROLS -->
@@ -271,26 +247,16 @@ FRONTEND_HTML = """
                 <div class="btn active" id="btnSplit" onclick="setMode('split')">SPLIT</div>
                 <div class="btn" id="btnNet" onclick="setMode('net')">NET</div>
             </div>
-            <div style="margin-top:5px; font-size:9px; color:#555; line-height:1.4;">
-                <b>SPLIT:</b> Call Res. (Red) vs Put Sup. (Green)<br>
-                <b>NET:</b> Combined Dealer Exposure
-            </div>
         </div>
         
-        <!-- DB INFO -->
-        <div style="margin-top:auto; padding-top:20px; border-top:1px solid var(--border);">
-            <div class="lbl">Database Status</div>
-            <div style="font-size:11px; color:var(--text-dim);">Symbols: <span id="dbCount">...</span></div>
-            <button class="reload-btn" onclick="reloadDB()">↻ Update DB (A-Z)</button>
+        <div style="margin-top:auto; font-size:10px; color:#555;">
+            Symbols in DB: <span id="dbCount">...</span> <br>
+            <span style="cursor:pointer; color:var(--accent);" onclick="reloadDB()">[Update List]</span>
         </div>
     </div>
 
     <div class="content">
-        <div class="loader" id="loader">
-            <div class="spin"></div>
-            <div style="margin-top:10px; font-size:11px; color:var(--text-dim);">FETCHING CHAIN DATA...</div>
-        </div>
-
+        <div class="loader" id="loader"><div class="spin"></div></div>
         <div class="chart-box">
             <canvas id="chart"></canvas>
         </div>
@@ -305,118 +271,77 @@ FRONTEND_HTML = """
     let MODE = 'split'; 
     let SYM = 'NIFTY';
     let EXCH = 'NSE';
+    let LIVE_TIMER = null;
 
     const sInp = document.getElementById('sInp');
     const sRes = document.getElementById('sRes');
 
-    // --- STARTUP ---
     window.onload = () => {
         updateDBStats();
-        loadData('NIFTY', 'NSE'); // Load NIFTY by default
+        loadData('NIFTY', 'NSE'); 
     };
 
-    // --- DATABASE ---
-    async function updateDBStats() {
-        try {
-            const r = await fetch('/api/db_status');
-            const d = await r.json();
-            document.getElementById('dbCount').innerText = d.count;
-        } catch {}
-    }
-
-    async function reloadDB() {
-        if(confirm("Start background update of symbol list? This takes about 30 seconds.")) {
-            fetch('/api/reload_db');
-            alert("Update started in background. Check count in a minute.");
-            // Poll for update
-            let i = setInterval(async () => {
-                await updateDBStats();
+    // --- LIVE LOGIC ---
+    function toggleLive() {
+        const isOn = document.getElementById('liveCheck').checked;
+        const dot = document.getElementById('liveDot');
+        
+        if(isOn) {
+            dot.classList.add('on');
+            // Refresh every 5 seconds
+            LIVE_TIMER = setInterval(() => {
+                loadData(SYM, EXCH, true); // true = background refresh
             }, 5000);
-            setTimeout(() => clearInterval(i), 60000);
+        } else {
+            dot.classList.remove('on');
+            if(LIVE_TIMER) clearInterval(LIVE_TIMER);
         }
     }
 
-    // --- SEARCH ---
-    let debounce;
-    sInp.addEventListener('input', (e) => {
-        clearTimeout(debounce);
-        const q = e.target.value;
-        if(q.length < 1) { sRes.style.display='none'; return; }
-        
-        debounce = setTimeout(async () => {
-            const r = await fetch(`/api/search?q=${q}`);
-            const data = await r.json();
-            sRes.innerHTML = '';
-            
-            if(data.length > 0) {
-                sRes.style.display = 'block';
-                data.forEach(item => {
-                    const div = document.createElement('div');
-                    div.className = 'res-item';
-                    div.innerHTML = `<span>${item.symbol}</span><span style="color:#555">${item.exchange}</span>`;
-                    div.onclick = () => {
-                        sRes.style.display = 'none';
-                        sInp.value = item.symbol;
-                        loadData(item.symbol, item.exchange);
-                    };
-                    sRes.appendChild(div);
-                });
-            } else {
-                sRes.style.display = 'none';
-            }
-        }, 300);
-    });
-    
-    // Close search on click away
-    document.addEventListener('click', (e) => {
-        if(!e.target.closest('.search-wrap')) sRes.style.display='none';
-    });
-
-    // --- CORE LOGIC ---
-    function setMode(m) {
-        MODE = m;
-        document.getElementById('btnSplit').className = m==='split' ? 'btn active' : 'btn';
-        document.getElementById('btnNet').className = m==='net' ? 'btn active' : 'btn';
-        render();
-    }
-    
-    function updateRng() {
-        document.getElementById('rngTxt').innerText = document.getElementById('rngInp').value;
-        render();
-    }
-
-    async function loadData(symbol, exchange) {
+    // --- DATA LOADING ---
+    async function loadData(symbol, exchange, isBackground = false) {
         SYM = symbol;
         EXCH = exchange;
         document.getElementById('tickerName').innerText = `${SYM} (${EXCH})`;
-        document.getElementById('loader').style.display = 'flex';
+        
+        // Only show full loader if not a background update
+        if(!isBackground) document.getElementById('loader').style.display = 'flex';
         
         try {
             const res = await fetch(`/api/fetch?symbol=${SYM}&exchange=${EXCH}`);
             const json = await res.json();
             
-            if(!json.payload || !json.payload.chain) throw new Error("No Option Chain Data");
+            if(!json.payload || !json.payload.chain) throw new Error("No Data");
 
             RAW = json.payload;
             SPOT = RAW.underlying?.quote?.last_price || 0;
+            
+            // Update UI
             document.getElementById('spotPrice').innerText = SPOT.toLocaleString();
+            const now = new Date();
+            document.getElementById('lastUpd').innerText = now.toLocaleTimeString();
 
-            // Populate Expiries
+            // Populate Expiries only on first load
             const expSel = document.getElementById('expSel');
-            expSel.innerHTML = '';
-            RAW.chain.forEach((c, i) => {
-                const opt = document.createElement('option');
-                opt.value = i;
-                opt.innerText = c.expiry_date;
-                expSel.appendChild(opt);
-            });
+            if(!isBackground || expSel.options.length === 0) {
+                const currentVal = expSel.value;
+                expSel.innerHTML = '';
+                RAW.chain.forEach((c, i) => {
+                    const opt = document.createElement('option');
+                    opt.value = i;
+                    opt.innerText = c.expiry_date;
+                    expSel.appendChild(opt);
+                });
+                if(currentVal && currentVal < RAW.chain.length) expSel.value = currentVal;
+            }
 
             render();
 
         } catch(e) {
-            alert(e.message);
+            console.error(e);
+            if(!isBackground) alert("Error fetching data");
         } finally {
-            document.getElementById('loader').style.display = 'none';
+            if(!isBackground) document.getElementById('loader').style.display = 'none';
         }
     }
 
@@ -425,6 +350,7 @@ FRONTEND_HTML = """
         
         const expIdx = document.getElementById('expSel').value;
         const range = parseInt(document.getElementById('rngInp').value);
+        if(!RAW.chain[expIdx]) return;
         const chain = RAW.chain[expIdx].options;
 
         // Find ATM
@@ -434,7 +360,6 @@ FRONTEND_HTML = """
             if(diff < min) { min = diff; atmIdx = i; }
         });
 
-        // Slice
         const start = Math.max(0, atmIdx - range);
         const end = Math.min(chain.length, atmIdx + range + 1);
         const view = chain.slice(start, end);
@@ -443,24 +368,56 @@ FRONTEND_HTML = """
 
         view.forEach(o => {
             labels.push(o.strike_price);
-            
-            // GEX Calc
-            // Using API Gamma directly. Factor = Gamma * OI * Spot
             const cG = (o.call?.greeks?.gamma || 0) * (o.call?.quote?.open_interest || 0) * SPOT;
             const pG = (o.put?.greeks?.gamma || 0) * (o.put?.quote?.open_interest || 0) * SPOT;
             
             if(MODE === 'split') {
-                calls.push(cG);       // Positive Y (Red)
-                puts.push(-pG);       // Negative Y (Green)
+                calls.push(cG);       
+                puts.push(-pG);       
             } else {
-                nets.push(cG - pG);   // Net
+                nets.push(cG - pG);   
             }
         });
 
-        // Draw
-        if(CHART) CHART.destroy();
         const ctx = document.getElementById('chart').getContext('2d');
-        
+
+        // SMART UPDATE (Prevents flashing)
+        if(CHART) {
+            CHART.data.labels = labels;
+            CHART.options.plugins.annotation.annotations.line1.value = getSpotX(labels, SPOT);
+            CHART.options.plugins.annotation.annotations.line1.label.content = `SPOT: ${SPOT}`;
+
+            if(MODE === 'split') {
+                CHART.data.datasets[0].data = calls;
+                CHART.data.datasets[0].label = 'Resistance (Call)';
+                CHART.data.datasets[0].backgroundColor = '#ef4444';
+                CHART.data.datasets[1].data = puts;
+                CHART.data.datasets[1].label = 'Support (Put)';
+                CHART.data.datasets[1].backgroundColor = '#10b981';
+                // Ensure 2 datasets exist
+                if(CHART.data.datasets.length < 2) {
+                     // If switching from NET to SPLIT, we might need to recreate logic or just push
+                     CHART.destroy(); // Easier to destroy when switching modes
+                     createChart(ctx, labels, calls, puts, nets);
+                     return;
+                }
+            } else {
+                CHART.data.datasets[0].data = nets;
+                CHART.data.datasets[0].label = 'Net GEX';
+                CHART.data.datasets[0].backgroundColor = nets.map(v => v >= 0 ? '#ef4444' : '#10b981');
+                if(CHART.data.datasets.length > 1) {
+                    CHART.destroy();
+                    createChart(ctx, labels, calls, puts, nets);
+                    return;
+                }
+            }
+            CHART.update('none'); // Update without animation for smooth live feed
+        } else {
+            createChart(ctx, labels, calls, puts, nets);
+        }
+    }
+
+    function createChart(ctx, labels, calls, puts, nets) {
         let datasets = [];
         if(MODE === 'split') {
             datasets = [
@@ -482,6 +439,7 @@ FRONTEND_HTML = """
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
+                animation: false, // Disable initial animation for snappiness
                 interaction: { mode: 'index', intersect: false },
                 plugins: {
                     legend: { display: false },
@@ -489,9 +447,7 @@ FRONTEND_HTML = """
                         backgroundColor: '#27272a',
                         titleColor: '#fff',
                         bodyFont: { family: 'JetBrains Mono' },
-                        callbacks: {
-                            label: (c) => ` ${c.dataset.label}: ${(Math.abs(c.raw)/100000).toFixed(2)} L`
-                        }
+                        callbacks: { label: (c) => ` ${c.dataset.label}: ${(Math.abs(c.raw)/100000).toFixed(2)} L` }
                     },
                     annotation: {
                         annotations: {
@@ -523,6 +479,50 @@ FRONTEND_HTML = """
         }
         return strikes.length/2;
     }
+
+    // Search Logic
+    let debounce;
+    sInp.addEventListener('input', (e) => {
+        clearTimeout(debounce);
+        const q = e.target.value;
+        if(q.length < 1) { sRes.style.display='none'; return; }
+        debounce = setTimeout(async () => {
+            const r = await fetch(`/api/search?q=${q}`);
+            const data = await r.json();
+            sRes.innerHTML = '';
+            if(data.length > 0) {
+                sRes.style.display = 'block';
+                data.forEach(item => {
+                    const div = document.createElement('div');
+                    div.className = 'res-item';
+                    div.innerHTML = `<span>${item.symbol}</span><span style="color:#555">${item.exchange}</span>`;
+                    div.onclick = () => {
+                        sRes.style.display = 'none';
+                        sInp.value = item.symbol;
+                        // Reset Live mode to avoid polling wrong symbol
+                        if(document.getElementById('liveCheck').checked) {
+                            toggleLive(); document.getElementById('liveCheck').click(); 
+                        }
+                        loadData(item.symbol, item.exchange);
+                    };
+                    sRes.appendChild(div);
+                });
+            } else sRes.style.display = 'none';
+        }, 300);
+    });
+    document.addEventListener('click', (e) => { if(!e.target.closest('.search-wrap')) sRes.style.display='none'; });
+
+    // Helper
+    function setMode(m) {
+        MODE = m;
+        document.getElementById('btnSplit').className = m==='split' ? 'btn active' : 'btn';
+        document.getElementById('btnNet').className = m==='net' ? 'btn active' : 'btn';
+        if(CHART) CHART.destroy(); CHART=null; // Force rebuild on mode switch
+        render();
+    }
+    function updateRng() { document.getElementById('rngTxt').innerText = document.getElementById('rngInp').value; render(); }
+    async function updateDBStats() { try { const r = await fetch('/api/db_status'); const d = await r.json(); document.getElementById('dbCount').innerText = d.count; } catch {} }
+    async function reloadDB() { fetch('/api/reload_db'); alert("Update started."); }
 </script>
 </body>
 </html>