UI: clean ranking and remove keys from public view

internal/handler/index.html

@@ -144,43 +144,44 @@ body{background:#0d0d0d;font-family:"Courier New",monospace;color:#c8a84b}
   <span class="classified">&#9733; CLASIFICADO &#9733;</span> &mdash; ROW-PROXY v1.0 &mdash; CCCP AI GATEWAY &mdash; HOI4 NO STEP BACK &mdash; <span class="classified">&#9733; CLASIFICADO &#9733;</span>
 </div>
 <script>
-var revealed = false;
-var key = "free";
-function toggleKey() {
-  revealed = !revealed;
-  var el = document.getElementById("keyval");
-  var btn = document.querySelector(".reveal-btn");
-  if (revealed) {
-    el.textContent = key;
-    btn.textContent = "OCULTAR";
-  } else {
-    el.textContent = "████████";
-    btn.textContent = "REVELAR";
-  }
+async function updateStats() {
+    try {
+        const r = await fetch("/stats");
+        const data = await r.json();
+        const keys = Object.values(data.keys || {});
+        keys.sort((a, b) => b.tokens - a.tokens);
+        const grid = document.querySelector(".commander-grid");
+        if (!grid) return;
+        grid.innerHTML = keys.slice(0, 5).map((u, i) => {
+            return "<div class='commander-card'>" +
+                   "<div class='cmd-name'>" + u.name.toUpperCase() + " #" + (i+1) + "</div>" +
+                   "<div class='cmd-trait'>REQS: " + u.requests + " // TOKENS: " + u.tokens + "</div>" +
+                   "</div>";
+        }).join("");
+    } catch(e) { console.error("Error:", e); }
 }
+setInterval(updateStats, 10000);
+updateStats();
 </script>
 <script>
-function loadStats() {
-  fetch('/stats')
-    .then(r => r.json())
-    .then(data => {
-      var keys = Object.values(data.keys || {});
-      keys.sort(function(a,b){ return b.requests - a.requests; });
-      var grid = document.getElementById('users-grid');
-      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>';
-      }).join('');
-      var freeEl = document.getElementById('free-count');
-      if (freeEl) freeEl.textContent = (data.free_reqs || 0) + '/340';
-    })
-    .catch(function(){ });
+async function updateStats() {
+    try {
+        const r = await fetch("/stats");
+        const data = await r.json();
+        const keys = Object.values(data.keys || {});
+        keys.sort((a, b) => b.tokens - a.tokens);
+        const grid = document.querySelector(".commander-grid");
+        if (!grid) return;
+        grid.innerHTML = keys.slice(0, 5).map((u, i) => {
+            return "<div class='commander-card'>" +
+                   "<div class='cmd-name'>" + u.name.toUpperCase() + " #" + (i+1) + "</div>" +
+                   "<div class='cmd-trait'>REQS: " + u.requests + " // TOKENS: " + u.tokens + "</div>" +
+                   "</div>";
+        }).join("");
+    } catch(e) { console.error("Error:", e); }
 }
-loadStats();
-setInterval(loadStats, 30000);
+setInterval(updateStats, 10000);
+updateStats();
 </script>
 <script>
 async function updateStats() {
@@ -191,12 +192,15 @@ async function updateStats() {
         keys.sort((a, b) => b.tokens - a.tokens);
         const grid = document.querySelector(".commander-grid");
         if (!grid) return;
-        grid.innerHTML = keys.slice(0, 4).map((u, i) => {
-            return "<div class="commander-card"><div class="cmd-name">" + (u.name || "Usuario") + " #" + (i+1) + "</div><div class="cmd-trait">REQS: " + u.requests + " // TOKENS: " + u.tokens + "</div></div>";
+        grid.innerHTML = keys.slice(0, 5).map((u, i) => {
+            return "<div class='commander-card'>" +
+                   "<div class='cmd-name'>" + u.name.toUpperCase() + " #" + (i+1) + "</div>" +
+                   "<div class='cmd-trait'>REQS: " + u.requests + " // TOKENS: " + u.tokens + "</div>" +
+                   "</div>";
         }).join("");
-    } catch(e) { console.error("Error stats:", e); }
+    } catch(e) { console.error("Error:", e); }
 }
-setInterval(updateStats, 30000);
+setInterval(updateStats, 10000);
 updateStats();
 </script></body>
 </html>