@wendellresearch-ai/benchwarmers 0.5.0 → 0.5.1

package/serve.py

@@ -686,6 +686,17 @@ def remove_model(alias: str, reason: str = "", who: str = "ui") -> dict:
     return {"ok": True, "errors": [], "changed": changed, "sync": _sync_cli()}
 
 
+def dismiss_alert(key: str) -> dict:
+    """Got it on a notice (an alert raised with dismiss=True, such as NVIDIA
+    changing its stated limits). A state that is still wrong is not dismissed:
+    its check clears it when it is put right."""
+    import alerts as _alerts
+    if not (_alerts.active().get(key) or {}).get("dismiss"):
+        return {"ok": False, "errors": [f"{key!r} is not a notice that can be dismissed"]}
+    _alerts.clear(key)
+    return {"ok": True, "errors": []}
+
+
 def retry_model(alias: str, who: str = "ui") -> dict:
     """One fresh call to a model on a retiring alert. An answer is written to
     perf/history.csv as evidence (scripts/auto_retire.py reads it, so the
@@ -2038,6 +2049,8 @@ def problems() -> str:
             acts.append(f"<button class='btn small' data-act='open' data-alias='{esc(alias)}'>Open</button>")
             acts.append(f"<button class='btn small danger' data-act='retire' data-alias='{esc(alias)}'"
                         f" data-why='{esc(a.get('message', ''))}'>Retire now</button>")
+        if a.get("dismiss"):                           # a notice, not a state: it goes once seen
+            acts.append(f"<button class='btn small' data-act='dismiss' data-key='{esc(key)}'>Got it</button>")
         items.append((key, a.get("kind", "?"), KIND.get(a.get("kind"), "warn"),
                       a.get("message", ""), why, "".join(acts)))
     cutoff = (today - datetime.timedelta(days=7)).isoformat()
@@ -3170,8 +3183,10 @@ def collections_tab() -> str:
         # The panel as it will sit, drawn as the Collections list draws it
         # (bench.js recount): a seat per ticked member, explorer seats dashed.
         "<div id='c-seats' class='seats' aria-live='polite'></div>"
-        "<input type='search' id='c-member-filter' class='member-filter' spellcheck='false' autocomplete='off'"
-        " placeholder='Filter by model, provider or served name' aria-controls='c-members' aria-describedby='c-count'>"
+        "<div class='member-find'><input type='search' id='c-member-filter' class='member-filter' spellcheck='false'"
+        " autocomplete='off' placeholder='Filter by model, provider or served name' aria-controls='c-members'"
+        " aria-describedby='c-count'><select id='c-member-provider' aria-label='Provider' aria-controls='c-members'>"
+        "<option value=''>Every provider</option></select></div>"
         "<div id='c-members' class='members' role='group' aria-label='Members'></div>"
         "<p class='rules' id='c-count'></p>"
         "<label class='field' for='c-shape'>Explorer shape</label><select id='c-shape'></select>"
@@ -3745,15 +3760,21 @@ def quota_tiles() -> list[dict]:
 
 
 def quota_op(which: str, tag) -> dict:
-    """Refresh or Check now on one tile: {ok, errors, note, tile}; "order"
-    saves the tiles' order (a list of tags, empty for the default sort)."""
+    """Refresh on one tile, which picks a free read, one short call or the
+    records (quotaview.refresh): {ok, errors, note, tile}; "order" saves the
+    tiles' order (a list of tags, empty for the default sort)."""
     import quotaview
     if which == "order":
         return quotaview.save_order(tag)
     if tag not in {t["id"] for t in quota_tiles()}:
         return {"ok": False, "errors": [f"no tile called {tag!r}"]}
+    if which == "about":                               # the Models popup: how it is reached
+        try:
+            return {"ok": True, "errors": [], **quotaview.about(tag)}
+        except (ValueError, OSError) as exc:
+            return {"ok": False, "errors": [str(exc)]}
     try:
-        r = (quotaview.refresh if which == "refresh" else quotaview.check)(tag)
+        r = quotaview.refresh(tag)
     except (ValueError, OSError) as exc:              # OSError: URLError and timeouts
         return {"ok": False, "errors": [str(exc)]}
     if not r.get("ok"):
@@ -3764,8 +3785,8 @@ def quota_op(which: str, tag) -> dict:
 
 def quotas_page() -> str:
     """A tile per provider: what is left and when it resets, shaped by how the
-    provider limits (metrics/quotaview.py), who is resting, Refresh and Check
-    now; the resets of the next week; what the bench sent (its usage ledger,
+    provider limits (metrics/quotaview.py), who is resting, one Refresh; the
+    resets of the next week; what the bench sent (its usage ledger,
     metrics/ledger.py); every limit known. bench.js draws tiles and charts."""
     import learn
     import ledger
@@ -3808,9 +3829,10 @@ def quotas_page() -> str:
                 " Retries count. Calls through the llm CLI are not in the ledger.</p>")
     return (
         "<div class='panel'><h2>Quota</h2><p class='sub'>What is left with each provider and when it"
-        " resets, and who is resting after a rate limit. CLI Proxy API's credentials and OpenRouter are"
-        " read live by Refresh, which spends nothing; every other tile is what the provider last said"
-        " in its replies to the bench, and Check now, where it is offered, asks with one request."
+        " resets, and who is resting after a rate limit. Refresh asks the provider for free where it can"
+        " (CLI Proxy API's credentials, OpenRouter); where a provider states its limits only in its replies,"
+        " it sends one 16-token request to read them; elsewhere it reads the bench's own records again."
+        " Hover a Refresh to see which it will do."
         " Drag a tile, or move it with the arrow keys, to keep it where you want it.</p>"
         "<div class='list-actions'><button class='btn' id='q-all'>Refresh all live</button>"
         "<button class='btn' id='q-reorder'>Sort: out first, then soonest reset</button>"
@@ -3832,6 +3854,7 @@ def quotas_page() -> str:
            else "<p class='muted'>None known yet.</p>")
         + "</details>"
         "<dialog id='q-models' aria-labelledby='q-models-h'><h3 id='q-models-h'></h3>"
+        "<div class='sub q-reach' id='q-models-about'></div>"
         "<p class='sub' id='q-models-sub'></p><div class='scroll' id='q-models-list'></div>"
         "<div class='list-actions'><button class='btn' id='q-models-close'>Close</button></div></dialog>"
         f"<script type='application/json' id='quota-data'>{data}</script>")
@@ -4347,7 +4370,8 @@ class Handler(gateway.Handler):
                "/api/gateway-key/remove": lambda p: revoke_gateway_key(str(p.get("name") or "")),
                "/api/theme": lambda p: save_theme(str(p.get("theme") or "")),
                "/api/quota/refresh": lambda p: quota_op("refresh", str(p.get("tag") or "")),
-               "/api/quota/check": lambda p: quota_op("check", str(p.get("tag") or "")),
+               "/api/quota/about": lambda p: quota_op("about", str(p.get("tag") or "")),
+               "/api/alerts/dismiss": lambda p: dismiss_alert(str(p.get("key") or "")),
                "/api/quota/order": lambda p: quota_op("order", p.get("order")),
                "/api/restart": lambda p: restart(p.get("force") is True)}
         # SAME ORIGIN ONLY. Any page open in the browser can POST a plain form

package/ui/bench.css

@@ -299,6 +299,12 @@ dialog h2 { margin: 0 0 .2rem; font-size: 1.375rem; font-weight: 700; }
 #c-form .seats { min-height: 2rem; }
 #c-form .seat .k.after { margin: 0 0 0 .4rem; }
 :is(dialog, .form-panel) input.member-filter { font-size: .9375rem; padding: .4rem .6rem; margin-bottom: .2rem; }
+#c-form .member-find { display: flex; gap: .5rem; }
+#c-form .member-find input { flex: 1; min-width: 0; }
+#c-form .member-find select { flex: none; width: auto; max-width: 45%; margin-bottom: .2rem; }
+#c-form .seat .seat-x { border: 0; background: none; padding: 0 0 0 .45rem; font: inherit; font-size: 1rem; line-height: 1;
+                        color: var(--muted); cursor: pointer; }
+#c-form .seat .seat-x:hover, #c-form .seat .seat-x:focus-visible { color: var(--err); }
 :is(dialog, .form-panel) .members input:disabled + span { color: var(--muted); }
 /* Ruled out by the collection's tags (bench.js applyTags): greyed; a ticked
    one stays tickable and is marked, so it can be taken off. */
@@ -400,21 +406,35 @@ pre.log.answer { max-height: 40vh; }
 /* Quota: a tile per provider, as many columns as fit; a group of windows (a
    5-hour and a weekly limit of one model group) boxed together; a meter of
    ten segments filled like a bar. */
-.q-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; align-items: start; margin-top: .75rem; }
-.q-tile { display: flex; flex-direction: column; gap: .45rem; padding: .75rem .85rem; background: var(--panel);
+/* Tiles in a row share a height, so every footer sits on one line; nothing in
+   a tile is wider than it: names shorten, values never wrap. */
+.q-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; align-items: stretch; margin-top: .75rem; }
+.q-tile { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .85rem; background: var(--panel); min-width: 0;
           border: 1px solid var(--line); border-radius: var(--radius); cursor: grab; }
 .q-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
 .q-tile.out { border-color: var(--err); }
 .q-tile.dragging { opacity: .45; }
-.q-tile .q-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
-.q-tile .nm { font-size: 1.0625rem; }
-.q-tag, .q-small { font-size: .8125rem; color: var(--muted); }
-.q-group { border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .55rem .55rem; display: flex; flex-direction: column; gap: .3rem; }
+.q-tile .q-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; }
+.q-tile .nm { font-size: 1.0625rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.q-tile .q-head .chip { flex: none; white-space: nowrap; font-size: .75rem; }
+.q-about { display: flex; flex-direction: column; gap: .1rem; margin-top: -.3rem; font-size: .8125rem; color: var(--muted); }
+.q-about .q-from { font-style: italic; }
+.q-small { font-size: .8125rem; color: var(--muted); }
+.q-body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
+.q-group { border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .55rem .55rem; display: flex; flex-direction: column; gap: .45rem; }
 .q-group.bare { border: 0; padding: 0; }
 .q-group h4 { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--muted); }
-.q-line { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; }
+.q-meter { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
+.q-line { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .875rem; min-width: 0; }
 .q-line b { font-weight: 600; }
-.q-line .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.q-line > :first-child { min-width: 0; }
+.q-line > a.model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.q-line .q-val { flex: none; white-space: nowrap; }.segs.none span { background: var(--step-1); opacity: .6; }
+/* Calls: green for what answered, red for what failed, out of every call. */
+.segs.calls span { background: var(--err); }
+.segs.calls i { background: var(--ok); }
+.q-calls { white-space: nowrap; }
+.q-calls .segs { display: inline-flex; width: 5.5rem; margin-right: .5rem; vertical-align: middle; }
 .segs { display: flex; gap: 2px; }
 .segs span { flex: 1; height: .5rem; border-radius: 2px; background: var(--step-1); overflow: hidden; }
 .segs i { display: block; height: 100%; background: var(--ok); }
@@ -424,12 +444,13 @@ pre.log.answer { max-height: 40vh; }
 .warn-t { color: var(--warn); }
 .q-msg { font-size: .8125rem; }
 .q-msg:empty { display: none; }
-.q-tile .q-foot { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; margin-top: auto;
+.q-tile .q-foot { display: flex; gap: .4rem; justify-content: space-between; margin-top: auto;
                  padding-top: .5rem; border-top: 1px solid var(--line); }
 .q-tile .q-foot .chip { margin-left: .2rem; font-size: .75rem; }
 .q-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .875rem; margin: 0 0 .4rem; }
 .q-legend i { display: inline-block; width: .8rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
-#q-models { max-width: min(48rem, 94vw); }
+#q-models { width: min(48rem, 94vw); max-width: none; }
+#q-models td:first-child { white-space: nowrap; }
 
 /* Benchmarks charts (Observable Plot) */
 .chart { margin: .5rem 0 .75rem; overflow-x: auto; }

package/ui/bench.js

@@ -411,6 +411,14 @@
       var act = b.dataset.act, aliases = (b.dataset.aliases || b.dataset.alias || '').split(' ').filter(Boolean);
       var status = b.closest('.problem').querySelector('.why');
       if (act === 'open') { openModel(aliases[0]); return; }
+      if (act === 'dismiss') {               // a notice: gone once seen
+        b.disabled = true;
+        post('/api/alerts/dismiss', {key: b.dataset.key}).then(function (res) {
+          if (!res.ok) { status.textContent = res.errors.join('; '); status.classList.add('err'); b.disabled = false; return; }
+          location.reload();
+        }).catch(function (err) { status.textContent = String(err); b.disabled = false; });
+        return;
+      }
       if (act === 'retry') {                 // no confirm: one call, and only an answer changes anything
         b.disabled = true; b.textContent = 'Asking…';
         post('/api/retry', {alias: aliases[0]}).then(function (res) {
@@ -1330,7 +1338,7 @@
            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'),
-           seats: $('c-seats')};
+           seats: $('c-seats'), prov: $('c-member-provider')};
   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));
@@ -1370,12 +1378,20 @@
       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.
+  // The panel as it will sit, as the Collections list draws it; a member's ×
+  // unticks it, as unticking its chip does.
   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));
+      var x = el('button', {type: 'button', class: 'seat-x', 'aria-label': 'Remove ' + a + ' from the collection',
+                            title: 'Remove from the collection'}, '×');
+      x.addEventListener('click', function () {
+        var box = c.members.querySelector('input[value="' + CSS.escape(a) + '"]');
+        if (box) { box.checked = false; applyTags(); }
+      });
+      seat.appendChild(x);
       c.seats.appendChild(seat);
     });
     for (var i = 0; i < ex; i++) {
@@ -1425,18 +1441,20 @@
     filterMembers();
   }
   // The member search: the filter boxes' match (any text, case-insensitive),
-  // 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.
+  // over the model's name and each chip's alias, served name and provider,
+  // and the provider select beside it. 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();
+    var q = c.find.value.trim().toLowerCase(), prov = c.prov.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) {
         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);
+        lab.hidden = !box.checked && (!!lab.dataset.paid || !named && text.indexOf(q) === -1
+                                      || !!prov && (fact(box.value).provider || '') !== prov);
         any = any || !lab.hidden;
       });
       row.hidden = !any;
@@ -1444,6 +1462,7 @@
     recount();
   }
   c.find.addEventListener('input', filterMembers);
+  c.prov.addEventListener('change', filterMembers);
   // Escape in a box with text clears it; only an empty box lets Escape close the popup.
   c.find.addEventListener('keydown', function (e) {
     if (e.key === 'Escape' && c.find.value) { e.preventDefault(); e.stopPropagation(); c.find.value = ''; filterMembers(); }
@@ -1487,6 +1506,9 @@
     c.desc.value = row ? row.description : ''; c.tags.value = row ? row.tags.join(', ') : '';
     drawTagPicks();
     c.members.textContent = ''; c.find.value = '';
+    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.
@@ -1698,91 +1720,135 @@
     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'});
+  function qTone(pct) { return pct == null ? 'none' : pct >= 70 ? 'ok' : pct >= 25 ? 'warn' : 'err'; }
+  // `pct` null draws the ten segments empty: nothing to count yet. Calls
+  // ("answered") fill green over red, the failed share showing as red.
+  function qSegs(pct, what) {
+    var tone = pct != null && what === 'answered' ? 'calls' : qTone(pct);
+    var box = el('div', {class: 'segs ' + tone, role: 'img',
+                         'aria-label': pct == null ? 'nothing yet' : pct + '% ' + (what || '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) + '%';
+      f.style.width = Math.round(Math.min(Math.max((pct || 0) / 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 qAlias(a) {                                 // as serve.named draws a model: its popup on a click
+    var link = el('a', {href: '#', class: 'model', 'data-alias': a, draggable: 'false', title: a});
+    link.appendChild(el('span', {class: 'alias mono'}, a));
+    return link;
+  }
+  // 189, 19,997, 494k, 12.5M: whole below 100,000, then short.
+  function qShort(n) {
+    n = Number(n);
+    if (n < 1e5) return Math.round(n * 100) / 100 >= 1000 ? Math.round(n).toLocaleString() : String(Math.round(n * 100) / 100);
+    if (n < 1e6) return Math.round(n / 1e3) + 'k';
+    return String(n >= 1e8 ? Math.round(n / 1e6) : Math.round(n / 1e5) / 10).replace(/\.0$/, '') + 'M';
+  }
+  // Every figure on a tile is one meter: what is left of what, in the
+  // provider's own unit, on the left (it may wrap); when it resets on the
+  // right (it never does); the segments under it.
+  function qMeter(label, value, pct, what, title) {
+    var box = el('div', {class: 'q-meter'}), row = el('div', {class: 'q-line'});
+    var l = typeof label === 'string' ? el('span', {class: 'q-label'}) : label;
+    if (typeof label === 'string') l.innerHTML = label;
+    row.appendChild(l);
+    var v = el('span', {class: 'q-val'}); v.innerHTML = value; row.appendChild(v);
+    if (title) box.title = title;
+    box.appendChild(row); box.appendChild(qSegs(pct, what));
+    return box;
+  }
+  function qReset(iso) {
+    return iso ? '<span title="Resets ' + new Date(iso).toLocaleString() + '">' + qWhen(iso) + '</span>' : '';
+  }
   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;
+    var raw = w.of != null && w.remaining != null;
+    // The percentage leads every meter, raw or not, so they line up.
+    return qMeter('<b>' + w.left + '%</b> left · ' + (raw ? '<b>' + qShort(w.remaining) + '</b> of '
+                  + qShort(w.of) + ' ' + w.label : w.label),
+                  qReset(w.reset_at), w.left, 'left',
+                  (raw ? qNum(w.remaining) + ' of ' + qNum(w.of) + ' left, ' : '') + w.left + '%');
+  }
+  // How much of a last day answered: a model's (its link), or `label`'s.
+  function qCalls(m, label) {
+    var n = m.ok + m.failed, pct = n ? Math.round(100 * m.ok / n) : null;
+    var value = qResting(m) ? '<span class="warn-t">resting · ' + qWhen(m.until) + '</span>'
+              : n ? '<b>' + m.ok + '</b> of ' + n + ' answered' : '<span class="muted">no calls</span>';
+    return qMeter(label || qAlias(m.alias), value, pct, 'answered',
+                  n ? m.ok + ' answered, ' + m.failed + ' failed in the last 24 hours' : 'not called in the last 24 hours');
   }
   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'));
+    head.appendChild(el('b', {class: 'nm', title: t.name}, t.name));
+    var f = t.fresh, how = {live: 'read ', seen: 'seen ', answered: 'answered '}[f.how] || '';
+    head.appendChild(el('span', {class: 'chip ' + (f.how === 'live' ? 'ok' : 'via'),
+      title: {live: 'Last asked of the provider', seen: 'Last stated in a reply\'s headers',
+              answered: 'Last answer from one of its models'}[f.how] || 'Nothing known yet'},
+      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 : '')));
+    // Every word about the figures in one place, under the name: where they
+    // come from, its plan, your per-minute caps, what a live read said. The
+    // connection's own name and address are in Models.
+    var about = el('div', {class: 'q-about'});
+    var src = t.source || [];
+    about.appendChild(el('div', {class: 'q-from'}, (src.length && src[0] !== 'nothing stated'
+      ? 'From ' + src.join('; ') : 'No limit stated') + (t.plan ? ' · ' + t.plan + ' plan' : '')));
+    if (t.conn_limit) about.appendChild(el('div', {}, 'Your cap: ' + t.conn_limit + '.'));
+    (t.notes || []).forEach(function (n) { about.appendChild(el('div', {}, n)); });
+    node.appendChild(about);
+    var body = el('div', {class: 'q-body'});
+    // Day and month caps, counted by the bench: yours, else what the provider
+    // documents. The From line names the source; the title says the rest.
+    (t.caps || []).forEach(function (g) {
+      var box = el('section', {class: 'q-group bare', title: g.title || ''});
+      g.windows.forEach(function (w) { box.appendChild(qWindow(w)); });
+      body.appendChild(box);
+    });
     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);
+        body.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);
+        body.appendChild(p.of
+          ? qMeter('<b>' + p.left + '%</b> left · <b>' + qShort(Math.max(0, p.of - p.used)) + '</b> of '
+                   + qShort(p.of) + ' ' + p.label,
+                   qReset(p.reset_at), p.left, 'left')
+          : qMeter('<b>' + qShort(p.used) + '</b> ' + p.label + ' · limit not known', qReset(p.reset_at), null));
       });
-      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'));
+    } else if (!(t.caps || []).length) {
+      // Nothing stated to count against: how the provider's calls went, all
+      // its models together (each one's are in Models).
+      var all = t.models.reduce(function (s, m) { return {ok: s.ok + m.ok, failed: s.failed + m.failed}; }, {ok: 0, failed: 0});
+      body.appendChild(qCalls({alias: '', ok: all.ok, failed: all.failed, until: null}, 'Calls, last 24 hours'));
     }
     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)));
+        var r = el('div', {class: 'q-rest'});
+        r.appendChild(qAlias(m.alias)); r.appendChild(document.createTextNode(' resting · back ' + qWhen(m.until)));
+        body.appendChild(r);
       });
     }
-    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)); });
+    node.appendChild(body);
     var msg = el('div', {class: 'q-msg', 'aria-live': 'polite'});
     node.appendChild(msg);
+    // One Refresh: the server picks a free read, one short call or the records.
     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)'});
+      title: {live: 'Asks the provider what is left (free)',
+              check: 'Sends one 16-token request; the reply\'s headers say what is left'}[t.refresh]
+             || 'Reads the bench\'s own records again (this provider states no limits to ask about)'});
     rb.innerHTML = '&#x21bb; Refresh';
-    rb.addEventListener('click', function () { qAct('refresh', t.id, node); });
+    rb.addEventListener('click', function () { qAct(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';
@@ -1791,10 +1857,10 @@
     node.appendChild(foot);
     return node;
   }
-  function qAct(which, id, node) {
+  function qAct(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) {
+    msg.className = 'q-msg muted'; msg.textContent = 'Refreshing…';
+    return post('/api/quota/refresh', {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) {
@@ -1809,17 +1875,37 @@
   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';
+    // How it is reached, asked when the popup opens (it reads Open WebUI's connections).
+    var reach = $('q-models-about');
+    function reachLine(after) {
+      reach.textContent = '';
+      var line = el('div'); line.appendChild(el('span', {class: 'mono'}, t.tag));
+      if (after) line.appendChild(document.createTextNode(' · ' + after));
+      reach.appendChild(line);
+    }
+    reachLine('finding how it is reached…');
+    post('/api/quota/about', {tag: t.id}).then(function (r) {
+      if (!r.ok) { reachLine(r.errors.join('; ')); return; }
+      reachLine(r.routes.length ? '' : 'no endpoint or Open WebUI connection by this name');
+      r.routes.forEach(function (x) {
+        var d = el('div', {}, 'Through ' + x.via + ': ');
+        d.appendChild(el('code', {}, x.url)); reach.appendChild(d);
+      });
+    }).catch(function (e) { reachLine(String(e)); });
     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 tr = el('tr'), name = el('td');
+      name.appendChild(qAlias(m.alias)); tr.appendChild(name);
       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'));
+      var n = m.ok + m.failed, calls = el('td', {class: 'q-calls', title: m.failed + ' failed'});
+      calls.appendChild(qSegs(n ? Math.round(100 * m.ok / n) : null, 'answered'));
+      calls.appendChild(el('span', {}, n ? m.ok + ' of ' + n + ' answered' : 'no calls'));
+      tr.appendChild(calls);
       tr.appendChild(el('td', {}, m.last_ok ? qAgo(m.last_ok) : '—'));
       tr.appendChild(el('td', {}, m.limit || '—'));
       body.appendChild(tr);
@@ -1888,7 +1974,7 @@
       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;
+          return node ? qAct(t.id, node) : null;
         });
       }, Promise.resolve()).then(function () { $('q-done').textContent = 'Refreshed ' + live.length + '.'; });
     });
@@ -1931,6 +2017,7 @@
       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.caps || []).forEach(function (g) { g.windows.forEach(function (w) { wins.push({label: w.label + ' (' + g.label + ')', at: w.reset_at, daily: / day$/.test(w.label)}); }); });
         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);