real time stats on page

internal/handler/index.html

@@ -218,5 +218,28 @@ function loadStats() {
 loadStats();
 setInterval(loadStats, 30000);
 </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(){ });
+}
+loadStats();
+setInterval(loadStats, 30000);
+</script>
 </body>
 </html>