Update static/index.html

static/index.html

@@ -28,6 +28,18 @@ body{background:#0d0d0d;font-family:"Courier New",monospace;color:#c8a84b}
 .model-dot{width:6px;height:6px;background:#44aa99;border-radius:50%;flex-shrink:0}
 .model-dot.glm{background:#c8a84b}
 .model-name{font-size:11px;color:#c8a84b}
+
+/* TOP USUARIOS */
+.top-section{background:#1a1200;border:1px solid #3a2a00;padding:1.5rem;margin-bottom:2rem}
+.top-title{font-size:14px;color:#c8a84b;letter-spacing:3px;margin-bottom:1rem;font-weight:bold}
+.users-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+.commander-card{background:#0d0d0d;border:1px solid #2a1e00;border-left:3px solid #cc0000;padding:10px 14px}
+.cmd-rank{font-size:10px;color:#cc0000;letter-spacing:2px;margin-bottom:4px}
+.cmd-name{font-size:13px;color:#e8c86b;font-weight:bold;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.cmd-trait{font-size:10px;color:#7a6228;letter-spacing:1px}
+.cmd-bar-wrap{margin-top:6px;background:#0a0a0a;height:4px;border:1px solid #2a1e00}
+.cmd-bar{height:100%;background:#cc0000;transition:width 0.5s}
+
 .tank-section{background:#1a1200;border:1px solid #3a2a00;padding:1.5rem;margin-bottom:2rem}
 .tank-title{font-size:14px;color:#cc0000;letter-spacing:3px;margin-bottom:1rem;font-weight:bold}
 .tank-row{display:flex;gap:1rem;margin-bottom:8px;align-items:center}
@@ -57,7 +69,7 @@ body{background:#0d0d0d;font-family:"Courier New",monospace;color:#c8a84b}
   <div class="status-row">
     <div class="status-card"><div class="val online">&#9679; ONLINE</div><div class="lbl">PROXY STATUS</div></div>
     <div class="status-card"><div class="val">24</div><div class="lbl">MODELOS ACTIVOS</div></div>
-    <div class="status-card"><div class="val">FREE</div><div class="lbl">API KEY</div></div>
+    <div class="status-card"><div class="val"><span id="free-count">0/340</span></div><div class="lbl">FREE REQUESTS</div></div>
   </div>
   <div class="section-label">// PUNTO DE ACCESO</div>
   <div class="url-box">
@@ -76,6 +88,19 @@ body{background:#0d0d0d;font-family:"Courier New",monospace;color:#c8a84b}
     <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-5</div></div>
     <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-5-thinking</div></div>
   </div>
+
+  <!-- SECCION TOP USUARIOS — ANTES FALTABA COMPLETAMENTE -->
+  <div class="section-label">// TOP COMANDANTES — RANKING DE CONSUMO</div>
+  <div class="top-section">
+    <div class="top-title">&#9733; OPERADORES MAS ACTIVOS</div>
+    <div class="users-grid" id="users-grid">
+      <div class="commander-card">
+        <div class="cmd-name" style="color:#7a6228">Cargando datos...</div>
+        <div class="cmd-trait">CONSULTANDO SERVIDOR</div>
+      </div>
+    </div>
+  </div>
+
   <div class="section-label">// RAMA SOVIETICA — GUERRA FRIA</div>
   <div class="tank-section">
     <div class="tank-title">&#9733; BLINDADOS SOVIETICOS 1960-1985</div>
@@ -89,25 +114,49 @@ body{background:#0d0d0d;font-family:"Courier New",monospace;color:#c8a84b}
 </div>
 <div class="footer"><span class="classified">&#9733; CLASIFICADO &#9733;</span> &mdash; ROW-PROXY v1.0 &mdash; CCCP AI GATEWAY &mdash; <span class="classified">&#9733; CLASIFICADO &#9733;</span></div>
 <script>
+var RANKS = ['&#9733;&#9733;&#9733;','&#9733;&#9733;','&#9733;','&#8901;'];
+
 function loadStats() {
   fetch('/stats')
-    .then(r => r.json())
-    .then(data => {
+    .then(function(r){ return r.json(); })
+    .then(function(data) {
+      var freeEl = document.getElementById('free-count');
+      if (freeEl) freeEl.textContent = (data.free_reqs || 0) + '/340';
+
       var keys = Object.values(data.keys || {});
-      keys.sort(function(a,b){ return b.requests - a.requests; });
+      keys.sort(function(a, b){
+        var tokDiff = (b.tokens || 0) - (a.tokens || 0);
+        if (tokDiff !== 0) return tokDiff;
+        return (b.requests || 0) - (a.requests || 0);
+      });
+
       var grid = document.getElementById('users-grid');
+      if (!grid) return;
+
       if (keys.length === 0) {
         grid.innerHTML = '<div class="commander-card"><div class="cmd-name">Sin usuarios aun</div><div class="cmd-trait">SE EL PRIMERO EN USAR LA PROXY</div></div>';
         return;
       }
-      grid.innerHTML = keys.slice(0,4).map(function(k){
-        return '<div class="commander-card"><div class="cmd-name">' + k.name + '</div><div class="cmd-trait">SOLICITUDES: ' + k.requests + ' // TOKENS: ' + k.tokens + '</div></div>';
+
+      var maxTokens = keys[0].tokens || keys[0].requests || 1;
+
+      grid.innerHTML = keys.slice(0, 4).map(function(k, i){
+        var pct = Math.round(((k.tokens || k.requests || 0) / maxTokens) * 100);
+        var tokens = (k.tokens || 0).toLocaleString();
+        var reqs = (k.requests || 0);
+        return '<div class="commander-card">'
+          + '<div class="cmd-rank">' + (RANKS[i] || '&#8901;') + ' RANGO ' + (i+1) + '</div>'
+          + '<div class="cmd-name">' + (k.name || k.key || 'Agente') + '</div>'
+          + '<div class="cmd-trait">REQS: ' + reqs + ' // TOKENS: ' + tokens + '</div>'
+          + '<div class="cmd-bar-wrap"><div class="cmd-bar" style="width:' + pct + '%"></div></div>'
+          + '</div>';
       }).join('');
-      var freeEl = document.getElementById('free-count');
-      if (freeEl) freeEl.textContent = (data.free_reqs || 0) + '/340';
     })
-    .catch(function(){ });
+    .catch(function(err){
+      console.warn('Stats no disponibles:', err);
+    });
 }
+
 loadStats();
 setInterval(loadStats, 30000);
 </script>