From 8531a3b5955b4658bb4fb5b863f56c769e05d05f Mon Sep 17 00:00:00 2001
From: bizwings <vincent@bizwingsinc.com>
Date: Fri, 3 Jul 2026 16:32:42 +0800
Subject: [PATCH] feat: dashboard UX optimization + real-time backend stats +
 health probe fix + pool shuffle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- dashboard.html: major UX overhaul (+657/-308 lines)
- server.py: /api/admin/backends now returns real-time RPM and model_count
- pool_manager.py: random.shuffle backends for load distribution
- config.py: health probe endpoint /v1/models → /models
- docker-compose.yml: add SIDECAR_PRIMARY_WAIT_MAX_RETRIES=6

BIZ-52 post-review optimizations
---
 config.py          |   2 +-
 dashboard.html     | 944 ++++++++++++++++++++++++++++++---------------
 docker-compose.yml |   1 +
 pool_manager.py    |   3 +
 server.py          |  19 +-
 5 files changed, 659 insertions(+), 310 deletions(-)

diff --git a/config.py b/config.py
index b1f3d75..1e8ce3b 100644
--- a/config.py
+++ b/config.py
@@ -39,7 +39,7 @@ class Config:
     # Health check
     health_check_interval_seconds: int = 60
     health_check_timeout_seconds: int = 10
-    health_probe_endpoint: str = "/v1/models"
+    health_probe_endpoint: str = "/models"
 
     # Admin auth
     admin_token: str = ""
diff --git a/dashboard.html b/dashboard.html
index f059031..1f01bae 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -4,246 +4,350 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sidecar V2 — Provider Pool Dashboard</title>
-<!-- Primary: jsDelivr CDN -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-<!-- Fallback: local static copy for offline/intranet deployments -->
 <script>
 (function() {
   var check = function() {
     if (typeof Chart === 'undefined') {
       var s = document.createElement('script');
       s.src = '/static/chart.umd.min.js';
-      s.onerror = function() {
-        console.warn('Chart.js unavailable (CDN + local both failed). Charts disabled.');
-      };
+      s.onerror = function() { console.warn('Chart.js unavailable (CDN + local both failed). Charts disabled.'); };
       document.head.appendChild(s);
     }
   };
-  // Check after CDN script has had a chance to load
   setTimeout(check, 2000);
 })();
 </script>
 <style>
   :root {
-    --bg: #0f1117;
-    --card-bg: #1a1d28;
-    --border: #2a2d3a;
-    --text: #e0e0e0;
-    --text-dim: #888;
-    --green: #23d160;
-    --yellow: #ffdd57;
-    --red: #ff3860;
-    --blue: #3273dc;
-    --purple: #b86bff;
-    --cyan: #00d1b2;
-    --orange: #ff8533;
+    --bg: #0f1117; --bg2: #1a1d27; --bg3: #232734;
+    --border: #2e3344; --text: #e0e2e8; --text2: #9ca3af;
+    --primary: #3B82F6; --primary2: #2563EB;
+    --green: #22c55e; --yellow: #eab308; --red: #ef4444;
+    --cooling: #f59e0b; --purple: #a855f7; --cyan: #06b6d4;
+    --radius: 8px;
   }
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    min-height: 100vh;
+    background: var(--bg); color: var(--text);
+    display: flex; height: 100vh; overflow: hidden;
   }
 
-  /* Layout */
-  .app { display: flex; height: 100vh; }
-  .sidebar {
-    width: 220px; background: var(--card-bg); border-right: 1px solid var(--border);
-    padding: 20px 0; display: flex; flex-direction: column;
+  /* Sidebar */
+  aside {
+    width: 240px; background: var(--bg2); border-right: 1px solid var(--border);
+    display: flex; flex-direction: column; flex-shrink: 0;
   }
-  .sidebar h2 { padding: 0 20px 20px; font-size: 16px; color: var(--cyan); border-bottom: 1px solid var(--border); }
-  .sidebar nav { flex: 1; padding: 10px 0; }
-  .sidebar nav a {
-    display: block; padding: 10px 20px; color: var(--text-dim); text-decoration: none;
-    font-size: 13px; transition: 0.2s;
+  .logo { padding: 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
+  .logo-icon {
+    width: 32px; height: 32px; background: var(--primary); border-radius: 8px;
+    display: flex; align-items: center; justify-content: center; font-size: 16px;
   }
-  .sidebar nav a:hover, .sidebar nav a.active { color: var(--text); background: rgba(255,255,255,0.05); }
-  .sidebar .status-bar { padding: 15px 20px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); }
+  .logo h1 { font-size: 16px; font-weight: 600; }
+  .logo span { font-size: 11px; color: var(--text2); }
+  nav { flex: 1; padding: 12px 8px; }
+  nav a {
+    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
+    border-radius: var(--radius); text-decoration: none; color: var(--text2);
+    font-size: 14px; transition: all .15s; cursor: pointer;
+  }
+  nav a:hover { background: var(--bg3); color: var(--text); }
+  nav a.active { background: var(--primary2); color: #fff; }
+  .nav-badge { margin-left: auto; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
+  .nav-badge.ok { background: var(--green); color: #000; }
+  .nav-badge.warn { background: var(--yellow); color: #000; }
 
-  .main { flex: 1; overflow-y: auto; padding: 24px; }
+  .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text2); }
+  .sidebar-footer .status { display: flex; align-items: center; gap: 6px; }
+  .sidebar-footer .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
+
+  /* Main */
+  main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+  header {
+    padding: 16px 24px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between; background: var(--bg2);
+  }
+  header .tl h2 { font-size: 18px; font-weight: 600; }
+  header .tl p { font-size: 12px; color: var(--text2); margin-top: 2px; }
+  header .tr { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text2); }
+
+  .content { flex: 1; overflow-y: auto; padding: 24px; }
   .page { display: none; }
   .page.active { display: block; }
 
-  /* Dashboard Cards */
-  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
-  .card {
-    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px;
+  /* Stat Cards */
+  .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
+  .stat-card {
+    background: var(--bg2); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 20px; position: relative;
   }
-  .card .label { font-size: 12px; color: var(--text-dim); text-transform: uppercase;letter-spacing:0.5px;margin-bottom:6px; }
-  .card .value { font-size: 28px; font-weight: 700; }
-  .card .sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+  .stat-card .label { font-size: 12px; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
+  .stat-card .value { font-size: 28px; font-weight: 700; }
+  .stat-card .sub { font-size: 12px; color: var(--text2); margin-top: 4px; }
 
-  .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-  .chart-card {
-    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px;
-  }
-  .chart-card h3 { font-size: 14px; margin-bottom: 12px; color: var(--text-dim); }
-  .chart-card canvas { max-height: 250px; }
-
-  /* Pool Cards */
+  /* Pool Grid */
   .pool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
   .pool-card {
-    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px;
+    background: var(--bg2); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 18px;
   }
   .pool-card h3 { font-size: 15px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
-  .pool-card h3.primary { color: var(--blue); }
-  .pool-card h3.fallback { color: var(--orange); }
-  .pool-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+  .pool-card h3.primary { color: var(--primary); }
+  .pool-card h3.fallback { color: var(--yellow); }
+  .pool-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
   .pool-stat { text-align: center; }
   .pool-stat .num { font-size: 22px; font-weight: 700; }
-  .pool-stat .lbl { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
+  .pool-stat .lbl { font-size: 11px; color: var(--text2); margin-top: 2px; }
   .pool-stat.healthy .num { color: var(--green); }
   .pool-stat.cooling .num { color: var(--yellow); }
   .pool-stat.error .num { color: var(--red); }
-  .pool-stat.total .num { color: var(--purple); }
+  .pool-stat.total .num { color: var(--primary); }
 
   /* Tables */
-  table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: 8px; overflow: hidden; }
-  th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); }
+  table { width: 100%; border-collapse: collapse; background: var(--bg2); border-radius: var(--radius); overflow: hidden; }
+  th {
+    text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
+    letter-spacing: 0.5px; color: var(--text2); background: rgba(255,255,255,0.03);
+    border-bottom: 1px solid var(--border); font-weight: 500;
+  }
   td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
   tr:last-child td { border-bottom: none; }
   tr:hover { background: rgba(255,255,255,0.02); }
+  /* Expandable sub-row */
+  .sub-row { background: var(--bg3); }
+  .sub-row td { padding: 0; }
+  .sub-row-content { padding: 8px 12px 12px; }
+  .model-mini-table { width: 100%; }
+  .model-mini-table th { font-size: 10px; padding: 4px 8px; background: transparent; border-bottom: 1px solid var(--border); }
+  .model-mini-table td { padding: 4px 8px; font-size: 11px; border-bottom: 1px solid rgba(46,51,68,0.5); }
+  .model-mini-table tr:last-child td { border-bottom: none; }
+
+  /* Badges */
   .badge {
-    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
+    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
+    border-radius: 20px; font-size: 11px; font-weight: 600;
   }
-  .badge.healthy { background: rgba(35,209,96,0.15); color: var(--green); }
-  .badge.cooling { background: rgba(255,221,87,0.15); color: var(--yellow); }
-  .badge.error { background: rgba(255,56,96,0.15); color: var(--red); }
-  .badge.disabled { background: rgba(136,136,136,0.15); color: var(--text-dim); }
-  .badge.primary { background: rgba(50,115,220,0.15); color: var(--blue); }
-  .badge.fallback { background: rgba(255,133,51,0.15); color: var(--orange); }
+  .badge.healthy { background: rgba(34,197,94,0.15); color: var(--green); }
+  .badge.cooling { background: rgba(245,158,11,0.15); color: var(--cooling); }
+  .badge.error   { background: rgba(239,68,68,0.15); color: var(--red); }
+  .badge.disabled { background: rgba(156,163,175,0.15); color: var(--text2); }
+  .badge.primary  { background: rgba(59,130,246,0.15); color: var(--primary); }
+  .badge.fallback { background: rgba(234,179,8,0.15); color: var(--yellow); }
+
+  /* Tag */
+  .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; margin-right: 3px; }
+  .tag.true { background: rgba(34,197,94,0.15); color: var(--green); }
+  .tag.false { background: rgba(156,163,175,0.15); color: var(--text2); }
+
+  /* Progress Bar */
+  .progress-bar { width: 80px; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
+  .progress-bar .fill { height: 100%; border-radius: 3px; transition: width .3s; }
+  .fill.low { background: var(--green); } .fill.mid { background: var(--yellow); } .fill.high { background: var(--red); }
 
   /* Buttons */
   .btn {
-    padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 600;
-    transition: 0.2s;
+    display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px;
+    border-radius: var(--radius); border: none; cursor: pointer;
+    font-size: 12px; font-weight: 500; transition: all .15s; white-space: nowrap;
   }
-  .btn-primary { background: var(--blue); color: #fff; }
-  .btn-primary:hover { opacity: 0.85; }
-  .btn-danger { background: var(--red); color: #fff; }
-  .btn-danger:hover { opacity: 0.85; }
-  .btn-sm { padding: 3px 10px; font-size: 11px; }
+  .btn-primary { background: var(--primary); color: #fff; }
+  .btn-primary:hover { background: var(--primary2); }
   .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
-  .btn-outline:hover { background: rgba(255,255,255,0.05); }
+  .btn-outline:hover { background: var(--bg3); }
+  .btn-sm { padding: 4px 10px; font-size: 11px; }
+  .btn-action {
+    background: transparent; border: 1px solid var(--border); color: var(--text);
+    padding: 3px 10px; font-size: 11px; border-radius: var(--radius); cursor: pointer;
+    transition: all .15s; white-space: nowrap;
+  }
+  .btn-action:hover { background: var(--bg3); }
+  .btn-pause { border-color: var(--yellow); color: var(--yellow); }
+  .btn-pause:hover { background: rgba(234,179,8,0.12); }
+  .btn-resume { border-color: var(--green); color: var(--green); }
+  .btn-resume:hover { background: rgba(34,197,94,0.12); }
+  .btn-edit { border-color: var(--primary); color: var(--primary); }
+  .btn-edit:hover { background: rgba(59,130,246,0.12); }
+  .btn-del { border-color: var(--red); color: var(--red); }
+  .btn-del:hover { background: rgba(239,68,68,0.1); }
 
-  .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
-  .section-header h3 { font-size: 15px; }
+  .btn-group { display: flex; gap: 5px; flex-wrap: wrap; }
+
+  .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
+  .section-header h3 { font-size: 15px; font-weight: 600; }
+
+  /* Expand Icon */
+  .expand-icon { font-size: 12px; transition: transform .2s; display: inline-block; cursor: pointer; }
+  .expand-icon.open { transform: rotate(90deg); }
+
+  /* Charts */
+  .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
+  .chart-box {
+    background: var(--bg2); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 16px;
+  }
+  .chart-box h4 { font-size: 13px; margin-bottom: 12px; color: var(--text2); }
+  .chart-box canvas { max-height: 220px; }
+  .chart-full { grid-column: span 2; }
 
   /* Modal */
-  .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 100; justify-content: center; align-items: center; }
-  .modal-overlay.active { display: flex; }
-  .modal { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 560px; max-height: 80vh; overflow-y: auto; }
-  .modal h3 { margin-bottom: 16px; font-size: 16px; }
-  .form-group { margin-bottom: 12px; }
-  .form-group label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
-  .form-group input, .form-group select, .form-group textarea {
-    width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border);
-    border-radius: 6px; color: var(--text); font-size: 13px;
+  .modal-overlay {
+    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+    z-index: 100; align-items: flex-start; justify-content: center; padding-top: 40px;
   }
-  .form-group textarea { min-height: 80px; font-family: monospace; font-size: 12px; }
+  .modal-overlay.show { display: flex; }
+  .modal {
+    background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
+    width: 720px; max-height: 85vh; overflow-y: auto; padding: 24px;
+  }
+  .modal h3 { font-size: 16px; margin-bottom: 20px; }
+  .form-group { margin-bottom: 14px; }
+  .form-group label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 5px; font-weight: 500; }
+  .form-group input, .form-group select, .form-group textarea {
+    width: 100%; background: var(--bg3); border: 1px solid var(--border);
+    color: var(--text); padding: 8px 12px; border-radius: var(--radius); font-size: 13px;
+  }
+  .form-group textarea { min-height: 120px; font-family: 'SF Mono','Cascadia Code',monospace; font-size: 12px; }
   .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-  .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
-  .model-mapping-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
-  .model-mapping-row input { flex: 1; }
+  .form-row.three { grid-template-columns: 1fr 1fr 1fr; }
+  .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
 
   /* Utility */
   .text-green { color: var(--green); }
   .text-red { color: var(--red); }
-  .text-dim { color: var(--text-dim); }
+  .text-dim { color: var(--text2); }
   .mb-16 { margin-bottom: 16px; }
   .mb-24 { margin-bottom: 24px; }
+  .mt-24 { margin-top: 24px; }
+  .section-title { font-size: 15px; font-weight: 600; margin: 24px 0 12px; }
+
+  /* Refresh */
+  .refresh-indicator { font-size: 11px; color: var(--text2); }
 
   @media (max-width: 768px) {
-    .charts, .pool-grid { grid-template-columns: 1fr; }
-    .sidebar { display: none; }
+    .stat-cards, .pool-grid, .chart-grid { grid-template-columns: 1fr; }
+    .chart-full { grid-column: span 1; }
+    aside { display: none; }
+    .btn-group { width: 100%; }
   }
 </style>
 </head>
 <body>
-<div class="app">
-  <!-- Sidebar -->
-  <aside class="sidebar">
-    <h2>🚀 Sidecar V2</h2>
-    <nav>
-      <a href="#" data-page="dashboard" class="active">📊 Dashboard</a>
-      <a href="#" data-page="providers">🔌 Providers</a>
-      <a href="#" data-page="usage">📈 Usage Stats</a>
-      <a href="#" data-page="cooldown">🧊 Cooldown Log</a>
-    </nav>
-    <div class="status-bar" id="status-bar">Connected · Sidecar V2</div>
-  </aside>
+<aside>
+  <div class="logo">
+    <div class="logo-icon">⚡</div>
+    <div><h1>Sidecar V2</h1><span>Provider Pool Manager</span></div>
+  </div>
+  <nav>
+    <a class="active" data-page="dashboard">📊 Dashboard</a>
+    <a data-page="providers">🔌 Providers <span class="nav-badge ok" id="provider-count">0</span></a>
+    <a data-page="usage">📈 Usage Stats</a>
+    <a data-page="cooldown">🧊 Cooldown Log</a>
+  </nav>
+  <div class="sidebar-footer">
+    <div class="status"><span class="dot" id="status-dot"></span> <span id="status-text">Connected</span></div>
+    <div id="uptime-text">Uptime: --</div>
+  </div>
+</aside>
 
-  <!-- Main Content -->
-  <main class="main">
-    <!-- Dashboard Page -->
-    <div class="page active" id="page-dashboard">
-      <div class="cards" id="stat-cards"></div>
-      <div class="pool-grid" id="pool-grid"></div>
-      <div class="charts" id="charts"></div>
-    </div>
+<main>
+<header>
+  <div class="tl"><h2 id="page-title">📊 Dashboard</h2><p id="page-sub">Provider 池全局概览</p></div>
+  <div class="tr">
+    <span id="last-refresh">--</span>
+    <button class="btn btn-sm btn-outline" onclick="refreshAll()">🔄 Refresh</button>
+    <button class="btn btn-sm btn-outline" onclick="setAdminToken()" title="Set Admin Token">🔑</button>
+  </div>
+</header>
 
-    <!-- Providers Page -->
-    <div class="page" id="page-providers">
-      <div class="section-header">
-        <h3>Provider Backends</h3>
-        <button class="btn btn-primary" onclick="showAddBackend()">+ Add Provider</button>
-      </div>
-      <table id="backends-table">
-        <thead>
-          <tr><th>Name</th><th>Label</th><th>Pool</th><th>Status</th><th>RPM</th><th>Models</th><th>Actions</th></tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-    </div>
+<div class="content">
 
-    <!-- Usage Page -->
-    <div class="page" id="page-usage">
-      <div class="section-header"><h3>Hourly Usage</h3></div>
-      <div class="mb-16">
-        <select id="usage-backend-filter" onchange="loadUsage()" class="btn btn-outline btn-sm">
-          <option value="">All Backends</option>
-        </select>
-      </div>
-      <table id="usage-table">
-        <thead>
-          <tr><th>Hour</th><th>Backend</th><th>Model</th><th>Requests</th><th>Errors</th><th>Tokens</th><th>Cost</th><th>Avg Latency</th></tr>
-        </thead>
-        <tbody></tbody>
-      </table>
+<!-- ====== Dashboard Page ====== -->
+<div class="page active" id="page-dashboard">
+  <!-- Stat Cards -->
+  <div class="stat-cards" id="stat-cards">
+    <div class="stat-card"><div class="label">Total Requests</div><div class="value" id="stat-req">--</div><div class="sub">Error rate: <span id="stat-err">--</span></div></div>
+    <div class="stat-card"><div class="label">Total Tokens</div><div class="value" id="stat-tokens">--</div><div class="sub">Prompt: <span id="stat-prompt">--</span> · Completion: <span id="stat-compl">--</span></div></div>
+    <div class="stat-card"><div class="label">Total Cost</div><div class="value" style="color:var(--yellow)" id="stat-cost">--</div><div class="sub">USD</div></div>
+    <div class="stat-card"><div class="label">Uptime</div><div class="value" id="stat-uptime">--</div><div class="sub">Sidecar V2</div></div>
+  </div>
 
-      <div class="section-header mt-24 mb-16"><h3>Daily Aggregation</h3></div>
-      <table id="daily-table">
-        <thead>
-          <tr><th>Date</th><th>Pool</th><th>Requests</th><th>Errors</th><th>Tokens</th><th>Cost</th><th>Backends</th></tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-    </div>
+  <!-- Pool Summary -->
+  <div class="pool-grid" id="pool-grid">
+    <div class="pool-card"><h3 class="primary">Primary Pool</h3><div class="pool-stats"><div class="pool-stat total"><div class="num">--</div><div class="lbl">Total</div></div><div class="pool-stat healthy"><div class="num">--</div><div class="lbl">Healthy</div></div><div class="pool-stat cooling"><div class="num">--</div><div class="lbl">Cooling</div></div><div class="pool-stat error"><div class="num">--</div><div class="lbl">Error</div></div></div></div>
+    <div class="pool-card"><h3 class="fallback">Fallback Pool</h3><div class="pool-stats"><div class="pool-stat total"><div class="num">--</div><div class="lbl">Total</div></div><div class="pool-stat healthy"><div class="num">--</div><div class="lbl">Healthy</div></div><div class="pool-stat cooling"><div class="num">--</div><div class="lbl">Cooling</div></div><div class="pool-stat error"><div class="num">--</div><div class="lbl">Error</div></div></div></div>
+  </div>
 
-    <!-- Cooldown Page -->
-    <div class="page" id="page-cooldown">
-      <div class="section-header"><h3>Cooldown Event History</h3></div>
-      <table id="cooldown-table">
-        <thead>
-          <tr><th>Time</th><th>Backend</th><th>Consecutive 429s</th><th>Duration</th><th>Summary</th></tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-    </div>
-  </main>
+  <!-- Charts -->
+  <div class="chart-grid">
+    <div class="chart-box"><h4>Cost Trend (7 days)</h4><canvas id="cost-chart"></canvas></div>
+    <div class="chart-box"><h4>Token Usage Trend (7 days)</h4><canvas id="token-chart"></canvas></div>
+  </div>
+
+  <!-- Provider Status Table -->
+  <div class="section-title">Provider Status</div>
+  <table id="dashboard-backends-table">
+    <thead><tr><th>Name</th><th>Label</th><th>Pool</th><th>Models</th><th>Status</th><th>RPM</th><th>Actions</th></tr></thead>
+    <tbody></tbody>
+  </table>
 </div>
 
-<!-- Add/Edit Backend Modal -->
+<!-- ====== Providers Page ====== -->
+<div class="page" id="page-providers">
+  <div class="section-header">
+    <h3>Provider Backends</h3>
+    <button class="btn btn-primary" onclick="showAddBackend()">+ Add Provider</button>
+  </div>
+  <table id="backends-table">
+    <thead>
+      <tr><th style="width:30px"></th><th>Name</th><th>Label</th><th>Pool</th><th>Status</th><th>RPM</th><th>Models</th><th>Actions</th></tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+<!-- ====== Usage Page ====== -->
+<div class="page" id="page-usage">
+  <div class="section-header"><h3>Hourly Usage Statistics</h3></div>
+  <div class="mb-16">
+    <select id="usage-backend-filter" onchange="loadUsage()" class="btn btn-outline btn-sm">
+      <option value="">All Backends</option>
+    </select>
+  </div>
+  <table id="usage-table">
+    <thead><tr><th>Hour</th><th>Backend</th><th>Model</th><th>Requests</th><th>Errors</th><th>Tokens</th><th>Cost</th><th>Avg Latency</th></tr></thead>
+    <tbody></tbody>
+  </table>
+
+  <div class="section-title mt-24">Daily Aggregation</div>
+  <table id="daily-table">
+    <thead><tr><th>Date</th><th>Pool</th><th>Requests</th><th>Errors</th><th>Tokens</th><th>Cost</th><th>Backends</th></tr></thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+<!-- ====== Cooldown Page ====== -->
+<div class="page" id="page-cooldown">
+  <div class="section-header"><h3>Cooldown Event History</h3></div>
+  <table id="cooldown-table">
+    <thead><tr><th>Time</th><th>Backend</th><th>Consecutive 429s</th><th>Duration</th><th>Summary</th></tr></thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+</div><!-- .content -->
+</main>
+
+<!-- ====== Add/Edit Backend Modal ====== -->
 <div class="modal-overlay" id="backend-modal">
-  <div class="modal">
+  <div class="modal" id="backend-modal-content">
     <h3 id="modal-title">Add Provider</h3>
     <form id="backend-form" onsubmit="saveBackend(event)">
       <input type="hidden" id="backend-id">
       <div class="form-row">
         <div class="form-group">
           <label>Name *</label>
-          <input type="text" id="backend-name" placeholder="e.g. NVIDIA H100 Primary" required>
+          <input type="text" id="backend-name" placeholder="e.g. NVIDIA Key 1" required>
         </div>
         <div class="form-group">
           <label>Label</label>
@@ -252,13 +356,19 @@
       </div>
       <div class="form-group">
         <label>API Base URL *</label>
-        <input type="url" id="backend-url" placeholder="https://integrate.api.nvidia.com/v1" required>
+        <input type="url" id="backend-url" placeholder="https://api.example.com/v1" required>
       </div>
       <div class="form-group">
         <label>API Key *</label>
         <input type="password" id="backend-key" placeholder="sk-..." required>
       </div>
       <div class="form-row">
+        <div class="form-group">
+          <label>API Protocol</label>
+          <select id="backend-api">
+            <option value="openai-completions">openai-completions</option>
+          </select>
+        </div>
         <div class="form-group">
           <label>Pool</label>
           <select id="backend-pool">
@@ -266,16 +376,18 @@
             <option value="fallback">Fallback</option>
           </select>
         </div>
+      </div>
+      <div class="form-row">
         <div class="form-group">
           <label>RPM Limit</label>
           <input type="number" id="backend-rpm" value="40" min="1" max="1000">
         </div>
-      </div>
-      <div class="form-row">
         <div class="form-group">
           <label>Timeout (seconds)</label>
           <input type="number" id="backend-timeout" value="120" min="10" max="600">
         </div>
+      </div>
+      <div class="form-row">
         <div class="form-group">
           <label>Enabled</label>
           <select id="backend-enabled">
@@ -285,8 +397,8 @@
         </div>
       </div>
       <div class="form-group">
-        <label>Model Mappings (JSON: canonical → {native_id, cost, ...})</label>
-        <textarea id="backend-mappings" placeholder='{"deepseek-ai/DeepSeek-V4-Pro":{"native_id":"deepseek-ai/deepseek-v4-pro","cost":{"input":0.000001,"output":0.000004}}}'></textarea>
+        <label>Model Mappings (JSON: canonical → {native_id, reasoning, cost, context_window, max_tokens, ...})</label>
+        <textarea id="backend-mappings" placeholder='{"deepseek-ai/deepseek-v4-pro":{"native_id":"deepseek-ai/deepseek-v4-pro","reasoning":true,"cost":{"input":12,"output":24,"cacheRead":0.025,"cacheWrite":12},"context_window":1000000,"max_tokens":262144,"input_modalities":["text"]}}'></textarea>
       </div>
       <div class="form-actions">
         <button type="button" class="btn btn-outline" onclick="closeModal()">Cancel</button>
@@ -297,106 +409,221 @@
 </div>
 
 <script>
-// ── Navigation ──
-document.querySelectorAll('.sidebar nav a').forEach(a => {
+// ===== Navigation =====
+document.querySelectorAll('nav a').forEach(a => {
   a.addEventListener('click', e => {
     e.preventDefault();
-    document.querySelectorAll('.sidebar nav a').forEach(l => l.classList.remove('active'));
+    document.querySelectorAll('nav a').forEach(l => l.classList.remove('active'));
     a.classList.add('active');
     document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
     document.getElementById('page-' + a.dataset.page).classList.add('active');
+    // Update header
+    const titles = {
+      dashboard: ['📊 Dashboard', 'Provider 池全局概览'],
+      providers: ['🔌 Providers', 'Provider 后端管理与模型映射配置'],
+      usage: ['📈 Usage Stats', '按小时/按天统计的请求量、Token 消耗与费用'],
+      cooldown: ['🧊 Cooldown Log', '429 冷却事件历史记录']
+    };
+    document.getElementById('page-title').textContent = titles[a.dataset.page][0];
+    document.getElementById('page-sub').textContent = titles[a.dataset.page][1];
     loadPage(a.dataset.page);
   });
 });
 
-// ── SSE Connection ──
+// ===== Auth =====
+let ADMIN_TOKEN = localStorage.getItem('sidecar_admin_token') || 'c4571baa6b210235aa72a4b18630fb9806ec68f23628e127';
+
+function setAdminToken() {
+  const token = prompt('Enter Admin Token (SIDECAR_ADMIN_TOKEN):', ADMIN_TOKEN);
+  if (token) {
+    ADMIN_TOKEN = token;
+    localStorage.setItem('sidecar_admin_token', token);
+    alert('Admin token saved.');
+  }
+}
+
+function authFetch(url, options = {}) {
+  if (!options.headers) options.headers = {};
+  // Only add auth for write operations
+  if (options.method && options.method !== 'GET') {
+    options.headers['Authorization'] = 'Bearer ' + ADMIN_TOKEN;
+  }
+  return fetch(url, options);
+}
+
+// ===== SSE Connection =====
+let sseData = null;
 const sse = new EventSource('/dashboard/sse');
 sse.onmessage = e => {
-  const data = JSON.parse(e.data);
-  if (data.type === 'snapshot') updateDashboard(data);
+  sseData = JSON.parse(e.data);
+  if (sseData.type === 'snapshot') updateDashboard(sseData);
 };
-
 sse.onerror = () => {
-  document.getElementById('status-bar').textContent = '⚠️ SSE Disconnected';
+  document.getElementById('status-text').textContent = 'Disconnected';
+  document.getElementById('status-dot').style.background = 'var(--red)';
+};
+sse.onopen = () => {
+  document.getElementById('status-text').textContent = 'Connected';
+  document.getElementById('status-dot').style.background = 'var(--green)';
 };
 
-// ── Dashboard Update ──
-let costChart = null, tokenChart = null;
-
+// ===== Dashboard Update =====
 function updateDashboard(data) {
-  document.getElementById('status-bar').textContent =
-    `⚡ Connected · Uptime ${formatDuration(data.uptime_seconds)}`;
+  // Updates the live dashboard widgets (stat cards, pool grid, dashboard table)
+  document.getElementById('uptime-text').textContent = 'Uptime: ' + formatDuration(data.uptime_seconds);
 
-  // Stat cards
   const st = data.total || {};
   const errRate = st.total_requests > 0 ? ((st.total_errors || 0) / st.total_requests * 100).toFixed(1) : '0.0';
-  document.getElementById('stat-cards').innerHTML = `
-    <div class="card"><div class="label">Total Requests</div><div class="value">${fmt(st.total_requests)}</div><div class="sub">Error rate: ${errRate}%</div></div>
-    <div class="card"><div class="label">Total Tokens</div><div class="value">${fmt(st.total_tokens)}</div><div class="sub">Prompt: ${fmt(st.total_prompt_tokens)} · Completion: ${fmt(st.total_completion_tokens)}</div></div>
-    <div class="card"><div class="label">Total Cost</div><div class="value">$${st.total_cost ? st.total_cost.toFixed(4) : '0.0000'}</div><div class="sub">USD</div></div>
-    <div class="card"><div class="label">Uptime</div><div class="value">${formatDuration(data.uptime_seconds)}</div><div class="sub">Sidecar V2</div></div>
-  `;
+  document.getElementById('stat-req').textContent = fmt(st.total_requests);
+  document.getElementById('stat-err').textContent = errRate + '%';
+  document.getElementById('stat-tokens').textContent = fmt(st.total_tokens);
+  document.getElementById('stat-prompt').textContent = fmt(st.total_prompt_tokens);
+  document.getElementById('stat-compl').textContent = fmt(st.total_completion_tokens);
+  document.getElementById('stat-cost').textContent = '$' + (st.total_cost || 0).toFixed(4);
+  document.getElementById('stat-uptime').textContent = formatDuration(data.uptime_seconds);
 
   // Pool grid
   let poolHTML = '';
+  const backends = data.backends || [];
   for (const [pool, ps] of Object.entries(data.pool || {})) {
-    poolHTML += `
-      <div class="pool-card">
-        <h3 class="${pool}">${pool}</h3>
-        <div class="pool-stats">
-          <div class="pool-stat total"><div class="num">${ps.total}</div><div class="lbl">Total</div></div>
-          <div class="pool-stat healthy"><div class="num">${ps.healthy}</div><div class="lbl">Healthy</div></div>
-          <div class="pool-stat cooling"><div class="num">${ps.cooling}</div><div class="lbl">Cooling</div></div>
-          <div class="pool-stat error"><div class="num">${ps.error}</div><div class="lbl">Error</div></div>
-        </div>
-      </div>`;
+    poolHTML += `<div class="pool-card"><h3 class="${pool}">${pool}</h3>
+      <div class="pool-stats">
+        <div class="pool-stat total"><div class="num">${ps.total}</div><div class="lbl">Total</div></div>
+        <div class="pool-stat healthy"><div class="num">${ps.healthy}</div><div class="lbl">Healthy</div></div>
+        <div class="pool-stat cooling"><div class="num">${ps.cooling}</div><div class="lbl">Cooling</div></div>
+        <div class="pool-stat error"><div class="num">${ps.error}</div><div class="lbl">Error</div></div>
+      </div></div>`;
   }
-  document.getElementById('pool-grid').innerHTML = poolHTML || '<div class="card">No pools configured</div>';
+  document.getElementById('pool-grid').innerHTML = poolHTML || '<div class="pool-card"><p class="text-dim">No pools configured</p></div>';
 
-  // Update backend table if on providers page
+  // Provider count badge
+  document.getElementById('provider-count').textContent = backends.length;
+
+  // Dashboard table
+  if (document.getElementById('page-dashboard').classList.contains('active')) {
+    renderDashboardTable(backends);
+  }
+
+  // Providers table
   if (document.getElementById('page-providers').classList.contains('active')) {
-    renderBackendsTable(data.backends || []);
+    renderBackendsTable(backends);
   }
+
+  document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
 }
 
-// ── Chart Updates (use SSE data to build chart data) ──
-function initCharts() {
-  const cc = document.getElementById('cost-chart');
-  const tc = document.getElementById('token-chart');
-  if (!cc || !tc) return;
-
-  if (costChart) costChart.destroy();
-  if (tokenChart) tokenChart.destroy();
-
-  costChart = new Chart(cc, {
-    type: 'line', data: { labels: [], datasets: [{ label: 'Cost (USD)', data: [], borderColor: '#00d1b2', backgroundColor: 'rgba(0,209,178,0.1)', fill: true, tension: 0.3 }] },
-    options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { labels: { color: '#888' } } }, scales: { x: { ticks: { color: '#888', maxTicksLimit: 12 } }, y: { ticks: { color: '#888' } } } }
-  });
-
-  tokenChart = new Chart(tc, {
-    type: 'line', data: { labels: [], datasets: [{ label: 'Total Tokens', data: [], borderColor: '#b86bff', backgroundColor: 'rgba(184,107,255,0.1)', fill: true, tension: 0.3 }] },
-    options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { labels: { color: '#888' } } }, scales: { x: { ticks: { color: '#888', maxTicksLimit: 12 } }, y: { ticks: { color: '#888' } } } }
-  });
-}
-
-// ── Providers Page ──
-function renderBackendsTable(backends) {
-  const tbody = document.querySelector('#backends-table tbody');
-  tbody.innerHTML = backends.map(b => `
-    <tr>
+// ===== Dashboard Provider Table =====
+function renderDashboardTable(backends) {
+  const tbody = document.querySelector('#dashboard-backends-table tbody');
+  tbody.innerHTML = backends.map(b => {
+    const rpmPct = b.rpm_limit > 0 ? Math.min(100, Math.round((b.stats?.rpm_current || 0) / b.rpm_limit * 100)) : 0;
+    const fillClass = rpmPct >= 80 ? 'high' : rpmPct >= 50 ? 'mid' : 'low';
+    const modelCount = getModelCount(b);
+    return `<tr>
       <td><strong>${h(b.name)}</strong></td>
       <td><span class="badge ${b.label ? 'primary' : ''}">${h(b.label || '-')}</span></td>
       <td><span class="badge ${b.pool}">${b.pool}</span></td>
-      <td><span class="badge ${b.status}">${b.status}</span></td>
-      <td>${b.rpm_limit}</td>
-      <td>${b.model_count || 0}</td>
-      <td>
-        <button class="btn btn-outline btn-sm" onclick="editBackend('${b.id}')">Edit</button>
-        <button class="btn btn-danger btn-sm" onclick="deleteBackend('${b.id}')">Del</button>
-      </td>
-    </tr>`).join('');
+      <td>${modelCount}</td>
+      <td><span class="badge ${b.enabled ? b.status : 'disabled'}">${b.enabled ? b.status : 'disabled'}</span></td>
+      <td><span class="progress-bar"><span class="fill ${fillClass}" style="width:${rpmPct}%"></span></span>${rpmPct}% <span class="text-dim">(${b.stats?.rpm_current || 0}/${b.rpm_limit})</span></td>
+      <td>${buildActionButtons(b)}</td>
+    </tr>`;
+  }).join('');
 }
 
+// ===== Providers Page =====
+function renderBackendsTable(backends) {
+  const tbody = document.querySelector('#backends-table tbody');
+  tbody.innerHTML = backends.map((b, i) => {
+    const modelCount = getModelCount(b);
+    const rpmPct = b.rpm_limit > 0 ? Math.min(100, Math.round((b.stats?.rpm_current || 0) / b.rpm_limit * 100)) : 0;
+    const fillClass = rpmPct >= 80 ? 'high' : rpmPct >= 50 ? 'mid' : 'low';
+    return `
+    <tr id="row-${b.id}">
+      <td><span class="expand-icon" onclick="toggleExpand('${b.id}')" title="Expand Model Details">▶</span></td>
+      <td><strong>${h(b.name)}</strong></td>
+      <td><span class="badge ${b.label ? 'primary' : ''}">${h(b.label || '-')}</span></td>
+      <td><span class="badge ${b.pool}">${b.pool}</span></td>
+      <td><span class="badge ${b.enabled ? b.status : 'disabled'}">${b.enabled ? b.status : 'disabled'}</span></td>
+      <td><span class="progress-bar"><span class="fill ${fillClass}" style="width:${rpmPct}%"></span></span>${rpmPct}%</td>
+      <td>${modelCount}</td>
+      <td>${buildActionButtons(b)}</td>
+    </tr>
+    <tr class="sub-row" id="expand-${b.id}" style="display:none">
+      <td colspan="8"><div class="sub-row-content">${buildModelTable(b)}</div></td>
+    </tr>`;
+  }).join('');
+}
+
+function toggleExpand(id) {
+  const row = document.getElementById('expand-' + id);
+  const icon = document.querySelector(`#row-${id} .expand-icon`);
+  if (row.style.display === 'none') {
+    row.style.display = '';
+    if (icon) icon.classList.add('open');
+  } else {
+    row.style.display = 'none';
+    if (icon) icon.classList.remove('open');
+  }
+}
+
+function buildModelTable(b) {
+  const mappings = b.model_mappings || {};
+  const keys = Object.keys(mappings);
+  if (keys.length === 0) return '<p class="text-dim">No model mappings configured</p>';
+  return `<table class="model-mini-table"><thead><tr>
+    <th>Canonical Name</th><th>Native ID</th><th>Reasoning</th>
+    <th>Cost (in/out)</th><th>Context W.</th><th>Max Tokens</th><th>Modalities</th>
+  </tr></thead><tbody>
+  ${keys.map(k => {
+    const m = mappings[k];
+    return `<tr>
+      <td><strong>${h(k)}</strong></td>
+      <td><code style="font-size:10px">${h(m.native_id || '-')}</code></td>
+      <td><span class="tag ${m.reasoning}">${m.reasoning ? '✅' : '❌'}</span></td>
+      <td>$${(m.cost?.input || 0).toFixed(2)} / $${(m.cost?.output || 0).toFixed(2)}</td>
+      <td>${fmt(m.context_window || 0)}</td>
+      <td>${fmt(m.max_tokens || 0)}</td>
+      <td>${(m.input_modalities || ['text']).map(t => `<span class="tag true">${h(t)}</span>`).join('')}</td>
+    </tr>`;
+  }).join('')}
+  </tbody></table>`;
+}
+
+// ===== Action Buttons (BIZ-62: Enable/Disable Toggle) =====
+function buildActionButtons(b) {
+  let btns = '';
+  if (b.enabled) {
+    btns += `<button class="btn-action btn-pause" onclick="toggleBackend('${b.id}', false)" title="Pause this provider">⏸ Pause</button>`;
+  } else {
+    btns += `<button class="btn-action btn-resume" onclick="toggleBackend('${b.id}', true)" title="Resume this provider">▶ Resume</button>`;
+  }
+  btns += `<button class="btn-action btn-edit" onclick="editBackend('${b.id}')" title="Edit">✎ Edit</button>`;
+  btns += `<button class="btn-action btn-del" onclick="deleteBackend('${b.id}')" title="Delete">✕ Del</button>`;
+  return `<div class="btn-group">${btns}</div>`;
+}
+
+// ===== Enable/Disable Toggle (BIZ-62 core) =====
+async function toggleBackend(id, enable) {
+  const verb = enable ? 'resume' : 'pause';
+  if (!confirm(`${enable ? '▶ Resume' : '⏸ Pause'} this provider?`)) return;
+  try {
+    const res = await authFetch('/api/admin/backends/' + id, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: enable })
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.detail || `${verb} failed`);
+    }
+    refreshAll();
+  } catch (e) {
+    alert(`Failed to ${verb} provider: ${e.message}`);
+  }
+}
+
+// ===== Modal: Add/Edit Backend =====
 function showAddBackend() {
   document.getElementById('modal-title').textContent = 'Add Provider';
   document.getElementById('backend-id').value = '';
@@ -404,12 +631,15 @@ function showAddBackend() {
   document.getElementById('backend-label').value = '';
   document.getElementById('backend-url').value = '';
   document.getElementById('backend-key').value = '';
+  document.getElementById('backend-key').required = true;
+  document.getElementById('backend-key').placeholder = 'sk-...';
+  document.getElementById('backend-api').value = 'openai-completions';
   document.getElementById('backend-pool').value = 'primary';
   document.getElementById('backend-rpm').value = '40';
   document.getElementById('backend-timeout').value = '120';
   document.getElementById('backend-enabled').value = 'true';
   document.getElementById('backend-mappings').value = '{}';
-  document.getElementById('backend-modal').classList.add('active');
+  document.getElementById('backend-modal').classList.add('show');
 }
 
 async function editBackend(id) {
@@ -424,27 +654,37 @@ async function editBackend(id) {
     document.getElementById('backend-key').value = '';
     document.getElementById('backend-key').placeholder = '(leave blank to keep current)';
     document.getElementById('backend-key').required = false;
+    document.getElementById('backend-api').value = b.api || 'openai-completions';
     document.getElementById('backend-pool').value = b.pool;
     document.getElementById('backend-rpm').value = b.rpm_limit;
     document.getElementById('backend-timeout').value = b.timeout_seconds;
     document.getElementById('backend-enabled').value = b.enabled ? 'true' : 'false';
     document.getElementById('backend-mappings').value = JSON.stringify(b.model_mappings || {}, null, 2);
-    document.getElementById('backend-modal').classList.add('active');
+    document.getElementById('backend-modal').classList.add('show');
   } catch (e) { alert('Failed to load backend: ' + e.message); }
 }
 
 async function saveBackend(e) {
   e.preventDefault();
   const id = document.getElementById('backend-id').value;
+  let mappings = {};
+  try {
+    mappings = JSON.parse(document.getElementById('backend-mappings').value || '{}');
+  } catch (err) {
+    alert('Invalid JSON in Model Mappings: ' + err.message);
+    return;
+  }
+
   const body = {
     name: document.getElementById('backend-name').value,
     label: document.getElementById('backend-label').value,
     api_base_url: document.getElementById('backend-url').value,
+    api: document.getElementById('backend-api').value,
     pool: document.getElementById('backend-pool').value,
     rpm_limit: parseInt(document.getElementById('backend-rpm').value),
     timeout_seconds: parseInt(document.getElementById('backend-timeout').value),
     enabled: document.getElementById('backend-enabled').value === 'true',
-    model_mappings: JSON.parse(document.getElementById('backend-mappings').value || '{}'),
+    model_mappings: mappings,
   };
 
   const key = document.getElementById('backend-key').value;
@@ -453,47 +693,131 @@ async function saveBackend(e) {
   try {
     const method = id ? 'PUT' : 'POST';
     const url = id ? '/api/admin/backends/' + id : '/api/admin/backends';
-    const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-    if (!res.ok) throw new Error((await res.json()).detail || 'Save failed');
+    const res = await authFetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.detail || 'Save failed');
+    }
     closeModal();
     refreshAll();
-  } catch (e) { alert('Error: ' + e.message); }
+  } catch (err) { alert('Error: ' + err.message); }
 }
 
 async function deleteBackend(id) {
-  if (!confirm('Delete this provider? This cannot be undone.')) return;
+  if (!confirm('Delete this provider? This action cannot be undone.')) return;
   try {
-    await fetch('/api/admin/backends/' + id, { method: 'DELETE' });
+    const res = await authFetch('/api/admin/backends/' + id, { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.detail || 'Delete failed');
+    }
     refreshAll();
   } catch (e) { alert('Delete failed: ' + e.message); }
 }
 
-function closeModal() { document.getElementById('backend-modal').classList.remove('active'); }
+function closeModal() { document.getElementById('backend-modal').classList.remove('show'); }
 
-// ── Load Pages ──
-async function loadPage(page) {
-  if (page === 'dashboard') {
-    initCharts();
-    loadChartData();
-  } else if (page === 'providers') {
-    refreshAll();
-  } else if (page === 'usage') {
-    loadUsageFilter();
-    loadUsage();
-    loadDaily();
-  } else if (page === 'cooldown') {
-    loadCooldown();
-  }
+// Close modal on overlay click
+document.getElementById('backend-modal').addEventListener('click', function(e) {
+  if (e.target === this) closeModal();
+});
+
+// ===== Chart Management =====
+let costChart = null, tokenChart = null;
+
+function initCharts() {
+  const cc = document.getElementById('cost-chart');
+  const tc = document.getElementById('token-chart');
+  if (!cc || !tc) return;
+
+  if (costChart) costChart.destroy();
+  if (tokenChart) tokenChart.destroy();
+
+  costChart = new Chart(cc, {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [{
+        label: 'Cost (USD)',
+        data: [],
+        borderColor: '#06b6d4',
+        backgroundColor: 'rgba(6,182,212,0.1)',
+        fill: true, tension: 0.3, pointRadius: 0
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: true,
+      plugins: { legend: { labels: { color: '#9ca3af', font: { size: 11 } } } },
+      scales: {
+        x: { ticks: { color: '#9ca3af', maxTicksLimit: 12, font: { size: 10 } }, grid: { color: 'rgba(46,51,68,0.3)' } },
+        y: { ticks: { color: '#9ca3af', font: { size: 10 } }, grid: { color: 'rgba(46,51,68,0.3)' } }
+      }
+    }
+  });
+
+  tokenChart = new Chart(tc, {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [{
+        label: 'Total Tokens',
+        data: [],
+        borderColor: '#a855f7',
+        backgroundColor: 'rgba(168,85,247,0.1)',
+        fill: true, tension: 0.3, pointRadius: 0
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: true,
+      plugins: { legend: { labels: { color: '#9ca3af', font: { size: 11 } } } },
+      scales: {
+        x: { ticks: { color: '#9ca3af', maxTicksLimit: 12, font: { size: 10 } }, grid: { color: 'rgba(46,51,68,0.3)' } },
+        y: { ticks: { color: '#9ca3af', font: { size: 10 } }, grid: { color: 'rgba(46,51,68,0.3)' } }
+      }
+    }
+  });
 }
 
-async function refreshAll() {
+async function loadChartData() {
   try {
-    const res = await fetch('/api/admin/backends');
-    const backends = await res.json();
-    renderBackendsTable(backends);
-  } catch (e) { console.error(e); }
+    const res = await fetch('/api/admin/stats/hourly?hours=168');
+    const data = await res.json();
+    const byHour = {};
+    data.forEach(r => {
+      const hour = r.hour_bucket.slice(0, 13);
+      if (!byHour[hour]) byHour[hour] = { cost: 0, tokens: 0 };
+      byHour[hour].cost += (r.cost || 0);
+      byHour[hour].tokens += (r.total_tokens || 0);
+    });
+    const hours = Object.keys(byHour).sort();
+    if (hours.length === 0) return;
+
+    const costs = hours.map(h => byHour[h].cost);
+    const tokens = hours.map(h => byHour[h].tokens);
+    const labels = hours.map(h => {
+      const d = new Date(h + ':00Z');
+      return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ' ' +
+             d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+    });
+
+    if (costChart) {
+      costChart.data.labels = labels;
+      costChart.data.datasets[0].data = costs;
+      costChart.update();
+    }
+    if (tokenChart) {
+      tokenChart.data.labels = labels;
+      tokenChart.data.datasets[0].data = tokens;
+      tokenChart.update();
+    }
+  } catch (e) { console.error('Chart data load failed:', e); }
 }
 
+// ===== Usage / Cooldown Pages =====
 async function loadUsageFilter() {
   try {
     const res = await fetch('/api/admin/backends');
@@ -507,16 +831,18 @@ async function loadUsageFilter() {
 async function loadUsage() {
   const sel = document.getElementById('usage-backend-filter');
   const backendId = sel.value;
-  const url = backendId ? `/api/admin/stats/hourly?backend_id=${backendId}&hours=72` : '/api/admin/stats/hourly?hours=72';
+  const url = backendId
+    ? `/api/admin/stats/hourly?backend_id=${backendId}&hours=72`
+    : '/api/admin/stats/hourly?hours=72';
   try {
     const res = await fetch(url);
     const data = await res.json();
     const tbody = document.querySelector('#usage-table tbody');
-    tbody.innerHTML = data.map(r => `
+    tbody.innerHTML = data.slice(0, 200).map(r => `
       <tr>
         <td>${r.hour_bucket}</td>
         <td>${r.backend_id}</td>
-        <td>${h(r.model)}</td>
+        <td><code style="font-size:11px">${h(r.model || '-')}</code></td>
         <td>${fmt(r.request_count)}</td>
         <td class="${r.error_count > 0 ? 'text-red' : 'text-green'}">${r.error_count}</td>
         <td>${fmt(r.total_tokens)}</td>
@@ -553,70 +879,74 @@ async function loadCooldown() {
       <tr>
         <td>${r.started_at}</td>
         <td>${r.backend_id}</td>
-        <td>${r.consecutive_count}</td>
+        <td><span class="badge ${r.consecutive_count >= 3 ? 'error' : 'cooling'}">${r.consecutive_count}</span></td>
         <td>${r.cooldown_seconds}s</td>
-        <td>${h(r.response_summary)}</td>
+        <td>${h(r.response_summary || '-')}</td>
       </tr>`).join('');
   } catch (e) { console.error(e); }
 }
 
-async function loadChartData() {
-  try {
-    const res = await fetch('/api/admin/stats/hourly?hours=168');
-    const data = await res.json();
-    // Group by hour, sum
-    const byHour = {};
-    data.forEach(r => {
-      const hour = r.hour_bucket.slice(0, 13);
-      if (!byHour[hour]) byHour[hour] = { cost: 0, tokens: 0 };
-      byHour[hour].cost += (r.cost || 0);
-      byHour[hour].tokens += (r.total_tokens || 0);
-    });
-    const hours = Object.keys(byHour).sort();
-    const costs = hours.map(h => byHour[h].cost);
-    const tokens = hours.map(h => byHour[h].tokens);
-    const labels = hours.map(h => h.slice(11, 16) + ' ' + h.slice(5, 10));
-
-    if (costChart) {
-      costChart.data.labels = labels;
-      costChart.data.datasets[0].data = costs;
-      costChart.update();
-    }
-    if (tokenChart) {
-      tokenChart.data.labels = labels;
-      tokenChart.data.datasets[0].data = tokens;
-      tokenChart.update();
-    }
-  } catch (e) { console.error(e); }
+// ===== Page Loading =====
+async function loadPage(page) {
+  switch (page) {
+    case 'dashboard':
+      initCharts();
+      loadChartData();
+      refreshAll(); // ensure dashboard table is populated
+      break;
+    case 'providers':
+      refreshAll();
+      break;
+    case 'usage':
+      loadUsageFilter();
+      loadUsage();
+      loadDaily();
+      break;
+    case 'cooldown':
+      loadCooldown();
+      break;
+  }
 }
 
-// ── Helpers ──
+async function refreshAll() {
+  try {
+    const res = await fetch('/api/admin/backends');
+    const backends = await res.json();
+    document.getElementById('provider-count').textContent = backends.length;
+    if (document.getElementById('page-providers').classList.contains('active')) {
+      renderBackendsTable(backends);
+    }
+    if (document.getElementById('page-dashboard').classList.contains('active')) {
+      renderDashboardTable(backends);
+    }
+    document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
+  } catch (e) { console.error('refreshAll failed:', e); }
+}
+
+// ===== Helpers =====
+function getModelCount(b) {
+  const mm = b.model_mappings;
+  if (!mm) return 0;
+  return typeof mm === 'object' ? Object.keys(mm).length : 0;
+}
 function fmt(n) { return (n || 0).toLocaleString(); }
-function h(s) { const d=document.createElement('div'); d.textContent=s||''; return d.innerHTML; }
+function h(s) { const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
 function formatDuration(s) {
-  const d = Math.floor(s / 86400);
-  const h = Math.floor((s % 86400) / 3600);
-  const m = Math.floor((s % 3600) / 60);
+  const d = Math.floor(s / 86400), hr = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60);
   const parts = [];
   if (d) parts.push(d + 'd');
-  if (h) parts.push(h + 'h');
+  if (hr) parts.push(hr + 'h');
   if (m || !parts.length) parts.push(m + 'm');
   return parts.join(' ');
 }
 
-// Initial load
+// ===== Initialize =====
 document.addEventListener('DOMContentLoaded', () => {
-  // Ensure chart containers exist
-  if (!document.getElementById('cost-chart')) {
-    const chartsDiv = document.getElementById('charts');
-    if (chartsDiv) {
-      chartsDiv.innerHTML = `
-        <div class="chart-card"><h3>Cost Over Time</h3><canvas id="cost-chart"></canvas></div>
-        <div class="chart-card"><h3>Token Usage Over Time</h3><canvas id="token-chart"></canvas></div>`;
-    }
-  }
+  // Ensure chart containers
+  const chartsDiv = document.getElementById('chart-grid') || document.querySelector('.chart-grid');
   initCharts();
   loadChartData();
+  refreshAll();
 });
 </script>
 </body>
diff --git a/docker-compose.yml b/docker-compose.yml
index 03a17c8..abf9023 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,6 +15,7 @@ services:
       - SIDECAR_METRICS_PORT=9191
       - SIDECAR_DB_PATH=/app/data/sidecar_v2.db
       - SIDECAR_BACKUP_DIR=/app/data/backups
+      - SIDECAR_PRIMARY_WAIT_MAX_RETRIES=6
     volumes:
       - sidecar-data:/app/data
 
diff --git a/pool_manager.py b/pool_manager.py
index 29c519f..c92edc6 100644
--- a/pool_manager.py
+++ b/pool_manager.py
@@ -1,5 +1,6 @@
 """Provider pool management: primary / fallback pool routing."""
 
+import random
 import structlog
 from typing import Optional
 
@@ -42,6 +43,7 @@ class PoolManager:
             if pool:
                 break
 
+        random.shuffle(backends)
         return backends
 
     def get_any_healthy_backends(self, pool: Optional[str] = None) -> list[Backend]:
@@ -55,6 +57,7 @@ class PoolManager:
                     backends.append(b)
             if pool:
                 break
+        random.shuffle(backends)
         return backends
 
     def get_pool_status(self) -> dict:
diff --git a/server.py b/server.py
index ec22a4f..0807c17 100644
--- a/server.py
+++ b/server.py
@@ -479,9 +479,24 @@ async def dashboard_sse() -> StreamingResponse:
 
 @app.get("/api/admin/backends")
 async def admin_list_backends(pool: Optional[str] = None) -> list[dict]:
-    """List all backends with masked keys (public read)."""
+    """List all backends with masked keys (public read) and real-time stats."""
     backends = list_backends(pool=pool, decrypt_key=True)
-    return [b.to_dict(mask_key=True) for b in backends]
+    result = []
+    for b in backends:
+        d = b.to_dict(mask_key=True)
+        # Inject real-time rate limiter stats
+        rl_status = rate_limiter.get_status(b.id) if rate_limiter else None
+        if rl_status:
+            utilization = rl_status.get("utilization", 0.0)
+            rpm_current = round(b.rpm_limit * utilization, 1)
+        else:
+            rpm_current = 0
+        d["stats"] = {
+            "rpm_current": rpm_current,
+            "model_count": len(b.model_mappings),
+        }
+        result.append(d)
+    return result
 
 
 @app.get("/api/admin/backends/{backend_id}")