@bongos/core 1.17.0

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

@@ -0,0 +1,859 @@
+// watch.js — Watch (/builders/watch).
+//
+// Archon-only (rank 'archon') monitoring view. One self-contained page that
+// stitches together the oversight surfaces: pending access requests, security
+// (red-team reports + override queue + audit log), the builder roster,
+// per-builder + project-wide review grades, estimation drift, repo health,
+// and a tally of recorded sessions.
+//
+// This page reads /api/bongos/me to learn the viewer's rank and shows a
+// restricted notice for non-Archons — but that is DEFENCE IN DEPTH only. Every
+// endpoint below is ALSO gated to rank 'archon' server-side (ADR 0016: the DB
+// enforces, the markdown/UI only describes). On a 401 it redirects into the
+// web sign-in flow; on a 403 the affected section degrades to an inline
+// "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.
+
+(() => {
+  'use strict';
+
+  const API = '/api/bongos';
+  // Generated typed client (task 1996 / R09), served as window.BongosClient by
+  // /lib/bongos-client.js. baseUrl:'' passes the full `${API}${path}` URLs below
+  // through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+
+  // escapeHtml / $ / num / fmtInt / fmtCompact / fmtDate / toast / rankLabel now
+  // come from the shared window.OTB toolkit (dom-utils.js, loaded first). Thin
+  // wrappers keep this file's exact variants (date+time fmtDate; '' rankLabel
+  // empty; the 3200ms non-clearing toast). fmtDay / fmtDuration / fmtPct stay local.
+  const { escapeHtml, $, num, fmtInt, fmtCompact } = window.OTB;
+  const fmtDate = (iso) => window.OTB.fmtDate(iso, { time: true });
+  const rankLabel = (rank) => window.OTB.rankLabel(rank, { empty: '' });
+  const toast = (msg) => window.OTB.toast(msg);
+
+  // ---- formatters (house style helpers local to this page) ------------------
+
+  function fmtDay(iso) {
+    if (!iso) return '—';
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return String(iso);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  }
+
+  // 0..1 → "73%". Returns "—" for null/undefined.
+  function fmtPct(ratio) {
+    if (ratio === null || ratio === undefined || ratio === '') return '—';
+    const n = Number(ratio);
+    if (!Number.isFinite(n)) return '—';
+    return `${Math.round(n * 100)}%`;
+  }
+
+  // ---- fetch helper ---------------------------------------------------------
+
+  // Fetch JSON. Throws { kind: '401'|'403' } on those statuses so each section
+  // can decide how to degrade. A 401 anywhere triggers the global sign-in
+  // redirect (the session is gone); a 403 is section-local "sealed/unavailable".
+  async function fetchJson(path) {
+    const res = await api.request('GET', `${API}${path}`);
+    if (res.status === 401) {
+      window.location.assign(`${API}/auth/web/start`);
+      throw { kind: '401' };
+    }
+    if (res.status === 403) {
+      throw { kind: '403' };
+    }
+    if (!res.ok) throw new Error(`${path} → ${res.status}`);
+    return res.data;
+  }
+
+  async function patchJson(path, body) {
+    const res = await api.request('PATCH', `${API}${path}`, { body });
+    if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw { kind: '401' }; }
+    const data = res.data || {};
+    if (!res.ok) throw new Error(data.message || data.error || `${path} → ${res.status}`);
+    return data;
+  }
+
+  async function postJson(path, body) {
+    const res = await api.request('POST', `${API}${path}`, { body: body || {} });
+    if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw { kind: '401' }; }
+    const data = res.data || {};
+    if (!res.ok) throw new Error(data.message || data.error || `${path} → ${res.status}`);
+    return data;
+  }
+
+  // Render an inline "this section is sealed/unavailable" message into a target.
+  function renderUnavailable(target, message) {
+    if (!target) return;
+    target.innerHTML = `<p class="watch-unavailable">${escapeHtml(message)}</p>`;
+  }
+
+  // ---- shared render skeletons (C10) ----------------------------------------
+
+  // section — the load→fetch→render→degrade skeleton every panel repeats. fetcher()
+  // returns the parsed payload; render(data, target) paints it (and wires its own
+  // buttons). On 401 the page has already redirected; on 403 the panel seals with
+  // `sealedMsg`; any other failure logs `[watch] <name> failed` and shows `errMsg`.
+  // NOTE: loadMarks is the deliberate outlier — its failure state is a plain
+  // "empty" message, not "unavailable", so it keeps its own try/catch.
+  async function section(target, fetcher, render, { sealedMsg, errMsg, name }) {
+    if (!target) return;
+    try {
+      render(await fetcher(), target);
+    } catch (err) {
+      if (err && err.kind === '401') return;
+      if (err && err.kind === '403') { renderUnavailable(target, sealedMsg); return; }
+      console.error(`[watch] ${name} failed`, err);
+      renderUnavailable(target, errMsg);
+    }
+  }
+
+  // wireActions — wire every button matching `selector` under `root` to an async
+  // handler(btn). The wrapper owns the disable→try→swallow-401→re-enable+error-toast
+  // dance every action button repeats; the handler owns the mutation, the success
+  // toast (text varies per panel), and the reload. `errPrefix` heads the failure toast.
+  function wireActions(root, selector, handler, errPrefix) {
+    root.querySelectorAll(selector).forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        btn.disabled = true;
+        try {
+          await handler(btn);
+        } catch (err) {
+          if (err && err.kind === '401') return;
+          btn.disabled = false;
+          toast(`${errPrefix}: ${err.message || err}`);
+        }
+      });
+    });
+  }
+
+  // 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>`
+    );
+  }
+
+  // Stat cards from [{ num, label }].
+  function statCards(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>`
+      )
+      .join('');
+  }
+
+  function sevBadge(sev) {
+    const s = String(sev || '').toLowerCase();
+    const cls =
+      s === 'critical' ? 'badge--sev-critical'
+      : s === 'high' ? 'badge--sev-high'
+      : s === 'medium' ? 'badge--sev-medium'
+      : 'badge--sev-low';
+    return `<span class="badge ${cls}">${escapeHtml(sev || '—')}</span>`;
+  }
+
+  // =========================================================================
+  // 1. GATE — access requests (pending)
+  // =========================================================================
+
+  function renderGate(data, target) {
+    const requests = Array.isArray(data.requests) ? data.requests : [];
+    if (!requests.length) {
+      target.innerHTML = '<p class="watch-empty">No pending access requests.</p>';
+      return;
+    }
+    target.innerHTML = 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>`
+          : '';
+        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>` +
+          note +
+          '</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>'
+        );
+      })
+      .join('');
+
+    wireActions(target, '[data-gate-action]', async (btn) => {
+      const id = btn.getAttribute('data-id');
+      const status = btn.getAttribute('data-gate-action');
+      await patchJson(`/access-requests/${encodeURIComponent(id)}`, { status });
+      toast(status === 'invited' ? 'Builder invited.' : 'Request dismissed.');
+      await loadGate();
+    }, 'Could not resolve');
+  }
+
+  function loadGate() {
+    return section($('#gate-body'), () => fetchJson('/access-requests?status=pending'), renderGate, {
+      sealedMsg: 'Archons only. Access requests are not visible at your rank.',
+      errMsg: 'Could not load access requests.',
+      name: 'gate',
+    });
+  }
+
+  // =========================================================================
+  // 2. WATCH — security (reports, overrides, audit log)
+  // =========================================================================
+
+  // 2a. Red-team / vulnerability reports.
+  function renderReports(data, target) {
+    const reports = Array.isArray(data.reports) ? data.reports : [];
+    const statuses = Array.isArray(data.statuses) ? data.statuses : [];
+    if (!reports.length) {
+      target.innerHTML = '<p class="watch-empty">No vulnerability reports filed.</p>';
+      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) => {
+      const id = btn.getAttribute('data-id');
+      const action = btn.getAttribute('data-rep-action');
+      await postJson(`/security/reports/${encodeURIComponent(id)}/${action}`, {});
+      toast(`Report ${action === 'fix' ? 'marked fixed' : action + 'ed'}.`);
+      await loadReports();
+    }, 'Could not update report');
+  }
+
+  function loadReports() {
+    return section($('#reports-body'), () => fetchJson('/security/reports'), renderReports, {
+      sealedMsg: 'Archons only. Security reports are not visible at your rank.',
+      errMsg: 'Could not load the security reports.',
+      name: 'reports',
+    });
+  }
+
+  // 2c. Engagement reports — Archon-only security doc store (task 991).
+  //
+  // The DATED exploit-detail engagement reports live in the DB (NOT the repo —
+  // threat-model §6.3 / ADR 0020) and are served only to Archons via
+  // GET /security/docs (metadata) + GET /security/docs/:slug (content). Both
+  // are requireRank('archon') server-side; a 403 degrades this to "unavailable".
+  // We render the markdown body as escaped <pre> text — these are exploit
+  // reports, so we never inject untrusted HTML.
+  function renderEngagementDocs(data, target) {
+    const docs = Array.isArray(data.docs) ? data.docs : [];
+    if (!docs.length) {
+      target.innerHTML = '<p class="watch-empty">No engagement reports filed. Upload one via POST /api/bongos/security/docs.</p>';
+      return;
+    }
+    const rows = docs
+      .map((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>${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>` +
+          '</tr>'
+        );
+      })
+      .join('');
+    target.innerHTML =
+      renderTable(['Title', 'Slug', 'Updated', 'Size', ''], rows) +
+      '<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 () => {
+        const slug = btn.getAttribute('data-doc-open');
+        const view = $('#engagement-doc-view');
+        if (view) view.innerHTML = '<p class="watch-empty">Reading…</p>';
+        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>` +
+              `<pre class="watch-doc">${escapeHtml(doc.content_md || '')}</pre>`;
+          }
+        } catch (err) {
+          if (err && err.kind === '401') return;
+          if (view) view.innerHTML = `<p class="watch-unavailable">Could not read the report: ${escapeHtml((err && err.message) || String(err))}</p>`;
+        }
+      });
+    });
+  }
+
+  function loadEngagementDocs() {
+    return section($('#engagement-docs-body'), () => fetchJson('/security/docs'), renderEngagementDocs, {
+      sealedMsg: 'Archons only. Engagement reports are not visible at your rank.',
+      errMsg: 'Could not load the engagement reports.',
+      name: 'engagement docs',
+    });
+  }
+
+  // 2b. Override requests (grader-bypass queue).
+  function renderOverrides(data, target) {
+    const requests = Array.isArray(data.requests) ? data.requests : [];
+    if (!requests.length) {
+      target.innerHTML = '<p class="watch-empty">No overrides sought.</p>';
+      return;
+    }
+    const rows = requests
+      .map((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>${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>` +
+          '</tr>'
+        );
+      })
+      .join('');
+    target.innerHTML = renderTable(['Task', 'Requester', 'Rationale', 'Reward', 'Asked', 'Decide'], rows);
+
+    wireActions(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: '' });
+      toast(decision === 'approve' ? 'Override approved.' : 'Override denied.');
+      await loadOverrides();
+    }, 'Could not decide');
+  }
+
+  function loadOverrides() {
+    return section($('#overrides-body'), () => fetchJson('/override-requests?status=open'), renderOverrides, {
+      sealedMsg: 'Archons only. The override queue is not visible at your rank.',
+      errMsg: 'Could not load the override queue.',
+      name: 'overrides',
+    });
+  }
+
+  // 2c. Audit log (recent 50).
+  function renderAudit(data, target) {
+    const rows = Array.isArray(data.rows) ? data.rows : [];
+    if (!rows.length) {
+      target.innerHTML = '<p class="watch-empty">No audit entries yet.</p>';
+      return;
+    }
+    const body = rows
+      .map((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>' +
+          `<td><span class="badge badge--status">${escapeHtml(r.method)}</span></td>` +
+          `<td><span class="watch-mono">${escapeHtml(r.route)}</span></td>` +
+          `<td class="num${warn}">${escapeHtml(r.response_status ?? '—')}</td>` +
+          '</tr>'
+        );
+      })
+      .join('');
+    target.innerHTML =
+      renderTable(['When', 'Builder', 'Method', 'Route', 'Status'], body) +
+      '<p class="watch-note">Newest first. The fifty most recent write operations.</p>';
+  }
+
+  function loadAudit() {
+    return section($('#audit-body'), () => fetchJson('/audit-log?limit=50'), renderAudit, {
+      sealedMsg: 'Archons only. The audit log is not visible at your rank.',
+      errMsg: 'Could not load the audit log.',
+      name: 'audit',
+    });
+  }
+
+  // =========================================================================
+  // 3. ROSTER — every builder
+  // =========================================================================
+
+  // Live rank options for the per-row <select>. The server validates against
+  // db.RANKS; these are the live, builder-facing tiers (ADR 0034). If a builder
+  // sits at a rank outside this set, we inject it so the select still shows it.
+  const RANK_OPTIONS = ['xenos', 'thetes', 'metic', 'archon'];
+
+  function renderRoster(data, target) {
+      const builders = Array.isArray(data.builders) ? data.builders : [];
+      if (!builders.length) {
+        target.innerHTML = '<p class="watch-empty">No builders on the roster.</p>';
+        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}`);
+          }
+        });
+      });
+
+      // 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}`);
+          }
+        });
+      });
+  }
+
+  function loadRoster() {
+    return section($('#roster-body'), () => fetchJson('/builders/roster'), renderRoster, {
+      sealedMsg: 'Archons only. The roster is not visible at your rank.',
+      errMsg: 'Could not load the roster.',
+      name: 'roster',
+    });
+  }
+
+  // ---- 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 usd = (n) => `$${(Number(n) || 0).toFixed(2)}`;
+    if (!totals.length) {
+      target.innerHTML = '<p class="watch-empty">No dev-box costs accrued yet.</p>';
+      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>` +
+        `<td>${escapeHtml(r.builder_login || ('#' + (r.builder_id ?? '?')))}</td>` +
+        `<td><span class="watch-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>';
+  }
+
+  function loadBoxCosts() {
+    return section($('#box-costs-body'), () => fetchJson('/boxes/cost-ledger?limit=100'), renderBoxCosts, {
+      sealedMsg: 'Archons only. The cost ledger is not visible at your rank.',
+      errMsg: 'Could not load the dev-box cost ledger.',
+      name: 'box costs',
+    });
+  }
+
+  // =========================================================================
+  // 4. MARKS — reviews by builder (per-builder grade breakdown)
+  // NOTE: built in parallel — code defensively (404 / [] / missing fields).
+  // =========================================================================
+
+  // OUTLIER: loadMarks keeps its own try/catch (not section) because its failure
+  // state is a graceful "empty" message, NOT the "unavailable" panel-seal.
+  async function loadMarks() {
+    const target = $('#marks-body');
+    try {
+      const data = await fetchJson('/grades/by-builder?days=30');
+      const builders = Array.isArray(data.builders) ? data.builders : [];
+      if (!builders.length) {
+        target.innerHTML = '<p class="watch-empty">No reviews recorded in this window.</p>';
+        return;
+      }
+      const sorted = builders.slice().sort((a, b) => num(b.n) - num(a.n));
+      const rows = sorted
+        .map((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>` : '') +
+            '</td>' +
+            `<td class="num">${fmtInt(b.n)}</td>` +
+            `<td class="num">${avg}</td>` +
+            `<td class="num">${fmtPct(b.pass_rate)}</td>` +
+            `<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>` : '');
+    } 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; }
+      // 404 / not-yet-built / any other failure → graceful empty state.
+      console.error('[watch] marks-by-builder failed', err);
+      target.innerHTML = '<p class="watch-empty">No reviews recorded in this window.</p>';
+    }
+  }
+
+  // =========================================================================
+  // 5. REVIEW QUALITY — project-wide grade aggregate
+  // =========================================================================
+
+  function renderMasonMarks(data, stats) {
+    const trendEl = $('#mason-marks-trend');
+    const rolling = data.rolling || {};
+    const n = num(rolling.n);
+    const passRate = n > 0 ? num(rolling.n_passed) / n : null;
+    stats.innerHTML = statCards([
+      { num: (rolling.avg_score ?? '—') === '—' ? '—' : escapeHtml(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' },
+    ]);
+
+    const trend = Array.isArray(data.trend) ? data.trend.slice(-14) : [];
+    if (!trend.length) {
+      trendEl.innerHTML = '<p class="watch-empty">No trend to show yet.</p>';
+      return;
+    }
+    const maxN = Math.max(1, ...trend.map((t) => num(t.n)));
+    trendEl.innerHTML =
+      '<div class="watch-trend">' +
+      trend
+        .map((t) => {
+          const w = Math.round((num(t.n) / maxN) * 100);
+          const avg = (t.avg_score ?? '—') === '—' ? '—' : escapeHtml(String(t.avg_score));
+          return (
+            '<div class="watch-trend__row">' +
+            `<span>${escapeHtml(fmtDay(t.day))}</span>` +
+            `<span class="watch-trend__bar-track"><span class="watch-trend__bar-fill" style="width:${w}%"></span></span>` +
+            `<span class="watch-trend__val">${fmtInt(t.n)} · ${avg}</span>` +
+            '</div>'
+          );
+        })
+        .join('') +
+      '</div>' +
+      '<p class="watch-note">Per-day: ships graded · avg score.</p>';
+  }
+
+  function loadMasonMarks() {
+    return section($('#mason-marks-stats'), () => fetchJson('/public/grades?days=7'), renderMasonMarks, {
+      sealedMsg: 'Archons only. Review quality data is not visible at your rank.',
+      errMsg: 'Could not load review quality data.',
+      name: 'public grades',
+    });
+  }
+
+  // =========================================================================
+  // 6. SURVEYOR — estimation drift
+  // =========================================================================
+
+  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' },
+      { num: fmtInt(data.sample_size), label: 'Sample size' },
+    ]);
+    const byVersion = Array.isArray(data.by_version) ? data.by_version : [];
+    if (!byVersion.length) {
+      body.innerHTML = '<p class="watch-empty">No drift recorded by version yet.</p>';
+      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);
+  }
+
+  function loadSurveyor() {
+    return section($('#surveyor-stats'), () => fetchJson('/public/estimation-drift'), renderSurveyor, {
+      sealedMsg: 'Archons only. Estimation data is not visible at your rank.',
+      errMsg: 'Could not load estimation data.',
+      name: 'estimation drift',
+    });
+  }
+
+  // =========================================================================
+  // 7. REPO HEALTH — codebase shape + weight
+  // =========================================================================
+
+  // Known scalar fields we render as their own stat cards if present. Anything
+  // else numeric on `latest` is rendered defensively (label-cased key).
+  function labelize(key) {
+    return String(key)
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+
+  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 = '';
+      }
+
+      // 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 = '';
+      }
+  }
+
+  function loadLedger() {
+    return section($('#ledger-stats'), () => fetchJson('/public/repo-health?days=30'), renderLedger, {
+      sealedMsg: 'Archons only. Repo health data is not visible at your rank.',
+      errMsg: 'Could not load repo health data.',
+      name: 'repo health',
+    });
+  }
+
+  // =========================================================================
+  // 8. SESSIONS — session tally + link
+  // =========================================================================
+
+  function renderSessions(data, stats) {
+    const t = data.totals || {};
+    stats.innerHTML = statCards([
+      { 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' },
+    ]);
+  }
+
+  function loadSessions() {
+    return section($('#sessions-stats'), () => fetchJson('/sessions/search?order=recent&limit=5'), renderSessions, {
+      sealedMsg: 'Archons only. Session data is not visible at your rank.',
+      errMsg: 'Could not load the session tally.',
+      name: 'sessions tally',
+    });
+  }
+
+  // =========================================================================
+  // Boot
+  // =========================================================================
+
+  function showSealed(message) {
+    $('#watch-sub').textContent = 'Archons only.';
+    const gate = $('#sealed-scroll');
+    if (message) $('#sealed-body').textContent = message;
+    gate.hidden = false;
+  }
+
+  function revealSections() {
+    [
+      'watch-nav', 'gate-scroll', 'watch-scroll', 'roster-scroll', 'box-costs-scroll', 'marks-scroll',
+      'mason-marks-scroll', 'surveyor-scroll', 'ledger-scroll', 'sessions-scroll',
+    ].forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) el.hidden = false;
+    });
+    $('#sealed-scroll').hidden = true;
+  }
+
+  async function load() {
+    // 1. Who is viewing? (rank gate — the server enforces every endpoint too.)
+    let builder;
+    try {
+      const res = await api.request('GET', `${API}/me`);
+      if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }
+      if (!res.ok) throw new Error(`me → ${res.status}`);
+      const payload = res.data;
+      builder = (payload && payload.builder) ? payload.builder : payload;
+    } catch (err) {
+      console.error('[watch] failed to read viewer', err);
+      $('#watch-sub').textContent = 'Could not verify your access. Go back and try again.';
+      toast('Could not load this page.');
+      return;
+    }
+
+    if (!builder || builder.rank !== 'archon') {
+      showSealed('This page is available to Archons only. Your current rank does not grant access.');
+      return;
+    }
+
+    revealSections();
+    $('#watch-sub').textContent = 'System oversight. Every panel below is Archon-only.';
+
+    // Each section loads independently — one failure must not break the rest.
+    loadGate();
+    loadReports();
+    loadEngagementDocs();
+    loadOverrides();
+    loadAudit();
+    loadRoster();
+    loadBoxCosts();
+    loadMarks();
+    loadMasonMarks();
+    loadSurveyor();
+    loadLedger();
+    loadSessions();
+  }
+
+  load();
+})();