@bongos/core 1.19.456 → 1.19.458

package/docs/file-map.md

@@ -127,7 +127,7 @@
 │   ├── sessions/                ← CORE-DOMAIN carve (BV1.R82, default-on): the session_records corpus + data plane (upload, cross-builder search/deep-dive), the BFG read-the-room scorer, session-pulse/stale-claim helpers. Registers no port — reached via HTTP POST to its own /sessions route; resolves the economy `reward` port for the cost-plus token reward. CLAUDE.md, module.json, routes/sessions.js, bfg.js, pulse.js.
 │   ├── autonomy/                ← CORE-DOMAIN carve (BV1.R83, default-on): the MAS autonomy surfaces — the $0 deterministic autonomy gate (System 3, inert until armed), the conductor/architect CLIs, and the in-process routine timers (incl. the weekly peer-vote-tally poller). Registers no port; resolves the lifecycle `tallyPeerVotes` doorway. CLAUDE.md, module.json, routes/autonomy.js, autonomy.js.
 │   ├── status-ui/              ← CORE-DOMAIN WEB-SURFACE carve (BV1.R84, default-on): the public status dashboard at status.<apex>, moved from public-status/. NO routes/db/port — declares contributes.webSurfaces:[{host:"status.",dir:"public"}], served by the loader web-surface seam (moduleWebSurfaces → serve-internal). CLAUDE.md, module.json, public/{index.html,status.js,style.css,cursors/,snapshots/}.
-│   ├── hall-ui/                ← CORE-DOMAIN WEB-SURFACE carve (BV1.R85, default-on): the authenticated builders' hall at builders.<apex>, moved from public-builders/ (~13k LOC, the largest). NO routes/db/port — declares contributes.webSurfaces:[{host:"builders.",dir:"public"}] for discovery, but UNLIKE status-ui keeps its DEDICATED serving block in serve-internal (the /builders shim + canonical redirects + citizen/Archon page gates + asset-stamping + hall-widget injection), partitioned out of the generic web-surface loop and served from BUILDERS_DIR. CLAUDE.md, module.json, public/{index.html,builders.js,style.css,work,watch,harbor,gate,pair,settings,ranks,sessions,primer,diagrams,atlas,...}.{html,js},cursors/,chime.wav. Two ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305) and `room.css` (the READING ROOMS — the primer + the diagrams index, task 1003306: the reading measure and rhythm, the table of contents, the progress hairline and the framed figure diagram-viewer.js upgrades on both pages). A page sheet then holds only what one page has and the other does not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip.
+│   ├── hall-ui/                ← CORE-DOMAIN WEB-SURFACE carve (BV1.R85, default-on): the authenticated builders' hall at builders.<apex>, moved from public-builders/ (~13k LOC, the largest). NO routes/db/port — declares contributes.webSurfaces:[{host:"builders.",dir:"public"}] for discovery, but UNLIKE status-ui keeps its DEDICATED serving block in serve-internal (the /builders shim + canonical redirects + citizen/Archon page gates + asset-stamping + hall-widget injection), partitioned out of the generic web-surface loop and served from BUILDERS_DIR. CLAUDE.md, module.json, public/{index.html,builders.js,style.css,work,watch,harbor,gate,pair,settings,ranks,sessions,primer,diagrams,atlas,...}.{html,js},cursors/,chime.wav. Three ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305), `room.css` (the READING ROOMS — the primer + the diagrams index, task 1003306: the reading measure and rhythm, the table of contents, the progress hairline and the framed figure diagram-viewer.js upgrades on both pages) and `oversight.css` (the OVERSIGHT family — government, watch, harbor, gate, task 1003469: the row, the figure band inside a panel, the group head, the inline form, the grant toggle and the shared confirm modal; named oversight because the vocabulary wall bans "governance" on the government surface). A page sheet then holds only what one page has and the others do not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip, `gate.css` the hold reasons and file chips, `watch.css` the severities, the report reader and the grade trend.
 │   ├── lifecycle/               ← CORE-DOMAIN carve (BV1.R86, default-on): the build state machine — tasks · claims · versions · done-when · goals · dependencies · claim→ship→grade→credit · github-push + merge-lock + conflict-resolve + publish-reconciler. The LAST, most-coupled carve; registers the `lifecycle` kernel port (createTask, classifyTaskKind, tallyPeerVotes, work-tracking reads). CLAUDE.md, module.json, routes/{tasks,claims,versions,done-when,goals,dependencies,gate-approvals,analytics}.js, lifecycle.js, github-push.js, merge-lock.js, conflict-resolve.js, publish-reconciler.js, task-visuals.js + task-visual-db.js + routes/visuals.js (the optional ship-time visual, task 1003109 — the route file is NOT named task-*.js on purpose; see the module CLAUDE.md).
 │   ├── copy-desk/               ← CORE-DOMAIN module (task 1003113 / R02 of goal 1000074, default-on): the COPY half of the design contract — ADR 0081 gave design TOKENS a repo-owned source of truth, text had none. Owns the FLAG (anyone in any role marks a string or a whole surface as needing an artist's attention, with a reason required in BOTH the route and a CHECK constraint) and the QUEUE an artist reads it from. READS R01's committed registry (docs/copy-registry.json, generated by scripts/gds/copy-inventory.js) and never writes it. NO LIVE CMS is the hard non-goal: no column here could hold replacement text, and copy_no_cms.mjs pins that. Key is `copy-desk`, not `copy` — the branding contract already owns a `copy` block, so the bare word reds the "core carries no module code" fitness check. CLAUDE.md, module.json, registry.js, flags.js, routes/copy-desk.js, migrations/copy_desk_001_flags.sql, tests/{copy_flags,copy_queue,copy_no_cms}.mjs. Its hall surface lives with hall-ui (public/copy-desk.{html,js,css}), per the one-key-per-web-surface precedent.
 │   ├── ui-design/               ← CORE-DOMAIN module (task 1003324 / ADR 0197, default-on): the design capability every builder on every instance gets — ships METHOD, never a world. Absorbs ADR 0081's layer: adapters/{claude-design,figma}/index.js (moved from src/ui/adapters/), scripts/{design-sync,figma-design-sync,validate-design}.js (moved from scripts/gds/, which keeps thin shims), docs/design-contract.md (moved from docs/). Declaration-only: contributes.skills design (the /design playbook, new) + design-sync + figma-design-sync; no routes/port/migrations, so disabling it touches no served surface. CLAUDE.md separates the platform FLOORS (the Fifteen Rule, the dark twins, no page :root, the 24px floor, AA in both modes, the kill switch) from the instance's WORLD (its packs + DESIGN.md). kit/ (task 1003320) is the look-before-you-ship kit: lib.js (the floors, the states/probes contracts, the action + expectation vocabularies, the WCAG maths, the stub spawner), serve.js (any surface through the doorway's real transforms + fixtures/), render.js (states × 1440/390/320 × dark/light, audited), probe.js (PASS/FAIL contracts), check-mock.js (platform rules + the instance's DESIGN.md taste bans), contrast.js + png.js; a page's <page>.states.json / <page>.probes.json sit BESIDE the surface (modules/public-landing/public/, modules/hall-ui/public/). Recipe: docs/recipes/ui-look-before-you-ship.md. skills/ (task 1003321 / ADR 0198) is the vendoring policy: policy.json (licence allowlist, verdicts that may land, sidecar fields, preamble markers), PREAMBLE.md (the platform preamble every vendored SKILL.md opens with), README.md (the roster — both origins scanned dangerous on 2026-08-28, landed as rebuild specs; nothing vendored — and the landing recipe); a landable copy goes under skills/vendor/<name>/ with PROVENANCE.md + LICENSE and is materialised into an instance's .claude/skills/ by claude-materialize.js step 1b. Reserved home styles/ (1003323) with a README. config/design-tokens.* + design-sources.json STAY in config/ as the host boundary; public-landing keeps its own key (first customer, not owner).

package/docs/module-api-changelog.md

@@ -1349,5 +1349,9 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.454 with no explicit bump. run 33558738299. (task 1002620)
   1.19.456 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.455 with no explicit bump. run 33560584235. (task 1002620)
+  1.19.457 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.456 with no explicit bump. run 33561330390. (task 1002620)
+  1.19.458 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.457 with no explicit bump. run 33566876510. (task 1002620)
 ---------------------------------------------------------------------------
 ```

package/modules/hall-ui/public/gate.css

@@ -1,93 +1,25 @@
-/* gate.css — Page-local styles for the Gate page (Archon-only).
-   Lifted verbatim out of the page's inline <style> block (task 1002176);
-   the ?v= cache-bust is stamped automatically from this file's content hash
+/* gate.css — Page-local styles for the Gate (task 1003469 rebuild).
+   One panel of oversight rows, one held pull request per row, over the shell's
+   glass summary strip; everything structural is oversight.css. What is the
+   gate's own: the hold reasons (a hard floor reads in the danger ink), and the
+   changed-file run. The ?v= cache-bust is stamped from this file's content hash
    at boot (src/asset-version.js). */
 
-/* Page-local styles for the Gate — approvals for held pull requests. Built
-   on the shared design tokens (style.css): each held PR is a card with a
-   verdict-colored top band and per-file reasons for the hold. */
-.gate-summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 14px;
-  margin: 6px 0 22px;
-}
-.gate-stat {
-  border: var(--line) solid var(--rule-soft); border-radius: var(--radius-sm);
-  background: var(--bg-card); padding: 12px 14px;
-}
-.gate-stat__label {
-  font-size: 11.5px; font-weight: 600;
-  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
-}
-.gate-stat__value {
-  font-size: 1.6rem; font-weight: 600; color: var(--ink);
-  font-variant-numeric: tabular-nums; margin-top: 2px;
-}
+/* A hold reason: the path in the machine's face, the reason beside it. A hard
+   floor is the danger ink on the path and a name on the line, never a flag glyph. */
+.gate-reason .ov-key { max-width: 40%; }
+.gate-reason--floor .ov-key { color: var(--danger); }
+.gate-reason__floor { font-family: var(--label-face); font-size: 10.5px; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--danger); white-space: nowrap; }
 
-.gate-list { display: flex; flex-direction: column; gap: 16px; }
+/* The changed files: one chip per path, wrapping, the overflow named as a count. */
+.gate-files { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; }
+.gate-files .fact-chip { text-transform: none; letter-spacing: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.gate-files__more { align-self: center; font-size: 12px; color: var(--ink-faint); }
 
-.gate-crate {
-  border: var(--line) solid var(--rule-soft); border-radius: var(--radius);
-  background: var(--bg-card); overflow: hidden;
-}
-/* Verdict band along the top, painted by the held-verdict. */
-.gate-crate__seal { height: 4px; background-color: var(--danger); }
-.gate-crate--needs_trust .gate-crate__seal { background-color: var(--warn); }
-.gate-crate__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
-.gate-crate__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
-.gate-crate__title { font-weight: 600; color: var(--ink); font-size: 15px; }
-.gate-crate__title a { color: inherit; text-decoration: none; }
-.gate-crate__title a:hover { text-decoration: underline; }
-.gate-crate__meta { color: var(--ink-soft); font-size: 12.5px; }
-.gate-crate__meta a { color: var(--accent-ink); }
-
-/* Base: the shell's .fact-pill (task 1003307). States are hairlines, not fills. */
-.gate-pill--escalate { color: var(--danger); }
-.gate-pill--needs_trust { color: var(--warn); }
-.gate-pill--trusted { color: var(--info); }
-
-.gate-reasons { list-style: none; padding: 0; margin: 0; }
-.gate-reasons li {
-  padding: 6px 0; border-bottom: var(--line) solid var(--rule-soft);
-  font-size: 13px; color: var(--ink);
-}
-.gate-reasons li:last-child { border-bottom: 0; }
-.gate-reasons code {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--accent-ink); background: var(--glass);
-  padding: 1px 5px; border-radius: 4px;
-}
-.gate-reasons .floor { color: var(--danger); font-weight: 600; }
-
-.gate-files { font-size: 12.5px; color: var(--ink-soft); }
-.gate-files code { font-family: var(--font-mono); }
-
-.gate-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
-.gate-btn {
-  font: inherit; font-size: 13px; font-weight: 600;
-  padding: 7px 16px; border: var(--line) solid var(--accent);
-  background: var(--accent); color: var(--accent-on);
-  border-radius: var(--radius-sm); cursor: pointer;
-}
-.gate-btn:hover:not(:disabled) { background: var(--accent-lift); border-color: var(--accent-lift); }
-.gate-btn:disabled { opacity: 0.45; cursor: default; }
-.gate-btn--ghost { background: var(--bg-card); color: var(--ink); border-color: var(--rule); }
-.gate-btn--ghost:hover:not(:disabled) { background: var(--glass); border-color: var(--rule); }
-.gate-approved-note { color: var(--ok); font-size: 13px; }
-
-.gate-empty, .gate-sealed { color: var(--ink-soft); padding: 16px 0; }
-.gate-checking { color: var(--ink-faint); font-size: 12.5px; margin-top: 10px; }
-
-/* Lightweight confirm modal (mirrors harbor). */
-.gate-modal-bg {
-  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 40%, transparent);
-  display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 20px;
-}
-.gate-modal {
-  background: var(--bg-card); border: var(--line) solid var(--rule); border-radius: var(--radius);
-  max-width: 480px; width: 100%; padding: 20px 22px; box-shadow: var(--shadow-pop);
+/* On a phone the path takes the line with its floor label at the right, and the
+   reason drops under it in full width. */
+@media (max-width: 640px) {
+  .gate-reason .ov-key { max-width: none; }
+  .gate-reason > span:nth-of-type(2) { flex: 1 1 100%; order: 3; }
+  .gate-reason__floor { margin-left: auto; }
 }
-.gate-modal h2 { color: var(--ink); margin: 0 0 8px; font-size: 17px; font-weight: 600; }
-.gate-modal p { color: var(--ink); font-size: 13.5px; margin: 0 0 12px; }
-.gate-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

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

@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/gate.css">
 </head>
 <body data-page="gate" data-page-title="Gate">
@@ -19,25 +20,35 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. Gate shipped with NO <h1> at all
-           (one-header-main-h1 measured 0 on every render), so the re-skin
-           carries the structural fix rather than porting the hole. The heading
-           is the LABEL voice, not a display line: on a working surface the
-           page's own name is the least interesting thing on it. -->
+      <!-- The board page head (task 1003307): the LABEL voice, not a display
+           line, because on a working surface the page's own name is the least
+           interesting thing on it. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Gate</h1>
         <p class="page-head__sub" id="gate-sub">Loading…</p>
       </div>
 
       <main id="hall-main">
-        <p class="gate-sealed" id="gate-sealed" hidden>Archons only.</p>
+        <!-- task 1003469: the sealed state is a panel with a heading, not a bare
+             line on the ground. gate.js writes the real floor into the lede from
+             the pack's rank label, so the copy cannot drift from ADR 0157. -->
+        <section class="scroll" id="gate-sealed" aria-labelledby="gate-sealed-h" hidden>
+          <h2 class="scroll__h" id="gate-sealed-h">Restricted</h2>
+          <p class="scroll__lede" id="gate-sealed-body">This page opens at a higher rank.</p>
+        </section>
 
         <section id="gate-body" hidden>
-          <div class="gate-summary" id="gate-summary"></div>
-          <div class="gate-list" id="gate-list">
-            <p class="gate-empty">Loading held pull requests…</p>
-          </div>
-          <p class="gate-checking" id="gate-checking" hidden></p>
+          <!-- The glass summary strip (the shell's .stat-row), then ONE panel of
+               oversight rows, one held pull request each — the bordered crate
+               with a verdict band along its top is gone (task 1003469). -->
+          <div class="stat-row ov-summary" id="gate-summary" aria-label="Held changes summary"></div>
+
+          <section class="scroll" aria-labelledby="gate-list-h">
+            <h2 class="scroll__h" id="gate-list-h">Held pull requests</h2>
+            <p class="scroll__lede">Each one touched a protected surface and stopped at the gate check. Approving records your seal on that commit and re-runs the check.</p>
+            <div id="gate-list"><span class="kit-skel"></span></div>
+            <p class="ov-foot" id="gate-checking" hidden></p>
+          </section>
         </section>
       </main>
 
@@ -53,6 +64,7 @@
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-16-gate"></script>
-<script src="/builders/gate.js?v=2026-07-03-gate-shell"></script>
+<script src="/builders/hall-kit.js"></script>
+<script src="/builders/gate.js?v=2026-09-02-gate-rows"></script>
 </body>
 </html>

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

@@ -3,9 +3,9 @@
 // Archon-only approval view for gate-surface PRs (task 1179, ADR 0058 amendment).
 // A pull request that touches the build's protected machinery is held by the
 // gate-review CI check until the owner approves. This page lists every such PR
-// with WHY it was stopped (the same classifier the CI runs), and an Approve
-// button that records the owner's seal (a server-set gate-owner-approved status)
-// and re-runs the check so the PR merges.
+// as one oversight row (task 1003469) with WHY it was stopped (the same
+// classifier the CI runs), and an Approve button that records the owner's seal
+// (a server-set gate-owner-approved status) and re-runs the check so the PR merges.
 //
 // Like The Watch + The Harbor, this reads /api/bongos/me to show a Sealed notice for
 // non-Archons — DEFENCE IN DEPTH only. GET /gate-approvals + POST
@@ -21,6 +21,8 @@
   // through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
   const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
   const { escapeHtml, fmtInt } = window.OTB;
+  const { emptyStateHtml } = window.OTBKit;
+  const rankLabel = (rank) => window.OTB.rankLabel(rank, { empty: '' });
   const toast = (msg) => window.OTB.toast(msg);
 
   // ---- fetch helpers (mirror harbor.js / watch.js) -------------------------
@@ -46,8 +48,10 @@
   const shortSha = (s) => (typeof s === 'string' ? s.slice(0, 7) : '');
   const VERDICT_LABEL = { escalate: 'Hard floor', needs_trust: 'Needs trust', pass: 'Clear' };
   const verdictLabel = (v) => VERDICT_LABEL[v] || (v || 'held');
+  // How many files a row shows before it names the rest as a count.
+  const FILES_SHOWN = 12;
 
-  // ---- modal (mirrors harbor) ----------------------------------------------
+  // ---- modal (the oversight family's, oversight.css) -----------------------
 
   function closeModal() {
     const root = document.getElementById('gate-modal-root');
@@ -58,20 +62,23 @@
     const root = document.getElementById('gate-modal-root');
     root.innerHTML = '';
     const bg = document.createElement('div');
-    bg.className = 'gate-modal-bg';
+    bg.className = 'ov-modal-bg';
     bg.innerHTML =
-      `<div class="gate-modal" role="dialog" aria-modal="true">
-        <h2>${escapeHtml(title)}</h2>
+      `<div class="ov-modal" role="dialog" aria-modal="true" aria-labelledby="gate-modal-h">
+        <h2 class="scroll__h" id="gate-modal-h">${escapeHtml(title)}</h2>
         ${bodyHtml}
-        <div class="gate-modal__actions">
-          <button class="gate-btn gate-btn--ghost" data-act="cancel">Cancel</button>
-          <button class="gate-btn" data-act="confirm">${escapeHtml(confirmLabel)}</button>
+        <div class="ov-modal__actions">
+          <button type="button" class="btn-ghost" data-act="cancel">Cancel</button>
+          <button type="button" class="btn-accent" data-act="confirm">${escapeHtml(confirmLabel)}</button>
         </div>
       </div>`;
     bg.addEventListener('click', (e) => { if (e.target === bg) closeModal(); });
+    bg.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
     bg.querySelector('[data-act=cancel]').addEventListener('click', closeModal);
     bg.querySelector('[data-act=confirm]').addEventListener('click', () => onConfirm(bg));
     root.appendChild(bg);
+    const confirm = bg.querySelector('[data-act=confirm]');
+    if (confirm) confirm.focus();
   }
 
   // ---- actions -------------------------------------------------------------
@@ -79,13 +86,13 @@
   function confirmApprove(pr) {
     const floors = (pr.reasons || []).filter((r) => r.hard_floor).map((r) => r.path);
     const what = floors.length
-      ? `the hard-floor surface ${floors.slice(0, 3).map((p) => `<code>${escapeHtml(p)}</code>`).join(', ')}`
+      ? `the hard-floor surface ${floors.slice(0, 3).map((p) => `<span class="ov-key">${escapeHtml(p)}</span>`).join(', ')}`
       : 'a protected build surface';
     openModal({
       title: `Approve PR #${pr.number}?`,
       bodyHtml:
         `<p>Record your owner approval for <strong>${escapeHtml(pr.title || `PR #${pr.number}`)}</strong>${pr.task ? ` (task ${pr.task})` : ''}.</p>
-         <p>This clears ${what}. The gate check re-runs and the PR merges once it goes green. Your approval applies only to commit <code>${escapeHtml(shortSha(pr.head_sha))}</code> — a later push must be re-approved.</p>`,
+         <p>This clears ${what}. The gate check re-runs and the PR merges once it goes green. Your approval applies only to commit <span class="ov-key">${escapeHtml(shortSha(pr.head_sha))}</span>; a later push must be re-approved.</p>`,
       confirmLabel: 'Approve & re-run',
       onConfirm: async (modal) => {
         const btn = modal.querySelector('[data-act=confirm]');
@@ -106,66 +113,70 @@
 
   // ---- render --------------------------------------------------------------
 
-  function renderCrate(pr) {
-    const mod = pr.verdict === 'needs_trust' ? 'needs_trust' : 'escalate';
-    const reasonsHtml = (pr.reasons || []).map((r) =>
-      `<li><code>${escapeHtml(r.path)}</code> — <span class="${r.hard_floor ? 'floor' : ''}">${r.hard_floor ? '⚑ ' : ''}${escapeHtml(r.reason)}</span></li>`
-    ).join('') || '<li>This PR is held by the gate-review check.</li>';
+  // One held PR, one oversight row (oversight.css .ov-row). This is the page
+  // that shows the most facts in the hall — title, verdict, trust, task, PR,
+  // author, sha, diff, every hold reason and the changed files — and every one
+  // of them survives the rebuild: the verdict is a state pill instead of a band,
+  // the reasons are hairline detail lines, the files are chips.
+  function renderRow(pr) {
+    const floor = pr.verdict !== 'needs_trust';
+    const reasons = (pr.reasons || []).map((r) =>
+      `<li class="gate-reason${r.hard_floor ? ' gate-reason--floor' : ''}">` +
+      `<span class="ov-key">${escapeHtml(r.path)}</span>` +
+      `<span>${escapeHtml(r.reason)}</span>` +
+      (r.hard_floor ? '<span class="gate-reason__floor">hard floor</span>' : '') +
+      '</li>').join('')
+      || '<li><span>This PR is held by the gate-review check.</span></li>';
 
     const files = pr.files || [];
-    const shownFiles = files.slice(0, 12).map((f) => `<code>${escapeHtml(f.path)}</code>`).join(' · ');
-    const moreFiles = files.length > 12 ? ` · +${files.length - 12} more` : '';
+    const chips = files.slice(0, FILES_SHOWN).map((f) =>
+      `<span class="fact-chip" title="${escapeHtml(f.path)}">${escapeHtml(f.path)}</span>`).join('');
+    const more = files.length > FILES_SHOWN ? `<span class="gate-files__more">+${files.length - FILES_SHOWN} more</span>` : '';
     const filesHtml = files.length
-      ? `<p class="gate-files">Changed files (${files.length}): ${shownFiles}${moreFiles}</p>`
+      ? `<div class="gate-files" aria-label="Changed files"><span class="ov-fact">${fmtInt(files.length)} file${files.length === 1 ? '' : 's'}</span>${chips}${more}</div>`
       : '';
 
-    const taskHtml = pr.task
-      ? `<a href="/#/task/${encodeURIComponent(pr.task)}">task ${escapeHtml(String(pr.task))}</a> · `
-      : '';
-    const trustedPill = pr.author_trusted
-      ? `<span class="gate-pill gate-pill--trusted">author trusted</span>` : '';
-
-    const actionsHtml = pr.already_approved
-      ? `<span class="gate-approved-note">✓ Approved — re-check pending.</span>`
-      : `<button class="gate-btn" data-act="approve">Approve</button>`;
-
-    const el = document.createElement('article');
-    el.className = `gate-crate gate-crate--${mod}`;
+    const facts = [
+      `<span class="fact-pill fact-pill--${floor ? 'danger' : 'warn'}">${escapeHtml(verdictLabel(pr.verdict))}</span>`,
+      pr.author_trusted ? '<span class="fact-pill fact-pill--info">author trusted</span>' : '',
+      pr.task ? `<span class="ov-fact"><a href="/#/task/${encodeURIComponent(pr.task)}">task ${escapeHtml(String(pr.task))}</a></span>` : '',
+      `<span class="ov-fact">by <b>${escapeHtml(pr.author || 'unknown')}</b></span>`,
+      `<span class="ov-mono">${escapeHtml(shortSha(pr.head_sha))}</span>`,
+      `<span class="ov-fact"><a href="${escapeHtml(pr.url)}/files" target="_blank" rel="noopener">view diff</a></span>`,
+    ].filter(Boolean).join('');
+
+    const action = pr.already_approved
+      ? '<span class="ov-fact ov-ok">Approved. Re-check pending.</span>'
+      : '<button type="button" class="btn-accent" data-act="approve">Approve</button>';
+
+    const el = document.createElement('li');
+    el.className = 'ov-row';
     el.innerHTML =
-      `<div class="gate-crate__seal" aria-hidden="true"></div>
-       <div class="gate-crate__body">
-         <div class="gate-crate__head">
-           <span class="gate-crate__title"><a href="${escapeHtml(pr.url)}" target="_blank" rel="noopener">${escapeHtml(pr.title || `PR #${pr.number}`)}</a></span>
-           <span>
-             <span class="gate-pill gate-pill--${mod}">${escapeHtml(verdictLabel(pr.verdict))}</span>
-             ${trustedPill}
-           </span>
-         </div>
-         <p class="gate-crate__meta">
-           ${taskHtml}<a href="${escapeHtml(pr.url)}" target="_blank" rel="noopener">#${escapeHtml(String(pr.number))}</a>
-           · by ${escapeHtml(pr.author || 'unknown')} · <code>${escapeHtml(shortSha(pr.head_sha))}</code>
-           · <a href="${escapeHtml(pr.url)}/files" target="_blank" rel="noopener">view diff ↗</a>
-         </p>
-         <ul class="gate-reasons">${reasonsHtml}</ul>
+      `<div class="ov-row__main">
+         <a class="ov-row__title" href="${escapeHtml(pr.url)}" target="_blank" rel="noopener">${escapeHtml(pr.title || `PR #${pr.number}`)}<span class="ov-mono">#${escapeHtml(String(pr.number))}</span></a>
+         <div class="ov-row__facts">${facts}</div>
+         <ul class="ov-lines">${reasons}</ul>
          ${filesHtml}
-         <div class="gate-actions">${actionsHtml}</div>
-       </div>`;
+       </div>
+       <div class="ov-row__right">${action}</div>`;
 
     const approveBtn = el.querySelector('[data-act=approve]');
     if (approveBtn) approveBtn.addEventListener('click', () => confirmApprove(pr));
     return el;
   }
 
+  // The glass strip above the panel: the shell's .stat-row, each tile a figure
+  // with the one clause that makes it a fact rather than a number.
   function renderSummary(awaiting) {
     const floors = awaiting.filter((p) => p.verdict === 'escalate').length;
     const trust = awaiting.filter((p) => p.verdict === 'needs_trust').length;
-    const stats = [
-      ['Awaiting your approval', fmtInt(awaiting.length)],
-      ['Hard-floor holds', fmtInt(floors)],
-      ['Trust holds', fmtInt(trust)],
+    const tiles = [
+      ['Awaiting your approval', fmtInt(awaiting.length), 'held at the gate check'],
+      ['Hard-floor holds', fmtInt(floors), 'touch a surface only an owner may clear'],
+      ['Trust holds', fmtInt(trust), 'an author the gate does not yet trust'],
     ];
-    document.getElementById('gate-summary').innerHTML = stats.map(([label, value]) =>
-      `<div class="gate-stat"><div class="gate-stat__label">${escapeHtml(label)}</div><div class="gate-stat__value">${value}</div></div>`).join('');
+    document.getElementById('gate-summary').innerHTML = tiles.map(([label, num, sub]) =>
+      `<div class="stat-tile"><span class="stat-tile__label">${escapeHtml(label)}</span><span class="stat-tile__num">${num}</span><span class="stat-tile__sub">${escapeHtml(sub)}</span></div>`).join('');
   }
 
   async function load() {
@@ -177,7 +188,7 @@
     } catch (err) {
       if (err && err.kind === '401') return;
       if (err && err.kind === '403') { showSealed(); return; }
-      list.innerHTML = `<p class="gate-empty">Could not load held pull requests just now.</p>`;
+      list.innerHTML = emptyStateHtml('Could not load held pull requests just now.');
       return;
     }
 
@@ -185,15 +196,18 @@
     renderSummary(awaiting);
 
     if (awaiting.length === 0) {
-      list.innerHTML = `<p class="gate-empty">Nothing is waiting — no held changes need your approval.</p>`;
+      list.innerHTML = emptyStateHtml('Nothing is waiting. No held change needs your approval.');
     } else {
       list.innerHTML = '';
-      for (const pr of awaiting) list.appendChild(renderCrate(pr));
+      const rows = document.createElement('ul');
+      rows.className = 'ov-rows';
+      for (const pr of awaiting) rows.appendChild(renderRow(pr));
+      list.appendChild(rows);
     }
 
     if (resp.checking > 0) {
       checkingEl.hidden = false;
-      checkingEl.textContent = `${resp.checking} more PR${resp.checking === 1 ? '' : 's'} still being checked — refresh shortly.`;
+      checkingEl.textContent = `${resp.checking} more PR${resp.checking === 1 ? '' : 's'} still being checked. Refresh shortly.`;
     } else {
       checkingEl.hidden = true;
     }
@@ -203,10 +217,13 @@
     document.getElementById('gate-sealed').hidden = false;
     document.getElementById('gate-body').hidden = true;
     document.getElementById('gate-sub').textContent = 'Restricted.';
+    // The floor in the pack's own words (ADR 0157: metic), never a rank spelled into the source.
+    const body = document.getElementById('gate-sealed-body');
+    if (body) body.textContent = `Available from the ${rankLabel('metic')} rank up.`;
   }
 
   async function init() {
-    // Confirm rank=archon for a friendly sealed notice; the server gates the page
+    // Confirm the viewer's rank for a friendly sealed notice; the server gates the page
     // + every endpoint regardless (cosmetic defence-in-depth).
     let me;
     try {

package/modules/hall-ui/public/gate.states.json

@@ -46,6 +46,23 @@
     },
     "out": {
       "auth": false
+    },
+    "approve": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "clickIfVisible",
+          "[data-act=approve]"
+        ],
+        [
+          "wait",
+          250
+        ]
+      ]
     }
   },
   "reducedMotion": {
@@ -56,5 +73,6 @@
         600
       ]
     ]
-  }
+  },
+  "_states": "task 1003469: `approve` opens the confirm modal on the first held PR. clickIfVisible, because the kit's own stub carries no /gate-approvals fixture and renders the empty list — the modal is measured against the harness."
 }