Update app.py

app.py

@@ -7,823 +7,628 @@ import time
 import urllib.parse
 import os
 import threading
-import sqlite3
-import pytz
-from datetime import datetime
-from fastapi import FastAPI, Request, Response, Cookie, BackgroundTasks, Body
+from fastapi import FastAPI, Request, Response, Cookie, BackgroundTasks
 from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
-from typing import Optional, List, Dict
+from typing import Optional
 
-# ==========================================
-# 1. CONFIGURATION
-# ==========================================
-CLIENT_ID    = "J4PNT5QI22-100" 
+==========================================
+1. CONFIGURATION
+==========================================
+
+CLIENT_ID    = "J4PNT5QI22-100"
 SECRET_KEY   = "ABRSWC1PMR"
-# IMPORTANT: Ensure this matches your Space URL exactly
-REDIRECT_URI = "https://topsecrettraders-depthchain.hf.space/callback" 
+
+IMPORTANT: Ensure this matches your Space URL exactly
+
+REDIRECT_URI = "https://topsecrettraders-depthchain.hf.space/callback"
 
 CACHE_FILE = "nifty_master.json"
-DB_FILE = "history.db"
-IST = pytz.timezone('Asia/Kolkata')
 
 app = FastAPI()
 
-# ==========================================
-# 2. DATABASE & MASTER DATA (Server Side)
-# ==========================================
+==========================================
+2. ROBUST DATA LOADER (THREAD SAFE)
+==========================================
+Global State
 
-SYSTEM_STATUS = {"ready": False, "message": "Booting..."}
+SYSTEM_STATUS = {
+"ready": False,
+"message": "Booting..."
+}
 UPDATE_LOCK = threading.Lock()
-RECORDING_LOCK = threading.Lock()
-ACTIVE_JOBS = {} # To keep track of running threads
-
-def init_db():
-    """Initialize SQLite Database"""
-    conn = sqlite3.connect(DB_FILE)
-    c = conn.cursor()
-    # Jobs Table
-    c.execute('''CREATE TABLE IF NOT EXISTS jobs (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        expiry_ts INTEGER,
-        date_str TEXT,
-        status TEXT,
-        created_at INTEGER
-    )''')
-    # Snapshots Table (Stores full JSON response for perfect playback)
-    c.execute('''CREATE TABLE IF NOT EXISTS snapshots (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        job_id INTEGER,
-        timestamp INTEGER,
-        spot_price REAL,
-        json_data TEXT
-    )''')
-    conn.commit()
-    conn.close()
-
-def get_db_connection():
-    conn = sqlite3.connect(DB_FILE)
-    conn.row_factory = sqlite3.Row
-    return conn
 
 def update_master_db():
-    """Downloads Fyers Master CSV."""
-    global SYSTEM_STATUS
-    if not UPDATE_LOCK.acquire(blocking=False): return
-    try:
-        SYSTEM_STATUS["message"] = "Downloading Master CSV..."
-        print(">>> [BG] Downloading Master...")
-        headers = {"User-Agent": "Mozilla/5.0"}
-        url = "https://public.fyers.in/sym_details/NSE_FO.csv"
-        df = pd.read_csv(url, usecols=[0,1,8,9], names=['Token','Desc','Expiry','Symbol'], header=0, on_bad_lines='skip', storage_options=headers)
-        
-        SYSTEM_STATUS["message"] = "Filtering NIFTY..."
-        df['Symbol'] = df['Symbol'].astype(str)
-        df['Desc'] = df['Desc'].astype(str)
-        mask = (df['Symbol'].str.contains('NIFTY') & ~df['Symbol'].str.contains('BANK') & ~df['Symbol'].str.contains('FIN') & ~df['Symbol'].str.contains('MID'))
-        df = df[mask]
-
-        results = [{"s": "NSE:NIFTY50-INDEX", "e": 0, "k": 0}]
-        for _, row in df.iterrows():
-            sym = row['Symbol']
-            desc = row['Desc']
-            try: exp = int(row['Expiry'])
-            except: exp = 0
-            strike = 0.0
-            if "CE" in sym or "PE" in sym:
-                parts = desc.strip().split(' ')
-                if len(parts) >= 2:
-                    val = parts[-2].replace('.', '', 1)
-                    if val.isdigit(): strike = float(parts[-2])
-            results.append({"s": sym, "e": exp, "k": strike})
-
-        with open(CACHE_FILE, "w") as f: json.dump(results, f)
-        SYSTEM_STATUS["ready"] = True
-        SYSTEM_STATUS["message"] = "Ready"
-        print(f">>> [BG] Saved {len(results)} symbols.")
-    except Exception as e:
-        print(f"Error: {e}")
-        SYSTEM_STATUS["message"] = f"Error: {str(e)}"
-    finally:
-        UPDATE_LOCK.release()
-
-# ==========================================
-# 3. RECORDING LOGIC (Background Thread)
-# ==========================================
-
-def recording_task(job_id: int, expiry_ts: int, access_token: str):
-    """
-    Runs in a separate thread. Fetches data from Fyers and saves to SQLite.
-    """
-    print(f">>> [RECORDER] Started Job {job_id} for Expiry {expiry_ts}")
-    
-    # 1. Load Symbols
-    try:
-        with open(CACHE_FILE, "r") as f: master = json.load(f)
-    except:
-        print(">>> [RECORDER] Master DB not found")
-        return
-
-    # Filter symbols for this expiry + Spot + Futures
-    spot_sym = "NSE:NIFTY50-INDEX"
-    
-    # Get Futures (Next 3 months)
-    futs = [x for x in master if x['s'].startswith('NSE:NIFTY') and x['s'].endswith('FUT')]
-    futs.sort(key=lambda x: x['e'])
-    futs = futs[:3]
+"""
+Runs in background. Downloads, filters, and saves JSON.
+"""
+global SYSTEM_STATUS
+
+code
+Code
+download
+content_copy
+expand_less
+# Acquire lock to prevent multiple downloads
+if not UPDATE_LOCK.acquire(blocking=False):
+    return # Already updating
+
+try:
+    SYSTEM_STATUS["message"] = "Downloading Fyers Master CSV..."
+    print(">>> [BG TASK] STARTING DOWNLOAD...")
     
-    # Get Options for specific expiry
-    opts = [x for x in master if x['e'] == expiry_ts]
+    headers = {
+        "User-Agent": "Mozilla/5.0"
+    }
+    url = "https://public.fyers.in/sym_details/NSE_FO.csv"
     
-    # Initial Symbol List (Spot + Fut + All Options for Expiry)
-    # Note: Fyers allows max 50-100 symbols usually. If too many, we might need to filter by range.
-    # For NIFTY, one expiry has ~100 strikes * 2 = 200 symbols. 
-    # We will fetch ALL. If URL too long, we split. 
-    # Logic: Fetch Spot + Fut + Range around ATM.
+    df = pd.read_csv(
+        url, 
+        usecols=[0, 1, 8, 9], 
+        names=['Token', 'Desc', 'Expiry', 'Symbol'], 
+        header=0,
+        on_bad_lines='skip',
+        storage_options=headers
+    )
     
-    # To keep it simple and robust: We fetch Spot first, find ATM, then fetch -20 to +20 strikes.
+    SYSTEM_STATUS["message"] = "Filtering NIFTY Data..."
     
-    conn = get_db_connection()
+    df['Symbol'] = df['Symbol'].astype(str)
+    df['Desc'] = df['Desc'].astype(str)
     
-    try:
-        while True:
-            now_ist = datetime.now(IST)
-            current_time_str = now_ist.strftime("%H:%M")
-            
-            # Stop condition (Auto stop at 3:35 PM)
-            if now_ist.hour >= 15 and now_ist.minute >= 35:
-                print(f">>> [RECORDER] Auto-stopping Job {job_id} at market close.")
-                c = conn.cursor()
-                c.execute("UPDATE jobs SET status = 'COMPLETED' WHERE id = ?", (job_id,))
-                conn.commit()
-                break
-                
-            # Check if job manually stopped
-            cur_job = conn.execute("SELECT status FROM jobs WHERE id = ?", (job_id,)).fetchone()
-            if not cur_job or cur_job['status'] != 'RUNNING':
-                print(f">>> [RECORDER] Job {job_id} stopped manually.")
-                break
-
-            # 1. Fetch Spot to determine ATM
-            try:
-                spot_url = f"https://api-t1.fyers.in/data/depth?symbol={spot_sym}&ohlcv_flag=1"
-                res = requests.get(spot_url, headers={"Authorization": access_token})
-                if res.status_code != 200:
-                    print(f">>> [RECORDER] API Error: {res.status_code}")
-                    time.sleep(5)
-                    continue
-                
-                spot_data = res.json()
-                if spot_data['s'] != 'ok': 
-                    time.sleep(5)
-                    continue
-                    
-                ltp = spot_data['d'][spot_sym]['ltp']
-                
-                # 2. Filter Symbols (Spot + Fut + +/- 25 Strikes)
-                # This ensures we don't overload the API URL limit
-                relevant_strikes = sorted(list(set([x['k'] for x in opts])))
-                closest_strike = min(relevant_strikes, key=lambda x: abs(x - ltp))
-                idx = relevant_strikes.index(closest_strike)
-                start_idx = max(0, idx - 25)
-                end_idx = min(len(relevant_strikes), idx + 25)
-                selected_strikes = relevant_strikes[start_idx:end_idx]
-                
-                target_syms = [spot_sym] + [f['s'] for f in futs]
-                for o in opts:
-                    if o['k'] in selected_strikes:
-                        target_syms.append(o['s'])
-                
-                # 3. Fetch Full Depth
-                sym_str = ",".join(target_syms)
-                depth_url = f"https://api-t1.fyers.in/data/depth?symbol={sym_str}&ohlcv_flag=1"
-                depth_res = requests.get(depth_url, headers={"Authorization": access_token})
-                final_json = depth_res.json()
-                
-                if final_json['s'] == 'ok':
-                    ts = int(time.time())
-                    # Store as JSON String
-                    json_str = json.dumps(final_json['d'])
-                    conn.execute(
-                        "INSERT INTO snapshots (job_id, timestamp, spot_price, json_data) VALUES (?, ?, ?, ?)",
-                        (job_id, ts, ltp, json_str)
-                    )
-                    conn.commit()
-                    print(f">>> [RECORDER] Saved Snapshot {ts} | LTP: {ltp} | Syms: {len(target_syms)}")
-            
-            except Exception as e:
-                print(f">>> [RECORDER] Fetch Error: {e}")
+    # Strict Filter: KEEP NIFTY, REMOVE BANK/FIN/MID
+    mask = (
+        df['Symbol'].str.contains('NIFTY') & 
+        ~df['Symbol'].str.contains('BANKNIFTY') & 
+        ~df['Symbol'].str.contains('FINNIFTY') & 
+        ~df['Symbol'].str.contains('MIDCPNIFTY')
+    )
+    df = df[mask]
+
+    results = [{"s": "NSE:NIFTY50-INDEX", "e": 0, "k": 0}]
+
+    for _, row in df.iterrows():
+        sym = row['Symbol']
+        desc = row['Desc']
+        try:
+            exp = int(row['Expiry'])
+        except:
+            exp = 0
+        
+        strike = 0.0
+        
+        # Logic: Parse Strike from Desc (e.g., "NIFTY 23 JAN 21500 CE")
+        if "CE" in sym or "PE" in sym:
+            parts = desc.strip().split(' ')
+            if len(parts) >= 2:
+                val = parts[-2]
+                val_clean = val.replace('.', '', 1)
+                if val_clean.isdigit():
+                    strike = float(val)
+        
+        results.append({"s": sym, "e": exp, "k": strike})
 
-            time.sleep(15) # Wait 15 seconds
-            
-    except Exception as e:
-        print(f">>> [RECORDER] Critical Error: {e}")
-    finally:
-        conn.close()
-        if job_id in ACTIVE_JOBS:
-            del ACTIVE_JOBS[job_id]
+    # Save to disk
+    with open(CACHE_FILE, "w") as f:
+        json.dump(results, f)
+        
+    SYSTEM_STATUS["ready"] = True
+    SYSTEM_STATUS["message"] = "Ready"
+    print(f">>> [BG TASK] COMPLETE. Saved {len(results)} symbols.")
 
-# ==========================================
-# 4. APP STARTUP & ROUTES
-# ==========================================
+except Exception as e:
+    print(f">>> [BG TASK] ERROR: {e}")
+    SYSTEM_STATUS["message"] = f"Error: {str(e)}"
+finally:
+    UPDATE_LOCK.release()
 
 @app.on_event("startup")
 def startup_event():
-    init_db()
-    if os.path.exists(CACHE_FILE):
-        SYSTEM_STATUS["ready"] = True
-        SYSTEM_STATUS["message"] = "Ready"
-    else:
-        t = threading.Thread(target=update_master_db)
-        t.start()
+# check if cache exists
+if os.path.exists(CACHE_FILE):
+SYSTEM_STATUS["ready"] = True
+SYSTEM_STATUS["message"] = "Loaded from Cache"
+print(">>> STARTUP: Cache found. System Ready.")
+else:
+# Start background thread immediately
+thread = threading.Thread(target=update_master_db)
+thread.start()
+
+==========================================
+3. ROUTES
+==========================================
 
 @app.get("/")
 def home(access_token: Optional[str] = Cookie(None)):
-    if not access_token:
-        state = "init"
-        enc_redirect = urllib.parse.quote(REDIRECT_URI, safe="")
-        auth_url = (f"https://api-t1.fyers.in/api/v3/generate-authcode?"
-                    f"client_id={CLIENT_ID}&redirect_uri={enc_redirect}&response_type=code&state={state}")
-        return HTMLResponse(f"""
-        <div style="height:100vh; display:flex; justify-content:center; align-items:center; font-family:sans-serif; background:#f5f5f5;">
-            <div style="background:white; padding:40px; border-radius:10px; text-align:center; box-shadow:0 5px 20px rgba(0,0,0,0.1);">
-                <h2>Authentication Required</h2>
-                <a href="{auth_url}" style="background:#2962ff; color:white; padding:12px 25px; text-decoration:none; border-radius:5px; font-weight:bold;">LOGIN WITH FYERS</a>
-            </div>
-        </div>""")
-    
-    return HTMLResponse(HTML_TEMPLATE.replace("{{USER_TOKEN}}", access_token))
+# 1. Handle Login
+if not access_token:
+state = "init"
+enc_redirect = urllib.parse.quote(REDIRECT_URI, safe="")
+auth_url = (
+f"https://api-t1.fyers.in/api/v3/generate-authcode?"
+f"client_id={CLIENT_ID}&redirect_uri={enc_redirect}&response_type=code&state={state}"
+)
+
+code
+Code
+download
+content_copy
+expand_less
+return HTMLResponse(f"""
+    <div style="height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:sans-serif; background:#f5f5f5;">
+        <div style="background:white; padding:40px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.1); text-align:center;">
+            <h2 style="margin-top:0;">Authentication Required</h2>
+            <a href="{auth_url}" style="display:inline-block; background:#2962ff; color:white; padding:12px 25px; text-decoration:none; border-radius:5px; font-weight:bold; margin-top:10px;">LOGIN WITH FYERS</a>
+        </div>
+    </div>
+    """)
+
+# 2. Inject Token into HTML for Direct Client-Side Fetching
+# This allows the browser to call Fyers directly (No Server Lag)
+rendered_html = HTML_TEMPLATE.replace("{{USER_TOKEN}}", access_token)
+return HTMLResponse(rendered_html)
 
 @app.get("/callback")
 def callback(auth_code: Optional[str] = None, code: Optional[str] = None):
-    final_code = auth_code if auth_code else code
-    if not final_code: return JSONResponse({"error": "No Code"})
-    app_id_hash = hashlib.sha256(f"{CLIENT_ID}:{SECRET_KEY}".encode()).hexdigest()
-    resp = requests.post("https://api-t1.fyers.in/api/v3/validate-authcode", json={
-        "grant_type": "authorization_code", "appIdHash": app_id_hash, "code": final_code
-    })
-    data = resp.json()
-    if "access_token" in data:
-        full_token = f"{CLIENT_ID}:{data['access_token']}"
-        response = RedirectResponse(url="/")
-        response.set_cookie(key="access_token", value=full_token, httponly=True)
-        return response
+final_code = auth_code if auth_code else code
+if not final_code: return JSONResponse({"error": "No Code"})
+
+code
+Code
+download
+content_copy
+expand_less
+app_id_hash = hashlib.sha256(f"{CLIENT_ID}:{SECRET_KEY}".encode()).hexdigest()
+resp = requests.post("https://api-t1.fyers.in/api/v3/validate-authcode", json={
+    "grant_type": "authorization_code", "appIdHash": app_id_hash, "code": final_code
+})
+data = resp.json()
+
+if "access_token" in data:
+    full_token = f"{CLIENT_ID}:{data['access_token']}"
+    response = RedirectResponse(url="/")
+    # Save token to cookie so python sees it on reload
+    response.set_cookie(key="access_token", value=full_token, httponly=True)
+    return response
+else:
     return HTMLResponse(f"Login Failed: {json.dumps(data)}")
 
 @app.get("/logout")
 def logout():
-    r = RedirectResponse(url="/")
-    r.delete_cookie("access_token")
-    return r
+response = RedirectResponse(url="/")
+response.delete_cookie("access_token")
+return response
+
+--- STATUS & MASTER DATA ---
 
 @app.get("/api/status")
-def get_status(): return JSONResponse(SYSTEM_STATUS)
+def get_status():
+return JSONResponse(SYSTEM_STATUS)
 
 @app.get("/api/init")
 def get_master_data():
-    if not SYSTEM_STATUS["ready"]: return JSONResponse({"s": "wait"})
-    try:
-        with open(CACHE_FILE, "r") as f: return JSONResponse(json.load(f))
-    except: return JSONResponse([])
+"""
+Returns the cached list of symbols.
+This is the ONLY data heavy lifting the python server does.
+"""
+if not SYSTEM_STATUS["ready"]:
+return JSONResponse({"s": "wait", "msg": SYSTEM_STATUS["message"]})
+
+code
+Code
+download
+content_copy
+expand_less
+try:
+    with open(CACHE_FILE, "r") as f:
+        data = json.load(f)
+    return JSONResponse(data)
+except:
+    return JSONResponse([])
 
 @app.get("/api/refresh")
 def force_refresh(background_tasks: BackgroundTasks):
-    SYSTEM_STATUS["ready"] = False
-    background_tasks.add_task(update_master_db)
-    return JSONResponse({"s": "ok"})
+SYSTEM_STATUS["ready"] = False
+SYSTEM_STATUS["message"] = "Refreshing..."
+background_tasks.add_task(update_master_db)
+return JSONResponse({"s": "ok"})
 
-# --- RECORDING & HISTORY API ---
-
-@app.post("/api/jobs/create")
-def create_job(req: Request, payload: Dict = Body(...), access_token: Optional[str] = Cookie(None)):
-    if not access_token: return JSONResponse({"s": "error", "m": "No Token"})
-    
-    expiry = payload.get("expiry")
-    if not expiry: return JSONResponse({"s": "error", "m": "No Expiry"})
-    
-    conn = get_db_connection()
-    c = conn.cursor()
-    
-    # Check if job exists for today and this expiry
-    today_str = datetime.now(IST).strftime("%Y-%m-%d")
-    existing = c.execute("SELECT id, status FROM jobs WHERE date_str = ? AND expiry_ts = ? AND status = 'RUNNING'", 
-                         (today_str, expiry)).fetchone()
-    
-    if existing:
-        return JSONResponse({"s": "ok", "msg": "Job already running", "id": existing['id']})
-    
-    c.execute("INSERT INTO jobs (expiry_ts, date_str, status, created_at) VALUES (?, ?, 'RUNNING', ?)",
-              (expiry, today_str, int(time.time())))
-    job_id = c.lastrowid
-    conn.commit()
-    conn.close()
-    
-    # Start Thread
-    t = threading.Thread(target=recording_task, args=(job_id, expiry, access_token))
-    t.daemon = True
-    t.start()
-    ACTIVE_JOBS[job_id] = t
-    
-    return JSONResponse({"s": "ok", "msg": "Recording Started", "id": job_id})
-
-@app.get("/api/jobs/list")
-def list_jobs():
-    conn = get_db_connection()
-    jobs = conn.execute("SELECT * FROM jobs ORDER BY id DESC LIMIT 20").fetchall()
-    res = []
-    for j in jobs:
-        res.append(dict(j))
-    conn.close()
-    return JSONResponse(res)
-
-@app.get("/api/jobs/stop")
-def stop_job(id: int):
-    conn = get_db_connection()
-    conn.execute("UPDATE jobs SET status = 'STOPPED' WHERE id = ?", (id,))
-    conn.commit()
-    conn.close()
-    return JSONResponse({"s": "ok"})
-
-@app.get("/api/history/snapshots")
-def get_snapshots(job_id: int):
-    conn = get_db_connection()
-    # Return timestamps and spot price for the slider
-    snaps = conn.execute("SELECT timestamp, spot_price FROM snapshots WHERE job_id = ? ORDER BY timestamp ASC", (job_id,)).fetchall()
-    conn.close()
-    return JSONResponse([dict(s) for s in snaps])
-
-@app.get("/api/history/data")
-def get_history_data(job_id: int, timestamp: int):
-    conn = get_db_connection()
-    row = conn.execute("SELECT json_data, spot_price FROM snapshots WHERE job_id = ? AND timestamp = ?", (job_id, timestamp)).fetchone()
-    conn.close()
-    
-    if row:
-        # Reconstruct the exact format the frontend expects from Fyers
-        return JSONResponse({
-            "s": "ok", 
-            "d": json.loads(row['json_data']) 
-        })
-    return JSONResponse({"s": "error"})
-
-# ==========================================
-# 5. FRONTEND
-# ==========================================
+NOTE: /api/depth REMOVED to force client-side fetching
+==========================================
+4. FRONTEND (Client-Side Fetch)
+==========================================
 
 HTML_TEMPLATE = """
+
 <!DOCTYPE html>
+
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>NIFTY PRO - HYBRID</title>
+    <title>NIFTY PRO CHAIN (Direct)</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">
     <style>
-        :root { --bg:#fff; --panel:#f4f6f8; --border:#e0e0e0; --accent:#2962ff; --green:#00c853; --red:#d50000; }
-        body { margin:0; background:var(--bg); color:#1a1a1a; font-family:'Inter', sans-serif; height:100vh; display:flex; flex-direction:column; overflow:hidden; }
-        
-        /* LAYOUT */
-        .top-nav { height:60px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#fff; z-index:10; }
-        .grid-layout { display:flex; height:calc(100vh - 60px); }
-        .chain-panel { flex:1; display:flex; flex-direction:column; }
-        .fut-panel { width:280px; background:var(--panel); border-left:1px solid var(--border); overflow-y:auto; }
-        
-        /* UI ELEMENTS */
-        .btn { padding:8px 14px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer; font-weight:700; font-size:12px; transition:0.2s; }
-        .btn:hover { border-color:var(--accent); color:var(--accent); background:#f0f7ff; }
-        .btn.primary { background:var(--accent); color:white; border:none; }
-        .btn.stop { color:var(--red); border-color:var(--red); }
-        
-        /* CHAIN */
-        .chain-header { display:grid; grid-template-columns:1fr 140px 1fr; background:#f8f9fa; border-bottom:1px solid var(--border); padding:8px 0; font-size:11px; font-weight:700; text-align:center; color:#555; }
-        .chain-body { flex:1; overflow-y:auto; }
-        .row { display:grid; grid-template-columns:1fr 140px 1fr; height:40px; border-bottom:1px solid #f0f0f0; align-items:center; font-family:'JetBrains Mono'; font-size:12px; }
-        .row.atm { background:rgba(41,98,255,0.1); border-top:1px solid var(--accent); border-bottom:1px solid var(--accent); }
-        .mid-col { display:flex; justify-content:center; align-items:center; border-left:1px solid var(--border); border-right:1px solid var(--border); height:100%; position:relative; }
-        .side-col { display:flex; justify-content:space-between; padding:0 10px; color:#666; font-size:11px; }
-        .visual-bar { position:absolute; top:5px; bottom:5px; border-radius:4px; opacity:0.8; z-index:0; }
-        
-        /* MODALS */
-        .modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; justify-content:center; align-items:center; z-index:100; }
-        .modal-box { background:#fff; width:500px; padding:20px; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.2); }
-        
-        /* CONTROLS */
-        .history-ctrl { background:#222; color:white; padding:10px 20px; display:flex; gap:15px; align-items:center; font-size:12px; }
-        .slider-cont { flex:1; display:flex; flex-direction:column; }
-        input[type=range] { width:100%; }
-        
-        .live-tag { background:var(--green); color:white; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:800; }
-        .hist-tag { background:#ff9800; color:white; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:800; }
-        
-        .fut-card { background:#fff; padding:10px; border-bottom:1px solid var(--border); }
-    </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);
+        }
+        * { 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; }
+
+code
+Code
+download
+content_copy
+expand_less
+.top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; }
+    .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; }
+    .btn:hover { border-color: var(--accent); color: var(--accent); background:#f0f7ff; }
+    
+    .grid-layout { display: flex; height: calc(100vh - 60px); }
+    .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; }
+    
+    .row { display: grid; grid-template-columns: 1fr 180px 1fr; border-bottom: 1px solid #f0f0f0; height: 45px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
+    .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); }
+    .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: 14px; }
+    .delta-txt { z-index: 2; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.7); padding: 0 4px; border-radius: 3px; }
+    
+    .side-col { padding: 0 15px; display: flex; justify-content: space-between; color: #666; font-size: 11px; }
+    
+    .fut-panel { width: 300px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
+    .fut-card { padding: 15px; background: #fff; border-bottom: 1px solid var(--border); }
+    .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 5px; }
+    
+    .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.9); z-index: 1000; display: none; justify-content: center; align-items: center; }
+    .modal-box { background: #fff; border: 1px solid #ccc; width: 400px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 20px; }
+    .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; max-height: 50vh; overflow-y: auto; }
+    .exp-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 4px; cursor: pointer; }
+    .exp-btn:hover { background: #f0f7ff; border-color: var(--accent); }
+    .exp-btn.active { background: var(--accent); color: white; }
+    
+    /* LOADER OVERLAY */
+    .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; }
+    @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; }
+</style>
 </head>
 <body>
 
-<!-- MODALS -->
-<div class="modal" id="jobModal">
+<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>
+
+<div class="modal" id="expModal">
     <div class="modal-box">
-        <h3>Recording Manager</h3>
-        <p style="font-size:12px; color:#666;">Create a job to record NIFTY Data (15s intervals). Server fetches data using your token.</p>
-        <div style="display:flex; gap:10px; margin-bottom:15px;">
-            <select id="jobExpirySel" style="padding:8px; width:200px;"></select>
-            <button class="btn primary" onclick="startRecording()">START NEW RECORDING</button>
+        <div style="display:flex; justify-content:space-between; font-weight:700;">
+            <span>SELECT EXPIRY</span>
+            <span style="cursor:pointer" onclick="document.getElementById('expModal').style.display='none'">✕</span>
         </div>
-        <div style="max-height:300px; overflow-y:auto; border:1px solid #eee;">
-            <table style="width:100%; font-size:12px; border-collapse:collapse;" id="jobTable"></table>
-        </div>
-        <button class="btn" style="margin-top:10px; width:100%" onclick="closeModal('jobModal')">CLOSE</button>
+        <div class="modal-grid" id="expGrid"></div>
     </div>
 </div>
 
-<!-- NAV -->
 <div class="top-nav">
     <div style="display:flex; align-items:center; gap:15px;">
-        <div style="font-weight:800; color:var(--accent); font-size:18px;">NIFTY PRO</div>
-        <div id="modeTag" class="live-tag">LIVE</div>
-        <button class="btn" onclick="openJobModal()">🔴 RECORDINGS</button>
-        <button class="btn" onclick="toggleMode()">🔄 SWITCH TO <span id="switchTxt">HISTORY</span></button>
+        <div style="font-weight:800; font-size:18px; color:var(--accent);">NIFTY 50</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>
+            REFRESH DB
+        </button>
     </div>
-    <div style="display:flex; align-items:center; gap:15px;">
-        <div style="text-align:right;">
-            <div style="font-size:10px; font-weight:700; color:#888;">SPOT</div>
-            <div id="spotPrice" style="font-weight:800; font-size:16px;">0.00</div>
-        </div>
-        <div style="text-align:right;">
-             <div style="font-size:10px; font-weight:700; color:#888;">EXPIRY</div>
-             <select id="mainExpirySel" onchange="changeExpiry()" style="border:none; font-weight:700; background:transparent; font-size:14px; text-align:right; cursor:pointer;"></select>
-        </div>
-        <div id="statusDot" style="width:10px; height:10px; background:#ccc; border-radius:50%;"></div>
-    </div>
-</div>
 
-<!-- HISTORY CONTROLS -->
-<div class="history-ctrl" id="histCtrl" style="display:none;">
-    <div>PLAYBACK</div>
-    <select id="histJobSel" onchange="loadJobSnapshots()" style="background:#333; color:white; border:1px solid #555; padding:5px;"></select>
-    <div class="slider-cont">
-        <div style="display:flex; justify-content:space-between; margin-bottom:2px;">
-            <span id="histTime">00:00:00</span>
-            <span id="histSpot">Spot: 0</span>
-        </div>
-        <input type="range" id="timeSlider" min="0" max="100" value="0" step="1" oninput="onSliderMove()">
+code
+Code
+download
+content_copy
+expand_less
+<div style="display:flex; gap:20px; align-items:center;">
+    <div style="text-align:right;">
+        <div style="font-size:10px; font-weight:700; color:#888;">SPOT</div>
+        <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:16px;">0.00</div>
     </div>
+    <button class="btn" onclick="openExpModal()">
+        <span style="color:#888">EXP:</span> <span id="selExpTxt">SELECT</span>
+    </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>
 
-<!-- MAIN GRID -->
 <div class="grid-layout">
     <div class="chain-panel">
         <div class="chain-header">
-            <div>CALL SELL (OI)</div>
-            <div>NET FLOW</div>
-            <div>PUT SELL (OI)</div>
+            <div>CALL SELLERS (OI)</div>
+            <div>NET FLOW (PUT S - CALL S)</div>
+            <div>PUT SELLERS (OI)</div>
         </div>
         <div class="chain-body" id="chainBody"></div>
     </div>
-    <div class="fut-panel" id="futBody"></div>
+
+code
+Code
+download
+content_copy
+expand_less
+<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>
+</div>
 </div>
 
 <script>
+    // === CONFIGURATION ===
+    // Token is injected by Python backend securely
     const AUTH_TOKEN = "{{USER_TOKEN}}";
-    let DB = []; 
-    let MODE = 'LIVE'; // LIVE or HIST
+    
+    let DB = [];
+    let SPOT_SYM = "NSE:NIFTY50-INDEX";
     let ACTIVE_EXP = 0;
     let SPOT_PRICE = 0;
-    
-    // Live State
-    let LIVE_POLLER = null;
+    let POLLER = null;
     let FUT_SYMS = [];
-    
-    // History State
-    let SNAPSHOTS = []; // [{ts: 123, spot: 21000}, ...]
-    
-    window.onload = async () => {
-        await loadMaster();
+    let IS_POLLING = false;
+
+    // === STARTUP SEQUENCE ===
+    window.onload = () => { 
+        if(AUTH_TOKEN.indexOf("{{") !== -1) {
+            alert("Auth Error. Please Reload.");
+            return;
+        }
+        checkStatus(); 
     };
 
-    async function loadMaster() {
+    async function checkStatus() {
+        const msg = document.getElementById('loaderMsg');
+        try {
+            const res = await fetch('/api/status');
+            const status = await res.json();
+            
+            if(status.ready) {
+                msg.innerText = "LOADING DATA...";
+                loadDB();
+            } else {
+                msg.innerText = status.message.toUpperCase();
+                setTimeout(checkStatus, 2000);
+            }
+        } catch(e) {
+            msg.innerText = "CONNECTION LOST. RETRYING...";
+            setTimeout(checkStatus, 2000);
+        }
+    }
+
+    async function loadDB() {
         try {
             const res = await fetch('/api/init');
             DB = await res.json();
-            
-            // Populate Expiry Dropdowns
-            const ops = DB.filter(i => i.s.endsWith('CE'));
-            const exps = [...new Set(ops.map(i => i.e))].sort((a,b) => a-b);
-            const today = Math.floor(Date.now()/1000) - 86400;
-            const validExps = exps.filter(e => e > today);
-            
-            ACTIVE_EXP = validExps[0];
-            
-            const sel = document.getElementById('mainExpirySel');
-            const jobSel = document.getElementById('jobExpirySel');
-            
-            validExps.forEach(ts => {
-                const d = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
-                sel.add(new Option(d, ts));
-                jobSel.add(new Option(d, ts));
-            });
-            
+            if(!Array.isArray(DB) || DB.length === 0) {
+                 alert("DB Load Error. Retrying...");
+                 refreshDB(); 
+                 return;
+            }
+            document.getElementById('loader').style.display = 'none';
             initApp();
-        } catch(e) { console.error(e); }
+        } catch(e) {
+            console.error(e);
+        }
     }
 
-    function initApp() {
-        FUT_SYMS = DB.filter(i => i.s.startsWith('NSE:NIFTY') && i.s.endsWith('FUT') && /\\d/.test(i.s)).sort((a,b)=>a.e-b.e).slice(0,3);
-        startLiveMode();
+    async function refreshDB() {
+        if(!confirm("Force download fresh data from NSE? This takes 10-20s.")) return;
+        const icon = document.getElementById('refIcon');
+        icon.classList.add('spin-icon');
+        await fetch('/api/refresh');
+        document.getElementById('loader').style.display = 'flex';
+        checkStatus();
     }
 
-    function changeExpiry() {
-        ACTIVE_EXP = parseInt(document.getElementById('mainExpirySel').value);
-        if(MODE === 'LIVE') {
-            buildChainUI();
-            pollLive();
-        } else {
-            // In history mode, expiry change just rebuilds grid, data depends on recorded job
-            buildChainUI();
-        }
+    function initApp() {
+        FUT_SYMS = DB.filter(i => i.s.startsWith('NSE:NIFTY') && i.s.endsWith('FUT') && /\\d/.test(i.s))
+                     .sort((a,b) => a.e - b.e).slice(0,3);
+        openExpModal();
     }
 
-    // ================= SWITCHING MODES =================
-
-    function toggleMode() {
-        if(MODE === 'LIVE') {
-            MODE = 'HIST';
-            document.getElementById('modeTag').innerText = "HISTORY";
-            document.getElementById('modeTag').className = "hist-tag";
-            document.getElementById('switchTxt').innerText = "LIVE";
-            document.getElementById('histCtrl').style.display = "flex";
-            stopLive();
-            loadJobsForHistory();
-        } else {
-            MODE = 'LIVE';
-            document.getElementById('modeTag').innerText = "LIVE";
-            document.getElementById('modeTag').className = "live-tag";
-            document.getElementById('switchTxt').innerText = "HISTORY";
-            document.getElementById('histCtrl').style.display = "none";
-            startLiveMode();
-        }
+    function openExpModal() {
+        const grid = document.getElementById('expGrid');
+        grid.innerHTML = '';
+        const ops = DB.filter(i => i.s.endsWith('CE') || i.s.endsWith('PE'));
+        const exps = [...new Set(ops.map(i => i.e))].sort((a,b) => a-b);
+        const today = Math.floor(Date.now()/1000) - 86400;
+
+        exps.forEach(ts => {
+            if(ts < today) return;
+            const d = new Date(ts * 1000);
+            const dStr = d.toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
+            const div = document.createElement('div');
+            div.className = `exp-btn ${ts === ACTIVE_EXP ? 'active' : ''}`;
+            div.innerText = dStr;
+            div.onclick = () => {
+                ACTIVE_EXP = ts;
+                document.getElementById('selExpTxt').innerText = dStr;
+                document.getElementById('expModal').style.display = 'none';
+                buildChain();
+            }
+            grid.appendChild(div);
+        });
+        document.getElementById('expModal').style.display = 'flex';
     }
 
-    // ================= LIVE LOGIC =================
+    function buildChain() {
+        const body = document.getElementById('chainBody');
+        body.innerHTML = '';
+        const relevant = DB.filter(i => i.e === ACTIVE_EXP && (i.s.endsWith('CE') || i.s.endsWith('PE')));
+        const strikes = [...new Set(relevant.map(i => i.k))].sort((a,b) => a-b);
 
-    function startLiveMode() {
-        buildChainUI();
-        if(LIVE_POLLER) clearInterval(LIVE_POLLER);
-        LIVE_POLLER = setInterval(pollLive, 1500);
-        pollLive();
-    }
+        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="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>
+        `).join('');
 
-    function stopLive() {
-        if(LIVE_POLLER) clearInterval(LIVE_POLLER);
+        if(POLLER) clearInterval(POLLER);
+        POLLER = setInterval(poll, 1100); // Fast Polling (1.1s)
+        poll();
     }
 
-    async function pollLive() {
-        if(MODE !== 'LIVE') return;
-        
-        let syms = ["NSE:NIFTY50-INDEX", ...FUT_SYMS.map(f=>f.s)];
-        
-        // Smart range selector based on Spot
-        const rows = Array.from(document.querySelectorAll('.row'));
-        if(SPOT_PRICE > 0 && rows.length > 0) {
-            let closest = rows.reduce((prev, curr) => Math.abs(parseFloat(curr.dataset.k) - SPOT_PRICE) < Math.abs(parseFloat(prev.dataset.k) - SPOT_PRICE) ? curr : prev);
-            
-            // Auto Scroll
-            if(!window.isScrolled) { closest.scrollIntoView({block:'center'}); window.isScrolled=true; }
+    // === DIRECT FYERS API CALL ===
+    async function poll() {
+        if(IS_POLLING) return; // Prevent overlap
+        IS_POLLING = true;
+
+        // 1. Determine symbols to fetch
+        let syms = [SPOT_SYM, ...FUT_SYMS.map(f => f.s)];
+        if(SPOT_PRICE > 0) {
+            const rows = Array.from(document.querySelectorAll('.row'));
+            let closest = rows[0], min = 999999;
+            rows.forEach(r => {
+                const diff = Math.abs(SPOT_PRICE - parseFloat(r.dataset.k));
+                if(diff < min) { min = diff; closest = r; }
+            });
             
             // Highlight ATM
-            document.querySelectorAll('.atm').forEach(e=>e.classList.remove('atm'));
+            document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
             closest.classList.add('atm');
+            if(!window.scrolled) { closest.scrollIntoView({block:'center'}); window.scrolled = true; }
 
-            // Select Symbols (+/- 20 strikes)
             const idx = rows.indexOf(closest);
-            const subset = rows.slice(Math.max(0, idx-20), Math.min(rows.length, idx+20));
-            subset.forEach(r => {
-                const k = parseFloat(r.dataset.k);
-                DB.forEach(d => { if(d.e === ACTIVE_EXP && d.k === k) syms.push(d.s); });
-            });
-        } else {
-            // Fallback: fetch random range if no spot yet
-            DB.slice(0, 50).forEach(d => { if(d.e === ACTIVE_EXP) syms.push(d.s); });
+            const viewRows = rows.slice(Math.max(0, idx-15), Math.min(rows.length, idx+15));
+            const viewKs = viewRows.map(r => parseFloat(r.dataset.k));
+            DB.forEach(i => { if(i.e === ACTIVE_EXP && viewKs.includes(i.k)) syms.push(i.s); });
         }
 
+        const symbolStr = [...new Set(syms)].join(',');
+
         try {
-            const url = `https://api-t1.fyers.in/data/depth?symbol=${[...new Set(syms)].join(',')}&ohlcv_flag=1`;
-            const res = await fetch(url, { headers: { 'Authorization': AUTH_TOKEN } });
-            if(res.status === 401) location.href = "/logout";
+            // DIRECT CALL TO FYERS FROM BROWSER
+            const url = `https://api-t1.fyers.in/data/depth?symbol=${symbolStr}&ohlcv_flag=1`;
+            
+            const res = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'Authorization': AUTH_TOKEN,
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if(res.status === 401) {
+                location.href = '/logout'; // Token expired
+                return;
+            }
+
             const json = await res.json();
+            
             if(json.s === 'ok') {
-                blinkStatus('var(--green)');
+                const dot = document.getElementById('statusDot');
+                dot.style.background = 'var(--green)';
+                dot.classList.add('live');
+                setTimeout(() => dot.classList.remove('live'), 500);
                 updateUI(json.d);
+            } else {
+                 console.warn("API Error:", json);
             }
-        } catch(e) { blinkStatus('var(--red)'); }
-    }
-
-    // ================= HISTORY LOGIC =================
-
-    async function loadJobsForHistory() {
-        const res = await fetch('/api/jobs/list');
-        const jobs = await res.json();
-        const sel = document.getElementById('histJobSel');
-        sel.innerHTML = '';
-        jobs.forEach(j => {
-             const dt = new Date(j.created_at * 1000).toLocaleString();
-             const expDt = new Date(j.expiry_ts * 1000).toLocaleDateString();
-             sel.add(new Option(`Job #${j.id} (${j.date_str}) - Exp: ${expDt}`, j.id));
-        });
-        if(jobs.length > 0) loadJobSnapshots();
-    }
-
-    async function loadJobSnapshots() {
-        const id = document.getElementById('histJobSel').value;
-        const res = await fetch(`/api/history/snapshots?job_id=${id}`);
-        SNAPSHOTS = await res.json();
-        const slider = document.getElementById('timeSlider');
-        slider.max = SNAPSHOTS.length - 1;
-        slider.value = 0;
-        onSliderMove();
-    }
-
-    async function onSliderMove() {
-        const idx = document.getElementById('timeSlider').value;
-        if(!SNAPSHOTS[idx]) return;
-        
-        const snap = SNAPSHOTS[idx];
-        const date = new Date(snap.timestamp * 1000);
-        document.getElementById('histTime').innerText = date.toLocaleTimeString();
-        document.getElementById('histSpot').innerText = "Spot: " + snap.spot_price;
-        
-        // Fetch data for this timestamp
-        const jId = document.getElementById('histJobSel').value;
-        const res = await fetch(`/api/history/data?job_id=${jId}&timestamp=${snap.timestamp}`);
-        const json = await res.json();
-        if(json.s === 'ok') {
-            updateUI(json.d);
-            // Sync Spot manually for history
-            SPOT_PRICE = snap.spot_price;
-            document.getElementById('spotPrice').innerText = SPOT_PRICE;
-            highlightATM(SPOT_PRICE);
+        } catch(e) { 
+            document.getElementById('statusDot').style.background = 'var(--red)';
+            console.error("Fetch Error:", e);
+        } finally {
+            IS_POLLING = false;
         }
     }
 
-    // ================= SHARED UI =================
-
-    function buildChainUI() {
-        const body = document.getElementById('chainBody');
-        const relevant = DB.filter(i => i.e === ACTIVE_EXP && (i.s.endsWith('CE') || i.s.endsWith('PE')));
-        const strikes = [...new Set(relevant.map(i => i.k))].sort((a,b)=>a-b);
-        
-        body.innerHTML = strikes.map(k => `
-            <div class="row" data-k="${k}" id="row-${k}">
-                 <div class="side-col" id="ce-${k}">-</div>
-                 <div class="mid-col">
-                    <div class="visual-bar" id="bar-${k}"></div>
-                    <span style="z-index:2; font-weight:800;">${k}</span>
-                    <span style="z-index:2; font-size:10px; background:#fff; margin-left:5px; padding:0 3px;" id="val-${k}"></span>
-                 </div>
-                 <div class="side-col" id="pe-${k}">-</div>
-            </div>
-        `).join('');
-    }
-
     function updateUI(data) {
-        // Update Futures
-        if(data["NSE:NIFTY50-INDEX"]) SPOT_PRICE = data["NSE:NIFTY50-INDEX"].ltp;
-        document.getElementById('spotPrice').innerText = SPOT_PRICE;
-
-        const fBody = document.getElementById('futBody');
-        let fHtml = '';
-        FUT_SYMS.forEach(f => {
-            const d = data[f.s];
-            if(d) {
-                const tot = (d.totalbuyqty + d.totalsellqty) || 1;
-                fHtml += `
-                <div class="fut-card">
-                    <div style="display:flex; justify-content:space-between; font-weight:700; font-size:12px;">
-                        <span>${new Date(f.e*1000).toLocaleDateString()} FUT</span>
-                        <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
-                    </div>
-                    <div style="height:4px; background:#eee; display:flex; margin-top:5px; border-radius:2px; overflow:hidden;">
-                        <div style="width:${(d.totalbuyqty/tot)*100}%; background:var(--green)"></div>
-                        <div style="width:${(d.totalsellqty/tot)*100}%; background:var(--red)"></div>
-                    </div>
-                    <div style="display:flex; justify-content:space-between; font-size:10px; color:#888;">
-                        <span>B: ${fmt(d.totalbuyqty)}</span><span>S: ${fmt(d.totalsellqty)}</span>
-                    </div>
-                </div>`;
-            }
-        });
-        fBody.innerHTML = fHtml;
+        if(data[SPOT_SYM]) {
+            SPOT_PRICE = data[SPOT_SYM].ltp;
+            document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
+        }
+        document.getElementById('futBody').innerHTML = FUT_SYMS.map(obj => {
+            const d = data[obj.s];
+            if(!d) return '';
+            const tot = (d.totalbuyqty + d.totalsellqty) || 1;
+            const dt = new Date(obj.e * 1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'});
+            return `
+            <div class="fut-card">
+                <div style="display:flex; justify-content:space-between; font-weight:700;">
+                    <span>${dt} FUT</span> <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
+                </div>
+                <div class="meter-bg">
+                    <div style="width:${(d.totalbuyqty/tot)*100}%; background:var(--green)"></div>
+                    <div style="width:${(d.totalsellqty/tot)*100}%; background:var(--red)"></div>
+                </div>
+                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:2px;">
+                    <span>B: ${fmt(d.totalbuyqty)}</span> <span>S: ${fmt(d.totalsellqty)}</span>
+                </div>
+            </div>`;
+        }).join('');
 
-        // Process OI
         const rowData = {};
         for(const [sym, d] of Object.entries(data)) {
             const meta = DB.find(x => x.s === sym);
             if(!meta || meta.e !== ACTIVE_EXP) continue;
-            if(!rowData[meta.k]) rowData[meta.k] = {ce:0, pe:0};
+            if(!rowData[meta.k]) rowData[meta.k] = { ce:0, pe:0 };
             if(sym.endsWith('CE')) rowData[meta.k].ce = d.totalsellqty;
             if(sym.endsWith('PE')) rowData[meta.k].pe = d.totalsellqty;
         }
 
-        let maxDiff = 0;
-        for(let k in rowData) maxDiff = Math.max(maxDiff, Math.abs(rowData[k].pe - rowData[k].ce));
+        let maxD = 0;
+        for(const k in rowData) maxD = Math.max(maxD, Math.abs(rowData[k].pe - rowData[k].ce));
 
-        for(let k in rowData) {
+        for(const k in rowData) {
             const r = rowData[k];
-            const diff = r.pe - r.ce; // Put Sell - Call Sell (Bullish if +ve)
-            
-            const ceEl = document.getElementById(`ce-${k}`);
-            const peEl = document.getElementById(`pe-${k}`);
-            if(ceEl) ceEl.innerHTML = `<span>S: <b>${fmt(r.ce)}</b></span>`;
-            if(peEl) peEl.innerHTML = `<span>S: <b>${fmt(r.pe)}</b></span>`;
-
+            const delta = r.pe - r.ce;
+            const ceDiv = document.getElementById(`ce-${k}`);
+            const peDiv = document.getElementById(`pe-${k}`);
+            if(ceDiv) ceDiv.innerHTML = `<span>S: <strong>${fmt(r.ce)}</strong></span>`;
+            if(peDiv) peDiv.innerHTML = `<span>S: <strong>${fmt(r.pe)}</strong></span>`;
             const bar = document.getElementById(`bar-${k}`);
             const val = document.getElementById(`val-${k}`);
             if(bar) {
-                const pct = maxDiff > 0 ? (Math.abs(diff)/maxDiff)*100 : 0;
-                bar.style.width = (pct/2) + '%';
-                if(diff > 0) {
-                     bar.style.background = 'var(--green-soft)';
-                     bar.style.left = '50%';
-                     val.innerText = "+" + fmt(diff);
-                     val.style.color = 'var(--green)';
+                const pct = maxD > 0 ? (Math.abs(delta)/maxD)*100 : 0;
+                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)) + '%';
-                     val.innerText = fmt(diff);
-                     val.style.color = 'var(--red)';
+                    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);
                 }
             }
         }
     }
 
-    function highlightATM(spot) {
-        document.querySelectorAll('.atm').forEach(e=>e.classList.remove('atm'));
-        const rows = Array.from(document.querySelectorAll('.row'));
-        if(rows.length===0) return;
-        const closest = rows.reduce((prev, curr) => Math.abs(parseFloat(curr.dataset.k) - spot) < Math.abs(parseFloat(prev.dataset.k) - spot) ? curr : prev);
-        closest.classList.add('atm');
-    }
-
-    // ================= JOB MANAGER =================
-
-    function openJobModal() {
-        document.getElementById('jobModal').style.display = 'flex';
-        fetchJobs();
-    }
-    function closeModal(id) { document.getElementById(id).style.display = 'none'; }
-
-    async function fetchJobs() {
-        const res = await fetch('/api/jobs/list');
-        const jobs = await res.json();
-        const t = document.getElementById('jobTable');
-        t.innerHTML = `<tr><th>ID</th><th>Date</th><th>Expiry</th><th>Status</th><th>Action</th></tr>` + 
-        jobs.map(j => `
-            <tr>
-                <td>${j.id}</td>
-                <td>${j.date_str}</td>
-                <td>${new Date(j.expiry_ts*1000).toLocaleDateString()}</td>
-                <td style="color:${j.status==='RUNNING'?'green':'red'}">${j.status}</td>
-                <td>
-                    ${j.status==='RUNNING' ? `<button class="btn stop" onclick="stopJob(${j.id})">STOP</button>` : '-'}
-                </td>
-            </tr>
-        `).join('');
-    }
-
-    async function startRecording() {
-        const sel = document.getElementById('jobExpirySel');
-        const ts = parseInt(sel.value);
-        if(!confirm("Start recording for expiry " + sel.options[sel.selectedIndex].text + "?")) return;
-        
-        const res = await fetch('/api/jobs/create', {
-            method:'POST',
-            headers:{'Content-Type':'application/json'},
-            body: JSON.stringify({expiry: ts})
-        });
-        const json = await res.json();
-        if(json.s === 'ok') { alert("Started Job #" + json.id); fetchJobs(); }
-        else alert("Error: " + json.msg);
-    }
-
-    async function stopJob(id) {
-        await fetch(`/api/jobs/stop?id=${id}`);
-        fetchJobs();
-    }
-
-    function blinkStatus(color) {
-        const d = document.getElementById('statusDot');
-        d.style.background = color;
-        setTimeout(()=> d.style.background='#ccc', 200);
-    }
-
     function fmt(n) {
-        if(n>=100000) return (n/100000).toFixed(2)+'L';
-        if(n>=1000) return (n/1000).toFixed(1)+'k';
+        let abs = Math.abs(n);
+        if(abs>=100000) return (n/100000).toFixed(2)+'L';
+        if(abs>=1000) return (n/1000).toFixed(1)+'k';
         return n;
     }
 </script>
+
 </body>
 </html>
 """
 
-if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+
+if name == "main":
+uvicorn.run(app, host="0.0.0.0", port=7860)