@bongos/core 1.17.3 → 1.18.3

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

@@ -10,199 +10,10 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <style>
-    /* Page-local styles for the watch — built on the shared design system's
-       derived tokens; class names are load-bearing (watch.js writes them). */
-    .watch-stats {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 12px;
-      margin-top: 6px;
-    }
-    .watch-stat {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 14px 16px;
-      text-align: center;
-    }
-    .watch-stat__num {
-      font-family: var(--font-display);
-      font-size: 1.6rem;
-      font-weight: 650;
-      color: var(--ink);
-      line-height: 1.2;
-      font-variant-numeric: tabular-nums;
-    }
-    .watch-stat__label {
-      font-size: 11px;
-      font-weight: 600;
-      color: var(--ink-faint);
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      margin-top: 4px;
-    }
-
-    .watch-table-wrap { overflow-x: auto; margin-top: 6px; }
-    table.watch {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 13.5px;
-      color: var(--ink);
-    }
-    table.watch th, table.watch td {
-      padding: 8px 10px;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-      vertical-align: top;
-    }
-    table.watch th {
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      color: var(--ink-faint);
-      border-bottom: 1px solid var(--border-strong);
-      white-space: nowrap;
-    }
-    table.watch td.num { text-align: right; font-variant-numeric: tabular-nums; }
-    table.watch td.warn { color: var(--danger); font-weight: 600; }
-    table.watch tr:hover td { background: var(--surface-2); }
-    .watch-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.84rem; color: var(--info); }
-    .watch-empty { color: var(--ink-faint); font-size: 13px; padding: 10px 0; }
-    .watch-note { color: var(--ink-faint); font-size: 12.5px; margin-top: 10px; }
-    .watch-rank { font-size: 12px; color: var(--ink-faint); }
-    .watch-doc {
-      white-space: pre-wrap;
-      word-break: break-word;
-      font-family: ui-monospace, "SF Mono", Menlo, monospace;
-      font-size: 0.8rem;
-      line-height: 1.5;
-      max-height: 60vh;
-      overflow-y: auto;
-      padding: 12px;
-      margin-top: 8px;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-    }
-    .watch-sub-h, .watch-subh {
-      font-family: var(--font-display);
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--ink);
-      margin: 18px 0 4px;
-    }
-    .watch-sub-h:first-of-type { margin-top: 8px; }
-
-    /* Severity / status badges. */
-    .badge {
-      display: inline-block;
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      padding: 2px 8px;
-      border-radius: 999px;
-      border: 1px solid var(--border-strong);
-      color: var(--ink-soft);
-      white-space: nowrap;
-    }
-    .badge--sev-critical { background: var(--danger-weak); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
-    .badge--sev-high { background: var(--warn-weak); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
-    .badge--sev-medium { background: var(--info-weak); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
-    .badge--sev-low { background: var(--surface-2); color: var(--ink-soft); }
-    .badge--status { background: var(--surface-2); color: var(--ink-soft); }
-
-    /* Row action buttons + selects. */
-    .watch-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
-    .watch-btn {
-      font-family: var(--font-body);
-      font-size: 12.5px;
-      font-weight: 500;
-      padding: 5px 12px;
-      border: 1px solid var(--border-strong);
-      background: var(--surface);
-      color: var(--ink-soft);
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-    }
-    .watch-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
-    .watch-btn:disabled { opacity: 0.45; cursor: default; }
-    .watch-btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong)); }
-    .watch-select {
-      font-family: var(--font-body);
-      font-size: 13px;
-      padding: 4px 6px;
-      border: 1px solid var(--border-strong);
-      background: var(--surface);
-      color: var(--ink);
-      border-radius: var(--radius-sm);
-    }
-
-    .watch-req {
-      border-bottom: 1px solid var(--border);
-      padding: 12px 0;
-      display: flex; gap: 14px; flex-wrap: wrap;
-      align-items: flex-start; justify-content: space-between;
-    }
-    .watch-req__who { font-weight: 600; color: var(--ink); }
-    .watch-req__meta { color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
-    .watch-req__note { color: var(--ink); font-size: 13.5px; margin-top: 6px; max-width: 56ch; }
-
-    .watch-unavailable { color: var(--ink-faint); font-size: 13px; padding: 8px 0; }
-
-    .watch-trend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
-    .watch-trend__row {
-      display: grid; grid-template-columns: 84px 1fr 64px;
-      gap: 10px; align-items: center;
-      font-size: 13px; color: var(--ink);
-    }
-    .watch-trend__bar-track {
-      background: var(--surface-2); border-radius: 3px; height: 12px; overflow: hidden;
-      border: 1px solid var(--border);
-    }
-    .watch-trend__bar-fill { background: var(--accent); height: 100%; display: block; }
-    .watch-trend__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
-
-    .watch-list { list-style: none; padding: 0; margin: 8px 0 0; }
-    .watch-list li {
-      display: flex; justify-content: space-between; gap: 12px;
-      padding: 5px 0; border-bottom: 1px solid var(--border);
-      font-size: 13.5px;
-    }
-    .watch-list li .k { color: var(--ink); }
-    .watch-list li .v { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
-
-    .watch-foot-link {
-      display: inline-block; margin-top: 12px;
-      font-size: 13px; font-weight: 500;
-      color: var(--accent-text);
-    }
-
-    /* The in-page section rail: horizontal chip strip, sticky under the top bar
-       at every width (overrides .section-rail's desktop column layout). */
-    #watch-nav {
-      position: sticky;
-      top: var(--topbar-h);
-      z-index: 5;
-      flex-direction: row;
-      overflow-x: auto;
-      gap: 6px;
-      padding: 8px 0;
-      margin: 0 0 12px;
-      background: color-mix(in srgb, var(--bg) 92%, transparent);
-      backdrop-filter: blur(6px);
-    }
-    #watch-nav .rail-link {
-      white-space: nowrap;
-      border: 1px solid var(--border);
-      background: var(--surface);
-      border-radius: 999px;
-      padding: 4px 12px;
-      font-size: 12.5px;
-    }
-  </style>
+  <!-- Page-local styles (task 2173) — extracted from the old inline <style>
+       block per the hall placement rules; the attention tiles + tabs come from
+       style.css's shared .stat-row/.stat-tile + hall-kit rules. -->
+  <link rel="stylesheet" href="/builders/watch.css">
 </head>
 <body data-page="watch" data-page-title="Watch">
 
@@ -214,18 +25,6 @@
     <div class="app-content">
       <div class="page-head"><p class="page-head__sub" id="watch-sub">Loading…</p></div>
 
-      <nav class="section-rail" id="watch-nav" hidden aria-label="Watch sections">
-        <a class="rail-link" href="#gate-scroll">Access requests</a>
-        <a class="rail-link" href="#watch-scroll">Security</a>
-        <a class="rail-link" href="#roster-scroll">Roster</a>
-        <a class="rail-link" href="#box-costs-scroll">Box costs</a>
-        <a class="rail-link" href="#marks-scroll">Builder reviews</a>
-        <a class="rail-link" href="#mason-marks-scroll">Reviews</a>
-        <a class="rail-link" href="#surveyor-scroll">Estimates</a>
-        <a class="rail-link" href="#ledger-scroll">Repo health</a>
-        <a class="rail-link" href="#sessions-scroll">Sessions</a>
-      </nav>
-
       <main>
         <!-- Restricted notice — shown by watch.js when the viewer is not an Archon. -->
         <section class="scroll" id="sealed-scroll" aria-labelledby="sealed-h" hidden>
@@ -233,85 +32,110 @@
           <p class="scroll__lede" id="sealed-body">This page is available to Archons only.</p>
         </section>
 
-        <!-- 1. ACCESS REQUESTS -->
-        <section class="scroll" id="gate-scroll" aria-labelledby="gate-h" hidden>
-          <h2 id="gate-h" class="scroll__h">Access requests</h2>
-          <p class="scroll__lede">People asking to join. Approve or dismiss each request.</p>
-          <div id="gate-body"><p class="watch-empty">Loading access requests…</p></div>
-        </section>
-
-        <!-- 2. SECURITY -->
-        <section class="scroll" id="watch-scroll" aria-labelledby="watch-h" hidden>
-          <h2 id="watch-h" class="scroll__h">Security</h2>
-          <p class="scroll__lede">Vulnerability reports, engagement reports, override requests, and the audit log.</p>
-
-          <h3 class="watch-sub-h">Vulnerability reports</h3>
-          <div id="reports-body"><p class="watch-empty">Loading reports…</p></div>
-
-          <h3 class="watch-sub-h">Engagement reports</h3>
-          <p class="watch-note">Dated exploit-detail engagement reports — kept out of the repo (threat-model §6.3) and served only to Archons. Upload via POST /api/bongos/security/docs.</p>
-          <div id="engagement-docs-body"><p class="watch-empty">Loading engagement reports…</p></div>
-
-          <h3 class="watch-sub-h">Override requests</h3>
-          <div id="overrides-body"><p class="watch-empty">Loading the override queue…</p></div>
-
-          <h3 class="watch-sub-h">Audit log</h3>
-          <div id="audit-body"><p class="watch-empty">Loading the audit log…</p></div>
-        </section>
-
-        <!-- 3. ROSTER -->
-        <section class="scroll" id="roster-scroll" aria-labelledby="roster-h" hidden>
-          <h2 id="roster-h" class="scroll__h">Roster</h2>
-          <p class="scroll__lede">Every builder in {{worldName}} — rank, {{currency}}, karma, and active claims.</p>
-          <div id="roster-body"><p class="watch-empty">Loading the roster…</p></div>
-        </section>
-
-        <!-- 3b. BOX COSTS (#602) — per-builder dev-box cost ledger + totals. -->
-        <section class="scroll" id="box-costs-scroll" aria-labelledby="box-costs-h" hidden>
-          <h2 id="box-costs-h" class="scroll__h">Dev-box costs</h2>
-          <p class="scroll__lede">What each builder's dev box has cost — spin-up, compute, and storage. Tracked for oversight; not charged in the early stage.</p>
-          <div id="box-costs-body"><p class="watch-empty">Loading the cost ledger…</p></div>
-        </section>
-
-        <!-- 4. REVIEWS BY BUILDER -->
-        <section class="scroll" id="marks-scroll" aria-labelledby="marks-h" hidden>
-          <h2 id="marks-h" class="scroll__h">Reviews by builder</h2>
-          <p class="scroll__lede">How each builder's shipped work has been graded over the past thirty days.</p>
-          <div id="marks-body"><p class="watch-empty">Loading reviews…</p></div>
-        </section>
-
-        <!-- 5. REVIEW QUALITY -->
-        <section class="scroll" id="mason-marks-scroll" aria-labelledby="mason-marks-h" hidden>
-          <h2 id="mason-marks-h" class="scroll__h">Review quality</h2>
-          <p class="scroll__lede">Grades across all recent shipped work — a rolling aggregate.</p>
-          <div id="mason-marks-stats" class="watch-stats"></div>
-          <div id="mason-marks-trend"></div>
-        </section>
-
-        <!-- 6. ESTIMATION ACCURACY -->
-        <section class="scroll" id="surveyor-scroll" aria-labelledby="surveyor-h" hidden>
-          <h2 id="surveyor-h" class="scroll__h">Estimation accuracy</h2>
-          <p class="scroll__lede">How task estimates compare with the time work actually took.</p>
-          <div id="surveyor-stats" class="watch-stats"></div>
-          <div id="surveyor-body"></div>
-        </section>
-
-        <!-- 7. REPO HEALTH -->
-        <section class="scroll" id="ledger-scroll" aria-labelledby="ledger-h" hidden>
-          <h2 id="ledger-h" class="scroll__h">Repo health</h2>
-          <p class="scroll__lede">The shape and health of the codebase.</p>
-          <div id="ledger-stats" class="watch-stats"></div>
-          <div id="ledger-loc"></div>
-          <div id="ledger-files"></div>
-        </section>
-
-        <!-- 8. SESSIONS -->
-        <section class="scroll" id="sessions-scroll" aria-labelledby="sessions-h" hidden>
-          <h2 id="sessions-h" class="scroll__h">Sessions</h2>
-          <p class="scroll__lede">A tally of recorded work sessions. The full record lives on the Sessions page.</p>
-          <div id="sessions-stats" class="watch-stats"></div>
-          <a class="watch-foot-link" href="/sessions">View all sessions →</a>
-        </section>
+        <!-- task 2173: "what needs me today" first — the attention row's tiles
+             carry live counts and each links to the tab that holds the detail. -->
+        <div class="stat-row watch-attention" id="watch-attention" hidden>
+          <a class="stat-tile" href="#people"><span class="stat-tile__label">Access requests</span><span class="stat-tile__num" id="att-access">—</span><span class="stat-tile__sub">pending — People tab</span></a>
+          <a class="stat-tile" href="#security"><span class="stat-tile__label">Security reports</span><span class="stat-tile__num" id="att-security">—</span><span class="stat-tile__sub">open — Security tab</span></a>
+          <a class="stat-tile" href="#people"><span class="stat-tile__label">Stale claims</span><span class="stat-tile__num" id="att-stale">—</span><span class="stat-tile__sub">builders — People tab</span></a>
+          <a class="stat-tile" href="#operations"><span class="stat-tile__label">Sessions</span><span class="stat-tile__num" id="att-sessions">—</span><span class="stat-tile__sub">recorded — Operations tab</span></a>
+        </div>
+
+        <!-- task 2173: the nine surfaces sit behind three OTBKit tabs, hash-synced
+             (/watch#security). Evidence behind tabs; the attention row stays above. -->
+        <nav id="watch-tabs" hidden aria-label="Watch sections"></nav>
+
+        <!-- ============ tab: People ============ -->
+        <div id="pane-people" role="tabpanel" aria-labelledby="tab-people">
+
+          <!-- 1. ACCESS REQUESTS -->
+          <section class="scroll" id="gate-scroll" aria-labelledby="gate-h" hidden>
+            <h2 id="gate-h" class="scroll__h">Access requests</h2>
+            <p class="scroll__lede">People asking to join. Approve or dismiss each request.</p>
+            <div id="gate-body"><span class="kit-skel"></span></div>
+          </section>
+
+          <!-- 2. ROSTER -->
+          <section class="scroll" id="roster-scroll" aria-labelledby="roster-h" hidden>
+            <h2 id="roster-h" class="scroll__h">Roster</h2>
+            <p class="scroll__lede">Every builder in {{worldName}} — rank, {{currency}}, karma, and active claims.</p>
+            <div id="roster-body"><span class="kit-skel"></span></div>
+          </section>
+
+          <!-- 3. REVIEWS BY BUILDER -->
+          <section class="scroll" id="marks-scroll" aria-labelledby="marks-h" hidden>
+            <h2 id="marks-h" class="scroll__h">Reviews by builder</h2>
+            <p class="scroll__lede">How each builder's shipped work has been graded over the past thirty days.</p>
+            <div id="marks-body"><span class="kit-skel"></span></div>
+          </section>
+
+          <!-- 4. REVIEW QUALITY -->
+          <section class="scroll" id="mason-marks-scroll" aria-labelledby="mason-marks-h" hidden>
+            <h2 id="mason-marks-h" class="scroll__h">Review quality</h2>
+            <p class="scroll__lede">Grades across all recent shipped work — a rolling aggregate.</p>
+            <div id="mason-marks-stats" class="watch-stats"></div>
+            <div id="mason-marks-trend"></div>
+          </section>
+        </div>
+
+        <!-- ============ tab: Operations ============ -->
+        <div id="pane-operations" role="tabpanel" aria-labelledby="tab-operations" hidden>
+
+          <!-- 5. BOX COSTS (#602) — per-builder dev-box cost ledger + totals. -->
+          <section class="scroll" id="box-costs-scroll" aria-labelledby="box-costs-h" hidden>
+            <h2 id="box-costs-h" class="scroll__h">Dev-box costs</h2>
+            <p class="scroll__lede">What each builder's dev box has cost — spin-up, compute, and storage. Tracked for oversight; not charged in the early stage.</p>
+            <div id="box-costs-body"><span class="kit-skel"></span></div>
+          </section>
+
+          <!-- 6. SESSIONS -->
+          <section class="scroll" id="sessions-scroll" aria-labelledby="sessions-h" hidden>
+            <h2 id="sessions-h" class="scroll__h">Sessions</h2>
+            <p class="scroll__lede">A tally of recorded work sessions. The full record lives on the Sessions page.</p>
+            <div id="sessions-stats" class="watch-stats"></div>
+            <a class="watch-foot-link" href="/sessions">View all sessions →</a>
+          </section>
+
+          <!-- 7. REPO HEALTH -->
+          <section class="scroll" id="ledger-scroll" aria-labelledby="ledger-h" hidden>
+            <h2 id="ledger-h" class="scroll__h">Repo health</h2>
+            <p class="scroll__lede">The shape and health of the codebase.</p>
+            <div id="ledger-stats" class="watch-stats"></div>
+            <div id="ledger-loc"></div>
+            <div id="ledger-files"></div>
+          </section>
+        </div>
+
+        <!-- ============ tab: Security ============ -->
+        <div id="pane-security" role="tabpanel" aria-labelledby="tab-security" hidden>
+
+          <!-- 8. SECURITY -->
+          <section class="scroll" id="watch-scroll" aria-labelledby="watch-h" hidden>
+            <h2 id="watch-h" class="scroll__h">Security</h2>
+            <p class="scroll__lede">Vulnerability reports, engagement reports, override requests, and the audit log.</p>
+
+            <h3 class="watch-sub-h">Vulnerability reports</h3>
+            <div id="reports-body"><span class="kit-skel"></span></div>
+
+            <h3 class="watch-sub-h">Engagement reports</h3>
+            <p class="watch-note">Dated exploit-detail engagement reports — kept out of the repo (threat-model §6.3) and served only to Archons. Upload via POST /api/bongos/security/docs.</p>
+            <div id="engagement-docs-body"><span class="kit-skel"></span></div>
+
+            <h3 class="watch-sub-h">Override requests</h3>
+            <div id="overrides-body"><span class="kit-skel"></span></div>
+
+            <h3 class="watch-sub-h">Audit log</h3>
+            <div id="audit-body"><span class="kit-skel"></span></div>
+          </section>
+
+          <!-- 9. ESTIMATION ACCURACY -->
+          <section class="scroll" id="surveyor-scroll" aria-labelledby="surveyor-h" hidden>
+            <h2 id="surveyor-h" class="scroll__h">Estimation accuracy</h2>
+            <p class="scroll__lede">How task estimates compare with the time work actually took.</p>
+            <div id="surveyor-stats" class="watch-stats"></div>
+            <div id="surveyor-body"></div>
+          </section>
+        </div>
       </main>
 
       <footer class="app-foot" id="app-foot"></footer>
@@ -326,8 +150,10 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <!-- shared frontend toolkit (window.OTB) — loaded before watch.js, which pulls from it. -->
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
+<!-- shared component kit (window.OTBKit) — tabs, ledger, pager (task 2166). -->
+<script src="/builders/hall-kit.js"></script>
 <script src="/builders/task-detail.js?v=2026-07-03-taskdetail"></script>
 <script src="/builders/brand-apply.js?v=2026-06-19-r56"></script>
-<script src="/builders/watch.js?v=2026-06-19-r56"></script>
+<script src="/builders/watch.js?v=2026-07-10-tabs"></script>
 </body>
 </html>

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

@@ -29,6 +29,9 @@
   // 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;
+  // Shared component kit (hall-kit.js, task 2166): tabs, ledger, pager, empty
+  // states — adopted here by task 2173.
+  const { makeTabs, makeLedger, makePager, emptyStateHtml } = window.OTBKit;
   const fmtDate = (iso) => window.OTB.fmtDate(iso, { time: true });
   const rankLabel = (rank) => window.OTB.rankLabel(rank, { empty: '' });
   const toast = (msg) => window.OTB.toast(msg);
@@ -90,6 +93,13 @@
     target.innerHTML = `<p class="watch-unavailable">${escapeHtml(message)}</p>`;
   }
 
+  // task 2173 — the attention row: each tile carries a live count fed by the
+  // section loader that owns the data, and links to the tab holding the detail.
+  function setAttention(id, n) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = n == null ? '—' : fmtInt(n);
+  }
+
   // ---- shared render skeletons (C10) ----------------------------------------
 
   // section — the load→fetch→render→degrade skeleton every panel repeats. fetcher()
@@ -170,8 +180,9 @@
 
   function renderGate(data, target) {
     const requests = Array.isArray(data.requests) ? data.requests : [];
+    setAttention('att-access', requests.length); // tile count = table content
     if (!requests.length) {
-      target.innerHTML = '<p class="watch-empty">No pending access requests.</p>';
+      target.innerHTML = emptyStateHtml('No pending access requests.');
       return;
     }
     target.innerHTML = requests
@@ -220,11 +231,15 @@
   // =========================================================================
 
   // 2a. Red-team / vulnerability reports.
+  // A report still needing Archon attention: not yet resolved (fixed/disputed).
+  const OPEN_REPORT = (r) => !['fixed', 'disputed', 'dismissed'].includes(String(r.status || '').toLowerCase());
+
   function renderReports(data, target) {
     const reports = Array.isArray(data.reports) ? data.reports : [];
     const statuses = Array.isArray(data.statuses) ? data.statuses : [];
+    setAttention('att-security', reports.filter(OPEN_REPORT).length);
     if (!reports.length) {
-      target.innerHTML = '<p class="watch-empty">No vulnerability reports filed.</p>';
+      target.innerHTML = emptyStateHtml('No vulnerability reports filed.');
       return;
     }
     const rows = reports
@@ -282,7 +297,7 @@
   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>';
+      target.innerHTML = emptyStateHtml('No engagement reports filed. Upload one via POST /api/bongos/security/docs.');
       return;
     }
     const rows = docs
@@ -338,7 +353,7 @@
   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>';
+      target.innerHTML = emptyStateHtml('No overrides sought.');
       return;
     }
     const rows = requests
@@ -380,15 +395,19 @@
     });
   }
 
-  // 2c. Audit log (recent 50).
+  // 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.
   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>';
+      target.innerHTML = emptyStateHtml('No audit entries yet.');
       return;
     }
-    const body = rows
-      .map((r) => {
+    const pager = makePager('watch-audit', 'otb.watch.auditPerPage');
+    const ledger = makeLedger({
+      mount: target,
+      columns: ['When', 'Builder', 'Method', 'Route', { label: 'Status', class: 'num' }],
+      rowHtml: (r) => {
         const status = num(r.response_status);
         const warn = status >= 400 ? ' warn' : '';
         return (
@@ -402,11 +421,11 @@
           `<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>';
+      },
+      pager,
+    });
+    ledger.render(rows);
+    target.insertAdjacentHTML('beforeend', '<p class="watch-note">Newest first. The fifty most recent write operations.</p>');
   }
 
   function loadAudit() {
@@ -428,8 +447,9 @@
 
   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 = '<p class="watch-empty">No builders on the roster.</p>';
+        target.innerHTML = emptyStateHtml('No builders on the roster.');
         return;
       }
       const rows = builders
@@ -533,7 +553,7 @@
     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>';
+      target.innerHTML = emptyStateHtml('No dev-box costs accrued yet.');
       return;
     }
     const totalRows = totals
@@ -576,7 +596,7 @@
       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>';
+        target.innerHTML = emptyStateHtml('No reviews recorded in this window.');
         return;
       }
       const sorted = builders.slice().sort((a, b) => num(b.n) - num(a.n));
@@ -606,7 +626,7 @@
       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>';
+      target.innerHTML = emptyStateHtml('No reviews recorded in this window.');
     }
   }
 
@@ -628,7 +648,7 @@
 
     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>';
+      trendEl.innerHTML = emptyStateHtml('No trend to show yet.');
       return;
     }
     const maxN = Math.max(1, ...trend.map((t) => num(t.n)));
@@ -671,7 +691,7 @@
     ]);
     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>';
+      body.innerHTML = emptyStateHtml('No drift recorded by version yet.');
       return;
     }
     const rows = byVersion
@@ -778,6 +798,7 @@
 
   function renderSessions(data, stats) {
     const t = data.totals || {};
+    setAttention('att-sessions', t.total);
     stats.innerHTML = statCards([
       { num: fmtInt(t.total), label: 'Sessions' },
       { num: fmtInt(t.builders), label: 'Builders' },
@@ -805,15 +826,32 @@
     gate.hidden = false;
   }
 
+  // task 2173 — the nine surfaces sit behind three hash-synced kit tabs
+  // (/watch#security deep-links; the "#/…" record-overlay namespace is left
+  // alone by makeTabs). Built only for a verified Archon in revealSections.
+  let watchTabs = null;
+
   function revealSections() {
     [
-      'watch-nav', 'gate-scroll', 'watch-scroll', 'roster-scroll', 'box-costs-scroll', 'marks-scroll',
-      'mason-marks-scroll', 'surveyor-scroll', 'ledger-scroll', 'sessions-scroll',
+      'watch-attention', 'watch-tabs', '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;
+    if (!watchTabs) {
+      watchTabs = makeTabs({
+        mount: $('#watch-tabs'),
+        hash: true,
+        initial: 'people',
+        tabs: [
+          { id: 'people', label: 'People', panel: 'pane-people' },
+          { id: 'operations', label: 'Operations', panel: 'pane-operations' },
+          { id: 'security', label: 'Security', panel: 'pane-security' },
+        ],
+      });
+    }
   }
 
   async function load() {