@matware/e2e-runner 1.2.1 → 1.3.1

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

@@ -0,0 +1,294 @@
+/* ══════════════════════════════════════════════════════════════════
+   Tests View — Suites + Modules + Variables (inner tabs)
+   ══════════════════════════════════════════════════════════════════ */
+function refreshSuites(){
+  var grid=$('#suiteGrid'),empty=$('#suitesEmpty'),accordion=$('#suiteAccordionContainer');
+  grid.textContent='';
+  var moduleSection=$('#moduleSection');
+  moduleSection.textContent='';
+
+  if(S.project){
+    api('/api/db/projects/'+S.project+'/suites').then(function(suites){
+      if(!Array.isArray(suites)||suites.length===0){empty.style.display='block';empty.querySelector('p').textContent='No test suites found for this project.';return}
+      empty.style.display='none';
+      $('#badgeSuites').textContent=suites.length;
+      renderSuiteCards(grid,suites,S.project);
+    }).catch(function(){});
+    api('/api/db/projects/'+S.project+'/modules').then(function(modules){
+      renderModules(moduleSection,modules);
+    }).catch(function(){});
+  } else {
+    api('/api/db/projects').then(function(projects){
+      if(!Array.isArray(projects)||projects.length===0){empty.style.display='block';empty.querySelector('p').textContent='No projects registered yet.';return}
+      var loaded=0,hasAny=false,totalSuites=0;
+      projects.forEach(function(p){
+        api('/api/db/projects/'+p.id+'/suites').then(function(suites){
+          loaded++;
+          if(Array.isArray(suites)&&suites.length>0){
+            hasAny=true;totalSuites+=suites.length;
+            var label=el('div',{style:'grid-column:1/-1;font-family:var(--sans);font-size:13px;font-weight:600;margin-top:'+(grid.children.length?'16':'0')+'px;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--text2)'},p.name);
+            grid.appendChild(label);
+            renderSuiteCards(grid,suites,p.id);
+          }
+          if(loaded===projects.length){
+            $('#badgeSuites').textContent=totalSuites;
+            if(!hasAny){empty.style.display='block';empty.querySelector('p').textContent='No test suites found.'}
+          }
+        }).catch(function(){loaded++;});
+      });
+    }).catch(function(){});
+  }
+}
+
+function renderProjectAccordion(container,project,suites){
+  var totalTests=suites.reduce(function(sum,s){return sum+(s.testCount||0)},0);
+  var body=el('div',{className:'project-accordion-body'});
+  var innerGrid=el('div',{className:'suite-grid'});
+  renderSuiteCards(innerGrid,suites,project.id);
+  body.appendChild(innerGrid);
+
+  var header=el('div',{className:'project-accordion-header'},[
+    el('span',{className:'project-accordion-chevron'},'\u25B6'),
+    el('span',{className:'project-accordion-name'},project.name),
+    el('div',{className:'project-accordion-meta'},[
+      el('span',{className:'project-accordion-badge'},suites.length+(suites.length===1?' suite':' suites')),
+      el('span',{className:'project-accordion-badge'},totalTests+(totalTests===1?' test':' tests'))
+    ])
+  ]);
+
+  var wrapper=el('div',{className:'project-accordion'},[header,body]);
+  header.addEventListener('click',function(){wrapper.classList.toggle('open')});
+  container.appendChild(wrapper);
+}
+
+/* ── Suite Modal ── */
+var _suiteCache={};
+
+function openSuiteModal(suiteName,projectId){
+  var overlay=$('#suiteModalOverlay');
+  var body=$('#suiteModalBody');
+  $('#suiteModalName').textContent=suiteName;
+  $('#suiteModalFile').textContent=suiteName+'.json';
+  body.textContent='';
+  body.appendChild(el('div',{className:'suite-modal-loading'},'Loading\u2026'));
+  overlay.classList.add('open');
+
+  $('#suiteModalRun').onclick=function(){triggerRun(suiteName,projectId)};
+  $('#suiteModalClose').onclick=function(){overlay.classList.remove('open')};
+  overlay.addEventListener('click',function(e){if(e.target===overlay)overlay.classList.remove('open')});
+
+  var cacheKey=projectId+'::'+suiteName;
+  var p=_suiteCache[cacheKey]||api('/api/db/projects/'+projectId+'/suites/'+encodeURIComponent(suiteName));
+  _suiteCache[cacheKey]=p;
+  p.then(function(data){
+    body.textContent='';
+    if(!data||!data.tests||!data.tests.length){
+      body.appendChild(el('div',{className:'suite-modal-loading'},'No tests found'));
+      return;
+    }
+    data.tests.forEach(function(test){
+      var actionsDiv=el('div',{className:'suite-modal-test-actions'});
+      (test.actions||[]).forEach(function(a,i){
+        var detailContent;
+        if(a.selector&&(a.value||a.text)){
+          detailContent=[el('span',{className:'step-sel'},a.selector),el('span',{className:'step-arrow'},'\u2192'),el('span',{className:'step-val'},a.text||a.value)];
+        } else {
+          detailContent=a.selector||a.value||a.text||'';
+        }
+        actionsDiv.appendChild(el('div',{className:'suite-modal-step'},[
+          el('span',{className:'suite-modal-step-num'},String(i+1)),
+          el('span',{className:'suite-modal-step-type'},a.type),
+          el('span',{className:'suite-modal-step-detail'},detailContent)
+        ]));
+      });
+
+      var header=el('div',{className:'suite-modal-test-header'},[
+        el('span',{className:'suite-modal-test-chevron'},'\u25B6'),
+        el('span',{className:'suite-modal-test-name'},test.name),
+        el('span',{className:'suite-modal-test-badge'},(test.actions||[]).length+' actions')
+      ]);
+
+      var testEl=el('div',{className:'suite-modal-test'},[header,actionsDiv]);
+      if(test.expect){
+        var expectText=Array.isArray(test.expect)?test.expect.join(', '):test.expect;
+        var expectEl=el('div',{className:'suite-modal-expect'},[
+          el('span',{className:'suite-modal-expect-label'},'Expect:'),
+          document.createTextNode(expectText)
+        ]);
+        testEl.insertBefore(expectEl,actionsDiv);
+      }
+      header.addEventListener('click',function(){testEl.classList.toggle('open')});
+      body.appendChild(testEl);
+    });
+  }).catch(function(){
+    body.textContent='';
+    body.appendChild(el('div',{className:'suite-modal-loading',style:'color:var(--red)'},'Failed to load suite'));
+  });
+}
+
+function renderSuiteCards(container,suites,projectId){
+  suites.forEach(function(s){
+    var tests=el('ul',{className:'suite-card-tests'});
+    var pid=projectId;
+    (s.tests||[]).forEach(function(t){
+      var li=el('li',null,t);
+      li.addEventListener('click',function(e){
+        e.stopPropagation();
+        var existing=li.querySelector('.suite-test-steps');
+        if(existing){existing.remove();li.classList.remove('expanded');return}
+        tests.querySelectorAll('.suite-test-steps').forEach(function(d){d.remove()});
+        tests.querySelectorAll('li.expanded').forEach(function(l){l.classList.remove('expanded')});
+        var stepsDiv=el('div',{className:'suite-test-steps'});
+        stepsDiv.appendChild(el('div',{style:'color:var(--text3);font-size:10px'},'Loading...'));
+        li.appendChild(stepsDiv);
+        li.classList.add('expanded');
+        var cacheKey=pid+'::'+s.name;
+        var p=_suiteCache[cacheKey]||api('/api/db/projects/'+pid+'/suites/'+encodeURIComponent(s.name));
+        _suiteCache[cacheKey]=p;
+        p.then(function(data){
+          stepsDiv.textContent='';
+          var test=(data.tests||[]).find(function(x){return x.name===t});
+          if(!test||!test.actions||!test.actions.length){
+            stepsDiv.appendChild(el('div',{style:'color:var(--text3);font-size:10px'},'No actions'));
+            return;
+          }
+          if(test.serial){
+            var sb=el('span',{className:'serial-badge'},'Serial');
+            li.insertBefore(sb,li.querySelector('.suite-test-steps'));
+          }
+          test.actions.forEach(function(a,i){
+            var detail=a.selector||a.value||a.text||'';
+            if(a.selector&&(a.value||a.text))detail=a.selector+' \u2192 '+(a.text||a.value);
+            stepsDiv.appendChild(el('div',{className:'lt-step'},[
+              el('span',{className:'step-icon',style:'color:var(--text3)'},String(i+1)),
+              el('span',{className:'step-type'},a.type),
+              el('span',{className:'step-detail'},detail)
+            ]));
+          });
+        }).catch(function(){
+          stepsDiv.textContent='';
+          stepsDiv.appendChild(el('div',{style:'color:var(--red);font-size:10px'},'Failed to load'));
+        });
+      });
+      tests.appendChild(li);
+    });
+
+    var cardHead=el('div',{className:'suite-card-head',style:'cursor:pointer'},[
+      el('div',{className:'suite-card-icon'},'\u25B6'),
+      el('div',{className:'suite-card-info'},[
+        el('div',{className:'suite-card-name'},s.name),
+        el('div',{className:'suite-card-file'},s.file||s.name+'.json')
+      ]),
+      el('div',{className:'suite-card-count'},[
+        el('div',{className:'suite-card-count-num'},String(s.testCount||0)),
+        el('div',{className:'suite-card-count-lbl'},'tests')
+      ])
+    ]);
+    (function(name,projId){
+      cardHead.addEventListener('click',function(){openSuiteModal(name,projId)});
+    })(s.name,pid);
+
+    var card=el('div',{className:'suite-card'},[
+      cardHead,
+      el('div',{className:'suite-card-body'},[tests]),
+      el('div',{className:'suite-card-footer'},[
+        el('button',{className:'btn sm primary',onclick:function(){triggerRun(s.name,pid)}},'Run Suite')
+      ])
+    ]);
+    container.appendChild(card);
+  });
+}
+
+function renderModules(container,modules){
+  if(!Array.isArray(modules)||modules.length===0)return;
+  var title=el('div',{className:'module-section-title'},[
+    el('span',{className:'mod-icon'},'\u{1F9E9}'),
+    document.createTextNode(' Reusable Modules ('+modules.length+')')
+  ]);
+  container.appendChild(title);
+  var grid=el('div',{className:'module-grid'});
+  modules.forEach(function(m){
+    var paramsEl=null;
+    if(m.params&&m.params.length){
+      var items=m.params.map(function(p){return el('li',null,typeof p==='string'?p:(p.name||String(p)))});
+      paramsEl=el('ul',{className:'module-card-params'},items);
+    }
+    var card=el('div',{className:'module-card'},[
+      el('div',{className:'module-card-name'},m.name),
+      m.description?el('div',{className:'module-card-desc'},m.description):null,
+      el('div',{className:'module-card-meta'},[
+        el('span',null,m.actionCount+' actions'),
+        m.params&&m.params.length?el('span',null,m.params.length+' params'):null
+      ]),
+      paramsEl
+    ]);
+    grid.appendChild(card);
+  });
+  container.appendChild(grid);
+}
+
+/* ── Variables ── */
+function refreshVariables(){
+  var container=$('#variablesContainer'),empty=$('#variablesEmpty');
+  container.textContent='';
+  if(!S.project){empty.style.display='block';empty.querySelector('p').textContent='Select a project to manage variables.';return}
+  api('/api/db/projects/'+S.project+'/variables').then(function(vars){
+    if(!Array.isArray(vars)||!vars.length){empty.style.display='block';empty.querySelector('p').textContent='No variables set. Add variables to use {{var.KEY}} in your tests.';return}
+    empty.style.display='none';
+    renderVariables(vars);
+  }).catch(function(){empty.style.display='block'});
+}
+
+function renderVariables(vars){
+  var container=$('#variablesContainer');
+  var tbl=el('table',{className:'var-table'});
+  var thead=document.createElement('thead');
+  var hr=document.createElement('tr');
+  ['Key','Value','Scope','Actions'].forEach(function(h){hr.appendChild(el('th',null,h))});
+  thead.appendChild(hr);tbl.appendChild(thead);
+  var tbody=document.createElement('tbody');
+  vars.forEach(function(v){
+    var tr=document.createElement('tr');
+    tr.appendChild(el('td',null,[el('code',null,v.key)]));
+    tr.appendChild(el('td',{style:'max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'},v.is_secret?'\u2022\u2022\u2022\u2022\u2022\u2022':v.value));
+    tr.appendChild(el('td',{style:'color:var(--text3)'},v.scope||'project'));
+    var delBtn=el('button',{className:'btn sm danger',onclick:function(){
+      if(!confirm('Delete variable "'+v.key+'"?'))return;
+      fetch('/api/db/projects/'+S.project+'/variables/'+encodeURIComponent(v.key),{method:'DELETE'}).then(function(){refreshVariables();showToast('Variable deleted','success')}).catch(function(){showToast('Delete failed','error')});
+    }},'\u2715');
+    tr.appendChild(el('td',null,[delBtn]));
+    tbody.appendChild(tr);
+  });
+  tbl.appendChild(tbody);
+  container.appendChild(tbl);
+}
+
+/* ── Variable Add Form ── */
+$('#btnAddVar').addEventListener('click',function(){
+  var form=$('#varAddForm');
+  if(form.style.display==='none'){
+    form.style.display='';
+    form.textContent='';
+    var keyInput=el('input',{type:'text',placeholder:'KEY',style:'margin-right:8px;width:120px'});
+    var valInput=el('input',{type:'text',placeholder:'Value',style:'margin-right:8px;width:200px'});
+    var secretCheck=el('input',{type:'checkbox',style:'margin-right:4px'});
+    var saveBtn=el('button',{className:'btn sm primary',onclick:function(){
+      var k=keyInput.value.trim(),v=valInput.value;
+      if(!k){showToast('Key is required','error');return}
+      if(!S.project){showToast('Select a project first','error');return}
+      fetch('/api/db/projects/'+S.project+'/variables',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key:k,value:v,is_secret:secretCheck.checked})}).then(function(r){return r.json()}).then(function(){
+        form.style.display='none';refreshVariables();showToast('Variable saved','success');
+      }).catch(function(){showToast('Save failed','error')});
+    }},'Save');
+    var cancelBtn=el('button',{className:'btn sm',onclick:function(){form.style.display='none'}},'Cancel');
+    form.appendChild(el('div',{className:'var-add-form',style:'display:flex;align-items:center;gap:8px;flex-wrap:wrap'},[
+      keyInput,valInput,
+      el('label',{style:'font-size:11px;color:var(--text2);display:flex;align-items:center;gap:4px'},[secretCheck,document.createTextNode('Secret')]),
+      saveBtn,cancelBtn
+    ]));
+  } else {
+    form.style.display='none';
+  }
+});
+
+$('#btnRunAll').addEventListener('click',function(){triggerRun()});

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

@@ -0,0 +1,242 @@
+/* ══════════════════════════════════════════════════════════════════
+   Watch View — Project Cards + Sparklines + Event Log
+   ══════════════════════════════════════════════════════════════════ */
+var _watchInterval=null;
+var _countdownInterval=null;
+var _watchData=null;
+
+function refreshWatch(){
+  // Fetch projects overview (sparklines)
+  api('/api/db/projects/overview').then(function(projects){
+    if(!Array.isArray(projects)||!projects.length){
+      $('#watchCards').textContent='';
+      $('#watchEmpty').style.display='block';
+      return;
+    }
+    $('#watchEmpty').style.display='none';
+    _watchData=projects;
+    renderWatchCards(projects);
+  }).catch(function(){
+    // Fallback: use regular projects list
+    api('/api/db/projects').then(function(projects){
+      if(!Array.isArray(projects)||!projects.length){$('#watchEmpty').style.display='block';return}
+      $('#watchEmpty').style.display='none';
+      _watchData=projects.map(function(p){return Object.assign({},p,{sparkline:[]})});
+      renderWatchCards(_watchData);
+    }).catch(function(){});
+  });
+
+  // Fetch event log (recent runs)
+  var runsUrl=S.project?'/api/db/projects/'+S.project+'/runs':'/api/db/runs';
+  api(runsUrl).then(function(runs){
+    renderEventLog(runs);
+  }).catch(function(){});
+
+  // Fetch watch jobs status for countdown
+  fetch('/api/watch/status').then(function(r){
+    if(!r.ok)throw new Error('not running');
+    return r.json();
+  }).then(function(jobs){
+    applyWatchJobData(jobs);
+  }).catch(function(){
+    // Watch engine not running — that's fine, cards still show
+  });
+}
+
+function renderWatchCards(projects){
+  var container=$('#watchCards');
+  container.textContent='';
+
+  projects.forEach(function(p){
+    var sparkline=p.sparkline||[];
+    var lastRate=sparkline.length?sparkline[sparkline.length-1]:null;
+    var rateColor=lastRate===null?'dim':lastRate>=90?'green':lastRate>=70?'amber':'red';
+    var dotColor=rateColor;
+
+    var sparkEl=el('div',{className:'watch-sparkline'});
+    if(sparkline.length>=2){
+      sparkEl.appendChild(buildSparkline(sparkline));
+    } else {
+      sparkEl.style.cssText='height:40px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:10px';
+      sparkEl.textContent=sparkline.length?'1 run':'No runs yet';
+    }
+
+    var triggerBtn=el('button',{className:'btn sm',onclick:function(e){e.stopPropagation();triggerRun(null,p.id)}},'\u25B6');
+    var detailBtn=el('button',{className:'btn sm',onclick:function(e){
+      e.stopPropagation();
+      S.project=p.id;$('#projectSelect').value=p.id;
+      showView('runs');
+      refreshRuns();refreshSuites();
+    }},'\uD83D\uDD0D');
+
+    var card=el('div',{className:'watch-card',id:'watch-card-'+p.id},[
+      el('div',{className:'watch-card-header'},[
+        el('div',{className:'watch-card-name'},p.name),
+        el('div',{className:'watch-card-icons'},[triggerBtn,detailBtn])
+      ]),
+      sparkEl,
+      el('div',{className:'watch-card-footer'},[
+        el('div',{className:'watch-card-status'},[
+          el('span',{className:'status-dot '+dotColor}),
+          el('span',{className:'watch-card-rate '+rateColor},lastRate!==null?lastRate+'%':'—')
+        ]),
+        el('span',{style:'color:var(--text3);font-size:10px'},p.runCount?p.runCount+' runs':'')
+      ]),
+      el('div',{className:'watch-card-meta'},[
+        el('span',{className:'watch-card-countdown',id:'watch-countdown-'+p.id},''),
+        p.lastCommit?el('span',{className:'watch-card-commit'},'\u{1F4CB} '+p.lastCommit.slice(0,8)):null
+      ])
+    ]);
+
+    container.appendChild(card);
+  });
+}
+
+function buildSparkline(data){
+  var ns='http://www.w3.org/2000/svg';
+  var svg=document.createElementNS(ns,'svg');
+  svg.setAttribute('viewBox','0 0 200 40');
+  svg.setAttribute('preserveAspectRatio','none');
+
+  var n=data.length;
+  var w=200/(n-1||1);
+  var pts=data.map(function(v,i){return (i*w)+','+(40-v*0.4)}).join(' ');
+
+  // Gradient fill
+  var poly=document.createElementNS(ns,'polygon');
+  poly.setAttribute('points','0,40 '+pts+' '+((n-1)*w)+',40');
+  poly.setAttribute('fill','var(--accent-dim)');
+  svg.appendChild(poly);
+
+  // Line
+  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);
+
+  // End dot
+  if(n>0){
+    var lastVal=data[n-1];
+    var dotColor=lastVal>=90?'var(--green)':lastVal>=70?'var(--amber)':'var(--red)';
+    var circle=document.createElementNS(ns,'circle');
+    circle.setAttribute('cx',''+(n-1)*w);
+    circle.setAttribute('cy',''+(40-lastVal*0.4));
+    circle.setAttribute('r','3');
+    circle.setAttribute('fill',dotColor);
+    svg.appendChild(circle);
+  }
+
+  return svg;
+}
+
+function applyWatchJobData(jobs){
+  if(!jobs||!jobs.length)return;
+  jobs.forEach(function(j){
+    // Find matching card by project name
+    if(!_watchData)return;
+    var match=_watchData.find(function(p){return p.name===j.name||p.cwd===j.cwd});
+    if(!match)return;
+    var cdEl=$('#watch-countdown-'+match.id);
+    if(cdEl&&j.nextRunAt){
+      cdEl.dataset.nextRunAt=j.nextRunAt;
+      updateCountdown(cdEl);
+    }
+  });
+  startCountdownTimer();
+}
+
+function startCountdownTimer(){
+  if(_countdownInterval)return;
+  _countdownInterval=setInterval(function(){
+    $$('.watch-card-countdown[data-next-run-at]').forEach(updateCountdown);
+  },1000);
+}
+
+function updateCountdown(cdEl){
+  var next=cdEl.dataset.nextRunAt;
+  if(!next){cdEl.textContent='';return}
+  var diff=new Date(next)-Date.now();
+  if(diff<=0){cdEl.textContent='\u23F1 Running...';return}
+  var m=Math.floor(diff/60000);
+  var s=Math.floor((diff%60000)/1000);
+  cdEl.textContent='\u23F1 Next: '+m+'m '+String(s).padStart(2,'0')+'s';
+}
+
+function renderEventLog(runs){
+  var container=$('#watchEventLog');
+  if(!container)return;
+  container.textContent='';
+
+  if(!Array.isArray(runs)||!runs.length){
+    container.appendChild(el('div',{style:'padding:16px;text-align:center;color:var(--text3);font-size:11px'},'No runs recorded yet.'));
+    return;
+  }
+
+  // Column header row
+  container.appendChild(el('div',{className:'watch-event-row we-header'},[
+    el('span',null,'Time'),
+    el('span',null,'Project'),
+    el('span',null,'Suite'),
+    el('span',{style:'justify-self:center'},'Status'),
+    el('span',{style:'text-align:center'},'Tests'),
+    el('span',{style:'text-align:right'},'Rate'),
+    el('span',{style:'text-align:right'},'Duration'),
+    el('span',{style:'text-align:right'},'Source')
+  ]));
+
+  var recent=runs.slice(0,30);
+  recent.forEach(function(r){
+    var rate=parseFloat(r.pass_rate)||0;
+    var badgeCls=r.failed>0?'fail':'pass';
+    var badgeText=r.failed>0?'FAIL':'PASS';
+
+    // Test counts: "5/5" or "3/5 (2 fail)"
+    var countsText=r.passed+'/'+r.total;
+    var countsParts=[el('span',{className:'we-counts-ok'},String(r.passed))];
+    countsParts.push(document.createTextNode('/'+r.total));
+    if(r.failed>0){
+      countsParts.push(document.createTextNode(' ('));
+      countsParts.push(el('span',{style:'color:var(--red)'},r.failed+' fail'));
+      countsParts.push(document.createTextNode(')'));
+    }
+
+    // Trigger badge
+    var triggerIcon={'cli':'\u2318','dashboard':'\uD83D\uDCBB','mcp':'\u2699','watch':'\u23F1','api':'\u26A1'};
+    var trigSrc=r.triggered_by||'cli';
+    var trigEl=el('span',{className:'we-trigger',title:'Triggered by: '+trigSrc},(triggerIcon[trigSrc]||'\u2318')+' '+trigSrc);
+
+    var row=el('div',{className:'watch-event-row',style:'cursor:pointer'},[
+      el('span',{className:'watch-event-time'},fdate(r.generated_at)),
+      el('span',{className:'watch-event-project'},r.project_name||'—'),
+      el('span',{className:'watch-event-suite'},r.suite_name||'all'),
+      el('span',{className:'watch-event-result'},[el('span',{className:'badge '+badgeCls},badgeText)]),
+      el('span',{className:'watch-event-counts'},countsParts),
+      el('span',{className:'watch-event-rate'},rate>0?rate.toFixed(0)+'%':'—'),
+      el('span',{className:'watch-event-duration'},r.duration?dur(r.duration):'—'),
+      trigEl
+    ]);
+
+    // Click to navigate to run detail
+    (function(run){
+      row.addEventListener('click',function(){
+        S.project=run.project_id;$('#projectSelect').value=run.project_id;
+        showView('runs');
+        refreshRuns();
+      });
+    })(r);
+
+    container.appendChild(row);
+  });
+}
+
+function startWatchPolling(){
+  if(_watchInterval)return;
+  refreshWatch();
+  _watchInterval=setInterval(refreshWatch,10000);
+}
+function stopWatchPolling(){
+  if(_watchInterval){clearInterval(_watchInterval);_watchInterval=null}
+  if(_countdownInterval){clearInterval(_countdownInterval);_countdownInterval=null}
+}

package/templates/dashboard/js/websocket.js

@@ -0,0 +1,116 @@
+/* ── WebSocket ── */
+function connectWS(){
+  var proto=location.protocol==='https:'?'wss:':'ws:';
+  S.ws=new WebSocket(proto+'//'+location.host);
+  S.ws.onopen=function(){
+    $('#wsDot').style.background='var(--green)';$('#wsLabel').textContent='ws: connected';$('#wsLabel').style.color='var(--green)';
+    showToast('WebSocket connected','info');
+  };
+  S.ws.onclose=function(){
+    $('#wsDot').style.background='var(--red)';$('#wsLabel').textContent='ws: disconnected';$('#wsLabel').style.color='var(--text3)';
+    setTimeout(connectWS,3000);
+  };
+  S.ws.onerror=function(){};
+  S.ws.onmessage=function(e){try{handleWS(JSON.parse(e.data))}catch(x){}};
+}
+
+function getLiveRun(m){
+  var rid=m.runId;if(!rid)return null;
+  if(!S.liveRuns[rid])S.liveRuns[rid]={on:true,done:false,total:0,completed:0,passed:0,failed:0,active:0,tests:{},project:m.project||null,cwd:m.cwd||null,triggeredBy:m.triggeredBy||null,runId:rid,_lastEvent:Date.now()};
+  S.liveRuns[rid]._lastEvent=Date.now();
+  return S.liveRuns[rid];
+}
+function anyLiveRunning(){for(var k in S.liveRuns)if(S.liveRuns[k].on)return true;return false}
+
+setInterval(function(){
+  var changed=false;
+  for(var k in S.liveRuns){
+    var r=S.liveRuns[k];
+    var age=Date.now()-r._lastEvent;
+    if(r.on&&!r.done){
+      if(r.total===0&&age>10000){r.on=false;r.done=true;r.stale=true;r.active=0;changed=true}
+      else if(r.completed>=r.total&&r.total>0&&age>15000){r.on=false;r.done=true;r.active=0;changed=true}
+      else if(age>30000){r.on=false;r.done=true;r.stale=true;r.active=0;changed=true}
+    }
+    if(r.done&&r.stale&&r.total===0&&age>15000){delete S.liveRuns[k];changed=true}
+    else if(r.done&&age>120000){delete S.liveRuns[k];changed=true}
+  }
+  if(changed)renderLive();
+},5000);
+
+function handleWS(m){
+  switch(m.event){
+    case 'pool:status':renderPool(m.data);break;
+    case 'run:start':
+      for(var dk in S.liveRuns){if(S.liveRuns[dk].done)delete S.liveRuns[dk]}
+      var r=getLiveRun(m);
+      r.total=m.total;r.on=true;r.done=false;
+      S.liveCollapsed=new Set();S.liveSSOpen=new Set();
+      showView('live');renderLive();break;
+    case 'test:start':
+      var r2=getLiveRun(m);if(!r2)break;
+      r2.active=m.activeCount;
+      r2.tests[m.name]={status:'running',actions:0,totalActions:0,error:null,actionLog:[],screenshots:[],serial:m.serial||false};
+      renderLive();break;
+    case 'test:pool':
+      var rp=getLiveRun(m);if(!rp||!rp.tests[m.name])break;
+      rp.tests[m.name].poolUrl=m.poolUrl||null;
+      rp.tests[m.name].actionLog.unshift({type:'pool',narrative:'\uD83D\uDD17 '+m.name+' \u2192 '+(m.poolUrl||'').replace('ws://','').replace('wss://',''),success:true,duration:null,isPoolLog:true});
+      renderLive();break;
+    case 'test:action':
+      var r3=getLiveRun(m);if(!r3||!r3.tests[m.name])break;
+      var t=r3.tests[m.name];
+      t.actions=m.actionIndex+1;t.totalActions=m.totalActions;t.actionType=m.action.type;
+      t.actionLog.push({type:m.action.type,selector:m.action.selector||null,value:m.action.value||null,text:m.action.text||null,success:m.success,duration:m.duration,error:m.error||null,narrative:m.narrative||null,actionRetries:m.action.retries||0});
+      if(m.screenshotPath)t.screenshots.push(m.screenshotPath);
+      renderLive();break;
+    case 'test:retry':
+      var r4=getLiveRun(m);if(!r4||!r4.tests[m.name])break;
+      r4.tests[m.name].retry=m.attempt+'/'+m.maxAttempts;
+      renderLive();break;
+    case 'test:complete':
+      var r5=getLiveRun(m);if(!r5)break;
+      r5.completed++;
+      if(m.success){r5.passed++;if(r5.tests[m.name])r5.tests[m.name].status='passed'}
+      else{r5.failed++;if(r5.tests[m.name]){r5.tests[m.name].status='failed';r5.tests[m.name].error=m.error}}
+      if(r5.tests[m.name]){
+        r5.tests[m.name].duration=m.duration;
+        if(m.screenshots&&m.screenshots.length)r5.tests[m.name].screenshots=m.screenshots;
+        if(m.errorScreenshot)r5.tests[m.name].errorScreenshot=m.errorScreenshot;
+        if(m.networkLogs&&m.networkLogs.length)r5.tests[m.name].networkLogs=m.networkLogs;
+        if(m.poolUrl)r5.tests[m.name].poolUrl=m.poolUrl;
+      }
+      r5.active=Math.max(0,r5.active-1);
+      renderLive();break;
+    case 'run:complete':
+      var r6=getLiveRun(m);if(r6){r6.on=false;r6.done=true;r6.active=0}
+      var summary=m.summary||{};
+      var baseMsg='Run complete: '+(summary.failed>0?summary.failed+' failed':'all '+(summary.total||0)+' passed');
+      var baseType=summary.failed>0?'error':'success';
+      var healthUrl=S.project?'/api/db/projects/'+S.project+'/health':'/api/db/health';
+      fetch(healthUrl).then(function(r){return r.json()}).then(function(h){
+        if(h&&h.passRate!==undefined){
+          var extra='. Pass rate: '+h.passRate+'%';
+          if(h.passRateTrend==='declining')extra+=' (declining, '+h.trendDelta+'%)';
+          else if(h.passRateTrend==='improving')extra+=' (improving, +'+h.trendDelta+'%)';
+          if(h.flakyCount>0)extra+='. '+h.flakyCount+' flaky test(s)';
+          showEnrichedToast(baseMsg+extra,baseType);
+        } else {
+          showToast(baseMsg,baseType);
+        }
+      }).catch(function(){showToast(baseMsg,baseType)});
+      renderLive();refreshRuns();refreshProjects();refreshWatch();break;
+    case 'run:error':
+      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;
+  }
+}