Update app.py

app.py

@@ -1,14 +1,14 @@
---- START OF FILE app.py ---
 import pandas as pd
 import requests
 import uvicorn
 import json
 import asyncio
-import numpy as np
 from datetime import datetime, timedelta
 from fastapi import FastAPI, Body, HTTPException
 from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 from typing import Optional, List, Dict, Any
+from collections import defaultdict
 
 # ==========================================
 # 1. CONFIGURATION
@@ -28,6 +28,7 @@ app = FastAPI()
 # 2. HELPER FUNCTIONS
 # ==========================================
 def sb_get(endpoint: str, params: dict = None):
+    """Generic Supabase GET helper."""
     try:
         url = f"{SB_URL}/rest/v1{endpoint}"
         r = requests.get(url, headers=HEADERS, params=params)
@@ -37,6 +38,31 @@ def sb_get(endpoint: str, params: dict = None):
         print(f"DB Error ({endpoint}): {e}")
         return []
 
+def get_strike_from_symbol(symbol: str) -> tuple:
+    """Extract strike price and option type from symbol."""
+    try:
+        # Symbol format: NSE:NIFTY24JAN21000CE or similar
+        parts = symbol.split(':')[-1]
+        # Find CE or PE in the symbol
+        if 'CE' in parts:
+            opt_type = 'CE'
+            strike_part = parts.split('CE')[0]
+        elif 'PE' in parts:
+            opt_type = 'PE'
+            strike_part = parts.split('PE')[0]
+        else:
+            return 0, 'FUT'
+        
+        # Extract strike from the end (last 5 digits typically)
+        import re
+        numbers = re.findall(r'\d+', strike_part)
+        if numbers:
+            strike = float(numbers[-1])
+            return strike, opt_type
+    except:
+        pass
+    return 0, 'FUT'
+
 # ==========================================
 # 3. API ROUTES - METADATA
 # ==========================================
@@ -47,45 +73,177 @@ def home():
 
 @app.get("/api/dates")
 def get_dates():
-    data = sb_get("/history_buckets_fyers", {"select": "minute", "order": "minute.desc", "limit": "20000"})
-    dates = sorted(list(set(row['minute'].split('T')[0] for row in data if row.get('minute'))), reverse=True)
-    return JSONResponse(dates)
+    """Fetch distinct dates."""
+    data = sb_get("/history_buckets_fyers", {"select": "minute", "order": "minute.desc", "limit": "50000"})
+    dates = set()
+    for row in data:
+        if row.get('minute'):
+            dates.add(row['minute'].split('T')[0])
+    return JSONResponse(sorted(list(dates), reverse=True))
 
 @app.get("/api/roots")
 def get_roots(date: str):
+    """Fetch roots available for a specific date."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
     data = sb_get(f"/history_buckets_fyers?select=root&minute=gte.{start}&minute=lte.{end}")
-    roots = sorted(list(set(row['root'] for row in data if row.get('root'))))
-    return JSONResponse(roots)
+    roots = set()
+    for row in data:
+        if row.get('root'):
+            roots.add(row['root'])
+    return JSONResponse(sorted(list(roots)))
 
-@app.get("/api/config_meta")
-def get_config_meta(date: str, root: str):
-    """Returns expiries and categorizes instruments into Futures and Options."""
+@app.get("/api/auto_config")
+def get_auto_config(date: str, root: str):
+    """Smart helper for defaults (Current/Next expiry)."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
-    data = sb_get(f"/history_buckets_fyers?select=expiry,data&root=eq.{root}&minute=gte.{start}&minute=lte.{end}&limit=100")
+    # Fetch small limit just to inspect structure
+    data = sb_get(f"/history_buckets_fyers?select=expiry,data&root=eq.{root}&expiry=neq.MARKET&minute=gte.{start}&minute=lte.{end}&limit=50")
     
-    expiries = sorted(list(set(row['expiry'] for row in data)))
+    expiry_map = {} 
+    for row in data:
+        exp = row.get('expiry')
+        if not exp: continue
+        if exp not in expiry_map:
+            keys = list(row.get('data', {}).keys())
+            expiry_map[exp] = keys
+        else:
+            existing = set(expiry_map[exp])
+            new_keys = row.get('data', {}).keys()
+            expiry_map[exp] = list(existing.union(new_keys))
+
+    all_expiries = sorted(expiry_map.keys())
+    valid_expiries = [e for e in all_expiries if e >= date]
+    if not valid_expiries:
+        valid_expiries = all_expiries
+
+    response = {"expiries": all_expiries, "current": None, "next": None}
+
+    def find_fut(instruments):
+        for i in instruments:
+            if 'FUT' in i: return i
+        return instruments[0] if instruments else None
+
+    if len(valid_expiries) > 0:
+        exp_c = valid_expiries[0]
+        inst_c = find_fut(expiry_map[exp_c])
+        response["current"] = {"expiry": exp_c, "instrument": inst_c}
+
+    if len(valid_expiries) > 1:
+        exp_n = valid_expiries[1]
+        inst_n = find_fut(expiry_map[exp_n])
+        response["next"] = {"expiry": exp_n, "instrument": inst_n}
+
+    return JSONResponse(response)
+
+@app.get("/api/expiries")
+def get_expiries(date: str, root: str):
+    """Fetch distinct expiries."""
+    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+    data = sb_get(f"/history_buckets_fyers?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}")
+    exps = set(row['expiry'] for row in data if row.get('expiry'))
+    return JSONResponse(sorted(list(exps)))
+
+@app.get("/api/instruments")
+def get_instruments(date: str, root: str, expiry: str, instrument_type: str = "all"):
+    """Fetch instruments filtered by type (futures/options/all)."""
+    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+    data = sb_get(f"/history_buckets_fyers?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=10")
+    instruments = set()
+    for row in data:
+        keys = row.get('data', {}).keys()
+        instruments.update(keys)
+    
+    # Filter based on instrument type
+    instruments = sorted(list(instruments))
     
-    # Analyze one bucket to separate Futures/Spot from Options
-    futures = set()
-    options = set()
+    if instrument_type == "futures":
+        # Show only futures (including spot/equity)
+        filtered = [i for i in instruments if 'FUT' in i or '-EQ' in i or 'INDEX' in i]
+        return JSONResponse(filtered)
+    elif instrument_type == "options":
+        # Show only options
+        filtered = [i for i in instruments if 'CE' in i or 'PE' in i]
+        return JSONResponse(filtered)
+    else:
+        return JSONResponse(instruments)
+
+@app.get("/api/options_chain")
+def get_options_chain(date: str, root: str, expiry: str):
+    """Fetch all options for a specific expiry with strike information."""
+    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+    data = sb_get(f"/history_buckets_fyers?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=5")
+    
+    options_data = []
+    seen = set()
     
     for row in data:
-        for inst in row.get('data', {}).keys():
-            if "CE" in inst or "PE" in inst:
-                # Extract root-like part for options (e.g., NIFTY24DEC25000CE -> NIFTY24DEC)
-                options.add(inst)
-            else:
-                futures.add(inst)
-                
+        for symbol in row.get('data', {}).keys():
+            if ('CE' in symbol or 'PE' in symbol) and symbol not in seen:
+                strike, opt_type = get_strike_from_symbol(symbol)
+                if strike > 0:
+                    options_data.append({
+                        "symbol": symbol,
+                        "strike": strike,
+                        "type": opt_type
+                    })
+                    seen.add(symbol)
+    
+    # Sort by strike
+    options_data.sort(key=lambda x: x['strike'])
+    return JSONResponse(options_data)
+
+@app.get("/api/spot_price")
+def get_spot_price(date: str, root: str, timeframe: str = "1min"):
+    """Fetch spot/future price for ATM calculation."""
+    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+    
+    # First try to get from MARKET bucket (spot)
+    data = sb_get(f"/history_buckets_fyers?select=data&root=eq.{root}&expiry=eq.MARKET&minute=gte.{start}&minute=lte.{end}&order=minute.asc&limit=500")
+    
+    if not data:
+        # Fallback to futures
+        data = sb_get(f"/history_buckets_fyers?select=data,expiry&root=eq.{root}&expiry=neq.MARKET&minute=gte.{start}&minute=lte.{end}&order=minute.asc&limit=500")
+    
+    records = []
+    for row in data:
+        try:
+            base_ts = datetime.fromisoformat(row['minute'])
+            inst_data = row.get('data', {})
+            
+            # Get first instrument (usually spot or main future)
+            for symbol, sdata in inst_data.items():
+                p_arr = sdata.get('p', []) or []
+                for i in range(6):
+                    if i < len(p_arr) and p_arr[i] is not None:
+                        records.append({
+                            "ts": base_ts + timedelta(seconds=i*10),
+                            "price": float(p_arr[i])
+                        })
+                break  # Only first instrument
+        except:
+            continue
+    
+    if not records:
+        return JSONResponse({"error": "No spot data found"})
+    
+    df = pd.DataFrame(records)
+    df.set_index('ts', inplace=True)
+    
+    tf_map = {
+        "1min": "1min", "3min": "3min", "5min": "5min", 
+        "15min": "15min", "30min": "30min", "1hour": "1h"
+    }
+    panda_tf = tf_map.get(timeframe, "1min")
+    
+    resampled = df.resample(panda_tf).median().dropna()
+    
     return JSONResponse({
-        "expiries": expiries,
-        "futures": sorted(list(futures)),
-        "options": sorted(list(options))
+        "labels": resampled.index.strftime('%H:%M').tolist(),
+        "prices": resampled['price'].tolist()
     })
 
 # ==========================================
-# 4. CORE ENGINE - DATA FETCHING & ATM LOGIC
+# 4. API ROUTES - DATA FETCHING (OPTIMIZED)
 # ==========================================
 
 @app.post("/api/fetch_series")
@@ -93,145 +251,279 @@ def fetch_series(
     date: str = Body(...),
     root: str = Body(...),
     expiry: str = Body(...),
-    mode: str = Body("STANDARD"), # STANDARD or ADVANCED
-    instrument: str = Body(None), # Used in Standard
-    range_val: int = Body(5),     # Used in Advanced (ATM +- 5)
-    timeframe: str = Body("1min"), 
+    instrument: str = Body(...),
+    timeframe: str = Body(...), 
     start_time: str = Body(...),
     end_time: str = Body(...)
 ):
+    """
+    Fetches raw 10s data using Postgres JSON filtering to save bandwidth.
+    Normal mode - single instrument.
+    """
     t_start = f"{date}T{start_time}:00"
     t_end = f"{date}T{end_time}:59"
     
-    # 1. Fetch data. For Advanced mode, we need full JSON for the expiry.
-    # We also need a Reference Price (usually the first Future/Spot found in MARKET expiry)
-    if mode == "ADVANCED":
-        # Get Option Data
-        url_opt = f"/history_buckets_fyers?select=minute,data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
-        # Get Reference Data (Spot/Future) to calculate ATM
-        url_ref = f"/history_buckets_fyers?select=minute,data&root=eq.{root}&expiry=eq.MARKET&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
-        
-        opt_rows = sb_get(url_opt)
-        ref_rows = sb_get(url_ref)
-        
-        ref_map = {r['minute']: r['data'] for r in ref_rows}
-        
-        records = []
-        for row in opt_rows:
-            ts_base = datetime.fromisoformat(row['minute'])
-            opt_data = row.get('data', {})
-            ref_data = ref_map.get(row['minute'], {})
+    # CRITICAL: Postgres JSON Filtering
+    select_query = f'minute,inst_data:data->"{instrument}"'
+    
+    url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
+    
+    rows = sb_get(url)
+    
+    records = []
+    for row in rows:
+        try:
+            base_ts = datetime.fromisoformat(row['minute'])
+            inst_data = row.get('inst_data')
             
-            # Find a reference price (Spot preferred, then Future)
-            def get_ref_p(idx):
-                for sym, d in ref_data.items():
-                    if "INDEX" in sym or "-EQ" in sym or "FUT" in sym:
-                        if d.get('p') and len(d['p']) > idx and d['p'][idx]:
-                            return d['p'][idx]
-                return None
-
-            # Process 10s buckets
-            for i in range(6):
-                lp = get_ref_p(i)
-                if lp is None: continue
-                
-                # Identify ATM and Range
-                all_inst = opt_data.keys()
-                # Parse strikes: Expecting format like ...25000CE
-                strikes = []
-                for inst in all_inst:
-                    try:
-                        # Extract numeric part before CE/PE
-                        s_str = "".join(filter(str.isdigit, inst[-7:]))
-                        strikes.append(int(s_str))
-                    except: pass
-                
-                if not strikes: continue
-                strikes = sorted(list(set(strikes)))
-                atm = min(strikes, key=lambda x: abs(x - lp))
-                atm_idx = strikes.index(atm)
-                
-                # 11 strikes (5 ITM, ATM, 5 OTM)
-                start_idx = max(0, atm_idx - range_val)
-                end_idx = min(len(strikes), atm_idx + range_val + 1)
-                target_strikes = strikes[start_idx:end_idx]
-                
-                # Aggregators
-                cb, cs, pb, ps = 0, 0, 0, 0
-                vol, oi = 0, 0
-                
-                for inst, d in opt_data.items():
-                    # Check if this inst is in our strike range
-                    inst_strike = next((s for s in target_strikes if str(s) in inst), None)
-                    if inst_strike:
-                        b = d['b'][i] if d.get('b') and len(d['b']) > i and d['b'][i] else 0
-                        s = d['s'][i] if d.get('s') and len(d['s']) > i and d['s'][i] else 0
-                        v = d['v'][i] if d.get('v') and len(d['v']) > i and d['v'][i] else 0
-                        o = d['o'][i] if d.get('o') and len(d['o']) > i and d['o'][i] else 0
-                        
-                        vol += v
-                        oi += o
-                        if "CE" in inst:
-                            cb += b; cs += s
-                        elif "PE" in inst:
-                            pb += b; ps += s
-                
-                records.append({
-                    "ts": ts_base + timedelta(seconds=i*10),
-                    "price": lp, "vol": vol, "oi": oi,
-                    "cb": cb, "cs": cs, "pb": pb, "ps": ps,
-                    "b": cb + pb, "s": cs + ps # Total Buy/Sell
-                })
+            if not inst_data: continue
 
-    else:
-        # STANDARD MODE: Simple JSON extraction
-        select_query = f'minute,inst_data:data->"{instrument}"'
-        url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
-        rows = sb_get(url)
-        records = []
-        for row in rows:
-            base_ts = datetime.fromisoformat(row['minute'])
-            d = row.get('inst_data')
-            if not d: continue
+            # Extract buckets (0s to 50s)
+            p_arr = inst_data.get('p', []) or []
+            b_arr = inst_data.get('b', []) or []
+            s_arr = inst_data.get('s', []) or []
+            v_arr = inst_data.get('v', []) or []
+            o_arr = inst_data.get('o', []) or []
+            
             for i in range(6):
-                if d.get('p') and len(d['p']) > i and d['p'][i] is not None:
+                if i < len(p_arr) and p_arr[i] is not None:
                     records.append({
                         "ts": base_ts + timedelta(seconds=i*10),
-                        "price": float(d['p'][i]),
-                        "b": float(d['b'][i]) if d.get('b') and len(d['b']) > i and d['b'][i] else 0,
-                        "s": float(d['s'][i]) if d.get('s') and len(d['s']) > i and d['s'][i] else 0,
-                        "vol": float(d['v'][i]) if d.get('v') and len(d['v']) > i and d['v'][i] else 0,
-                        "oi": float(d['o'][i]) if d.get('o') and len(d['o']) > i and d['o'][i] else 0,
-                        "cb": 0, "cs": 0, "pb": 0, "ps": 0
+                        "price": float(p_arr[i]),
+                        "buy_qty": float(b_arr[i]) if i < len(b_arr) and b_arr[i] else 0.0,
+                        "sell_qty": float(s_arr[i]) if i < len(s_arr) and s_arr[i] else 0.0,
+                        "volume": float(v_arr[i]) if i < len(v_arr) and v_arr[i] else 0.0,
+                        "oi": float(o_arr[i]) if i < len(o_arr) and o_arr[i] else 0.0
                     })
+        except Exception:
+            continue
 
     if not records:
-         return JSONResponse({"error": "No data found"})
+         return JSONResponse({"error": "No data found", "labels": [], "P": []})
 
-    df = pd.DataFrame(records).set_index('ts')
+    df = pd.DataFrame(records)
+    df.set_index('ts', inplace=True)
+    
+    tf_map = {
+        "1min": "1min", "3min": "3min", "5min": "5min", 
+        "15min": "15min", "30min": "30min", "1hour": "1h"
+    }
+    panda_tf = tf_map.get(timeframe, "1min")
     
-    # Fill missing 10s data to avoid line distortion
-    df = df.resample('10s').ffill()
+    resampled = df.resample(panda_tf).median().dropna()
+    
+    response_data = {
+        "labels": resampled.index.strftime('%H:%M').tolist(),
+        "P": resampled['price'].tolist(),
+        "B": resampled['buy_qty'].tolist(),
+        "S": resampled['sell_qty'].tolist(),
+        "V": resampled['volume'].tolist(),
+        "OI": resampled['oi'].tolist()
+    }
+    
+    return JSONResponse(response_data)
+
+
+@app.post("/api/fetch_advanced_series")
+def fetch_advanced_series(
+    date: str = Body(...),
+    root: str = Body(...),
+    expiry: str = Body(...),
+    instruments: List[str] = Body(...),
+    timeframe: str = Body(...), 
+    start_time: str = Body(...),
+    end_time: str = Body(...)
+):
+    """
+    Fetches data for multiple instruments (ATM +- strikes) for Advanced Mode.
+    Returns aggregated Call/Put Buyer/Seller data.
+    """
+    t_start = f"{date}T{start_time}:00"
+    t_end = f"{date}T{end_time}:59"
+    
+    # Separate CE and PE instruments
+    ce_instruments = [i for i in instruments if 'CE' in i]
+    pe_instruments = [i for i in instruments if 'PE' in i]
+    
+    all_records = {}  # ts -> aggregated data
+    
+    def fetch_instrument_data(inst_list, label_prefix):
+        """Fetch data for a list of instruments and aggregate."""
+        for instrument in inst_list:
+            select_query = f'minute,inst_data:data->"{instrument}"'
+            url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
+            rows = sb_get(url)
+            
+            for row in rows:
+                try:
+                    base_ts = datetime.fromisoformat(row['minute'])
+                    inst_data = row.get('inst_data')
+                    
+                    if not inst_data: continue
 
-    # Resample to Target Timeframe
-    tf_map = {"1min": "1min", "3min": "3min", "5min": "5min", "15min": "15min", "30min": "30min", "1hour": "1h"}
-    resampled = df.resample(tf_map.get(timeframe, "1min")).agg({
-        'price': 'last', 'vol': 'sum', 'oi': 'last',
-        'b': 'sum', 's': 'sum', 'cb': 'sum', 'cs': 'sum', 'pb': 'sum', 'ps': 'sum'
-    }).dropna()
+                    p_arr = inst_data.get('p', []) or []
+                    b_arr = inst_data.get('b', []) or []
+                    s_arr = inst_data.get('s', []) or []
+                    v_arr = inst_data.get('v', []) or []
+                    o_arr = inst_data.get('o', []) or []
+                    
+                    for i in range(6):
+                        if i < len(p_arr) and p_arr[i] is not None:
+                            ts = base_ts + timedelta(seconds=i*10)
+                            ts_key = ts.isoformat()
+                            
+                            if ts_key not in all_records:
+                                all_records[ts_key] = {
+                                    "ts": ts,
+                                    "price": [], "buy_qty": [], "sell_qty": [], 
+                                    "volume": [], "oi": [],
+                                    "cb": [], "cs": [], "pb": [], "ps": []
+                                }
+                            
+                            buy = float(b_arr[i]) if i < len(b_arr) and b_arr[i] else 0.0
+                            sell = float(s_arr[i]) if i < len(s_arr) and s_arr[i] else 0.0
+                            
+                            all_records[ts_key]["price"].append(float(p_arr[i]))
+                            all_records[ts_key]["buy_qty"].append(buy)
+                            all_records[ts_key]["sell_qty"].append(sell)
+                            all_records[ts_key]["volume"].append(float(v_arr[i]) if i < len(v_arr) and v_arr[i] else 0.0)
+                            all_records[ts_key]["oi"].append(float(o_arr[i]) if i < len(o_arr) and o_arr[i] else 0.0)
+                            
+                            # Separate CB/CS (Call) and PB/PS (Put)
+                            if 'CE' in instrument:
+                                all_records[ts_key]["cb"].append(buy)  # Call Buyers
+                                all_records[ts_key]["cs"].append(sell)  # Call Sellers
+                            else:
+                                all_records[ts_key]["pb"].append(buy)  # Put Buyers
+                                all_records[ts_key]["ps"].append(sell)  # Put Sellers
+                                
+                except Exception:
+                    continue
     
-    return JSONResponse({
+    # Fetch data for all instruments
+    fetch_instrument_data(ce_instruments, 'CE')
+    fetch_instrument_data(pe_instruments, 'PE')
+    
+    if not all_records:
+        return JSONResponse({"error": "No data found", "labels": [], "P": []})
+    
+    # Aggregate records
+    aggregated = []
+    for ts_key in sorted(all_records.keys()):
+        rec = all_records[ts_key]
+        
+        def safe_median(arr):
+            if not arr: return 0.0
+            filtered = [x for x in arr if x is not None]
+            return sum(filtered) / len(filtered) if filtered else 0.0
+        
+        def safe_sum(arr):
+            if not arr: return 0.0
+            return sum(x for x in arr if x is not None)
+        
+        aggregated.append({
+            "ts": rec["ts"],
+            "price": safe_median(rec["price"]),
+            "buy_qty": safe_sum(rec["buy_qty"]),
+            "sell_qty": safe_sum(rec["sell_qty"]),
+            "volume": safe_sum(rec["volume"]),
+            "oi": safe_sum(rec["oi"]),
+            "cb": safe_sum(rec["cb"]),  # Total Call Buyers
+            "cs": safe_sum(rec["cs"]),  # Total Call Sellers
+            "pb": safe_sum(rec["pb"]),  # Total Put Buyers
+            "ps": safe_sum(rec["ps"])   # Total Put Sellers
+        })
+    
+    df = pd.DataFrame(aggregated)
+    df.set_index('ts', inplace=True)
+    
+    tf_map = {
+        "1min": "1min", "3min": "3min", "5min": "5min", 
+        "15min": "15min", "30min": "30min", "1hour": "1h"
+    }
+    panda_tf = tf_map.get(timeframe, "1min")
+    
+    # Use sum for quantities, median for price
+    resampled_price = df['price'].resample(panda_tf).median()
+    resampled_qty = df[['buy_qty', 'sell_qty', 'volume', 'oi', 'cb', 'cs', 'pb', 'ps']].resample(panda_tf).sum()
+    
+    resampled = pd.concat([resampled_price, resampled_qty], axis=1).dropna()
+    
+    response_data = {
         "labels": resampled.index.strftime('%H:%M').tolist(),
         "P": resampled['price'].tolist(),
-        "V": resampled['vol'].tolist(),
+        "B": resampled['buy_qty'].tolist(),
+        "S": resampled['sell_qty'].tolist(),
+        "V": resampled['volume'].tolist(),
         "OI": resampled['oi'].tolist(),
-        "B": resampled['b'].tolist(),
-        "S": resampled['s'].tolist(),
-        "CB": resampled['cb'].tolist(),
-        "CS": resampled['cs'].tolist(),
-        "PB": resampled['pb'].tolist(),
-        "PS": resampled['ps'].tolist()
-    })
+        "CB": resampled['cb'].tolist(),  # Call Buyers
+        "CS": resampled['cs'].tolist(),  # Call Sellers
+        "PB": resampled['pb'].tolist(),  # Put Buyers
+        "PS": resampled['ps'].tolist()   # Put Sellers
+    }
+    
+    return JSONResponse(response_data)
+
+
+@app.post("/api/get_atm_strikes")
+def get_atm_strikes(
+    date: str = Body(...),
+    root: str = Body(...),
+    expiry: str = Body(...),
+    atm_range: int = Body(default=5),
+    timeframe: str = Body(default="1min"),
+    start_time: str = Body(default="09:15"),
+    end_time: str = Body(default="15:30")
+):
+    """
+    Calculate ATM strikes dynamically for each time bucket.
+    Returns list of instruments for each time point.
+    """
+    t_start = f"{date}T{start_time}:00"
+    t_end = f"{date}T{end_time}:59"
+    
+    # Get spot prices for reference
+    spot_data = sb_get(f"/history_buckets_fyers?select=minute,data&root=eq.{root}&expiry=eq.MARKET&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc&limit=2000")
+    
+    # Get all options for the expiry
+    options_data = sb_get(f"/history_buckets_fyers?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&limit=5")
+    
+    # Extract all options with strikes
+    options_list = []
+    seen = set()
+    for row in options_data:
+        for symbol in row.get('data', {}).keys():
+            if ('CE' in symbol or 'PE' in symbol) and symbol not in seen:
+                strike, opt_type = get_strike_from_symbol(symbol)
+                if strike > 0:
+                    options_list.append({
+                        "symbol": symbol,
+                        "strike": strike,
+                        "type": opt_type
+                    })
+                    seen.add(symbol)
+    
+    if not options_list:
+        return JSONResponse({"error": "No options found for expiry"})
+    
+    # Get unique strikes sorted
+    strikes = sorted(list(set(o['strike'] for o in options_list)))
+    
+    # Build strike to symbol mapping
+    strike_map = {}
+    for o in options_list:
+        key = (o['strike'], o['type'])
+        strike_map[key] = o['symbol']
+    
+    # For each time point, calculate ATM and return +- strikes
+    result = {
+        "strikes": strikes,
+        "strike_map": strike_map,
+        "options_list": options_list
+    }
+    
+    return JSONResponse(result)
+
 
 # ==========================================
 # 5. FRONTEND TEMPLATE
@@ -242,401 +534,1112 @@ HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>DepthChain PRO v5</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <title>DepthChain PRO</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
+        /* --- THEME --- */
         :root {
-            --bg-body: #0d1117; --bg-header: #161b22; --bg-card: #0d1117; --bg-panel: #21262d; 
-            --bg-input: #161b22; --border: #30363d; --text-primary: #e6edf3; --text-secondary: #8b949e;
-            --accent: #2f81f7; --success: #238636; --danger: #da3633; --warning: #d29922;
+            --bg-body: #0d1117;
+            --bg-header: #161b22;
+            --bg-card: #0d1117; 
+            --bg-panel: #21262d; 
+            --bg-input: #161b22;
+            --border: #30363d;
+            --border-hover: #8b949e;
+            --text-primary: #e6edf3;
+            --text-secondary: #8b949e;
+            --accent: #2f81f7;
+            --accent-hover: #58a6ff;
+            --success: #238636;
+            --danger: #da3633;
+            --warning: #d29922;
+            --purple: #a371f7;
+            --cyan: #3fb950;
+            --font-main: 'Inter', sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
         }
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        body { background: var(--bg-body); color: var(--text-primary); font-family: 'Inter', sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; font-size: 13px; }
-        
-        .top-bar { height: 52px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; }
-        .brand { font-weight: 700; font-size: 15px; color: var(--text-primary); }
-        .brand span { color: var(--accent); background: rgba(47, 129, 247, 0.1); padding: 2px 6px; border-radius: 4px; font-size: 11px; margin-left: 5px; }
-        
-        select, button, input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 0 12px; height: 32px; border-radius: 6px; font-size: 12px; cursor: pointer; transition: 0.2s; }
-        button.primary { background: var(--accent); color: white; border: none; font-weight: 600; }
-        button.primary:hover { opacity: 0.9; }
+        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
+        body { 
+            background: var(--bg-body); color: var(--text-primary); font-family: var(--font-main); 
+            display: flex; flex-direction: column; height: 100vh; overflow: hidden; font-size: 13px;
+        }
+        ::-webkit-scrollbar { width: 10px; height: 10px; }
+        ::-webkit-scrollbar-track { background: var(--bg-body); }
+        ::-webkit-scrollbar-thumb { background: var(--bg-panel); border: 2px solid var(--bg-body); border-radius: 6px; }
+
+        /* HEADER */
+        .top-bar {
+            height: 52px; background: var(--bg-header); border-bottom: 1px solid var(--border);
+            display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0;
+        }
+        .brand { font-weight: 700; font-size: 15px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
+        .brand span { color: var(--accent); background: rgba(47, 129, 247, 0.15); padding: 2px 6px; border-radius: 4px; font-size: 11px; }
+        .controls { display: flex; align-items: center; gap: 12px; }
 
-        .main-container { flex: 1; display: flex; overflow-y: auto; }
-        .column { flex: 1; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
-        .chart-card { border-bottom: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
-        .card-header { height: 40px; background: var(--bg-header); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--border); }
-        .card-body { flex: 1; position: relative; }
+        select, button, input {
+            background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
+            padding: 0 12px; height: 32px; border-radius: 6px; font-size: 12px; cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.2); }
+        button:hover { background: var(--bg-panel); border-color: var(--border-hover); }
+        button.primary { background: var(--accent); border-color: var(--accent); color: white; }
+        button.primary:hover { background: var(--accent-hover); }
+        button.danger { color: var(--danger); border-color: var(--border); background: transparent; }
+        button.danger:hover { background: rgba(218, 54, 51, 0.1); }
+
+        .layout-toggle { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
+        .layout-btn { width: 30px; height: 26px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; }
+        .layout-btn.active { background: var(--bg-panel); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
+
+        /* GRID */
+        .main-container { flex: 1; display: flex; overflow-y: auto; overflow-x: hidden; }
+        .column { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
+        .column:last-child { border-right: none; }
+
+        .add-chart-btn {
+            height: 40px; border: none; border-top: 1px dashed var(--border); 
+            background: transparent; color: var(--text-secondary); width: 100%; font-weight: 600;
+        }
+        .add-chart-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
+
+        /* CARD */
+        .chart-card { background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
+        .card-header {
+            height: 38px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;
+            padding: 0 12px; background: var(--bg-header); flex-shrink: 0;
+        }
+        .card-info { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
+        .inst-label { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
+        .card-meta { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
+        .adv-badge { background: rgba(163, 113, 247, 0.2); color: var(--purple); padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; }
         
-        .status-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
-        .dot-live { background: var(--success); box-shadow: 0 0 8px var(--success); }
-        .dot-hist { background: var(--accent); }
+        .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); }
+        .status-dot.live { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.6); animation: pulse 2s infinite; }
+        .status-dot.hist { background: var(--accent); }
+        .status-dot.retry { background: var(--warning); }
+        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
+
+        .tool-btn { width: 24px; height: 24px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; }
+        .tool-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
+
+        .card-body { flex: 1; position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
+        .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); background: radial-gradient(circle, var(--bg-panel) 0%, var(--bg-card) 100%); }
 
         /* MODAL */
-        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1000; }
-        .modal { background: var(--bg-header); border: 1px solid var(--border); border-radius: 12px; width: 550px; max-width: 95%; overflow: hidden; }
-        .modal-tab-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-body); }
-        .modal-tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; color: var(--text-secondary); font-weight: 600; }
-        .modal-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: var(--bg-header); }
-        .modal-content { padding: 20px; }
-        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
-        .form-group label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; font-weight: 700; }
-        
-        .series-row { display: grid; grid-template-columns: 35px 1fr 1fr 60px 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
-        .info-icon { display: inline-block; width: 14px; height: 14px; background: var(--bg-panel); color: var(--text-secondary); border-radius: 50%; text-align: center; font-size: 10px; line-height: 14px; cursor: help; margin-left: 5px; }
-        
-        .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.5; }
-        
-        .layout-btn { width: 32px; font-weight: bold; }
-        .layout-btn.active { background: var(--accent); border-color: var(--accent); }
+        .modal-backdrop {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); 
+            z-index: 100; display: none; justify-content: center; align-items: center;
+            backdrop-filter: blur(4px);
+        }
+        .modal {
+            background: var(--bg-header); border: 1px solid var(--border); border-radius: 12px;
+            width: 600px; max-width: 95%; max-height: 90vh; display: flex; flex-direction: column;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+        }
+        .modal-head { 
+            padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;
+            background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-header) 100%);
+            border-radius: 12px 12px 0 0;
+        }
+        .modal-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; }
+        .mode-badge { 
+            padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
+        }
+        .mode-badge.normal { background: rgba(47, 129, 247, 0.2); color: var(--accent); }
+        .mode-badge.advanced { background: rgba(163, 113, 247, 0.2); color: var(--purple); }
+        
+        .modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
+        .modal-foot { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-card); border-radius: 0 0 12px 12px; }
+        
+        /* FORM SECTIONS */
+        .form-section { margin-bottom: 4px; }
+        .form-section label { 
+            font-size: 11px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; 
+            margin-bottom: 6px; display: flex; align-items: center; gap: 6px; 
+        }
+        .form-section label .info-icon {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 14px; height: 14px; border-radius: 50%; background: var(--border);
+            color: var(--text-secondary); font-size: 10px; font-weight: 700; cursor: help;
+        }
+        .form-section label .info-icon:hover { background: var(--accent); color: white; }
+        
+        /* MODE TOGGLE */
+        .mode-toggle {
+            display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 3px; margin-bottom: 16px;
+        }
+        .mode-toggle-btn {
+            flex: 1; padding: 10px; text-align: center; border: none; background: transparent; 
+            color: var(--text-secondary); border-radius: 6px; cursor: pointer; transition: all 0.2s; font-weight: 600;
+        }
+        .mode-toggle-btn:hover { color: var(--text-primary); }
+        .mode-toggle-btn.active { 
+            background: var(--accent); color: white; box-shadow: 0 2px 8px rgba(47, 129, 247, 0.3); 
+        }
+        .mode-toggle-btn.active.advanced { 
+            background: var(--purple); box-shadow: 0 2px 8px rgba(163, 113, 247, 0.3);
+        }
+        
+        /* INSTRUMENT TYPE TABS */
+        .inst-type-tabs {
+            display: flex; gap: 8px; margin-bottom: 12px;
+        }
+        .inst-type-btn {
+            flex: 1; padding: 8px 12px; border: 1px solid var(--border); background: transparent;
+            color: var(--text-secondary); border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 11px;
+            transition: all 0.2s;
+        }
+        .inst-type-btn:hover { border-color: var(--accent); color: var(--text-primary); }
+        .inst-type-btn.active { 
+            background: var(--accent); border-color: var(--accent); color: white;
+        }
+        
+        /* SECTION DIVIDER */
+        .section-divider {
+            height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); 
+            margin: 16px 0; position: relative;
+        }
+        .section-divider::before {
+            content: attr(data-label);
+            position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+            background: var(--bg-header); padding: 0 10px; color: var(--text-secondary);
+            font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
+        }
+        
+        /* ATM RANGE INPUT */
+        .atm-range-section {
+            background: rgba(163, 113, 247, 0.1); border: 1px solid rgba(163, 113, 247, 0.3);
+            border-radius: 8px; padding: 12px; margin-top: 8px;
+        }
+        .atm-range-input {
+            display: flex; align-items: center; gap: 8px;
+        }
+        .atm-range-input input { width: 60px; text-align: center; }
+        .atm-range-label { font-size: 12px; color: var(--text-secondary); }
+        .strikes-preview {
+            margin-top: 8px; padding: 8px; background: var(--bg-input); border-radius: 6px;
+            font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
+        }
+        
+        /* VARIABLES INFO */
+        .variables-section {
+            background: var(--bg-panel); border-radius: 8px; padding: 12px; margin-top: 8px;
+        }
+        .var-grid {
+            display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
+        }
+        .var-item {
+            display: flex; align-items: center; gap: 6px; padding: 6px 8px; 
+            background: var(--bg-input); border-radius: 4px; font-size: 11px;
+        }
+        .var-code { 
+            font-family: var(--font-mono); color: var(--accent); font-weight: 600; 
+            min-width: 30px;
+        }
+        .var-desc { color: var(--text-secondary); font-size: 10px; }
+        
+        /* INFO TOOLTIP */
+        .tooltip-container {
+            position: relative; display: inline-block;
+        }
+        .tooltip-content {
+            display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
+            background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
+            padding: 12px; min-width: 280px; z-index: 1000; margin-bottom: 8px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+        }
+        .tooltip-content.show { display: block; }
+        .tooltip-content h4 { 
+            margin: 0 0 8px 0; font-size: 12px; color: var(--text-primary); 
+            border-bottom: 1px solid var(--border); padding-bottom: 8px;
+        }
+        
+        /* SERIES ROW */
+        .series-row { display: grid; grid-template-columns: 32px 1fr 1fr 60px 24px; gap: 8px; align-items: center; margin-bottom: 6px; }
+        .color-input { padding: 0; width: 100%; border: none; background: none; height: 28px; cursor: pointer; }
+        
+        /* FORM GRID */
+        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+        
+        /* LOADING */
+        .loading-overlay {
+            position: absolute; inset: 0; background: rgba(13, 17, 23, 0.9);
+            display: flex; align-items: center; justify-content: center; z-index: 10;
+        }
+        .loading-spinner {
+            width: 24px; height: 24px; border: 2px solid var(--border); 
+            border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+
     </style>
 </head>
 <body>
 
 <div class="top-bar">
-    <div class="brand">DEPTHCHAIN <span>PRO v5</span></div>
-    <div style="display:flex; gap:10px;">
-        <select id="globalDate" onchange="App.onDateChange()"></select>
-        <select id="globalMode" onchange="App.onModeChange()">
-            <option value="LIVE">LIVE</option>
-            <option value="HIST">HISTORY</option>
-        </select>
-        <div style="width:1px; background:var(--border); margin: 0 10px;"></div>
-        <div id="layoutGroup">
+    <div class="brand">DepthChain <span>PRO</span></div>
+    <div class="controls">
+        <select id="globalDate" onchange="App.onDateChange()" style="min-width: 140px;"></select>
+        <div style="position: relative;">
+            <select id="globalMode" onchange="App.onModeChange()" style="padding-left: 28px; font-weight: 600;">
+                <option value="LIVE">LIVE</option>
+                <option value="HIST">HISTORY</option>
+            </select>
+            <div id="modeDot" class="status-dot live" style="position: absolute; left: 10px; top: 12px; pointer-events: none;"></div>
+        </div>
+        <div style="width:1px; height: 20px; background: var(--border);"></div>
+        <div class="layout-toggle">
             <button class="layout-btn" onclick="App.setLayout(1)">1</button>
             <button class="layout-btn" onclick="App.setLayout(2)">2</button>
-            <button class="layout-btn" onclick="App.setLayout(3)">3</button>
+            <button class="layout-btn active" onclick="App.setLayout(3)">3</button>
+            <button class="layout-btn" onclick="App.setLayout(4)">4</button>
         </div>
-        <button onclick="App.reset()" style="color:var(--danger)">Reset</button>
+        <button onclick="Config.openDefaults()">Settings</button>
+        <button class="danger" onclick="App.reset()">Reset</button>
     </div>
 </div>
 
 <div class="main-container" id="gridRoot"></div>
 
-<div class="modal-overlay" id="configModal">
+<!-- CONFIG MODAL -->
+<div class="modal-backdrop" id="configModal">
     <div class="modal">
-        <div class="modal-tab-bar">
-            <div class="modal-tab" id="tabStandard" onclick="Config.setMode('STANDARD')">STANDARD MODE</div>
-            <div class="modal-tab" id="tabAdvanced" onclick="Config.setMode('ADVANCED')">ADVANCED (ATM Range)</div>
+        <div class="modal-head">
+            <div class="modal-title">
+                <span id="cfgTitle">Configure Chart</span>
+                <span id="cfgModeBadge" class="mode-badge normal">Normal</span>
+            </div>
+            <button class="tool-btn" onclick="Config.close()">✕</button>
         </div>
-        <div class="modal-content">
-            <div class="form-grid">
-                <div class="form-group">
-                    <label>Root Symbol</label>
-                    <select id="cfgRoot" onchange="Config.onRootChange()" style="width:100%"></select>
-                </div>
-                <div class="form-group">
-                    <label>Expiry</label>
-                    <select id="cfgExp" onchange="Config.onExpChange()" style="width:100%"></select>
-                </div>
+        <div class="modal-body" style="position: relative;">
+            <div id="cfgLoading" class="loading-overlay" style="display:none;">
+                <div class="loading-spinner"></div>
             </div>
-
-            <div id="uiStandard">
-                <div class="form-group">
-                    <label>Instrument</label>
-                    <select id="cfgInst" style="width:100%"></select>
+            <div id="cfgContent">
+                
+                <!-- Global Settings Mode -->
+                <div id="cfgGlobalOnly" style="display:none;">
+                    <div class="form-section">
+                        <label>Refresh Rate (Seconds)</label>
+                        <input type="number" id="cfgRefresh" value="15" min="5">
+                    </div>
+                    <div class="section-divider"></div>
                 </div>
-            </div>
 
-            <div id="uiAdvanced" style="display:none">
-                <div class="form-group">
-                    <label>ATM Strike Range (+-)<span class="info-icon" title="Aggregates 11 strikes: 5 ITM + ATM + 5 OTM">?</span></label>
-                    <input type="number" id="cfgRange" value="5" style="width:100%">
+                <!-- Single Chart Config Mode -->
+                <div id="cfgChartOnly">
+                    
+                    <!-- MODE TOGGLE -->
+                    <div class="mode-toggle">
+                        <button class="mode-toggle-btn active" id="btnNormalMode" onclick="Config.setConfigMode('normal')">
+                            📊 Normal Mode
+                        </button>
+                        <button class="mode-toggle-btn" id="btnAdvancedMode" onclick="Config.setConfigMode('advanced')">
+                            🔬 Advanced Mode
+                        </button>
+                    </div>
+                    
+                    <!-- INSTRUMENT TYPE TABS (Normal Mode) -->
+                    <div id="instTypeSection" class="inst-type-tabs">
+                        <button class="inst-type-btn active" id="btnOptions" onclick="Config.setInstType('options')">
+                            📈 Options
+                        </button>
+                        <button class="inst-type-btn" id="btnFutures" onclick="Config.setInstType('futures')">
+                            📉 Futures
+                        </button>
+                    </div>
+                    
+                    <!-- SYMBOL & EXPIRY -->
+                    <div class="form-grid">
+                        <div class="form-section">
+                            <label>Symbol</label>
+                            <select id="cfgRoot" onchange="Config.onRootChange()" style="width:100%"></select>
+                        </div>
+                        <div class="form-section">
+                            <label>Expiry</label>
+                            <select id="cfgExp" onchange="Config.onExpChange()" style="width:100%"></select>
+                        </div>
+                    </div>
+                    
+                    <!-- INSTRUMENT SELECT (Normal Mode) -->
+                    <div id="instrumentSelectSection" class="form-section">
+                        <label>Instrument</label>
+                        <select id="cfgInst" style="width:100%"></select>
+                    </div>
+                    
+                    <!-- ATM RANGE SECTION (Advanced Mode) -->
+                    <div id="atmRangeSection" style="display:none;" class="atm-range-section">
+                        <div class="form-section">
+                            <label>
+                                ATM ± Range
+                                <span class="info-icon" onclick="Config.showVarTooltip(event)">i</span>
+                            </label>
+                            <div class="atm-range-input">
+                                <input type="number" id="cfgAtmRange" value="5" min="1" max="20" onchange="Config.updateStrikesPreview()">
+                                <span class="atm-range-label">strikes on each side (Total: <span id="totalStrikes">11</span> strikes)</span>
+                            </div>
+                            <div id="strikesPreview" class="strikes-preview" style="display:none;"></div>
+                        </div>
+                    </div>
+                    
+                    <!-- VARIABLES INFO (Advanced Mode) -->
+                    <div id="variablesSection" style="display:none;" class="variables-section">
+                        <label style="margin-bottom: 8px;">
+                            Available Variables
+                            <span class="info-icon" onclick="Config.showVarTooltip(event)">i</span>
+                        </label>
+                        <div class="var-grid">
+                            <div class="var-item"><span class="var-code">$P</span><span class="var-desc">Price</span></div>
+                            <div class="var-item"><span class="var-code">$B</span><span class="var-desc">Buy Qty</span></div>
+                            <div class="var-item"><span class="var-code">$S</span><span class="var-desc">Sell Qty</span></div>
+                            <div class="var-item"><span class="var-code">$V</span><span class="var-desc">Volume</span></div>
+                            <div class="var-item"><span class="var-code">$O</span><span class="var-desc">Open Interest</span></div>
+                            <div class="var-item"><span class="var-code">$CB</span><span class="var-desc">Call Buyers</span></div>
+                            <div class="var-item"><span class="var-code">$CS</span><span class="var-desc">Call Sellers</span></div>
+                            <div class="var-item"><span class="var-code">$PB</span><span class="var-desc">Put Buyers</span></div>
+                            <div class="var-item"><span class="var-code">$PS</span><span class="var-desc">Put Sellers</span></div>
+                        </div>
+                    </div>
+                    
+                    <!-- TIMEFRAME & RANGE -->
+                    <div class="form-grid" style="margin-top: 12px;">
+                        <div class="form-section">
+                            <label>Timeframe</label>
+                            <select id="cfgTF" style="width:100%">
+                                <option value="1min">1 Minute</option>
+                                <option value="3min">3 Minutes</option>
+                                <option value="5min">5 Minutes</option>
+                                <option value="15min">15 Minutes</option>
+                                <option value="30min">30 Minutes</option>
+                                <option value="1hour">1 Hour</option>
+                            </select>
+                        </div>
+                        <div class="form-section">
+                            <label>Range (HH:MM)</label>
+                            <div style="display:flex; gap:8px;">
+                                <input type="time" id="cfgStart" value="09:15" style="width:50%">
+                                <input type="time" id="cfgEnd" value="15:30" style="width:50%">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="section-divider" data-label="Plot Series"></div>
                 </div>
-            </div>
 
-            <div class="form-grid" style="margin-top:15px;">
-                <div class="form-group">
-                    <label>Timeframe</label>
-                    <select id="cfgTF" style="width:100%">
-                        <option value="1min">1 Min</option><option value="5min">5 Min</option><option value="15min">15 Min</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label>Market Hours</label>
-                    <div style="display:flex; gap:5px;">
-                        <input type="time" id="cfgStart" value="09:15" style="flex:1">
-                        <input type="time" id="cfgEnd" value="15:30" style="flex:1">
-                    </div>
+                <!-- Common Series Config -->
+                <div class="form-section">
+                    <label>
+                        Plot Series
+                        <span class="info-icon" onclick="Config.showSeriesTooltip(event)">i</span>
+                    </label>
+                    <div id="cfgSeries"></div>
+                    <button style="width:100%; margin-top:8px; border:1px dashed var(--border); background:transparent; color:var(--text-secondary);" onclick="Config.addSeriesRow()">+ Add Line</button>
                 </div>
             </div>
+        </div>
+        <div class="modal-foot">
+            <button style="background:transparent; border:1px solid var(--border); color:var(--text-primary);" onclick="Config.close()">Cancel</button>
+            <button class="primary" onclick="Config.save()">Save Configuration</button>
+        </div>
+    </div>
+</div>
 
-            <div style="margin-top:20px; border-top:1px solid var(--border); padding-top:15px;">
-                <label style="font-size:11px; font-weight:700; color:var(--text-secondary);">PLOT SERIES 
-                    <span class="info-icon" title="Variables: $P(Price), $V(Vol), $O(OI), $B(Buy), $S(Sell), $CB(Call Buy), $CS(Call Sell), $PB(Put Buy), $PS(Put Sell)">?</span>
-                </label>
-                <div id="cfgSeriesList" style="margin-top:10px;"></div>
-                <button onclick="Config.addSeries()" style="width:100%; margin-top:10px; border-style:dashed;">+ Add New Line</button>
-            </div>
+<!-- VARIABLE TOOLTIP -->
+<div id="varTooltip" class="tooltip-content">
+    <h4>📊 Variable Reference</h4>
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px;">
+        <div><span style="color: var(--accent);">$P</span> - Price (LTP)</div>
+        <div><span style="color: var(--accent);">$V</span> - Volume</div>
+        <div><span style="color: var(--accent);">$B</span> - Buy Quantity</div>
+        <div><span style="color: var(--accent);">$S</span> - Sell Quantity</div>
+        <div><span style="color: var(--accent);">$O</span> - Open Interest</div>
+        <div style="border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; grid-column: span 2;">
+            <strong style="color: var(--purple);">Advanced Only:</strong>
+        </div>
+        <div><span style="color: var(--purple);">$CB</span> - Call Buyers</div>
+        <div><span style="color: var(--purple);">$CS</span> - Call Sellers</div>
+        <div><span style="color: var(--purple);">$PB</span> - Put Buyers</div>
+        <div><span style="color: var(--purple);">$PS</span> - Put Sellers</div>
+    </div>
+    <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-secondary);">
+        <strong>Advanced Mode Formulas:</strong><br>
+        📈 Buyers = $CB + $PS (Call Buyers + Put Sellers)<br>
+        📉 Sellers = $CS + $PB (Call Sellers + Put Buyers)
+    </div>
+</div>
 
-            <div style="margin-top:20px; display:flex; justify-content:flex-end; gap:10px;">
-                <button onclick="Config.close()">Cancel</button>
-                <button class="primary" onclick="Config.save()">Apply Configuration</button>
-            </div>
+<!-- SERIES TOOLTIP -->
+<div id="seriesTooltip" class="tooltip-content">
+    <h4>📈 Plot Series Guide</h4>
+    <div style="font-size: 11px; color: var(--text-secondary);">
+        <p style="margin-bottom: 6px;">Create custom formulas using variables:</p>
+        <div style="background: var(--bg-input); padding: 8px; border-radius: 4px; font-family: var(--font-mono); margin-bottom: 6px;">
+            Example: <span style="color: var(--cyan);">$B - $S</span>
+        </div>
+        <p style="margin-bottom: 6px;"><strong style="color: var(--purple);">Advanced Mode:</strong></p>
+        <div style="background: var(--bg-input); padding: 8px; border-radius: 4px; font-family: var(--font-mono);">
+            Buyers: <span style="color: var(--success);">$CB + $PS</span><br>
+            Sellers: <span style="color: var(--danger);">$CS + $PB</span>
         </div>
     </div>
 </div>
 
 <script>
 const App = {
-    state: { date: '', mode: 'LIVE', columns: 3, charts: {}, refreshRate: 15 },
-    
+    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [], []], charts: {}, refreshRate: 15 },
+    defaults: {
+        normal: [
+            { formula: '$P', color: '#2f81f7', label: 'Price', axis: 'left' },
+            { formula: '$B', color: '#238636', label: 'Buy', axis: 'right' },
+            { formula: '$S', color: '#da3633', label: 'Sell', axis: 'right' }
+        ],
+        advanced: [
+            { formula: '$P', color: '#2f81f7', label: 'Price', axis: 'left' },
+            { formula: '$CB + $PS', color: '#238636', label: 'Buyers', axis: 'right' },
+            { formula: '$CS + $PB', color: '#da3633', label: 'Sellers', axis: 'right' }
+        ]
+    },
+
     async init() {
         await this.loadDates();
-        const saved = localStorage.getItem('dc_pro_v5');
-        if (saved) this.state = {...this.state, ...JSON.parse(saved)};
-        else this.initDefault();
+        const saved = localStorage.getItem('dc_pro_v4_advanced');
+        if (saved) {
+            try {
+                const s = JSON.parse(saved);
+                this.state = { ...this.state, ...s };
+                // Ensure layout matches columns
+                if(this.state.layout.length !== this.state.columns) this.setLayout(this.state.columns);
+            } catch(e) { this.initDefault(); }
+        } else {
+            this.initDefault();
+        }
         
+        // Sync Date UI
+        const dSel = document.getElementById('globalDate');
+        if(this.state.date && Array.from(dSel.options).some(o=>o.value===this.state.date)) dSel.value = this.state.date;
+        else if(dSel.options.length) this.state.date = dSel.options[0].value;
+        
+        document.getElementById('globalMode').value = this.state.mode;
+        this.updateModeUI();
         this.renderGrid();
-        setInterval(() => { if(this.state.mode === 'LIVE') this.refreshAll(true); }, this.state.refreshRate * 1000);
+        this.startLoop();
+    },
+
+    initDefault() {
+        this.state.columns = 3;
+        this.state.layout = [[], [], []];
+        this.state.refreshRate = 15;
+        // 3x2 Grid (3 Cols, 2 Rows = 6 Charts)
+        for(let i=0; i<3; i++) {
+            this.addChartInternal(i);
+            this.addChartInternal(i);
+        }
     },
 
     async loadDates() {
-        const res = await fetch('/api/dates');
-        const dates = await res.json();
-        const sel = document.getElementById('globalDate');
-        sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
-        this.state.date = sel.value;
+        try {
+            const res = await fetch('/api/dates');
+            const dates = await res.json();
+            document.getElementById('globalDate').innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+            if(!this.state.date && dates.length) this.state.date = dates[0];
+        } catch(e) {}
     },
 
-    initDefault() {
-        for(let i=0; i<3; i++) this.addChart(i);
+    addChartInternal(colIdx) {
+        const id = 'c-' + Math.random().toString(36).substr(2, 6);
+        this.state.layout[colIdx].push(id);
+        this.state.charts[id] = { config: {}, instance: null };
+        return id;
     },
 
-    addChart(col) {
-        const id = 'ch_' + Math.random().toString(36).substr(2, 5);
-        this.state.charts[id] = { col, config: {} };
+    save() {
+        // Strip non-serializable data
+        const cleanCharts = {};
+        for(let id in this.state.charts) cleanCharts[id] = { config: this.state.charts[id].config };
+        
+        localStorage.setItem('dc_pro_v4_advanced', JSON.stringify({
+            date: this.state.date,
+            mode: this.state.mode,
+            columns: this.state.columns,
+            layout: this.state.layout,
+            refreshRate: this.state.refreshRate,
+            charts: cleanCharts
+        }));
+    },
+
+    reset() {
+        if(confirm("Reset Workspace?")) {
+            localStorage.removeItem('dc_pro_v4_advanced');
+            location.reload();
+        }
     },
 
     setLayout(n) {
+        const all = this.state.layout.flat();
         this.state.columns = n;
+        this.state.layout = Array.from({length: n}, () => []);
+        all.forEach((id, i) => this.state.layout[i % n].push(id));
         this.renderGrid();
         this.save();
     },
 
     renderGrid() {
-        const root = document.getElementById('gridRoot');
-        root.innerHTML = '';
-        document.querySelectorAll('.layout-btn').forEach((b, i) => b.classList.toggle('active', (i+1)===this.state.columns));
+        // Fix Layout Buttons
+        document.querySelectorAll('.layout-btn').forEach((b, i) => b.classList.toggle('active', (i+1) === this.state.columns));
+        
+        const container = document.getElementById('gridRoot');
+        container.innerHTML = ''; // Wipes DOM
 
-        for(let i=0; i<this.state.columns; i++) {
+        this.state.layout.forEach((ids, colIdx) => {
             const col = document.createElement('div');
             col.className = 'column';
-            const ids = Object.keys(this.state.charts).filter(k => this.state.charts[k].col === i);
-            
+            const count = ids.length;
+            const viewH = window.innerHeight - 52;
+
             ids.forEach(id => {
-                const card = this.createCard(id);
+                // IMPORTANT: Since we wiped DOM, old instances are dead.
+                // We MUST nullify them so plot() creates new ones.
+                if(this.state.charts[id] && this.state.charts[id].instance) {
+                    this.state.charts[id].instance.destroy();
+                    this.state.charts[id].instance = null;
+                }
+
+                const card = this.createCardDOM(id);
+                // 50/50 split if 2 charts, 33% if 3, else fixed
+                if (count > 0 && count <= 3) card.style.height = `calc(${viewH / count}px - 1px)`;
+                else card.style.height = '300px';
+
                 col.appendChild(card);
-                this.plot(id);
+                setTimeout(() => ChartLogic.plot(id), 0);
             });
 
-            const addBtn = document.createElement('button');
-            addBtn.innerText = '+ Add Chart';
-            addBtn.style.margin = '10px';
-            addBtn.onclick = () => { this.addChart(i); this.renderGrid(); };
-            col.appendChild(addBtn);
-            root.appendChild(col);
-        }
+            const btn = document.createElement('button');
+            btn.className = 'add-chart-btn';
+            btn.innerText = '+ Add Chart';
+            btn.onclick = () => { this.addChartInternal(colIdx); this.renderGrid(); this.save(); };
+            col.appendChild(btn);
+            container.appendChild(col);
+        });
     },
 
-    createCard(id) {
+    createCardDOM(id) {
         const div = document.createElement('div');
         div.className = 'chart-card';
-        div.style.flex = '1';
-        const cfg = this.state.charts[id].config;
+        div.id = `card-${id}`;
+        
+        const cfg = this.state.charts[id] ? this.state.charts[id].config : {};
+        const isCfg = cfg && cfg.root;
+        const isAdvanced = cfg && cfg.configMode === 'advanced';
+
         div.innerHTML = `
             <div class="card-header">
-                <div style="display:flex; align-items:center;">
-                    <div class="status-dot ${this.state.mode==='LIVE'?'dot-live':'dot-hist'}" id="dot-${id}"></div>
-                    <b style="font-family:JetBrains Mono">${cfg.root || 'New Chart'}</b>
-                    <small style="margin-left:10px; color:var(--text-secondary)">${cfg.mode || ''}</small>
+                <div class="card-info">
+                    <div class="status-dot ${isCfg ? (this.state.mode==='LIVE'?'live':'hist') : ''}" id="dot-${id}"></div>
+                    <span>${isCfg ? cfg.root : 'New Chart'}</span>
+                    ${isAdvanced ? '<span class="adv-badge">ADV</span>' : ''}
+                    ${isCfg && cfg.instrument ? `<span class="inst-label">${cfg.instrument}</span>` : ''}
+                    ${isCfg && cfg.expiry ? `<span class="card-meta">${cfg.expiry}</span>` : ''}
                 </div>
-                <div>
-                    <button onclick="Config.open('${id}')" style="height:24px; padding:0 5px;">⚙</button>
-                    <button onclick="App.removeChart('${id}')" style="height:24px; padding:0 5px; color:var(--danger)">✕</button>
+                <div class="card-tools">
+                    <button class="tool-btn" onclick="Config.open('${id}')">⚙</button>
+                    <button class="tool-btn" style="color:var(--danger)" onclick="App.removeChart('${id}')">✕</button>
                 </div>
             </div>
             <div class="card-body" id="body-${id}">
-                ${!cfg.root ? '<div class="empty-state">No Configuration</div>' : `<canvas id="canvas-${id}"></canvas>`}
+                ${!isCfg ? `
+                    <div class="empty-state">
+                        <div style="font-size:24px; opacity:0.3;">📊</div>
+                        <button style="background:transparent; border:1px solid var(--border); padding:5px 10px; border-radius:4px; color:var(--text-secondary);" onclick="Config.open('${id}')">Configure</button>
+                    </div>
+                ` : `<canvas id="canvas-${id}"></canvas>`}
             </div>
         `;
         return div;
     },
 
-    removeChart(id) { delete this.state.charts[id]; this.renderGrid(); this.save(); },
-    onDateChange() { this.state.date = document.getElementById('globalDate').value; this.refreshAll(); },
-    onModeChange() { this.state.mode = document.getElementById('globalMode').value; this.refreshAll(); },
-    refreshAll(isUpdate=false) { Object.keys(this.state.charts).forEach(id => this.plot(id, isUpdate)); },
-    save() { localStorage.setItem('dc_pro_v5', JSON.stringify(this.state)); },
+    removeChart(id) {
+        if(!confirm("Delete?")) return;
+        this.state.layout = this.state.layout.map(c => c.filter(x => x !== id));
+        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
+        delete this.state.charts[id];
+        this.renderGrid();
+        this.save();
+    },
 
+    onDateChange() {
+        this.state.date = document.getElementById('globalDate').value;
+        const today = new Date().toISOString().split('T')[0];
+        if(this.state.date === today && this.state.mode !== 'LIVE') {
+            this.state.mode = 'LIVE';
+            document.getElementById('globalMode').value = 'LIVE';
+            this.updateModeUI();
+        }
+        this.save();
+        this.refreshAll();
+    },
+
+    onModeChange() {
+        this.state.mode = document.getElementById('globalMode').value;
+        this.updateModeUI();
+        this.save();
+        this.refreshAll();
+    },
+
+    updateModeUI() {
+        document.getElementById('modeDot').className = `status-dot ${this.state.mode==='LIVE'?'live':'hist'}`;
+    },
+
+    refreshAll() { Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id)); },
+    
+    startLoop() {
+        const loop = () => {
+            if(this.state.mode === 'LIVE') Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id, true));
+            const rate = (this.state.refreshRate || 15) * 1000;
+            setTimeout(loop, rate);
+        };
+        loop();
+    }
+};
+
+const ChartLogic = {
     async plot(id, isUpdate=false) {
-        const chart = this.state.charts[id];
+        const chart = App.state.charts[id];
+        if(!chart || !chart.config.root) return;
+        
         const cfg = chart.config;
-        if(!cfg.root) return;
+        const dot = document.getElementById(`dot-${id}`);
+        if(isUpdate && dot) dot.classList.add('retry');
+
+        let endTime = cfg.end;
+        if (App.state.mode === 'LIVE') {
+            const now = new Date();
+            endTime = now.getHours().toString().padStart(2,'0') + ":" + now.getMinutes().toString().padStart(2,'0');
+        }
 
         try {
-            const res = await fetch('/api/fetch_series', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({
-                    date: this.state.date, root: cfg.root, expiry: cfg.expiry,
-                    mode: cfg.mode, instrument: cfg.instrument, range_val: cfg.range_val,
-                    timeframe: cfg.timeframe, start_time: cfg.start, end_time: cfg.end
-                })
-            });
-            const data = await res.json();
-            if(data.error) return;
+            let data;
+            
+            // Use advanced endpoint for advanced mode
+            if (cfg.configMode === 'advanced' && cfg.instruments && cfg.instruments.length > 0) {
+                const res = await fetch('/api/fetch_advanced_series', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        date: App.state.date, root: cfg.root, expiry: cfg.expiry,
+                        instruments: cfg.instruments, timeframe: cfg.timeframe,
+                        start_time: cfg.start, end_time: endTime
+                    })
+                });
+                data = await res.json();
+            } else {
+                // Normal mode - single instrument
+                const res = await fetch('/api/fetch_series', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        date: App.state.date, root: cfg.root, expiry: cfg.expiry,
+                        instrument: cfg.instrument, timeframe: cfg.timeframe,
+                        start_time: cfg.start, end_time: endTime
+                    })
+                });
+                data = await res.json();
+            }
+
+            if(data.error || !data.labels || !data.labels.length) {
+                if(App.state.mode !== 'LIVE') {
+                    const b = document.getElementById(`body-${id}`);
+                    if(b) b.innerHTML = '<div class="empty-state" style="opacity:0.5">No Data</div>';
+                }
+                if(dot) dot.classList.remove('retry');
+                return;
+            }
 
-            const ctx = document.getElementById(`canvas-${id}`);
-            if(!ctx) return;
+            const body = document.getElementById(`body-${id}`);
+            if(body && !body.querySelector('canvas')) body.innerHTML = `<canvas id="canvas-${id}"></canvas>`;
+
+            if(dot) dot.className = `status-dot ${App.state.mode==='LIVE'?'live':'hist'}`;
 
             const datasets = cfg.series.map(s => {
                 const vals = data.labels.map((_, i) => {
-                    const params = {
-                        $P: data.P[i], $V: data.V[i], $O: data.OI[i], 
-                        $B: data.B[i], $S: data.S[i], 
-                        $CB: data.CB[i], $CS: data.CS[i], $PB: data.PB[i], $PS: data.PS[i]
-                    };
-                    let f = s.formula;
-                    Object.keys(params).forEach(k => f = f.replace(new RegExp('\\\\'+k, 'g'), params[k] || 0));
-                    try { return eval(f); } catch { return 0; }
+                    const P = data.P[i] || 0;
+                    const V = data.V[i] || 0;
+                    const OI = data.OI[i] || 0;
+                    const B = data.B[i] || 0;
+                    const S = data.S[i] || 0;
+                    const CB = data.CB ? (data.CB[i] || 0) : 0;
+                    const CS = data.CS ? (data.CS[i] || 0) : 0;
+                    const PB = data.PB ? (data.PB[i] || 0) : 0;
+                    const PS = data.PS ? (data.PS[i] || 0) : 0;
+                    
+                    let f = s.formula
+                        .replace(/\$CB/g, CB)
+                        .replace(/\$CS/g, CS)
+                        .replace(/\$PB/g, PB)
+                        .replace(/\$PS/g, PS)
+                        .replace(/\$OI/g, OI)
+                        .replace(/\$O/g, OI)
+                        .replace(/\$P/g, P)
+                        .replace(/\$V/g, V)
+                        .replace(/\$B/g, B)
+                        .replace(/\$S/g, S);
+                    try { return new Function('return '+f)(); } catch{ return null; }
                 });
                 return {
                     label: s.label, data: vals, borderColor: s.color, backgroundColor: s.color,
-                    borderWidth: 1.5, pointRadius: 0, yAxisID: s.axis === 'right' ? 'y1' : 'y'
+                    borderWidth: 1.5, pointRadius: 0, hitRadius: 10, tension: 0.1, yAxisID: s.axis==='left'?'y':'y1'
                 };
             });
 
-            if(chart.instance && !isUpdate) { chart.instance.destroy(); chart.instance = null; }
-            
-            if(chart.instance) {
-                chart.instance.data.labels = data.labels;
-                chart.instance.data.datasets = datasets;
-                chart.instance.update('none');
-            } else {
-                chart.instance = new Chart(ctx, {
-                    type: 'line',
-                    data: { labels: data.labels, datasets },
-                    options: {
-                        responsive: true, maintainAspectRatio: false, animation: false,
-                        interaction: { mode: 'index', intersect: false },
-                        scales: {
-                            x: { grid: { color: '#21262d' }, ticks: { color: '#8b949e', maxTicksLimit: 8 } },
-                            y: { position: 'left', grid: { color: '#21262d' } },
-                            y1: { position: 'right', display: datasets.some(d => d.yAxisID === 'y1'), grid: { display: false } }
-                        },
-                        plugins: { legend: { display: false } }
-                    }
-                });
-            }
+            this.render(id, data.labels, datasets);
+
         } catch(e) { console.error(e); }
+    },
+
+    render(id, labels, datasets) {
+        const ctx = document.getElementById(`canvas-${id}`);
+        if(!ctx) return;
+        
+        // Ensure we aren't updating a dead instance (Double check)
+        if(App.state.charts[id].instance && App.state.charts[id].instance.ctx.canvas !== ctx) {
+            App.state.charts[id].instance.destroy();
+            App.state.charts[id].instance = null;
+        }
+
+        if(App.state.charts[id].instance) {
+            App.state.charts[id].instance.data.labels = labels;
+            App.state.charts[id].instance.data.datasets = datasets;
+            App.state.charts[id].instance.update('none');
+        } else {
+            const hasRight = datasets.some(d => d.yAxisID === 'y1');
+            App.state.charts[id].instance = new Chart(ctx.getContext('2d'), {
+                type: 'line',
+                data: { labels, datasets },
+                options: {
+                    responsive: true, maintainAspectRatio: false, animation: false,
+                    interaction: { mode: 'index', intersect: false },
+                    plugins: { 
+                        legend: { display: false },
+                        tooltip: { backgroundColor: 'rgba(22, 27, 34, 0.95)', titleColor:'#e6edf3', bodyColor:'#e6edf3', borderColor: '#30363d', borderWidth: 1 }
+                    },
+                    scales: {
+                        x: { grid:{color:'#30363d', tickLength:0}, ticks:{color:'#8b949e', maxTicksLimit:8, font:{size:10}} },
+                        y: { type:'linear', display:true, position:'left', grid:{color:'#30363d'}, ticks:{color:'#8b949e', font:{size:10}} },
+                        y1: { type:'linear', display:hasRight, position:'right', grid:{display:false}, ticks:{color:'#8b949e', font:{size:10}} }
+                    }
+                }
+            });
+        }
     }
 };
 
 const Config = {
-    currId: null, currMode: 'STANDARD',
+    tid: null, 
+    isGlobal: false,
+    configMode: 'normal',
+    instType: 'options',
+    currentOptions: [],
     
     async open(id) {
-        this.currId = id;
-        const cfg = App.state.charts[id].config;
-        this.setMode(cfg.mode || 'STANDARD');
+        this.tid = id; 
+        this.isGlobal = false;
         document.getElementById('configModal').style.display = 'flex';
+        document.getElementById('cfgTitle').innerText = 'Configure Chart';
+        document.getElementById('cfgLoading').style.display = 'flex';
+        document.getElementById('cfgContent').style.display = 'none';
+
+        document.getElementById('cfgGlobalOnly').style.display = 'none';
+        document.getElementById('cfgChartOnly').style.display = 'block';
+
+        const rSel = document.getElementById('cfgRoot');
+        const res = await fetch(`/api/roots?date=${App.state.date}`);
+        const roots = await res.json();
+        rSel.innerHTML = `<option value="">-- Select --</option>` + roots.map(r=>`<option>${r}</option>`).join('');
+
+        const cfg = App.state.charts[id].config;
         
-        const roots = await fetch(`/api/roots?date=${App.state.date}`).then(r => r.json());
-        document.getElementById('cfgRoot').innerHTML = roots.map(r => `<option>${r}</option>`).join('');
+        // Set mode from config
+        this.configMode = cfg.configMode || 'normal';
+        this.instType = cfg.instType || 'options';
+        this.setConfigMode(this.configMode);
+        this.setInstType(this.instType);
         
-        if(cfg.root) {
-            document.getElementById('cfgRoot').value = cfg.root;
+        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
+        document.getElementById('cfgStart').value = cfg.start || '09:15';
+        document.getElementById('cfgEnd').value = cfg.end || '15:30';
+        
+        if (cfg.atmRange) {
+            document.getElementById('cfgAtmRange').value = cfg.atmRange;
+        }
+        
+        // Render series based on mode
+        this.renderSeries(cfg.series || App.defaults[this.configMode]);
+
+        if(cfg.root) { 
+            rSel.value = cfg.root; 
             await this.onRootChange(cfg.expiry, cfg.instrument);
         }
         
-        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
-        document.getElementById('cfgRange').value = cfg.range_val || 5;
-        this.renderSeries(cfg.series || []);
+        document.getElementById('cfgLoading').style.display = 'none';
+        document.getElementById('cfgContent').style.display = 'block';
+    },
+
+    openDefaults() {
+        this.isGlobal = true;
+        document.getElementById('configModal').style.display = 'flex';
+        document.getElementById('cfgTitle').innerText = 'Global Settings';
+        document.getElementById('cfgLoading').style.display = 'none';
+        document.getElementById('cfgContent').style.display = 'block';
+        
+        document.getElementById('cfgGlobalOnly').style.display = 'block';
+        document.getElementById('cfgChartOnly').style.display = 'none';
+        document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
+
+        this.renderSeries(App.defaults.normal);
+    },
+
+    close() { 
+        document.getElementById('configModal').style.display = 'none';
+        // Hide tooltips
+        document.getElementById('varTooltip').classList.remove('show');
+        document.getElementById('seriesTooltip').classList.remove('show');
     },
 
-    setMode(m) {
-        this.currMode = m;
-        document.getElementById('tabStandard').classList.toggle('active', m === 'STANDARD');
-        document.getElementById('tabAdvanced').classList.toggle('active', m === 'ADVANCED');
-        document.getElementById('uiStandard').style.display = m === 'STANDARD' ? 'block' : 'none';
-        document.getElementById('uiAdvanced').style.display = m === 'ADVANCED' ? 'block' : 'none';
+    setConfigMode(mode) {
+        this.configMode = mode;
+        const isAdvanced = mode === 'advanced';
+        
+        // Update buttons
+        document.getElementById('btnNormalMode').classList.toggle('active', !isAdvanced);
+        document.getElementById('btnAdvancedMode').classList.toggle('active', isAdvanced);
+        document.getElementById('btnAdvancedMode').classList.toggle('advanced', isAdvanced);
+        
+        // Update badge
+        const badge = document.getElementById('cfgModeBadge');
+        badge.textContent = isAdvanced ? 'Advanced' : 'Normal';
+        badge.className = 'mode-badge ' + mode;
         
-        // Reset default series for Advanced Mode
-        if(m === 'ADVANCED' && document.getElementById('cfgSeriesList').children.length === 0) {
-            this.renderSeries([
-                { label: 'Buyers', formula: '$CB + $PS', color: '#238636', axis: 'left' },
-                { label: 'Sellers', formula: '$CS + $PB', color: '#da3633', axis: 'left' }
-            ]);
+        // Toggle sections
+        document.getElementById('instTypeSection').style.display = isAdvanced ? 'none' : 'flex';
+        document.getElementById('instrumentSelectSection').style.display = isAdvanced ? 'none' : 'block';
+        document.getElementById('atmRangeSection').style.display = isAdvanced ? 'block' : 'none';
+        document.getElementById('variablesSection').style.display = isAdvanced ? 'block' : 'none';
+        
+        // Update series defaults if no custom series set
+        const currentSeries = document.querySelectorAll('#cfgSeries .series-row');
+        if (currentSeries.length === 0 || (App.state.charts[this.tid] && !App.state.charts[this.tid].config.series)) {
+            this.renderSeries(App.defaults[mode]);
+        }
+        
+        // If advanced mode, refresh options list
+        if (isAdvanced && document.getElementById('cfgExp').value) {
+            this.onExpChange();
+        }
+    },
+
+    setInstType(type) {
+        this.instType = type;
+        document.getElementById('btnOptions').classList.toggle('active', type === 'options');
+        document.getElementById('btnFutures').classList.toggle('active', type === 'futures');
+        
+        // Refresh instruments list
+        if (document.getElementById('cfgExp').value) {
+            this.onExpChange();
         }
     },
 
     async onRootChange(preExp, preInst) {
         const root = document.getElementById('cfgRoot').value;
-        const meta = await fetch(`/api/config_meta?date=${App.state.date}&root=${root}`).then(r => r.json());
-        
-        document.getElementById('cfgExp').innerHTML = meta.expiries.map(e => `<option>${e}</option>`).join('');
-        if(preExp) document.getElementById('cfgExp').value = preExp;
+        const eSel = document.getElementById('cfgExp');
+        eSel.innerHTML = '<option>Loading...</option>';
+        const res = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`);
+        const exps = await res.json();
+        eSel.innerHTML = `<option value="">-- Select --</option>` + exps.map(e=>`<option>${e}</option>`).join('');
         
-        this.meta = meta;
-        this.onExpChange(preInst);
+        if(preExp && exps.includes(preExp)) { eSel.value = preExp; await this.onExpChange(preInst); }
+        else {
+            const auto = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`).then(r=>r.json());
+            if(auto.current) { eSel.value = auto.current.expiry; await this.onExpChange(auto.current.instrument); }
+        }
     },
 
-    onExpChange(preInst) {
+    async onExpChange(preInst) {
+        const root = document.getElementById('cfgRoot').value;
         const exp = document.getElementById('cfgExp').value;
-        const iSel = document.getElementById('cfgInst');
-        // Filter based on Expiry if needed, or show all
-        const list = exp === "MARKET" ? this.meta.futures : this.meta.options;
-        iSel.innerHTML = list.map(i => `<option>${i}</option>`).join('');
-        if(preInst) iSel.value = preInst;
+        
+        if (this.configMode === 'advanced') {
+            // Fetch options chain for advanced mode
+            const res = await fetch(`/api/options_chain?date=${App.state.date}&root=${root}&expiry=${exp}`);
+            const options = await res.json();
+            this.currentOptions = options;
+            this.updateStrikesPreview();
+        } else {
+            // Normal mode - fetch filtered instruments
+            const iSel = document.getElementById('cfgInst');
+            iSel.innerHTML = '<option>Loading...</option>';
+            
+            const instType = this.instType === 'futures' ? 'futures' : 'options';
+            const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}&instrument_type=${instType}`);
+            const insts = await res.json();
+            iSel.innerHTML = insts.map(i=>`<option>${i}</option>`).join('');
+            if(preInst && insts.includes(preInst)) iSel.value = preInst;
+        }
+    },
+
+    updateStrikesPreview() {
+        if (this.configMode !== 'advanced' || !this.currentOptions.length) return;
+        
+        const range = parseInt(document.getElementById('cfgAtmRange').value) || 5;
+        const totalStrikes = range * 2 + 1;
+        document.getElementById('totalStrikes').textContent = totalStrikes;
+        
+        // Get unique strikes
+        const strikes = [...new Set(this.currentOptions.map(o => o.strike))].sort((a,b) => a - b);
+        
+        if (strikes.length > 0) {
+            // Show preview of strikes selection
+            const preview = document.getElementById('strikesPreview');
+            const midIdx = Math.floor(strikes.length / 2);
+            const startIdx = Math.max(0, midIdx - range);
+            const endIdx = Math.min(strikes.length, midIdx + range + 1);
+            
+            const selectedStrikes = strikes.slice(startIdx, endIdx);
+            preview.innerHTML = `
+                <div>Strikes: ${selectedStrikes.slice(0, 3).join(', ')} ... ${selectedStrikes.slice(-3).join(', ')}</div>
+                <div style="margin-top:4px; color: var(--text-primary);">
+                    ${(range)} ITM + ATM + ${range} OTM = ${totalStrikes} total
+                </div>
+            `;
+            preview.style.display = 'block';
+        }
     },
 
     renderSeries(list) {
-        const cont = document.getElementById('cfgSeriesList');
-        cont.innerHTML = '';
-        if(list.length === 0) list = [{label: 'Price', formula: '$P', color: '#2f81f7', axis: 'left'}];
-        list.forEach(s => this.addSeries(s));
+        const c = document.getElementById('cfgSeries'); 
+        c.innerHTML = '';
+        list.forEach(s => {
+            const r = document.createElement('div'); 
+            r.className = 'series-row';
+            r.innerHTML = `
+                <input type="color" value="${s.color}" class="color-input s-color">
+                <input type="text" value="${s.formula}" class="s-form" placeholder="$P">
+                <input type="text" value="${s.label}" class="s-lbl" placeholder="Label">
+                <select class="s-axis"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select>
+                <button class="tool-btn" style="color:var(--danger)" onclick="this.parentElement.remove()">✕</button>
+            `;
+            c.appendChild(r);
+        });
     },
 
-    addSeries(s = {label: 'New', formula: '$P', color: '#ffffff', axis: 'left'}) {
-        const row = document.createElement('div');
-        row.className = 'series-row';
-        row.innerHTML = `
-            <input type="color" value="${s.color}" class="s-color" style="padding:0; border:none; height:28px;">
-            <input type="text" value="${s.formula}" class="s-form" placeholder="Formula">
-            <input type="text" value="${s.label}" class="s-lbl" placeholder="Label">
-            <select class="s-axis"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select>
-            <button onclick="this.parentElement.remove()" style="border:none; color:var(--danger)">✕</button>
+    addSeriesRow() {
+        const r = document.createElement('div'); 
+        r.className = 'series-row';
+        r.innerHTML = `
+            <input type="color" value="#ffffff" class="color-input s-color">
+            <input type="text" value="$P" class="s-form">
+            <input type="text" value="New" class="s-lbl">
+            <select class="s-axis"><option value="left">L</option><option value="right">R</option></select>
+            <button class="tool-btn" style="color:var(--danger)" onclick="this.parentElement.remove()">✕</button>
         `;
-        document.getElementById('cfgSeriesList').appendChild(row);
+        document.getElementById('cfgSeries').appendChild(r);
     },
 
-    save() {
-        const series = Array.from(document.querySelectorAll('.series-row')).map(r => ({
-            color: r.querySelector('.s-color').value,
+    showVarTooltip(event) {
+        event.stopPropagation();
+        const tooltip = document.getElementById('varTooltip');
+        tooltip.classList.toggle('show');
+        
+        // Position tooltip near click
+        const rect = event.target.getBoundingClientRect();
+        tooltip.style.left = `${event.clientX}px`;
+        tooltip.style.top = `${rect.bottom + 10}px`;
+    },
+
+    showSeriesTooltip(event) {
+        event.stopPropagation();
+        const tooltip = document.getElementById('seriesTooltip');
+        tooltip.classList.toggle('show');
+        
+        const rect = event.target.getBoundingClientRect();
+        tooltip.style.left = `${event.clientX}px`;
+        tooltip.style.top = `${rect.bottom + 10}px`;
+    },
+
+    async save() {
+        const rows = document.querySelectorAll('#cfgSeries .series-row');
+        const series = Array.from(rows).map(r => ({
+            color: r.querySelector('.s-color').value, 
             formula: r.querySelector('.s-form').value,
-            label: r.querySelector('.s-lbl').value,
+            label: r.querySelector('.s-lbl').value, 
             axis: r.querySelector('.s-axis').value
         }));
 
-        App.state.charts[this.tid || this.currId].config = {
-            mode: this.currMode,
-            root: document.getElementById('cfgRoot').value,
-            expiry: document.getElementById('cfgExp').value,
-            instrument: document.getElementById('cfgInst').value,
-            range_val: parseInt(document.getElementById('cfgRange').value),
-            timeframe: document.getElementById('cfgTF').value,
-            start: document.getElementById('cfgStart').value,
-            end: document.getElementById('cfgEnd').value,
-            series
-        };
-        App.save();
-        App.renderGrid();
+        if(this.isGlobal) { 
+            App.defaults[this.configMode] = series;
+            App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15;
+            App.save();
+        } 
+        else {
+            const root = document.getElementById('cfgRoot').value;
+            const exp = document.getElementById('cfgExp').value;
+            if(!root || !exp) return alert("Incomplete Details");
+
+            const config = {
+                root, 
+                expiry: exp,
+                configMode: this.configMode,
+                instType: this.instType,
+                timeframe: document.getElementById('cfgTF').value,
+                start: document.getElementById('cfgStart').value,
+                end: document.getElementById('cfgEnd').value,
+                series
+            };
+
+            if (this.configMode === 'advanced') {
+                // Calculate instruments for ATM +- range
+                const atmRange = parseInt(document.getElementById('cfgAtmRange').value) || 5;
+                config.atmRange = atmRange;
+                config.instrument = `ATM ±${atmRange}`;
+                
+                // Get strikes and select instruments
+                if (this.currentOptions.length > 0) {
+                    const strikes = [...new Set(this.currentOptions.map(o => o.strike))].sort((a,b) => a - b);
+                    const midIdx = Math.floor(strikes.length / 2);
+                    const startIdx = Math.max(0, midIdx - atmRange);
+                    const endIdx = Math.min(strikes.length, midIdx + atmRange + 1);
+                    const selectedStrikes = strikes.slice(startIdx, endIdx);
+                    
+                    // Get all CE and PE instruments for selected strikes
+                    config.instruments = this.currentOptions
+                        .filter(o => selectedStrikes.includes(o.strike))
+                        .map(o => o.symbol);
+                }
+            } else {
+                // Normal mode
+                const inst = document.getElementById('cfgInst').value;
+                if(!inst) return alert("Please select an instrument");
+                config.instrument = inst;
+            }
+
+            App.state.charts[this.tid].config = config;
+            App.save();
+            App.renderGrid();
+            ChartLogic.plot(this.tid);
+        }
         this.close();
-    },
-    close() { document.getElementById('configModal').style.display = 'none'; }
+    }
 };
 
+// Close tooltips when clicking outside
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.info-icon') && !e.target.closest('.tooltip-content')) {
+        document.getElementById('varTooltip').classList.remove('show');
+        document.getElementById('seriesTooltip').classList.remove('show');
+    }
+});
+
 window.onload = () => App.init();
 </script>
 </body>