@wendellresearch-ai/benchwarmers 0.6.1 → 0.6.3

package/ui/bench.js

@@ -55,30 +55,33 @@
   askD.addEventListener('close', function () { answer(false); });   // Escape
 
   // ---- restart (serve.restart): the page reloads once the new one answers ----
-  function restart(force) {
-    var rs = $('restart'), out = $('restart-out');
+  // One button on Settings (restart) and one on Info (restart-info), each with its own status line.
+  function restart(id, force) {
+    var rs = $(id), out = $(id + '-out');
     rs.disabled = true; out.textContent = 'Restarting…';
     post('/api/restart', {force: force}).then(function (res) {
-      if (res.ok) return back(Date.now());
+      if (res.ok) return back(out, Date.now());
       rs.disabled = false; out.textContent = '';
       if (!res.busy) { listErrors(out, res.errors); return; }
       ask('Still in progress: ' + res.errors.join('; ') + '. Restart anyway and cut them off?', 'Restart anyway', true)
-        .then(function (yes) { if (yes) restart(true); });
+        .then(function (yes) { if (yes) restart(id, true); });
     }).catch(function (err) { rs.disabled = false; out.textContent = String(err); });
   }
   // The old one stops half a second after answering; /health answers again once the new one is up.
-  function back(since) {
+  function back(out, since) {
     setTimeout(function () {
       fetch('/health', {cache: 'no-store'}).then(function (r) { if (!r.ok) throw r.status; location.reload(); })
         .catch(function () {
-          if (Date.now() - since < 120000) back(since);
-          else $('restart-out').textContent = 'Not back after two minutes: look at whatever runs it.';
+          if (Date.now() - since < 120000) back(out, since);
+          else out.textContent = 'Not back after two minutes: look at whatever runs it.';
         });
     }, 1500);
   }
-  on('click', 'restart', function () {
-    ask('Restart Benchwarmers? The dashboard and the gateway on this port stop for a few seconds.', 'Restart')
-      .then(function (yes) { if (yes) restart(false); });
+  ['restart', 'restart-info'].forEach(function (id) {
+    on('click', id, function () {
+      ask('Restart Benchwarmers? The dashboard and the gateway on this port stop for a few seconds.', 'Restart')
+        .then(function (yes) { if (yes) restart(id, false); });
+    });
   });
 
   // ---- Export and import (serve.export_zip, import_zip) ----------------
@@ -250,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;
@@ -490,7 +501,7 @@
            reason: $('m-reason'), remove: $('m-remove'), onboard: $('m-onboard'),
            qtypes: $('m-qtypes'), aliasWhy: $('m-alias-why'), roleHint: $('m-role-hint')};
   m.aliasWhy.dataset.chat = m.aliasWhy.textContent;
-  var editing = null;
+  var editing = null, shown = {};
 
   function openModel(alias) {
     var model = D.models[alias], gone = (D.retired || {})[alias];
@@ -539,6 +550,8 @@
         + (hint.at || '').slice(0, 10) + '). Only a suggestion: the role is the one you pick above.' : '';
       m.save.disabled = false; m.save.textContent = 'Save';
       m.reason.value = ''; m.removeBox.open = false; m.remove.disabled = false; refresh();
+      // What the popup opened with: Save sends only the parts that differ from it.
+      shown = {model: JSON.stringify(modelBody()), facts: factsBody(), opts: optsBody()};
     }
     if (!md.open) md.showModal();      // open already: shown again as it now is (shownAgain)
   }
@@ -577,7 +590,7 @@
     var box = $('m-facts'), f = (D.facts || {})[alias], profile = $('m-profile');
     box.hidden = profile.hidden = decision || !f;
     profile.textContent = '';
-    $('f-errors').textContent = ''; $('f-done').textContent = '';
+    $('f-errors').textContent = '';
     if (box.hidden) return;
     var src = f.sources || {}, mine = function (k) { return src[k] === 'you'; };
     // At a glance, as models.dev shows a model: what goes in, what comes out.
@@ -621,40 +634,25 @@
     var lsrc = Object.keys(src).filter(function (k) { return k.indexOf('limits') === 0; }).map(function (k) { return src[k]; });
     $('s-limits').textContent = lsrc.length ? lsrc.join(' · ') : 'none known';
   }
-  $('f-save').addEventListener('click', function () {
-    if (!editing) return;
+  // The facts as typed, as /api/model-facts takes them; null when the box is not shown.
+  function factsBody() {
+    if ($('m-facts').hidden) return null;
     var facts = {limits: {}};
     FACT_NUM.forEach(function (k) { if ($('f-' + k).value) facts[k] = parseInt($('f-' + k).value, 10); });
     FACT_CAP.forEach(function (k) { var v = $('f-' + k).value; if (v) facts[k] = v === 'yes'; });
     if ($('f-knowledge_cutoff').value.trim()) facts.knowledge_cutoff = $('f-knowledge_cutoff').value.trim();
     document.querySelectorAll('#f-limits input').forEach(function (b) { if (b.value) facts.limits[b.dataset.k] = parseInt(b.value, 10); });
-    $('f-errors').textContent = ''; $('f-done').textContent = '';
-    var alias = editing;
-    post('/api/model-facts', {alias: alias, facts: facts}).then(function (r) {
-      if (!r.ok) { listErrors($('f-errors'), r.errors); return; }
-      // The tables that show facts (At a glance, Models, Quotas) follow once the popup closes (live).
-      shownAgain(alias, 'f-done', 'Saved. The tables show it once this closes.');
-    });
-  });
+    return JSON.stringify(facts);
+  }
   // ---- call options: how the bench asks this model (serve.save_model_options)
   function fillOptions(alias, decision) {
     var o = (D.options || {})[alias] || {}, ceiling = ((D.facts || {})[alias] || {}).max_output;
     $('m-opts').hidden = decision;
-    $('co-errors').textContent = ''; $('co-done').textContent = '';
+    $('co-errors').textContent = '';
     $('co-max').value = o.max_tokens || ''; $('co-max').placeholder = "the endpoint's default";
     $('co-ceiling').textContent = ceiling ? 'At most its max output, ' + Number(ceiling).toLocaleString() + '.' : '';
   }
-  $('co-save').addEventListener('click', function () {
-    if (!editing) return;
-    var v = $('co-max').value.trim();
-    $('co-errors').textContent = ''; $('co-done').textContent = 'Saving…';   // the llm CLI is told too: seconds
-    var alias = editing;
-    post('/api/model-options', {alias: alias, max_tokens: v ? Number(v) : null}).then(function (r) {
-      if (!r.ok) { $('co-done').textContent = ''; listErrors($('co-errors'), r.errors); return; }
-      ownChange();                         // only this popup shows them
-      shownAgain(alias, 'co-done', 'Saved' + (r.note ? '; ' + r.note : '') + '.');
-    });
-  });
+  function optsBody() { return $('m-opts').hidden ? null : $('co-max').value.trim(); }
 
   function refresh() {
     m.danger.hidden = !(editing && m.alias.value.trim() !== editing);
@@ -690,22 +688,57 @@
       then(res);
     };
   }
-  m.save.addEventListener('click', function () {
-    if (!editing) return;
-    var body = {alias: editing, new_alias: m.alias.value.trim(), new_role: m.role.value, new_ad_hoc: m.adhoc.checked};
+  function modelBody() {
+    var body = {new_alias: m.alias.value.trim(), new_role: m.role.value, new_ad_hoc: m.adhoc.checked};
     if (!m.qtypes.hidden) {
       body.new_question_types = Array.prototype.filter.call(m.qtypes.querySelectorAll('input'),
         function (c) { return c.checked; }).map(function (c) { return c.value; });
     }
-    (body.new_alias === editing ? Promise.resolve(true)
-      : ask('Rename ' + editing + ' to ' + body.new_alias + '? Every record keyed by the old alias follows it.', 'Rename')
+    return body;
+  }
+  // The one Save: facts, then call options, then the model itself (alias, role, ad hoc,
+  // question types), each only if changed. The model goes last: a rename moves the
+  // facts and options saved under the old alias with it. The first refusal stops it.
+  m.save.addEventListener('click', function () {
+    if (!editing) return;
+    var alias = editing, body = modelBody(), facts = factsBody(), opts = optsBody(), said = [];
+    var steps = [];
+    if (facts !== shown.facts) steps.push(function () {
+      return post('/api/model-facts', {alias: alias, facts: JSON.parse(facts)}).then(function (r) {
+        if (!r.ok) { listErrors($('f-errors'), r.errors); $('m-facts').open = true; throw 'refused'; }
+        said.push('model facts');
+      });
+    });
+    if (opts !== shown.opts) steps.push(function () {   // the llm CLI is told too: seconds
+      return post('/api/model-options', {alias: alias, max_tokens: opts ? Number(opts) : null}).then(function (r) {
+        if (!r.ok) { listErrors($('co-errors'), r.errors); $('m-opts').open = true; throw 'refused'; }
+        ownChange();                         // only this popup shows them
+        said.push('call options' + (r.note ? ' (' + r.note + ')' : ''));
+      });
+    });
+    if (JSON.stringify(body) !== shown.model) steps.push(function () {
+      body.alias = alias;
+      return post('/api/model', body).then(function (r) {
+        if (!r.ok) { listErrors(m.errors, r.errors); throw 'refused'; }
+        said.push('the model (' + done(r).replace(/^Done: |\.$/g, '') + ')');
+        if (body.new_alias !== alias) { m.title.textContent = body.new_alias; refreshPanes(); }
+      });
+    });
+    m.errors.textContent = ''; m.done.textContent = ''; $('f-errors').textContent = ''; $('co-errors').textContent = '';
+    if (!steps.length) { m.done.textContent = 'Nothing changed.'; return; }
+    (body.new_alias === alias ? Promise.resolve(true)
+      : ask('Rename ' + alias + ' to ' + body.new_alias + '? Every record keyed by the old alias follows it.', 'Rename')
     ).then(function (yes) {
       if (!yes) return;
-      m.save.disabled = true; m.save.textContent = 'Saving…'; m.errors.textContent = '';
-      post('/api/model', body).then(after(m.save, 'Save', function (res) {
-        if (body.new_alias !== body.alias) { m.title.textContent = body.new_alias; refreshPanes(); }
-        shownAgain(body.new_alias, 'm-done', done(res));
-      })).catch(function (err) { m.errors.textContent = String(err); m.save.disabled = false; m.save.textContent = 'Save'; });
+      m.save.disabled = true; m.save.textContent = 'Saving…';
+      steps.reduce(function (p, step) { return p.then(step); }, Promise.resolve()).then(function () {
+        // The tables that show facts follow once the popup closes (live).
+        shownAgain(body.new_alias, 'm-done', 'Saved: ' + said.join(' · ') + '.');
+      }).catch(function (err) {
+        if (err !== 'refused') m.errors.textContent = String(err);
+        if (said.length) m.done.textContent = 'Saved before that: ' + said.join(' · ') + '.';
+        m.save.disabled = false; m.save.textContent = 'Save';
+      });
     });
   });
   // The confirm is the last word: the popup closes at once and the page
@@ -1855,7 +1888,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();
   };
@@ -1969,7 +2002,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) {
@@ -1977,7 +2010,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;
@@ -1986,6 +2020,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(); }
@@ -2034,13 +2085,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) {
@@ -2048,18 +2123,22 @@
       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(' · ')));
+      name.appendChild(el('a', {href: '#', class: 'model mono', 'data-alias': g.name, title: 'Open ' + g.name}, g.name));
       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);
@@ -2070,19 +2149,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'};
@@ -2635,7 +2701,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) {
@@ -2647,7 +2714,7 @@
             return tries[k];
           }
         }
-        return tries[0];
+        return null;
       });
     }
     function rows(n) { return 20 * n + 80; }
@@ -2657,6 +2724,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
@@ -2703,7 +2780,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.
@@ -2805,16 +2884,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';
@@ -2825,10 +2962,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)),
@@ -2837,17 +2975,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%'},
@@ -2875,71 +3020,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.');
@@ -2950,14 +3096,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) + '%'; }}))
         ]
@@ -2972,25 +3124,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.
@@ -3037,39 +3205,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})
         ]
       });