blaze-performance-tester 3.1.21 → 3.1.23

package/dist/cli.js

@@ -240,6 +240,13 @@ function calculateSeoImpactMetrics(avgLatencyMs) {
   }
   return { trafficLoss, status, crawlPenalty, color };
 }
+function computeHealthScoreValue(apdex, errorRate, p95Latency, maxAllowedLatency) {
+  const apdexComponent = apdex * 50;
+  const errorComponent = Math.max(0, 1 - errorRate) * 30;
+  const latencyRatio = p95Latency / maxAllowedLatency;
+  const latencyComponent = Math.max(0, 1 - Math.min(1, latencyRatio)) * 20;
+  return Math.min(100, Math.max(0, Math.round(apdexComponent + errorComponent + latencyComponent)));
+}
 async function runIntelligentAgenticStressTest(config) {
   console.log("\u{1F680} Initializing Intelligent Autonomous Load Agent...");
   const history = [];
@@ -327,20 +334,23 @@ async function runIntelligentAgenticStressTest(config) {
     const analyzer = new LogAnalyzer();
     semanticReport = analyzer.process(aggregateErrorLogs);
   }
+  const finalState = history[history.length - 1] || { apdex: 0, errorRate: 0, p95Latency: 0, throughput: 0 };
+  const healthScore = computeHealthScoreValue(finalState.apdex, finalState.errorRate, finalState.p95Latency, config.maxAllowedLatencyMs);
   const finalSummaryCards = {
-    apdex: history[history.length - 1]?.apdex || 0,
-    throughput: history[history.length - 1]?.throughput || 0,
+    apdex: finalState.apdex,
+    throughput: finalState.throughput,
     bandwidth: mathUtils.mean(globalMetricsAccumulator.bandwidths),
     ttfb: mathUtils.mean(globalMetricsAccumulator.ttfb),
     dns: mathUtils.mean(globalMetricsAccumulator.dns),
     tcp: mathUtils.mean(globalMetricsAccumulator.tcp),
     tls: mathUtils.mean(globalMetricsAccumulator.tls),
     stdDev: mathUtils.stdDev(globalMetricsAccumulator.latencies, mathUtils.mean(globalMetricsAccumulator.latencies)),
-    saturationKneePoint: saturationKneePoint || history[history.length - 1]?.threads || 50
+    saturationKneePoint: saturationKneePoint || finalState.threads || 50,
+    healthScore
   };
-  generateFinalAgentReport(history);
+  generateFinalAgentReport(history, healthScore);
   if (config.isSeo) {
-    const finalLat = history[history.length - 1]?.avgLatency || finalSummaryCards.ttfb;
+    const finalLat = finalState.avgLatency || finalSummaryCards.ttfb;
     const seo = calculateSeoImpactMetrics(finalLat);
     console.log(`\u{1F50E} [SEO Impact Report]: Target latency under stress (${finalLat.toFixed(1)}ms) triggers a predicted Search Visibility Loss of -${seo.trafficLoss}% [Status: ${seo.status}].`);
   }
@@ -354,6 +364,8 @@ async function runStandardStressTest(config) {
   console.log(`\u{1F3CB}\uFE0F Running Standard Stress Test [Threads: ${config.threads} | Duration: ${config.durationSec}s]`);
   const { metrics, rawErrors, rawRequests } = await runBlazeCoreEngine(config);
   printMatrixDashboard(metrics, config.threads);
+  const healthScore = computeHealthScoreValue(metrics.apdexScore, metrics.errorRate, metrics.p95LatencyMs, config.maxAllowedLatencyMs);
+  console.log(`\u{1F49A} Unified Blaze Health Score: ${healthScore}/100`);
   const history = [{
     threads: config.threads,
     avgLatency: metrics.avgLatencyMs,
@@ -380,7 +392,8 @@ async function runStandardStressTest(config) {
     tcp: metrics.avgTcpMs,
     tls: metrics.avgTlsMs,
     stdDev: metrics.stdDevMs,
-    saturationKneePoint: config.threads
+    saturationKneePoint: config.threads,
+    healthScore
   };
   const isPassed = metrics.apdexScore >= config.targetApdex && metrics.errorRate <= config.targetErrorRate;
   const verdictReason = isPassed ? "Static single-wave baseline checks concluded successfully without triggering health boundaries." : "Static verification loop completed with values exceeding defined quality thresholds.";
@@ -501,7 +514,7 @@ function printMatrixDashboard(m, threads) {
   console.log(`| ${pad(threads, 7)} | ${pad(m.totalRequests, 9)} | ${pad(m.avgLatencyMs.toFixed(1) + "ms", 11)} | ${pad(m.p95LatencyMs.toFixed(1) + "ms", 11)} | ${pad(m.requestsPerSecond.toFixed(0) + "/s", 10)} | ${pad((m.errorRate * 100).toFixed(2) + "%", 10)} | ${pad(m.apdexScore.toFixed(2), 9)} |`);
   console.log(`-----------------------------------------------------------------------------------------`);
 }
-function generateFinalAgentReport(history) {
+function generateFinalAgentReport(history, score) {
   if (history.length === 0) return;
   const peakThroughput = Math.max(...history.map((h) => h.throughput));
   const cleanRuns = history.filter((h) => h.apdex >= 0.85 && h.errorRate <= 0.01);
@@ -509,6 +522,7 @@ function generateFinalAgentReport(history) {
   console.log("\n=======================================================");
   console.log("\u{1F9E0} INTELLIGENT AUTONOMOUS LOAD AGENT FINAL REPORT");
   console.log("=======================================================");
+  console.log(`\u{1F49A} Unified Blaze Health Score       : ${score}/100`);
   console.log(`\u{1F3C6} Recommended Max Safe Concurrency : ${maxSafeThreads} allocation threads`);
   console.log(`\u{1F4A5} Infrastructure Failure Boundary  : ${history[history.length - 1].threads} concurrency allocation`);
   console.log(`\u26A1 Peak Achieved Cluster Velocity   : ${peakThroughput.toFixed(0)} req/sec`);
@@ -536,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>
@@ -550,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>
@@ -558,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*/, "");
@@ -573,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("")}
@@ -588,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>
@@ -616,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>
@@ -632,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>
@@ -670,6 +671,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       </div>
     `;
   }).join("");
+  const gaugeColor = cards.healthScore >= 90 ? "#10b981" : cards.healthScore >= 70 ? "#f59e0b" : "#ef4444";
   const htmlContent = `<!DOCTYPE html><html lang="en"><head>
   <meta charset="UTF-8">
   <title>Blaze Core Performance Report</title>
@@ -677,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; }
@@ -691,13 +698,16 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .card-value.purple { color: #a855f7; }
     .card-subtext { font-size: 0.8rem; color: #10b981; font-weight: 500; margin-left: 0.4rem; display: inline-block; }
 
-    .top-layout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 1.5rem; margin-bottom: 2rem; }
+    .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; }
     .verdict-text { font-size: 0.95rem; line-height: 1.5; color: #e2e8f0; margin-bottom: 0.75rem; }
     .verdict-waves { background: #1f2937; border-radius: 6px; padding: 0.75rem 1rem; font-family: monospace; color: #9ca3af; font-size: 0.9rem; }
     .wave-item { margin: 0.25rem 0; }
 
+    .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; }
     .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; }
@@ -726,66 +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>
 
-      <div class="matrix-box">
-        <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 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"/>
+          </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>
+
+      <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">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>
@@ -795,7 +823,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
           <div class="matrix-value">${responseMatrix.total5xx}</div>
         </div>
 
-        <!-- NEW SUBSECTION: Individual HTTP Status Code Breakdown Rates -->
         <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>
@@ -806,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>
@@ -835,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>
@@ -844,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>
@@ -856,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("")}
@@ -872,56 +897,49 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   <script>
     const labels = ${JSON.stringify(labels)};
     const baseThroughput = ${cards.throughput};
-    const baseLatency = ${cards.ttfb};
 
-    // Live Concurrency Adjuster interactive client logic
     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'), {
@@ -929,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.21",
+  "version": "3.1.23",
   "description": "A high-performance, multi-threaded load testing engine built with Rust and QuickJS.",
   "type": "module",
   "main": "dist/index.js",