Update app.py

app.py

@@ -2,10 +2,10 @@ import requests
 import uvicorn
 import hashlib
 import json
-import threading
 import time
+import threading
+import urllib.parse
 from datetime import datetime, timedelta
-from dateutil.relativedelta import relativedelta
 from fastapi import FastAPI, Request, Response, Cookie
 from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
 from typing import Optional
@@ -20,71 +20,122 @@ REDIRECT_URI = "https://topsecrettraders-depthchainindiaq.hf.space/callback"
 app = FastAPI()
 
 # ==========================================
-# 2. DATA ENGINE
+# 2. ROBUST DATA ENGINE
 # ==========================================
 
-SYSTEM_STATUS = { "ready": False, "msg": "Initializing..." }
+SYSTEM_STATUS = { "ready": False, "msg": "Booting..." }
 DB = { "index": [], "stocks": [] } 
 UPDATE_LOCK = threading.Lock()
 
-# Fallback List
-NIFTY_50_ROOTS = [
-    "HDFCBANK", "RELIANCE", "ICICIBANK", "INFY", "ITC", "TCS", "LT", "AXISBANK",
-    "KOTAKBANK", "SBIN", "BHARTIARTL", "BAJFINANCE", "ASIANPAINT", "MARUTI", "HCLTECH",
-    "TITAN", "SUNPHARMA", "TATASTEEL", "NTPC", "ULTRACEMCO", "TATAMOTORS", "POWERGRID",
-    "INDUSINDBK", "BAJAJFINSV", "HINDUNILVR", "NESTLEIND", "GRASIM", "JSWSTEEL", "TECHM",
-    "ADANIENT", "HINDALCO", "CIPLA", "DRREDDY", "WIPRO", "SBILIFE", "COALINDIA",
-    "TATACONSUM", "HDFCLIFE", "ADANIPORTS", "BAJAJ-AUTO", "APOLLOHOSP", "EICHERMOT",
-    "DIVISLAB", "BPCL", "ONGC", "HEROMOTOCO", "BRITANNIA", "UPL", "LTIM", "M&M"
-]
+# BACKUP DATA (Used if NSE blocks the connection)
+BACKUP_NIFTY_50 = {
+    "HDFCBANK": 13.52, "RELIANCE": 9.81, "ICICIBANK": 7.89, "INFY": 5.80, "ITC": 4.41,
+    "TCS": 4.02, "L&T": 3.66, "AXISBANK": 3.23, "KOTAKBANK": 2.92, "SBIN": 2.89,
+    "BHARTIARTL": 2.68, "BAJFINANCE": 2.30, "ASIANPAINT": 1.76, "MARUTI": 1.57,
+    "HCLTECH": 1.54, "TITAN": 1.48, "SUNPHARMA": 1.40, "TATASTEEL": 1.34, "NTPC": 1.18,
+    "ULTRACEMO": 1.11, "TATAMOTORS": 1.09, "POWERGRID": 1.04, "INDUSINDBK": 0.98,
+    "BAJAJFINSV": 0.86, "HINDUNILVR": 2.50, "NESTLEIND": 0.91, "GRASIM": 0.83,
+    "JSWSTEEL": 0.79, "TECHM": 0.78, "ADANIENT": 0.75, "HINDALCO": 0.72, "CIPLA": 0.69,
+    "DRREDDY": 0.65, "WIPRO": 0.64, "SBILIFE": 0.63, "COALINDIA": 0.60, "TATACONSUM": 0.59,
+    "HDFCLIFE": 0.58, "ADANIPORTS": 0.57, "BAJAJ-AUTO": 0.56, "APOLLOHOSP": 0.55,
+    "EICHERMOT": 0.52, "DIVISLAB": 0.47, "BPCL": 0.44, "ONGC": 0.42, "HEROMOTOCO": 0.38,
+    "BRITANNIA": 0.36, "UPL": 0.35, "LTIM": 0.35, "M&M": 2.6
+}
 
 def fetch_nse_weights():
+    """Tries to get live weights, returns fallback if fails"""
     try:
-        headers = { 'User-Agent': 'Mozilla/5.0' }
+        headers = { 
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
+            'Referer': 'https://www.nseindia.com/'
+        }
         s = requests.Session()
-        s.get("https://www.nseindia.com", headers=headers, timeout=5)
+        s.get("https://www.nseindia.com", headers=headers, timeout=3) # Fast timeout
         r = s.get("https://www.nseindia.com/api/equity-stockIndices?index=NIFTY 50", headers=headers, timeout=5)
+        
         if r.status_code == 200:
             data = r.json().get('data', [])
             stocks = [x for x in data if x['priority'] == 0]
             tot = sum(x.get('ffmc', 0) for x in stocks)
-            # Return rounded weights
-            return {x['symbol']: round((x.get('ffmc', 0)/tot)*100, 2) for x in stocks}
-    except: pass
-    return {}
+            if tot > 0:
+                return {x['symbol']: (x.get('ffmc', 0)/tot)*100 for x in stocks}
+    except Exception as e:
+        print(f"NSE Fetch Error (Using Backup): {e}")
+    return BACKUP_NIFTY_50
 
 def get_expiry_tag(offset=0):
-    dt = datetime.now()
-    if dt.day > 26 and offset == 0:
-        dt = dt + relativedelta(months=1)
-    tgt = dt + relativedelta(months=offset)
-    return f"{tgt.strftime('%y')}{tgt.strftime('%b').upper()}"
+    """
+    Generates '26FEB' style tag.
+    Logic: If today > 26th, we assume the 'current' month is actually next month.
+    """
+    now = datetime.now()
+    # Move to the target month based on offset
+    # If today is late in the month (e.g. 30th), 'Current' expiry is likely next month
+    if now.day > 26: 
+        offset += 1
+    
+    # Calculate Year and Month safely without dateutil
+    year = now.year
+    month = now.month + offset
+    
+    # Handle year rollover
+    while month > 12:
+        month -= 12
+        year += 1
+    
+    # Create date object to get Month Name
+    d = datetime(year, month, 1)
+    
+    # Format: 26FEB (YYMON)
+    yy = d.strftime("%y")
+    mon = d.strftime("%b").upper()
+    return f"{yy}{mon}"
 
 def update_db():
     global SYSTEM_STATUS, DB
     if not UPDATE_LOCK.acquire(blocking=False): return
+    
     try:
+        SYSTEM_STATUS["msg"] = "Updating Data..."
+        
+        # 1. Get Weights (Live or Backup)
         weights = fetch_nse_weights()
-        roots = list(weights.keys()) if weights else NIFTY_50_ROOTS
+        roots = list(weights.keys())
         
+        # 2. Construct Stocks
         final_stocks = []
         for root in roots:
             futs = []
-            for i in range(3):
+            for i in range(3): # Current, Next, Far
                 tag = get_expiry_tag(i)
+                # Correctly format M&M to match Fyers (NSE:M&M...)
                 futs.append({"s": f"NSE:{root}{tag}FUT"})
-            final_stocks.append({"r": root, "w": weights.get(root, 0), "f": futs})
+                
+            final_stocks.append({
+                "r": root,
+                "w": weights.get(root, 0),
+                "f": futs
+            })
             
+        # 3. Construct Index
         idx_futs = []
         for i in range(3):
             tag = get_expiry_tag(i)
             idx_futs.append({"s": f"NSE:NIFTY{tag}FUT"})
 
+        # 4. Sort by Weightage
         final_stocks.sort(key=lambda x: x['w'], reverse=True)
+
         DB = { "index": idx_futs, "stocks": final_stocks }
         SYSTEM_STATUS["ready"] = True
-    except: pass
-    finally: UPDATE_LOCK.release()
+        SYSTEM_STATUS["msg"] = "Ready"
+        print(f"DB Updated: {len(final_stocks)} Stocks Loaded")
+        
+    except Exception as e:
+        print(f"DB Error: {e}")
+        SYSTEM_STATUS["msg"] = "DB Error"
+    finally:
+        UPDATE_LOCK.release()
 
 @app.on_event("startup")
 def startup():
@@ -92,7 +143,7 @@ def startup():
     t.start()
 
 # ==========================================
-# 3. ROUTES
+# 3. ROUTES & API
 # ==========================================
 
 @app.get("/")
@@ -101,7 +152,13 @@ def home(access_token: Optional[str] = Cookie(None)):
         state = "init"
         enc_redirect = urllib.parse.quote(REDIRECT_URI, safe="")
         auth_url = (f"https://api-t1.fyers.in/api/v3/generate-authcode?client_id={CLIENT_ID}&redirect_uri={enc_redirect}&response_type=code&state={state}")
-        return HTMLResponse(f"""<body style="background:#000;color:#fff;display:flex;justify-content:center;align-items:center;height:100vh;"><div><h2>NIFTY PRO v6</h2><a href="{auth_url}" style="color:#2979ff">LOGIN</a></div></body>""")
+        return HTMLResponse(f"""
+        <body style="background:#050505; color:#fff; display:flex; height:100vh; justify-content:center; align-items:center; font-family:sans-serif;">
+            <div style="text-align:center; border:1px solid #333; padding:40px; border-radius:10px; background:#111;">
+                <h2 style="color:#2962ff; letter-spacing:1px; margin-bottom:20px;">NIFTY 50 PRO</h2>
+                <a href="{auth_url}" style="padding:12px 30px; background:#2962ff; color:white; text-decoration:none; border-radius:6px; font-weight:bold;">LOGIN WITH FYERS</a>
+            </div>
+        </body>""")
     return HTMLResponse(FRONTEND.replace("{{USER_TOKEN}}", access_token))
 
 @app.get("/callback")
@@ -115,23 +172,37 @@ def callback(auth_code: Optional[str]=None, code: Optional[str]=None):
         return resp
     return JSONResponse(r.json())
 
-@app.get("/api/config")
-def get_conf(expiry: int = 0):
-    idx = max(0, min(expiry, 2))
-    if not DB["index"]: return JSONResponse({"s":"wait"})
-    stk_list = []
-    for s in DB["stocks"]:
-        stk_list.append({"r": s["r"], "w": s["w"], "s": s["f"][idx]["s"]})
-    return JSONResponse({"s": "ok", "idx": DB["index"][idx]["s"], "stocks": stk_list})
-
 @app.get("/logout")
 def logout():
     r = RedirectResponse("/")
     r.delete_cookie("access_token")
     return r
 
+@app.get("/api/config")
+def get_conf(expiry: int = 0):
+    """Safely returns config without crashing"""
+    try:
+        if not SYSTEM_STATUS["ready"] or not DB["index"]:
+            # Trigger update if empty
+            if not UPDATE_LOCK.locked(): threading.Thread(target=update_db).start()
+            return JSONResponse({"s":"wait", "msg": SYSTEM_STATUS["msg"]})
+        
+        idx = max(0, min(expiry, 2))
+        
+        stk_list = []
+        for s in DB["stocks"]:
+            # Safe Access
+            sym = s["f"][idx]["s"] if len(s["f"]) > idx else s["f"][0]["s"]
+            stk_list.append({"r": s["r"], "w": s["w"], "s": sym})
+            
+        idx_sym = DB["index"][idx]["s"] if len(DB["index"]) > idx else DB["index"][0]["s"]
+            
+        return JSONResponse({"s": "ok", "idx": idx_sym, "stocks": stk_list})
+    except Exception as e:
+        return JSONResponse({"s": "error", "msg": str(e)})
+
 # ==========================================
-# 4. FRONTEND (V6 COMPACT UI)
+# 4. FRONTEND (V6 Compact)
 # ==========================================
 
 FRONTEND = """
@@ -141,142 +212,112 @@ FRONTEND = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NIFTY 50 PRO</title>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg: #000000;
-            --panel: #0d0d0d;
+            --bg: #050505;
+            --panel: #0f0f0f;
             --border: #222;
             --accent: #2962ff;
-            --text-main: #fff;
-            --text-sub: #666;
+            --text: #e0e0e0;
             --green: #00c853;
             --red: #d50000;
-            --card-bull: linear-gradient(180deg, rgba(0, 50, 20, 0.9), rgba(0, 25, 10, 0.9));
-            --card-bear: linear-gradient(180deg, rgba(50, 0, 0, 0.9), rgba(25, 0, 0, 0.9));
+            --card-bg: #121212;
+            --bull-bg: rgba(0, 200, 83, 0.1);
+            --bear-bg: rgba(213, 0, 0, 0.1);
         }
         * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
-        body { background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
+        body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
 
-        /* HEADER */
-        .head { height: 40px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; flex-shrink: 0; }
-        .logo { font-weight: 900; font-size: 13px; letter-spacing: 0.5px; } .logo span { color: var(--accent); }
-        
+        .head { height: 45px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; flex-shrink: 0; }
+        .logo { font-weight: 800; font-size: 14px; letter-spacing: 0.5px; } .logo span { color: var(--accent); }
         .ctrls { display: flex; gap: 8px; }
-        .btn { background: #1a1a1a; color: #ccc; border: 1px solid #333; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer; transition: 0.2s; }
-        .btn:hover { border-color: var(--accent); color: #fff; }
-        .btn.active { background: var(--accent); color: white; border-color: var(--accent); }
-        .btn-exp { width: 100px; }
-
-        /* LAYOUT */
-        .layout { display: flex; flex: 1; overflow: hidden; }
+        .btn { background: #1a1a1a; color: #ccc; border: 1px solid #333; padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer; font-family: 'Inter'; transition: 0.2s; }
+        .btn:hover { border-color: var(--accent); color: #fff; background: #252525; }
+        .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
         
-        /* SIDEBAR (LEFT) */
-        .side { width: 220px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
-        .side-head { padding: 10px; font-size: 10px; font-weight: 800; color: var(--text-sub); border-bottom: 1px solid var(--border); letter-spacing: 1px; }
+        .layout { display: flex; flex: 1; overflow: hidden; }
+        .side { width: 200px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
+        .side-head { padding: 12px; font-size: 10px; font-weight: 800; color: #666; border-bottom: 1px solid var(--border); letter-spacing: 1px; }
         .agg-list { flex: 1; overflow-y: auto; padding: 10px; }
-        .agg-card { background: #161616; border-radius: 4px; padding: 8px; margin-bottom: 6px; border: 1px solid #222; }
-        .agg-name { font-size: 9px; font-weight: 700; color: #888; display: flex; justify-content: space-between; }
-        .agg-val { font-family: 'JetBrains Mono'; font-size: 13px; font-weight: 800; margin-top: 2px; }
+        .agg-card { background: #181818; border-radius: 4px; padding: 8px; margin-bottom: 8px; border: 1px solid #2a2a2a; }
+        .agg-name { font-size: 9px; font-weight: 700; color: #888; margin-bottom: 2px; }
+        .agg-val { font-family: 'JetBrains Mono'; font-size: 14px; font-weight: 800; }
         
-        /* CONTENT AREA */
         .content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
+        .idx-strip { height: 50px; background: #0b0b0b; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 30px; flex-shrink: 0; }
+        .idx-lbl { font-size: 10px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
+        .idx-val { font-family: 'JetBrains Mono'; font-size: 18px; font-weight: 800; color: #fff; }
+        .idx-meta { display: flex; gap: 15px; font-family: 'JetBrains Mono'; font-size: 12px; font-weight: 700; align-items: center; }
         
-        /* INDEX STRIP */
-        .idx-strip { height: 40px; background: #080808; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 15px; gap: 20px; flex-shrink: 0; font-family: 'JetBrains Mono'; }
-        .idx-l { font-size: 11px; font-weight: 800; color: var(--accent); }
-        .idx-v { font-size: 14px; font-weight: 800; color: #fff; }
-        .idx-c { font-size: 11px; font-weight: 700; }
-        .idx-n { font-size: 11px; font-weight: 800; margin-left: auto; color: #888; }
-
-        /* GRID */
         .grid-wrap { flex: 1; overflow-y: auto; padding: 10px; }
-        /* Auto-fit small cards to maximize space */
-        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
-
-        /* CARD DESIGN (COMPACT MODE) */
-        .card { 
-            background: #111; 
-            border: 1px solid #222; 
-            border-radius: 4px; 
-            padding: 8px; 
-            height: 65px; /* Compact Fixed Height */
-            display: flex; 
-            flex-direction: column; 
-            justify-content: space-between; 
-            position: relative;
-            transition: 0.1s;
-            overflow: hidden;
-        }
-        
-        .card.bull { background: var(--card-bull); border-color: #004d20; }
-        .card.bear { background: var(--card-bear); border-color: #4d0000; }
-
-        .c-head { display: flex; justify-content: space-between; align-items: center; z-index: 2; }
-        .sym { font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
-        /* Subtle Weightage pill */
-        .wgt { font-family: 'JetBrains Mono'; font-size: 8px; color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.3); padding: 1px 3px; border-radius: 2px; }
+        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 5px; }
 
-        /* The Big Value */
-        .c-main { text-align: right; z-index: 2; margin-top: auto; }
-        .calc-res { font-family: 'JetBrains Mono'; font-size: 13px; font-weight: 800; color: #fff; }
+        .card { background: var(--card-bg); border: 1px solid #222; border-radius: 4px; padding: 8px; display: flex; flex-direction: column; justify-content: center; min-height: 50px; position: relative; transition: all 0.2s; cursor: default; }
+        .card.bull { background: var(--bull-bg); border-color: rgba(0, 200, 83, 0.3); }
+        .card.bear { background: var(--bear-bg); border-color: rgba(213, 0, 0, 0.3); }
 
-        /* Details (Hidden by default) */
-        .c-det { display: none; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 9px; font-family: 'JetBrains Mono'; color: #ccc; }
-        .det-row { display: flex; justify-content: space-between; margin-bottom: 2px; }
+        .c-main { display: flex; justify-content: space-between; align-items: center; }
+        .sym { font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }
+        .wgt-badge { font-size: 8px; font-family: 'JetBrains Mono'; color: #666; background: rgba(255,255,255,0.05); padding: 1px 3px; border-radius: 2px; }
+        .calc-big { font-family: 'JetBrains Mono'; font-size: 12px; font-weight: 800; text-align: right; }
 
-        /* EXPANDED MODE CSS overrides */
-        .grid.expanded .card { height: 110px; }
-        .grid.expanded .c-det { display: block; }
+        .c-details { display: none; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); font-family: 'JetBrains Mono'; }
+        .card.expanded { min-height: 90px; justify-content: space-between; }
+        .card.expanded .c-details { display: block; }
+        .det-row { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 2px; color: #aaa; }
+        .det-val { font-weight: 700; color: #eee; }
 
-        /* UTILS */
         .up { color: var(--green); } .dn { color: var(--red); }
-        ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: #333; }
+        ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
         
-        /* Modal */
-        .modal { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:99;display:none;justify-content:center;align-items:center; }
-        .mbox { background:#111;border:1px solid #333;width:400px;padding:20px;border-radius:6px; }
-        textarea { width:100%;height:120px;background:#000;color:#ccc;border:1px solid #333;font-family:monospace;font-size:11px;padding:5px; margin-top:5px; }
+        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); z-index: 100; display: none; justify-content: center; align-items: center; }
+        .modal-box { background: var(--panel); width: 450px; padding: 20px; border-radius: 6px; border: 1px solid var(--border); }
+        textarea { width: 100%; height: 150px; background: #000; color: #fff; border: 1px solid #333; padding: 10px; font-family: 'JetBrains Mono'; font-size: 11px; margin-top: 5px; }
     </style>
 </head>
 <body>
 
-<!-- SETTINGS MODAL -->
-<div class="modal" id="mod">
-    <div class="mbox">
-        <h4 style="margin-bottom:10px;color:#fff;">FORMULA CONFIG (JSON)</h4>
-        <input id="cf" type="text" style="width:100%;background:#000;color:#fff;border:1px solid #333;padding:5px;margin-bottom:10px;font-family:monospace;">
-        <textarea id="ag"></textarea>
-        <div style="margin-top:10px;display:flex;gap:5px;">
-            <button class="btn active" style="flex:1" onclick="save()">SAVE</button>
-            <button class="btn" style="flex:1" onclick="document.getElementById('mod').style.display='none'">CLOSE</button>
+<div class="modal" id="setModal">
+    <div class="modal-box">
+        <h3 style="color:#fff; font-size:12px; margin-bottom:10px;">FORMULA CONFIG</h3>
+        <label style="font-size:9px; font-weight:700; color:var(--accent);">CARD FORMULA</label>
+        <input type="text" id="cardForm" style="width:100%; background:#000; border:1px solid #333; color:#fff; padding:6px; font-family:'JetBrains Mono'; font-size:11px; margin-bottom:10px;">
+        <label style="font-size:9px; font-weight:700; color:var(--accent);">AGGREGATES (JSON)</label>
+        <textarea id="aggJson"></textarea>
+        <div style="display:flex; gap:8px; margin-top:15px;">
+            <button class="btn active" style="flex:1" onclick="saveConfig()">SAVE</button>
+            <button class="btn" style="flex:1" onclick="closeModal()">CANCEL</button>
         </div>
     </div>
 </div>
 
 <div class="head">
-    <div class="logo">NIFTY<span>50</span> V6</div>
+    <div class="logo">NIFTY<span>50</span> PRO</div>
     <div class="ctrls">
-        <button class="btn" id="btnMode" onclick="toggleMode()">SHOW DETAILS</button>
-        <select class="btn btn-exp" id="sort" onchange="render()"><option value="w">WEIGHT</option><option value="v">VALUE</option></select>
-        <select class="btn btn-exp" id="exp" onchange="init()"><option value="0">NEAR</option><option value="1">NEXT</option></select>
-        <button class="btn" onclick="document.getElementById('mod').style.display='flex'">⚙</button>
-        <button class="btn" style="color:var(--red)" onclick="location.href='/logout'">X</button>
+        <button class="btn" id="togBtn" onclick="toggleDetails()">SHOW DETAILS: OFF</button>
+        <select id="sortSel" class="btn" onchange="render()"><option value="w">SORT: WEIGHT</option><option value="calc_h">SORT: VALUE HIGH</option><option value="calc_l">SORT: VALUE LOW</option></select>
+        <select id="expSel" class="btn" onchange="init()"><option value="0">NEAR</option><option value="1">NEXT</option></select>
+        <button class="btn" onclick="openModal()">⚙</button>
+        <button class="btn" style="color:var(--red)" onclick="location.href='/logout'">EXIT</button>
     </div>
 </div>
 
 <div class="layout">
     <div class="side">
-        <div class="side-head">LIVE AGGREGATES</div>
-        <div class="agg-list" id="agg"></div>
+        <div class="side-head">AGGREGATES</div>
+        <div class="agg-list" id="aggList"></div>
     </div>
-
     <div class="content">
         <div class="idx-strip">
-            <span class="idx-l">NIFTY FUT</span>
-            <span class="idx-v" id="ixP">--</span>
-            <span class="idx-c" id="ixC">--%</span>
-            <span class="idx-n" id="ixN">NET: --</span>
+            <div>
+                <div class="idx-lbl">NIFTY FUT</div>
+                <div class="idx-val" id="ixP">--.--</div>
+            </div>
+            <div class="idx-meta">
+                <span id="ixC">--%</span>
+                <span id="ixQ" style="color:#888; border-left:1px solid #333; padding-left:15px;">NET: --</span>
+            </div>
         </div>
         <div class="grid-wrap">
             <div id="grid" class="grid"></div>
@@ -285,71 +326,78 @@ FRONTEND = """
 </div>
 
 <script>
-    const T = "{{USER_TOKEN}}";
-    let C = {
-        cf: "(TBQ - TSQ) * LTP * WGT",
-        ag: [
+    const TOKEN = "{{USER_TOKEN}}";
+    let CONFIG = {
+        cardFormula: "(TBQ - TSQ) * LTP * WGT",
+        aggregates: [
             { "name": "NET MONEY FLOW", "formula": "(TBQ - TSQ) * LTP * WGT" },
             { "name": "WEIGHTED DELTA", "formula": "(TBQ - TSQ) * LTP * WGT" },
             { "name": "BUY PRESSURE", "formula": "TBQ * LTP * WGT" },
             { "name": "SELL PRESSURE", "formula": "-1 * TSQ * LTP * WGT" }
         ]
     };
-    
-    let API = null, D = {}, P = null;
-    let EXPANDED = false;
+    let API_CONF = null, DATA = {}, POLLER = null, SHOW_DETAILS = false;
 
     window.onload = () => {
-        const s = localStorage.getItem('v6_cfg');
-        if(s) C = JSON.parse(s);
-        document.getElementById('cf').value = C.cf;
-        document.getElementById('ag').value = JSON.stringify(C.ag, null, 2);
+        const stored = localStorage.getItem('n50_v6_conf');
+        if(stored) CONFIG = JSON.parse(stored);
+        document.getElementById('cardForm').value = CONFIG.cardFormula;
+        document.getElementById('aggJson').value = JSON.stringify(CONFIG.aggregates, null, 2);
         init();
     };
 
-    function toggleMode() {
-        EXPANDED = !EXPANDED;
-        document.getElementById('grid').className = EXPANDED ? "grid expanded" : "grid";
-        document.getElementById('btnMode').className = EXPANDED ? "btn active" : "btn";
-        document.getElementById('btnMode').innerText = EXPANDED ? "HIDE DETAILS" : "SHOW DETAILS";
+    function toggleDetails() {
+        SHOW_DETAILS = !SHOW_DETAILS;
+        document.getElementById('togBtn').innerText = "SHOW DETAILS: " + (SHOW_DETAILS ? "ON" : "OFF");
+        document.getElementById('togBtn').classList.toggle('active', SHOW_DETAILS);
+        render(); 
     }
 
     async function init() {
-        document.getElementById('grid').innerHTML = '<div style="color:#666;padding:20px;">CONNECTING...</div>';
+        document.getElementById('grid').innerHTML = '<div style="padding:20px; color:#555">LOADING CONFIG...</div>';
+        const exp = document.getElementById('expSel').value;
         try {
-            let r = await fetch(`/api/config?expiry=${document.getElementById('exp').value}`);
-            let j = await r.json();
-            if(j.s === 'ok') { API = j; render(); poll(); }
-        } catch(e){}
+            const r = await fetch(`/api/config?expiry=${exp}`);
+            const j = await r.json();
+            if(j.s === 'ok') { API_CONF = j; render(); startPoll(); }
+            else { document.getElementById('grid').innerHTML = '<div style="padding:20px; color:#888">'+j.msg+'</div>'; setTimeout(init, 2000); }
+        } catch(e) { setTimeout(init, 2000); }
     }
 
-    function poll() {
-        if(P) clearInterval(P);
-        fetchD();
-        P = setInterval(fetchD, 1000);
+    function startPoll() {
+        if(POLLER) clearInterval(POLLER);
+        fetchData();
+        POLLER = setInterval(fetchData, 1000);
     }
 
-    async function fetchD() {
-        if(!API) return;
-        const s = [API.idx, ...API.stocks.map(x=>x.s)];
+    async function fetchData() {
+        if(!API_CONF) return;
+        const s = [API_CONF.idx, ...API_CONF.stocks.map(x=>x.s)];
         const b1 = s.slice(0,40); const b2 = s.slice(40);
-        let nd = {};
-        const call = async (l) => {
-            if(!l.length) return;
-            const q = l.map(x=>encodeURIComponent(x)).join(',');
-            let r = await fetch(`https://api-t1.fyers.in/data/depth?symbol=${q}&ohlcv_flag=1`,{headers:{'Authorization':T}});
-            let j = await r.json();
-            if(j.s==='ok') Object.assign(nd, j.d);
-        };
-        await Promise.all([call(b1), call(b2)]);
-        D = nd;
-        upd();
+        try {
+            let nd = {};
+            const call = async (list) => {
+                if(!list.length) return;
+                const q = list.map(x=>encodeURIComponent(x)).join(',');
+                const r = await fetch(`https://api-t1.fyers.in/data/depth?symbol=${q}&ohlcv_flag=1`, {headers:{'Authorization':TOKEN}});
+                const j = await r.json();
+                if(j.s==='ok') Object.assign(nd, j.d);
+            };
+            await Promise.all([call(b1), call(b2)]);
+            DATA = nd;
+            update();
+        } catch(e){}
     }
 
-    function evalF(f, d, w) {
+    function evalF(form, d, wgt) {
         if(!d) return 0;
-        try { return new Function('TBQ','TSQ','LTP','WGT','return '+f)(d.totalbuyqty||0, d.totalsellqty||0, d.ltp||0, w||0); } 
-        catch(e){ return 0; }
+        try {
+            const TBQ = d.totalbuyqty || 0;
+            const TSQ = d.totalsellqty || 0;
+            const LTP = d.ltp || 0;
+            const WGT = wgt || 0;
+            return new Function('TBQ','TSQ','LTP','WGT','return '+form)(TBQ, TSQ, LTP, WGT);
+        } catch(e){ return 0; }
     }
 
     function fmt(n) {
@@ -361,94 +409,91 @@ FRONTEND = """
         return s+(a/1000).toFixed(0)+" k";
     }
 
-    function upd() {
-        // Index
-        const i = D[API.idx];
+    function update() {
+        const i = DATA[API_CONF.idx];
         if(i) {
             document.getElementById('ixP').innerText = i.ltp;
             const c = i.chp||0;
             const ce = document.getElementById('ixC');
-            ce.innerText = c.toFixed(2)+"%"; ce.style.color = c>=0?"var(--green)":"var(--red)";
-            const n = (i.totalbuyqty||0)-(i.totalsellqty||0);
-            const ne = document.getElementById('ixN');
-            ne.innerText = "NET: "+fmt(n); ne.style.color = n>=0?"var(--green)":"var(--red)";
+            ce.innerText = c.toFixed(2)+"%"; ce.className = c>=0?"up":"dn";
+            const nq = (i.totalbuyqty||0) - (i.totalsellqty||0);
+            const qe = document.getElementById('ixQ');
+            qe.innerText = "NET: " + fmt(nq); qe.style.color = nq>=0?"var(--green)":"var(--red)";
         }
 
-        // Sidebar
-        const sums = new Array(C.ag.length).fill(0);
+        const sums = new Array(CONFIG.aggregates.length).fill(0);
 
-        API.stocks.forEach(stk => {
-            const d = D[stk.s];
+        API_CONF.stocks.forEach(stk => {
+            const d = DATA[stk.s];
             if(!d) return;
-            
-            C.ag.forEach((ag, k) => sums[k] += evalF(ag.formula, d, stk.w));
-
+            CONFIG.aggregates.forEach((ag, idx) => sums[idx] += evalF(ag.formula, d, stk.w));
             const el = document.getElementById(`c-${stk.r}`);
             if(el) {
-                // Colorize Background
-                const val = evalF(C.cf, d, stk.w);
-                el.className = "card "+(val>=0?"bull":"bear");
-                el.querySelector('.calc-res').innerText = fmt(val);
-                
-                // Update Details if Visible
-                if(EXPANDED) {
-                    el.querySelector('.ltp').innerText = d.ltp;
+                const cVal = evalF(CONFIG.cardFormula, d, stk.w);
+                const cv = el.querySelector('.calc-big');
+                cv.innerText = fmt(cVal);
+                cv.style.color = cVal>=0 ? "var(--green)" : "var(--red)";
+                el.className = "card " + (cVal>=0 ? "bull" : "bear") + (SHOW_DETAILS ? " expanded" : "");
+                if(SHOW_DETAILS) {
+                    el.querySelector('.v-prc').innerText = d.ltp;
                     const c = d.chp||0;
-                    el.querySelector('.chg').innerText = c.toFixed(2)+"%";
-                    el.querySelector('.chg').className = "chg "+(c>=0?"up":"dn");
-                    el.querySelector('.bv').innerText = fmt(d.totalbuyqty);
-                    el.querySelector('.sv').innerText = fmt(d.totalsellqty);
+                    const ec = el.querySelector('.v-chg');
+                    ec.innerText = c.toFixed(2)+"%"; ec.style.color = c>=0?"var(--green)":"var(--red)";
+                    el.querySelector('.v-buy').innerText = fmt(d.totalbuyqty);
+                    el.querySelector('.v-sell').innerText = fmt(d.totalsellqty);
                 }
             }
         });
 
-        // Sidebar Render
-        document.getElementById('agg').innerHTML = C.ag.map((ag, k) => `
+        document.getElementById('aggList').innerHTML = CONFIG.aggregates.map((ag, i) => `
             <div class="agg-card">
-                <div class="agg-name"><span>${ag.name}</span></div>
-                <div class="agg-val" style="color:${sums[k]>=0?'var(--green)':'var(--red)'}">${fmt(sums[k])}</div>
+                <div class="agg-name">${ag.name}</div>
+                <div class="agg-val" style="color:${sums[i]>=0?'var(--green)':'var(--red)'}">${fmt(sums[i])}</div>
             </div>
         `).join('');
     }
 
     function render() {
-        if(!API) return;
-        const sort = document.getElementById('sort').value;
-        let l = [...API.stocks];
-        if(sort === 'v') {
-            l.sort((a,b) => {
-                const va = evalF(C.cf, D[a.s], a.w);
-                const vb = evalF(C.cf, D[b.s], b.w);
-                return Math.abs(vb) - Math.abs(va); // Sort by Magnitude
+        if(!API_CONF) return;
+        const sort = document.getElementById('sortSel').value;
+        let lst = [...API_CONF.stocks];
+        if(sort.includes('calc')) {
+            lst.sort((a,b) => {
+                const va = evalF(CONFIG.cardFormula, DATA[a.s], a.w);
+                const vb = evalF(CONFIG.cardFormula, DATA[b.s], b.w);
+                return sort==='calc_h' ? vb-va : va-vb;
             });
         }
-        
-        document.getElementById('grid').innerHTML = l.map(s => `
-            <div class="card" id="c-${s.r}">
-                <div class="c-head">
-                    <span class="sym">${s.r}</span>
-                    <span class="wgt">${s.w.toFixed(2)}%</span>
-                </div>
+        document.getElementById('grid').innerHTML = lst.map(s => `
+            <div class="card ${SHOW_DETAILS?'expanded':''}" id="c-${s.r}">
                 <div class="c-main">
-                    <span class="calc-res">WAIT</span>
+                    <div>
+                        <div class="sym">${s.r}</div>
+                        <div class="wgt-badge">${s.w.toFixed(2)}%</div>
+                    </div>
+                    <div class="calc-big">--</div>
                 </div>
-                <div class="c-det">
-                    <div class="det-row"><span class="ltp">--</span><span class="chg">--%</span></div>
-                    <div class="det-row"><span>B: <span class="bv">--</span></span><span>S: <span class="sv">--</span></span></div>
+                <div class="c-details">
+                    <div class="det-row"><span>PRICE</span> <span class="det-val v-prc">--</span></div>
+                    <div class="det-row"><span>CHANGE</span> <span class="det-val v-chg">--%</span></div>
+                    <div class="det-row"><span>BUY Q</span> <span class="det-val v-buy" style="color:var(--green)">--</span></div>
+                    <div class="det-row"><span>SELL Q</span> <span class="det-val v-sell" style="color:var(--red)">--</span></div>
                 </div>
             </div>
         `).join('');
-        
-        if(Object.keys(D).length>0) upd();
+        if(Object.keys(DATA).length>0) update();
     }
 
-    function save() {
+    function openModal() { document.getElementById('setModal').style.display='flex'; }
+    function closeModal() { document.getElementById('setModal').style.display='none'; }
+    function saveConfig() {
         try {
-            C = { cf: document.getElementById('cf').value, ag: JSON.parse(document.getElementById('ag').value) };
-            localStorage.setItem('v6_cfg', JSON.stringify(C));
-            document.getElementById('mod').style.display='none';
-            render(); upd();
-        } catch(e){ alert('Error'); }
+            const cf = document.getElementById('cardForm').value;
+            const ag = JSON.parse(document.getElementById('aggJson').value);
+            CONFIG = { cardFormula: cf, aggregates: ag };
+            localStorage.setItem('n50_v6_conf', JSON.stringify(CONFIG));
+            closeModal(); render(); update();
+        } catch(e) { alert("Invalid JSON"); }
     }
 </script>
 </body>