@arghajit/dummy 0.1.0-beta-26 → 0.1.0-beta-28

package/scripts/generate-report.mjs

@@ -615,9 +615,8 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
       chart: {
           type: 'pie',
           width: ${chartWidth},
-          height: ${
-            chartHeight - 40
-          }, // Adjusted height to make space for legend if chartHeight is for the whole wrapper
+          height: ${chartHeight - 40
+    }, // Adjusted height to make space for legend if chartHeight is for the whole wrapper
           backgroundColor: 'transparent',
           plotShadow: false,
           spacingBottom: 40 // Ensure space for legend
@@ -669,9 +668,8 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
   return `
       <div class="pie-chart-wrapper" style="align-items: center; max-height: 450px">
           <div style="display: flex; align-items: start; width: 100%;"><h3>Test Distribution</h3></div>
-          <div id="${chartId}" style="width: ${chartWidth}px; height: ${
-    chartHeight - 40
-  }px;"></div>
+          <div id="${chartId}" style="width: ${chartWidth}px; height: ${chartHeight - 40
+    }px;"></div>
           <script>
               document.addEventListener('DOMContentLoaded', function() {
                   if (typeof Highcharts !== 'undefined') {
@@ -899,15 +897,14 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
             <span class="env-detail-value">
               <div class="env-cpu-cores">
                 ${Array.from(
-                  { length: Math.max(0, environment.cpu.cores || 0) },
-                  (_, i) =>
-                    `<div class="env-core-indicator ${
-                      i >=
-                      (environment.cpu.cores >= 8 ? 8 : environment.cpu.cores)
-                        ? "inactive"
-                        : ""
-                    }" title="Core ${i + 1}"></div>`
-                ).join("")}
+    { length: Math.max(0, environment.cpu.cores || 0) },
+    (_, i) =>
+      `<div class="env-core-indicator ${i >=
+        (environment.cpu.cores >= 8 ? 8 : environment.cpu.cores)
+        ? "inactive"
+        : ""
+      }" title="Core ${i + 1}"></div>`
+  ).join("")}
                 <span>${environment.cpu.cores || "N/A"} cores</span>
               </div>
             </span>
@@ -927,23 +924,20 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
         <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>
+            <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>
+            <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>
+            <span class="env-detail-value" title="${environment.host}">${environment.host
+    }</span>
           </div>
         </div>
       </div>
@@ -964,11 +958,10 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           </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
+            <span class="env-detail-value" title="${environment.cwd}">${environment.cwd.length > 25
       ? "..." + environment.cwd.slice(-22)
       : environment.cwd
-  }</span>
+    }</span>
           </div>
         </div>
       </div>
@@ -982,33 +975,30 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           <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 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>
           <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>
+            <span class="env-detail-value">${environment.cpu.cores > 0
+      ? (
+        parseFloat(environment.memory) / environment.cpu.cores
+      ).toFixed(2) + " GB"
+      : "N/A"
+    }</span>
           </div>
           <div class="env-detail-row">
             <span class="env-detail-label">Run Context</span>
@@ -1340,19 +1330,19 @@ function generateTestHistoryContent(trendData) {
       
       <div class="test-history-grid">
         ${testHistory
-          .map((test) => {
-            const latestRun =
-              test.history.length > 0
-                ? test.history[test.history.length - 1]
-                : { status: "unknown" };
-            return `
+      .map((test) => {
+        const latestRun =
+          test.history.length > 0
+            ? test.history[test.history.length - 1]
+            : { status: "unknown" };
+        return `
             <div class="test-history-card" data-test-name="${sanitizeHTML(
-              test.testTitle.toLowerCase()
-            )}" data-latest-status="${latestRun.status}">
+          test.testTitle.toLowerCase()
+        )}" data-latest-status="${latestRun.status}">
               <div class="test-history-header">
                 <p title="${sanitizeHTML(test.testTitle)}">${capitalize(
-              sanitizeHTML(test.testTitle)
-            )}</p>
+          sanitizeHTML(test.testTitle)
+        )}</p>
                 <span class="status-badge ${getStatusClass(latestRun.status)}">
                   ${String(latestRun.status).toUpperCase()}
                 </span>
@@ -1367,27 +1357,27 @@ function generateTestHistoryContent(trendData) {
                     <thead><tr><th>Run</th><th>Status</th><th>Duration</th><th>Date</th></tr></thead>
                     <tbody>
                       ${test.history
-                        .slice()
-                        .reverse()
-                        .map(
-                          (run) => `
+            .slice()
+            .reverse()
+            .map(
+              (run) => `
                         <tr>
                           <td>${run.runId}</td>
                           <td><span class="status-badge-small ${getStatusClass(
-                            run.status
-                          )}">${String(run.status).toUpperCase()}</span></td>
+                run.status
+              )}">${String(run.status).toUpperCase()}</span></td>
                           <td>${formatDuration(run.duration)}</td>
                           <td>${formatDate(run.timestamp)}</td>
                         </tr>`
-                        )
-                        .join("")}
+            )
+            .join("")}
                     </tbody>
                   </table>
                 </div>
               </details>
             </div>`;
-          })
-          .join("")}
+      })
+      .join("")}
       </div>
     </div>
   `;
@@ -1472,12 +1462,11 @@ function generateSuitesWidget(suitesData) {
 <div class="suites-widget">
   <div class="suites-header">
     <h2>Test Suites</h2>
-    <span class="summary-badge">${
-      suitesData.length
+    <span class="summary-badge">${suitesData.length
     } suites • ${suitesData.reduce(
-    (sum, suite) => sum + suite.count,
-    0
-  )} tests</span>
+      (sum, suite) => sum + suite.count,
+      0
+    )} tests</span>
   </div>
   <div class="suites-grid">
     ${suitesData
@@ -1490,28 +1479,24 @@ function generateSuitesWidget(suitesData) {
         )} (${sanitizeHTML(suite.browser)})">${sanitizeHTML(suite.name)}</h3>
       </div>
       <div>🖥️ <span class="browser-tag">${sanitizeHTML(
-        suite.browser
-      )}</span></div>
+          suite.browser
+        )}</span></div>
       <div class="suite-card-body">
-        <span class="test-count">${suite.count} test${
-          suite.count !== 1 ? "s" : ""
-        }</span>
+        <span class="test-count">${suite.count} test${suite.count !== 1 ? "s" : ""
+          }</span>
         <div class="suite-stats">
-            ${
-              suite.passed > 0
-                ? `<span class="stat-passed" title="Passed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg> ${suite.passed}</span>`
-                : ""
-            }
-            ${
-              suite.failed > 0
-                ? `<span class="stat-failed" title="Failed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg> ${suite.failed}</span>`
-                : ""
-            }
-            ${
-              suite.skipped > 0
-                ? `<span class="stat-skipped" title="Skipped"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg> ${suite.skipped}</span>`
-                : ""
-            }
+            ${suite.passed > 0
+            ? `<span class="stat-passed" title="Passed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg> ${suite.passed}</span>`
+            : ""
+          }
+            ${suite.failed > 0
+            ? `<span class="stat-failed" title="Failed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg> ${suite.failed}</span>`
+            : ""
+          }
+            ${suite.skipped > 0
+            ? `<span class="stat-skipped" title="Skipped"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg> ${suite.skipped}</span>`
+            : ""
+          }
         </div>
       </div>
     </div>`
@@ -1533,6 +1518,91 @@ function getAttachmentIcon(contentType) {
   if (normalizedType.startsWith("text/")) return "📝";
   return "📎";
 }
+function generateAIFailureAnalyzerTab(results) {
+  const failedTests = (results || []).filter(test => test.status === 'failed');
+
+  if (failedTests.length === 0) {
+    return `
+      <h2 class="tab-main-title">AI Failure Analysis</h2>
+      <div class="no-data">Congratulations! No failed tests in this run.</div>
+    `;
+  }
+
+  // btoa is not available in Node.js environment, so we define a simple polyfill for it.
+  const btoa = (str) => Buffer.from(str).toString('base64');
+
+  return `
+    <h2 class="tab-main-title">AI Failure Analysis</h2>
+    <div class="ai-analyzer-stats">
+        <div class="stat-item">
+            <span class="stat-number">${failedTests.length}</span>
+            <span class="stat-label">Failed Tests</span>
+        </div>
+        <div class="stat-item">
+            <span class="stat-number">${new Set(failedTests.map(t => t.browser)).size}</span>
+            <span class="stat-label">Browsers</span>
+        </div>
+        <div class="stat-item">
+            <span class="stat-number">${(Math.round(failedTests.reduce((sum, test) => sum + (test.duration || 0), 0) / 1000))}s</span>
+            <span class="stat-label">Total Duration</span>
+        </div>
+    </div>
+    <p class="ai-analyzer-description">
+        Analyze failed tests using AI to get suggestions and potential fixes. Click the AI Fix button for specific failed test.
+    </p>
+    
+    <div class="compact-failure-list">
+      ${failedTests.map(test => {
+    const testTitle = test.name.split(" > ").pop() || "Unnamed Test";
+    const testJson = btoa(JSON.stringify(test)); // Base64 encode the test object
+    const truncatedError = (test.errorMessage || "No error message").slice(0, 150) +
+      (test.errorMessage && test.errorMessage.length > 150 ? "..." : "");
+
+    return `
+        <div class="compact-failure-item">
+            <div class="failure-header">
+                <div class="failure-main-info">
+                    <h3 class="failure-title" title="${sanitizeHTML(test.name)}">${sanitizeHTML(testTitle)}</h3>
+                    <div class="failure-meta">
+                        <span class="browser-indicator">${sanitizeHTML(test.browser || 'unknown')}</span>
+                        <span class="duration-indicator">${formatDuration(test.duration)}</span>
+                    </div>
+                </div>
+                <button class="compact-ai-btn" onclick="getAIFix(this)" data-test-json="${testJson}">
+                    <span class="ai-text">AI Fix</span>
+                </button>
+            </div>
+            <div class="failure-error-preview">
+                <div class="error-snippet">${formatPlaywrightError(truncatedError)}</div>
+                <button class="expand-error-btn" onclick="toggleErrorDetails(this)">
+                    <span class="expand-text">Show Full Error</span>
+                    <span class="expand-icon">▼</span>
+                </button>
+            </div>
+            <div class="full-error-details" style="display: none;">
+                <div class="full-error-content">
+                    ${formatPlaywrightError(test.errorMessage || "No detailed error message available")}
+                </div>
+            </div>
+        </div>
+        `
+  }).join('')}
+    </div>
+
+    <!-- AI Fix Modal -->
+    <div id="ai-fix-modal" class="ai-modal-overlay" onclick="closeAiModal()">
+      <div class="ai-modal-content" onclick="event.stopPropagation()">
+        <div class="ai-modal-header">
+            <h3 id="ai-fix-modal-title">AI Analysis</h3>
+            <span class="ai-modal-close" onclick="closeAiModal()">×</span>
+        </div>
+        <div class="ai-modal-body" id="ai-fix-modal-content">
+            <!-- Content will be injected by JavaScript -->
+        </div>
+      </div>
+    </div>
+  `;
+}
 function generateHTML(reportData, trendData = null) {
   const { run, results } = reportData;
   const suitesData = getSuitesData(reportData.results || []);
@@ -1544,6 +1614,13 @@ function generateHTML(reportData, trendData = null) {
     duration: 0,
     timestamp: new Date().toISOString(),
   };
+
+  const fixPath = (p) => {
+    if (!p) return "";
+    // This regex handles both forward slashes and backslashes
+    return p.replace(new RegExp(`^${DEFAULT_OUTPUT_DIR}[\\\\/]`), '');
+  };
+
   const totalTestsOr1 = runSummary.totalTests || 1;
   const passPercentage = Math.round((runSummary.passed / totalTestsOr1) * 100);
   const failPercentage = Math.round((runSummary.failed / totalTestsOr1) * 100);
@@ -1586,23 +1663,20 @@ function generateHTML(reportData, trendData = null) {
               )}</span>
             </div>
             <div class="step-details" style="display: none;">
-              ${
-                step.codeLocation
+              ${step.codeLocation
                   ? `<div class="step-info code-section"><strong>Location:</strong> ${sanitizeHTML(
-                      step.codeLocation
-                    )}</div>`
+                    step.codeLocation
+                  )}</div>`
                   : ""
-              }
-              ${
-                step.errorMessage
+                }
+              ${step.errorMessage
                   ? `<div class="test-error-summary">
-                      ${
-                        step.stackTrace
-                          ? `<div class="stack-trace">${formatPlaywrightError(
-                              step.stackTrace
-                            )}</div>`
-                          : ""
-                      }
+                      ${step.stackTrace
+                    ? `<div class="stack-trace">${formatPlaywrightError(
+                      step.stackTrace
+                    )}</div>`
+                    : ""
+                  }
                       <button 
                         class="copy-error-btn" 
                         onclick="copyErrorToClipboard(this)"
@@ -1624,15 +1698,14 @@ function generateHTML(reportData, trendData = null) {
                       </button>
                     </div>`
                   : ""
-              }
-              ${
-                hasNestedSteps
+                }
+              ${hasNestedSteps
                   ? `<div class="nested-steps">${generateStepsHTML(
-                      step.steps,
-                      depth + 1
-                    )}</div>`
+                    step.steps,
+                    depth + 1
+                  )}</div>`
                   : ""
-              }
+                }
             </div>
           </div>`;
             })
@@ -1640,29 +1713,27 @@ function generateHTML(reportData, trendData = null) {
         };
 
         return `
-      <div class="test-case" data-status="${
-        test.status
-      }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
-          .join(",")
-          .toLowerCase()}">
+      <div class="test-case" data-status="${test.status
+          }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
+            .join(",")
+            .toLowerCase()}">
         <div class="test-case-header" role="button" aria-expanded="false">
           <div class="test-case-summary">
             <span class="status-badge ${getStatusClass(test.status)}">${String(
-          test.status
-        ).toUpperCase()}</span>
+              test.status
+            ).toUpperCase()}</span>
             <span class="test-case-title" title="${sanitizeHTML(
               test.name
             )}">${sanitizeHTML(testTitle)}</span>
             <span class="test-case-browser">(${sanitizeHTML(browser)})</span>
           </div>
           <div class="test-case-meta">
-            ${
-              test.tags && test.tags.length > 0
-                ? test.tags
-                    .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
-                    .join(" ")
-                : ""
-            }
+            ${test.tags && test.tags.length > 0
+            ? test.tags
+              .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
+              .join(" ")
+            : ""
+          }
             <span class="test-duration">${formatDuration(test.duration)}</span>
           </div>
         </div>
@@ -1671,13 +1742,12 @@ function generateHTML(reportData, trendData = null) {
           <p><strong>Test run Worker ID:</strong> ${sanitizeHTML(
             test.workerId
           )} [<strong>Total No. of Workers:</strong> ${sanitizeHTML(
-          test.totalWorkers
-        )}]</p>
-          ${
-            test.errorMessage
-              ? `<div class="test-error-summary">${formatPlaywrightError(
-                  test.errorMessage
-                )}
+            test.totalWorkers
+          )}]</p>
+          ${test.errorMessage
+            ? `<div class="test-error-summary">${formatPlaywrightError(
+              test.errorMessage
+            )}
                 <button 
                         class="copy-error-btn" 
                         onclick="copyErrorToClipboard(this)"
@@ -1698,14 +1768,20 @@ function generateHTML(reportData, trendData = null) {
                         Copy Error Prompt
                       </button>
                 </div>`
-              : ""
+            : ""
+          }
+          ${test.snippet
+            ? `<div class="code-section"><h4>Error Snippet</h4><pre><code>${formatPlaywrightError(
+              test.snippet
+            )}</code></pre></div>`
+            : ""
           }
           <h4>Steps</h4>
           <div class="steps-list">${generateStepsHTML(test.steps)}</div>
           ${(() => {
             if (!test.stdout || test.stdout.length === 0) return "";
             // Create a unique ID for the <pre> element to target it for copying
-            const logId = `stdout-log-${test.id || testIndex}`;
+            const logId = `stdout-log-${test.id || index}`;
             return `<div class="console-output-section">
                           <h4>Console Output (stdout)
                           <button class="copy-btn" onclick="copyLogContent('${logId}', this)">Copy Console</button>
@@ -1717,79 +1793,75 @@ function generateHTML(reportData, trendData = null) {
                           </div>
                       </div>`;
           })()}
-          ${
-            test.stderr && test.stderr.length > 0
-              ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log" style="background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
-                  test.stderr.map((line) => sanitizeHTML(line)).join("\n")
-                )}</pre></div>`
-              : ""
+          ${test.stderr && test.stderr.length > 0
+            ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log" style="background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
+              test.stderr.map((line) => sanitizeHTML(line)).join("\n")
+            )}</pre></div>`
+            : ""
           }
-          ${
-            test.screenshots && test.screenshots.length > 0
-              ? `
+          ${test.screenshots && test.screenshots.length > 0
+            ? `
             <div class="attachments-section">
                 <h4>Screenshots</h4>
                 <div class="attachments-grid">
                 ${test.screenshots
-                  .map(
-                    (screenshot, index) => `
+              .map(
+                (screenshot, index) => `
                     <div class="attachment-item">
-                    <img src="${screenshot}" alt="Screenshot ${index + 1}">
+                    <img src="${fixPath(screenshot)}" alt="Screenshot ${index + 1}">
                     <div class="attachment-info">
                         <div class="trace-actions">
-                        <a href="${screenshot}" target="_blank" class="view-full">View Full Image</a>
-                        <a href="${screenshot}" target="_blank" download="screenshot-${Date.now()}-${index}.png">Download</a>
+                        <a href="${fixPath(screenshot)}" target="_blank" class="view-full">View Full Image</a>
+                        <a href="${fixPath(screenshot)}" target="_blank" download="screenshot-${Date.now()}-${index}.png">Download</a>
                         </div>
                     </div>
                     </div>
                 `
-                  )
-                  .join("")}
+              )
+              .join("")}
                 </div>
             </div>
             `
-              : ""
+            : ""
           }
-          ${
-            test.videoPath && test.videoPath.length > 0
-              ? `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${test.videoPath
-                  .map((videoUrl, index) => {
-                    const fileExtension = String(videoUrl)
-                      .split(".")
-                      .pop()
-                      .toLowerCase();
-                    const mimeType =
-                      {
-                        mp4: "video/mp4",
-                        webm: "video/webm",
-                        ogg: "video/ogg",
-                        mov: "video/quicktime",
-                        avi: "video/x-msvideo",
-                      }[fileExtension] || "video/mp4";
-                    return `<div class="attachment-item video-item">
-                            <video controls width="100%" height="auto" title="Video ${
-                              index + 1
-                            }">
+          ${test.videoPath && test.videoPath.length > 0
+            ? `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${test.videoPath
+              .map((videoUrl, index) => {
+                const fixedVideoUrl = fixPath(videoUrl);
+                const fileExtension = String(fixedVideoUrl)
+                  .split(".")
+                  .pop()
+                  .toLowerCase();
+                const mimeType =
+                  {
+                    mp4: "video/mp4",
+                    webm: "video/webm",
+                    ogg: "video/ogg",
+                    mov: "video/quicktime",
+                    avi: "video/x-msvideo",
+                  }[fileExtension] || "video/mp4";
+                return `<div class="attachment-item video-item">
+                            <video controls width="100%" height="auto" title="Video ${index + 1
+                  }">
                                 <source src="${sanitizeHTML(
-                                  videoUrl
-                                )}" type="${mimeType}">
+                    fixedVideoUrl
+                  )}" type="${mimeType}">
                                 Your browser does not support the video tag.
                             </video>
                             <div class="attachment-info">
                                 <div class="trace-actions">
                                 <a href="${sanitizeHTML(
-                                  videoUrl
-                                )}" target="_blank" download="video-${Date.now()}-${index}.${fileExtension}">Download</a>
+                    fixedVideoUrl
+                  )}" target="_blank" download="video-${Date.now()}-${index}.${fileExtension}">Download</a>
                                 </div>
                             </div>
                         </div>`;
-                  })
-                  .join("")}</div></div>`
-              : ""
+              })
+              .join("")}</div></div>`
+            : ""
           }
-          ${
-            test.tracePath
-              ? `
+          ${test.tracePath
+            ? `
             <div class="attachments-section">
                 <h4>Trace Files</h4>
                 <div class="attachments-grid">
@@ -1797,72 +1869,70 @@ function generateHTML(reportData, trendData = null) {
                         <div class="trace-preview">
                         <span class="trace-icon">📄</span>
                         <span class="trace-name">${sanitizeHTML(
-                          path.basename(test.tracePath)
-                        )}</span>
+              path.basename(test.tracePath)
+            )}</span>
                         </div>
                         <div class="attachment-info">
                         <div class="trace-actions">
                             <a href="${sanitizeHTML(
-                              test.tracePath
-                            )}" target="_blank" download="${sanitizeHTML(
-                  path.basename(test.tracePath)
-                )}" class="download-trace">Download Trace</a>
+              fixPath(test.tracePath)
+            )}" target="_blank" download="${sanitizeHTML(
+              path.basename(test.tracePath)
+            )}" class="download-trace">Download Trace</a>
                         </div>
                         </div>
                     </div>
                 </div>
             </div>
             `
-              : ""
+            : ""
           }
-          ${
-            test.attachments && test.attachments.length > 0
-              ? `
+          ${test.attachments && test.attachments.length > 0
+            ? `
             <div class="attachments-section">
                 <h4>Other Attachments</h4>
                 <div class="attachments-grid">
                 ${test.attachments
-                  .map(
-                    (attachment) => `
+              .map(
+                (attachment) => `
                     <div class="attachment-item generic-attachment">
                         <div class="attachment-icon">${getAttachmentIcon(
-                          attachment.contentType
-                        )}</div>
+                  attachment.contentType
+                )}</div>
                         <div class="attachment-caption">
                         <span class="attachment-name" title="${sanitizeHTML(
-                          attachment.name
-                        )}">${sanitizeHTML(attachment.name)}</span>
+                  attachment.name
+                )}">${sanitizeHTML(attachment.name)}</span>
                         <span class="attachment-type">${sanitizeHTML(
-                          attachment.contentType
-                        )}</span>
+                  attachment.contentType
+                )}</span>
                         </div>
                         <div class="attachment-info">
                         <div class="trace-actions">
                         <a href="${sanitizeHTML(
-                          attachment.path
-                        )}" target="_blank" class="view-full">View</a>
+                  fixPath(attachment.path)
+                )}" target="_blank" class="view-full">View</a>
                             <a href="${sanitizeHTML(
-                              attachment.path
-                            )}" target="_blank" download="${sanitizeHTML(
-                      attachment.name
-                    )}" class="download-trace">Download</a>
+                  fixPath(attachment.path)
+                )}" target="_blank" download="${sanitizeHTML(
+                  attachment.name
+                )}" class="download-trace">Download</a>
                         </div>
                         </div>
                     </div>
                 `
-                  )
-                  .join("")}
+              )
+              .join("")}
                 </div>
             </div>
             `
-              : ""
+            : ""
           }
-          ${
-            test.codeSnippet
-              ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${formatPlaywrightError(
-                  sanitizeHTML(test.codeSnippet)
-                )}</code></pre></div>`
-              : ""
+          ${test.codeSnippet
+            ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${formatPlaywrightError(
+              sanitizeHTML(test.codeSnippet)
+            )}</code></pre></div>`
+            : ""
           }
         </div>
       </div>`;
@@ -2004,7 +2074,7 @@ function generateHTML(reportData, trendData = null) {
         .attachment-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .attachment-type { font-size: 0.8rem; color: var(--text-color-secondary); }
         .trend-charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 28px; margin-bottom: 35px; }
-        .test-history-container h2.tab-main-title { font-size: 1.6em; margin-bottom: 18px; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 12px;}
+        .test-history-container h2.tab-main-title, .ai-analyzer-container h2.tab-main-title { font-size: 1.6em; margin-bottom: 18px; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 12px;}
         .test-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 22px; margin-top: 22px; }
         .test-history-card { background: var(--card-background-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 22px; box-shadow: var(--box-shadow-light); display: flex; flex-direction: column; }
         .test-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--light-gray-color); }
@@ -2024,8 +2094,24 @@ function generateHTML(reportData, trendData = null) {
         .status-badge-small.status-unknown { background-color: var(--dark-gray-color); }
         .no-data, .no-tests, .no-steps, .no-data-chart { padding: 28px; text-align: center; color: var(--dark-gray-color); font-style: italic; font-size:1.1em; background-color: var(--light-gray-color); border-radius: var(--border-radius); margin: 18px 0; border: 1px dashed var(--medium-gray-color); }
         .no-data-chart {font-size: 0.95em; padding: 18px;}
-        #test-ai iframe { border: 1px solid var(--border-color); width: 100%; height: 85vh; border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); }
-        #test-ai p {margin-bottom: 18px; font-size: 1em; color: var(--text-color-secondary);}
+        .ai-failure-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 22px; }
+        .ai-failure-card { background: var(--card-background-color); border: 1px solid var(--border-color); border-left: 5px solid var(--danger-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); display: flex; flex-direction: column; }
+        .ai-failure-card-header { padding: 15px 20px; border-bottom: 1px solid var(--light-gray-color); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
+        .ai-failure-card-header h3 { margin: 0; font-size: 1.1em; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .ai-failure-card-body { padding: 20px; }
+        .ai-fix-btn { background-color: var(--primary-color); color: white; border: none; padding: 10px 18px; font-size: 1em; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; display: inline-flex; align-items: center; gap: 8px; }
+        .ai-fix-btn:hover { background-color: var(--accent-color); transform: translateY(-2px); }
+        .ai-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; z-index: 1050; animation: fadeIn 0.3s; }
+        .ai-modal-content { background-color: var(--card-background-color); color: var(--text-color); border-radius: var(--border-radius); width: 90%; max-width: 800px; max-height: 90vh; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; }
+        .ai-modal-header { padding: 18px 25px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
+        .ai-modal-header h3 { margin: 0; font-size: 1.25em; }
+        .ai-modal-close { font-size: 2rem; font-weight: 300; cursor: pointer; color: var(--dark-gray-color); line-height: 1; transition: color 0.2s; }
+        .ai-modal-close:hover { color: var(--danger-color); }
+        .ai-modal-body { padding: 25px; overflow-y: auto; }
+        .ai-modal-body h4 { margin-top: 18px; margin-bottom: 10px; font-size: 1.1em; color: var(--primary-color); }
+        .ai-modal-body p { margin-bottom: 15px; }
+        .ai-loader { margin: 40px auto; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .trace-preview { padding: 1rem; text-align: center; background: #f5f5f5; border-bottom: 1px solid #e1e1e1; }
         .trace-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
         .trace-name { word-break: break-word; font-size: 0.9rem; }
@@ -2038,9 +2124,216 @@ function generateHTML(reportData, trendData = null) {
         .filters button.clear-filters-btn { background-color: var(--medium-gray-color); color: var(--text-color); }
         .filters button.clear-filters-btn:hover { background-color: var(--dark-gray-color); color: #fff; }
         .copy-btn {color: var(--primary-color); background: #fefefe; border-radius: 8px; cursor: pointer; border-color: var(--primary-color); font-size: 1em; margin-left: 93%; font-weight: 600;}
+        /* Compact AI Failure Analyzer Styles */
+        .ai-analyzer-stats { 
+            display: flex; 
+            gap: 20px; 
+            margin-bottom: 25px; 
+            padding: 20px; 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+            border-radius: var(--border-radius); 
+            justify-content: center;
+        }
+        .stat-item { 
+            text-align: center; 
+            color: white; 
+        }
+        .stat-number { 
+            display: block; 
+            font-size: 2em; 
+            font-weight: 700; 
+            line-height: 1;
+        }
+        .stat-label { 
+            font-size: 0.9em; 
+            opacity: 0.9; 
+            font-weight: 500;
+        }
+        .ai-analyzer-description { 
+            margin-bottom: 25px; 
+            font-size: 1em; 
+            color: var(--text-color-secondary); 
+            text-align: center; 
+            max-width: 600px; 
+            margin-left: auto; 
+            margin-right: auto;
+        }
+        .compact-failure-list { 
+            display: flex; 
+            flex-direction: column; 
+            gap: 15px; 
+        }
+        .compact-failure-item { 
+            background: var(--card-background-color); 
+            border: 1px solid var(--border-color); 
+            border-left: 4px solid var(--danger-color); 
+            border-radius: var(--border-radius); 
+            box-shadow: var(--box-shadow-light); 
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .compact-failure-item:hover { 
+            transform: translateY(-2px); 
+            box-shadow: var(--box-shadow); 
+        }
+        .failure-header { 
+            display: flex; 
+            justify-content: space-between; 
+            align-items: center; 
+            padding: 18px 20px; 
+            gap: 15px;
+        }
+        .failure-main-info { 
+            flex: 1; 
+            min-width: 0; 
+        }
+        .failure-title { 
+            margin: 0 0 8px 0; 
+            font-size: 1.1em; 
+            font-weight: 600; 
+            color: var(--text-color); 
+            white-space: nowrap; 
+            overflow: hidden; 
+            text-overflow: ellipsis;
+        }
+        .failure-meta { 
+            display: flex; 
+            gap: 12px; 
+            align-items: center;
+        }
+        .browser-indicator, .duration-indicator { 
+            font-size: 0.85em; 
+            padding: 3px 8px; 
+            border-radius: 12px; 
+            font-weight: 500;
+        }
+        .browser-indicator { 
+            background: var(--info-color); 
+            color: white; 
+        }
+        .duration-indicator { 
+            background: var(--medium-gray-color); 
+            color: var(--text-color); 
+        }
+        .compact-ai-btn { 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+            color: white; 
+            border: none; 
+            padding: 12px 18px; 
+            border-radius: 6px; 
+            cursor: pointer; 
+            font-weight: 600; 
+            display: flex; 
+            align-items: center; 
+            gap: 8px; 
+            transition: all 0.3s ease; 
+            white-space: nowrap;
+        }
+        .compact-ai-btn:hover { 
+            transform: translateY(-2px); 
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); 
+        }
+        .ai-icon { 
+            font-size: 1.2em; 
+        }
+        .ai-text { 
+            font-size: 0.95em; 
+        }
+        .failure-error-preview { 
+            padding: 0 20px 18px 20px; 
+            border-top: 1px solid var(--light-gray-color);
+        }
+        .error-snippet { 
+            background: rgba(244, 67, 54, 0.05); 
+            border: 1px solid rgba(244, 67, 54, 0.2); 
+            border-radius: 6px; 
+            padding: 12px; 
+            margin-bottom: 12px; 
+            font-family: monospace; 
+            font-size: 0.9em; 
+            color: var(--danger-color); 
+            line-height: 1.4;
+        }
+        .expand-error-btn { 
+            background: none; 
+            border: 1px solid var(--border-color); 
+            color: var(--text-color-secondary); 
+            padding: 6px 12px; 
+            border-radius: 4px; 
+            cursor: pointer; 
+            font-size: 0.85em; 
+            display: flex; 
+            align-items: center; 
+            gap: 6px; 
+            transition: all 0.2s ease;
+        }
+        .expand-error-btn:hover { 
+            background: var(--light-gray-color); 
+            border-color: var(--medium-gray-color); 
+        }
+        .expand-icon { 
+            transition: transform 0.2s ease; 
+            font-size: 0.8em;
+        }
+        .expand-error-btn.expanded .expand-icon { 
+            transform: rotate(180deg); 
+        }
+        .full-error-details { 
+            padding: 0 20px 20px 20px; 
+            border-top: 1px solid var(--light-gray-color); 
+            margin-top: 0;
+        }
+        .full-error-content { 
+            background: rgba(244, 67, 54, 0.05); 
+            border: 1px solid rgba(244, 67, 54, 0.2); 
+            border-radius: 6px; 
+            padding: 15px; 
+            font-family: monospace; 
+            font-size: 0.9em; 
+            color: var(--danger-color); 
+            line-height: 1.4; 
+            max-height: 300px; 
+            overflow-y: auto;
+        }
+        
+        /* Responsive adjustments for compact design */
+        @media (max-width: 768px) {
+            .ai-analyzer-stats { 
+                flex-direction: column; 
+                gap: 15px; 
+                text-align: center; 
+            }
+            .failure-header { 
+                flex-direction: column; 
+                align-items: stretch; 
+                gap: 15px; 
+            }
+            .failure-main-info { 
+                text-align: center; 
+            }
+            .failure-meta { 
+                justify-content: center; 
+            }
+            .compact-ai-btn { 
+                justify-content: center; 
+                padding: 12px 20px; 
+            }
+        }
+        @media (max-width: 480px) {
+            .stat-item .stat-number { 
+                font-size: 1.5em; 
+            }
+            .failure-header { 
+                padding: 15px; 
+            }
+            .failure-error-preview, .full-error-details { 
+                padding-left: 15px; 
+                padding-right: 15px; 
+            }
+        }
+
         @media (max-width: 1200px) { .trend-charts-row { grid-template-columns: 1fr; } }
         @media (max-width: 992px) { .dashboard-bottom-row { grid-template-columns: 1fr; } .pie-chart-wrapper div[id^="pieChart-"] { max-width: 350px; margin: 0 auto; } .filters input { min-width: 180px; } .filters select { min-width: 150px; } }
-        @media (max-width: 768px) { body { font-size: 15px; } .container { margin: 10px; padding: 20px; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header h1 { font-size: 1.6em; } .run-info { text-align: left; font-size:0.9em; } .tabs { margin-bottom: 25px;} .tab-button { padding: 12px 20px; font-size: 1.05em;} .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;} .summary-card .value {font-size: 2em;} .summary-card h3 {font-size: 0.95em;} .filters { flex-direction: column; padding: 18px; gap: 12px;} .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .test-case-summary {gap: 10px;} .test-case-title {font-size: 1.05em;} .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;} .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;} .test-history-grid {grid-template-columns: 1fr;} .pie-chart-wrapper {min-height: auto;} }
+        @media (max-width: 768px) { body { font-size: 15px; } .container { margin: 10px; padding: 20px; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header h1 { font-size: 1.6em; } .run-info { text-align: left; font-size:0.9em; } .tabs { margin-bottom: 25px;} .tab-button { padding: 12px 20px; font-size: 1.05em;} .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;} .summary-card .value {font-size: 2em;} .summary-card h3 {font-size: 0.95em;} .filters { flex-direction: column; padding: 18px; gap: 12px;} .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .test-case-summary {gap: 10px;} .test-case-title {font-size: 1.05em;} .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;} .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;} .test-history-grid {grid-template-columns: 1fr;} .pie-chart-wrapper {min-height: auto;} .ai-failure-cards-grid { grid-template-columns: 1fr; } }
         @media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 50px; } .tab-button {padding: 10px 15px; font-size: 1em;} .summary-card .value {font-size: 1.8em;} .attachments-grid {grid-template-columns: 1fr;} .step-item {padding-left: calc(var(--depth, 0) * 18px);} .test-case-content, .step-details {padding: 15px;} .trend-charts-row {gap: 20px;} .trend-chart {padding: 20px;} }
     </style>
 </head>
@@ -2052,8 +2345,8 @@ function generateHTML(reportData, trendData = null) {
                 <h1>Playwright Pulse Report</h1>
             </div>
             <div class="run-info"><strong>Run Date:</strong> ${formatDate(
-              runSummary.timestamp
-            )}<br><strong>Total Duration:</strong> ${formatDuration(
+    runSummary.timestamp
+  )}<br><strong>Total Duration:</strong> ${formatDuration(
     runSummary.duration
   )}</div>
         </header>
@@ -2061,44 +2354,39 @@ function generateHTML(reportData, trendData = null) {
             <button class="tab-button active" data-tab="dashboard">Dashboard</button>
             <button class="tab-button" data-tab="test-runs">Test Run Summary</button>
             <button class="tab-button" data-tab="test-history">Test History</button>
-            <button class="tab-button" data-tab="test-ai">AI Analysis</button>
+            <button class="tab-button" data-tab="ai-failure-analyzer">AI Failure Analyzer</button>
         </div>
         <div id="dashboard" class="tab-content active">
             <div class="dashboard-grid">
-                <div class="summary-card"><h3>Total Tests</h3><div class="value">${
-                  runSummary.totalTests
-                }</div></div>
-                <div class="summary-card status-passed"><h3>Passed</h3><div class="value">${
-                  runSummary.passed
-                }</div><div class="trend-percentage">${passPercentage}%</div></div>
-                <div class="summary-card status-failed"><h3>Failed</h3><div class="value">${
-                  runSummary.failed
-                }</div><div class="trend-percentage">${failPercentage}%</div></div>
-                <div class="summary-card status-skipped"><h3>Skipped</h3><div class="value">${
-                  runSummary.skipped || 0
-                }</div><div class="trend-percentage">${skipPercentage}%</div></div>
+                <div class="summary-card"><h3>Total Tests</h3><div class="value">${runSummary.totalTests
+    }</div></div>
+                <div class="summary-card status-passed"><h3>Passed</h3><div class="value">${runSummary.passed
+    }</div><div class="trend-percentage">${passPercentage}%</div></div>
+                <div class="summary-card status-failed"><h3>Failed</h3><div class="value">${runSummary.failed
+    }</div><div class="trend-percentage">${failPercentage}%</div></div>
+                <div class="summary-card status-skipped"><h3>Skipped</h3><div class="value">${runSummary.skipped || 0
+    }</div><div class="trend-percentage">${skipPercentage}%</div></div>
                 <div class="summary-card"><h3>Avg. Test Time</h3><div class="value">${avgTestDuration}</div></div>
                 <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
-                  runSummary.duration
-                )}</div></div>
+      runSummary.duration
+    )}</div></div>
             </div>
             <div class="dashboard-bottom-row">
               <div style="display: grid; gap: 20px">
                 ${generatePieChart(
-                  [
-                    { label: "Passed", value: runSummary.passed },
-                    { label: "Failed", value: runSummary.failed },
-                    { label: "Skipped", value: runSummary.skipped || 0 },
-                  ],
-                  400,
-                  390
-                )} 
-                ${
-                  runSummary.environment &&
-                  Object.keys(runSummary.environment).length > 0
-                    ? generateEnvironmentDashboard(runSummary.environment)
-                    : '<div class="no-data">Environment data not available.</div>'
-                }
+      [
+        { label: "Passed", value: runSummary.passed },
+        { label: "Failed", value: runSummary.failed },
+        { label: "Skipped", value: runSummary.skipped || 0 },
+      ],
+      400,
+      390
+    )} 
+                ${runSummary.environment &&
+      Object.keys(runSummary.environment).length > 0
+      ? generateEnvironmentDashboard(runSummary.environment)
+      : '<div class="no-data">Environment data not available.</div>'
+    }
               </div> 
                 ${generateSuitesWidget(suitesData)}
             </div>
@@ -2108,17 +2396,17 @@ function generateHTML(reportData, trendData = null) {
                 <input type="text" id="filter-name" placeholder="Filter by test name/path..." style="border-color: black; border-style: outset;">
                 <select id="filter-status"><option value="">All Statuses</option><option value="passed">Passed</option><option value="failed">Failed</option><option value="skipped">Skipped</option></select>
                 <select id="filter-browser"><option value="">All Browsers</option>${Array.from(
-                  new Set(
-                    (results || []).map((test) => test.browser || "unknown")
-                  )
-                )
-                  .map(
-                    (browser) =>
-                      `<option value="${sanitizeHTML(browser)}">${sanitizeHTML(
-                        browser
-                      )}</option>`
-                  )
-                  .join("")}</select>
+      new Set(
+        (results || []).map((test) => test.browser || "unknown")
+      )
+    )
+      .map(
+        (browser) =>
+          `<option value="${sanitizeHTML(browser)}">${sanitizeHTML(
+            browser
+          )}</option>`
+      )
+      .join("")}</select>
                 <button id="expand-all-tests">Expand All</button> <button id="collapse-all-tests">Collapse All</button> <button id="clear-run-summary-filters" class="clear-filters-btn">Clear Filters</button>
             </div>
             <div class="test-cases-list">${generateTestCasesHTML()}</div>
@@ -2127,18 +2415,16 @@ function generateHTML(reportData, trendData = null) {
           <h2 class="tab-main-title">Execution Trends</h2>
           <div class="trend-charts-row">
             <div class="trend-chart"><h3 class="chart-title-header">Test Volume & Outcome Trends</h3>
-              ${
-                trendData && trendData.overall && trendData.overall.length > 0
-                  ? generateTestTrendsChart(trendData)
-                  : '<div class="no-data">Overall trend data not available for test counts.</div>'
-              }
+              ${trendData && trendData.overall && trendData.overall.length > 0
+      ? generateTestTrendsChart(trendData)
+      : '<div class="no-data">Overall trend data not available for test counts.</div>'
+    }
             </div>
             <div class="trend-chart"><h3 class="chart-title-header">Execution Duration Trends</h3>
-              ${
-                trendData && trendData.overall && trendData.overall.length > 0
-                  ? generateDurationTrendChart(trendData)
-                  : '<div class="no-data">Overall trend data not available for durations.</div>'
-              }
+              ${trendData && trendData.overall && trendData.overall.length > 0
+      ? generateDurationTrendChart(trendData)
+      : '<div class="no-data">Overall trend data not available for durations.</div>'
+    }
             </div>
           </div>
           <h2 class="tab-main-title">Test Distribution by Worker ${infoTooltip}</h2>
@@ -2148,16 +2434,15 @@ function generateHTML(reportData, trendData = null) {
              </div>
           </div>
           <h2 class="tab-main-title">Individual Test History</h2>
-          ${
-            trendData &&
-            trendData.testRuns &&
-            Object.keys(trendData.testRuns).length > 0
-              ? generateTestHistoryContent(trendData)
-              : '<div class="no-data">Individual test history data not available.</div>'
-          }
+          ${trendData &&
+      trendData.testRuns &&
+      Object.keys(trendData.testRuns).length > 0
+      ? generateTestHistoryContent(trendData)
+      : '<div class="no-data">Individual test history data not available.</div>'
+    }
         </div>
-        <div id="test-ai" class="tab-content">
-             <iframe data-src="https://ai-test-analyser.netlify.app/" width="100%" height="100%" frameborder="0" allowfullscreen class="lazy-load-iframe" title="AI Test Analyser" style="border: none; height: 100vh;"></iframe>
+        <div id="ai-failure-analyzer" class="tab-content">
+            ${generateAIFailureAnalyzerTab(results)}
         </div>
         <footer style="padding: 0.5rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); text-align: center; font-family: 'Segoe UI', system-ui, sans-serif;">
             <div style="display: inline-flex; align-items: center; gap: 0.5rem; color: #333; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px;">
@@ -2189,7 +2474,135 @@ function generateHTML(reportData, trendData = null) {
             button.textContent = 'Failed';
              setTimeout(() => { button.textContent = 'Copy'; }, 2000);
         });
-    }    
+    }
+    
+    // --- AI Failure Analyzer Functions ---
+function getAIFix(button) {
+    const modal = document.getElementById('ai-fix-modal');
+    const modalContent = document.getElementById('ai-fix-modal-content');
+    const modalTitle = document.getElementById('ai-fix-modal-title');
+    
+    modal.style.display = 'flex';
+    modalTitle.textContent = 'Analyzing...';
+    modalContent.innerHTML = '<div class="ai-loader"></div>';
+
+    try {
+        const testJson = button.dataset.testJson;
+        const test = JSON.parse(atob(testJson));
+
+        const testName = test.name || 'Unknown Test';
+        const failureLogsAndErrors = [
+            'Error Message:',
+            test.errorMessage || 'Not available.',
+            '\\n\\n--- stdout ---',
+            (test.stdout && test.stdout.length > 0) ? test.stdout.join('\\n') : 'Not available.',
+            '\\n\\n--- stderr ---',
+            (test.stderr && test.stderr.length > 0) ? test.stderr.join('\\n') : 'Not available.'
+        ].join('\\n');
+        const codeSnippet = test.snippet || '';
+
+        const shortTestName = testName.split(' > ').pop();
+        modalTitle.textContent = \`Analysis for: \${shortTestName}\`;
+        
+        const apiUrl = 'https://ai-test-analyser.netlify.app/api/analyze';
+        fetch(apiUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                testName: testName,
+                failureLogsAndErrors: failureLogsAndErrors,
+                codeSnippet: codeSnippet,
+            }),
+        })
+        .then(response => {
+            if (!response.ok) {
+                return response.text().then(text => { 
+                    throw new Error(\`API request failed with status \${response.status}: \${text || response.statusText}\`);
+                });
+            }
+            return response.text();
+        })
+        .then(text => {
+            if (!text) {
+                throw new Error("The AI analyzer returned an empty response. This might happen during high load or if the request was blocked. Please try again in a moment.");
+            }
+            try {
+                return JSON.parse(text);
+            } catch (e) {
+                console.error("Failed to parse JSON:", text);
+                throw new Error(\`The AI analyzer returned an invalid response. \${e.message}\`);
+            }
+        })
+        .then(data => {
+            // Helper function to prevent XSS by escaping HTML characters
+            const escapeHtml = (unsafe) => {
+                if (typeof unsafe !== 'string') return '';
+                return unsafe
+                    .replace(/&/g, "&amp;")
+                    .replace(/</g, "&lt;")
+                    .replace(/>/g, "&gt;")
+                    .replace(/"/g, "&quot;")
+                    .replace(/'/g, "&#039;");
+            };
+
+            // Build the "Analysis" part from the 'rootCause' field
+            const analysisHtml = \`<h4>Analysis</h4><p>\${escapeHtml(data.rootCause) || 'No analysis provided.'}</p>\`;
+            
+            // Build the "Suggestions" part by iterating through the 'suggestedFixes' array
+            let suggestionsHtml = '<h4>Suggestions</h4>';
+            if (data.suggestedFixes && data.suggestedFixes.length > 0) {
+                suggestionsHtml += '<div class="suggestions-list" style="margin-top: 15px;">';
+                data.suggestedFixes.forEach(fix => {
+                    suggestionsHtml += \`
+                        <div class="suggestion-item" style="margin-bottom: 22px; border-left: 3px solid var(--accent-color-alt); padding-left: 15px;">
+                            <p style="margin: 0 0 8px 0; font-weight: 500;">\${escapeHtml(fix.description)}</p>
+                            \${fix.codeSnippet ? \`<div class="code-section"><pre><code>\${escapeHtml(fix.codeSnippet)}</code></pre></div>\` : ''}
+                        </div>
+                    \`;
+                });
+                suggestionsHtml += '</div>';
+            } else {
+                // Fallback if there are no suggestions
+                suggestionsHtml += \`<div class="code-section"><pre><code>No suggestion provided.</code></pre></div>\`;
+            }
+            
+            // Combine both parts and set the modal content
+            modalContent.innerHTML = analysisHtml + suggestionsHtml;
+        })
+        .catch(err => {
+            console.error('AI Fix Error:', err);
+            modalContent.innerHTML = \`<div class="test-error-summary"><strong>Error:</strong> Failed to get AI analysis. Please check the console for details. <br><br> \${err.message}</div>\`;
+        });
+
+    } catch (e) {
+        console.error('Error processing test data for AI Fix:', e);
+        modalTitle.textContent = 'Error';
+        modalContent.innerHTML = \`<div class="test-error-summary">Could not process test data. Is it formatted correctly?</div>\`;
+    }
+}
+
+
+    function closeAiModal() {
+        const modal = document.getElementById('ai-fix-modal');
+        if(modal) modal.style.display = 'none';
+    }
+
+    function toggleErrorDetails(button) {
+        const errorDetails = button.closest('.compact-failure-item').querySelector('.full-error-details');
+        const expandText = button.querySelector('.expand-text');
+        const expandIcon = button.querySelector('.expand-icon');
+        
+        if (errorDetails.style.display === 'none' || !errorDetails.style.display) {
+            errorDetails.style.display = 'block';
+            expandText.textContent = 'Hide Full Error';
+            button.classList.add('expanded');
+        } else {
+            errorDetails.style.display = 'none';
+            expandText.textContent = 'Show Full Error';
+            button.classList.remove('expanded');
+        }
+    }
+
     function initializeReportInteractivity() {
         const tabButtons = document.querySelectorAll('.tab-button');
         const tabContents = document.querySelectorAll('.tab-content');
@@ -2202,9 +2615,9 @@ function generateHTML(reportData, trendData = null) {
                 const activeContent = document.getElementById(tabId);
                 if (activeContent) {
                     activeContent.classList.add('active');
-                    // Check if IntersectionObserver is already handling elements in this tab
-                    // For simplicity, we assume if an element is observed, it will be handled when it becomes visible.
-                    // If IntersectionObserver is not supported, already-visible elements would have been loaded by fallback.
+                    if ('IntersectionObserver' in window) {
+                       // Handled by observer
+                    }
                 }
             });
         });
@@ -2290,19 +2703,13 @@ function generateHTML(reportData, trendData = null) {
         if (expandAllBtn) expandAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('block', 'true'));
         if (collapseAllBtn) collapseAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('none', 'false'));
         // --- Intersection Observer for Lazy Loading ---
-        const lazyLoadElements = document.querySelectorAll('.lazy-load-chart, .lazy-load-iframe');
+        const lazyLoadElements = document.querySelectorAll('.lazy-load-chart');
         if ('IntersectionObserver' in window) {
             let lazyObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         const element = entry.target;
-                        if (element.classList.contains('lazy-load-iframe')) {
-                            if (element.dataset.src) {
-                                element.src = element.dataset.src;
-                                element.removeAttribute('data-src'); // Optional: remove data-src after loading
-                                console.log('Lazy loaded iframe:', element.title || 'Untitled Iframe');
-                            }
-                        } else if (element.classList.contains('lazy-load-chart')) {
+                        if (element.classList.contains('lazy-load-chart')) {
                             const renderFunctionName = element.dataset.renderFunctionName;
                             if (renderFunctionName && typeof window[renderFunctionName] === 'function') {
                                 try {
@@ -2329,12 +2736,7 @@ function generateHTML(reportData, trendData = null) {
         } else { // Fallback for browsers without IntersectionObserver
             console.warn("IntersectionObserver not supported. Loading all items immediately.");
             lazyLoadElements.forEach(element => {
-                if (element.classList.contains('lazy-load-iframe')) {
-                     if (element.dataset.src) {
-                        element.src = element.dataset.src;
-                        element.removeAttribute('data-src');
-                    }
-                } else if (element.classList.contains('lazy-load-chart')) {
+                if (element.classList.contains('lazy-load-chart')) {
                     const renderFunctionName = element.dataset.renderFunctionName;
                     if (renderFunctionName && typeof window[renderFunctionName] === 'function') {
                          try {