@bongos/core 1.19.457 → 1.19.459

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

@@ -58,6 +58,14 @@
 // What simplifying may NOT touch is ADR 0175 §8: an objection still carries a
 // reason and names one section. That requirement is why voting lives in the
 // hall and not on a chat reaction.
+//
+// TASK 1003469 put the page in the chrome world's COMPOSITION, not just its
+// tokens: every section is a shell .scroll panel with the display-voice heading,
+// every repeated thing is the oversight family's .ov-row (oversight.css), the
+// five unrelated lists that shared `.gov-assign-row` each render as the row they
+// are, the permission grid's bordered boxes became hairline groups, and a rank's
+// DESCRIPTION — collected by the create form and never shown — is the row's sub
+// line. Nothing about the data, the locks, the tab ids or the ballot changed.
 
 (() => {
   'use strict';
@@ -67,7 +75,8 @@
   // /lib/bongos-client.js. baseUrl:'' passes the full `${API}${path}` URLs below
   // through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
   const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
-  const { escapeHtml } = window.OTB;
+  const { escapeHtml, fmtInt } = window.OTB;
+  const { emptyStateHtml } = window.OTBKit;
   const toast = (msg) => window.OTB.toast(msg);
 
   // ---- fetch helpers (mirror gate.js) --------------------------------------
@@ -104,15 +113,15 @@
     bad_rank_key: 'Rank keys are kebab-case: lowercase letters, digits, dashes.',
     validation_failed: 'Missing or invalid fields.',
     // the vote refusals (R17 over R08's route)
-    not_board_member: 'Only members of this item\u2019s board may vote on it \u2014 membership follows the rules that were in force when the window opened.',
-    item_closed: 'This sitting has closed \u2014 refreshing.',
-    vote_window_expired: 'This sitting\u2019s clock has run out \u2014 the sweep is closing it.',
-    objection_needs_reason: 'An objection must say why \u2014 write the reason.',
+    not_board_member: 'Only members of this item’s board may vote on it — membership follows the rules that were in force when the window opened.',
+    item_closed: 'This sitting has closed — refreshing.',
+    vote_window_expired: 'This sitting’s clock has run out — the sweep is closing it.',
+    objection_needs_reason: 'An objection must say why — write the reason.',
     objection_needs_section: 'An objection must point at exactly one section of the idea.',
-    yes_carries_nothing: 'A yes carries no reason or section \u2014 those belong to objections.',
-    bad_direction: 'A vote is yes or no \u2014 nothing else.',
-    item_not_found: 'That item no longer exists \u2014 refreshing.',
-    bad_item_id: 'That item id isn\u2019t valid.',
+    yes_carries_nothing: 'A yes carries no reason or section — those belong to objections.',
+    bad_direction: 'A vote is yes or no — nothing else.',
+    item_not_found: 'That item no longer exists — refreshing.',
+    bad_item_id: 'That item id isn’t valid.',
   };
   const friendlyError = (code) => ERROR_COPY[code] || null;
 
@@ -126,26 +135,45 @@
 
   const selectedRank = () => ranks.find((r) => r.rank_key === selectedRankKey) || null;
 
+  // ---- shared row pieces ---------------------------------------------------
+
+  // A state pill in the shell's vocabulary. `mod` is one of the .fact-pill
+  // states (ok / warn / danger / info / quiet); the label is what the reader sees.
+  const pill = (mod, label) => `<span class="fact-pill fact-pill--${mod}">${escapeHtml(label)}</span>`;
+  const groupHead = (name, n, note) =>
+    `<div class="ov-group__head"><span class="ov-group__name">${escapeHtml(name)}</span>` +
+    (n === undefined ? '' : `<span class="ov-group__n">${fmtInt(n)}</span>`) +
+    (note ? `<span class="ov-group__note">${escapeHtml(note)}</span>` : '') +
+    '</div>';
+  // A timestamp the way the rows have always shown one: "2026-08-30 14:05".
+  const when = (iso) => escapeHtml(String(iso || '').slice(0, 16).replace('T', ' '));
+
   // ---- render: rank list ---------------------------------------------------
 
+  // One rank, one selectable oversight row: the label, the DESCRIPTION the
+  // create form collects (task 1003469 — it was written and never read back),
+  // then the kind pill, the key and the permission count as the facts line.
   function renderRanks() {
     const list = document.getElementById('gov-rank-list');
     list.innerHTML = '';
     for (const rank of ranks) {
       // The Archon row is called out as read-only, because it is the one rank in
       // this list a click will not change and the reader should know before trying.
-      const pill = isArchonRank(rank)
-        ? `<span class="gov-pill gov-pill--locked">ladder · read-only</span>`
-        : rank.is_system
-          ? `<span class="gov-pill gov-pill--seeded">ladder</span>`
-          : `<span class="gov-pill gov-pill--custom">custom</span>`;
+      const kind = isArchonRank(rank)
+        ? pill('danger', 'ladder · read-only')
+        : rank.is_system ? pill('info', 'ladder') : pill('ok', 'custom');
+      const n = (rank.permissions || []).length;
+      const desc = String(rank.description || '').trim();
       const btn = document.createElement('button');
       btn.type = 'button';
-      btn.className = 'gov-rank';
+      btn.className = 'ov-row';
       btn.setAttribute('aria-pressed', rank.rank_key === selectedRankKey ? 'true' : 'false');
       btn.innerHTML =
-        `<span class="gov-rank__head"><span class="gov-rank__label">${escapeHtml(rank.label || rank.rank_key)}</span>${pill}</span>
-         <span class="gov-rank__meta"><code>${escapeHtml(rank.rank_key)}</code> · ${(rank.permissions || []).length} permission${(rank.permissions || []).length === 1 ? '' : 's'}</span>`;
+        `<span class="ov-row__main">
+           <span class="ov-row__title">${escapeHtml(rank.label || rank.rank_key)}</span>
+           ${desc ? `<span class="ov-row__sub">${escapeHtml(desc)}</span>` : ''}
+           <span class="ov-row__facts">${kind}<span class="ov-mono">${escapeHtml(rank.rank_key)}</span><span class="ov-fact"><b>${fmtInt(n)}</b> permission${n === 1 ? '' : 's'}</span></span>
+         </span>`;
       btn.addEventListener('click', () => { selectedRankKey = rank.rank_key; renderRanks(); renderGrid(); });
       list.appendChild(btn);
     }
@@ -165,10 +193,13 @@
     return !!p.grantable;
   }
 
+  // One permission, one dense oversight row: the key as the title in the
+  // machine's face, the guard sentence as the sub line, the floor as a chip, and
+  // the control — a grant toggle, or the lock with its reason — on the right.
   function permRow(p, rank) {
     const held = !!rank && (rank.permissions || []).includes(p.key);
-    const row = document.createElement('div');
-    row.className = 'gov-perm';
+    const row = document.createElement('li');
+    row.className = 'ov-row ov-row--dense';
 
     // Why locked, in the words that tell the reader whether it is a policy they
     // could change or a fact they cannot. Three causes, three sentences.
@@ -182,31 +213,35 @@
     if (!rank) {
       control = '';
     } else if (!grantableTo(p, rank)) {
-      control = `<span class="gov-pill gov-pill--locked" title="${escapeHtml(lockReason)}">locked</span>`;
+      control = `<span class="fact-pill fact-pill--quiet" title="${escapeHtml(lockReason)}">locked</span>`;
       // The Archon rank is read-only rather than empty-handed, so say what it holds.
       if (held && isArchonRank(rank)) control = `<span class="gov-held-note">held</span>${control}`;
     } else {
-      control = `<button type="button" class="gov-toggle" aria-pressed="${held ? 'true' : 'false'}" data-perm="${escapeHtml(p.key)}">${held ? 'granted' : 'grant'}</button>`;
+      control = `<button type="button" class="ov-toggle" aria-pressed="${held ? 'true' : 'false'}" data-perm="${escapeHtml(p.key)}">${held ? 'held' : 'grant'}</button>`;
     }
 
     row.innerHTML =
-      `<div class="gov-perm__main">
-         <code class="gov-perm__key">${escapeHtml(p.key)}</code>
-         <span class="gov-pill gov-pill--floor">${escapeHtml(p.floor || 'principal')}</span>
-         <div class="gov-perm__guards">${escapeHtml(p.guards || '')}</div>
+      `<div class="ov-row__main">
+         <span class="gov-perm__key">${escapeHtml(p.key)}</span>
+         ${p.guards ? `<p class="ov-row__sub">${escapeHtml(p.guards)}</p>` : ''}
+         <div class="ov-row__facts"><span class="fact-chip">${escapeHtml(p.floor || 'principal')}</span></div>
        </div>
-       ${control}`;
+       <div class="ov-row__right"><div class="ov-row__actions">${control}</div></div>`;
 
-    const btn = row.querySelector('button.gov-toggle');
+    const btn = row.querySelector('button.ov-toggle');
     if (btn) btn.addEventListener('click', () => toggleGrant(rank, p.key, !held, btn));
     return row;
   }
 
-  function section(title, rows) {
+  // A named run of permission rows inside the panel: the group head, then the rows.
+  function section(title, rows, note) {
     const el = document.createElement('section');
-    el.className = 'gov-section';
-    el.innerHTML = `<div class="gov-section__head">${escapeHtml(title)}</div>`;
-    for (const r of rows) el.appendChild(r);
+    el.className = 'ov-group';
+    el.innerHTML = groupHead(title, rows.length, note);
+    const list = document.createElement('ul');
+    list.className = 'ov-rows';
+    for (const r of rows) list.appendChild(r);
+    el.appendChild(list);
     return el;
   }
 
@@ -225,7 +260,7 @@
     const grid = document.getElementById('gov-grid');
     const rank = selectedRank();
     document.getElementById('gov-grid-title').textContent = rank
-      ? `Permissions — ${rank.label || rank.rank_key}` : 'Permissions';
+      ? `Permissions for ${rank.label || rank.rank_key}` : 'Permissions';
     document.getElementById('gov-grid-note').textContent = gridNote(rank);
 
     // The reset escape hatch — only a ladder rank has a catalog default, and the
@@ -235,7 +270,7 @@
     if (isRankRank(rank) && !isArchonRank(rank)) {
       const btn = document.createElement('button');
       btn.type = 'button';
-      btn.className = 'gov-btn gov-btn--ghost gov-btn--small';
+      btn.className = 'btn-ghost';
       btn.textContent = 'Reset to default';
       btn.addEventListener('click', () => resetRank(rank, btn));
       resetBox.appendChild(btn);
@@ -251,13 +286,11 @@
     const ownerPowers = humanPerms.filter((p) => p.system && !p.substrate);
     const operational = humanPerms.filter((p) => !p.system);
 
-    const ownerHead = !rank || isRankRank(rank)
-      ? `Owner powers (${ownerPowers.length})`
-      : `Owner powers — locked for custom ranks (${ownerPowers.length})`;
+    const ownerNote = !rank || isRankRank(rank) ? '' : 'locked for custom ranks';
 
-    grid.appendChild(section(`Operational (${operational.length})`, operational.map((p) => permRow(p, rank))));
-    grid.appendChild(section(ownerHead, ownerPowers.map((p) => permRow(p, rank))));
-    grid.appendChild(section(`Enforced outside the app — always locked (${substrate.length})`, substrate.map((p) => permRow(p, rank))));
+    grid.appendChild(section('Operational', operational.map((p) => permRow(p, rank))));
+    grid.appendChild(section('Owner powers', ownerPowers.map((p) => permRow(p, rank)), ownerNote));
+    grid.appendChild(section('Enforced outside the app', substrate.map((p) => permRow(p, rank)), 'always locked'));
   }
 
   // Restore a ladder rank to the shipped ladder. Confirmed because it is the one
@@ -292,29 +325,36 @@
 
   // ---- render: assignments -------------------------------------------------
 
+  // One assignment, one oversight row: the builder, then their id and the rank
+  // pill as facts, and Remove on the right for a custom rank.
   function renderAssignments() {
     const box = document.getElementById('gov-assignments');
     box.innerHTML = '';
     if (assignments.length === 0) {
-      box.innerHTML = `<p class="gov-empty">No rank assignments yet.</p>`;
+      box.innerHTML = emptyStateHtml('No rank assignments yet.');
       return;
     }
-    const wrap = document.createElement('section');
-    wrap.className = 'gov-section';
+    const list = document.createElement('ul');
+    list.className = 'ov-rows';
     for (const a of assignments) {
-      const row = document.createElement('div');
-      row.className = 'gov-assign-row';
-      const who = `${escapeHtml(a.display_name || a.github_login || `builder ${a.builder_id}`)} <span class="muted">(#${escapeHtml(String(a.builder_id))} · ${escapeHtml(a.rank || '')})</span>`;
+      const row = document.createElement('li');
+      row.className = 'ov-row';
+      const who = escapeHtml(a.display_name || a.github_login || `builder ${a.builder_id}`);
       const rankPill = a.is_system
-        ? `<span class="gov-pill gov-pill--seeded">${escapeHtml(a.rank_label || a.rank_key)} · via rank</span>`
-        : `<span class="gov-pill gov-pill--custom">${escapeHtml(a.rank_label || a.rank_key)}</span>`;
-      const action = a.is_system ? '' : `<button type="button" class="gov-btn gov-btn--ghost gov-btn--small" data-act="unassign">Remove</button>`;
-      row.innerHTML = `<span class="gov-assign-row__who">${who}</span>${rankPill}${action}`;
+        ? pill('info', `${a.rank_label || a.rank_key} · via rank`)
+        : pill('ok', a.rank_label || a.rank_key);
+      const action = a.is_system ? '' : '<button type="button" class="btn-ghost" data-act="unassign">Remove</button>';
+      row.innerHTML =
+        `<div class="ov-row__main">
+           <span class="ov-row__title">${who}</span>
+           <div class="ov-row__facts">${rankPill}<span class="ov-mono">#${escapeHtml(String(a.builder_id))}</span>${a.rank ? `<span class="ov-fact">rank <b>${escapeHtml(window.OTB.rankLabel(a.rank))}</b></span>` : ''}</div>
+         </div>
+         <div class="ov-row__right"><div class="ov-row__actions">${action}</div></div>`;
       const btn = row.querySelector('[data-act=unassign]');
       if (btn) btn.addEventListener('click', () => unassign(a, btn));
-      wrap.appendChild(row);
+      list.appendChild(row);
     }
-    box.appendChild(wrap);
+    box.appendChild(list);
   }
 
   function renderAssignSelect() {
@@ -322,7 +362,7 @@
     const custom = ranks.filter((r) => !r.is_system);
     sel.innerHTML = custom.length
       ? custom.map((r) => `<option value="${escapeHtml(r.rank_key)}">${escapeHtml(r.label || r.rank_key)}</option>`).join('')
-      : `<option value="" disabled selected>No custom ranks yet</option>`;
+      : '<option value="" disabled selected>No custom ranks yet</option>';
   }
 
   async function unassign(a, btn) {
@@ -340,22 +380,29 @@
 
   // ---- render: principals --------------------------------------------------
 
+  // One machine identity, one dense row: the identity as the title, what it holds
+  // and under which guard as the sub line, and the lock as its one fact.
   function renderPrincipals() {
     const box = document.getElementById('gov-principals');
     box.innerHTML = '';
     if (principals.length === 0) {
-      box.innerHTML = `<p class="gov-empty">No machine principals declared.</p>`;
+      box.innerHTML = emptyStateHtml('No machine principals declared.');
       return;
     }
-    const wrap = document.createElement('section');
-    wrap.className = 'gov-section';
+    const list = document.createElement('ul');
+    list.className = 'ov-rows';
     for (const p of principals) {
-      const row = document.createElement('div');
-      row.className = 'gov-principal';
-      row.innerHTML = `<code>${escapeHtml(p.system_role)}</code> holds <code>${escapeHtml(p.permission)}</code> — ${escapeHtml(p.guards || '')} <span class="gov-pill gov-pill--locked">locked</span>`;
-      wrap.appendChild(row);
+      const row = document.createElement('li');
+      row.className = 'ov-row ov-row--dense';
+      row.innerHTML =
+        `<div class="ov-row__main">
+           <span class="gov-perm__key">${escapeHtml(p.system_role)}</span>
+           <p class="ov-row__sub">holds <code>${escapeHtml(p.permission)}</code>${p.guards ? ` · ${escapeHtml(p.guards)}` : ''}</p>
+         </div>
+         <div class="ov-row__right">${pill('quiet', 'locked')}</div>`;
+      list.appendChild(row);
     }
-    box.appendChild(wrap);
+    box.appendChild(list);
   }
 
   // ---- loads ---------------------------------------------------------------
@@ -543,7 +590,7 @@
     // the axis these three rules actually differ on and the one that surprises
     // people: under the other two an unvoted item passes, under this one it does not.
     if (board.pass_rule === 'majority') {
-      return 'Items pass by <strong>majority</strong>: more than half of the board must vote yes \u2014 not just more yes than no. '
+      return 'Items pass by <strong>majority</strong>: more than half of the board must vote yes — not just more yes than no. '
         + 'Silence is <em>not</em> agreement here, so an item that never reaches a majority is returned to its author. '
         + 'An author may vote on their own idea, but it can never be carried by their vote alone.';
     }
@@ -560,21 +607,27 @@
     return `A sitting runs <strong>${fmtWindow(board.window_minutes)}</strong>${early}. An unvoted window nulls that member's vote — absence never blocks.`;
   }
 
+  // One dial, one row: the dial's name as the title, the live sentence as the
+  // sub line. The sentence is trusted HTML from the helpers above.
+  function dialRow(name, sentenceHtml) {
+    return `<li class="ov-row"><div class="ov-row__main"><span class="ov-row__title">${escapeHtml(name)}</span><p class="ov-row__sub">${sentenceHtml}</p></div></li>`;
+  }
+
+  // One closed amendment sitting, one row: who proposed what, the rationale as
+  // the sub line, the outcome pill and the date and rule as facts.
   function historyRow(h) {
     const who = escapeHtml(h.proposer_name || h.proposer_login || (h.proposed_by ? `builder ${h.proposed_by}` : 'unknown'));
-    const when = escapeHtml(String(h.closed_at).slice(0, 16).replace('T', ' '));
-    const pill = h.outcome === 'passed'
-      ? '<span class="gov-pill gov-pill--seeded">ratified</span>'
-      : '<span class="gov-pill gov-pill--locked">returned</span>';
+    const outcome = h.outcome === 'passed' ? pill('ok', 'ratified') : pill('warn', 'returned');
     // Task 1003270: the rule by name, not by config key. An unknown value still
     // shows verbatim — a rule this build does not know about is worth seeing.
     const under = h.decided_under && h.decided_under.pass_rule
-      ? ` · decided ${escapeHtml(PASS_RULE_NAME[h.decided_under.pass_rule] || `under ${h.decided_under.pass_rule}`)}`
+      ? `<span class="ov-fact">decided ${escapeHtml(PASS_RULE_NAME[h.decided_under.pass_rule] || `under ${h.decided_under.pass_rule}`)}</span>`
       : '';
-    return `<div class="gov-assign-row">
-      <span class="gov-assign-row__who">${who} proposed <code>${escapeHtml(JSON.stringify(h.proposed))}</code>${h.rationale_md ? ` — ${escapeHtml(h.rationale_md)}` : ''}</span>
-      ${pill} <span class="muted">${when}${under}</span>
-    </div>`;
+    return `<li class="ov-row"><div class="ov-row__main">
+      <span class="ov-row__title">${who} proposed <code>${escapeHtml(JSON.stringify(h.proposed))}</code></span>
+      ${h.rationale_md ? `<p class="ov-row__sub">${escapeHtml(h.rationale_md)}</p>` : ''}
+      <div class="ov-row__facts">${outcome}<span class="ov-row__when">${when(h.closed_at)}</span>${under}</div>
+    </div></li>`;
   }
 
   // ---- the charter library (R19) ---------------------------------------------
@@ -643,52 +696,75 @@
   ];
   const LADDER = 'solo/pair → circle (3–8) → ~9 name an executive → ~25 → ~50 written charter + council → ~150 adjudication separates → beyond: federate';
 
+  // One charter, one row: the name, the blurb as the sub line, whether it is
+  // selectable and recommended as pills, and the configuration an owner would
+  // type as the machine-voiced line under it.
   function charterCard(c, recommendedKey) {
-    const pill = c.selectable
-      ? '<span class="gov-pill gov-pill--seeded">selectable today</span>'
-      : '<span class="gov-pill gov-pill--locked">documented for later</span>';
-    const rec = c.key === recommendedKey ? ' <span class="gov-pill gov-pill--custom">recommended at your headcount</span>' : '';
-    const how = c.how ? `<div class="gov-perm__guards">as configuration: ${escapeHtml(c.how)}</div>` : '';
-    return `<div class="gov-assign-row"><span class="gov-assign-row__who"><strong>${escapeHtml(c.name)}</strong> — ${escapeHtml(c.blurb)}${how}</span>${pill}${rec}</div>`;
+    const facts = [
+      c.selectable ? pill('ok', 'selectable today') : pill('quiet', 'documented for later'),
+      c.key === recommendedKey ? pill('info', 'recommended at your headcount') : '',
+    ].join('');
+    const how = c.how ? `<p class="gov-charter__how">as configuration: ${escapeHtml(c.how)}</p>` : '';
+    return `<li class="ov-row"><div class="ov-row__main">
+      <span class="ov-row__title">${escapeHtml(c.name)}</span>
+      <p class="ov-row__sub">${escapeHtml(c.blurb)}</p>
+      <div class="ov-row__facts">${facts}</div>
+      ${how}
+    </div></li>`;
   }
 
+  // The library and the trajectories as one panel: the seven structures, then
+  // the three trajectories under their own group head, then the ladder as the
+  // panel's foot line.
   function charterLibraryHtml(data) {
     const rec = data.recommended || {};
     return `
-      <h2 class="gov-h">Charter library</h2>
-      <p class="gov-grid-note">The seven government structures, for getting a team up to speed before deciding when to flip a switch. <strong>Selectable today</strong> means expressible through the real configuration — a rank-based membership plus a pass rule — with no new code. This project has <strong>${escapeHtml(String(data.headcount ?? '?'))}</strong> active builder${data.headcount === 1 ? '' : 's'}: ${escapeHtml(rec.why || '')} <em>(${escapeHtml(rec.rung || '')})</em>.</p>
-      <div class="gov-section">${CHARTERS.map((c) => charterCard(c, rec.key)).join('')}</div>
-      <h2 class="gov-h">Trajectories</h2>
-      <p class="gov-grid-note">How a project moves between structures over time — summarized from the synthesis:</p>
-      <div class="gov-section">${TRAJECTORIES.map((t) => `<div class="gov-assign-row"><span class="gov-assign-row__who"><strong>${escapeHtml(t.name)}</strong> — ${escapeHtml(t.blurb)}</span></div>`).join('')}</div>
-      <p class="gov-grid-note muted">The developmental ladder: ${escapeHtml(LADDER)}. Formality is adopted only where informal coordination breaks.</p>
+      <section class="scroll" aria-labelledby="gov-charters-h">
+        <h2 class="scroll__h" id="gov-charters-h">Charter library</h2>
+        <p class="scroll__lede">The seven government structures, for getting a team up to speed before deciding when to flip a switch. <strong>Selectable today</strong> means expressible through the real configuration — a rank-based membership plus a pass rule — with no new code. This project has <strong>${escapeHtml(String(data.headcount ?? '?'))}</strong> active builder${data.headcount === 1 ? '' : 's'}: ${escapeHtml(rec.why || '')} <em>(${escapeHtml(rec.rung || '')})</em>.</p>
+        <ul class="ov-rows">${CHARTERS.map((c) => charterCard(c, rec.key)).join('')}</ul>
+        <section class="ov-group">
+          ${groupHead('Trajectories', TRAJECTORIES.length, 'how a project moves between structures')}
+          <ul class="ov-rows">${TRAJECTORIES.map((t) => `<li class="ov-row"><div class="ov-row__main"><span class="ov-row__title">${escapeHtml(t.name)}</span><p class="ov-row__sub">${escapeHtml(t.blurb)}</p></div></li>`).join('')}</ul>
+        </section>
+        <p class="ov-foot">The developmental ladder: ${escapeHtml(LADDER)}. Formality is adopted only where informal coordination breaks.</p>
+      </section>
     `;
   }
 
   async function loadConstitution() {
+    const live = document.getElementById('gov-constitution-live');
     const box = document.getElementById('gov-constitution');
     let data;
     try {
       data = await fetchJson('/government/constitution');
     } catch (err) {
       if (err && err.kind === '401') return;
-      box.innerHTML = `<p class="gov-empty">Could not load the constitution just now.</p>`;
+      live.innerHTML = emptyStateHtml('Could not load the constitution just now.');
+      box.innerHTML = '';
       return;
     }
     const b = data.board || {};
     const history = data.history || [];
+    // The three dials as rows inside the Constitution panel, then the
+    // configuration they resolve from as the panel's foot line.
+    live.innerHTML = `
+      <ul class="ov-rows">
+        ${dialRow('Who sits on the board', membershipSentence(b))}
+        ${dialRow('What counts as passing', passRuleSentence(b))}
+        ${dialRow('How long a sitting runs', windowSentence(b))}
+      </ul>
+      <p class="ov-foot">As configuration: <code>${escapeHtml(JSON.stringify(b))}</code>. Changing it is a board act — propose an amendment, and it is decided under the rule above.</p>
+    `;
+    // The history and the library are panels of their own, after the live view.
     box.innerHTML = `
-      <section class="gov-section">
-        <div class="gov-section__head">What this project runs today</div>
-        <p class="gov-grid-note">${membershipSentence(b)}</p>
-        <p class="gov-grid-note">${passRuleSentence(b)}</p>
-        <p class="gov-grid-note">${windowSentence(b)}</p>
-        <p class="gov-grid-note muted">As configuration: <code>${escapeHtml(JSON.stringify(b))}</code>. Changing it is a board act — propose an amendment, and it is decided under the rule above.</p>
+      <section class="scroll" aria-labelledby="gov-history-h">
+        <h2 class="scroll__h" id="gov-history-h">How it has changed</h2>
+        <p class="scroll__lede">Every closed amendment sitting, ratified and returned alike, with the rule it was decided under.</p>
+        ${history.length
+          ? `<ul class="ov-rows">${history.map(historyRow).join('')}</ul>`
+          : emptyStateHtml('Never amended. This project still runs its founding constitution.')}
       </section>
-      <h2 class="gov-h">How it has changed</h2>
-      ${history.length
-        ? `<div class="gov-section">${history.map(historyRow).join('')}</div>`
-        : `<p class="gov-empty">Never amended — this project still runs its founding constitution.</p>`}
       ${charterLibraryHtml(data)}
     `;
   }
@@ -713,9 +789,9 @@
   function subjectLine(item) {
     if (item.subject_type === 'full_idea') {
       const title = item.subject ? item.subject.title : `idea ${item.subject_id}`;
-      return `<a href="/#/idea/${escapeHtml(String(item.subject_id))}">${escapeHtml(title)}</a> <span class="gov-pill gov-pill--floor">Full Idea</span>`;
+      return `<a href="/#/idea/${escapeHtml(String(item.subject_id))}">${escapeHtml(title)}</a> ${pill('quiet', 'Full Idea')}`;
     }
-    return `Constitutional amendment <span class="gov-pill gov-pill--floor">amendment</span>`;
+    return `Constitutional amendment ${pill('quiet', 'amendment')}`;
   }
 
   function clockLine(item) {
@@ -732,25 +808,28 @@
     return 'no clock';
   }
 
+  // The open ballot: one voter, one dense row — who, then the direction pill
+  // and the time as facts, and an objection's section and reason as the sub line.
   function ballotHtml(item, viewerId) {
     if (!item.votes.length) {
-      return `<p class="gov-empty">No votes yet${item.closed_at ? ' — closed unopposed' : ''}.</p>`;
+      return emptyStateHtml(`No votes yet${item.closed_at ? '. Closed unopposed' : ''}.`);
     }
     const rows = item.votes.map((v) => {
       const who = escapeHtml(v.display_name || v.github_login || `builder ${v.voter_id}`);
       const mine = String(v.voter_id) === String(viewerId) ? ' <span class="gov-held-note">your vote</span>' : '';
-      const when = escapeHtml(String(v.cast_at).slice(0, 16).replace('T', ' '));
       // Task 1003270: the faulted section by its LABEL — the words the author
       // wrote under and the objector picked from. `why_matters` is a jsonb key,
       // not something a reader should have to decode.
       const objection = v.direction === 'no'
-        ? `<div class="gov-perm__guards">objected to <strong>${escapeHtml(SECTION_LABELS[v.section_key] || v.section_key || 'the idea')}</strong> — ${escapeHtml(v.reason_md || '')}</div>`
+        ? `<p class="ov-row__sub">objected to <strong>${escapeHtml(SECTION_LABELS[v.section_key] || v.section_key || 'the idea')}</strong>: ${escapeHtml(v.reason_md || '')}</p>`
         : '';
-      return `<div class="gov-assign-row"><span class="gov-assign-row__who">${who}${mine}</span>
-        <span class="gov-pill ${v.direction === 'no' ? 'gov-pill--locked' : 'gov-pill--seeded'}">${v.direction === 'no' ? 'objected' : 'yes'}</span>
-        <span class="muted">${when}</span>${objection}</div>`;
+      return `<li class="ov-row ov-row--dense"><div class="ov-row__main">
+        <span class="ov-row__title">${who}${mine}</span>
+        ${objection}
+        <div class="ov-row__facts">${v.direction === 'no' ? pill('danger', 'objected') : pill('ok', 'yes')}<span class="ov-row__when">${when(v.cast_at)}</span></div>
+      </div></li>`;
     }).join('');
-    return `<div class="gov-section">${rows}</div>`;
+    return `<ul class="ov-rows">${rows}</ul>`;
   }
 
   // ---- the vote form (R17) -----------------------------------------------------
@@ -784,14 +863,12 @@
       // a graded Full Idea has all five, and a blank one is only noise.
       const body = String(fv[key] ?? '').trim();
       if (!body) return '';
-      return `<div class="gov-idea__part">
-        <h4 class="gov-idea__label">${escapeHtml(SECTION_LABELS[key])}</h4>
-        <p class="gov-idea__body">${escapeHtml(body)}</p>
-      </div>`;
+      return `<h4 class="ov-prose__l">${escapeHtml(SECTION_LABELS[key])}</h4>
+        <p class="ov-prose__p gov-idea__body">${escapeHtml(body)}</p>`;
     }).join('');
     return rows
-      ? `<div class="gov-idea">${rows}</div>`
-      : '<p class="gov-empty">This idea has no written sections.</p>';
+      ? `<div class="ov-prose gov-idea">${rows}</div>`
+      : emptyStateHtml('This idea has no written sections.');
   }
 
   // ---- the sitting's rules, in plain words (task 1003270) --------------------
@@ -834,7 +911,7 @@
 
   const PASS_RULE_PLAIN = {
     first_ratifier: 'The first vote decides it: a yes ratifies, an objection returns it to its author.',
-    consent: 'It passes unless someone objects \u2014 silence is agreement, and one reasoned objection returns it.',
+    consent: 'It passes unless someone objects — silence is agreement, and one reasoned objection returns it.',
     majority: 'It passes only when more than half the board votes yes. Silence is not agreement here.',
   };
 
@@ -844,10 +921,10 @@
     const keys = membershipRankKeys(c.membership);
     const who = keys
       ? `Every active <strong>${rankNames(keys)}</strong> ${past ? 'could vote on this' : 'may vote on this'}.`
-      : `Nobody ${past ? 'could vote' : 'may vote'} \u2014 the membership setting <code>${escapeHtml(String(c.membership || 'unset'))}</code> cannot be read.`;
+      : `Nobody ${past ? 'could vote' : 'may vote'} — the membership setting <code>${escapeHtml(String(c.membership || 'unset'))}</code> cannot be read.`;
     const rule = PASS_RULE_PLAIN[c.pass_rule] || 'How this sitting passes could not be read.';
     const clock = c.window_minutes === null || c.window_minutes === undefined
-      ? `No deadline \u2014 it ${past ? 'stayed' : 'stays'} open until a vote decides it.`
+      ? `No deadline — it ${past ? 'stayed' : 'stays'} open until a vote decides it.`
       : `The sitting ${past ? 'ran' : 'runs'} ${fmtWindow(c.window_minutes)}${c.close_early_on_full_turnout ? ', closing early once every member has voted' : ''}.`;
     const score = item.subject ? item.subject.completeness_score : null;
     const grade = score == null
@@ -878,19 +955,19 @@
     const isOwnIdea = item.subject_type === 'full_idea'
       && item.subject && String(item.subject.author_id) === String(viewerId);
     const sections = Object.keys(SECTION_LABELS).map((key) => `
-      <label class="gov-perm"><input type="radio" name="vote-section-${escapeHtml(item.id)}" value="${escapeHtml(key)}"> <span>${escapeHtml(SECTION_LABELS[key])}</span></label>`).join('');
+      <label class="gov-vote__section"><input type="radio" name="vote-section-${escapeHtml(item.id)}" value="${escapeHtml(key)}"> <span>${escapeHtml(SECTION_LABELS[key])}</span></label>`).join('');
     const ownNote = isOwnIdea
-      ? `<p class="gov-grid-note">Your own idea. You may vote, but it can\u2019t be decided by your vote alone, and a vote on your own idea earns no karma.</p>`
+      ? `<p class="gov-grid-note">Your own idea. You may vote, but it can’t be decided by your vote alone, and a vote on your own idea earns no karma.</p>`
       : '';
     return `<div class="gov-vote" data-item="${escapeHtml(item.id)}">
       ${ownNote}
-      <button type="button" class="gov-btn" data-vote="yes">Vote yes</button>
+      <button type="button" class="btn-accent" data-vote="yes">Vote yes</button>
       <details class="gov-vote__no">
-        <summary class="gov-btn gov-btn--ghost">Object\u2026</summary>
+        <summary class="btn-ghost">Object…</summary>
         <p class="gov-grid-note">This sends the idea back to its author. Say why, and which section.</p>
-        <textarea class="gov-input" data-vote-reason placeholder="Why \u2014 the reason the author will act on" maxlength="5000" rows="3"></textarea>
+        <textarea data-vote-reason placeholder="Why — the reason the author will act on" maxlength="5000" rows="3"></textarea>
         <div class="gov-vote__sections">${sections}</div>
-        <button type="button" class="gov-btn" data-vote="no">Cast objection</button>
+        <button type="button" class="btn-ghost btn-ghost--danger" data-vote="no">Cast objection</button>
       </details>
     </div>`;
   }
@@ -906,7 +983,7 @@
     try {
       const out = await sendJson('POST', `/government/board/items/${encodeURIComponent(itemId)}/votes`, body);
       toast(out.item_closed
-        ? `Vote cast \u2014 the sitting closed: ${out.outcome}.`
+        ? `Vote cast — the sitting closed: ${out.outcome}.`
         : 'Vote cast.');
     } catch (err) {
       if (err && err.kind === '401') return;
@@ -934,15 +1011,18 @@
   //
   // A CLOSED sitting has no action and no idea body: its head carries the
   // outcome and the record lives under the same summary.
+  //
+  // In v3 a sitting IS the panel (task 1003469): the card is the shell's .scroll,
+  // its title the panel's display-voice heading.
   function itemCard(item, viewerId) {
     const yes = item.votes.filter((v) => v.direction === 'yes').length;
     const no = item.votes.filter((v) => v.direction === 'no').length;
     const isOpen = !item.closed_at;
     const state = isOpen
-      ? `<span class="gov-pill gov-pill--custom">open</span> <span class="muted">${escapeHtml(clockLine(item))}</span>`
-      : `<span class="gov-pill ${item.outcome === 'passed' ? 'gov-pill--seeded' : 'gov-pill--locked'}">${escapeHtml(item.outcome || '')}</span>`;
+      ? `${pill('info', 'open')} <span>${escapeHtml(clockLine(item))}</span>`
+      : (item.outcome === 'passed' ? pill('ok', item.outcome) : pill('warn', item.outcome || ''));
     const amendmentDetail = item.subject_type === 'constitutional_amendment' && item.subject
-      ? `<p class="gov-item__amend">Proposes <code>${escapeHtml(JSON.stringify(item.subject.proposed))}</code>${item.subject.rationale_md ? ` \u2014 ${escapeHtml(item.subject.rationale_md)}` : ''}</p>`
+      ? `<p class="gov-item__amend">Proposes <code>${escapeHtml(JSON.stringify(item.subject.proposed))}</code>${item.subject.rationale_md ? ` — ${escapeHtml(item.subject.rationale_md)}` : ''}</p>`
       : '';
     const mine = item.votes.find((v) => String(v.voter_id) === String(viewerId));
     // A voter who has cast sees WHAT they cast where the buttons were. The line
@@ -953,8 +1033,8 @@
       : mine
         ? `<p class="gov-item__cast">You ${mine.direction === 'no' ? 'objected' : 'voted yes'}. One vote per member.</p>`
         : voteFormHtml(item, viewerId);
-    const tally = `${yes} yes \u00b7 ${no} objection${no === 1 ? '' : 's'}`;
-    return `<section class="gov-item" id="board-item-${escapeHtml(item.id)}">
+    const tally = `${yes} yes · ${no} objection${no === 1 ? '' : 's'}`;
+    return `<section class="scroll gov-item" id="board-item-${escapeHtml(item.id)}">
       <div class="gov-item__head">
         <h3 class="gov-item__title">${subjectLine(item)}</h3>
         <span class="gov-item__state">${state}</span>
@@ -963,7 +1043,7 @@
       ${action ? `<div class="gov-item__act">${action}</div>` : ''}
       ${isOpen ? ideaSectionsHtml(item) : ''}
       <details class="gov-item__meta">
-        <summary class="gov-item__summary">${tally} \u00b7 who votes, and how it ${isOpen ? 'passes' : 'passed'}</summary>
+        <summary class="gov-item__summary">${tally} · who votes, and how it ${isOpen ? 'passes' : 'passed'}</summary>
         <div class="gov-item__metabody">
           ${decidedByHtml(item)}
           ${ballotHtml(item, viewerId)}
@@ -979,25 +1059,29 @@
       data = await fetchJson('/government/board/items');
     } catch (err) {
       if (err && err.kind === '401') return;
-      box.innerHTML = `<p class="gov-empty">Could not load the Board Room just now.</p>`;
+      box.innerHTML = emptyStateHtml('Could not load the Board Room just now.');
       return;
     }
     const viewerId = data.viewer_id;
-    const open = (data.open || []).map((i) => itemCard(i, viewerId)).join('');
-    const closed = (data.closed || []).map((i) => itemCard(i, viewerId)).join('');
+    const openItems = data.open || [];
+    const closedItems = data.closed || [];
+    const open = openItems.map((i) => itemCard(i, viewerId)).join('');
+    const closed = closedItems.map((i) => itemCard(i, viewerId)).join('');
     box.innerHTML =
-      (open || window.OTBKit.emptyStateHtml('Nothing is before the board. When a Full Idea clears the completeness grade, its window opens here.'))
-      + `<h2 class="gov-h">Closed sittings</h2>`
-      + (closed || `<p class="gov-empty">No sitting has closed yet.</p>`);
+      (open || `<section class="scroll">${emptyStateHtml('Nothing is before the board. When a Full Idea clears the completeness grade, its window opens here.')}</section>`)
+      + `<div class="gov-board__divider">${groupHead('Closed sittings', closedItems.length)}</div>`
+      + (closed || `<section class="scroll">${emptyStateHtml('No sitting has closed yet.')}</section>`);
     // R21: the Discord announcement deep-links ?item=<id>#board-room — land the
     // reader on THAT sitting. Query, not hash (the hash is the tab, makeTabs
-    // owns it); a missing or unknown id is simply the room as usual.
+    // owns it); a missing or unknown id is simply the room as usual. The mark is
+    // the world's lit grammar: the accent, and only on the one live thing.
     const wanted = new URLSearchParams(window.location.search).get('item');
     if (wanted) {
       const el = document.getElementById(`board-item-${wanted}`);
       if (el) {
         el.scrollIntoView({ block: 'start' });
-        el.style.outline = '2px solid var(--color-text-success, #4a4)';
+        el.style.outline = '2px solid var(--accent)';
+        el.style.outlineOffset = '2px';
       }
     }
     // R17: the cast buttons. One delegated listener; the SERVER refuses every
@@ -1018,6 +1102,9 @@
     document.getElementById('gov-sealed').hidden = false;
     document.getElementById('gov-body').hidden = true;
     document.getElementById('gov-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('gov-sealed-body');
+    if (body) body.textContent = `Available from the ${window.OTB.rankLabel('metic')} rank up.`;
   }
 
   // Since R16 the page shell admits page.view.government (metic+), and only the
@@ -1029,8 +1116,12 @@
   function sealRanksPanel() {
     const panel = document.getElementById('gov-panel-ranks');
     const body = document.getElementById('gov-body');
-    // Replace the admin surface with the sealed note, inside its own tab only.
-    panel.innerHTML = '<p class="gov-sealed">Permissions is the Archon administration surface. The Constitution and the Board Room are yours to read.</p>';
+    // Replace the admin surface with the sealed panel, inside its own tab only.
+    panel.innerHTML =
+      `<section class="scroll" aria-labelledby="gov-ranks-sealed-h">
+         <h2 class="scroll__h" id="gov-ranks-sealed-h">${escapeHtml(window.OTB.rankLabel('archon'))}s only</h2>
+         <p class="scroll__lede">Permissions is the Archon administration surface. The Constitution and the Board Room are yours to read.</p>
+       </section>`;
     body.hidden = false;
   }
 
@@ -1061,7 +1152,7 @@
     } catch (err) {
       if (err && err.kind === '401') return;
       if (err && err.kind === '403') { sealRanksPanel(); return; }
-      document.getElementById('gov-grid').innerHTML = `<p class="gov-empty">Could not load government data just now.</p>`;
+      document.getElementById('gov-grid').innerHTML = emptyStateHtml('Could not load government data just now.');
     }
   }