feat(compare): add payload type badges to compare request and response sections

Author: georgidhristov

DebugProbe.AspNetCore/Resources/css/debugprobe.css

@@ -218,6 +218,13 @@ pre {
     font-size: 12px;
 }
 
+.compare-pane-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+}
+
 /* =========================
    Badges
 ========================= */
@@ -268,12 +275,8 @@ pre {
 }
 
 .diff-badge {
-    min-width: 22px;
-    height: 22px;
-    background: #e74c3c;
-    color: #fff;
-    font-size: 12px;
-    font-weight: bold;
+    background: #4a1717;
+    color: #ff8a8a;
 }
 
 /* =========================

DebugProbe.AspNetCore/Resources/js/debugprobe_compare_renderer.js

@@ -180,17 +180,19 @@ function renderSideBySideJson(comparison, localJson, remoteJson ) {
         <div class="json-compare">
 
             <div>
-                <b>Local</b>
-
-                ${comparison.localError ? `<div class="json-error">${comparison.localError}</div>` : ''}
+                <div class="compare-pane-title">
+                    <b>Local</b>
+                    ${renderPayloadBadge(localJson)}
+                </div>
 
                 ${renderAlignedJson(comparison.local,localJson)}
             </div>
 
             <div>
-                <b>Remote</b>
-
-                ${comparison.remoteError ? `<div class="json-error">${comparison.remoteError}</div>` : ''}
+                <div class="compare-pane-title">
+                    <b>Remote</b>
+                    ${renderPayloadBadge(remoteJson)}
+                </div>
 
                 ${renderAlignedJson(comparison.remote, remoteJson )}
             </div>
@@ -199,6 +201,49 @@ function renderSideBySideJson(comparison, localJson, remoteJson ) {
     `;
 }
 
+function renderPayloadBadge(value) {
+
+    const payloadType = getPayloadType(value);
+
+    return `<span class="code-badge ${payloadType.className}">${payloadType.label}</span>`;
+}
+
+function getPayloadType(value) {
+
+    if (!value || !value.trim()) {
+        return {
+            label: 'Empty',
+            className: 'payload-empty'
+        };
+    }
+
+    try {
+        JSON.parse(value);
+
+        return {
+            label: 'JSON',
+            className: 'payload-json'
+        };
+    } catch {
+        return looksLikeJson(value)
+            ? {
+                label: 'Invalid JSON',
+                className: 'payload-invalid-json'
+            }
+            : {
+                label: 'Plain Text',
+                className: 'payload-text'
+            };
+    }
+}
+
+function looksLikeJson(value) {
+
+    const trimmed = value.trimStart();
+
+    return trimmed.startsWith('{') || trimmed.startsWith('[');
+}
+
 function renderAccordionSection(title, content, expanded = false, changes = 0) {
     return `
         <div class="accordion-section">
@@ -211,7 +256,7 @@ function renderAccordionSection(title, content, expanded = false, changes = 0) {
 
                 <div class="accordion-meta">
 
-                    ${changes > 0 ? `<span class="diff-badge">${changes}</span>` : ''}
+                    ${changes > 0 ? `<span class="code-badge diff-badge">${changes}</span>` : ''}
 
                     <span class="accordion-toggle">
                         ${expanded ? '-' : '+'}
@@ -288,4 +333,4 @@ function escapeHtml(value) {
         .replace(/>/g, '&gt;')
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#39;');
-}
+}