Update app.py

app.py

@@ -32,7 +32,7 @@ def sb_get(endpoint: str, params: dict = None):
         return r.json()
     except Exception as e:
         print(f"DB Error GET ({endpoint}): {e}")
-        return[]
+        return []
 
 def sb_rpc(func_name: str, params: dict = None):
     if params is None:
@@ -44,7 +44,7 @@ def sb_rpc(func_name: str, params: dict = None):
         return r.json()
     except Exception as e:
         print(f"DB Error RPC ({func_name}): {e}")
-        return[]
+        return []
 
 # ==========================================
 # 3. API ROUTES - METADATA
@@ -74,7 +74,7 @@ def get_auto_config(date: str, root: str):
     exps_data = sb_rpc("get_expiries_for_root", {"p_date": date, "p_root": root})
     all_expiries = [row['expiry_date'] for row in exps_data if row['expiry_date'] != 'MARKET']
 
-    valid_expiries =[e for e in all_expiries if e >= date]
+    valid_expiries = [e for e in all_expiries if e >= date]
     if not valid_expiries:
         valid_expiries = all_expiries
 
@@ -110,8 +110,8 @@ def get_instruments(date: str, root: str, expiry: str):
     data = sb_rpc("get_instruments_for_expiry", {"p_date": date, "p_root": root, "p_expiry": expiry})
     instruments = [row['instrument_name'] for row in data]
 
-    spot_fut =[]
-    options =[]
+    spot_fut = []
+    options = []
     for i in instruments:
         if i.endswith('CE') or i.endswith('PE'):
             options.append(i)
@@ -141,9 +141,11 @@ async def fetch_series(
     t_start_dt = pd.to_datetime(f"{date} {start_time}:00")
     t_end_dt = pd.to_datetime(f"{date} {end_time}:59")
 
+    # Default: all variables if not specified
     if required_vars is None:
-        required_vars =["P", "B", "S", "CB", "CS", "PB", "PS", "V", "OI"]
+        required_vars = ["P", "B", "S", "CB", "CS", "PB", "PS", "V", "OI"]
 
+    # Always include P (price)
     required_vars = list(set(required_vars) | {"P"})
 
     if mode == "advanced":
@@ -151,7 +153,7 @@ async def fetch_series(
         instruments = [r['instrument_name'] for r in inst_data]
 
         if not instruments:
-            return JSONResponse({"error": f"No data found for expiry {expiry}", "labels": [], "P":[]})
+            return JSONResponse({"error": f"No data found for expiry {expiry}", "labels": [], "P": []})
 
         ref_instrument = instrument
         if not ref_instrument:
@@ -162,19 +164,8 @@ async def fetch_series(
             elif fut_keys:
                 ref_instrument = fut_keys[0]
             else:
-                others =[k for k in instruments if not k.endswith('CE') and not k.endswith('PE')]
+                others = [k for k in instruments if not k.endswith('CE') and not k.endswith('PE')]
                 ref_instrument = others[0] if others else instruments[0]
-        
-        # Build Accurate Strike Map locally using Fyers nomenclature length rules
-        strike_map = {}
-        for inst in instruments:
-            if inst.endswith('CE') or inst.endswith('PE'):
-                try:
-                    prefix = inst.split(':')[1] if ':' in inst else inst
-                    s = prefix[len(root):-2]
-                    if len(s) > 5: strike_map[inst] = float(s[5:])
-                except:
-                    pass
 
         rpc_name = "get_advanced_chart_data"
         base_params = {
@@ -182,12 +173,12 @@ async def fetch_series(
             "p_expiry": expiry,
             "p_ref_instrument": ref_instrument,
             "p_atm_range": atm_range,
-            "p_strike_map": strike_map
+            "p_strike_map": {}
         }
 
     else:
         if not instrument:
-            return JSONResponse({"error": "No Instrument Selected.", "labels": [], "P":[]})
+            return JSONResponse({"error": "No Instrument Selected.", "labels": [], "P": []})
 
         rpc_name = "get_normal_chart_data"
         base_params = {
@@ -197,10 +188,8 @@ async def fetch_series(
         }
 
     # =========================================================
-    # CHUNKING: Shorter chunking for heavy DB loads (Advanced mode)
+    # CHUNKING: 2-hour chunks fetched in parallel
     # =========================================================
-    chunk_delta = timedelta(hours=1, minutes=45) if mode == "advanced" else timedelta(hours=2)
-
     async def fetch_chunk(start_dt, end_dt):
         params = base_params.copy()
         params["p_start_time"] = start_dt.strftime("%Y-%m-%d %H:%M:%S")
@@ -208,24 +197,24 @@ async def fetch_series(
         loop = asyncio.get_event_loop()
         return await loop.run_in_executor(None, sb_rpc, rpc_name, params)
 
-    tasks =[]
+    tasks = []
     curr = t_start_dt
     while curr <= t_end_dt:
-        nxt = curr + chunk_delta - timedelta(seconds=1)
+        nxt = curr + timedelta(hours=2) - timedelta(seconds=1)
         if nxt > t_end_dt:
             nxt = t_end_dt
         tasks.append(fetch_chunk(curr, nxt))
-        curr += chunk_delta
+        curr += timedelta(hours=2)
 
     chunk_results = await asyncio.gather(*tasks)
 
-    all_records =[]
+    all_records = []
     for res in chunk_results:
         if isinstance(res, list):
             all_records.extend(res)
 
     if not all_records:
-        return JSONResponse({"error": "No valid data found in range.", "labels": [], "P":[]})
+        return JSONResponse({"error": "No valid data found in range.", "labels": [], "P": []})
 
     # =========================================================
     # DATA PROCESSING
@@ -250,44 +239,114 @@ async def fetch_series(
     df.set_index('ts', inplace=True)
     df.sort_index(inplace=True)
 
+    # Resample
     tf_map = {
         "1min": "1min", "3min": "3min", "5min": "5min",
         "15min": "15min", "30min": "30min", "1hour": "1h"
     }
     panda_tf = tf_map.get(timeframe, "1min")
 
+    # KEY FIX: Use 'last' for quantity fields — these are cumulative running totals.
+    # The LAST value in any period is the most current/accurate snapshot.
     agg_dict = {
         "P": "last",
-        "V": "last",   # Fyers Volume is cumulative -> Must extract last snapshot
-        "OI": "last",
-        "B": "last",
-        "S": "last",
-        "CB": "last",
-        "CS": "last",
-        "PB": "last",
-        "PS": "last",
-        "details": "last"
+        "V": "sum",    # Volume: summing new volume per candle makes sense
+        "OI": "last",  # OI: last value
+        "B": "last",   # Buy qty cumulative total → last value
+        "S": "last",   # Sell qty cumulative total → last value
+        "CB": "last",  # Call Buy → last value
+        "CS": "last",  # Call Sell → last value
+        "PB": "last",  # Put Buy → last value
+        "PS": "last",  # Put Sell → last value
     }
+    
+    # Include ATM strike and breakdown data if available (for advanced mode)
+    if "atm_strike" in df.columns:
+        agg_dict["atm_strike"] = "last"
+    if "included_strikes" in df.columns:
+        agg_dict["included_strikes"] = "last"
+    if "breakdown_json" in df.columns:
+        agg_dict["breakdown_json"] = "last"
 
     existing_agg = {k: v for k, v in agg_dict.items() if k in df.columns}
     resampled = df.resample(panda_tf).agg(existing_agg).ffill().fillna(0)
 
+    # Build response: only include requested variables (reduces egress)
     response_data = {
         "labels": resampled.index.strftime('%H:%M').tolist()
     }
 
-    for var_key in["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS", "details"]:
+    for var_key in ["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS"]:
         if var_key in required_vars and var_key in resampled.columns:
-            if var_key == "details":
-                response_data[var_key] = resampled[var_key].tolist()
+            response_data[var_key] = [round(float(v), 2) for v in resampled[var_key].tolist()]
+        # Omit entirely if not requested — JS handles missing keys gracefully
+    
+    # Include ATM strike and breakdown data for advanced mode
+    if "atm_strike" in resampled.columns:
+        response_data["atm_strike"] = [round(float(v), 2) if pd.notna(v) else None for v in resampled["atm_strike"].tolist()]
+    if "included_strikes" in resampled.columns:
+        response_data["included_strikes"] = resampled["included_strikes"].tolist()
+    if "breakdown_json" in resampled.columns:
+        # Convert JSONB records to list of dicts
+        breakdown_data = []
+        for bd in resampled["breakdown_json"].tolist():
+            if pd.notna(bd) and bd:
+                if isinstance(bd, str):
+                    import json
+                    try:
+                        breakdown_data.append(json.loads(bd))
+                    except:
+                        breakdown_data.append([])
+                else:
+                    breakdown_data.append(bd)
             else:
-                response_data[var_key] =[round(float(v), 2) for v in resampled[var_key].tolist()]
+                breakdown_data.append([])
+        response_data["breakdown_json"] = breakdown_data
 
     return JSONResponse(response_data)
 
 
 # ==========================================
-# 5. FRONTEND TEMPLATE
+# 5. NEW API: STRIKE BREAKDOWN FOR SPECIFIC TIMESTAMP
+# ==========================================
+
+@app.post("/api/strike_breakdown")
+async def get_strike_breakdown(
+    date: str = Body(...),
+    root: str = Body(...),
+    expiry: str = Body(...),
+    ref_instrument: str = Body(...),
+    atm_range: int = Body(5),
+    timestamp: str = Body(...)
+):
+    """
+    Get detailed strike breakdown for a specific timestamp.
+    Shows all strikes with their ITM/OTM status and individual values.
+    """
+    root = root.upper()
+    
+    # Parse timestamp
+    ts_dt = pd.to_datetime(f"{date} {timestamp}")
+    
+    result = sb_rpc("get_strike_breakdown", {
+        "p_root": root,
+        "p_expiry": expiry,
+        "p_timestamp": ts_dt.strftime("%Y-%m-%d %H:%M:%S"),
+        "p_ref_instrument": ref_instrument,
+        "p_atm_range": atm_range
+    })
+    
+    if not result:
+        return JSONResponse({"error": "No breakdown data found", "strikes": []})
+    
+    return JSONResponse({
+        "timestamp": timestamp,
+        "strikes": result
+    })
+
+
+# ==========================================
+# 6. FRONTEND TEMPLATE
 # ==========================================
 
 HTML_TEMPLATE = """
@@ -390,6 +449,7 @@ HTML_TEMPLATE = """
             box-shadow: 0 20px 50px rgba(0,0,0,0.5);
         }
         .modal.wide { width: 820px; }
+        .modal.extra-wide { width: 95%; max-width: 1400px; }
         .modal-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; font-weight: 700; }
         .modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
         .modal-foot { padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-card); }
@@ -464,9 +524,86 @@ HTML_TEMPLATE = """
         .breakdown-table th:first-child { text-align: left; }
         .breakdown-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-primary); }
         .breakdown-table td:first-child { text-align: left; color: var(--text-secondary); }
+        .breakdown-table tr:hover td { background: var(--bg-panel); }
         .val-pos { color: #3fb950; }
         .val-neg { color: #f85149; }
         .breakdown-scroll { overflow-x: auto; overflow-y: auto; max-height: 55vh; }
+
+        /* STRIKE BREAKDOWN STYLES */
+        .strike-row {
+            display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border);
+            align-items: center; font-family: var(--font-mono); font-size: 11px;
+        }
+        .strike-row:hover { background: var(--bg-panel); }
+        .strike-row.itm { background: rgba(47,129,247,0.05); }
+        .strike-row.otm { background: rgba(0,0,0,0); }
+        .strike-row.atm { background: rgba(35,134,54,0.1); border-left: 3px solid var(--success); }
+        .strike-row.not-included { opacity: 0.4; }
+        .strike-label {
+            min-width: 100px; display: flex; gap: 6px; align-items: center;
+        }
+        .strike-badge {
+            font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 600;
+        }
+        .badge-itm { background: var(--accent); color: white; }
+        .badge-otm { background: var(--bg-panel); color: var(--text-secondary); border: 1px solid var(--border); }
+        .badge-atm { background: var(--success); color: white; }
+        .strike-values {
+            display: flex; gap: 16px; flex: 1; justify-content: flex-end;
+        }
+        .strike-value-group {
+            display: flex; flex-direction: column; min-width: 60px;
+        }
+        .strike-value-label { font-size: 9px; color: var(--text-secondary); }
+        .strike-value-num { font-weight: 600; }
+
+        /* MINUTE BREAKDOWN ACCORDION */
+        .minute-row {
+            border-bottom: 1px solid var(--border);
+        }
+        .minute-header {
+            display: flex; align-items: center; padding: 8px 12px; cursor: pointer;
+            background: var(--bg-card); transition: background 0.2s;
+        }
+        .minute-header:hover { background: var(--bg-panel); }
+        .minute-header.expanded { background: var(--bg-panel); border-bottom: 1px solid var(--border); }
+        .minute-time { font-weight: 600; min-width: 60px; }
+        .minute-atm { color: var(--accent); font-family: var(--font-mono); min-width: 100px; }
+        .minute-summary { flex: 1; display: flex; gap: 16px; font-family: var(--font-mono); font-size: 11px; }
+        .expand-icon {
+            width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
+            color: var(--text-secondary); transition: transform 0.2s;
+        }
+        .expand-icon.expanded { transform: rotate(90deg); }
+        .minute-detail {
+            display: none; padding: 12px; background: var(--bg-body);
+            border-bottom: 1px solid var(--border);
+        }
+        .minute-detail.visible { display: block; }
+        
+        /* STRIKE DETAIL GRID */
+        .strike-detail-grid {
+            display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 8px;
+        }
+        .strike-detail-card {
+            background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px;
+            padding: 10px; font-family: var(--font-mono); font-size: 11px;
+        }
+        .strike-detail-card.ce { border-left: 3px solid #238636; }
+        .strike-detail-card.pe { border-left: 3px solid #da3633; }
+        .strike-detail-card.itm { background: rgba(47,129,247,0.08); }
+        .strike-detail-card.otm { background: transparent; }
+        .strike-detail-card.atm { background: rgba(35,134,54,0.1); }
+        .strike-detail-header {
+            display: flex; justify-content: space-between; margin-bottom: 8px;
+            font-weight: 600;
+        }
+        .strike-detail-values {
+            display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
+        }
+        .detail-val { color: var(--text-secondary); }
+        .detail-num { text-align: right; }
     </style>
 </head>
 <body>
@@ -478,7 +615,7 @@ HTML_TEMPLATE = """
         <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>
+                <option value="HISTORY">HISTORY</option>
             </select>
             <div id="modeDot" class="status-dot live" style="position:absolute; left:10px; top:12px; pointer-events:none;"></div>
         </div>
@@ -560,7 +697,7 @@ HTML_TEMPLATE = """
                             <label style="color:var(--accent);">ATM (+/-) Strike Range</label>
                             <input type="number" id="cfgAtmRange" value="5" min="1" max="50" style="width:100%;">
                             <div style="font-size:10px; color:var(--text-secondary); margin-top:4px;">
-                                Aggregates all CE/PE within ATM ± this many strikes.
+                                Aggregates all CE/PE within ATM ± N strikes. Total 2N strikes included.
                             </div>
                         </div>
                     </div>
@@ -616,17 +753,26 @@ HTML_TEMPLATE = """
     </div>
 </div>
 
-<!-- ===== BREAKDOWN MODAL ===== -->
+<!-- ===== BREAKDOWN MODAL (ENHANCED) ===== -->
 <div class="modal-backdrop" id="breakdownModal">
-    <div class="modal wide">
+    <div class="modal extra-wide">
         <div class="modal-head">
             <span id="bdTitle">Calculation Breakdown</span>
             <button class="tool-btn" onclick="document.getElementById('breakdownModal').style.display='none'">✕</button>
         </div>
         <div class="modal-body" style="padding:12px;">
             <div style="font-size:11px; color:var(--text-secondary); margin-bottom:8px;" id="bdMeta"></div>
-            <div class="breakdown-scroll">
-                <table class="breakdown-table" id="bdTable"></table>
+            <div style="display:flex; gap:8px; margin-bottom:12px;">
+                <button id="bdTabSummary" class="primary" style="font-size:11px;" onclick="Breakdown.showTab('summary')">Summary</button>
+                <button id="bdTabDetail" style="font-size:11px; background:var(--bg-panel);" onclick="Breakdown.showTab('detail')">Strike Detail</button>
+            </div>
+            <div id="bdSummaryTab">
+                <div class="breakdown-scroll">
+                    <table class="breakdown-table" id="bdTable"></table>
+                </div>
+            </div>
+            <div id="bdDetailTab" style="display:none;">
+                <div class="breakdown-scroll" id="bdDetailContent"></div>
             </div>
         </div>
     </div>
@@ -655,14 +801,16 @@ function evalFormula(formula, vars) {
     try { return new Function('return ' + f)(); } catch { return null; }
 }
 
+// Extract which variables are used in a list of series formulas
 function extractRequiredVars(seriesList) {
-    const vars = new Set(['P']); 
+    const vars = new Set(['P']); // Always need price
     seriesList.forEach(s => {
         const f = s.formula || '';
         if (f.includes('$CB')) vars.add('CB');
         if (f.includes('$CS')) vars.add('CS');
         if (f.includes('$PB')) vars.add('PB');
         if (f.includes('$PS')) vars.add('PS');
+        // Check $B / $S but NOT $CB/$CS/$PB/$PS (already handled above)
         if (/\\$B(?!S)/.test(f) || f.includes('$B ') || f.endsWith('$B') || f.includes('$B-') || f.includes('$B+')) vars.add('B');
         if (/\\$S(?!$)/.test(f) || f.includes('$S ') || f.endsWith('$S') || f.includes('$S-') || f.includes('$S+')) vars.add('S');
         if (f.includes('$V')) vars.add('V');
@@ -675,15 +823,15 @@ function extractRequiredVars(seriesList) {
 // CUSTOM DROPDOWN
 // ===================================================
 const CustomDD = {
-    data: { cfgRoot: [], cfgExp: [], cfgInst:[] },
-    recent: { cfgRoot:[] },
+    data: { cfgRoot: [], cfgExp: [], cfgInst: [] },
+    recent: { cfgRoot: [] },
 
     init() {
         const saved = localStorage.getItem('dc_recent_symbols');
         if (saved) try { this.recent.cfgRoot = JSON.parse(saved); } catch(e){}
     },
 
-    clear(id) { this.data[id] =[]; document.getElementById(id).value = ''; },
+    clear(id) { this.data[id] = []; document.getElementById(id).value = ''; },
 
     set(id, items, groupName = null) {
         if (!groupName)
@@ -756,47 +904,51 @@ const CustomDD = {
 // APP STATE
 // ===================================================
 const App = {
-    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [],[]], charts: {}, refreshRate: 15 },
+    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [], []], charts: {}, refreshRate: 15 },
 
+    // ---- DEFAULT PRESETS (organized by use case) ----
     presets: {
-        "Basic Flow (Fut/Eq)":[
+        // --- Normal: Futures / Equity / Spot ---
+        "Basic Flow (Fut/Eq)": [
             { formula: '$P',       label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$B',       label: 'Buy',      axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$S',       label: 'Sell',     axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Net Flow (Fut/Eq)":[
+        "Net Flow (Fut/Eq)": [
             { formula: '$P',       label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$B - $S',  label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BUY', labelFalse: 'SELL' }
         ],
-        "Call Flow (Options)":[
+        // --- Normal: Options ---
+        "Call Flow (Options)": [
             { formula: '$P',       label: 'Price',     axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB',      label: 'Call Buy',  axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$CS',      label: 'Call Sell', axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Put Flow (Options)":[
+        "Put Flow (Options)": [
             { formula: '$P',       label: 'Price',     axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$PB',      label: 'Put Buy',   axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$PS',      label: 'Put Sell',  axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Aggregated Flow (Options)":[
+        "Aggregated Flow (Options)": [
             { formula: '$P',            label: 'Price',      axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS',     label: 'Bull Side',  axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$PB + $CS',     label: 'Bear Side',  axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Net Flow (Options)":[
+        "Net Flow (Options)": [
             { formula: '$P',                        label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS - ($PB + $CS)',   label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
         ],
-        "Price & Flows (Advanced)":[
+        // --- Advanced: Options (aggregated across ATM range) ---
+        "Price & Flows (Advanced)": [
             { formula: '$P',            label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS',     label: 'Bull Side',  axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$PB + $CS',     label: 'Bear Side',  axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Net Flow (Advanced)":[
+        "Net Flow (Advanced)": [
             { formula: '$P',                        label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS - ($PB + $CS)',   label: 'Net Flow',   axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
         ],
-        "Components (Advanced)":[
+        "Components (Advanced)": [
             { formula: '$P',   label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB',  label: 'Call Buy',   axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$CS',  label: 'Call Sell',  axis: 'right', color1: '#3fb950', cond: 'none' },
@@ -835,7 +987,7 @@ const App = {
 
     initDefault() {
         this.state.columns = 3;
-        this.state.layout = [[], [],[]];
+        this.state.layout = [[], [], []];
         this.state.refreshRate = 15;
         for (let i = 0; i < 3; i++) {
             this.addChartInternal(i);
@@ -880,7 +1032,7 @@ const App = {
     setLayout(n) {
         const all = this.state.layout.flat();
         this.state.columns = n;
-        this.state.layout = Array.from({ length: n }, () =>[]);
+        this.state.layout = Array.from({ length: n }, () => []);
         all.forEach((id, i) => this.state.layout[i % n].push(id));
         this.renderGrid(); this.save();
     },
@@ -999,10 +1151,8 @@ const ChartLogic = {
             endTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
         }
 
-        const requiredVars = extractRequiredVars(cfg.series ||[]);
-        if (cfg.chartMode === 'advanced') {
-            requiredVars.push('details');
-        }
+        // Determine which variables are actually needed by the series formulas
+        const requiredVars = extractRequiredVars(cfg.series || []);
 
         try {
             const res = await fetch('/api/fetch_series', {
@@ -1032,13 +1182,14 @@ const ChartLogic = {
                 return;
             }
 
+            // Store data for breakdown table
             chart.lastData = data;
 
             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 datasets = (cfg.series || []).map(s => {
                 const vals = data.labels.map((_, i) => {
                     const vars = {
                         P:  safeVal(data, 'P',  i),
@@ -1087,7 +1238,7 @@ const ChartLogic = {
                 return ds;
             });
 
-            this.render(id, data.labels, datasets, cfg.series ||[]);
+            this.render(id, data.labels, datasets, cfg.series || []);
 
         } catch(e) { console.error('ChartLogic.plot error:', e); }
     },
@@ -1175,9 +1326,22 @@ const ChartLogic = {
 };
 
 // ===================================================
-// BREAKDOWN TABLE
+// BREAKDOWN TABLE (ENHANCED)
 // ===================================================
 const Breakdown = {
+    currentTab: 'summary',
+    expandedMinutes: new Set(),
+    
+    showTab(tab) {
+        this.currentTab = tab;
+        document.getElementById('bdTabSummary').className = tab === 'summary' ? 'primary' : '';
+        document.getElementById('bdTabSummary').style.background = tab === 'summary' ? 'var(--accent)' : 'var(--bg-panel)';
+        document.getElementById('bdTabDetail').className = tab === 'detail' ? 'primary' : '';
+        document.getElementById('bdTabDetail').style.background = tab === 'detail' ? 'var(--accent)' : 'var(--bg-panel)';
+        document.getElementById('bdSummaryTab').style.display = tab === 'summary' ? 'block' : 'none';
+        document.getElementById('bdDetailTab').style.display = tab === 'detail' ? 'block' : 'none';
+    },
+    
     open(id) {
         const chart = App.state.charts[id];
         if (!chart || !chart.lastData || !chart.config.series) {
@@ -1188,19 +1352,49 @@ const Breakdown = {
         const data = chart.lastData;
         const cfg = chart.config;
         const series = cfg.series;
-        const hasDetails = data.details && data.details.some(d => d);
 
-        const allVarKeys =['P', 'CB', 'CS', 'PB', 'PS', 'B', 'S', 'V', 'OI'];
+        // Build summary table
+        this.buildSummaryTable(data, cfg, series);
+        
+        // Build detail view if breakdown data available
+        if (data.breakdown_json && data.breakdown_json.length > 0) {
+            this.buildDetailView(data, cfg);
+        } else {
+            document.getElementById('bdDetailContent').innerHTML = `
+                <div style="text-align:center; padding:40px; color:var(--text-secondary);">
+                    <div style="font-size:24px; opacity:0.5;">📊</div>
+                    <div style="margin-top:12px;">Strike breakdown data available only in Advanced Mode</div>
+                    <div style="font-size:11px; margin-top:8px;">Switch to Advanced Mode to see per-strike details</div>
+                </div>
+            `;
+        }
+
+        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${cfg.chartMode === 'advanced' ? 'ATM ± ' + (cfg.atmRange || 5) : (cfg.instrument || '')}`;
+        document.getElementById('bdMeta').innerText = `Timeframe: ${cfg.timeframe || '1min'} | Range: ${cfg.start} – ${cfg.end} | ${data.labels.length} bars`;
+        document.getElementById('breakdownModal').style.display = 'flex';
+        
+        // Default to summary tab
+        this.showTab('summary');
+    },
+    
+    buildSummaryTable(data, cfg, series) {
+        // Determine which raw variables to show in table
+        const allVarKeys = ['P', 'CB', 'CS', 'PB', 'PS', 'B', 'S', 'V', 'OI'];
         const presentVars = allVarKeys.filter(k =>
             data[k] && data[k].some(v => v && v !== 0)
         );
 
+        // Build header
         let thead = '<thead><tr><th>Time</th>';
-        if (hasDetails) thead += '<th>ATM Details</th>';
+        // Add ATM strike column if available
+        if (data.atm_strike) {
+            thead += '<th>ATM</th>';
+        }
         presentVars.forEach(v => { thead += `<th>${v}</th>`; });
         series.forEach(s => { thead += `<th>${s.label}</th>`; });
         thead += '</tr></thead>';
 
+        // Build rows
         let tbody = '<tbody>';
         data.labels.forEach((lbl, i) => {
             const vars = {
@@ -1211,25 +1405,22 @@ const Breakdown = {
                 OI: safeVal(data, 'OI', i)
             };
 
-            let detailsBtn = '';
-            if (hasDetails) {
-                const det = data.details[i];
-                if (det && det.atm) {
-                    const detId = `det-${id}-${i}`;
-                    detailsBtn = `<td><button class="tool-btn" style="width:auto; padding:0 6px; font-size:10px; font-weight:bold; color:var(--accent);" onclick="Breakdown.toggleDetails('${detId}')">ATM: ${det.atm} ▼</button></td>`;
-                } else {
-                    detailsBtn = `<td>-</td>`;
-                }
+            tbody += `<tr><td>${lbl}</td>`;
+            
+            // ATM strike if available
+            if (data.atm_strike) {
+                const atm = data.atm_strike[i];
+                tbody += `<td style="color:var(--accent); font-weight:600;">${atm ? atm.toFixed(0) : '-'}</td>`;
             }
 
-            tbody += `<tr><td>${lbl}</td>${detailsBtn}`;
-
+            // Raw variable values
             presentVars.forEach(k => {
                 const v = vars[k];
                 const cls = v > 0 ? 'val-pos' : (v < 0 ? 'val-neg' : '');
                 tbody += `<td class="${cls}">${v.toFixed(2)}</td>`;
             });
 
+            // Calculated formula values
             series.forEach(s => {
                 const result = evalFormula(s.formula, vars);
                 const rv = result !== null ? result : 0;
@@ -1244,49 +1435,146 @@ const Breakdown = {
                 }
                 tbody += `<td class="${cls}">${rv.toFixed(2)}${condLabel}</td>`;
             });
+
             tbody += '</tr>';
+        });
+        tbody += '</tbody>';
 
-            if (hasDetails) {
-                const det = data.details[i];
-                if (det && det.strikes) {
-                    let subTable = `<table style="width:100%; border-left:2px solid var(--accent); margin-left:10px; background:var(--bg-body); border-radius:4px; font-size:10px;">
-                        <tr style="color:var(--text-secondary);"><th style="text-align:left;">Strike</th><th>CB</th><th>CS</th><th>PB</th><th>PS</th></tr>`;
+        document.getElementById('bdTable').innerHTML = thead + tbody;
+    },
+    
+    buildDetailView(data, cfg) {
+        const atmRange = cfg.atmRange || 5;
+        
+        let html = '<div style="margin-bottom:12px; padding:12px; background:var(--bg-panel); border-radius:6px; border:1px solid var(--border);">';
+        html += `<div style="font-size:12px; color:var(--text-secondary);">`;
+        html += `<strong style="color:var(--accent);">ATM ± ${atmRange}</strong> = ${atmRange} ITM + ${atmRange} OTM strikes = <strong>${atmRange * 2}</strong> total strikes per side (CE & PE)`;
+        html += `<br><span style="font-size:10px;">ITM for CALLS = strikes below ATM | ITM for PUTS = strikes above ATM</span>`;
+        html += `</div></div>`;
+        
+        html += '<div class="minute-list">';
+        
+        data.labels.forEach((lbl, i) => {
+            const breakdown = data.breakdown_json ? data.breakdown_json[i] : null;
+            const atmStrike = data.atm_strike ? data.atm_strike[i] : null;
+            const includedStrikes = data.included_strikes ? data.included_strikes[i] : '';
+            
+            // Calculate aggregates for this minute
+            const vars = {
+                P:  safeVal(data, 'P',  i), B:  safeVal(data, 'B',  i),
+                S:  safeVal(data, 'S',  i), CB: safeVal(data, 'CB', i),
+                CS: safeVal(data, 'CS', i), PB: safeVal(data, 'PB', i),
+                PS: safeVal(data, 'PS', i), V:  safeVal(data, 'V',  i),
+                OI: safeVal(data, 'OI', i)
+            };
+            
+            const minuteId = `minute-${i}`;
+            const isExpanded = this.expandedMinutes.has(minuteId);
+            
+            html += `<div class="minute-row">`;
+            html += `<div class="minute-header ${isExpanded ? 'expanded' : ''}" onclick="Breakdown.toggleMinute('${minuteId}')">`;
+            html += `<div class="expand-icon ${isExpanded ? 'expanded' : ''}">▶</div>`;
+            html += `<div class="minute-time">${lbl}</div>`;
+            if (atmStrike) {
+                html += `<div class="minute-atm">ATM: ${atmStrike.toFixed(0)}</div>`;
+            }
+            html += `<div class="minute-summary">`;
+            html += `<span style="color:var(--success);">CB: ${vars.CB.toFixed(0)}</span>`;
+            html += `<span style="color:var(--danger);">CS: ${vars.CS.toFixed(0)}</span>`;
+            html += `<span style="color:var(--success);">PB: ${vars.PB.toFixed(0)}</span>`;
+            html += `<span style="color:var(--danger);">PS: ${vars.PS.toFixed(0)}</span>`;
+            html += `</div>`;
+            html += `</div>`; // minute-header
+            
+            html += `<div class="minute-detail ${isExpanded ? 'visible' : ''}" id="${minuteId}">`;
+            
+            if (breakdown && breakdown.length > 0) {
+                // Group by strike
+                const strikesMap = {};
+                breakdown.forEach(s => {
+                    if (!strikesMap[s.strike]) {
+                        strikesMap[s.strike] = { CE: null, PE: null };
+                    }
+                    strikesMap[s.strike][s.type] = s;
+                });
+                
+                const strikes = Object.keys(strikesMap).sort((a, b) => b - a); // Descending
+                
+                html += `<div style="font-size:11px; color:var(--text-secondary); margin-bottom:8px;">`;
+                html += `Strikes included: ${includedStrikes || 'N/A'}`;
+                html += `</div>`;
+                
+                html += `<div class="strike-detail-grid">`;
+                
+                strikes.forEach(strike => {
+                    const ceData = strikesMap[strike].CE;
+                    const peData = strikesMap[strike].PE;
                     
-                    const strikes = Object.keys(det.strikes).map(Number).sort((a,b) => a-b);
-                    strikes.forEach(st => {
-                        const rowData = det.strikes[st];
-                        subTable += `<tr style="border-bottom: 1px solid var(--border);">
-                            <td style="text-align:left; color:${st === det.atm ? 'var(--accent)' : 'inherit'}; font-weight:${st === det.atm ? 'bold' : 'normal'}">${st}${st === det.atm ? ' (ATM)' : ''}</td>
-                            <td class="${rowData.cb > 0 ? 'val-pos':''}">${rowData.cb.toFixed(2)}</td>
-                            <td class="${rowData.cs > 0 ? 'val-neg':''}">${rowData.cs.toFixed(2)}</td>
-                            <td class="${rowData.pb > 0 ? 'val-pos':''}">${rowData.pb.toFixed(2)}</td>
-                            <td class="${rowData.ps > 0 ? 'val-neg':''}">${rowData.ps.toFixed(2)}</td>
-                        </tr>`;
-                    });
-                    subTable += `</table>`;
+                    if (ceData && ceData.included) {
+                        const cls = ceData.moneyness === 'ITM' ? 'itm' : 'otm';
+                        const atmClass = Math.abs(ceData.strike - atmStrike) < 1 ? 'atm' : '';
+                        html += `<div class="strike-detail-card ce ${cls} ${atmClass}">`;
+                        html += `<div class="strike-detail-header">`;
+                        html += `<span>${ceData.strike} CE</span>`;
+                        html += `<span class="strike-badge ${ceData.moneyness === 'ITM' ? 'badge-itm' : 'badge-otm'}">${ceData.moneyness}</span>`;
+                        html += `</div>`;
+                        html += `<div class="strike-detail-values">`;
+                        html += `<span class="detail-val">Buy:</span><span class="detail-num val-pos">${(ceData.b || 0).toFixed(0)}</span>`;
+                        html += `<span class="detail-val">Sell:</span><span class="detail-num val-neg">${(ceData.s || 0).toFixed(0)}</span>`;
+                        html += `<span class="detail-val">Vol:</span><span class="detail-num">${(ceData.v || 0).toFixed(0)}</span>`;
+                        html += `<span class="detail-val">Price:</span><span class="detail-num">${(ceData.p || 0).toFixed(2)}</span>`;
+                        html += `</div>`;
+                        html += `</div>`;
+                    }
                     
-                    const colCount = 1 + (hasDetails ? 1 : 0) + presentVars.length + series.length;
-                    tbody += `<tr id="det-${id}-${i}" style="display:none; background:rgba(0,0,0,0.2);">
-                        <td colspan="${colCount}" style="padding:10px;">
-                            ${subTable}
-                        </td>
-                    </tr>`;
-                }
+                    if (peData && peData.included) {
+                        const cls = peData.moneyness === 'ITM' ? 'itm' : 'otm';
+                        const atmClass = Math.abs(peData.strike - atmStrike) < 1 ? 'atm' : '';
+                        html += `<div class="strike-detail-card pe ${cls} ${atmClass}">`;
+                        html += `<div class="strike-detail-header">`;
+                        html += `<span>${peData.strike} PE</span>`;
+                        html += `<span class="strike-badge ${peData.moneyness === 'ITM' ? 'badge-itm' : 'badge-otm'}">${peData.moneyness}</span>`;
+                        html += `</div>`;
+                        html += `<div class="strike-detail-values">`;
+                        html += `<span class="detail-val">Buy:</span><span class="detail-num val-pos">${(peData.b || 0).toFixed(0)}</span>`;
+                        html += `<span class="detail-val">Sell:</span><span class="detail-num val-neg">${(peData.s || 0).toFixed(0)}</span>`;
+                        html += `<span class="detail-val">Vol:</span><span class="detail-num">${(peData.v || 0).toFixed(0)}</span>`;
+                        html += `<span class="detail-val">Price:</span><span class="detail-num">${(peData.p || 0).toFixed(2)}</span>`;
+                        html += `</div>`;
+                        html += `</div>`;
+                    }
+                });
+                
+                html += `</div>`; // strike-detail-grid
+            } else {
+                html += `<div style="color:var(--text-secondary); text-align:center; padding:20px;">No strike breakdown data for this minute</div>`;
             }
-
+            
+            html += `</div>`; // minute-detail
+            html += `</div>`; // minute-row
         });
-        tbody += '</tbody>';
-
-        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${cfg.chartMode === 'advanced' ? 'ATM ± ' + (cfg.atmRange || 5) : (cfg.instrument || '')}`;
-        document.getElementById('bdMeta').innerText = `Timeframe: ${cfg.timeframe || '1min'} | Range: ${cfg.start} – ${cfg.end} | ${data.labels.length} bars`;
-        document.getElementById('bdTable').innerHTML = thead + tbody;
-        document.getElementById('breakdownModal').style.display = 'flex';
+        
+        html += '</div>'; // minute-list
+        
+        document.getElementById('bdDetailContent').innerHTML = html;
     },
-
-    toggleDetails(rowId) {
-        const row = document.getElementById(rowId);
-        if (row.style.display === 'none') row.style.display = 'table-row';
-        else row.style.display = 'none';
+    
+    toggleMinute(minuteId) {
+        const detail = document.getElementById(minuteId);
+        const header = detail.previousElementSibling;
+        const icon = header.querySelector('.expand-icon');
+        
+        if (this.expandedMinutes.has(minuteId)) {
+            this.expandedMinutes.delete(minuteId);
+            detail.classList.remove('visible');
+            header.classList.remove('expanded');
+            icon.classList.remove('expanded');
+        } else {
+            this.expandedMinutes.add(minuteId);
+            detail.classList.add('visible');
+            header.classList.add('expanded');
+            icon.classList.add('expanded');
+        }
     }
 };
 
@@ -1305,6 +1593,7 @@ const Config = {
         document.getElementById('lblInst').innerText = mode === 'normal' ? 'Instrument' : 'Reference Spot/Fut (ATM Ref Price)';
         document.getElementById('advInstHint').style.display = mode === 'advanced' ? 'block' : 'none';
         this.updatePresetsDropdown();
+        // Auto-load a relevant default preset when mode switches
         const defPreset = mode === 'advanced' ? 'Price & Flows (Advanced)' : 'Aggregated Flow (Options)';
         this.loadPreset(defPreset);
     },
@@ -1333,7 +1622,7 @@ const Config = {
 
     deletePreset() {
         const name = document.getElementById('cfgPresetsDropdown').value;
-        const locked =['Basic Flow (Fut/Eq)', 'Net Flow (Fut/Eq)', 'Call Flow (Options)',
+        const locked = ['Basic Flow (Fut/Eq)', 'Net Flow (Fut/Eq)', 'Call Flow (Options)',
                         'Put Flow (Options)', 'Aggregated Flow (Options)', 'Net Flow (Options)',
                         'Price & Flows (Advanced)', 'Net Flow (Advanced)', 'Components (Advanced)'];
         if (locked.includes(name)) return alert('Cannot delete default models.');
@@ -1482,6 +1771,7 @@ const Config = {
                 <input type="text" class="s-label-false" value="${s.labelFalse || ''}" placeholder="e.g. BEARISH" style="width:80px;">
             </div>
         `;
+        // Keep s-color1 in sync with the condition row color
         const solidColor = r.querySelector('.s-color1');
         const condTrueColor = r.querySelector('.s-color1-cond');
         solidColor.addEventListener('input', () => { if (condTrueColor) condTrueColor.value = solidColor.value; });