nestjs-profiler 1.0.22 → 1.0.24

package/views/live-logs.html

@@ -0,0 +1,324 @@
+<!-- Live Logs Terminal -->
+<div class="flex flex-col h-full" style="height: calc(100vh - 120px);">
+
+  <!-- Toolbar -->
+  <div class="flex flex-wrap items-center gap-3 mb-3">
+    <!-- Status indicator -->
+    <div class="flex items-center gap-2">
+      <span id="statusDot" class="w-2.5 h-2.5 rounded-full bg-yellow-400 animate-pulse"></span>
+      <span id="statusText" class="text-sm font-medium text-gray-600">Connecting…</span>
+    </div>
+
+    <div class="h-4 border-l border-gray-200"></div>
+
+    <!-- Level filter -->
+    <div class="flex items-center gap-1">
+      <span class="text-xs text-gray-500 mr-1">Level:</span>
+      <button onclick="toggleLevel('all')" id="btn-all"
+        class="level-btn px-2.5 py-1 text-xs font-medium rounded-full bg-indigo-600 text-white">All</button>
+      <button onclick="toggleLevel('log')" id="btn-log"
+        class="level-btn px-2.5 py-1 text-xs font-medium rounded-full text-gray-600 bg-gray-100 hover:bg-gray-200">Log</button>
+      <button onclick="toggleLevel('warn')" id="btn-warn"
+        class="level-btn px-2.5 py-1 text-xs font-medium rounded-full text-yellow-700 bg-yellow-50 hover:bg-yellow-100">Warn</button>
+      <button onclick="toggleLevel('error')" id="btn-error"
+        class="level-btn px-2.5 py-1 text-xs font-medium rounded-full text-red-700 bg-red-50 hover:bg-red-100">Error</button>
+      <button onclick="toggleLevel('debug')" id="btn-debug"
+        class="level-btn px-2.5 py-1 text-xs font-medium rounded-full text-gray-500 bg-gray-50 hover:bg-gray-100">Debug</button>
+    </div>
+
+    <div class="h-4 border-l border-gray-200"></div>
+
+    <!-- Search -->
+    <div class="relative flex-1 max-w-xs">
+      <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+      </svg>
+      <input id="searchInput" type="text" placeholder="Filter logs..."
+        class="w-full pl-8 pr-3 py-1.5 text-xs border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-400"
+        oninput="applyFilter()">
+    </div>
+
+    <div class="ml-auto flex items-center gap-2">
+      <!-- High-volume warning badge (hidden by default) -->
+      <span id="floodBadge" class="hidden items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-orange-100 text-orange-700">
+        ⚡ High volume — sampling
+      </span>
+      <!-- Log counter -->
+      <span class="text-xs text-gray-400"><span id="visibleCount">0</span> / <span id="totalCount">0</span> lines</span>
+
+      <!-- Pause / Resume -->
+      <button id="pauseBtn" onclick="togglePause()"
+        class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white hover:bg-gray-50 text-gray-600">
+        <svg id="pauseIcon" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6"/>
+        </svg>
+        <span id="pauseLabel">Pause</span>
+      </button>
+
+      <!-- Auto-scroll toggle -->
+      <button id="scrollBtn" onclick="toggleScroll()"
+        class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-indigo-200 bg-indigo-50 text-indigo-700">
+        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+        </svg>
+        Auto-scroll
+      </button>
+
+      <!-- Clear -->
+      <button onclick="clearLogs()"
+        class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white hover:bg-red-50 hover:border-red-200 hover:text-red-600 text-gray-600">
+        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+        </svg>
+        Clear
+      </button>
+    </div>
+  </div>
+
+  <!-- Terminal window -->
+  <div class="flex-1 bg-gray-950 rounded-xl border border-gray-800 overflow-hidden flex flex-col" style="min-height: 0;">
+    <!-- Terminal titlebar -->
+    <div class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-900 border-b border-gray-800 flex-shrink-0">
+      <span class="w-3 h-3 rounded-full bg-red-500"></span>
+      <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
+      <span class="w-3 h-3 rounded-full bg-green-500"></span>
+      <span class="ml-3 text-xs text-gray-500 font-mono">NestJS Application — live output</span>
+    </div>
+
+    <!-- Log output -->
+    <div id="logOutput" class="flex-1 overflow-y-auto p-4 font-mono text-xs leading-5 space-y-0.5"
+      style="min-height: 0; scroll-behavior: smooth;">
+      <div class="text-gray-600 italic">Waiting for logs...</div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // ── State ─────────────────────────────────────────────────────────────────
+  let paused      = false;
+  let autoScroll  = true;
+  let activeLevel = 'all';
+  let activeSearch = '';
+
+  // Line accounting — maintained manually so we never querySelectorAll on every append
+  const MAX_LINES = 500;
+  let domLineCount  = 0;   // lines currently in DOM
+  let visibleCount  = 0;   // lines currently visible (pass filter)
+  let totalReceived = 0;   // all-time lines received this session
+
+  // Flood-rate tracking (lines per second)
+  let rateCount = 0;
+  let rateTimer = setInterval(() => {
+    const badge = document.getElementById('floodBadge');
+    if (badge) {
+      if (rateCount > 50) { badge.classList.remove('hidden'); badge.classList.add('flex'); }
+      else                { badge.classList.add('hidden');    badge.classList.remove('flex'); }
+    }
+    rateCount = 0;
+  }, 1000);
+
+  // Pending queue for batched DOM writes (filled by SSE, drained by rAF)
+  let pendingEntries = [];
+  let rafScheduled   = false;
+
+  // ── Colour map ────────────────────────────────────────────────────────────
+  const COLORS = {
+    error:   { text: 'text-red-400',    badge: 'text-red-500 bg-red-950'      },
+    warn:    { text: 'text-yellow-300', badge: 'text-yellow-400 bg-yellow-950' },
+    log:     { text: 'text-green-300',  badge: 'text-green-500 bg-green-950'   },
+    verbose: { text: 'text-cyan-300',   badge: 'text-cyan-500 bg-cyan-950'     },
+    debug:   { text: 'text-gray-400',   badge: 'text-gray-500 bg-gray-900'     },
+    system:  { text: 'text-indigo-300', badge: 'text-indigo-400 bg-indigo-950' },
+  };
+  function getColors(level) { return COLORS[level] || COLORS['log']; }
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  function formatTime(ts) {
+    const d = new Date(ts);
+    return d.toTimeString().slice(0, 8) + '.' + String(d.getMilliseconds()).padStart(3, '0');
+  }
+
+  function escHtml(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+
+  function buildElement(entry) {
+    const c    = getColors(entry.level);
+    const time = formatTime(entry.timestamp);
+    const ctx  = entry.context ? `<span class="text-indigo-400 mr-2">[${escHtml(entry.context)}]</span>` : '';
+    const msg  = escHtml(entry.message || '');
+    const lvl  = escHtml(entry.level);
+
+    const el = document.createElement('div');
+    el.className = 'log-line flex items-start gap-2 hover:bg-gray-900 rounded px-1 py-0.5';
+    el.dataset.level = entry.level;
+    el.dataset.msg   = (entry.message || '').toLowerCase();
+    el.innerHTML = `
+      <span class="flex-shrink-0 text-gray-600 select-none">${time}</span>
+      <span class="flex-shrink-0 w-14 text-center text-xs px-1 rounded font-semibold uppercase ${c.badge}">${lvl}</span>
+      <span class="${c.text} break-all">${ctx}${msg}</span>`;
+    return el;
+  }
+
+  function passesFilter(entry) {
+    const levelOk  = activeLevel === 'all' || entry.level === activeLevel;
+    const searchOk = !activeSearch || (entry.message || '').toLowerCase().includes(activeSearch);
+    return levelOk && searchOk;
+  }
+
+  // ── Batch DOM flush (called by requestAnimationFrame) ─────────────────────
+  function flushPending() {
+    rafScheduled = false;
+    if (pendingEntries.length === 0) return;
+
+    const output    = document.getElementById('logOutput');
+    if (!output) return;
+
+    // Remove placeholder on first real log
+    const ph = output.querySelector('.italic');
+    if (ph) ph.remove();
+
+    const entries = pendingEntries.splice(0);   // drain the queue
+    const frag    = document.createDocumentFragment();
+
+    entries.forEach(entry => {
+      const el = buildElement(entry);
+      const visible = passesFilter(entry);
+      if (!visible) el.style.display = 'none';
+      else visibleCount++;
+      frag.appendChild(el);
+      domLineCount++;
+      totalReceived++;
+      rateCount++;
+    });
+
+    output.appendChild(frag);
+
+    // Trim oldest lines when over the cap — batch-remove all excess at once
+    const excess = domLineCount - MAX_LINES;
+    if (excess > 0) {
+      // Collect first `excess` .log-line children
+      let removed = 0, child = output.firstElementChild;
+      while (child && removed < excess) {
+        const next = child.nextElementSibling;
+        if (child.classList.contains('log-line')) {
+          if (child.style.display !== 'none') visibleCount = Math.max(0, visibleCount - 1);
+          output.removeChild(child);
+          domLineCount--;
+          removed++;
+        }
+        child = next;
+      }
+    }
+
+    // Update counters once per frame, not once per line
+    document.getElementById('totalCount').textContent   = totalReceived;
+    document.getElementById('visibleCount').textContent = visibleCount;
+
+    if (autoScroll) output.scrollTop = output.scrollHeight;
+  }
+
+  function scheduleFlush() {
+    if (!rafScheduled) { rafScheduled = true; requestAnimationFrame(flushPending); }
+  }
+
+  // ── Public UI actions ─────────────────────────────────────────────────────
+  function applyFilter() {
+    activeSearch = document.getElementById('searchInput').value.toLowerCase();
+    const output = document.getElementById('logOutput');
+    if (!output) return;
+    visibleCount = 0;
+    output.querySelectorAll('.log-line').forEach(line => {
+      const ok = (activeLevel === 'all' || line.dataset.level === activeLevel)
+              && (!activeSearch || line.dataset.msg.includes(activeSearch));
+      line.style.display = ok ? '' : 'none';
+      if (ok) visibleCount++;
+    });
+    document.getElementById('visibleCount').textContent = visibleCount;
+  }
+
+  function toggleLevel(level) {
+    activeLevel = level;
+    document.querySelectorAll('.level-btn').forEach(btn => {
+      btn.classList.toggle('ring-2', btn.id === `btn-${level}`);
+    });
+    applyFilter();
+  }
+
+  function togglePause() {
+    paused = !paused;
+    const icon       = document.getElementById('pauseIcon');
+    const label      = document.getElementById('pauseLabel');
+    const dot        = document.getElementById('statusDot');
+    const statusText = document.getElementById('statusText');
+    if (paused) {
+      icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>';
+      label.textContent = 'Resume';
+      dot.className = 'w-2.5 h-2.5 rounded-full bg-yellow-400';
+      statusText.textContent = 'Paused';
+    } else {
+      icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6"/>';
+      label.textContent = 'Pause';
+      dot.className = 'w-2.5 h-2.5 rounded-full bg-green-400 animate-pulse';
+      statusText.textContent = 'Connected';
+    }
+  }
+
+  function toggleScroll() {
+    autoScroll = !autoScroll;
+    const btn = document.getElementById('scrollBtn');
+    if (autoScroll) {
+      btn.className = 'flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-indigo-200 bg-indigo-50 text-indigo-700';
+      const output = document.getElementById('logOutput');
+      if (output) output.scrollTop = output.scrollHeight;
+    } else {
+      btn.className = 'flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white text-gray-500';
+    }
+  }
+
+  function clearLogs() {
+    domLineCount  = 0;
+    visibleCount  = 0;
+    totalReceived = 0;
+    document.getElementById('totalCount').textContent   = '0';
+    document.getElementById('visibleCount').textContent = '0';
+    const output = document.getElementById('logOutput');
+    if (output) output.innerHTML = '<div class="text-gray-600 italic">Cleared. Waiting for new logs...</div>';
+  }
+
+  // ── SSE connection ────────────────────────────────────────────────────────
+  function connect() {
+    if (window.__profilerLogES) { window.__profilerLogES.close(); window.__profilerLogES = null; }
+
+    const dot        = document.getElementById('statusDot');
+    const statusText = document.getElementById('statusText');
+    const es         = new EventSource('/__profiler/logs/stream');
+    window.__profilerLogES = es;
+
+    es.onopen = () => {
+      if (dot)        dot.className = 'w-2.5 h-2.5 rounded-full bg-green-400 animate-pulse';
+      if (statusText) statusText.textContent = 'Connected';
+    };
+
+    es.onmessage = (e) => {
+      if (paused) return;
+      try {
+        const data = JSON.parse(e.data);
+        // Server sends either a single entry or an array (batched)
+        const entries = Array.isArray(data) ? data : [data];
+        entries.forEach(entry => pendingEntries.push(entry));
+        scheduleFlush();
+      } catch (_) {}
+    };
+
+    es.onerror = () => {
+      if (dot)        dot.className = 'w-2.5 h-2.5 rounded-full bg-red-400';
+      if (statusText) statusText.textContent = 'Reconnecting…';
+      es.close();
+      window.__profilerLogES = null;
+      setTimeout(connect, 3000);
+    };
+  }
+
+  connect();
+</script>

package/views/summary.html

@@ -0,0 +1,205 @@
+<!-- Summary Dashboard -->
+<div class="space-y-6">
+
+  <!-- Page Header -->
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900">Summary</h1>
+      <p class="mt-1 text-sm text-gray-500">Aggregated stats across all captured requests</p>
+    </div>
+    <span class="text-xs text-gray-400 bg-white border border-gray-200 px-3 py-1.5 rounded-lg">{{ totalRequests }} requests sampled</span>
+  </div>
+
+  <!-- KPI Cards Row 1 -->
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+    <!-- Total Requests -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Total Requests</p>
+        <span class="p-1.5 bg-indigo-50 rounded-lg">
+          <svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+          </svg>
+        </span>
+      </div>
+      <p class="text-3xl font-bold text-gray-900">{{ totalRequests }}</p>
+    </div>
+
+    <!-- Avg Duration -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Avg Duration</p>
+        <span class="p-1.5 bg-blue-50 rounded-lg">
+          <svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </span>
+      </div>
+      <p class="text-3xl font-bold text-gray-900">{{ avgDuration }}<span class="text-base font-medium text-gray-400 ml-1">ms</span></p>
+      <p class="text-xs text-gray-400 mt-1">p95: {{ p95Duration }}ms</p>
+    </div>
+
+    <!-- Error Rate -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Error Rate</p>
+        <span class="{{{ errorRateBadgeClass }}} p-1.5 rounded-lg">
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+          </svg>
+        </span>
+      </div>
+      <p class="text-3xl font-bold {{{ errorRateTextClass }}}">{{ errorRate }}<span class="text-base font-medium text-gray-400 ml-0.5">%</span></p>
+      <p class="text-xs text-gray-400 mt-1">{{ errorCount }} errors</p>
+    </div>
+
+    <!-- Total Queries -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">DB Queries</p>
+        <span class="p-1.5 bg-purple-50 rounded-lg">
+          <svg class="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
+          </svg>
+        </span>
+      </div>
+      <p class="text-3xl font-bold text-gray-900">{{ totalQueries }}</p>
+      <p class="text-xs text-gray-400 mt-1">{{ avgQueriesPerRequest }} avg/request</p>
+    </div>
+  </div>
+
+  <!-- KPI Cards Row 2 -->
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+    <!-- Slow Queries -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Slow Queries</p>
+        <span class="p-1.5 bg-yellow-50 rounded-lg">
+          <svg class="w-4 h-4 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+          </svg>
+        </span>
+      </div>
+      <p class="text-3xl font-bold {{{ slowQueriesTextClass }}}">{{ slowQueries }}</p>
+      <p class="text-xs text-gray-400 mt-1">&gt;100ms threshold</p>
+    </div>
+
+    <!-- N+1 Detected -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">N+1 Detected</p>
+        <span class="p-1.5 {{{ nPlusOneBadgeClass }}} rounded-lg">
+          <svg class="w-4 h-4 {{{ nPlusOneIconClass }}}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
+        </span>
+      </div>
+      <p class="text-3xl font-bold {{{ nPlusOneTextClass }}}">{{ nPlusOneCount }}</p>
+      <p class="text-xs text-gray-400 mt-1">duplicate query patterns</p>
+    </div>
+
+    <!-- Cache Hit Rate -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Cache Hit Rate</p>
+        <span class="p-1.5 bg-green-50 rounded-lg">
+          <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </span>
+      </div>
+      <p class="text-3xl font-bold text-gray-900">{{ cacheHitRate }}<span class="text-base font-medium text-gray-400 ml-0.5">%</span></p>
+      <p class="text-xs text-gray-400 mt-1">{{ totalCacheOps }} total operations</p>
+    </div>
+
+    <!-- Memory Usage -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <div class="flex items-center justify-between mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Heap Used</p>
+        <span class="p-1.5 bg-slate-50 rounded-lg">
+          <svg class="w-4 h-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
+          </svg>
+        </span>
+      </div>
+      <p class="text-3xl font-bold text-gray-900">{{ heapUsed }}<span class="text-base font-medium text-gray-400 ml-1">MB</span></p>
+      <p class="text-xs text-gray-400 mt-1">{{ heapTotal }} MB total / {{ rss }} MB RSS</p>
+    </div>
+  </div>
+
+  <!-- Mid Row: Distributions + Seq Scans -->
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+    <!-- HTTP Method Distribution -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <h3 class="text-sm font-semibold text-gray-700 mb-4">Requests by Method</h3>
+      {{{ methodBars }}}
+    </div>
+
+    <!-- Status Code Distribution -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <h3 class="text-sm font-semibold text-gray-700 mb-4">Requests by Status</h3>
+      {{{ statusBars }}}
+    </div>
+
+    <!-- Query Issue Breakdown -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+      <h3 class="text-sm font-semibold text-gray-700 mb-4">Query Issues</h3>
+      <div class="space-y-3">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <span class="w-2.5 h-2.5 rounded-full bg-yellow-400"></span>
+            <span class="text-sm text-gray-600">Slow (&gt;100ms)</span>
+          </div>
+          <span class="text-sm font-semibold text-gray-800">{{ slowQueries }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <span class="w-2.5 h-2.5 rounded-full bg-orange-400"></span>
+            <span class="text-sm text-gray-600">N+1 Patterns</span>
+          </div>
+          <span class="text-sm font-semibold text-gray-800">{{ nPlusOneCount }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <span class="w-2.5 h-2.5 rounded-full bg-red-400"></span>
+            <span class="text-sm text-gray-600">Seq Scans</span>
+          </div>
+          <span class="text-sm font-semibold text-gray-800">{{ seqScanCount }}</span>
+        </div>
+        <div class="pt-3 border-t border-gray-100">
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-gray-400">Total queries</span>
+            <span class="text-xs font-semibold text-gray-600">{{ totalQueries }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bottom Row: Top Slow Endpoints + Top Slow Queries -->
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+    <!-- Top Slow Endpoints -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+      <div class="px-5 py-4 border-b border-gray-100">
+        <h3 class="text-sm font-semibold text-gray-700">Top Slowest Endpoints</h3>
+        <p class="text-xs text-gray-400 mt-0.5">Ranked by average response time</p>
+      </div>
+      {{{ topEndpointsTable }}}
+    </div>
+
+    <!-- Top Slow Queries -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+      <div class="px-5 py-4 border-b border-gray-100">
+        <h3 class="text-sm font-semibold text-gray-700">Top Slowest Queries</h3>
+        <p class="text-xs text-gray-400 mt-0.5">Ranked by execution time</p>
+      </div>
+      {{{ topQueriesTable }}}
+    </div>
+  </div>
+
+  <!-- Recent Errors -->
+  {{{ recentErrorsSection }}}
+
+</div>