Update app.py

app.py

@@ -167,7 +167,8 @@ async def fetch_series(
                 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]
 
-        rpc_name = "get_advanced_chart_data"
+        # Use the new function that includes strike breakdown
+        rpc_name = "get_advanced_chart_data_with_breakdown"
         base_params = {
             "p_root": root,
             "p_expiry": expiry,
@@ -231,7 +232,9 @@ async def fetch_series(
         "cs": "CS",
         "pb": "PB",
         "ps": "PS",
-        "price": "P"
+        "price": "P",
+        "atm_strike": "ATM_Strike",
+        "strike_breakdown": "StrikeBreakdown"
     }, inplace=True)
 
     df['ts'] = pd.to_datetime(df['ts'])
@@ -258,95 +261,42 @@ async def fetch_series(
         "CS": "last",  # Call Sell → last value
         "PB": "last",  # Put Buy → last value
         "PS": "last",  # Put Sell → last value
+        "ATM_Strike": "last",  # ATM strike → 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"
 
+    # For strike breakdown, we'll keep the last one per resampled period
     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)
 
+    # Handle strike breakdown separately - take last value for each period
+    if "StrikeBreakdown" in df.columns:
+        breakdown_series = df.resample(panda_tf)["StrikeBreakdown"].last()
+    else:
+        breakdown_series = None
+
     # Build response: only include requested variables (reduces egress)
     response_data = {
-        "labels": resampled.index.strftime('%H:%M').tolist()
+        "labels": resampled.index.strftime('%H:%M').tolist(),
+        "mode": mode  # Include mode so frontend knows how to display breakdown
     }
 
-    for var_key in ["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS"]:
+    for var_key in ["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS", "ATM_Strike"]:
         if var_key in required_vars and var_key in resampled.columns:
             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:
-                breakdown_data.append([])
-        response_data["breakdown_json"] = breakdown_data
 
-    return JSONResponse(response_data)
-
-
-# ==========================================
-# 5. NEW API: STRIKE BREAKDOWN FOR SPECIFIC TIMESTAMP
-# ==========================================
+    # Include ATM_Strike and StrikeBreakdown for advanced mode
+    if mode == "advanced":
+        if "ATM_Strike" in resampled.columns:
+            response_data["ATM_Strike"] = [round(float(v), 2) if v else 0 for v in resampled["ATM_Strike"].tolist()]
+        if breakdown_series is not None:
+            # Convert breakdown to list of lists (each element is the strike breakdown for that timestamp)
+            response_data["StrikeBreakdown"] = breakdown_series.fillna('[]').tolist()
 
-@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
-    })
+    return JSONResponse(response_data)
 
 
 # ==========================================
-# 6. FRONTEND TEMPLATE
+# 5. FRONTEND TEMPLATE
 # ==========================================
 
 HTML_TEMPLATE = """
@@ -448,8 +398,7 @@ HTML_TEMPLATE = """
             width: 560px; max-width: 95%; max-height: 88vh; display: flex; flex-direction: column;
             box-shadow: 0 20px 50px rgba(0,0,0,0.5);
         }
-        .modal.wide { width: 820px; }
-        .modal.extra-wide { width: 95%; max-width: 1400px; }
+        .modal.wide { width: 95%; max-width: 1200px; }
         .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); }
@@ -529,81 +478,65 @@ HTML_TEMPLATE = """
         .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 BREAKDOWN SUB-TABLE */
+        .strike-section {
+            margin: 10px 0;
+            padding: 10px;
+            background: var(--bg-panel);
+            border-radius: 6px;
+            border: 1px solid var(--border);
         }
-        .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 {
+        .strike-section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+            padding-bottom: 8px;
             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;
+        .strike-time { font-weight: 600; color: var(--accent); }
+        .strike-atm { font-size: 11px; color: var(--text-secondary); }
+        .strike-subtable {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 10px;
         }
-        .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;
+        .strike-subtable th {
+            background: var(--bg-input);
+            padding: 4px 6px;
+            text-align: right;
+            border-bottom: 1px solid var(--border);
         }
-        .expand-icon.expanded { transform: rotate(90deg); }
-        .minute-detail {
-            display: none; padding: 12px; background: var(--bg-body);
+        .strike-subtable td {
+            padding: 3px 6px;
+            text-align: right;
             border-bottom: 1px solid var(--border);
         }
-        .minute-detail.visible { display: block; }
+        .strike-subtable tr:hover td { background: var(--bg-input); }
+        .type-ce { color: #238636; font-weight: 600; }
+        .type-pe { color: #da3633; font-weight: 600; }
+        .atm-highlight { background: rgba(47,129,247,0.15); }
         
-        /* STRIKE DETAIL GRID */
-        .strike-detail-grid {
-            display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-            gap: 8px;
+        /* TABS FOR BREAKDOWN VIEW */
+        .breakdown-tabs {
+            display: flex;
+            gap: 4px;
+            margin-bottom: 12px;
         }
-        .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;
+        .breakdown-tab {
+            padding: 6px 12px;
+            border: 1px solid var(--border);
+            background: var(--bg-input);
+            color: var(--text-secondary);
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 11px;
         }
-        .strike-detail-values {
-            display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
+        .breakdown-tab.active {
+            background: var(--accent);
+            color: white;
+            border-color: var(--accent);
         }
-        .detail-val { color: var(--text-secondary); }
-        .detail-num { text-align: right; }
     </style>
 </head>
 <body>
@@ -615,7 +548,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="HISTORY">HISTORY</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>
@@ -688,16 +621,18 @@ HTML_TEMPLATE = """
                             <div id="dd-cfgInst" class="custom-dd"></div>
                         </div>
                         <div id="advInstHint" style="display:none; font-size:10px; color:var(--text-secondary); margin-top:4px; line-height:1.4;">
-                            * Advanced Mode: select the Spot/Future as price reference. All CE/PE within ATM ± range will be aggregated.
+                            * Advanced Mode: select the Spot/Future as price reference. All CE/PE within ATM ± range will be aggregated.<br>
+                            <strong>Selection Logic:</strong> For CALLS: N strikes BELOW ATM (ITM) + ATM + (N-1) ABOVE (OTM). For PUTS: N ABOVE (ITM) + ATM + (N-1) BELOW (OTM).
                         </div>
                     </div>
 
                     <div id="cfgAdvancedFields" style="display:none;">
                         <div class="form-section" style="margin-top:12px;">
-                            <label style="color:var(--accent);">ATM (+/-) Strike Range</label>
+                            <label style="color:var(--accent);">ATM (+/-) Strike Range (N)</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 ± N strikes. Total 2N strikes included.
+                                Selects 2N strikes per option type: N ITM + N OTM (ATM counted as first OTM).<br>
+                                Total = 2N CALLS + 2N PUTS = 4N instruments maximum.
                             </div>
                         </div>
                     </div>
@@ -753,27 +688,17 @@ HTML_TEMPLATE = """
     </div>
 </div>
 
-<!-- ===== BREAKDOWN MODAL (ENHANCED) ===== -->
+<!-- ===== BREAKDOWN MODAL ===== -->
 <div class="modal-backdrop" id="breakdownModal">
-    <div class="modal extra-wide">
+    <div class="modal 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 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 class="breakdown-tabs" id="bdTabs"></div>
+            <div class="breakdown-scroll" id="bdContent"></div>
         </div>
     </div>
 </div>
@@ -803,14 +728,13 @@ function evalFormula(formula, vars) {
 
 // Extract which variables are used in a list of series formulas
 function extractRequiredVars(seriesList) {
-    const vars = new Set(['P']); // Always need price
+    const vars = new Set(['P']);
     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');
@@ -906,9 +830,7 @@ const CustomDD = {
 const App = {
     state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [], []], charts: {}, refreshRate: 15 },
 
-    // ---- DEFAULT PRESETS (organized by use case) ----
     presets: {
-        // --- 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' },
@@ -918,7 +840,6 @@ const App = {
             { 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' }
         ],
-        // --- 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' },
@@ -938,7 +859,6 @@ const App = {
             { 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' }
         ],
-        // --- 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' },
@@ -1151,7 +1071,6 @@ const ChartLogic = {
             endTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
         }
 
-        // Determine which variables are actually needed by the series formulas
         const requiredVars = extractRequiredVars(cfg.series || []);
 
         try {
@@ -1182,7 +1101,6 @@ const ChartLogic = {
                 return;
             }
 
-            // Store data for breakdown table
             chart.lastData = data;
 
             const body = document.getElementById(`body-${id}`);
@@ -1326,22 +1244,11 @@ const ChartLogic = {
 };
 
 // ===================================================
-// BREAKDOWN TABLE (ENHANCED)
+// BREAKDOWN TABLE (WITH STRIKE-LEVEL BREAKDOWN)
 // ===================================================
 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) {
@@ -1352,49 +1259,59 @@ const Breakdown = {
         const data = chart.lastData;
         const cfg = chart.config;
         const series = cfg.series;
+        const isAdvanced = cfg.chartMode === 'advanced';
 
-        // 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>
+        // Set title
+        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${isAdvanced ? 'ATM ± ' + (cfg.atmRange || 5) : (cfg.instrument || '')}`;
+        document.getElementById('bdMeta').innerText = `Timeframe: ${cfg.timeframe || '1min'} | Range: ${cfg.start} – ${cfg.end} | ${data.labels.length} bars`;
+
+        // Setup tabs
+        const tabsDiv = document.getElementById('bdTabs');
+        if (isAdvanced && data.StrikeBreakdown) {
+            tabsDiv.innerHTML = `
+                <button class="breakdown-tab ${this.currentTab === 'summary' ? 'active' : ''}" onclick="Breakdown.showTab('summary')">Summary</button>
+                <button class="breakdown-tab ${this.currentTab === 'strikes' ? 'active' : ''}" onclick="Breakdown.showTab('strikes')">Strike Breakdown</button>
             `;
+            tabsDiv.style.display = 'flex';
+        } else {
+            tabsDiv.style.display = 'none';
         }
 
-        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`;
+        // Store data for tab switching
+        this.chartData = { data, cfg, series, isAdvanced };
+        this.showTab(this.currentTab);
         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
+
+    showTab(tabName) {
+        this.currentTab = tabName;
+        const { data, cfg, series, isAdvanced } = this.chartData;
+
+        // Update tab buttons
+        document.querySelectorAll('.breakdown-tab').forEach(btn => {
+            btn.classList.toggle('active', btn.textContent.toLowerCase().includes(tabName));
+        });
+
+        const contentDiv = document.getElementById('bdContent');
+
+        if (tabName === 'summary') {
+            contentDiv.innerHTML = this.renderSummaryTable(data, series);
+        } else if (tabName === 'strikes' && isAdvanced) {
+            contentDiv.innerHTML = this.renderStrikeBreakdown(data, cfg);
+        }
+    },
+
+    renderSummaryTable(data, series) {
         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>';
-        // 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 = {
@@ -1406,21 +1323,13 @@ const Breakdown = {
             };
 
             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>`;
-            }
 
-            // 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;
@@ -1440,141 +1349,136 @@ const Breakdown = {
         });
         tbody += '</tbody>';
 
-        document.getElementById('bdTable').innerHTML = thead + tbody;
+        return `<table class="breakdown-table">${thead}${tbody}</table>`;
     },
-    
-    buildDetailView(data, cfg) {
+
+    renderStrikeBreakdown(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;
+        let html = `<div style="margin-bottom:12px; padding:10px; background:var(--bg-panel); border-radius:6px; border:1px solid var(--border);">
+            <div style="font-size:11px; color:var(--text-secondary);">
+                <strong style="color:var(--accent);">Selection Logic:</strong><br>
+                • <strong>For CALLS (CE):</strong> ${atmRange} ITM (below ATM) + ${atmRange} OTM (ATM + ${(atmRange-1)} above) = ${atmRange*2} strikes<br>
+                • <strong>For PUTS (PE):</strong> ${atmRange} ITM (above ATM) + ${atmRange} OTM (ATM + ${(atmRange-1)} below) = ${atmRange*2} strikes<br>
+                • <strong>Total instruments:</strong> Up to ${atmRange*4} (some strikes may overlap between CE/PE)
+            </div>
+        </div>`;
+
+        // Check if we have strike breakdown data
+        if (!data.StrikeBreakdown || !data.StrikeBreakdown.length) {
+            return html + '<div style="color:var(--text-secondary); text-align:center; padding:20px;">No strike breakdown data available. Using summary view.</div>';
+        }
+
+        // Render strike breakdown for each timestamp (limit to first 10 for performance)
+        const maxTimestamps = 10;
+        const labels = data.labels || [];
+
+        for (let i = 0; i < Math.min(labels.length, maxTimestamps); i++) {
+            const time = labels[i];
+            const breakdown = data.StrikeBreakdown[i];
+            const atmStrike = data.ATM_Strike ? data.ATM_Strike[i] : null;
+
+            if (!breakdown || !Array.isArray(breakdown)) continue;
+
+            // Separate CE and PE
+            const ceStrikes = breakdown.filter(s => s.type === 'CE').sort((a, b) => a.strike - b.strike);
+            const peStrikes = breakdown.filter(s => s.type === 'PE').sort((a, b) => a.strike - b.strike);
+
+            html += `<div class="strike-section">
+                <div class="strike-section-header">
+                    <span class="strike-time">${time}</span>
+                    <span class="strike-atm">ATM: ${atmStrike ? atmStrike.toFixed(0) : 'N/A'}</span>
+                </div>`;
+
+            // CE Table
+            if (ceStrikes.length > 0) {
+                html += `<div style="margin-bottom:8px;"><span class="type-ce">CALLS (CE)</span></div>
+                <table class="strike-subtable">
+                    <thead><tr>
+                        <th style="text-align:left;">Strike</th>
+                        <th>Rank</th>
+                        <th>Buy (b)</th>
+                        <th>Sell (s)</th>
+                        <th>Vol</th>
+                        <th>Price</th>
+                        <th>Offset</th>
+                    </tr></thead>
+                    <tbody>`;
+
+                ceStrikes.forEach(s => {
+                    const isAtm = atmStrike && Math.abs(s.strike - atmStrike) < 1;
+                    const rowClass = isAtm ? 'atm-highlight' : '';
+                    const offsetClass = s.offset < 0 ? 'val-pos' : (s.offset > 0 ? 'val-neg' : '');
+                    html += `<tr class="${rowClass}">
+                        <td style="text-align:left; font-weight:600;">${s.strike}</td>
+                        <td>${s.rank}</td>
+                        <td class="val-pos">${(s.b || 0).toLocaleString()}</td>
+                        <td class="val-neg">${(s.s || 0).toLocaleString()}</td>
+                        <td>${(s.v || 0).toLocaleString()}</td>
+                        <td>${(s.p || 0).toFixed(2)}</td>
+                        <td class="${offsetClass}">${s.offset > 0 ? '+' : ''}${s.offset}</td>
+                    </tr>`;
                 });
-                
-                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;
-                    
-                    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>`;
-                    }
-                    
-                    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 += `</tbody></table>`;
+            }
+
+            // PE Table
+            if (peStrikes.length > 0) {
+                html += `<div style="margin:8px 0;"><span class="type-pe">PUTS (PE)</span></div>
+                <table class="strike-subtable">
+                    <thead><tr>
+                        <th style="text-align:left;">Strike</th>
+                        <th>Rank</th>
+                        <th>Buy (b)</th>
+                        <th>Sell (s)</th>
+                        <th>Vol</th>
+                        <th>Price</th>
+                        <th>Offset</th>
+                    </tr></thead>
+                    <tbody>`;
+
+                peStrikes.forEach(s => {
+                    const isAtm = atmStrike && Math.abs(s.strike - atmStrike) < 1;
+                    const rowClass = isAtm ? 'atm-highlight' : '';
+                    const offsetClass = s.offset > 0 ? 'val-pos' : (s.offset < 0 ? 'val-neg' : '');
+                    html += `<tr class="${rowClass}">
+                        <td style="text-align:left; font-weight:600;">${s.strike}</td>
+                        <td>${s.rank}</td>
+                        <td class="val-pos">${(s.b || 0).toLocaleString()}</td>
+                        <td class="val-neg">${(s.s || 0).toLocaleString()}</td>
+                        <td>${(s.v || 0).toLocaleString()}</td>
+                        <td>${(s.p || 0).toFixed(2)}</td>
+                        <td class="${offsetClass}">${s.offset > 0 ? '+' : ''}${s.offset}</td>
+                    </tr>`;
                 });
-                
-                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 += `</tbody></table>`;
             }
-            
-            html += `</div>`; // minute-detail
-            html += `</div>`; // minute-row
-        });
-        
-        html += '</div>'; // minute-list
-        
-        document.getElementById('bdDetailContent').innerHTML = html;
-    },
-    
-    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');
+
+            // Aggregated totals for this timestamp
+            const totalCB = ceStrikes.reduce((sum, s) => sum + (s.b || 0), 0);
+            const totalCS = ceStrikes.reduce((sum, s) => sum + (s.s || 0), 0);
+            const totalPB = peStrikes.reduce((sum, s) => sum + (s.b || 0), 0);
+            const totalPS = peStrikes.reduce((sum, s) => sum + (s.s || 0), 0);
+
+            html += `<div style="margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-size:10px;">
+                <strong>Totals:</strong>
+                <span class="type-ce">CB: ${totalCB.toLocaleString()}</span> |
+                <span class="type-ce">CS: ${totalCS.toLocaleString()}</span> |
+                <span class="type-pe">PB: ${totalPB.toLocaleString()}</span> |
+                <span class="type-pe">PS: ${totalPS.toLocaleString()}</span>
+            </div>`;
+
+            html += `</div>`;
+        }
+
+        if (labels.length > maxTimestamps) {
+            html += `<div style="text-align:center; color:var(--text-secondary); font-size:11px; padding:10px;">
+                Showing first ${maxTimestamps} of ${labels.length} timestamps. Use Summary tab for complete view.
+            </div>`;
         }
+
+        return html;
     }
 };
 
@@ -1593,7 +1497,6 @@ 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);
     },
@@ -1634,210 +1537,175 @@ const Config = {
         }
     },
 
-    async open(id) {
-        this.tid = id; this.isGlobal = false;
-        document.getElementById('configModal').style.display = 'flex';
-        document.getElementById('cfgTitle').innerText = 'Configure Chart';
-        document.getElementById('cfgLoading').style.display = 'block';
-        document.getElementById('cfgContent').style.display = 'none';
-        document.getElementById('cfgGlobalOnly').style.display = 'none';
-        document.getElementById('cfgChartOnly').style.display = 'block';
+    extractSeriesFromDOM() {
+        return Array.from(document.querySelectorAll('.series-row')).map(row => ({
+            formula: row.querySelector('.s-form')?.value || '$P',
+            label: row.querySelector('.s-lbl')?.value || 'Line',
+            axis: row.querySelector('.s-axis')?.value || 'right',
+            color1: row.querySelector('.color-input')?.value || '#2f81f7',
+            cond: row.querySelector('.s-cond')?.value || 'none',
+            thresh: row.querySelector('.s-thresh')?.value || '0',
+            color2: '#da3633',
+            labelTrue: row.querySelector('.s-label-true')?.value || '',
+            labelFalse: row.querySelector('.s-label-false')?.value || ''
+        }));
+    },
 
-        this.updatePresetsDropdown();
+    renderSeries(list) {
+        document.getElementById('cfgSeries').innerHTML = list.map((s, i) => `
+            <div class="series-row">
+                <div class="series-row-top">
+                    <input class="s-form" value="${s.formula}" placeholder="Formula ($P, $CB, etc.)" style="flex:2;">
+                    <input class="s-lbl" value="${s.label}" placeholder="Label" style="flex:1;">
+                    <select class="s-axis" style="width:70px;">
+                        <option value="left" ${s.axis === 'left' ? 'selected' : ''}>Left</option>
+                        <option value="right" ${s.axis === 'right' ? 'selected' : ''}>Right</option>
+                    </select>
+                    <input type="color" class="color-input" value="${s.color1}">
+                </div>
+                <div class="series-row-cond" style="${s.cond && s.cond !== 'none' ? '' : 'display:none;'}">
+                    <span class="cond-label">Condition:</span>
+                    <select class="s-cond" onchange="Config.toggleCond(this)" style="width:50px;">
+                        <option value="none" ${s.cond === 'none' ? 'selected' : ''}>—</option>
+                        <option value=">" ${s.cond === '>' ? 'selected' : ''}>&gt;</option>
+                        <option value="<" ${s.cond === '<' ? 'selected' : ''}>&lt;</option>
+                    </select>
+                    <input class="s-thresh" value="${s.thresh || '0'}" placeholder="0" style="width:60px;">
+                    <input class="color-input" value="${s.color2 || '#da3633'}" title="Color if false">
+                    <input class="s-label-true" value="${s.labelTrue || ''}" placeholder="True label" style="flex:1;">
+                    <input class="s-label-false" value="${s.labelFalse || ''}" placeholder="False label" style="flex:1;">
+                </div>
+            </div>
+        `).join('');
+    },
 
-        CustomDD.clear('cfgRoot');
-        const res = await fetch(`/api/roots?date=${App.state.date}`);
-        const roots = await res.json();
-        CustomDD.set('cfgRoot', roots);
+    toggleCond(sel) {
+        const row = sel.closest('.series-row');
+        const condDiv = row.querySelector('.series-row-cond');
+        condDiv.style.display = sel.value === 'none' ? 'none' : 'flex';
+    },
 
-        const cfg = App.state.charts[id].config;
-        document.getElementById('cfgTF').value    = cfg.timeframe || '1min';
-        document.getElementById('cfgStart').value = cfg.start    || '09:15';
-        document.getElementById('cfgEnd').value   = cfg.end      || '15:30';
-        document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
+    addSeriesRow() {
+        const list = this.extractSeriesFromDOM();
+        list.push({ formula: '$P', label: 'New Line', axis: 'right', color1: '#2f81f7', cond: 'none' });
+        this.renderSeries(list);
+    },
 
-        this.currentMode = cfg.chartMode || 'normal';
-        const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
-        btns[0].classList.toggle('active', this.currentMode === 'normal');
-        btns[1].classList.toggle('active', this.currentMode === 'advanced');
-        document.getElementById('cfgAdvancedFields').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
-        document.getElementById('lblInst').innerText = this.currentMode === 'normal' ? 'Instrument' : 'Reference Spot/Fut (ATM Ref Price)';
-        document.getElementById('advInstHint').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
+    open(id) {
+        this.tid = id;
+        this.isGlobal = false;
+        const chart = App.state.charts[id];
+        const cfg = chart?.config || {};
 
-        if (cfg.series && cfg.series.length > 0) this.renderSeries(cfg.series);
-        else this.loadPreset(this.currentMode === 'advanced' ? 'Price & Flows (Advanced)' : 'Aggregated Flow (Options)');
+        document.getElementById('cfgTitle').innerText = 'Configure Chart';
+        document.getElementById('cfgGlobalOnly').style.display = 'none';
+        document.getElementById('cfgChartOnly').style.display = 'block';
 
-        document.getElementById('cfgRoot').value = cfg.root    || '';
-        document.getElementById('cfgExp').value  = cfg.expiry  || '';
+        this.setMode(cfg.chartMode || 'normal');
+        document.getElementById('cfgRoot').value = cfg.root || '';
+        document.getElementById('cfgExp').value = cfg.expiry || '';
         document.getElementById('cfgInst').value = cfg.instrument || '';
+        document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
+        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.root) await this.onRootChange(cfg.expiry, cfg.instrument);
+        CustomDD.clear('cfgRoot'); CustomDD.clear('cfgExp'); CustomDD.clear('cfgInst');
 
-        document.getElementById('cfgLoading').style.display = 'none';
-        document.getElementById('cfgContent').style.display = 'block';
+        if (cfg.root) {
+            this.onRootChange(true);
+            if (cfg.expiry) this.onExpChange();
+        }
+
+        this.renderSeries(cfg.series || App.presets['Basic Flow (Fut/Eq)']);
+        this.updatePresetsDropdown();
+        if (cfg.series) this.loadPreset();
+
+        document.getElementById('configModal').style.display = 'flex';
     },
 
     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('cfgTitle').innerText = 'Settings';
         document.getElementById('cfgGlobalOnly').style.display = 'block';
         document.getElementById('cfgChartOnly').style.display = 'none';
         document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
-        this.updatePresetsDropdown();
+        document.getElementById('configModal').style.display = 'flex';
     },
 
-    close() { document.getElementById('configModal').style.display = 'none'; },
+    close() {
+        document.getElementById('configModal').style.display = 'none';
+    },
 
-    async onRootChange(preExp, preInst) {
-        const root = document.getElementById('cfgRoot').value.toUpperCase();
-        CustomDD.clear('cfgExp'); CustomDD.clear('cfgInst');
-        if (!preExp) document.getElementById('cfgExp').value = '';
-        if (!preInst) document.getElementById('cfgInst').value = '';
+    async onRootChange(skipExpiryClear = false) {
+        const root = document.getElementById('cfgRoot').value;
         if (!root) return;
-
-        const res = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`);
-        const exps = await res.json();
-        CustomDD.set('cfgExp', exps);
-
-        if (preExp && exps.includes(preExp)) {
-            document.getElementById('cfgExp').value = preExp;
-            await this.onExpChange(preInst);
-        } else if (exps.length > 0) {
-            const auto = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`).then(r => r.json());
-            if (auto.current) {
-                document.getElementById('cfgExp').value = auto.current.expiry;
-                await this.onExpChange(auto.current.instrument);
+        try {
+            const res = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`);
+            const d = await res.json();
+            CustomDD.set('cfgExp', d.expiries || []);
+            if (d.current?.expiry) {
+                document.getElementById('cfgExp').value = d.current.expiry;
+                this.onExpChange();
             }
-        }
+        } catch(e) {}
     },
 
-    async onExpChange(preInst) {
-        const root = document.getElementById('cfgRoot').value.toUpperCase();
-        const exp  = document.getElementById('cfgExp').value.toUpperCase();
-        CustomDD.clear('cfgInst');
+    async onExpChange() {
+        const root = document.getElementById('cfgRoot').value;
+        const exp = document.getElementById('cfgExp').value;
         if (!root || !exp) return;
-
-        const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`);
-        const data = await res.json();
-        if (data.spot_fut.length > 0) CustomDD.set('cfgInst', data.spot_fut, 'Futures & Equity');
-        if (data.options.length > 0) CustomDD.set('cfgInst', data.options, 'Options');
-        if (preInst) document.getElementById('cfgInst').value = preInst;
-    },
-
-    toggleCond(sel) {
-        const condGroup = sel.closest('.series-row').querySelector('.series-row-cond');
-        if (condGroup) condGroup.style.display = sel.value === 'none' ? 'none' : 'flex';
-    },
-
-    renderSeries(list) {
-        const c = document.getElementById('cfgSeries');
-        c.innerHTML = '';
-        list.forEach(s => this._appendSeriesRow(c, s));
-    },
-
-    _appendSeriesRow(container, s = {}) {
-        const r = document.createElement('div');
-        r.className = 'series-row';
-        const showCond = s.cond && s.cond !== 'none';
-        r.innerHTML = `
-            <div class="series-row-top">
-                <input type="text" value="${s.formula || '$P'}" class="s-form" placeholder="Formula (e.g. $CB + $PS)" style="flex:1;">
-                <input type="text" value="${s.label || 'Line'}" class="s-lbl" placeholder="Label" style="width:90px;">
-                <select class="s-axis" style="width:60px;">
-                    <option value="left"  ${s.axis === 'left'  ? 'selected' : ''}>Left</option>
-                    <option value="right" ${s.axis === 'right' ? 'selected' : ''}>Right</option>
-                </select>
-                <button class="tool-btn" style="color:var(--danger); width:28px; background:rgba(218,54,51,0.1);" onclick="this.closest('.series-row').remove()">✕</button>
-            </div>
-            <div class="series-row-bottom">
-                <input type="color" value="${s.color1 || '#2f81f7'}" class="color-input s-color1" title="Line Color">
-                <select class="s-cond" style="width:76px;" onchange="Config.toggleCond(this)">
-                    <option value="none" ${!s.cond || s.cond === 'none' ? 'selected' : ''}>Solid</option>
-                    <option value=">"    ${s.cond === '>' ? 'selected' : ''}>If &gt;</option>
-                    <option value="<"    ${s.cond === '<' ? 'selected' : ''}>If &lt;</option>
-                </select>
-            </div>
-            <div class="series-row-cond" style="display:${showCond ? 'flex' : 'none'};">
-                <span class="cond-label">Threshold:</span>
-                <input type="number" class="s-thresh" value="${s.thresh || 0}" style="width:65px;">
-                <span class="cond-label">True →</span>
-                <input type="color" value="${s.color1 || '#238636'}" class="color-input s-color1-cond" title="Color when True">
-                <input type="text" class="s-label-true" value="${s.labelTrue || ''}" placeholder="e.g. BULLISH" style="width:80px;">
-                <span class="cond-label">False →</span>
-                <input type="color" value="${s.color2 || '#da3633'}" class="color-input s-color2" title="Color when False">
-                <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; });
-        container.appendChild(r);
-    },
-
-    addSeriesRow() {
-        this._appendSeriesRow(document.getElementById('cfgSeries'));
-    },
-
-    extractSeriesFromDOM() {
-        return Array.from(document.querySelectorAll('#cfgSeries .series-row')).map(r => {
-            const cond = r.querySelector('.s-cond')?.value || 'none';
-            return {
-                formula:    r.querySelector('.s-form')?.value || '$P',
-                label:      r.querySelector('.s-lbl')?.value  || 'Line',
-                axis:       r.querySelector('.s-axis')?.value || 'left',
-                color1:     r.querySelector('.s-color1-cond')?.value || r.querySelector('.s-color1')?.value || '#2f81f7',
-                cond,
-                thresh:     r.querySelector('.s-thresh')?.value   || '0',
-                color2:     r.querySelector('.s-color2')?.value    || '#da3633',
-                labelTrue:  r.querySelector('.s-label-true')?.value  || '',
-                labelFalse: r.querySelector('.s-label-false')?.value || ''
-            };
-        });
+        try {
+            const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`);
+            const d = await res.json();
+            CustomDD.set('cfgInst', d.spot_fut || [], 'Spot/Fut');
+            CustomDD.set('cfgInst', d.options || [], 'Options');
+            const inst = document.getElementById('cfgInst');
+            if (!inst.value && d.spot_fut?.length) inst.value = d.spot_fut[0];
+        } catch(e) {}
     },
 
     saveChartConfig() {
         if (this.isGlobal) {
             App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15;
             App.save();
-            this.close();
-            return;
+        } else {
+            const chart = App.state.charts[this.tid];
+            if (!chart) return;
+            chart.config = {
+                root: document.getElementById('cfgRoot').value,
+                expiry: document.getElementById('cfgExp').value,
+                instrument: document.getElementById('cfgInst').value,
+                chartMode: this.currentMode,
+                atmRange: parseInt(document.getElementById('cfgAtmRange').value) || 5,
+                timeframe: document.getElementById('cfgTF').value,
+                start: document.getElementById('cfgStart').value,
+                end: document.getElementById('cfgEnd').value,
+                series: this.extractSeriesFromDOM()
+            };
+            App.save();
+            App.renderGrid();
         }
-
-        const root = document.getElementById('cfgRoot').value.toUpperCase();
-        const exp  = document.getElementById('cfgExp').value.toUpperCase();
-        const inst = document.getElementById('cfgInst').value.toUpperCase();
-
-        if (!root || !exp) return alert('Please select a Symbol and Expiry.');
-
-        const series = this.extractSeriesFromDOM();
-        if (!series.length) return alert('Add at least one plot line.');
-
-        App.state.charts[this.tid].config = {
-            chartMode:  this.currentMode,
-            atmRange:   parseInt(document.getElementById('cfgAtmRange').value) || 5,
-            root, expiry: exp, instrument: inst,
-            timeframe:  document.getElementById('cfgTF').value,
-            start:      document.getElementById('cfgStart').value,
-            end:        document.getElementById('cfgEnd').value,
-            series
-        };
-
-        App.save();
-        App.renderGrid();
-        ChartLogic.plot(this.tid);
         this.close();
     }
 };
 
-window.onload = () => App.init();
+// ===================================================
+// INIT
+// ===================================================
+window.addEventListener('DOMContentLoaded', () => App.init());
 </script>
 </body>
 </html>
 """
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    print("⚠️ Checking for existing processes on Port 8000...")
+    import os
+    os.system("fuser -k 8000/tcp 2>/dev/null")
+    import time
+    time.sleep(1)
+    
+    config = uvicorn.Config(app, host="0.0.0.0", port=8000)
+    server = uvicorn.Server(config)
+    asyncio.run(server.serve())