@wendellresearch-ai/benchwarmers 0.6.4 → 0.6.5

package/VERSION

@@ -1 +1 @@
-0.6.4
+0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wendellresearch-ai/benchwarmers",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Self-hosted panel gateway for LLMs: ask a collection of models at once, keep every answer side by side, rotate explorer models in, and let your verdicts pick the next panel.",
   "mcpName": "io.github.WendellResearch-AI/benchwarmers",
   "license": "MIT",

package/serve.py

@@ -2701,7 +2701,14 @@ def vision_card() -> str:
         come from these alone. <b>Useful, no claims</b> is a verdict without them, which on thicken's
         photos means the seat agreed with another seat. Agreement is not a check, since seats fail
         together, so it is never counted as right.</dd>
-      <dt>The number beside a name</dt><dd>How much there is: fields asked on the tasks, seats on real work.</dd>
+      <dt>The real-work chart</dt><dd>Read as Real work is. The dot is the share of its judged seats your
+        verdict called useful (checked and helped, or useful with no claims), bigger for more judged; the
+        line is where that share likely sits (95%), and the order is by its low end, so a lot of evidence
+        outranks a little. Green when even the low end is over half, red when even the high end is under,
+        grey when there are too few to say. Beside it: useful of judged, how often it answered at all, and
+        the claims checked by hand, the only count of right and wrong. Seats not judged or not answered
+        are in those words and the table, not the dot.</dd>
+      <dt>The number beside a name</dt><dd>How much there is: fields asked on the tasks.</dd>
     </dl>"""
     held = (f"<p class='hint'>The vision tasks wait until {esc(v['held'])}: no run picks them before then"
             " (<code>vision_from</code> in <code>config/suite.json</code>; remove it to start them now).</p>"
@@ -2709,7 +2716,7 @@ def vision_card() -> str:
     return (f"<div class='panel'>{SHARE}<h2>Vision</h2><p class='sub'>Reading images: fields read right on pictures with"
             " a known answer, then real work on images and how much of it was actually checked.</p>" + held +
             "<h3 class='chart-head'>On the vision tasks, field by field</h3><div class='chart' id='chart-vision-fields'></div>"
-            "<h3 class='chart-head'>On real work with images, by how each seat was judged</h3>"
+            "<h3 class='chart-head'>On real work with images: judged useful, and how sure that is</h3>"
             "<div class='chart' id='chart-vision-work'></div>"
             "<details class='key'><summary>Table</summary><div class='toolbar'><input type='search'"
             " data-filter placeholder='Filter by model or connection' aria-label='Filter rows'>"
@@ -3224,7 +3231,7 @@ def uptime_data() -> dict:
 
 def uptime_card() -> str:
     """Was the provider there when the bench called it: a cell a day, by
-    provider then by model; 7 days, or 30 on choice (bench.js swaps them)."""
+    provider or by model, as its By says; 7 days, or 30 on choice (bench.js swaps them)."""
     u = uptime_rows()
     first, gone, names = UPTIME_DAYS[0], retired(), {}
 
@@ -3298,9 +3305,11 @@ def uptime_card() -> str:
               "<span><i style='background:var(--signal)'></i>some down, 80% or more answered</span>"
               "<span><i style='background:var(--err)'></i>under 80% answered</span>"
               "<span><i style='background:none;border:1px solid var(--line)'></i>no counted calls</span></div>")
+    # The window and one view at a time: by provider (shorter, the default) or by model (bench.js).
     pick = ("<div class='toolbar'><label>Days <select data-uptime-days>"
             + "".join(f"<option value='{w}'>last {w}</option>" for w in UPTIME_DAYS)
-            + f"</select></label></div>{legend}")
+            + "</select></label><label>By <select data-uptime-by><option value='providers'>provider</option>"
+            f"<option value='models'>model</option></select></label></div>{legend}")
     key = """<dl>
       <dt>Down</dt><dd>The provider was busy or overloaded (a 5xx, high demand, a shared pool's
         429), unreachable (a broken stream, no reply), timed out (the gateway's 420 s included), or
@@ -3326,9 +3335,7 @@ def uptime_card() -> str:
                       " and every real call, one cell a day. Busy, unreachable and timed out count as down;"
                       " our own quota, our own pacing and setup problems are left out.",
                       "chart-uptime-models", "".join(window(w) for w in UPTIME_DAYS), key,
-                      extra=pick + "<h3 class='chart-head'>By provider</h3>"
-                                   "<div class='chart' id='chart-uptime-providers'></div>"
-                                   "<h3 class='chart-head'>By model</h3>",
+                      extra=pick + "<div class='chart' id='chart-uptime-providers'></div>",
                       after="".join(odd(w) for w in UPTIME_DAYS))
 
 
@@ -3655,10 +3662,20 @@ def wrong_card() -> str:
 
 def benchmarks_tab() -> str:
     data = json.dumps(charts_data(), ensure_ascii=False).replace("</", "<\\/")
-    # Trend, Uptime and Performance side by side: what moves over time, in one stretch.
-    return (overview_card() + bughunt_card() + work_card() + wrong_card() + suite_card() + vision_card()
-            + trend_card() + uptime_card() + perf_card() + decision_card() + external_card()
-            + f"<script type='application/json' id='charts-data'>{data}</script>")
+    # Who to trust, then what moves day to day (Uptime, Trend, Performance), then Real work,
+    # then the rest in the order they had. Each report gets an id; a bar of links to them
+    # stays at the top while the page scrolls, the one in view marked (bench.js jumpSpy).
+    reports = (("trust", "Who to trust", overview_card), ("uptime", "Uptime", uptime_card),
+               ("trend", "Trend", trend_card), ("performance", "Performance", perf_card),
+               ("work", "Real work", work_card), ("hunt", "Bug hunt", bughunt_card),
+               ("wrong", "Confidently wrong", wrong_card), ("code", "Our code", suite_card),
+               ("vision", "Vision", vision_card), ("decisions", "Decision models", decision_card),
+               ("external", "External", external_card))
+    links = "".join(f"<a href='#report-{key}'>{esc(label)}</a>" for key, label, _ in reports)
+    cards = "".join(card().replace("<div class='panel'", f"<div class='panel report' id='report-{key}'", 1)
+                    for key, _, card in reports)
+    return (f"<nav class='jump' aria-label='On this page'><p class='jump-title'>On this page</p>{links}</nav>{cards}"
+            f"<script type='application/json' id='charts-data'>{data}</script>")
 
 
 def perf_card() -> str:
@@ -5251,11 +5268,16 @@ def models_page() -> str:
             " comes from, with the endpoint it is reached through and what is known of its limits. A name"
             " opens the model.</p><div class='toolbar'><input type='search' data-filter='page'"
             " placeholder='Find a model or connection' aria-label='Filter models'>"
-            # One labelled toggle, as accordions do it (GOV.UK's "Show all sections"): Collapse all
-            # while every table is open, else Expand all (bench.js foldButtons keeps it right).
-            "<button class='fold-all' type='button' data-fold-all='close' aria-expanded='true'>"
-            "<span class='fold-chev' aria-hidden='true'></span>Collapse all</button></div></div>"
-            + "".join(cards))
+            f"{fold_toggle(True)}</div></div>" + "".join(cards))
+
+
+def fold_toggle(all_open: bool) -> str:
+    """One labelled toggle over a page's folds (Models' connections, Logs' logs), as
+    accordions do it (GOV.UK's "Show all sections"): Collapse all while every one is
+    open, else Expand all. bench.js foldButtons keeps it right as folds change."""
+    return (f"<button class='fold-all' type='button' data-fold-all='{'close' if all_open else 'open'}'"
+            f" aria-expanded='{str(all_open).lower()}'><span class='fold-chev' aria-hidden='true'></span>"
+            f"{'Collapse all' if all_open else 'Expand all'}</button>")
 
 
 def quota_tiles() -> list[dict]:
@@ -5431,16 +5453,25 @@ def logs_page() -> str:
                       for p in sorted((DATA / "runs").glob("onboard-*.log"), reverse=True)[:30])
 
     def section(title, body, n, open_=False):
-        # CSV: this log alone, its own columns, the filter applied (bench.js); for a spreadsheet.
         return (f"<details class='panel'{' open' if open_ else ''} data-log='{esc(title)}'><summary><b>{esc(title)}</b>"
-                f" <span class='muted'>· {n}</span> <button class='btn small' type='button' data-csv"
-                f" title='Save this log, as filtered, as a CSV file'>CSV</button></summary>{body}</details>")
+                f" <span class='muted'>· {n}</span></summary>{body}</details>")
+    # Export: a popup for the format and the logs (bench.js), each as the page shows it,
+    # the filter applied. Text, every log chosen in one file to read; CSV, a file per log.
+    picks = "".join(f"<label class='check'><input type='checkbox' name='lx-log' value='{esc(t)}' checked> {esc(t)}</label>"
+                    for t in ("Gateway calls", "Changes", "Scheduler", "Onboarding runs"))
+    export = ("<dialog id='logs-export-dialog' aria-labelledby='lx-title'><h2 id='lx-title'>Export logs</h2>"
+              "<fieldset><legend class='field'>Format</legend>"
+              "<label class='check'><input type='radio' name='lx-format' value='txt' checked> Text (.txt)</label>"
+              "<label class='check'><input type='radio' name='lx-format' value='csv'> CSV (.csv)</label></fieldset>"
+              f"<fieldset><legend class='field'>Logs</legend>{picks}</fieldset>"
+              "<p class='rules' id='lx-note'></p><div class='errors' id='lx-errors' role='alert'></div>"
+              "<div class='actions'><button class='btn' type='button' id='lx-cancel'>Cancel</button>"
+              "<button class='btn primary' type='button' id='lx-go'>Export</button></div></dialog>")
     return (
         "<div class='panel'><div class='toolbar'><input data-filter='page' placeholder='Filter every log on this page'"
         " aria-label='Filter logs'>"
-        # bench.js: what the page shows, filter applied, as one .txt to read offline.
-        "<button class='btn small' type='button' id='logs-export' title='Save the logs on this page, as"
-        " filtered, to a text file'>Export as text</button></div></div>"
+        "<button class='btn small' type='button' id='logs-export'>Export…</button>"
+        f"{fold_toggle(False)}</div></div>{export}"
         + section("Gateway calls", "<table><thead><tr>" + th("When") + th("Collection") + th("Shape")
                   + th("Seats") + f"</tr></thead><tbody>{''.join(gw)}</tbody></table>", len(gw), True)
         + section("Changes", "<table><thead><tr>" + th("When") + th("By") + th("Model") + th("What")

package/ui/bench.css

@@ -536,6 +536,34 @@ pre.log.answer { max-height: 40vh; }
 .chart.muted { font-size: .875rem; }
 h3.chart-head { font-size: 1rem; margin: 1rem 0 .2rem; }
 .chart-label { font-size: .875rem; font-weight: 600; margin: .9rem 0 .1rem; }
+/* Benchmarks' "On this page": a link per report, the one in view marked (bench.js jumpSpy),
+   after the U.S. Web Design System's in-page navigation. Dressed as the sidebar is: the
+   theme's frosted rail, muted links, the highlighter stroke on the current one.
+   Narrow: a bar floating at the top of the page, sideways when it does not fit.
+   Wide: a rail beside the reports, sticky, every link on its own line. */
+.jump { position: sticky; top: .75rem; z-index: 4; display: flex; align-items: center; gap: 1rem;
+        margin: .9rem 1.2rem 0; padding: .45rem 1.1rem; overflow-x: auto; scrollbar-width: none;
+        background: var(--rail, var(--paper-2)); border: 1px solid var(--line); border-radius: 999px;
+        -webkit-backdrop-filter: var(--glass, blur(10px)); backdrop-filter: var(--glass, blur(10px));
+        box-shadow: 0 10px 28px -16px rgb(0 0 0 / .4); }
+.jump::-webkit-scrollbar { display: none; }
+.jump .jump-title { display: none; margin: 0 0 .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
+                    text-transform: uppercase; color: color-mix(in oklab, var(--brand) 72%, var(--ink)); }
+.jump a { flex: none; padding: .1rem 0; line-height: 1.15; color: var(--muted); text-decoration: none;
+          font-size: .9375rem; font-weight: 500; white-space: nowrap; }
+.jump a:hover, .jump a:focus-visible { color: var(--ink); }
+.jump a[aria-current] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -.42em 0 var(--signal); }
+.panel.report { scroll-margin-top: 4.2rem; }        /* a jump lands under the bar, not behind it */
+@media (min-width: 75rem) {
+  #tab-suite:has(> .jump) { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; }
+  #tab-suite:has(> .jump) > * { grid-column: 1; }
+  #tab-suite > .jump { grid-column: 2; grid-row: 1 / span 40; align-self: start; top: 1rem;
+                       flex-direction: column; align-items: flex-start; gap: .6rem; overflow: visible;
+                       margin: 1.4rem 1rem 1.4rem 0; padding: 1rem 1.1rem; border-radius: 14px; box-shadow: none; }
+  #tab-suite > .jump .jump-title { display: block; }
+  #tab-suite > .jump a { white-space: normal; }
+  .panel.report { scroll-margin-top: 1rem; }
+}
 /* Models: each connection a fold, its heading the summary */
 .model-card > summary h3.chart-head { display: inline; margin: 0; }
 /* Expand all / Collapse all: a text toggle with a chevron that turns, like a fold's own marker */

package/ui/bench.js

@@ -279,8 +279,9 @@
   // ---- Expand all / Collapse all: every fold of the page's groups (Models' connections).
   // One labelled toggle, as accordions have it: Collapse all while every one is open,
   // else Expand all. Kept right after any fold opens or shuts, by hand, by it or by a live swap.
+  var FOLDS = 'details.model-card, details[data-log]';      // the groups a page folds: Models' connections, Logs' logs
   function foldButtons(tab) {
-    var folds = tab.querySelectorAll('details.model-card'), open = 0;
+    var folds = tab.querySelectorAll(FOLDS), open = 0;
     folds.forEach(function (d) { if (d.open) open++; });
     var all = open === folds.length;
     tab.querySelectorAll('[data-fold-all]').forEach(function (b) {
@@ -293,11 +294,11 @@
     var b = e.target.closest('[data-fold-all]');
     if (!b) return;
     var tab = b.closest('.tab');
-    tab.querySelectorAll('details.model-card').forEach(function (d) { d.open = b.dataset.foldAll === 'open'; });
+    tab.querySelectorAll(FOLDS).forEach(function (d) { d.open = b.dataset.foldAll === 'open'; });
     foldButtons(tab);
   });
   document.addEventListener('toggle', function (e) {            // toggle does not bubble: caught on its way down
-    if (e.target.matches && e.target.matches('details.model-card')) foldButtons(e.target.closest('.tab'));
+    if (e.target.matches && e.target.matches(FOLDS)) foldButtons(e.target.closest('.tab'));
   }, true);
 
   // ---- Logs: Export as text (every log in one .txt, to read) and CSV (one log, its
@@ -306,42 +307,54 @@
     var now = new Date(), two = function (n) { return String(n).padStart(2, '0'); };
     return now.getFullYear() + '-' + two(now.getMonth() + 1) + '-' + two(now.getDate()) + '-' + two(now.getHours()) + two(now.getMinutes());
   }
-  // The file itself: Share's saveFile(blob, name) and csv(rows) (RFC 4180, with a BOM).
-  document.addEventListener('click', function (e) {
-    var b = e.target.closest('[data-csv]');
-    if (!b) return;
-    e.preventDefault();                                     // in the summary: no fold
-    var d = b.closest('details'), rows = [];
+  // A log as the page shows it (the filter applied): its header and rows, as cells.
+  // A log of lines (Scheduler, Onboarding runs) is one column, Line.
+  function logRows(d) {
     var cells = function (tr) {
       return Array.prototype.map.call(tr.children, function (c) { return c.textContent.trim().replace(/\s+/g, ' '); });
     };
-    var head = d.querySelector('thead tr');
-    if (head) {
-      rows.push(cells(head));
-      d.querySelectorAll('tbody tr').forEach(function (r) { if (!r.hidden) rows.push(cells(r)); });
-    } else {
-      rows.push(['Line']);
-      d.querySelectorAll('.log-line').forEach(function (r) { if (!r.hidden) rows.push([r.textContent.trim()]); });
-    }
-    var slug = d.dataset.log.toLowerCase().replace(/[^a-z0-9]+/g, '-');
-    saveFile(new Blob([csv(rows)], {type: 'text/csv;charset=utf-8'}), 'benchwarmers-' + slug + '-' + stampNow() + '.csv');
-  });
+    var head = d.querySelector('thead tr'), rows = [head ? cells(head) : ['Line']];
+    d.querySelectorAll(head ? 'tbody tr' : '.log-line').forEach(function (r) {
+      if (!r.hidden) rows.push(head ? cells(r) : [r.textContent.trim()]);
+    });
+    return rows;
+  }
+  // Export…: the popup picks the format and the logs. Text: every log chosen in one
+  // .txt to read, tab-separated. CSV: a .csv per log (its own columns), through Share's
+  // saveFile(blob, name) and csv(rows) (RFC 4180, with a BOM).
   on('click', 'logs-export', function () {
-    var tab = $('tab-logs'), out = ['Benchwarmers logs, exported ' + new Date().toString()];
-    var q = (tab.querySelector('input[data-filter]') || {}).value;
-    if (q) out.push('Filtered by: ' + q);
-    tab.querySelectorAll('details.panel').forEach(function (d) {
-      out.push('', '== ' + d.dataset.log + ' ==');
-      var cells = function (tr) {
-        return Array.prototype.map.call(tr.children, function (c) { return c.textContent.trim().replace(/\s+/g, ' '); }).join('\t');
-      };
-      var head = d.querySelector('thead tr');
-      if (head) out.push(cells(head));
-      d.querySelectorAll('tbody tr, .log-line').forEach(function (r) {
-        if (!r.hidden) out.push(r.matches('tr') ? cells(r) : r.textContent.trim());
+    var q = ($('tab-logs').querySelector('input[data-filter]') || {}).value;
+    $('lx-note').textContent = q ? 'Only the lines that match the filter, "' + q + '", as the page shows them.'
+      : 'Every line the page shows: the last 200 of each log.';
+    $('lx-errors').textContent = '';
+    $('logs-export-dialog').showModal();
+  });
+  on('click', 'lx-cancel', function () { $('logs-export-dialog').close(); });
+  on('click', 'lx-go', function () {
+    var tab = $('tab-logs'), dlg = $('logs-export-dialog');
+    var format = dlg.querySelector('input[name=lx-format]:checked').value;
+    var want = Array.prototype.filter.call(dlg.querySelectorAll('input[name=lx-log]'), function (x) { return x.checked; })
+      .map(function (x) { return x.value; });
+    if (!want.length) { $('lx-errors').textContent = 'Choose at least one log.'; return; }
+    var logs = Array.prototype.filter.call(tab.querySelectorAll('details[data-log]'), function (d) {
+      return want.indexOf(d.dataset.log) !== -1;
+    });
+    var stamp = stampNow(), q = (tab.querySelector('input[data-filter]') || {}).value;
+    if (format === 'csv') {
+      logs.forEach(function (d) {
+        var slug = d.dataset.log.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+        saveFile(new Blob([csv(logRows(d))], {type: 'text/csv;charset=utf-8'}), 'benchwarmers-' + slug + '-' + stamp + '.csv');
       });
-    });
-    saveFile(new Blob([out.join('\n') + '\n'], {type: 'text/plain;charset=utf-8'}), 'benchwarmers-logs-' + stampNow() + '.txt');
+    } else {
+      var out = ['Benchwarmers logs, exported ' + new Date().toString()];
+      if (q) out.push('Filtered by: ' + q);
+      logs.forEach(function (d) {
+        out.push('', '== ' + d.dataset.log + ' ==');
+        logRows(d).forEach(function (r) { out.push(r.join('\t')); });
+      });
+      saveFile(new Blob([out.join('\n') + '\n'], {type: 'text/plain;charset=utf-8'}), 'benchwarmers-logs-' + stamp + '.txt');
+    }
+    dlg.close();
   });
 
   // ---- a link to another page ----
@@ -2750,6 +2763,9 @@
     // the pages share. It was the whole page, which made every chart wider than
     // its column beside the sidebar, scaled down, with smaller text.
     function width() {
+      // Benchmarks shown with its rail beside the reports: a report's own width, not the column's.
+      var report = document.querySelector('.tab.active .panel.report');
+      if (report && report.clientWidth) return Math.max(520, report.clientWidth - 50);
       var col = document.querySelector('.panes') || document.querySelector('main');
       return Math.max(520, (col.clientWidth || 900) - 50);
     }
@@ -2941,8 +2957,14 @@
           ]
         });
       };
-      put('chart-uptime-providers', function (w) { return uptime(U.providers, w); });
-      put('chart-uptime-models', function (w) { return uptime(U.models, w); });
+      // One view at a time, as the card's By says: by provider (the default) or by model.
+      var view = (document.querySelector('select[data-uptime-by]') || {}).value || 'providers';
+      ['providers', 'models'].forEach(function (k) {
+        var box = $('chart-uptime-' + k);
+        if (!box) return;
+        box.hidden = k !== view;
+        if (k === view) put('chart-uptime-' + k, function (w) { return uptime(U[k], w); });
+      });
     }
     if (part === 'uptime') return;
     // Decision models: each model's answers grouped by the probability it gave
@@ -3265,41 +3287,59 @@
       });
     });
 
-    // Vision, real work: each model's seats on image panels by how they were judged.
+    // Vision, real work: read as Real work is. The one question: when its seat was judged,
+    // did it help? The dot is the share judged useful (checked and helped, or useful with no
+    // claims to check), sized by how many were judged; the line where that share likely sits
+    // (95% Wilson), ranked by its low end. Beside it, in words: how often it answered at all,
+    // and the claims checked by hand. Seats never judged or never answered say nothing of
+    // its worth: they are in the words and the table, not the dot.
     put('chart-vision-work', function (w) {
-      var W = C.vision.work, kinds = C.vision.seatKinds, data = [], total = {};
+      var W = C.vision.work, kinds = C.vision.seatKinds, R = [], none = [];
       Object.keys(W).forEach(function (m) {
-        kinds.forEach(function (k) { if (W[m][k]) data.push({model: m, kind: k, count: W[m][k]}); total[m] = (total[m] || 0) + W[m][k]; });
-      });
-      if (!data.length) return el('p', {class: 'hint'}, 'No vision panels through the gateway yet.');
-      // The models doing the most image work first: their bars are the evidence. Under FEW
-      // seats a row was mostly "no answer" and said little: those are listed under the chart.
-      var all = Object.keys(total).sort(function (a, b) { return total[b] - total[a] || (a < b ? -1 : 1); });
-      var models = all.filter(function (m) { return total[m] >= FEW; });
-      var few = all.filter(function (m) { return total[m] < FEW; });
-      if (!models.length) { models = all; few = []; }
-      data = data.filter(function (d) { return models.indexOf(d.model) !== -1; });
-      var colour = {'checked, helped': good, 'checked, did not help': err, 'useful, no claims': sky,
-                    'no use, no claims': warn, 'not judged': line, 'no answer': muted};
-      // The claims checked by hand, beside the bar: the only right-or-wrong count real work has.
-      var claims = models.filter(function (m) { return W[m].real + W[m].false; }).map(function (m) {
-        return {model: m, text: W[m].real + ' of ' + (W[m].real + W[m].false) + ' claims right'};
+        var v = W[m], n = function (k) { return v[k] || 0; }, total = 0;
+        kinds.forEach(function (k) { total += n(k); });
+        if (!total) return;
+        var judged = n('checked, helped') + n('checked, did not help') + n('useful, no claims') + n('no use, no claims');
+        var useful = n('checked, helped') + n('useful, no claims');
+        var r = {model: m, total: total, judged: judged, useful: useful, answered: total - n('no answer'),
+                 real: v.real || 0, wrongC: v.false || 0};
+        if (!judged) { none.push(r); return; }
+        var b = wilson(useful, judged);
+        r.p = useful / judged; r.lo = b[0]; r.hi = b[1];
+        r.verdict = b[0] >= 0.5 ? 'helps' : b[1] < 0.5 ? 'does not help' : 'too few to say';
+        R.push(r);
       });
+      if (!R.length && !none.length) return el('p', {class: 'hint'}, 'No vision panels through the gateway yet.');
+      R.sort(function (a, b) { return b.lo - a.lo || b.judged - a.judged; });
       var narrowV = w < 560, box = el('div');
-      box.appendChild(Plot.plot({
-        width: w, height: rows(models.length), style: style, marginLeft: narrowV ? 150 : 260, marginRight: narrowV ? 20 : 150,
-        x: {label: 'Share of its seats on image panels →', tickFormat: '.0%', grid: true, domain: [0, 1]},
-        y: {domain: models, label: null, tickFormat: function (m) { return fit(m, narrowV ? 16 : 30) + '  (' + total[m] + ')'; }},
-        color: {legend: true, domain: kinds, range: kinds.map(function (k) { return colour[k]; })},
+      function words(r) {
+        return r.useful + '/' + r.judged + (narrowV ? '' : ' · ' + Math.round(r.answered / r.total * 100) + '% answered'
+          + (r.real + r.wrongC ? ' · claims ' + r.real + '/' + (r.real + r.wrongC) : ''));
+      }
+      if (R.length) box.appendChild(Plot.plot({
+        width: w, height: 24 * R.length + 90, style: style, marginLeft: narrowV ? 130 : 190,
+        marginRight: narrowV ? 50 : 260, marginTop: 34,
+        x: {domain: [0, 1], label: 'Judged useful, share of its judged seats →', tickFormat: '.0%', ticks: 5, grid: true},
+        y: {domain: R.map(function (r) { return r.model; }), label: null,
+            tickFormat: function (m) { return fit(m, narrowV ? 16 : 26); }},
+        r: {domain: [0, Math.max.apply(null, R.map(function (r) { return r.judged; }))], range: [3, 11]},
+        color: {domain: ['helps', 'too few to say', 'does not help'], range: [good, muted, err], legend: true},
         marks: [
-          Plot.barX(data, Plot.stackX({x: 'count', y: 'model', fill: 'kind', offset: 'normalize', order: kinds,
-            title: function (d) { return d.model + ': ' + d.kind + ', ' + d.count + ' of ' + total[d.model] + ' seats'; }})),
-          Plot.text(narrowV ? [] : claims.filter(function (c) { return models.indexOf(c.model) !== -1; }),
-            {x: 1, y: 'model', text: 'text', dx: 8, textAnchor: 'start', fill: ink})
+          Plot.ruleX([0.5], {stroke: line}),
+          Plot.ruleY(R, {y: 'model', x1: 'lo', x2: 'hi', stroke: 'verdict', strokeWidth: 2, strokeOpacity: 0.55}),
+          Plot.dot(R, {x: 'p', y: 'model', r: 'judged', fill: 'verdict', stroke: halo, strokeWidth: 1.5,
+            title: function (r) {
+              return r.model + '\njudged useful ' + r.useful + ' of ' + r.judged + ' judged seats ('
+                + Math.round(r.p * 100) + '%), likely between ' + Math.round(r.lo * 100) + '% and ' + Math.round(r.hi * 100)
+                + '%\nanswered ' + r.answered + ' of ' + r.total + ' seats on image panels'
+                + (r.real + r.wrongC ? '\nclaims checked by hand: ' + r.real + ' right of ' + (r.real + r.wrongC) : '');
+            }}),
+          Plot.text(R, {x: 1, y: 'model', dx: 10, textAnchor: 'start', fill: ink, fontSize: 11, text: words})
         ]
       }));
-      if (few.length) box.appendChild(el('p', {class: 'hint'}, 'Under ' + FEW + ' seats, so no bar: '
-        + few.map(function (m) { return m + ' (' + total[m] + ')'; }).join(', ') + '. The table has them all.'));
+      if (none.length) box.appendChild(el('p', {class: 'hint'}, 'No seat judged yet, so no dot: '
+        + none.map(function (r) { return r.model + ' (' + r.total + ' seats, answered ' + r.answered + ')'; }).join(', ')
+        + '. The table has every seat.'));
       return box;
     });
 
@@ -3338,10 +3378,50 @@
     });
 
   }
-  onLoad.suite = function () { drawCharts('suite'); };
+  onLoad.suite = function () { drawCharts('suite'); jumpSpy(); };
+  // Benchmarks' jump bar: the report in view is marked (aria-current) and its link kept in
+  // sight in a bar that scrolls sideways. Set up again after a live swap (setUp, onLoad).
+  var spy = null;
+  function jumpSpy() {
+    if (spy) spy.disconnect();
+    var nav = document.querySelector('#tab-suite .jump');
+    if (!nav || !window.IntersectionObserver) return;
+    var links = {}, seen = {}, current = null;
+    nav.querySelectorAll('a').forEach(function (a) { links[a.getAttribute('href').slice(1)] = a; });
+    // A report counts as in view while it crosses a thin band 15-20% down the window: just
+    // under where a jump lands it, so the one jumped to is the one marked.
+    spy = new IntersectionObserver(function (entries) {
+      entries.forEach(function (e) { seen[e.target.id] = e.isIntersecting; });
+      var id = Object.keys(links).filter(function (k) { return seen[k]; })[0];
+      if (!id || id === current) return;
+      if (current) links[current].removeAttribute('aria-current');
+      current = id;
+      links[id].setAttribute('aria-current', 'true');
+      var a = links[id];
+      if (a.offsetLeft < nav.scrollLeft || a.offsetLeft + a.offsetWidth > nav.scrollLeft + nav.clientWidth) {
+        nav.scrollLeft = a.offsetLeft - 16;
+      }
+    }, {rootMargin: '-15% 0px -80% 0px'});
+    document.querySelectorAll('#tab-suite .panel.report').forEach(function (p) { spy.observe(p); });
+  }
+  // A jump scrolls smoothly (unless motion is reduced) and moves focus to the report, so
+  // a keyboard user carries on from there; the address keeps the report's #, as a link would.
+  document.addEventListener('click', function (e) {
+    var a = e.target.closest('.jump a');
+    if (!a) return;
+    var target = $(a.getAttribute('href').slice(1));
+    if (!target) return;
+    e.preventDefault();
+    var still = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
+    target.scrollIntoView({behavior: still ? 'auto' : 'smooth', block: 'start'});
+    target.setAttribute('tabindex', '-1');
+    target.focus({preventScroll: true});
+    history.replaceState(null, '', a.getAttribute('href'));
+  });
   // Uptime's or Trend's window: that window's tables (and Uptime's list) shown, its charts drawn again.
   document.addEventListener('change', function (ev) {
     var s = ev.target, part = s.matches('select[data-uptime-days]') ? 'uptime' : s.matches('select[data-trend-days]') ? 'trend' : '';
+    if (s.matches('select[data-uptime-by]')) { drawCharts('uptime'); return; }      // the other view, same window
     if (!part) return;
     s.closest('.panel').querySelectorAll('[data-' + part + '-window]').forEach(function (d) {
       d.hidden = d.getAttribute('data-' + part + '-window') !== s.value;