@opennodes/registry 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opennodes/registry",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "OpenNodes (ONP) reference registry: node registration with proof-of-resource qualification (Stage A/B/C), transparent ranking, enforceable estimates, catalog importers (OpenRouter, Hugging Face, models.dev, Ollama), MCP surface, and the web app (catalog, chat, advisor, Node Builder)",
   "license": "Apache-2.0",
   "type": "module",

package/src/web/index.html

@@ -47,6 +47,19 @@
   .mitem .t .nm { font-weight: 600; font-size: 0.86rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .mitem .b { display: flex; gap: 0.8rem; margin-top: 0.25rem; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
   .mdetail { min-height: 30rem; }
+  .scorebox { margin: 0.4rem 0 0.8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 0.5rem 0.75rem; font-size: 0.8rem; }
+  .scorebox summary { cursor: pointer; }
+  .scorebox table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
+  .scorebox td { padding: 0.2rem 0.5rem 0.2rem 0; border-top: 1px solid var(--line-2); vertical-align: top; }
+  .scorebox td.num { text-align: right; white-space: nowrap; }
+  .scorebox td.sub { font-size: 0.74rem; }
+  .scorebox tr.tot td { border-top: 1px solid var(--line); }
+  .pager { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); flex-wrap: wrap; }
+  .pager:empty { display: none; }
+  .pgbtn { font: inherit; min-width: 2rem; padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--accent); cursor: pointer; }
+  .pgbtn:disabled { color: var(--faint); cursor: default; }
+  .pgnum { padding: 0 0.3rem; }
+  .pgnum input { width: 4rem; font: inherit; padding: 0.2rem 0.3rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); text-align: center; }
 
   /* chat */
   .chatgrid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.2rem; align-items: start; }
@@ -244,7 +257,7 @@
     <div id="adv-out"></div>
   </details>
   <div class="mgrid">
-    <div class="mlist" id="m-list"></div>
+    <div class="mcol"><div class="mlist" id="m-list"></div><div class="pager" id="m-pager"></div></div>
     <div class="mdetail" id="m-detail"><p class="sub">Select a model from the list.</p></div>
   </div>
 </div>
@@ -261,6 +274,7 @@
   </div>
   <p class="desc" id="md-desc" hidden></p>
   <div class="statstrip" id="md-stats"></div>
+  <div id="md-score"></div>
   <div class="secnav" id="md-nav"></div>
   <h2 id="sec-offerings">Offerings <span class="counts" id="md-count"></span></h2>
   <div class="panel tablewrap" id="md-offerings"></div>
@@ -607,34 +621,47 @@ function provLine(o) {
 }
 
 const PAGE = 60;
-let listQuery = '', listTotal = 0;
-
-// Count line and the "Show more" button at the end of the list.
-function updateListFooter() {
-  $('#m-more')?.remove();
-  const shown = lastResults.length;
-  $('#m-counts').textContent = fmtInt(listTotal) + ' offerings' + (shown < listTotal ? ` · showing 1–${fmtInt(shown)}` : '');
-  if (shown < listTotal) {
-    $('#m-list').insertAdjacentHTML('beforeend', `<button class="btn" id="m-more" style="background:var(--panel); color:var(--accent); align-self:stretch">Show ${fmtInt(Math.min(PAGE, listTotal - shown))} more</button>`);
-    $('#m-more').addEventListener('click', loadMore);
-  }
+let listQuery = '', listTotal = 0, listPage = 0;
+
+// Count line and page controls under the list: first / previous / page N of M / next / last.
+function updatePager() {
+  const pages = Math.max(1, Math.ceil(listTotal / PAGE));
+  const from = listTotal ? listPage * PAGE + 1 : 0, to = Math.min(listTotal, (listPage + 1) * PAGE);
+  $('#m-counts').textContent = fmtInt(listTotal) + ' offerings' + (pages > 1 ? ` · ${fmtInt(from)}–${fmtInt(to)}` : '');
+  const pager = $('#m-pager');
+  if (pages <= 1) { pager.innerHTML = ''; return; }
+  const btn = (label, page, title) => `<button class="pgbtn" data-page="${page}" title="${title}"${page < 0 || page >= pages || page === listPage ? ' disabled' : ''}>${label}</button>`;
+  pager.innerHTML = btn('«', 0, 'first page') + btn('‹', listPage - 1, 'previous page')
+    + `<span class="pgnum">Page <input id="m-page" type="number" min="1" max="${pages}" value="${listPage + 1}" aria-label="page number"> of ${fmtInt(pages)}</span>`
+    + btn('›', listPage + 1, 'next page') + btn('»', pages - 1, 'last page');
+  pager.querySelectorAll('.pgbtn').forEach((b) => b.addEventListener('click', () => goToPage(Number(b.dataset.page))));
+  $('#m-page').addEventListener('change', (e) => goToPage(Math.min(pages, Math.max(1, Math.round(Number(e.target.value) || 1))) - 1));
 }
 
-async function loadMore() {
-  const btn = $('#m-more');
-  btn.disabled = true;
+async function goToPage(page) {
   const query = listQuery;
   const p = new URLSearchParams(query);
-  p.set('offset', lastResults.length);
+  p.set('offset', page * PAGE);
+  $('#m-pager').querySelectorAll('button, input').forEach((el) => { el.disabled = true; });
   try {
-    const { offerings } = await api('/v0/offerings?' + p);
+    const { offerings, total } = await api('/v0/offerings?' + p);
     if (query !== listQuery) return;   // the filters changed meanwhile
-    const start = lastResults.length;
-    lastResults = lastResults.concat(offerings);
-    btn.insertAdjacentHTML('beforebegin', offerings.map(renderItem).join(''));
-    [...document.querySelectorAll('#m-list .mitem')].slice(start).forEach((el) => el.addEventListener('click', () => selectModel(el)));
-    updateListFooter();
-  } catch (e) { btn.disabled = false; btn.textContent = 'Retry — ' + e.message; }
+    listPage = page;
+    listTotal = total ?? listTotal;
+    lastResults = offerings;
+    renderList(offerings);
+    $('#m-list').scrollTop = 0;
+    updatePager();
+  } catch (e) { updatePager(); $('#m-pager').insertAdjacentHTML('beforeend', '<span class="err">' + esc(e.message) + '</span>'); }
+}
+
+// Render one page of the list, keeping the highlighted model when it is on this page.
+function renderList(offerings) {
+  $('#m-list').innerHTML = offerings.map(renderItem).join('')
+    || '<p class="sub">No offerings match. A fresh registry fills up via catalog imports and node registrations.</p>';
+  document.querySelectorAll('.mitem').forEach((el) => el.addEventListener('click', () => selectModel(el)));
+  const current = $('#model-card')?.dataset.artifact;
+  document.querySelectorAll('.mitem').forEach((el) => el.classList.toggle('sel', el.dataset.artifact === current));
 }
 
 async function search() {
@@ -652,17 +679,16 @@ async function search() {
     if (listQuery !== p.toString()) return;   // a newer search is under way
     lastResults = offerings;
     listTotal = total ?? offerings.length;
-    $('#m-list').innerHTML = offerings.map(renderItem).join('')
-      || '<p class="sub">No offerings match. A fresh registry fills up via catalog imports and node registrations.</p>';
-    updateListFooter();
-    document.querySelectorAll('.mitem').forEach((el) => el.addEventListener('click', () => selectModel(el)));
+    listPage = 0;
+    renderList(offerings);
+    updatePager();
     // keep the current selection when still listed, else select the first result
     const current = $('#model-card')?.dataset.artifact;
     const keep = current && [...document.querySelectorAll('.mitem')].find((el) => el.dataset.artifact === current);
     const target = keep ?? document.querySelector('.mitem');
     if (target) selectModel(target);
     else $('#m-detail').innerHTML = '<p class="sub">No offerings match.</p>';
-  } catch (e) { $('#m-list').innerHTML = '<p class="err">' + esc(e.message) + '</p>'; }
+  } catch (e) { $('#m-list').innerHTML = '<p class="err">' + esc(e.message) + '</p>'; $('#m-pager').innerHTML = ''; }
 }
 
 /* ---------- advisor (ONP-3 §5b) ---------- */
@@ -708,8 +734,10 @@ function renderAdvice(r) {
   });
 }
 
+let listedOffering = null;   // the list entry the detail was opened from: its score is explained there
 function selectModel(el) {
   document.querySelectorAll('.mitem').forEach((x) => x.classList.toggle('sel', x === el));
+  listedOffering = lastResults.find((o) => `${o.node_id}/${o.offering_id}` === el.dataset.key) ?? null;
   const host = $('#m-detail');
   if (!host.contains($('#model-card'))) { host.innerHTML = ''; host.appendChild($('#model-card')); }
   loadModel(el.dataset.artifact);
@@ -718,7 +746,7 @@ function selectModel(el) {
 let lastResults = [];
 function renderItem(o) {
   const obs = o.observed || {};
-  return `<div class="mitem" data-artifact="${esc(o.model.artifact)}">
+  return `<div class="mitem" data-artifact="${esc(o.model.artifact)}" data-key="${esc(o.node_id + '/' + o.offering_id)}">
     <div class="t">
       <span class="nm">${esc(o.model.name)}</span>
       ${tierChip(o.tier)}
@@ -821,6 +849,35 @@ function renderRow(o, idx) {
 }
 
 /* ---------- model detail ---------- */
+// How the list's ranking score for the selected entry was computed: weight × component per part.
+function renderScore(artifact) {
+  const host = $('#md-score');
+  const o = listedOffering;
+  if (!o?.rank_explanation || o.model.artifact !== artifact) { host.innerHTML = ''; return; }
+  const { weights, components } = o.rank_explanation;
+  const obs = o.observed || {};
+  const why = {
+    price: o.pricing?.input_per_mtok == null ? 'no price published'
+      : `${o.pricing.input_per_mtok === 0 ? 'free' : '$' + fmt(o.pricing.input_per_mtok) + '/MTok in'} — position among the listed results (cheapest 1.00, dearest 0.00)`,
+    tier: {
+      verified: 'verified: passed identity, context and capacity checks',
+      community: 'community: passed the registration checks',
+      attested: 'attested by a third party',
+    }[o.tier] ?? (o.source === 'import' ? 'unverified: imported from a public catalog, not checked by this registry' : 'unverified: not checked yet'),
+    probe_success: obs.probes > 0 ? `${Math.round((obs.probe_success ?? 0) * obs.probes)} of the last ${obs.probes} checks passed` : 'no checks yet',
+  };
+  const label = { price: 'Price', tier: 'Trust tier', probe_success: 'Check pass rate' };
+  const rows = Object.keys(weights).map((k) => `<tr>
+      <td>${label[k] ?? esc(k)}</td>
+      <td class="num mono">${fmt(components[k] ?? 0)} × ${fmt(weights[k])}</td>
+      <td class="num mono"><b>${fmt((components[k] ?? 0) * weights[k])}</b></td>
+      <td class="sub">${esc(why[k] ?? '')}</td></tr>`).join('');
+  host.innerHTML = `<details class="scorebox" open>
+    <summary>Ranking score <b class="mono">${fmt(o.rank)}</b> <span class="sub">for ${esc(o.node_id)} in the current list</span></summary>
+    <table>${rows}<tr class="tot"><td>Total</td><td></td><td class="num mono"><b>${fmt(o.rank)}</b></td><td class="sub">weighted sum; measured values, never paid placement</td></tr></table>
+  </details>`;
+}
+
 async function loadModel(artifact) {
   $('#model-card').dataset.artifact = artifact;
   $('#md-crumb').innerHTML = '<a href="#/">Models</a> / ' + esc(artifact);
@@ -874,6 +931,8 @@ async function loadModel(artifact) {
       first.modalities ? stat(esc((first.modalities.input || []).join('+')) + ' → ' + esc((first.modalities.output || []).join('+')), 'MODALITIES') : '',
     ].filter(Boolean).join('');
 
+    renderScore(artifact);
+
     // section nav (anchors appear only for sections that render)
     const navBits = [['#sec-offerings', 'OFFERINGS'], ['#sec-play', 'PLAYGROUND']];