@matware/e2e-runner 1.3.1 → 1.5.1

package/templates/dashboard/js/api.js

@@ -14,6 +14,10 @@ function triggerRun(suite,projectId){
 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');
@@ -29,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();
+    }
+  });
+})();

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

@@ -23,6 +23,27 @@ function prettyJson(str){
   try{return JSON.stringify(JSON.parse(str),null,2)}catch(e){return str}
 }
 
+/* Lightweight JSON syntax highlighter. Escapes HTML, then wraps tokens in
+   colored spans. Input should already be pretty-printed (prettyJson). */
+function highlightJson(text){
+  var esc=String(text).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  return esc.replace(/"(?:\\.|[^"\\])*"|\b(?:true|false|null)\b|-?\b\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?\b/g,function(m,off,s){
+    var cls;
+    if(m[0]==='"'){cls=/^\s*:/.test(s.slice(off+m.length))?'jn-key':'jn-str'}
+    else if(m==='true'||m==='false'){cls='jn-bool'}
+    else if(m==='null'){cls='jn-null'}
+    else{cls='jn-num'}
+    return '<span class="'+cls+'">'+m+'</span>';
+  });
+}
+
+/* Builds a <pre> with syntax-highlighted JSON content. */
+function jsonPre(text){
+  var p=document.createElement('pre');
+  p.innerHTML=highlightJson(text);
+  return p;
+}
+
 function fmtHeaders(h){
   if(!h||typeof h!=='object')return '';
   return Object.keys(h).map(function(k){return k+': '+h[k]}).join('\n');
@@ -109,7 +130,7 @@ function buildNetRow(n){
     }
     if(n.requestBody){
       var rbText=prettyJson(n.requestBody);
-      sections.push(buildNdSection('Request Body',el('pre',null,rbText),null,rbText));
+      sections.push(buildNdSection('Request Body',jsonPre(rbText),null,rbText));
     }
     if(n.responseHeaders){
       var rhCount=Object.keys(n.responseHeaders).length;
@@ -117,7 +138,7 @@ function buildNetRow(n){
     }
     if(n.responseBody){
       var respText=prettyJson(n.responseBody);
-      sections.push(buildNdSection('Response Body',el('pre',null,respText),null,respText));
+      sections.push(buildNdSection('Response Body',jsonPre(respText),null,respText));
     }
     detail=el('div',{className:'rd-net-detail'},sections);
     row.addEventListener('click',function(e){e.stopPropagation();row.classList.toggle('open')});