InstrumentChartV2_reference

Sleeping

App Files Files Community

topsecrettraders commited on Jan 27

Commit

f1c5ddc

verified ·

1 Parent(s): d0548f0

Update app.py

Browse files

Files changed (1) hide show

app.py +859 -585

app.py CHANGED Viewed

@@ -48,8 +48,9 @@ def home():
 @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:
@@ -87,9 +88,9 @@ def get_auto_config(date: str, root: str):
             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}
@@ -112,6 +113,7 @@ def get_auto_config(date: str, root: str):
 @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'))
@@ -119,6 +121,7 @@ def get_expiries(date: str, root: str):
 @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()
@@ -157,7 +160,7 @@ def fetch_series(
             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 []
@@ -178,7 +181,7 @@ def fetch_series(
             continue
     if not records:
-         return JSONResponse({"error": "No data", "labels": [], "P": []})
     df = pd.DataFrame(records)
     df.set_index('ts', inplace=True)
@@ -204,7 +207,7 @@ def fetch_series(
 # ==========================================
-# 5. FRONTEND TEMPLATE (High Fidelity UI)
 # ==========================================
 HTML_TEMPLATE = """
@@ -212,448 +215,516 @@ 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>
-                            <option value="15min">15 Minutes</option>
-                            <option value="30min">30 Minutes</option>
-                            <option value="1hour">1 Hour</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() {
@@ -661,345 +732,518 @@ const App = {
             const res = await fetch('/api/dates');
             const dates = await res.json();
             const sel = document.getElementById('globalDate');
             sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
-            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);
              }
         }
     },
@@ -1007,69 +1251,99 @@ const Config = {
     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>

 @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:
             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}
 @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'))
 @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()
             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 []
             continue
     if not records:
+         return JSONResponse({"error": "No data found", "labels": [], "P": []})
     df = pd.DataFrame(records)
     df.set_index('ts', inplace=True)
 # ==========================================
+# 5. FRONTEND TEMPLATE (World-Class Refactor)
 # ==========================================
 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 rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
+        /* --- WORLD CLASS THEME --- */
         :root {
+            --bg-body: #0d1117;       /* GitHub Dimmed Background */
+            --bg-header: rgba(22, 27, 34, 0.85); /* Translucent Header */
+            --bg-card: #161b22;       /* Card Background */
+            --bg-input: #010409;      /* Dark Input Background */
+            --border: #30363d;        /* Subtle Border */
+            --border-hover: #6e7681;
+            --text-primary: #e6edf3;
+            --text-secondary: #8b949e;
+            --accent: #2f81f7;
+            --accent-glow: rgba(47, 129, 247, 0.2);
+            --success: #238636;
+            --danger: #f85149;
+            --warning: #d29922;
+            --shadow-card: 0 4px 12px rgba(0,0,0,0.5);
+            --radius-md: 8px;
+            --radius-sm: 6px;
         }
+        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }
+        body {
+            background: var(--bg-body);
+            color: var(--text-primary);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden; /* Body doesn't scroll, columns do */
+            font-size: 13px;
         }
+        /* --- SCROLLBARS --- */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #586069; }
+        /* --- TOP BAR --- */
+        .top-bar {
+            height: 56px;
+            background: var(--bg-header);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
             border-bottom: 1px solid var(--border);
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 0 20px;
             z-index: 100;
+            flex-shrink: 0;
         }
+        .logo {
+            font-weight: 700;
+            font-size: 16px;
+            letter-spacing: -0.5px;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .logo span {
+            background: var(--accent);
+            color: white;
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 12px;
+            font-weight: 600;
         }
+        .controls { display: flex; gap: 12px; align-items: center; }
+        /* Custom Select Styling */
+        .select-wrapper { position: relative; }
+        select {
+            appearance: none;
             background: var(--bg-input);
             border: 1px solid var(--border);
+            color: var(--text-primary);
+            padding: 6px 30px 6px 12px;
+            border-radius: var(--radius-sm);
+            font-size: 12px;
+            font-family: inherit;
             cursor: pointer;
+            transition: all 0.2s;
+            min-width: 120px;
+        }
+        select:hover { border-color: var(--border-hover); }
+        select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
+        .select-chevron {
+            position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+            pointer-events: none; color: var(--text-secondary); font-size: 10px;
         }
+        /* Buttons */
+        button {
+            background: var(--bg-card);
             border: 1px solid var(--border);
+            color: var(--text-primary);
+            padding: 6px 12px;
+            border-radius: var(--radius-sm);
             font-size: 12px;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.2s;
         }
+        button:hover { border-color: var(--text-secondary); background: #21262d; }
+        .btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
+        .btn-primary:hover { background: #2c76e3; border-color: #2c76e3; }
+        .btn-danger { color: var(--danger); border-color: var(--border); }
+        .btn-danger:hover { background: rgba(248, 81, 73, 0.1); border-color: var(--danger); }
+        .btn-ghost {
+            background: transparent;
+            border: 1px solid var(--text-secondary);
+            color: var(--text-secondary);
+            opacity: 0.7;
+        }
+        .btn-ghost:hover {
+            opacity: 1;
+            border-color: var(--accent);
+            color: var(--accent);
+            background: rgba(47, 129, 247, 0.05);
         }
+        /* --- LAYOUT SELECTOR --- */
+        .layout-group {
+            display: flex;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-sm);
+            padding: 2px;
         }
+        .layout-btn {
+            background: transparent; border: none; padding: 4px 10px;
+            color: var(--text-secondary); border-radius: 4px;
+        }
+        .layout-btn:hover { background: transparent; color: var(--text-primary); }
+        .layout-btn.active { background: var(--border); color: var(--text-primary); }
+        /* --- MAIN GRID --- */
+        .main-content {
             flex: 1;
+            display: flex; /* Flex rows for columns */
+            overflow: hidden; /* Prevent body scroll */
+            padding: 0;
             gap: 1px; /* Divider look */
+            background: var(--border);
         }
+        .column {
+            flex: 1;
             display: flex;
             flex-direction: column;
+            gap: 16px;
             overflow-y: auto; /* INDEPENDENT SCROLL */
+            background: var(--bg-body);
+            padding: 16px;
+            min-width: 320px;
         }
+        .column-add-btn {
+            padding: 20px;
+            border: 1px dashed var(--border);
+            color: var(--text-secondary);
+            text-align: center;
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            margin-top: auto;
+            transition: 0.2s;
+            font-size: 13px;
+        }
+        .column-add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(47, 129, 247, 0.03); }
         /* --- CHART CARD --- */
         .chart-card {
+            background: var(--bg-card);
             border: 1px solid var(--border);
+            border-radius: var(--radius-md);
+            height: 380px;
+            min-height: 380px;
             display: flex;
             flex-direction: column;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
             position: relative;
             transition: border-color 0.2s;
         }
         .chart-card:hover { border-color: var(--border-hover); }
+        .card-header {
+            height: 40px;
+            border-bottom: 1px solid var(--border);
             display: flex;
             align-items: center;
             justify-content: space-between;
+            padding: 0 12px;
+            background: rgba(255,255,255,0.01);
+            border-radius: var(--radius-md) var(--radius-md) 0 0;
         }
+        .card-title {
+            font-weight: 600;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--text-primary);
+        }
+        .card-meta {
+            color: var(--text-secondary);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 11px;
+            opacity: 0.8;
+            margin-left: 6px;
+        }
+        .icon-btn {
+            padding: 4px;
+            border: none;
+            background: transparent;
+            color: var(--text-secondary);
+            font-size: 14px;
+            border-radius: 4px;
         }
+        .icon-btn:hover { background: var(--border); color: var(--text-primary); }
+        .card-body {
+            flex: 1;
+            position: relative;
+            padding: 8px 8px 4px 4px; /* Slight padding for chart labels */
+        }
         .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-secondary);
+            gap: 12px;
         }
+        /* --- STATUS DOTS --- */
+        .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
+        .status-dot.live { background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse 2s infinite; }
+        .status-dot.hist { background: var(--accent); }
+        .status-dot.retry { background: var(--warning); }
+        .status-dot.offline { background: var(--border); }
+        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
+        /* --- TOAST --- */
+        .toast-container {
+            position: fixed; bottom: 24px; right: 24px; z-index: 2000;
+            display: flex; flex-direction: column; gap: 10px;
+        }
+        .toast {
+            background: var(--bg-card); border: 1px solid var(--border);
+            color: var(--text-primary); padding: 12px 16px;
+            border-radius: var(--radius-md); font-weight: 500; font-size: 13px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+            display: flex; align-items: center; gap: 10px;
+            animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
         }
+        .toast-success { border-left: 3px solid var(--success); }
+        .toast-info { border-left: 3px solid var(--accent); }
+        @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
         /* --- 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: 1000;
+            display: none; justify-content: center; align-items: center;
+            opacity: 0; transition: opacity 0.2s;
         }
+        .modal-overlay.active { opacity: 1; }
+        .modal {
+            background: #1c2128; border: 1px solid var(--border); border-radius: 12px;
+            width: 480px; max-width: 90%; max-height: 85vh; display: flex; flex-direction: column;
+            box-shadow: 0 24px 48px rgba(0,0,0,0.6);
+            transform: scale(0.95); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
         }
+        .modal-overlay.active .modal { transform: scale(1); }
+        .modal-head {
+            padding: 16px 20px; border-bottom: 1px solid var(--border);
+            font-weight: 600; font-size: 14px;
+            display: flex; justify-content: space-between; align-items: center;
         }
+        .modal-body { padding: 20px; overflow-y: auto; }
+        .modal-foot { padding: 16px 20px; border-top: 1px solid var(--border); text-align: right; background: rgba(0,0,0,0.2); border-radius: 0 0 12px 12px; }
+        .form-group { margin-bottom: 16px; }
+        .form-group label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+        input[type="text"], input[type="time"], input[type="number"] {
+            width: 100%; background: var(--bg-input); border: 1px solid var(--border);
+            color: var(--text-primary); padding: 8px 10px; border-radius: var(--radius-sm);
         }
+        input:focus { border-color: var(--accent); }
+        /* Series List Styling */
+        .series-row {
+            display: grid; grid-template-columns: 32px 1fr 1fr 60px 24px;
+            gap: 8px; margin-bottom: 8px; align-items: center;
         }
+        .color-picker {
+            width: 100%; height: 32px; padding: 0; border: none;
+            background: none; cursor: pointer;
         }
     </style>
 </head>
 <body>
 <!-- HEADER -->
+<div class="top-bar">
+    <div class="logo">DepthChain <span>PRO</span></div>
     <div class="controls">
         <!-- Date Selector -->
+        <div class="select-wrapper">
+            <select id="globalDate" onchange="GlobalApp.onDateChange()"></select>
+            <span class="select-chevron">▼</span>
+        </div>
+        <!-- Mode Toggle -->
+        <div class="layout-group">
+            <button class="layout-btn active" id="modeHist" onclick="GlobalApp.setMode('HIST')">History</button>
+            <button class="layout-btn" id="modeLive" onclick="GlobalApp.setMode('LIVE')">Live</button>
         </div>
+        <div style="width: 1px; height: 20px; background: var(--border); margin: 0 8px;"></div>
         <!-- Layout Selector -->
+        <div class="layout-group">
+            <button class="layout-btn" id="lay1" onclick="GlobalApp.setLayout(1)">1</button>
+            <button class="layout-btn" id="lay2" onclick="GlobalApp.setLayout(2)">2</button>
+            <button class="layout-btn active" id="lay3" onclick="GlobalApp.setLayout(3)">3</button>
+            <button class="layout-btn" id="lay4" onclick="GlobalApp.setLayout(4)">4</button>
+        </div>
+        <button onclick="ConfigModal.openDefaults()">Global Defaults</button>
+        <button class="btn-danger" onclick="GlobalApp.resetApp()">Reset</button>
     </div>
+</div>
+<!-- GRID CONTAINER -->
+<div class="main-content" id="gridContainer">
+    <!-- Columns injected via JS -->
 </div>
+<!-- TOAST CONTAINER -->
+<div class="toast-container" id="toastContainer"></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; color:var(--text-secondary);">Loading metadata...</div>
+            <!-- Config Form -->
             <div id="cfgForm">
                 <div class="form-row">
                     <div class="form-group">
+                        <label>Symbol (Root)</label>
+                        <div class="select-wrapper">
+                            <select id="cfgRoot" onchange="ConfigModal.onRootChange()" style="width:100%"></select>
+                            <span class="select-chevron">▼</span>
+                        </div>
                     </div>
                     <div class="form-group">
+                        <label>Expiry</label>
+                        <div class="select-wrapper">
+                            <select id="cfgExp" onchange="ConfigModal.onExpChange()" style="width:100%"></select>
+                            <span class="select-chevron">▼</span>
+                        </div>
                     </div>
                 </div>
                 <div class="form-group">
+                    <label>Instrument</label>
+                    <div class="select-wrapper">
+                        <select id="cfgInst" style="width:100%"></select>
+                        <span class="select-chevron">▼</span>
+                    </div>
                 </div>
                 <div class="form-row">
                     <div class="form-group">
+                        <label>Timeframe</label>
+                        <div class="select-wrapper">
+                            <select id="cfgTF" style="width:100%">
+                                <option value="1min">1 Minute</option>
+                                <option value="3min">3 Minutes</option>
+                                <option value="5min">5 Minutes</option>
+                                <option value="15min">15 Minutes</option>
+                                <option value="30min">30 Minutes</option>
+                                <option value="1hour">1 Hour</option>
+                            </select>
+                            <span class="select-chevron">▼</span>
+                        </div>
                     </div>
                     <div class="form-group">
+                        <label>Range (HH:MM)</label>
+                        <div style="display:flex; gap:8px;">
+                            <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 (Vars: $P, $B, $S, $V, $OI)</label>
+                    <div id="cfgSeriesList"></div>
+                    <button class="btn-ghost" style="width:100%; margin-top:8px; border-style:dashed;" onclick="ConfigModal.addSeriesRow()">+ Add Line</button>
                 </div>
             </div>
         </div>
+        <div class="modal-foot">
+            <button onclick="ConfigModal.close()" style="background:transparent; border:none; margin-right:10px;">Cancel</button>
+            <button class="btn-primary" onclick="ConfigModal.save()">Save Configuration</button>
         </div>
     </div>
 </div>
+<!-- RESTORE SESSION POPUP -->
+<div class="modal-overlay" id="restoreModal">
+    <div class="modal" style="width: 360px;">
+        <div class="modal-head">Restore Session?</div>
+        <div class="modal-body" style="color: var(--text-secondary);">
+            We found a saved layout from your previous visit. Would you like to restore it?
+        </div>
+        <div class="modal-foot">
+            <button class="btn-danger" onclick="GlobalApp.initNew()" style="margin-right:8px;">Start Fresh</button>
+            <button class="btn-primary" onclick="GlobalApp.loadFromStorage()">Restore</button>
+        </div>
+    </div>
 </div>
 <script>
 /**
+ * --- UTILS ---
+ */
+const Toast = {
+    show(msg, type='info') {
+        const container = document.getElementById('toastContainer');
+        const el = document.createElement('div');
+        el.className = `toast toast-${type}`;
+        el.innerHTML = `<span>${msg}</span>`;
+        container.appendChild(el);
+        setTimeout(() => {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(10px)';
+            setTimeout(() => el.remove(), 300);
+        }, 3000);
+    }
+};
+/**
+ * --- GLOBAL STATE MANAGER ---
  */
+const GlobalApp = {
     state: {
+        date: '',
+        mode: 'HIST',
+        columns: 3, // Default to 3
+        charts: {}, // ID -> { config: {}, instance: ChartJS, interval: null, lastData: null, col: int }
+        layout: []  // Array of Arrays [[id1, id2], [id3], [id4]]
     },
     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_v3')) {
+            const modal = document.getElementById('restoreModal');
+            modal.style.display = 'flex';
+            setTimeout(() => modal.classList.add('active'), 10);
         } else {
+            this.initNew();
         }
     },
     async loadDates() {
             const res = await fetch('/api/dates');
             const dates = await res.json();
             const sel = document.getElementById('globalDate');
+            // Populating ALL dates as requested
             sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+            if(dates.length) {
+                this.state.date = dates[0];
+                sel.value = dates[0];
+            }
+        } catch(e) { console.error("Dates error", e); Toast.show("Failed to load dates", "error"); }
     },
+    initNew() {
+        this.closeRestoreModal();
+        this.setLayout(3); // Default 3 cols
+        // Add one chart per column initially
+        this.addChart(0);
+        this.addChart(1);
+        this.addChart(2);
     },
+    closeRestoreModal() {
+        const modal = document.getElementById('restoreModal');
+        modal.classList.remove('active');
+        setTimeout(() => modal.style.display = 'none', 200);
     },
+    loadFromStorage() {
+        try {
+            const raw = localStorage.getItem('dc_state_v3');
+            const saved = JSON.parse(raw);
+            this.closeRestoreModal();
+            // Restore Global Settings
+            this.state.date = saved.date;
+            this.state.mode = saved.mode;
+            this.state.columns = saved.columns;
+            // Update UI Controls
+            const dateSel = document.getElementById('globalDate');
+            if(dateSel.querySelector(`option[value="${saved.date}"]`)) {
+                dateSel.value = saved.date;
+            }
+            this.updateModeUI();
+            this.updateLayoutUI();
+            // Rebuild Layout
+            this.setupGridDOM(); // Create columns
+            // Add Charts
+            saved.chartList.forEach(item => {
+                this.addChart(item.col, item.id, item.config);
+            });
+            Toast.show("Session Restored", "success");
+        } catch(e) {
+            console.error("Load failed", e);
+            Toast.show("Save file corrupted, starting new.", "error");
+            this.initNew();
+        }
+    },
+    saveToStorage() {
+        // Flatten layout for storage
+        const chartList = [];
+        Object.keys(this.state.charts).forEach(id => {
+            chartList.push({
+                id: id,
+                col: this.state.charts[id].col,
+                config: this.state.charts[id].config
+            });
+        });
+        const dump = {
+            date: this.state.date,
+            mode: this.state.mode,
+            columns: this.state.columns,
+            chartList: chartList
+        };
+        localStorage.setItem('dc_state_v3', JSON.stringify(dump));
     },
+    resetApp() {
+        if(!confirm("Are you sure you want to reset everything?")) return;
+        localStorage.removeItem('dc_state_v3');
+        location.reload();
     },
+    // --- LAYOUT LOGIC (PERSISTENCE) ---
+    setLayout(cols) {
+        if (cols === this.state.columns && document.getElementById('col-0')) return; // No change
+        this.state.columns = cols;
+        this.updateLayoutUI();
+        // 1. Get all existing chart elements
+        const existingCards = [];
+        Object.keys(this.state.charts).forEach(id => {
+            const el = document.getElementById(`card-${id}`);
+            if (el) existingCards.push({ id, el });
+        });
+        // 2. Setup New Grid Columns
+        this.setupGridDOM();
+        // 3. Re-distribute existing charts
+        existingCards.forEach((item, index) => {
+            const newColIdx = index % cols; // Round robin distribution
+            const colDiv = document.getElementById(`col-${newColIdx}`);
+            const addBtn = colDiv.querySelector('.column-add-btn');
+            // Move DOM Element (Persists Canvas State if handled correctly, though resize might be needed)
+            colDiv.insertBefore(item.el, addBtn);
+            // Update Internal State
+            this.state.charts[item.id].col = newColIdx;
+            // Trigger Resize on ChartJS instance just in case
+            const inst = this.state.charts[item.id].instance;
+            if(inst) inst.resize();
         });
+        this.saveToStorage();
     },
+    setupGridDOM() {
+        const container = document.getElementById('gridContainer');
+        container.innerHTML = ''; // Clear container
+        for (let i = 0; i < this.state.columns; i++) {
+            const colDiv = document.createElement('div');
+            colDiv.className = 'column';
+            colDiv.id = `col-${i}`;
+            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);
+        }
+    },
+    updateLayoutUI() {
+        document.querySelectorAll('.layout-btn').forEach(b => b.classList.remove('active'));
+        const btn = document.getElementById(`lay${this.state.columns}`);
+        if(btn) btn.classList.add('active');
+    },
+    // --- CHART MANAGEMENT ---
+    addChart(colIdx, forceId = null, forceConfig = null) {
+        const id = forceId || 'c_' + Date.now() + Math.random().toString(36).substr(2,5);
+        // Init State
+        if (!this.state.charts[id]) {
+            this.state.charts[id] = {
+                col: colIdx,
+                config: forceConfig || {},
+                instance: null,
+                interval: null,
+                lastData: null
+            };
+        }
+        // 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 (Restore or moved), plot from memory or fetch
+        if (forceConfig && forceConfig.root) {
+            // Delay slightly to ensure DOM is painted for Canvas
+            setTimeout(() => ChartLogic.plot(id), 0);
+        }
+        if (!forceId) this.saveToStorage();
+    },
+    removeChart(id) {
+        // Confirmation is annoying, maybe just do it? Or subtle check.
+        if(!confirm("Remove this chart?")) return;
+        ChartLogic.stopLive(id);
+        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
+        delete this.state.charts[id];
+        const el = document.getElementById(`card-${id}`);
+        if(el) el.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 offline"></span>
+                    <span>New Chart</span>
                 </div>
+                <div class="controls" style="gap:4px">
+                    <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 style="font-weight:500;">Not Configured</p>
+                    <button class="btn-ghost" onclick="ConfigModal.open('${id}')">Configure Chart</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 => {
+            this.state.charts[id].lastData = null; // Clear cache
+            ChartLogic.plot(id);
+        });
+        Toast.show(`Date changed to ${this.state.date}`);
     },
+    setMode(mode) {
+        this.state.mode = mode;
+        this.updateModeUI();
+        this.saveToStorage();
+        Object.keys(this.state.charts).forEach(id => {
+            if(mode === 'LIVE') ChartLogic.startLive(id);
+            else ChartLogic.stopLive(id);
+        });
+        Toast.show(`Switched to ${mode === 'LIVE' ? 'Live Auto-Refresh' : 'Historical Mode'}`);
     },
+    updateModeUI() {
+        document.getElementById('modeHist').classList.toggle('active', this.state.mode === 'HIST');
+        document.getElementById('modeLive').classList.toggle('active', this.state.mode === 'LIVE');
     }
 };
 /**
+ * --- CHART LOGIC & DATA ---
  */
+const ChartLogic = {
+    async plot(id, isUpdate=false) {
+        const chartData = GlobalApp.state.charts[id];
+        if (!chartData) return;
+        const cfg = chartData.config;
+        if (!cfg || !cfg.root) return; // Not configured
+        // UI Header Update
+        const titleEl = document.querySelector(`#card-${id} .card-title`);
+        const dotClass = GlobalApp.state.mode === 'LIVE' ? 'live' : 'hist';
         if(titleEl) {
             titleEl.innerHTML = `
+                <span class="status-dot ${dotClass}"></span>
+                ${cfg.root} <span style="color:var(--accent); margin-left:4px;">${cfg.expiry}</span>
+                <span class="card-meta">${cfg.instrument} · ${cfg.timeframe}</span>
             `;
         }
+        // Ensure DOM exists
+        const body = document.getElementById(`body-${id}`);
+        if (!body) return;
+        // Create Canvas if missing
+        if (!body.querySelector('canvas')) {
+            body.innerHTML = `<canvas id="canvas-${id}"></canvas>`;
         }
         try {
+            let data;
+            // Use Cache if simple redraw and not live update
+            if (!isUpdate && chartData.lastData) {
+                data = chartData.lastData;
+            } else {
+                // Fetch
+                if(isUpdate && titleEl) titleEl.querySelector('.status-dot').classList.add('retry');
+                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
+                    })
+                });
+                data = await res.json();
+                // Update Cache
+                if (data.labels && data.labels.length > 0) {
+                    chartData.lastData = data;
+                }
             }
+            if(data.error || !data.labels || data.labels.length === 0) {
+                if(GlobalApp.state.mode !== 'LIVE') {
+                    if(chartData.instance) chartData.instance.destroy();
+                    chartData.instance = null;
+                    body.innerHTML = '<div class="empty-state">No Data Available</div>';
+                }
                 return;
             }
+            // Success Visuals
+            if(titleEl) titleEl.querySelector('.status-dot').className = `status-dot ${dotClass}`;
             // Process Data
+            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');
         } else {
+            // Create New
             const hasRight = datasets.some(d => d.yAxisID === 'y1');
+            Chart.defaults.color = '#8b949e';
+            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: { usePointStyle: true, boxWidth: 6 } },
+                        tooltip: {
+                            backgroundColor: 'rgba(22, 27, 34, 0.95)',
+                            titleColor:'#e6edf3',
+                            bodyColor:'#e6edf3',
+                            borderColor:'#30363d',
+                            borderWidth:1,
+                            padding: 10,
+                            cornerRadius: 6
+                        }
                     },
                     scales: {
+                        x: {
+                            grid: { color: '#30363d', tickLength: 0, drawBorder: false, lineWidth: 0.5 },
+                            ticks: { maxTicksLimit: 8, maxRotation: 0 }
+                        },
+                        y: {
+                            type: 'linear', display: true, position: 'left',
+                            grid: { color: '#30363d', borderDash: [2, 2], drawBorder: false },
+                        },
+                        y1: {
+                            type: 'linear', display: hasRight, position: 'right',
+                            grid: { display: false, drawBorder: false }
+                        }
                     }
                 }
             });
         }
     },
+    startLive(id) {
+        this.stopLive(id);
+        this.plot(id);
+        GlobalApp.state.charts[id].interval = setInterval(() => {
+            this.plot(id, true);
+        }, 15000);
     },
+    stopLive(id) {
+        const c = GlobalApp.state.charts[id];
+        if(c && c.interval) {
+            clearInterval(c.interval);
+            c.interval = null;
+        }
     }
 };
 /**
+ * --- CONFIGURATION MODAL ---
  */
+const ConfigModal = {
     currentId: null,
+    isGlobal: false,
     async open(id) {
         this.currentId = id;
+        this.isGlobal = false;
+        const modal = document.querySelector('.modal');
+        document.getElementById('cfgModalTitle').textContent = "Configure Chart";
+        document.getElementById('configModalOverlay').style.display = 'flex';
+        // Trigger Animation
+        setTimeout(() => document.getElementById('configModalOverlay').classList.add('active'), 10);
+        document.getElementById('cfgForm').style.display = 'block';
+        document.getElementById('cfgLoader').style.display = 'none';
+        const c = GlobalApp.state.charts[id].config;
+        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';
+        const series = c.series && c.series.length ? c.series : GlobalApp.defaults;
         this.renderSeries(series);
+        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';
+        setTimeout(() => document.getElementById('configModalOverlay').classList.add('active'), 10);
+        document.getElementById('cfgForm').style.display = 'block';
+        // Hacky: hide other fields via CSS or just ignore them. For now, we leave them but they won't save.
+        this.renderSeries(GlobalApp.defaults);
     },
+    close() {
+        const overlay = document.getElementById('configModalOverlay');
+        overlay.classList.remove('active');
+        setTimeout(() => overlay.style.display = 'none', 200);
+    },
+    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 Symbol --</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 Expiry --</option>` + exps.map(e => `<option>${e}</option>`).join('');
+        if(preExp && exps.includes(preExp)) {
+            eSel.value = preExp;
+            await this.onExpChange(preInst);
         } else {
+             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);
              }
         }
     },
     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 Instrument --</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];
     },
     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="color-picker s-color">
+                <input type="text" value="${s.formula}" class="s-formula" placeholder="$P">
+                <input type="text" value="${s.label}" class="s-label" placeholder="Label">
+                <div class="select-wrapper">
+                    <select class="s-axis" style="min-width:50px; padding-right:15px;">
+                        <option value="left" ${s.axis==='left'?'selected':''}>L</option>
+                        <option value="right" ${s.axis==='right'?'selected':''}>R</option>
+                    </select>
+                </div>
+                <button class="icon-btn" style="color:var(--danger)" 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="color-picker s-color">
+            <input type="text" value="$P" class="s-formula">
+            <input type="text" value="New" class="s-label">
+            <div class="select-wrapper">
+                <select class="s-axis" style="min-width:50px; padding-right:15px;">
+                    <option value="left">L</option><option value="right">R</option>
+                </select>
+            </div>
+            <button class="icon-btn" style="color:var(--danger)" onclick="this.parentElement.remove()">✕</button>
         `;
+        container.appendChild(div);
+        div.scrollIntoView({ behavior: 'smooth' });
     },
     save() {
+        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;
+            Toast.show("Global Defaults Updated", "success");
+        } else {
+            const root = document.getElementById('cfgRoot').value;
+            const exp = document.getElementById('cfgExp').value;
+            const inst = document.getElementById('cfgInst').value;
+            if(!root || !exp || !inst) { Toast.show("Please select all symbol details", "warning"); 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;
+            // Clear cache to force redraw with new config
+            GlobalApp.state.charts[this.currentId].lastData = null;
+            GlobalApp.saveToStorage();
+            ChartLogic.plot(this.currentId);
+            Toast.show("Chart Configured", "success");
+        }
         this.close();
     }
 };
+window.onload = () => GlobalApp.init();
 </script>
 </body>