@bongos/core 1.18.18 → 1.19.2

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

@@ -0,0 +1,100 @@
+/* governance.css — Page-local styles for the Governance page (roles /
+   permissions / assignments — BV1.R111, ADR 0151). Built on the shared design
+   tokens (style.css), mirroring gate.css's card + pill idiom; the ?v= cache-bust
+   is stamped from this file's content hash at boot (src/asset-version.js). */
+
+.gov-h { color: var(--ink); font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
+.gov-h--minor { font-size: 13px; margin: 18px 0 6px; }
+.gov-grid-note { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 12px; }
+.gov-sealed, .gov-empty { color: var(--ink-soft); padding: 16px 0; }
+
+/* Two columns on wide screens: role rail left, permission grid right. */
+.gov-layout { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
+@media (max-width: 760px) { .gov-layout { grid-template-columns: 1fr; } }
+
+/* ---- role list ---------------------------------------------------------- */
+.gov-role-list { display: flex; flex-direction: column; gap: 8px; }
+.gov-role {
+  text-align: left; font: inherit; cursor: pointer;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--surface); padding: 10px 12px;
+  display: flex; flex-direction: column; gap: 4px;
+}
+.gov-role:hover { background: var(--surface-2); }
+.gov-role[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
+.gov-role__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.gov-role__label { font-weight: 600; color: var(--ink); font-size: 13.5px; }
+.gov-role__meta { color: var(--ink-faint); font-size: 11.5px; }
+
+.gov-pill {
+  font-size: 10.5px; font-weight: 600;
+  letter-spacing: 0.04em; text-transform: uppercase;
+  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
+  border: 1px solid var(--border); color: var(--ink-soft); background: var(--surface-2);
+}
+.gov-pill--seeded { background: var(--info-weak); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
+.gov-pill--custom { background: var(--ok-weak, var(--surface-2)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
+.gov-pill--locked { background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
+.gov-pill--floor { font-variant-numeric: tabular-nums; }
+
+/* ---- permission grid ---------------------------------------------------- */
+.gov-section { margin: 0 0 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
+.gov-section__head {
+  padding: 8px 14px; font-size: 11.5px; font-weight: 600;
+  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
+  background: var(--surface-2); border-bottom: 1px solid var(--border);
+}
+.gov-perm { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
+.gov-perm:last-child { border-bottom: 0; }
+.gov-perm__main { flex: 1 1 auto; min-width: 0; }
+.gov-perm__key {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
+  color: var(--accent-text); background: var(--surface-2);
+  padding: 1px 5px; border-radius: 4px;
+}
+.gov-perm__guards { color: var(--ink-soft); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
+
+/* The toggle: a small pill button. Held = filled; not held = outline. */
+.gov-toggle {
+  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
+  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
+  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft);
+}
+.gov-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
+.gov-toggle:hover:not(:disabled) { border-color: var(--accent); }
+.gov-toggle:disabled { opacity: 0.55; cursor: default; }
+.gov-held-note { color: var(--ok); font-size: 12px; white-space: nowrap; }
+
+/* ---- create / assign forms ---------------------------------------------- */
+.gov-create, .gov-assign { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
+.gov-assign { flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
+.gov-input {
+  font: inherit; font-size: 13px; color: var(--ink);
+  background: var(--surface); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm); padding: 7px 10px;
+}
+.gov-input:focus { outline: none; border-color: var(--accent); }
+.gov-input--id { width: 110px; }
+.gov-btn {
+  font: inherit; font-size: 13px; font-weight: 600;
+  padding: 7px 16px; border: 1px solid var(--accent);
+  background: var(--accent); color: #fff;
+  border-radius: var(--radius-sm); cursor: pointer; align-self: flex-start;
+}
+.gov-btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
+.gov-btn:disabled { opacity: 0.45; cursor: default; }
+.gov-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
+.gov-btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
+.gov-btn--small { font-size: 12px; padding: 4px 10px; }
+
+/* ---- assignments + principals ------------------------------------------ */
+.gov-assign-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
+.gov-assign-row:last-child { border-bottom: 0; }
+.gov-assign-row__who { flex: 1 1 auto; color: var(--ink); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
+.gov-assign-row__who .muted { color: var(--ink-faint); }
+.gov-principal { padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--ink-soft); }
+.gov-principal:last-child { border-bottom: 0; }
+.gov-principal code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
+  color: var(--accent-text); background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
+}

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

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Governance — {{worldName}}</title>
+  <meta name="description" content="Roles and permissions — create a custom role, grant everyday permissions, assign it to a builder. Trust-boundary powers stay locked.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/governance.css">
+</head>
+<body data-page="governance" data-page-title="Governance">
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+      <div class="page-head"><p class="page-head__sub" id="gov-sub">Loading…</p></div>
+
+      <main>
+        <p class="gov-sealed" id="gov-sealed" hidden>Archons only.</p>
+
+        <section id="gov-body" hidden>
+          <div class="gov-layout">
+            <div class="gov-roles-col">
+              <h2 class="gov-h">Roles</h2>
+              <div class="gov-role-list" id="gov-role-list"></div>
+              <form class="gov-create" id="gov-create-form" autocomplete="off">
+                <h3 class="gov-h gov-h--minor">New custom role</h3>
+                <input class="gov-input" id="gov-create-key" placeholder="role-key (kebab-case)" maxlength="64" required>
+                <input class="gov-input" id="gov-create-label" placeholder="Label" maxlength="200" required>
+                <input class="gov-input" id="gov-create-desc" placeholder="Description (optional)" maxlength="2000">
+                <button class="gov-btn" type="submit">Create role</button>
+              </form>
+            </div>
+
+            <div class="gov-grid-col">
+              <h2 class="gov-h" id="gov-grid-title">Permissions</h2>
+              <p class="gov-grid-note" id="gov-grid-note"></p>
+              <div id="gov-grid"></div>
+            </div>
+          </div>
+
+          <h2 class="gov-h">Assignments</h2>
+          <p class="gov-grid-note">Hand a custom role to a builder. Rank roles are assigned by rank itself and cannot be granted here.</p>
+          <form class="gov-assign" id="gov-assign-form" autocomplete="off">
+            <input class="gov-input gov-input--id" id="gov-assign-builder" type="number" min="1" placeholder="Builder id" required>
+            <select class="gov-input" id="gov-assign-role" required></select>
+            <button class="gov-btn" type="submit">Assign</button>
+          </form>
+          <div id="gov-assignments"></div>
+
+          <h2 class="gov-h">Machine principals</h2>
+          <p class="gov-grid-note">Capabilities held by a machine identity, never by a person or a role. Shown for completeness — nothing here can be granted.</p>
+          <div id="gov-principals"></div>
+        </section>
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<!-- 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/governance.js?v=2026-08-06-governance"></script>
+</body>
+</html>

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

@@ -0,0 +1,353 @@
+// public-builders/governance.js — Governance (/builders/governance).
+//
+// The roles/permissions/assignments tab (BV1.R111, ADR 0151 §2) over the R110
+// CRUD routes. Discord-style: pick a role on the left, toggle its OPERATIONAL
+// permissions in the grid, assign custom roles to builders below. Two walls the
+// SERVER enforces and this page only renders honestly (ADR 0016 — nothing here
+// grants anything):
+//   • `system` (trust-boundary) permissions render LOCKED — visible, never
+//     togglable; the API refuses them as `permission_not_grantable`.
+//   • the four seeded rank-roles are read-only — their grants derive from
+//     catalog floors and their assignment from builders.rank (R95b), so both
+//     toggle + assign are disabled and the API refuses `seeded_role_immutable`
+//     / `seeded_role_assignment_forbidden`.
+//
+// Like The Gate, this reads /api/bongos/me for a friendly Sealed notice —
+// DEFENCE IN DEPTH only. Every /governance/* endpoint (reads included) is ALSO
+// gated server-side on the `governance.manage` atom (archon floor). On 401 →
+// web sign-in.
+//
+// DELIBERATELY NOT IN THE SIDEBAR YET: the nav entry + the server page gate are
+// R113 (the next slice) — tests/hall_nav.mjs pins the Governance nav group and
+// grows with that slice, not this one. Until then the page is reached by URL.
+
+(() => {
+  'use strict';
+
+  const API = '/api/bongos';
+  // Generated typed client (task 1996 / R09), served as window.BongosClient by
+  // /lib/bongos-client.js. baseUrl:'' passes the full `${API}${path}` URLs below
+  // through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const { escapeHtml } = window.OTB;
+  const toast = (msg) => window.OTB.toast(msg);
+
+  // ---- fetch helpers (mirror gate.js) --------------------------------------
+
+  async function fetchJson(path) {
+    const res = await api.request('GET', `${API}${path}`);
+    if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw { kind: '401' }; }
+    if (res.status === 403) { throw { kind: '403' }; }
+    if (!res.ok) throw new Error(`${path} → ${res.status}`);
+    return res.data;
+  }
+
+  async function sendJson(method, path, body) {
+    const res = await api.request(method, `${API}${path}`, { body: body || {} });
+    if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw { kind: '401' }; }
+    const data = res.data || {};
+    if (!res.ok) {
+      const err = data.error || {};
+      throw new Error(err.message && err.message !== err.code ? err.message : friendlyError(err.code) || `${path} → ${res.status}`);
+    }
+    return data;
+  }
+
+  // The R110 refusal codes, translated for the person clicking.
+  const ERROR_COPY = {
+    permission_not_grantable: 'That is a trust-boundary permission — it can never be granted to a custom role.',
+    seeded_role_immutable: 'Rank roles are read-only: their permissions derive from the catalog, not from this page.',
+    seeded_role_assignment_forbidden: 'Rank roles are assigned by rank itself — change the builder’s rank instead.',
+    role_exists: 'A role with that key already exists.',
+    role_not_found: 'That role no longer exists — refreshing.',
+    builder_not_found: 'No builder with that id.',
+    unknown_permission: 'The permission catalog does not define that key.',
+    bad_role_key: 'Role keys are kebab-case: lowercase letters, digits, dashes.',
+    validation_failed: 'Missing or invalid fields.',
+  };
+  const friendlyError = (code) => ERROR_COPY[code] || null;
+
+  // ---- state ---------------------------------------------------------------
+
+  let roles = [];        // [{ role_key, label, description, is_system, seeded_rank, permissions: [] }]
+  let permissions = [];  // catalog rows: [{ key, system, floor, guards, grantable }]
+  let principals = [];   // [{ system_role, permission, guards }]
+  let assignments = [];  // [{ builder_id, github_login, display_name, rank, role_key, role_label, is_system }]
+  let selectedRoleKey = null;
+
+  const selectedRole = () => roles.find((r) => r.role_key === selectedRoleKey) || null;
+
+  // ---- render: role list ---------------------------------------------------
+
+  function renderRoles() {
+    const list = document.getElementById('gov-role-list');
+    list.innerHTML = '';
+    for (const role of roles) {
+      const pill = role.is_system
+        ? `<span class="gov-pill gov-pill--seeded">rank role</span>`
+        : `<span class="gov-pill gov-pill--custom">custom</span>`;
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'gov-role';
+      btn.setAttribute('aria-pressed', role.role_key === selectedRoleKey ? 'true' : 'false');
+      btn.innerHTML =
+        `<span class="gov-role__head"><span class="gov-role__label">${escapeHtml(role.label || role.role_key)}</span>${pill}</span>
+         <span class="gov-role__meta"><code>${escapeHtml(role.role_key)}</code> · ${(role.permissions || []).length} permission${(role.permissions || []).length === 1 ? '' : 's'}</span>`;
+      btn.addEventListener('click', () => { selectedRoleKey = role.role_key; renderRoles(); renderGrid(); });
+      list.appendChild(btn);
+    }
+  }
+
+  // ---- render: permission grid --------------------------------------------
+
+  function permRow(p, role) {
+    const held = !!role && (role.permissions || []).includes(p.key);
+    const row = document.createElement('div');
+    row.className = 'gov-perm';
+
+    let control;
+    if (!p.grantable) {
+      // The R110 wall, rendered: visible, never togglable.
+      control = `<span class="gov-pill gov-pill--locked" title="Trust-boundary permission — non-grantable (ADR 0151)">locked</span>`;
+    } else if (!role) {
+      control = '';
+    } else if (role.is_system) {
+      // Seeded rank-role: show what it holds, allow nothing.
+      control = held ? `<span class="gov-held-note">held via rank</span>` : '';
+    } else {
+      control = `<button type="button" class="gov-toggle" aria-pressed="${held ? 'true' : 'false'}" data-perm="${escapeHtml(p.key)}">${held ? 'granted' : '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>
+       ${control}`;
+
+    const btn = row.querySelector('button.gov-toggle');
+    if (btn) btn.addEventListener('click', () => toggleGrant(role, p.key, !held, btn));
+    return row;
+  }
+
+  function section(title, rows) {
+    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);
+    return el;
+  }
+
+  function renderGrid() {
+    const grid = document.getElementById('gov-grid');
+    const role = selectedRole();
+    document.getElementById('gov-grid-title').textContent = role
+      ? `Permissions — ${role.label || role.role_key}` : 'Permissions';
+    document.getElementById('gov-grid-note').textContent = !role
+      ? 'Pick a role to see and edit what it may do.'
+      : role.is_system
+        ? 'A rank role’s permissions derive from the catalog and cannot be edited here.'
+        : 'Toggle the everyday permissions this role carries. Locked rows are trust-boundary powers no custom role can ever hold.';
+
+    grid.innerHTML = '';
+    const humanPerms = permissions.filter((p) => !principals.some((pr) => pr.permission === p.key));
+    const locked = humanPerms.filter((p) => !p.grantable);
+    const operational = humanPerms.filter((p) => p.grantable);
+    grid.appendChild(section(`Trust boundary — locked (${locked.length})`, locked.map((p) => permRow(p, role))));
+    grid.appendChild(section(`Operational (${operational.length})`, operational.map((p) => permRow(p, role))));
+  }
+
+  async function toggleGrant(role, permissionKey, grant, btn) {
+    btn.disabled = true;
+    try {
+      await sendJson(grant ? 'PUT' : 'DELETE', `/governance/roles/${encodeURIComponent(role.role_key)}/permissions/${encodeURIComponent(permissionKey)}`);
+      toast(grant ? `Granted ${permissionKey}.` : `Revoked ${permissionKey}.`);
+      await reloadRoles();
+    } catch (err) {
+      if (err && err.kind === '401') return;
+      toast(`Could not ${grant ? 'grant' : 'revoke'}: ${err.message || err}`);
+      btn.disabled = false;
+    }
+  }
+
+  // ---- render: assignments -------------------------------------------------
+
+  function renderAssignments() {
+    const box = document.getElementById('gov-assignments');
+    box.innerHTML = '';
+    if (assignments.length === 0) {
+      box.innerHTML = `<p class="gov-empty">No role assignments yet.</p>`;
+      return;
+    }
+    const wrap = document.createElement('section');
+    wrap.className = 'gov-section';
+    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 rolePill = a.is_system
+        ? `<span class="gov-pill gov-pill--seeded">${escapeHtml(a.role_label || a.role_key)} · via rank</span>`
+        : `<span class="gov-pill gov-pill--custom">${escapeHtml(a.role_label || a.role_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>${rolePill}${action}`;
+      const btn = row.querySelector('[data-act=unassign]');
+      if (btn) btn.addEventListener('click', () => unassign(a, btn));
+      wrap.appendChild(row);
+    }
+    box.appendChild(wrap);
+  }
+
+  function renderAssignSelect() {
+    const sel = document.getElementById('gov-assign-role');
+    const custom = roles.filter((r) => !r.is_system);
+    sel.innerHTML = custom.length
+      ? custom.map((r) => `<option value="${escapeHtml(r.role_key)}">${escapeHtml(r.label || r.role_key)}</option>`).join('')
+      : `<option value="" disabled selected>No custom roles yet</option>`;
+  }
+
+  async function unassign(a, btn) {
+    btn.disabled = true;
+    try {
+      await sendJson('DELETE', `/governance/assignments/${encodeURIComponent(a.builder_id)}/${encodeURIComponent(a.role_key)}`);
+      toast(`Removed ${a.role_label || a.role_key} from builder ${a.builder_id}.`);
+      await reloadAssignments();
+    } catch (err) {
+      if (err && err.kind === '401') return;
+      toast(`Could not remove: ${err.message || err}`);
+      btn.disabled = false;
+    }
+  }
+
+  // ---- render: principals --------------------------------------------------
+
+  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>`;
+      return;
+    }
+    const wrap = document.createElement('section');
+    wrap.className = 'gov-section';
+    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);
+    }
+    box.appendChild(wrap);
+  }
+
+  // ---- loads ---------------------------------------------------------------
+
+  async function reloadRoles() {
+    const data = await fetchJson('/governance/roles');
+    roles = data.roles || [];
+    if (!roles.some((r) => r.role_key === selectedRoleKey)) selectedRoleKey = roles.length ? roles[0].role_key : null;
+    renderRoles();
+    renderGrid();
+    renderAssignSelect();
+  }
+
+  async function reloadAssignments() {
+    const data = await fetchJson('/governance/assignments');
+    assignments = data.assignments || [];
+    renderAssignments();
+  }
+
+  async function load() {
+    const perms = await fetchJson('/governance/permissions');
+    permissions = perms.permissions || [];
+    principals = perms.principals || [];
+    await reloadRoles();
+    await reloadAssignments();
+    renderPrincipals();
+  }
+
+  // ---- forms ---------------------------------------------------------------
+
+  function wireForms() {
+    document.getElementById('gov-create-form').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const btn = e.target.querySelector('button');
+      btn.disabled = true;
+      const body = {
+        role_key: document.getElementById('gov-create-key').value.trim(),
+        label: document.getElementById('gov-create-label').value.trim(),
+      };
+      const desc = document.getElementById('gov-create-desc').value.trim();
+      if (desc) body.description = desc;
+      try {
+        const r = await sendJson('POST', '/governance/roles', body);
+        toast(`Created role ${r.role ? r.role.role_key : body.role_key}.`);
+        e.target.reset();
+        selectedRoleKey = body.role_key;
+        await reloadRoles();
+      } catch (err) {
+        if (err && err.kind === '401') return;
+        toast(`Could not create role: ${err.message || err}`);
+      } finally {
+        btn.disabled = false;
+      }
+    });
+
+    document.getElementById('gov-assign-form').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const btn = e.target.querySelector('button');
+      const builderId = Number(document.getElementById('gov-assign-builder').value);
+      const roleKey = document.getElementById('gov-assign-role').value;
+      if (!roleKey) { toast('Create a custom role first.'); return; }
+      btn.disabled = true;
+      try {
+        await sendJson('POST', '/governance/assignments', { builder_id: builderId, role_key: roleKey });
+        toast(`Assigned ${roleKey} to builder ${builderId}.`);
+        e.target.reset();
+        await reloadAssignments();
+      } catch (err) {
+        if (err && err.kind === '401') return;
+        toast(`Could not assign: ${err.message || err}`);
+      } finally {
+        btn.disabled = false;
+      }
+    });
+  }
+
+  // ---- init ----------------------------------------------------------------
+
+  function showSealed() {
+    document.getElementById('gov-sealed').hidden = false;
+    document.getElementById('gov-body').hidden = true;
+    document.getElementById('gov-sub').textContent = 'Restricted.';
+  }
+
+  async function init() {
+    // Confirm rank for a friendly sealed notice; the server gates the page and
+    // every /governance endpoint on `governance.manage` regardless (cosmetic
+    // defence-in-depth). governance.manage is system:true, so only the archon
+    // rank-role can hold it — rank is an accurate client-side proxy.
+    let me;
+    try {
+      me = await fetchJson('/me');
+    } catch (err) {
+      if (err && err.kind === '401') return;
+      if (err && err.kind === '403') { showSealed(); return; }
+      me = null;
+    }
+    const rank = (me && (me.builder || me).rank || '').toLowerCase();
+    if (rank !== 'archon') { showSealed(); return; }
+
+    document.getElementById('gov-sub').textContent = 'Roles, permissions, and who holds them — the trust boundary stays locked.';
+    document.getElementById('gov-body').hidden = false;
+    wireForms();
+    try {
+      await load();
+    } catch (err) {
+      if (err && err.kind === '401') return;
+      if (err && err.kind === '403') { showSealed(); return; }
+      document.getElementById('gov-grid').innerHTML = `<p class="gov-empty">Could not load governance data just now.</p>`;
+    }
+  }
+
+  init();
+})();

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

@@ -1,14 +1,16 @@
 // public-builders/harbor.js — the Harbor (/builders/harbor).
 //
-// Archon-only dev-box management view (idea 257 / task 1163). Every builder's
-// dev box is rendered as a card on the dock; an Archon can close any box and
-// block a builder from opening new ones.
+// Metic+ dev-box management view (idea 257 / task 1163; Archon-only until ADR 0157
+// moved `box.fleet.manage` to the working rank). Every builder's dev box is rendered
+// as a card on the dock; a Metic or Archon can close any box and block a builder from
+// opening new ones.
 //
 // Like the Watch page, this reads /api/bongos/me to learn the viewer's rank and
-// shows an Archons-only notice otherwise — DEFENCE IN DEPTH only. The data + mutation
-// endpoints (/boxes, /boxes/:id/close, /boxes/:id/block) are ALSO archon-gated
-// server-side (ADR 0016), and the page itself is gated by server.js
-// requireArchonPage. On a 401 it redirects into the web sign-in flow.
+// shows a restricted notice below the Metic floor — DEFENCE IN DEPTH only. The data +
+// mutation endpoints (/boxes, /boxes/:id/close, /boxes/:id/block) are ALSO gated
+// server-side on `box.fleet.manage` (ADR 0016), and the page itself is gated by
+// serve-internal.js requireGovernancePage — whose own floor is `page.view.governance`,
+// metic since ADR 0157. On a 401 it redirects into the web sign-in flow.
 
 (() => {
   'use strict';
@@ -324,7 +326,11 @@
       me = null;
     }
     const rank = (me && (me.builder || me).rank || '').toLowerCase();
-    if (rank !== 'archon') { showSealed(); return; }
+    // ADR 0157: Harbor sits at the `page.view.governance` floor (metic), and the fleet
+    // data it reads is `box.fleet.manage` (also metic now). Cosmetic —
+    // requireGovernancePage + the route gates are the wall; this just picks body vs
+    // sealed notice.
+    if (rank !== 'metic' && rank !== 'archon') { showSealed(); return; }
 
     document.getElementById('harbor-sub').textContent = 'Each builder’s dev box at a glance.';
     document.getElementById('harbor-body').hidden = false;

package/modules/hall-ui/public/instances-panel.js

@@ -137,7 +137,9 @@
     try {
       const me = await getJSON(`${API}/me`, { softAuth: true }).catch(() => null);
       const rank = me && me.builder ? me.builder.rank : null;
-      if (rank !== 'archon') return;
+      // ADR 0157: `provisioning.fleet.manage` moved archon→metic, so the fleet section
+      // reveals for Metic+ too. Cosmetic — the route gates are the wall.
+      if (rank !== 'metic' && rank !== 'archon') return;
       const [fleet, ledger] = await Promise.all([
         getJSON(`${API}/provisioning/fleet`).catch(() => ({ instances: [] })),
         getJSON(`${API}/provisioning/fleet/cost-ledger`).catch(() => null),

package/modules/hall-ui/public/new-project-wizard.js

@@ -137,6 +137,12 @@
         hosting_shape: 'standalone',
         domain: domain || undefined,
         target_ref: `${owner}/${repo}`,
+        // The mode is LOAD-BEARING for the control-plane runner, not just for which
+        // checklist we render (task 1002562): 'adopt' makes it clone + layer onto the
+        // owner's existing history instead of pushing a fresh tree, which an existing
+        // repo rejects. This form already tracked `mode` purely for renderNextSteps —
+        // it has to reach the server too.
+        onboard_mode: mode,
       });
       const instanceId = data && data.instance ? data.instance.id : null;
       q('#np-form').hidden = true;

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

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>People — {{worldName}}</title>
+  <meta name="description" content="The builder directory: everyone building across {{worldName}} projects, searchable and ranked by track record.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+</head>
+<body data-page="people" data-page-title="People">
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+      <div class="page-head">
+        <p class="page-head__sub">Everyone building across hosted projects, ranked by track record. Descriptive only — cross-project numbers never carry authority here.</p>
+      </div>
+
+      <main>
+        <section class="scroll" id="people-scroll" aria-labelledby="people-h">
+          <h2 id="people-h" class="scroll__h">Builder directory</h2>
+          <div id="people-filters"></div>
+          <div id="people-body">
+            <div class="profile__placeholder">Loading the directory…</div>
+          </div>
+        </section>
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
+     chrome exists before the page script runs. -->
+<script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<!-- 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/hall-kit.js"></script>
+<script src="/builders/people.js"></script>
+</body>
+</html>