@capillarytech/cap-ui-dev-tools 1.0.0 → 1.3.0

package/src/capvision-recorder/core/ReportEnhancer.js

@@ -0,0 +1,755 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Report Enhancer Configuration
+ * @typedef {Object} ReportEnhancerConfig
+ * @property {boolean} [ENABLE_FEATURE] - Master feature flag - if false, replay enhancement is completely disabled (default: true)
+ * @property {string} [recordingsDir] - Directory where recordings are stored
+ * @property {string} [reportsDir] - Directory where HTML reports are located
+ * @property {string} [playerCSSPath] - Path to CapVision player CSS file
+ * @property {string} [playerScriptPath] - Path to CapVision player script file
+ * @property {string} [consoleReplayPluginPath] - Path to console replay plugin
+ * @property {string} [networkReplayPluginPath] - Path to network replay plugin
+ * @property {number} [playerWidth] - Player width in pixels
+ * @property {number} [playerHeight] - Player height in pixels
+ * @property {boolean} [autoPlay] - Auto-play recordings on load
+ * @property {string[]} [enabledClusters] - Only enhance for these clusters (empty = all)
+ * @property {string[]} [enabledModules] - Only enhance for these modules (empty = all)
+ */
+
+/**
+ * Recording Data Interface
+ * @typedef {Object} RecordingData
+ * @property {string} filename - Recording filename
+ * @property {Object} data - Recording data object
+ * @property {string} data.testName - Test name
+ * @property {number} data.recordingNumber - Recording number/sequence
+ * @property {string} data.timestamp - ISO timestamp
+ * @property {number} data.totalEvents - Total events in recording
+ * @property {Array} data.events - Array of CapVision events
+ */
+
+/**
+ * Default Configuration
+ * @type {ReportEnhancerConfig}
+ */
+const DEFAULT_ENHANCER_CONFIG = {
+  ENABLE_FEATURE: true,
+  recordingsDir: path.join(process.cwd(), 'reports', 'recordings'),
+  reportsDir: path.join(process.cwd(), 'reports', 'html-reports'),
+  playerCSSPath: path.join(__dirname, '../assets/capvision-player.css'),
+  playerScriptPath: path.join(__dirname, '../assets/capvision-player.min.js'),
+  consoleReplayPluginPath: path.join(__dirname, '../assets/capvision-plugins/console-replay.min.js'),
+  networkReplayPluginPath: path.join(__dirname, '../assets/capvision-plugins/network-replay.min.js'),
+  playerWidth: 800,
+  playerHeight: 460,
+  autoPlay: false,
+  enabledClusters: [],
+  enabledModules: []
+};
+
+/**
+ * Report Enhancer Class
+ * Enhances HTML reports with CapVision player functionality
+ * @class
+ */
+class ReportEnhancer {
+  /**
+   * Create a new Report Enhancer instance
+   * @param {ReportEnhancerConfig} [config={}] - Enhancer configuration
+   */
+  constructor(config = {}) {
+    /** @type {ReportEnhancerConfig} */
+    this.config = { ...DEFAULT_ENHANCER_CONFIG, ...config };
+  }
+
+  /**
+   * Update configuration
+   * @param {Partial<ReportEnhancerConfig>} config - Configuration updates
+   */
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+
+  /**
+   * Get current configuration
+   * @returns {ReportEnhancerConfig} Current configuration object
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+
+  /**
+   * Check if enhancement should be enabled for current cluster
+   * @private
+   * @param {string} [cluster] - Override cluster (defaults to process.env.cluster)
+   * @returns {boolean} True if enabled for cluster
+   */
+  isEnabledForCluster(cluster) {
+    if (this.config.enabledClusters.length === 0) {
+      return true;
+    }
+
+    const currentCluster = cluster || process.env.cluster;
+    return currentCluster ? this.config.enabledClusters.includes(currentCluster) : false;
+  }
+
+  /**
+   * Check if enhancement should be enabled for current module
+   * @private
+   * @param {string} [module] - Override module (defaults to process.env.module)
+   * @returns {boolean} True if enabled for module
+   */
+  isEnabledForModule(module) {
+    if (this.config.enabledModules.length === 0) {
+      return true;
+    }
+
+    const currentModule = module || process.env.module;
+    return currentModule ? this.config.enabledModules.includes(currentModule) : false;
+  }
+
+  /**
+   * Check if enhancement is enabled
+   * @param {string} [cluster] - Override cluster check
+   * @param {string} [module] - Override module check
+   * @returns {boolean} True if enhancement enabled
+   */
+  isEnhancementEnabled(cluster, module) {
+    return this.isEnabledForCluster(cluster) && this.isEnabledForModule(module);
+  }
+
+  /**
+   * Get available recordings
+   * @private
+   * @returns {RecordingData[]} Array of recording data objects
+   */
+  getAvailableRecordings() {
+    try {
+      if (!fs.existsSync(this.config.recordingsDir)) {
+        return [];
+      }
+
+      const files = fs.readdirSync(this.config.recordingsDir);
+      const recordingFiles = files.filter(file => file.endsWith('.json'));
+
+      const recordings = [];
+      for (const file of recordingFiles) {
+        try {
+          const filePath = path.join(this.config.recordingsDir, file);
+          const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+          recordings.push({
+            filename: file,
+            data: data
+          });
+        } catch (error) {
+          console.error(`🔴 Failed to read recording file ${file}:`, error.message);
+        }
+      }
+
+      return recordings;
+    } catch (error) {
+      console.error('🔴 Failed to get recordings:', error.message);
+      return [];
+    }
+  }
+
+  /**
+   * Generate logo HTML header with toggle button
+   * @private
+   * @returns {string} Logo HTML
+   */
+  generateLogoHTML() {
+    // Inline SVG logo - CapVision branded logo (icon size)
+    const logoSVG = `
+      <svg width="120" height="80" viewBox="0 0 1600 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle;">
+        <defs>
+          <!-- Neon gradient used for strokes/fills -->
+          <linearGradient id="neonGradient" x1="0" x2="1" y1="0" y2="1">
+            <stop offset="0%" stop-color="#00D4FF"/>
+            <stop offset="25%" stop-color="#3A7CFF"/>
+            <stop offset="50%" stop-color="#9A4BFF"/>
+            <stop offset="70%" stop-color="#FF4CA3"/>
+            <stop offset="85%" stop-color="#FF8E3C"/>
+            <stop offset="100%" stop-color="#FFD800"/>
+          </linearGradient>
+
+          <!-- Wordmark gradient (cool blue) -->
+          <linearGradient id="wordGradient" x1="0" x2="1">
+            <stop offset="0%" stop-color="#19C6FF"/>
+            <stop offset="100%" stop-color="#2EA6FF"/>
+          </linearGradient>
+
+          <!-- Soft inner shadow for icon fill -->
+          <linearGradient id="iconFill" x1="0" x2="1">
+            <stop offset="0%" stop-color="#061022" stop-opacity="0.0"/>
+            <stop offset="100%" stop-color="#061022" stop-opacity="0.08"/>
+          </linearGradient>
+
+          <!-- Stroke style for neon lines -->
+          <style type="text/css"><![CDATA[
+            .neon { stroke: url(#neonGradient); stroke-width:14; stroke-linecap:square; stroke-linejoin:miter; fill: none; }
+            .neon-thin { stroke: url(#neonGradient); stroke-width:8; stroke-linecap:square; stroke-linejoin:miter; fill: none; }
+            .eye-fill { fill: none; stroke: url(#neonGradient); stroke-width:12; stroke-linecap:square; stroke-linejoin:miter; }
+            .circuit { stroke: url(#neonGradient); stroke-width:10; stroke-linecap:square; fill: none; }
+            .accent-dot { fill: url(#neonGradient); }
+            .word { font-family: "Inter", "Montserrat", sans-serif; font-weight: 700; font-size:120px; fill: url(#wordGradient); letter-spacing: -2px; }
+            .bg-texture { opacity: 0.02; }
+          ]]></style>
+        </defs>
+
+        <!-- Dark background (keeps high contrast for presentation and dashboards) -->
+        <rect id="bg" x="0" y="0" width="1600" height="800" fill="#060719" />
+
+        <!-- subtle grid/texture (very faint) -->
+        <g class="bg-texture" transform="translate(0,0)">
+          <rect x="0" y="0" width="1600" height="800" fill="url(#iconFill)" />
+        </g>
+
+        <!-- LEFT ICON GROUP -->
+        <g id="icon" transform="translate(160,210) scale(1.4)">
+          <!-- robot-head-ish rounded rectangle -->
+          <rect x="0" y="0" rx="8" ry="8" width="220" height="150" class="neon" />
+
+          <!-- antenna -->
+          <line x1="110" y1="-30" x2="110" y2="0" class="neon-thin" />
+          <circle cx="110" cy="-36" r="12" class="accent-dot" />
+
+          <!-- small scan lines / UI fragments on head (to suggest vision/processing) -->
+          <path d="M170,30 h40" class="neon-thin" stroke-linecap="square" />
+          <path d="M162,54 h30" class="neon-thin" stroke-linecap="square" />
+          <path d="M28,28 h-12" class="neon-thin" />
+          <rect x="20" y="20" width="6" height="28" rx="1" class="neon-thin" />
+
+          <!-- Abstract eye -->
+          <g transform="translate(10,50)">
+            <!-- eye outline -->
+            <path d="M40,60 C20,60 0,44 0,30 C0,16 20,0 40,0 C60,0 80,16 80,30 C80,44 60,60 40,60 Z" class="eye-fill"/>
+            <!-- iris concentric rings -->
+            <circle cx="40" cy="30" r="16" stroke="url(#neonGradient)" stroke-width="8" fill="none" />
+            <circle cx="40" cy="30" r="8" stroke="url(#neonGradient)" stroke-width="6" fill="none" />
+            <circle cx="40" cy="30" r="3" fill="#04102A"/>
+
+            <!-- subtle scan ticks inside eye -->
+            <path d="M20,30 h6" class="neon-thin" />
+            <path d="M66,30 h6" class="neon-thin" />
+            <path d="M40,8 v6" class="neon-thin" />
+            <path d="M40,52 v6" class="neon-thin" />
+          </g>
+
+          <!-- Circuit-like legs below eye (AI & automation) -->
+          <g transform="translate(15,125)">
+            <!-- crossing trace lines -->
+            <path d="M20,0 L75,60" class="circuit" />
+            <path d="M110,0 L58,60" class="circuit" />
+
+            <!-- branch nodes -->
+            <circle cx="20" cy="0" r="7" class="accent-dot" />
+            <circle cx="110" cy="0" r="7" class="accent-dot" />
+
+            <circle cx="75" cy="60" r="8" class="accent-dot" />
+            <circle cx="58" cy="60" r="8" class="accent-dot" />
+
+            <!-- side traces -->
+            <path d="M10,18 L35,38" class="circuit" />
+            <path d="M120,18 L95,38" class="circuit" />
+
+            <circle cx="8" cy="18" r="6" class="accent-dot" />
+            <circle cx="122" cy="18" r="6" class="accent-dot" />
+          </g>
+        </g>
+
+        <!-- WORDMARK (Right side) -->
+        <g id="wordmark" transform="translate(530,360)">
+          <!-- Main text -->
+          <text class="word" x="0" y="30">CapVision</text>
+
+          <!-- subtle tech underline / focus ring hint under 'Vision' -->
+          <path d="M210,52 h160" stroke="url(#wordGradient)" stroke-width="6" stroke-linecap="square" opacity="0.35" />
+          <circle cx="360" cy="28" r="10" fill="none" stroke="url(#wordGradient)" stroke-width="4" opacity="0.45" />
+        </g>
+
+        <!-- Accessibility: invisible title/desc -->
+        <title>CapVision — cyberpunk AI vision logo</title>
+        <desc>Futuristic neon logo composed of an abstract robotic-eye icon and circuit traces left, and a bold CapVision wordmark right. Gradient neon colors and clean strokes create a cyberpunk high-tech look.</desc>
+      </svg>
+    `.trim();
+
+    return `
+                    <tr class="recording-logo-header">
+                        <td colspan="2">
+                            <div style="padding: 20px 15px; background: #fff; border-bottom: 2px solid #e9ecef; display: flex; justify-content: space-between; align-items: center;">
+                                <span id="capvision-toggle-wrapper" 
+                                      onclick="toggleCapVisionRecordings()" 
+                                      style="cursor: pointer; padding: 10px; user-select: none; background-color: #C8E6C9; border-radius: 3px; display: inline-block; flex: 1; max-width: calc(100% - 150px); margin-right: 20px;">
+                                    <span id="capvision-toggle-icon" class="collapsed" style="font-size: 12px; display: inline-block;"></span>
+                                </span>
+                                <div style="text-align: right;">
+                                    ${logoSVG}
+                                </div>
+                            </div>
+                        </td>
+                    </tr>`;
+  }
+
+  /**
+   * Generate wrapper HTML for recordings (table structure)
+   * @private
+   * @param {string} logoHTML - Logo HTML
+   * @param {string} recordingPlayersHTML - Recording players HTML
+   * @returns {string} Wrapped HTML
+   */
+  generateRecordingsWrapper(logoHTML, recordingPlayersHTML) {
+    return `
+<table class="table table-bordered" style="margin-top: 20px;">
+<thead>
+${logoHTML}
+</thead>
+<tbody id="capvision-recordings-container" class="collapsed" style="display: table-row-group;">
+${recordingPlayersHTML}
+</tbody>
+</table>
+<style>
+  #capvision-recordings-container {
+    transition: opacity 0.3s ease-in-out;
+  }
+  #capvision-recordings-container.collapsed {
+    display: none !important;
+  }
+  #capvision-toggle-wrapper {
+    transition: background-color 0.2s ease;
+  }
+  #capvision-toggle-wrapper:hover {
+    background-color: #C8E6C9;
+  }
+  #capvision-toggle-wrapper:hover #capvision-toggle-icon {
+    color: #333;
+  }
+  #capvision-toggle-icon {
+    display: inline-block;
+  }
+  #capvision-toggle-icon::before {
+    font-family: "Glyphicons Halflings", "Font Awesome", Arial, sans-serif;
+    color: #333;
+  }
+  #capvision-toggle-icon.collapsed::before {
+    content: "\\e113";
+  }
+  #capvision-toggle-icon:not(.collapsed)::before {
+    content: "\\e114";
+  }
+</style>
+<script>
+  function toggleCapVisionRecordings() {
+    const container = document.getElementById('capvision-recordings-container');
+    const toggleIcon = document.getElementById('capvision-toggle-icon');
+    
+    if (container.classList.contains('collapsed')) {
+      container.classList.remove('collapsed');
+      toggleIcon.classList.remove('collapsed');
+    } else {
+      container.classList.add('collapsed');
+      toggleIcon.classList.add('collapsed');
+    }
+  }
+</script>`;
+  }
+
+  /**
+   * Add inline recording players to HTML content
+   * @private
+   * @param {string} htmlContent - Original HTML content
+   * @param {RecordingData[]} recordings - Array of recordings to add
+   * @returns {string} Modified HTML content with players
+   */
+  addInlineRecordingPlayers(htmlContent, recordings) {
+    if (recordings.length === 0) {
+      return htmlContent;
+    }
+
+    // Find table with class "table table-bordered table-suite"
+    const tableSuiteRegex = /<table[^>]*class=["'][^"']*table[^"']*table-bordered[^"']*table-suite[^"']*["'][^>]*>/i;
+    const match = htmlContent.match(tableSuiteRegex);
+
+    if (!match) {
+      // Table not found, return original content
+      return htmlContent;
+    }
+
+    const tableStartIndex = match.index;
+    const tableStartTag = match[0];
+
+    // Find the matching closing </table> tag for this table
+    // We need to account for nested tables
+    let depth = 1;
+    let searchIndex = tableStartIndex + tableStartTag.length;
+    let closingTableIndex = -1;
+
+    while (searchIndex < htmlContent.length && depth > 0) {
+      const nextOpen = htmlContent.indexOf('<table', searchIndex);
+      const nextClose = htmlContent.indexOf('</table>', searchIndex);
+
+      if (nextClose === -1) {
+        break; // No closing tag found
+      }
+
+      if (nextOpen !== -1 && nextOpen < nextClose) {
+        depth++;
+        searchIndex = nextOpen + 6;
+      } else {
+        depth--;
+        if (depth === 0) {
+          closingTableIndex = nextClose;
+          break;
+        }
+        searchIndex = nextClose + 8;
+      }
+    }
+
+    if (closingTableIndex === -1) {
+      // If we can't find matching closing tag, return original content
+      return htmlContent;
+    }
+
+    // Generate logo and players HTML
+    const logoHTML = this.generateLogoHTML();
+    const recordingPlayersHTML = recordings.map((recording, index) => {
+      const testName = recording.data.testName || 'Unknown Test';
+      const recordingNumber = recording.data.recordingNumber || (index + 1);
+      const displayName = recording.data.testName
+        ? `${testName} (Recording #${recordingNumber})`
+        : recording.filename;
+
+      return `
+                    <tr class="test-row recording">
+                        <td colspan="2">
+                            <div class="recordingWrapper" style="padding: 15px; background: #f8f9fa; margin: 10px 0;">
+                                <h4 style="margin: 0 0 10px 0; color: #007bff; font-size: 16px;">
+                                    🎬 Session Recording: ${displayName}
+                                </h4>
+                                <div class="recording-info" style="margin-bottom: 10px; font-size: 12px; color: #666;">
+                                    Events: ${recording.data.totalEvents} | Timestamp: ${recording.data.timestamp} | File: ${recording.filename}
+                                </div>
+                                <div id="capvision-player-inline-${index}" class="capvision-player-inline" style="width: 100%; max-width: ${this.config.playerWidth + 200}px; height: ${this.config.playerHeight + 100}px; border: 1px solid #ddd; border-radius: 8px; background: #fff;">
+                                    <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666;">
+                                        Loading recording player...
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>`;
+    }).join('');
+
+    // Wrap logo and players in a new table and inject after the closing </table> tag
+    const recordingsWrapper = this.generateRecordingsWrapper(logoHTML, recordingPlayersHTML);
+    const insertPosition = closingTableIndex + 8; // 8 = length of '</table>'
+
+    return htmlContent.substring(0, insertPosition) +
+      recordingsWrapper +
+      htmlContent.substring(insertPosition);
+  }
+
+  /**
+   * Generate CapVision player HTML and JavaScript
+   * @private
+   * @param {RecordingData[]} recordings - Array of recordings to embed
+   * @returns {string} HTML/JavaScript string to inject
+   */
+  generateCapVisionPlayerHTML(recordings) {
+    // Read bundled assets
+    let playerCSS = '';
+    try {
+      playerCSS = fs.readFileSync(this.config.playerCSSPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load CapVision player CSS:', error.message);
+    }
+
+    let playerScript = '';
+    try {
+      playerScript = fs.readFileSync(this.config.playerScriptPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load CapVision player script:', error.message);
+    }
+
+    let consoleReplayPlugin = '';
+    try {
+      consoleReplayPlugin = fs.readFileSync(this.config.consoleReplayPluginPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load console replay plugin:', error.message);
+    }
+
+    // Read bundled network replay plugin
+    let networkReplayPlugin = '';
+    try {
+      networkReplayPlugin = fs.readFileSync(this.config.networkReplayPluginPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load network replay plugin:', error.message);
+    }
+
+    return `
+    <!-- CapVision Player CSS (Bundled) -->
+    <style>
+      ${playerCSS}
+    </style>
+    
+    <!-- CapVision Player Script (Bundled) -->
+    <script>
+      ${playerScript}
+    </script>
+    
+    <!-- Console Replay Plugin (Bundled) -->
+    <script>
+      ${consoleReplayPlugin}
+    </script>
+    
+    <!-- Network Replay Plugin (Bundled) -->
+    <script>
+      ${networkReplayPlugin}
+    </script>
+    
+    <script>
+      // CapVision Player Integration Script for Inline Players
+      (function() {
+        const recordings = ${JSON.stringify(recordings)};
+        let players = [];
+        
+        // Initialize all inline players
+        function initializeInlinePlayers() {
+          recordings.forEach((recording, index) => {
+            const playerContainer = document.getElementById(\`capvision-player-inline-\${index}\`);
+            if (playerContainer) {
+              try {
+                console.log('🟡 Initializing inline player for recording:', recording.filename);
+                
+                // Clear loading message
+                playerContainer.innerHTML = '';
+                
+                // Build plugins array for replay
+                const plugins = [];
+                
+                // Add console replay plugin if available
+                if (window.rrwebPluginConsoleReplay) {
+                  try {
+                    const replayOptions = { level: ['log', 'info', 'warn', 'error'] };
+                    let consolePlugin;
+                    
+                    // Handle different export patterns
+                    if (typeof window.rrwebPluginConsoleReplay === 'function') {
+                      consolePlugin = window.rrwebPluginConsoleReplay(replayOptions);
+                    } else if (window.rrwebPluginConsoleReplay.getReplayConsolePlugin) {
+                      consolePlugin = window.rrwebPluginConsoleReplay.getReplayConsolePlugin(replayOptions);
+                    } else if (window.rrwebPluginConsoleReplay.default) {
+                      consolePlugin = window.rrwebPluginConsoleReplay.default(replayOptions);
+                    }
+                    
+                    if (consolePlugin) {
+                      plugins.push(consolePlugin);
+                    }
+                  } catch (error) {
+                    console.warn('⚠️ Failed to initialize console replay plugin:', error.message);
+                  }
+                }
+                
+                // Add network replay plugin if available
+                if (window.rrwebPluginNetworkReplay) {
+                  try {
+                    console.log('🟡 Initializing network replay plugin...');
+                    const networkReplayOptions = {
+                      showPanel: true,
+                      maxEntries: 100,
+                      position: 'bottom-right'
+                    };
+                    let networkPlugin;
+                    
+                    // Handle different export patterns
+                    if (typeof window.rrwebPluginNetworkReplay === 'function') {
+                      networkPlugin = window.rrwebPluginNetworkReplay(networkReplayOptions);
+                      console.log('🟢 Network replay plugin initialized (function pattern)');
+                    } else if (window.rrwebPluginNetworkReplay.getReplayNetworkPlugin) {
+                      networkPlugin = window.rrwebPluginNetworkReplay.getReplayNetworkPlugin(networkReplayOptions);
+                      console.log('🟢 Network replay plugin initialized (getReplayNetworkPlugin pattern)');
+                    } else if (window.rrwebPluginNetworkReplay.default) {
+                      networkPlugin = window.rrwebPluginNetworkReplay.default(networkReplayOptions);
+                      console.log('🟢 Network replay plugin initialized (default pattern)');
+                    }
+                    
+                    if (networkPlugin) {
+                      console.log('🟡 Network plugin structure:', {
+                        hasHandler: typeof networkPlugin.handler === 'function',
+                        hasOnBuild: typeof networkPlugin.onBuild === 'function',
+                        keys: Object.keys(networkPlugin)
+                      });
+                      plugins.push(networkPlugin);
+                      console.log('🟢 Network replay plugin added to plugins array');
+                    } else {
+                      console.warn('⚠️ Network replay plugin is null or undefined');
+                    }
+                  } catch (error) {
+                    console.error('🔴 Failed to initialize network replay plugin:', error);
+                    console.error('🔴 Error stack:', error.stack);
+                  }
+                } else {
+                  console.warn('⚠️ window.rrwebPluginNetworkReplay not found');
+                }
+                
+                // Create RRWeb player
+                const player = new rrwebPlayer({
+                  target: playerContainer,
+                  props: {
+                    events: recording.data.events,
+                    width: ${this.config.playerWidth},
+                    height: ${this.config.playerHeight},
+                    autoPlay: ${this.config.autoPlay},
+                    speed: 1,
+                    showController: true,
+                    mouseTail: true,
+                    plugins: plugins.length > 0 ? plugins : undefined,
+                    insertStyleRules: [
+                      '.replayer-wrapper { border-radius: 8px; width: 100%; height: 100%; }',
+                      '.replayer-mouse { z-index: 1000; }',
+                      '.replayer-controller { background: rgba(0,0,0,0.8); border-radius: 4px; }',
+                      '.replayer-controller button { color: white; }',
+                      '.replayer-wrapper { background: white; }'
+                    ]
+                  }
+                });
+                
+                players[index] = player;
+                
+                console.log('🟢 Successfully initialized inline player for recording:', recording.filename);
+                
+              } catch (error) {
+                console.error('🔴 Failed to initialize inline player for recording:', recording.filename, error);
+                playerContainer.innerHTML = \`
+                  <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #dc3545; font-size: 16px; flex-direction: column;">
+                    <div>❌ Failed to load recording</div>
+                    <div style="font-size: 12px; margin-top: 5px;">\${error.message}</div>
+                  </div>
+                \`;
+              }
+            }
+          });
+        }
+        
+        // Initialize players when DOM is ready
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initializeInlinePlayers);
+        } else {
+          initializeInlinePlayers();
+        }
+        
+        // Cleanup function
+        window.addEventListener('beforeunload', function() {
+          players.forEach(player => {
+            if (player && player.destroy) {
+              player.destroy();
+            }
+          });
+        });
+        
+        console.log('🟢 CapVision Player integration loaded with', recordings.length, 'recording(s)');
+        
+      })();
+    </script>
+    `;
+  }
+
+  /**
+   * Enhance a single HTML report with CapVision player
+   * @async
+   * @param {string} reportPath - Path to HTML report file
+   * @returns {Promise<void>}
+   */
+  async enhanceReport(reportPath) {
+    try {
+      // Check master feature flag first
+      if (this.config.ENABLE_FEATURE === false) {
+        console.log('🟡 CapVision feature disabled (ENABLE_FEATURE=false), skipping report enhancement');
+        return;
+      }
+
+      console.log('🟡 Enhancing HTML report with CapVision player:', reportPath);
+
+      if (!fs.existsSync(reportPath)) {
+        console.log('🟡 HTML report not found, skipping enhancement');
+        return;
+      }
+
+      const recordings = this.getAvailableRecordings();
+      if (recordings.length === 0) {
+        console.log('🟡 No CapVision recordings found, skipping enhancement');
+        return;
+      }
+
+      let htmlContent = fs.readFileSync(reportPath, 'utf8');
+
+      // Add inline players
+      htmlContent = this.addInlineRecordingPlayers(htmlContent, recordings);
+
+      // Add player scripts and CSS
+      const capVisionPlayerHTML = this.generateCapVisionPlayerHTML(recordings);
+      const bodyEndIndex = htmlContent.lastIndexOf('</body>');
+
+      if (bodyEndIndex === -1) {
+        console.log('🟡 Could not find </body> tag, appending to end');
+        htmlContent += capVisionPlayerHTML;
+      } else {
+        htmlContent = htmlContent.slice(0, bodyEndIndex) + capVisionPlayerHTML + htmlContent.slice(bodyEndIndex);
+      }
+
+      fs.writeFileSync(reportPath, htmlContent);
+
+      console.log('🟢 Successfully enhanced HTML report with CapVision player');
+      console.log(`🟢 Found ${recordings.length} recording(s) to integrate`);
+
+    } catch (error) {
+      console.error('🔴 Failed to enhance HTML report:', error.message);
+    }
+  }
+
+  /**
+   * Enhance all HTML reports in the reports directory
+   * @async
+   * @returns {Promise<void>}
+   */
+  async enhanceAllReports() {
+    try {
+      // Check master feature flag first
+      if (this.config.ENABLE_FEATURE === false) {
+        console.log('🟡 CapVision feature disabled (ENABLE_FEATURE=false), skipping report enhancement');
+        return;
+      }
+
+      if (!this.isEnhancementEnabled()) {
+        console.log('🟡 Skipping report enhancement (disabled for current cluster/module)');
+        return;
+      }
+
+      if (!fs.existsSync(this.config.reportsDir)) {
+        console.log('🟡 Reports directory not found');
+        return;
+      }
+
+      const files = fs.readdirSync(this.config.reportsDir);
+      const htmlFiles = files.filter(file => file.endsWith('.html'));
+
+      for (const htmlFile of htmlFiles) {
+        const reportPath = path.join(this.config.reportsDir, htmlFile);
+        await this.enhanceReport(reportPath);
+      }
+
+      console.log('🟢 Enhanced all HTML reports with CapVision player');
+
+    } catch (error) {
+      console.error('🔴 Failed to enhance reports:', error.message);
+    }
+  }
+}
+
+// Export class and default config
+module.exports = {
+  ReportEnhancer,
+  DEFAULT_ENHANCER_CONFIG
+};
+