@matware/e2e-runner 1.3.0 → 1.5.0

package/src/wizard.js

@@ -0,0 +1,184 @@
+import readline from 'node:readline/promises';
+import { stdin as input, stdout as output } from 'node:process';
+import path from 'node:path';
+import { colors as C } from './logger.js';
+
+const DRIVERS = ['browserless', 'cdp', 'steel', 'lightpanda'];
+const OUTPUT_FORMATS = ['json', 'junit', 'both'];
+
+function isInteractive() {
+  return Boolean(input.isTTY && output.isTTY);
+}
+
+function defaultAnswers(cwd) {
+  return {
+    projectName: path.basename(cwd),
+    baseUrl: 'http://host.docker.internal:3000',
+    driver: 'browserless',
+    poolPort: 3333,
+    concurrency: 3,
+    maxSessions: 5,
+    outputFormat: 'json',
+    includeSampleTest: true,
+  };
+}
+
+export function getDefaultAnswers(cwd) {
+  return defaultAnswers(cwd);
+}
+
+async function ask(rl, question, fallback, validate) {
+  const hint = fallback === '' ? '' : ` ${C.dim}(${fallback})${C.reset}`;
+  for (;;) {
+    const raw = (await rl.question(`${C.cyan}?${C.reset} ${question}${hint} `)).trim();
+    const value = raw === '' ? fallback : raw;
+    if (validate) {
+      const err = validate(value);
+      if (err) {
+        console.log(`  ${C.red}${err}${C.reset}`);
+        continue;
+      }
+    }
+    return value;
+  }
+}
+
+async function askChoice(rl, question, choices, fallback) {
+  const list = choices.map((c, i) => `${i + 1}) ${c}${c === fallback ? ' [default]' : ''}`).join('  ');
+  for (;;) {
+    const raw = (await rl.question(`${C.cyan}?${C.reset} ${question}\n  ${C.dim}${list}${C.reset}\n  `)).trim();
+    if (raw === '') return fallback;
+    const asNum = parseInt(raw, 10);
+    if (!Number.isNaN(asNum) && asNum >= 1 && asNum <= choices.length) return choices[asNum - 1];
+    if (choices.includes(raw)) return raw;
+    console.log(`  ${C.red}Choose 1-${choices.length} or one of: ${choices.join(', ')}${C.reset}`);
+  }
+}
+
+async function askYesNo(rl, question, fallback = true) {
+  const hint = fallback ? 'Y/n' : 'y/N';
+  const raw = (await rl.question(`${C.cyan}?${C.reset} ${question} ${C.dim}(${hint})${C.reset} `)).trim().toLowerCase();
+  if (raw === '') return fallback;
+  return raw === 'y' || raw === 'yes' || raw === 's' || raw === 'si';
+}
+
+function validateUrl(value) {
+  try {
+    const u = new URL(value);
+    if (!['http:', 'https:'].includes(u.protocol)) return 'Use http:// or https://';
+    return null;
+  } catch {
+    return 'Not a valid URL';
+  }
+}
+
+function validatePositiveInt(value) {
+  const n = Number(value);
+  if (!Number.isInteger(n) || n <= 0) return 'Must be a positive integer';
+  return null;
+}
+
+export async function runInitWizard(cwd, overrides = {}) {
+  const defaults = { ...defaultAnswers(cwd), ...overrides };
+
+  if (!isInteractive()) return defaults;
+
+  console.log(`\n${C.bold}${C.cyan}@matware/e2e-runner — init wizard${C.reset}`);
+  console.log(`${C.dim}Press Enter to accept the default in parentheses.${C.reset}\n`);
+
+  const rl = readline.createInterface({ input, output });
+
+  try {
+    const projectName = await ask(rl, 'Project name', defaults.projectName);
+    const baseUrl = await ask(rl, 'App base URL', defaults.baseUrl, validateUrl);
+    const driver = await askChoice(rl, 'Browser driver', DRIVERS, defaults.driver);
+    const poolPort = parseInt(await ask(rl, 'Chrome pool port', String(defaults.poolPort), validatePositiveInt), 10);
+    const concurrency = parseInt(await ask(rl, 'Parallel test workers', String(defaults.concurrency), validatePositiveInt), 10);
+    const maxSessions = parseInt(await ask(rl, 'Max concurrent pool sessions', String(defaults.maxSessions), validatePositiveInt), 10);
+    const outputFormat = await askChoice(rl, 'Report output format', OUTPUT_FORMATS, defaults.outputFormat);
+    const includeSampleTest = await askYesNo(rl, 'Include a sample test?', defaults.includeSampleTest);
+
+    return {
+      projectName,
+      baseUrl,
+      driver,
+      poolPort,
+      concurrency,
+      maxSessions,
+      outputFormat,
+      includeSampleTest,
+    };
+  } finally {
+    rl.close();
+  }
+}
+
+export function renderConfig(answers) {
+  const { projectName, baseUrl, driver, poolPort, concurrency, maxSessions, outputFormat } = answers;
+  const driverLine = driver === 'browserless'
+    ? ''
+    : `\n  // Browser driver: 'browserless' | 'cdp' | 'steel' | 'lightpanda'\n  driver: '${driver}',\n`;
+
+  return `export default {
+  // Display name shown in the dashboard
+  projectName: '${projectName}',
+
+  // App URL (from inside Docker, use host.docker.internal to reach the host)
+  baseUrl: '${baseUrl}',
+${driverLine}
+  // Chrome Pool WebSocket URL
+  poolUrl: 'ws://localhost:${poolPort}',
+
+  // Chrome Pool port (for pool start/stop)
+  poolPort: ${poolPort},
+
+  // Directory containing JSON test files
+  testsDir: 'e2e/tests',
+
+  // Directory for reusable modules (referenced via $use in tests)
+  // modulesDir: 'e2e/modules',
+
+  // Directory for screenshots and reports
+  screenshotsDir: 'e2e/screenshots',
+
+  // Parallel test workers
+  concurrency: ${concurrency},
+
+  // Max concurrent pool sessions
+  maxSessions: ${maxSessions},
+
+  // Browser viewport
+  viewport: { width: 1280, height: 720 },
+
+  // Timeout per action (ms)
+  defaultTimeout: 10000,
+
+  // Per-test timeout (ms) — kills the test if it exceeds this
+  testTimeout: 60000,
+
+  // Retry failed tests N times (0 = no retries)
+  retries: 0,
+
+  // Delay between retries (ms)
+  retryDelay: 1000,
+
+  // Report output format: 'json', 'junit', or 'both'
+  outputFormat: '${outputFormat}',
+
+  // Global hooks — run actions before/after all tests or each test
+  // hooks: {
+  //   beforeAll: [{ type: 'goto', value: '/login' }],
+  //   afterAll: [],
+  //   beforeEach: [{ type: 'goto', value: '/' }],
+  //   afterEach: [],
+  // },
+
+  // Environment profiles — override any config key per environment
+  // Use with --env <name> or E2E_ENV=<name>
+  // environments: {
+  //   staging: { baseUrl: 'https://staging.example.com' },
+  //   production: { baseUrl: 'https://example.com', concurrency: 5 },
+  // },
+};
+`;
+}

package/templates/build-dashboard.js

@@ -24,6 +24,7 @@ const CSS_ORDER = [
   'view-tests.css',
   'view-runs.css',
   'view-live.css',
+  'view-tools.css',
 ];
 
 const JS_ORDER = [
@@ -36,6 +37,8 @@ const JS_ORDER = [
   'view-tests.js',
   'view-runs.js',
   'view-live.js',
+  'view-tools.js',
+  'quicksearch.js',
   'keyboard.js',
   'init.js',
 ];

package/templates/dashboard/js/api.js

@@ -6,12 +6,18 @@ function triggerRun(suite,projectId){
   if(suite)body.suite=suite;
   if(projectId)body.projectId=projectId;
   else if(S.project)body.projectId=S.project;
+  var scToggle=$('#screencastToggle');
+  if(scToggle&&scToggle.checked)body.screencast=true;
   fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
 }
 
 function renderPool(d){
   if(!d)return;
   var poolList=$('#poolList');
+  // Telemetry strip — driver + sessions
+  var teleDriver=(d.pools&&d.pools[0]&&d.pools[0].driver)||d.driver||'';
+  var teleAvail=false;
+  var teleSessNow=0,teleSessMax=0;
   if(d.pools&&d.pools.length>1){
     var anyAvail=d.availableCount>0;
     $('#poolDot').className='pool-dot '+(anyAvail?'on':'off');
@@ -27,34 +33,87 @@ function renderPool(d){
       var sess=el('span',{className:'pool-sessions'},(p.running||0)+'/'+(p.maxConcurrent||0));
       poolList.appendChild(el('div',{className:'pool-item'},[dot,name,status,sess]));
     });
+    teleAvail=anyAvail;teleSessNow=d.totalRunning||0;teleSessMax=d.totalMaxConcurrent||0;
+    teleDriver=teleDriver||(d.pools.length+' pools');
   }else if(d.pools&&d.pools.length===1){
     var p=d.pools[0];
     $('#poolDot').className='pool-dot '+(p.error||!p.available?'off':'on');
     $('#poolLabel').textContent=p.error?'offline':p.available?'ready':'busy';
     $('#poolSessions').textContent=(p.running||0)+'/'+(p.maxConcurrent||0);
     poolList.style.display='none';
+    teleAvail=!p.error&&p.available;teleSessNow=p.running||0;teleSessMax=p.maxConcurrent||0;
+    teleDriver=teleDriver||p.driver||'cdp';
   }else{
     $('#poolDot').className='pool-dot '+(d.error||!d.available?'off':'on');
     $('#poolLabel').textContent=d.error?'offline':d.available?'ready':'busy';
     $('#poolSessions').textContent=(d.running||0)+'/'+(d.maxConcurrent||0);
     poolList.style.display='none';
+    teleAvail=!d.error&&d.available;teleSessNow=d.running||0;teleSessMax=d.maxConcurrent||0;
   }
+  // Telemetry pills (best-effort — elements may not exist on older templates)
+  var dotEl=$('#telePoolDot');if(dotEl)dotEl.className='tele-pill-dot '+(teleAvail?'on':'off');
+  var valEl=$('#telePoolValue');if(valEl)valEl.textContent=teleDriver||'--';
+  var sessEl=$('#teleSessionsValue');if(sessEl)sessEl.textContent=teleSessNow+'/'+teleSessMax;
+}
+function renderRunningTelemetry(n){
+  var v=$('#teleRunningValue');if(!v)return;
+  v.textContent=String(n||0);
+  var pill=$('#teleRunning');if(pill)pill.classList.toggle('has-running',(n||0)>0);
+}
+function refreshTodayTelemetry(){
+  var v=$('#teleTodayValue');if(!v)return;
+  var url=S.project?'/api/db/projects/'+S.project+'/runs':'/api/db/runs';
+  api(url).then(function(rows){
+    if(!Array.isArray(rows))return;
+    var today=new Date();today.setHours(0,0,0,0);var t=today.getTime();
+    var c=0;
+    rows.forEach(function(r){
+      var d=r.generated_at||r.started_at||r.created_at;
+      if(!d)return;
+      var ts=new Date(d).getTime();
+      if(ts>=t)c++;
+    });
+    v.textContent=String(c);
+  }).catch(function(){});
+}
+function refreshStatus(){
+  api('/api/status').then(function(d){
+    renderPool(d.pool);
+    // Telemetry: running count from dashboard.running flag fallback
+    if(d.dashboard&&typeof d.dashboard.runningTests==='number'){
+      renderRunningTelemetry(d.dashboard.runningTests);
+    }
+  }).catch(function(){});
 }
-function refreshStatus(){api('/api/status').then(function(d){renderPool(d.pool)}).catch(function(){})}
 
 /* ── Projects ── */
 function refreshProjects(){
   api('/api/db/projects').then(function(projects){
-    var sel=$('#projectSelect'),prev=sel.value;
+    var sel=$('#projectSelect');
+    // Prefer in-memory state, then the persisted selection, then whatever the
+    // browser restored into the <select> on reload.
+    var saved=null;try{saved=localStorage.getItem('e2e-project')}catch(e){}
+    var prev=(S.project!=null?String(S.project):'')||saved||sel.value;
     while(sel.options.length>1)sel.remove(1);
     if(Array.isArray(projects))projects.forEach(function(p){
       var o=document.createElement('option');o.value=p.id;o.textContent=p.name;sel.appendChild(o);
     });
-    sel.value=prev||'';
+    // Only keep the previous value if it still maps to a real option.
+    var valid=prev&&Array.prototype.some.call(sel.options,function(o){return o.value===prev});
+    sel.value=valid?prev:'';
+    // Sync app state to the restored <select> value. The browser restores the
+    // dropdown's visual value across reloads, but never fires a 'change' event,
+    // so S.project would otherwise stay null and views render "select a project".
+    var resolved=sel.value?parseInt(sel.value,10):null;
+    if(resolved!==S.project){
+      S.project=resolved;
+      refreshRuns();refreshSuites();refreshScreenshots();refreshLearnings();refreshWatch();
+    }
   }).catch(function(){});
 }
 $('#projectSelect').addEventListener('change',function(){
   S.project=this.value?parseInt(this.value,10):null;
   S.selectedRun=null;
+  try{S.project!=null?localStorage.setItem('e2e-project',String(S.project)):localStorage.removeItem('e2e-project')}catch(e){}
   refreshRuns();refreshSuites();refreshScreenshots();refreshLearnings();refreshWatch();
 });

package/templates/dashboard/js/init.js

@@ -11,3 +11,49 @@ refreshScreenshots();
 refreshLearnings();
 refreshVariables();
 startWatchPolling();
+updateBreadcrumb();
+syncTopbarLive(false,0,0);
+if(typeof refreshTodayTelemetry==='function'){
+  refreshTodayTelemetry();
+  setInterval(refreshTodayTelemetry,30000);
+}
+// Keep pool telemetry fresh independent of the WS pool stream
+setInterval(refreshStatus,8000);
+
+/* ── Top bar handlers ── */
+(function(){
+  var liveBtn=$('#topbarLive');
+  if(liveBtn)liveBtn.addEventListener('click',function(){showView('live')});
+  var runBtn=$('#topbarRunBtn');
+  if(runBtn)runBtn.addEventListener('click',function(){
+    if(typeof triggerRun==='function')triggerRun();
+  });
+})();
+
+/* ── Screencast toggle persistence (default ON) ── */
+(function(){
+  var sc=$('#screencastToggle');
+  if(!sc)return;
+  var saved=null;try{saved=localStorage.getItem('e2e-screencast')}catch(e){}
+  sc.checked=saved===null?true:saved==='1';
+  sc.addEventListener('change',function(){try{localStorage.setItem('e2e-screencast',sc.checked?'1':'0')}catch(e){}});
+})();
+
+/* ── Theme toggle ── */
+(function(){
+  var btn=$('#themeToggle');
+  var lbl=$('#themeToggleLabel');
+  if(!btn)return;
+  function syncLabel(){
+    var t=document.documentElement.getAttribute('data-theme')||'dark';
+    if(lbl)lbl.textContent=(t==='dark'?'Light':'Dark');
+  }
+  syncLabel();
+  btn.addEventListener('click',function(){
+    var cur=document.documentElement.getAttribute('data-theme')||'dark';
+    var next=cur==='dark'?'light':'dark';
+    document.documentElement.setAttribute('data-theme',next);
+    try{localStorage.setItem('e2e-theme',next)}catch(e){}
+    syncLabel();
+  });
+})();

package/templates/dashboard/js/keyboard.js

@@ -1,5 +1,5 @@
 /* ══════════════════════════════════════════════════════════════════
-   Keyboard Shortcuts (Updated: 1=Watch, 2=Tests, 3=Runs, 4=Live)
+   Keyboard Shortcuts (1=Overview, 2=Live, 3=Run, 4=Investigate, 5=Insights)
    ══════════════════════════════════════════════════════════════════ */
 document.addEventListener('keydown',function(e){
   var tag=document.activeElement.tagName;
@@ -20,16 +20,17 @@ document.addEventListener('keydown',function(e){
     return;
   }
   if(e.key==='?'){$('#kbModal').classList.toggle('open');return}
-  var viewMap={'1':'watch','2':'tests','3':'runs','4':'live'};
+  var viewMap={'1':'overview','2':'live','3':'run','4':'investigate','5':'insights'};
   if(viewMap[e.key]){showView(viewMap[e.key]);return}
   if(e.key==='r'){
-    if(S.view==='watch')refreshWatch();
-    else if(S.view==='tests'){refreshSuites();refreshVariables()}
-    else if(S.view==='runs'){refreshRuns();refreshScreenshots();refreshLearnings()}
+    if(S.view==='overview')refreshWatch();
+    else if(S.view==='run'){refreshSuites();refreshVariables()}
+    else if(S.view==='investigate'){refreshRuns();refreshScreenshots();if(typeof refreshNetwork==='function')refreshNetwork()}
+    else if(S.view==='insights')refreshLearnings();
     else if(S.view==='live')renderLive();
     return;
   }
-  if(S.view==='runs'&&(e.key==='j'||e.key==='k')){
+  if(S.view==='investigate'&&(e.key==='j'||e.key==='k')){
     var visible=_allRunRows.filter(function(item){return item.tr.style.display!=='none'});
     if(!visible.length)return;
     if(e.key==='j')S.highlightedRunIdx=Math.min(S.highlightedRunIdx+1,visible.length-1);
@@ -37,7 +38,7 @@ document.addEventListener('keydown',function(e){
     visible.forEach(function(item,i){if(i===S.highlightedRunIdx){item.tr.classList.add('selected');item.tr.scrollIntoView({block:'nearest'})}else item.tr.classList.remove('selected')});
     return;
   }
-  if(S.view==='runs'&&e.key==='Enter'){
+  if(S.view==='investigate'&&e.key==='Enter'){
     var visible2=_allRunRows.filter(function(item){return item.tr.style.display!=='none'});
     if(S.highlightedRunIdx>=0&&S.highlightedRunIdx<visible2.length){visible2[S.highlightedRunIdx].tr.click()}
     return;

package/templates/dashboard/js/quicksearch.js

@@ -0,0 +1,277 @@
+/* ══════════════════════════════════════════════════════════════════
+   Quick Search palette — Ctrl/⌘+K (or /) to open, searches across
+   suites, tests within suites, and reusable modules. Jumps to the
+   right view + tab on Enter / click.
+   ══════════════════════════════════════════════════════════════════ */
+
+var QS = { index: [], filtered: [], active: 0, lastFetch: 0 };
+
+function qsModalEl(){return document.getElementById('qsModal')}
+function qsOpen(){
+  var m=qsModalEl();if(!m)return;
+  m.classList.add('open');m.setAttribute('aria-hidden','false');
+  var inp=document.getElementById('qsInput');
+  if(inp){inp.value='';inp.focus()}
+  // Refresh index opportunistically (cached for 20s)
+  if(Date.now()-QS.lastFetch>20000)qsBuildIndex();
+  else qsRender('');
+}
+function qsClose(){
+  var m=qsModalEl();if(!m)return;
+  m.classList.remove('open');m.setAttribute('aria-hidden','true');
+}
+
+/* Build a flat index of suites, modules and tests across all projects. */
+function qsBuildIndex(){
+  var empty=document.getElementById('qsEmpty');
+  if(empty)empty.textContent='Loading index...';
+  api('/api/db/projects').then(function(projects){
+    if(!Array.isArray(projects))projects=[];
+    var pending=projects.length*2;
+    if(pending===0){QS.index=[];QS.lastFetch=Date.now();qsRender('');return}
+    var idx=[];
+    projects.forEach(function(proj){
+      api('/api/db/projects/'+proj.id+'/suites').then(function(suites){
+        if(Array.isArray(suites)){
+          suites.forEach(function(s){
+            idx.push({
+              kind:'suite',
+              name:s.name,
+              sub:proj.name,
+              meta:(s.testCount||0)+' tests',
+              project:proj,
+              suite:s,
+            });
+            (s.tests||[]).forEach(function(t){
+              idx.push({
+                kind:'test',
+                name:t.name||'(unnamed test)',
+                sub:proj.name+' › '+s.name,
+                meta:(t.actionCount||(t.actions&&t.actions.length)||0)+' steps',
+                project:proj,
+                suite:s,
+                test:t,
+              });
+            });
+          });
+        }
+      }).catch(function(){}).then(function(){
+        pending--;if(pending===0){QS.index=idx;QS.lastFetch=Date.now();qsRender('')}
+      });
+      api('/api/db/projects/'+proj.id+'/modules').then(function(modules){
+        if(Array.isArray(modules)){
+          modules.forEach(function(m){
+            idx.push({
+              kind:'module',
+              name:m.name,
+              sub:proj.name+(m.description?' — '+m.description:''),
+              meta:(m.actionCount||0)+' actions'+(m.params&&m.params.length?' · '+m.params.length+' params':''),
+              project:proj,
+              module:m,
+            });
+          });
+        }
+      }).catch(function(){}).then(function(){
+        pending--;if(pending===0){QS.index=idx;QS.lastFetch=Date.now();qsRender('')}
+      });
+    });
+  }).catch(function(){
+    QS.index=[];QS.lastFetch=Date.now();qsRender('');
+  });
+}
+
+/* Fuzzy-ish scoring: subsequence match + bonuses for word starts and exact. */
+function qsScore(text,q){
+  if(!q)return 0;
+  text=(text||'').toLowerCase();q=q.toLowerCase();
+  if(text===q)return 1000;
+  if(text.indexOf(q)===0)return 700;
+  var i=text.indexOf(q);
+  if(i>=0){
+    // Word-boundary bonus
+    var prev=i>0?text.charAt(i-1):'';
+    var wb=prev===' '||prev==='-'||prev==='_'||prev==='.'||prev==='/'||prev===':';
+    return 400+(wb?80:0);
+  }
+  // Subsequence fallback
+  var ti=0,qi=0;
+  while(ti<text.length&&qi<q.length){
+    if(text.charAt(ti)===q.charAt(qi))qi++;
+    ti++;
+  }
+  return qi===q.length?100:0;
+}
+
+function qsEscape(s){
+  return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+function qsHighlight(name,q){
+  if(!q)return name;
+  var lc=name.toLowerCase();var lq=q.toLowerCase();
+  var i=lc.indexOf(lq);
+  if(i<0)return name;
+  return name.slice(0,i)+'<mark>'+name.slice(i,i+q.length)+'</mark>'+name.slice(i+q.length);
+}
+
+function qsRender(q){
+  var results=document.getElementById('qsResults');
+  var empty=document.getElementById('qsEmpty');
+  var modal=qsModalEl();if(!results||!modal)return;
+  results.textContent='';
+  if(!QS.index.length){
+    modal.classList.remove('has-results');
+    if(empty)empty.textContent=QS.lastFetch?'No suites or modules indexed yet.':'Loading index...';
+    QS.filtered=[];QS.active=0;return;
+  }
+  var query=(q||'').trim();
+  var scored=QS.index.map(function(it){
+    return {item:it,score:query?qsScore(it.name,query)+0.5*qsScore(it.sub||'',query):1};
+  }).filter(function(s){return s.score>0});
+  scored.sort(function(a,b){return b.score-a.score});
+  var top=scored.slice(0,40);
+  if(!top.length){
+    modal.classList.remove('has-results');
+    if(empty)empty.textContent='No matches for "'+query+'"';
+    QS.filtered=[];QS.active=0;return;
+  }
+  modal.classList.add('has-results');
+  QS.filtered=top.map(function(s){return s.item});
+  QS.active=0;
+  // Group by kind in display
+  var groups={suite:[],test:[],module:[]};
+  QS.filtered.forEach(function(it,idx){groups[it.kind].push({item:it,idx:idx})});
+  var labelMap={suite:'Suites',test:'Tests',module:'Modules'};
+  ['suite','test','module'].forEach(function(k){
+    if(!groups[k].length)return;
+    results.appendChild(el('div',{className:'qs-group-label'},labelMap[k]));
+    groups[k].forEach(function(entry){
+      var it=entry.item;var idx=entry.idx;
+      var nameEl=el('div',{className:'qs-item-name'});
+      nameEl.innerHTML=qsHighlight(qsEscape(it.name),qsEscape(query));
+      var row=el('div',{className:'qs-item',dataIdx:String(idx)},[
+        el('span',{className:'qs-item-kind '+it.kind},it.kind),
+        el('div',{className:'qs-item-main'},[
+          nameEl,
+          el('div',{className:'qs-item-sub'},it.sub||'')
+        ]),
+        el('span',{className:'qs-item-meta'},it.meta||'')
+      ]);
+      row.addEventListener('click',function(){qsJump(it)});
+      results.appendChild(row);
+    });
+  });
+  qsUpdateActive();
+}
+
+function qsUpdateActive(){
+  var nodes=document.querySelectorAll('.qs-item');
+  nodes.forEach(function(n,i){
+    n.classList.toggle('active',i===QS.active);
+  });
+  var act=nodes[QS.active];
+  if(act&&act.scrollIntoView)act.scrollIntoView({block:'nearest'});
+}
+
+function qsMove(delta){
+  if(!QS.filtered.length)return;
+  QS.active=(QS.active+delta+QS.filtered.length)%QS.filtered.length;
+  qsUpdateActive();
+}
+
+function qsJump(it){
+  if(!it)return;
+  qsClose();
+  // Set project selector if needed
+  if(it.project&&S.project!==it.project.id){
+    var sel=document.getElementById('projectSelect');
+    if(sel){
+      sel.value=String(it.project.id);
+      S.project=it.project.id;
+      if(typeof S.selectedRun!=='undefined')S.selectedRun=null;
+      // Trigger refresh chain
+      if(typeof refreshSuites==='function')refreshSuites();
+      if(typeof refreshRuns==='function')refreshRuns();
+      if(typeof refreshScreenshots==='function')refreshScreenshots();
+      if(typeof refreshLearnings==='function')refreshLearnings();
+      if(typeof refreshVariables==='function')refreshVariables();
+    }
+  }
+  // Route to the correct view + tab
+  if(it.kind==='suite'||it.kind==='test'){
+    showView('run','testsTabSuites');
+    setTimeout(function(){qsScrollToSuite(it)},250);
+  }else if(it.kind==='module'){
+    showView('run','testsTabModules');
+    setTimeout(function(){qsScrollToModule(it)},250);
+  }
+}
+
+function qsScrollToSuite(it){
+  if(!it||!it.suite)return;
+  var name=(it.suite.name||'').toLowerCase();
+  var cards=document.querySelectorAll('.suite-card');
+  for(var i=0;i<cards.length;i++){
+    var n=(cards[i].dataset.suiteName||cards[i].textContent||'').toLowerCase();
+    if(n.indexOf(name)>=0){
+      cards[i].scrollIntoView({behavior:'smooth',block:'center'});
+      cards[i].classList.add('qs-flash');
+      setTimeout(function(c){return function(){c.classList.remove('qs-flash')}}(cards[i]),1500);
+      // If user wanted a test, also click the suite card to open its modal
+      if(it.kind==='test'&&cards[i].click)cards[i].click();
+      return;
+    }
+  }
+}
+function qsScrollToModule(it){
+  if(!it||!it.module)return;
+  var name=(it.module.name||'').toLowerCase();
+  var cards=document.querySelectorAll('.module-card');
+  for(var i=0;i<cards.length;i++){
+    var n=(cards[i].textContent||'').toLowerCase();
+    if(n.indexOf(name)===0||(' '+n).indexOf(' '+name)>=0){
+      cards[i].scrollIntoView({behavior:'smooth',block:'center'});
+      cards[i].classList.add('qs-flash');
+      setTimeout(function(c){return function(){c.classList.remove('qs-flash')}}(cards[i]),1500);
+      return;
+    }
+  }
+}
+
+/* Wire up triggers + keyboard */
+(function(){
+  var inp=document.getElementById('qsInput');
+  if(inp){
+    inp.addEventListener('input',function(){qsRender(inp.value)});
+    inp.addEventListener('keydown',function(e){
+      if(e.key==='ArrowDown'){e.preventDefault();qsMove(1)}
+      else if(e.key==='ArrowUp'){e.preventDefault();qsMove(-1)}
+      else if(e.key==='Enter'){
+        e.preventDefault();
+        var it=QS.filtered[QS.active];if(it)qsJump(it);
+      }
+      else if(e.key==='Escape'){qsClose()}
+    });
+  }
+  var trigger=document.getElementById('topbarSearchTrigger');
+  if(trigger)trigger.addEventListener('click',qsOpen);
+  // Backdrop close
+  var modal=qsModalEl();
+  if(modal){
+    modal.addEventListener('click',function(e){
+      if(e.target===modal)qsClose();
+    });
+  }
+  // Global keyboard binding
+  document.addEventListener('keydown',function(e){
+    var typingHere=document.activeElement&&(document.activeElement.tagName==='INPUT'||document.activeElement.tagName==='TEXTAREA'||document.activeElement.isContentEditable);
+    var open=modal&&modal.classList.contains('open');
+    if((e.metaKey||e.ctrlKey)&&e.key==='k'){
+      e.preventDefault();
+      if(open)qsClose();else qsOpen();
+      return;
+    }
+    if(!typingHere&&!open&&e.key==='/'){
+      e.preventDefault();qsOpen();
+    }
+  });
+})();