@arghajit/dummy 0.3.17 → 0.3.19

package/scripts/generate-static-report.mjs

@@ -6,6 +6,7 @@ import path from "path";
 import { fork } from "child_process";
 import { fileURLToPath } from "url";
 import { getOutputDir } from "./config-reader.mjs";
+import { animate } from "./terminal-logo.mjs";
 
 /**
  * Dynamically imports the 'chalk' library for terminal string styling.
@@ -764,62 +765,261 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
  * @param {number} [dashboardHeight=600] The height of the dashboard.
  * @returns {string} The HTML string for the environment dashboard.
  */
-function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
-  // Format memory for display
-  const formattedMemory = environment.memory.replace(/(\d+\.\d{2})GB/, "$1 GB");
+function generateEnvironmentSection(environmentData) {
+  if (!environmentData) {
+    return '<div class="no-data">Environment data not available.</div>';
+  }
 
-  // Generate a unique ID for the dashboard
-  const dashboardId = `envDashboard-${Date.now()}-${Math.random()
-    .toString(36)
-    .substring(2, 7)}`;
+  if (Array.isArray(environmentData)) {
+    return `
+      <div class="sharded-env-section">
+        <div class="sharded-env-header">
+          <div class="sharded-env-title-row">
+            <div>
+              <div class="sharded-env-title">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
+                  <rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
+                  <line x1="6" x2="6.01" y1="6" y2="6"></line>
+                  <line x1="6" x2="6.01" y1="18" y2="18"></line>
+                </svg>
+                System Information
+              </div>
+              <div class="sharded-env-subtitle">Test execution environment details - ${environmentData.length} shard${environmentData.length > 1 ? "s" : ""}</div>
+            </div>
+            <div class="env-icon-badge">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div class="sharded-environments-container">
+          <div class="sharded-environments-wrapper">
+            ${environmentData
+              .map(
+                (env, index) => `
+              <div class="env-card-wrapper">
+                <div class="env-card-badge">Shard ${index + 1}</div>
+                ${generateEnvironmentDashboard(env, true)}
+              </div>
+            `,
+              )
+              .join("")}
+          </div>
+        </div>
+      </div>
+      <style>
+        .sharded-env-section {
+          border: 1px solid var(--border-light);
+          border-radius: 12px;
+          background: var(--bg-secondary);
+          overflow: hidden;
+        }
+        .sharded-env-header {
+          position: sticky;
+          top: 0;
+          z-index: 20;
+          background: linear-gradient(to bottom right, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+          border-bottom: 1px solid var(--border-light);
+          padding: 24px 24px 16px;
+        }
+        .sharded-env-title-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .sharded-env-title {
+          display: flex;
+          align-items: center;
+          font-size: 18px;
+          font-weight: 600;
+          color: var(--text-primary);
+        }
+        .sharded-env-title svg {
+          width: 18px;
+          height: 18px;
+          margin-right: 8px;
+          stroke: currentColor;
+          fill: none;
+        }
+        .sharded-env-subtitle {
+          font-size: 13px;
+          color: var(--text-secondary);
+          margin-top: 4px;
+        }
+        .sharded-environments-container {
+          max-height: 520px;
+          overflow-y: auto;
+          overflow-x: hidden;
+          padding: 16px;
+        }
+        .sharded-environments-container::-webkit-scrollbar {
+          width: 8px;
+        }
+        .sharded-environments-container::-webkit-scrollbar-track {
+          background: var(--bg-tertiary);
+          border-radius: 4px;
+        }
+        .sharded-environments-container::-webkit-scrollbar-thumb {
+          background: var(--border-medium);
+          border-radius: 4px;
+        }
+        .sharded-environments-container::-webkit-scrollbar-thumb:hover {
+          background: var(--border-color);
+        }
+        .sharded-environments-wrapper {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+          gap: 24px;
+        }
+        @media (max-width: 768px) {
+          .sharded-environments-wrapper {
+            grid-template-columns: 1fr;
+          }
+        }
+        .env-card-wrapper {
+          position: relative;
+        }
+        .env-card-badge {
+          position: absolute;
+          top: -10px;
+          right: 16px;
+          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+          color: white;
+          padding: 6px 14px;
+          border-radius: 20px;
+          font-size: 0.75em;
+          font-weight: 700;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+          z-index: 10;
+          box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
+        }
+      </style>
+    `;
+  }
 
-  const cardHeight = Math.floor(dashboardHeight * 0.44);
-  const cardContentPadding = 16; // px
+  return generateEnvironmentDashboard(environmentData);
+}
 
-  // Logic for Run Context
-  const runContext = process.env.CI ? "CI" : "Local Test";
+function generateEnvironmentDashboard(environment, hideHeader = false) {
+  const cpuInfo = `model: ${environment.cpu.model}, cores: ${environment.cpu.cores}`;
 
   return `
-    <div class="environment-dashboard-wrapper" id="${dashboardId}">
+    <div class="env-modern-card${hideHeader ? " no-header" : ""}">
       <style>
-        .environment-dashboard-wrapper *,
-        .environment-dashboard-wrapper *::before,
-        .environment-dashboard-wrapper *::after {
-          box-sizing: border-box;
-        }
-
-        .environment-dashboard-wrapper {
-          --primary-color: var(--primary-dark, #6366f1);
-          --success-color: var(--success-dark, #10b981);
-          --warning-color: var(--warning-dark, #f59e0b);
-          
-          background-color: var(--bg-tertiary);
-          padding: 48px; 
-          border-bottom: 1px solid var(--border-light);
+        .env-modern-card {
+          background: linear-gradient(to bottom right, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+          border: 0;
+          border-radius: 12px;
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          margin-top: 24px;
+          transition: all 0.3s ease;
           font-family: var(--font-family);
+          overflow: hidden;
+        }
+        .env-modern-card:hover {
+          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        .env-modern-card {
+          margin-bottom: 0;
+        }
+        .env-card-header {
+          display: flex;
+          flex-direction: column;
+          padding: 24px 24px 12px;
+        }
+        .env-modern-card.no-header .env-card-header {
+          display: none;
+        }
+        .env-modern-card.no-header {
+          margin-top: 0;
+        }
+        .env-modern-card.no-header .env-card-content {
+          padding-top: 24px;
+        }
+        .env-card-title-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .env-card-title {
+          display: flex;
+          align-items: center;
+          font-size: 16px;
+          font-weight: 600;
           color: var(--text-primary);
+          transition: color 0.3s;
+        }
+        .env-modern-card:hover .env-card-title {
+          color: var(--primary-dark, #6366f1);
+        }
+        .env-card-title svg {
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+          stroke: currentColor;
+          fill: none;
+        }
+        .env-card-subtitle {
+          font-size: 12px;
+          color: var(--text-secondary);
+          margin-top: 4px;
+        }
+        .env-card-content {
+          padding: 0 24px 24px;
+        }
+        .env-items-grid {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
-          gap: 32px;
-          font-size: 15px;
-          transform: translateZ(0);
+          gap: 10px;
         }
-
-        @media (max-width: 768px) {
-            .environment-dashboard-wrapper {
-                grid-template-columns: 1fr;
-                padding: 32px 24px;
-            }
+        @media (min-width: 768px) {
+          .env-items-grid {
+            grid-template-columns: repeat(4, 1fr);
+          }
         }
-        @media (max-width: 480px) {
-            .environment-dashboard-wrapper {
-                padding: 24px;
-            }
+        .env-item {
+          display: flex;
+          align-items: flex-start;
+          gap: 8px;
+          padding: 8px;
+          border-radius: 8px;
+          transition: background-color 0.2s;
+          min-height: 48px;
         }
-        
-        .env-dashboard-header {
-          grid-column: 1 / -1;
-          margin-bottom: 24px;
+        .env-item:hover {
+          background-color: var(--bg-hover);
+        }
+        .env-item-icon {
+          flex-shrink: 0;
+        }
+        .env-item-icon svg {
+          width: 16px;
+          height: 16px;
+          stroke: var(--primary-dark, #6366f1);
+          fill: none;
+        }
+        .env-item-content {
+          flex-grow: 1;
+          min-width: 0;
+        }
+        .env-item-label {
+          font-size: 12px;
+          font-weight: 500;
+          color: var(--text-secondary);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .env-item-value {
+          font-size: 12px;
+          font-weight: 600;
+          color: var(--text-primary);
+          word-wrap: break-word;
+          overflow-wrap: break-word;
+          line-height: 1.4;
         }
         
         .env-dashboard-title {
@@ -951,133 +1151,151 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
         }
       </style>
       
-      <div class="env-dashboard-header">
-        <div>
-          <h3 class="env-dashboard-title">System Environment</h3>
-          <p class="env-dashboard-subtitle">Snapshot of the execution environment</p>
-        </div>
-        <span class="env-chip env-chip-primary">${environment.host}</span>
-      </div>
-      
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M4 6h16V4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h-2v10H4V6zm18-2h-4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2H6a2 2 0 0 0-2 2v2h20V6a2 2 0 0 0-2-2zM8 12h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>
-          Hardware
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">CPU Model</span>
-            <span class="env-detail-value">${environment.cpu.model}</span>
-          </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">CPU Cores</span>
-            <span class="env-detail-value">
-              <div class="env-cpu-cores">
-                <span>${environment.cpu.cores || "N/A"} core${environment.cpu.cores !== 1 ? "s" : ""}</span>
-              </div>
-            </span>
-          </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Memory</span>
-            <span class="env-detail-value">${formattedMemory}</span>
+      <div class="env-card-header">
+        <div class="env-card-title-row">
+          <div>
+            <div class="env-card-title">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
+                <rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
+                <line x1="6" x2="6.01" y1="6" y2="6"></line>
+                <line x1="6" x2="6.01" y1="18" y2="18"></line>
+              </svg>
+              System Information
+            </div>
+            <div class="env-card-subtitle">Test execution environment details</div>
           </div>
         </div>
       </div>
       
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-0.01 18c-2.76 0-5.26-1.12-7.07-2.93A7.973 7.973 0 0 1 4 12c0-2.21.9-4.21 2.36-5.64A7.994 7.994 0 0 1 11.99 4c4.41 0 8 3.59 8 8 0 2.76-1.12 5.26-2.93 7.07A7.973 7.973 0 0 1 11.99 20zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>
-          Operating System
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">OS Type</span>
-            <span class="env-detail-value">${
-              environment.os.split(" ")[0] === "darwin"
-                ? "darwin (macOS)"
-                : environment.os.split(" ")[0] || "Unknown"
-            }</span>
-          </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">OS Version</span>
-            <span class="env-detail-value">${
-              environment.os.split(" ")[1] || "N/A"
-            }</span>
-          </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Hostname</span>
-            <span class="env-detail-value" title="${environment.host}">${
-              environment.host
-            }</span>
+      <div class="env-card-content">
+        <div class="env-items-grid">
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Host</p>
+              <div class="env-item-value" title="${environment.host}">${environment.host}</div>
+            </div>
           </div>
-        </div>
-      </div>
-      
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-          Node.js Runtime
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">Node Version</span>
-            <span class="env-detail-value">${environment.node}</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Os</p>
+              <div class="env-item-value" title="${environment.os}">${environment.os}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">V8 Engine</span>
-            <span class="env-detail-value">${environment.v8}</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="16" height="16" x="4" y="4" rx="2"></rect>
+                <rect width="6" height="6" x="9" y="9" rx="1"></rect>
+                <path d="M15 2v2"></path>
+                <path d="M15 20v2"></path>
+                <path d="M2 15h2"></path>
+                <path d="M2 9h2"></path>
+                <path d="M20 15h2"></path>
+                <path d="M20 9h2"></path>
+                <path d="M9 2v2"></path>
+                <path d="M9 20v2"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Cpu</p>
+              <div class="env-item-value" title='${JSON.stringify(environment.cpu)}'>${cpuInfo}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Working Dir</span>
-            <span class="env-detail-value" title="${environment.cwd}">${
-              environment.cwd.length > 25
-                ? "..." + environment.cwd.slice(-22)
-                : environment.cwd
-            }</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M6 19v-3"></path>
+                <path d="M10 19v-3"></path>
+                <path d="M14 19v-3"></path>
+                <path d="M18 19v-3"></path>
+                <path d="M8 11V9"></path>
+                <path d="M16 11V9"></path>
+                <path d="M12 11V9"></path>
+                <path d="M2 15h20"></path>
+                <path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Memory</p>
+              <div class="env-item-value" title="${environment.memory}">${environment.memory}</div>
+            </div>
           </div>
-        </div>
-      </div>
-      
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 8.69 9.48 7 12 7c2.76 0 5 2.24 5 5v1h2c1.66 0 3 1.34 3 3s-1.34 3-3 3z"/></svg>
-          System Summary
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">Platform Arch</span>
-            <span class="env-detail-value">
-              <span class="env-chip ${
-                environment.os.includes("darwin") &&
-                environment.cpu.model.toLowerCase().includes("apple")
-                  ? "env-chip-success"
-                  : "env-chip-warning"
-              }">
-                ${
-                  environment.os.includes("darwin") &&
-                  environment.cpu.model.toLowerCase().includes("apple")
-                    ? "Apple Silicon"
-                    : environment.cpu.model.toLowerCase().includes("arm") ||
-                        environment.cpu.model.toLowerCase().includes("aarch64")
-                      ? "ARM-based"
-                      : "x86/Other"
-                }
-              </span>
-            </span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
+                <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
+                <path d="M12 2v2"></path>
+                <path d="M12 22v-2"></path>
+                <path d="m17 20.66-1-1.73"></path>
+                <path d="M11 10.27 7 3.34"></path>
+                <path d="m20.66 17-1.73-1"></path>
+                <path d="m3.34 7 1.73 1"></path>
+                <path d="M14 12h8"></path>
+                <path d="M2 12h2"></path>
+                <path d="m20.66 7-1.73 1"></path>
+                <path d="m3.34 17 1.73-1"></path>
+                <path d="m17 3.34-1 1.73"></path>
+                <path d="m11 13.73-4 6.93"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Node</p>
+              <div class="env-item-value" title="${environment.node}">${environment.node}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Memory per Core</span>
-            <span class="env-detail-value">${
-              environment.cpu.cores > 0
-                ? (
-                    parseFloat(environment.memory) / environment.cpu.cores
-                  ).toFixed(2) + " GB"
-                : "N/A"
-            }</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
+                <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
+                <path d="M12 2v2"></path>
+                <path d="M12 22v-2"></path>
+                <path d="m17 20.66-1-1.73"></path>
+                <path d="M11 10.27 7 3.34"></path>
+                <path d="m20.66 17-1.73-1"></path>
+                <path d="m3.34 7 1.73 1"></path>
+                <path d="M14 12h8"></path>
+                <path d="M2 12h2"></path>
+                <path d="m20.66 7-1.73 1"></path>
+                <path d="m3.34 17 1.73-1"></path>
+                <path d="m17 3.34-1 1.73"></path>
+                <path d="m11 13.73-4 6.93"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">V8</p>
+              <div class="env-item-value" title="${environment.v8}">${environment.v8}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Run Context</span>
-            <span class="env-detail-value">${runContext}</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                <polyline points="9 22 9 12 15 12 15 22"></polyline>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Working Dir</p>
+              <div class="env-item-value" title="${environment.cwd}">${environment.cwd.length > 30 ? "..." + environment.cwd.slice(-27) : environment.cwd}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -2311,6 +2529,13 @@ function generateHTML(reportData, trendData = null) {
                     )}</div>`
                   : ""
               }
+              ${
+                step.codeSnippet
+                  ? `<div class="code-snippet-section"><pre class="code-snippet">${sanitizeHTML(
+                      step.codeSnippet,
+                    )}</pre></div>`
+                  : ""
+              }
               ${
                 step.errorMessage
                   ? `<div class="test-error-summary">
@@ -2896,57 +3121,7 @@ function generateHTML(reportData, trendData = null) {
           padding: 10px !important; 
           border-radius: 6px !important; 
         }
-        .env-dashboard {
-          background: var(--gradient-card);
-          border: 1px solid var(--border-light);
-          border-radius: 12px;
-          padding: 24px;
-          margin-top: 20px;
-          box-shadow: var(--shadow-md);
-        }
-        .env-dashboard-title {
-          font-size: 1.2em;
-          font-weight: 700;
-          color: #f9fafb;
-          margin-bottom: 8px;
-        }
-        .env-dashboard-subtitle {
-          font-size: 0.9em;
-          color: #9ca3af;
-          margin-bottom: 16px;
-        }
-        .env-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-          gap: 12px;
-        }
-        .env-card {
-          background: var(--bg-secondary);
-          border: 1px solid var(--border-light);
-          border-radius: 8px;
-          padding: 14px;
-          transition: all 0.3s ease;
-        }
-        .env-card:hover {
-          transform: translateY(-3px);
-          border-color: var(--primary-color);
-          box-shadow: var(--shadow-lg), var(--glow-primary);
-          background: var(--bg-card);
-        }
-        .env-card-header {
-          font-size: 0.85em;
-          color: #9ca3af;
-          margin-bottom: 6px;
-          text-transform: uppercase;
-          letter-spacing: 0.5px;
-          font-weight: 600;
-        }
-        .env-card-value {
-          font-size: 1.1em;
-          color: #f9fafb;
-          font-weight: 700;
-          word-break: break-word;
-        }
+
         .suites-widget {
           background: var(--bg-card);
           border: 1px solid var(--border-light);
@@ -3779,6 +3954,22 @@ function generateHTML(reportData, trendData = null) {
           font-size: 0.85em; 
           font-weight: 600; 
         }
+        .code-snippet-section { 
+          margin: 12px 0; 
+        }
+        .code-snippet { 
+          background-color: #f8f9fa; 
+          border: 1px solid #e1e4e8; 
+          border-radius: 6px; 
+          padding: 12px; 
+          font-family: 'Consolas', 'Monaco', 'Courier New', monospace; 
+          font-size: 0.9em; 
+          line-height: 1.5; 
+          overflow-x: auto; 
+          color: #24292e; 
+          margin: 0; 
+          white-space: pre; 
+        }
         .nested-steps { 
           margin-top: 12px; 
         }
@@ -5695,12 +5886,7 @@ function generateHTML(reportData, trendData = null) {
                   400,
                   390,
                 )} 
-                ${
-                  runSummary.environment &&
-                  Object.keys(runSummary.environment).length > 0
-                    ? generateEnvironmentDashboard(runSummary.environment)
-                    : '<div class="no-data">Environment data not available.</div>'
-                }
+                ${generateEnvironmentSection(runSummary.environment)}
               </div> 
                 <div style="display: flex; flex-direction: column; gap: 28px;">
                   ${generateSuitesWidget(suitesData)}
@@ -6458,6 +6644,8 @@ async function runScript(scriptPath, args = []) {
  * prepares the data, and then generates and writes the final HTML report file.
  */
 async function main() {
+  await animate();
+  
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
 
@@ -6652,7 +6840,7 @@ async function main() {
     await fs.writeFile(reportHtmlPath, htmlContent, "utf-8");
     console.log(
       chalk.green.bold(
-        `🎉 Pulse report generated successfully at: ${reportHtmlPath}`,
+        `Pulse report generated successfully at: ${reportHtmlPath}`,
       ),
     );
     console.log(chalk.gray(`(You can open this file in your browser)`));