Update templates/code_new.html

templates/code_new.html

@@ -675,32 +675,113 @@
 
 <!-- VIEW: DIAGNOSTICS -->
 <div id="view-diagnostics" class="hidden h-[calc(100vh-6rem)] flex flex-col overflow-hidden">
-  <div class="grid grid-cols-4 gap-0 border-b border-outline-variant/20 bg-surface-container-low shrink-0">
-    <div class="p-6 border-r border-outline-variant/10">
-      <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">DB Connection</p>
-      <div class="flex items-end gap-2"><span class="text-xl font-headline font-bold text-on-surface">missions.db</span><span class="text-xs font-label text-secondary mb-1">CONNECTED</span></div>
-    </div>
-    <div class="p-6 border-r border-outline-variant/10">
-      <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">API Health</p>
-      <div class="flex items-end gap-2"><span class="text-xl font-headline font-bold text-on-surface">--</span><span class="text-xs font-label text-outline mb-1">PENDING</span></div>
-    </div>
-    <div class="p-6 border-r border-outline-variant/10">
-      <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">FastAPI Latency</p>
-      <div class="flex items-end gap-2"><span class="text-xl font-headline font-bold text-on-surface">--</span><span class="text-xs font-label text-outline mb-1">PENDING</span></div>
+
+  <!-- Header -->
+  <div class="px-8 py-5 flex justify-between items-center bg-surface-container-low/30 border-b border-slate-800/40 shrink-0">
+    <div>
+      <h1 class="font-headline text-2xl font-bold tracking-tight text-on-surface">System Diagnostics</h1>
+      <p class="font-body text-sm text-on-surface-variant">Hardware metrics en tiempo real del contenedor Docker.</p>
     </div>
-    <div class="p-6">
-      <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">Active Agents</p>
-      <div class="flex items-end gap-2"><span class="text-xl font-headline font-bold text-on-surface">5/5</span><span class="text-xs font-label text-secondary mb-1">OK</span></div>
+    <div class="flex items-center gap-4">
+      <div class="flex items-center gap-2">
+        <div id="diagDot" class="w-2 h-2 rounded-full bg-outline"></div>
+        <span id="diagStatus" class="text-[10px] font-headline tracking-widest uppercase text-outline">Conectando...</span>
+      </div>
+      <span id="diagTimestamp" class="text-[10px] font-mono text-outline/50"></span>
     </div>
   </div>
-  <div class="flex-1 flex items-center justify-center flex-col gap-4 text-center px-12">
-    <span class="material-symbols-outlined text-6xl text-outline/30">construction</span>
-    <h2 class="font-headline text-xl font-bold text-on-surface-variant/50 tracking-widest uppercase">Diagnostics Panel</h2>
-    <p class="text-sm text-on-surface-variant/30 font-mono max-w-md">
-      Este módulo está pendiente de implementación.<br/>
-      Aquí se mostrarán métricas en tiempo real: latencia por agente, uso de tokens, estado de providers, health checks de HuggingFace / OpenRouter / Gemini.
-    </p>
-    <div class="mt-4 px-6 py-3 border border-outline-variant/20 text-[10px] font-headline tracking-widest text-outline uppercase">Coming Soon</div>
+
+  <!-- Cards Grid -->
+  <div class="flex-1 overflow-y-auto custom-scrollbar p-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+
+      <!-- CPU -->
+      <div class="glass-card rounded p-6 border-l-4 border-primary">
+        <div class="flex items-center justify-between mb-4">
+          <div class="flex items-center gap-3">
+            <span class="material-symbols-outlined text-primary text-2xl">memory</span>
+            <div>
+              <h3 class="font-headline text-sm font-bold text-on-surface uppercase tracking-widest">CPU</h3>
+              <p id="diagCpuCores" class="text-[10px] text-on-surface-variant font-mono">-- cores</p>
+            </div>
+          </div>
+          <span id="diagCpuPct" class="text-3xl font-headline font-black text-primary">--%</span>
+        </div>
+        <div class="w-full h-2 bg-surface-container-lowest rounded-full overflow-hidden">
+          <div id="diagCpuBar" class="h-full bg-primary transition-all duration-700 rounded-full" style="width:0%"></div>
+        </div>
+        <div class="flex justify-between mt-2">
+          <span class="text-[10px] font-mono text-on-surface-variant">0%</span>
+          <span class="text-[10px] font-mono text-on-surface-variant">100%</span>
+        </div>
+      </div>
+
+      <!-- RAM -->
+      <div class="glass-card rounded p-6 border-l-4 border-secondary">
+        <div class="flex items-center justify-between mb-4">
+          <div class="flex items-center gap-3">
+            <span class="material-symbols-outlined text-secondary text-2xl">storage</span>
+            <div>
+              <h3 class="font-headline text-sm font-bold text-on-surface uppercase tracking-widest">RAM</h3>
+              <p id="diagRamDetail" class="text-[10px] text-on-surface-variant font-mono">-- / -- GB</p>
+            </div>
+          </div>
+          <span id="diagRamPct" class="text-3xl font-headline font-black text-secondary">--%</span>
+        </div>
+        <div class="w-full h-2 bg-surface-container-lowest rounded-full overflow-hidden">
+          <div id="diagRamBar" class="h-full bg-secondary transition-all duration-700 rounded-full" style="width:0%"></div>
+        </div>
+        <div class="flex justify-between mt-2">
+          <span class="text-[10px] font-mono text-on-surface-variant">0%</span>
+          <span class="text-[10px] font-mono text-on-surface-variant">100%</span>
+        </div>
+      </div>
+
+      <!-- DISCO -->
+      <div class="glass-card rounded p-6 border-l-4 border-tertiary">
+        <div class="flex items-center justify-between mb-4">
+          <div class="flex items-center gap-3">
+            <span class="material-symbols-outlined text-tertiary text-2xl">hard_drive</span>
+            <div>
+              <h3 class="font-headline text-sm font-bold text-on-surface uppercase tracking-widest">Disco</h3>
+              <p id="diagDiskDetail" class="text-[10px] text-on-surface-variant font-mono">-- / -- GB</p>
+            </div>
+          </div>
+          <span id="diagDiskPct" class="text-3xl font-headline font-black text-tertiary">--%</span>
+        </div>
+        <div class="w-full h-2 bg-surface-container-lowest rounded-full overflow-hidden">
+          <div id="diagDiskBar" class="h-full bg-tertiary transition-all duration-700 rounded-full" style="width:0%"></div>
+        </div>
+        <div class="flex justify-between mt-2">
+          <span class="text-[10px] font-mono text-on-surface-variant">0 GB</span>
+          <span id="diagDiskMax" class="text-[10px] font-mono text-on-surface-variant">-- GB</span>
+        </div>
+      </div>
+
+      <!-- RED -->
+      <div class="glass-card rounded p-6 border-l-4 border-primary-dim">
+        <div class="flex items-center gap-3 mb-4">
+          <span class="material-symbols-outlined text-primary-dim text-2xl">network_check</span>
+          <h3 class="font-headline text-sm font-bold text-on-surface uppercase tracking-widest">Red</h3>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="bg-surface-container-lowest p-3 rounded border border-outline-variant/20">
+            <p class="text-[10px] font-headline tracking-widest text-on-surface-variant uppercase mb-1">↓ Entrada</p>
+            <p id="diagNetIn" class="text-xl font-headline font-black text-primary">-- KB/s</p>
+            <p id="diagNetInTotal" class="text-[10px] font-mono text-on-surface-variant mt-1">Total: -- MB</p>
+          </div>
+          <div class="bg-surface-container-lowest p-3 rounded border border-outline-variant/20">
+            <p class="text-[10px] font-headline tracking-widest text-on-surface-variant uppercase mb-1">↑ Salida</p>
+            <p id="diagNetOut" class="text-xl font-headline font-black text-secondary">-- KB/s</p>
+            <p id="diagNetOutTotal" class="text-[10px] font-mono text-on-surface-variant mt-1">Total: -- MB</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Error banner -->
+    <div id="diagError" class="hidden max-w-4xl mx-auto mt-4 p-4 border border-error/30 bg-error/5 text-error text-xs font-mono rounded"></div>
   </div>
 </div>
 
@@ -901,6 +982,10 @@ function showView(viewId) {
     if (FLEX_VIEWS.includes(viewId)) target.classList.add("flex");
   }
 
+  // Arrancar/parar poller de diagnostics
+  if (viewId === "diagnostics") startDiagPoller();
+  else stopDiagPoller();
+
   // Actualizar nav activo
   const BOTTOM_LINKS = ["diagnostics", "logs"];
   Object.entries(NAV_ITEMS).forEach(([key, id]) => {
@@ -1245,5 +1330,94 @@ function exportHistory() {
   a.click();
 }
 
+
+// ═══════════════════════════════════════════════════════════
+// DIAGNOSTICS POLLER
+// ═══════════════════════════════════════════════════════════
+let diagInterval = null;
+
+function getBarColor(pct) {
+  if (pct >= 90) return "bg-error";
+  if (pct >= 70) return "bg-tertiary";
+  return null; // keep default
+}
+
+function updateDiagUI(data) {
+  const el = id => document.getElementById(id);
+
+  // Status dot
+  el("diagDot").className    = "w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_#37ee9b]";
+  el("diagStatus").textContent = "Live";
+  el("diagStatus").className   = "text-[10px] font-headline tracking-widest uppercase text-secondary font-bold";
+  el("diagTimestamp").textContent = new Date(data.timestamp).toLocaleTimeString();
+
+  // CPU
+  const cpu = data.cpu;
+  el("diagCpuPct").textContent  = cpu.percent + "%";
+  el("diagCpuCores").textContent = cpu.cores + " cores";
+  const cpuBar = el("diagCpuBar");
+  cpuBar.style.width = cpu.percent + "%";
+  if (cpu.percent >= 90) cpuBar.className = "h-full bg-error transition-all duration-700 rounded-full";
+  else if (cpu.percent >= 70) cpuBar.className = "h-full bg-tertiary transition-all duration-700 rounded-full";
+  else cpuBar.className = "h-full bg-primary transition-all duration-700 rounded-full";
+
+  // RAM
+  const ram = data.ram;
+  el("diagRamPct").textContent    = ram.percent + "%";
+  el("diagRamDetail").textContent = ram.used_gb + " / " + ram.total_gb + " GB";
+  const ramBar = el("diagRamBar");
+  ramBar.style.width = ram.percent + "%";
+  if (ram.percent >= 90) ramBar.className = "h-full bg-error transition-all duration-700 rounded-full";
+  else if (ram.percent >= 70) ramBar.className = "h-full bg-tertiary transition-all duration-700 rounded-full";
+  else ramBar.className = "h-full bg-secondary transition-all duration-700 rounded-full";
+
+  // Disco
+  const disk = data.disk;
+  el("diagDiskPct").textContent    = disk.percent + "%";
+  el("diagDiskDetail").textContent = disk.used_gb + " / " + disk.total_gb + " GB";
+  el("diagDiskMax").textContent    = disk.total_gb + " GB";
+  const diskBar = el("diagDiskBar");
+  diskBar.style.width = disk.percent + "%";
+  if (disk.percent >= 90) diskBar.className = "h-full bg-error transition-all duration-700 rounded-full";
+  else if (disk.percent >= 70) diskBar.className = "h-full bg-tertiary transition-all duration-700 rounded-full";
+  else diskBar.className = "h-full bg-tertiary transition-all duration-700 rounded-full";
+
+  // Red
+  const net = data.network;
+  el("diagNetIn").textContent       = net.in_kb_s + " KB/s";
+  el("diagNetOut").textContent      = net.out_kb_s + " KB/s";
+  el("diagNetInTotal").textContent  = "Total: " + net.in_total_mb + " MB";
+  el("diagNetOutTotal").textContent = "Total: " + net.out_total_mb + " MB";
+
+  // Ocultar error
+  el("diagError").classList.add("hidden");
+}
+
+async function fetchDiagnostics() {
+  try {
+    const res  = await fetch("/api/diagnostics");
+    const data = await res.json();
+    if (data.error) throw new Error(data.error);
+    updateDiagUI(data);
+  } catch(e) {
+    const dot    = document.getElementById("diagDot");
+    const status = document.getElementById("diagStatus");
+    const err    = document.getElementById("diagError");
+    if (dot)    dot.className    = "w-2 h-2 rounded-full bg-error";
+    if (status) { status.textContent = "Error"; status.className = "text-[10px] font-headline tracking-widest uppercase text-error font-bold"; }
+    if (err)    { err.textContent = "Error: " + e.message; err.classList.remove("hidden"); }
+  }
+}
+
+function startDiagPoller() {
+  fetchDiagnostics(); // fetch inmediato
+  if (diagInterval) clearInterval(diagInterval);
+  diagInterval = setInterval(fetchDiagnostics, 4000); // cada 4s
+}
+
+function stopDiagPoller() {
+  if (diagInterval) { clearInterval(diagInterval); diagInterval = null; }
+}
+
 </script>
 </body></html>