codeceptjs 3.7.6-beta.3 → 3.7.6

package/lib/plugin/htmlReporter.js

@@ -1,3 +1,7 @@
+// @ts-nocheck
+// TypeScript: Import Node.js types for process, fs, path, etc.
+/// <reference types="node" />
+
 const fs = require('fs')
 const path = require('path')
 const mkdirp = require('mkdirp')
@@ -11,7 +15,7 @@ const output = require('../output')
 const Codecept = require('../codecept')
 
 const defaultConfig = {
-  output: global.output_dir || './output',
+  output: typeof global !== 'undefined' && global.output_dir ? global.output_dir : './output',
   reportFileName: 'report.html',
   includeArtifacts: true,
   showSteps: true,
@@ -60,6 +64,9 @@ const defaultConfig = {
  */
 module.exports = function (config) {
   const options = { ...defaultConfig, ...config }
+  /**
+   * TypeScript: Explicitly type reportData arrays as any[] to avoid 'never' errors
+   */
   let reportData = {
     stats: {},
     tests: [],
@@ -82,8 +89,8 @@ module.exports = function (config) {
 
   // Track overall test execution
   event.dispatcher.on(event.all.before, () => {
-    reportData.startTime = new Date()
-    output.plugin('htmlReporter', 'Starting HTML report generation...')
+    reportData.startTime = new Date().toISOString()
+    output.print('HTML Reporter: Starting HTML report generation...')
   })
 
   // Track test start to initialize steps and hooks collection
@@ -138,10 +145,30 @@ module.exports = function (config) {
     if (step.htmlReporterStartTime) {
       step.duration = Date.now() - step.htmlReporterStartTime
     }
+
+    // Serialize args immediately to preserve them through worker serialization
+    let serializedArgs = []
+    if (step.args && Array.isArray(step.args)) {
+      serializedArgs = step.args.map(arg => {
+        try {
+          // Try to convert to JSON-friendly format
+          if (typeof arg === 'string') return arg
+          if (typeof arg === 'number') return arg
+          if (typeof arg === 'boolean') return arg
+          if (arg === null || arg === undefined) return arg
+          // For objects, try to serialize them
+          return JSON.parse(JSON.stringify(arg))
+        } catch (e) {
+          // If serialization fails, convert to string
+          return String(arg)
+        }
+      })
+    }
+
     currentTestSteps.push({
       name: step.name,
       actor: step.actor,
-      args: step.args || [],
+      args: serializedArgs,
       status: step.failed ? 'failed' : 'success',
       duration: step.duration || 0,
     })
@@ -156,12 +183,21 @@ module.exports = function (config) {
     if (hook.htmlReporterStartTime) {
       hook.duration = Date.now() - hook.htmlReporterStartTime
     }
+    // Enhanced hook info: include type, name, location, error, and context
     const hookInfo = {
       title: hook.title,
       type: hook.type || 'unknown', // before, after, beforeSuite, afterSuite
       status: hook.err ? 'failed' : 'passed',
       duration: hook.duration || 0,
-      error: hook.err ? hook.err.message : null,
+      error: hook.err ? hook.err.message || hook.err.toString() : null,
+      location: hook.file || hook.location || (hook.ctx && hook.ctx.test && hook.ctx.test.file) || null,
+      context: hook.ctx
+        ? {
+            testTitle: hook.ctx.test?.title,
+            suiteTitle: hook.ctx.test?.parent?.title,
+            feature: hook.ctx.test?.parent?.feature?.name,
+          }
+        : null,
     }
     currentTestHooks.push(hookInfo)
     reportData.hooks.push(hookInfo)
@@ -185,6 +221,43 @@ module.exports = function (config) {
     })
   })
 
+  // Collect skipped tests
+  event.dispatcher.on(event.test.skipped, test => {
+    const testId = generateTestId(test)
+
+    // Detect if this is a BDD/Gherkin test
+    const suite = test.parent || test.suite || currentSuite
+    const isBddTest = isBddGherkinTest(test, suite)
+    const featureInfo = isBddTest ? getBddFeatureInfo(test, suite) : null
+
+    // Extract parent/suite title
+    const parentTitle = test.parent?.title || test.suite?.title || (suite && suite.title) || null
+    const suiteTitle = test.suite?.title || (suite && suite.title) || null
+
+    const testData = {
+      ...test,
+      id: testId,
+      state: 'pending', // Use 'pending' as the state for skipped tests
+      duration: 0,
+      steps: [],
+      hooks: [],
+      artifacts: [],
+      tags: test.tags || [],
+      meta: test.meta || {},
+      opts: test.opts || {},
+      notes: test.notes || [],
+      retryAttempts: 0,
+      uid: test.uid,
+      isBdd: isBddTest,
+      feature: featureInfo,
+      parentTitle: parentTitle,
+      suiteTitle: suiteTitle,
+    }
+
+    reportData.tests.push(testData)
+    output.debug(`HTML Reporter: Added skipped test - ${test.title}`)
+  })
+
   // Collect test results
   event.dispatcher.on(event.test.finished, test => {
     const testId = generateTestId(test)
@@ -211,19 +284,25 @@ module.exports = function (config) {
     // Debug logging
     output.debug(`HTML Reporter: Test finished - ${test.title}, State: ${test.state}, Retries: ${retryAttempts}`)
 
-    // Detect if this is a BDD/Gherkin test
-    const isBddTest = isBddGherkinTest(test, currentSuite)
+    // Detect if this is a BDD/Gherkin test - use test.parent directly instead of currentSuite
+    const suite = test.parent || test.suite || currentSuite
+    const isBddTest = isBddGherkinTest(test, suite)
     const steps = isBddTest ? currentBddSteps : currentTestSteps
-    const featureInfo = isBddTest ? getBddFeatureInfo(test, currentSuite) : null
+    const featureInfo = isBddTest ? getBddFeatureInfo(test, suite) : null
 
     // Check if this test already exists in reportData.tests (from a previous retry)
     const existingTestIndex = reportData.tests.findIndex(t => t.id === testId)
-    const hasFailedBefore = existingTestIndex >= 0 && reportData.tests[existingTestIndex].state === 'failed'
+    const hasFailedBefore = existingTestIndex >= 0 && reportData.tests[existingTestIndex] && reportData.tests[existingTestIndex].state === 'failed'
     const currentlyFailed = test.state === 'failed'
 
     // Debug artifacts collection (but don't process them yet - screenshots may not be ready)
     output.debug(`HTML Reporter: Test ${test.title} artifacts at test.finished: ${JSON.stringify(test.artifacts)}`)
 
+    // Extract parent/suite title before serialization (for worker mode)
+    // This ensures the feature name is preserved when test data is JSON stringified
+    const parentTitle = test.parent?.title || test.suite?.title || (suite && suite.title) || null
+    const suiteTitle = test.suite?.title || (suite && suite.title) || null
+
     const testData = {
       ...test,
       id: testId,
@@ -239,11 +318,14 @@ module.exports = function (config) {
       uid: test.uid,
       isBdd: isBddTest,
       feature: featureInfo,
+      // Store parent/suite titles as simple strings for worker mode serialization
+      parentTitle: parentTitle,
+      suiteTitle: suiteTitle,
     }
 
     if (existingTestIndex >= 0) {
       // Update existing test with final result (including failed state)
-      reportData.tests[existingTestIndex] = testData
+      if (existingTestIndex >= 0) reportData.tests[existingTestIndex] = testData
       output.debug(`HTML Reporter: Updated existing test - ${test.title}, Final state: ${test.state}`)
     } else {
       // Add new test
@@ -288,14 +370,14 @@ module.exports = function (config) {
         finalState: test.state,
         duration: test.duration || 0,
       })
-    output.debug(`HTML Reporter: Fallback retry detection for failed test ${test.title}, attempts: ${fallbackAttempts}`)
+      output.debug(`HTML Reporter: Fallback retry detection for failed test ${test.title}, attempts: ${fallbackAttempts}`)
     }
   })
 
   // Generate final report
-  event.dispatcher.on(event.all.result, result => {
-    reportData.endTime = new Date()
-    reportData.duration = reportData.endTime - reportData.startTime
+  event.dispatcher.on(event.all.result, async result => {
+    reportData.endTime = new Date().toISOString()
+    reportData.duration = new Date(reportData.endTime).getTime() - new Date(reportData.startTime).getTime()
 
     // Process artifacts now that all async tasks (including screenshots) are complete
     output.debug(`HTML Reporter: Processing artifacts for ${reportData.tests.length} tests after all async tasks complete`)
@@ -337,15 +419,25 @@ module.exports = function (config) {
     // Calculate stats from our collected test data instead of using result.stats
     const passedTests = reportData.tests.filter(t => t.state === 'passed').length
     const failedTests = reportData.tests.filter(t => t.state === 'failed').length
-    const pendingTests = reportData.tests.filter(t => t.state === 'pending').length
-    const skippedTests = reportData.tests.filter(t => t.state === 'skipped').length
+    // Combine pending and skipped tests (both represent tests that were not run)
+    const pendingTests = reportData.tests.filter(t => t.state === 'pending' || t.state === 'skipped').length
+
+    // Calculate flaky tests (passed but had retries)
+    const flakyTests = reportData.tests.filter(t => t.state === 'passed' && t.retryAttempts > 0).length
+
+    // Count total artifacts
+    const totalArtifacts = reportData.tests.reduce((sum, t) => sum + (t.artifacts?.length || 0), 0)
 
     // Populate failures from our collected test data with enhanced details
     reportData.failures = reportData.tests
       .filter(t => t.state === 'failed')
       .map(t => {
         const testName = t.title || 'Unknown Test'
-        const featureName = t.parent?.title || 'Unknown Feature'
+        // Try to get feature name from BDD, preserved titles (worker mode), or direct access
+        let featureName = t.feature?.name || t.parentTitle || t.suiteTitle || t.parent?.title || t.suite?.title || 'Unknown Feature'
+        if (featureName === 'Unknown Feature' && t.suite && t.suite.feature && t.suite.feature.name) {
+          featureName = t.suite.feature.name
+        }
 
         if (t.err) {
           const errorMessage = t.err.message || t.err.toString() || 'Test failed'
@@ -378,9 +470,10 @@ module.exports = function (config) {
       passes: passedTests,
       failures: failedTests,
       pending: pendingTests,
-      skipped: skippedTests,
       duration: reportData.duration,
       failedHooks: result.stats?.failedHooks || 0,
+      flaky: flakyTests,
+      artifacts: totalArtifacts,
     }
 
     // Debug logging for final stats
@@ -410,15 +503,20 @@ module.exports = function (config) {
         // Always overwrite the file with the latest complete data from this worker
         // This prevents double-counting when the event is triggered multiple times
         fs.writeFileSync(jsonPath, safeJsonStringify(reportData))
-        output.print(`HTML Reporter: Generated worker JSON results: ${jsonFileName}`)
+        output.debug(`HTML Reporter: Generated worker JSON results: ${jsonFileName}`)
       } catch (error) {
-        output.print(`HTML Reporter: Failed to write worker JSON: ${error.message}`)
+        output.debug(`HTML Reporter: Failed to write worker JSON: ${error.message}`)
       }
       return
     }
 
     // Single process mode - generate report normally
-    generateHtmlReport(reportData, options)
+    try {
+      await generateHtmlReport(reportData, options)
+    } catch (error) {
+      output.print(`Failed to generate HTML report: ${error.message}`)
+      output.debug(`HTML Reporter error stack: ${error.stack}`)
+    }
 
     // Export stats if configured
     if (options.exportStats) {
@@ -542,8 +640,8 @@ module.exports = function (config) {
       const testName = replicateTestToFileName(originalTestName)
       const featureName = replicateTestToFileName(originalFeatureName)
 
-      output.print(`HTML Reporter: Original test title: "${originalTestName}"`)
-      output.print(`HTML Reporter: CodeceptJS filename: "${testName}"`)
+      output.debug(`HTML Reporter: Original test title: "${originalTestName}"`)
+      output.debug(`HTML Reporter: CodeceptJS filename: "${testName}"`)
 
       // Generate possible screenshot names based on CodeceptJS patterns
       const possibleNames = [
@@ -567,19 +665,19 @@ module.exports = function (config) {
         'failure.jpg',
       ]
 
-      output.print(`HTML Reporter: Checking ${possibleNames.length} possible screenshot names for "${testName}"`)
+      output.debug(`HTML Reporter: Checking ${possibleNames.length} possible screenshot names for "${testName}"`)
 
       // Search for screenshots in possible directories
       for (const dir of possibleDirs) {
-        output.print(`HTML Reporter: Checking directory: ${dir}`)
+        output.debug(`HTML Reporter: Checking directory: ${dir}`)
         if (!fs.existsSync(dir)) {
-          output.print(`HTML Reporter: Directory does not exist: ${dir}`)
+          output.debug(`HTML Reporter: Directory does not exist: ${dir}`)
           continue
         }
 
         try {
           const files = fs.readdirSync(dir)
-          output.print(`HTML Reporter: Found ${files.length} files in ${dir}`)
+          output.debug(`HTML Reporter: Found ${files.length} files in ${dir}`)
 
           // Look for exact matches first
           for (const name of possibleNames) {
@@ -587,7 +685,7 @@ module.exports = function (config) {
               const fullPath = path.join(dir, name)
               if (!screenshots.includes(fullPath)) {
                 screenshots.push(fullPath)
-                output.print(`HTML Reporter: Found screenshot: ${fullPath}`)
+                output.debug(`HTML Reporter: Found screenshot: ${fullPath}`)
               }
             }
           }
@@ -618,16 +716,16 @@ module.exports = function (config) {
             const fullPath = path.join(dir, file)
             if (!screenshots.includes(fullPath)) {
               screenshots.push(fullPath)
-              output.print(`HTML Reporter: Found related screenshot: ${fullPath}`)
+              output.debug(`HTML Reporter: Found related screenshot: ${fullPath}`)
             }
           }
         } catch (error) {
           // Ignore directory read errors
-          output.print(`HTML Reporter: Could not read directory ${dir}: ${error.message}`)
+          output.debug(`HTML Reporter: Could not read directory ${dir}: ${error.message}`)
         }
       }
     } catch (error) {
-      output.print(`HTML Reporter: Error collecting screenshots: ${error.message}`)
+      output.debug(`HTML Reporter: Error collecting screenshots: ${error.message}`)
     }
 
     return screenshots
@@ -654,7 +752,7 @@ module.exports = function (config) {
     const statsPath = path.resolve(reportDir, config.exportStatsPath)
 
     const exportData = {
-      timestamp: data.endTime.toISOString(),
+      timestamp: data.endTime, // Already an ISO string
       duration: data.duration,
       stats: data.stats,
       retries: data.retries,
@@ -698,7 +796,7 @@ module.exports = function (config) {
 
     // Add current run to history
     history.unshift({
-      timestamp: data.endTime.toISOString(),
+      timestamp: data.endTime, // Already an ISO string
       duration: data.duration,
       stats: data.stats,
       retries: data.retries.length,
@@ -725,11 +823,11 @@ module.exports = function (config) {
     const jsonFiles = fs.readdirSync(reportDir).filter(file => file.startsWith('worker-') && file.endsWith('-results.json'))
 
     if (jsonFiles.length === 0) {
-      output.print('HTML Reporter: No worker JSON results found to consolidate')
+      output.debug('HTML Reporter: No worker JSON results found to consolidate')
       return
     }
 
-    output.print(`HTML Reporter: Found ${jsonFiles.length} worker JSON files to consolidate`)
+    output.debug(`HTML Reporter: Found ${jsonFiles.length} worker JSON files to consolidate`)
 
     // Initialize consolidated data structure
     const consolidatedData = {
@@ -758,6 +856,10 @@ module.exports = function (config) {
         try {
           const workerData = JSON.parse(fs.readFileSync(jsonPath, 'utf8'))
 
+          // Extract worker ID from filename (e.g., "worker-0-results.json" -> 0)
+          const workerIdMatch = jsonFile.match(/worker-(\d+)-results\.json/)
+          const workerIndex = workerIdMatch ? parseInt(workerIdMatch[1], 10) : undefined
+
           // Merge stats
           if (workerData.stats) {
             consolidatedData.stats.passes += workerData.stats.passes || 0
@@ -769,8 +871,14 @@ module.exports = function (config) {
             consolidatedData.stats.failedHooks += workerData.stats.failedHooks || 0
           }
 
-          // Merge tests and failures
-          if (workerData.tests) consolidatedData.tests.push(...workerData.tests)
+          // Merge tests and add worker index
+          if (workerData.tests) {
+            const testsWithWorkerIndex = workerData.tests.map(test => ({
+              ...test,
+              workerIndex: workerIndex,
+            }))
+            consolidatedData.tests.push(...testsWithWorkerIndex)
+          }
           if (workerData.failures) consolidatedData.failures.push(...workerData.failures)
           if (workerData.hooks) consolidatedData.hooks.push(...workerData.hooks)
           if (workerData.retries) consolidatedData.retries.push(...workerData.retries)
@@ -821,9 +929,9 @@ module.exports = function (config) {
         saveTestHistory(consolidatedData, config)
       }
 
-      output.print(`HTML Reporter: Successfully consolidated ${jsonFiles.length} worker reports`)
+      output.debug(`HTML Reporter: Successfully consolidated ${jsonFiles.length} worker reports`)
     } catch (error) {
-      output.print(`HTML Reporter: Failed to consolidate worker reports: ${error.message}`)
+      output.debug(`HTML Reporter: Failed to consolidate worker reports: ${error.message}`)
     }
   }
 
@@ -844,7 +952,7 @@ module.exports = function (config) {
 
       // Add current run to history for chart display (before saving to file)
       const currentRun = {
-        timestamp: data.endTime.toISOString(),
+        timestamp: data.endTime, // Already an ISO string
         duration: data.duration,
         stats: data.stats,
         retries: data.retries.length,
@@ -863,7 +971,7 @@ module.exports = function (config) {
 
     const html = template(getHtmlTemplate(), {
       title: `CodeceptJS Test Report v${Codecept.version()}`,
-      timestamp: data.endTime.toISOString(),
+      timestamp: data.endTime, // Already an ISO string
       duration: formatDuration(data.duration),
       stats: JSON.stringify(data.stats),
       history: JSON.stringify(history),
@@ -887,6 +995,10 @@ module.exports = function (config) {
     const failed = stats.failures || 0
     const pending = stats.pending || 0
     const total = stats.tests || 0
+    const flaky = stats.flaky || 0
+    const artifactCount = stats.artifacts || 0
+    const passRate = total > 0 ? ((passed / total) * 100).toFixed(1) : '0.0'
+    const failRate = total > 0 ? ((failed / total) * 100).toFixed(1) : '0.0'
 
     return `
       <div class="stats-cards">
@@ -903,9 +1015,21 @@ module.exports = function (config) {
           <span class="stat-number">${failed}</span>
         </div>
         <div class="stat-card pending">
-          <h3>Pending</h3>
+          <h3>Skipped</h3>
           <span class="stat-number">${pending}</span>
         </div>
+        <div class="stat-card flaky">
+          <h3>Flaky</h3>
+          <span class="stat-number">${flaky}</span>
+        </div>
+        <div class="stat-card artifacts">
+          <h3>Artifacts</h3>
+          <span class="stat-number">${artifactCount}</span>
+        </div>
+      </div>
+      <div class="metrics-summary">
+        <span>Pass Rate: <strong>${passRate}%</strong></span>
+        <span>Fail Rate: <strong>${failRate}%</strong></span>
       </div>
       <div class="pie-chart-container">
         <canvas id="statsChart" width="300" height="300"></canvas>
@@ -926,47 +1050,73 @@ module.exports = function (config) {
       return '<p>No tests found.</p>'
     }
 
-    return tests
-      .map(test => {
-        const statusClass = test.state || 'unknown'
-        const feature = test.isBdd && test.feature ? test.feature.name : test.parent?.title || 'Unknown Feature'
-        const steps = config.showSteps && test.steps ? (test.isBdd ? generateBddStepsHtml(test.steps) : generateStepsHtml(test.steps)) : ''
-        const featureDetails = test.isBdd && test.feature ? generateBddFeatureHtml(test.feature) : ''
-        const hooks = test.hooks && test.hooks.length > 0 ? generateHooksHtml(test.hooks) : ''
-        const artifacts = config.includeArtifacts && test.artifacts ? generateArtifactsHtml(test.artifacts, test.state === 'failed') : ''
-        const metadata = config.showMetadata && (test.meta || test.opts) ? generateMetadataHtml(test.meta, test.opts) : ''
-        const tags = config.showTags && test.tags && test.tags.length > 0 ? generateTagsHtml(test.tags) : ''
-        const retries = config.showRetries && test.retryAttempts > 0 ? generateTestRetryHtml(test.retryAttempts) : ''
-        const notes = test.notes && test.notes.length > 0 ? generateNotesHtml(test.notes) : ''
+    // Group tests by feature name
+    const grouped = {}
+    tests.forEach(test => {
+      const feature = test.isBdd && test.feature ? test.feature.name : test.parentTitle || test.suiteTitle || test.parent?.title || test.suite?.title || 'Unknown Feature'
+      if (!grouped[feature]) grouped[feature] = []
+      grouped[feature].push(test)
+    })
 
+    // Render each feature section
+    return Object.entries(grouped)
+      .map(([feature, tests]) => {
+        const featureId = feature.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()
         return `
-        <div class="test-item ${statusClass}${test.isBdd ? ' bdd-test' : ''}" id="test-${test.id}" data-feature="${escapeHtml(feature)}" data-status="${statusClass}" data-tags="${(test.tags || []).join(',')}" data-retries="${test.retryAttempts || 0}" data-type="${test.isBdd ? 'bdd' : 'regular'}">
-          <div class="test-header" onclick="toggleTestDetails('test-${test.id}')">
-            <span class="test-status ${statusClass}">●</span>
-            <div class="test-info">
-              <h3 class="test-title">${test.isBdd ? `Scenario: ${test.title}` : test.title}</h3>
-              <div class="test-meta-line">
-                <span class="test-feature">${test.isBdd ? 'Feature: ' : ''}${feature}</span>
-                ${test.uid ? `<span class="test-uid">${test.uid}</span>` : ''}
-                <span class="test-duration">${formatDuration(test.duration)}</span>
-                ${test.retryAttempts > 0 ? `<span class="retry-badge">${test.retryAttempts} retries</span>` : ''}
-                ${test.isBdd ? '<span class="bdd-badge">Gherkin</span>' : ''}
-              </div>
+          <section class="feature-group">
+            <h3 class="feature-group-title" onclick="toggleFeatureGroup('${featureId}')">
+              ${escapeHtml(feature)}
+              <span class="toggle-icon">▼</span>
+            </h3>
+            <div class="feature-tests" id="feature-${featureId}">
+              ${tests
+                .map(test => {
+                  const statusClass = test.state || 'unknown'
+                  const steps = config.showSteps && test.steps ? (test.isBdd ? generateBddStepsHtml(test.steps) : generateStepsHtml(test.steps)) : ''
+                  const featureDetails = test.isBdd && test.feature ? generateBddFeatureHtml(test.feature) : ''
+                  const hooks = test.hooks && test.hooks.length > 0 ? generateHooksHtml(test.hooks) : ''
+                  const artifacts = config.includeArtifacts && test.artifacts ? generateArtifactsHtml(test.artifacts, test.state === 'failed') : ''
+                  const metadata = config.showMetadata && (test.meta || test.opts) ? generateMetadataHtml(test.meta, test.opts) : ''
+                  const tags = config.showTags && test.tags && test.tags.length > 0 ? generateTagsHtml(test.tags) : ''
+                  const retries = config.showRetries && test.retryAttempts > 0 ? generateTestRetryHtml(test.retryAttempts, test.state) : ''
+                  const notes = test.notes && test.notes.length > 0 ? generateNotesHtml(test.notes) : ''
+
+                  // Worker badge - show worker index if test has worker info
+                  const workerBadge = test.workerIndex !== undefined ? `<span class="worker-badge worker-${test.workerIndex}">Worker ${test.workerIndex}</span>` : ''
+
+                  return `
+                  <div class="test-item ${statusClass}${test.isBdd ? ' bdd-test' : ''}" id="test-${test.id}" data-feature="${escapeHtml(feature)}" data-status="${statusClass}" data-tags="${(test.tags || []).join(',')}" data-retries="${test.retryAttempts || 0}" data-type="${test.isBdd ? 'bdd' : 'regular'}">
+                    <div class="test-header" onclick="toggleTestDetails('test-${test.id}')">
+                      <span class="test-status ${statusClass}">●</span>
+                      <div class="test-info">
+                        <h3 class="test-title">${test.isBdd ? `Scenario: ${test.title}` : test.title}</h3>
+                        <div class="test-meta-line">
+                          ${workerBadge}
+                          ${test.uid ? `<span class="test-uid">${test.uid}</span>` : ''}
+                          <span class="test-duration">${formatDuration(test.duration)}</span>
+                          ${test.retryAttempts > 0 ? `<span class="retry-badge">${test.retryAttempts} retries</span>` : ''}
+                          ${test.isBdd ? '<span class="bdd-badge">Gherkin</span>' : ''}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="test-details" id="details-test-${test.id}">
+                      ${test.err ? `<div class="error-message"><pre>${escapeHtml(getErrorMessage(test))}</pre></div>` : ''}
+                      ${featureDetails}
+                      ${tags}
+                      ${metadata}
+                      ${retries}
+                      ${notes}
+                      ${hooks}
+                      ${steps}
+                      ${artifacts}
+                    </div>
+                  </div>
+                `
+                })
+                .join('')}
             </div>
-          </div>
-          <div class="test-details" id="details-test-${test.id}">
-            ${test.err ? `<div class="error-message"><pre>${escapeHtml(getErrorMessage(test))}</pre></div>` : ''}
-            ${featureDetails}
-            ${tags}
-            ${metadata}
-            ${retries}
-            ${notes}
-            ${hooks}
-            ${steps}
-            ${artifacts}
-          </div>
-        </div>
-      `
+          </section>
+        `
       })
       .join('')
   }
@@ -1056,13 +1206,19 @@ module.exports = function (config) {
         const statusClass = hook.status || 'unknown'
         const hookType = hook.type || 'hook'
         const hookTitle = hook.title || `${hookType} hook`
+        const location = hook.location ? `<div class="hook-location">Location: ${escapeHtml(hook.location)}</div>` : ''
+        const context = hook.context ? `<div class="hook-context">Test: ${escapeHtml(hook.context.testTitle || 'N/A')}, Suite: ${escapeHtml(hook.context.suiteTitle || 'N/A')}</div>` : ''
 
         return `
         <div class="hook-item ${statusClass}">
           <span class="hook-status ${statusClass}">●</span>
-          <span class="hook-title">${hookType}: ${hookTitle}</span>
-          <span class="hook-duration">${formatDuration(hook.duration)}</span>
-          ${hook.error ? `<div class="hook-error">${escapeHtml(hook.error)}</div>` : ''}
+          <div class="hook-content">
+            <span class="hook-title">${hookType}: ${hookTitle}</span>
+            <span class="hook-duration">${formatDuration(hook.duration)}</span>
+            ${location}
+            ${context}
+            ${hook.error ? `<div class="hook-error">${escapeHtml(hook.error)}</div>` : ''}
+          </div>
         </div>
       `
       })
@@ -1122,12 +1278,21 @@ module.exports = function (config) {
     `
   }
 
-  function generateTestRetryHtml(retryAttempts) {
+  function generateTestRetryHtml(retryAttempts, testState) {
+    // Enhanced retry history display showing whether test eventually passed or failed
+    const statusBadge = testState === 'passed' ? '<span class="retry-status-badge passed">✓ Eventually Passed</span>' : '<span class="retry-status-badge failed">✗ Eventually Failed</span>'
+
     return `
       <div class="retry-section">
-        <h4>Retry Information:</h4>
+        <h4>Retry History:</h4>
         <div class="retry-info">
-          <span class="retry-count">Total retry attempts: <strong>${retryAttempts}</strong></span>
+          <div class="retry-summary">
+            <span class="retry-count">Total retry attempts: <strong>${retryAttempts}</strong></span>
+            ${statusBadge}
+          </div>
+          <div class="retry-description">
+            This test was retried <strong>${retryAttempts}</strong> time${retryAttempts > 1 ? 's' : ''} before ${testState === 'passed' ? 'passing' : 'failing'}.
+          </div>
         </div>
       </div>
     `
@@ -1135,19 +1300,19 @@ module.exports = function (config) {
 
   function generateArtifactsHtml(artifacts, isFailedTest = false) {
     if (!artifacts || artifacts.length === 0) {
-      output.print(`HTML Reporter: No artifacts found for test`)
+      output.debug(`HTML Reporter: No artifacts found for test`)
       return ''
     }
 
-    output.print(`HTML Reporter: Processing ${artifacts.length} artifacts, isFailedTest: ${isFailedTest}`)
-    output.print(`HTML Reporter: Artifacts: ${JSON.stringify(artifacts)}`)
+    output.debug(`HTML Reporter: Processing ${artifacts.length} artifacts, isFailedTest: ${isFailedTest}`)
+    output.debug(`HTML Reporter: Artifacts: ${JSON.stringify(artifacts)}`)
 
     // Separate screenshots from other artifacts
     const screenshots = []
     const otherArtifacts = []
 
     artifacts.forEach(artifact => {
-      output.print(`HTML Reporter: Processing artifact: ${artifact} (type: ${typeof artifact})`)
+      output.debug(`HTML Reporter: Processing artifact: ${artifact} (type: ${typeof artifact})`)
 
       // Handle different artifact formats
       let artifactPath = artifact
@@ -1162,14 +1327,14 @@ module.exports = function (config) {
       // Check if it's a screenshot file
       if (typeof artifactPath === 'string' && artifactPath.match(/\.(png|jpg|jpeg|gif|webp|bmp|svg)$/i)) {
         screenshots.push(artifactPath)
-        output.print(`HTML Reporter: Found screenshot: ${artifactPath}`)
+        output.debug(`HTML Reporter: Found screenshot: ${artifactPath}`)
       } else {
         otherArtifacts.push(artifact)
-        output.print(`HTML Reporter: Found other artifact: ${artifact}`)
+        output.debug(`HTML Reporter: Found other artifact: ${artifact}`)
       }
     })
 
-    output.print(`HTML Reporter: Found ${screenshots.length} screenshots and ${otherArtifacts.length} other artifacts`)
+    output.debug(`HTML Reporter: Found ${screenshots.length} screenshots and ${otherArtifacts.length} other artifacts`)
 
     let artifactsHtml = ''
 
@@ -1198,7 +1363,7 @@ module.exports = function (config) {
             }
           }
 
-          output.print(`HTML Reporter: Screenshot ${filename} -> ${relativePath}`)
+          output.debug(`HTML Reporter: Screenshot ${filename} -> ${relativePath}`)
 
           return `
               <div class="screenshot-container">
@@ -1242,7 +1407,7 @@ module.exports = function (config) {
             }
           }
 
-          output.print(`HTML Reporter: Screenshot ${filename} -> ${relativePath}`)
+          output.debug(`HTML Reporter: Screenshot ${filename} -> ${relativePath}`)
           return `<img src="${relativePath}" alt="Screenshot" class="artifact-image" onclick="openImageModal(this.src)"/>`
         })
         .join('')
@@ -1373,6 +1538,30 @@ module.exports = function (config) {
 
   function escapeHtml(text) {
     if (!text) return ''
+    // Convert non-string values to strings before escaping
+    if (typeof text !== 'string') {
+      // Handle arrays by recursively flattening and joining with commas
+      if (Array.isArray(text)) {
+        // Recursive helper to flatten deeply nested arrays with depth limit to prevent stack overflow
+        const flattenArray = (arr, depth = 0, maxDepth = 100) => {
+          if (depth >= maxDepth) {
+            // Safety limit reached, return string representation
+            return String(arr)
+          }
+          return arr
+            .map(item => {
+              if (Array.isArray(item)) {
+                return flattenArray(item, depth + 1, maxDepth)
+              }
+              return String(item)
+            })
+            .join(', ')
+        }
+        text = flattenArray(text)
+      } else {
+        text = String(text)
+      }
+    }
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
   }
 
@@ -1488,8 +1677,12 @@ module.exports = function (config) {
     if (!systemInfo) return ''
 
     const formatInfo = (key, value) => {
+      // Handle array values (e.g., ['Node', '22.14.0', 'path'])
       if (Array.isArray(value) && value.length > 1) {
-        return `<div class="info-item"><span class="info-key">${key}:</span> <span class="info-value">${escapeHtml(value[1])}</span></div>`
+        // value[1] might be an array itself (e.g., edgeInfo: ['Edge', ['Chromium (140.0.3485.54)'], 'N/A'])
+        // escapeHtml now handles this, but we can also flatten it here for clarity
+        const displayValue = value[1]
+        return `<div class="info-item"><span class="info-key">${key}:</span> <span class="info-value">${escapeHtml(displayValue)}</span></div>`
       } else if (typeof value === 'string' && value !== 'N/A' && value !== 'undefined') {
         return `<div class="info-item"><span class="info-key">${key}:</span> <span class="info-value">${escapeHtml(value)}</span></div>`
       }
@@ -1531,32 +1724,48 @@ module.exports = function (config) {
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
-    <style>{{cssStyles}}</style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
+  <style>{{cssStyles}}</style>
 </head>
 <body>
-    <header class="report-header">
-        <h1>{{title}}</h1>
-        <div class="report-meta">
-            <span>Generated: {{timestamp}}</span>
-            <span>Duration: {{duration}}</span>
-        </div>
-    </header>
+  <header class="report-header">
+    <h1>{{title}}</h1>
+    <div class="report-meta">
+      <span>Generated: {{timestamp}}</span>
+      <span>Duration: {{duration}}</span>
+    </div>
+  </header>
 
-    <main class="report-content">
-        {{systemInfoHtml}}
+  <main class="report-content">
+    {{systemInfoHtml}}
 
-        <section class="stats-section">
-            <h2>Test Statistics</h2>
-            {{statsHtml}}
+    <section class="stats-section">
+      <h2>Test Statistics</h2>
+      {{statsHtml}}
+        </section>
+
+        <section class="test-performance-section">
+            <h2>Test Performance Analysis</h2>
+            <div class="performance-container">
+                <div class="performance-group">
+                    <h3>⏱️ Longest Running Tests</h3>
+                    <div id="longestTests" class="performance-list"></div>
+                </div>
+                <div class="performance-group">
+                    <h3>⚡ Fastest Tests</h3>
+                    <div id="fastestTests" class="performance-list"></div>
+                </div>
+            </div>
         </section>
 
         <section class="history-section" style="display: {{showHistory}};">
-            <h2>Test History</h2>
+            <h2>Test Execution History</h2>
+            <div class="history-stats" id="historyStats"></div>
+            <div class="history-timeline" id="historyTimeline"></div>
             <div class="history-chart-container">
-                <canvas id="historyChart" width="800" height="300"></canvas>
+                <canvas id="historyChart" width="1600" height="600"></canvas>
             </div>
         </section>
 
@@ -1607,10 +1816,10 @@ module.exports = function (config) {
             </div>
         </section>
 
-        <section class="retries-section" style="display: {{showRetries}};">
-            <h2>Test Retries</h2>
+        <section class="retries-section" style="display: none;">
+            <h2>Test Retries (Moved to Test Details)</h2>
             <div class="retries-container">
-                {{retriesHtml}}
+                <p>Retry information is now shown in each test's details section.</p>
             </div>
         </section>
 
@@ -1675,7 +1884,7 @@ body {
     padding: 0 1rem;
 }
 
-.stats-section, .tests-section, .retries-section, .filters-section, .history-section, .system-info-section {
+.stats-section, .tests-section, .retries-section, .filters-section, .history-section, .system-info-section, .test-performance-section {
     background: white;
     margin-bottom: 2rem;
     border-radius: 8px;
@@ -1683,7 +1892,7 @@ body {
     overflow: hidden;
 }
 
-.stats-section h2, .tests-section h2, .retries-section h2, .filters-section h2, .history-section h2 {
+.stats-section h2, .tests-section h2, .retries-section h2, .filters-section h2, .history-section h2, .test-performance-section h2 {
     background: #34495e;
     color: white;
     padding: 1rem;
@@ -1710,6 +1919,23 @@ body {
 .stat-card.passed { background: #27ae60; }
 .stat-card.failed { background: #e74c3c; }
 .stat-card.pending { background: #f39c12; }
+.stat-card.flaky { background: #e67e22; }
+.stat-card.artifacts { background: #9b59b6; }
+
+.metrics-summary {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: 6px;
+    margin: 1rem 0;
+    font-size: 1rem;
+}
+
+.metrics-summary span {
+    color: #34495e;
+}
 
 .stat-card h3 {
     font-size: 0.9rem;
@@ -1737,6 +1963,54 @@ body {
     height: auto;
 }
 
+.feature-group {
+    margin-bottom: 2.5rem;
+    border: 2px solid #3498db;
+    border-radius: 12px;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.feature-group-title {
+    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+    color: white;
+    padding: 1.2rem 1.5rem;
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    user-select: none;
+}
+
+.feature-group-title:hover {
+    background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
+}
+
+.feature-group-title .toggle-icon {
+    font-size: 1.2rem;
+    transition: transform 0.3s ease;
+}
+
+.feature-group-title .toggle-icon.rotated {
+    transform: rotate(180deg);
+}
+
+.feature-tests {
+    padding: 0;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+}
+
+.feature-tests.collapsed {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+}
+
 .test-item {
     border-bottom: 1px solid #eee;
     margin: 0;
@@ -1814,9 +2088,64 @@ body {
     font-weight: bold;
 }
 
+.worker-badge {
+    background: #16a085;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: bold;
+}
+
+/* Different colors for each worker index */
+.worker-badge.worker-0 {
+    background: #3498db; /* Blue */
+}
+
+.worker-badge.worker-1 {
+    background: #e74c3c; /* Red */
+}
+
+.worker-badge.worker-2 {
+    background: #2ecc71; /* Green */
+}
+
+.worker-badge.worker-3 {
+    background: #f39c12; /* Orange */
+}
+
+.worker-badge.worker-4 {
+    background: #9b59b6; /* Purple */
+}
+
+.worker-badge.worker-5 {
+    background: #1abc9c; /* Turquoise */
+}
+
+.worker-badge.worker-6 {
+    background: #e67e22; /* Carrot */
+}
+
+.worker-badge.worker-7 {
+    background: #34495e; /* Dark Blue-Gray */
+}
+
+.worker-badge.worker-8 {
+    background: #16a085; /* Teal */
+}
+
+.worker-badge.worker-9 {
+    background: #c0392b; /* Dark Red */
+}
+
 .test-duration {
-    font-size: 0.8rem;
-    color: #7f8c8d;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #2c3e50;
+    background: #ecf0f1;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Courier New', monospace;
 }
 
 .test-details {
@@ -1854,27 +2183,39 @@ body {
 
 .hook-item {
     display: flex;
-    align-items: center;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #ecf0f1;
+    align-items: flex-start;
+    padding: 0.75rem;
+    border: 1px solid #ecf0f1;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+    background: #fafafa;
 }
 
 .hook-item:last-child {
-    border-bottom: none;
+    margin-bottom: 0;
 }
 
 .hook-status {
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
+    flex-shrink: 0;
+    margin-top: 0.2rem;
 }
 
 .hook-status.passed { color: #27ae60; }
 .hook-status.failed { color: #e74c3c; }
 
-.hook-title {
+.hook-content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.hook-title {
     font-family: 'Courier New', monospace;
     font-size: 0.9rem;
     font-weight: bold;
+    color: #2c3e50;
 }
 
 .hook-duration {
@@ -1882,8 +2223,13 @@ body {
     color: #7f8c8d;
 }
 
+.hook-location, .hook-context {
+    font-size: 0.8rem;
+    color: #6c757d;
+    font-style: italic;
+}
+
 .hook-error {
-    width: 100%;
     margin-top: 0.5rem;
     padding: 0.5rem;
     background: #fee;
@@ -2172,11 +2518,22 @@ body {
 }
 
 /* Retry Information */
+.retry-section {
+    margin-top: 1rem;
+}
+
 .retry-info {
-    padding: 0.5rem;
-    background: #fef9e7;
+    padding: 1rem;
+    background: #fff9e6;
     border-radius: 4px;
-    border-left: 3px solid #f39c12;
+    border-left: 4px solid #f39c12;
+}
+
+.retry-summary {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
 }
 
 .retry-count {
@@ -2184,6 +2541,29 @@ body {
     font-weight: 500;
 }
 
+.retry-status-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    font-weight: bold;
+}
+
+.retry-status-badge.passed {
+    background: #27ae60;
+    color: white;
+}
+
+.retry-status-badge.failed {
+    background: #e74c3c;
+    color: white;
+}
+
+.retry-description {
+    font-size: 0.9rem;
+    color: #6c757d;
+    font-style: italic;
+}
+
 /* Retries Section */
 .retry-item {
     padding: 1rem;
@@ -2229,6 +2609,92 @@ body {
 }
 
 /* History Chart */
+.history-stats {
+    padding: 1.5rem;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.history-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.history-stat-item {
+    background: white;
+    padding: 1rem;
+    border-radius: 6px;
+    border-left: 4px solid #3498db;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.history-stat-item h4 {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.9rem;
+    color: #7f8c8d;
+    text-transform: uppercase;
+}
+
+.history-stat-item .value {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #2c3e50;
+}
+
+.history-timeline {
+    padding: 1.5rem;
+    background: white;
+}
+
+.timeline-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem;
+    border-left: 3px solid #3498db;
+    margin-left: 1rem;
+    margin-bottom: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 0 6px 6px 0;
+    transition: all 0.2s;
+}
+
+.timeline-item:hover {
+    background: #e9ecef;
+    transform: translateX(4px);
+}
+
+.timeline-time {
+    min-width: 150px;
+    font-weight: 600;
+    color: #2c3e50;
+    font-family: 'Courier New', monospace;
+}
+
+.timeline-result {
+    flex: 1;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.timeline-badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.timeline-badge.success {
+    background: #d4edda;
+    color: #155724;
+}
+
+.timeline-badge.failure {
+    background: #f8d7da;
+    color: #721c24;
+}
+
 .history-chart-container {
     padding: 2rem 1rem;
     display: flex;
@@ -2240,6 +2706,87 @@ body {
     height: auto;
 }
 
+/* Test Performance Section */
+.performance-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 2rem;
+    padding: 1.5rem;
+}
+
+.performance-group h3 {
+    margin: 0 0 1rem 0;
+    color: #2c3e50;
+    font-size: 1.1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #3498db;
+}
+
+.performance-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.performance-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: #f8f9fa;
+    border-radius: 6px;
+    border-left: 4px solid #3498db;
+    transition: all 0.2s;
+}
+
+.performance-item:hover {
+    background: #e9ecef;
+    transform: translateX(4px);
+}
+
+.performance-item:nth-child(1) .performance-rank {
+    background: #f39c12;
+    color: white;
+}
+
+.performance-item:nth-child(2) .performance-rank {
+    background: #95a5a6;
+    color: white;
+}
+
+.performance-item:nth-child(3) .performance-rank {
+    background: #cd7f32;
+    color: white;
+}
+
+.performance-rank {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: #3498db;
+    color: white;
+    border-radius: 50%;
+    font-weight: bold;
+    font-size: 0.9rem;
+    margin-right: 1rem;
+    flex-shrink: 0;
+}
+
+.performance-name {
+    flex: 1;
+    font-weight: 500;
+    color: #2c3e50;
+}
+
+.performance-duration {
+    font-weight: 600;
+    color: #7f8c8d;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+}
+
 /* Hidden items for filtering */
 .test-item.filtered-out {
     display: none !important;
@@ -2457,6 +3004,25 @@ body {
 
   function getJsScripts() {
     return `
+// Go to Top button
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function toggleFeatureGroup(featureId) {
+    const featureTests = document.getElementById('feature-' + featureId);
+    const titleElement = featureTests.previousElementSibling;
+    const icon = titleElement.querySelector('.toggle-icon');
+    
+    if (featureTests.classList.contains('collapsed')) {
+        featureTests.classList.remove('collapsed');
+        icon.classList.remove('rotated');
+    } else {
+        featureTests.classList.add('collapsed');
+        icon.classList.add('rotated');
+    }
+}
+
 function toggleTestDetails(testId) {
     const details = document.getElementById('details-' + testId);
     if (details.style.display === 'none' || details.style.display === '') {
@@ -2939,9 +3505,29 @@ function drawHistoryChart() {
 // Initialize charts and filters
 document.addEventListener('DOMContentLoaded', function() {
     
-    // Draw charts
-    drawPieChart();
-    drawHistoryChart();
+  // Draw charts
+  drawPieChart();
+  drawHistoryChart();
+  renderTestPerformance();
+  renderHistoryTimeline();
+  
+  // Add Go to Top button
+  const goTopBtn = document.createElement('button');
+  goTopBtn.innerText = '↑ Top';
+  goTopBtn.id = 'goTopBtn';
+  goTopBtn.style.position = 'fixed';
+  goTopBtn.style.bottom = '30px';
+  goTopBtn.style.right = '30px';
+  goTopBtn.style.zIndex = '9999';
+  goTopBtn.style.padding = '12px 18px';
+  goTopBtn.style.borderRadius = '50%';
+  goTopBtn.style.background = '#27ae60';
+  goTopBtn.style.color = '#fff';
+  goTopBtn.style.fontSize = '20px';
+  goTopBtn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
+  goTopBtn.style.cursor = 'pointer';
+  goTopBtn.onclick = scrollToTop;
+  document.body.appendChild(goTopBtn);
     
     // Set up filter event listeners
     document.getElementById('statusFilter').addEventListener('change', applyFilters);
@@ -2950,6 +3536,141 @@ document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('retryFilter').addEventListener('change', applyFilters);
     document.getElementById('typeFilter').addEventListener('change', applyFilters);
 });
+
+// Render test performance analysis
+function renderTestPerformance() {
+    const tests = Array.from(document.querySelectorAll('.test-item'));
+    const testsWithDuration = tests.map(testEl => {
+        const title = testEl.querySelector('.test-title')?.textContent || 'Unknown';
+        const durationText = testEl.querySelector('.test-duration')?.textContent || '0ms';
+        const durationMs = parseDuration(durationText);
+        const status = testEl.dataset.status;
+        return { title, duration: durationMs, durationText, status };
+    }); // Don't filter out 0ms tests
+    
+    // Sort by duration
+    const longest = [...testsWithDuration].sort((a, b) => b.duration - a.duration).slice(0, 5);
+    const fastest = [...testsWithDuration].sort((a, b) => a.duration - b.duration).slice(0, 5);
+    
+    // Render longest tests
+    const longestContainer = document.getElementById('longestTests');
+    if (longestContainer && longest.length > 0) {
+        longestContainer.innerHTML = longest.map((test, index) => \`
+            <div class="performance-item">
+                <span class="performance-rank">\${index + 1}</span>
+                <span class="performance-name" title="\${test.title}">\${test.title.length > 60 ? test.title.substring(0, 60) + '...' : test.title}</span>
+                <span class="performance-duration">\${test.durationText}</span>
+            </div>
+        \`).join('');
+    } else if (longestContainer) {
+        longestContainer.innerHTML = '<p style="color: #7f8c8d; padding: 1rem;">No test data available</p>';
+    }
+    
+    // Render fastest tests
+    const fastestContainer = document.getElementById('fastestTests');
+    if (fastestContainer && fastest.length > 0) {
+        fastestContainer.innerHTML = fastest.map((test, index) => \`
+            <div class="performance-item">
+                <span class="performance-rank">\${index + 1}</span>
+                <span class="performance-name" title="\${test.title}">\${test.title.length > 60 ? test.title.substring(0, 60) + '...' : test.title}</span>
+                <span class="performance-duration">\${test.durationText}</span>
+            </div>
+        \`).join('');
+    } else if (fastestContainer) {
+        fastestContainer.innerHTML = '<p style="color: #7f8c8d; padding: 1rem;">No test data available</p>';
+    }
+}
+
+// Render history timeline
+function renderHistoryTimeline() {
+    if (!window.testData || !window.testData.history || window.testData.history.length === 0) {
+        return;
+    }
+    
+    const history = window.testData.history.slice().reverse(); // Most recent last
+    
+    // Render stats
+    const statsContainer = document.getElementById('historyStats');
+    if (statsContainer) {
+        const totalRuns = history.length;
+        const avgDuration = history.reduce((sum, run) => sum + (run.duration || 0), 0) / totalRuns;
+        const avgTests = Math.round(history.reduce((sum, run) => sum + (run.stats.tests || 0), 0) / totalRuns);
+        const avgPassRate = history.reduce((sum, run) => {
+            const total = run.stats.tests || 0;
+            const passed = run.stats.passes || 0;
+            return sum + (total > 0 ? (passed / total) * 100 : 0);
+        }, 0) / totalRuns;
+        
+        statsContainer.innerHTML = \`
+            <div class="history-stats-grid">
+                <div class="history-stat-item">
+                    <h4>Total Runs</h4>
+                    <div class="value">\${totalRuns}</div>
+                </div>
+                <div class="history-stat-item">
+                    <h4>Avg Duration</h4>
+                    <div class="value">\${formatDuration(avgDuration)}</div>
+                </div>
+                <div class="history-stat-item">
+                    <h4>Avg Tests</h4>
+                    <div class="value">\${avgTests}</div>
+                </div>
+                <div class="history-stat-item">
+                    <h4>Avg Pass Rate</h4>
+                    <div class="value">\${avgPassRate.toFixed(1)}%</div>
+                </div>
+            </div>
+        \`;
+    }
+    
+    // Render timeline
+    const timelineContainer = document.getElementById('historyTimeline');
+    if (timelineContainer) {
+        const recentHistory = history.slice(-10).reverse(); // Last 10 runs, most recent first
+        timelineContainer.innerHTML = '<h3 style="margin: 0 0 1rem 0; color: #2c3e50;">Recent Execution Timeline</h3>' +
+            recentHistory.map(run => {
+                const timestamp = new Date(run.timestamp);
+                const timeStr = timestamp.toLocaleString();
+                const total = run.stats.tests || 0;
+                const passed = run.stats.passes || 0;
+                const failed = run.stats.failures || 0;
+                const badgeClass = failed > 0 ? 'failure' : 'success';
+                const badgeText = failed > 0 ? \`\${failed} Failed\` : \`All Passed\`;
+                
+                return \`
+                    <div class="timeline-item">
+                        <div class="timeline-time">\${timeStr}</div>
+                        <div class="timeline-result">
+                            <span class="timeline-badge \${badgeClass}">\${badgeText}</span>
+                            <span>\${passed}/\${total} passed</span>
+                            <span>·</span>
+                            <span>\${formatDuration(run.duration || 0)}</span>
+                        </div>
+                    </div>
+                \`;
+            }).join('');
+    }
+}
+
+// Helper to parse duration text to milliseconds
+function parseDuration(durationText) {
+    if (!durationText) return 0;
+    const match = durationText.match(/(\\d+(?:\\.\\d+)?)(ms|s|m)/);
+    if (!match) return 0;
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    if (unit === 'ms') return value;
+    if (unit === 's') return value * 1000;
+    if (unit === 'm') return value * 60000;
+    return 0;
+}
+
+// Helper to format duration
+function formatDuration(ms) {
+    if (ms < 1000) return Math.round(ms) + 'ms';
+    if (ms < 60000) return (ms / 1000).toFixed(2) + 's';
+    return (ms / 60000).toFixed(2) + 'm';
+}
     `
   }
 }