From d9c150453f88890994b12d188f20dcf6d76f9109 Mon Sep 17 00:00:00 2001
From: Georgi Hristov <georgi.dimitrov.hristov@gmail.com>
Date: Fri, 8 May 2026 21:36:24 +0300
Subject: [PATCH 1/3] feat: add colored HTTP status badges

---
 .../Internal/HtmlRenderer.cs                  | 16 ++++++++----
 .../Resources/css/debugprobe.css              | 25 +++++++++++++++++++
 .../Resources/html/details.html               |  4 ++-
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs b/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs
index d155d9b..52b9ce8 100644
--- a/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs
+++ b/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs
@@ -48,10 +48,20 @@ public static string RenderDetailsPage(DebugEntry x, string req, string res)
             ? x.Path
             : $"{x.Path}{x.Query}";
 
+        var statusClass = x.StatusCode switch
+        {
+            >= 200 and < 300 => "status-200",
+            >= 300 and < 400 => "status-300",
+            >= 400 and < 500 => "status-400",
+            >= 500 => "status-500",
+            _ => ""
+        };
+
         var content = EmbeddedResources.Details
             .Replace("{{method}}", Encode(x.Method))
             .Replace("{{path}}", Encode(pathWithQuery))
-            .Replace("{{status}}", x.StatusCode.ToString())
+            .Replace("{{status}}", string.Format($"{x.StatusCode} {((HttpStatusCode)x.StatusCode)}"))
+            .Replace("{{statusClass}}", statusClass)
             .Replace("{{tradeId}}", x.Id.ToString())
 
             .Replace("{{time}}", x.Timestamp.ToString("yyyy-MM-dd HH:mm:ss.fff"))
@@ -70,10 +80,6 @@ public static string RenderDetailsPage(DebugEntry x, string req, string res)
             .Replace("{{dateFormat}}", x.DateFormat ?? "")
             .Replace("{{assemblyVersion}}", Encode(x.AssemblyVersion))
 
-
-
-
-
             .Replace("{{requestUrl}}", Encode(string.IsNullOrEmpty(x.RequestUrl) ? "(empty)" : x.RequestUrl))
             .Replace("{{request}}", Encode(string.IsNullOrEmpty(req) ? "(empty)" : req))
             .Replace("{{response}}", Encode(string.IsNullOrEmpty(res) ? "(empty)" : res))
diff --git a/DebugProbe.AspNetCore/Resources/css/debugprobe.css b/DebugProbe.AspNetCore/Resources/css/debugprobe.css
index 9256076..b4b312f 100644
--- a/DebugProbe.AspNetCore/Resources/css/debugprobe.css
+++ b/DebugProbe.AspNetCore/Resources/css/debugprobe.css
@@ -246,6 +246,31 @@ pre {
     font-weight: bold;
 }
 
+.status {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.status-200 {
+    background: #dcfce7;
+    color: #166534;
+}
+
+.status-300 {
+    background: #dbeafe;
+    color: #1d4ed8;
+}
+
+.status-400,
+.status-500 {
+    background: #fecaca;
+    color: #991b1b;
+}
+
 
 /* =========================
    Accordion
diff --git a/DebugProbe.AspNetCore/Resources/html/details.html b/DebugProbe.AspNetCore/Resources/html/details.html
index 04dc444..54ecd22 100644
--- a/DebugProbe.AspNetCore/Resources/html/details.html
+++ b/DebugProbe.AspNetCore/Resources/html/details.html
@@ -11,7 +11,9 @@ <h2>{{method}} {{path}}</h2>
 
             <div class="details-item">
                 <span>Status</span>
-                <strong>{{status}}</strong>
+                <span class="status {{statusClass}}">
+                    <strong>{{status}}</strong>
+                </span>
             </div>
 
             <div class="details-item">

From 2fa352d53d7035819f76a7f24c5675534e76fe5c Mon Sep 17 00:00:00 2001
From: Georgi Hristov <georgi.dimitrov.hristov@gmail.com>
Date: Fri, 8 May 2026 21:43:03 +0300
Subject: [PATCH 2/3] feat: add copyable trace id UI

---
 DebugProbe.AspNetCore/Internal/HtmlRenderer.cs   |  2 +-
 .../Resources/css/debugprobe.css                 | 16 ++++++++++++++++
 .../Resources/html/details.html                  |  5 ++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs b/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs
index 52b9ce8..5d74a4a 100644
--- a/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs
+++ b/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs
@@ -62,7 +62,7 @@ public static string RenderDetailsPage(DebugEntry x, string req, string res)
             .Replace("{{path}}", Encode(pathWithQuery))
             .Replace("{{status}}", string.Format($"{x.StatusCode} {((HttpStatusCode)x.StatusCode)}"))
             .Replace("{{statusClass}}", statusClass)
-            .Replace("{{tradeId}}", x.Id.ToString())
+            .Replace("{{traceId}}", x.Id.ToString())
 
             .Replace("{{time}}", x.Timestamp.ToString("yyyy-MM-dd HH:mm:ss.fff"))
             .Replace("{{local}}", x.Timestamp.ToLocalTime().ToString("HH:mm:ss"))
diff --git a/DebugProbe.AspNetCore/Resources/css/debugprobe.css b/DebugProbe.AspNetCore/Resources/css/debugprobe.css
index b4b312f..340ba40 100644
--- a/DebugProbe.AspNetCore/Resources/css/debugprobe.css
+++ b/DebugProbe.AspNetCore/Resources/css/debugprobe.css
@@ -233,6 +233,22 @@ pre {
         background: #3a3a3a;
     }
 
+
+.trace-id-button {
+    background: #f3f4f6;
+    border: none;
+    border-radius: 6px;
+    font-size: 13px;
+    padding: 6px 10px;
+    cursor: pointer;
+    font-family: monospace;
+    font-weight: 600;
+}
+
+    .trace-id-button:hover {
+        background: #e5e7eb;
+    }
+
 /* =========================
    Status
 ========================= */
diff --git a/DebugProbe.AspNetCore/Resources/html/details.html b/DebugProbe.AspNetCore/Resources/html/details.html
index 54ecd22..23a0843 100644
--- a/DebugProbe.AspNetCore/Resources/html/details.html
+++ b/DebugProbe.AspNetCore/Resources/html/details.html
@@ -18,7 +18,10 @@ <h2>{{method}} {{path}}</h2>
 
             <div class="details-item">
                 <span>TraceId</span>
-                <strong>{{tradeId}}</strong>
+                <button class="trace-id-button"
+                        onclick="navigator.clipboard.writeText('{{traceId}}')">
+                   {{traceId}}
+                </button>
             </div>
 
             <div class="details-item">

From c3aade2a582bf2d2d364307ea5ccd606e416316f Mon Sep 17 00:00:00 2001
From: Georgi Hristov <georgi.dimitrov.hristov@gmail.com>
Date: Fri, 8 May 2026 22:02:11 +0300
Subject: [PATCH 3/3] freat: improve details page row spacing

---
 DebugProbe.AspNetCore/Resources/css/debugprobe.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/DebugProbe.AspNetCore/Resources/css/debugprobe.css b/DebugProbe.AspNetCore/Resources/css/debugprobe.css
index 340ba40..92db731 100644
--- a/DebugProbe.AspNetCore/Resources/css/debugprobe.css
+++ b/DebugProbe.AspNetCore/Resources/css/debugprobe.css
@@ -98,6 +98,7 @@ a {
 }
 
 .details-item {
+    min-height: 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;