nexo-brain 2.3.2 → 2.5.0

package/src/dashboard/templates/guard.html

@@ -0,0 +1,259 @@
+{% extends "base.html" %}
+
+{% block title %}Guard Heatmap{% endblock %}
+
+{% block page_title %}Guard Heatmap{% endblock %}
+{% block page_subtitle %}<span class="text-xs text-slate-500 ml-2">Risk map of the codebase</span>{% endblock %}
+
+{% block header_actions %}
+<button onclick="loadData()" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1 rounded hover:bg-slate-800">
+  <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+  Refresh
+</button>
+{% endblock %}
+
+{% block content %}
+<!-- Stats row -->
+<div class="grid grid-cols-4 gap-4 mb-6">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Checks</p>
+    <p class="text-2xl font-display font-bold text-slate-100" id="stat-total">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Areas Covered</p>
+    <p class="text-2xl font-display font-bold text-slate-100" id="stat-areas">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Blocking Rate</p>
+    <p class="text-2xl font-display font-bold text-red-400" id="stat-blocking">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Somatic Risks</p>
+    <p class="text-2xl font-display font-bold text-amber-400" id="stat-somatic">--</p>
+  </div>
+</div>
+
+<!-- Heatmap + Somatic -->
+<div class="grid grid-cols-3 gap-5 mb-6">
+  <!-- Heatmap Grid -->
+  <div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <div class="flex items-center justify-between mb-4">
+      <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Risk Heatmap</h2>
+      <div class="flex items-center gap-2 text-[10px] text-slate-500">
+        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-emerald-500/80"></span>Low</span>
+        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-amber-500/80"></span>Medium</span>
+        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-red-500/80"></span>High</span>
+      </div>
+    </div>
+    <div id="heatmap-grid" class="grid grid-cols-3 gap-3">
+      <div class="col-span-3 py-12 text-center text-sm text-slate-500">Loading heatmap...</div>
+    </div>
+  </div>
+
+  <!-- Somatic Markers -->
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Somatic Risk Targets</h2>
+    <div id="somatic-list" class="space-y-3">
+      <div class="py-8 text-center text-sm text-slate-500">Loading...</div>
+    </div>
+  </div>
+</div>
+
+<!-- Area Detail Modal -->
+<div id="area-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center" onclick="if(event.target===this)closeModal()">
+  <div class="bg-slate-900 border border-slate-700 rounded-2xl p-6 max-w-lg w-full mx-4 shadow-2xl animate-slide-in">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-display font-semibold text-slate-100" id="modal-title">Area Details</h3>
+      <button onclick="closeModal()" class="text-slate-500 hover:text-slate-300 transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
+      </button>
+    </div>
+    <div id="modal-content" class="space-y-3"></div>
+  </div>
+</div>
+
+<!-- Recent Guard Checks -->
+<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+  <div class="flex items-center justify-between mb-4">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Recent Guard Checks</h2>
+    <span class="text-[10px] text-slate-600 font-mono" id="checks-count">--</span>
+  </div>
+  <div id="checks-table" class="overflow-x-auto">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="text-left text-xs text-slate-500 uppercase tracking-wider border-b border-slate-800/50">
+          <th class="pb-2 pr-3 font-semibold">Area</th>
+          <th class="pb-2 pr-3 font-semibold">Action</th>
+          <th class="pb-2 pr-3 font-semibold">Result</th>
+          <th class="pb-2 pr-3 font-semibold">Warnings</th>
+          <th class="pb-2 font-semibold">Time</th>
+        </tr>
+      </thead>
+      <tbody id="checks-body" class="divide-y divide-slate-800/30">
+        <tr><td colspan="5" class="py-8 text-center text-slate-500">Loading checks...</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  let guardData = null;
+
+  function heatColor(blocking, total) {
+    if (!total) return { bg: 'bg-slate-800/50', border: 'border-slate-700/30', text: 'text-slate-500' };
+    const ratio = blocking / total;
+    if (ratio > 0.3) return { bg: 'bg-red-500/15', border: 'border-red-500/30', text: 'text-red-400' };
+    if (ratio > 0.1) return { bg: 'bg-amber-500/15', border: 'border-amber-500/30', text: 'text-amber-400' };
+    return { bg: 'bg-emerald-500/15', border: 'border-emerald-500/30', text: 'text-emerald-400' };
+  }
+
+  function showAreaDetail(area) {
+    if (!guardData || !guardData.heatmap) return;
+    const info = guardData.heatmap[area];
+    if (!info) return;
+
+    document.getElementById('modal-title').textContent = area;
+    const content = document.getElementById('modal-content');
+    content.innerHTML = `
+      <div class="grid grid-cols-3 gap-3">
+        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
+          <p class="text-lg font-bold text-slate-100">${info.count || 0}</p>
+          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Checks</p>
+        </div>
+        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
+          <p class="text-lg font-bold text-red-400">${info.blocking || 0}</p>
+          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Blocking</p>
+        </div>
+        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
+          <p class="text-lg font-bold text-violet-400">${info.learnings || 0}</p>
+          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Learnings</p>
+        </div>
+      </div>
+      ${(info.recent_checks || []).length ? `
+      <div class="mt-3">
+        <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider mb-2">Recent Checks</p>
+        <div class="space-y-1.5">
+          ${(info.recent_checks || []).slice(0, 5).map(c => `
+            <div class="flex items-center justify-between bg-slate-800/30 rounded-lg px-3 py-2 text-xs">
+              <span class="text-slate-300">${escapeHtml(c.action || c.description || '--')}</span>
+              <span class="${c.passed ? 'text-emerald-400' : 'text-red-400'}">${c.passed ? 'PASS' : 'BLOCK'}</span>
+            </div>
+          `).join('')}
+        </div>
+      </div>` : ''}
+    `;
+    document.getElementById('area-modal').classList.remove('hidden');
+  }
+
+  function closeModal() {
+    document.getElementById('area-modal').classList.add('hidden');
+  }
+
+  async function loadData() {
+    const data = await fetchJSON('/api/guard');
+    if (!data) return;
+    guardData = data;
+
+    const checks = data.checks || [];
+    const heatmap = data.heatmap || {};
+    const markers = data.somatic_markers || [];
+
+    // Stats
+    const totalChecks = checks.length;
+    const areas = Object.keys(heatmap);
+    const totalBlocking = checks.filter(c => !c.passed && (c.type === 'blocking' || c.blocked)).length;
+    const blockingRate = totalChecks > 0 ? ((totalBlocking / totalChecks) * 100).toFixed(1) + '%' : '0%';
+
+    document.getElementById('stat-total').textContent = formatNumber(totalChecks);
+    document.getElementById('stat-areas').textContent = areas.length;
+    document.getElementById('stat-blocking').textContent = blockingRate;
+    document.getElementById('stat-somatic').textContent = markers.length;
+
+    // Heatmap grid
+    const grid = document.getElementById('heatmap-grid');
+    if (!areas.length) {
+      grid.innerHTML = '<div class="col-span-3 py-12 text-center text-sm text-slate-500">No guard areas recorded yet</div>';
+    } else {
+      grid.innerHTML = areas.map(area => {
+        const info = heatmap[area];
+        const c = heatColor(info.blocking || 0, info.count || 0);
+        return `
+          <button onclick="showAreaDetail('${escapeHtml(area)}')"
+            class="${c.bg} border ${c.border} rounded-xl p-4 text-left transition-all hover:scale-[1.02] hover:shadow-lg cursor-pointer group">
+            <p class="text-sm font-semibold text-slate-200 group-hover:text-white truncate">${escapeHtml(area)}</p>
+            <div class="flex items-center gap-3 mt-2">
+              <span class="text-xs text-slate-400">${info.count || 0} checks</span>
+              <span class="text-xs ${c.text} font-medium">${info.blocking || 0} blocking</span>
+            </div>
+            <div class="mt-2 h-1.5 bg-slate-800/50 rounded-full overflow-hidden">
+              <div class="h-full rounded-full transition-all duration-500 ${info.blocking > 0 ? (info.blocking / info.count > 0.3 ? 'bg-red-500' : 'bg-amber-500') : 'bg-emerald-500'}"
+                style="width: ${info.count ? Math.min(((info.blocking || 0) / info.count) * 100, 100).toFixed(1) : 0}%"></div>
+            </div>
+          </button>
+        `;
+      }).join('');
+    }
+
+    // Somatic markers
+    const somaticList = document.getElementById('somatic-list');
+    if (!markers.length) {
+      somaticList.innerHTML = '<div class="py-8 text-center text-sm text-slate-500">No somatic markers</div>';
+    } else {
+      const maxScore = Math.max(...markers.map(m => m.risk_score || 0), 1);
+      somaticList.innerHTML = markers.sort((a, b) => (b.risk_score || 0) - (a.risk_score || 0)).slice(0, 10).map(m => {
+        const score = m.risk_score || 0;
+        const pct = (score / maxScore * 100).toFixed(1);
+        const color = score > 5 ? 'bg-red-500' : score > 2 ? 'bg-amber-500' : 'bg-emerald-500';
+        const textColor = score > 5 ? 'text-red-400' : score > 2 ? 'text-amber-400' : 'text-emerald-400';
+        return `
+          <div class="flex items-center gap-3">
+            <div class="flex-1 min-w-0">
+              <p class="text-xs text-slate-300 truncate">${escapeHtml(m.target || '--')}</p>
+              <div class="mt-1 h-1.5 bg-slate-800/50 rounded-full overflow-hidden">
+                <div class="h-full rounded-full ${color} transition-all duration-700" style="width:${pct}%"></div>
+              </div>
+            </div>
+            <div class="text-right flex-shrink-0">
+              <span class="text-xs font-mono font-medium ${textColor}">${score.toFixed(1)}</span>
+              <p class="text-[10px] text-slate-600">${m.incident_count || 0} incidents</p>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    // Recent checks table
+    document.getElementById('checks-count').textContent = `${checks.length} checks`;
+    const tbody = document.getElementById('checks-body');
+    if (!checks.length) {
+      tbody.innerHTML = '<tr><td colspan="5" class="py-8 text-center text-slate-500 text-sm">No guard checks recorded</td></tr>';
+    } else {
+      tbody.innerHTML = checks.slice(0, 25).map(c => {
+        const passed = c.passed !== false && !c.blocked;
+        const warnings = c.warnings || c.warning_count || 0;
+        return `
+          <tr class="group hover:bg-slate-800/20 transition-colors">
+            <td class="py-2.5 pr-3 text-slate-300">${escapeHtml(c.area || c.category || '--')}</td>
+            <td class="py-2.5 pr-3 text-slate-400 font-mono text-xs max-w-[200px] truncate">${escapeHtml(c.action || c.description || '--')}</td>
+            <td class="py-2.5 pr-3">
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase ${passed ? 'bg-emerald-500/15 text-emerald-400' : 'bg-red-500/15 text-red-400'}">
+                <span class="w-1.5 h-1.5 rounded-full ${passed ? 'bg-emerald-400' : 'bg-red-400'}"></span>
+                ${passed ? 'Pass' : 'Block'}
+              </span>
+            </td>
+            <td class="py-2.5 pr-3 text-xs ${warnings > 0 ? 'text-amber-400' : 'text-slate-600'}">${warnings > 0 ? warnings + ' warning' + (warnings !== 1 ? 's' : '') : 'none'}</td>
+            <td class="py-2.5 text-xs text-slate-500">${relativeTime(c.created_at || c.checked_at)}</td>
+          </tr>
+        `;
+      }).join('');
+    }
+  }
+
+  loadData();
+  setInterval(loadData, 60000);
+
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
+</script>
+{% endblock %}