blaze-performance-tester 3.0.20 → 3.0.22

package/dist/cli.js

@@ -401,30 +401,52 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   }).join("");
   let logClustersHtml = "";
   if (semanticReport) {
+    const totalLogCount = semanticReport.clusters.reduce((sum, c) => sum + c.count, 0);
+    const uniquePatternsCount = semanticReport.clusters.length;
     logClustersHtml = `
-    <div class="card" style="margin-top: 2rem;">
-      <h3>\u{1F9E0} Semantic Log Clustering & Error Classification</h3>
-      <table>
+    <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
+      <h3 style="border-bottom: none; padding-bottom: 0rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; color: #ffffff; font-size: 1.2rem;">
+        \u{1F9E0} Semantic Log Clustering & Error Classification
+      </h3>
+      <div style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 1.5rem;">
+        Captured <strong style="color: #f8fafc;">${totalLogCount}</strong> raw failures grouped into <strong style="color: #f8fafc;">${uniquePatternsCount}</strong> unique structural patterns.
+      </div>
+      
+      <table style="width: 100%; border-collapse: collapse;">
         <thead>
-          <tr>
-            <th style="width: 10%;">Count</th>
-            <th style="width: 25%;">Classification Category</th>
-            <th style="width: 10%;">Severity</th>
-            <th style="width: 55%;">Structural Abstract Blueprint</th>
+          <tr style="border-bottom: 1px solid #1e293b;">
+            <th style="width: 8%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Count</th>
+            <th style="width: 22%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Classification Category</th>
+            <th style="width: 10%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Severity</th>
+            <th style="width: 60%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Structural Abstract Blueprint / Dynamic Log Fingerprint</th>
           </tr>
         </thead>
         <tbody>
           ${semanticReport.clusters.map((c) => {
-      let catColor = "#f87171";
-      if (c.category === "Environment_Infrastructure_Error") catColor = "#fb923c";
+      let catColor = "#fb923c";
       if (c.category === "Authentication_Error") catColor = "#c084fc";
-      let sevColor = c.severity === "CRITICAL" ? "#dc2626" : "#eab308";
+      if (c.category === "Product_Error") catColor = "#f87171";
+      if (c.category === "Environment_Infrastructure_Error") catColor = "#fb923c";
+      let sevBg = c.severity === "CRITICAL" ? "#dc2626" : "#ea580c";
+      const rawTemplate = c.template || "";
+      const cleanedTemplate = rawTemplate.replace(/\[\d{4}-\d{2}-\d{2}.*?\]\s*/, "");
       return `
-              <tr>
-                <td><span style="font-size: 1.1rem; font-weight: bold; color: #f8fafc;">${c.count}</span></td>
-                <td><span style="color: ${catColor}; font-weight: 600;">${c.category}</span></td>
-                <td><span style="background: ${sevColor}; color: #fff; padding: 0.15rem 0.4rem; border-radius:3px; font-size:0.75rem; font-weight:bold;">${c.severity}</span></td>
-                <td><code style="color: #cbd5e1; background: #0f172a; padding: 0.3rem 0.5rem; display: block; border-radius: 4px; font-size: 0.85rem;">${c.template}</code></td>
+              <tr style="border-bottom: 1px solid #1e293b; vertical-align: top;">
+                <td style="padding: 1.25rem 0.75rem; font-size: 1.2rem; font-weight: bold; color: #f8fafc;">${c.count}</td>
+                <td style="padding: 1.25rem 0.75rem; color: ${catColor}; font-weight: 600; font-size: 0.95rem;">${c.category}</td>
+                <td style="padding: 1.25rem 0.75rem;">
+                  <span style="background: ${sevBg}; color: #ffffff; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: bold; letter-spacing: 0.05em;">${c.severity}</span>
+                </td>
+                <td style="padding: 1.25rem 0.75rem;">
+                  <!-- Abstract Template Blueprint Box -->
+                  <div style="background: #090d16; border-radius: 4px; padding: 0.6rem 0.8rem; border-left: 3px solid #1e293b; margin-bottom: 0.5rem;">
+                    <code style="color: #cbd5e1; font-family: monospace; font-size: 0.9rem; white-space: pre-wrap; word-break: break-all;">${cleanedTemplate}</code>
+                  </div>
+                  <!-- Trace Example Line -->
+                  <div style="color: #64748b; font-size: 0.8rem; font-family: monospace; padding-left: 0.2rem; line-height: 1.4;">
+                    <span style="color: #475569;">Real Example Trace:</span> ${rawTemplate}
+                  </div>
+                </td>
               </tr>`;
     }).join("")}
         </tbody>
@@ -647,13 +669,13 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
             position: 'top',
             labels: { color: '#94a3b8', boxWidth: 12, font: { size: 11 } }
           }
-        },
-        scales: {
-          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
-          y: { stacked: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' }, title: { display: true, text: 'Requests Volume', color: '#64748b' } },
-          yThreads: { position: 'right', display: true, grid: { drawOnChartArea: false }, ticks: { color: '#38bdf8' }, title: { display: true, text: 'Active Threads', color: '#38bdf8' } },
-          yTtf: { position: 'right', display: false, grid: { drawOnChartArea: false } }
         }
+      },
+      scales: {
+        x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
+        y: { stacked: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' }, title: { display: true, text: 'Requests Volume', color: '#64748b' } },
+        yThreads: { position: 'right', display: true, grid: { drawOnChartArea: false }, ticks: { color: '#38bdf8' }, title: { display: true, text: 'Active Threads', color: '#38bdf8' } },
+        yTtf: { position: 'right', display: false, grid: { drawOnChartArea: false } }
       }
     });
   </script></body></html>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blaze-performance-tester",
-  "version": "3.0.20",
+  "version": "3.0.22",
   "description": "A high-performance, multi-threaded load testing engine built with Rust and QuickJS.",
   "type": "module",
   "main": "dist/index.js",