@matware/e2e-runner 1.3.0 → 1.5.0

package/templates/dashboard/js/view-runs.js

@@ -67,8 +67,8 @@ function renderRunsHealthBanner(){
         el('div',{className:'hb-lbl'},'Top Error ('+h.topErrorPattern.count+'x)')
       ]));
     }
-    banner.appendChild(el('div',{className:'hb-link',onclick:function(){var lb=$('#runsTabLearnings');if(lb)lb.click()}},[
-      el('span',null,'\u2192 View Learnings')
+    banner.appendChild(el('div',{className:'hb-link',onclick:function(){showView('insights')}},[
+      el('span',null,'\u2192 View Insights')
     ]));
   }).catch(function(){});
 }
@@ -88,7 +88,7 @@ function refreshRuns(){
     var htr=document.createElement('tr');
     var cols=[];
     if(!S.project)cols.push('Project');
-    cols=cols.concat(['Suite','Source','Date','Total','Pass','Fail','Rate','Time']);
+    cols=cols.concat(['Suite','Driver','Source','Date','Total','Pass','Fail','Rate','Time']);
     cols.forEach(function(c){htr.appendChild(el('th',null,c))});
     head.textContent='';head.appendChild(htr);
     var colSpan=cols.length;
@@ -107,6 +107,7 @@ function refreshRuns(){
       if(r.id===S.selectedRun)tr.classList.add('expanded');
       if(!S.project)tr.appendChild(el('td',{style:'font-weight:600'},r.project_name||'-'));
       tr.appendChild(el('td',{style:'color:var(--accent)'},r.suite_name||'all'));
+      var driverTd=document.createElement('td');driverTd.appendChild(createDriverBadge(r.pool_driver));tr.appendChild(driverTd);
       var srcTd=document.createElement('td');srcTd.appendChild(createTriggerBadge(r.triggered_by));tr.appendChild(srcTd);
       tr.appendChild(el('td',null,fdate(r.generated_at)));
       tr.appendChild(el('td',null,String(r.total||0)));
@@ -203,8 +204,10 @@ function loadDetailInline(id,detailTr){
       ])
     ]);
     var srcBlock=el('div',null,[el('div',{className:'rd-s-label'},'Source'),el('div',{style:'margin-top:4px'},[createTriggerBadge(d.triggeredBy)])]);
+    var drvBlock=el('div',null,[el('div',{className:'rd-s-label'},'Driver'),el('div',{style:'margin-top:4px'},[createDriverBadge(d.poolDriver)])]);
     var summ=el('div',{className:'rd-summary'},[
       el('div',null,[el('div',{className:'rd-s-label'},'Suite'),el('div',{className:'rd-s-val',style:'font-size:14px;color:var(--accent)'},d.suiteName||'all')]),
+      drvBlock,
       srcBlock,
       el('div',null,[el('div',{className:'rd-s-label'},'Total'),el('div',{className:'rd-s-val'},String(d.summary.total))]),
       el('div',null,[el('div',{className:'rd-s-label'},'Passed'),el('div',{className:'rd-s-val',style:'color:var(--green)'},String(d.summary.passed))]),
@@ -272,53 +275,121 @@ function loadDetailInline(id,detailTr){
         body.appendChild(errDiv);
       }
 
-      // Actions panel
+      // Storyline \u2014 unified per-step cards with thumbnails, narrative, duration bar
       if(r.actions&&r.actions.length){
         var passCount=r.actions.filter(function(a){return a.success}).length;
         var failCount=r.actions.length-passCount;
-        var actHead=el('div',{className:'rd-net-head'},[
+        var maxDur=Math.max.apply(null,r.actions.map(function(a){return a.duration||0}).concat([1]));
+        var hashes=r.screenshotHashes||{};
+
+        // "Play replay" button \u2014 only shown if at least one step has a screenshot
+        var hasFrames=r.actions.some(function(a){return a.autoScreenshot||a.screenshot})||(!r.success&&r.errorScreenshot);
+        var replayBtn=hasFrames?el('button',{
+          className:'rd-replay-btn',
+          title:'Replay step-by-step',
+          onclick:function(e){e.stopPropagation();openReplay(r.actions,r)}
+        },'\u25B6 Replay'):null;
+        var slHead=el('div',{className:'rd-net-head open'},[
           el('span',{className:'net-arrow'},'\u25B6'),
-          el('span',{className:'net-title'},'Actions'),
+          el('span',{className:'net-title'},'Storyline'),
           el('div',{className:'net-stats'},[
             el('span',{className:'net-stat'},[document.createTextNode('Steps: '),el('strong',null,String(r.actions.length))]),
-            failCount?el('span',{className:'net-stat has-err'},[document.createTextNode('Failed: '),el('strong',null,String(failCount))]):null
-          ])
+            failCount?el('span',{className:'net-stat has-err'},[document.createTextNode('Failed: '),el('strong',null,String(failCount))]):null,
+            el('span',{className:'net-stat'},[document.createTextNode('Passed: '),el('strong',null,String(passCount))])
+          ]),
+          replayBtn
         ]);
-        var actBody=el('div',{className:'rd-net-body',style:'padding:8px 14px'});
-        r.actions.forEach(function(a){
+        var slBody=el('div',{className:'storyline'});
+
+        r.actions.forEach(function(a,idx){
+          var stepNum=String(idx+1).padStart(2,'0');
           var label=a.narrative||a.type;
           var durText=a.duration!=null?dur(a.duration):'';
-          var retryBadge=null;
-          if(a.actionRetries&&a.actionRetries>0){
-            retryBadge=el('span',{className:'badge flaky',style:'font-size:9px;padding:1px 5px'},'\u21BB x'+a.actionRetries);
+          var durPct=a.duration?Math.max(2,Math.round((a.duration/maxDur)*100)):0;
+          var stateCls=a.success?'pass':'fail';
+          var icon=a.success?'\u2714':'\u2718';
+
+          // Thumbnail: prefer autoScreenshot, fall back to action's own screenshot
+          var thumbPath=a.autoScreenshot||a.screenshot||null;
+          var thumb;
+          if(thumbPath){
+            var src='/api/image?path='+encodeURIComponent(thumbPath);
+            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{
+            thumb=el('div',{className:'sl-thumb sl-thumb-empty',title:'No screenshot for this step'},[el('span',null,'\u25A1')]);
+          }
+
+          // Param chips (selector / text / value)
+          var chips=el('div',{className:'sl-chips'});
+          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))]));
+
+          var retryBadge=(a.actionRetries&&a.actionRetries>0)?el('span',{className:'sl-retry'},'\u21BB '+a.actionRetries):null;
+
+          var hashBadge=null;
+          if(thumbPath){
+            if(hashes[thumbPath]){hashBadge=createHashBadge(hashes[thumbPath])}
+            else{(function(holder,fp){ssHash(fp).then(function(h){if(h)holder.appendChild(createHashBadge(h))})})}
           }
-          actBody.appendChild(el('div',{className:'lt-step'},[
-            el('span',{className:'step-icon '+(a.success?'ok':'fail')},a.success?'\u2714':'\u2718'),
-            el('span',{className:'step-detail',style:'flex:1'},label),
+
+          var titleRow=el('div',{className:'sl-title'},[
+            el('span',{className:'sl-num'},stepNum),
+            el('span',{className:'sl-icon '+stateCls},icon),
+            el('span',{className:'sl-type'},a.type),
+            el('span',{className:'sl-narr'},label),
             retryBadge,
-            el('span',{className:'step-dur'},durText)
-          ]));
-        });
-        actHead.addEventListener('click',function(){actHead.classList.toggle('open')});
-        body.appendChild(el('div',{className:'rd-net-panel'},[actHead,actBody]));
-      }
+            el('span',{className:'sl-dur'},durText)
+          ]);
+
+          var durBar=el('div',{className:'sl-bar'},[el('div',{className:'sl-bar-fill '+stateCls,style:'width:'+durPct+'%'})]);
+
+          var info=el('div',{className:'sl-info'},[
+            titleRow,
+            chips.children.length?chips:null,
+            durBar
+          ]);
 
-      // Screenshots
-      var shots=[];
-      var hashes=r.screenshotHashes||{};
-      (r.screenshots||[]).forEach(function(p){shots.push({path:p,label:p.split('/').pop(),type:'screenshot',hash:hashes[p]||null})});
-      if(r.errorScreenshot){shots.push({path:r.errorScreenshot,label:r.errorScreenshot.split('/').pop(),type:'error',hash:hashes[r.errorScreenshot]||null})}
-      if(shots.length){
-        var shotsWrap=el('div',{className:'rd-shots'});
-        shots.forEach(function(s){
-          var src='/api/image?path='+encodeURIComponent(s.path);
-          var img=document.createElement('img');img.src=src;img.alt=s.label;img.loading='lazy';
-          var capEl=el('div',{className:'rd-shot-cap'},[el('span',{className:'cap-name'},s.label)]);
-          if(s.hash){capEl.appendChild(createHashBadge(s.hash))}
-          else{(function(c,fp){ssHash(fp).then(function(h){c.appendChild(createHashBadge(h))})})(capEl,s.path)}
-          shotsWrap.appendChild(el('div',{className:'rd-shot'+(s.type==='error'?' err-shot':''),onclick:function(e){e.stopPropagation();openModal(src)}},[img,capEl]));
+          var card=el('div',{className:'sl-step '+stateCls},[thumb,info]);
+
+          if(!a.success&&a.error){
+            var errBlock=el('div',{className:'sl-err'},[
+              el('span',{className:'sl-err-tag'},'ERROR'),
+              el('span',{className:'sl-err-msg'},String(a.error))
+            ]);
+            card.appendChild(errBlock);
+          }
+
+          slBody.appendChild(card);
         });
-        body.appendChild(shotsWrap);
+
+        // Final failure context card (uses test-level errorScreenshot if present)
+        if(!r.success&&r.errorScreenshot){
+          var errSrc='/api/image?path='+encodeURIComponent(r.errorScreenshot);
+          var errImg=document.createElement('img');errImg.src=errSrc;errImg.alt='Failure context';errImg.loading='lazy';
+          var errCard=el('div',{className:'sl-step sl-final-err'},[
+            el('div',{className:'sl-thumb sl-thumb-err',onclick:function(e){e.stopPropagation();openModal(errSrc)}},[errImg]),
+            el('div',{className:'sl-info'},[
+              el('div',{className:'sl-title'},[
+                el('span',{className:'sl-num'},'\u26A0'),
+                el('span',{className:'sl-icon fail'},'\u2718'),
+                el('span',{className:'sl-narr sl-final-msg'},'Page state at failure')
+              ]),
+              r.error?el('div',{className:'sl-err'},[el('span',{className:'sl-err-tag'},'TEST FAILED'),el('span',{className:'sl-err-msg'},String(r.error))]):null
+            ])
+          ]);
+          slBody.appendChild(errCard);
+        }
+
+        slHead.addEventListener('click',function(){slHead.classList.toggle('open');slBody.classList.toggle('hidden')});
+        body.appendChild(el('div',{className:'rd-net-panel rd-storyline-panel'},[slHead,slBody]));
+      } else if(r.errorScreenshot){
+        // No actions but we have an error screenshot \u2014 show it standalone
+        var errSrcOnly='/api/image?path='+encodeURIComponent(r.errorScreenshot);
+        var errImgOnly=document.createElement('img');errImgOnly.src=errSrcOnly;errImgOnly.loading='lazy';
+        body.appendChild(el('div',{className:'sl-final-err-standalone',onclick:function(e){e.stopPropagation();openModal(errSrcOnly)}},[errImgOnly]));
       }
 
       // Console logs
@@ -398,11 +469,63 @@ function refreshScreenshots(){
       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',onclick:function(){openModal(src)}},[img,capEl]));
+      gal.appendChild(el('div',{className:'gallery-item','data-path':f.path,onclick:function(){openModal(src)}},[img,capEl]));
     });
+    resetBlankBar();
   }).catch(function(){});
 }
 
+/* ── Blank screenshot scan / delete ── */
+function resetBlankBar(){
+  var bar=$('#ssBlankBar');if(bar)bar.hidden=true;
+  $$('#screenshotGallery .gallery-item.blank-flagged').forEach(function(it){it.classList.remove('blank-flagged')});
+  S.blankPaths=null;
+}
+function scanBlankScreenshots(){
+  if(!S.project){showToast('Select a project first','error');return}
+  var btn=$('#ssScanBlankBtn');btn.disabled=true;var prev=btn.textContent;btn.textContent='Scanning…';
+  api('/api/db/projects/'+S.project+'/screenshots/blank-scan').then(function(data){
+    btn.disabled=false;btn.textContent=prev;
+    var blanks=(data&&data.blanks)||[];
+    $$('#screenshotGallery .gallery-item.blank-flagged').forEach(function(it){it.classList.remove('blank-flagged')});
+    if(!blanks.length){
+      S.blankPaths=null;$('#ssBlankBar').hidden=true;
+      showToast('No blank images found ('+((data&&data.scanned)||0)+' scanned)','info');
+      return;
+    }
+    S.blankPaths=blanks.map(function(b){return b.path});
+    var found=0;
+    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++}
+    });
+    $('#ssBlankMsg').textContent=blanks.length+' blank image'+(blanks.length===1?'':'s')+' of '+data.scanned+' scanned';
+    $('#ssBlankBar').hidden=false;
+  }).catch(function(){
+    btn.disabled=false;btn.textContent=prev;
+    showToast('Blank scan failed','error');
+  });
+}
+function deleteBlankScreenshots(){
+  if(!S.blankPaths||!S.blankPaths.length)return;
+  var btn=$('#ssBlankDeleteBtn');btn.disabled=true;var prev=btn.textContent;btn.textContent='Deleting…';
+  fetch('/api/screenshots/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({paths:S.blankPaths})})
+    .then(function(r){return r.json()}).then(function(res){
+      btn.disabled=false;btn.textContent=prev;
+      if(res&&res.error){showToast('Delete failed: '+res.error,'error');return}
+      var n=res.deleted||0,failed=(res.failed&&res.failed.length)||0;
+      showToast('Deleted '+n+' blank image'+(n===1?'':'s')+(failed?(' · '+failed+' failed'):''),failed?'error':'success');
+      resetBlankBar();
+      refreshScreenshots();
+    }).catch(function(){
+      btn.disabled=false;btn.textContent=prev;
+      showToast('Delete failed','error');
+    });
+}
+$('#ssScanBlankBtn').addEventListener('click',scanBlankScreenshots);
+$('#ssBlankDeleteBtn').addEventListener('click',deleteBlankScreenshots);
+$('#ssBlankCancelBtn').addEventListener('click',resetBlankBar);
+
 function searchByHash(){
   var container=$('#ssSearchResult');
   container.textContent='';
@@ -436,10 +559,8 @@ function refreshLearnings(){
   fetch(url).then(function(r){return r.json()}).then(function(data){
     if(!data||data.totalRuns===0){
       $('#learningsEmpty').style.display='block';
-      $('#learningsOverview').textContent='';$('#learningsTrend').textContent='';
-      $('#learningsFlaky').textContent='';$('#learningsSelectors').textContent='';
-      $('#learningsPages').textContent='';$('#learningsApis').textContent='';
-      $('#learningsErrors').textContent='';
+      $('#learnHero').textContent='';$('#learnCards').textContent='';
+      $('#learnTrend').textContent='';$('#learnBottom').textContent='';
       $('#badgeLearnings').textContent='-';
       return;
     }
@@ -464,48 +585,139 @@ function refreshLearnings(){
       $('#badgeLearnings').textContent='\u2714';
       $('#badgeLearnings').style.background='var(--green-dim)';$('#badgeLearnings').style.color='var(--green)';
     }
-    renderLearnOverview(data);
+    renderLearnHero(data);
+    renderLearnCards(data);
     renderLearnTrend(data.recentTrend||[]);
-    renderLearnFlaky(data.flakyTests||[]);
-    renderLearnSelectors(data.unstableSelectors||[]);
-    renderLearnPages(data.failingPages||[]);
-    renderLearnApis(data.apiIssues||[]);
-    renderLearnErrors(data.topErrors||[]);
+    renderLearnBottomRow(data);
   }).catch(function(){$('#learningsEmpty').style.display='block'});
 }
 
-function renderLearnOverview(d){
-  var container=$('#learningsOverview');container.textContent='';
-  var grid=document.createElement('div');grid.className='learn-grid';
-  [{val:d.totalRuns,lbl:'Runs',cls:'accent'},{val:d.totalTests,lbl:'Tests',cls:'accent'},
-   {val:d.overallPassRate+'%',lbl:'Pass Rate',cls:d.overallPassRate>=90?'green':d.overallPassRate>=70?'':'red'},
-   {val:d.avgDurationMs<1000?d.avgDurationMs+'ms':(d.avgDurationMs/1000).toFixed(1)+'s',lbl:'Avg Duration',cls:'purple'},
-   {val:(d.flakyTests?d.flakyTests.length:0),lbl:'Flaky Tests',cls:d.flakyTests&&d.flakyTests.length>0?'red':'green'},
-   {val:(d.unstableSelectors?d.unstableSelectors.length:0),lbl:'Unstable Selectors',cls:d.unstableSelectors&&d.unstableSelectors.length>0?'red':'green'}
-  ].forEach(function(item){
-    var stat=document.createElement('div');stat.className='learn-stat';
-    var valEl=document.createElement('div');valEl.className='learn-stat-val '+item.cls;valEl.textContent=item.val;
-    var lblEl=document.createElement('div');lblEl.className='learn-stat-lbl';lblEl.textContent=item.lbl;
-    stat.appendChild(valEl);stat.appendChild(lblEl);grid.appendChild(stat);
+function rateColor(v){return v>=90?'var(--green)':v>=70?'var(--amber)':'var(--red)'}
+function rateClass(v){return v>=90?'good':v>=70?'warn':'bad'}
+function durFmt(ms){return ms<1000?Math.round(ms)+'ms':(ms/1000).toFixed(1)+'s'}
+
+function renderLearnHero(d){
+  var c=$('#learnHero');c.textContent='';
+  var wrap=document.createElement('div');wrap.className='learn-hero';
+  var passRate=d.overallPassRate||0;
+  var ns='http://www.w3.org/2000/svg';
+  var ringWrap=document.createElement('div');ringWrap.className='learn-hero-ring';
+  var svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 36 36');
+  var bgCircle=document.createElementNS(ns,'circle');bgCircle.setAttribute('cx','18');bgCircle.setAttribute('cy','18');bgCircle.setAttribute('r','15.9');bgCircle.className.baseVal='learn-hero-ring-bg';svg.appendChild(bgCircle);
+  var fgCircle=document.createElementNS(ns,'circle');fgCircle.setAttribute('cx','18');fgCircle.setAttribute('cy','18');fgCircle.setAttribute('r','15.9');fgCircle.className.baseVal='learn-hero-ring-fg';
+  var circ=2*Math.PI*15.9;fgCircle.setAttribute('stroke-dasharray',circ.toFixed(1));fgCircle.setAttribute('stroke-dashoffset',(circ*(1-passRate/100)).toFixed(1));fgCircle.setAttribute('stroke',rateColor(passRate));
+  svg.appendChild(fgCircle);ringWrap.appendChild(svg);
+  var pctEl=document.createElement('div');pctEl.className='learn-hero-pct';pctEl.style.color=rateColor(passRate);pctEl.textContent=passRate+'%';
+  ringWrap.appendChild(pctEl);wrap.appendChild(ringWrap);
+
+  var stats=document.createElement('div');stats.className='learn-hero-stats';
+  var badSels=d.unstableSelectors?d.unstableSelectors.length:0;
+  var slowTests=d.failingPages?d.failingPages.length:0;
+  var apiIssues=d.apiIssues?d.apiIssues.length:0;
+  var topErr=d.topErrors&&d.topErrors.length>0?d.topErrors[0].occurrence_count:0;
+  var flakyCount=d.flakyTests?d.flakyTests.length:0;
+  var items=[
+    {val:String(d.totalRuns),lbl:'Runs',color:'var(--accent)'},
+    {val:String(d.totalTests),lbl:'Tests',color:'var(--accent)'},
+    {val:durFmt(d.avgDurationMs||0),lbl:'Avg Duration',color:'var(--purple)'},
+    {val:String(flakyCount),lbl:'Flaky',color:flakyCount>0?'var(--amber)':'var(--green)'},
+    {val:String(badSels),lbl:'Bad Selectors',color:badSels>0?'var(--red)':'var(--green)'},
+    {val:String(slowTests),lbl:'Slow Pages',color:slowTests>0?'var(--amber)':'var(--green)'},
+    {val:String(apiIssues),lbl:'API Issues',color:apiIssues>0?'var(--red)':'var(--green)'},
+    {val:String(topErr),lbl:'Top Error Hits',color:topErr>0?'var(--red)':'var(--green)'}
+  ];
+  items.forEach(function(it){
+    var statEl=document.createElement('div');statEl.className='learn-hero-stat';
+    var valEl=document.createElement('div');valEl.className='learn-hero-stat-val';valEl.style.color=it.color;valEl.textContent=it.val;
+    var lblEl=document.createElement('div');lblEl.className='learn-hero-stat-lbl';lblEl.textContent=it.lbl;
+    statEl.appendChild(valEl);statEl.appendChild(lblEl);stats.appendChild(statEl);
   });
-  container.appendChild(grid);
+  wrap.appendChild(stats);c.appendChild(wrap);
+}
+
+function makeLearnItem(label,sub,pct,valText,color){
+  var item=document.createElement('div');item.className='learn-item';
+  var barWrap=document.createElement('div');barWrap.className='learn-item-bar';
+  var lblEl=document.createElement('div');lblEl.className='learn-item-label';
+  var codeEl=document.createElement('code');codeEl.textContent=label;lblEl.appendChild(codeEl);
+  barWrap.appendChild(lblEl);
+  if(sub){var subEl=document.createElement('div');subEl.className='learn-item-sub';subEl.textContent=sub;barWrap.appendChild(subEl)}
+  var bar=document.createElement('div');bar.className='learn-bar';
+  var fill=document.createElement('div');fill.className='learn-bar-fill';fill.style.width=Math.min(pct,100)+'%';fill.style.background=color;
+  bar.appendChild(fill);barWrap.appendChild(bar);
+  item.appendChild(barWrap);
+  var valEl=document.createElement('div');valEl.className='learn-item-val';valEl.style.color=color;valEl.textContent=valText;
+  item.appendChild(valEl);
+  return item;
+}
+
+function makeLearnCard(icon,title,emptyMsg){
+  var card=document.createElement('div');card.className='learn-card';
+  var titleEl=document.createElement('div');titleEl.className='learn-card-title';
+  var iconEl=document.createElement('span');iconEl.className='lc-icon';iconEl.textContent=icon;
+  titleEl.appendChild(iconEl);titleEl.appendChild(document.createTextNode(title));
+  card.appendChild(titleEl);
+  card._empty=emptyMsg;
+  return card;
+}
+
+function renderLearnCards(d){
+  var c=$('#learnCards');c.textContent='';
+
+  var selCard=makeLearnCard('\u26A0','Risky Selectors','No unstable selectors');
+  var sels=d.unstableSelectors||[];
+  if(!sels.length){var e1=document.createElement('div');e1.className='learn-card-empty';e1.textContent=selCard._empty;selCard.appendChild(e1)}
+  else{sels.slice(0,5).forEach(function(s){
+    var sel=s.selector.length>40?s.selector.slice(0,37)+'...':s.selector;
+    selCard.appendChild(makeLearnItem(sel,s.action_type+' \u00B7 '+s.total_uses+' uses',parseFloat(s.fail_rate),s.fail_rate+'%',parseFloat(s.fail_rate)>30?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(selCard);
+
+  var pageCard=makeLearnCard('\u23F1','Problem Pages','No failing pages');
+  var pages=d.failingPages||[];
+  if(!pages.length){var e2=document.createElement('div');e2.className='learn-card-empty';e2.textContent=pageCard._empty;pageCard.appendChild(e2)}
+  else{pages.slice(0,5).forEach(function(p){
+    pageCard.appendChild(makeLearnItem(p.url_path,p.total_visits+' visits \u00B7 '+p.console_errors+' console errs',parseFloat(p.fail_rate),p.fail_rate+'%',parseFloat(p.fail_rate)>30?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(pageCard);
+
+  var flakyCard=makeLearnCard('\u223C','Flaky Tests','No flaky tests detected');
+  var flaky=d.flakyTests||[];
+  if(!flaky.length){var e3=document.createElement('div');e3.className='learn-card-empty';e3.textContent=flakyCard._empty;flakyCard.appendChild(e3)}
+  else{flaky.slice(0,5).forEach(function(f){
+    flakyCard.appendChild(makeLearnItem(f.test_name,'Attempt avg '+f.avg_attempts+' \u00B7 '+f.total_runs+' runs',parseFloat(f.flaky_rate),f.flaky_rate+'%',parseFloat(f.flaky_rate)>30?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(flakyCard);
+
+  var apiCard=makeLearnCard('\u21C4','API Issues','No API issues');
+  var apis=d.apiIssues||[];
+  if(!apis.length){var e4=document.createElement('div');e4.className='learn-card-empty';e4.textContent=apiCard._empty;apiCard.appendChild(e4)}
+  else{apis.slice(0,5).forEach(function(a){
+    var ep=a.endpoint.length>40?a.endpoint.slice(0,37)+'...':a.endpoint;
+    apiCard.appendChild(makeLearnItem(ep,a.total_calls+' calls \u00B7 '+durFmt(a.avg_duration_ms),parseFloat(a.error_rate),a.error_rate+'%',parseFloat(a.error_rate)>20?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(apiCard);
 }
 
 function renderLearnTrend(trend){
-  var container=$('#learningsTrend');container.textContent='';
+  var container=$('#learnTrend');container.textContent='';
   if(!trend.length)return;
-  var card=document.createElement('div');card.className='card';
-  var label=document.createElement('div');label.className='card-label';label.textContent='Pass Rate Trend (7 days)';card.appendChild(label);
-  var chartDiv=document.createElement('div');chartDiv.className='learn-trend-chart';
+  var card=document.createElement('div');card.className='learn-card';
+  var titleEl=document.createElement('div');titleEl.className='learn-card-title';
+  var iconEl=document.createElement('span');iconEl.className='lc-icon';iconEl.textContent='\u2197';
+  titleEl.appendChild(iconEl);titleEl.appendChild(document.createTextNode('Pass Rate Trend'));
+  card.appendChild(titleEl);
+  var chartDiv=document.createElement('div');chartDiv.style.cssText='height:80px;width:100%';
   var w=100/trend.length;var ns='http://www.w3.org/2000/svg';
-  var svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 100 100');svg.setAttribute('preserveAspectRatio','none');
+  var svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 100 100');svg.setAttribute('preserveAspectRatio','none');svg.style.cssText='width:100%;height:100%';
   var bg=document.createElementNS(ns,'rect');bg.setAttribute('x','0');bg.setAttribute('y','0');bg.setAttribute('width','100');bg.setAttribute('height','100');bg.setAttribute('fill','var(--surface2)');bg.setAttribute('rx','2');svg.appendChild(bg);
   var gridLine=document.createElementNS(ns,'line');gridLine.setAttribute('x1','0');gridLine.setAttribute('y1','50');gridLine.setAttribute('x2','100');gridLine.setAttribute('y2','50');gridLine.setAttribute('stroke','var(--border)');gridLine.setAttribute('stroke-width','0.3');gridLine.setAttribute('stroke-dasharray','2,2');svg.appendChild(gridLine);
   var pts=trend.map(function(t,i){return(i*w+w/2)+','+(100-t.pass_rate)}).join(' ');
   var poly=document.createElementNS(ns,'polygon');poly.setAttribute('points',(0*w+w/2)+',100 '+pts+' '+((trend.length-1)*w+w/2)+',100');poly.setAttribute('fill','var(--accent-dim)');svg.appendChild(poly);
   var pl=document.createElementNS(ns,'polyline');pl.setAttribute('points',pts);pl.setAttribute('fill','none');pl.setAttribute('stroke','var(--accent)');pl.setAttribute('stroke-width','1.5');svg.appendChild(pl);
   trend.forEach(function(t,i){
-    var circle=document.createElementNS(ns,'circle');circle.setAttribute('cx',''+(i*w+w/2));circle.setAttribute('cy',''+(100-t.pass_rate));circle.setAttribute('r','2');circle.setAttribute('fill','var(--accent)');
+    var color=rateColor(t.pass_rate);
+    var circle=document.createElementNS(ns,'circle');circle.setAttribute('cx',''+(i*w+w/2));circle.setAttribute('cy',''+(100-t.pass_rate));circle.setAttribute('r','2.5');circle.setAttribute('fill',color);
     var title=document.createElementNS(ns,'title');title.textContent=t.date+': '+t.pass_rate+'% ('+t.total_tests+' tests)';circle.appendChild(title);svg.appendChild(circle);
   });
   chartDiv.appendChild(svg);card.appendChild(chartDiv);
@@ -514,35 +726,47 @@ function renderLearnTrend(trend){
   card.appendChild(dates);container.appendChild(card);
 }
 
-function buildLearnTable(title,headers,rows){
-  var card=document.createElement('div');card.className='card learn-section';
-  var h=document.createElement('div');h.className='learn-section-title';h.textContent=title;card.appendChild(h);
-  var wrap=document.createElement('div');wrap.className='tbl-wrap';
-  var tbl=document.createElement('table');tbl.className='learn-table';
-  var thead=document.createElement('thead');var hr=document.createElement('tr');
-  headers.forEach(function(hdr){var th=document.createElement('th');th.textContent=hdr;hr.appendChild(th)});
-  thead.appendChild(hr);tbl.appendChild(thead);
-  var tbody=document.createElement('tbody');
-  rows.forEach(function(cells){
-    var tr=document.createElement('tr');
-    cells.forEach(function(cell){
-      var td=document.createElement('td');
-      if(cell.code){var code=document.createElement('code');code.textContent=cell.code;td.appendChild(code)}
-      else if(cell.badge){var span=document.createElement('span');span.className='badge '+cell.cls;span.textContent=cell.badge;td.appendChild(span)}
-      else{td.textContent=cell.text!==undefined&&cell.text!==null?cell.text:(typeof cell==='object'?'-':cell)}
-      tr.appendChild(td);
+function renderLearnBottomRow(d){
+  var c=$('#learnBottom');c.textContent='';
+
+  var errCard=makeLearnCard('\u2718','Most Common Errors','No errors recorded');
+  var errors=d.topErrors||[];
+  if(!errors.length){var e1=document.createElement('div');e1.className='learn-card-empty';e1.textContent=errCard._empty;errCard.appendChild(e1)}
+  else{errors.slice(0,5).forEach(function(e){
+    var pat=e.pattern.length>45?e.pattern.slice(0,42)+'...':e.pattern;
+    var maxCount=errors[0].occurrence_count||1;
+    var pct=(e.occurrence_count/maxCount)*100;
+    var verdictEl=document.createElement('div');verdictEl.className='learn-verdict '+rateClass(100-(pct));verdictEl.textContent=e.category.replace(/-/g,' ');
+    var item=makeLearnItem(pat,(e.last_seen||'').split('T')[0]+' \u00B7 '+e.occurrence_count+'x',pct,e.occurrence_count+'x','var(--red)');
+    item.insertBefore(verdictEl,item.lastChild);
+    errCard.appendChild(item);
+  })}
+  c.appendChild(errCard);
+
+  var slowCard=makeLearnCard('\u23F3','Slowest Tests','No slow test data');
+  var trend=d.recentTrend||[];
+  var slowTests=[];
+  if(d.flakyTests){
+    d.flakyTests.forEach(function(f){
+      if(f.avg_duration_ms&&f.avg_duration_ms>2000){slowTests.push({name:f.test_name,dur:f.avg_duration_ms})}
     });
-    tbody.appendChild(tr);
-  });
-  tbl.appendChild(tbody);wrap.appendChild(tbl);card.appendChild(wrap);return card;
+  }
+  if(d.failingPages){
+    d.failingPages.forEach(function(p){
+      if(p.avg_load_time_ms&&p.avg_load_time_ms>3000){slowTests.push({name:p.url_path,dur:p.avg_load_time_ms})}
+    });
+  }
+  slowTests.sort(function(a,b){return b.dur-a.dur});
+  if(!slowTests.length){var e2=document.createElement('div');e2.className='learn-card-empty';e2.textContent=slowCard._empty;slowCard.appendChild(e2)}
+  else{
+    var maxDur=slowTests[0].dur;
+    slowTests.slice(0,5).forEach(function(t){
+      slowCard.appendChild(makeLearnItem(t.name,'','',durFmt(t.dur),(t.dur/maxDur)*100,t.dur>5000?'var(--red)':'var(--amber)'));
+    });
+  }
+  c.appendChild(slowCard);
 }
 
-function renderLearnFlaky(flaky){var c=$('#learningsFlaky');c.textContent='';if(!flaky.length)return;c.appendChild(buildLearnTable('Flaky Tests',['Test','Flaky Rate','Occurrences','Total Runs','Last Flaky','Avg Attempts'],flaky.map(function(f){return[{code:f.test_name},{badge:f.flaky_rate+'%',cls:f.flaky_rate>30?'fail':'flaky'},{text:f.flaky_count},{text:f.total_runs},{text:(f.last_flaky||'-').split('T')[0]},{text:f.avg_attempts}]})))}
-function renderLearnSelectors(sels){var c=$('#learningsSelectors');c.textContent='';if(!sels.length)return;c.appendChild(buildLearnTable('Unstable Selectors',['Selector','Action','Fail Rate','Uses','Tests','Page'],sels.map(function(s){var sel=s.selector.length>45?s.selector.slice(0,42)+'...':s.selector;return[{code:sel},{text:s.action_type},{badge:s.fail_rate+'%',cls:s.fail_rate>30?'fail':'flaky'},{text:s.total_uses},{text:s.used_by_tests},{text:s.page_url||'-'}]})))}
-function renderLearnPages(pages){var c=$('#learningsPages');c.textContent='';if(!pages.length)return;c.appendChild(buildLearnTable('Failing Pages',['Page','Fail Rate','Visits','Console Errors','Network Errors'],pages.map(function(p){return[{code:p.url_path},{badge:p.fail_rate+'%',cls:p.fail_rate>30?'fail':'flaky'},{text:p.total_visits},{text:p.console_errors},{text:p.network_errors}]})))}
-function renderLearnApis(apis){var c=$('#learningsApis');c.textContent='';if(!apis.length)return;c.appendChild(buildLearnTable('API Issues',['Endpoint','Error Rate','Calls','Avg Duration','Status Codes'],apis.map(function(a){var ep=a.endpoint.length>45?a.endpoint.slice(0,42)+'...':a.endpoint;var d=a.avg_duration_ms<1000?Math.round(a.avg_duration_ms)+'ms':(a.avg_duration_ms/1000).toFixed(1)+'s';return[{code:ep},{badge:a.error_rate+'%',cls:a.error_rate>20?'fail':'flaky'},{text:a.total_calls},{text:d},{text:a.status_codes||'-'}]})))}
-function renderLearnErrors(errors){var c=$('#learningsErrors');c.textContent='';if(!errors.length)return;c.appendChild(buildLearnTable('Error Patterns',['Pattern','Category','Count','First Seen','Last Seen','Example Test'],errors.map(function(e){var pat=e.pattern.length>50?e.pattern.slice(0,47)+'...':e.pattern;return[{text:pat},{badge:e.category,cls:'run'},{text:e.occurrence_count},{text:(e.first_seen||'-').split('T')[0]},{text:(e.last_seen||'-').split('T')[0]},{code:e.example_test||'-'}]})))}
-
 $('#btnRefreshLearnings').addEventListener('click',refreshLearnings);
 $('#learningsDays').addEventListener('change',refreshLearnings);
 
@@ -570,3 +794,225 @@ $('#btnExportLearnings').addEventListener('click',function(){
 /* ── Modal ── */
 function openModal(src){$('#modalImg').src=src;$('#modal').classList.add('open')}
 $('#modal').addEventListener('click',function(){$('#modal').classList.remove('open')});
+
+/* ══════════════════════════════════════════════════════════════════
+   Screenshot Replay Player — plays a run's per-step screenshots
+   as a video. Pulls frames from r.actions[].autoScreenshot|screenshot.
+   ══════════════════════════════════════════════════════════════════ */
+var REPLAY={frames:[],idx:0,playing:false,speed:1,timer:null,frameMs:1000};
+
+function buildReplayFrames(actions,run){
+  var frames=[];
+  (actions||[]).forEach(function(a,i){
+    var path=a.autoScreenshot||a.screenshot||null;
+    frames.push({
+      idx:i,
+      path:path,
+      src:path?'/api/image?path='+encodeURIComponent(path):null,
+      type:a.type||'',
+      narr:a.narrative||a.type||'',
+      duration:a.duration||0,
+      success:!!a.success,
+    });
+  });
+  if(run&&!run.success&&run.errorScreenshot){
+    frames.push({
+      idx:frames.length,
+      path:run.errorScreenshot,
+      src:'/api/image?path='+encodeURIComponent(run.errorScreenshot),
+      type:'failure',
+      narr:'Page state at failure',
+      duration:0,
+      success:false,
+    });
+  }
+  return frames;
+}
+
+function openReplay(actions,run){
+  REPLAY.frames=buildReplayFrames(actions,run);
+  if(!REPLAY.frames.length){showToast&&showToast('No screenshots to replay','warn');return}
+  REPLAY.idx=0;REPLAY.playing=false;
+  $('#replayModal').classList.add('open');
+  $('#replayModal').setAttribute('aria-hidden','false');
+  renderReplayFrame();
+  // Auto-start playback for the "video" feel
+  toggleReplayPlay(true);
+}
+
+function closeReplay(){
+  stopReplayTimer();
+  $('#replayModal').classList.remove('open');
+  $('#replayModal').setAttribute('aria-hidden','true');
+  // Free image src to avoid lingering downloads
+  $('#replayImg').src='';
+}
+
+function renderReplayFrame(){
+  var f=REPLAY.frames[REPLAY.idx];if(!f)return;
+  var modal=$('#replayModal');
+  var img=$('#replayImg');
+  if(f.src){
+    modal.classList.remove('empty');
+    if(img.src!==location.origin+f.src&&img.src!==f.src)img.src=f.src;
+  }else{
+    modal.classList.add('empty');
+    img.src='';
+  }
+  $('#replayStepNum').textContent=(REPLAY.idx+1)+' / '+REPLAY.frames.length;
+  $('#replayStepType').textContent=f.type;
+  $('#replayStepNarr').textContent=f.narr;
+  var pct=REPLAY.frames.length>1?(REPLAY.idx/(REPLAY.frames.length-1))*100:100;
+  $('#replayProgressFill').style.width=pct+'%';
+}
+
+function scheduleNextReplayFrame(){
+  stopReplayTimer();
+  if(!REPLAY.playing)return;
+  if(REPLAY.idx>=REPLAY.frames.length-1){toggleReplayPlay(false);return}
+  // Uniform pacing: 1 frame per second at 1x, scaled by speed.
+  var ms=REPLAY.frameMs/REPLAY.speed;
+  REPLAY.timer=setTimeout(function(){
+    REPLAY.idx++;
+    renderReplayFrame();
+    scheduleNextReplayFrame();
+  },ms);
+}
+
+function stopReplayTimer(){if(REPLAY.timer){clearTimeout(REPLAY.timer);REPLAY.timer=null}}
+
+function toggleReplayPlay(forceState){
+  REPLAY.playing=typeof forceState==='boolean'?forceState:!REPLAY.playing;
+  // If we're at the last frame and user hits play, restart from 0
+  if(REPLAY.playing&&REPLAY.idx>=REPLAY.frames.length-1){REPLAY.idx=0;renderReplayFrame()}
+  var btn=$('#replayPlay');if(btn)btn.innerHTML=REPLAY.playing?'❙❙':'▶';
+  if(REPLAY.playing)scheduleNextReplayFrame();else stopReplayTimer();
+}
+
+function stepReplay(delta){
+  stopReplayTimer();
+  REPLAY.idx=Math.max(0,Math.min(REPLAY.frames.length-1,REPLAY.idx+delta));
+  renderReplayFrame();
+  if(REPLAY.playing)scheduleNextReplayFrame();
+}
+
+function setReplaySpeed(s){
+  REPLAY.speed=s;
+  document.querySelectorAll('.replay-speed-btn').forEach(function(b){
+    b.classList.toggle('active',parseFloat(b.dataset.speed)===s);
+  });
+  if(REPLAY.playing){stopReplayTimer();scheduleNextReplayFrame()}
+}
+
+// Wire up controls
+$('#replayPlay').addEventListener('click',function(){toggleReplayPlay()});
+$('#replayPrev').addEventListener('click',function(){stepReplay(-1)});
+$('#replayNext').addEventListener('click',function(){stepReplay(1)});
+$('#replayClose').addEventListener('click',closeReplay);
+document.querySelectorAll('.replay-speed-btn').forEach(function(b){
+  b.addEventListener('click',function(){setReplaySpeed(parseFloat(b.dataset.speed))});
+});
+document.addEventListener('keydown',function(e){
+  if(!$('#replayModal').classList.contains('open'))return;
+  if(e.key==='Escape'){closeReplay()}
+  else if(e.key===' '){e.preventDefault();toggleReplayPlay()}
+  else if(e.key==='ArrowLeft'){stepReplay(-1)}
+  else if(e.key==='ArrowRight'){stepReplay(1)}
+});
+// Click on stage advances; click outside the image closes
+$('#replayModal').addEventListener('click',function(e){
+  if(e.target&&e.target.id==='replayModal')closeReplay();
+});
+
+// Expose to the renderer below so the storyline header can wire its button
+window.openReplay=openReplay;
+
+/* ══════════════════════════════════════════════════════════════════
+   Network tab — cross-run network query (Investigate › Network)
+   ══════════════════════════════════════════════════════════════════ */
+function refreshNetwork(){
+  var box=$('#netResults');var empty=$('#networkEmpty');
+  if(!box)return;
+  box.textContent='';
+  box.appendChild(el('div',{style:'padding:20px;text-align:center;color:var(--text3);font-size:11px'},'Loading...'));
+  var runsUrl=S.project?'/api/db/projects/'+S.project+'/runs':'/api/db/runs';
+  api(runsUrl).then(function(runs){
+    if(!Array.isArray(runs)||runs.length===0){
+      box.textContent='';if(empty)empty.style.display='block';return;
+    }
+    if(empty)empty.style.display='none';
+    var top=runs.slice(0,30);
+    var promises=top.map(function(r){
+      return api('/api/db/runs/'+r.id+'/network-logs').catch(function(){return []}).then(function(logs){
+        return {run:r,logs:Array.isArray(logs)?logs:[]};
+      });
+    });
+    Promise.all(promises).then(function(results){renderNetworkResults(box,results)});
+  }).catch(function(){box.textContent='';if(empty)empty.style.display='block'});
+}
+
+function renderNetworkResults(box,results){
+  var statusFilter=$('#netStatusFilter')?$('#netStatusFilter').value:'errors';
+  var urlFilter=($('#netUrlFilter')?$('#netUrlFilter').value:'').toLowerCase().trim();
+  var rows=[];
+  results.forEach(function(r){
+    r.logs.forEach(function(n){
+      var s=n.status||0;
+      var keep=true;
+      if(statusFilter==='errors')keep=s>=400||s===0;
+      else if(statusFilter==='slow')keep=(n.duration||0)>=1000;
+      if(keep&&urlFilter&&(n.url||'').toLowerCase().indexOf(urlFilter)<0)keep=false;
+      if(keep)rows.push({run:r.run,n:n});
+    });
+  });
+  box.textContent='';
+  if(rows.length===0){
+    box.appendChild(el('div',{style:'padding:30px;text-align:center;color:var(--text3);font-size:11px'},'No matching network records.'));
+    return;
+  }
+  rows.sort(function(a,b){return (b.n.duration||0)-(a.n.duration||0)});
+  var head=el('div',{className:'net-row net-head'},[
+    el('span',{className:'net-col-run'},'Run'),
+    el('span',{className:'net-col-method'},'Method'),
+    el('span',{className:'net-col-status'},'Status'),
+    el('span',{className:'net-col-url'},'URL'),
+    el('span',{className:'net-col-dur'},'Duration')
+  ]);
+  box.appendChild(head);
+  rows.slice(0,200).forEach(function(rr){
+    var n=rr.n;var s=n.status||0;
+    var sCls=s===0?'s5xx':s<300?'s2xx':s<400?'s3xx':s<500?'s4xx':'s5xx';
+    var mCls=(n.method||'GET').toLowerCase();
+    var row=el('div',{className:'net-row clickable',onclick:function(){
+      showView('investigate');
+      var btn=document.querySelector('.tab-btn[data-tab="runsTabHistory"]');if(btn)btn.click();
+    }},[
+      el('span',{className:'net-col-run'},'#'+rr.run.id),
+      el('span',{className:'net-col-method m-'+mCls},n.method||'GET'),
+      el('span',{className:'net-col-status st-'+sCls},String(s||'ERR')),
+      el('span',{className:'net-col-url',title:n.url||''},n.url||''),
+      el('span',{className:'net-col-dur'},dur(n.duration||0))
+    ]);
+    box.appendChild(row);
+  });
+  if(rows.length>200){
+    box.appendChild(el('div',{style:'padding:10px;text-align:center;color:var(--text3);font-size:11px'},'Showing 200 of '+rows.length+' results'));
+  }
+}
+
+(function(){
+  var btn=$('#btnRefreshNetwork');if(btn)btn.addEventListener('click',refreshNetwork);
+  var sel=$('#netStatusFilter');if(sel)sel.addEventListener('change',refreshNetwork);
+  var inp=$('#netUrlFilter');
+  if(inp){
+    var deb;
+    inp.addEventListener('input',function(){clearTimeout(deb);deb=setTimeout(refreshNetwork,200)});
+  }
+  // Lazy: only fetch first time the Network tab is clicked
+  var netTabBtn=document.querySelector('.tab-btn[data-tab="investigateTabNetwork"]');
+  if(netTabBtn){
+    netTabBtn.addEventListener('click',function(){
+      if(!netTabBtn.dataset.loaded){netTabBtn.dataset.loaded='1';refreshNetwork()}
+    });
+  }
+})();