@matware/e2e-runner 1.3.0 → 1.3.1

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

@@ -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))]),
@@ -436,10 +439,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 +465,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 +606,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);
 

package/templates/dashboard/js/websocket.js

@@ -104,6 +104,12 @@ function handleWS(m){
       var r7=getLiveRun(m);if(r7){r7.on=false;r7.done=true;r7.tests.__error={status:'failed',error:m.error}}
       showToast('Run error: '+m.error,'error');
       renderLive();break;
+    case 'test:frame':
+      if(S.screencastTest===m.name&&m.data){
+        var img=$('#screencastImg');
+        if(img)img.src='data:image/jpeg;base64,'+m.data;
+      }
+      break;
     case 'db:updated':
       refreshRuns();refreshProjects();refreshScreenshots();refreshLearnings();refreshWatch();break;
   }

package/templates/dashboard/styles/components.css

@@ -77,6 +77,13 @@ tbody tr.selected td{background:var(--accent-dim)}
 .trigger-badge.src-unknown{background:rgba(70,75,98,.15);color:var(--text3)}
 .trigger-badge .trig-icon{font-size:11px;line-height:1}
 
+/* ── Driver Badges ── */
+.driver-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;font-family:var(--mono);white-space:nowrap}
+.driver-badge.drv-browserless{background:var(--accent-dim)}
+.driver-badge.drv-cdp{background:var(--purple-dim)}
+.driver-badge.drv-steel{background:var(--amber-dim)}
+.driver-badge .drv-icon{font-size:11px;line-height:1}
+
 /* ── Filter Bar ── */
 .filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
 .filter-btn{padding:5px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .15s}

package/templates/dashboard/styles/view-live.css

@@ -11,7 +11,7 @@
 .live-stats span strong{color:var(--text)}
 .live-progress{height:3px;background:var(--surface3)}
 .live-progress-fill{height:100%;background:var(--purple);transition:width .4s;border-radius:0 2px 2px 0}
-.live-tests{padding:12px 16px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;min-height:0}
+.live-tests{padding:12px 16px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;flex:1}
 .live-test{padding:10px 12px;border-radius:var(--r);border-left:3px solid var(--text3);background:var(--surface2);font-size:11px;transition:border-color .2s,padding .25s,max-height .35s cubic-bezier(.4,0,.2,1)}
 .live-test.running{border-left-color:var(--purple)}
 .live-test.passed{border-left-color:var(--green)}
@@ -68,6 +68,29 @@
 .lr-dismiss{padding:2px 6px;font-size:9px;font-family:var(--mono);background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text3);cursor:pointer;transition:all .15s;margin-left:auto}
 .lr-dismiss:hover{color:var(--red);border-color:rgba(239,68,68,.3);background:var(--red-dim)}
 
+/* ── Screencast Panel ── */
+.live-body{display:flex;flex:1;min-height:0;overflow:hidden}
+.live-body .live-tests{flex:1;min-width:0}
+.screencast-panel{width:420px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface2)}
+.screencast-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface3)}
+.screencast-label{font-size:11px;font-weight:600;color:var(--purple);white-space:nowrap}
+.screencast-select{flex:1;padding:4px 8px;font-size:10px;font-family:var(--mono);background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text);outline:none;cursor:pointer}
+.screencast-select:focus{border-color:var(--purple)}
+.screencast-viewport{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;position:relative}
+.screencast-viewport img{max-width:100%;max-height:100%;object-fit:contain;display:none}
+.screencast-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text3);font-size:12px;font-family:var(--mono)}
+
+/* ── Screencast focus badge on test cards ── */
+.sc-focus-badge{cursor:pointer;font-size:10px;padding:1px 4px;border-radius:3px;opacity:.4;transition:all .15s}
+.sc-focus-badge:hover{opacity:.8}
+.sc-focus-badge.active{opacity:1;background:var(--purple-dim);border-radius:3px}
+
+/* ── Screencast toggle in Tests view ── */
+.screencast-toggle-label{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:14px;padding:4px 8px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);transition:all .15s;user-select:none}
+.screencast-toggle-label:hover{border-color:var(--purple);background:var(--surface3)}
+.screencast-toggle-label input{display:none}
+.screencast-toggle-label:has(input:checked){border-color:var(--purple);background:var(--purple-dim);color:var(--purple)}
+
 .live-nav-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--purple);animation:pulse 1.5s infinite}
 .spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
 .spinner-small{display:inline-block;width:8px;height:8px;border:1.5px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}

package/templates/dashboard/styles/view-runs.css

@@ -200,6 +200,42 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
 .learn-trend-chart{width:100%;height:100px;margin-bottom:20px}
 .learn-trend-chart svg{width:100%;height:100%}
 
+/* ── Learnings Dashboard (visual cards) ── */
+.learn-hero{display:flex;align-items:center;gap:24px;margin-bottom:20px;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
+.learn-hero-ring{position:relative;width:100px;height:100px;flex-shrink:0}
+.learn-hero-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
+.learn-hero-ring-bg{fill:none;stroke:var(--surface3);stroke-width:8}
+.learn-hero-ring-fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
+.learn-hero-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;font-family:var(--mono)}
+.learn-hero-stats{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
+.learn-hero-stat{text-align:center}
+.learn-hero-stat-val{font-size:18px;font-weight:700;font-family:var(--mono)}
+.learn-hero-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
+
+.learn-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
+@media(max-width:900px){.learn-cols{grid-template-columns:1fr}}
+
+.learn-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
+.learn-card-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
+.learn-card-title .lc-icon{font-size:13px}
+.learn-card-empty{font-size:11px;color:var(--text3);font-style:italic}
+
+.learn-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
+.learn-item:last-child{border-bottom:none}
+.learn-item-bar{flex:1;min-width:0}
+.learn-item-label{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
+.learn-item-label code{background:var(--surface3);padding:1px 4px;border-radius:3px;font-size:10px}
+.learn-item-sub{font-size:9px;color:var(--text3)}
+.learn-item-val{font-size:13px;font-weight:700;font-family:var(--mono);flex-shrink:0;min-width:44px;text-align:right}
+
+.learn-bar{height:4px;border-radius:2px;background:var(--surface3);overflow:hidden;margin-top:3px}
+.learn-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}
+
+.learn-verdict{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:10px;font-size:10px;font-weight:600}
+.learn-verdict.good{background:var(--green-dim);color:var(--green)}
+.learn-verdict.warn{background:var(--amber-dim);color:var(--amber)}
+.learn-verdict.bad{background:var(--red-dim);color:var(--red)}
+
 /* ── Pool Distribution ── */
 .pool-dist{display:flex;align-items:stretch;gap:0;border-radius:6px;overflow:hidden;height:22px;margin:8px 0;font-size:10px;font-weight:600;font-family:var(--mono)}
 .pool-dist-seg{display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;color:#fff;white-space:nowrap;min-width:40px;transition:flex .3s}

package/templates/dashboard/template.html

@@ -79,7 +79,11 @@
   <div class="view" id="view-tests">
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
       <div style="font-family:var(--sans);font-size:16px;font-weight:600">Tests</div>
-      <div style="display:flex;gap:8px">
+      <div style="display:flex;gap:8px;align-items:center">
+        <label class="screencast-toggle-label" title="Enable live browser screencast during test runs">
+          <input type="checkbox" id="screencastToggle" />
+          <span>&#128249;</span>
+        </label>
         <button class="btn sm primary" id="btnRunAll">&#9655; Run All</button>
       </div>
     </div>
@@ -181,13 +185,12 @@
           <button class="btn sm" id="btnRefreshLearnings">Refresh</button>
         </div>
       </div>
-      <div id="learningsOverview"></div>
-      <div id="learningsTrend"></div>
-      <div id="learningsFlaky"></div>
-      <div id="learningsSelectors"></div>
-      <div id="learningsPages"></div>
-      <div id="learningsApis"></div>
-      <div id="learningsErrors"></div>
+      <div id="learnDash">
+        <div id="learnHero"></div>
+        <div id="learnCards" class="learn-cols"></div>
+        <div id="learnTrend"></div>
+        <div id="learnBottom" class="learn-cols"></div>
+      </div>
       <div class="empty" id="learningsEmpty" style="display:none">
         <div class="empty-icon">&#9733;</div>
         <p>No learnings data yet. Run some tests to start building knowledge.</p>
@@ -214,7 +217,19 @@
         <button class="live-clear-btn" id="liveClearBtn">Clear All</button>
       </div>
       <div class="live-progress"><div class="live-progress-fill" id="liveProgressFill" style="width:0"></div></div>
-      <div class="live-tests" id="liveTests"></div>
+      <div class="live-body">
+        <div class="live-tests" id="liveTests"></div>
+        <div class="screencast-panel" id="screencastPanel" style="display:none">
+          <div class="screencast-header">
+            <span class="screencast-label">&#128249; Screencast</span>
+            <select id="screencastSelect" class="screencast-select"><option value="">Select test...</option></select>
+          </div>
+          <div class="screencast-viewport">
+            <img id="screencastImg" alt="Browser screencast" />
+            <div class="screencast-placeholder" id="screencastPlaceholder">Select a running test to watch</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="empty" id="liveEmpty">
       <div class="empty-icon" style="font-size:48px;opacity:.3">&#9679;</div>