@wendellresearch-ai/benchwarmers 0.6.2 → 0.6.4

package/ui/bench.js

@@ -213,7 +213,7 @@
   var rendered = document.querySelector('.tab:not([data-lazy])');
   Promise.resolve().then(function () { if (rendered) setUp(rendered.id.slice(4)); });
   var wanted = store('bench.tab');            // else the one rendered: storage blocked or cleared, the cookie kept
-  show(wanted && $('tab-' + wanted) ? wanted : rendered ? rendered.id.slice(4) : 'glance');
+  show(wanted && $('tab-' + wanted) ? wanted : rendered ? rendered.id.slice(4) : 'suite');
 
   // ---- sortable tables -------------------------------------------------
   function key(cell) {
@@ -253,13 +253,21 @@
     var box = scope.querySelector('input[data-filter]'), q = box ? box.value.trim().toLowerCase() : '';
     var facets = Array.prototype.filter.call(scope.querySelectorAll('select[data-facet]'), function (s) { return s.value; });
     scope.querySelectorAll('tbody tr, .log-line').forEach(function (r) {
-      r.hidden = (q && r.textContent.toLowerCase().indexOf(q) === -1)
+      // A group's name (data-conn: Models' connection) counts as text of each of its rows.
+      var g = r.closest('[data-conn]'), text = r.textContent + (g ? ' ' + g.dataset.conn : '');
+      r.hidden = (q && text.toLowerCase().indexOf(q) === -1)
         || facets.some(function (s) { return r.dataset[s.dataset.facet] !== s.value; });
     });
     // A match inside a folded list (an endpoint's models) opens it.
     if (q) scope.querySelectorAll('details.models').forEach(function (d) {
       if (d.querySelector('tbody tr:not([hidden])')) d.open = true;
     });
+    // A group with no row left is hidden; one with a match opens.
+    scope.querySelectorAll('[data-conn]').forEach(function (g) {
+      var any = !!g.querySelector('tbody tr:not([hidden])');
+      g.hidden = !!q && !any;
+      if (q && any && g.tagName === 'DETAILS') g.open = true;
+    });
   }
   function scopeOf(c) {
     var box = c.closest('.toolbar') ? c.closest('.toolbar').querySelector('input[data-filter]') : c;
@@ -268,7 +276,75 @@
   document.addEventListener('input', function (ev) { if (ev.target.matches('input[data-filter]')) applyFilter(scopeOf(ev.target)); });
   document.addEventListener('change', function (ev) { if (ev.target.matches('select[data-facet]')) applyFilter(scopeOf(ev.target)); });
 
-  // ---- a link to another page (At a glance's line to Action needed) ----
+  // ---- 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.
+  function foldButtons(tab) {
+    var folds = tab.querySelectorAll('details.model-card'), open = 0;
+    folds.forEach(function (d) { if (d.open) open++; });
+    var all = open === folds.length;
+    tab.querySelectorAll('[data-fold-all]').forEach(function (b) {
+      b.dataset.foldAll = all ? 'close' : 'open';
+      b.setAttribute('aria-expanded', String(all));
+      b.lastChild.textContent = all ? 'Collapse all' : 'Expand all';
+    });
+  }
+  document.addEventListener('click', function (e) {
+    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'; });
+    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'));
+  }, true);
+
+  // ---- Logs: Export as text (every log in one .txt, to read) and CSV (one log, its
+  // own columns, for a spreadsheet). Both as the page shows them, the filter applied.
+  function stampNow() {                                     // local time, as the page shows
+    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 = [];
+    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');
+  });
+  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());
+      });
+    });
+    saveFile(new Blob([out.join('\n') + '\n'], {type: 'text/plain;charset=utf-8'}), 'benchwarmers-logs-' + stampNow() + '.txt');
+  });
+
+  // ---- a link to another page ----
   document.addEventListener('click', function (e) {
     var b = e.target.closest('[data-go]');
     if (b) { show(b.dataset.go); scrollTo(0, 0); }
@@ -759,8 +835,8 @@
   });
 
   // ---- after an action: the part it changed, not the whole page ----------
-  // Action needed's page, its count in the sidebar and At a glance's line
-  // about it, from the server (GET /api/needs, a few ms): a page reload
+  // Action needed's page and its count in the sidebar, from the server
+  // (GET /api/needs, a few ms): a page reload
   // renders every tab, seconds.
   var needsAsked = 0;
   function refreshNeeds(live) {
@@ -775,10 +851,6 @@
         count.textContent = n.count;
         tab.setAttribute('aria-label', tab.firstChild.textContent + ', ' + n.count + ' open');
       }
-      var line = document.querySelector('#tab-glance > .a-line');
-      if (line) line.remove();
-      // Not into a page not fetched yet: it says Loading… while empty, and comes with its line.
-      if (n.line && $('tab-glance').firstChild) $('tab-glance').insertAdjacentHTML('afterbegin', n.line);
     }).catch(function () { location.reload(); });          // could not ask: the old way
   }
   // A retired model's rows grey out and hide behind Show retired, as the
@@ -1880,7 +1952,7 @@
          pick: $('g-pick'), pickConf: $('g-pick-conf'),
          gErrors: $('g-errors'), gDone: $('g-done'), form: $('c-form'), status: $('c-status'),
          del: $('c-delete'), reply: $('c-reply'), merger: $('c-merger'), find: $('c-member-filter'),
-         seats: $('c-seats'), prov: $('c-member-provider'), adHoc: $('c-ad-hoc'),
+         seats: $('c-seats'), prov: $('c-member-provider'), show: $('c-member-show'), adHoc: $('c-ad-hoc'),
          ownCalls: $('c-max-calls'), ownExp: $('c-max-explorers')};
     return loadCollections();
   };
@@ -1994,7 +2066,7 @@
   // the seats above the list always show what is picked, each with its ×, and
   // every count still includes it. A row goes when all its chips do.
   function filterMembers() {
-    var q = c.find.value.trim().toLowerCase(), prov = c.prov.value;
+    var q = c.find.value.trim().toLowerCase(), prov = c.prov.value, show = c.show.value;
     c.members.querySelectorAll('.m-row').forEach(function (row) {
       var named = !q || row.dataset.name.toLowerCase().indexOf(q) !== -1, any = false;
       row.querySelectorAll('label.check').forEach(function (lab) {
@@ -2002,7 +2074,8 @@
         var text = (box.value + ' ' + (lab.dataset.served || '') + ' ' + (fact(box.value).connection || '') + ' ' +
                     lab.textContent).toLowerCase();
         lab.hidden = !box.checked && !!lab.dataset.paid || !named && text.indexOf(q) === -1
-                     || !!prov && (fact(box.value).provider || '') !== prov;
+                     || !!prov && (fact(box.value).provider || '') !== prov
+                     || show === 'ticked' && !box.checked || show === 'fits' && !!box.dataset.blocked;
         any = any || !lab.hidden;
       });
       row.hidden = !any;
@@ -2011,6 +2084,23 @@
   }
   on('input', 'c-member-filter', filterMembers);
   on('change', 'c-member-provider', filterMembers);
+  on('change', 'c-member-show', filterMembers);
+  // Refresh model details: the models and their facts fetched again, the list drawn
+  // anew with the same ticks, search and choices. The model popup's directory too.
+  function refreshMembers() {
+    var chosen = picked(), out = $('c-refresh-out'), btn = $('c-refresh');
+    btn.disabled = true; out.textContent = 'Refreshing…';
+    return Promise.all([get('/api/collections'), directory()]).then(function (res) {
+      C = res[0];
+      drawMembers(chosen);
+      applyTags();
+      out.textContent = 'Up to date.';
+    }).catch(function (err) { out.textContent = String(err); })
+      .then(function () { btn.disabled = false; });
+  }
+  on('click', 'c-refresh', refreshMembers);
+  // A model opened from the list may have been changed in its popup: what it now is, on close.
+  md.addEventListener('close', function () { if (c.form && c.form.open) refreshMembers(); });
   // Escape in a box with text clears it; only an empty box lets Escape close the popup.
   on('keydown', 'c-member-filter', function (e) {
     if (e.key === 'Escape' && c.find.value) { e.preventDefault(); e.stopPropagation(); c.find.value = ''; filterMembers(); }
@@ -2059,13 +2149,37 @@
     c.ownExp.value = row && row.max_explorers !== undefined ? row.max_explorers : '';
     c.ownCalls.placeholder = C.settings.max_calls; c.ownExp.placeholder = C.settings.max_explorers;
     drawTagPicks();
-    c.members.textContent = ''; c.find.value = '';
+    c.find.value = ''; c.show.value = ''; c.prov.value = '';
+    $('c-refresh-out').textContent = '';
+    drawMembers(row ? row.members : []);
+    c.shape.textContent = '';
+    c.shape.appendChild(el('option', {value: ''}, 'automatic'));
+    C.shapes.forEach(function (s) {
+      var o = el('option', {value: s}, s); if (row && row.shape === s) o.selected = true; c.shape.appendChild(o);
+    });
+    c.reply.value = row ? row.reply : 'all';
+    c.merger.textContent = '';
+    c.merger.appendChild(el('option', {value: ''}, 'automatic'));
+    C.models.forEach(function (alias) {
+      var o = el('option', {value: alias}, alias + (fact(alias).provider ? ' · ' + fact(alias).provider : ''));
+      if (row && row.merger === alias) o.selected = true; c.merger.appendChild(o);
+    });
+    showMerger(); applyTags();
+  }
+  // The member list: a table to scan down, one row per model (named by its shortest
+  // alias; the name opens its popup, as everywhere), its context and what it can do
+  // in columns of their own, then a chip per provider it is on, each ticking that
+  // alias. A chip whose window differs from the row's says its own. `chosen`: ticked.
+  function drawMembers(chosen) {
+    var keepProv = c.prov.value;
+    c.members.textContent = '';
     c.prov.length = 1;                                 // "Every provider", then each one a model is on
     Array.from(new Set(C.models.map(function (a) { return fact(a).provider; }).filter(Boolean))).sort()
       .forEach(function (p) { c.prov.appendChild(el('option', {value: p}, p)); });
-    // One row per model, named by its shortest alias, with what the first
-    // route says it holds and can do; each provider it is on is a chip that
-    // ticks that alias. A chip whose window differs from the row's says its own.
+    c.prov.value = keepProv;
+    var head = el('div', {class: 'm-head', 'aria-hidden': 'true'});
+    ['Model', 'Context', 'Can', 'On, tick one'].forEach(function (h) { head.appendChild(el('span', null, h)); });
+    c.members.appendChild(head);
     var groups = {};
     C.models.forEach(function (a) { var f = fact(a).family || a; (groups[f] = groups[f] || []).push(a); });
     Object.keys(groups).map(function (f) {
@@ -2073,18 +2187,25 @@
       return {family: f, name: routes[0], routes: routes};
     }).sort(function (x, y) { return x.name.toLowerCase() < y.name.toLowerCase() ? -1 : 1; }).forEach(function (g) {
       var first = fact(g.name), caps = first.caps || {};
-      var can = ['vision', 'tools'].filter(function (k) { return caps[k]; });
       var line = el('div', {class: 'm-row', role: 'group', 'aria-label': g.name, 'data-family': g.family, 'data-name': g.name});
       var name = el('div', {class: 'm-name'});
-      name.appendChild(el('span', {class: 'mono'}, g.name));
-      name.appendChild(el('span', {class: 'm-facts'}, [first.context ? tokens(first.context) : '', can.join(', '),
-        first.price === 'unknown' ? '' : first.price].filter(Boolean).join(' · ')));
+      // The same link as every model name elsewhere (a.model > .alias: the highlight on hover).
+      var link = el('a', {href: '#', class: 'model', 'data-alias': g.name, title: 'Open ' + g.name});
+      link.appendChild(el('span', {class: 'alias'}, g.name));
+      name.appendChild(link);
       line.appendChild(name);
+      line.appendChild(el('span', {class: 'm-ctx'}, first.context ? tokens(first.context) : '—'));
+      var can = el('span', {class: 'm-can'});
+      [['vision', 'vision'], ['tools', 'tools'], ['reasoning', 'reasons']].forEach(function (k) {
+        if (caps[k[0]]) can.appendChild(el('span', {class: 'chip'}, k[1]));
+      });
+      if (first.price === 'free') can.appendChild(el('span', {class: 'chip ok'}, 'free'));
+      line.appendChild(can);
       var chips = el('div', {class: 'm-routes'});
       g.routes.forEach(function (alias) {
         var f = fact(alias);
         var box = el('input', {type: 'checkbox', value: alias, 'aria-label': alias + ' on ' + (f.provider || 'its endpoint')});
-        box.checked = !!row && row.members.indexOf(alias) !== -1;
+        box.checked = chosen.indexOf(alias) !== -1;
         box.addEventListener('change', applyTags);      // ticked or not changes what a misfit shows as
         var lab = el('label', {class: 'check', 'data-served': (C.served || {})[alias] || ''});
         lab.appendChild(box);
@@ -2095,19 +2216,6 @@
       line.appendChild(chips);
       c.members.appendChild(line);
     });
-    c.shape.textContent = '';
-    c.shape.appendChild(el('option', {value: ''}, 'automatic'));
-    C.shapes.forEach(function (s) {
-      var o = el('option', {value: s}, s); if (row && row.shape === s) o.selected = true; c.shape.appendChild(o);
-    });
-    c.reply.value = row ? row.reply : 'all';
-    c.merger.textContent = '';
-    c.merger.appendChild(el('option', {value: ''}, 'automatic'));
-    C.models.forEach(function (alias) {
-      var o = el('option', {value: alias}, alias + (fact(alias).provider ? ' · ' + fact(alias).provider : ''));
-      if (row && row.merger === alias) o.selected = true; c.merger.appendChild(o);
-    });
-    showMerger(); applyTags();
   }
   // What a collection's members can all do, in the words the tag checks use.
   var CAN = {reasoning: 'reason'};
@@ -2660,7 +2768,8 @@
       try { box.appendChild(make(width())); } catch (e) { box.textContent = 'Chart failed: ' + e; }
     }
     // Pixel offsets that keep scatter labels apart: each label, in order, moves
-    // up or down until it clears the ones already placed.
+    // up or down until it clears the ones already placed; null when no place is
+    // free (that one is left to its hover, not drawn over another).
     function spread(points, xpx, ypx) {
       var boxes = [], tries = [-12, 14, -26, 28, -40, 42, -54, 56];
       return points.map(function (d) {
@@ -2672,7 +2781,7 @@
             return tries[k];
           }
         }
-        return tries[0];
+        return null;
       });
     }
     function rows(n) { return 20 * n + 80; }
@@ -2682,6 +2791,16 @@
       var keep = s.length - over - 1;
       return over <= 0 ? s : s.slice(0, Math.ceil(keep / 2)) + '…' + s.slice(s.length - Math.floor(keep / 2));
     }
+    function fit(s, max) { return middle(s, s.length - max); }
+    var FEW = 10;                        // under this many tasks or answers, a row is drawn faint
+    // The 95% Wilson interval of k successes in n: [low, high]. Honest at small n and at
+    // 0 or n of n, where k/n ± 1.96·se says nothing (3 of 3 is not "100% ± 0").
+    function wilson(k, n) {
+      if (!n) return [0, 1];
+      var z = 1.96, p = k / n, z2 = z * z, den = 1 + z2 / n;
+      var mid = p + z2 / (2 * n), half = z * Math.sqrt(p * (1 - p) / n + z2 / (4 * n * n));
+      return [Math.max(0, (mid - half) / den), Math.min(1, (mid + half) / den)];
+    }
 
     // Trend: who moved, which way, by how much and how sure (serve.trend_data),
     // in the window the card's select says. A row per model with a task to
@@ -2728,7 +2847,9 @@
       var nameW = Math.min(260, Math.max(150, 7 * Math.max.apply(null, M.map(function (r) { return r.key.length; })) + 24));
       var evW = 320;
       w = $('chart-trend').clientWidth || w;          // its own box: a phone's is narrower than width()'s 520
-      if (w < nameW + evW + 260) { evW = 0; nameW = Math.min(nameW, 130); }
+      // Without the evidence column the names take what the bars do not need (260 px), not a
+      // fixed 130 px: at the dashboard's width that cut "muse-glimmer-30b" to "muse-gl…mer-30b".
+      if (w < nameW + evW + 260) { evW = 0; nameW = Math.min(nameW, Math.max(130, w - 280)); }
       var fits = Math.floor((nameW - 24) / 7), right = evW || 20, wide = w < nameW + right + 140;
       w = Math.max(w, nameW + right + 140);
       // Symmetric, to the biggest bar and room for its number; 20 pts at least.
@@ -2830,16 +2951,74 @@
     // the time; under it, it is surer than it should be. Panels stack on a phone.
     var DC = C.decide;
     if (DC) put('chart-decide', function (w) {
-      if (!DC.points.length) return el('p', {class: 'hint'}, 'No decision model has answered a benchmark question yet.');
+      if (!(DC.scores || []).length) return el('p', {class: 'hint'}, 'No decision model has answered a benchmark question yet.');
       var names = {};
       DC.sets.forEach(function (s) { names[s[0]] = s[1]; });
       var panels = DC.sets.map(function (s) { return s[1]; });
+      // One colour per model across both charts, by name, never by rank.
+      var models = DC.scores.map(function (p) { return p.model; })
+        .filter(function (m, i, all) { return all.indexOf(m) === i; }).sort();
+      var colors = {domain: models, range: [sky, good, signal, warn, muted, ink, err]};
+      var box = el('div');
+      box.appendChild(el('h3', {class: 'chart-head'}, 'Right of asked, per set'));
+      box.appendChild(decideBars(w, names, panels, models, colors));
+      // Calibration only says something once a model's answers spread over two or more
+      // levels of sureness; while each sits in one top bin it is one dot in a corner.
+      var levels = DC.points.some(function (p, i, all) {
+        return all.some(function (q) { return q !== p && q.model === p.model && q.set === p.set; });
+      });
+      if (levels) {
+        box.appendChild(el('h3', {class: 'chart-head'}, 'Calibration: said against right'));
+        box.appendChild(decideCalibration(w, names, panels, models, colors));
+      } else {
+        box.appendChild(el('p', {class: 'hint'}, 'Calibration shows once a model gives answers at two or more levels'
+          + ' of sureness on a set; so far each answers at one, so the table\'s Brier and calibration gap say it.'));
+      }
+      return box;
+    });
+    // Right of asked as bars from 0: a small chart per set, a row per model asked on it,
+    // best first. A model under the ranking floor (DC.low items) is drawn faint: shown,
+    // not yet ranked.
+    function decideBars(w, names, panels, models, colors) {
+      var out = el('div');
+      DC.sets.forEach(function (s) {
+        var rows = DC.scores.filter(function (r) { return r.set === s[0]; }).map(function (r) {
+          return Object.assign({share: r.correct / r.asked, ranked: r.asked >= DC.low}, r);
+        }).sort(function (a, b) { return b.share - a.share || b.asked - a.asked || (a.model < b.model ? -1 : 1); });
+        out.appendChild(el('p', {class: 'chart-label'}, s[1]));
+        if (!rows.length) { out.appendChild(el('p', {class: 'hint'}, 'No model asked on this set yet.')); return; }
+        out.appendChild(Plot.plot({
+          width: w, height: rows.length * 26 + 40, style: style,
+          marginLeft: w < 560 ? 120 : 160, marginRight: 50, marginTop: 4, marginBottom: 30,
+          x: {domain: [0, 1], label: null, tickFormat: '.0%', ticks: 5, grid: true},
+          y: {domain: rows.map(function (r) { return r.model; }), label: null},
+          color: colors,
+          marks: [
+            Plot.barX(rows, {x: 'share', y: 'model', fill: 'model', insetTop: 4, insetBottom: 4, rx: 2,
+              fillOpacity: function (r) { return r.ranked ? 1 : 0.4; },
+              title: function (r) {
+                return r.model + ' · ' + s[1] + '\n' + r.correct + ' right of ' + r.asked + ' asked ('
+                  + Math.round(r.share * 100) + '%)' + (r.brier != null ? '\nBrier ' + r.brier.toFixed(3) : '')
+                  + (r.ranked ? '' : '\nnot ranked yet: under ' + DC.low + ' items');
+              }}),
+            Plot.text(rows, {x: 'share', y: 'model', dx: 6, textAnchor: 'start', fill: ink,
+              text: function (r) { return r.correct + '/' + r.asked; }}),
+            Plot.ruleX([0], {stroke: ink})
+          ]
+        }));
+      });
+      return out;
+    }
+    function decideCalibration(w, names, panels, models, colors) {
       var pts = DC.points.map(function (p) { return Object.assign({panel: names[p.set]}, p); })
         .sort(function (a, b) { return a.said - b.said; });
-      var models = pts.map(function (p) { return p.model; })
-        .filter(function (m, i, all) { return all.indexOf(m) === i; }).sort();
+      // Both axes start just under the lowest answer, not at 0%: a decision model is
+      // rarely under 50% sure of its own answer, so a 0-100% frame left every dot in
+      // one corner under a long empty diagonal. Same floor on both, so it stays 45°.
+      var low = Math.min.apply(null, pts.map(function (p) { return Math.min(p.said, p.right); }));
+      var lo = Math.max(0, Math.min(0.9, Math.floor((low - 0.05) * 20) / 20));
       var diag = [];
-      panels.forEach(function (s) { diag.push({panel: s, x: 0, y: 0}, {panel: s, x: 1, y: 1}); });
+      panels.forEach(function (s) { diag.push({panel: s, x: lo, y: lo}, {panel: s, x: 1, y: 1}); });
       function tip(p) {
         return p.model + ' · ' + names[p.set] + '\n' + plural(p.n, 'answer') + ' it was about '
           + Math.round(p.said * 100) + '% sure of\n' + Math.round(p.right * 100) + '% of them right';
@@ -2850,10 +3029,11 @@
       return Plot.plot(Object.assign(opts, {
         width: narrow ? Math.min(w, 520) : w, height: narrow ? 3 * 230 + 70 : 320, style: style,
         marginLeft: 52, marginRight: narrow ? 90 : 20, marginBottom: 44, marginTop: 28,
-        x: {domain: [0, 1], label: 'Probability it gave its answer →', tickFormat: '.0%', ticks: 5, grid: true},
-        y: {domain: [0, 1], label: '↑ Share right', tickFormat: '.0%', ticks: 5, grid: true},
+        inset: 14,                         // a dot at 100% clear of the frame
+        x: {domain: [lo, 1], label: 'Probability it gave its answer →', tickFormat: '.0%', ticks: 5, grid: true},
+        y: {domain: [lo, 1], label: '↑ Share right', tickFormat: '.0%', ticks: 5, grid: true},
         r: {range: [3, 13]},
-        color: {legend: true, domain: models, range: [sky, good, signal, warn, muted, ink, err]},
+        color: Object.assign({legend: true}, colors),
         marks: [
           Plot.frame({stroke: line}),
           Plot.line(diag, Object.assign({x: 'x', y: 'y', z: 'panel', stroke: muted, strokeDasharray: '4 3'}, by)),
@@ -2862,17 +3042,24 @@
                                        title: tip}, by))
         ]
       }));
-    });
+    }
     // Who to trust: finds real bugs (right) vs makes things up (up = less).
     put('chart-overview', function (w) {
       if (!C.overview.length) return el('p', {class: 'hint'}, 'No model has both suite scores and answers yet.');
       var worst = Math.max(0.1, Math.max.apply(null, C.overview.map(function (d) { return d.wrong; })));
       var x0 = Math.max(0, Math.floor((Math.min.apply(null, C.overview.map(function (d) { return d.recall; })) - 0.05) * 20) / 20);
       var pxW = w - 110, pxH = 370;
-      var pts = C.overview.slice().sort(function (a, b) { return a.wrong - b.wrong || b.recall - a.recall; });
+      // Named: the models in or next to the zone (the ones to pick from), then the clearest
+      // warnings (most made up). The rest are on hover: named all at once they ran together.
+      var zoneX = x0 + (1 - x0) / 2, zoneY = worst / 4;
+      var near = function (d) { return d.recall >= zoneX - (1 - x0) * 0.08 && d.wrong <= zoneY * 1.4; };
+      var worstFew = C.overview.slice().sort(function (a, b) { return b.wrong - a.wrong; }).slice(0, 3);
+      var pts = C.overview.filter(function (d) { return near(d) || worstFew.indexOf(d) !== -1; })
+        .sort(function (a, b) { return a.wrong - b.wrong || b.recall - a.recall; });
       var offs = spread(pts, function (d) { return (d.recall - x0) / (1 - x0) * pxW; },
                         function (d) { return d.wrong / worst * pxH; });
-      var labels = pts.map(function (d, i) { return {model: d.model, recall: d.recall, ty: d.wrong + offs[i] * worst / pxH}; });
+      var labels = pts.map(function (d, i) { return offs[i] == null ? null : {model: d.model, recall: d.recall, ty: d.wrong + offs[i] * worst / pxH}; })
+        .filter(Boolean);
       return Plot.plot({
         width: w, height: 440, style: style, grid: true, inset: 16, marginRight: 50, marginTop: 30,
         x: {label: 'Finds real bugs in our code →', domain: [x0, 1], tickFormat: '.0%'},
@@ -2900,71 +3087,72 @@
         tasks[h.model] = bugs + clean;
         var f = bugs ? h.found / bugs : 0, wl = bugs ? h['wrong line'] / bugs : 0, ms = bugs ? h.missed / bugs : 0;
         var fa = clean ? h['false alarm'] / clean : 0;
-        score[h.model] = f - fa;
+        // Ranked on what is proven: the low end of the found share's 95% range less the HIGH
+        // end of the false alarms' (never shown clean files: up to 100%), so a few tasks, or
+        // none on clean code, cannot top the chart.
+        score[h.model] = wilson(h.found, bugs)[0] - wilson(h['false alarm'], clean)[1];
         segs.push({model: h.model, part: 'false alarm', x1: -fa, x2: 0, n: h['false alarm'] + ' of ' + clean + ' clean files'});
         segs.push({model: h.model, part: 'found', x1: 0, x2: f, n: h.found + ' of ' + bugs + ' bugs'});
         segs.push({model: h.model, part: 'wrong line', x1: f, x2: f + wl, n: h['wrong line'] + ' of ' + bugs + ' bugs'});
         segs.push({model: h.model, part: 'missed', x1: f + wl, x2: f + wl + ms, n: h.missed + ' of ' + bugs + ' bugs'});
       });
-      var models = Object.keys(score).sort(function (a, b) { return score[b] - score[a]; });
+      var models = Object.keys(score).sort(function (a, b) { return score[b] - score[a] || tasks[b] - tasks[a]; });
       return Plot.plot({
-        width: w, height: rows(models.length), style: style, marginLeft: 250,
+        width: w, height: rows(models.length), style: style, marginLeft: w < 560 ? 150 : 250,
         x: {domain: [-1, 1], label: '← false alarms on clean files · bugs found →', grid: true,
             tickFormat: function (d) { return Math.abs(Math.round(d * 100)) + '%'; }},
-        y: {domain: models, label: null, tickFormat: function (m) { return m + '  (' + tasks[m] + ')'; }},
+        y: {domain: models, label: null, tickFormat: function (m) { return fit(m, w < 560 ? 16 : 28) + '  (' + tasks[m] + ')'; }},
         color: {legend: true, domain: ['found', 'wrong line', 'missed', 'false alarm'], range: [good, signal, line, err]},
         marks: [
+          // Under FEW tasks a model's bars are faint: shown, not much to go on.
           Plot.barX(segs.filter(function (s) { return s.x2 > s.x1; }), {x1: 'x1', x2: 'x2', y: 'model', fill: 'part',
-            title: function (d) { return d.model + ': ' + d.part + ', ' + d.n; }}),
+            fillOpacity: function (d) { return tasks[d.model] < FEW ? 0.4 : 1; },
+            title: function (d) { return d.model + ': ' + d.part + ', ' + d.n + (tasks[d.model] < FEW ? '\nfew tasks: little to go on' : ''); }}),
           Plot.ruleX([0], {stroke: ink, strokeWidth: 1.5})
         ]
       });
     });
 
-    // Real work: the share of judged offloads that helped, sample size beside the name.
+    // Real work: how often each model helped, with how sure that is. The dot is the share
+    // helped, its size how many were judged, the line the range the true share likely sits
+    // in (95% Wilson interval: wide for 3 of 3, narrow for 40 of 50). Ranked by the low end
+    // of that range, so volume counts: 3 of 3 no longer outranks 40 of 50. The dashed line
+    // is every model's offloads pooled.
     put('chart-work', function (w) {
-      var R = C.work.slice().sort(function (a, b) { return b.useful / b.judged - a.useful / a.judged || b.judged - a.judged; });
-      if (!R.length) return el('p', {class: 'hint'}, 'No judged offloads yet.');
-      var by = {};
-      R.forEach(function (r) { by[r.model] = r; });
-      function share(r) { return r.useful / r.judged; }
+      if (!C.work.length) return el('p', {class: 'hint'}, 'No judged offloads yet.');
+      var R = C.work.map(function (r) {
+        var b = wilson(r.useful, r.judged), p = r.useful / r.judged;
+        var verdict = b[0] >= 0.5 ? 'helps' : b[1] < 0.5 ? 'does not help' : 'too few to say';
+        return Object.assign({p: p, lo: b[0], hi: b[1], verdict: verdict}, r);
+      }).sort(function (a, b) { return b.lo - a.lo || b.judged - a.judged; });
+      var all = R.reduce(function (s, r) { return [s[0] + r.useful, s[1] + r.judged]; }, [0, 0]);
+      var pooled = all[0] / all[1];
+      var narrowW = w < 560, nameW = narrowW ? 130 : 210;
       return Plot.plot({
-        width: w, height: rows(R.length), style: style, marginLeft: 250, marginRight: 50,
-        x: {domain: [0, 1], label: 'Helped, share of judged offloads →', tickFormat: '.0%', grid: true},
+        width: w, height: 24 * R.length + 90, style: style, marginLeft: nameW, marginRight: 64, marginTop: 34,
+        x: {domain: [0, 1], label: 'Helped, share of judged offloads →', tickFormat: '.0%', ticks: 5, grid: true},
         y: {domain: R.map(function (r) { return r.model; }), label: null,
-            tickFormat: function (m) { return m + '  (' + by[m].judged + ')'; }},
+            tickFormat: function (m) { return fit(m, narrowW ? 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(R, {x: share, y: 'model', fill: function (r) { return share(r) >= 0.5 ? good : err; },
-            title: function (r) { return r.model + ': helped ' + r.useful + ' of ' + r.judged + ' judged (' + r.offloads + ' offloads)'
-              + (r.real || r.false ? '\nverified findings ' + r.real + ', false claims ' + r.false : ''); }}),
-          Plot.text(R, {x: share, y: 'model', text: function (r) { return r.useful + '/' + r.judged; }, dx: 18, fill: ink}),
-          Plot.ruleX([0], {stroke: ink})
+          Plot.ruleX([0.5], {stroke: line}),
+          Plot.ruleX([pooled], {stroke: ink, strokeDasharray: '4 3', strokeOpacity: 0.6}),
+          Plot.text([pooled], {x: function (d) { return d; }, frameAnchor: 'top', dy: -20, fill: muted, fontSize: 11,
+            text: function () { return 'all models ' + Math.round(pooled * 100) + '%'; }}),
+          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 + '\nhelped ' + r.useful + ' of ' + r.judged + ' judged (' + Math.round(r.p * 100) + '%; '
+                + r.offloads + ' offloads)\nlikely between ' + Math.round(r.lo * 100) + '% and ' + Math.round(r.hi * 100) + '%'
+                + (r.real || r.false ? '\nverified findings ' + r.real + ', false claims ' + r.false : '');
+            }}),
+          Plot.text(R, {x: 'hi', y: 'model', dx: 8, textAnchor: 'start', fill: ink, fontSize: 11,
+            text: function (r) { return r.useful + '/' + r.judged; }})
         ]
       });
     });
 
-    // Did it answer: each probe of the last 14 days, by what came back.
-    put('chart-reliability', function (w) {
-      if (!C.reliability.length) return el('p', {class: 'hint'}, 'No probes in the last 14 days.');
-      var total = {}, ok = {};
-      C.reliability.forEach(function (d) {
-        total[d.model] = (total[d.model] || 0) + d.count;
-        if (d.outcome === 'answered') ok[d.model] = d.count;
-      });
-      var models = Object.keys(total).sort(function (a, b) { return (ok[b] || 0) / total[b] - (ok[a] || 0) / total[a]; });
-      var colour = {answered: good, capacity: signal, timeout: sky, structural: err, paywalled: warn,
-                    entitlement: '#c0563f', other: muted, error: ink};
-      var order = Object.keys(colour).filter(function (o) { return C.reliability.some(function (d) { return d.outcome === o; }); });
-      return Plot.plot({
-        width: w, height: rows(models.length), style: style, marginLeft: 250,
-        x: {label: 'Share of probes →', tickFormat: '.0%', grid: true},
-        y: {domain: models, label: null},
-        color: {legend: true, domain: order, range: order.map(function (o) { return colour[o]; })},
-        marks: [Plot.barX(C.reliability, Plot.stackX({x: 'count', y: 'model', fill: 'outcome', offset: 'normalize', order: order,
-          title: function (d) { return d.model + ': ' + d.outcome + ' ' + d.count + ' of ' + total[d.model] + ' probes'; }}))]
-      });
-    });
-
     // Speed vs quality: median seconds on our own tasks against findings located.
     put('chart-speed', function (w) {
       if (!C.speed.length) return el('p', {class: 'hint'}, 'No suite timings yet.');
@@ -2975,14 +3163,20 @@
       var pts = C.speed.slice().sort(function (a, b) { return b.recall - a.recall; });
       var offs = spread(pts, function (d) { return (Math.log(d.seconds) - Math.log(lo)) / (Math.log(hi) - Math.log(lo)) * pxW; },
                         function (d) { return (1 - d.recall) / (1 - y0) * pxH; });
-      var labels = pts.map(function (d, i) { return {model: d.model, seconds: d.seconds, ty: d.recall - offs[i] * (1 - y0) / pxH}; });
+      var labels = pts.map(function (d, i) { return offs[i] == null ? null : {model: d.model, seconds: d.seconds, ty: d.recall - offs[i] * (1 - y0) / pxH}; })
+        .filter(Boolean);
       return Plot.plot({
         width: w, height: 420, style: style, grid: true, inset: 16, marginRight: 50, marginTop: 30,
         x: {type: 'log', domain: [lo, hi], label: 'Median seconds per answer on our tasks →'},
         y: {domain: [y0, 1], label: '↑ Findings located', tickFormat: '.0%'},
         marks: [
+          // The zone to be in, as on Who to trust: the faster half (on the log scale) and the
+          // top quarter of findings. Outlined, so it reads on a dark ground too.
+          Plot.rect([{x1: lo, x2: Math.sqrt(lo * hi), y1: y0 + (1 - y0) * 3 / 4, y2: 1}], {x1: 'x1', x2: 'x2', y1: 'y1', y2: 'y2',
+            fill: good, fillOpacity: 0.12, stroke: good, strokeOpacity: 0.5, strokeDasharray: '4 3'}),
           Plot.dot(C.speed, {x: 'seconds', y: 'recall', r: 6, fill: sky, stroke: ink, strokeWidth: 0.5}),
-          Plot.text(labels, {x: 'seconds', y: 'ty', text: 'model', fontSize: 11, fill: ink}),
+          Plot.text(labels, {x: 'seconds', y: 'ty', text: 'model', fontSize: 11, fill: ink,
+                             stroke: halo, strokeWidth: 3.5, strokeOpacity: 0.9, paintOrder: 'stroke'}),
           Plot.tip(C.speed, Plot.pointer({x: 'seconds', y: 'recall',
             title: function (d) { return d.model + '\nmedian ' + d.seconds.toFixed(0) + 's over ' + d.tasks + ' tasks\nfinds ' + Math.round(d.recall * 100) + '%'; }}))
         ]
@@ -2997,25 +3191,41 @@
         return C.families.indexOf(fam[a]) - C.families.indexOf(fam[b]) || (a < b ? -1 : 1);
       });
       tasks.forEach(function (t) { if (!(fam[t] in first)) first[fam[t]] = t; });
-      var label = {};
-      Object.keys(first).forEach(function (f) { label[first[f]] = f; });
+      // Each group's name over its first task, on two staggered rows: side by side they
+      // ran into one another wherever a group is only a few tasks wide.
+      var heads = C.families.filter(function (f) { return f in first; })
+        .map(function (f, i) { return {task: first[f], name: f, row: i % 2}; });
       // By total found, so a model that played three tasks does not top one that played forty.
-      var sum = {};
-      C.heat.forEach(function (d) { sum[d.model] = (sum[d.model] || 0) + (d.rate || 0); });
-      var models = Object.keys(sum).sort(function (a, b) { return sum[b] - sum[a]; });
+      // A model with no scored task (only grey) gets no row: it is named under the chart.
+      var sum = {}, scored = {};
+      C.heat.forEach(function (d) {
+        sum[d.model] = (sum[d.model] || 0) + (d.rate || 0);
+        if (d.rate != null) scored[d.model] = true;
+      });
+      var models = Object.keys(sum).filter(function (m) { return scored[m]; }).sort(function (a, b) { return sum[b] - sum[a]; });
+      var idle = Object.keys(sum).filter(function (m) { return !scored[m]; }).sort();
+      var shown = C.heat.filter(function (d) { return scored[d.model]; });
+      var nameW = w < 560 ? 130 : 230;
       function tip(d) { return d.model + '\n' + d.task + ' (' + d.family + ')\n' + d.label + (d.invented ? '\ninvented something' : ''); }
-      return Plot.plot({
-        width: w, height: 22 * models.length + 70, style: style, marginLeft: 230, marginTop: 30, padding: 0.08,
-        x: {domain: tasks, axis: 'top', label: null, tickSize: 0, tickFormat: function (t) { return label[t] || ''; }},
-        y: {domain: models, label: null, tickSize: 0},
+      var box = el('div');
+      box.appendChild(Plot.plot({
+        width: w, height: 22 * models.length + 84, style: style, marginLeft: nameW, marginTop: 44, padding: 0.08,
+        x: {domain: tasks, axis: null},
+        y: {domain: models, label: null, tickSize: 0, tickFormat: function (m) { return fit(m, w < 560 ? 16 : 30); }},
         color: {type: 'linear', domain: [0, 0.5, 1], range: [err, signal, good]},
         marks: [
-          Plot.cell(C.heat.filter(function (d) { return d.rate == null; }), {x: 'task', y: 'model', fill: line, title: tip}),
-          Plot.cell(C.heat.filter(function (d) { return d.rate != null; }), {x: 'task', y: 'model', fill: 'rate', title: tip}),
-          Plot.dot(C.heat.filter(function (d) { return d.invented; }), {x: 'task', y: 'model', r: 2.4, fill: ink}),
-          Plot.ruleX(Object.keys(label), {x: function (t) { return t; }, stroke: ink, strokeOpacity: 0.25, dx: -2})
+          Plot.cell(shown.filter(function (d) { return d.rate == null; }), {x: 'task', y: 'model', fill: line, title: tip}),
+          Plot.cell(shown.filter(function (d) { return d.rate != null; }), {x: 'task', y: 'model', fill: 'rate', title: tip}),
+          Plot.dot(shown.filter(function (d) { return d.invented; }), {x: 'task', y: 'model', r: 2.4, fill: ink}),
+          Plot.ruleX(heads, {x: 'task', stroke: ink, strokeOpacity: 0.25, dx: -2}),
+          Plot.text(heads.filter(function (h) { return !h.row; }), {x: 'task', frameAnchor: 'top', dy: -30, dx: -2,
+            text: 'name', textAnchor: 'start', fontSize: 11, fill: ink}),
+          Plot.text(heads.filter(function (h) { return h.row; }), {x: 'task', frameAnchor: 'top', dy: -14, dx: -2,
+            text: 'name', textAnchor: 'start', fontSize: 11, fill: ink})
         ]
-      });
+      }));
+      if (idle.length) box.appendChild(el('p', {class: 'hint'}, 'No scored task yet, so no row: ' + idle.join(', ') + '.'));
+      return box;
     });
 
     // Vision tasks: one square per field and model, the task's name over its first field.
@@ -3062,39 +3272,66 @@
         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.
-      var models = Object.keys(total).sort(function (a, b) { return total[b] - total[a] || (a < b ? -1 : 1); });
+      // 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'};
       });
-      return Plot.plot({
-        width: w, height: rows(models.length), style: style, marginLeft: 300, marginRight: 150,
+      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 m + '  (' + total[m] + ')'; }},
+        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]; })},
         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(claims, {x: 1, y: 'model', text: 'text', dx: 8, textAnchor: 'start', fill: ink})
+          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})
         ]
-      });
+      }));
+      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.'));
+      return box;
     });
 
-    // Confidently wrong: stacked by kind, worst at the top.
+    // Confidently wrong: stacked by kind. A thin line runs over each bar for the range the
+    // true share likely sits in (95% Wilson), so 0 of 2 shows how bad it could be, not a
+    // clean record. Worst proven at the top: by the low end of that range. Few answers: faint.
     put('chart-wrong', function (w) {
-      var T = C.wrongTotals;
-      var models = Object.keys(T).sort(function (a, b) { return T[b].rate - T[a].rate || T[b].answers - T[a].answers; });
+      var T = C.wrongTotals, R = {};
+      Object.keys(T).forEach(function (m) {
+        var b = wilson(T[m].wrong, T[m].answers);
+        R[m] = {model: m, lo: b[0], hi: b[1], few: T[m].answers < FEW};
+      });
+      var models = Object.keys(T).sort(function (a, b) {
+        return R[b].lo - R[a].lo || T[b].rate - T[a].rate || T[b].answers - T[a].answers;
+      });
+      var ranges = models.map(function (m) { return R[m]; });
+      var top = Math.min(1, Math.max.apply(null, ranges.map(function (r) { return r.hi; })) + 0.02);
       return Plot.plot({
-        width: w, height: 20 * models.length + 70, style: style, marginLeft: 250,
-        x: {label: 'Confidently wrong, share of answers that could have been →', tickFormat: '.0%', grid: true},
+        width: w, height: 20 * models.length + 70, style: style, marginLeft: w < 560 ? 150 : 250,
+        x: {domain: [0, top], label: 'Confidently wrong, share of answers that could have been →', tickFormat: '.0%', grid: true},
         // The count beside each name: 1 of 2 is not the same evidence as 17 of 26.
-        y: {domain: models, label: null, tickFormat: function (m) { return m + '  (' + T[m].answers + ')'; }},
+        y: {domain: models, label: null, tickFormat: function (m) { return fit(m, w < 560 ? 16 : 28) + '  (' + T[m].answers + ')'; }},
         color: {legend: true, domain: C.kinds, range: [err, signal, sky, muted]},
         marks: [
-          Plot.barX(C.wrong, {x: 'rate', y: 'model', fill: 'kind', title: function (d) { return d.model + ': ' + d.kind + ' ' + d.n; }}),
+          Plot.barX(C.wrong, {x: 'rate', y: 'model', fill: 'kind', insetTop: 3, insetBottom: 3,
+            fillOpacity: function (d) { return R[d.model].few ? 0.4 : 1; },
+            title: function (d) { return d.model + ': ' + d.kind + ' ' + d.n; }}),
+          Plot.ruleY(ranges, {y: 'model', x1: 'lo', x2: 'hi', stroke: ink, strokeOpacity: 0.45, strokeWidth: 1.5,
+            title: function (r) {
+              return r.model + ': ' + T[r.model].wrong + ' of ' + T[r.model].answers + ' confidently wrong\nlikely between '
+                + Math.round(r.lo * 100) + '% and ' + Math.round(r.hi * 100) + '%' + (r.few ? '\nfew answers: little to go on' : '');
+            }}),
           Plot.ruleX([0], {stroke: ink})
         ]
       });