blaze-performance-tester 3.1.22 → 3.1.23

package/dist/cli.js

@@ -467,7 +467,7 @@ function processMetricsTelemetry(requests, durationSec) {
   const avgTlsMs = mathUtils.mean(requests.map((r) => r.tlsTimeMs || 0));
   const avgTtfbMs = avgDnsMs + avgTcpMs + avgTlsMs + avgLatencyMs * 0.3;
   let c1xx = 0, c2xx = 0, c3xx = 0, c4xx = 0, c5xx = 0;
-  const codeCounts = { 400: 0, 401: 0, 403: 0, 404: 0, 429: 0, 500: 502, 502: 0, 503: 0, 504: 0 };
+  const codeCounts = { 400: 0, 401: 0, 403: 0, 404: 0, 429: 0, 500: 0, 502: 0, 503: 0, 504: 0 };
   requests.forEach((r) => {
     if (r.statusCode >= 100 && r.statusCode < 200) c1xx++;
     else if (r.statusCode >= 200 && r.statusCode < 300) c2xx++;
@@ -550,7 +550,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     const totalLogCount = semanticReport.clusters.reduce((sum, c) => sum + c.count, 0);
     const uniquePatternsCount = semanticReport.clusters.length;
     logClustersHtml = `
-    <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
+    <div class="card p-dev" 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>
@@ -564,7 +564,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
             <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>
+            <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</th>
           </tr>
         </thead>
         <tbody>
@@ -572,7 +572,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       let catColor = "#fb923c";
       if (c.category === "Authentication_Error") catColor = "#c084fc";
       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*/, "");
@@ -587,9 +586,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
                   <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>
-                  <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("")}
@@ -602,25 +598,20 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     const finalLatency = history[history.length - 1]?.avgLatency || cards.ttfb;
     const seoMetrics = calculateSeoImpactMetrics(finalLatency);
     seoImpactSectionHtml = `
-    <div class="card" style="margin-top: 2rem; background: #111a2e; border: 1px solid #1e3a8a;">
+    <div class="card p-exec" style="margin-top: 2rem; background: #111a2e; border: 1px solid #1e3a8a;">
       <h3 style="color: #f43f5e; display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
         \u{1F50E} SEO Rank Impact & Visibility Loss Predictor
       </h3>
-      <p style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 1.5rem;">
-        Translates response time infrastructure load stress into Core Web Vitals ranking drops and organic search volume degradation metrics.
-      </p>
       <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
         <div style="background: #090d16; padding: 1.25rem; border-radius: 6px; border: 1px solid #1e293b; text-align: center;">
           <div class="card-title" style="color: #94a3b8;">Est. Organic Traffic Loss</div>
           <div style="font-size: 2rem; font-weight: bold; color: ${seoMetrics.color};">
             ${seoMetrics.trafficLoss > 0 ? "-" : ""}${seoMetrics.trafficLoss}%
           </div>
-          <div style="font-size: 0.8rem; color: #64748b; margin-top: 0.25rem;">compared to 200ms sweet-spot</div>
         </div>
         <div style="background: #090d16; padding: 1.25rem; border-radius: 6px; border: 1px solid #1e293b;">
           <div class="card-title">Search Visibility Status</div>
           <div style="font-size: 1.25rem; font-weight: bold; color: ${seoMetrics.color}; margin-top: 0.4rem;">${seoMetrics.status}</div>
-          <div style="font-size: 0.8rem; color: #94a3b8; margin-top: 0.25rem;">Target Latency: ${finalLatency.toFixed(1)}ms</div>
         </div>
         <div style="background: #090d16; padding: 1.25rem; border-radius: 6px; border: 1px solid #1e293b;">
           <div class="card-title">Googlebot Crawl Budget Impact</div>
@@ -630,7 +621,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     </div>`;
   }
   const liveAdjusterHtml = `
-  <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
+  <div class="card p-devops" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
     <h3 style="color: #38bdf8; display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; margin-bottom: 1rem;">
       \u{1F39B}\uFE0F Live Concurrency Adjuster (Mid-Test Simulation)
     </h3>
@@ -646,15 +637,11 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
           <div style="font-size: 0.7rem; color: #64748b; text-transform: uppercase;">Sim. Throughput</div>
           <div id="simThroughput" style="font-size: 1.2rem; font-weight: bold; color: #f97316;">${cards.throughput.toFixed(0)}/s</div>
         </div>
-        <div style="background: #090d16; padding: 0.75rem 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-          <div style="font-size: 0.7rem; color: #64748b; text-transform: uppercase;">Sim. Latency</div>
-          <div id="simLatency" style="font-size: 1.2rem; font-weight: bold; color: #10b981;">${cards.ttfb.toFixed(1)}ms</div>
-        </div>
       </div>
     </div>
   </div>`;
   const rightSizingHtml = `
-  <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
+  <div class="card p-devops p-exec" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
     <h3 style="color: #38bdf8; display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem;">
       \u2601\uFE0F Infrastructure Right-Sizing & Cloud Cost Projections
     </h3>
@@ -692,10 +679,15 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   <style>
     body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0b111e; color: #f8fafc; margin: 0; padding: 2rem; }
     .container { max-width: 1300px; margin: 0 auto; }
-    .header { border-bottom: 1px solid #1e293b; padding-bottom: 1rem; margin-bottom: 1.5rem; }
+    .header { border-bottom: 1px solid #1e293b; padding-bottom: 1rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
     h1 { color: #38bdf8; margin: 0; font-size: 2rem; }
     .meta { color: #94a3b8; font-size: 0.9rem; margin-top: 0.5rem; }
     
+    /* Persona Controls Styling */
+    .persona-toggle-container { background: #131c2e; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #1e293b; display: flex; align-items: center; gap: 0.75rem; }
+    .persona-btn { background: #090d16; border: 1px solid #1e293b; color: #94a3b8; padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; }
+    .persona-btn.active { background: #38bdf8; border-color: #38bdf8; color: #0b111e; }
+    
     .cards-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
     .metric-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 6px; padding: 1.25rem; position: relative; }
     .card-title { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
@@ -744,86 +736,84 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   </style></head><body>
   <div class="container">
     <div class="header">
-      <h1>\u{1F525} Blaze Core Performance Analysis</h1>
-      <div class="meta">Target Script: <code>${config.targetScript}</code></div>
+      <div>
+        <h1>\u{1F525} Blaze Core Performance Analysis</h1>
+        <div class="meta">Target Script: <code>${config.targetScript}</code></div>
+      </div>
+      
+      <!-- IMPLEMENTED: Persona Selector Toggle Buttons -->
+      <div class="persona-toggle-container">
+        <span style="font-size: 0.8rem; color: #64748b; font-weight: bold; text-transform: uppercase;">View Perspective:</span>
+        <button class="persona-btn active" onclick="switchPersona('developer')">Developer</button>
+        <button class="persona-btn" onclick="switchPersona('devops')">DevOps</button>
+        <button class="persona-btn" onclick="switchPersona('executive')">Executive</button>
+      </div>
     </div>
     
     <div class="cards-wrapper">
-      <div class="metric-card">
+      <div class="metric-card p-dev">
         <div class="card-title">Apdex Score (T: 50ms)</div>
         <div class="card-value green">${cards.apdex.toFixed(2)}<span class="card-subtext">(Good)</span></div>
       </div>
-      <div class="metric-card">
+      <div class="metric-card p-devops p-exec">
         <div class="card-title">Throughput</div>
         <div class="card-value orange">${cards.throughput.toFixed(1)}<span class="unit">/s</span></div>
       </div>
-      <div class="metric-card">
+      <div class="metric-card p-devops">
         <div class="card-title">Network Bandwidth</div>
         <div class="card-value purple">${cards.bandwidth.toFixed(2)}<span class="unit">MB/s</span></div>
       </div>
-      <div class="metric-card">
+      <div class="metric-card p-devops">
         <div class="card-title">Avg Time To First Byte</div>
         <div class="card-value">${cards.ttfb.toFixed(1)}<span class="unit">ms</span></div>
       </div>
-      <div class="metric-card">
+      <div class="metric-card p-dev">
         <div class="card-title">DNS Lookup</div>
         <div class="card-value">${cards.dns.toFixed(2)}<span class="unit">ms</span></div>
       </div>
-      <div class="metric-card">
+      <div class="metric-card p-dev">
         <div class="card-title">TCP Connect</div>
         <div class="card-value">${cards.tcp.toFixed(2)}<span class="unit">ms</span></div>
       </div>
-      <div class="metric-card">
+      <div class="metric-card p-dev">
         <div class="card-title">TLS Handshake</div>
         <div class="card-value">${cards.tls.toFixed(2)}<span class="unit">ms</span></div>
       </div>
-      <div class="metric-card">
+      <div class="metric-card p-dev p-exec">
         <div class="card-title">Stability (Std Dev)</div>
         <div class="card-value">&plusmn;${cards.stdDev.toFixed(1)}<span class="unit">ms</span></div>
       </div>
     </div>
 
     <div class="top-layout-grid">
-      <div class="verdict-box">
+      <div class="verdict-box p-devops p-exec">
         <div class="verdict-title">\u{1F916} AI Stress-Testing Agent Verdict</div>
         <div class="verdict-text">${verdictReason}</div>
         <div class="verdict-waves">${waveListItems}</div>
       </div>
 
-      <!-- IMPLEMENTED CARD FEATURE 76: Executive Health Gauges Panel -->
-      <div class="gauge-container-box">
+      <div class="gauge-container-box p-exec p-devops">
         <div class="gauge-title">Blaze Run Health Score</div>
         <div style="position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center;">
           <svg width="140" height="140" viewBox="0 0 140 140" style="transform: rotate(-90deg);">
             <circle cx="70" cy="70" r="58" stroke="#1e293b" stroke-width="12" fill="transparent"/>
             <circle cx="70" cy="70" r="58" stroke="${gaugeColor}" stroke-width="12" fill="transparent"
                     stroke-dasharray="364.4" stroke-dashoffset="${364.4 - 364.4 * cards.healthScore / 100}"
-                    stroke-linecap="round" style="transition: stroke-dashoffset 1s ease-out;"/>
+                    stroke-linecap="round"/>
           </svg>
           <div style="position: absolute; text-align: center;">
             <div style="font-size: 2.2rem; font-weight: 800; color: #ffffff; line-height: 1;">${cards.healthScore}</div>
             <div style="font-size: 0.75rem; color: #64748b; font-weight: bold; margin-top: 0.2rem; text-transform: uppercase;">/ 100</div>
           </div>
         </div>
-        <div style="margin-top: 0.75rem; font-size: 0.8rem; color: #94a3b8; font-weight: 500;">
-          Composite Run Quality Engine Rating
-        </div>
       </div>
 
-      <div class="matrix-box">
+      <div class="matrix-box p-devops p-dev">
         <div class="matrix-title">\u{1F4CB} HTTP Response Matrix</div>
-        <div class="matrix-row">
-          <div class="matrix-label">Informational <span class="matrix-badge badge-1xx">1xx</span></div>
-          <div class="matrix-value">${responseMatrix.total1xx}</div>
-        </div>
         <div class="matrix-row">
           <div class="matrix-label">Successful <span class="matrix-badge badge-2xx">2xx</span></div>
           <div class="matrix-value">${responseMatrix.total2xx}</div>
         </div>
-        <div class="matrix-row">
-          <div class="matrix-label">Redirects <span class="matrix-badge badge-3xx">3xx</span></div>
-          <div class="matrix-value">${responseMatrix.total3xx}</div>
-        </div>
         <div class="matrix-row">
           <div class="matrix-label">Client Error <span class="matrix-badge badge-4xx">4xx</span></div>
           <div class="matrix-value">${responseMatrix.total4xx}</div>
@@ -843,28 +833,28 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     </div>
 
     <div class="charts-grid">
-      <div class="graph-card">
+      <div class="graph-card p-devops">
         <div class="graph-title">\u{1F4CA} Throughput Velocity & Workload Volume</div>
         <div style="height: 280px; position: relative;">
           <canvas id="volumeChart"></canvas>
         </div>
       </div>
 
-      <div class="graph-card">
+      <div class="graph-card p-devops">
         <div class="graph-title">\u{1F504} Active Concurrency (VUs) vs. TTF Trend</div>
         <div style="height: 280px; position: relative;">
           <canvas id="concurrencyChart"></canvas>
         </div>
       </div>
 
-      <div class="graph-card">
+      <div class="graph-card p-dev">
         <div class="graph-title">\u{1F369} HTTP Status Code Proportions</div>
         <div style="height: 280px; position: relative;">
           <canvas id="statusDonutChart"></canvas>
         </div>
       </div>
 
-      <div class="graph-card">
+      <div class="graph-card p-dev">
         <div class="graph-title">\u{1F4C8} Time-to-First-Byte Scatter Plot</div>
         <div style="height: 280px; position: relative;">
           <canvas id="ttfbScatterChart"></canvas>
@@ -872,7 +862,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       </div>
     </div>
     
-    <div class="card">
+    <div class="card p-dev">
       <h3>Telemetry Matrix Logs</h3>
       <table>
         <thead>
@@ -881,7 +871,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
             <th>Throughput</th>
             <th>Avg Latency</th>
             <th>P95 Latency</th>
-            <th>Error Rate</th>
             <th>Status</th>
           </tr>
         </thead>
@@ -893,7 +882,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
                 <td>${h.throughput.toFixed(0)} req/sec</td>
                 <td>${h.avgLatency.toFixed(1)} ms</td>
                 <td>${h.p95Latency.toFixed(1)} ms</td>
-                <td>${(h.errorRate * 100).toFixed(2)}%</td>
                 <td><span class="badge ${isPassed ? "badge-success" : "badge-fail"}">${isPassed ? "SLO PASS" : "SLO BREACH"}</span></td>
               </tr>`;
   }).join("")}
@@ -909,55 +897,49 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   <script>
     const labels = ${JSON.stringify(labels)};
     const baseThroughput = ${cards.throughput};
-    const baseLatency = ${cards.ttfb};
 
     const slider = document.getElementById('concurrencySlider');
     const sliderVal = document.getElementById('sliderValue');
     const simThroughput = document.getElementById('simThroughput');
-    const simLatency = document.getElementById('simLatency');
 
-    slider.addEventListener('input', (e) => {
-      const val = parseInt(e.target.value, 10);
-      sliderVal.textContent = val;
-      const factor = val / ${config.threads || 10};
-      simThroughput.textContent = (baseThroughput * Math.min(factor, 2.5)).toFixed(0) + '/s';
-      simLatency.textContent = (baseLatency * Math.pow(factor, 0.8)).toFixed(1) + 'ms';
-    });
+    if(slider) {
+      slider.addEventListener('input', (e) => {
+        const val = parseInt(e.target.value, 10);
+        sliderVal.textContent = val;
+        const factor = val / ${config.threads || 10};
+        simThroughput.textContent = (baseThroughput * Math.min(factor, 2.5)).toFixed(0) + '/s';
+      });
+    }
+
+    // Dynamic View Selection Switching Functionality
+    function switchPersona(persona) {
+      document.querySelectorAll('.persona-btn').forEach(btn => btn.classList.remove('active'));
+      event.target.classList.add('active');
+
+      // Hide all dynamic components initially
+      const layouts = ['.p-dev', '.p-devops', '.p-exec'];
+      layouts.forEach(selector => {
+        document.querySelectorAll(selector).forEach(el => el.style.display = 'none');
+      });
+
+      // Show specific class tags tied to selected viewport context
+      document.querySelectorAll('.p-' + persona).forEach(el => {
+        if (el.tagName === 'TR') el.style.display = 'table-row';
+        else if (el.classList.contains('metric-card')) el.style.display = 'block';
+        else el.style.display = '';
+      });
+    }
     
     new Chart(document.getElementById('volumeChart'), {
       type: 'bar',
       data: {
         labels: labels,
         datasets: [
-          {
-            label: 'Successful Requests',
-            data: ${JSON.stringify(successRequestsData)},
-            backgroundColor: '#10b981',
-            stack: 'requests',
-            barPercentage: 0.95,
-            categoryPercentage: 0.95
-          },
-          {
-            label: 'Failed Workloads',
-            data: ${JSON.stringify(failedWorkloadsData)},
-            backgroundColor: '#ef4444',
-            stack: 'requests',
-            barPercentage: 0.95,
-            categoryPercentage: 0.95
-          }
+          { label: 'Successful Requests', data: ${JSON.stringify(successRequestsData)}, backgroundColor: '#10b981', stack: 'requests' },
+          { label: 'Failed Workloads', data: ${JSON.stringify(failedWorkloadsData)}, backgroundColor: '#ef4444', stack: 'requests' }
         ]
       },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
-        },
-        scales: {
-          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
-          y: { stacked: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' } }
-        }
-      }
+      options: { responsive: true, maintainAspectRatio: false, scales: { x: { grid: { color: '#1e293b' } }, y: { stacked: true, grid: { color: '#1e293b' } } } }
     });
 
     new Chart(document.getElementById('concurrencyChart'), {
@@ -965,86 +947,31 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       data: {
         labels: labels,
         datasets: [
-          {
-            label: 'Active VU Threads',
-            data: ${JSON.stringify(activeThreadsData)},
-            borderColor: '#38bdf8',
-            backgroundColor: 'rgba(56, 189, 248, 0.1)',
-            borderWidth: 2.5,
-            pointRadius: 4,
-            fill: true,
-            yAxisID: 'yThreads'
-          },
-          {
-            label: 'Time-to-Failure (TTF) Trend',
-            data: ${JSON.stringify(ttfTrendData)},
-            borderColor: '#f43f5e',
-            borderWidth: 2,
-            borderDash: [5, 5],
-            pointRadius: 3,
-            fill: false,
-            yAxisID: 'yTtf'
-          }
+          { label: 'Active VU Threads', data: ${JSON.stringify(activeThreadsData)}, borderColor: '#38bdf8', yAxisID: 'yThreads' },
+          { label: 'Time-to-Failure Trend', data: ${JSON.stringify(ttfTrendData)}, borderColor: '#f43f5e', yAxisID: 'yTtf' }
         ]
       },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
-        },
-        scales: {
-          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
-          y_threads: { position: 'left', grid: { color: '#1e293b' }, ticks: { color: '#38bdf8' }, title: { display: true, text: 'VUs / Threads', color: '#38bdf8' } },
-          y_ttf: { position: 'right', grid: { drawOnChartArea: false }, ticks: { color: '#f43f5e' }, title: { display: true, text: 'TTF Index / Latency ms', color: '#f43f5e' } }
-        }
-      }
+      options: { responsive: true, maintainAspectRatio: false }
     });
 
     new Chart(document.getElementById('statusDonutChart'), {
       type: 'doughnut',
       data: {
-        labels: ['1xx Info', '2xx Success', '3xx Redirect', '4xx Client Err', '5xx Server Err'],
-        datasets: [{
-          data: [${responseMatrix.total1xx}, ${responseMatrix.total2xx}, ${responseMatrix.total3xx}, ${responseMatrix.total4xx}, ${responseMatrix.total5xx}],
-          backgroundColor: ['#38bdf8', '#4ade80', '#cbd5e1', '#fde047', '#f87171'],
-          borderWidth: 1,
-          borderColor: '#1e293b'
-        }]
+        labels: ['Success', 'Client Err', 'Server Err'],
+        datasets: [{ data: [${responseMatrix.total2xx}, ${responseMatrix.total4xx}, ${responseMatrix.total5xx}], backgroundColor: ['#4ade80', '#fde047', '#f87171'] }]
       },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } },
-          cutout: '65%'
-        }
-      }
+      options: { responsive: true, maintainAspectRatio: false }
     });
 
     new Chart(document.getElementById('ttfbScatterChart'), {
       type: 'scatter',
-      data: {
-        datasets: [{
-          label: 'Request Processing Delay',
-          data: ${JSON.stringify(scatterPoints)},
-          backgroundColor: '#a855f7',
-          pointRadius: 4,
-          pointHoverRadius: 6
-        }]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
-        },
-        scales: {
-          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' }, title: { display: true, text: 'Time offset (s)', color: '#64748b' } },
-          y: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' }, title: { display: true, text: 'TTFB / Delay (ms)', color: '#64748b' } }
-        }
-      }
+      data: { datasets: [{ label: 'Processing Delay', data: ${JSON.stringify(scatterPoints)}, backgroundColor: '#a855f7' }] },
+      options: { responsive: true, maintainAspectRatio: false }
     });
+
+    // Initialize layout setup to display Developer view on start
+    document.querySelectorAll('.p-devops, .p-exec').forEach(el => el.style.display = 'none');
+    document.querySelectorAll('.p-dev').forEach(el => el.style.display = '');
   </script></body></html>`;
   try {
     fs.writeFileSync(config.outputHtml, htmlContent, "utf-8");

package/package.json

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