@matware/e2e-runner 1.3.0 → 1.3.1

package/templates/dashboard.html

@@ -59,19 +59,6 @@ a{color:var(--accent);text-decoration:none}
 .pool-item strong{color:var(--text);font-weight:500}
 .pool-item .pool-sessions{margin-left:auto;color:var(--text3);font-size:9px}
 
-/* ── Sync Status ── */
-.sync-status{padding:12px 16px;border-top:1px solid var(--border)}
-.sync-status .sync-header{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2)}
-.sync-status .sync-mode{font-size:9px;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:600}
-.sync-status .sync-mode.hub{background:var(--purple-dim);color:var(--purple)}
-.sync-status .sync-mode.agent{background:var(--accent-dim);color:var(--accent)}
-.sync-status .sync-mode.standalone{background:var(--surface3);color:var(--text3)}
-.sync-status .sync-details{margin-top:6px;font-size:10px;color:var(--text3)}
-.sync-status .sync-instances{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
-.sync-status .sync-inst{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:10px;font-size:9px;background:var(--surface3);border:1px solid var(--border)}
-.sync-status .sync-inst.online{border-color:var(--green);color:var(--green)}
-.sync-status .sync-inst.offline{color:var(--text3)}
-
 /* ── Main ── */
 .main{margin-left:232px;flex:1;min-height:100vh;display:flex;flex-direction:column}
 .main-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--surface);position:sticky;top:0;z-index:40}
@@ -172,6 +159,13 @@ tbody tr.selected td{background:var(--accent-dim)}
 .trigger-badge.src-unknown{background:rgba(70,75,98,.15);color:var(--text3)}
 .trigger-badge .trig-icon{font-size:11px;line-height:1}
 
+/* ── Driver Badges ── */
+.driver-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;font-family:var(--mono);white-space:nowrap}
+.driver-badge.drv-browserless{background:var(--accent-dim)}
+.driver-badge.drv-cdp{background:var(--purple-dim)}
+.driver-badge.drv-steel{background:var(--amber-dim)}
+.driver-badge .drv-icon{font-size:11px;line-height:1}
+
 /* ── Filter Bar ── */
 .filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
 .filter-btn{padding:5px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .15s}
@@ -563,6 +557,42 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
 .learn-trend-chart{width:100%;height:100px;margin-bottom:20px}
 .learn-trend-chart svg{width:100%;height:100%}
 
+/* ── Learnings Dashboard (visual cards) ── */
+.learn-hero{display:flex;align-items:center;gap:24px;margin-bottom:20px;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
+.learn-hero-ring{position:relative;width:100px;height:100px;flex-shrink:0}
+.learn-hero-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
+.learn-hero-ring-bg{fill:none;stroke:var(--surface3);stroke-width:8}
+.learn-hero-ring-fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
+.learn-hero-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;font-family:var(--mono)}
+.learn-hero-stats{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
+.learn-hero-stat{text-align:center}
+.learn-hero-stat-val{font-size:18px;font-weight:700;font-family:var(--mono)}
+.learn-hero-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
+
+.learn-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
+@media(max-width:900px){.learn-cols{grid-template-columns:1fr}}
+
+.learn-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
+.learn-card-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
+.learn-card-title .lc-icon{font-size:13px}
+.learn-card-empty{font-size:11px;color:var(--text3);font-style:italic}
+
+.learn-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
+.learn-item:last-child{border-bottom:none}
+.learn-item-bar{flex:1;min-width:0}
+.learn-item-label{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
+.learn-item-label code{background:var(--surface3);padding:1px 4px;border-radius:3px;font-size:10px}
+.learn-item-sub{font-size:9px;color:var(--text3)}
+.learn-item-val{font-size:13px;font-weight:700;font-family:var(--mono);flex-shrink:0;min-width:44px;text-align:right}
+
+.learn-bar{height:4px;border-radius:2px;background:var(--surface3);overflow:hidden;margin-top:3px}
+.learn-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}
+
+.learn-verdict{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:10px;font-size:10px;font-weight:600}
+.learn-verdict.good{background:var(--green-dim);color:var(--green)}
+.learn-verdict.warn{background:var(--amber-dim);color:var(--amber)}
+.learn-verdict.bad{background:var(--red-dim);color:var(--red)}
+
 /* ── Pool Distribution ── */
 .pool-dist{display:flex;align-items:stretch;gap:0;border-radius:6px;overflow:hidden;height:22px;margin:8px 0;font-size:10px;font-weight:600;font-family:var(--mono)}
 .pool-dist-seg{display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;color:#fff;white-space:nowrap;min-width:40px;transition:flex .3s}
@@ -584,7 +614,7 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
 .live-stats span strong{color:var(--text)}
 .live-progress{height:3px;background:var(--surface3)}
 .live-progress-fill{height:100%;background:var(--purple);transition:width .4s;border-radius:0 2px 2px 0}
-.live-tests{padding:12px 16px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;min-height:0}
+.live-tests{padding:12px 16px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;flex:1}
 .live-test{padding:10px 12px;border-radius:var(--r);border-left:3px solid var(--text3);background:var(--surface2);font-size:11px;transition:border-color .2s,padding .25s,max-height .35s cubic-bezier(.4,0,.2,1)}
 .live-test.running{border-left-color:var(--purple)}
 .live-test.passed{border-left-color:var(--green)}
@@ -641,6 +671,29 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
 .lr-dismiss{padding:2px 6px;font-size:9px;font-family:var(--mono);background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text3);cursor:pointer;transition:all .15s;margin-left:auto}
 .lr-dismiss:hover{color:var(--red);border-color:rgba(239,68,68,.3);background:var(--red-dim)}
 
+/* ── Screencast Panel ── */
+.live-body{display:flex;flex:1;min-height:0;overflow:hidden}
+.live-body .live-tests{flex:1;min-width:0}
+.screencast-panel{width:420px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface2)}
+.screencast-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface3)}
+.screencast-label{font-size:11px;font-weight:600;color:var(--purple);white-space:nowrap}
+.screencast-select{flex:1;padding:4px 8px;font-size:10px;font-family:var(--mono);background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text);outline:none;cursor:pointer}
+.screencast-select:focus{border-color:var(--purple)}
+.screencast-viewport{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;position:relative}
+.screencast-viewport img{max-width:100%;max-height:100%;object-fit:contain;display:none}
+.screencast-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text3);font-size:12px;font-family:var(--mono)}
+
+/* ── Screencast focus badge on test cards ── */
+.sc-focus-badge{cursor:pointer;font-size:10px;padding:1px 4px;border-radius:3px;opacity:.4;transition:all .15s}
+.sc-focus-badge:hover{opacity:.8}
+.sc-focus-badge.active{opacity:1;background:var(--purple-dim);border-radius:3px}
+
+/* ── Screencast toggle in Tests view ── */
+.screencast-toggle-label{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:14px;padding:4px 8px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);transition:all .15s;user-select:none}
+.screencast-toggle-label:hover{border-color:var(--purple);background:var(--surface3)}
+.screencast-toggle-label input{display:none}
+.screencast-toggle-label:has(input:checked){border-color:var(--purple);background:var(--purple-dim);color:var(--purple)}
+
 .live-nav-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--purple);animation:pulse 1.5s infinite}
 .spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
 .spinner-small{display:inline-block;width:8px;height:8px;border:1.5px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
@@ -678,9 +731,6 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
   <div class="nav-item" data-view="live" id="navLive" style="display:none">
     <i class="icon"><span class="live-nav-dot"></span></i><span>Live</span><span class="badge" id="liveBadge" style="background:var(--purple-dim);color:var(--purple)">0</span>
   </div>
-  <div class="nav-item" data-view="instances" id="navInstances" style="display:none">
-    <i class="icon">&#9673;</i><span>Instances</span><span class="badge" id="badgeInstances">-</span>
-  </div>
 
   <div class="pool-status" id="poolStatus">
     <div class="pool-info">
@@ -694,17 +744,6 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
       <span id="wsLabel" style="font-size:10px;color:var(--text3)">ws: connecting</span>
     </div>
   </div>
-  
-  <!-- Sync Status -->
-  <div class="sync-status" id="syncStatus" style="display:none">
-    <div class="sync-header">
-      <span class="pool-dot" id="syncDot"></span>
-      <strong>Sync</strong>
-      <span class="sync-mode" id="syncMode">--</span>
-    </div>
-    <div class="sync-details" id="syncDetails"></div>
-    <div class="sync-instances" id="syncInstances"></div>
-  </div>
 </aside>
 
 <div class="main">
@@ -731,7 +770,11 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
   <div class="view" id="view-tests">
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
       <div style="font-family:var(--sans);font-size:16px;font-weight:600">Tests</div>
-      <div style="display:flex;gap:8px">
+      <div style="display:flex;gap:8px;align-items:center">
+        <label class="screencast-toggle-label" title="Enable live browser screencast during test runs">
+          <input type="checkbox" id="screencastToggle" />
+          <span>&#128249;</span>
+        </label>
         <button class="btn sm primary" id="btnRunAll">&#9655; Run All</button>
       </div>
     </div>
@@ -833,13 +876,12 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
           <button class="btn sm" id="btnRefreshLearnings">Refresh</button>
         </div>
       </div>
-      <div id="learningsOverview"></div>
-      <div id="learningsTrend"></div>
-      <div id="learningsFlaky"></div>
-      <div id="learningsSelectors"></div>
-      <div id="learningsPages"></div>
-      <div id="learningsApis"></div>
-      <div id="learningsErrors"></div>
+      <div id="learnDash">
+        <div id="learnHero"></div>
+        <div id="learnCards" class="learn-cols"></div>
+        <div id="learnTrend"></div>
+        <div id="learnBottom" class="learn-cols"></div>
+      </div>
       <div class="empty" id="learningsEmpty" style="display:none">
         <div class="empty-icon">&#9733;</div>
         <p>No learnings data yet. Run some tests to start building knowledge.</p>
@@ -847,54 +889,6 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
     </div>
   </div>
 
-  <!-- ════════════════ Instances View (Hub Mode) ════════════════ -->
-  <div class="view" id="view-instances">
-    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
-      <div style="font-family:var(--sans);font-size:16px;font-weight:600">Connected Instances</div>
-      <div style="display:flex;gap:8px">
-        <select id="instanceFilter" style="padding:6px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px">
-          <option value="all">All Status</option>
-          <option value="active">Active</option>
-          <option value="pending">Pending</option>
-          <option value="suspended">Suspended</option>
-        </select>
-        <button class="btn sm" id="refreshInstances">Refresh</button>
-      </div>
-    </div>
-    
-    <div class="stats" id="instanceStats">
-      <div class="stat-block"><div class="stat-val accent" id="statInstancesTotal">-</div><div class="stat-lbl">Total</div></div>
-      <div class="stat-block"><div class="stat-val green" id="statInstancesOnline">-</div><div class="stat-lbl">Online</div></div>
-      <div class="stat-block"><div class="stat-val purple" id="statInstancesActive">-</div><div class="stat-lbl">Active</div></div>
-      <div class="stat-block"><div class="stat-val" id="statInstancesPending" style="color:var(--amber)">-</div><div class="stat-lbl">Pending</div></div>
-    </div>
-    
-    <div class="card" style="padding:0">
-      <div class="tbl-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th>Status</th>
-              <th>Instance ID</th>
-              <th>Display Name</th>
-              <th>Role</th>
-              <th>Environment</th>
-              <th>Last Seen</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody id="instancesBody"></tbody>
-        </table>
-      </div>
-    </div>
-    
-    <div class="empty" id="instancesEmpty" style="display:none">
-      <div class="empty-icon">&#9673;</div>
-      <p>No instances registered yet.</p>
-      <p style="margin-top:8px;font-size:11px;color:var(--text3)">Use <code>npx e2e-runner sync add-instance</code> to register agents.</p>
-    </div>
-  </div>
-
   <!-- ════════════════ Live View ════════════════ -->
   <div class="view" id="view-live">
     <div class="live-panel active" id="livePanel">
@@ -914,7 +908,19 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
         <button class="live-clear-btn" id="liveClearBtn">Clear All</button>
       </div>
       <div class="live-progress"><div class="live-progress-fill" id="liveProgressFill" style="width:0"></div></div>
-      <div class="live-tests" id="liveTests"></div>
+      <div class="live-body">
+        <div class="live-tests" id="liveTests"></div>
+        <div class="screencast-panel" id="screencastPanel" style="display:none">
+          <div class="screencast-header">
+            <span class="screencast-label">&#128249; Screencast</span>
+            <select id="screencastSelect" class="screencast-select"><option value="">Select test...</option></select>
+          </div>
+          <div class="screencast-viewport">
+            <img id="screencastImg" alt="Browser screencast" />
+            <div class="screencast-placeholder" id="screencastPlaceholder">Select a running test to watch</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="empty" id="liveEmpty">
       <div class="empty-icon" style="font-size:48px;opacity:.3">&#9679;</div>
@@ -1128,6 +1134,26 @@ function createTriggerBadge(source){
   return badge;
 }
 
+function createDriverBadge(driver){
+  if(!driver)return document.createTextNode('--');
+  var labels={browserless:'Browserless',cdp:'CDP',steel:'Steel',auto:'Auto'};
+  var colors={browserless:'var(--accent)',cdp:'var(--purple)',steel:'var(--amber)'};
+  var icons={browserless:'\u{1F310}',cdp:'\u{1F50C}',steel:'\u{1F6E1}'};
+  // Handle multi-driver (e.g. "browserless,steel")
+  var parts=driver.split(',');
+  if(parts.length>1){
+    var wrap=el('span',{style:'display:inline-flex;gap:4px'});
+    parts.forEach(function(d){wrap.appendChild(createDriverBadge(d.trim()))});
+    return wrap;
+  }
+  var d=driver.trim();
+  var badge=el('span',{className:'driver-badge drv-'+d,style:'color:'+(colors[d]||'var(--text3)')},[
+    el('span',{className:'drv-icon'},icons[d]||'\u2699'),
+    document.createTextNode(labels[d]||d)
+  ]);
+  return badge;
+}
+
 /* ── Pool Distribution Summary ── */
 var POOL_COLORS=['#6366f1','#22d3ee','#f59e0b','#10b981','#ef4444','#8b5cf6','#ec4899','#14b8a6'];
 function buildPoolDistribution(tests){
@@ -1186,7 +1212,6 @@ function showView(v){
   if(viewEl)viewEl.classList.add('active');
   if(v==='watch'&&typeof startWatchPolling==='function')startWatchPolling();
   else if(typeof stopWatchPolling==='function')stopWatchPolling();
-  if(v==='instances'&&typeof refreshInstances==='function')refreshInstances();
 }
 
 /* ── Inner Tabs ── */
@@ -1259,6 +1284,8 @@ 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)});
 }
 
@@ -1293,170 +1320,7 @@ function renderPool(d){
     poolList.style.display='none';
   }
 }
-function refreshStatus(){
-  api('/api/status').then(function(d){
-    renderPool(d.pool);
-    // Check if sync is enabled and update UI
-    if(d.config && d.config.sync){
-      renderSyncStatus(d.config.sync);
-    }
-  }).catch(function(){});
-}
-
-/* ── Sync ── */
-var syncMode = null;
-
-function renderSyncStatus(sync){
-  var status=$('#syncStatus');
-  var dot=$('#syncDot');
-  var mode=$('#syncMode');
-  var details=$('#syncDetails');
-  var instances=$('#syncInstances');
-  
-  if(!sync || sync.mode === 'standalone'){
-    status.style.display='none';
-    $('#navInstances').style.display='none';
-    syncMode = null;
-    return;
-  }
-  
-  status.style.display='block';
-  syncMode = sync.mode;
-  
-  mode.textContent = sync.mode;
-  mode.className = 'sync-mode ' + sync.mode;
-  
-  if(sync.mode === 'hub'){
-    dot.className = 'pool-dot on';
-    dot.style.background = 'var(--purple)';
-    details.textContent = 'Accepting agent connections';
-    $('#navInstances').style.display = 'flex';
-    refreshInstances();
-  } else if(sync.mode === 'agent'){
-    var hubUrl = sync.agent && sync.agent.hubUrl;
-    if(hubUrl){
-      dot.className = 'pool-dot on';
-      dot.style.background = 'var(--accent)';
-      details.innerHTML = 'Hub: <strong>' + hubUrl + '</strong>';
-    } else {
-      dot.className = 'pool-dot off';
-      details.textContent = 'Not connected';
-    }
-    $('#navInstances').style.display = 'none';
-  }
-}
-
-function refreshInstances(){
-  if(syncMode !== 'hub') return;
-  
-  api('/api/sync/instances').then(function(d){
-    var instances = d.instances || [];
-    var online = 0;
-    var active = 0;
-    var pending = 0;
-    var now = Date.now();
-    
-    instances.forEach(function(inst){
-      if(inst.status === 'active') active++;
-      if(inst.status === 'pending') pending++;
-      if(inst.lastSeen){
-        var lastSeen = new Date(inst.lastSeen + 'Z').getTime();
-        if(now - lastSeen < 5 * 60 * 1000) online++;
-      }
-    });
-    
-    $('#statInstancesTotal').textContent = instances.length;
-    $('#statInstancesOnline').textContent = online;
-    $('#statInstancesActive').textContent = active;
-    $('#statInstancesPending').textContent = pending;
-    $('#badgeInstances').textContent = online + '/' + instances.length;
-    
-    var tbody = $('#instancesBody');
-    tbody.innerHTML = '';
-    
-    if(instances.length === 0){
-      $('#instancesEmpty').style.display = 'block';
-      return;
-    }
-    $('#instancesEmpty').style.display = 'none';
-    
-    instances.forEach(function(inst){
-      var isOnline = inst.lastSeen && (now - new Date(inst.lastSeen + 'Z').getTime() < 5 * 60 * 1000);
-      var statusClass = inst.status === 'active' ? 'pass' : inst.status === 'pending' ? 'flaky' : 'fail';
-      
-      var tr = el('tr', null, [
-        el('td', null, [
-          el('span', {className: 'pool-dot ' + (isOnline ? 'on' : 'off'), style: 'margin-right:6px'}),
-          el('span', {className: 'badge ' + statusClass}, inst.status)
-        ]),
-        el('td', {style: 'font-family:var(--mono)'}, inst.instanceId),
-        el('td', null, inst.displayName),
-        el('td', null, inst.role),
-        el('td', null, inst.environment || '-'),
-        el('td', {style: 'color:var(--text3);font-size:11px'}, inst.lastSeen ? fdate(inst.lastSeen) : 'never'),
-        el('td', null, [
-          inst.status === 'pending' ? el('button', {className: 'btn sm', onclick: function(e){
-            e.stopPropagation();
-            approveInstance(inst.instanceId);
-          }}, 'Approve') : null,
-          inst.status === 'active' ? el('button', {className: 'btn sm danger', onclick: function(e){
-            e.stopPropagation();
-            revokeInstance(inst.instanceId);
-          }}, 'Suspend') : null
-        ])
-      ]);
-      tbody.appendChild(tr);
-    });
-    
-    // Update sync status sidebar with online instances
-    var syncInst = $('#syncInstances');
-    syncInst.innerHTML = '';
-    instances.slice(0, 5).forEach(function(inst){
-      var isOnline = inst.lastSeen && (now - new Date(inst.lastSeen + 'Z').getTime() < 5 * 60 * 1000);
-      var span = el('span', {className: 'sync-inst ' + (isOnline ? 'online' : 'offline')}, [
-        el('span', {className: 'pool-dot ' + (isOnline ? 'on' : 'off'), style: 'width:5px;height:5px'}),
-        document.createTextNode(inst.instanceId.slice(0, 12))
-      ]);
-      syncInst.appendChild(span);
-    });
-    if(instances.length > 5){
-      syncInst.appendChild(el('span', {style: 'font-size:9px;color:var(--text3)'}, '+' + (instances.length - 5) + ' more'));
-    }
-    
-  }).catch(function(err){
-    console.error('Failed to load instances:', err);
-  });
-}
-
-function approveInstance(instanceId){
-  api('/api/sync/instances/' + instanceId, {
-    method: 'PATCH',
-    body: JSON.stringify({status: 'active'})
-  }).then(function(){
-    showToast('Instance approved', 'success');
-    refreshInstances();
-  }).catch(function(err){
-    showToast('Failed to approve: ' + err.message, 'error');
-  });
-}
-
-function revokeInstance(instanceId){
-  api('/api/sync/instances/' + instanceId, {
-    method: 'PATCH',
-    body: JSON.stringify({status: 'suspended'})
-  }).then(function(){
-    showToast('Instance suspended', 'success');
-    refreshInstances();
-  }).catch(function(err){
-    showToast('Failed to suspend: ' + err.message, 'error');
-  });
-}
-
-$('#refreshInstances').addEventListener('click', refreshInstances);
-$('#instanceFilter').addEventListener('change', function(){
-  // For now just refresh - could add client-side filtering
-  refreshInstances();
-});
+function refreshStatus(){api('/api/status').then(function(d){renderPool(d.pool)}).catch(function(){})}
 
 /* ── Projects ── */
 function refreshProjects(){
@@ -1583,6 +1447,12 @@ function handleWS(m){
       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;
   }
@@ -2222,7 +2092,7 @@ function refreshRuns(){
     var htr=document.createElement('tr');
     var cols=[];
     if(!S.project)cols.push('Project');
-    cols=cols.concat(['Suite','Source','Date','Total','Pass','Fail','Rate','Time']);
+    cols=cols.concat(['Suite','Driver','Source','Date','Total','Pass','Fail','Rate','Time']);
     cols.forEach(function(c){htr.appendChild(el('th',null,c))});
     head.textContent='';head.appendChild(htr);
     var colSpan=cols.length;
@@ -2241,6 +2111,7 @@ function refreshRuns(){
       if(r.id===S.selectedRun)tr.classList.add('expanded');
       if(!S.project)tr.appendChild(el('td',{style:'font-weight:600'},r.project_name||'-'));
       tr.appendChild(el('td',{style:'color:var(--accent)'},r.suite_name||'all'));
+      var driverTd=document.createElement('td');driverTd.appendChild(createDriverBadge(r.pool_driver));tr.appendChild(driverTd);
       var srcTd=document.createElement('td');srcTd.appendChild(createTriggerBadge(r.triggered_by));tr.appendChild(srcTd);
       tr.appendChild(el('td',null,fdate(r.generated_at)));
       tr.appendChild(el('td',null,String(r.total||0)));
@@ -2337,8 +2208,10 @@ function loadDetailInline(id,detailTr){
       ])
     ]);
     var srcBlock=el('div',null,[el('div',{className:'rd-s-label'},'Source'),el('div',{style:'margin-top:4px'},[createTriggerBadge(d.triggeredBy)])]);
+    var drvBlock=el('div',null,[el('div',{className:'rd-s-label'},'Driver'),el('div',{style:'margin-top:4px'},[createDriverBadge(d.poolDriver)])]);
     var summ=el('div',{className:'rd-summary'},[
       el('div',null,[el('div',{className:'rd-s-label'},'Suite'),el('div',{className:'rd-s-val',style:'font-size:14px;color:var(--accent)'},d.suiteName||'all')]),
+      drvBlock,
       srcBlock,
       el('div',null,[el('div',{className:'rd-s-label'},'Total'),el('div',{className:'rd-s-val'},String(d.summary.total))]),
       el('div',null,[el('div',{className:'rd-s-label'},'Passed'),el('div',{className:'rd-s-val',style:'color:var(--green)'},String(d.summary.passed))]),
@@ -2570,10 +2443,8 @@ function refreshLearnings(){
   fetch(url).then(function(r){return r.json()}).then(function(data){
     if(!data||data.totalRuns===0){
       $('#learningsEmpty').style.display='block';
-      $('#learningsOverview').textContent='';$('#learningsTrend').textContent='';
-      $('#learningsFlaky').textContent='';$('#learningsSelectors').textContent='';
-      $('#learningsPages').textContent='';$('#learningsApis').textContent='';
-      $('#learningsErrors').textContent='';
+      $('#learnHero').textContent='';$('#learnCards').textContent='';
+      $('#learnTrend').textContent='';$('#learnBottom').textContent='';
       $('#badgeLearnings').textContent='-';
       return;
     }
@@ -2598,48 +2469,139 @@ function refreshLearnings(){
       $('#badgeLearnings').textContent='\u2714';
       $('#badgeLearnings').style.background='var(--green-dim)';$('#badgeLearnings').style.color='var(--green)';
     }
-    renderLearnOverview(data);
+    renderLearnHero(data);
+    renderLearnCards(data);
     renderLearnTrend(data.recentTrend||[]);
-    renderLearnFlaky(data.flakyTests||[]);
-    renderLearnSelectors(data.unstableSelectors||[]);
-    renderLearnPages(data.failingPages||[]);
-    renderLearnApis(data.apiIssues||[]);
-    renderLearnErrors(data.topErrors||[]);
+    renderLearnBottomRow(data);
   }).catch(function(){$('#learningsEmpty').style.display='block'});
 }
 
-function renderLearnOverview(d){
-  var container=$('#learningsOverview');container.textContent='';
-  var grid=document.createElement('div');grid.className='learn-grid';
-  [{val:d.totalRuns,lbl:'Runs',cls:'accent'},{val:d.totalTests,lbl:'Tests',cls:'accent'},
-   {val:d.overallPassRate+'%',lbl:'Pass Rate',cls:d.overallPassRate>=90?'green':d.overallPassRate>=70?'':'red'},
-   {val:d.avgDurationMs<1000?d.avgDurationMs+'ms':(d.avgDurationMs/1000).toFixed(1)+'s',lbl:'Avg Duration',cls:'purple'},
-   {val:(d.flakyTests?d.flakyTests.length:0),lbl:'Flaky Tests',cls:d.flakyTests&&d.flakyTests.length>0?'red':'green'},
-   {val:(d.unstableSelectors?d.unstableSelectors.length:0),lbl:'Unstable Selectors',cls:d.unstableSelectors&&d.unstableSelectors.length>0?'red':'green'}
-  ].forEach(function(item){
-    var stat=document.createElement('div');stat.className='learn-stat';
-    var valEl=document.createElement('div');valEl.className='learn-stat-val '+item.cls;valEl.textContent=item.val;
-    var lblEl=document.createElement('div');lblEl.className='learn-stat-lbl';lblEl.textContent=item.lbl;
-    stat.appendChild(valEl);stat.appendChild(lblEl);grid.appendChild(stat);
+function rateColor(v){return v>=90?'var(--green)':v>=70?'var(--amber)':'var(--red)'}
+function rateClass(v){return v>=90?'good':v>=70?'warn':'bad'}
+function durFmt(ms){return ms<1000?Math.round(ms)+'ms':(ms/1000).toFixed(1)+'s'}
+
+function renderLearnHero(d){
+  var c=$('#learnHero');c.textContent='';
+  var wrap=document.createElement('div');wrap.className='learn-hero';
+  var passRate=d.overallPassRate||0;
+  var ns='http://www.w3.org/2000/svg';
+  var ringWrap=document.createElement('div');ringWrap.className='learn-hero-ring';
+  var svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 36 36');
+  var bgCircle=document.createElementNS(ns,'circle');bgCircle.setAttribute('cx','18');bgCircle.setAttribute('cy','18');bgCircle.setAttribute('r','15.9');bgCircle.className.baseVal='learn-hero-ring-bg';svg.appendChild(bgCircle);
+  var fgCircle=document.createElementNS(ns,'circle');fgCircle.setAttribute('cx','18');fgCircle.setAttribute('cy','18');fgCircle.setAttribute('r','15.9');fgCircle.className.baseVal='learn-hero-ring-fg';
+  var circ=2*Math.PI*15.9;fgCircle.setAttribute('stroke-dasharray',circ.toFixed(1));fgCircle.setAttribute('stroke-dashoffset',(circ*(1-passRate/100)).toFixed(1));fgCircle.setAttribute('stroke',rateColor(passRate));
+  svg.appendChild(fgCircle);ringWrap.appendChild(svg);
+  var pctEl=document.createElement('div');pctEl.className='learn-hero-pct';pctEl.style.color=rateColor(passRate);pctEl.textContent=passRate+'%';
+  ringWrap.appendChild(pctEl);wrap.appendChild(ringWrap);
+
+  var stats=document.createElement('div');stats.className='learn-hero-stats';
+  var badSels=d.unstableSelectors?d.unstableSelectors.length:0;
+  var slowTests=d.failingPages?d.failingPages.length:0;
+  var apiIssues=d.apiIssues?d.apiIssues.length:0;
+  var topErr=d.topErrors&&d.topErrors.length>0?d.topErrors[0].occurrence_count:0;
+  var flakyCount=d.flakyTests?d.flakyTests.length:0;
+  var items=[
+    {val:String(d.totalRuns),lbl:'Runs',color:'var(--accent)'},
+    {val:String(d.totalTests),lbl:'Tests',color:'var(--accent)'},
+    {val:durFmt(d.avgDurationMs||0),lbl:'Avg Duration',color:'var(--purple)'},
+    {val:String(flakyCount),lbl:'Flaky',color:flakyCount>0?'var(--amber)':'var(--green)'},
+    {val:String(badSels),lbl:'Bad Selectors',color:badSels>0?'var(--red)':'var(--green)'},
+    {val:String(slowTests),lbl:'Slow Pages',color:slowTests>0?'var(--amber)':'var(--green)'},
+    {val:String(apiIssues),lbl:'API Issues',color:apiIssues>0?'var(--red)':'var(--green)'},
+    {val:String(topErr),lbl:'Top Error Hits',color:topErr>0?'var(--red)':'var(--green)'}
+  ];
+  items.forEach(function(it){
+    var statEl=document.createElement('div');statEl.className='learn-hero-stat';
+    var valEl=document.createElement('div');valEl.className='learn-hero-stat-val';valEl.style.color=it.color;valEl.textContent=it.val;
+    var lblEl=document.createElement('div');lblEl.className='learn-hero-stat-lbl';lblEl.textContent=it.lbl;
+    statEl.appendChild(valEl);statEl.appendChild(lblEl);stats.appendChild(statEl);
   });
-  container.appendChild(grid);
+  wrap.appendChild(stats);c.appendChild(wrap);
+}
+
+function makeLearnItem(label,sub,pct,valText,color){
+  var item=document.createElement('div');item.className='learn-item';
+  var barWrap=document.createElement('div');barWrap.className='learn-item-bar';
+  var lblEl=document.createElement('div');lblEl.className='learn-item-label';
+  var codeEl=document.createElement('code');codeEl.textContent=label;lblEl.appendChild(codeEl);
+  barWrap.appendChild(lblEl);
+  if(sub){var subEl=document.createElement('div');subEl.className='learn-item-sub';subEl.textContent=sub;barWrap.appendChild(subEl)}
+  var bar=document.createElement('div');bar.className='learn-bar';
+  var fill=document.createElement('div');fill.className='learn-bar-fill';fill.style.width=Math.min(pct,100)+'%';fill.style.background=color;
+  bar.appendChild(fill);barWrap.appendChild(bar);
+  item.appendChild(barWrap);
+  var valEl=document.createElement('div');valEl.className='learn-item-val';valEl.style.color=color;valEl.textContent=valText;
+  item.appendChild(valEl);
+  return item;
+}
+
+function makeLearnCard(icon,title,emptyMsg){
+  var card=document.createElement('div');card.className='learn-card';
+  var titleEl=document.createElement('div');titleEl.className='learn-card-title';
+  var iconEl=document.createElement('span');iconEl.className='lc-icon';iconEl.textContent=icon;
+  titleEl.appendChild(iconEl);titleEl.appendChild(document.createTextNode(title));
+  card.appendChild(titleEl);
+  card._empty=emptyMsg;
+  return card;
+}
+
+function renderLearnCards(d){
+  var c=$('#learnCards');c.textContent='';
+
+  var selCard=makeLearnCard('\u26A0','Risky Selectors','No unstable selectors');
+  var sels=d.unstableSelectors||[];
+  if(!sels.length){var e1=document.createElement('div');e1.className='learn-card-empty';e1.textContent=selCard._empty;selCard.appendChild(e1)}
+  else{sels.slice(0,5).forEach(function(s){
+    var sel=s.selector.length>40?s.selector.slice(0,37)+'...':s.selector;
+    selCard.appendChild(makeLearnItem(sel,s.action_type+' \u00B7 '+s.total_uses+' uses',parseFloat(s.fail_rate),s.fail_rate+'%',parseFloat(s.fail_rate)>30?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(selCard);
+
+  var pageCard=makeLearnCard('\u23F1','Problem Pages','No failing pages');
+  var pages=d.failingPages||[];
+  if(!pages.length){var e2=document.createElement('div');e2.className='learn-card-empty';e2.textContent=pageCard._empty;pageCard.appendChild(e2)}
+  else{pages.slice(0,5).forEach(function(p){
+    pageCard.appendChild(makeLearnItem(p.url_path,p.total_visits+' visits \u00B7 '+p.console_errors+' console errs',parseFloat(p.fail_rate),p.fail_rate+'%',parseFloat(p.fail_rate)>30?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(pageCard);
+
+  var flakyCard=makeLearnCard('\u223C','Flaky Tests','No flaky tests detected');
+  var flaky=d.flakyTests||[];
+  if(!flaky.length){var e3=document.createElement('div');e3.className='learn-card-empty';e3.textContent=flakyCard._empty;flakyCard.appendChild(e3)}
+  else{flaky.slice(0,5).forEach(function(f){
+    flakyCard.appendChild(makeLearnItem(f.test_name,'Attempt avg '+f.avg_attempts+' \u00B7 '+f.total_runs+' runs',parseFloat(f.flaky_rate),f.flaky_rate+'%',parseFloat(f.flaky_rate)>30?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(flakyCard);
+
+  var apiCard=makeLearnCard('\u21C4','API Issues','No API issues');
+  var apis=d.apiIssues||[];
+  if(!apis.length){var e4=document.createElement('div');e4.className='learn-card-empty';e4.textContent=apiCard._empty;apiCard.appendChild(e4)}
+  else{apis.slice(0,5).forEach(function(a){
+    var ep=a.endpoint.length>40?a.endpoint.slice(0,37)+'...':a.endpoint;
+    apiCard.appendChild(makeLearnItem(ep,a.total_calls+' calls \u00B7 '+durFmt(a.avg_duration_ms),parseFloat(a.error_rate),a.error_rate+'%',parseFloat(a.error_rate)>20?'var(--red)':'var(--amber)'));
+  })}
+  c.appendChild(apiCard);
 }
 
 function renderLearnTrend(trend){
-  var container=$('#learningsTrend');container.textContent='';
+  var container=$('#learnTrend');container.textContent='';
   if(!trend.length)return;
-  var card=document.createElement('div');card.className='card';
-  var label=document.createElement('div');label.className='card-label';label.textContent='Pass Rate Trend (7 days)';card.appendChild(label);
-  var chartDiv=document.createElement('div');chartDiv.className='learn-trend-chart';
+  var card=document.createElement('div');card.className='learn-card';
+  var titleEl=document.createElement('div');titleEl.className='learn-card-title';
+  var iconEl=document.createElement('span');iconEl.className='lc-icon';iconEl.textContent='\u2197';
+  titleEl.appendChild(iconEl);titleEl.appendChild(document.createTextNode('Pass Rate Trend'));
+  card.appendChild(titleEl);
+  var chartDiv=document.createElement('div');chartDiv.style.cssText='height:80px;width:100%';
   var w=100/trend.length;var ns='http://www.w3.org/2000/svg';
-  var svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 100 100');svg.setAttribute('preserveAspectRatio','none');
+  var svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 100 100');svg.setAttribute('preserveAspectRatio','none');svg.style.cssText='width:100%;height:100%';
   var bg=document.createElementNS(ns,'rect');bg.setAttribute('x','0');bg.setAttribute('y','0');bg.setAttribute('width','100');bg.setAttribute('height','100');bg.setAttribute('fill','var(--surface2)');bg.setAttribute('rx','2');svg.appendChild(bg);
   var gridLine=document.createElementNS(ns,'line');gridLine.setAttribute('x1','0');gridLine.setAttribute('y1','50');gridLine.setAttribute('x2','100');gridLine.setAttribute('y2','50');gridLine.setAttribute('stroke','var(--border)');gridLine.setAttribute('stroke-width','0.3');gridLine.setAttribute('stroke-dasharray','2,2');svg.appendChild(gridLine);
   var pts=trend.map(function(t,i){return(i*w+w/2)+','+(100-t.pass_rate)}).join(' ');
   var poly=document.createElementNS(ns,'polygon');poly.setAttribute('points',(0*w+w/2)+',100 '+pts+' '+((trend.length-1)*w+w/2)+',100');poly.setAttribute('fill','var(--accent-dim)');svg.appendChild(poly);
   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);
   trend.forEach(function(t,i){
-    var circle=document.createElementNS(ns,'circle');circle.setAttribute('cx',''+(i*w+w/2));circle.setAttribute('cy',''+(100-t.pass_rate));circle.setAttribute('r','2');circle.setAttribute('fill','var(--accent)');
+    var color=rateColor(t.pass_rate);
+    var circle=document.createElementNS(ns,'circle');circle.setAttribute('cx',''+(i*w+w/2));circle.setAttribute('cy',''+(100-t.pass_rate));circle.setAttribute('r','2.5');circle.setAttribute('fill',color);
     var title=document.createElementNS(ns,'title');title.textContent=t.date+': '+t.pass_rate+'% ('+t.total_tests+' tests)';circle.appendChild(title);svg.appendChild(circle);
   });
   chartDiv.appendChild(svg);card.appendChild(chartDiv);
@@ -2648,35 +2610,47 @@ function renderLearnTrend(trend){
   card.appendChild(dates);container.appendChild(card);
 }
 
-function buildLearnTable(title,headers,rows){
-  var card=document.createElement('div');card.className='card learn-section';
-  var h=document.createElement('div');h.className='learn-section-title';h.textContent=title;card.appendChild(h);
-  var wrap=document.createElement('div');wrap.className='tbl-wrap';
-  var tbl=document.createElement('table');tbl.className='learn-table';
-  var thead=document.createElement('thead');var hr=document.createElement('tr');
-  headers.forEach(function(hdr){var th=document.createElement('th');th.textContent=hdr;hr.appendChild(th)});
-  thead.appendChild(hr);tbl.appendChild(thead);
-  var tbody=document.createElement('tbody');
-  rows.forEach(function(cells){
-    var tr=document.createElement('tr');
-    cells.forEach(function(cell){
-      var td=document.createElement('td');
-      if(cell.code){var code=document.createElement('code');code.textContent=cell.code;td.appendChild(code)}
-      else if(cell.badge){var span=document.createElement('span');span.className='badge '+cell.cls;span.textContent=cell.badge;td.appendChild(span)}
-      else{td.textContent=cell.text!==undefined&&cell.text!==null?cell.text:(typeof cell==='object'?'-':cell)}
-      tr.appendChild(td);
+function renderLearnBottomRow(d){
+  var c=$('#learnBottom');c.textContent='';
+
+  var errCard=makeLearnCard('\u2718','Most Common Errors','No errors recorded');
+  var errors=d.topErrors||[];
+  if(!errors.length){var e1=document.createElement('div');e1.className='learn-card-empty';e1.textContent=errCard._empty;errCard.appendChild(e1)}
+  else{errors.slice(0,5).forEach(function(e){
+    var pat=e.pattern.length>45?e.pattern.slice(0,42)+'...':e.pattern;
+    var maxCount=errors[0].occurrence_count||1;
+    var pct=(e.occurrence_count/maxCount)*100;
+    var verdictEl=document.createElement('div');verdictEl.className='learn-verdict '+rateClass(100-(pct));verdictEl.textContent=e.category.replace(/-/g,' ');
+    var item=makeLearnItem(pat,(e.last_seen||'').split('T')[0]+' \u00B7 '+e.occurrence_count+'x',pct,e.occurrence_count+'x','var(--red)');
+    item.insertBefore(verdictEl,item.lastChild);
+    errCard.appendChild(item);
+  })}
+  c.appendChild(errCard);
+
+  var slowCard=makeLearnCard('\u23F3','Slowest Tests','No slow test data');
+  var trend=d.recentTrend||[];
+  var slowTests=[];
+  if(d.flakyTests){
+    d.flakyTests.forEach(function(f){
+      if(f.avg_duration_ms&&f.avg_duration_ms>2000){slowTests.push({name:f.test_name,dur:f.avg_duration_ms})}
     });
-    tbody.appendChild(tr);
-  });
-  tbl.appendChild(tbody);wrap.appendChild(tbl);card.appendChild(wrap);return card;
+  }
+  if(d.failingPages){
+    d.failingPages.forEach(function(p){
+      if(p.avg_load_time_ms&&p.avg_load_time_ms>3000){slowTests.push({name:p.url_path,dur:p.avg_load_time_ms})}
+    });
+  }
+  slowTests.sort(function(a,b){return b.dur-a.dur});
+  if(!slowTests.length){var e2=document.createElement('div');e2.className='learn-card-empty';e2.textContent=slowCard._empty;slowCard.appendChild(e2)}
+  else{
+    var maxDur=slowTests[0].dur;
+    slowTests.slice(0,5).forEach(function(t){
+      slowCard.appendChild(makeLearnItem(t.name,'','',durFmt(t.dur),(t.dur/maxDur)*100,t.dur>5000?'var(--red)':'var(--amber)'));
+    });
+  }
+  c.appendChild(slowCard);
 }
 
-function renderLearnFlaky(flaky){var c=$('#learningsFlaky');c.textContent='';if(!flaky.length)return;c.appendChild(buildLearnTable('Flaky Tests',['Test','Flaky Rate','Occurrences','Total Runs','Last Flaky','Avg Attempts'],flaky.map(function(f){return[{code:f.test_name},{badge:f.flaky_rate+'%',cls:f.flaky_rate>30?'fail':'flaky'},{text:f.flaky_count},{text:f.total_runs},{text:(f.last_flaky||'-').split('T')[0]},{text:f.avg_attempts}]})))}
-function renderLearnSelectors(sels){var c=$('#learningsSelectors');c.textContent='';if(!sels.length)return;c.appendChild(buildLearnTable('Unstable Selectors',['Selector','Action','Fail Rate','Uses','Tests','Page'],sels.map(function(s){var sel=s.selector.length>45?s.selector.slice(0,42)+'...':s.selector;return[{code:sel},{text:s.action_type},{badge:s.fail_rate+'%',cls:s.fail_rate>30?'fail':'flaky'},{text:s.total_uses},{text:s.used_by_tests},{text:s.page_url||'-'}]})))}
-function renderLearnPages(pages){var c=$('#learningsPages');c.textContent='';if(!pages.length)return;c.appendChild(buildLearnTable('Failing Pages',['Page','Fail Rate','Visits','Console Errors','Network Errors'],pages.map(function(p){return[{code:p.url_path},{badge:p.fail_rate+'%',cls:p.fail_rate>30?'fail':'flaky'},{text:p.total_visits},{text:p.console_errors},{text:p.network_errors}]})))}
-function renderLearnApis(apis){var c=$('#learningsApis');c.textContent='';if(!apis.length)return;c.appendChild(buildLearnTable('API Issues',['Endpoint','Error Rate','Calls','Avg Duration','Status Codes'],apis.map(function(a){var ep=a.endpoint.length>45?a.endpoint.slice(0,42)+'...':a.endpoint;var d=a.avg_duration_ms<1000?Math.round(a.avg_duration_ms)+'ms':(a.avg_duration_ms/1000).toFixed(1)+'s';return[{code:ep},{badge:a.error_rate+'%',cls:a.error_rate>20?'fail':'flaky'},{text:a.total_calls},{text:d},{text:a.status_codes||'-'}]})))}
-function renderLearnErrors(errors){var c=$('#learningsErrors');c.textContent='';if(!errors.length)return;c.appendChild(buildLearnTable('Error Patterns',['Pattern','Category','Count','First Seen','Last Seen','Example Test'],errors.map(function(e){var pat=e.pattern.length>50?e.pattern.slice(0,47)+'...':e.pattern;return[{text:pat},{badge:e.category,cls:'run'},{text:e.occurrence_count},{text:(e.first_seen||'-').split('T')[0]},{text:(e.last_seen||'-').split('T')[0]},{code:e.example_test||'-'}]})))}
-
 $('#btnRefreshLearnings').addEventListener('click',refreshLearnings);
 $('#learningsDays').addEventListener('change',refreshLearnings);
 
@@ -2710,10 +2684,41 @@ $('#modal').addEventListener('click',function(){$('#modal').classList.remove('op
 /* ══════════════════════════════════════════════════════════════════
    Live Execution View
    ══════════════════════════════════════════════════════════════════ */
-function clearFinishedLiveRuns(){for(var k in S.liveRuns){if(S.liveRuns[k].done||!S.liveRuns[k].on)delete S.liveRuns[k]}renderLive()}
+function clearFinishedLiveRuns(){for(var k in S.liveRuns){if(S.liveRuns[k].done||!S.liveRuns[k].on)delete S.liveRuns[k]}S.screencastTest=null;renderLive()}
 function dismissLiveRun(rid){delete S.liveRuns[rid];renderLive()}
 $('#liveClearBtn').addEventListener('click',clearFinishedLiveRuns);
 
+// Screencast state
+S.screencastTest=null;
+
+$('#screencastSelect').addEventListener('change',function(){
+  S.screencastTest=this.value||null;
+  var img=$('#screencastImg'),ph=$('#screencastPlaceholder');
+  if(S.screencastTest){img.style.display='block';ph.style.display='none';img.src=''}
+  else{img.style.display='none';ph.style.display='flex'}
+});
+
+function updateScreencastSelect(){
+  var sel=$('#screencastSelect'),panel=$('#screencastPanel');
+  var runningTests=[];
+  for(var k in S.liveRuns){var r=S.liveRuns[k];for(var n in r.tests){if(n!=='__error'&&r.tests[n].status==='running')runningTests.push(n)}}
+  // Show panel if any run is active
+  var anyActive=false;for(var k2 in S.liveRuns)if(S.liveRuns[k2].on)anyActive=true;
+  panel.style.display=anyActive?'':'none';
+  // Rebuild options
+  var prev=sel.value;
+  while(sel.options.length>1)sel.remove(1);
+  runningTests.forEach(function(n){var o=document.createElement('option');o.value=n;o.textContent=n;sel.appendChild(o)});
+  // Auto-select first running test if nothing selected
+  if(!S.screencastTest&&runningTests.length>0){S.screencastTest=runningTests[0];sel.value=S.screencastTest;$('#screencastImg').style.display='block';$('#screencastPlaceholder').style.display='none'}
+  else if(S.screencastTest&&runningTests.indexOf(S.screencastTest)===-1){
+    // Current test finished — pick next running or clear
+    if(runningTests.length>0){S.screencastTest=runningTests[0];sel.value=S.screencastTest}
+    else{S.screencastTest=null;sel.value='';$('#screencastImg').style.display='none';$('#screencastPlaceholder').style.display='flex';$('#screencastPlaceholder').textContent='No running tests'}
+  }
+  else{sel.value=S.screencastTest||''}
+}
+
 function renderLive(){
   var panel=$('#livePanel'),grid=$('#liveTests'),navLive=$('#navLive'),liveEmpty=$('#liveEmpty');
   var runs=S.liveRuns;var runIds=Object.keys(runs);
@@ -2824,12 +2829,18 @@ function renderLive(){
         ssEl=el('div',{className:'lt-screenshots'},[toggle,ssGridEl]);
       }
 
+      // Screencast focus indicator
+      var scFocusBadge=null;
+      if(t.status==='running'){
+        var isFocused=S.screencastTest===name;
+        scFocusBadge=el('span',{className:'sc-focus-badge'+(isFocused?' active':''),title:'Watch this test',onclick:function(e){e.stopPropagation();S.screencastTest=name;$('#screencastSelect').value=name;$('#screencastImg').style.display='block';$('#screencastPlaceholder').style.display='none';renderLive()}},'\uD83C\uDFA5');
+      }
       var serialBadge=t.serial?el('span',{className:'serial-badge'},'Serial'):null;
       var poolBadge=t.poolUrl?el('span',{className:'pool-badge'},t.poolUrl.replace('ws://','').replace('wss://','')):null;
       var card=el('div',{className:'live-test '+t.status+(isCollapsed?' collapsed':'')},[
         el('div',{className:'lt-name'},[
           t.status==='running'?el('span',{className:'spinner'}):el('span',{className:'lt-icon',style:iconColor},iconText),
-          document.createTextNode(' '+name),serialBadge,poolBadge,summaryEl
+          document.createTextNode(' '+name),scFocusBadge,serialBadge,poolBadge,summaryEl
         ]),
         el('div',{className:'lt-meta'},meta),stepsEl
       ]);
@@ -2849,6 +2860,7 @@ function renderLive(){
     });
     grid.appendChild(testGrid);
   });
+  updateScreencastSelect();
 }
 
 
@@ -2875,7 +2887,7 @@ document.addEventListener('keydown',function(e){
     return;
   }
   if(e.key==='?'){$('#kbModal').classList.toggle('open');return}
-  var viewMap={'1':'watch','2':'tests','3':'runs','4':'live','5':'instances'};
+  var viewMap={'1':'watch','2':'tests','3':'runs','4':'live'};
   if(viewMap[e.key]){showView(viewMap[e.key]);return}
   if(e.key==='r'){
     if(S.view==='watch')refreshWatch();