InstrumentChartV2_reference

Sleeping

App Files Files Community

topsecrettraders commited on Jan 27

Commit

d0548f0

verified ·

1 Parent(s): ce0cce3

Update app.py

Browse files

Files changed (1) hide show

app.py +625 -607

app.py CHANGED Viewed

@@ -48,9 +48,8 @@ def home():
 @app.get("/api/dates")
 def get_dates():
-    """
-    Fetch distinct dates.
-    """
     data = sb_get("/history_buckets_upstox", {"select": "minute", "order": "minute.desc", "limit": "50000"})
     dates = set()
     for row in data:
@@ -88,9 +87,9 @@ def get_auto_config(date: str, root: str):
             expiry_map[exp] = list(existing.union(new_keys))
     all_expiries = sorted(expiry_map.keys())
     valid_expiries = [e for e in all_expiries if e >= date]
-    if not valid_expiries:
-        valid_expiries = all_expiries
     response = {"expiries": all_expiries, "current": None, "next": None}
@@ -113,7 +112,6 @@ def get_auto_config(date: str, root: str):
 @app.get("/api/expiries")
 def get_expiries(date: str, root: str):
-    """Fetch distinct expiries."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
     data = sb_get(f"/history_buckets_upstox?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}")
     exps = set(row['expiry'] for row in data if row.get('expiry'))
@@ -121,7 +119,6 @@ def get_expiries(date: str, root: str):
 @app.get("/api/instruments")
 def get_instruments(date: str, root: str, expiry: str):
-    """Fetch instruments."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
     data = sb_get(f"/history_buckets_upstox?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=5")
     instruments = set()
@@ -160,7 +157,7 @@ def fetch_series(
             inst_data = row['data'].get(instrument)
             if not inst_data: continue
-            # Extract buckets (0s to 50s)
             p_arr = inst_data.get('p', []) or []
             b_arr = inst_data.get('b', []) or []
             s_arr = inst_data.get('s', []) or []
@@ -181,7 +178,7 @@ def fetch_series(
             continue
     if not records:
-         return JSONResponse({"error": "No data found", "labels": [], "P": []})
     df = pd.DataFrame(records)
     df.set_index('ts', inplace=True)
@@ -207,7 +204,7 @@ def fetch_series(
 # ==========================================
-# 5. FRONTEND TEMPLATE (NEW UI)
 # ==========================================
 HTML_TEMPLATE = """
@@ -215,212 +212,344 @@ HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>DepthChain Live Pro</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        /* --- THEME --- */
         :root {
-            --bg-body: #0d1117;
-            --bg-header: #161b22;
-            --bg-card: #010409;
-            --bg-panel: #21262d;
-            --border: #30363d;
-            --text-primary: #e6edf3;
-            --text-secondary: #8b949e;
-            --accent: #2f81f7;
-            --success: #238636;
-            --danger: #da3633;
-            --warning: #d29922;
         }
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        body {
-            background: var(--bg-body); color: var(--text-primary);
-            font-family: 'Inter', sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden;
         }
-        /* --- TOP BAR --- */
-        .top-bar {
-            height: 50px; background: var(--bg-header); border-bottom: 1px solid var(--border);
-            display: flex; align-items: center; justify-content: space-between; padding: 0 15px; flex-shrink: 0;
         }
-        .logo { font-weight: 800; font-size: 16px; margin-right: 20px; color: var(--text-primary); }
-        .logo span { color: var(--accent); }
-        .controls { display: flex; gap: 10px; align-items: center; }
-        select, button, input {
-            background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-primary);
-            padding: 5px 10px; border-radius: 4px; font-size: 12px; font-family: inherit; outline: none; cursor: pointer;
         }
-        select:focus, input:focus { border-color: var(--accent); }
-        button:hover { background: var(--border); }
-        .btn-accent { background: var(--accent); color: white; border: none; font-weight: 600; }
-        .btn-accent:hover { background: #58a6ff; }
-        .btn-danger { color: var(--danger); border-color: var(--border); }
-        .btn-danger:hover { background: rgba(218, 54, 51, 0.1); border-color: var(--danger); }
-        .layout-popover { position: relative; }
-        .layout-menu {
-            position: absolute; top: 35px; right: 0; background: var(--bg-header);
-            border: 1px solid var(--border); border-radius: 6px; padding: 10px;
-            display: none; grid-template-columns: 1fr; gap: 5px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-            width: 150px;
         }
-        .layout-menu.active { display: grid; }
-        .layout-option {
-            padding: 8px; text-align: center; border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
         }
-        .layout-option:hover { background: var(--bg-panel); border-color: var(--text-secondary); }
-        /* --- MAIN GRID --- */
-        .main-content { flex: 1; overflow: hidden; display: flex; padding: 5px; gap: 5px; }
-        .column {
-            flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
-            padding: 5px; min-width: 300px;
         }
-        .column-add-btn {
-            padding: 10px; border: 1px dashed var(--border); color: var(--text-secondary);
-            text-align: center; border-radius: 6px; cursor: pointer; margin-top: auto; font-size: 12px;
         }
-        .column-add-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
         /* --- CHART CARD --- */
         .chart-card {
-            background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
-            display: flex; flex-direction: column; height: 400px; min-height: 400px; position: relative;
         }
-        .card-header {
-            height: 35px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;
-            padding: 0 10px; background: var(--bg-header); font-size: 12px;
         }
-        .card-title { font-weight: 600; display: flex; gap: 8px; align-items: center; }
-        .card-meta { color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
-        .card-actions { display: flex; gap: 5px; }
-        .icon-btn { padding: 2px 6px; font-size: 14px; border: none; background: transparent; color: var(--text-secondary); }
-        .icon-btn:hover { color: var(--text-primary); background: var(--border); }
-        .card-body { flex: 1; position: relative; padding: 5px; overflow: hidden; }
         .empty-state {
             display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
-            color: var(--text-secondary); font-size: 13px; gap: 10px;
         }
-        /* --- STATUS DOTS --- */
-        .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-secondary); }
-        .status-dot.live { background: var(--success); box-shadow: 0 0 5px var(--success); animation: pulse 2s infinite; }
-        .status-dot.retry { background: var(--warning); }
-        .status-dot.hist { background: var(--accent); }
-        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
         /* --- MODAL --- */
         .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.7); backdrop-filter: blur(2px); z-index: 500;
-            display: none; justify-content: center; align-items: center;
         }
-        .modal {
-            background: var(--bg-header); border: 1px solid var(--border); border-radius: 8px;
-            width: 500px; max-width: 95%; max-height: 90vh; display: flex; flex-direction: column;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
         }
-        .modal-head { padding: 15px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; justify-content: space-between; }
-        .modal-body { padding: 20px; overflow-y: auto; }
-        .modal-foot { padding: 15px; border-top: 1px solid var(--border); text-align: right; }
         .form-group { margin-bottom: 15px; }
-        .form-group label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; }
         .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
         /* Series List */
-        .series-row { display: grid; grid-template-columns: 30px 1fr 1fr 60px 20px; gap: 5px; margin-bottom: 5px; align-items: center; }
-        .series-row input[type="color"] { padding: 0; height: 30px; border: none; background: none; }
         /* Toast */
         .toast {
-            position: fixed; bottom: 20px; right: 20px; background: var(--accent); color: white;
-            padding: 10px 20px; border-radius: 4px; font-weight: 600; font-size: 13px;
-            transform: translateY(100px); transition: transform 0.3s; z-index: 1000;
         }
-        .toast.show { transform: translateY(0); }
     </style>
 </head>
 <body>
 <!-- HEADER -->
-<div class="top-bar">
-    <div class="logo">DepthChain <span>PRO</span></div>
     <div class="controls">
-        <!-- Date Selection -->
-        <select id="globalDate" onchange="GlobalApp.onDateChange()"></select>
-        <!-- Mode Selection -->
-        <select id="globalMode" onchange="GlobalApp.onModeChange()">
-            <option value="HIST">Historical</option>
-            <option value="LIVE">Live (Auto Refresh)</option>
-        </select>
-        <div style="width: 1px; height: 20px; background: var(--border); margin: 0 10px;"></div>
         <!-- Layout Selector -->
-        <div class="layout-popover">
-            <button onclick="document.getElementById('layoutMenu').classList.toggle('active')">
-                Layout / Columns ▼
-            </button>
-            <div class="layout-menu" id="layoutMenu">
-                <div class="layout-option" onclick="GlobalApp.setLayout(1)">1 Column</div>
-                <div class="layout-option" onclick="GlobalApp.setLayout(2)">2 Columns</div>
-                <div class="layout-option" onclick="GlobalApp.setLayout(3)">3 Columns</div>
-            </div>
-        </div>
-        <button onclick="ConfigModal.openDefaults()">Global Defaults</button>
-        <button class="btn-danger" onclick="GlobalApp.resetApp()">Reset App</button>
     </div>
-</div>
-<!-- GRID CONTAINER -->
-<div class="main-content" id="gridContainer">
-    <!-- Columns injected via JS -->
 </div>
-<!-- MODALS -->
-<div class="modal-overlay" id="configModalOverlay">
-    <div class="modal">
-        <div class="modal-head">
-            <span id="cfgModalTitle">Configure Chart</span>
-            <button class="icon-btn" onclick="ConfigModal.close()">✕</button>
         </div>
-        <div class="modal-body">
-            <!-- Loading State -->
-            <div id="cfgLoader" style="display:none; text-align:center; padding:20px;">Loading...</div>
-            <!-- Config Form -->
             <div id="cfgForm">
                 <div class="form-row">
                     <div class="form-group">
-                        <label>Symbol (Root)</label>
-                        <select id="cfgRoot" onchange="ConfigModal.onRootChange()"></select>
                     </div>
                     <div class="form-group">
-                        <label>Expiry</label>
-                        <select id="cfgExp" onchange="ConfigModal.onExpChange()"></select>
                     </div>
                 </div>
                 <div class="form-group">
-                    <label>Instrument</label>
-                    <select id="cfgInst"></select>
                 </div>
                 <div class="form-row">
                     <div class="form-group">
-                        <label>Timeframe</label>
-                        <select id="cfgTF">
                             <option value="1min">1 Minute</option>
                             <option value="3min">3 Minutes</option>
                             <option value="5min">5 Minutes</option>
@@ -430,76 +559,101 @@ HTML_TEMPLATE = """
                         </select>
                     </div>
                     <div class="form-group">
-                        <label>Time Range</label>
                         <div style="display:flex; gap:5px;">
-                            <input type="time" id="cfgStart" value="09:15">
-                            <input type="time" id="cfgEnd" value="15:30">
                         </div>
                     </div>
                 </div>
-                <hr style="border:0; border-top:1px solid var(--border); margin:15px 0;">
-                <div class="form-group">
-                    <label>Plot Lines (Variables: $P, $B, $S, $V, $OI)</label>
-                    <div id="cfgSeriesList"></div>
-                    <button style="width:100%; margin-top:5px;" onclick="ConfigModal.addSeriesRow()">+ Add Line</button>
                 </div>
             </div>
         </div>
-        <div class="modal-foot">
-            <button onclick="ConfigModal.close()">Cancel</button>
-            <button class="btn-accent" onclick="ConfigModal.save()">Save Configuration</button>
         </div>
     </div>
 </div>
-<!-- RESTORE SESSION POPUP -->
-<div class="modal-overlay" id="restoreModal" style="display:none;">
-    <div class="modal" style="width: 350px;">
-        <div class="modal-head">Restore Session?</div>
-        <div class="modal-body">
-            We found a saved layout from your previous visit.
-        </div>
-        <div class="modal-foot">
-            <button class="btn-danger" onclick="GlobalApp.initNew()">Start Fresh</button>
-            <button class="btn-accent" onclick="GlobalApp.loadFromStorage()">Restore</button>
-        </div>
-    </div>
 </div>
-<div id="toast" class="toast">Settings Saved</div>
 <script>
 /**
- * --- GLOBAL STATE MANAGER ---
  */
-const GlobalApp = {
     state: {
-        date: '',
-        mode: 'HIST', // HIST or LIVE
-        columns: 1,
-        layout: [[], [], []], // 3 potential columns of chart IDs
-        charts: {} // ID -> { config: {}, instance: ChartJS, interval: null }
     },
     defaults: [
-        { formula: '$P', color: '#58a6ff', label: 'Price', axis: 'left' },
-        { formula: '$B', color: '#238636', label: 'Buy Qty', axis: 'right' },
-        { formula: '$S', color: '#da3633', label: 'Sell Qty', axis: 'right' }
     ],
     async init() {
-        // Load dates first
         await this.loadDates();
-        // Check local storage
-        if (localStorage.getItem('dc_state')) {
-            document.getElementById('restoreModal').style.display = 'flex';
         } else {
-            this.initNew();
         }
     },
     async loadDates() {
@@ -508,459 +662,344 @@ const GlobalApp = {
             const dates = await res.json();
             const sel = document.getElementById('globalDate');
             sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
-            if(dates.length) this.state.date = dates[0];
-        } catch(e) { console.error("Dates error", e); }
-    },
-    initNew() {
-        document.getElementById('restoreModal').style.display = 'none';
-        this.setLayout(2); // Default 2 cols
-        this.addChart(0); // 1 chart in col 1
-        this.addChart(1); // 1 chart in col 2
     },
-    loadFromStorage() {
-        try {
-            const raw = localStorage.getItem('dc_state');
-            const saved = JSON.parse(raw);
-            document.getElementById('restoreModal').style.display = 'none';
-            document.getElementById('globalDate').value = saved.date;
-            document.getElementById('globalMode').value = saved.mode;
-            this.state.date = saved.date;
-            this.state.mode = saved.mode;
-            // Rebuild Layout
-            this.setLayout(saved.columns);
-            // Rebuild Charts
-            saved.layout.forEach((colCharts, colIdx) => {
-                colCharts.forEach(chartData => {
-                    this.addChart(colIdx, chartData.id, chartData.config);
-                });
-            });
-        } catch(e) {
-            console.error("Load failed", e);
-            this.initNew();
-        }
     },
-    saveToStorage() {
-        const minimalLayout = [[], [], []];
-        this.state.layout.forEach((col, idx) => {
-            minimalLayout[idx] = col.map(id => ({
-                id: id,
-                config: this.state.charts[id].config
-            }));
-        });
-        const dump = {
-            date: this.state.date,
-            mode: this.state.mode,
-            columns: this.state.columns,
-            layout: minimalLayout
-        };
-        localStorage.setItem('dc_state', JSON.stringify(dump));
-        this.showToast("Layout Saved");
-    },
-    resetApp() {
-        if(!confirm("Clear all settings and reset?")) return;
-        localStorage.removeItem('dc_state');
-        location.reload();
     },
-    showToast(msg) {
-        const t = document.getElementById('toast');
-        t.textContent = msg;
-        t.classList.add('show');
-        setTimeout(() => t.classList.remove('show'), 2000);
-    },
-    // --- LAYOUT LOGIC ---
-    setLayout(cols) {
-        this.state.columns = cols;
-        document.getElementById('layoutMenu').classList.remove('active');
-        this.renderGrid();
     },
-    renderGrid() {
-        const container = document.getElementById('gridContainer');
-        container.innerHTML = '';
-        for (let i = 0; i < this.state.columns; i++) {
-            const colDiv = document.createElement('div');
-            colDiv.className = 'column';
-            colDiv.id = `col-${i}`;
-            // Append existing charts for this column from state
-            const chartIds = this.state.layout[i] || [];
-            chartIds.forEach(id => {
-                const el = this.createChartElement(id);
-                colDiv.appendChild(el);
-                // Re-initialize chart if needed (canvas context is lost on re-append)
-                setTimeout(() => ChartLogic.render(id), 0);
-            });
-            // Add button
-            const addBtn = document.createElement('div');
-            addBtn.className = 'column-add-btn';
-            addBtn.innerHTML = '+ Add Chart';
-            addBtn.onclick = () => this.addChart(i);
-            colDiv.appendChild(addBtn);
-            container.appendChild(colDiv);
-        }
     },
-    addChart(colIdx, forceId = null, forceConfig = null) {
-        const id = forceId || 'c_' + Date.now() + Math.random().toString(36).substr(2,5);
-        // Init State
-        this.state.charts[id] = {
-            col: colIdx,
-            config: forceConfig || {}, // Empty config means "Not Configured"
-            instance: null,
-            interval: null,
-            lastFetch: null
-        };
-        // Add to Layout Arrays
-        if (!this.state.layout[colIdx]) this.state.layout[colIdx] = [];
-        // prevent duplicate push if restoring
-        if (!this.state.layout[colIdx].includes(id)) {
-            this.state.layout[colIdx].push(id);
-        }
-        // Render UI
-        const colDiv = document.getElementById(`col-${colIdx}`);
-        const btn = colDiv.querySelector('.column-add-btn');
-        const el = this.createChartElement(id);
-        colDiv.insertBefore(el, btn);
-        // If config exists, try to plot
-        if (forceConfig && forceConfig.root) {
-            ChartLogic.plot(id);
         }
-        this.saveToStorage();
-    },
-    removeChart(id) {
-        if(!confirm("Remove chart?")) return;
-        // Cleanup Intervals
-        ChartLogic.stopLive(id);
-        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
-        // Remove from Layout
-        const colIdx = this.state.charts[id].col;
-        this.state.layout[colIdx] = this.state.layout[colIdx].filter(x => x !== id);
-        delete this.state.charts[id];
-        // Remove DOM
-        document.getElementById(`card-${id}`).remove();
-        this.saveToStorage();
     },
-    createChartElement(id) {
         const div = document.createElement('div');
         div.className = 'chart-card';
-        div.id = `card-${id}`;
         div.innerHTML = `
-            <div class="card-header">
-                <div class="card-title" id="title-${id}">
-                    <span class="status-dot"></span>
-                    <span>New Chart</span>
                 </div>
-                <div class="card-actions">
-                    <button class="icon-btn" onclick="ConfigModal.open('${id}')">⚙</button>
-                    <button class="icon-btn" onclick="GlobalApp.removeChart('${id}')">✕</button>
                 </div>
             </div>
-            <div class="card-body" id="body-${id}">
                 <div class="empty-state">
-                    <p>Not Configured</p>
-                    <button onclick="ConfigModal.open('${id}')">Configure</button>
                 </div>
             </div>
         `;
         return div;
     },
-    // --- GLOBAL CONTROLS ---
-    onDateChange() {
-        this.state.date = document.getElementById('globalDate').value;
-        this.saveToStorage();
-        // Reload all charts
-        Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id));
     },
-    onModeChange() {
-        this.state.mode = document.getElementById('globalMode').value;
-        this.saveToStorage();
-        // Toggle intervals
-        Object.keys(this.state.charts).forEach(id => {
-            if(this.state.mode === 'LIVE') ChartLogic.startLive(id);
-            else ChartLogic.stopLive(id);
-        });
     }
 };
 /**
- * --- CHART LOGIC & DATA ---
  */
-const ChartLogic = {
-    async plot(id, isUpdate=false) {
-        const chartData = GlobalApp.state.charts[id];
-        const cfg = chartData.config;
-        if (!cfg || !cfg.root) return; // Not configured
         // UI Update
-        const titleEl = document.querySelector(`#card-${id} .card-title`);
-        const dotClass = GlobalApp.state.mode === 'LIVE' ? 'live' : 'hist';
-        titleEl.innerHTML = `
-            <span class="status-dot ${dotClass}"></span>
-            ${cfg.root} <span style="color:var(--accent);">${cfg.expiry}</span>
-            <span class="card-meta">${cfg.instrument} | ${cfg.timeframe}</span>
-        `;
-        // Ensure Canvas
-        const body = document.getElementById(`body-${id}`);
-        if (!body.querySelector('canvas')) {
-            body.innerHTML = `<canvas id="canvas-${id}"></canvas>`;
         }
-        // Prepare Status Indicator for Live
-        if(isUpdate) titleEl.querySelector('.status-dot').classList.add('retry');
         try {
             const res = await fetch('/api/fetch_series', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
-                    date: GlobalApp.state.date,
-                    root: cfg.root,
-                    expiry: cfg.expiry,
-                    instrument: cfg.instrument,
-                    timeframe: cfg.timeframe,
-                    start_time: cfg.start,
-                    end_time: cfg.end
                 })
             });
             const data = await res.json();
-            // Handle "Live but no data yet" or "Empty"
-            if(data.error || !data.labels || data.labels.length === 0) {
-                if(GlobalApp.state.mode === 'LIVE') {
-                     // Keep old data, just indicate retry
-                     titleEl.querySelector('.status-dot').className = 'status-dot retry';
-                     return;
-                } else {
-                    // Historical empty
-                    if(chartData.instance) chartData.instance.destroy();
-                    body.innerHTML = '<div class="empty-state">No Data Found</div>';
-                    return;
-                }
             }
-            // Success: Update Dot
-            titleEl.querySelector('.status-dot').className = `status-dot ${dotClass}`;
-            // Compute Datasets
-            const datasets = cfg.series.map(s => {
                 const computed = data.labels.map((_, i) => {
-                    const P = data.P[i] || 0, V = data.V[i] || 0, OI = data.OI[i] || 0;
-                    const B = data.B[i] || 0, S = data.S[i] || 0;
-                    let f = s.formula
-                        .replace(/\$OI/g, OI).replace(/\$P/g, P).replace(/\$V/g, V)
-                        .replace(/\$B/g, B).replace(/\$S/g, S);
-                    try { return new Function('return ' + f)(); } catch { return null; }
                 });
                 return {
-                    label: s.label,
-                    data: computed,
-                    borderColor: s.color,
-                    backgroundColor: s.color,
-                    borderWidth: 1.5,
-                    pointRadius: 0,
-                    pointHoverRadius: 4,
-                    yAxisID: s.axis === 'left' ? 'y' : 'y1',
-                    tension: 0.1
                 };
             });
-            this.renderCanvas(id, data.labels, datasets);
-        } catch (e) {
-            console.error("Plot Error", e);
-        }
     },
-    renderCanvas(id, labels, datasets) {
-        const ctx = document.getElementById(`canvas-${id}`);
-        if (!ctx) return;
-        const chartData = GlobalApp.state.charts[id];
-        // If chart exists, update data (prevent flicker)
-        if (chartData.instance) {
-            chartData.instance.data.labels = labels;
-            chartData.instance.data.datasets = datasets;
-            chartData.instance.update('none'); // 'none' mode for performance
         } else {
-            // Create New
             const hasRight = datasets.some(d => d.yAxisID === 'y1');
-            chartData.instance = new Chart(ctx.getContext('2d'), {
                 type: 'line',
                 data: { labels, datasets },
                 options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
                     animation: false,
                     interaction: { mode: 'index', intersect: false },
-                    plugins: {
-                        legend: { labels: { color: '#8b949e', font: {size:10} } },
-                        tooltip: { backgroundColor: '#161b22', titleColor:'#e6edf3', bodyColor:'#e6edf3', borderColor:'#30363d', borderWidth:1 }
                     },
                     scales: {
-                        x: { grid: { color: '#30363d', tickLength: 0 }, ticks: { color: '#8b949e', maxTicksLimit: 10 } },
-                        y: { type: 'linear', display: true, position: 'left', grid: { color: '#30363d' }, ticks: { color: '#8b949e' } },
-                        y1: { type: 'linear', display: hasRight, position: 'right', grid: { display: false }, ticks: { color: '#8b949e' } }
                     }
                 }
             });
         }
     },
-    // --- LIVE MODE ---
-    startLive(id) {
-        this.stopLive(id); // Safety clear
-        // Check if date is today (simple check)
-        const selected = GlobalApp.state.date;
-        const today = new Date().toISOString().split('T')[0];
-        // In real app, might compare accurately. Assuming user selects correct date or backend handles it.
-        // We just poll regardless if Mode is Live.
-        // Initial Plot
-        this.plot(id);
-        // Interval
-        GlobalApp.state.charts[id].interval = setInterval(() => {
-            this.plot(id, true);
-        }, 15000); // 15 seconds
-    },
-    stopLive(id) {
-        const c = GlobalApp.state.charts[id];
-        if(c && c.interval) {
-            clearInterval(c.interval);
-            c.interval = null;
         }
     },
-    // Re-render chart instance if DOM moved
-    render(id) {
-        const c = GlobalApp.state.charts[id];
-        if(c.config && c.config.root) {
-            if(c.instance) c.instance.destroy();
-            c.instance = null;
-            this.plot(id);
-            if(GlobalApp.state.mode === 'LIVE') this.startLive(id);
-        }
     }
 };
 /**
- * --- CONFIGURATION MODAL ---
  */
-const ConfigModal = {
     currentId: null,
-    isGlobal: false,
     async open(id) {
         this.currentId = id;
-        this.isGlobal = false;
-        document.getElementById('cfgModalTitle').textContent = "Configure Chart";
-        document.getElementById('configModalOverlay').style.display = 'flex';
-        document.getElementById('cfgForm').style.display = 'block';
-        document.getElementById('cfgLoader').style.display = 'none';
-        // Pre-fill
-        const c = GlobalApp.state.charts[id].config;
-        // Load Roots
-        await this.loadRoots(c.root);
-        document.getElementById('cfgTF').value = c.timeframe || '1min';
-        document.getElementById('cfgStart').value = c.start || '09:15';
-        document.getElementById('cfgEnd').value = c.end || '15:30';
         // Series
-        const series = c.series && c.series.length ? c.series : GlobalApp.defaults;
         this.renderSeries(series);
-        // If saved state exists, trigger cascades
-        if(c.root) {
-             document.getElementById('cfgRoot').value = c.root;
-             await this.onRootChange(c.expiry, c.instrument);
         }
     },
     openDefaults() {
-        this.isGlobal = true;
-        document.getElementById('cfgModalTitle').textContent = "Global Default Series";
-        document.getElementById('configModalOverlay').style.display = 'flex';
-        // Hide specific fields
-        document.getElementById('cfgForm').style.display = 'block';
-        // Actually, we just want series editing.
-        // Quick hack: hide form rows, show series only.
-        // Ideally separate modal, but re-using for brevity.
-        this.renderSeries(GlobalApp.defaults);
     },
-    close() {
-        document.getElementById('configModalOverlay').style.display = 'none';
-    },
-    async loadRoots(preSelect) {
-        const rSel = document.getElementById('cfgRoot');
-        rSel.innerHTML = '<option>Loading...</option>';
-        try {
-            const date = GlobalApp.state.date;
-            const res = await fetch(`/api/roots?date=${date}`);
-            const roots = await res.json();
-            rSel.innerHTML = `<option value="">-- Select --</option>` + roots.map(r => `<option>${r}</option>`).join('');
-            if(preSelect && roots.includes(preSelect)) rSel.value = preSelect;
-        } catch(e) { rSel.innerHTML = '<option>Error</option>'; }
     },
     async onRootChange(preExp, preInst) {
         const root = document.getElementById('cfgRoot').value;
-        const date = GlobalApp.state.date;
-        const eSel = document.getElementById('cfgExp');
-        eSel.innerHTML = '<option>Loading...</option>';
-        const res = await fetch(`/api/expiries?date=${date}&root=${root}`);
-        const exps = await res.json();
-        eSel.innerHTML = `<option value="">-- Select --</option>` + exps.map(e => `<option>${e}</option>`).join('');
-        if(preExp && exps.includes(preExp)) {
-            eSel.value = preExp;
-            await this.onExpChange(preInst);
         } else {
-             // Auto select current?
-             // Fetch auto config for smart defaults
-             const auto = await fetch(`/api/auto_config?date=${date}&root=${root}`).then(r=>r.json());
              if(auto.current) {
-                 eSel.value = auto.current.expiry;
-                 await this.onExpChange(auto.current.instrument);
              }
         }
     },
@@ -968,90 +1007,69 @@ const ConfigModal = {
     async onExpChange(preInst) {
         const root = document.getElementById('cfgRoot').value;
         const exp = document.getElementById('cfgExp').value;
-        const date = GlobalApp.state.date;
-        const iSel = document.getElementById('cfgInst');
-        iSel.innerHTML = '<option>Loading...</option>';
-        const res = await fetch(`/api/instruments?date=${date}&root=${root}&expiry=${exp}`);
-        const insts = await res.json();
-        iSel.innerHTML = `<option value="">-- Select --</option>` + insts.map(i => `<option>${i}</option>`).join('');
-        if(preInst && insts.includes(preInst)) iSel.value = preInst;
-        else if(insts.length > 0) iSel.value = insts[0]; // Select first default
     },
     renderSeries(list) {
-        const container = document.getElementById('cfgSeriesList');
-        container.innerHTML = '';
-        list.forEach(s => {
-            const div = document.createElement('div');
-            div.className = 'series-row';
-            div.innerHTML = `
-                <input type="color" value="${s.color}" class="s-color">
-                <input type="text" value="${s.formula}" class="s-formula" placeholder="$P">
-                <input type="text" value="${s.label}" class="s-label" placeholder="Label">
-                <select class="s-axis">
-                    <option value="left" ${s.axis==='left'?'selected':''}>L</option>
-                    <option value="right" ${s.axis==='right'?'selected':''}>R</option>
-                </select>
-                <button class="btn-danger" style="padding:0;" onclick="this.parentElement.remove()">✕</button>
-            `;
-            container.appendChild(div);
-        });
     },
-    addSeriesRow() {
-        const container = document.getElementById('cfgSeriesList');
-        const div = document.createElement('div');
-        div.className = 'series-row';
-        div.innerHTML = `
-            <input type="color" value="#ffffff" class="s-color">
-            <input type="text" value="$P" class="s-formula">
-            <input type="text" value="New" class="s-label">
-            <select class="s-axis"><option value="left">L</option><option value="right">R</option></select>
-            <button class="btn-danger" style="padding:0;" onclick="this.parentElement.remove()">✕</button>
         `;
-        container.appendChild(div);
     },
     save() {
-        // Collect Series
-        const rows = document.querySelectorAll('#cfgSeriesList .series-row');
-        const newSeries = Array.from(rows).map(r => ({
-            color: r.querySelector('.s-color').value,
-            formula: r.querySelector('.s-formula').value,
-            label: r.querySelector('.s-label').value,
-            axis: r.querySelector('.s-axis').value
         }));
-        if(this.isGlobal) {
-            GlobalApp.defaults = newSeries;
-            GlobalApp.showToast("Defaults Updated");
-        } else {
-            const root = document.getElementById('cfgRoot').value;
-            const exp = document.getElementById('cfgExp').value;
-            const inst = document.getElementById('cfgInst').value;
-            if(!root || !exp || !inst) { alert("Select Symbol details"); return; }
-            const config = {
-                root, expiry: exp, instrument: inst,
-                timeframe: document.getElementById('cfgTF').value,
-                start: document.getElementById('cfgStart').value,
-                end: document.getElementById('cfgEnd').value,
-                series: newSeries
-            };
-            GlobalApp.state.charts[this.currentId].config = config;
-            GlobalApp.saveToStorage();
-            ChartLogic.render(this.currentId); // Re-plot
-        }
         this.close();
     }
 };
-// Start App
-window.onload = () => GlobalApp.init();
 </script>
 </body>

 @app.get("/api/dates")
 def get_dates():
+    """Fetch distinct dates."""
+    # Fetch ample rows to ensure we cover multiple days
     data = sb_get("/history_buckets_upstox", {"select": "minute", "order": "minute.desc", "limit": "50000"})
     dates = set()
     for row in data:
             expiry_map[exp] = list(existing.union(new_keys))
     all_expiries = sorted(expiry_map.keys())
+    # Allow looking at past expiries if viewing history, but generally prefer forward
     valid_expiries = [e for e in all_expiries if e >= date]
+    if not valid_expiries: valid_expiries = all_expiries
     response = {"expiries": all_expiries, "current": None, "next": None}
 @app.get("/api/expiries")
 def get_expiries(date: str, root: str):
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
     data = sb_get(f"/history_buckets_upstox?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}")
     exps = set(row['expiry'] for row in data if row.get('expiry'))
 @app.get("/api/instruments")
 def get_instruments(date: str, root: str, expiry: str):
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
     data = sb_get(f"/history_buckets_upstox?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=5")
     instruments = set()
             inst_data = row['data'].get(instrument)
             if not inst_data: continue
+            # Extract buckets
             p_arr = inst_data.get('p', []) or []
             b_arr = inst_data.get('b', []) or []
             s_arr = inst_data.get('s', []) or []
             continue
     if not records:
+         return JSONResponse({"error": "No data", "labels": [], "P": []})
     df = pd.DataFrame(records)
     df.set_index('ts', inplace=True)
 # ==========================================
+# 5. FRONTEND TEMPLATE (High Fidelity UI)
 # ==========================================
 HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>DepthChain PRO</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Inter Font for Apple-like Aesthetic -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         :root {
+            /* --- COLOR PALETTE (Dark, Elegant) --- */
+            --bg-app: #000000;
+            --bg-panel: #161618; /* Card Background */
+            --bg-header: #0a0a0a; /* Header */
+            --bg-input: #252528;
+            --border: #2C2C2E;
+            --border-hover: #3A3A3C;
+            --text-main: #F5F5F7;
+            --text-dim: #86868B;
+            --text-accent: #0A84FF; /* iOS Blue */
+            --success: #30D158;
+            --danger: #FF453A;
+            --warning: #FFD60A;
+            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
         }
+        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
+        body {
+            background-color: var(--bg-app);
+            color: var(--text-main);
+            font-family: var(--font-ui);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            -webkit-font-smoothing: antialiased;
         }
+        /* --- HEADER --- */
+        header {
+            height: 52px;
+            background: rgba(10, 10, 10, 0.8);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 20px;
+            z-index: 100;
         }
+        .brand {
+            font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: var(--text-main);
+            display: flex; align-items: center; gap: 6px;
+        }
+        .brand span { color: var(--text-accent); }
+        .controls { display: flex; align-items: center; gap: 12px; }
+        /* Custom Selects */
+        .styled-select {
+            background: var(--bg-input);
+            color: var(--text-main);
+            border: 1px solid var(--border);
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 13px;
+            font-family: var(--font-ui);
+            cursor: pointer;
+            transition: 0.2s;
+            appearance: none; /* Hide default arrow */
+            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2386868B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 8px;
+            padding-right: 30px;
         }
+        .styled-select:hover { border-color: var(--text-dim); }
+        /* Segmented Control for Live/Hist */
+        .segmented-control {
+            background: var(--bg-input);
+            padding: 2px;
+            border-radius: 7px;
+            display: flex;
+            gap: 2px;
+            border: 1px solid var(--border);
         }
+        .seg-btn {
+            background: transparent;
+            color: var(--text-dim);
+            border: none;
+            padding: 4px 12px;
+            font-size: 12px;
+            font-weight: 500;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .seg-btn.active {
+            background: #3A3A3C;
+            color: var(--text-main);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
         }
+        /* Buttons */
+        .btn-ghost {
+            background: transparent; border: 1px solid transparent; color: var(--text-dim);
+            padding: 6px 12px; font-size: 13px; border-radius: 6px; cursor: pointer; transition: 0.2s;
+        }
+        .btn-ghost:hover { background: var(--bg-input); color: var(--text-main); }
+        .btn-reset { color: var(--danger); }
+        .btn-reset:hover { background: rgba(255, 69, 58, 0.1); }
+        /* --- LAYOUT GRID --- */
+        .app-grid {
+            flex: 1;
+            display: grid;
+            /* Columns set via JS */
+            grid-auto-flow: column;
+            overflow: hidden; /* No global scroll, columns scroll individually */
+            background: var(--bg-app);
+            gap: 1px; /* Divider look */
         }
+        .chart-column {
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto; /* INDEPENDENT SCROLL */
+            background: var(--bg-app);
+            padding: 8px;
+            gap: 8px;
+            border-right: 1px solid var(--border);
+            min-width: 0;
         }
+        .chart-column:last-child { border-right: none; }
+        /* Custom Scrollbar */
+        .chart-column::-webkit-scrollbar { width: 6px; }
+        .chart-column::-webkit-scrollbar-track { background: transparent; }
+        .chart-column::-webkit-scrollbar-thumb { background: #3A3A3C; border-radius: 3px; }
+        .chart-column::-webkit-scrollbar-thumb:hover { background: #555; }
         /* --- CHART CARD --- */
         .chart-card {
+            background: var(--bg-panel);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            /* SIZING LOGIC */
+            flex-grow: 1;
+            min-height: 25vh; /* Ensure 4 fit nicely (100/4), if more, they stack */
+            flex-shrink: 0;
+            overflow: hidden;
+            transition: border-color 0.2s;
+        }
+        .chart-card:hover { border-color: var(--border-hover); }
+        /* Card Header */
+        .cc-header {
+            height: 36px;
+            padding: 0 10px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid var(--border);
+            background: rgba(255,255,255,0.02);
         }
+        .cc-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
+        .cc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); transition: 0.3s; }
+        .cc-dot.live { background: var(--success); box-shadow: 0 0 6px rgba(48, 209, 88, 0.4); }
+        .cc-dot.hist { background: var(--text-accent); }
+        .cc-meta { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; margin-left: 5px; }
+        .cc-actions { opacity: 0; transition: 0.2s; display: flex; gap: 4px; }
+        .chart-card:hover .cc-actions { opacity: 1; }
+        .icon-btn {
+            background: transparent; border: none; color: var(--text-dim);
+            cursor: pointer; padding: 4px; border-radius: 4px; font-size: 14px;
         }
+        .icon-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.1); }
+        /* Card Body */
+        .cc-body { flex: 1; position: relative; width: 100%; height: 100%; min-height: 0; }
         .empty-state {
             display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
+            color: var(--text-dim); gap: 10px;
         }
+        .btn-conf-subtle {
+            background: transparent; border: 1px dashed var(--border);
+            color: var(--text-dim); padding: 8px 16px; border-radius: 6px; font-size: 12px; cursor: pointer;
+        }
+        .btn-conf-subtle:hover { border-color: var(--text-accent); color: var(--text-accent); }
+        /* Add Chart Button at bottom of column */
+        .add-chart-btn {
+            padding: 12px;
+            border: 1px dashed var(--border);
+            border-radius: 8px;
+            color: var(--text-dim);
+            text-align: center;
+            cursor: pointer;
+            font-size: 12px;
+            margin-top: 5px;
+            flex-shrink: 0;
+        }
+        .add-chart-btn:hover { background: rgba(255,255,255,0.03); color: var(--text-main); border-color: var(--text-dim); }
         /* --- MODAL --- */
         .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
+            z-index: 200; display: none; justify-content: center; align-items: center;
         }
+        .modal-box {
+            background: #1c1c1e;
+            width: 450px;
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+            display: flex; flex-direction: column;
+            overflow: hidden;
         }
+        .m-head {
+            padding: 15px 20px; border-bottom: 1px solid var(--border);
+            font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center;
+        }
+        .m-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
+        .m-foot { padding: 15px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: #222; }
         .form-group { margin-bottom: 15px; }
+        .form-label { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
         .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+        .modal-input {
+            width: 100%; background: #2c2c2e; border: 1px solid transparent;
+            color: white; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-family: var(--font-ui);
+        }
+        .modal-input:focus { border-color: var(--text-accent); background: #1c1c1e; }
+        .btn-primary {
+            background: var(--text-accent); color: white; border: none; padding: 8px 16px;
+            border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer;
+        }
+        .btn-primary:hover { filter: brightness(1.1); }
         /* Series List */
+        .series-row { display: grid; grid-template-columns: 30px 1fr 1fr 40px 20px; gap: 8px; margin-bottom: 8px; align-items: center; }
+        .color-well { width: 100%; height: 28px; border: none; background: none; padding: 0; cursor: pointer; }
         /* Toast */
         .toast {
+            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
+            background: #333; color: white; padding: 10px 20px; border-radius: 20px;
+            font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            z-index: 1000; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none;
         }
+        .toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
+        .toast-icon { color: var(--success); }
     </style>
 </head>
 <body>
 <!-- HEADER -->
+<header>
+    <div class="brand">
+        DepthChain <span>PRO</span>
+    </div>
     <div class="controls">
+        <!-- Date Selector -->
+        <select id="globalDate" class="styled-select" onchange="App.onDateChange()"></select>
+        <!-- Live/Hist Toggle -->
+        <div class="segmented-control">
+            <button class="seg-btn" id="modeHist" onclick="App.setMode('HIST')">History</button>
+            <button class="seg-btn active" id="modeLive" onclick="App.setMode('LIVE')">Live</button>
+        </div>
+        <div style="width:1px; height:16px; background:var(--border); margin:0 5px;"></div>
         <!-- Layout Selector -->
+        <select class="styled-select" id="layoutSel" onchange="App.changeLayout(this.value)">
+            <option value="1">1 Column</option>
+            <option value="2">2 Columns</option>
+            <option value="3" selected>3 Columns</option>
+            <option value="4">4 Columns</option>
+        </select>
+        <button class="btn-ghost" onclick="Config.openDefaults()">Settings</button>
+        <button class="btn-ghost btn-reset" onclick="App.reset()">Reset</button>
     </div>
+</header>
+<!-- MAIN APP GRID -->
+<div id="appGrid" class="app-grid">
+    <!-- Columns injected here -->
 </div>
+<!-- CONFIG MODAL -->
+<div class="modal-overlay" id="configModal">
+    <div class="modal-box">
+        <div class="m-head">
+            <span id="modalTitle">Configure Chart</span>
+            <button class="icon-btn" onclick="Config.close()">✕</button>
         </div>
+        <div class="m-body">
             <div id="cfgForm">
                 <div class="form-row">
                     <div class="form-group">
+                        <label class="form-label">Symbol</label>
+                        <select id="cfgRoot" class="modal-input" onchange="Config.onRootChange()"></select>
                     </div>
                     <div class="form-group">
+                        <label class="form-label">Expiry</label>
+                        <select id="cfgExp" class="modal-input" onchange="Config.onExpChange()"></select>
                     </div>
                 </div>
                 <div class="form-group">
+                    <label class="form-label">Instrument</label>
+                    <select id="cfgInst" class="modal-input"></select>
                 </div>
                 <div class="form-row">
                     <div class="form-group">
+                        <label class="form-label">Timeframe</label>
+                        <select id="cfgTF" class="modal-input">
                             <option value="1min">1 Minute</option>
                             <option value="3min">3 Minutes</option>
                             <option value="5min">5 Minutes</option>
                         </select>
                     </div>
                     <div class="form-group">
+                        <label class="form-label">Time Range</label>
                         <div style="display:flex; gap:5px;">
+                            <input type="time" id="cfgStart" class="modal-input" value="09:15">
+                            <input type="time" id="cfgEnd" class="modal-input" value="15:30">
                         </div>
                     </div>
                 </div>
+                <div class="form-group" style="margin-top:10px; padding-top:10px; border-top:1px solid var(--border);">
+                    <label class="form-label">Plots ($P, $B, $S, $V, $OI)</label>
+                    <div id="cfgSeries"></div>
+                    <button class="btn-ghost" style="width:100%; text-align:center; font-size:12px; margin-top:5px;" onclick="Config.addSeries()">+ Add Plot Line</button>
                 </div>
             </div>
         </div>
+        <div class="m-foot">
+            <button class="btn-ghost" onclick="Config.close()">Cancel</button>
+            <button class="btn-primary" onclick="Config.save()">Apply Changes</button>
         </div>
     </div>
 </div>
+<!-- TOAST -->
+<div id="toast" class="toast">
+    <span class="toast-icon">✓</span> <span id="toastMsg">Saved</span>
 </div>
 <script>
 /**
+ * --- CORE APP LOGIC ---
  */
+const App = {
     state: {
+        date: null,
+        mode: 'LIVE',
+        colCount: 3,
+        charts: [] // Flat array of Chart Objects {id, config, domId}
     },
+    // Default Plot Configuration
     defaults: [
+        { formula: '$P', color: '#0A84FF', label: 'Price', axis: 'left' },
+        { formula: '$B', color: '#30D158', label: 'Buy Qty', axis: 'right' },
+        { formula: '$S', color: '#FF453A', label: 'Sell Qty', axis: 'right' }
     ],
     async init() {
         await this.loadDates();
+        // Restore State
+        const saved = localStorage.getItem('dc_pro_v5');
+        if(saved) {
+            try {
+                const s = JSON.parse(saved);
+                this.state.date = s.date;
+                this.state.mode = s.mode || 'LIVE';
+                this.state.colCount = s.colCount || 3;
+                // Rehydrate charts (configs only)
+                this.state.charts = s.charts.map(c => ({
+                    id: c.id,
+                    config: c.config,
+                    domId: `card-${c.id}`,
+                    instance: null,
+                    interval: null
+                }));
+                document.getElementById('layoutSel').value = this.state.colCount;
+                if(this.state.date) document.getElementById('globalDate').value = this.state.date;
+                this.updateModeUI();
+            } catch(e) { console.error("Restore failed", e); this.initDefault(); }
         } else {
+            this.initDefault();
         }
+        // Render Initial Grid
+        this.renderLayout();
+    },
+    initDefault() {
+        this.state.colCount = 3;
+        this.state.charts = [
+            this.createChartObj(), this.createChartObj(), this.createChartObj(),
+            this.createChartObj(), this.createChartObj(), this.createChartObj()
+        ];
+    },
+    createChartObj() {
+        return {
+            id: 'c'+Date.now()+Math.random().toString(16).slice(2),
+            config: null, // Empty
+            domId: null,
+            instance: null,
+            interval: null
+        };
     },
     async loadDates() {
             const dates = await res.json();
             const sel = document.getElementById('globalDate');
             sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+            if(dates.length && !this.state.date) this.state.date = dates[0];
+            // Ensure select shows the value
+            if(this.state.date) sel.value = this.state.date;
+        } catch(e) { console.error(e); }
     },
+    updateModeUI() {
+        document.getElementById('modeLive').className = this.state.mode === 'LIVE' ? 'seg-btn active' : 'seg-btn';
+        document.getElementById('modeHist').className = this.state.mode === 'HIST' ? 'seg-btn active' : 'seg-btn';
     },
+    setMode(m) {
+        this.state.mode = m;
+        this.updateModeUI();
+        this.save();
+        // Trigger all charts to update intervals
+        this.state.charts.forEach(c => ChartController.manageInterval(c));
     },
+    onDateChange() {
+        this.state.date = document.getElementById('globalDate').value;
+        this.save();
+        // Reload all
+        this.state.charts.forEach(c => ChartController.plot(c));
     },
+    changeLayout(val) {
+        this.state.colCount = parseInt(val);
+        this.save();
+        this.renderLayout(); // Re-distribute DOM nodes
     },
+    // --- LAYOUT ENGINE ---
+    renderLayout() {
+        const grid = document.getElementById('appGrid');
+        grid.style.gridTemplateColumns = `repeat(${this.state.colCount}, 1fr)`;
+        // Create Columns
+        const columns = [];
+        grid.innerHTML = '';
+        for(let i=0; i<this.state.colCount; i++) {
+            const col = document.createElement('div');
+            col.className = 'chart-column';
+            col.id = `col-${i}`;
+            // Add "Add Chart" button at bottom
+            const btn = document.createElement('div');
+            btn.className = 'add-chart-btn';
+            btn.innerText = '+ Add Chart';
+            btn.onclick = () => App.addChartToCol(i);
+            // Store ref for appending
+            col.appendChild(btn);
+            columns.push(col);
+            grid.appendChild(col);
         }
+        // Distribute Charts into Columns
+        this.state.charts.forEach((c, index) => {
+            const targetColIndex = index % this.state.colCount;
+            const targetCol = columns[targetColIndex];
+            const addBtn = targetCol.lastChild;
+            // Check if DOM element exists
+            let card = document.getElementById(c.domId);
+            if(!card) {
+                // Create new Card DOM
+                card = this.createCardDOM(c);
+            }
+            // Move into new column (before the button)
+            targetCol.insertBefore(card, addBtn);
+            // Re-render canvas if it was lost (unlikely with appendChild move, but safe check)
+            if(c.config && !c.instance) ChartController.plot(c);
+        });
     },
+    createCardDOM(c) {
+        c.domId = `card-${c.id}`;
         const div = document.createElement('div');
         div.className = 'chart-card';
+        div.id = c.domId;
         div.innerHTML = `
+            <div class="cc-header">
+                <div class="cc-title" id="title-${c.id}">
+                    <span class="cc-dot"></span> New Chart
                 </div>
+                <div class="cc-actions">
+                    <button class="icon-btn" onclick="Config.open('${c.id}')">⚙</button>
+                    <button class="icon-btn" onclick="App.removeChart('${c.id}')">✕</button>
                 </div>
             </div>
+            <div class="cc-body" id="body-${c.id}">
                 <div class="empty-state">
+                    <button class="btn-conf-subtle" onclick="Config.open('${c.id}')">Configure Chart</button>
                 </div>
             </div>
         `;
         return div;
     },
+    addChartToCol(colIndex) {
+        // We create a new chart.
+        // To maintain "order", we technically append to the list.
+        // But the layout logic distributes round-robin.
+        // To force it into a specific column visually is hard with round-robin.
+        // SIMPLIFICATION: We just add to the end of the global list, and re-render.
+        // It will appear in the next available slot.
+        const c = this.createChartObj();
+        this.state.charts.push(c);
+        this.save();
+        this.renderLayout();
     },
+    removeChart(id) {
+        if(!confirm("Remove this chart?")) return;
+        const idx = this.state.charts.findIndex(x => x.id === id);
+        if(idx > -1) {
+            const c = this.state.charts[idx];
+            ChartController.cleanup(c);
+            document.getElementById(c.domId).remove();
+            this.state.charts.splice(idx, 1);
+            this.save();
+            this.renderLayout(); // Re-balance
+        }
+    },
+    reset() {
+        if(confirm("Reset entire workspace?")) {
+            localStorage.removeItem('dc_pro_v5');
+            location.reload();
+        }
+    },
+    save() {
+        const minimal = {
+            date: this.state.date,
+            mode: this.state.mode,
+            colCount: this.state.colCount,
+            charts: this.state.charts.map(c => ({ id: c.id, config: c.config }))
+        };
+        localStorage.setItem('dc_pro_v5', JSON.stringify(minimal));
+    },
+    toast(msg) {
+        const t = document.getElementById('toast');
+        document.getElementById('toastMsg').innerText = msg;
+        t.classList.add('visible');
+        setTimeout(() => t.classList.remove('visible'), 2000);
     }
 };
 /**
+ * --- CHART CONTROLLER ---
  */
+const ChartController = {
+    async plot(c, isUpdate=false) {
+        if(!c.config) return;
         // UI Update
+        const titleEl = document.querySelector(`#title-${c.id}`);
+        const dot = c.config ? (App.state.mode==='LIVE' ? 'live' : 'hist') : '';
+        if(titleEl) {
+            titleEl.innerHTML = `
+                <span class="cc-dot ${dot}" id="dot-${c.id}"></span>
+                ${c.config.root} <span style="color:var(--text-accent)">${c.config.expiry}</span>
+                <span class="cc-meta">${c.config.instrument} • ${c.config.timeframe}</span>
+            `;
+        }
+        // DOM Check
+        const body = document.getElementById(`body-${c.id}`);
+        if(!body.querySelector('canvas')) {
+            body.innerHTML = `<canvas id="canvas-${c.id}"></canvas>`;
         }
+        // Indicate loading if update
+        if(isUpdate) {
+            const d = document.getElementById(`dot-${c.id}`);
+            if(d) d.style.opacity = '0.5';
+        }
         try {
             const res = await fetch('/api/fetch_series', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
+                    date: App.state.date,
+                    root: c.config.root,
+                    expiry: c.config.expiry,
+                    instrument: c.config.instrument,
+                    timeframe: c.config.timeframe,
+                    start_time: c.config.start,
+                    end_time: c.config.end
                 })
             });
             const data = await res.json();
+            if(isUpdate) {
+                const d = document.getElementById(`dot-${c.id}`);
+                if(d) d.style.opacity = '1';
             }
+            if(data.error || !data.labels || !data.labels.length) {
+                if(App.state.mode === 'LIVE' && isUpdate) return; // Keep old data
+                if(!isUpdate) body.innerHTML = '<div class="empty-state">No Data Available</div>';
+                return;
+            }
+            // Process Data
+            const datasets = c.config.series.map(s => {
                 const computed = data.labels.map((_, i) => {
+                    const P=data.P[i]||0, B=data.B[i]||0, S=data.S[i]||0, V=data.V[i]||0, OI=data.OI[i]||0;
+                    const formula = s.formula.replace(/\$P/g,P).replace(/\$B/g,B).replace(/\$S/g,S).replace(/\$V/g,V).replace(/\$OI/g,OI);
+                    try { return new Function('return '+formula)(); } catch{ return null; }
                 });
                 return {
+                    label: s.label, data: computed, borderColor: s.color, backgroundColor: s.color,
+                    borderWidth: 1.5, pointRadius: 0, hoverRadius: 4, tension: 0.1,
+                    yAxisID: s.axis==='left'?'y':'y1'
                 };
             });
+            this.renderCanvas(c, data.labels, datasets);
+            this.manageInterval(c);
+        } catch(e) { console.error(e); }
     },
+    renderCanvas(c, labels, datasets) {
+        const ctx = document.getElementById(`canvas-${c.id}`);
+        if(!ctx) return;
+        if(c.instance) {
+            c.instance.data.labels = labels;
+            c.instance.data.datasets = datasets;
+            c.instance.update('none');
         } else {
             const hasRight = datasets.some(d => d.yAxisID === 'y1');
+            c.instance = new Chart(ctx.getContext('2d'), {
                 type: 'line',
                 data: { labels, datasets },
                 options: {
+                    responsive: true, maintainAspectRatio: false,
                     animation: false,
                     interaction: { mode: 'index', intersect: false },
+                    plugins: {
+                        legend: { display: false },
+                        tooltip: { backgroundColor: '#1c1c1e', titleColor:'#fff', bodyColor:'#ccc', borderColor:'#333', borderWidth:1 }
                     },
                     scales: {
+                        x: { grid:{color:'#222', tickLength:0}, ticks:{color:'#666', maxTicksLimit:8} },
+                        y: { type:'linear', display:true, position:'left', grid:{color:'#222'}, ticks:{color:'#666'} },
+                        y1: { type:'linear', display:hasRight, position:'right', grid:{display:false}, ticks:{color:'#666'} }
                     }
                 }
             });
         }
     },
+    manageInterval(c) {
+        if(c.interval) clearInterval(c.interval);
+        if(App.state.mode === 'LIVE' && c.config) {
+            // Check if today
+            const today = new Date().toISOString().split('T')[0];
+            if(App.state.date === today) {
+                c.interval = setInterval(() => this.plot(c, true), 15000);
+            }
         }
     },
+    cleanup(c) {
+        if(c.interval) clearInterval(c.interval);
+        if(c.instance) c.instance.destroy();
     }
 };
 /**
+ * --- CONFIG MODAL ---
  */
+const Config = {
     currentId: null,
     async open(id) {
         this.currentId = id;
+        document.getElementById('configModal').style.display = 'flex';
+        // Find config or use defaults
+        const c = App.state.charts.find(x => x.id === id);
+        const cfg = c.config || {};
+        // Load roots
+        await this.loadRoots(cfg.root);
+        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
+        document.getElementById('cfgStart').value = cfg.start || '09:15';
+        document.getElementById('cfgEnd').value = cfg.end || '15:30';
         // Series
+        const series = cfg.series || App.defaults;
         this.renderSeries(series);
+        if(cfg.root) {
+            document.getElementById('cfgRoot').value = cfg.root;
+            await this.onRootChange(cfg.expiry, cfg.instrument);
         }
     },
     openDefaults() {
+        alert("Global Defaults editing coming soon. Edit individual charts for now.");
     },
+    close() { document.getElementById('configModal').style.display = 'none'; },
+    async loadRoots(pre) {
+        const sel = document.getElementById('cfgRoot');
+        sel.innerHTML = '<option>Loading...</option>';
+        const roots = await fetch(`/api/roots?date=${App.state.date}`).then(r=>r.json());
+        sel.innerHTML = `<option value="">-- Select --</option>` + roots.map(r=>`<option>${r}</option>`).join('');
+        if(pre) sel.value = pre;
     },
     async onRootChange(preExp, preInst) {
         const root = document.getElementById('cfgRoot').value;
+        const sel = document.getElementById('cfgExp');
+        sel.innerHTML = '<option>Loading...</option>';
+        const exps = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`).then(r=>r.json());
+        sel.innerHTML = `<option value="">-- Select --</option>` + exps.map(e=>`<option>${e}</option>`).join('');
+        if(preExp) {
+            sel.value = preExp;
+            this.onExpChange(preInst);
         } else {
+             // Auto logic
+             const auto = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`).then(r=>r.json());
              if(auto.current) {
+                 sel.value = auto.current.expiry;
+                 this.onExpChange(auto.current.instrument);
              }
         }
     },
     async onExpChange(preInst) {
         const root = document.getElementById('cfgRoot').value;
         const exp = document.getElementById('cfgExp').value;
+        const sel = document.getElementById('cfgInst');
+        sel.innerHTML = '<option>Loading...</option>';
+        const insts = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`).then(r=>r.json());
+        sel.innerHTML = insts.map(i=>`<option>${i}</option>`).join('');
+        if(preInst) sel.value = preInst;
     },
     renderSeries(list) {
+        const div = document.getElementById('cfgSeries');
+        div.innerHTML = '';
+        list.forEach(s => this.addSeriesUI(s));
     },
+    addSeries() {
+        this.addSeriesUI({ color:'#ffffff', formula:'$P', label:'New', axis:'left' });
+    },
+    addSeriesUI(s) {
+        const el = document.createElement('div');
+        el.className = 'series-row';
+        el.innerHTML = `
+            <input type="color" class="color-well s-col" value="${s.color}">
+            <input type="text" class="modal-input s-for" value="${s.formula}" placeholder="$P">
+            <input type="text" class="modal-input s-lab" value="${s.label}" placeholder="Label">
+            <select class="modal-input s-ax" style="padding:4px;"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select>
+            <button class="icon-btn" onclick="this.parentElement.remove()" style="color:var(--danger)">✕</button>
         `;
+        document.getElementById('cfgSeries').appendChild(el);
     },
     save() {
+        const root = document.getElementById('cfgRoot').value;
+        const exp = document.getElementById('cfgExp').value;
+        const inst = document.getElementById('cfgInst').value;
+        if(!root || !exp || !inst) { App.toast("Missing Fields"); return; }
+        const series = Array.from(document.querySelectorAll('.series-row')).map(row => ({
+            color: row.querySelector('.s-col').value,
+            formula: row.querySelector('.s-for').value,
+            label: row.querySelector('.s-lab').value,
+            axis: row.querySelector('.s-ax').value
         }));
+        const config = {
+            root, expiry: exp, instrument: inst,
+            timeframe: document.getElementById('cfgTF').value,
+            start: document.getElementById('cfgStart').value,
+            end: document.getElementById('cfgEnd').value,
+            series
+        };
+        const chart = App.state.charts.find(x => x.id === this.currentId);
+        chart.config = config;
+        App.save();
+        ChartController.plot(chart);
         this.close();
+        App.toast("Configuration Applied");
     }
 };
+window.onload = () => App.init();
 </script>
 </body>