@matware/e2e-runner 1.5.0 → 1.5.1

package/templates/dashboard.html

@@ -775,6 +775,23 @@ tbody tr.selected td{
   cursor:default;
   box-shadow:0 0 0 1px rgba(158,242,106,.12),0 40px 80px rgba(0,0,0,.6);
 }
+.modal pre{
+  max-width:min(900px,100%);max-height:90vh;overflow:auto;
+  margin:0;padding:20px 24px;
+  background:var(--bg-2);
+  border:1px solid var(--border);border-radius:var(--r);
+  font-family:var(--mono);font-size:12px;line-height:1.6;
+  color:var(--text);cursor:text;user-select:text;
+  box-shadow:0 0 0 1px rgba(158,242,106,.12),0 40px 80px rgba(0,0,0,.6);
+}
+.modal pre[hidden],.modal img[hidden]{display:none}
+
+/* ── JSON syntax highlighting (modal + network body panels) ── */
+.jn-key{color:var(--beacon)}
+.jn-str{color:var(--amber)}
+.jn-num{color:var(--phosphor)}
+.jn-bool{color:var(--red);font-weight:600}
+.jn-null{color:var(--red);opacity:.65;font-style:italic}
 
 /* ── Toasts ── */
 .toast-container{
@@ -2396,10 +2413,49 @@ tr.expanded td:first-child::before{
 .hb-link span{font-size:10px;color:var(--beacon);font-weight:700;letter-spacing:.18em;text-transform:uppercase}
 
 /* ═══════════════════ Screenshots ═══════════════════ */
+.gallery-group{
+  border:1px solid var(--border);
+  border-radius:var(--r);
+  background:var(--surface);
+  margin-bottom:10px;
+  overflow:hidden;
+}
+.gallery-group-header{
+  display:flex;align-items:center;gap:10px;
+  padding:10px 14px;cursor:pointer;user-select:none;
+  background:var(--bg-2);
+  transition:background .15s;
+}
+.gallery-group-header:hover{background:var(--surface)}
+.gallery-group .gg-arrow{
+  font-size:9px;color:var(--text2);
+  transition:transform .15s;flex-shrink:0;
+}
+.gallery-group.open .gg-arrow{transform:rotate(90deg)}
+.gallery-group .gg-name{
+  font-family:var(--mono);font-size:12px;font-weight:600;
+  color:var(--text);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
+}
+.gallery-group .gg-count{
+  font-family:var(--mono);font-size:10px;color:var(--text2);
+  padding:2px 8px;border-radius:999px;
+  background:var(--bg);border:1px solid var(--border);
+  flex-shrink:0;margin-left:auto;
+}
+.gallery-group .gg-blank-badge{
+  font-family:var(--mono);font-size:9px;font-weight:700;
+  padding:2px 8px;border-radius:999px;
+  background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber);
+  flex-shrink:0;
+}
+.gallery-group .gg-blank-badge[hidden]{display:none}
+.gallery-group-body{padding:12px}
+.gallery-group-body[hidden]{display:none}
 .gallery{
   display:grid;
-  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
-  gap:14px;
+  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
+  gap:10px;
 }
 .gallery-item{
   background:var(--surface);
@@ -2413,11 +2469,11 @@ tr.expanded td:first-child::before{
   content:'';position:absolute;top:0;left:0;width:18px;height:1px;
   background:var(--phosphor);opacity:.4;z-index:1;
 }
-
+.gallery-item:hover{
   border-color:var(--ui-accent);transform:translateY(-2px);
   box-shadow:0 12px 28px rgba(0,0,0,.4);
 }
-.gallery-item img{width:100%;height:160px;object-fit:cover;display:block}
+.gallery-item img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:top center;display:block}
 .gallery-item .cap{
   padding:8px 12px;font-size:10px;
   color:var(--text2);display:flex;align-items:center;gap:6px;
@@ -2692,6 +2748,11 @@ tr.expanded td:first-child::before{
   background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 6px,var(--bg-2) 6px,var(--bg-2) 12px);
 }
 .sl-thumb-empty:hover{transform:none;box-shadow:none}
+.sl-thumb-json{
+  display:flex;align-items:center;justify-content:center;
+  color:var(--beacon);font-family:var(--mono);font-size:18px;font-weight:700;
+  background:var(--bg-2);
+}
 .sl-thumb-err{border-color:var(--crimson)}
 
 .sl-info{display:flex;flex-direction:column;gap:6px;min-width:0}
@@ -2754,6 +2815,9 @@ tr.expanded td:first-child::before{
 }
 .sl-chip-v{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
 .sl-chip-sel .sl-chip-v{color:var(--beacon)}
+.sl-chip-json{cursor:pointer;border-color:var(--beacon)}
+.sl-chip-json .sl-chip-k{color:var(--beacon)}
+.sl-chip-json:hover{background:var(--beacon-dim)}
 
 .sl-bar{
   width:100%;height:3px;
@@ -3740,7 +3804,7 @@ tr.expanded td:first-child::before{
           <button class="btn sm" id="ssBlankCancelBtn">Cancel</button>
         </div>
       </div>
-      <div class="gallery" id="screenshotGallery"></div>
+      <div class="gallery-groups" id="screenshotGallery"></div>
       <div class="empty" id="screenshotsEmpty" style="display:none">
         <div class="empty-icon">&#9635;</div>
         <p>Select a project to view screenshots.</p>
@@ -3986,7 +4050,7 @@ tr.expanded td:first-child::before{
     </div>
   </div>
 </div>
-<div class="modal" id="modal"><img id="modalImg" src="" alt=""></div>
+<div class="modal" id="modal"><img id="modalImg" src="" alt=""><pre id="modalJson" hidden></pre></div>
 
 <!-- ── Quick Search Palette ── -->
 <div class="qs-modal" id="qsModal" aria-hidden="true">
@@ -4076,6 +4140,27 @@ function prettyJson(str){
   try{return JSON.stringify(JSON.parse(str),null,2)}catch(e){return str}
 }
 
+/* Lightweight JSON syntax highlighter. Escapes HTML, then wraps tokens in
+   colored spans. Input should already be pretty-printed (prettyJson). */
+function highlightJson(text){
+  var esc=String(text).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  return esc.replace(/"(?:\\.|[^"\\])*"|\b(?:true|false|null)\b|-?\b\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?\b/g,function(m,off,s){
+    var cls;
+    if(m[0]==='"'){cls=/^\s*:/.test(s.slice(off+m.length))?'jn-key':'jn-str'}
+    else if(m==='true'||m==='false'){cls='jn-bool'}
+    else if(m==='null'){cls='jn-null'}
+    else{cls='jn-num'}
+    return '<span class="'+cls+'">'+m+'</span>';
+  });
+}
+
+/* Builds a <pre> with syntax-highlighted JSON content. */
+function jsonPre(text){
+  var p=document.createElement('pre');
+  p.innerHTML=highlightJson(text);
+  return p;
+}
+
 function fmtHeaders(h){
   if(!h||typeof h!=='object')return '';
   return Object.keys(h).map(function(k){return k+': '+h[k]}).join('\n');
@@ -4162,7 +4247,7 @@ function buildNetRow(n){
     }
     if(n.requestBody){
       var rbText=prettyJson(n.requestBody);
-      sections.push(buildNdSection('Request Body',el('pre',null,rbText),null,rbText));
+      sections.push(buildNdSection('Request Body',jsonPre(rbText),null,rbText));
     }
     if(n.responseHeaders){
       var rhCount=Object.keys(n.responseHeaders).length;
@@ -4170,7 +4255,7 @@ function buildNetRow(n){
     }
     if(n.responseBody){
       var respText=prettyJson(n.responseBody);
-      sections.push(buildNdSection('Response Body',el('pre',null,respText),null,respText));
+      sections.push(buildNdSection('Response Body',jsonPre(respText),null,respText));
     }
     detail=el('div',{className:'rd-net-detail'},sections);
     row.addEventListener('click',function(e){e.stopPropagation();row.classList.toggle('open')});
@@ -5676,7 +5761,8 @@ function loadDetailInline(id,detailTr){
           var stateCls=a.success?'pass':'fail';
           var icon=a.success?'\u2714':'\u2718';
 
-          // Thumbnail: prefer autoScreenshot, fall back to action's own screenshot
+          // Thumbnail: prefer autoScreenshot, fall back to action's own screenshot.
+          // Data-capture steps (raw JSON saved instead of a screenshot) get a {} thumb.
           var thumbPath=a.autoScreenshot||a.screenshot||null;
           var thumb;
           if(thumbPath){
@@ -5684,6 +5770,10 @@ function loadDetailInline(id,detailTr){
             var img=document.createElement('img');
             img.src=src;img.alt=label;img.loading='lazy';
             thumb=el('div',{className:'sl-thumb',onclick:function(e){e.stopPropagation();openModal(src)}},[img]);
+          }else if(a.dataCapture){
+            (function(dc){
+              thumb=el('div',{className:'sl-thumb sl-thumb-json',title:'Raw JSON response \u2014 click to view',onclick:function(e){e.stopPropagation();openJsonModal(dc)}},[el('span',null,'{\u2009}')]);
+            })(a.dataCapture);
           }else{
             thumb=el('div',{className:'sl-thumb sl-thumb-empty',title:'No screenshot for this step'},[el('span',null,'\u25A1')]);
           }
@@ -5693,6 +5783,12 @@ function loadDetailInline(id,detailTr){
           if(a.selector)chips.appendChild(el('span',{className:'sl-chip sl-chip-sel'},[el('span',{className:'sl-chip-k'},'sel'),el('span',{className:'sl-chip-v'},a.selector)]));
           if(a.text)chips.appendChild(el('span',{className:'sl-chip'},[el('span',{className:'sl-chip-k'},'text'),el('span',{className:'sl-chip-v'},String(a.text))]));
           if(a.value!=null&&a.value!=='')chips.appendChild(el('span',{className:'sl-chip'},[el('span',{className:'sl-chip-k'},'val'),el('span',{className:'sl-chip-v'},String(a.value))]));
+          if(a.dataCapture)(function(dc){
+            chips.appendChild(el('span',{className:'sl-chip sl-chip-json',title:'Raw JSON response saved for this step \u2014 click to view',onclick:function(e){e.stopPropagation();openJsonModal(dc)}},[
+              el('span',{className:'sl-chip-k'},'JSON'),
+              el('span',{className:'sl-chip-v'},dc.split('/').pop())
+            ]));
+          })(a.dataCapture);
 
           var retryBadge=(a.actionRetries&&a.actionRetries>0)?el('span',{className:'sl-retry'},'\u21BB '+a.actionRetries):null;
 
@@ -5823,6 +5919,15 @@ function loadDetailInline(id,detailTr){
 }
 
 /* ── Screenshots ── */
+/* Session memory: which test groups the user expanded (survives refreshes, not reloads) */
+var SS_EXPANDED={};
+function buildGalleryItem(f){
+  var src='/api/image?path='+encodeURIComponent(f.path);
+  var img=document.createElement('img');img.src=src;img.alt=f.name;img.loading='lazy';
+  var capEl=el('div',{className:'cap'},[el('span',{className:'cap-name'},f.name)]);
+  (function(c,fp){ssHash(fp).then(function(h){c.appendChild(createHashBadge(h))})})(capEl,f.path);
+  return el('div',{className:'gallery-item','data-path':f.path,onclick:function(){openModal(src)}},[img,capEl]);
+}
 function refreshScreenshots(){
   var gal=$('#screenshotGallery'),empty=$('#screenshotsEmpty');
   gal.textContent='';
@@ -5831,12 +5936,50 @@ function refreshScreenshots(){
     if(!Array.isArray(files)||!files.length){empty.style.display='block';empty.querySelector('p').textContent='No screenshots for this project.';$('#badgeScreenshots').textContent='0';return}
     empty.style.display='none';
     $('#badgeScreenshots').textContent=files.length;
+    /* Group by test name; files without one go to a trailing "Other" bucket */
+    var groups={},order=[];
     files.forEach(function(f){
-      var src='/api/image?path='+encodeURIComponent(f.path);
-      var img=document.createElement('img');img.src=src;img.alt=f.name;img.loading='lazy';
-      var capEl=el('div',{className:'cap'},[el('span',{className:'cap-name'},f.name)]);
-      (function(c,fp){ssHash(fp).then(function(h){c.appendChild(createHashBadge(h))})})(capEl,f.path);
-      gal.appendChild(el('div',{className:'gallery-item','data-path':f.path,onclick:function(){openModal(src)}},[img,capEl]));
+      var key=f.testName||'__other__';
+      if(!groups[key]){groups[key]=[];order.push(key)}
+      groups[key].push(f);
+    });
+    function fileTs(f){var m=f.name.match(/(\d{10,})\.[a-z]+$/i);return m?parseInt(m[1],10):0}
+    order.sort(function(a,b){
+      if(a==='__other__')return 1;
+      if(b==='__other__')return -1;
+      var ma=0,mb=0;
+      groups[a].forEach(function(f){var t=fileTs(f);if(t>ma)ma=t});
+      groups[b].forEach(function(f){var t=fileTs(f);if(t>mb)mb=t});
+      return mb-ma;
+    });
+    order.forEach(function(key){
+      var items=groups[key],label=key==='__other__'?'Other':key;
+      var grid=el('div',{className:'gallery'});
+      var materialized=false;
+      function materialize(){
+        if(materialized)return;materialized=true;
+        items.forEach(function(f){grid.appendChild(buildGalleryItem(f))});
+      }
+      var expanded=!!SS_EXPANDED[key];
+      var body=el('div',{className:'gallery-group-body'},[grid]);
+      var group=el('div',{className:'gallery-group'+(expanded?' open':'')},[]);
+      var header=el('div',{className:'gallery-group-header',onclick:function(){
+        expanded=!expanded;
+        if(expanded){SS_EXPANDED[key]=true;materialize()}else{delete SS_EXPANDED[key]}
+        group.classList.toggle('open',expanded);
+        if(expanded)body.removeAttribute('hidden');else body.setAttribute('hidden','');
+      }},[
+        el('span',{className:'gg-arrow'},'▶'),
+        el('span',{className:'gg-name'},label),
+        el('span',{className:'gg-count'},items.length+' shot'+(items.length===1?'':'s')),
+        el('span',{className:'gg-blank-badge',hidden:''},''),
+      ]);
+      group.appendChild(header);
+      group.appendChild(body);
+      if(expanded){materialize()}else{body.setAttribute('hidden','')}
+      /* Expose to the blank-scan so it can materialize collapsed groups on demand */
+      group._ssItems=items;group._ssMaterialize=materialize;
+      gal.appendChild(group);
     });
     resetBlankBar();
   }).catch(function(){});
@@ -5846,6 +5989,7 @@ function refreshScreenshots(){
 function resetBlankBar(){
   var bar=$('#ssBlankBar');if(bar)bar.hidden=true;
   $$('#screenshotGallery .gallery-item.blank-flagged').forEach(function(it){it.classList.remove('blank-flagged')});
+  $$('#screenshotGallery .gg-blank-badge').forEach(function(b){b.textContent='';b.setAttribute('hidden','')});
   S.blankPaths=null;
 }
 function scanBlankScreenshots(){
@@ -5861,10 +6005,18 @@ function scanBlankScreenshots(){
       return;
     }
     S.blankPaths=blanks.map(function(b){return b.path});
-    var found=0;
+    /* Materialize collapsed groups that contain blanks, flag items, badge the headers */
+    var blankSet={};S.blankPaths.forEach(function(p){blankSet[p]=true});
+    $$('#screenshotGallery .gallery-group').forEach(function(g){
+      var inGroup=(g._ssItems||[]).filter(function(it){return blankSet[it.path]}).length;
+      if(!inGroup)return;
+      if(g._ssMaterialize)g._ssMaterialize();
+      var badge=g.querySelector('.gg-blank-badge');
+      if(badge){badge.textContent=inGroup+' blank'+(inGroup===1?'':'s');badge.removeAttribute('hidden')}
+    });
     S.blankPaths.forEach(function(p){
       var item=$('#screenshotGallery .gallery-item[data-path="'+(window.CSS&&CSS.escape?CSS.escape(p):p)+'"]');
-      if(item){item.classList.add('blank-flagged');found++}
+      if(item)item.classList.add('blank-flagged');
     });
     $('#ssBlankMsg').textContent=blanks.length+' blank image'+(blanks.length===1?'':'s')+' of '+data.scanned+' scanned';
     $('#ssBlankBar').hidden=false;
@@ -6159,8 +6311,26 @@ $('#btnExportLearnings').addEventListener('click',function(){
 });
 
 /* ── Modal ── */
-function openModal(src){$('#modalImg').src=src;$('#modal').classList.add('open')}
+function openModal(src){
+  $('#modalImg').src=src;$('#modalImg').removeAttribute('hidden');
+  $('#modalJson').setAttribute('hidden','');
+  $('#modal').classList.add('open');
+}
+function openJsonModal(filePath){
+  fetch('/api/image?path='+encodeURIComponent(filePath)).then(function(r){
+    if(!r.ok)throw new Error('not found');
+    return r.text();
+  }).then(function(text){
+    $('#modalImg').setAttribute('hidden','');
+    var pre=$('#modalJson');
+    pre.innerHTML=highlightJson(prettyJson(text));
+    pre.removeAttribute('hidden');
+    $('#modal').classList.add('open');
+  }).catch(function(){showToast('Could not load JSON capture','error')});
+}
 $('#modal').addEventListener('click',function(){$('#modal').classList.remove('open')});
+/* Allow selecting/copying JSON text without closing the modal */
+$('#modalJson').addEventListener('click',function(e){e.stopPropagation()});
 
 /* ══════════════════════════════════════════════════════════════════
    Screenshot Replay Player — plays a run's per-step screenshots