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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-dev-tools",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Development tools for Capillary UI projects including webpack hot-reload plugin and CapVision session recording",
   "main": "src/index.js",
   "exports": {

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

@@ -155,6 +155,207 @@ class ReportEnhancer {
     }
   }
 
+  /**
+   * 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
@@ -167,17 +368,60 @@ class ReportEnhancer {
       return htmlContent;
     }
 
-    const testHeaderRegex = /(<tr class="test-header">[\s\S]*?<\/tr>)/;
+    // 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;
+    }
 
-    return htmlContent.replace(testHeaderRegex, (match) => {
-      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;
+    // 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 `
+      return `
                     <tr class="test-row recording">
                         <td colspan="2">
                             <div class="recordingWrapper" style="padding: 15px; background: #f8f9fa; margin: 10px 0;">
@@ -195,10 +439,15 @@ class ReportEnhancer {
                             </div>
                         </td>
                     </tr>`;
-      }).join('');
+    }).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 match + recordingPlayersHTML;
-    });
+    return htmlContent.substring(0, insertPosition) +
+      recordingsWrapper +
+      htmlContent.substring(insertPosition);
   }
 
   /**
@@ -441,7 +690,7 @@ class ReportEnhancer {
       // 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;