feat(ui): add request metrics overview cards

Author: georgidhristov

DebugProbe.AspNetCore/Assets/css/debugprobe.css

@@ -77,6 +77,39 @@ h4 {
     margin-bottom: 14px;
 }
 
+.stats-bar {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(150px, 1fr));
+    gap: 10px;
+    margin-bottom: 14px;
+}
+
+.stat-tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 52px;
+    padding: 0 16px;
+    background: #fff;
+    border: 1px solid #e9e9e9;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.stat-tile strong {
+    color: #1f2937;
+    font-size: 22px;
+    line-height: 1;
+}
+
+.stat-tile span {
+    color: #666;
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
 .filters input,
 .filters select {
     min-height: 36px;
@@ -325,6 +358,10 @@ tbody tr:last-child td {
         grid-template-columns: 1fr;
     }
 
+    .stats-bar {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .payload-group {
         padding: 14px;
     }

DebugProbe.AspNetCore/Assets/html/index.html

@@ -6,6 +6,25 @@ <h2>Requests</h2>
         </div>
     </div>
 
+    <div class="stats-bar" aria-label="Request summary">
+        <div class="stat-tile">
+            <strong>{{total_requests}}</strong>
+            <span>Requests</span>
+        </div>
+        <div class="stat-tile">
+            <strong>{{avg_response_time}}</strong>
+            <span>Avg</span>
+        </div>
+        <div class="stat-tile">
+            <strong>{{slow_requests}}</strong>
+            <span>Slow</span>
+        </div>
+        <div class="stat-tile">
+            <strong>{{error_rate}}</strong>
+            <span>Errors</span>
+        </div>
+    </div>
+
     <div class="filters" aria-label="Request filters">
         <input id="requestSearch" type="search" placeholder="Search path, method, status, or trace id" autocomplete="off" />
         <select id="methodFilter" aria-label="Filter by method">

DebugProbe.AspNetCore/Internal/Rendering/HtmlRenderer.cs

@@ -24,6 +24,8 @@ public static string BuildLayout(string content)
 
     public static string RenderIndexPage(List<DebugEntry> items)
     {
+        const int slowRequestThresholdMs = 1000;
+
         var rows = string.Join("", items.Select(x => $@"
         <tr data-url=""/debug/{Encode(x.Id)}""
             data-method=""{Encode(x.Method)}""
@@ -48,10 +50,23 @@ public static string RenderIndexPage(List<DebugEntry> items)
             .OrderBy(method => method, StringComparer.OrdinalIgnoreCase)
             .Select(method => $@"<option value=""{Encode(method)}"">{Encode(method)}</option>"));
 
+        var totalRequests = items.Count;
+        var averageResponseMs = totalRequests == 0
+            ? 0
+            : (int)Math.Round(items.Average(x => x.DurationMs));
+        var slowRequests = items.Count(x => x.DurationMs >= slowRequestThresholdMs);
+        var errorRate = totalRequests == 0
+            ? 0
+            : items.Count(x => x.StatusCode >= 400) * 100d / totalRequests;
+
         return BuildLayout(EmbeddedResources.Index
             .Replace("{{rows}}", rows)
             .Replace("{{total_count}}", items.Count.ToString())
-            .Replace("{{method_options}}", methodOptions));
+            .Replace("{{method_options}}", methodOptions)
+            .Replace("{{total_requests}}", FormatCompactNumber(totalRequests))
+            .Replace("{{avg_response_time}}", $"{averageResponseMs} ms")
+            .Replace("{{slow_requests}}", FormatCompactNumber(slowRequests))
+            .Replace("{{error_rate}}", $"{errorRate:0.#}%"));
     }
 
     public static string RenderDetailsPage(DebugEntry x, DebugEnvironment e, string req, string res)
@@ -132,4 +147,14 @@ private static string GetResponseGroupClass(int statusCode)
         return statusCode >= 400 ? "response-error" : "";
     }
 
+    private static string FormatCompactNumber(int value)
+    {
+        return value switch
+        {
+            >= 1_000_000 => $"{value / 1_000_000d:0.#}M",
+            >= 1_000 => $"{value / 1_000d:0.#}K",
+            _ => value.ToString()
+        };
+    }
+
 }