blaze-performance-tester 3.2.27 → 3.2.28

package/dist/cli.js

@@ -1,4 +1,3 @@
-#!/usr/bin/env ts-node
 import { createRequire as __esbuild_createRequire } from 'module'; const require = __esbuild_createRequire(import.meta.url);
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -6670,146 +6669,10 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   const waveListItems = history.map((h) => {
     return `<div class="wave-item">Wave (${h.threads} VUs): P95 ${h.p95Latency.toFixed(1)}ms, Errors ${(h.errorRate * 100).toFixed(1)}%</div>`;
   }).join("");
-  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 firstTimestamp = rawRequests[0]?.timestampMs || Date.now();
   const scatterPoints = rawRequests.slice(0, 180).map((r) => ({
-    x: Number(((r.timestampMs - firstTimestamp) / 1e3).toFixed(2)),
+    x: Number(((r.timestampMs - (rawRequests[0]?.timestampMs || Date.now())) / 1e3).toFixed(2)),
     y: Number(((r.dnsTimeMs || 0) + (r.tcpTimeMs || 0) + (r.tlsTimeMs || 0) + r.durationMs * 0.3).toFixed(1))
   }));
-  let baselineComparisonHtml = "";
-  if (baselineData) {
-    const diffApdex = cards.apdex - baselineData.apdex;
-    const diffThroughput = (cards.throughput - baselineData.throughput) / (baselineData.throughput || 1) * 100;
-    const diffTtfb = (cards.ttfb - baselineData.ttfb) / (baselineData.ttfb || 1) * 100;
-    const diffHealth = cards.healthScore - baselineData.healthScore;
-    const formatDelta = (val, isInverse = false) => {
-      const good = isInverse ? val <= 0 : val >= 0;
-      const color = good ? "#10b981" : "#ef4444";
-      const sign = val > 0 ? "+" : "";
-      return `<span style="color: ${color}; font-weight: bold;">${sign}${val.toFixed(1)}%</span>`;
-    };
-    baselineComparisonHtml = `
-    <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #7c3aed;">
-      <h3 style="color: #a78bfa; display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
-        \u{1F4CA} Baseline Regression Comparison (Delta Engine)
-      </h3>
-      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
-        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-          <div class="card-title">Apdex Shift</div>
-          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.apdex.toFixed(2)}</div>
-          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: <span style="color: ${diffApdex >= 0 ? "#10b981" : "#ef4444"}; font-weight: bold;">${diffApdex >= 0 ? "+" : ""}${diffApdex.toFixed(2)}</span></div>
-        </div>
-        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-          <div class="card-title">Throughput Delta</div>
-          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.throughput.toFixed(0)}/s</div>
-          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: ${formatDelta(diffThroughput, false)}</div>
-        </div>
-        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-          <div class="card-title">TTFB Latency Shift</div>
-          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.ttfb.toFixed(1)}ms</div>
-          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: ${formatDelta(diffTtfb, true)}</div>
-        </div>
-        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-          <div class="card-title">Health Score Diff</div>
-          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.healthScore}/100</div>
-          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: <span style="color: ${diffHealth >= 0 ? "#10b981" : "#ef4444"}; font-weight: bold;">${diffHealth >= 0 ? "+" : ""}${diffHealth} pts</span></div>
-        </div>
-      </div>
-    </div>`;
-  }
-  const crossBrowserRows = getCrossBrowserMatrixData().map((m) => `
-    <tr>
-      <td><span class="engine-badge ${m.badgeClass}">${m.engine}</span></td>
-      <td>${m.fcp}</td>
-      <td>${m.lcp}</td>
-      <td>${m.journeyDuration}</td>
-      <td><span class="${m.statusClass}">${m.status}</span></td>
-    </tr>
-  `).join("");
-  const crossBrowserMatrixSectionHtml = `
-  <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #38bdf8;">
-    <h3 style="color: #38bdf8; display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
-      \u{1F310} Cross-Browser Rendering Performance Matrix
-    </h3>
-    <table class="matrix-table" style="width: 100%; border-collapse: collapse; text-align: start; font-size: 14px;">
-      <thead>
-        <tr style="border-bottom: 1px solid #1e293b;">
-          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">Browser Engine</th>
-          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">FCP</th>
-          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">LCP</th>
-          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">Journey Duration</th>
-          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${crossBrowserRows}
-      </tbody>
-    </table>
-  </div>`;
-  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; 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
-      </h3>
-      <div style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 1.5rem;">
-        Captured <strong style="color: #f8fafc;">${totalLogCount}</strong> raw failures.
-      </div>
-      
-      <table style="width: 100%; border-collapse: collapse;">
-        <thead>
-          <tr style="border-bottom: 1px solid #1e293b;">
-            <th style="width: 8%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Count</th>
-            <th style="width: 22%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Category</th>
-            <th style="width: 10%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Severity</th>
-            <th style="width: 60%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Structural Blueprint</th>
-          </tr>
-        </thead>
-        <tbody>
-          ${semanticReport.clusters.map((c) => {
-      let catColor = "#fb923c";
-      if (c.category === "Authentication_Error")
-        catColor = "#c084fc";
-      if (c.category === "Product_Error")
-        catColor = "#f87171";
-      let sevBg = c.severity === "CRITICAL" ? "#dc2626" : "#ea580c";
-      const rawTemplate = c.template || "";
-      const cleanedTemplate = rawTemplate.replace(/\[\d{4}-\d{2}-\d{2}.*?\]\s*/, "");
-      return `
-              <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;">${c.severity}</span>
-                </td>
-                <td style="padding: 1.25rem 0.75rem;">
-                  <div style="background: #090d16; border-radius: 4px; padding: 0.6rem 0.8rem; border-inline-start: 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>
-                </td>
-              </tr>`;
-    }).join("")}
-        </tbody>
-      </table>
-    </div>`;
-  }
-  const breakdownRates = responseMatrix.breakdownRates || {};
-  const breakdownGridHtml = [400, 401, 403, 404, 429, 500, 502, 503, 504].map((code) => {
-    const rate = breakdownRates[code] || 0;
-    const displayColor = rate > 0 ? code >= 500 ? "#f87171" : "#fde047" : "#64748b";
-    return `
-      <div style="background: #090d16; border: 1px solid #1e293b; border-radius: 4px; padding: 0.4rem 0.2rem; text-align: center;">
-        <div style="font-size: 0.7rem; color: #64748b; font-weight: bold;">${dict.matrix.code} ${code}</div>
-        <div style="font-size: 0.85rem; font-weight: bold; color: ${displayColor};">${rate.toFixed(2)}%</div>
-      </div>
-    `;
-  }).join("");
-  const gaugeColor = cards.healthScore >= 90 ? "#10b981" : cards.healthScore >= 70 ? "#f59e0b" : "#ef4444";
   const htmlContent = `<!DOCTYPE html>
   <html lang="${config.locale}" dir="${dir}">
   <head>
@@ -6825,7 +6688,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     
     .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; }
+    .card-title { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; display: flex; justify-content: space-between; }
     .card-value { font-size: 1.6rem; font-weight: 700; color: #ffffff; }
     .card-value .unit { font-size: 0.9rem; font-weight: 500; color: #94a3b8; margin-inline-start: 0.2rem; }
     .card-value.green { color: #10b981; }
@@ -6833,6 +6696,11 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .card-value.purple { color: #a855f7; }
     .card-subtext { font-size: 0.8rem; color: #10b981; font-weight: 500; margin-inline-start: 0.4rem; display: inline-block; }
 
+    /* Export Styles */
+    .export-menu { position: absolute; top: 0.5rem; right: 0.5rem; }
+    .export-btn { background: #1e293b; border: 1px solid #334155; color: #94a3b8; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; cursor: pointer; }
+    .export-btn:hover { background: #334155; }
+
     .top-layout-grid { display: grid; grid-template-columns: 1fr 280px 380px; gap: 1.5rem; margin-bottom: 2rem; }
     .verdict-box { background: #0f172a; border: 1px dashed #ea580c; border-radius: 8px; padding: 1.25rem; }
     .verdict-title { text-transform: uppercase; font-size: 0.85rem; font-weight: 700; color: #f97316; margin-bottom: 0.5rem; }
@@ -6844,7 +6712,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .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; }
-    .matrix-title { font-size: 1.1rem; font-weight: bold; color: #ffffff; margin-bottom: 1rem; }
+    .matrix-title { font-size: 1.1rem; font-weight: bold; color: #ffffff; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
     .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; }
     .matrix-label { font-size: 0.9rem; color: #f8fafc; display: flex; align-items: center; gap: 0.5rem; }
@@ -6864,11 +6732,11 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .status-warning { color: #ca8a04; font-weight: 600; }
 
     .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
-    .graph-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; }
-    .graph-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
+    .graph-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; position: relative; }
+    .graph-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: space-between; }
     
-    .card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; }
-    h3 { margin-top: 0; color: #cbd5e1; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem; }
+    .card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; position: relative; }
+    h3 { margin-top: 0; color: #cbd5e1; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem; display: flex; justify-content: space-between; }
     table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
     th, td { padding: 0.75rem; text-align: start; border-bottom: 1px solid #1e293b; }
     th { color: #94a3b8; font-weight: 600; }
@@ -6899,27 +6767,8 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         <div class="card-title">${dict.metrics.ttfb}</div>
         <div class="card-value">${cards.ttfb.toFixed(1)}<span class="unit">ms</span></div>
       </div>
-      <div class="metric-card">
-        <div class="card-title">${dict.metrics.dns}</div>
-        <div class="card-value">${cards.dns.toFixed(2)}<span class="unit">ms</span></div>
-      </div>
-      <div class="metric-card">
-        <div class="card-title">${dict.metrics.tcp}</div>
-        <div class="card-value">${cards.tcp.toFixed(2)}<span class="unit">ms</span></div>
-      </div>
-      <div class="metric-card">
-        <div class="card-title">${dict.metrics.tls}</div>
-        <div class="card-value">${cards.tls.toFixed(2)}<span class="unit">ms</span></div>
-      </div>
-      <div class="metric-card">
-        <div class="card-title">${dict.metrics.stability}</div>
-        <div class="card-value">&plusmn;${cards.stdDev.toFixed(1)}<span class="unit">ms</span></div>
-      </div>
     </div>
 
-    ${baselineComparisonHtml}
-    ${crossBrowserMatrixSectionHtml}
-
     <div class="top-layout-grid" style="margin-top: 2rem;">
       <div class="verdict-box">
         <div class="verdict-title">${dict.verdict}</div>
@@ -6932,101 +6781,37 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         <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"
+            <circle cx="70" cy="70" r="58" stroke="#10b981" 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;"/>
           </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;">
-          ${dict.health.subtitle}
-        </div>
       </div>
 
       <div class="matrix-box">
-        <div class="matrix-title">${dict.matrix.title}</div>
+        <div class="matrix-title">${dict.matrix.title} <button onclick="window.print()" class="export-btn">PDF</button></div>
         <div class="matrix-row">
-          <div class="matrix-label">${dict.matrix.info} <span class="matrix-badge badge-1xx">1xx</span></div>
+          <div class="matrix-label">${dict.matrix.info}</div>
           <div class="matrix-value">${responseMatrix.total1xx}</div>
         </div>
         <div class="matrix-row">
-          <div class="matrix-label">${dict.matrix.success} <span class="matrix-badge badge-2xx">2xx</span></div>
+          <div class="matrix-label">${dict.matrix.success}</div>
           <div class="matrix-value">${responseMatrix.total2xx}</div>
         </div>
-        <div class="matrix-row">
-          <div class="matrix-label">${dict.matrix.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">${dict.matrix.clientErr} <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">${dict.matrix.serverErr} <span class="matrix-badge badge-5xx">5xx</span></div>
-          <div class="matrix-value">${responseMatrix.total5xx}</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;">
-          ${dict.matrix.breakdown}
-        </div>
-        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem;">
-          ${breakdownGridHtml}
-        </div>
       </div>
     </div>
 
-    <div class="card" style="margin-top: 2rem; background: #0c172b; border: 1px solid #7c3aed;">
-      <h3 style="color: #a78bfa; display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
-        ${dict.rca}
-      </h3>
-      <div style="font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; padding: 0.5rem 0; white-space: pre-wrap; word-break: break-word;">
-        ${geminiAnalysisHtml}
-      </div>
-    </div>
-
-    <div class="charts-grid" style="margin-top: 2rem;">
-      <div class="graph-card">
-        <div class="graph-title">${dict.charts.volume}</div>
-        <div style="height: 280px; position: relative;">
-          <canvas id="volumeChart"></canvas>
-        </div>
-      </div>
-
-      <div class="graph-card">
-        <div class="graph-title">${dict.charts.concurrency}</div>
-        <div style="height: 280px; position: relative;">
-          <canvas id="concurrencyChart"></canvas>
-        </div>
-      </div>
-
-      <div class="graph-card">
-        <div class="graph-title">${dict.charts.status}</div>
-        <div style="height: 280px; position: relative;">
-          <canvas id="statusDonutChart"></canvas>
-        </div>
-      </div>
-
-      <div class="graph-card">
-        <div class="graph-title">${dict.charts.scatter}</div>
-        <div style="height: 280px; position: relative;">
-          <canvas id="ttfbScatterChart"></canvas>
-        </div>
-      </div>
-    </div>
-    
     <div class="card" style="margin-top: 2rem;">
-      <h3>${dict.telemetry.title}</h3>
+      <h3>${dict.telemetry.title} <span id="telemetry-export"></span></h3>
       <table>
         <thead>
           <tr>
             <th>${dict.telemetry.threads}</th>
             <th>${dict.telemetry.throughput}</th>
             <th>${dict.telemetry.avgLatency}</th>
-            <th>${dict.telemetry.p95}</th>
-            <th>${dict.telemetry.errors}</th>
             <th>${dict.telemetry.status}</th>
           </tr>
         </thead>
@@ -7034,149 +6819,51 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
           ${history.map((h) => {
     const isPassed = h.apdex >= config.targetApdex && h.errorRate <= config.targetErrorRate;
     return `<tr>
-                <td><strong>${h.threads}</strong></td>
+                <td>${h.threads}</td>
                 <td>${h.throughput.toFixed(0)} /s</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 ? dict.telemetry.pass : dict.telemetry.fail}</span></td>
               </tr>`;
   }).join("")}
         </tbody>
       </table>
     </div>
-    ${logClustersHtml}
   </div>
-  
-  <script>
-    const labels = ${JSON.stringify(labels)};
-    const successRequestsData = ${JSON.stringify(successRequestsData)};
-    const failedWorkloadsData = ${JSON.stringify(failedWorkloadsData)};
-    
-    new Chart(document.getElementById('volumeChart'), {
-      type: 'bar',
-      data: {
-        labels: labels,
-        datasets: [
-          {
-            label: '${dict.matrix.success}',
-            data: successRequestsData,
-            backgroundColor: '#10b981',
-            stack: 'requests',
-            barPercentage: 0.95,
-            categoryPercentage: 0.95
-          },
-          {
-            label: '${dict.matrix.serverErr}',
-            data: failedWorkloadsData,
-            backgroundColor: '#ef4444',
-            stack: 'requests',
-            barPercentage: 0.95,
-            categoryPercentage: 0.95
-          }
-        ]
-      },
-      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' } }
-        }
-      }
-    });
 
-    const baseActiveThreads = ${JSON.stringify(activeThreadsData)};
-    const baseTtfTrend = ${JSON.stringify(ttfTrendData)};
-    
-    new Chart(document.getElementById('concurrencyChart'), {
-      type: 'line',
-      data: {
-        labels: labels,
-        datasets: [
-          {
-            label: 'VUs',
-            data: baseActiveThreads,
-            borderColor: '#38bdf8',
-            backgroundColor: 'rgba(56, 189, 248, 0.1)',
-            borderWidth: 2.5,
-            pointRadius: 4,
-            fill: true,
-            yAxisID: 'yThreads'
-          },
-          {
-            label: 'TTF',
-            data: baseTtfTrend,
-            borderColor: '#f43f5e',
-            borderWidth: 2,
-            borderDash: [5, 5],
-            pointRadius: 3,
-            fill: false,
-            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' } },
-          yThreads: { position: 'left', grid: { color: '#1e293b' }, ticks: { color: '#38bdf8' } },
-          yTtf: { position: 'right', grid: { drawOnChartArea: false }, ticks: { color: '#f43f5e' } }
-        }
-      }
-    });
+  <script>
+    // --- Export Data Logic ---
+    function downloadBlob(content, fileName, contentType) {
+        const a = document.createElement("a");
+        const file = new Blob([content], { type: contentType });
+        a.href = URL.createObjectURL(file);
+        a.download = fileName;
+        a.click();
+    }
 
-    new Chart(document.getElementById('statusDonutChart'), {
-      type: 'doughnut',
-      data: {
-        labels: ['1xx', '2xx', '3xx', '4xx', '5xx'],
-        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,
-        plugins: {
-          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } },
-          cutout: '65%'
+    function exportToCSV(data, filename) {
+        if (!data || data.length === 0) return;
+        const csvRows = [];
+        const headers = Object.keys(data[0]);
+        csvRows.push(headers.join(','));
+        for (const row of data) {
+            csvRows.push(headers.map(h => JSON.stringify(row[h] || '')).join(','));
         }
-      }
-    });
+        downloadBlob(csvRows.join('\\n'), filename + '.csv', 'text/csv');
+    }
 
-    new Chart(document.getElementById('ttfbScatterChart'), {
-      type: 'scatter',
-      data: {
-        datasets: [{
-          label: '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' } },
-          y: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } }
-        }
-      }
-    });
+    function exportToJSON(data, filename) {
+        downloadBlob(JSON.stringify(data, null, 2), filename + '.json', 'application/json');
+    }
+    
+    // Inject dynamic data for export
+    const dashboardHistoryData = ${JSON.stringify(history)};
+    
+    // Create export buttons for table
+    const tableExportContainer = document.getElementById('telemetry-export');
+    tableExportContainer.innerHTML = \`
+        <button onclick="exportToCSV(dashboardHistoryData, 'telemetry_data')" class="export-btn">CSV</button>
+        <button onclick="exportToJSON(dashboardHistoryData, 'telemetry_data')" class="export-btn">JSON</button>
+    \`;
   </script></body></html>`;
   try {
     fs.writeFileSync(config.outputHtml, htmlContent, "utf-8");

package/package.json

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