blaze-performance-tester 3.1.26 → 3.1.28

package/dist/cli.js

@@ -540,26 +540,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   const estimatedMonthlyCost = (cards.throughput * 0.045 * 24 * 30).toFixed(2);
   const recommendedCpuCores = Math.max(2, Math.ceil(cards.saturationKneePoint / 75));
   const recommendedRamGb = recommendedCpuCores * 2;
-  const rightSizingHtml = `
-  <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
-    <h3 style="color: #a855f7; display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; margin-bottom: 1rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
-      \u{1F5A5}\uFE0F Infrastructure Right-Sizing & Cloud Cost Optimization
-    </h3>
-    <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;">Recommended Compute</div>
-        <div style="font-size: 1.75rem; font-weight: bold; color: #a855f7; margin-top: 0.4rem;">${recommendedCpuCores} Cores</div>
-      </div>
-      <div style="background: #090d16; padding: 1.25rem; border-radius: 6px; border: 1px solid #1e293b; text-align: center;">
-        <div class="card-title" style="color: #94a3b8;">Recommended Memory</div>
-        <div style="font-size: 1.75rem; font-weight: bold; color: #a855f7; margin-top: 0.4rem;">${recommendedRamGb} GB RAM</div>
-      </div>
-      <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. Scale Cost / Month</div>
-        <div style="font-size: 1.75rem; font-weight: bold; color: #10b981; margin-top: 0.4rem;">$${estimatedMonthlyCost}</div>
-      </div>
-    </div>
-  </div>`;
   const firstTimestamp = rawRequests[0]?.timestampMs || Date.now();
   const scatterPoints = rawRequests.slice(0, 180).map((r) => ({
     x: Number(((r.timestampMs - firstTimestamp) / 1e3).toFixed(2)),
@@ -584,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</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>
@@ -592,6 +572,7 @@ 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*/, "");
@@ -606,6 +587,9 @@ 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("")}
@@ -622,16 +606,21 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       <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>
@@ -657,6 +646,30 @@ 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;">
+    <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>
+    <div style="grid-template-columns: repeat(3, 1fr); display: grid; gap: 1rem; margin-top: 1rem;">
+      <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
+        <div class="card-title">Est. Monthly Cloud Cost</div>
+        <div class="card-value green">$${estimatedMonthlyCost} <span class="unit">/mo</span></div>
+      </div>
+      <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
+        <div class="card-title">Recommended CPU Right-Sizing</div>
+        <div class="card-value purple">${recommendedCpuCores} <span class="unit">vCores</span></div>
+      </div>
+      <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
+        <div class="card-title">Recommended Memory Allocation</div>
+        <div class="card-value orange">${recommendedRamGb} <span class="unit">GB RAM</span></div>
       </div>
     </div>
   </div>`;
@@ -679,7 +692,7 @@ 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; display: flex; justify-content: space-between; align-items: center; }
+    .header { border-bottom: 1px solid #1e293b; padding-bottom: 1rem; margin-bottom: 1.5rem; }
     h1 { color: #38bdf8; margin: 0; font-size: 2rem; }
     .meta { color: #94a3b8; font-size: 0.9rem; margin-top: 0.5rem; }
     
@@ -703,7 +716,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .gauge-container-box { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
     .gauge-title { font-size: 0.85rem; font-weight: bold; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
 
-    .matrix-box { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; }
+    .matrix-box { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; }
     .matrix-title { font-size: 1.1rem; font-weight: bold; color: #ffffff; margin-bottom: 1rem; }
     .matrix-box .matrix-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #1e293b; }
     .matrix-box .matrix-row:last-child { border-bottom: none; }
@@ -731,10 +744,8 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   </style></head><body>
   <div class="container">
     <div class="header">
-      <div>
-        <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>
     
     <div class="cards-wrapper">
@@ -786,39 +797,46 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
             <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"/>
+                    stroke-linecap="round" style="transition: stroke-dashoffset 1s ease-out;"/>
           </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>
-          <div class="matrix-title">\u{1F4CB} HTTP Response Matrix</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">Client Error <span class="matrix-badge badge-4xx">4xx</span></div>
-            <div class="matrix-value">${responseMatrix.total4xx}</div>
-          </div>
-          <div class="matrix-row">
-            <div class="matrix-label">Server Error <span class="matrix-badge badge-5xx">5xx</span></div>
-            <div class="matrix-value">${responseMatrix.total5xx}</div>
-          </div>
+        <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>
+        </div>
+        <div class="matrix-row">
+          <div class="matrix-label">Server Error <span class="matrix-badge badge-5xx">5xx</span></div>
+          <div class="matrix-value">${responseMatrix.total5xx}</div>
         </div>
 
-        <div>
-          <div class="matrix-title" style="margin-top: 1.5rem; font-size: 0.85rem; border-top: 1px solid #1e293b; padding-top: 1rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">
-            \u{1F522} HTTP Status Code Breakdown Rate
-          </div>
-          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem;">
-            ${breakdownGridHtml}
-          </div>
+        <div class="matrix-title" style="margin-top: 1.5rem; font-size: 0.85rem; border-top: 1px solid #1e293b; padding-top: 1rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">
+          \u{1F522} HTTP Status Code Breakdown Rate
+        </div>
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem;">
+          ${breakdownGridHtml}
         </div>
       </div>
     </div>
@@ -832,7 +850,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       </div>
 
       <div class="graph-card">
-        <div class="graph-title">\u{1F504} Active Concurrency (VUs) vs. TTF Trend</div>
+        <div class="graph-title">\u{1F504} Active Concurrency (VUs) vs. TTF Trend & AI Load Forecast</div>
         <div style="height: 280px; position: relative;">
           <canvas id="concurrencyChart"></canvas>
         </div>
@@ -862,6 +880,7 @@ 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>
@@ -873,6 +892,7 @@ 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("")}
@@ -888,57 +908,192 @@ 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');
 
-    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';
-      });
-    }
+    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';
+    });
     
     new Chart(document.getElementById('volumeChart'), {
       type: 'bar',
       data: {
         labels: labels,
         datasets: [
-          { label: 'Successful Requests', data: ${JSON.stringify(successRequestsData)}, backgroundColor: '#10b981', stack: 'requests' },
-          { label: 'Failed Workloads', data: ${JSON.stringify(failedWorkloadsData)}, backgroundColor: '#ef4444', stack: 'requests' }
+          {
+            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
+          }
         ]
       },
-      options: { responsive: true, maintainAspectRatio: false, scales: { x: { grid: { color: '#1e293b' } }, y: { stacked: true, grid: { color: '#1e293b' } } } }
+      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' } }
+        }
+      }
     });
 
+    // --- AI FORECASTING LINE REGRESSION SETUP ---
+    const baseActiveThreads = ${JSON.stringify(activeThreadsData)};
+    const baseTtfTrend = ${JSON.stringify(ttfTrendData)};
+    const historicalCount = baseTtfTrend.length;
+
+    let extendedLabels = [...labels];
+    let extendedThreads = [...baseActiveThreads];
+    let extendedTtf = [...baseTtfTrend];
+    let aiForecastData = [];
+
+    if (historicalCount >= 2) {
+      let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
+      for (let i = 0; i < historicalCount; i++) {
+        sumX += i;
+        sumY += baseTtfTrend[i];
+        sumXY += i * baseTtfTrend[i];
+        sumXX += i * i;
+      }
+      const denominator = (historicalCount * sumXX - sumX * sumX);
+      const slope = denominator === 0 ? 0 : (historicalCount * sumXY - sumX * sumY) / denominator;
+      const intercept = (sumY - slope * sumX) / historicalCount;
+
+      for (let i = 0; i < historicalCount; i++) {
+        aiForecastData.push(Number((slope * i + intercept).toFixed(1)));
+      }
+
+      const lastThreads = baseActiveThreads[historicalCount - 1] || 10;
+      const threadStep = ${config.stepSize || 15};
+      
+      // Project out the next 3 hypothetical execution tiers
+      for (let i = 1; i <= 3; i++) {
+        extendedLabels.push(\`+\${i * 5}s (AI Forecast)\`);
+        extendedThreads.push(lastThreads + (threadStep * i));
+        extendedTtf.push(null); 
+        aiForecastData.push(Number((slope * (historicalCount + i - 1) + intercept).toFixed(1)));
+      }
+    } else {
+      aiForecastData = [...baseTtfTrend];
+    }
+
     new Chart(document.getElementById('concurrencyChart'), {
       type: 'line',
       data: {
-        labels: labels,
+        labels: extendedLabels,
         datasets: [
-          { 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' }
+          {
+            label: 'Active VU Threads',
+            data: extendedThreads,
+            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: extendedTtf,
+            borderColor: '#f43f5e',
+            borderWidth: 2,
+            borderDash: [5, 5],
+            pointRadius: 3,
+            fill: false,
+            yAxisID: 'yTtf'
+          },
+          {
+            label: '\u{1F52E} AI Capacity Forecast Line',
+            data: aiForecastData,
+            borderColor: '#a855f7',
+            borderWidth: 2,
+            borderDash: [3, 3],
+            pointRadius: 4,
+            pointBackgroundColor: '#a855f7',
+            fill: false,
+            yAxisID: 'yTtf'
+          }
         ]
       },
-      options: { responsive: true, maintainAspectRatio: false }
+      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' } }
+        }
+      }
     });
 
     new Chart(document.getElementById('statusDonutChart'), {
       type: 'doughnut',
       data: {
-        labels: ['Success', 'Client Err', 'Server Err'],
-        datasets: [{ data: [${responseMatrix.total2xx}, ${responseMatrix.total4xx}, ${responseMatrix.total5xx}], backgroundColor: ['#4ade80', '#fde047', '#f87171'] }]
+        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'
+        }]
       },
-      options: { responsive: true, maintainAspectRatio: false }
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } },
+          cutout: '65%'
+        }
+      }
     });
 
     new Chart(document.getElementById('ttfbScatterChart'), {
       type: 'scatter',
-      data: { datasets: [{ label: 'Processing Delay', data: ${JSON.stringify(scatterPoints)}, backgroundColor: '#a855f7' }] },
-      options: { responsive: true, maintainAspectRatio: false }
+      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' } }
+        }
+      }
     });
   </script></body></html>`;
   try {

package/package.json

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