@matware/e2e-runner 1.3.1 → 1.5.1

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

@@ -4,43 +4,67 @@
 function refreshSuites(){
   var grid=$('#suiteGrid'),empty=$('#suitesEmpty'),accordion=$('#suiteAccordionContainer');
   grid.textContent='';
+  accordion.textContent='';
   var moduleSection=$('#moduleSection');
   moduleSection.textContent='';
+  var toolbar=$('#suitesToolbar');
 
   if(S.project){
+    // Keep the toolbar visible so users can still search suites within a
+    // single project — only the expand/collapse buttons are dropped since
+    // there are no project accordions to expand in single-project view.
+    if(toolbar){
+      toolbar.style.display='';
+      toolbar.classList.add('single-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);
+      applyTestsSearch();
     }).catch(function(){});
     api('/api/db/projects/'+S.project+'/modules').then(function(modules){
       renderModules(moduleSection,modules);
+      applyTestsSearch();
     }).catch(function(){});
   } else {
+    if(toolbar){toolbar.style.display='';toolbar.classList.remove('single-project')}
     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){
+      var sorted=projects.slice().sort(function(a,b){return (a.name||'').localeCompare(b.name||'')});
+      var pending=sorted.length,results=[];
+      sorted.forEach(function(p,idx){
         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++;});
+          results[idx]={project:p,suites:Array.isArray(suites)?suites:[]};
+        }).catch(function(){
+          results[idx]={project:p,suites:[]};
+        }).then(function(){
+          pending--;
+          if(pending===0)renderAllProjectAccordions(results);
+        });
       });
     }).catch(function(){});
   }
 }
 
-function renderProjectAccordion(container,project,suites){
+function renderAllProjectAccordions(results){
+  var container=$('#suiteAccordionContainer');
+  var empty=$('#suitesEmpty');
+  container.textContent='';
+  var withSuites=results.filter(function(r){return r.suites.length>0});
+  var totalSuites=withSuites.reduce(function(s,r){return s+r.suites.length},0);
+  $('#badgeSuites').textContent=totalSuites;
+  if(withSuites.length===0){empty.style.display='block';empty.querySelector('p').textContent='No test suites found.';return}
+  empty.style.display='none';
+  var autoExpand=withSuites.length===1;
+  withSuites.forEach(function(r){
+    renderProjectAccordion(container,r.project,r.suites,autoExpand||S.testsExpanded.has(r.project.id));
+  });
+  applyTestsSearch();
+}
+
+function renderProjectAccordion(container,project,suites,startOpen){
   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'});
@@ -57,10 +81,104 @@ function renderProjectAccordion(container,project,suites){
   ]);
 
   var wrapper=el('div',{className:'project-accordion'},[header,body]);
-  header.addEventListener('click',function(){wrapper.classList.toggle('open')});
+  wrapper.dataset.projectId=String(project.id);
+  wrapper.dataset.projectName=(project.name||'').toLowerCase();
+  if(startOpen)wrapper.classList.add('open');
+  header.addEventListener('click',function(){
+    wrapper.classList.toggle('open');
+    if(wrapper.classList.contains('open'))S.testsExpanded.add(project.id);
+    else S.testsExpanded.delete(project.id);
+  });
   container.appendChild(wrapper);
 }
 
+/* ── Search / filter ── */
+function applyTestsSearch(){
+  var q=(S.testsSearch||'').trim().toLowerCase();
+  // Single-project mode: filter suite cards in #suiteGrid + module cards
+  // in #moduleSection. The toolbar count reflects both.
+  if(S.project){
+    var visSuites=0,visModules=0;
+    $$('#suiteGrid .suite-card').forEach(function(card){
+      var sname=(card.dataset.suiteName||'').toLowerCase();
+      var tests=card.querySelectorAll('.suite-card-tests li');
+      var testHit=false;
+      tests.forEach(function(li){
+        var raw=(li.firstChild&&li.firstChild.nodeType===3?li.firstChild.nodeValue:li.textContent)||'';
+        var tname=raw.toLowerCase();
+        var matches=!q||sname.indexOf(q)>=0||tname.indexOf(q)>=0;
+        li.style.display=matches?'':'none';
+        if(q&&tname.indexOf(q)>=0)testHit=true;
+      });
+      var show=!q||sname.indexOf(q)>=0||testHit;
+      card.style.display=show?'':'none';
+      if(show)visSuites++;
+    });
+    $$('#moduleSection .module-card').forEach(function(card){
+      var nm=(card.querySelector('.module-card-name')?.textContent||'').toLowerCase();
+      var desc=(card.querySelector('.module-card-desc')?.textContent||'').toLowerCase();
+      var show=!q||nm.indexOf(q)>=0||desc.indexOf(q)>=0;
+      card.style.display=show?'':'none';
+      if(show)visModules++;
+    });
+    var t=$('#module-section-title')||document.querySelector('.module-section-title');
+    var countEl=$('#suitesToolbarCount');
+    if(countEl){
+      if(q)countEl.textContent=visSuites+' suites · '+visModules+' modules';
+      else countEl.textContent='';
+    }
+    return;
+  }
+  // Multi-project (All Projects) mode: filter accordions and their children
+  var accordions=$$('#suiteAccordionContainer .project-accordion');
+  var visibleProjects=0,visibleSuites=0;
+
+  accordions.forEach(function(acc){
+    var pname=acc.dataset.projectName||'';
+    var projectMatches=q&&pname.indexOf(q)>=0;
+    var anySuiteVisible=false;
+    var cards=acc.querySelectorAll('.suite-card');
+    cards.forEach(function(card){
+      var sname=(card.dataset.suiteName||'').toLowerCase();
+      var tests=card.querySelectorAll('.suite-card-tests li');
+      var testMatches=0;
+      tests.forEach(function(li){
+        var raw=(li.firstChild&&li.firstChild.nodeType===3?li.firstChild.nodeValue:li.textContent)||'';
+        var tname=raw.toLowerCase();
+        var matches=!q||projectMatches||sname.indexOf(q)>=0||tname.indexOf(q)>=0;
+        li.style.display=matches?'':'none';
+        if(matches&&q&&tname.indexOf(q)>=0)testMatches++;
+      });
+      var suiteVisible=!q||projectMatches||sname.indexOf(q)>=0||testMatches>0;
+      card.style.display=suiteVisible?'':'none';
+      if(suiteVisible){anySuiteVisible=true;visibleSuites++}
+    });
+    var projectVisible=!q||projectMatches||anySuiteVisible;
+    acc.style.display=projectVisible?'':'none';
+    if(projectVisible)visibleProjects++;
+    if(q&&projectVisible&&anySuiteVisible)acc.classList.add('open');
+    else if(q&&!projectVisible)acc.classList.remove('open');
+  });
+
+  var countEl=$('#suitesToolbarCount');
+  if(countEl){
+    if(q)countEl.textContent=visibleSuites+' suites · '+visibleProjects+' projects';
+    else countEl.textContent='';
+  }
+}
+
+function setSuiteAccordionsOpen(open){
+  $$('#suiteAccordionContainer .project-accordion').forEach(function(acc){
+    if(acc.style.display==='none')return;
+    acc.classList.toggle('open',!!open);
+    var pid=parseInt(acc.dataset.projectId,10);
+    if(!isNaN(pid)){
+      if(open)S.testsExpanded.add(pid);
+      else S.testsExpanded.delete(pid);
+    }
+  });
+}
+
 /* ── Suite Modal ── */
 var _suiteCache={};
 
@@ -195,6 +313,7 @@ function renderSuiteCards(container,suites,projectId){
         el('button',{className:'btn sm primary',onclick:function(){triggerRun(s.name,pid)}},'Run Suite')
       ])
     ]);
+    card.dataset.suiteName=s.name;
     container.appendChild(card);
   });
 }
@@ -292,3 +411,25 @@ $('#btnAddVar').addEventListener('click',function(){
 });
 
 $('#btnRunAll').addEventListener('click',function(){triggerRun()});
+
+/* ── Tests toolbar (search + expand/collapse all) ── */
+(function(){
+  var input=$('#suitesSearchInput');
+  if(input){
+    var debounce;
+    input.addEventListener('input',function(){
+      clearTimeout(debounce);
+      debounce=setTimeout(function(){
+        S.testsSearch=input.value||'';
+        applyTestsSearch();
+      },90);
+    });
+    input.addEventListener('keydown',function(e){
+      if(e.key==='Escape'){input.value='';S.testsSearch='';applyTestsSearch()}
+    });
+  }
+  var bExp=$('#btnExpandAllSuites');
+  if(bExp)bExp.addEventListener('click',function(){setSuiteAccordionsOpen(true)});
+  var bCol=$('#btnCollapseAllSuites');
+  if(bCol)bCol.addEventListener('click',function(){setSuiteAccordionsOpen(false)});
+})();

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

@@ -0,0 +1,234 @@
+/* ══════════════════════════════════════════════════════════════════
+   Tools View — Module Analysis, Capture, Analyze, Verify, Agent prompts
+   ══════════════════════════════════════════════════════════════════ */
+
+/* ── Module Analysis ─────────────────────────────────────────── */
+var MA_LAST = null;
+
+function refreshModuleAnalysis(){
+  var body=$('#modAnalysisBody');var btnCopy=$('#btnCopyModulePrompt');
+  if(!body)return;
+  if(!S.project){
+    body.innerHTML='';
+    body.appendChild(el('div',{className:'tool-empty'},'Pick a project from the sidebar, then click Run analysis.'));
+    if(btnCopy)btnCopy.disabled=true;
+    return;
+  }
+  body.innerHTML='';
+  body.appendChild(el('div',{className:'tool-empty'},'Running analysis…'));
+  api('/api/tools/module-analysis/'+S.project).then(function(data){
+    if(data&&data.error){
+      body.innerHTML='';
+      body.appendChild(el('div',{className:'tool-result is-error'},'Error: '+data.error));
+      if(btnCopy)btnCopy.disabled=true;
+      return;
+    }
+    MA_LAST=data;
+    if(btnCopy)btnCopy.disabled=!data.agentPrompt;
+    renderModuleAnalysis(body,data);
+  }).catch(function(e){
+    body.innerHTML='';
+    body.appendChild(el('div',{className:'tool-result is-error'},'Request failed: '+(e&&e.message||'unknown')));
+  });
+}
+
+function renderModuleAnalysis(body,data){
+  body.innerHTML='';
+  var s=data.summary||{};
+  var summary=el('div',{className:'mod-summary'},[
+    summaryCell('Tests',s.testCount),
+    summaryCell('Modules',s.moduleCount),
+    summaryCell('Candidates',s.candidateCount,'signal'),
+    summaryCell('Unused',s.unusedModules,s.unusedModules>0?'warn':''),
+  ]);
+  body.appendChild(summary);
+
+  // Extraction candidates
+  if(data.candidates&&data.candidates.length){
+    body.appendChild(el('div',{className:'mod-section-title'},[
+      document.createTextNode('Extraction candidates'),
+      el('span',{className:'count'},String(data.candidates.length))
+    ]));
+    data.candidates.forEach(function(c){
+      body.appendChild(renderCandidateRow(c));
+    });
+  }else{
+    body.appendChild(el('div',{className:'mod-section-title'},[
+      document.createTextNode('Extraction candidates'),
+      el('span',{className:'count'},'0')
+    ]));
+    body.appendChild(el('div',{className:'tool-empty'},'No duplicated 3-8-action sequences found across tests. Your suite is well factored — or maybe under-modularized?'));
+  }
+
+  // Existing modules
+  if(data.modules&&data.modules.length){
+    body.appendChild(el('div',{className:'mod-section-title'},[
+      document.createTextNode('Existing modules'),
+      el('span',{className:'count'},String(data.modules.length))
+    ]));
+    var sorted=data.modules.slice().sort(function(a,b){return (b.usageCount||0)-(a.usageCount||0)});
+    sorted.forEach(function(m){body.appendChild(renderModuleRow(m))});
+  }
+}
+
+function summaryCell(label,value,cls){
+  return el('div',{className:'mod-summary-cell'+(cls?' '+cls:'')},[
+    el('div',{className:'mod-summary-cell-lbl'},label),
+    el('div',{className:'mod-summary-cell-val'},String(value!=null?value:'—'))
+  ]);
+}
+
+function renderModuleRow(m){
+  var cls='mod-row'+(m.usageCount===0?' unused':'');
+  var metaItems=[
+    el('span',null,(m.actionCount||0)+' actions'),
+    el('span',null,(m.params&&m.params.length||0)+' params'),
+  ];
+  if(m.usedBy&&m.usedBy.length)metaItems.push(el('span',null,'used by: '+m.usedBy.slice(0,3).join(', ')+(m.usedBy.length>3?' +'+(m.usedBy.length-3):'')));
+  return el('div',{className:cls},[
+    el('div',{className:'mod-row-main'},[
+      el('div',{className:'mod-row-name'},m.name),
+      m.description?el('div',{className:'mod-row-desc'},m.description):null,
+      el('div',{className:'mod-row-meta'},metaItems)
+    ]),
+    el('div',{className:'mod-row-usage'},(m.usageCount||0)+'×')
+  ]);
+}
+
+function renderCandidateRow(c){
+  var preview=(c.sample||[]).map(function(a,i){
+    var bits=[String(i+1).padStart(2,'0')+'.',a.type||'?'];
+    if(a.selector)bits.push('@'+a.selector);
+    if(a.text!=null)bits.push('"'+String(a.text).slice(0,40)+'"');
+    if(a.value!=null&&!a.text)bits.push('= '+String(a.value).slice(0,40));
+    return bits.join(' ');
+  }).join('\n');
+  var usedBy=(c.usedBy||[]).map(function(u){return u.suite+' › '+u.test+(u.occurrences>1?' (×'+u.occurrences+')':'')}).join(', ');
+  return el('div',{className:'cand-row'},[
+    el('div',{className:'cand-row-head'},[
+      el('div',{className:'cand-name'},'Suggested: '+(c.suggestedName||'module')),
+      el('div',{className:'cand-stats'},[
+        document.createTextNode((c.length||0)+' actions · '),
+        el('strong',null,(c.testCount||0)+' tests'),
+        document.createTextNode(' · '),
+        el('strong',null,(c.occurrenceCount||0)+' occurrences')
+      ])
+    ]),
+    el('div',{className:'cand-actions-preview'},preview),
+    el('div',{className:'cand-used-by'},[el('strong',null,'used by: '),document.createTextNode(usedBy)])
+  ]);
+}
+
+/* ── Capture URL ─────────────────────────────────────────── */
+function runCapture(){
+  var url=$('#captureUrl').value.trim();var out=$('#captureResult');
+  if(!url){out.textContent='URL required';out.classList.add('is-error');return}
+  out.classList.remove('is-error');out.textContent='Capturing…';
+  var body={url:url,fullPage:$('#captureFullPage').checked};
+  if(S.project)body.projectId=S.project;
+  fetch('/api/tool/capture',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
+    .then(function(r){return r.json()})
+    .then(function(d){
+      if(d.error){out.classList.add('is-error');out.textContent='Error: '+d.error;return}
+      out.textContent='';
+      if(d.hash)out.appendChild(el('div',null,'Hash: '+d.hash));
+      if(d.path){
+        var img=document.createElement('img');img.src='/api/image?path='+encodeURIComponent(d.path);img.alt='capture';
+        out.appendChild(img);
+      }
+    })
+    .catch(function(e){out.classList.add('is-error');out.textContent='Request failed: '+(e&&e.message||'unknown')});
+}
+
+/* ── Analyze Page ────────────────────────────────────────── */
+function runAnalyze(){
+  var url=$('#analyzeUrl').value.trim();var out=$('#analyzeResult');
+  if(!url){out.textContent='URL required';out.classList.add('is-error');return}
+  out.classList.remove('is-error');out.textContent='Analyzing…';
+  var body={url:url};if(S.project)body.projectId=S.project;
+  fetch('/api/tool/analyze',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
+    .then(function(r){return r.json()})
+    .then(function(d){
+      if(d.error){out.classList.add('is-error');out.textContent='Error: '+d.error;return}
+      out.textContent='';
+      var pre=el('pre',null,JSON.stringify(d,null,2));
+      out.appendChild(pre);
+    })
+    .catch(function(e){out.classList.add('is-error');out.textContent='Request failed: '+(e&&e.message||'unknown')});
+}
+
+/* ── Verify Issue ────────────────────────────────────────── */
+function copyIssuePrompt(){
+  var url=$('#issueUrl').value.trim();
+  if(!url){showToast&&showToast('Issue URL required','warn');return}
+  var prompt='Use the e2e-runner test-creator agent to verify this issue end-to-end:\n\n'+
+             '1. Call e2e_issue with url="'+url+'" to fetch the issue details and the suggested test prompt.\n'+
+             '2. Generate the test JSON based on the issue requirements.\n'+
+             '3. Save it via e2e_create_test.\n'+
+             '4. Run it via e2e_run and report pass/fail with screenshots.';
+  copyToClipboard(prompt);
+}
+function runIssueVerify(){
+  var url=$('#issueUrl').value.trim();var out=$('#issueResult');
+  if(!url){out.textContent='URL required';out.classList.add('is-error');return}
+  out.classList.remove('is-error');out.textContent='Calling Anthropic API... this can take a minute.';
+  fetch('/api/tool/issue-verify',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:url,projectId:S.project||null})})
+    .then(function(r){return r.json()})
+    .then(function(d){
+      if(d.error){out.classList.add('is-error');out.textContent='Error: '+d.error;return}
+      out.textContent='';
+      out.appendChild(el('pre',null,JSON.stringify(d,null,2)));
+    })
+    .catch(function(e){out.classList.add('is-error');out.textContent='Request failed: '+(e&&e.message||'unknown')});
+}
+
+/* ── Agent prompt copy buttons ───────────────────────────── */
+var AGENT_PROMPTS={
+  improver:'Run the test-improver agent on this project. Tasks:\n'+
+    '1. Use e2e_list to enumerate suites + modules.\n'+
+    '2. Identify duplicated 3+ action sequences across tests (canonical $use candidates).\n'+
+    '3. For each candidate, call e2e_create_module with sensible parameters, then Edit the test files to replace the inline sequence with {"$use":"<module-name>","params":{...}}.\n'+
+    '4. Replace any verbose evaluate blocks with built-in actions where possible.\n'+
+    '5. Run the affected suites via e2e_run and confirm no regressions.\n'+
+    '6. Report a summary: modules created, sequences replaced, tests touched.',
+  creator:'Run the test-creator agent on this project. Tasks:\n'+
+    '1. Ask me which feature/page you should write a new test for.\n'+
+    '2. Use e2e_analyze on the target URL to map interactive elements.\n'+
+    '3. Design a clear action sequence (goto, asserts, click, type, etc.).\n'+
+    '4. Save via e2e_create_test and run it via e2e_run.\n'+
+    '5. If it passes, show me the JSON + screenshot. If it fails, debug and fix.',
+  analyzer:'Run the test-analyzer agent on this project. Tasks:\n'+
+    '1. Use e2e_learnings query="summary" to get the current stability state.\n'+
+    '2. Use e2e_learnings query="flaky" and "errors" to drill into problems.\n'+
+    '3. For each top issue, check e2e_network_logs for the relevant runDbIds.\n'+
+    '4. Recommend concrete fixes: stabilization (waits, retries), selector hardening, or root-cause investigations.',
+};
+function copyAgentPrompt(name){
+  var p=AGENT_PROMPTS[name];if(!p)return;
+  copyToClipboard(p);
+}
+
+function copyToClipboard(text){
+  try{
+    if(navigator.clipboard){navigator.clipboard.writeText(text).then(function(){showToast&&showToast('Copied to clipboard','success')});return}
+  }catch(e){}
+  var ta=document.createElement('textarea');ta.value=text;ta.style.position='fixed';ta.style.opacity='0';
+  document.body.appendChild(ta);ta.select();
+  try{document.execCommand('copy');showToast&&showToast('Copied to clipboard','success')}catch(e){showToast&&showToast('Could not copy','error')}
+  document.body.removeChild(ta);
+}
+
+/* ── Wire up buttons ─────────────────────────────────────── */
+(function(){
+  var b1=$('#btnRunModuleAnalysis');if(b1)b1.addEventListener('click',refreshModuleAnalysis);
+  var b2=$('#btnCopyModulePrompt');if(b2)b2.addEventListener('click',function(){
+    if(MA_LAST&&MA_LAST.agentPrompt)copyToClipboard(MA_LAST.agentPrompt);
+  });
+  var c1=$('#btnRunCapture');if(c1)c1.addEventListener('click',runCapture);
+  var a1=$('#btnRunAnalyze');if(a1)a1.addEventListener('click',runAnalyze);
+  var i1=$('#btnIssuePrompt');if(i1)i1.addEventListener('click',copyIssuePrompt);
+  var i2=$('#btnIssueVerify');if(i2)i2.addEventListener('click',runIssueVerify);
+  document.querySelectorAll('[data-prompt]').forEach(function(btn){
+    btn.addEventListener('click',function(){copyAgentPrompt(btn.dataset.prompt)});
+  });
+})();

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

@@ -65,7 +65,7 @@ function renderWatchCards(projects){
     var detailBtn=el('button',{className:'btn sm',onclick:function(e){
       e.stopPropagation();
       S.project=p.id;$('#projectSelect').value=p.id;
-      showView('runs');
+      showView('investigate');
       refreshRuns();refreshSuites();
     }},'\uD83D\uDD0D');
 
@@ -222,7 +222,7 @@ function renderEventLog(runs){
     (function(run){
       row.addEventListener('click',function(){
         S.project=run.project_id;$('#projectSelect').value=run.project_id;
-        showView('runs');
+        showView('investigate');
         refreshRuns();
       });
     })(r);

package/templates/dashboard/js/websocket.js

@@ -105,9 +105,39 @@ function handleWS(m){
       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;
+      if(m.data){
+        var pinned=S.screencastSel;
+        var showThis;
+        if(pinned){
+          // Pinned: only the watched test's frames.
+          showThis=pinned.runId===m.runId&&pinned.name===m.name;
+        }else if(S.screencastAuto!==false){
+          // Auto: sticky — stay on the current test until it stops running,
+          // then adopt the next one. Never interleave two tests' frames.
+          var cur=S.screencastLast;
+          var curRun=cur&&S.liveRuns[cur.runId];
+          var curT=curRun&&curRun.tests?curRun.tests[cur.name]:null;
+          var curRunning=curT&&curT.status==='running';
+          showThis=!cur||!curRunning||(cur.runId===m.runId&&cur.name===m.name);
+        }else{showThis=false}
+        if(showThis){
+          var frameSrc='data:image/jpeg;base64,'+m.data;
+          // Switching to a different test? Clear the strip so they don't pile up.
+          var changed=!pinned&&(!S.screencastLast||S.screencastLast.runId!==m.runId||S.screencastLast.name!==m.name);
+          if(changed&&S.screencastLast&&typeof resetFilmstrip==='function')resetFilmstrip();
+          var img=$('#screencastImg');
+          if(img){
+            img.src=frameSrc;
+            img.style.display='block';
+            var vp=img.closest('.screencast-viewport');if(vp)vp.classList.add('has-frame');
+            var ph2=$('#screencastPlaceholder');if(ph2)ph2.style.display='none';
+          }
+          if(!pinned){
+            S.screencastLast={runId:m.runId,name:m.name};
+            if(changed&&typeof updateScreencastUI==='function')updateScreencastUI();
+          }
+          if(typeof pushFilmFrame==='function')pushFilmFrame(frameSrc,m.name,m.runId);
+        }
       }
       break;
     case 'db:updated':