@wendellresearch-ai/benchwarmers 0.4.0 → 0.5.0

package/ui/bench.js

@@ -20,9 +20,11 @@
   // The page's own confirm, a Promise of true/false: window.confirm is
   // silently false where a browser blocks dialogs. Opens over any open popup.
   var askD = $('ask-dialog'), askDone = null;
-  function ask(text, yes, danger) {
+  function ask(text, yes, danger, onboard) {
     if (askDone) askDone(false);
     $('ask-text').textContent = text;
+    $('ask-onboard').hidden = !onboard;     // Discover's Add: the Onboard dialog's mode and Vision box
+    $('ask-vision').checked = false;
     $('ask-yes').textContent = yes || 'OK';
     $('ask-yes').className = 'btn ' + (danger ? 'danger' : 'primary');
     askD.showModal(); $('ask-no').focus();
@@ -33,6 +35,34 @@
   $('ask-no').addEventListener('click', function () { answer(false); });
   askD.addEventListener('close', function () { answer(false); });   // Escape
 
+  // ---- restart (serve.restart): the page reloads once the new one answers ----
+  var rs = $('restart');
+  function restart(force) {
+    var out = $('restart-out');
+    rs.disabled = true; out.textContent = 'Restarting…';
+    post('/api/restart', {force: force}).then(function (res) {
+      if (res.ok) return back(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); });
+    }).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) {
+    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.';
+        });
+    }, 1500);
+  }
+  if (rs) rs.addEventListener('click', 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); });
+  });
+
   // ---- tabs, remembered per browser ----------------------------------
   var tabs = document.querySelectorAll('.tabs button[data-tab]');      // not the sidebar's own toggle
   var onShow = {};                     // a page's loader, run each time it is shown
@@ -743,19 +773,21 @@
   function addVia(x, b) {
     var direct = x.via === 'direct';
     ask('Add ' + x.model + ' via ' + x.label + (x.free ? '' : ' (PAID)') + '?\n\n'
-      + (direct ? 'The bench only: register it on the ' + x.endpoint + ' endpoint, a 4-call probe, then the suite.'
+      + (direct ? 'The bench only: register it on the ' + x.endpoint + ' endpoint and onboard it as chosen below.'
         // A LiteLLM or CLI Proxy API route says its own steps: only what that hub takes.
         : x.steps ? x.steps.map(function (s, i) { return (i + 1) + '. ' + s; }).join('\n')
         : '1. Open WebUI: add it to the ' + x.connection + ' connection\'s Model IDs (if that connection lists them)\n'
         + '2. Open WebUI: a public model record, tagged and with the logo of the connection\'s other models\n'
-        + '3. The bench: register, a 4-call probe, then the suite'), 'Add').then(function (yes) { if (yes) addNow(x, b, direct); });
+        + '3. The bench: register it and onboard it as chosen below'), 'Add', false, true).then(function (yes) {
+      if (yes) addNow(x, b, direct, {mode: $('ask-mode').value, vision: $('ask-vision').checked});
+    });
   }
-  function addNow(x, b, direct) {
+  function addNow(x, b, direct, how) {
     var title = 'Adding ' + x.model + ' via ' + x.label;
     $('d-errors').textContent = '';
     if (direct) {
       b.disabled = true; b.textContent = 'Adding…';
-      post('/api/onboard-queue', {items: [{served: x.model, endpoint: x.endpoint}]}).then(function (res) {
+      post('/api/onboard-queue', {items: [Object.assign({served: x.model, endpoint: x.endpoint}, how)]}).then(function (res) {
         if (!res.ok) { listErrors($('d-errors'), res.errors); b.disabled = false; b.textContent = 'Add via this'; return; }
         dd.close(); preStep = null; o.errors.textContent = ''; od.showModal();
         afterQueued(res, {served: x.model, endpoint: x.endpoint}, title, '');
@@ -770,7 +802,7 @@
     runView(title, 'Adding it to ' + x.label + '…');
     oq.box.hidden = false; oq.chip.classList.remove('done', 'fail'); oq.chip.style.setProperty('--fill', '3%');
     oq.text.textContent = oq.text.title = title; oq.stop.hidden = oq.clear.hidden = true;
-    post('/api/discover/add', {connection: x.connection, model: x.model, endpoint: x.endpoint}).then(function (res) {
+    post('/api/discover/add', Object.assign({connection: x.connection, model: x.model, endpoint: x.endpoint}, how)).then(function (res) {
       var hubDone = !!(res.served && res.steps && res.steps.length);   // in the hub, even if queueing it was refused
       preStep.state = hubDone ? 'done' : 'fail';
       preStep.note = (res.steps || []).join('. ') + (hubDone ? '' : (res.steps && res.steps.length ? '. ' : '') + res.errors.join(' '));
@@ -802,8 +834,16 @@
         if (res.errors.length) listErrors($('d-errors'), res.errors);   // a hub that could not be asked
         var r = res.model, p = $('d-profile'), list = $('d-routes');
         $('d-title').textContent = r.name;
-        $('d-served').textContent = r.provider_name + ' · ' + r.model + ' · listed by ' + r.sources.join(' and ')
-          + (r.on_bench_as ? ' · on the bench as ' + r.on_bench_as : '');
+        // Each source a link: FreeLLMAPI's page for the model where its sitemap has one, else its catalog.
+        var sv = $('d-served');
+        sv.textContent = r.provider_name + ' · ' + r.model + ' · listed by ';
+        r.sources.forEach(function (s, i) {
+          var fl = s === 'freellmapi';
+          if (i) sv.appendChild(document.createTextNode(' and '));
+          sv.appendChild(el('a', {href: fl ? r.page || 'https://freellmapi.co/models' : 'https://models.dev/',
+                                  target: '_blank', rel: 'noopener'}, fl ? 'FreeLLMAPI' : 'models.dev'));
+        });
+        if (r.on_bench_as) sv.appendChild(document.createTextNode(' · on the bench as ' + r.on_bench_as));
         p.textContent = '';
         [['Input', r.in_mods], ['Output', r.out_mods]].forEach(function (x) {
           var row = el('div', {class: 'prof'});
@@ -814,16 +854,26 @@
         var can = [['tools', r.tools], ['vision', r.vision], ['reasons', r.reasoning]]
           .filter(function (x) { return x[1]; }).map(function (x) { return x[0]; });
         var facts = [
+          r.rank != null ? 'smartest #' + r.rank + (r.speed ? ', fastest #' + r.speed : '') + ' on FreeLLMAPI' : '',
+          r.size || '',
           r.context ? 'context ' + Number(r.context).toLocaleString() + ' tokens' : 'context unknown',
           r.output ? 'output up to ' + Number(r.output).toLocaleString() : '',
           can.length ? 'can: ' + can.join(', ') : '',
           price(r),
           r.limits ? 'limits ' + limits(r.limits) : '',
+          r.budget ? r.budget + ' tokens a month' : '',
           r.released ? 'released ' + r.released : '',
           r.knowledge ? 'knowledge to ' + r.knowledge : '',
           r.open_weights != null ? (r.open_weights ? 'open weights' : 'closed weights') : '',
           'first seen ' + (r.first_seen === 'baseline' ? 'before the list began' : r.first_seen)];
         p.appendChild(el('div', {class: 'prof'}, facts.filter(Boolean).join(' · ')));
+        // FreeLLMAPI's operating notes for this provider, e.g. thinking tokens that eat the output cap.
+        (r.quirks || []).forEach(function (q) {
+          var row = el('div', {class: 'prof'});
+          row.appendChild(el('strong', {}, q.title + ': '));
+          row.appendChild(document.createTextNode(q.body || ''));
+          p.appendChild(row);
+        });
         if (r.also_on && r.also_on.length) p.appendChild(el('div', {class: 'prof muted'}, 'Also on the bench as ' + r.also_on.join(', ')));
         list.textContent = '';
         res.routes.forEach(function (x) {
@@ -1279,7 +1329,8 @@
            shape: $('c-shape'), desc: $('c-desc'), tags: $('c-tags'), errors: $('c-errors'), done: $('c-done'),
            head: $('c-form-head'), maxCalls: $('g-max-calls'), maxExp: $('g-max-explorers'),
            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')};
+           del: $('c-delete'), reply: $('c-reply'), merger: $('c-merger'), find: $('c-member-filter'),
+           seats: $('c-seats')};
   var C = null, open = null;         // the collection whose details are showing
   function explorersFor(n) {
     return Math.max(0, Math.min(C.settings.max_explorers, C.settings.max_calls - n));
@@ -1299,10 +1350,37 @@
       (shown.length < rows.length ? ' · showing ' + shown.length + ' of ' + rows.length + ' models' : '') +
       (paid ? ' (' + paid + ' paid hidden by the free tag)' : '') +
       (greyed ? ' · ' + greyed + ' greyed out by the tags (hover one for why)' : '') +
-      (clash ? ' · ' + clash + ' ticked member' + (clash === 1 ? ' does' : 's do') + ' not fit the tags' : '');
+      (clash ? ' · ' + clash + ' ticked member' + (clash === 1 ? ' does' : 's do') + ' not fit the tags' : '') +
+      twice().map(function (t) {
+        return ' · ' + t.name + ' is ticked on ' + t.on.join(' and ') + ': one model agrees with itself, it does not check itself';
+      }).join('');
     c.members.querySelectorAll('input').forEach(function (x) {
       x.disabled = !x.checked && (n >= C.settings.max_calls || !!x.dataset.blocked);
     });
+    drawSeats(ex);
+  }
+  function fact(alias) { return (C.facts || {})[alias] || {}; }
+  // The same model ticked on two providers (route.family_of, as the gateway
+  // keeps explorers off a member's model): allowed, and said.
+  function twice() {
+    var by = {};
+    picked().forEach(function (a) { var f = fact(a).family || a; (by[f] = by[f] || []).push(a); });
+    return Object.keys(by).filter(function (f) { return by[f].length > 1; }).map(function (f) {
+      var row = c.members.querySelector('.m-row[data-family="' + CSS.escape(f) + '"]');
+      return {name: row ? row.dataset.name : by[f][0], on: by[f].map(function (a) { return fact(a).provider || a; })};
+    });
+  }
+  // The panel as it will sit, as the Collections list draws it.
+  function drawSeats(ex) {
+    c.seats.textContent = '';
+    picked().forEach(function (a) {
+      var seat = el('span', {class: 'seat'}, a);
+      if (fact(a).provider) seat.appendChild(el('span', {class: 'k after'}, fact(a).provider));
+      c.seats.appendChild(seat);
+    });
+    for (var i = 0; i < ex; i++) {
+      c.seats.appendChild(el('span', {class: 'seat explorer'}, 'explorer' + (c.shape.value ? ' · ' + c.shape.value : '')));
+    }
   }
   // Tags that say what every member must do: why a model does not fit them
   // (none: it fits). From collections_view's facts; an unknown context is
@@ -1340,20 +1418,28 @@
       lab.classList.toggle('clash', why.length > 0 && box.checked);
       lab.dataset.paid = paid ? '1' : '';
       if (why.length) box.dataset.blocked = '1'; else delete box.dataset.blocked;
+      // A chip says only the provider: the alias and served name are its first line.
       var served = lab.dataset.served;
-      lab.title = (served && served !== box.value ? served : '') + (why.length ? (served && served !== box.value ? '\n' : '') + why.join('\n') : '');
+      lab.title = [box.value + (served && served !== box.value ? ' (' + served + ')' : '')].concat(why).join('\n');
     });
     filterMembers();
   }
   // The member search: the filter boxes' match (any text, case-insensitive),
-  // over alias and served name. It only hides rows, and never a ticked one, so
-  // what is picked is always in view and every count still includes it.
+  // over the model's name and each chip's alias, served name and provider.
+  // It only hides chips, and never a ticked one, so what is picked is always
+  // in view and every count still includes it; a row goes when all its chips do.
   function filterMembers() {
     var q = c.find.value.trim().toLowerCase();
-    c.members.querySelectorAll('label.check').forEach(function (lab) {
-      var box = lab.querySelector('input');
-      lab.hidden = !box.checked && (!!lab.dataset.paid ||
-        !!q && (box.value + ' ' + (lab.dataset.served || '')).toLowerCase().indexOf(q) === -1);
+    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) {
+        var box = lab.querySelector('input');
+        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);
+        any = any || !lab.hidden;
+      });
+      row.hidden = !any;
     });
     recount();
   }
@@ -1384,6 +1470,7 @@
   c.tags.addEventListener('input', function () { drawTagPicks(); applyTags(); });
   function showMerger() { $('c-merger-row').hidden = c.reply.value !== 'merged'; }
   c.reply.addEventListener('change', showMerger);
+  c.shape.addEventListener('change', recount);          // the explorer seats say their shape
   // A collection opens in a popup, as every other edit on the dashboard does:
   // the one clicked, or a new one from New collection.
   function closeForm() {
@@ -1400,14 +1487,37 @@
     c.desc.value = row ? row.description : ''; c.tags.value = row ? row.tags.join(', ') : '';
     drawTagPicks();
     c.members.textContent = ''; c.find.value = '';
-    C.models.forEach(function (alias) {
-      var box = el('input', {type: 'checkbox', value: alias});
-      box.checked = !!row && row.members.indexOf(alias) !== -1;
-      box.addEventListener('change', applyTags);        // ticked or not changes what a misfit shows as
-      var served = (C.served || {})[alias] || '';
-      var lab = el('label', {class: 'check', 'data-served': served});
-      lab.appendChild(box); lab.appendChild(el('span', {class: 'mono'}, alias));
-      c.members.appendChild(lab);
+    // 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.
+    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) {
+      var routes = groups[f].slice().sort(function (x, y) { return x.length - y.length || (x < y ? -1 : 1); });
+      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(' · ')));
+      line.appendChild(name);
+      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.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);
+        lab.appendChild(el('span', null, (f.provider || alias) +
+          (f.context && first.context && f.context !== first.context ? ' · ' + tokens(f.context) : '')));
+        chips.appendChild(lab);
+      });
+      line.appendChild(chips);
+      c.members.appendChild(line);
     });
     c.shape.textContent = '';
     c.shape.appendChild(el('option', {value: ''}, 'automatic'));
@@ -1418,10 +1528,18 @@
     c.merger.textContent = '';
     c.merger.appendChild(el('option', {value: ''}, 'automatic'));
     C.models.forEach(function (alias) {
-      var o = el('option', {value: alias}, alias); if (row && row.merger === alias) o.selected = true; c.merger.appendChild(o);
+      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'};
+  Object.keys(CAP_TAGS).forEach(function (t) { CAN[CAP_TAGS[t][0]] = CAP_TAGS[t][1]; });
+  function tokens(n) {                                 // 512k, 1M (2^20), 1.9M
+    return n >= 1000000 ? String(Math.round(n / 104857.6) / 10).replace(/\.0$/, '') + 'M'
+                        : Math.floor(n / 1000).toLocaleString() + 'k';
+  }
   function loadCollections(keep) {
     fetch('/api/collections').then(function (r) { return r.json(); }).then(function (res) {
       C = res; c.list.textContent = '';
@@ -1430,24 +1548,38 @@
         var box = el('button', {class: 'endpoint c-row', type: 'button', 'data-name': row.name,
                                 'aria-label': 'Open bench/' + row.name});
         var left = el('div');
-        var title = el('div', {class: 'what'});
-        title.appendChild(el('span', {class: 'alias'}, 'bench/' + row.name + ' '));
-        row.tags.forEach(function (t) { title.appendChild(el('span', {class: 'chip', style: 'margin-left:.3rem'}, t)); });
+        var title = el('div', {class: 'top'});
+        title.appendChild(el('span', {class: 'alias'}, 'bench/' + row.name));
+        row.tags.forEach(function (t) { title.appendChild(el('span', {class: 'chip'}, t)); });
         left.appendChild(title);
-        if (row.description) left.appendChild(el('div', {}, row.description));
-        left.appendChild(el('div', {class: 'base'}, row.members.join(', ') + ' + ' + row.explorers + ' explorer' +
-          (row.explorers === 1 ? '' : 's') + (row.shape ? ' (' + row.shape + ')' : '') +
-          (row.reply === 'merged' ? ' · merged by ' + (row.merger || 'verdicts') : '')));
+        if (row.description) left.appendChild(el('p', {class: 'desc'}, row.description));
+        // The panel as it sits: a seat per member, an empty one per explorer,
+        // and the merger after an arrow.
+        var seats = el('div', {class: 'seats'});
+        row.members.forEach(function (m) { seats.appendChild(el('span', {class: 'seat'}, m)); });
+        for (var i = 0; i < row.explorers; i++) {
+          seats.appendChild(el('span', {class: 'seat explorer'}, 'explorer' + (row.shape ? ' · ' + row.shape : '')));
+        }
+        if (row.reply === 'merged') {
+          var merge = el('span', {class: 'merge'}), seat = el('span', {class: 'seat merger'});
+          merge.appendChild(el('span', {'aria-hidden': 'true'}, '→'));
+          seat.appendChild(el('span', {class: 'k'}, 'merger'));
+          seat.appendChild(document.createTextNode(row.merger || 'chosen by verdicts'));
+          merge.appendChild(seat); seats.appendChild(merge);
+        }
+        left.appendChild(seats);
         var t = row.together;
         if (t) {
           var lim = Object.keys(t.limits || {}).filter(function (k) { return t.limits[k]; })
             .map(function (k) { return t.limits[k].toLocaleString() + ' ' + k; });
-          left.appendChild(el('div', {class: 'base'}, 'Together: ' +
-            (t.context_window ? 'prompts up to ' + Math.floor(t.context_window / 1000).toLocaleString() + 'k tokens' : 'context unknown') +
-            (t.context_unknown.length ? ' (unknown for ' + t.context_unknown.join(', ') + ')' : '') +
-            ' · all can: ' + (t.capabilities.join(', ') || 'nothing known in common') +
-            ' · ' + t.connections.length + ' connection' + (t.connections.length === 1 ? '' : 's') +
-            (lim.length ? ' · tightest ' + lim.join(', ') : '')));
+          var can = t.capabilities.map(function (k) { return CAN[k] || k; });
+          var n = t.connections.length + ' connection' + (t.connections.length === 1 ? '' : 's');
+          left.appendChild(el('p', {class: 'together'},
+            (t.context_window ? 'Prompts up to ' + tokens(t.context_window) + ' tokens' : 'Context window unknown') +
+            (t.context_unknown.length ? ' (unknown for ' + t.context_unknown.join(', ') + '). ' : '. ') +
+            (can.length ? 'All can ' + (can.length > 1 ? can.slice(0, -1).join(', ') + ' and ' : '') + can[can.length - 1] + '. '
+                        : 'Nothing known they can all do. ') +
+            (lim.length ? 'Tightest limit ' + lim.join(', ') + ' across ' + n + '.' : 'No limits known across ' + n + '.')));
         }
         box.appendChild(left);
         box.appendChild(el('span', {class: 'open-hint', 'aria-hidden': 'true'}, 'Open ›'));
@@ -1544,6 +1676,290 @@
     }).catch(function (err) { $('v-errors').textContent = String(err); });
   });
 
+  // ---- Quota: a tile per provider (serve.quota_tiles, metrics/quotaview.py) ----
+  // Each tile takes its provider's shape: groups of windows (a 5-hour and a
+  // weekly limit boxed together), one pool (OpenRouter's free requests a day,
+  // a bar per key) or, where nothing is stated, each model's last day. A
+  // meter is ten segments filled like a bar: 85% is eight and a half.
+  var QD = $('quota-data') ? JSON.parse($('quota-data').textContent) : null;
+  var qBox = $('q-tiles');
+  function qWhen(iso) {
+    if (!iso) return '';
+    var d = new Date(iso), s = (d - Date.now()) / 1000;
+    if (s <= 0) return 'now';
+    if (s < 86400) {
+      var h = Math.floor(s / 3600), m = Math.round((s % 3600) / 60);
+      return 'in ' + (h ? h + 'h ' : '') + m + 'm';
+    }
+    if (s < 6 * 86400) return d.toLocaleDateString([], {weekday: 'short'}) + ' ' + d.toLocaleTimeString([], {hour: 'numeric', minute: '2-digit'});
+    return d.toLocaleDateString([], {month: 'numeric', day: 'numeric'}) + ' ' + d.toLocaleTimeString([], {hour: 'numeric', minute: '2-digit'});
+  }
+  function qAgo(iso) {
+    var s = (Date.now() - new Date(iso)) / 1000;
+    return s < 90 ? 'just now' : s < 5400 ? Math.round(s / 60) + ' min ago' : s < 129600 ? Math.round(s / 3600) + ' h ago' : Math.round(s / 86400) + ' days ago';
+  }
+  function qTone(left) { return left >= 70 ? 'ok' : left >= 25 ? 'warn' : 'err'; }
+  function qSegs(left) {
+    var box = el('div', {class: 'segs ' + qTone(left), role: 'img', 'aria-label': left + '% left'});
+    for (var i = 0; i < 10; i++) {
+      var s = el('span'), f = el('i');
+      f.style.width = Math.round(Math.min(Math.max(left / 10 - i, 0), 1) * 100) + '%';
+      s.appendChild(f); box.appendChild(s);
+    }
+    return box;
+  }
+  function qLine(label, right) {
+    var row = el('div', {class: 'q-line'});
+    row.appendChild(el('span', {}, label));
+    var r = el('span'); r.innerHTML = right; row.appendChild(r);
+    return row;
+  }
+  function qNum(n) { return Number(n).toLocaleString(); }
+  function qWindow(w) {
+    var frag = document.createDocumentFragment();
+    var row = qLine(w.label, '<b>' + w.left + '%</b>' + (w.reset_at ? ' · ' + qWhen(w.reset_at) : ''));
+    if (w.of) row.title = qNum(w.remaining) + ' of ' + qNum(w.of) + ' left';
+    frag.appendChild(row);
+    frag.appendChild(qSegs(w.left));
+    return frag;
+  }
+  function qResting(m) { return m.until && new Date(m.until) > Date.now(); }
+  function qTile(t) {
+    var node = el('article', {class: 'q-tile' + (t.out ? ' out' : ''), draggable: 'true', tabindex: '0',
+                              'data-id': t.id, 'aria-label': t.name + ': drag, or use the arrow keys, to move it'});
+    var head = el('div', {class: 'q-head'});
+    head.appendChild(el('b', {class: 'nm'}, t.name));
+    var f = t.fresh, how = f.how === 'live' ? 'read ' : f.how === 'seen' ? 'seen ' : 'answered ';
+    head.appendChild(el('span', {class: 'chip ' + (f.how === 'live' ? 'ok' : 'via')}, f.at ? how + qAgo(f.at) : 'nothing yet'));
+    node.appendChild(head);
+    node.appendChild(el('div', {class: 'q-tag mono'}, t.tag + (t.plan ? ' · ' + t.plan : '')));
+    if (t.kind === 'groups') {
+      t.groups.forEach(function (g) {
+        var box = el('section', {class: g.label ? 'q-group' : 'q-group bare'});
+        if (g.label) box.appendChild(el('h4', {}, g.label));
+        g.windows.forEach(function (w) { box.appendChild(qWindow(w)); });
+        node.appendChild(box);
+      });
+    } else if (t.kind === 'pool') {
+      t.pool.forEach(function (p) {
+        var box = el('section', {class: 'q-group bare'});
+        if (p.of) {
+          box.appendChild(qLine(p.label, '<b>' + qNum(Math.max(0, p.of - p.used)) + '</b> of ' + qNum(p.of) + ' left'
+                                + (p.reset_at ? ' · ' + qWhen(p.reset_at) : '')));
+          box.appendChild(qSegs(p.left));
+        } else {
+          box.appendChild(qLine(p.label, '<b>' + qNum(p.used) + '</b> sent · limit not known yet'));
+        }
+        node.appendChild(box);
+      });
+    } else {
+      var shown = t.models.slice(0, 6);
+      shown.forEach(function (m) {
+        var right = qResting(m) ? '<span class="warn-t">resting · ' + qWhen(m.until) + '</span>'
+                  : m.ok + m.failed ? m.ok + ' ok · ' + m.failed + ' failed' : 'no calls today';
+        var row = qLine('', right); row.firstChild.className = 'mono'; row.firstChild.textContent = m.alias;
+        node.appendChild(row);
+      });
+      if (t.models.length > shown.length) node.appendChild(el('div', {class: 'muted q-small'}, '+ ' + (t.models.length - shown.length) + ' more in Models · last 24 h'));
+      else node.appendChild(el('div', {class: 'muted q-small'}, 'last 24 h'));
+    }
+    if (t.kind !== 'models') {
+      t.models.filter(qResting).forEach(function (m) {
+        node.appendChild(el('div', {class: 'q-rest'}, m.alias + ' resting · back ' + qWhen(m.until)));
+      });
+    }
+    if (t.conn_limit) node.appendChild(el('div', {class: 'muted q-small'}, t.conn_limit + ', set by you'));
+    (t.notes || []).forEach(function (n) { node.appendChild(el('div', {class: 'muted q-small'}, n)); });
+    var msg = el('div', {class: 'q-msg', 'aria-live': 'polite'});
+    node.appendChild(msg);
+    var foot = el('div', {class: 'q-foot'});
+    var rb = el('button', {class: 'btn small', type: 'button', 'aria-label': 'Refresh ' + t.name,
+      title: t.refresh === 'live' ? 'Ask the provider what is left (free)' : 'Read the bench\'s own records again (free)'});
+    rb.innerHTML = '&#x21bb; Refresh';
+    rb.addEventListener('click', function () { qAct('refresh', t.id, node); });
+    foot.appendChild(rb);
+    if (t.check) {
+      var cb = el('button', {class: 'btn small', type: 'button', title: 'One short call to one of its models; its reply says what is left'}, 'Check now · 1 request');
+      cb.addEventListener('click', function () { qAct('check', t.id, node); });
+      foot.appendChild(cb);
+    }
+    var mb = el('button', {class: 'btn small', type: 'button'}, 'Models ');
+    mb.appendChild(el('span', {class: 'chip ' + (t.live === t.bench ? 'ok' : t.live ? 'warn' : 'err')}, t.live + '/' + t.bench));
+    mb.title = t.live + ' of the ' + t.bench + ' bench models on it are free to call';
+    mb.addEventListener('click', function () { qModels(t); });
+    foot.appendChild(mb);
+    node.appendChild(foot);
+    return node;
+  }
+  function qAct(which, id, node) {
+    var msg = node.querySelector('.q-msg');
+    msg.className = 'q-msg muted'; msg.textContent = which === 'check' ? 'Asking…' : 'Refreshing…';
+    return post('/api/quota/' + which, {tag: id}).then(function (r) {
+      if (!r.ok) { msg.className = 'q-msg errors'; msg.textContent = r.errors.join('; '); return; }
+      var i = QD.tiles.findIndex(function (t) { return t.id === id; });
+      if (r.tile && i >= 0) {
+        QD.tiles[i] = r.tile;
+        var fresh = qTile(r.tile);
+        node.replaceWith(fresh);
+        if (r.note) { var m = fresh.querySelector('.q-msg'); m.className = 'q-msg muted'; m.textContent = r.note; }
+      }
+      drawCharts();
+    }).catch(function (e) { msg.className = 'q-msg errors'; msg.textContent = String(e); });
+  }
+  function qModels(t) {
+    $('q-models-h').textContent = t.name + ': ' + t.bench + ' on the bench';
+    $('q-models-sub').textContent = t.live + ' free to call now · the last 24 hours of calls';
+    var list = $('q-models-list'); list.textContent = '';
+    var tb = el('table'), hd = el('tr');
+    ['Model', 'Now', 'Last 24 h', 'Last answered', 'Known limit'].forEach(function (h) { hd.appendChild(el('th', {}, h)); });
+    tb.appendChild(el('thead')).appendChild(hd);
+    var body = tb.appendChild(el('tbody'));
+    t.models.forEach(function (m) {
+      var tr = el('tr');
+      tr.appendChild(el('td', {class: 'mono'}, m.alias));
+      var now = el('td'); now.appendChild(el('span', {class: 'chip ' + (qResting(m) ? 'warn' : 'ok')}, qResting(m) ? 'resting · ' + qWhen(m.until) : 'ready'));
+      tr.appendChild(now);
+      tr.appendChild(el('td', {}, m.ok + ' ok · ' + m.failed + ' failed'));
+      tr.appendChild(el('td', {}, m.last_ok ? qAgo(m.last_ok) : '—'));
+      tr.appendChild(el('td', {}, m.limit || '—'));
+      body.appendChild(tr);
+    });
+    list.appendChild(tb);
+    $('q-models').showModal();
+  }
+  function qDefault(a, b) {
+    return (b.out - a.out) || ((a.next_reset || '9999') < (b.next_reset || '9999') ? -1 : (a.next_reset || '9999') > (b.next_reset || '9999') ? 1 : 0)
+           || (a.id < b.id ? -1 : 1);
+  }
+  function qDraw() {
+    qBox.textContent = '';
+    QD.tiles.forEach(function (t) { qBox.appendChild(qTile(t)); });
+    if (!QD.tiles.length) qBox.appendChild(el('p', {class: 'muted'}, 'No model on the bench yet.'));
+  }
+  function qSaveOrder() {
+    var ids = Array.prototype.map.call(qBox.querySelectorAll('.q-tile'), function (n) { return n.dataset.id; });
+    var at = {}; ids.forEach(function (id, i) { at[id] = i; });
+    QD.tiles.sort(function (a, b) { return at[a.id] - at[b.id]; });
+    post('/api/quota/order', {order: ids}).then(function (r) {
+      $('q-done').textContent = r.ok ? 'Order kept.' : ''; $('q-errors').textContent = r.ok ? '' : r.errors.join('; ');
+    });
+  }
+  if (QD && qBox) {
+    qDraw();
+    $('q-models-close').addEventListener('click', function () { $('q-models').close(); });
+    var dragged = null;
+    qBox.addEventListener('dragstart', function (e) {
+      dragged = e.target.closest && e.target.closest('.q-tile');
+      if (!dragged) return;
+      dragged.classList.add('dragging');
+      e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', dragged.dataset.id);
+    });
+    qBox.addEventListener('dragover', function (e) {
+      if (!dragged) return;
+      e.preventDefault();
+      var over = e.target.closest && e.target.closest('.q-tile');
+      if (!over || over === dragged) return;
+      var r = over.getBoundingClientRect();
+      var after = e.clientX > r.left + r.width / 2;
+      over.parentNode.insertBefore(dragged, after ? over.nextSibling : over);
+    });
+    qBox.addEventListener('dragend', function () {
+      if (!dragged) return;
+      dragged.classList.remove('dragging'); dragged = null; qSaveOrder();
+    });
+    qBox.addEventListener('keydown', function (e) {
+      var t = e.target;
+      if (!t.classList || !t.classList.contains('q-tile')) return;
+      var back = e.key === 'ArrowLeft' || e.key === 'ArrowUp', fwd = e.key === 'ArrowRight' || e.key === 'ArrowDown';
+      if (!back && !fwd) return;
+      e.preventDefault();
+      var sib = back ? t.previousElementSibling : t.nextElementSibling;
+      if (!sib) return;
+      qBox.insertBefore(t, back ? sib : sib.nextSibling);
+      t.focus(); qSaveOrder();
+    });
+    $('q-reorder').addEventListener('click', function () {
+      QD.tiles.sort(qDefault); qDraw();
+      post('/api/quota/order', {order: []}).then(function (r) { $('q-done').textContent = r.ok ? 'Sorted: out first, then the soonest reset.' : ''; });
+    });
+    $('q-all').addEventListener('click', function () {
+      var live = QD.tiles.filter(function (t) { return t.refresh === 'live'; });
+      $('q-done').textContent = 'Refreshing ' + live.length + '…';
+      live.reduce(function (p, t) {
+        return p.then(function () {
+          var node = qBox.querySelector('.q-tile[data-id="' + CSS.escape(t.id) + '"]');
+          return node ? qAct('refresh', t.id, node) : null;
+        });
+      }, Promise.resolve()).then(function () { $('q-done').textContent = 'Refreshed ' + live.length + '.'; });
+    });
+  }
+
+  // The Quota page's two charts, in the theme's colours like the Benchmarks ones.
+  function drawQuotaCharts(tok, style, width) {
+    if (!QD) return;
+    if (!window.Plot) {
+      ['chart-sent', 'chart-resets'].forEach(function (id) {
+        if ($(id)) $(id).textContent = 'Charts need Observable Plot from cdn.jsdelivr.net, which did not load.';
+      });
+      return;
+    }
+    var ink = tok('--ink', '#24331f'), good = tok('--ok', '#327a16'), warn = tok('--warn', '#7a4d00'), line = tok('--line', '#e4dfd2');
+    var sent = $('chart-sent');
+    if (sent) {
+      var R = QD.sent.slice().sort(function (a, b) { return b.month - a.month; });
+      sent.textContent = '';
+      var lg = el('div', {class: 'q-legend'});
+      [['This month, requests', 0.3], ['Last 24 hours, requests', 1]].forEach(function (k) {
+        var s = el('span'), sw = el('i'); sw.style.background = good; sw.style.opacity = k[1];
+        s.appendChild(sw); s.appendChild(document.createTextNode(k[0])); lg.appendChild(s);
+      });
+      sent.appendChild(lg);
+      sent.appendChild(R.length ? Plot.plot({
+        width: width(), height: 22 * R.length + 60, style: style, marginLeft: 120, marginRight: 90,
+        x: {label: 'Requests →', grid: true}, y: {domain: R.map(function (r) { return r.provider; }), label: null},
+        marks: [
+          Plot.barX(R, {x: 'month', y: 'provider', fill: good, fillOpacity: 0.3,
+            title: function (r) { return r.provider + '\nthis month: ' + qNum(r.month) + '\nlast 24 hours: ' + qNum(r.day); }}),
+          Plot.barX(R, {x: 'day', y: 'provider', fill: good, insetTop: 4, insetBottom: 4}),
+          Plot.text(R, {x: 'month', y: 'provider', text: function (r) { return qNum(r.day) + ' / ' + qNum(r.month); }, dx: 6, textAnchor: 'start', fill: ink}),
+          Plot.ruleX([0], {stroke: ink})
+        ]}) : el('p', {class: 'hint'}, 'No call in the ledger this month.'));
+    }
+    var res = $('chart-resets');
+    if (res) {
+      var now = Date.now(), end = now + 7 * 86400e3, dots = [], bars = [];
+      QD.tiles.forEach(function (t) {
+        var wins = [];
+        t.groups.forEach(function (g) { g.windows.forEach(function (w) { wins.push({label: (g.label ? g.label + ' · ' : '') + w.label, at: w.reset_at}); }); });
+        t.pool.forEach(function (p) { if (p.reset_at) wins.push({label: p.label, at: p.reset_at, daily: true}); });
+        wins.forEach(function (w) {
+          var at = +new Date(w.at), daily = w.daily || / day$/.test(w.label);
+          for (; at && at <= end; at += 86400e3) {
+            if (at >= now) dots.push({tile: t.name, at: new Date(at), what: w.label});
+            if (!daily) break;
+          }
+        });
+        t.models.filter(qResting).forEach(function (m) {
+          bars.push({tile: t.name, x1: new Date(now), x2: new Date(Math.min(+new Date(m.until), end)), what: m.alias + ' resting until ' + new Date(m.until).toLocaleString()});
+        });
+      });
+      var names = QD.tiles.map(function (t) { return t.name; }).filter(function (n) {
+        return dots.some(function (d) { return d.tile === n; }) || bars.some(function (b) { return b.tile === n; });
+      });
+      res.textContent = '';
+      res.appendChild(names.length ? Plot.plot({
+        width: width(), height: 26 * names.length + 60, style: style, marginLeft: 120,
+        x: {domain: [new Date(now), new Date(end)], label: null, grid: true}, y: {domain: names, label: null},
+        marks: [
+          Plot.barX(bars, {x1: 'x1', x2: 'x2', y: 'tile', fill: warn, fillOpacity: 0.35, insetTop: 6, insetBottom: 6, title: 'what'}),
+          Plot.dot(dots, {x: 'at', y: 'tile', r: 4, fill: good, stroke: ink, strokeWidth: 0.5,
+            title: function (d) { return d.what + ' resets ' + d.at.toLocaleString(); }}),
+          Plot.ruleX([new Date(now)], {stroke: tok('--err', '#a12b2b'), strokeWidth: 1.5}),
+          Plot.ruleY(names, {stroke: line, strokeOpacity: 0.5})
+        ]}) : el('p', {class: 'hint'}, 'No reset or rest known for the next 7 days.'));
+    }
+  }
+
   // ---- Benchmarks charts: Observable Plot, data from serve.charts_data ------
   // A function, not run once: a theme switched on Settings redraws them in its colours.
   function drawCharts() {
@@ -1566,6 +1982,7 @@
       var col = document.querySelector('.panes') || document.querySelector('main');
       return Math.max(520, (col.clientWidth || 900) - 50);
     }
+    drawQuotaCharts(tok, style, width);
     function put(id, make) {
       var box = $(id);
       if (!box) return;