Update app.py

app.py

@@ -38,7 +38,6 @@ SYSTEM_STATUS = {
 UPDATE_LOCK = threading.Lock()
 
 # Manual mapping for Index Spot symbols
-# Added BSE Indices (SENSEX, BANKEX)
 INDEX_MAP = {
     "NIFTY": "NSE:NIFTY50-INDEX",
     "BANKNIFTY": "NSE:NIFTYBANK-INDEX",
@@ -52,13 +51,10 @@ INDEX_MAP = {
 def get_root_symbol(desc: str, symbol: str) -> str:
     """Extracts root symbol (e.g. 'RELIANCE', 'SENSEX') from description."""
     try:
-        # Standard Format: "SENSEX 19 JAN 72000 CE" or "RELIANCE 24 JAN..."
         parts = desc.strip().split(' ')
         root = parts[0].upper()
-        # Clean up potential artifacts
         return root.replace(':', '').replace('-', '')
     except:
-        # Fallback to symbol parsing if description fails
         if ':' in symbol:
             return symbol.split(':')[1]
         return symbol
@@ -70,12 +66,12 @@ def update_master_db():
         return
 
     try:
-        SYSTEM_STATUS["message"] = "Downloading Master Data (NSE, MCX, BSE)..."
+        SYSTEM_STATUS["message"] = "Downloading Master Data..."
         print(">>> [BG TASK] STARTING DOWNLOAD...")
         
         headers = { "User-Agent": "Mozilla/5.0" }
         
-        # 1. Download NSE F&O
+        # 1. NSE F&O
         url_nse = "https://public.fyers.in/sym_details/NSE_FO.csv"
         df_nse = pd.read_csv(
             url_nse, usecols=[0, 1, 8, 9, 13], 
@@ -84,7 +80,7 @@ def update_master_db():
         )
         df_nse['Exch'] = 'NSE'
         
-        # 2. Download MCX F&O
+        # 2. MCX F&O
         url_mcx = "https://public.fyers.in/sym_details/MCX_COM.csv"
         df_mcx = pd.read_csv(
             url_mcx, usecols=[0, 1, 8, 9, 13], 
@@ -93,7 +89,7 @@ def update_master_db():
         )
         df_mcx['Exch'] = 'MCX'
 
-        # 3. Download BSE F&O (For SENSEX etc.)
+        # 3. BSE F&O
         url_bse = "https://public.fyers.in/sym_details/BSE_FO.csv"
         df_bse = pd.read_csv(
             url_bse, usecols=[0, 1, 8, 9, 13], 
@@ -104,9 +100,7 @@ def update_master_db():
 
         SYSTEM_STATUS["message"] = "Processing Data..."
         
-        # Merge Dataframes
         df = pd.concat([df_nse, df_mcx, df_bse], ignore_index=True)
-        
         df['Symbol'] = df['Symbol'].astype(str)
         df['Desc'] = df['Desc'].astype(str)
         
@@ -119,21 +113,15 @@ def update_master_db():
             
             root = get_root_symbol(desc, sym)
             
-            # Initialize Root Entry
             if root not in temp_db:
                 spot_sym = ""
-                
-                # Check for Index Map match first
                 if root in INDEX_MAP:
                     spot_sym = INDEX_MAP[root]
                 elif exch == "MCX":
-                    # MCX has no "Equity Spot", usually we track the Future
                     spot_sym = "MCX" 
                 elif exch == "BSE":
-                    # BSE Equity Spot usually "BSE:Symbol"
                     spot_sym = f"BSE:{root}"
                 else:
-                    # NSE Equity Spot
                     spot_sym = f"NSE:{root}-EQ"
                     
                 temp_db[root] = { "spot": spot_sym, "exch": exch, "items": [] }
@@ -146,15 +134,11 @@ def update_master_db():
             strike = 0.0
             opt_type = "FUT"
             
-            # Parse Strike & Option Type
-            # Logic handles "SENSEX 23 JAN 72000 CE"
             if "CE" in sym or "PE" in sym:
                 parts = desc.strip().split(' ')
                 if len(parts) >= 2:
                     try:
-                        # Logic: val is usually 2nd last item
                         val = parts[-2]
-                        # Remove decimal for digit check
                         val_clean = val.replace('.', '', 1)
                         if val_clean.isdigit():
                             strike = float(val)
@@ -166,19 +150,16 @@ def update_master_db():
                 "s": sym, "e": exp, "k": strike, "t": opt_type
             })
 
-        # Final Sort & Search Index Creation
         final_db = {}
         search_list = []
         
         for root, data in temp_db.items():
-            # Sort by Expiry (asc) then Strike (asc)
             sorted_items = sorted(data["items"], key=lambda x: (x['e'], x['k']))
             final_db[root] = { 
                 "spot": data["spot"], 
                 "exch": data["exch"],
                 "items": sorted_items 
             }
-            # Create a rich search object
             search_list.append({
                 "root": root,
                 "exch": data["exch"],
@@ -186,10 +167,8 @@ def update_master_db():
             })
 
         MASTER_DB = final_db
-        # Sort search index alphabetically
         SEARCH_INDEX = sorted(search_list, key=lambda x: x['root'])
         
-        # Save cache
         with open(CACHE_FILE, "w") as f:
             json.dump({"db": final_db, "idx": SEARCH_INDEX}, f)
 
@@ -244,7 +223,6 @@ def home(access_token: Optional[str] = Cookie(None)):
         </div>
         """)
     
-    # Inject token
     return HTMLResponse(HTML_TEMPLATE.replace("{{USER_TOKEN}}", access_token))
 
 @app.get("/callback")
@@ -272,32 +250,17 @@ def logout():
     response.delete_cookie("access_token")
     return response
 
-@app.get("/favicon.ico")
-def favicon():
-    return Response(status_code=204)
-
-# --- API ---
-
 @app.get("/api/status")
 def get_status():
     return JSONResponse(SYSTEM_STATUS)
 
-@app.get("/api/init")
-def legacy_init():
-    return JSONResponse([])
-
 @app.get("/api/search")
 def search_symbol(q: str = Query(..., min_length=1)):
     if not SYSTEM_STATUS["ready"]:
         return JSONResponse([])
     
     query = q.upper()
-    # SEARCH_INDEX is now a list of dicts: {'root': 'NIFTY', 'exch': 'NSE', 'display': 'NIFTY'}
-    
-    # 1. Starts with
     results = [x for x in SEARCH_INDEX if x['root'].startswith(query)]
-    
-    # 2. Contains (if few results)
     if len(results) < 10:
         results += [x for x in SEARCH_INDEX if query in x['root'] and x not in results]
         
@@ -326,34 +289,34 @@ HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>PRO CHAIN (V3)</title>
+    <title>PRO CHAIN V3</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root { 
             --bg: #ffffff; --panel: #f4f6f8; --border: #e0e0e0; 
             --text-main: #1a1a1a; --text-sub: #555555;
             --accent: #2962ff; --green: #00c853; --red: #d50000;
-            --green-soft: rgba(0, 200, 83, 0.3); --red-soft: rgba(213, 0, 0, 0.3);
-            --atm-bg: rgba(41, 98, 255, 0.1);
-            /* Badge Colors */
-            --badge-nse: #00c853;
-            --badge-bse: #ff6d00;
-            --badge-mcx: #2962ff;
+            --green-soft: rgba(0, 200, 83, 0.15); --red-soft: rgba(213, 0, 0, 0.15);
+            --atm-bg: rgba(41, 98, 255, 0.08);
+            --badge-nse: #00c853; --badge-bse: #ff6d00; --badge-mcx: #2962ff;
         }
         * { box-sizing: border-box; }
         body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
 
-        .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; }
-        .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; }
+        .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; }
         
+        .icon-btn { padding: 8px; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-sub); }
+        .icon-btn:hover { background: #f0f0f0; color: var(--text-main); }
+
         .search-box { position: relative; width: 350px; margin-right: 20px; }
-        .search-input { width: 100%; padding: 10px 15px; border: 2px solid var(--border); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-weight: bold; font-size: 14px; outline: none; transition: 0.3s; }
-        .search-input:focus { border-color: var(--accent); }
-        .search-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid var(--border); border-top: none; max-height: 400px; overflow-y: auto; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-radius: 0 0 6px 6px; }
+        .search-input { width: 100%; padding: 10px 15px; border: 1px solid var(--border); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-weight: bold; font-size: 14px; outline: none; transition: 0.3s; background: #f9f9f9; }
+        .search-input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.1); }
+        .search-dropdown { position: absolute; top: 105%; left: 0; width: 100%; background: white; border: 1px solid var(--border); max-height: 400px; overflow-y: auto; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-radius: 6px; z-index: 100; }
         
-        .search-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
+        .search-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f5f5f5; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
         .search-item:hover { background: #f0f7ff; color: var(--accent); }
         
         .exch-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; color: white; font-weight: 800; min-width: 40px; text-align: center; }
@@ -362,80 +325,135 @@ HTML_TEMPLATE = """
         .badge-MCX { background: var(--badge-mcx); }
 
         .grid-layout { display: flex; height: calc(100vh - 60px); }
+        
+        /* Chain Panel */
         .chain-panel { flex: 1; display: flex; flex-direction: column; position: relative; }
-        .chain-header { display: grid; grid-template-columns: 1fr 180px 1fr; padding: 10px 0; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-align: center; color: var(--text-sub); }
-        .chain-body { flex: 1; overflow-y: auto; background: #fff; }
+        .chain-header { display: grid; grid-template-columns: 1fr 160px 1fr; padding: 12px 0; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 800; text-align: center; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px; }
+        .chain-body { flex: 1; overflow-y: auto; background: #fff; scroll-behavior: smooth; }
         
-        .row { display: grid; grid-template-columns: 1fr 180px 1fr; border-bottom: 1px solid #f0f0f0; height: 40px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
+        .row { display: grid; grid-template-columns: 1fr 160px 1fr; border-bottom: 1px solid #f0f0f0; height: 42px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
+        .row:hover { background: #fafafa; }
         .row.atm { background: var(--atm-bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
         
         .mid-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); cursor: crosshair; }
-        .visual-bar { position: absolute; top: 6px; bottom: 6px; z-index: 0; border-radius: 4px; transition: 0.3s; opacity: 0.8; }
-        .strike-txt { z-index: 2; font-weight: 800; font-size: 13px; }
-        .delta-txt { z-index: 2; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.7); padding: 0 4px; border-radius: 3px; }
+        .visual-bar { position: absolute; top: 8px; bottom: 8px; z-index: 0; border-radius: 4px; transition: width 0.3s, left 0.3s; opacity: 0.8; }
+        .strike-txt { z-index: 2; font-weight: 800; font-size: 13px; color: var(--text-main); }
+        .delta-txt { z-index: 2; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.85); padding: 0 5px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-top: -2px; }
         
-        .side-col { padding: 0 15px; display: flex; justify-content: space-between; color: #666; font-size: 11px; }
+        .side-col { padding: 0 15px; display: flex; justify-content: space-between; color: var(--text-sub); font-size: 11px; font-weight: 600; }
+        .col-val { font-weight: 700; color: var(--text-main); }
         
-        .fut-panel { width: 280px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
-        .fut-card { padding: 12px; background: #fff; border-bottom: 1px solid var(--border); }
-        .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 5px; }
+        /* Futures / Sidebar Panel */
+        .fut-panel { width: 300px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
         
-        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); z-index: 1000; display: none; justify-content: center; align-items: center; }
-        .modal-box { background: #fff; width: 400px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 20px; max-height: 80vh; display:flex; flex-direction:column;}
-        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; overflow-y: auto; }
-        .exp-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 4px; cursor: pointer; font-weight:600; font-size:12px; }
-        .exp-btn:hover { background: #f0f7ff; border-color: var(--accent); }
-        .exp-btn.active { background: var(--accent); color: white; }
+        .panel-section { padding: 15px; border-bottom: 1px solid var(--border); background: #fff; margin-bottom: 10px; }
+        .panel-title { font-size: 11px; font-weight: 800; color: #888; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; display:flex; justify-content:space-between; align-items:center; }
         
+        .fut-card { padding: 12px; background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
+        .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 8px; }
+        
+        .netflow-card { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid var(--border); text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
+        .nf-val { font-size: 24px; font-family: 'JetBrains Mono'; font-weight: 800; margin: 10px 0; }
+        .nf-sub { font-size: 10px; color: #888; font-weight: 600; }
+        
+        /* Modals */
+        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
+        .modal-box { background: #fff; width: 400px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); padding: 25px; display:flex; flex-direction:column; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+        
+        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; max-height: 300px; overflow-y: auto; }
+        .opt-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 6px; cursor: pointer; font-weight:600; font-size:12px; transition:0.2s; background:#f9f9f9; }
+        .opt-btn:hover { background: #fff; border-color: var(--accent); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
+        .opt-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
+        
+        .inp-group { display:flex; gap:10px; margin-top:15px; }
+        .modal-inp { flex:1; padding:10px; border:1px solid #ddd; border-radius:6px; font-family:'JetBrains Mono'; font-weight:bold; }
+        .modal-action { background:var(--accent); color:white; border:none; padding:10px 20px; border-radius:6px; font-weight:bold; cursor:pointer; }
+        
+        /* Loader */
         .loader-ov { position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index: 9999; }
-        .spinner { width: 30px; height: 30px; border: 4px solid #f3f3f3; border-top: 4px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
+        .spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 15px; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         
         @keyframes blink { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
-        .live { animation: blink 1s infinite; background: var(--green) !important; }
-        .spin-icon { animation: spin 1s linear infinite; }
+        .live-dot { width:8px; height:8px; background:#ccc; border-radius:50%; transition:0.3s; }
+        .live-dot.active { background: var(--green); animation: blink 1.5s infinite; box-shadow: 0 0 5px var(--green); }
+        .live-dot.error { background: var(--red); }
+        
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #bbb; }
     </style>
 </head>
 <body>
 
+<!-- LOADER -->
 <div class="loader-ov" id="loader">
     <div class="spinner"></div>
-    <div id="loaderMsg" style="font-weight:700; color:var(--text-main); font-size:14px;">CONNECTING...</div>
+    <div id="loaderMsg" style="font-weight:700; color:var(--text-main); font-size:14px; letter-spacing:1px;">CONNECTING...</div>
 </div>
 
+<!-- EXPIRY MODAL -->
 <div class="modal" id="expModal">
     <div class="modal-box">
-        <div style="display:flex; justify-content:space-between; font-weight:700; border-bottom:1px solid #eee; padding-bottom:10px;">
-            <span id="expTitle">SELECT EXPIRY</span>
-            <span style="cursor:pointer" onclick="closeModal()">✕</span>
+        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
+            <span>SELECT EXPIRY</span>
+            <span style="cursor:pointer; color:#999;" onclick="closeModal('expModal')">✕</span>
         </div>
         <div class="modal-grid" id="expGrid"></div>
     </div>
 </div>
 
+<!-- SETTINGS MODAL -->
+<div class="modal" id="setModal">
+    <div class="modal-box" style="width:350px;">
+        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
+            <span>DASHBOARD SETTINGS</span>
+            <span style="cursor:pointer; color:#999;" onclick="closeModal('setModal')">✕</span>
+        </div>
+        <div style="margin-top:20px;">
+            <label style="font-size:12px; font-weight:700; color:#666; display:block; margin-bottom:5px;">NET FLOW RANGE (STRIKES)</label>
+            <div style="font-size:11px; color:#999; margin-bottom:10px;">Calculates total Put-Call flow for strikes above/below ATM.</div>
+            <div class="inp-group">
+                <input type="number" id="rangeInp" class="modal-inp" value="10" min="1" max="50">
+                <button class="modal-action" onclick="saveSettings()">SAVE</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- TOP NAV -->
 <div class="top-nav">
     <div style="display:flex; align-items:center;">
         <div class="search-box">
-            <input type="text" class="search-input" id="searchInp" placeholder="SEARCH (e.g., SENSEX, NIFTY)..." autocomplete="off">
+            <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="btn" onclick="refreshDB()" id="refreshBtn">
-            <svg id="refIcon" width="14" height="14" 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>
-            RELOAD DB
+        <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>
+        
+        <button class="icon-btn" onclick="openSettings()" title="Settings" style="margin-left:5px;">
+            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
         </button>
     </div>
     
     <div style="display:flex; gap:20px; align-items:center;">
         <div style="text-align:right;">
-            <div style="font-size:10px; font-weight:700; color:#888;" id="spotLabel">SPOT</div>
-            <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:16px;">0.00</div>
+            <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>
         </div>
         <button class="btn" onclick="document.getElementById('expModal').style.display='flex'">
-            <span style="color:#888">EXP:</span> <span id="selExpTxt">SELECT</span>
+            <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>
+        <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>
-        <button class="btn" onclick="location.href='/logout'" style="border-color:var(--red); color:var(--red);">LOGOUT</button>
-        <div id="statusDot" style="width:10px; height:10px; background:#ccc; border-radius:50%;"></div>
     </div>
 </div>
 
@@ -443,17 +461,35 @@ HTML_TEMPLATE = """
     <div class="chain-panel">
         <div class="chain-header">
             <div>CALL SELLERS (OI)</div>
-            <div>NET FLOW (PUT-CALL)</div>
+            <div>NET FLOW (PUT - CALL)</div>
             <div>PUT SELLERS (OI)</div>
         </div>
         <div class="chain-body" id="chainBody">
-            <div style="padding:40px; text-align:center; color:#999; font-weight:600;">USE SEARCH TO LOAD A SYMBOL</div>
+            <div style="padding:40px; text-align:center; color:#999; font-weight:600; font-size:14px;">USE SEARCH BAR TO LOAD DATA</div>
         </div>
     </div>
     
     <div class="fut-panel">
-        <div style="padding:15px; font-weight:700; border-bottom:1px solid var(--border); background:#fff;">FUTURES</div>
-        <div id="futBody"></div>
+        
+        <!-- NET FLOW CARD -->
+        <div class="panel-section">
+            <div class="panel-title">
+                <span>NET FLOW</span>
+                <span id="nfRangeLabel" style="background:#eee; padding:2px 6px; border-radius:4px; font-size:9px;">ATM ±10</span>
+            </div>
+            <div class="netflow-card">
+                <div class="nf-val" id="totalNetFlow">0</div>
+                <div class="nf-sub">Put Sell - Call Sell (Cumulative)</div>
+                <div id="nfSignal" style="font-size:10px; font-weight:800; margin-top:5px; text-transform:uppercase;">NEUTRAL</div>
+            </div>
+        </div>
+
+        <!-- FUTURES CARD -->
+        <div class="panel-section">
+            <div class="panel-title">FUTURES CONTRACTS</div>
+            <div id="futBody"></div>
+        </div>
+
     </div>
 </div>
 
@@ -470,9 +506,15 @@ HTML_TEMPLATE = """
     let POLLER = null;
     let IS_POLLING = false;
     let SEARCH_TIMER = null;
+    let ATM_STRIKE = 0;
+
+    // Settings
+    let SETTING_RANGE = parseInt(localStorage.getItem('nf_range')) || 10;
 
     window.onload = () => { 
         if(AUTH_TOKEN.indexOf("{{") !== -1) { alert("Auth Error"); return; }
+        document.getElementById('rangeInp').value = SETTING_RANGE;
+        document.getElementById('nfRangeLabel').innerText = `ATM ±${SETTING_RANGE}`;
         checkStatus();
         
         const inp = document.getElementById('searchInp');
@@ -485,6 +527,26 @@ HTML_TEMPLATE = """
         });
     };
 
+    function openSettings() {
+        document.getElementById('setModal').style.display = 'flex';
+    }
+
+    function saveSettings() {
+        const val = parseInt(document.getElementById('rangeInp').value);
+        if(val > 0 && val <= 50) {
+            SETTING_RANGE = val;
+            localStorage.setItem('nf_range', val);
+            document.getElementById('nfRangeLabel').innerText = `ATM ±${SETTING_RANGE}`;
+            closeModal('setModal');
+            // Force data refresh to include new range immediately
+            pollData(); 
+        } else {
+            alert("Please enter a range between 1 and 50");
+        }
+    }
+
+    function closeModal(id) { document.getElementById(id).style.display = 'none'; }
+
     async function checkStatus() {
         try {
             const res = await fetch('/api/status');
@@ -501,6 +563,7 @@ HTML_TEMPLATE = """
 
     async function refreshDB() {
         if(!confirm("Download fresh Master Data (NSE, MCX, BSE)? This takes ~15s.")) return;
+        document.getElementById('loaderMsg').innerText = "DOWNLOADING...";
         document.getElementById('loader').style.display = 'flex';
         await fetch('/api/refresh');
         checkStatus();
@@ -512,7 +575,6 @@ HTML_TEMPLATE = """
         try {
             const res = await fetch(`/api/search?q=${q}`);
             const data = await res.json();
-            // Data is now list of {root, exch, display}
             resDiv.innerHTML = data.map(item => 
                 `<div class="search-item" onclick="loadSymbol('${item.root}')">
                     <span>${item.display}</span>
@@ -538,15 +600,15 @@ HTML_TEMPLATE = """
             CHAIN_DATA = data.items;
             SPOT_SYM = data.spot;
 
-            // Sort futures: Filter items with type 'FUT'
+            // Handle Futures sorting
             FUT_SYMS = CHAIN_DATA.filter(x => x.t === 'FUT').sort((a,b) => a.e - b.e).slice(0, 3);
             
-            // Handle MCX specific spot logic
+            // Handle MCX specific spot logic (Use Near Future as Spot)
             if(SPOT_SYM === "MCX" && FUT_SYMS.length > 0) {
                 SPOT_SYM = FUT_SYMS[0].s; 
             }
 
-            document.getElementById('spotLabel').innerText = (SPOT_SYM.includes('INDEX') || SPOT_SYM.includes('-EQ') || SPOT_SYM.startsWith('BSE:')) ? "SPOT" : "FUT REF";
+            document.getElementById('spotLabel').innerText = (SPOT_SYM.includes('INDEX') || SPOT_SYM.includes('-EQ') || SPOT_SYM.startsWith('BSE:')) ? "SPOT PRICE" : "FUT REFERENCE";
 
             setupExpiries();
             document.getElementById('loader').style.display = 'none';
@@ -564,10 +626,7 @@ HTML_TEMPLATE = """
         
         const validExps = exps.filter(ts => ts > today);
         if(validExps.length === 0) { 
-            alert("No active options found for this symbol."); 
-            // Still render Futures if available
             document.getElementById('chainBody').innerHTML = '<div style="padding:20px; text-align:center;">NO OPTIONS DATA</div>';
-            updateUI({}); 
             return; 
         }
         
@@ -577,7 +636,7 @@ HTML_TEMPLATE = """
         const grid = document.getElementById('expGrid');
         grid.innerHTML = validExps.map(ts => {
             const dStr = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
-            return `<div class="exp-btn" onclick="selectExp(${ts})">${dStr}</div>`;
+            return `<div class="opt-btn ${ts===ACTIVE_EXP?'active':''}" onclick="selectExp(${ts})">${dStr}</div>`;
         }).join('');
         
         buildChain();
@@ -586,7 +645,14 @@ HTML_TEMPLATE = """
     function selectExp(ts) {
         ACTIVE_EXP = ts;
         updateExpText(ts);
-        closeModal();
+        closeModal('expModal');
+        // Update active class in modal
+        document.querySelectorAll('.opt-btn').forEach(b => {
+            if(b.innerText === new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'})) 
+                b.classList.add('active'); 
+            else 
+                b.classList.remove('active');
+        });
         buildChain();
     }
     
@@ -595,8 +661,6 @@ HTML_TEMPLATE = """
         document.getElementById('selExpTxt').innerText = dStr;
     }
     
-    function closeModal() { document.getElementById('expModal').style.display = 'none'; }
-
     function buildChain() {
         const body = document.getElementById('chainBody');
         const relevant = CHAIN_DATA.filter(x => x.e === ACTIVE_EXP && (x.t === 'CE' || x.t === 'PE'));
@@ -606,13 +670,13 @@ HTML_TEMPLATE = """
         
         body.innerHTML = strikes.map(k => `
             <div class="row" id="row-${k}" data-k="${k}">
-                <div class="side-col" id="ce-${k}"><span>-</span><span>-</span></div>
+                <div class="side-col" id="ce-${k}"><span>-</span><span class="col-val">-</span></div>
                 <div class="mid-col">
                     <div class="visual-bar" id="bar-${k}"></div>
                     <span class="strike-txt">${k}</span>
                     <span class="delta-txt" id="val-${k}">-</span>
                 </div>
-                <div class="side-col" id="pe-${k}"><span>-</span><span>-</span></div>
+                <div class="side-col" id="pe-${k}"><span class="col-val">-</span><span>-</span></div>
             </div>
         `).join('');
         
@@ -626,6 +690,7 @@ HTML_TEMPLATE = """
         pollData();
     }
 
+    // Main Data Fetching Logic
     async function pollData() {
         if(IS_POLLING || !CURRENT_ROOT) return;
         IS_POLLING = true;
@@ -633,45 +698,52 @@ HTML_TEMPLATE = """
         try {
             let symbolsToFetch = [SPOT_SYM, ...FUT_SYMS.map(x => x.s)];
             
-            // Logic to fetch only visible/near options
-            if(SPOT_PRICE > 0) {
-                const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
-                if(kList.length > 0) {
-                    let closestK = kList[0], minDiff = 999999;
-                    kList.forEach(k => {
-                       const diff = Math.abs(SPOT_PRICE - k);
-                       if(diff < minDiff) { minDiff = diff; closestK = k; }
-                    });
-                    
-                    document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
-                    const atmRow = document.getElementById(`row-${closestK}`);
-                    if(atmRow) {
-                        atmRow.classList.add('atm');
-                        if(!window.scrolled) { atmRow.scrollIntoView({block:'center'}); window.scrolled = true; }
-                    }
-                    
-                    const centerIdx = kList.indexOf(closestK);
-                    const start = Math.max(0, centerIdx - 30);
-                    const end = Math.min(kList.length, centerIdx + 30);
-                    const viewKs = kList.slice(start, end);
-                    
-                    OPT_SYMS.forEach(o => {
-                        if(viewKs.includes(o.k)) symbolsToFetch.push(o.s);
-                    });
+            // Determine ATM and Viewport
+            const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
+            
+            if(kList.length > 0) {
+                let closestK = kList[0], minDiff = 999999;
+                const refPrice = SPOT_PRICE > 0 ? SPOT_PRICE : kList[Math.floor(kList.length/2)];
+                
+                let atmIdx = 0;
+                kList.forEach((k, idx) => {
+                    const diff = Math.abs(refPrice - k);
+                    if(diff < minDiff) { minDiff = diff; closestK = k; atmIdx = idx; }
+                });
+                
+                ATM_STRIKE = closestK;
+                
+                // Highlight ATM
+                document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
+                const atmRow = document.getElementById(`row-${closestK}`);
+                if(atmRow) {
+                    atmRow.classList.add('atm');
+                    if(!window.scrolled) { atmRow.scrollIntoView({block:'center'}); window.scrolled = true; }
                 }
-            } else {
-                 // Fallback if no spot price yet (initial load)
-                 const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
-                 const mid = Math.floor(kList.length/2);
-                 const viewKs = kList.slice(Math.max(0, mid-30), mid+30);
-                 OPT_SYMS.forEach(o => { if(viewKs.includes(o.k)) symbolsToFetch.push(o.s); });
+
+                // 1. Fetch data for VIEWPORT (what user sees)
+                const start = Math.max(0, atmIdx - 20);
+                const end = Math.min(kList.length, atmIdx + 20);
+                const viewKs = kList.slice(start, end);
+
+                // 2. Fetch data for NET FLOW CALCULATION (User Setting Range)
+                const rangeStart = Math.max(0, atmIdx - SETTING_RANGE);
+                const rangeEnd = Math.min(kList.length, atmIdx + SETTING_RANGE + 1);
+                const calcKs = kList.slice(rangeStart, rangeEnd);
+                
+                // Combine keys
+                const allNeededKs = new Set([...viewKs, ...calcKs]);
+
+                OPT_SYMS.forEach(o => {
+                    if(allNeededKs.has(o.k)) symbolsToFetch.push(o.s);
+                });
             }
 
             const uniqueSyms = [...new Set(symbolsToFetch)].filter(s => s && s.length > 2);
             if(uniqueSyms.length === 0) return;
             
             const url = `https://api-t1.fyers.in/data/depth?symbol=${uniqueSyms.join(',')}&ohlcv_flag=1`;
-            const res = await fetch(url, { headers: { 'Authorization': AUTH_TOKEN, 'Content-Type': 'application/json' }});
+            const res = await fetch(url, { headers: { 'Authorization': AUTH_TOKEN }});
             
             if(res.status === 401) { location.href = '/logout'; return; }
             
@@ -679,24 +751,28 @@ HTML_TEMPLATE = """
             if(json.s === 'ok') {
                 updateUI(json.d);
                 const dot = document.getElementById('statusDot');
-                dot.style.background = 'var(--green)';
-                dot.classList.add('live');
-                setTimeout(()=>dot.classList.remove('live'), 500);
+                dot.classList.add('active');
+                dot.classList.remove('error');
             }
-        } catch(e) { console.error(e); document.getElementById('statusDot').style.background = 'var(--red)'; } 
+        } catch(e) { 
+            console.error(e); 
+            const dot = document.getElementById('statusDot');
+            dot.classList.remove('active');
+            dot.classList.add('error');
+        } 
         finally { IS_POLLING = false; }
     }
 
     function updateUI(data) {
-        // Fix: Check if data exists and ltp is a valid number
+        // 1. 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);
         }
         
+        // 2. Update Futures
         const futHTML = FUT_SYMS.map(f => {
             const d = data[f.s];
-            // Fix: Check if future data and ltp are valid
             if(!d || typeof d.ltp !== 'number') return '';
             const dt = new Date(f.e*1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'});
             const tot = (d.totalbuyqty + d.totalsellqty) || 1;
@@ -710,51 +786,94 @@ HTML_TEMPLATE = """
                     <div style="width:${bPct}%; background:var(--green)"></div>
                     <div style="width:${100-bPct}%; background:var(--red)"></div>
                 </div>
-                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:2px;">
+                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:4px;">
                     <span>B: ${fmt(d.totalbuyqty)}</span> <span>S: ${fmt(d.totalsellqty)}</span>
                 </div>
             </div>`;
         }).join('');
         if(futHTML) document.getElementById('futBody').innerHTML = futHTML;
 
+        // 3. Process Options & Calculate Net Flow
         const rowData = {};
-        for(const [sym, d] of Object.entries(data)) {
-            const meta = OPT_SYMS.find(x => x.s === sym);
-            if(!meta) continue;
-            if(!rowData[meta.k]) rowData[meta.k] = { ce:0, pe:0 };
-            if(meta.t === 'CE') rowData[meta.k].ce = d.totalsellqty;
-            if(meta.t === 'PE') rowData[meta.k].pe = d.totalsellqty;
-        }
         
+        // We iterate through OPT_SYMS which is filtered by expiry
+        for(const item of OPT_SYMS) {
+            const d = data[item.s];
+            if(!d) continue;
+
+            if(!rowData[item.k]) rowData[item.k] = { ce:0, pe:0 };
+            
+            if(item.t === 'CE') rowData[item.k].ce = d.totalsellqty;
+            if(item.t === 'PE') rowData[item.k].pe = d.totalsellqty;
+        }
+
+        // --- VISUALIZATION UPDATE ---
         let maxDiff = 0;
         for(const k in rowData) maxDiff = Math.max(maxDiff, Math.abs(rowData[k].pe - rowData[k].ce));
 
         for(const k in rowData) {
             const r = rowData[k];
             const delta = r.pe - r.ce;
+            
+            // Only update DOM if element exists (visible viewport)
             const ceEl = document.getElementById(`ce-${k}`);
-            const peEl = document.getElementById(`pe-${k}`);
-            if(ceEl) ceEl.innerHTML = `<span>S: <strong>${fmt(r.ce)}</strong></span>`;
-            if(peEl) peEl.innerHTML = `<span>S: <strong>${fmt(r.pe)}</strong></span>`;
+            if(ceEl) {
+                ceEl.querySelector('.col-val').innerText = fmt(r.ce);
+                document.getElementById(`pe-${k}`).querySelector('.col-val').innerText = fmt(r.pe);
+                
+                const bar = document.getElementById(`bar-${k}`);
+                const val = document.getElementById(`val-${k}`);
+                
+                if(maxDiff > 0) {
+                    const pct = (Math.abs(delta) / maxDiff) * 100;
+                    if(delta >= 0) {
+                        bar.style.background = 'var(--green-soft)';
+                        bar.style.left = '50%';
+                        bar.style.width = (pct/2) + '%';
+                        val.style.color = 'var(--green)';
+                        val.innerText = "+" + fmt(delta);
+                    } else {
+                        bar.style.background = 'var(--red-soft)';
+                        bar.style.left = (50 - (pct/2)) + '%';
+                        bar.style.width = (pct/2) + '%';
+                        val.style.color = 'var(--red)';
+                        val.innerText = fmt(delta);
+                    }
+                }
+            }
+        }
+
+        // --- NET FLOW CALCULATION (ATM +/- Setting) ---
+        if(ATM_STRIKE > 0) {
+            let totalFlow = 0;
+            const kList = Object.keys(rowData).map(parseFloat).sort((a,b)=>a-b);
+            const atmIdx = kList.indexOf(ATM_STRIKE);
             
-            const bar = document.getElementById(`bar-${k}`);
-            const val = document.getElementById(`val-${k}`);
-            if(bar && maxDiff > 0) {
-                const pct = (Math.abs(delta) / maxDiff) * 100;
-                if(delta >= 0) {
-                    bar.style.background = 'var(--green-soft)';
-                    bar.style.left = '50%';
-                    bar.style.width = (pct/2) + '%';
-                    val.style.color = 'var(--green)';
-                    val.innerText = "+" + fmt(delta);
-                } else {
-                    bar.style.background = 'var(--red-soft)';
-                    bar.style.left = (50 - (pct/2)) + '%';
-                    bar.style.width = (pct/2) + '%';
-                    val.style.color = 'var(--red)';
-                    val.innerText = fmt(delta);
+            if(atmIdx !== -1) {
+                const start = Math.max(0, atmIdx - SETTING_RANGE);
+                const end = Math.min(kList.length, atmIdx + SETTING_RANGE + 1);
+                
+                for(let i=start; i<end; i++) {
+                    const k = kList[i];
+                    if(rowData[k]) {
+                        totalFlow += (rowData[k].pe - rowData[k].ce);
+                    }
                 }
             }
+
+            const nfEl = document.getElementById('totalNetFlow');
+            const nfSig = document.getElementById('nfSignal');
+            
+            nfEl.innerText = (totalFlow > 0 ? "+" : "") + fmt(totalFlow);
+            nfEl.style.color = totalFlow >= 0 ? 'var(--green)' : 'var(--red)';
+            
+            if(totalFlow > 0) {
+                nfSig.innerText = "BULLISH (PUTS DOMINANT)";
+                nfSig.style.color = "var(--green)";
+            } else {
+                nfSig.innerText = "BEARISH (CALLS DOMINANT)";
+                nfSig.style.color = "var(--red)";
+            }
         }
     }
 
@@ -764,7 +883,7 @@ HTML_TEMPLATE = """
         if(abs>=10000000) return (n/10000000).toFixed(2)+'Cr';
         if(abs>=100000) return (n/100000).toFixed(2)+'L';
         if(abs>=1000) return (n/1000).toFixed(1)+'k';
-        return n;
+        return n.toLocaleString();
     }
 </script>
 </body>