@bongos/core 1.19.468 → 1.19.470

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

@@ -1,8 +1,11 @@
-// atlas.js — the Repo Atlas renderer (ADR 0094, idea #457; restyled task 1737).
-// Reads the server-generated /builders/atlas.json (produced by
-// scripts/gds/gen-atlas.js on every deploy) and draws an isometric,
-// hover-connective, click-for-detail map of the repository. Two views: the
-// .md/context layer and the module truth.
+// atlas.js — the Repo Atlas renderer (ADR 0094, idea #457; restyled task 1737;
+// redesigned task 1003472). Reads the server-generated /builders/atlas.json
+// (produced by scripts/gds/gen-atlas.js on every deploy) and draws an
+// isometric, hover-connective, click-for-detail map of the repository. Two
+// views: the .md/context layer and the module truth. Under the map, the ISLAND
+// INDEX renders the same nodes as rows a keyboard or a phone can open — the
+// scene is a hover surface, so without the index a third of the hall's readers
+// could not reach a single detail.
 //
 // Vanilla, no framework (the hall convention). The SEMANTIC node/edge palette
 // (TOKENS/EDGE_STYLE) is fixed — never instance-pack-driven, so a pack can't
@@ -26,6 +29,10 @@
     monolith: { c: TOKENS.db, w: 3, dash: 0 }, ghost: { c: TOKENS.ghost, w: 1.8, dash: '5 5' },
     seam: { c: TOKENS.sun, w: 2, dash: 0 },
   };
+  // The in-scene badge kinds map onto the shell's status pills in the HTML
+  // detail (good → ok, the rest by name), so a badge reads the same on the
+  // island and in its card.
+  var PILL = { good: 'ok', warn: 'warn', danger: 'danger', info: 'info' };
 
   // Theme-dependent, NON-semantic scene values — resolved from the .atlas-page
   // scoped vars at render time (they flip with html[data-theme]).
@@ -58,6 +65,10 @@
   var emptyEl = document.getElementById('empty');
   var popup = document.getElementById('popup');
   var popupBody = document.getElementById('popupBody');
+  var hintEl = document.getElementById('hint');
+  var indexEl = document.getElementById('ab-index');
+  var indexRows = document.getElementById('ab-index-rows');
+  var indexN = document.getElementById('ab-index-n');
 
   var DATA = null, view = 'context', selected = null, nodeEls = {}, edgeEls = [], adj = {};
 
@@ -70,6 +81,7 @@
   function ptsOf(a) { return a.map(function (p) { return r1(p.x) + ',' + r1(p.y); }).join(' '); }
   function cx(n) { return n.gx + n.w / 2; }
   function cy(n) { return n.gy + n.d / 2; }
+  function nodeById(id) { return DATA.views[view].nodes.filter(function (x) { return x.id === id; })[0]; }
 
   function nodeFill(n) {
     if (view === 'context') return { hub: TOKENS.sun, nested: TOKENS.sky, docs: TOKENS.paper, db: TOKENS.coral, generated: TOKENS.sky }[n.kind] || TOKENS.sky;
@@ -210,7 +222,8 @@
     });
 
     drawLegend(d);
-    captionEl.innerHTML = d.blurb + '<span class="sub">' + (d.sub || '') + '</span>';
+    drawIndex(d);
+    captionEl.innerHTML = esc(d.blurb || '') + '<span class="sub">' + esc(d.sub || '') + '</span>';
   }
 
   function buildNode(n) {
@@ -256,23 +269,25 @@
     for (var k in nodeEls) nodeEls[k].classList.remove('lit');
   }
 
+  // The detail of one island: the same markup in the map's card and in the
+  // index row. Facts are the shell's pills and chips; a neighbour is a door
+  // (a .ab-jump button that opens that island) rather than a dead chip.
   function detailHTML(n) {
-    var d = DATA.views[view];
-    var b = n.badge ? '<span class="ab-badge ab-b-' + n.badge.k + '">' + n.badge.t + '</span>' : '';
+    var b = n.badge ? '<span class="fact-pill fact-pill--' + (PILL[n.badge.k] || 'quiet') + '">' + esc(n.badge.t) + '</span>' : '';
     var html = '<div class="ab-ptitle">' + esc(n.label) + ' ' + b + '</div>';
     html += '<div class="ab-ppath">' + esc(n.path || '') + '</div>';
-    if (n.metric) html += '<div class="ab-chips"><span class="ab-chip2">' + esc(n.metric) + '</span></div>';
+    if (n.metric) html += '<div class="ab-chips"><span class="fact-chip">' + esc(n.metric) + '</span></div>';
     html += '<p class="ab-pdesc">' + esc(n.desc || '') + '</p>';
     if (n.provenance) {
-      var provLabel = n.provenance === 'core' ? 'Core-loaded (Cloud Bongos)' : 'Built by this project';
-      html += '<div class="ab-chips"><span class="ab-chip2">' + esc(provLabel) + '</span>' +
-        (n.author ? '<span class="ab-chip2">by ' + esc(n.author) + '</span>' : '') +
-        (n.origin ? '<span class="ab-chip2">from ' + esc(n.origin) + '</span>' : '') +
+      var provLabel = n.provenance === 'core' ? 'core-loaded' : 'built here';
+      html += '<div class="ab-chips"><span class="fact-pill' + (n.provenance === 'core' ? ' fact-pill--info' : '') + '">' + esc(provLabel) + '</span>' +
+        (n.author ? '<span class="ov-fact">by <b>' + esc(n.author) + '</b></span>' : '') +
+        (n.origin ? '<span class="ov-fact">from <b>' + esc(n.origin) + '</b></span>' : '') +
         '</div>';
     }
-    if (n.provides && n.provides.length) html += '<div class="ab-prow">Provides (seams)</div><div class="ab-chips">' + n.provides.map(function (p) { return '<span class="ab-chip2">' + esc(p) + '</span>'; }).join('') + '</div>';
-    var conns = (adj[n.id] || []).map(function (e) { var o = e.a === n.id ? e.b : e.a; var on = d.nodes.filter(function (x) { return x.id === o; })[0]; return on ? on.label : o; });
-    if (conns.length) html += '<div class="ab-prow">Connects to</div><div class="ab-chips">' + conns.map(function (cc) { return '<span class="ab-chip2">↔ ' + esc(cc) + '</span>'; }).join('') + '</div>';
+    if (n.provides && n.provides.length) html += '<div class="ab-prow">Provides (seams)</div><div class="ab-chips">' + n.provides.map(function (p) { return '<span class="fact-chip">' + esc(p) + '</span>'; }).join('') + '</div>';
+    var conns = (adj[n.id] || []).map(function (e) { var o = e.a === n.id ? e.b : e.a; var on = nodeById(o); return on ? { id: on.id, label: on.label } : null; }).filter(Boolean);
+    if (conns.length) html += '<div class="ab-prow">Connects to</div><div class="ab-chips">' + conns.map(function (cc) { return '<button type="button" class="fact-chip ab-jump" data-node="' + esc(cc.id) + '">' + esc(cc.label) + '</button>'; }).join('') + '</div>';
     return html;
   }
   function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
@@ -300,25 +315,108 @@
     }).join('');
   }
 
+  // ---- the island index --------------------------------------------------
+  // Every island of the current view as a dense row: its colour, its label, its
+  // sub and metric, its badge as a pill. The title is a disclosure button; the
+  // body it opens is detailHTML laid inline, so the same facts read in place on
+  // a phone. Hovering a row lights the island on the map.
+  function drawIndex(d) {
+    if (!indexRows) return;
+    var rows = d.nodes.slice().sort(function (a, b) {
+      var fa = a.fixed ? 0 : 1, fb = b.fixed ? 0 : 1;
+      if (fa !== fb) return fa - fb;
+      return String(a.label).localeCompare(String(b.label));
+    });
+    indexRows.innerHTML = rows.map(function (n, i) {
+      var fill = nodeFill(n);
+      var sw = '<span class="ab-ix__sw' + (n.kind === 'ghost' ? ' ab-ix__sw--ghost' : '') + '" style="background:' + fill + ';color:' + fill + '" aria-hidden="true"></span>';
+      var facts = [];
+      if (n.badge) facts.push('<span class="fact-pill fact-pill--' + (PILL[n.badge.k] || 'quiet') + '">' + esc(n.badge.t) + '</span>');
+      if (n.metric) facts.push('<span class="fact-chip">' + esc(n.metric) + '</span>');
+      if (n.path) facts.push('<span class="ov-mono">' + esc(n.path) + '</span>');
+      return '<li class="ov-row ov-row--dense ab-ix" data-node="' + esc(n.id) + '">' +
+        '<div class="ov-row__main">' +
+          '<button type="button" class="ov-row__title ab-ix__t" aria-expanded="false" aria-controls="ab-ix-' + i + '">' + sw + esc(n.label) + (n.sub ? '<span class="ov-mono">' + esc(n.sub) + '</span>' : '') + '</button>' +
+          (facts.length ? '<div class="ov-row__facts">' + facts.join('') + '</div>' : '') +
+          '<div class="ab-ix__body" id="ab-ix-' + i + '" hidden></div>' +
+        '</div></li>';
+    }).join('');
+    if (indexN) indexN.textContent = String(rows.length);
+  }
+
+  // Open one index row (fold the others), fill it with the island's detail,
+  // and light the island on the map while it is open.
+  function openIndexRow(id, scroll) {
+    var rows = indexRows.querySelectorAll('.ab-ix');
+    var target = null;
+    for (var i = 0; i < rows.length; i++) {
+      var r = rows[i], hit = r.getAttribute('data-node') === id;
+      var t = r.querySelector('.ab-ix__t'), body = r.querySelector('.ab-ix__body');
+      t.setAttribute('aria-expanded', hit ? 'true' : 'false');
+      body.hidden = !hit;
+      if (hit) { target = r; body.innerHTML = detailHTML(nodeById(id)); }
+      else body.innerHTML = '';
+    }
+    if (target) {
+      if (indexEl && !indexEl.open) indexEl.open = true;
+      selected = id; lightNode(id);
+      if (scroll) target.scrollIntoView({ block: 'nearest' });
+    }
+  }
+  function closeIndexRows() {
+    var rows = indexRows.querySelectorAll('.ab-ix');
+    for (var i = 0; i < rows.length; i++) {
+      rows[i].querySelector('.ab-ix__t').setAttribute('aria-expanded', 'false');
+      var body = rows[i].querySelector('.ab-ix__body'); body.hidden = true; body.innerHTML = '';
+    }
+  }
+
   function setView(v) {
     view = v; selected = null;
-    var btns = document.querySelectorAll('.ab-modes button');
-    for (var i = 0; i < btns.length; i++) btns[i].classList.toggle('active', btns[i].getAttribute('data-view') === v);
+    var btns = document.querySelectorAll('.ab-views [data-view]');
+    for (var i = 0; i < btns.length; i++) btns[i].setAttribute('aria-selected', btns[i].getAttribute('data-view') === v ? 'true' : 'false');
     render();
   }
 
   function wire() {
-    var btns = document.querySelectorAll('.ab-modes button');
+    var btns = document.querySelectorAll('.ab-views [data-view]');
     for (var i = 0; i < btns.length; i++) btns[i].addEventListener('click', function () { setView(this.getAttribute('data-view')); });
     document.getElementById('popupClose').addEventListener('click', function (ev) { ev.stopPropagation(); closePopup(); });
     svg.addEventListener('click', function () { closePopup(); });
-    window.addEventListener('resize', function () { if (selected && nodeEls[selected]) { var n = DATA.views[view].nodes.filter(function (x) { return x.id === selected; })[0]; if (n) openPopup(n, nodeEls[selected]); } });
+    document.addEventListener('keydown', function (ev) { if (ev.key === 'Escape' && popup.classList.contains('show')) closePopup(); });
+    // A neighbour chip in the map's card opens that island's card.
+    popup.addEventListener('click', function (ev) {
+      var jump = ev.target.closest('.ab-jump'); if (!jump) return;
+      ev.stopPropagation();
+      var n = nodeById(jump.getAttribute('data-node')); if (n && nodeEls[n.id]) openPopup(n, nodeEls[n.id]);
+    });
+    // The index: the title opens the row; a neighbour chip inside it opens that
+    // row; hovering a row lights the island.
+    indexRows.addEventListener('click', function (ev) {
+      var jump = ev.target.closest('.ab-jump');
+      if (jump) { openIndexRow(jump.getAttribute('data-node'), true); return; }
+      var t = ev.target.closest('.ab-ix__t'); if (!t) return;
+      var row = t.closest('.ab-ix'), id = row.getAttribute('data-node');
+      if (t.getAttribute('aria-expanded') === 'true') { closeIndexRows(); selected = null; clearLight(); }
+      else { closePopup(); openIndexRow(id, false); }
+    });
+    indexRows.addEventListener('mouseover', function (ev) {
+      var row = ev.target.closest('.ab-ix'); if (row && !selected) lightNode(row.getAttribute('data-node'));
+    });
+    indexRows.addEventListener('mouseout', function (ev) {
+      var row = ev.target.closest('.ab-ix'); if (row && !selected) clearLight();
+    });
+    window.addEventListener('resize', function () { if (selected && nodeEls[selected] && popup.classList.contains('show')) { var n = nodeById(selected); if (n) openPopup(n, nodeEls[selected]); } });
+    // On a phone the map is a thumbnail and the index is the read.
+    if (indexEl && window.matchMedia && window.matchMedia('(max-width: 640px)').matches) indexEl.open = true;
   }
 
   function showEmpty() {
     emptyEl.classList.add('show'); svg.style.display = 'none';
     captionEl.textContent = 'The map has not been generated on this deploy yet.';
     footEl.textContent = '';
+    if (hintEl) hintEl.hidden = true;
+    if (indexEl) indexEl.hidden = true;
   }
 
   // Re-render when the shell flips the theme — the scene's non-semantic values

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

@@ -1,5 +1,5 @@
 {
-  "_": "Repo atlas — the self-drawing module map. Its SEMANTIC node palette is fixed by ADR 0094 and is not the token tier's business; everything around it (toolbar, chips, legend, popup, badges) is chrome and rides the world. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "_": "Repo atlas — the self-drawing module map. Its SEMANTIC node palette is fixed by ADR 0094 and is not the token tier's business; everything around it (the panel, the view switch, the caption, the detail card, the legend, the island index) is chrome and rides the world. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once; the redesign (task 1003472) added the `truth`, `detail` and `index` states. Populated look: the hall-preview harness serves modules/hall-ui/public/atlas.json when scripts/gds/gen-atlas.js has written it (the file is generated on deploy and gitignored, so run the generator first).",
   "page": "/builders/atlas",
   "surface": "hall-ui",
   "stub": {
@@ -44,6 +44,57 @@
         ]
       }
     },
+    "truth": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          ".ab-views [data-view=\"modules\"]"
+        ],
+        [
+          "wait",
+          500
+        ]
+      ]
+    },
+    "detail": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "dispatchClick",
+          "#svg .ab-node"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ]
+    },
+    "index": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "dispatchClick",
+          "#ab-index-rows .ab-ix:first-child .ab-ix__t"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ]
+    },
     "out": {
       "auth": false
     }

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

@@ -1,93 +1,74 @@
-/* modules.css — Page-local styles for the Modules page.
-   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
-   at boot (src/asset-version.js). */
+/* modules.css — what a MODULE row has that no other oversight row does (task
+   1003472, goal 1000081). The panel, the filter bar, the figure band, the group
+   heads, the row, the toggle and the foot line are all the shell's or the
+   family's (oversight.css); this sheet adds the clamped description, the
+   per-row details disclosure and the lines it opens onto.
 
-/* Page-local styles for Modules, layered on the shared design tokens
-   (style.css) — same pattern as settings.html's page-local block. */
-.mod-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 14px;
-  margin-top: 10px;
-}
-.mod-card {
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card);
-  padding: 14px 16px;
+   ROWS, NOT CARDS — the call task 1003472 asked for. Modules was the one hall
+   page already rendering its record's description, so a card looked like the
+   case where prose earns a box. Rendered against the real catalog it is the
+   opposite: the descriptions run from 120 to 1,200 characters, so the 280px
+   auto-fill grid stood a 500px card beside a 120px one, the toggle (the row's
+   one control) sat at a different height in every column, and a builder
+   scanning for a NAME and a STATE read paragraphs to find either. A row puts
+   every title on one x, every switch on another, clamps the prose to two lines
+   and opens the rest on request. The card grammar (.mod-grid/.mod-card), the
+   boxed .mod-browse field and the .mod-chip alias are gone. */
+
+/* The filter bar closes on a hairline, the goals panel's rule: the count and
+   the figures under it read as the panel's content, not as more controls. */
+#mod-filters { margin: 0 0 12px; padding: 0 0 6px; border-bottom: var(--line) solid var(--rule-soft); }
+#mod-filters .filters { margin-bottom: 10px; }
+.mod-count { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
+.mod-count:empty { display: none; }
+
+/* One group after another: the second head carries the family's air above it,
+   and the first row after a head starts flush (oversight.css draws the rule). */
+.mod-panel .ov-group + .ov-group { margin-top: var(--sp-md); }
+.mod-loading { padding: 10px 0; font-size: 13.5px; color: var(--ink-soft); }
+
+/* The description is the sub line, clamped to two lines of the measure so
+   twenty rows scan as twenty rows. The details disclosure under it opens the
+   rest; while it is open the clamp lifts, so the prose is never shown twice. */
+.mod-row__desc {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
-.mod-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.mod-card__title { font-weight: 650; font-size: 14.5px; color: var(--ink); }
-.mod-card__key { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }
-.mod-card__desc { font-size: 13px; color: var(--ink-soft); margin: 8px 0; }
-.mod-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
-/* Base: the shell's .fact-pill (task 1003307).
-   One override, and it is the reason the pill is not simply reused as-is: the
-   archetype's chip holds a short machine word (a module key, a version id) and
-   is nowrap, but THIS page's chips hold prose: "by <author>", "from <origin>",
-   "upkeep: undeclared". Inheriting nowrap put a single 559px chip on a 320px
-   viewport. A chip that carries a sentence wraps. */
-.mod-chip { white-space: normal; }
-.mod-chip--core { color: var(--info); }
-.mod-chip--own { color: var(--accent-ink); }
-.mod-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
-button.mod-toggle {
-  font-family: var(--font-body);
+.mod-row:has(.mod-more[open]) .mod-row__desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
+
+/* The disclosure is a text control in a 13px facts line: inline-block with the
+   family's padding trick so it clears the 24px floor on both axes. No marker
+   — the word says what it does, and the open state says so too. */
+.mod-more { margin: 8px 0 0; }
+.mod-more > summary {
+  display: inline-block;
+  list-style: none;
+  min-height: 24px;
+  min-width: 24px;
+  padding: 3px 4px;
+  margin: -3px -4px;
+  line-height: 18px;
   font-size: 12.5px;
-  font-weight: 600;
-  padding: 5px 16px;
-  min-width: 78px;
-  border-radius: var(--radius-pill);
-  border: var(--line) solid var(--rule);
-  background: var(--bg-card);
-  color: var(--ink-soft);
+  color: var(--accent-ink);
   cursor: pointer;
 }
-button.mod-toggle[data-on="1"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
-button.mod-toggle:disabled { opacity: 0.5; cursor: default; }
-button.mod-submit {
-  font-family: var(--font-body);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 5px 12px;
-  border-radius: var(--radius-sm);
-  border: var(--line) solid var(--rule);
-  background: transparent;
-  color: var(--ink-soft);
-  cursor: pointer;
-}
-button.mod-submit:disabled { opacity: 0.45; cursor: not-allowed; }
-/* Italic was this sheet's alone — nothing else in the hall sets it, and an
-   empty state is a plain statement, not an aside (task 1003307). */
-.mod-empty { color: var(--ink-faint); font-size: 13px; padding: 10px 0; }
-.mod-note { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
+.mod-more > summary::-webkit-details-marker { display: none; }
+.mod-more > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
+.mod-more > summary::before { content: "details"; }
+.mod-more[open] > summary::before { content: "fewer details"; }
+/* The lines the disclosure opens onto are the family's key/value lines; the
+   list of what a module contributes wraps as chips on its own line. */
+.mod-more .ov-lines { margin-top: 8px; }
+.mod-more .ov-lines .ov-lines__v { text-align: left; margin-left: 0; }
+.mod-more .ov-lines .ov-lines__v .fact-chip { margin: 0 6px 4px 0; }
 
-/* Catalog browse bar (task 1001772) — one filter over both grids. */
-.mod-browse { margin: 0 0 16px; }
-.mod-browse__label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--ink-soft);
-  margin-bottom: 6px;
-}
-.mod-browse__input {
-  font-family: var(--font-body);
-  font-size: 13.5px;
-  width: 100%;
-  max-width: 420px;
-  padding: 8px 12px;
-  border-radius: var(--radius-sm);
-  border: var(--line) solid var(--rule);
-  background: var(--bg-card);
-  color: var(--ink);
-}
 /* The marker on an inferred credit — quiet, but hoverable for the reason. */
-.mod-inferred {
-  border: 0;
-  text-decoration: none;
-  cursor: help;
-  color: var(--ink-faint);
-  margin-left: 1px;
-}
+.mod-inferred { border: 0; text-decoration: none; cursor: help; color: var(--ink-faint); margin-left: 1px; }
+
+/* The right column holds the switch and, on a module built here, the submit
+   door under it. The switch is the family's grant toggle: enabled reads in ink,
+   disabled in the faint ink, the accent only on hover. A viewer below the floor
+   sees the state as a pill, not a dead control. */
+.mod-row__right .btn-ghost { white-space: nowrap; }

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

@@ -9,6 +9,10 @@
   <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">
+  <!-- task 1003472: the catalog rides the oversight family's row (a titled row
+       with facts and one action on the right), so the family sheet loads first
+       and modules.css holds only what a module row has that no other row does. -->
+  <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/modules.css">
 </head>
 <body data-page="modules" data-page-title="Modules">
@@ -19,48 +23,53 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. Modules 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, because on a
+           working surface the page's own name is the least interesting thing on
+           it. The sub says what the page IS; the numbers moved into the panel's
+           figure band (task 1003472), where a number belongs. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Modules</h1>
-        <p class="page-head__sub" id="modules-sub">Loading modules…</p>
+        <p class="page-head__sub" id="modules-sub">Everything this instance can run: what the core ships, what this project built, and who keeps each one true as the core advances.</p>
       </div>
 
       <main id="hall-main">
-        <!-- Browse — one filter over both grids below (task 1001772). -->
-        <div class="mod-browse">
-          <label class="mod-browse__label" for="mod-search">Search the catalog</label>
-          <input type="search" id="mod-search" class="mod-browse__input" autocomplete="off"
-                 placeholder="name, author, origin project, or licence…">
-          <p class="mod-note" id="mod-browse-count" role="status" aria-live="polite"></p>
-        </div>
-
-        <!-- The catalog — every module the CORE ships, which this instance can
-             opt into (ADR 0107 §6: accepted modules land default-off). Each row
-             carries its author + origin credit (§2/§3: credit now, money later). -->
-        <section class="scroll" id="core-scroll" aria-labelledby="core-h">
+        <!-- task 1003472: ONE panel. The search and the state lens sit on a
+             hairline at the top, the figure band under them, then two runs of
+             rows under group heads — shipped with the core, built by this
+             project. Before this the page was a boxed search on the ground over
+             three panels, the middle two holding 280px card grids whose height
+             varied tenfold with the description, so the one control per record
+             (the toggle) landed at a different height on every card. A record
+             carrying this many facts is a row (docs/design/hall-direction-v2.md
+             section 6; the archetype at docs/design/mocks/hall/goals/v3.html). -->
+        <section class="scroll mod-panel" id="core-scroll" aria-labelledby="core-h">
           <h2 id="core-h" class="scroll__h">Module catalog</h2>
-          <p class="scroll__lede">Modules the Cloud Bongos core ships — the shared repository built by its sub-projects, each credited to its author and the project it came from. Enable the ones you want; Metic+ can flip the switch, everyone can see the state.</p>
-          <div class="mod-grid" id="core-grid"><div class="mod-empty">Loading…</div></div>
-        </section>
+          <p class="scroll__lede">The shared repository the core ships and the modules this project built for itself, each credited to its author and the project it came from. Everyone can see the state; the switch is rank-gated.</p>
+          <div id="mod-filters"></div>
+          <p class="mod-count" id="mod-count" role="status" aria-live="polite"></p>
+          <div class="ov-figs" id="mod-figs" aria-label="Catalog at a glance"></div>
 
-        <!-- This instance's own modules — the pool `bongos module submit` draws
-             from. Separate from the catalog because these ship from this repo,
-             not from the core package. -->
-        <section class="scroll" id="own-scroll" aria-labelledby="own-h">
-          <h2 id="own-h" class="scroll__h">Built by this project</h2>
-          <p class="scroll__lede">Modules that live in this instance's own repo rather than arriving with the core. Submit one upstream below to offer it to every other instance.</p>
-          <div class="mod-grid" id="own-grid"><div class="mod-empty">None on disk.</div></div>
-        </section>
+          <!-- Shipped with the core — the catalog this instance opts into
+               (ADR 0107 §6: accepted modules land default-off). -->
+          <div class="ov-group" id="core-group">
+            <div class="ov-group__head">
+              <span class="ov-group__name">Shipped with the core</span>
+              <span class="ov-group__n" id="core-n"></span>
+            </div>
+            <ul class="ov-rows" id="core-grid"><li class="mod-loading">Loading the catalog…</li></ul>
+          </div>
 
-        <!-- Submit for review — the front door to bongos module submit (ADR 0107 §1/§9). -->
-        <section class="scroll" id="submit-scroll" aria-labelledby="submit-h">
-          <h2 id="submit-h" class="scroll__h">Contribute a module upstream</h2>
-          <p class="scroll__lede" id="submit-lede">Submit one of this project's own modules for review, so it can join the shared Cloud Bongos catalog with your name and this project credited.</p>
-          <p class="settings-status" id="submit-status" role="status" aria-live="polite"></p>
+          <!-- Built by this project — the pool `bongos module submit` draws from
+               (ADR 0107 §1/§9). The submit door is on the row, beside the module
+               it files, so the third panel this page used to carry is gone. -->
+          <div class="ov-group" id="own-group">
+            <div class="ov-group__head">
+              <span class="ov-group__name">Built by this project</span>
+              <span class="ov-group__n" id="own-n"></span>
+            </div>
+            <ul class="ov-rows" id="own-grid"></ul>
+            <p class="ov-foot" id="submit-lede">A module built here can be submitted upstream for review, so it can join the shared catalog with your name and this project credited.</p>
+          </div>
         </section>
       </main>
 
@@ -75,6 +84,8 @@
 <!-- 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-23-contrib"></script>
-<script src="/builders/modules.js?v=2026-08-12-catalog"></script>
+<script src="/builders/brand-apply.js"></script>
+<script src="/builders/hall-kit.js"></script>
+<script src="/builders/modules.js?v=2026-09-02-rows"></script>
 </body>
 </html>