@matware/e2e-runner 1.3.0 → 1.5.0

package/templates/dashboard/js/state.js

@@ -1,26 +1,78 @@
 /* ── Global State ── */
 var S={
-  ws:null,project:null,view:'watch',selectedRun:null,
+  ws:null,project:null,view:'overview',selectedRun:null,
   liveRuns:{},liveCollapsed:new Set(),liveSSOpen:new Set(),
   runFilter:{status:'all',search:''},
   lastLearningsData:null,
-  highlightedRunIdx:-1
+  highlightedRunIdx:-1,
+  testsSearch:'',testsExpanded:new Set(),
+  /* Screencast selection: {runId, name} | null. Composite to avoid name
+     collisions between concurrent runs. When null, the live preview
+     auto-follows the most recent frame from any running test. */
+  screencastSel:null,
+  /* Auto-follow latest frame when no test is explicitly pinned. */
+  screencastAuto:true,
+  /* {runId, name} of the test whose frame is currently shown in auto mode. */
+  screencastLast:null,
+  /* Ring buffer of recent frames for the filmstrip: {src, name, ts}. */
+  screencastFilm:[],
+  _filmTs:0
 };
+function screencastKey(s){return s?(s.runId+'::'+s.name):null}
 
-/* ── Navigation ── */
+/* ── Section labels (used in top bar breadcrumb) ── */
+var VIEW_LABELS={
+  overview:'Overview',
+  live:'Live',
+  run:'Run',
+  investigate:'Investigate',
+  insights:'Insights',
+  tools:'Tools'
+};
+
+/* ── Navigation ──
+   Nav items may carry an optional data-tab attribute that activates
+   a sub-tab inside the destination view (used by promoted sub-items
+   like Suites/Modules/Variables under "Test Definitions"). */
 $$('.nav-item').forEach(function(n){
   n.addEventListener('click',function(){
-    showView(n.dataset.view);
+    showView(n.dataset.view,n.dataset.tab);
   });
 });
-function showView(v){
+function showView(v,subTab){
   S.view=v;
-  $$('.nav-item').forEach(function(n){n.classList.toggle('active',n.dataset.view===v)});
+  // Match active state by (view + optional tab) so sub-items don't all light
+  // up just because they share the same parent view.
+  $$('.nav-item').forEach(function(n){
+    var sameView=n.dataset.view===v;
+    var sameTab=(n.dataset.tab||'')===(subTab||'');
+    n.classList.toggle('active',sameView&&sameTab);
+  });
   $$('.view').forEach(function(x){x.classList.remove('active')});
   var viewEl=$('#view-'+v);
   if(viewEl)viewEl.classList.add('active');
-  if(v==='watch'&&typeof startWatchPolling==='function')startWatchPolling();
+  // Activate the requested sub-tab inside the view
+  if(subTab&&viewEl){
+    var btn=viewEl.querySelector('.tab-btn[data-tab="'+subTab+'"]');
+    if(btn&&!btn.classList.contains('active'))btn.click();
+  }
+  if(v==='overview'&&typeof startWatchPolling==='function')startWatchPolling();
   else if(typeof stopWatchPolling==='function')stopWatchPolling();
+  // Re-render Live when switching to it so empty/active panel state matches reality
+  if(v==='live'&&typeof renderLive==='function')renderLive();
+  updateBreadcrumb();
+}
+
+/* ── Breadcrumb (top bar) ── */
+function updateBreadcrumb(subLabel){
+  var bc=$('#topbarBreadcrumb');if(!bc)return;
+  var label=VIEW_LABELS[S.view]||S.view;
+  bc.textContent='';
+  bc.appendChild(el('span',{className:'topbar-section'},label));
+  if(subLabel){
+    bc.appendChild(el('span',{className:'topbar-sep'},'›'));
+    bc.appendChild(el('span',{className:'topbar-subsection'},subLabel));
+  }
 }
 
 /* ── Inner Tabs ── */
@@ -34,6 +86,8 @@ function initTabs(){
         container.querySelectorAll('.tab-pane').forEach(function(p){p.classList.remove('active')});
         var pane=container.querySelector('#'+btn.dataset.tab);
         if(pane)pane.classList.add('active');
+        var label=(btn.firstChild&&btn.firstChild.nodeType===3?btn.firstChild.nodeValue:btn.textContent).trim();
+        updateBreadcrumb(label);
       });
     });
   });

package/templates/dashboard/js/toast.js

@@ -18,7 +18,7 @@ function showToast(message,type,timeout){
 function showEnrichedToast(message,type){
   var container=$('#toastContainer');
   var icons={success:'\u2714',error:'\u2718',info:'\u2139'};
-  var t=el('div',{className:'toast clickable '+type,onclick:function(){showView('runs');var lb=$('#runsTabLearnings');if(lb)lb.click()}},[
+  var t=el('div',{className:'toast clickable '+type,onclick:function(){showView('insights')}},[
     el('span',null,icons[type]||''),
     el('span',null,message)
   ]);

package/templates/dashboard/js/utils.js

@@ -162,6 +162,26 @@ function createTriggerBadge(source){
   return badge;
 }
 
+function createDriverBadge(driver){
+  if(!driver)return document.createTextNode('--');
+  var labels={browserless:'Browserless',cdp:'CDP',steel:'Steel',auto:'Auto'};
+  var colors={browserless:'var(--accent)',cdp:'var(--purple)',steel:'var(--amber)'};
+  var icons={browserless:'\u{1F310}',cdp:'\u{1F50C}',steel:'\u{1F6E1}'};
+  // Handle multi-driver (e.g. "browserless,steel")
+  var parts=driver.split(',');
+  if(parts.length>1){
+    var wrap=el('span',{style:'display:inline-flex;gap:4px'});
+    parts.forEach(function(d){wrap.appendChild(createDriverBadge(d.trim()))});
+    return wrap;
+  }
+  var d=driver.trim();
+  var badge=el('span',{className:'driver-badge drv-'+d,style:'color:'+(colors[d]||'var(--text3)')},[
+    el('span',{className:'drv-icon'},icons[d]||'\u2699'),
+    document.createTextNode(labels[d]||d)
+  ]);
+  return badge;
+}
+
 /* ── Pool Distribution Summary ── */
 var POOL_COLORS=['#6366f1','#22d3ee','#f59e0b','#10b981','#ef4444','#8b5cf6','#ec4899','#14b8a6'];
 function buildPoolDistribution(tests){

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

@@ -1,26 +1,229 @@
 /* ══════════════════════════════════════════════════════════════════
    Live Execution View
    ══════════════════════════════════════════════════════════════════ */
-function clearFinishedLiveRuns(){for(var k in S.liveRuns){if(S.liveRuns[k].done||!S.liveRuns[k].on)delete S.liveRuns[k]}renderLive()}
-function dismissLiveRun(rid){delete S.liveRuns[rid];renderLive()}
+function clearFinishedLiveRuns(){
+  for(var k in S.liveRuns){if(S.liveRuns[k].done||!S.liveRuns[k].on)delete S.liveRuns[k]}
+  S.screencastSel=null;S.screencastLast=null;
+  var im=$('#screencastImg');if(im){im.src='';im.style.display='none';var vp=im.closest('.screencast-viewport');if(vp)vp.classList.remove('has-frame')}
+  if(typeof resetFilmstrip==='function')resetFilmstrip();
+  renderLive();
+}
+function dismissLiveRun(rid){
+  if(S.screencastSel&&S.screencastSel.runId===rid)S.screencastSel=null;
+  if(S.screencastLast&&S.screencastLast.runId===rid)S.screencastLast=null;
+  delete S.liveRuns[rid];renderLive();
+}
 $('#liveClearBtn').addEventListener('click',clearFinishedLiveRuns);
 
+/* Pick a test to screencast. Composite key {runId, name} so concurrent
+   runs with the same test name never collide into a single <img>. */
+function selectScreencast(runId,name){
+  if(S.screencastSel&&S.screencastSel.runId===runId&&S.screencastSel.name===name){
+    // Same test clicked again — unselect (stop watching)
+    S.screencastSel=null;
+  }else{
+    S.screencastSel={runId:runId,name:name};
+    // Clear the previous frame so we don't briefly show another test's last frame
+    var im=$('#screencastImg');if(im){im.src='';im.style.display='none'}
+  }
+  renderLive();
+}
+function stopScreencast(){S.screencastSel=null;renderLive()}
+
+var _scStopBtn=$('#screencastStopBtn');
+if(_scStopBtn)_scStopBtn.addEventListener('click',stopScreencast);
+
+/* Reset the live preview + filmstrip (used when the watched test changes so
+   two tests' frames never pile up in the same feed). */
+function clearScreencastFrame(){
+  var im=$('#screencastImg');
+  if(im){im.src='';im.style.display='none';var vp=im.closest('.screencast-viewport');if(vp)vp.classList.remove('has-frame')}
+  S.screencastLast=null;
+  if(typeof resetFilmstrip==='function')resetFilmstrip();
+}
+
+/* Test chooser: "auto" follows the latest test; a specific value pins the feed
+   to that one test only. */
+(function(){
+  var sel=$('#screencastTestSelect');if(!sel)return;
+  sel.addEventListener('change',function(){
+    if(this.value==='auto'){
+      S.screencastSel=null;S.screencastAuto=true;
+    }else{
+      var i=this.value.indexOf('::');
+      S.screencastSel={runId:this.value.slice(0,i),name:this.value.slice(i+2)};
+    }
+    clearScreencastFrame();
+    renderLive();
+  });
+})();
+
+/* Keep the chooser's options in sync with the live tests — but only rebuild
+   when the set actually changes, so it doesn't clobber the open dropdown. */
+function syncScreencastSelect(){
+  var sel=$('#screencastTestSelect');if(!sel)return;
+  var items=[];
+  Object.keys(S.liveRuns).forEach(function(rid){
+    var run=S.liveRuns[rid];
+    Object.keys(run.tests||{}).forEach(function(n){
+      if(n==='__error')return;
+      items.push({key:rid+'::'+n,runId:rid,name:n,status:run.tests[n].status});
+    });
+  });
+  items.sort(function(a,b){return (a.status==='running'?0:1)-(b.status==='running'?0:1)});
+  var curKey=S.screencastSel?(S.screencastSel.runId+'::'+S.screencastSel.name):'auto';
+  var sig=curKey+'|'+items.map(function(o){return o.key+':'+o.status}).join(',');
+  if(sel.getAttribute('data-sig')===sig)return;
+  sel.setAttribute('data-sig',sig);
+  sel.textContent='';
+  sel.appendChild(el('option',{value:'auto'},'Auto — latest test'));
+  items.forEach(function(o){
+    var mark=o.status==='running'?'● ':o.status==='passed'?'✓ ':o.status==='failed'?'✕ ':'· ';
+    sel.appendChild(el('option',{value:o.key},mark+o.name));
+  });
+  sel.value=curKey;
+  if(sel.value!==curKey)sel.value='auto';
+}
+
+/* Click the live preview → open it full-size in the lightbox. */
+(function(){
+  var im=$('#screencastImg');
+  if(im)im.addEventListener('click',function(){
+    if(im.src&&im.src.indexOf('data:')===0&&typeof openModal==='function')openModal(im.src);
+  });
+})();
+
+/* Filmstrip — keep a small ring buffer of recent frames, throttled so a
+   high-rate screencast doesn't thrash the DOM. Each thumb opens full-size. */
+var SC_FILM_MAX=24, SC_FILM_THROTTLE=600;
+function pushFilmFrame(src,name,runId){
+  var now=Date.now();
+  if(now-(S._filmTs||0)<SC_FILM_THROTTLE)return;
+  S._filmTs=now;
+  S.screencastFilm.push({src:src,name:name||'',runId:runId||null,ts:now});
+  while(S.screencastFilm.length>SC_FILM_MAX)S.screencastFilm.shift();
+  renderFilmstrip();
+}
+/* Render the bottom band: recent frames in fixed slots that fit the width —
+   no horizontal scroll, so the strip stays put while frames pass through it.
+   Newest is the rightmost (marked LIVE). Any thumb opens full-size on click. */
+function renderFilmstrip(){
+  var strip=$('#screencastFilm');if(!strip)return;
+  strip.textContent='';
+  var film=S.screencastFilm||[];
+  // Pinned to one test → show only its frames (safety net against mixing).
+  if(S.screencastSel){
+    film=film.filter(function(f){return f.runId===S.screencastSel.runId&&f.name===S.screencastSel.name});
+  }
+  if(!film.length){
+    strip.appendChild(el('div',{className:'screencast-film-empty'},
+      anyLiveRunning()?'Waiting for first frame…':'No frames yet'));
+    return;
+  }
+  // Fit as many fixed-width slots as the band can show without scrolling.
+  var h=strip.clientHeight||150, gap=10;
+  var thumbW=Math.max(120,(h-28)*1.6);
+  var avail=(strip.clientWidth||900)-32;
+  var fit=Math.max(1,Math.floor((avail+gap)/(thumbW+gap)));
+  var start=Math.max(0,film.length-fit);
+  var shown=film.slice(start);
+  var live=anyLiveRunning();
+  shown.forEach(function(f,i){
+    var isLast=(i===shown.length-1);
+    var img=document.createElement('img');img.src=f.src;img.alt=f.name;img.loading='lazy';
+    var thumb=el('div',{className:'film-thumb'+(isLast&&live?' is-live':''),
+      title:(f.name||'frame')+' — click to enlarge',
+      onclick:(function(s){return function(){if(typeof openModal==='function')openModal(s)}})(f.src)},
+      [img,el('span',{className:'film-idx'},String(start+i+1))]);
+    strip.appendChild(thumb);
+  });
+}
+function resetFilmstrip(){S.screencastFilm=[];S._filmTs=0;renderFilmstrip()}
+
+function scTestStatus(sel){
+  if(!sel)return null;
+  var r=S.liveRuns[sel.runId];if(!r)return 'gone';
+  var t=r.tests&&r.tests[sel.name];if(!t)return 'gone';
+  return t.status;
+}
+
+function updateScreencastUI(){
+  var panel=$('#screencastPanel');
+  var anyActive=false;for(var k in S.liveRuns)if(S.liveRuns[k].on)anyActive=true;
+  var ctxEl=$('#screencastContext'),img=$('#screencastImg'),ph=$('#screencastPlaceholder'),stopBtn=$('#screencastStopBtn');
+  var hasFrame=img&&img.src&&img.src.indexOf('data:')===0;
+
+  var pinned=S.screencastSel;
+  var auto=!pinned&&S.screencastAuto!==false;
+
+  // Show panel while a run is active, a test is pinned, or a frame is on screen.
+  panel.style.display=(anyActive||pinned||hasFrame)?'':'none';
+
+  // Idle: nothing pinned, auto off (or nothing ever shown) and no activity.
+  if(!pinned&&!auto&&!hasFrame){
+    if(ctxEl){ctxEl.textContent='';ctxEl.className='screencast-context idle'}
+    if(stopBtn)stopBtn.style.display='none';
+    if(img)img.style.display='none';
+    if(ph){ph.style.display='flex';ph.textContent=anyActive?'Waiting for first frame…':'No tests running'}
+    return;
+  }
+
+  // Subject: the pinned test, or (auto) the test of the last frame shown.
+  var sel=pinned||S.screencastLast;
+  var status=pinned?scTestStatus(pinned):(anyActive?'running':'ended');
+  var run=sel&&S.liveRuns[sel.runId];
+  var proj=(run&&(run.project||(run.cwd?run.cwd.split('/').pop():'')))||'';
+
+  if(ctxEl){
+    ctxEl.textContent='';
+    if(proj)ctxEl.appendChild(el('span',{className:'sc-ctx-proj'},proj));
+    if(sel)ctxEl.appendChild(el('span',{className:'sc-ctx-name'},sel.name));
+    var pillTxt,pillCls;
+    if(pinned){
+      pillTxt=status==='running'?'WATCHING':status==='passed'?'ENDED · PASSED':status==='failed'?'ENDED · FAILED':'GONE';
+      pillCls=status==='running'?'running':status==='passed'?'passed':status==='failed'?'failed':'gone';
+    }else{
+      pillTxt=anyActive?'AUTO · LIVE':'AUTO · LAST FRAME';
+      pillCls=anyActive?'running':'gone';
+    }
+    ctxEl.appendChild(el('span',{className:'sc-ctx-pill '+pillCls},pillTxt));
+    ctxEl.className='screencast-context '+(((pinned&&status==='running')||(!pinned&&anyActive))?'active':'ended');
+  }
+  // Stop button only when pinned — it returns to auto-follow.
+  if(stopBtn){stopBtn.style.display=pinned?'':'none';stopBtn.title='Stop watching (return to auto-follow)'}
+
+  if(hasFrame)img.style.display='block';
+  if(ph){
+    if(hasFrame){ph.style.display='none'}
+    else{ph.style.display='flex';ph.textContent=anyActive?'Waiting for first frame…':'No frames yet'}
+  }
+  // Keep the bottom band in sync (empty hint when no frames yet).
+  if(typeof renderFilmstrip==='function')renderFilmstrip();
+  if(typeof syncScreencastSelect==='function')syncScreencastSelect();
+}
+
 function renderLive(){
   var panel=$('#livePanel'),grid=$('#liveTests'),navLive=$('#navLive'),liveEmpty=$('#liveEmpty');
   var runs=S.liveRuns;var runIds=Object.keys(runs);
 
-  if(runIds.length===0){panel.classList.remove('active');navLive.style.display='none';liveEmpty.style.display='block';$('#liveClearBtn').style.display='none';return}
+  if(runIds.length===0){
+    panel.classList.remove('active');liveEmpty.style.display='block';$('#liveClearBtn').style.display='none';
+    var lb=$('#liveBadge');lb.textContent='0';lb.className='badge idle';
+    syncTopbarLive(false,0,0);
+    return;
+  }
 
-  navLive.style.display='';liveEmpty.style.display='none';panel.classList.add('active');
+  liveEmpty.style.display='none';panel.classList.add('active');
 
   var gTotal=0,gCompleted=0,gPassed=0,gFailed=0,gActive=0,gRunning=false,gDone=true;
   runIds.forEach(function(rid){var r=runs[rid];gTotal+=r.total;gCompleted+=r.completed;gPassed+=r.passed;gFailed+=r.failed;gActive+=r.active;if(r.on)gRunning=true;if(!r.done)gDone=false});
 
   var badgeActive=0;
   runIds.forEach(function(rid){var r=runs[rid];Object.keys(r.tests).forEach(function(n){if(n!=='__error'&&r.tests[n].status==='running')badgeActive++})});
-  $('#liveBadge').textContent=gRunning?badgeActive:gCompleted;
-  $('#liveBadge').style.background=gRunning?'var(--purple-dim)':gFailed>0?'var(--red-dim)':'var(--green-dim)';
-  $('#liveBadge').style.color=gRunning?'var(--purple)':gFailed>0?'var(--red)':'var(--green)';
+  var lb2=$('#liveBadge');
+  lb2.textContent=gRunning?badgeActive:gCompleted;
+  lb2.className='badge '+(gRunning?'running':gFailed>0?'failed':'passed');
+  syncTopbarLive(gRunning,badgeActive,gFailed);
 
   $('#liveTotal').textContent=gTotal;$('#livePass').textContent=gPassed;$('#liveFail').textContent=gFailed;$('#liveActive').textContent=gActive;
   $('#liveProgressFill').style.width=(gTotal>0?gCompleted/gTotal*100:0)+'%';
@@ -115,12 +318,26 @@ function renderLive(){
         ssEl=el('div',{className:'lt-screenshots'},[toggle,ssGridEl]);
       }
 
+      // Screencast watch button \u2014 only on running tests. Composite-key aware.
+      var isWatched=S.screencastSel&&S.screencastSel.runId===rid&&S.screencastSel.name===name;
+      var scWatchBtn=null;
+      if(t.status==='running'){
+        scWatchBtn=el('button',{
+          className:'sc-watch-btn'+(isWatched?' active':''),
+          title:isWatched?'Stop watching':'Watch this test',
+          onclick:(function(_rid,_name){return function(e){e.stopPropagation();selectScreencast(_rid,_name)}})(rid,name)
+        },[
+          el('span',{className:'sc-eye'},isWatched?'\u25C9':'\u25CB'),
+          el('span',{className:'sc-watch-label'},isWatched?'WATCHING':'WATCH')
+        ]);
+      }
       var serialBadge=t.serial?el('span',{className:'serial-badge'},'Serial'):null;
       var poolBadge=t.poolUrl?el('span',{className:'pool-badge'},t.poolUrl.replace('ws://','').replace('wss://','')):null;
-      var card=el('div',{className:'live-test '+t.status+(isCollapsed?' collapsed':'')},[
+      var cardCls='live-test '+t.status+(isCollapsed?' collapsed':'')+(isWatched?' sc-watching':'');
+      var card=el('div',{className:cardCls},[
         el('div',{className:'lt-name'},[
           t.status==='running'?el('span',{className:'spinner'}):el('span',{className:'lt-icon',style:iconColor},iconText),
-          document.createTextNode(' '+name),serialBadge,poolBadge,summaryEl
+          document.createTextNode(' '+name),scWatchBtn,serialBadge,poolBadge,summaryEl
         ]),
         el('div',{className:'lt-meta'},meta),stepsEl
       ]);
@@ -140,4 +357,18 @@ function renderLive(){
     });
     grid.appendChild(testGrid);
   });
+  updateScreencastUI();
+}
+
+/* Sync the top bar Live shortcut: greyed when idle, pulsing purple when running */
+function syncTopbarLive(running,activeCount,failedCount){
+  var pill=$('#topbarLive');if(!pill)return;
+  var count=$('#topbarLiveCount');
+  pill.classList.remove('idle','running','failed','passed');
+  if(running){pill.classList.add('running');count.textContent=activeCount}
+  else if(failedCount>0){pill.classList.add('failed');count.textContent=failedCount}
+  else if(activeCount===0&&!running){pill.classList.add('idle');count.textContent='0'}
+  else{pill.classList.add('passed');count.textContent=activeCount||0}
+  // Mirror the running count to the telemetry strip
+  if(typeof renderRunningTelemetry==='function')renderRunningTelemetry(running?activeCount:0);
 }