playwright-reborn 0.2.2 → 0.2.4

package/dist/ui/report.js

@@ -17,20 +17,22 @@
   var TABS = ['overview', 'tests', 'screenshots'];
   if (data.showLogs !== false) TABS.push('logs');
   if (data.showFiles !== false) TABS.push('files');
+  var testIndex = new Map(data.tests.map(function (test) { return [test.id, test]; }));
   var route = readRoute();
   var state = {
     tab: route.tab,
     filter: 'all',
     query: '',
-    selectedId: route.id || initialFailure(),
+    selectedId: testIndex.has(route.id) ? route.id : initialFailure(),
     attempt: 0,
     showApi: false,
     testPane: 'steps',
     listLimit: 200,
+    timelineLimit: 200,
     shotFilter: 'all',
     logQuery: '',
-    tag: 'all',
-    projectFilter: 'all',
+    tag: null,
+    projectFilter: null,
     overview: data.overview === 'timeline' ? 'timeline' : 'chart',
     order: 'grouped',
     band: 'all',
@@ -45,18 +47,22 @@
   var findTimer = 0;
 
   app.innerHTML = [
-    '<div class="atmosphere" aria-hidden="true"><canvas class="bands"></canvas><div class="grain"></div><div class="veil"></div></div>',
     '<div class="shell">',
     '<aside class="rail">',
-    '<div class="tabbar" role="tablist" aria-label="Report">',
-    '<span class="tab-glow" id="tab-glow"></span>',
+    '<div class="sidebar-brand">' + icon('brand') + '<span>Reborn<span class="brand-caption">Test reports</span></span></div>',
+    '<div class="project-card">' + icon('folder') + '<div><span class="project-caption">Workspace</span><strong id="workspace-name"></strong></div></div>',
+    '<p class="nav-caption">Run workspace</p>',
+    '<div class="tabbar" role="tablist" aria-label="Report" aria-orientation="vertical">',
+
     TABS.map(function (id) {
-      return tabButton(id, id.charAt(0).toUpperCase() + id.slice(1));
+      return tabButton(id, id === 'overview' ? 'Dashboard' : id.charAt(0).toUpperCase() + id.slice(1));
     }).join(''),
     '</div>',
-    '<p class="meta" id="meta"></p>',
+    '<div class="sidebar-bottom"><p class="nav-caption">Current run</p><p class="sidebar-state run-state" id="sidebar-state"></p><p class="sidebar-note">Completed <span id="sidebar-time"></span></p><div class="keyboard-hint"><kbd>/</kbd><span>Find a test</span></div></div>',
     '</aside>',
     '<div class="stage">',
+    '<header class="workspace-bar"><div class="breadcrumb"><span id="breadcrumb-company"></span><span class="breadcrumb-separator">/</span><strong id="page-name">Dashboard</strong></div><button class="theme-toggle" id="theme-toggle" type="button" role="switch" aria-checked="false" aria-label="Dark mode">' + icon('moon') + '<span>Dark mode</span><span class="theme-switch" aria-hidden="true"></span></button></header>',
+    '<div class="report-content">',
     '<div id="panel-overview" role="tabpanel"></div>',
     '<div id="panel-tests" role="tabpanel" hidden></div>',
     '<div id="panel-screenshots" role="tabpanel" hidden></div>',
@@ -65,11 +71,16 @@
     '<p class="foot" id="foot"></p>',
     '</div>',
     '</div>',
+    '</div>',
   ].join('');
 
   document.body.dataset.accent = accentName();
+  applyTheme(readTheme());
   document.title = companyName() + (data.summary ? ' · ' + data.summary : '');
-  fill(document.getElementById('meta'), metaBits().map(function (bit) { return el('span', null, [bit]); }));
+  document.getElementById('workspace-name').textContent = companyName();
+  document.getElementById('breadcrumb-company').textContent = companyName();
+  document.getElementById('sidebar-time').textContent = formatWhen(data.generatedAt);
+  setRunState(document.getElementById('sidebar-state'));
   var footBits = [];
   if (data.showCredit === true) footBits.push(el('span', null, ['Open source by World of Z']));
   footBits.push(el('span', null, [formatWhen(data.generatedAt)]));
@@ -81,87 +92,41 @@
     ['3to5', '3 to 5 minutes'],
     ['over5', 'Over 5 minutes'],
   ];
-  var CHART_COLORS = ['var(--accent)', 'rgba(255,255,255,0.72)', 'rgba(255,255,255,0.42)', 'rgba(255,255,255,0.18)'];
+  var CHART_COLORS = ['var(--heading)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)'];
 
+  syncTabOrientation();
+  window.addEventListener('resize', syncTabOrientation);
   paintOverview();
   showTab(state.tab, true);
   bind();
-  watchHeader();
-  startCurtain();
-
-  function startCurtain() {
-    var canvas = document.querySelector('.atmosphere .bands');
-    if (!canvas || !canvas.getContext) return;
-    var ctx = canvas.getContext('2d');
-    var ratio = 1;
-    var columns = [];
-    var count = 22;
-    for (var i = 0; i < count; i += 1) {
-      var n = Math.sin(210 + i * 2.17);
-      columns.push({
-        at: (i + 0.35 + n * 0.15) / count,
-        width: 0.012 + (0.5 + n * 0.5) * 0.018,
-        speed: 0.22 + (i % 6) * 0.05,
-        phase: i * 1.37,
-        depth: i % 3,
-      });
-    }
-    function resize() {
-      ratio = Math.min(window.devicePixelRatio || 1, 2);
-      var rect = canvas.getBoundingClientRect();
-      canvas.width = Math.max(1, Math.floor(rect.width * ratio));
-      canvas.height = Math.max(1, Math.floor(rect.height * ratio));
-    }
-    var rgb = accentParts();
-    function draw(now) {
-      var w = canvas.width;
-      var h = canvas.height;
-      var t = reduce ? 8 : now / 1000;
-      ctx.clearRect(0, 0, w, h);
-      var wash = ctx.createLinearGradient(0, 0, 0, h);
-      wash.addColorStop(0, '#123d24');
-      wash.addColorStop(0.42, '#0a2416');
-      wash.addColorStop(1, '#050806');
-      ctx.fillStyle = wash;
-      ctx.fillRect(0, 0, w, h);
-      columns.forEach(function (column) {
-        var sway = Math.sin(t * column.speed + column.phase) * 0.02;
-        var breath = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(t * column.speed * 1.4 + column.phase));
-        var x = (column.at + sway) * w;
-        var spread = Math.max(10, column.width * w * (0.55 + breath * 0.35));
-        var gradient = ctx.createLinearGradient(x - spread, 0, x + spread, 0);
-        var alpha = 0.28 + 0.62 * breath;
-        gradient.addColorStop(0, 'rgba(' + rgb + ', 0)');
-        gradient.addColorStop(0.42, 'rgba(' + rgb + ', ' + (alpha * 0.45).toFixed(3) + ')');
-        gradient.addColorStop(0.5, 'rgba(' + rgb + ', ' + alpha.toFixed(3) + ')');
-        gradient.addColorStop(0.58, 'rgba(' + rgb + ', ' + (alpha * 0.45).toFixed(3) + ')');
-        gradient.addColorStop(1, 'rgba(' + rgb + ', 0)');
-        ctx.fillStyle = gradient;
-        ctx.fillRect(x - spread, 0, spread * 2, h * 0.92);
-      });
-      if (!reduce) requestAnimationFrame(draw);
-    }
-    resize();
-    window.addEventListener('resize', resize);
-    requestAnimationFrame(function (now) {
-      if (!canvas.width) resize();
-      draw(now);
-    });
+
+
+  function icon(name) {
+    var paths = {
+      brand: '<path d="m8 5-5 7 5 7m8-14 5 7-5 7m-8-7 3 3 5-6"/>',
+      overview: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
+      tests: '<path d="m9 11 2 2 4-4"/><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V2h6v2"/>',
+      screenshots: '<rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8" cy="8" r="1.5"/><path d="m3 17 6-6 4 4 3-3 5 5"/>',
+      logs: '<path d="m5 6 4 4-4 4m7 3h7"/><rect x="2" y="2" width="20" height="20" rx="3"/>',
+      files: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm0 0v6h6M8 13h8m-8 4h5"/>',
+      folder: '<path d="M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>',
+      search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>',
+      clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+      check: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
+      alert: '<path d="m12 3 10 18H2Z M12 9v4m0 3v1"/>',
+      moon: '<path d="M21 13a9 9 0 0 1-10-10 9 9 0 1 0 10 10Z"/>',
+      arrow: '<path d="M5 12h14m-5-5 5 5-5 5"/>',
+    };
+    return '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + (paths[name] || paths.tests) + '</svg>';
+  }
+
+  function syncTabOrientation() {
+    document.querySelector('.tabbar').setAttribute('aria-orientation', window.innerWidth <= 800 ? 'horizontal' : 'vertical');
   }
 
-  function watchHeader() {
-    var rail = document.querySelector('.rail');
-    if (!rail) return;
-    var lastY = window.scrollY;
-    window.addEventListener('scroll', function () {
-      var y = window.scrollY;
-      var down = y > lastY + 6;
-      var up = y < lastY - 6;
-      if (y < 24) rail.classList.remove('is-hidden');
-      else if (down) rail.classList.add('is-hidden');
-      else if (up) rail.classList.remove('is-hidden');
-      lastY = y;
-    }, { passive: true });
+  function setRunState(node) {
+    node.dataset.status = data.status;
+    node.textContent = { passed: 'Run passed', failed: 'Run failed', timedout: 'Run timed out', interrupted: 'Run interrupted' }[data.status] || 'Run finished';
   }
 
   function companyName() {
@@ -174,27 +139,32 @@
     return allowed[data.accent] ? data.accent : 'green';
   }
 
-  function accentParts() {
-    var probe = document.createElement('span');
-    probe.style.color = 'var(--accent)';
-    document.body.appendChild(probe);
-    var color = getComputedStyle(probe).color;
-    probe.remove();
-    var parts = color.match(/\d+/g) || ['0', '255', '136'];
-    return parts.slice(0, 3).join(', ');
+  function readTheme() {
+    try {
+      var saved = localStorage.getItem('reborn-theme');
+      if (saved === 'light' || saved === 'dark') return saved;
+    } catch (error) { /* Storage may be unavailable for local reports. */ }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function applyTheme(theme) {
+    document.body.dataset.theme = theme;
+    document.getElementById('theme-toggle').setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
   }
 
   function tabButton(id, label) {
-    return '<button class="tab" role="tab" type="button" data-tab="' + id + '" aria-selected="false" aria-controls="panel-' + id + '">' + label + '</button>';
+    var count = id === 'tests' ? data.tests.length : null;
+    return '<button id="tab-' + id + '" class="tab" role="tab" type="button" data-tab="' + id + '" aria-selected="false" aria-controls="panel-' + id + '">' + icon(id) + '<span>' + label + '</span>' + (count === null ? '' : '<span class="nav-count" aria-hidden="true">' + count + '</span>') + '</button>';
   }
 
   function readRoute() {
-    var hash = '';
-    try { hash = decodeURIComponent(location.hash.slice(1)); } catch (error) { hash = ''; }
-    if (!hash || hash === 'overview') return { tab: 'overview' };
+    var hash = location.hash.slice(1);
+    try {
+      if (hash.indexOf('tests/') === 0) return { tab: 'tests', id: decodeURIComponent(hash.slice(6)) };
+      hash = decodeURIComponent(hash);
+    } catch (error) { return { tab: 'overview' }; }
     if (TABS.indexOf(hash) !== -1) return { tab: hash };
-    if (hash.indexOf('tests/') === 0) return { tab: 'tests', id: decodeURIComponent(hash.slice(6)) };
-    if (data.tests.some(function (test) { return test.id === hash; })) return { tab: 'tests', id: hash };
+    if (testIndex.has(hash)) return { tab: 'tests', id: hash };
     return { tab: 'overview' };
   }
 
@@ -206,13 +176,16 @@
   function showTab(tab, quiet) {
     if (TABS.indexOf(tab) === -1) tab = 'overview';
     state.tab = tab;
+    document.getElementById('page-name').textContent = tab === 'overview' ? 'Dashboard' : tab.charAt(0).toUpperCase() + tab.slice(1);
     document.querySelectorAll('[role="tab"]').forEach(function (button) {
       button.setAttribute('aria-selected', button.dataset.tab === tab ? 'true' : 'false');
+      button.tabIndex = button.dataset.tab === tab ? 0 : -1;
     });
     TABS.forEach(function (name) {
       var panel = document.getElementById('panel-' + name);
       var on = name === tab;
       panel.hidden = !on;
+      panel.setAttribute('aria-labelledby', 'tab-' + name);
       panel.classList.toggle('panel', true);
       if (on && !quiet && !reduce) {
         panel.classList.remove('panel-enter');
@@ -224,68 +197,111 @@
     if (tab === 'screenshots') ensureShots();
     if (tab === 'logs') ensureLogs();
     if (tab === 'files') ensureFiles();
-    writeHash();
-    placeTabGlow();
+    writeHash(!quiet);
+
   }
 
-  function writeHash() {
+  function writeHash(push) {
     var next = state.tab === 'overview' ? 'overview' : state.tab;
     if (state.tab === 'tests' && state.selectedId) next = 'tests/' + encodeURIComponent(state.selectedId);
-    if (window.history && history.replaceState) history.replaceState(null, '', '#' + next);
-  }
-
-  function placeTabGlow() {
-    var bar = document.querySelector('.tabbar');
-    var glow = document.getElementById('tab-glow');
-    var active = document.querySelector('.tab[aria-selected="true"]');
-    if (!bar || !glow || !active) return;
-    var barBox = bar.getBoundingClientRect();
-    var box = active.getBoundingClientRect();
-    glow.style.width = box.width + 'px';
-    glow.style.transform = 'translateX(' + (box.left - barBox.left - 4) + 'px)';
+    if (location.hash === '#' + next) return;
+    if (window.history && history.replaceState) {
+      var url = location.protocol === 'about:' ? location.href.split('#')[0] + '#' + next : '#' + next;
+      try { history[push ? 'pushState' : 'replaceState'](null, '', url); } catch (error) { /* Some artifact viewers block history updates. */ }
+    }
   }
 
   function paintOverview() {
     var host = document.getElementById('panel-overview');
     host.innerHTML = [
       '<header class="hero">',
-      '<div><h1 class="word" id="word"></h1><p class="product" id="product"></p><p class="summary" id="summary"></p></div>',
-      '<p class="time" id="time"></p>',
+      '<div><p class="dashboard-kicker">Run overview</p><h1 class="word">Dashboard</h1><p class="product" id="product"></p><p class="summary" id="summary"></p></div>',
+      '<p class="run-state" id="run-state"></p>',
       '</header>',
+      '<p class="meta" id="meta"></p>',
       '<div id="errors"></div>',
-      '<dl class="info" id="info"></dl>',
-      '<section class="console">',
-      '<div class="console-body">',
-      '<p class="section-label">Results</p>',
-      '<div class="legend" id="legend"></div>',
-      '<div class="range-head">',
-      '<p class="section-label" id="range-label">Duration</p>',
-      '<div class="views" role="group" aria-label="Overview shape">',
-      '<button type="button" class="view" data-overview="chart">Chart</button>',
-      '<button type="button" class="view" data-overview="timeline">Timeline</button>',
-      '</div>',
-      '</div>',
-      '<p class="section-note" id="range-note"></p>',
-      '<div class="charts" id="duration"></div>',
+      '<div class="metric-grid" id="metrics"></div>',
+      '<div class="dashboard-grid">',
+      '<section class="dashboard-card result-card"><div class="card-heading"><h2>Test results</h2><span class="card-detail">This run</span></div>',
+      '<div class="result-body"><div class="result-ring" id="result-ring"><div><strong id="pass-percent"></strong><span>Passed</span></div></div>',
+      '<div class="legend" id="legend"></div></div><p class="card-note" id="result-note"></p></section>',
+      '<section class="dashboard-card console"><div class="console-body">',
+      '<div class="range-head"><h2 class="section-label" id="range-label">Duration</h2>',
+      '<div class="views" role="group" aria-label="Overview shape"><button type="button" class="view" data-overview="chart">Chart</button><button type="button" class="view" data-overview="timeline">Timeline</button></div></div>',
+      '<p class="section-note" id="range-note"></p><div class="charts" id="duration"></div>',
       '<div class="strip-window" id="strip-window"><div class="strip-scroll"><div class="strip" id="strip" role="group" aria-label="Tests by time"></div></div></div>',
+      '</div></section>',
+      '<section class="dashboard-card attention-card"><div class="card-heading"><h2>Needs attention</h2><button type="button" class="dashboard-link" data-go-tests>View all tests ' + icon('arrow') + '</button></div><div id="attention-list"></div></section>',
+      '<section class="dashboard-card environment-card"><div class="card-heading"><h2>Run details</h2>' + icon('folder') + '</div><dl class="run-details" id="run-details"></dl><dl class="info" id="info"></dl></section>',
       '</div>',
-      '</section>',
     ].join('');
-    var word = document.getElementById('word');
-    word.textContent = companyName();
-    var product = document.getElementById('product');
     var subtitle = typeof data.productSubtitle === 'string' ? data.productSubtitle.trim() : 'Test Automation';
-    if (subtitle) product.textContent = subtitle;
-    else product.hidden = true;
+    document.getElementById('product').textContent = subtitle;
+    document.getElementById('product').hidden = !subtitle;
     document.getElementById('summary').textContent = data.summary || '';
-    countUp(document.getElementById('time'), data.duration || 0, formatDuration);
+    fill(document.getElementById('meta'), metaBits().map(function (bit) { return el('span', null, [bit]); }));
+    setRunState(document.getElementById('run-state'));
+    paintDashboard();
     paintErrors();
     paintInfo();
     paintCounts(document.getElementById('legend'), false);
     paintDuration();
     paintStrip();
     applyOverview();
-    showNow(state.selectedId);
+  }
+
+  function paintDashboard() {
+    var counts = data.counts || {};
+    var total = data.tests.length;
+    var passed = counts.passed || 0;
+    var percent = total ? Math.round(passed / total * 100) : 0;
+    var problems = data.tests.filter(isProblem);
+    var metrics = [
+      ['tests', 'Total tests', String(total), 'Across ' + uniqueValues(function (test) { return [test.file]; }).length + ' test files', ''],
+      ['check', 'Pass rate', total ? percent + '%' : '—', passed + ' of ' + total + ' tests passed', 'positive'],
+      ['clock', 'Run duration', formatDuration(data.duration || 0), 'Wall time including retries', ''],
+      ['alert', 'Needs attention', String(problems.length), 'Failed, flaky or interrupted', problems.length ? 'warning' : 'positive'],
+    ];
+    fill(document.getElementById('metrics'), metrics.map(function (metric) {
+      var node = el('div', { class: 'metric ' + metric[4] }, [
+        el('div', { class: 'metric-label' }, [metric[1]]),
+        el('strong', { class: 'metric-value' }, [metric[2]]),
+        el('span', { class: 'metric-note' }, [metric[3]]),
+      ]);
+      node.querySelector('.metric-label').insertAdjacentHTML('beforeend', icon(metric[0]));
+      return node;
+    }));
+    document.getElementById('pass-percent').textContent = total ? percent + '%' : '—';
+    var colors = { passed: 'var(--pass)', failed: 'var(--fail)', timedOut: 'var(--fail)', flaky: 'var(--flaky)', skipped: 'var(--skip)', interrupted: 'var(--timeout)' };
+    var offset = 0;
+    var stops = [];
+    Object.keys(colors).forEach(function (status) {
+      var amount = counts[status] || 0;
+      if (!amount || !total) return;
+      var next = offset + amount / total * 100;
+      stops.push(colors[status] + ' ' + offset + '% ' + next + '%');
+      offset = next;
+    });
+    document.getElementById('result-ring').style.background = stops.length ? 'conic-gradient(' + stops.join(',') + ')' : 'var(--hairline)';
+    document.getElementById('result-note').textContent = 'Select a result to explore its tests. Pass rate includes skipped tests in the total.';
+    var attention = problems.slice(0, 5).map(function (test) {
+      return el('button', { type: 'button', class: 'attention-row open-test', 'data-id': test.id, 'data-attempt': String(failedAttempt(test)) }, [
+        el('span', { class: 'attention-status sw', 'data-status': test.status }, [statusLabel(test)]),
+        el('span', { class: 'attention-test' }, [el('strong', null, [test.title]), el('span', null, [test.file])]),
+        el('span', { class: 'attention-time' }, [formatDuration(test.duration)]),
+      ]);
+    });
+    if (!attention.length) attention.push(el('p', { class: 'empty' }, [total ? 'No tests need attention. Your run is looking good.' : 'No tests ran. Run your test suite to see results here.']));
+    if (problems.length > 5) attention.push(el('p', { class: 'card-note' }, ['Showing 5 of ' + problems.length + ' tests. View all tests to explore the rest.']));
+    fill(document.getElementById('attention-list'), attention);
+    var rows = [['Started', formatWhen(data.startTime)], ['Workers', String(data.workers || 0)], ['Screenshots', { off: 'Off', failure: 'On failure', last: 'Last step', steps: 'Every step' }[data.screenshots] || 'Off']];
+    if (data.showProjects === true && (data.projects || []).length) rows.push(['Projects', data.projects.join(', ')]);
+    if (data.shard) rows.push(['Shard', data.shard]);
+    var customLabels = (data.info || []).map(function (row) { return String(row.label).toLowerCase(); });
+    rows = rows.filter(function (row) { return customLabels.indexOf(row[0].toLowerCase()) === -1; });
+    fill(document.getElementById('run-details'), rows.map(function (row) {
+      return el('div', null, [el('dt', null, [row[0]]), el('dd', null, [row[1]])]);
+    }));
   }
 
   function paintInfo() {
@@ -361,7 +377,7 @@
       empty.setAttribute('cx', '110');
       empty.setAttribute('cy', '110');
       empty.setAttribute('r', '96');
-      empty.setAttribute('fill', 'rgba(255,255,255,0.08)');
+      empty.setAttribute('fill', 'var(--hairline)');
       svg.appendChild(empty);
       return svg;
     }
@@ -479,7 +495,7 @@
   function paintCounts(host, withFind) {
     var counts = data.counts || {};
     var filters = [
-      ['all', 'ran', counts.total || 0],
+      ['all', 'tests', counts.total || 0],
       ['passed', 'passed', counts.passed || 0],
       ['failed', 'failed', counts.failed || 0],
       ['flaky', 'flaky', counts.flaky || 0],
@@ -490,22 +506,9 @@
     var buttons = filters.map(function (filter) {
       return el('button', { class: 'count', type: 'button', 'data-status': filter[0], 'aria-pressed': 'false' }, [
         el('span', { class: 'n' }, [String(filter[2])]),
-        filter[1],
+        ' ' + filter[1],
       ]);
     });
-    if (host.id === 'legend') {
-      buttons.unshift(el('div', { class: 'count count-static' }, [
-        el('span', { class: 'n' }, [formatDuration(data.duration || 0)]),
-        'total',
-      ]));
-      buttons.forEach(function (button) {
-        if (button.classList.contains('count-static')) return;
-        var node = button.querySelector('.n');
-        var value = Number(node.textContent);
-        node.textContent = '0';
-        countUp(node, value, function (next) { return String(Math.round(next)); });
-      });
-    }
     var children = buttons;
     if (withFind) {
       children = buttons.concat([el('div', { class: 'find-wrap' }, [
@@ -517,7 +520,7 @@
   }
 
   function syncPressed() {
-    document.querySelectorAll('.count').forEach(function (button) {
+    document.querySelectorAll('.count[data-status]').forEach(function (button) {
       button.setAttribute('aria-pressed', button.dataset.status === state.filter ? 'true' : 'false');
     });
   }
@@ -538,7 +541,7 @@
   function paintStrip() {
     var strip = document.getElementById('strip');
     if (!data.tests.length) {
-      fill(strip, []);
+      fill(strip, [el('p', { class: 'empty' }, ['No tests ran.'])]);
       return;
     }
     var max = data.tests.reduce(function (hi, test) { return Math.max(hi, test.duration || 0); }, 1);
@@ -547,7 +550,7 @@
     });
     strip.className = 'run-list';
     strip.style.height = '';
-    fill(strip, ordered.map(function (test) {
+    var nodes = ordered.slice(0, state.timelineLimit).map(function (test) {
       var fillBar = el('span', { class: 'run-fill', 'data-status': test.status });
       fillBar.style.width = Math.max(2, Math.round(((test.duration || 0) / max) * 100)) + '%';
       return el('button', {
@@ -562,51 +565,10 @@
         el('span', { class: 'run-track' }, [fillBar]),
         el('span', { class: 'run-time' }, [formatDuration(test.duration)]),
       ]);
-    }));
-    markStrip();
-  }
-
-  function paintCanvasStrip(host) {
-    var canvas = el('canvas', { class: 'strip-canvas', 'aria-label': 'Tests by duration' });
-    fill(host, [canvas]);
-    var hits = [];
-    function draw() {
-      var width = host.clientWidth || 600;
-      var height = 52;
-      var ratio = window.devicePixelRatio || 1;
-      canvas.width = Math.floor(width * ratio);
-      canvas.height = Math.floor(height * ratio);
-      canvas.style.width = width + 'px';
-      canvas.style.height = height + 'px';
-      var ctx = canvas.getContext('2d');
-      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
-      ctx.clearRect(0, 0, width, height);
-      var total = data.tests.reduce(function (sum, test) { return sum + Math.max(test.duration || 0, 1); }, 0);
-      var x = 0;
-      hits = [];
-      data.tests.forEach(function (test) {
-        var w = Math.max(2, (Math.max(test.duration || 0, 1) / total) * width);
-        ctx.fillStyle = canvasColor(test.status);
-        ctx.fillRect(x, 8, Math.max(1, w - 2), 36);
-        hits.push({ x: x, w: w, id: test.id });
-        x += w;
-      });
-    }
-    draw();
-    window.addEventListener('resize', draw);
-    canvas.addEventListener('mousemove', function (event) {
-      var rect = canvas.getBoundingClientRect();
-      var x = event.clientX - rect.left;
-      var hit = hits.find(function (item) { return x >= item.x && x < item.x + item.w; });
-      if (hit) showNow(hit.id);
-    });
-    canvas.addEventListener('mouseleave', function () { showNow(state.selectedId); });
-    canvas.addEventListener('click', function (event) {
-      var rect = canvas.getBoundingClientRect();
-      var x = event.clientX - rect.left;
-      var hit = hits.find(function (item) { return x >= item.x && x < item.x + item.w; });
-      if (hit) choose(hit.id, true);
     });
+    if (ordered.length > state.timelineLimit) nodes.push(el('button', { class: 'more', type: 'button', id: 'show-more-timeline' }, ['Show more tests']));
+    fill(strip, nodes);
+    markStrip();
   }
 
   function canvasColor(status) {
@@ -617,7 +579,7 @@
   }
 
   function markStrip() {
-    var visible = {};
+    var visible = Object.create(null);
     filteredTests().forEach(function (test) { visible[test.id] = true; });
     document.querySelectorAll('.run-row').forEach(function (segment) {
       segment.classList.toggle('is-dim', !visible[segment.dataset.id]);
@@ -637,7 +599,7 @@
   }
 
   function uniqueValues(pick) {
-    var seen = {};
+    var seen = Object.create(null);
     data.tests.forEach(function (test) {
       pick(test).forEach(function (value) {
         if (value) seen[value] = true;
@@ -646,33 +608,25 @@
     return Object.keys(seen).sort();
   }
 
+  function selectControl(id, label, choices, current) {
+    var select = el('select', { id: id, class: 'filter-select' }, choices.map(function (choice) {
+      return el('option', { value: choice[0] }, [choice[1]]);
+    }));
+    select.value = current || '';
+    return el('label', { class: 'filter-control', for: id }, [el('span', null, [label]), select]);
+  }
+
   function paintTags() {
     var host = document.getElementById('tags');
     if (!host) return;
     var tags = uniqueValues(function (test) { return (test.tags || []).filter(keptTag); });
     var projects = uniqueValues(function (test) { return test.project ? [test.project] : []; });
-    var nodes = [];
-    if (tags.length) {
-      nodes.push(el('span', { class: 'order-label' }, ['Tags']));
-      nodes.push(chip('tag-btn', 'all', 'All', state.tag));
-      tags.forEach(function (tag) { nodes.push(chip('tag-btn', tag, tag, state.tag)); });
-    }
+    var nodes = [selectControl('tag-select', 'Tags', [['', 'All tags']].concat(tags.map(function (tag) { return [tag, tag]; })), state.tag)];
     if (data.showProjectFilter === true && projects.length > 1) {
-      nodes.push(el('span', { class: 'order-label' }, ['Project']));
-      nodes.push(chip('project-btn', 'all', 'All', state.projectFilter));
-      projects.forEach(function (project) { nodes.push(chip('project-btn', project, project, state.projectFilter)); });
+      nodes.push(selectControl('project-select', 'Project', [['', 'All projects']].concat(projects.map(function (project) { return [project, project]; })), state.projectFilter));
     }
-    host.hidden = nodes.length === 0;
     fill(host, nodes);
-  }
-
-  function chip(className, value, label, current) {
-    return el('button', {
-      class: className,
-      type: 'button',
-      'data-value': value,
-      'aria-pressed': current === value ? 'true' : 'false',
-    }, [label]);
+    if (!tags.length) document.getElementById('tag-select').disabled = true;
   }
 
   function sortTests(tests) {
@@ -692,17 +646,10 @@
   function paintOrder() {
     var host = document.getElementById('order');
     if (!host) return;
-    var orders = [['grouped', 'Grouped'], ['slowest', 'Slowest'], ['fastest', 'Fastest'], ['started', 'Started']];
-    var nodes = [el('span', { class: 'order-label' }, ['Order'])].concat(orders.map(function (order) {
-      return el('button', {
-        class: 'order-btn',
-        type: 'button',
-        'data-order': order[0],
-        'aria-pressed': state.order === order[0] ? 'true' : 'false',
-      }, [order[1]]);
-    }));
+    var orders = [['grouped', 'Grouped'], ['slowest', 'Slowest first'], ['fastest', 'Fastest first'], ['started', 'Start time']];
+    var nodes = [selectControl('sort-select', 'Sort', orders, state.order)];
     if (state.band !== 'all') {
-      nodes.push(el('button', { class: 'band-clear', type: 'button', 'aria-pressed': 'true' }, [bandLabel(state.band)]));
+      nodes.push(el('button', { class: 'band-clear', type: 'button', 'aria-label': 'Clear duration filter: ' + bandLabel(state.band) }, [bandLabel(state.band), el('span', { 'aria-hidden': 'true' }, [' ×'])]));
     }
     fill(host, nodes);
   }
@@ -711,7 +658,7 @@
     if (built.tests) return;
     built.tests = true;
     var host = document.getElementById('panel-tests');
-    host.innerHTML = '<div class="legend" id="test-tools"></div><div class="tags" id="tags"></div><div class="order" id="order"></div><div class="split"><div id="tests"></div><section class="detail" id="detail"></section></div>';
+    host.innerHTML = '<div class="page-heading"><h2>Tests</h2><p>Explore results, retries and the steps behind every test.</p></div><div class="legend" id="test-tools"></div><div class="filter-toolbar"><div class="tags" id="tags"></div><div class="order" id="order"></div></div><div class="list-summary" id="list-summary"></div><div class="split"><div id="tests"></div><section class="detail" id="detail"></section></div>';
     paintCounts(document.getElementById('test-tools'), true);
     paintTags();
     paintOrder();
@@ -724,8 +671,13 @@
     var host = document.getElementById('tests');
     if (!host) return;
     var tests = filteredTests();
+    var summary = document.getElementById('list-summary');
+    if (summary) fill(summary, [
+      el('span', { role: 'status', 'aria-live': 'polite' }, [tests.length + ' of ' + data.tests.length + ' tests']),
+      hasFilters() ? el('button', { type: 'button', class: 'reset-filters' }, ['Clear filters']) : null,
+    ]);
     if (!tests.length) {
-      fill(host, [el('p', { class: 'empty' }, [data.tests.length ? 'No tests match.' : 'No tests ran.'])]);
+      fill(host, [el('p', { class: 'empty' }, [data.tests.length ? 'No tests match. Clear filters or try another search.' : 'No tests ran.'])]);
       return;
     }
     if (state.order !== 'grouped') {
@@ -733,20 +685,20 @@
       var shown = sorted.slice(0, state.listLimit);
       var flat = shown.map(function (test) { return rowButton(test, true); });
       if (shown.length < sorted.length) {
-        flat.push(el('button', { class: 'more', type: 'button', id: 'show-rest' }, ['Show the rest']));
+        flat.push(el('button', { class: 'more', type: 'button', id: 'show-rest' }, ['Show more tests']));
       }
       fill(host, flat);
       return;
     }
     var groups = [];
-    var problemIds = {};
+    var problemIds = Object.create(null);
     var problems = tests.filter(isProblem);
     if (state.filter === 'all' && !state.query && problems.length && problems.length !== tests.length) {
       problems.forEach(function (test) { problemIds[test.id] = true; });
       groups.push({ name: 'Problems', tests: problems });
     }
     var byFile = [];
-    var index = {};
+    var index = Object.create(null);
     tests.forEach(function (test) {
       if (problemIds[test.id]) return;
       if (index[test.file] == null) {
@@ -771,7 +723,7 @@
       return el('div', { class: 'group' }, [el('p', { class: 'file-name' }, [group.name])].concat(rows));
     }).filter(Boolean);
     if (truncated) {
-      nodes.push(el('button', { class: 'more', type: 'button', id: 'show-rest' }, ['Show the rest']));
+      nodes.push(el('button', { class: 'more', type: 'button', id: 'show-rest' }, ['Show more tests']));
     }
     fill(host, nodes);
   }
@@ -805,7 +757,7 @@
       ['logs', 'Logs'],
       ['shots', 'Screenshots'],
     ];
-    var tabs = el('div', { class: 'subtabs', role: 'tablist' }, panes.map(function (pane) {
+    var tabs = el('div', { class: 'subtabs', role: 'group', 'aria-label': 'Test details' }, panes.map(function (pane) {
       return el('button', {
         class: 'subtab',
         type: 'button',
@@ -816,6 +768,7 @@
     var body = [headerBlock(test), tabs];
     if (test.attempts.length > 1) body.push(attemptTabs(test));
     if (attempt) body.push(paneBody(test, attempt));
+    else body.push(el('p', { class: 'empty block' }, ['This test did not run.']));
     fill(host, [el('div', { class: 'detail-body' }, body)]);
   }
 
@@ -831,7 +784,7 @@
     if (test.group && test.group.length) bits.push(el('p', { class: 'kicker' }, [test.group.join(' / ')]));
     bits.push(el('h2', null, [test.title]));
     var where = [el('span', null, [test.file + ':' + test.line])];
-    if (test.project) where.push(el('span', null, [test.project]));
+    if (data.showProjects === true && test.project) where.push(el('span', null, [test.project]));
     (test.tags || []).forEach(function (tag) { where.push(el('span', null, [tag])); });
     bits.push(el('p', { class: 'where' }, where));
     bits.push(el('p', { class: 'status-line' }, [
@@ -859,7 +812,8 @@
 
   function errorBlock(attempt) {
     if (!attempt.errors || !attempt.errors.length) return null;
-    var image = (attempt.attachments || []).find(function (item) { return item.kind === 'image' && safeSrc(item.path); });
+    var images = (attempt.attachments || []).filter(function (item) { return item.kind === 'image' && safeSrc(item.path); });
+    var image = images.find(function (item) { return item.role === 'failure'; }) || images[images.length - 1];
     var messages = attempt.errors.map(function (error) {
       var nodes = [el('pre', null, [error.message || 'The test failed.'])];
       if (error.location) nodes.push(el('p', { class: 'where-error' }, [error.location]));
@@ -949,8 +903,9 @@
           var src = safeSrc(file.path);
           var copy = el('div', { class: 'tile-copy' }, [
             el('p', { class: 'tile-title' }, [test.title]),
+            el('p', { class: 'tile-meta' }, ['Attempt ' + (index + 1) + ' · ' + attemptLabel(attempt.status)]),
             el('p', { class: 'tile-meta' }, [file.stepTitle || file.name || 'Screenshot']),
-            el('button', { class: 'open-test', type: 'button', 'data-id': test.id, 'data-attempt': String(index) }, ['Open test']),
+            el('button', { class: 'open-test', type: 'button', 'data-id': test.id, 'data-attempt': String(index), 'data-open-pane': 'shots' }, ['Open test']),
           ]);
           var tile = el('div', { class: 'tile', 'data-role': file.role || '', 'data-status': test.status }, [
             el('button', { class: 'shot', type: 'button', 'data-src': src, 'data-alt': file.name || test.title }, [
@@ -1014,7 +969,7 @@
         ];
         if (attempt.stdout) nodes.push(el('div', { class: 'well' }, [el('p', null, ['Output']), el('pre', null, [attempt.stdout])]));
         if (attempt.stderr) nodes.push(el('div', { class: 'well' }, [el('p', null, ['Error output']), el('pre', null, [attempt.stderr])]));
-        nodes.push(el('button', { class: 'open-test', type: 'button', 'data-id': test.id, 'data-attempt': String(index) }, ['Open test']));
+        nodes.push(el('button', { class: 'open-test', type: 'button', 'data-id': test.id, 'data-attempt': String(index), 'data-open-pane': 'logs' }, ['Open test']));
         var card = el('article', { class: 'log-card', 'data-blob': blob }, nodes);
         cards.push(card);
       });
@@ -1022,15 +977,21 @@
     fill(host, [
       el('h2', null, ['Logs']),
       el('input', { id: 'log-find', class: 'find', type: 'search', placeholder: 'Find in logs', 'aria-label': 'Find in logs' }),
-      el('div', { id: 'log-list' }, cards.length ? cards : [el('p', { class: 'empty' }, ['No logs in this run.'])]),
+      el('p', { class: 'empty', id: 'log-empty', hidden: cards.length > 0 }, ['No logs in this run.']),
+      el('div', { id: 'log-list' }, cards),
     ]);
   }
 
   function applyLogFilter() {
     var query = state.logQuery.trim().toLowerCase();
+    var visible = 0;
     document.querySelectorAll('.log-card').forEach(function (card) {
       card.hidden = Boolean(query) && card.dataset.blob.indexOf(query) === -1;
+      if (!card.hidden) visible += 1;
     });
+    var empty = document.getElementById('log-empty');
+    empty.hidden = visible > 0;
+    empty.textContent = query ? 'No logs match. Try another search.' : 'No logs in this run.';
   }
 
   function ensureFiles() {
@@ -1067,10 +1028,41 @@
   }
 
   function bind() {
-    window.addEventListener('resize', placeTabGlow);
+    window.addEventListener('hashchange', function () {
+      var next = readRoute();
+      if (next.tab === 'tests' && next.id && testById(next.id)) {
+        resetFilters();
+        state.selectedId = next.id;
+        state.attempt = failedAttempt(testById(next.id));
+        state.testPane = defaultPane(testById(next.id));
+        if (built.tests) { paintTags(); paintOrder(); paintList(); paintDetail(); syncPressed(); }
+      }
+      showTab(next.tab, true);
+    });
+    document.querySelector('.skip').addEventListener('click', function (event) {
+      event.preventDefault();
+      showTab('tests');
+      document.getElementById('find').focus();
+    });
     app.addEventListener('click', function (event) {
       var target = event.target instanceof Element ? event.target : null;
       if (!target) return;
+      if (target.closest('.reset-filters')) {
+        resetFilters(); keepSelectionInFilter(); paintTags(); paintOrder(); paintDuration(); paintList(); paintDetail(); syncPressed();
+        document.getElementById('find').focus();
+        return;
+      }
+      if (target.closest('#theme-toggle')) {
+        var theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
+        applyTheme(theme);
+        try { localStorage.setItem('reborn-theme', theme); } catch (error) { /* Theme still works without storage. */ }
+        return;
+      }
+      if (target.closest('[data-go-tests]')) {
+        showTab('tests');
+        document.getElementById('find').focus();
+        return;
+      }
       var tab = target.closest('.tab');
       if (tab) {
         showTab(tab.dataset.tab);
@@ -1084,7 +1076,7 @@
       }
       var opener = target.closest('.open-test');
       if (opener) {
-        openTest(opener.dataset.id, Number(opener.dataset.attempt || 0));
+        openTest(opener.dataset.id, Number(opener.dataset.attempt || 0), opener.dataset.openPane);
         return;
       }
       var view = target.closest('.view');
@@ -1119,35 +1111,6 @@
         paintDetail();
         return;
       }
-      var tag = target.closest('.tag-btn');
-      if (tag) {
-        state.tag = tag.dataset.value || 'all';
-        state.listLimit = 200;
-        keepSelectionInFilter();
-        paintTags();
-        paintList();
-        paintDetail();
-        return;
-      }
-      var projectButton = target.closest('.project-btn');
-      if (projectButton) {
-        state.projectFilter = projectButton.dataset.value || 'all';
-        state.listLimit = 200;
-        keepSelectionInFilter();
-        paintTags();
-        paintList();
-        paintDetail();
-        return;
-      }
-      var order = target.closest('.order-btn');
-      if (order) {
-        state.order = order.dataset.order || 'grouped';
-        keepSelectionInFilter();
-        paintOrder();
-        paintList();
-        paintDetail();
-        return;
-      }
       var count = target.closest('.count');
       if (count && !count.classList.contains('shot-filter') && !count.classList.contains('count-static')) {
         state.filter = count.dataset.status || 'all';
@@ -1159,7 +1122,6 @@
           paintList();
           paintDetail();
           markStrip();
-          showNow(state.selectedId);
         }
         return;
       }
@@ -1177,12 +1139,14 @@
       if (pane) {
         state.testPane = pane.dataset.pane || 'steps';
         paintDetail();
+        document.querySelector('.subtab[data-pane="' + state.testPane + '"]').focus();
         return;
       }
       var attempt = target.closest('.attempt');
       if (attempt) {
         state.attempt = Number(attempt.dataset.index || 0);
         paintDetail();
+        document.querySelector('.attempt[data-index="' + state.attempt + '"]').focus();
         return;
       }
       if (target.closest('#api-toggle')) {
@@ -1192,15 +1156,36 @@
         if (toggle) toggle.focus();
         return;
       }
+      if (target.closest('#show-more-timeline')) {
+        state.timelineLimit += 200; paintStrip();
+        var moreTimeline = document.getElementById('show-more-timeline');
+        if (moreTimeline) moreTimeline.focus();
+        return;
+      }
       if (target.closest('#show-rest')) {
-        state.listLimit = 100000;
+        state.listLimit += 200;
         paintList();
+        var more = document.getElementById('show-rest');
+        if (more) more.focus();
         return;
       }
       var shot = target.closest('.shot');
       if (shot) openShot(shot.dataset.src, shot.dataset.alt || 'Screenshot');
     });
 
+    app.addEventListener('change', function (event) {
+      var control = event.target;
+      if (!control || ['tag-select', 'project-select', 'sort-select'].indexOf(control.id) === -1) return;
+      if (control.id === 'tag-select') state.tag = control.value || null;
+      if (control.id === 'project-select') state.projectFilter = control.value || null;
+      if (control.id === 'sort-select') state.order = control.value || 'grouped';
+      state.listLimit = 200;
+      keepSelectionInFilter();
+      paintList();
+      paintDetail();
+      markStrip();
+    });
+
     app.addEventListener('input', function (event) {
       if (!event.target) return;
       if (event.target.id === 'find') {
@@ -1213,7 +1198,6 @@
           paintList();
           paintDetail();
           markStrip();
-          showNow(state.selectedId);
         }, 80);
       }
       if (event.target.id === 'log-find') {
@@ -1222,21 +1206,13 @@
       }
     });
 
-    app.addEventListener('mouseover', function (event) {
-      var segment = event.target && event.target.closest ? event.target.closest('.run-row') : null;
-      if (segment) showNow(segment.dataset.id);
-    });
-    app.addEventListener('mouseout', function (event) {
-      var segment = event.target && event.target.closest ? event.target.closest('.run-row') : null;
-      if (!segment) return;
-      var next = event.relatedTarget && event.relatedTarget.closest ? event.relatedTarget.closest('.run-row') : null;
-      if (!next) showNow(state.selectedId);
-    });
-
     document.addEventListener('keydown', function (event) {
-      var typing = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement;
+      if (event.defaultPrevented || event.isComposing || event.metaKey || event.ctrlKey || event.altKey || document.querySelector('dialog[open]')) return;
+      if (event.target instanceof HTMLSelectElement) return;
+      var typing = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement || event.target.isContentEditable;
       if (typing) {
         if (event.key === 'Escape') {
+          window.clearTimeout(findTimer);
           event.target.value = '';
           if (event.target.id === 'find') {
             state.query = '';
@@ -1244,7 +1220,6 @@
             paintList();
             paintDetail();
             markStrip();
-            showNow(state.selectedId);
           }
           if (event.target.id === 'log-find') {
             state.logQuery = '';
@@ -1254,7 +1229,8 @@
         return;
       }
       if (event.key >= '1' && event.key <= '5') {
-        showTab(TABS[Number(event.key) - 1]);
+        var destination = TABS[Number(event.key) - 1];
+        if (destination) showTab(destination);
         return;
       }
       if (event.key === '/') {
@@ -1264,19 +1240,19 @@
         if (find) find.focus();
         return;
       }
-      if ((event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'Home' || event.key === 'End') && event.target.closest && event.target.closest('.tabbar')) {
+      if ((event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Home' || event.key === 'End') && event.target.closest && event.target.closest('.tabbar')) {
         event.preventDefault();
         var index = TABS.indexOf(state.tab);
         if (event.key === 'Home') index = 0;
         else if (event.key === 'End') index = TABS.length - 1;
-        else if (event.key === 'ArrowRight') index = (index + 1) % TABS.length;
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') index = (index + 1) % TABS.length;
         else index = (index - 1 + TABS.length) % TABS.length;
         showTab(TABS[index]);
         var next = document.querySelector('.tab[data-tab="' + TABS[index] + '"]');
         if (next) next.focus();
         return;
       }
-      if (state.tab !== 'tests' || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) return;
+      if (state.tab !== 'tests' || !event.target.closest || !event.target.closest('#tests') || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) return;
       var rows = Array.prototype.slice.call(document.querySelectorAll('#tests .row'));
       if (!rows.length) return;
       event.preventDefault();
@@ -1291,21 +1267,15 @@
 
   function choose(id, resetFilter) {
     if (!id || !testById(id)) return;
-    if (resetFilter) {
-      state.filter = 'all';
-      state.query = '';
-      state.band = 'all';
-      state.tag = 'all';
-      state.projectFilter = 'all';
-      var find = document.getElementById('find');
-      if (find) find.value = '';
-    }
+    if (resetFilter) resetFilters();
     if (state.selectedId !== id) {
       var test = testById(id);
       state.selectedId = id;
       state.attempt = failedAttempt(test);
       state.testPane = defaultPane(test);
     }
+    var position = filteredTests().findIndex(function (test) { return test.id === id; });
+    state.listLimit = Math.max(state.listLimit, position + 1);
     showTab('tests');
     if (built.tests) {
       syncPressed();
@@ -1316,37 +1286,46 @@
       markStrip();
     }
     paintDuration();
-    showNow(state.selectedId);
     var row = document.querySelector('#tests .row[data-id="' + cssEscape(id) + '"]');
+    if (row) row.focus({ preventScroll: true });
     if (row && row.scrollIntoView) row.scrollIntoView({ block: 'nearest', behavior: reduce ? 'auto' : 'smooth' });
   }
 
+  function hasFilters() {
+    return state.filter !== 'all' || state.query.trim() || state.band !== 'all' || state.tag !== null || state.projectFilter !== null;
+  }
+
+  function resetFilters() {
+    window.clearTimeout(findTimer);
+    state.filter = 'all'; state.query = ''; state.band = 'all'; state.tag = null; state.projectFilter = null;
+    state.listLimit = 200;
+    var find = document.getElementById('find');
+    if (find) find.value = '';
+  }
+
   function keepSelectionInFilter() {
     var tests = filteredTests();
+    markStrip();
     if (tests.some(function (test) { return test.id === state.selectedId; })) return;
     var next = tests[0];
     if (!next) {
       state.selectedId = null;
+      writeHash();
       return;
     }
     state.selectedId = next.id;
     state.attempt = failedAttempt(next);
     state.testPane = defaultPane(next);
+    writeHash();
   }
 
-  function openTest(id, attempt) {
+  function openTest(id, attempt, pane) {
     var test = testById(id);
     if (!test) return;
-    state.filter = 'all';
-    state.query = '';
-    state.band = 'all';
-    state.tag = 'all';
-    state.projectFilter = 'all';
-    var find = document.getElementById('find');
-    if (find) find.value = '';
+    resetFilters();
     state.selectedId = id;
     state.attempt = attempt;
-    state.testPane = 'shots';
+    state.testPane = pane === 'logs' ? 'logs' : 'shots';
     showTab('tests');
     if (built.tests) {
       paintTags();
@@ -1355,43 +1334,30 @@
       paintDetail();
       markStrip();
     }
+    syncPressed();
     paintDuration();
+    document.getElementById('detail').scrollIntoView({ block: 'nearest' });
   }
 
   function openShot(src, alt) {
     var safe = safeSrc(src);
     if (!safe) return;
     var close = el('button', { class: 'close-shot', type: 'button' }, ['Close']);
-    var dialog = el('dialog', null, [close, el('img', { src: safe, alt: alt })]);
+    var returnFocus = document.activeElement;
+    var dialog = el('dialog', { 'aria-label': alt || 'Screenshot' }, [close, el('img', { src: safe, alt: alt })]);
     close.addEventListener('click', function () { dialog.close(); });
     dialog.addEventListener('click', function (event) { if (event.target === dialog) dialog.close(); });
-    dialog.addEventListener('close', function () { dialog.remove(); });
+    dialog.addEventListener('close', function () { dialog.remove(); if (returnFocus && returnFocus.isConnected) returnFocus.focus(); });
     document.body.appendChild(dialog);
     dialog.showModal();
   }
 
-  function showNow(id) {
-    var host = document.getElementById('now');
-    if (!host) return;
-    var test = id ? testById(id) : null;
-    if (!test) {
-      fill(host, [data.tests.length ? 'Hover a test, or click one.' : 'No tests ran.']);
-      return;
-    }
-    fill(host, [
-      el('span', { class: 'sw', 'data-status': test.status }, [statusLabel(test)]),
-      el('span', { class: 'name' }, [test.title]),
-      el('span', null, [formatDuration(test.duration)]),
-      el('span', { class: 'now-file' }, [test.file]),
-    ]);
-  }
-
   function filteredTests() {
     var query = state.query.trim().toLowerCase();
     return data.tests.filter(function (test) {
       if (state.filter !== 'all' && test.status !== state.filter) return false;
-      if (state.tag !== 'all' && (test.tags || []).indexOf(state.tag) === -1) return false;
-      if (state.projectFilter !== 'all' && test.project !== state.projectFilter) return false;
+      if (state.tag !== null && (test.tags || []).indexOf(state.tag) === -1) return false;
+      if (state.projectFilter !== null && test.project !== state.projectFilter) return false;
       if (state.band !== 'all' && (test.status === 'skipped' || durationBand(test.duration) !== state.band)) return false;
       if (!query) return true;
       var blob = [test.title, test.file, test.project].concat(test.group || [], test.tags || []).join(' ').toLowerCase();
@@ -1405,7 +1371,7 @@
   }
 
   function testById(id) {
-    return data.tests.find(function (test) { return test.id === id; }) || null;
+    return testIndex.get(id) || null;
   }
 
   function failedAttempt(test) {
@@ -1419,7 +1385,7 @@
 
   function defaultPane(test) {
     if (!test) return 'steps';
-    if (test.status === 'failed' || test.status === 'timedOut' || test.status === 'flaky') return 'error';
+    if (isProblem(test)) return 'error';
     return 'steps';
   }