@bongos/core 1.19.457 → 1.19.459

package/modules/hall-ui/public/watch.js

@@ -19,6 +19,13 @@
 // "unavailable" message rather than blanking the whole page. Each section
 // loads independently in its own try/catch so one failing endpoint cannot
 // break the others.
+//
+// TASK 1003469 put the page in the chrome world's composition: every list is
+// the kit's .ledger through makeLedger (eight of nine were a page-local table
+// that duplicated it with a hand-rolled th voice), every figure row is the oversight
+// family's .ov-figs, every sub-section is an .ov-group head, the access requests
+// are oversight rows, and the five most recent sessions the page always fetched
+// and threw away are now rendered under the tally.
 
 (() => {
   'use strict';
@@ -35,7 +42,7 @@
   // empty; the 3200ms non-clearing toast). fmtDay / fmtDuration / fmtPct stay local.
   const { escapeHtml, $, num, fmtInt, fmtCompact } = window.OTB;
   // Shared component kit (hall-kit.js, task 2166): tabs, ledger, pager, empty
-  // states — adopted here by task 2173.
+  // states — adopted here by task 2173, and by every list since task 1003469.
   const { makeTabs, makeLedger, makePager, emptyStateHtml } = window.OTBKit;
   const fmtDate = (iso) => window.OTB.fmtDate(iso, { time: true });
   const rankLabel = (rank) => window.OTB.rankLabel(rank, { empty: '' });
@@ -58,6 +65,17 @@
     return `${Math.round(n * 100)}%`;
   }
 
+  // seconds → "1h 31m" / "12m" / "45s". "—" for empty/bad input.
+  function fmtDuration(seconds) {
+    const s = Number(seconds);
+    if (!Number.isFinite(s) || s < 0) return '—';
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    if (h > 0) return `${h}h ${m}m`;
+    if (m > 0) return `${m}m`;
+    return `${Math.round(s)}s`;
+  }
+
   // ---- fetch helper ---------------------------------------------------------
 
   // Fetch JSON. Throws { kind: '401'|'403' } on those statuses so each section
@@ -157,28 +175,55 @@
     });
   }
 
-  // renderTable — the `<div class="watch-table-wrap"><table class="watch">` shell the
-  // panels build by hand. `headers` are <th> inner-HTML strings (static literals —
-  // not escaped here); `rowsHtml` is the pre-built <tbody> content. Returns ONLY the
-  // wrapper+table; trailing content (notes, lifecycle lines, sub-headed sibling
-  // tables, mounted <div>s) stays at the call site — it is not uniform across panels.
-  function renderTable(headers, rowsHtml) {
-    return (
-      '<div class="watch-table-wrap"><table class="watch"><thead><tr>' +
-      headers.map((h) => `<th>${h}</th>`).join('') +
-      '</tr></thead>' +
-      `<tbody>${rowsHtml}</tbody></table></div>`
-    );
+  // delegate — the same dance as ONE listener on the section, for a list that
+  // pages: a row the kit re-renders on a page flip has no listener of its own,
+  // so the section listens once (per selector, guarded) and resolves the button
+  // from the click. `event` is 'click' unless a control says otherwise.
+  function delegate(root, selector, handler, errPrefix, event = 'click') {
+    const key = `wired:${event}:${selector}`;
+    if (root[key]) return;
+    root[key] = true;
+    root.addEventListener(event, async (e) => {
+      const el = e.target.closest(selector);
+      if (!el || !root.contains(el)) return;
+      el.disabled = true;
+      try {
+        await handler(el);
+      } catch (err) {
+        if (err && err.kind === '401') return;
+        el.disabled = false;
+        toast(`${errPrefix}: ${err.message || err}`);
+      }
+    });
+  }
+
+  // ledger — the kit's makeLedger over a fresh mount appended to `target`, so a
+  // section can compose heads and foot lines around the table and still page
+  // through the kit. Every list on this page is a kit ledger since task 1003469;
+  // the ones that can grow carry a pager, whose bar hides itself when the list
+  // fits one page.
+  function ledger(target, { columns, rowHtml, pager = null, emptyMsg = 'Nothing here yet.' }) {
+    const mount = document.createElement('div');
+    target.appendChild(mount);
+    return makeLedger({ mount, columns, rowHtml, pager, emptyMsg });
   }
 
-  // Stat cards from [{ num, label }].
-  function statCards(cards) {
+  // A group head inside a panel (oversight.css .ov-group): a run of rows under a
+  // name in the label voice. Returns the section; append the ledger to it.
+  function group(target, name, n) {
+    const sec = document.createElement('section');
+    sec.className = 'ov-group';
+    sec.innerHTML = `<div class="ov-group__head"><span class="ov-group__name">${escapeHtml(name)}</span>${n === undefined ? '' : `<span class="ov-group__n">${fmtInt(n)}</span>`}</div>`;
+    target.appendChild(sec);
+    return sec;
+  }
+
+  const foot = (html) => `<p class="ov-foot">${html}</p>`;
+
+  // The figure band from [{ num, label }] — the oversight family's .ov-figs.
+  function figs(cards) {
     return cards
-      .map(
-        (c) =>
-          `<div class="watch-stat"><div class="watch-stat__num">${escapeHtml(c.num)}</div>` +
-          `<div class="watch-stat__label">${escapeHtml(c.label)}</div></div>`
-      )
+      .map((c) => `<div class="ov-fig"><span class="ov-fig__l">${escapeHtml(c.label)}</span><span class="ov-fig__v">${escapeHtml(c.num)}</span></div>`)
       .join('');
   }
 
@@ -192,6 +237,9 @@
     return `<span class="badge ${cls}">${escapeHtml(sev || '—')}</span>`;
   }
 
+  const ghost = (attrs, label, danger = false) =>
+    `<button type="button" class="btn-ghost${danger ? ' btn-ghost--danger' : ''}" ${attrs}>${label}</button>`;
+
   // =========================================================================
   // 1. GATE — access requests (pending)
   // =========================================================================
@@ -210,13 +258,13 @@
         ? 'This project is open — anyone who signs in is admitted, so an invite is rarely needed.'
         : 'Admit someone before they ask — once invited, their sign-in gets in.';
     return (
-      '<form class="watch-invite" id="gate-invite" novalidate>' +
-      '<label class="watch-invite__label" for="gate-invite-login">Invite by GitHub username</label>' +
-      '<div class="watch-invite__row">' +
+      '<form class="ov-form" id="gate-invite" novalidate>' +
+      '<div class="ov-field">' +
+      '<label class="ov-field__l" for="gate-invite-login">Invite by GitHub username</label>' +
       '<input type="text" id="gate-invite-login" name="github_login" autocomplete="off" placeholder="e.g. octocat" maxlength="40">' +
-      '<button type="submit" class="watch-btn">Invite</button>' +
       '</div>' +
-      `<p class="watch-invite__why">${escapeHtml(why)}</p>` +
+      '<button type="submit" class="btn-accent">Invite</button>' +
+      `<p class="ov-form__why">${escapeHtml(why)}</p>` +
       '</form>'
     );
   }
@@ -243,6 +291,8 @@
     });
   }
 
+  // One request, one oversight row: who, their note as the sub line, when they
+  // asked as the fact, and the two decisions on the right.
   function renderGate(data, target) {
     const requests = Array.isArray(data.requests) ? data.requests : [];
     setAttention('att-access', requests.length); // tile count = table content
@@ -251,29 +301,27 @@
       wireInviteForm(target);
       return;
     }
-    target.innerHTML = inviteFormHtml() + requests
+    target.innerHTML = inviteFormHtml() + '<ul class="ov-rows">' + requests
       .map((r) => {
         const who = r.display_name
-          ? `${escapeHtml(r.display_name)} <span class="watch-mono">@${escapeHtml(r.github_login)}</span>`
-          : `<span class="watch-mono">@${escapeHtml(r.github_login)}</span>`;
-        const note = r.note
-          ? `<div class="watch-req__note">“${escapeHtml(r.note)}”</div>`
-          : '';
+          ? `${escapeHtml(r.display_name)}<span class="ov-mono">@${escapeHtml(r.github_login)}</span>`
+          : `<span class="ov-mono">@${escapeHtml(r.github_login)}</span>`;
+        const note = r.note ? `<p class="ov-row__sub">“${escapeHtml(r.note)}”</p>` : '';
         return (
-          `<div class="watch-req" data-req-id="${escapeHtml(r.id)}">` +
-          '<div>' +
-          `<div class="watch-req__who">${who}</div>` +
-          `<div class="watch-req__meta">Asked ${escapeHtml(fmtDate(r.created_at))}</div>` +
+          `<li class="ov-row" data-req-id="${escapeHtml(r.id)}">` +
+          '<div class="ov-row__main">' +
+          `<span class="ov-row__title">${who}</span>` +
           note +
+          `<div class="ov-row__facts"><span class="ov-row__when">Asked ${escapeHtml(fmtDate(r.created_at))}</span></div>` +
           '</div>' +
-          '<div class="watch-actions">' +
-          `<button type="button" class="watch-btn" data-gate-action="invited" data-id="${escapeHtml(r.id)}">Invite</button>` +
-          `<button type="button" class="watch-btn watch-btn--danger" data-gate-action="dismissed" data-id="${escapeHtml(r.id)}">Dismiss</button>` +
-          '</div>' +
-          '</div>'
+          '<div class="ov-row__right"><div class="ov-row__actions">' +
+          ghost(`data-gate-action="invited" data-id="${escapeHtml(r.id)}"`, 'Invite') +
+          ghost(`data-gate-action="dismissed" data-id="${escapeHtml(r.id)}"`, 'Dismiss', true) +
+          '</div></div>' +
+          '</li>'
         );
       })
-      .join('');
+      .join('') + '</ul>';
 
     wireActions(target, '[data-gate-action]', async (btn) => {
       const id = btn.getAttribute('data-id');
@@ -305,38 +353,33 @@
     const reports = Array.isArray(data.reports) ? data.reports : [];
     const statuses = Array.isArray(data.statuses) ? data.statuses : [];
     setAttention('att-security', reports.filter(OPEN_REPORT).length);
+    target.innerHTML = '';
     if (!reports.length) {
       target.innerHTML = emptyStateHtml('No vulnerability reports filed.');
       return;
     }
-    const rows = reports
-      .map((r) => {
-        // The status-update actions are POSTs to dedicated verbs:
-        //   /security/reports/:id/confirm | /dispute | /fix
-        const actions =
-          '<div class="watch-actions">' +
-          `<button type="button" class="watch-btn" data-rep-action="confirm" data-id="${escapeHtml(r.id)}">Confirm</button>` +
-          `<button type="button" class="watch-btn" data-rep-action="dispute" data-id="${escapeHtml(r.id)}">Dispute</button>` +
-          `<button type="button" class="watch-btn" data-rep-action="fix" data-id="${escapeHtml(r.id)}">Fixed</button>` +
-          '</div>';
-        return (
-          '<tr>' +
-          `<td>${sevBadge(r.severity)}</td>` +
-          `<td>${escapeHtml(r.title)}</td>` +
-          `<td><span class="watch-mono">${escapeHtml(r.target)}</span></td>` +
-          `<td><span class="badge badge--status">${escapeHtml(r.status)}</span></td>` +
-          `<td>${actions}</td>` +
-          '</tr>'
-        );
-      })
-      .join('');
-    target.innerHTML =
-      renderTable(['Severity', 'Title', 'Target', 'Status', 'Action'], rows) +
-      (statuses.length
-        ? `<p class="watch-note">Lifecycle: ${escapeHtml(statuses.join(' → '))}</p>`
-        : '');
-
-    wireActions(target, '[data-rep-action]', async (btn) => {
+    ledger(target, {
+      columns: ['Severity', 'Title', 'Target', 'Status', 'Action'],
+      pager: makePager('watch-reports', 'otb.watch.reportsPerPage'),
+      // The status-update actions are POSTs to dedicated verbs:
+      //   /security/reports/:id/confirm | /dispute | /fix
+      rowHtml: (r) => (
+        '<tr>' +
+        `<td>${sevBadge(r.severity)}</td>` +
+        `<td>${escapeHtml(r.title)}</td>` +
+        `<td><span class="ov-mono">${escapeHtml(r.target)}</span></td>` +
+        `<td><span class="badge badge--status">${escapeHtml(r.status)}</span></td>` +
+        '<td><div class="watch-actions">' +
+        ghost(`data-rep-action="confirm" data-id="${escapeHtml(r.id)}"`, 'Confirm') +
+        ghost(`data-rep-action="dispute" data-id="${escapeHtml(r.id)}"`, 'Dispute') +
+        ghost(`data-rep-action="fix" data-id="${escapeHtml(r.id)}"`, 'Fixed') +
+        '</div></td>' +
+        '</tr>'
+      ),
+    }).render(reports);
+    if (statuses.length) target.insertAdjacentHTML('beforeend', foot(`Lifecycle: ${escapeHtml(statuses.join(' → '))}`));
+
+    delegate(target, '[data-rep-action]', async (btn) => {
       const id = btn.getAttribute('data-id');
       const action = btn.getAttribute('data-rep-action');
       await postJson(`/security/reports/${encodeURIComponent(id)}/${action}`, {});
@@ -363,41 +406,45 @@
   // reports, so we never inject untrusted HTML.
   function renderEngagementDocs(data, target) {
     const docs = Array.isArray(data.docs) ? data.docs : [];
+    target.innerHTML = '';
     if (!docs.length) {
       target.innerHTML = emptyStateHtml('No engagement reports filed. Upload one via POST /api/bongos/security/docs.');
       return;
     }
-    const rows = docs
-      .map((d) => {
+    ledger(target, {
+      columns: ['Title', 'Slug', 'Updated', { label: 'Size', class: 'num' }, ''],
+      pager: makePager('watch-docs', 'otb.watch.docsPerPage'),
+      rowHtml: (d) => {
         const kb = d.bytes != null ? `${Math.max(1, Math.round(Number(d.bytes) / 1024))} KB` : '—';
         return (
           '<tr>' +
           `<td>${escapeHtml(d.title)}</td>` +
-          `<td><span class="watch-mono">${escapeHtml(d.slug)}</span></td>` +
+          `<td><span class="ov-mono">${escapeHtml(d.slug)}</span></td>` +
           `<td>${escapeHtml(fmtDate(d.updated_at))}</td>` +
-          `<td>${escapeHtml(kb)}</td>` +
-          `<td><div class="watch-actions"><button type="button" class="watch-btn" data-doc-open="${escapeHtml(d.slug)}">Read</button></div></td>` +
+          `<td class="num">${escapeHtml(kb)}</td>` +
+          `<td><div class="watch-actions">${ghost(`data-doc-open="${escapeHtml(d.slug)}"`, 'Read')}</div></td>` +
           '</tr>'
         );
-      })
-      .join('');
-    target.innerHTML =
-      renderTable(['Title', 'Slug', 'Updated', 'Size', ''], rows) +
-      '<div id="engagement-doc-view"></div>';
+      },
+    }).render(docs);
+    target.insertAdjacentHTML('beforeend', '<div id="engagement-doc-view"></div>');
 
     // Bespoke handler: opening a doc renders its body into the mounted view (no
-    // toast, no reload), so this is NOT a wireActions site.
-    target.querySelectorAll('[data-doc-open]').forEach((btn) => {
-      btn.addEventListener('click', async () => {
+    // toast, no reload), so this is NOT a delegate() site — the button stays live.
+    if (!target['wired:docs']) {
+      target['wired:docs'] = true;
+      target.addEventListener('click', async (e) => {
+        const btn = e.target.closest('[data-doc-open]');
+        if (!btn || !target.contains(btn)) return;
         const slug = btn.getAttribute('data-doc-open');
         const view = $('#engagement-doc-view');
-        if (view) view.innerHTML = '<p class="watch-empty">Reading…</p>';
+        if (view) view.innerHTML = foot('Reading…');
         try {
           const res = await fetchJson(`/security/docs/${encodeURIComponent(slug)}`);
           const doc = res.doc || {};
           if (view) {
             view.innerHTML =
-              `<h4 class="watch-sub-h">${escapeHtml(doc.title || slug)}</h4>` +
+              `<h4 class="watch-doc__h">${escapeHtml(doc.title || slug)}</h4>` +
               `<pre class="watch-doc">${escapeHtml(doc.content_md || '')}</pre>`;
           }
         } catch (err) {
@@ -405,7 +452,7 @@
           if (view) view.innerHTML = `<p class="watch-unavailable">Could not read the report: ${escapeHtml((err && err.message) || String(err))}</p>`;
         }
       });
-    });
+    }
   }
 
   function loadEngagementDocs() {
@@ -419,33 +466,33 @@
   // 2b. Override requests (grader-bypass queue).
   function renderOverrides(data, target) {
     const requests = Array.isArray(data.requests) ? data.requests : [];
+    target.innerHTML = '';
     if (!requests.length) {
       target.innerHTML = emptyStateHtml('No overrides sought.');
       return;
     }
-    const rows = requests
-      .map((r) => {
+    ledger(target, {
+      columns: ['Task', 'Requester', 'Rationale', { label: 'Reward', class: 'num' }, 'Asked', 'Decide'],
+      pager: makePager('watch-overrides', 'otb.watch.overridesPerPage'),
+      rowHtml: (r) => {
         const who = r.requester_display_name || r.requester_login || ('#' + r.requested_by_builder_id);
-        const actions =
-          '<div class="watch-actions">' +
-          `<button type="button" class="watch-btn" data-ovr-action="approve" data-id="${escapeHtml(r.id)}">Approve</button>` +
-          `<button type="button" class="watch-btn watch-btn--danger" data-ovr-action="deny" data-id="${escapeHtml(r.id)}">Deny</button>` +
-          '</div>';
         return (
           '<tr>' +
-          `<td><span class="watch-mono">#${escapeHtml(r.task_id)}</span><br>${escapeHtml(r.task_title || '')}</td>` +
+          `<td><span class="ov-mono">#${escapeHtml(r.task_id)}</span><br>${escapeHtml(r.task_title || '')}</td>` +
           `<td>${escapeHtml(who)}</td>` +
           `<td>${escapeHtml(r.rationale || '—')}</td>` +
           `<td class="num">${fmtInt(r.credits_reward)}</td>` +
           `<td>${escapeHtml(fmtDate(r.created_at))}</td>` +
-          `<td>${actions}</td>` +
+          '<td><div class="watch-actions">' +
+          ghost(`data-ovr-action="approve" data-id="${escapeHtml(r.id)}"`, 'Approve') +
+          ghost(`data-ovr-action="deny" data-id="${escapeHtml(r.id)}"`, 'Deny', true) +
+          '</div></td>' +
           '</tr>'
         );
-      })
-      .join('');
-    target.innerHTML = renderTable(['Task', 'Requester', 'Rationale', 'Reward', 'Asked', 'Decide'], rows);
+      },
+    }).render(requests);
 
-    wireActions(target, '[data-ovr-action]', async (btn) => {
+    delegate(target, '[data-ovr-action]', async (btn) => {
       const id = btn.getAttribute('data-id');
       const decision = btn.getAttribute('data-ovr-action');
       await postJson(`/override-requests/${encodeURIComponent(id)}/decide`, { decision, note: '' });
@@ -462,37 +509,35 @@
     });
   }
 
-  // 2c. Audit log (recent 50) — a read-only long table, so it adopts the kit
-  // ledger + pager (task 2173). Rebuilt per load; the pager pref persists.
+  // 2c. Audit log (recent 50) — a read-only long table on the kit ledger + pager
+  // (task 2173). Rebuilt per load; the pager pref persists.
   function renderAudit(data, target) {
     const rows = Array.isArray(data.rows) ? data.rows : [];
+    target.innerHTML = '';
     if (!rows.length) {
       target.innerHTML = emptyStateHtml('No audit entries yet.');
       return;
     }
-    const pager = makePager('watch-audit', 'otb.watch.auditPerPage');
-    const ledger = makeLedger({
-      mount: target,
+    ledger(target, {
       columns: ['When', 'Builder', 'Method', 'Route', { label: 'Status', class: 'num' }],
+      pager: makePager('watch-audit', 'otb.watch.auditPerPage'),
       rowHtml: (r) => {
         const status = num(r.response_status);
         const warn = status >= 400 ? ' warn' : '';
         return (
           '<tr>' +
           `<td>${escapeHtml(fmtDate(r.recorded_at))}</td>` +
-          `<td><span class="watch-mono">#${escapeHtml(r.builder_id ?? '—')}</span>` +
-          (r.surface ? ` <span class="watch-rank">(${escapeHtml(r.surface)})</span>` : '') +
+          `<td><span class="ov-mono">#${escapeHtml(r.builder_id ?? '—')}</span>` +
+          (r.surface ? ` <span class="ov-mono">(${escapeHtml(r.surface)})</span>` : '') +
           '</td>' +
           `<td><span class="badge badge--status">${escapeHtml(r.method)}</span></td>` +
-          `<td><span class="watch-mono">${escapeHtml(r.route)}</span></td>` +
+          `<td><span class="ov-mono">${escapeHtml(r.route)}</span></td>` +
           `<td class="num${warn}">${escapeHtml(r.response_status ?? '—')}</td>` +
           '</tr>'
         );
       },
-      pager,
-    });
-    ledger.render(rows);
-    target.insertAdjacentHTML('beforeend', '<p class="watch-note">Newest first. The fifty most recent write operations.</p>');
+    }).render(rows);
+    target.insertAdjacentHTML('beforeend', foot('Newest first. The fifty most recent write operations.'));
   }
 
   function loadAudit() {
@@ -513,97 +558,106 @@
   const RANK_OPTIONS = ['xenos', 'thetes', 'metic', 'archon'];
 
   function renderRoster(data, target) {
-      const builders = Array.isArray(data.builders) ? data.builders : [];
-      setAttention('att-stale', builders.filter((b) => b.stale_claim).length);
-      if (!builders.length) {
-        target.innerHTML = emptyStateHtml('No builders on the roster.');
-        return;
-      }
-      const rows = builders
-        .map((b) => {
-          const opts = RANK_OPTIONS.slice();
-          if (b.rank && !opts.includes(b.rank)) opts.unshift(b.rank);
-          const rankSelect =
-            `<select class="watch-select" data-roster-rank data-id="${escapeHtml(b.id)}" data-current="${escapeHtml(b.rank || '')}">` +
-            opts
-              .map(
-                (rk) =>
-                  `<option value="${escapeHtml(rk)}"${rk === b.rank ? ' selected' : ''}>${escapeHtml(rankLabel(rk))}</option>`
-              )
-              .join('') +
-            '</select>';
-          const isInactive = String(b.status) === 'inactive';
-          const statusBtn = isInactive
-            ? `<button type="button" class="watch-btn" data-roster-status="active" data-id="${escapeHtml(b.id)}">Reactivate</button>`
-            : `<button type="button" class="watch-btn watch-btn--danger" data-roster-status="inactive" data-id="${escapeHtml(b.id)}">Offboard</button>`;
-          const claims = num(b.active_claim_count);
-          const staleFlag = b.stale_claim ? ' <span class="badge badge--sev-medium">stale</span>' : '';
-          // task 1467: the roster name links to the builder's public profile page.
-          const rosterName = escapeHtml(b.display_name || b.github_login || ('#' + b.id));
-          const rosterNameCell = b.id != null
-            ? `<a class="lb-name" href="/profile?id=${encodeURIComponent(b.id)}">${rosterName}</a>`
-            : rosterName;
-          return (
-            '<tr>' +
-            `<td>${rosterNameCell}` +
-            (b.github_login ? ` <span class="watch-rank">@${escapeHtml(b.github_login)}</span>` : '') +
-            '</td>' +
-            `<td>${rankSelect}</td>` +
-            `<td class="num">${fmtInt(b.total_credits)}</td>` +
-            `<td class="num">${fmtInt(b.karma)}</td>` +
-            `<td class="num${b.stale_claim ? ' warn' : ''}">${fmtInt(claims)}${staleFlag}</td>` +
-            `<td><span class="badge badge--status">${escapeHtml(b.status || '—')}</span></td>` +
-            `<td><div class="watch-actions">${statusBtn}</div></td>` +
-            '</tr>'
-          );
-        })
-        .join('');
-      target.innerHTML = renderTable(['Builder', 'Rank', (window.OTBBranding?.currencyLabel?.({ caps: true }) ?? 'Credits'), 'Karma', 'Active claims', 'Standing', 'Action'], rows);
-
-      // Rank change via the <select>. Bespoke handler — a 'change' event that
-      // rolls the select back to its previous value on failure (not wireActions).
-      target.querySelectorAll('[data-roster-rank]').forEach((sel) => {
-        sel.addEventListener('change', async () => {
-          const id = sel.getAttribute('data-id');
-          const rank = sel.value;
-          const prev = sel.getAttribute('data-current');
-          if (rank === prev) return;
-          sel.disabled = true;
-          try {
-            await patchJson(`/builders/${encodeURIComponent(id)}/rank`, { rank });
-            toast(`Rank set to ${rankLabel(rank)}.`);
-            await loadRoster();
-          } catch (err) {
-            if (err && err.kind === '401') return;
-            sel.value = prev; // roll back the select on failure
-            sel.disabled = false;
-            toast(`Could not change rank: ${err.message || err}`);
-          }
-        });
+    const builders = Array.isArray(data.builders) ? data.builders : [];
+    setAttention('att-stale', builders.filter((b) => b.stale_claim).length);
+    target.innerHTML = '';
+    if (!builders.length) {
+      target.innerHTML = emptyStateHtml('No builders on the roster.');
+      return;
+    }
+    ledger(target, {
+      columns: [
+        'Builder', 'Rank',
+        { label: (window.OTBBranding?.currencyLabel?.({ caps: true }) ?? 'Credits'), class: 'num' },
+        { label: 'Karma', class: 'num' }, { label: 'Active claims', class: 'num' },
+        'Standing', 'Action',
+      ],
+      pager: makePager('watch-roster', 'otb.watch.rosterPerPage'),
+      rowHtml: (b) => {
+        const opts = RANK_OPTIONS.slice();
+        if (b.rank && !opts.includes(b.rank)) opts.unshift(b.rank);
+        const rankSelect =
+          `<select data-roster-rank data-id="${escapeHtml(b.id)}" data-current="${escapeHtml(b.rank || '')}" aria-label="Rank">` +
+          opts.map((rk) => `<option value="${escapeHtml(rk)}"${rk === b.rank ? ' selected' : ''}>${escapeHtml(rankLabel(rk))}</option>`).join('') +
+          '</select>';
+        const isInactive = String(b.status) === 'inactive';
+        const statusBtn = isInactive
+          ? ghost(`data-roster-status="active" data-id="${escapeHtml(b.id)}"`, 'Reactivate')
+          : ghost(`data-roster-status="inactive" data-id="${escapeHtml(b.id)}"`, 'Offboard', true);
+        const claims = num(b.active_claim_count);
+        const staleFlag = b.stale_claim ? ' <span class="badge badge--sev-medium">stale</span>' : '';
+        // task 1467: the roster name links to the builder's public profile page.
+        const rosterName = escapeHtml(b.display_name || b.github_login || ('#' + b.id));
+        const rosterNameCell = b.id != null
+          ? `<a class="lb-name" href="/profile?id=${encodeURIComponent(b.id)}">${rosterName}</a>`
+          : rosterName;
+        return (
+          '<tr>' +
+          `<td>${rosterNameCell}` +
+          (b.github_login ? ` <span class="ov-mono">@${escapeHtml(b.github_login)}</span>` : '') +
+          '</td>' +
+          `<td>${rankSelect}</td>` +
+          `<td class="num">${fmtInt(b.total_credits)}</td>` +
+          `<td class="num">${fmtInt(b.karma)}</td>` +
+          `<td class="num${b.stale_claim ? ' warn' : ''}">${fmtInt(claims)}${staleFlag}</td>` +
+          `<td><span class="badge badge--status">${escapeHtml(b.status || '—')}</span></td>` +
+          `<td><div class="watch-actions">${statusBtn}</div></td>` +
+          '</tr>'
+        );
+      },
+    }).render(builders);
+
+    // Rank change via the <select>. Bespoke: a 'change' listener that rolls the
+    // select back to its previous value on failure, delegated so a page flip
+    // cannot strand a row without one.
+    if (!target['wired:rank']) {
+      target['wired:rank'] = true;
+      target.addEventListener('change', async (e) => {
+        const sel = e.target.closest('[data-roster-rank]');
+        if (!sel || !target.contains(sel)) return;
+        const id = sel.getAttribute('data-id');
+        const rank = sel.value;
+        const prev = sel.getAttribute('data-current');
+        if (rank === prev) return;
+        sel.disabled = true;
+        try {
+          await patchJson(`/builders/${encodeURIComponent(id)}/rank`, { rank });
+          toast(`Rank set to ${rankLabel(rank)}.`);
+          await loadRoster();
+        } catch (err) {
+          if (err && err.kind === '401') return;
+          sel.value = prev; // roll back the select on failure
+          sel.disabled = false;
+          toast(`Could not change rank: ${err.message || err}`);
+        }
       });
+    }
 
-      // Status change (offboard / reactivate). Bespoke handler — it gathers an
-      // offboarding reason via window.prompt BEFORE disabling, so not wireActions.
-      target.querySelectorAll('[data-roster-status]').forEach((btn) => {
-        btn.addEventListener('click', async () => {
-          const id = btn.getAttribute('data-id');
-          const status = btn.getAttribute('data-roster-status');
-          let reason = null;
-          if (status === 'inactive') {
-            reason = window.prompt('Reason for offboarding (optional):', '') || null;
-          }
-          btn.disabled = true;
-          try {
-            await patchJson(`/builders/${encodeURIComponent(id)}/status`, { status, reason });
-            toast(status === 'inactive' ? 'Builder offboarded.' : 'Builder reactivated.');
-            await loadRoster();
-          } catch (err) {
-            if (err && err.kind === '401') return;
-            btn.disabled = false;
-            toast(`Could not change standing: ${err.message || err}`);
-          }
-        });
+    // Status change (offboard / reactivate). Bespoke: it gathers an offboarding
+    // reason via window.prompt BEFORE disabling, so not delegate().
+    if (!target['wired:status']) {
+      target['wired:status'] = true;
+      target.addEventListener('click', async (e) => {
+        const btn = e.target.closest('[data-roster-status]');
+        if (!btn || !target.contains(btn)) return;
+        const id = btn.getAttribute('data-id');
+        const status = btn.getAttribute('data-roster-status');
+        let reason = null;
+        if (status === 'inactive') {
+          reason = window.prompt('Reason for offboarding (optional):', '') || null;
+        }
+        btn.disabled = true;
+        try {
+          await patchJson(`/builders/${encodeURIComponent(id)}/status`, { status, reason });
+          toast(status === 'inactive' ? 'Builder offboarded.' : 'Builder reactivated.');
+          await loadRoster();
+        } catch (err) {
+          if (err && err.kind === '401') return;
+          btn.disabled = false;
+          toast(`Could not change standing: ${err.message || err}`);
+        }
       });
+    }
   }
 
   function loadRoster() {
@@ -617,29 +671,28 @@
   // ---- Box costs (#602): per-builder container-cost totals + recent ledger ----
   function renderBoxCosts(data, target) {
     const totals = Array.isArray(data.totals_by_builder) ? data.totals_by_builder : [];
-    const ledger = Array.isArray(data.ledger) ? data.ledger : [];
+    const recent = Array.isArray(data.ledger) ? data.ledger : [];
     const usd = (n) => `$${(Number(n) || 0).toFixed(2)}`;
+    target.innerHTML = '';
     if (!totals.length) {
       target.innerHTML = emptyStateHtml('No dev-box costs accrued yet.');
       return;
     }
-    const totalRows = totals
-      .map((tb) => `<tr><td>${escapeHtml(tb.builder_login || ('#' + (tb.builder_id ?? '?')))}</td><td class="num">${usd(tb.total_usd)}</td></tr>`)
-      .join('');
-    const recentRows = ledger
-      .slice(0, 40)
-      .map((r) => `<tr><td>${escapeHtml(String(r.recorded_at || '').slice(0, 16))}</td>` +
+    ledger(group(target, 'Totals by builder', totals.length), {
+      columns: ['Builder', { label: 'Total', class: 'num' }],
+      rowHtml: (tb) => `<tr><td>${escapeHtml(tb.builder_login || ('#' + (tb.builder_id ?? '?')))}</td><td class="num">${usd(tb.total_usd)}</td></tr>`,
+    }).render(totals);
+    ledger(group(target, 'Recent ledger', recent.length), {
+      columns: ['When', 'Builder', 'Kind', { label: 'Amount', class: 'num' }, 'Detail'],
+      pager: makePager('watch-boxcosts', 'otb.watch.boxCostsPerPage'),
+      emptyMsg: 'No ledger rows yet.',
+      rowHtml: (r) => `<tr><td>${escapeHtml(String(r.recorded_at || '').slice(0, 16).replace('T', ' '))}</td>` +
         `<td>${escapeHtml(r.builder_login || ('#' + (r.builder_id ?? '?')))}</td>` +
-        `<td><span class="watch-mono">${escapeHtml((r.source || '').replace('box-', ''))}</span></td>` +
+        `<td><span class="ov-mono">${escapeHtml((r.source || '').replace('box-', ''))}</span></td>` +
         `<td class="num">${usd(r.amount_usd)}</td>` +
-        `<td>${escapeHtml(r.description || '')}</td></tr>`)
-      .join('');
-    target.innerHTML =
-      '<h3 class="watch-subh">Totals by builder</h3>' +
-      renderTable(['Builder', 'Total'], totalRows) +
-      '<h3 class="watch-subh">Recent ledger</h3>' +
-      renderTable(['When', 'Builder', 'Kind', 'Amount', 'Detail'], recentRows) +
-      '<p class="watch-note">Container cost is tracked for oversight — not charged in the early stage.</p>';
+        `<td>${escapeHtml(r.description || '')}</td></tr>`,
+    }).render(recent);
+    target.insertAdjacentHTML('beforeend', foot('Container cost is tracked for oversight — not charged in the early stage.'));
   }
 
   function loadBoxCosts() {
@@ -662,20 +715,23 @@
     try {
       const data = await fetchJson('/grades/by-builder?days=30');
       const builders = Array.isArray(data.builders) ? data.builders : [];
+      target.innerHTML = '';
       if (!builders.length) {
         target.innerHTML = emptyStateHtml('No reviews recorded in this window.');
         return;
       }
       const sorted = builders.slice().sort((a, b) => num(b.n) - num(a.n));
-      const rows = sorted
-        .map((b) => {
+      ledger(target, {
+        columns: ['Builder', { label: 'Graded', class: 'num' }, { label: 'Avg score', class: 'num' }, { label: 'Pass rate', class: 'num' }, 'Last graded'],
+        pager: makePager('watch-marks', 'otb.watch.marksPerPage'),
+        rowHtml: (b) => {
           const avg = (b.avg_score === null || b.avg_score === undefined || b.avg_score === '')
             ? '—'
             : escapeHtml(String(b.avg_score));
           return (
             '<tr>' +
             `<td>${escapeHtml(b.display_name || b.github_login || ('#' + b.builder_id))}` +
-            (b.github_login ? ` <span class="watch-rank">@${escapeHtml(b.github_login)}</span>` : '') +
+            (b.github_login ? ` <span class="ov-mono">@${escapeHtml(b.github_login)}</span>` : '') +
             '</td>' +
             `<td class="num">${fmtInt(b.n)}</td>` +
             `<td class="num">${avg}</td>` +
@@ -683,11 +739,9 @@
             `<td>${escapeHtml(fmtDate(b.last_graded_at))}</td>` +
             '</tr>'
           );
-        })
-        .join('');
-      target.innerHTML =
-        renderTable(['Builder', 'Graded', 'Avg score', 'Pass rate', 'Last graded'], rows) +
-        (data.window_days ? `<p class="watch-note">Window: last ${escapeHtml(data.window_days)} days.</p>` : '');
+        },
+      }).render(sorted);
+      if (data.window_days) target.insertAdjacentHTML('beforeend', foot(`Window: last ${escapeHtml(data.window_days)} days.`));
     } catch (err) {
       if (err && err.kind === '401') return;
       if (err && err.kind === '403') { renderUnavailable(target, 'Archons only. Review data is not visible at your rank.'); return; }
@@ -712,13 +766,13 @@
     const meanAttempts = at && at.graded_tasks > 0
       ? Math.round((at.total_attempts / at.graded_tasks) * 10) / 10
       : null;
-    stats.innerHTML = statCards([
-      { num: (rolling.avg_score ?? '—') === '—' ? '—' : escapeHtml(String(rolling.avg_score)), label: 'Avg score' },
+    stats.innerHTML = figs([
+      { num: (rolling.avg_score ?? '—') === '—' ? '—' : String(rolling.avg_score), label: 'Avg score' },
       { num: fmtPct(passRate), label: 'Pass rate' },
       { num: fmtInt(n), label: 'Sample size' },
-      { num: data.threshold !== undefined && data.threshold !== null ? escapeHtml(String(data.threshold)) : '—', label: 'Threshold' },
+      { num: data.threshold !== undefined && data.threshold !== null ? String(data.threshold) : '—', label: 'Threshold' },
       ...(at ? [
-        { num: meanAttempts === null ? '—' : escapeHtml(String(meanAttempts)), label: 'Attempts/task' },
+        { num: meanAttempts === null ? '—' : String(meanAttempts), label: 'Attempts/task' },
         { num: at.remediation_rate === null ? '—' : fmtPct(at.remediation_rate), label: 'Remediation' },
       ] : []),
     ]);
@@ -745,7 +799,7 @@
         })
         .join('') +
       '</div>' +
-      '<p class="watch-note">Per-day: ships graded · avg score.</p>';
+      foot('Per day: ships graded · avg score.');
   }
 
   function loadMasonMarks() {
@@ -762,26 +816,25 @@
 
   function renderSurveyor(data, stats) {
     const body = $('#surveyor-body');
-    stats.innerHTML = statCards([
-      { num: data.overall_median !== undefined && data.overall_median !== null ? escapeHtml(String(data.overall_median)) : '—', label: 'Overall median ratio' },
+    stats.innerHTML = figs([
+      { num: data.overall_median !== undefined && data.overall_median !== null ? String(data.overall_median) : '—', label: 'Overall median ratio' },
       { num: fmtInt(data.sample_size), label: 'Sample size' },
     ]);
     const byVersion = Array.isArray(data.by_version) ? data.by_version : [];
+    body.innerHTML = '';
     if (!byVersion.length) {
       body.innerHTML = emptyStateHtml('No drift recorded by version yet.');
       return;
     }
-    const rows = byVersion
-      .map(
-        (v) =>
-          '<tr>' +
-          `<td><span class="watch-mono">${escapeHtml(v.version_id)}</span></td>` +
-          `<td class="num">${v.median_ratio !== undefined && v.median_ratio !== null ? escapeHtml(String(v.median_ratio)) : '—'}</td>` +
-          `<td class="num">${fmtInt(v.task_count)}</td>` +
-          '</tr>'
-      )
-      .join('');
-    body.innerHTML = renderTable(['Version', 'Median ratio', 'Tasks'], rows);
+    ledger(body, {
+      columns: ['Version', { label: 'Median ratio', class: 'num' }, { label: 'Tasks', class: 'num' }],
+      rowHtml: (v) =>
+        '<tr>' +
+        `<td><span class="ov-mono">${escapeHtml(v.version_id)}</span></td>` +
+        `<td class="num">${v.median_ratio !== undefined && v.median_ratio !== null ? escapeHtml(String(v.median_ratio)) : '—'}</td>` +
+        `<td class="num">${fmtInt(v.task_count)}</td>` +
+        '</tr>',
+    }).render(byVersion);
   }
 
   function loadSurveyor() {
@@ -796,7 +849,7 @@
   // 7. REPO HEALTH — codebase shape + weight
   // =========================================================================
 
-  // Known scalar fields we render as their own stat cards if present. Anything
+  // Known scalar fields we render as their own figures if present. Anything
   // else numeric on `latest` is rendered defensively (label-cased key).
   function labelize(key) {
     return String(key)
@@ -805,60 +858,45 @@
   }
 
   function renderLedger(data, stats) {
-      const locEl = $('#ledger-loc');
-      const filesEl = $('#ledger-files');
-      const latest = data.latest || {};
-
-      // Core stat cards, plus any extra scalar fields (dead exports, stale
-      // branches, etc.) that the snapshot happens to carry — render defensively.
-      const cards = [
-        { num: fmtCompact(latest.total_loc), label: 'Total lines' },
-        { num: escapeHtml(fmtDate(latest.snapshot_date)), label: 'Snapshot' },
-      ];
-      const SKIP = new Set(['total_loc', 'snapshot_date', 'loc_by_dir', 'largest_files']);
-      for (const [k, v] of Object.entries(latest)) {
-        if (SKIP.has(k)) continue;
-        if (typeof v === 'number') {
-          cards.push({ num: fmtInt(v), label: labelize(k) });
-        }
-      }
-      stats.innerHTML = statCards(cards);
-
-      // loc_by_dir as a small list.
-      const locByDir = latest.loc_by_dir && typeof latest.loc_by_dir === 'object' ? latest.loc_by_dir : {};
-      const dirEntries = Object.entries(locByDir).sort((a, b) => num(b[1]) - num(a[1]));
-      if (dirEntries.length) {
-        locEl.innerHTML =
-          '<h3 class="watch-sub-h">Lines by directory</h3><ul class="watch-list">' +
-          dirEntries
-            .map(
-              ([dir, loc]) =>
-                `<li><span class="k watch-mono">${escapeHtml(dir)}</span><span class="v">${fmtInt(loc)}</span></li>`
-            )
-            .join('') +
-          '</ul>';
-      } else {
-        locEl.innerHTML = '';
+    const locEl = $('#ledger-loc');
+    const filesEl = $('#ledger-files');
+    const latest = data.latest || {};
+
+    // Core figures, plus any extra scalar fields (dead exports, stale branches,
+    // etc.) that the snapshot happens to carry — render defensively.
+    const cards = [
+      { num: fmtCompact(latest.total_loc), label: 'Total lines' },
+      { num: fmtDate(latest.snapshot_date), label: 'Snapshot' },
+    ];
+    const SKIP = new Set(['total_loc', 'snapshot_date', 'loc_by_dir', 'largest_files']);
+    for (const [k, v] of Object.entries(latest)) {
+      if (SKIP.has(k)) continue;
+      if (typeof v === 'number') {
+        cards.push({ num: fmtInt(v), label: labelize(k) });
       }
+    }
+    stats.innerHTML = figs(cards);
+
+    // loc_by_dir as a two-column ledger under its own head.
+    const locByDir = latest.loc_by_dir && typeof latest.loc_by_dir === 'object' ? latest.loc_by_dir : {};
+    const dirEntries = Object.entries(locByDir).sort((a, b) => num(b[1]) - num(a[1]));
+    locEl.innerHTML = '';
+    if (dirEntries.length) {
+      ledger(group(locEl, 'Lines by directory', dirEntries.length), {
+        columns: ['Directory', { label: 'Lines', class: 'num' }],
+        rowHtml: ([dir, loc]) => `<tr><td><span class="ov-mono">${escapeHtml(dir)}</span></td><td class="num">${fmtInt(loc)}</td></tr>`,
+      }).render(dirEntries);
+    }
 
-      // Top ~10 largest files.
-      const largest = Array.isArray(latest.largest_files) ? latest.largest_files.slice(0, 10) : [];
-      if (largest.length) {
-        const rows = largest
-          .map(
-            (f) =>
-              '<tr>' +
-              `<td><span class="watch-mono">${escapeHtml(f.path)}</span></td>` +
-              `<td class="num">${fmtInt(f.lines)}</td>` +
-              '</tr>'
-          )
-          .join('');
-        filesEl.innerHTML =
-          '<h3 class="watch-sub-h">Largest files</h3>' +
-          renderTable(['File', 'Lines'], rows);
-      } else {
-        filesEl.innerHTML = '';
-      }
+    // Top ~10 largest files.
+    const largest = Array.isArray(latest.largest_files) ? latest.largest_files.slice(0, 10) : [];
+    filesEl.innerHTML = '';
+    if (largest.length) {
+      ledger(group(filesEl, 'Largest files', largest.length), {
+        columns: ['File', { label: 'Lines', class: 'num' }],
+        rowHtml: (f) => `<tr><td><span class="ov-mono">${escapeHtml(f.path)}</span></td><td class="num">${fmtInt(f.lines)}</td></tr>`,
+      }).render(largest);
+    }
   }
 
   function loadLedger() {
@@ -870,18 +908,45 @@
   }
 
   // =========================================================================
-  // 8. SESSIONS — session tally + link
+  // 8. SESSIONS — session tally + the latest five
   // =========================================================================
 
+  // The tally as figures, then the five most recent sessions the request has
+  // always carried (limit=5) and the page used to drop on the floor (task
+  // 1003469): builder, tasks, what it earned, tokens, how long, when.
   function renderSessions(data, stats) {
     const t = data.totals || {};
     setAttention('att-sessions', t.total);
-    stats.innerHTML = statCards([
+    stats.innerHTML = figs([
       { num: fmtInt(t.total), label: 'Sessions' },
       { num: fmtInt(t.builders), label: 'Builders' },
       { num: fmtCompact(t.tokens), label: 'Tokens' },
       { num: fmtInt(t.tool_errors), label: 'Tool errors' },
     ]);
+    const recentEl = $('#sessions-recent');
+    if (!recentEl) return;
+    const sessions = Array.isArray(data.sessions) ? data.sessions : [];
+    recentEl.innerHTML = '';
+    if (!sessions.length) return;
+    ledger(group(recentEl, 'Latest sessions', sessions.length), {
+      columns: ['Builder', 'Tasks', { label: 'Earned', class: 'num' }, { label: 'Tokens', class: 'num' }, { label: 'Duration', class: 'num' }, 'Uploaded'],
+      rowHtml: (s) => {
+        const who = s.github_login ? `@${escapeHtml(s.github_login)}` : `#${escapeHtml(s.builder_id ?? '?')}`;
+        const tasks = Array.isArray(s.task_ids) && s.task_ids.length
+          ? s.task_ids.map((id) => `<a href="/#/task/${encodeURIComponent(id)}">task ${escapeHtml(String(id))}</a>`).join(', ')
+          : '—';
+        return (
+          '<tr>' +
+          `<td>${s.builder_id != null ? `<a class="lb-name" href="/profile?id=${encodeURIComponent(s.builder_id)}">${who}</a>` : who}</td>` +
+          `<td>${tasks}</td>` +
+          `<td class="num">${fmtInt(s.drachmae_earned)}</td>` +
+          `<td class="num">${fmtCompact(s.total_tokens)}</td>` +
+          `<td class="num">${escapeHtml(fmtDuration(s.duration_seconds))}</td>` +
+          `<td>${escapeHtml(fmtDate(s.uploaded_at))}</td>` +
+          '</tr>'
+        );
+      },
+    }).render(sessions);
   }
 
   function loadSessions() {
@@ -897,7 +962,7 @@
   // =========================================================================
 
   function showSealed(message) {
-    $('#watch-sub').textContent = 'Archons only.';
+    $('#watch-sub').textContent = 'Restricted.';
     const gate = $('#sealed-scroll');
     if (message) $('#sealed-body').textContent = message;
     gate.hidden = false;
@@ -951,12 +1016,12 @@
     // it reads (roster, security reports, audit log, sessions, box costs) delegated to
     // metic with it. Cosmetic — requireGovernmentPage + the route gates are the wall.
     if (!builder || (builder.rank !== 'metic' && builder.rank !== 'archon')) {
-      showSealed('This page is available from the Metic rank up. Your current rank does not grant access.');
+      showSealed(`Available from the ${rankLabel('metic')} rank up. Your current rank does not grant access.`);
       return;
     }
 
     revealSections();
-    $('#watch-sub').textContent = 'System oversight. Every panel below is Archon-only.';
+    $('#watch-sub').textContent = 'System oversight: people, operations and security.';
 
     // Each section loads independently — one failure must not break the rest.
     loadGate();