From b673b917fab22656976ea932bdf4dc5b03414fbf Mon Sep 17 00:00:00 2001
From: tab888 <tab10.acer@gmail.com>
Date: Thu, 5 Feb 2026 12:06:18 +0800
Subject: [PATCH] change instruments list from symbols to name

---
 templates/index.html | 689 ++++++++++++++++++++++---------------------
 1 file changed, 347 insertions(+), 342 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 731f836..f262da5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,343 +1,348 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Financial Dashboard</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
-    <style>
-        :root {
-            --header-bg: #4a5568;
-            --text-up: #28a745;
-            --text-down: #dc3545;
-        }
-
-        body { 
-            background-color: #f4f7f6; 
-            font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; 
-            margin: 0;
-            padding: 10px;
-        }
-
-        .card { 
-            border: none; 
-            border-radius: 12px; 
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
-            overflow: hidden;
-        }
-
-        .card-header {
-            background-color: white !important;
-            border-bottom: 1px solid #eee;
-            padding: 15px;
-        }
-
-        /* Zebra Striping Logic */
-        .table-striped tbody tr:nth-of-type(odd) {
-            background-color: rgba(0, 0, 0, 0.03);
-        }
-
-        /* Sticky Column for Mobile Scrolling */
-        .table-responsive { border-radius: 8px; }
-        
-        .table thead th {
-            background-color: var(--header-bg) !important;
-            color: white !important;
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            text-align: center;
-            white-space: nowrap;
-            padding: 12px 8px;
-            border: none;
-        }
-
-        .table td {
-            text-align: center;
-            vertical-align: middle;
-            font-size: 0.85rem;
-            white-space: nowrap;
-            border-color: #f1f1f1;
-        }
-
-        /* Keep Instrument Name fixed on the left while swiping */
-        .table td:first-child, .table th:first-child {
-            position: sticky;
-            left: 0;
-            z-index: 10;
-            text-align: left;
-            min-width: 140px;
-            background-color: white;
-            font-weight: 700;
-        }
-
-        /* Ensure zebra stripe works on sticky column */
-        .table-striped tbody tr:nth-of-type(odd) td:first-child {
-            background-color: #f9f9f9;
-        }
-
-        /* Custom UI Elements */
-        .btn-refresh {
-            background-color: #0d6efd;
-            color: white !important;
-            font-weight: 600;
-            border-radius: 6px;
-            padding: 6px 16px;
-            transition: 0.2s;
-        }
-
-        .text-up { color: var(--text-up); font-weight: 600; }
-        .text-down { color: var(--text-down); font-weight: 600; }
-        
-        .badge-kd { 
-            background-color: #6c757d; 
-            font-size: 0.75rem; 
-            padding: 5px 8px; 
-        }
-
-        #loading { display: none; margin-left: 10px; font-size: 0.8rem; color: #666; }
-        /* 1. Ensure the 52W column is wide enough for the progress bar */
-        .table td:nth-child(4), .table th:nth-child(4) {
-            min-width: 140px; 
-            text-align: left;
-        }
-
-        /* 2. Narrow the EMA and K/D columns since they only have small numbers */
-        .table td:nth-child(n+5), .table th:nth-child(n+5) {
-            min-width: 75px;
-        }
-
-        /* 3. Give the Instrument column a bit more breathing room if names are long */
-        .table td:first-child, .table th:first-child {
-            min-width: 180px; /* Increased from 140px */
-}
-    </style>
-</head>
-<body>
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="/">
-            <i class="bi bi-graph-up-arrow me-2"></i>Finance Suite
-        </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-            <span class="navbar-text text-light small d-none d-md-inline">
-                System Status: <span id="statusIndicator" class="text-warning">● Connecting...</span>
-            </span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav">
-                <li class="nav-item">
-                    <a class="nav-link" href="/">Dashboard</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/backtest">Backtester</a>
-                </li>
-            </ul>
-        </div>
-        <span class="navbar-text text-light small d-none d-md-inline">
-            System Status: <span class="text-success">● Online</span>
-        </span>
-    </div>
-</nav>
-<div class="container-fluid p-0">
-    <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
-            <h5 class="mb-0 text-dark">Portfolio Signals</h5>
-            <div class="d-flex align-items-center gap-2">
-                <span id="loading" class="me-2" style="display:none;">Updating...</span>
-                
-                <button class="btn btn-outline-secondary btn-sm" onclick="loadData()">
-                    <i class="bi bi-arrow-clockwise"></i> Refresh Table
-                </button>
-                
-                <button id="syncBtn" class="btn btn-primary btn-sm" onclick="runGlobalSync()">
-                    <i class="bi bi-cloud-download"></i> Sync New Data
-                </button>
-            </div>
-        </div>
-        <div class="card-body p-0">
-            <div class="table-responsive">
-                <table class="table table-hover table-striped mb-0">
-                    <thead>
-                        <tr>
-                            <th style="width: 25%;">Instrument</th>
-                            <th style="width: 10%;">Date</th> <th style="width: 10%;">Close</th>
-                            <th style="width: 10%;">Chg%</th>
-                            <th style="width: 10%;">52W Range</th> <th style="width: 8%;">20 EMA</th>
-                            <th style="width: 10%;">50 EMA</th>
-                            <th style="width: 10%;">100 EMA</th>
-                            <th style="width: 10%;">200 EMA</th>
-                            <th style="width: 5%;">K/D</th>
-                        </tr>
-                    </thead>
-                    <tbody id="tableBody">
-                        <tr><td colspan="9" class="p-4">Initializing data engine...</td></tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-</div>
-<script>
-    console.log("Script block loaded successfully.");
-
-    // --- 1. Helper Function for K/D Styling ---
-    function formatKD(val) {
-        if (!val || val === "N/A" || !val.includes('/')) return `<span class="text-muted">N/A</span>`;
-        const [k, d] = val.split('/').map(v => parseFloat(v));
-        let colorClass = 'text-dark';
-        if (k >= 80) colorClass = 'text-danger fw-bold';
-        else if (k <= 20) colorClass = 'text-success fw-bold';
-        return `<span class="${colorClass}">${val}</span>`;
-    }
-
-    // --- 2. EMA Formatter ---
-    const formatEma = (val) => {
-        if (val === "N/A" || val === null || val === undefined) return `<span class="text-muted">N/A</span>`;
-        const num = parseFloat(val);
-        const sign = num > 0 ? "+" : "";
-        const colorClass = num >= 0 ? 'text-up' : 'text-down';
-        return `<span class="${colorClass}">${sign}${num.toFixed(1)}%</span>`;
-    };
-
-    // --- 3. Load Table Data ---
-    async function loadData() {
-        console.log("Starting loadData...");
-        const loading = document.getElementById('loading');
-        const tbody = document.getElementById('tableBody');
-        if (loading) loading.style.display = 'inline';
-        
-        try {
-            const response = await fetch('/api/summary');
-            const data = await response.json();
-            
-            if (!data || data.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="10" class="p-4">No data found. Please run Sync.</td></tr>';
-                return;
-            }
-
-            // Get today's date string (YYYY-MM-DD) to check freshness
-            const todayStr = new Date().toISOString().split('T')[0];
-            let htmlContent = '';
-
-            data.forEach(item => {
-                // --- 1. Error Row Handling ---
-                if (item.error || !item.last_close) {
-                    htmlContent += `
-                        <tr>
-                            <td>${item.symbol || 'Unknown'}</td>
-                            <td colspan="9" class="text-center p-3">
-                                <span class="badge bg-warning text-dark"><i class="bi bi-exclamation-triangle"></i> Needs Sync</span>
-                                <small class="text-muted ms-2">Local CSV not found or corrupted.</small>
-                            </td>
-                        </tr>`;
-                    return;
-                }
-                let displayDate = "N/A";
-                if (item.last_date && item.last_date.includes('-')) {
-                    const parts = item.last_date.split('-'); // Splits "2026-01-30" into ["2026", "01", "30"]
-                    displayDate = `${parts[2]}/${parts[1]}`; // Combines into "30/01"
-                }
-                // --- 2. Calculations & Styling ---
-                const current = parseFloat(item.last_close) || 0;
-                const low = parseFloat(item.low_52) || 0;
-                const high = parseFloat(item.high_52) || 0;
-                
-                // 52W Range Progress Bar
-                let rangePct = high > low ? Math.min(Math.max(((current - low) / (high - low)) * 100, 0), 100) : 0;
-                const rangeColor = rangePct > 80 ? 'text-danger' : (rangePct < 20 ? 'text-success' : 'text-muted');
-
-                // Date Freshness check (highlight if date matches today)
-                const isFresh = item.last_date === todayStr;
-                const dateStyle = isFresh ? 'badge bg-success-subtle text-success border border-success-subtle' : 'text-muted';
-
-                // --- 3. Construct Row ---
-                htmlContent += `
-                    <tr>
-                        <td>
-                            <div class="fw-bold">${item.name || item.symbol}</div>                            
-                        </td>
-                        <td><span class="${dateStyle}" style="font-size: 0.75rem; padding: 2px 5px; border-radius: 4px;">${displayDate}</span></td>
-                        <td class="fw-bold">${item.last_close}</td>
-                        <td class="${item.change_pct >= 0 ? 'text-up' : 'text-down'}">
-                            ${item.change_pct >= 0 ? '+' : ''}${item.change_pct}%
-                        </td>
-                        <td class="${rangeColor} small">
-                            <div class="d-flex justify-content-between mb-1" style="min-width: 100px; font-size: 0.7rem;">
-                                <span>${item.low_52}</span><span>${item.high_52}</span>
-                            </div>
-                            <div class="progress" style="height: 4px;">
-                                <div class="progress-bar bg-primary" style="width: ${rangePct}%"></div>
-                            </div>
-                        </td>
-                        <td>${formatEma(item.last_ema20)}</td>
-                        <td>${formatEma(item.last_ema50)}</td>
-                        <td>${formatEma(item.last_ema100)}</td>
-                        <td>${formatEma(item.last_ema200)}</td>
-                        <td>${formatKD(item.kd_values)}</td>
-                    </tr>`;
-            });
-
-            // Batch update the DOM once
-            tbody.innerHTML = htmlContent;
-
-        } catch (error) {
-            console.error("Fetch error:", error);
-            tbody.innerHTML = '<tr><td colspan="10" class="text-danger p-4">Error loading summary. Check server logs.</td></tr>';
-        } finally {
-            if (loading) loading.style.display = 'none';
-        }
-    }
-
-    // --- 4. Global Sync ---
-    async function runGlobalSync() {
-        const syncBtn = document.getElementById('syncBtn');
-        const loading = document.getElementById('loading');
-        if (!syncBtn) return;
-
-        syncBtn.disabled = true;
-        const originalText = syncBtn.innerHTML;
-        syncBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Syncing...`;
-        if (loading) loading.style.display = 'inline';
-
-        try {
-            const response = await fetch('/api/sync', { method: 'POST' });
-            if (!response.ok) throw new Error("Sync failed");
-            await loadData();
-            alert("Sync Complete!");
-        } catch (error) {
-            console.error("Sync error:", error);
-            alert("Sync failed. Check terminal.");
-        } finally {
-            syncBtn.disabled = false;
-            syncBtn.innerHTML = originalText;
-            if (loading) loading.style.display = 'none';
-        }
-    }
-    // This checks if the Flask server is responding every 30 seconds
-    async function checkStatus() {
-        const indicator = document.getElementById('statusIndicator');
-        try {
-            const response = await fetch('/api/summary'); // Or a dedicated /health endpoint
-            if (response.ok) {
-                indicator.innerHTML = '● Online';
-                indicator.className = 'text-success';
-            } else {
-                throw new Error();
-            }
-        } catch (e) {
-            indicator.innerHTML = '● Offline';
-            indicator.className = 'text-danger';
-        }
-    }
-
-    setInterval(checkStatus, 300000); 
-    checkStatus(); // Initial check
-
-    // --- 5. Initial Load ---
-    window.addEventListener('load', loadData);
-</script>
-
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}?v=1">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}?v=1">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}?v=1">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}?v=1">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}?v=1">
+    <title>Financial Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <style>
+        :root {
+            --header-bg: #4a5568;
+            --text-up: #28a745;
+            --text-down: #dc3545;
+        }
+
+        body { 
+            background-color: #f4f7f6; 
+            font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; 
+            margin: 0;
+            padding: 10px;
+        }
+
+        .card { 
+            border: none; 
+            border-radius: 12px; 
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
+            overflow: hidden;
+        }
+
+        .card-header {
+            background-color: white !important;
+            border-bottom: 1px solid #eee;
+            padding: 15px;
+        }
+
+        /* Zebra Striping Logic */
+        .table-striped tbody tr:nth-of-type(odd) {
+            background-color: rgba(0, 0, 0, 0.03);
+        }
+
+        /* Sticky Column for Mobile Scrolling */
+        .table-responsive { border-radius: 8px; }
+        
+        .table thead th {
+            background-color: var(--header-bg) !important;
+            color: white !important;
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            text-align: center;
+            white-space: nowrap;
+            padding: 12px 8px;
+            border: none;
+        }
+
+        .table td {
+            text-align: center;
+            vertical-align: middle;
+            font-size: 0.85rem;
+            white-space: nowrap;
+            border-color: #f1f1f1;
+        }
+
+        /* Keep Instrument Name fixed on the left while swiping */
+        .table td:first-child, .table th:first-child {
+            position: sticky;
+            left: 0;
+            z-index: 10;
+            text-align: left;
+            min-width: 140px;
+            background-color: white;
+            font-weight: 700;
+        }
+
+        /* Ensure zebra stripe works on sticky column */
+        .table-striped tbody tr:nth-of-type(odd) td:first-child {
+            background-color: #f9f9f9;
+        }
+
+        /* Custom UI Elements */
+        .btn-refresh {
+            background-color: #0d6efd;
+            color: white !important;
+            font-weight: 600;
+            border-radius: 6px;
+            padding: 6px 16px;
+            transition: 0.2s;
+        }
+
+        .text-up { color: var(--text-up); font-weight: 600; }
+        .text-down { color: var(--text-down); font-weight: 600; }
+        
+        .badge-kd { 
+            background-color: #6c757d; 
+            font-size: 0.75rem; 
+            padding: 5px 8px; 
+        }
+
+        #loading { display: none; margin-left: 10px; font-size: 0.8rem; color: #666; }
+        /* 1. Ensure the 52W column is wide enough for the progress bar */
+        .table td:nth-child(4), .table th:nth-child(4) {
+            min-width: 140px; 
+            text-align: left;
+        }
+
+        /* 2. Narrow the EMA and K/D columns since they only have small numbers */
+        .table td:nth-child(n+5), .table th:nth-child(n+5) {
+            min-width: 75px;
+        }
+
+        /* 3. Give the Instrument column a bit more breathing room if names are long */
+        .table td:first-child, .table th:first-child {
+            min-width: 180px; /* Increased from 140px */
+}
+    </style>
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">
+            <i class="bi bi-graph-up-arrow me-2"></i>Finance Suite
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <span class="navbar-text text-light small d-none d-md-inline">
+                System Status: <span id="statusIndicator" class="text-warning">● Connecting...</span>
+            </span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="/">Dashboard</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/backtest">Backtester</a>
+                </li>
+            </ul>
+        </div>
+        <span class="navbar-text text-light small d-none d-md-inline">
+            System Status: <span class="text-success">● Online</span>
+        </span>
+    </div>
+</nav>
+<div class="container-fluid p-0">
+    <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h5 class="mb-0 text-dark">Portfolio Signals</h5>
+            <div class="d-flex align-items-center gap-2">
+                <span id="loading" class="me-2" style="display:none;">Updating...</span>
+                
+                <button class="btn btn-outline-secondary btn-sm" onclick="loadData()">
+                    <i class="bi bi-arrow-clockwise"></i> Refresh Table
+                </button>
+                
+                <button id="syncBtn" class="btn btn-primary btn-sm" onclick="runGlobalSync()">
+                    <i class="bi bi-cloud-download"></i> Sync New Data
+                </button>
+            </div>
+        </div>
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table table-hover table-striped mb-0">
+                    <thead>
+                        <tr>
+                            <th style="width: 25%;">Instrument</th>
+                            <th style="width: 10%;">Date</th> <th style="width: 10%;">Close</th>
+                            <th style="width: 10%;">Chg%</th>
+                            <th style="width: 10%;">52W Range</th> <th style="width: 8%;">20 EMA</th>
+                            <th style="width: 10%;">50 EMA</th>
+                            <th style="width: 10%;">100 EMA</th>
+                            <th style="width: 10%;">200 EMA</th>
+                            <th style="width: 5%;">K/D</th>
+                        </tr>
+                    </thead>
+                    <tbody id="tableBody">
+                        <tr><td colspan="9" class="p-4">Initializing data engine...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    console.log("Script block loaded successfully.");
+
+    // --- 1. Helper Function for K/D Styling ---
+    function formatKD(val) {
+        if (!val || val === "N/A" || !val.includes('/')) return `<span class="text-muted">N/A</span>`;
+        const [k, d] = val.split('/').map(v => parseFloat(v));
+        let colorClass = 'text-dark';
+        if (k >= 80) colorClass = 'text-danger fw-bold';
+        else if (k <= 20) colorClass = 'text-success fw-bold';
+        return `<span class="${colorClass}">${val}</span>`;
+    }
+
+    // --- 2. EMA Formatter ---
+    const formatEma = (val) => {
+        if (val === "N/A" || val === null || val === undefined) return `<span class="text-muted">N/A</span>`;
+        const num = parseFloat(val);
+        const sign = num > 0 ? "+" : "";
+        const colorClass = num >= 0 ? 'text-up' : 'text-down';
+        return `<span class="${colorClass}">${sign}${num.toFixed(1)}%</span>`;
+    };
+
+    // --- 3. Load Table Data ---
+    async function loadData() {
+        console.log("Starting loadData...");
+        const loading = document.getElementById('loading');
+        const tbody = document.getElementById('tableBody');
+        if (loading) loading.style.display = 'inline';
+        
+        try {
+            const response = await fetch('/api/summary');
+            const data = await response.json();
+            
+            if (!data || data.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="10" class="p-4">No data found. Please run Sync.</td></tr>';
+                return;
+            }
+
+            // Get today's date string (YYYY-MM-DD) to check freshness
+            const todayStr = new Date().toISOString().split('T')[0];
+            let htmlContent = '';
+
+            data.forEach(item => {
+                // --- 1. Error Row Handling ---
+                if (item.error || !item.last_close) {
+                    htmlContent += `
+                        <tr>
+                            <td>${item.name || 'Unknown'}</td>
+                            <td colspan="9" class="text-center p-3">
+                                <span class="badge bg-warning text-dark"><i class="bi bi-exclamation-triangle"></i> Needs Sync</span>
+                                <small class="text-muted ms-2">Local CSV not found or corrupted.</small>
+                            </td>
+                        </tr>`;
+                    return;
+                }
+                let displayDate = "N/A";
+                if (item.last_date && item.last_date.includes('-')) {
+                    const parts = item.last_date.split('-'); // Splits "2026-01-30" into ["2026", "01", "30"]
+                    displayDate = `${parts[2]}/${parts[1]}`; // Combines into "30/01"
+                }
+                // --- 2. Calculations & Styling ---
+                const current = parseFloat(item.last_close) || 0;
+                const low = parseFloat(item.low_52) || 0;
+                const high = parseFloat(item.high_52) || 0;
+                
+                // 52W Range Progress Bar
+                let rangePct = high > low ? Math.min(Math.max(((current - low) / (high - low)) * 100, 0), 100) : 0;
+                const rangeColor = rangePct > 80 ? 'text-danger' : (rangePct < 20 ? 'text-success' : 'text-muted');
+
+                // Date Freshness check (highlight if date matches today)
+                const isFresh = item.last_date === todayStr;
+                const dateStyle = isFresh ? 'badge bg-success-subtle text-success border border-success-subtle' : 'text-muted';
+
+                // --- 3. Construct Row ---
+                htmlContent += `
+                    <tr>
+                        <td>
+                            <div class="fw-bold">${item.name || item.symbol}</div>                            
+                        </td>
+                        <td><span class="${dateStyle}" style="font-size: 0.75rem; padding: 2px 5px; border-radius: 4px;">${displayDate}</span></td>
+                        <td class="fw-bold">${item.last_close}</td>
+                        <td class="${item.change_pct >= 0 ? 'text-up' : 'text-down'}">
+                            ${item.change_pct >= 0 ? '+' : ''}${item.change_pct}%
+                        </td>
+                        <td class="${rangeColor} small">
+                            <div class="d-flex justify-content-between mb-1" style="min-width: 100px; font-size: 0.7rem;">
+                                <span>${item.low_52}</span><span>${item.high_52}</span>
+                            </div>
+                            <div class="progress" style="height: 4px;">
+                                <div class="progress-bar bg-primary" style="width: ${rangePct}%"></div>
+                            </div>
+                        </td>
+                        <td>${formatEma(item.last_ema20)}</td>
+                        <td>${formatEma(item.last_ema50)}</td>
+                        <td>${formatEma(item.last_ema100)}</td>
+                        <td>${formatEma(item.last_ema200)}</td>
+                        <td>${formatKD(item.kd_values)}</td>
+                    </tr>`;
+            });
+
+            // Batch update the DOM once
+            tbody.innerHTML = htmlContent;
+
+        } catch (error) {
+            console.error("Fetch error:", error);
+            tbody.innerHTML = '<tr><td colspan="10" class="text-danger p-4">Error loading summary. Check server logs.</td></tr>';
+        } finally {
+            if (loading) loading.style.display = 'none';
+        }
+    }
+
+    // --- 4. Global Sync ---
+    async function runGlobalSync() {
+        const syncBtn = document.getElementById('syncBtn');
+        const loading = document.getElementById('loading');
+        if (!syncBtn) return;
+
+        syncBtn.disabled = true;
+        const originalText = syncBtn.innerHTML;
+        syncBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Syncing...`;
+        if (loading) loading.style.display = 'inline';
+
+        try {
+            const response = await fetch('/api/sync', { method: 'POST' });
+            if (!response.ok) throw new Error("Sync failed");
+            await loadData();
+            alert("Sync Complete!");
+        } catch (error) {
+            console.error("Sync error:", error);
+            alert("Sync failed. Check terminal.");
+        } finally {
+            syncBtn.disabled = false;
+            syncBtn.innerHTML = originalText;
+            if (loading) loading.style.display = 'none';
+        }
+    }
+    // This checks if the Flask server is responding every 30 seconds
+    async function checkStatus() {
+        const indicator = document.getElementById('statusIndicator');
+        try {
+            const response = await fetch('/api/summary'); // Or a dedicated /health endpoint
+            if (response.ok) {
+                indicator.innerHTML = '● Online';
+                indicator.className = 'text-success';
+            } else {
+                throw new Error();
+            }
+        } catch (e) {
+            indicator.innerHTML = '● Offline';
+            indicator.className = 'text-danger';
+        }
+    }
+
+    setInterval(checkStatus, 300000); 
+    checkStatus(); // Initial check
+
+    // --- 5. Initial Load ---
+    window.addEventListener('load', loadData);
+</script>
+
+</body>
 </html>
\ No newline at end of file
