codeceptjs 3.7.6-beta.4 → 4.0.0-beta.10.esm-aria

package/lib/plugin/htmlReporter.js

@@ -2,17 +2,17 @@
 // 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')
-const crypto = require('crypto')
-const { threadId } = require('worker_threads')
-const { template } = require('../utils')
-const { getMachineInfo } = require('../command/info')
-
-const event = require('../event')
-const output = require('../output')
-const Codecept = require('../codecept')
+import fs from 'fs'
+import path from 'path'
+import { mkdirp } from 'mkdirp'
+import crypto from 'crypto'
+import { threadId } from 'worker_threads'
+import { template } from '../utils.js'
+import { getMachineInfo } from '../command/info.js'
+
+import event from '../event.js'
+import output from '../output.js'
+import Codecept from '../codecept.js'
 
 const defaultConfig = {
   output: typeof global !== 'undefined' && global.output_dir ? global.output_dir : './output',
@@ -62,7 +62,7 @@ const defaultConfig = {
  * }
  * ```
  */
-module.exports = function (config) {
+export default function (config) {
   const options = { ...defaultConfig, ...config }
   /**
    * TypeScript: Explicitly type reportData arrays as any[] to avoid 'never' errors
@@ -183,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)
@@ -212,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)
@@ -373,8 +419,14 @@ 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
@@ -418,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
@@ -803,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
@@ -814,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)
@@ -932,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">
@@ -948,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>
@@ -971,49 +1050,73 @@ module.exports = function (config) {
       return '<p>No tests found.</p>'
     }
 
-    return tests
-      .map(test => {
-        const statusClass = test.state || 'unknown'
-        // Use preserved parent/suite titles (for worker mode) or fallback to direct access
-        const feature = test.isBdd && test.feature ? test.feature.name : test.parentTitle || test.suiteTitle || test.parent?.title || test.suite?.title || 'Unknown Feature'
-        // Always try to show steps if available, even for 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('')
   }
@@ -1103,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>
       `
       })
@@ -1169,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>
     `
@@ -1578,30 +1696,46 @@ 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="1600" height="600"></canvas>
             </div>
@@ -1654,10 +1788,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>
 
@@ -1722,7 +1856,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;
@@ -1730,7 +1864,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;
@@ -1757,6 +1891,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;
@@ -1784,6 +1935,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;
@@ -1861,9 +2060,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 {
@@ -1901,27 +2155,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 {
@@ -1929,8 +2195,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;
@@ -2219,11 +2490,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 {
@@ -2231,6 +2513,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;
@@ -2276,6 +2581,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;
@@ -2287,6 +2678,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;
@@ -2508,6 +2980,21 @@ body {
 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 === '') {
@@ -2993,6 +3480,9 @@ document.addEventListener('DOMContentLoaded', function() {
   // Draw charts
   drawPieChart();
   drawHistoryChart();
+  renderTestPerformance();
+  renderHistoryTimeline();
+  
   // Add Go to Top button
   const goTopBtn = document.createElement('button');
   goTopBtn.innerText = '↑ Top';
@@ -3018,6 +3508,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';
+}
     `
   }
 }