@bongos/core 1.19.457 → 1.19.459

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

@@ -45,6 +45,75 @@
     },
     "out": {
       "auth": false
+    },
+    "permissions": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "click",
+          "#tab-ranks"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#gov-panel-ranks",
+          "#gov-rank-list"
+        ]
+      }
+    },
+    "board": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "click",
+          "#tab-board-room"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#gov-panel-board",
+          "#gov-board"
+        ]
+      }
+    },
+    "constitution-tab": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "click",
+          "#tab-constitution"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#gov-panel-constitution",
+          "#gov-constitution-live"
+        ]
+      }
     }
   },
   "reducedMotion": {
@@ -55,5 +124,6 @@
         600
       ]
     ]
-  }
+  },
+  "_states": "task 1003469: the three tabs are three states, so the Permissions two-panel layout, the Board Room sittings and the Constitution panels are each measured. `constitution` keeps its name for the report history; against --rank archon it lands on the Permissions tab (the Archon's working surface), so `permissions` is the same landing named honestly and `board` clicks through."
 }

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

@@ -1,120 +1,9 @@
-/* harbor.css — Page-local styles for the Harbor page (Archon-only).
-   Lifted verbatim out of the page's inline <style> block (task 1002176);
-   the ?v= cache-bust is stamped automatically from this file's content hash
-   at boot (src/asset-version.js). */
-
-/* Page-local styles for the harbor — built on the shared design system's
-   derived tokens only (no page-local colour values). Each builder's dev
-   box renders as a card whose top strip + pill carry its lifecycle state. */
-.harbor-summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 14px;
-  margin: 6px 0 22px;
-}
-.harbor-stat {
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius);
-  background: var(--bg-card);
-  padding: 12px 14px;
-}
-.harbor-stat__label {
-  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
-  font-weight: 600; color: var(--ink-faint);
-}
-.harbor-stat__value {
-  font-size: 22px; font-weight: 650; color: var(--ink);
-  font-variant-numeric: tabular-nums; margin-top: 2px;
-}
-
-/* The dock — the strip the box cards sit on. */
-.harbor-dock {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-  padding: 18px;
-  border-radius: var(--radius);
-  border: var(--line) solid var(--rule-soft);
-  background: var(--glass);
-}
-
-.harbor-container {
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius);
-  background: var(--bg-card);
-  overflow: hidden;
-  display: flex; flex-direction: column;
-}
-/* The state strip along the card's top, coloured by lifecycle state. */
-.harbor-container__roof {
-  height: 4px;
-  background-color: var(--ok);
-}
-.harbor-container--parked  .harbor-container__roof { background-color: var(--ink-faint); }
-.harbor-container--pending .harbor-container__roof { background-color: var(--warn); }
-.harbor-container--gone    .harbor-container__roof { background-color: var(--rule); }
-.harbor-container--error   .harbor-container__roof { background-color: var(--danger); }
-.harbor-container--blocked .harbor-container__roof { background-color: var(--danger); }
-
-.harbor-container__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
-.harbor-container__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
-.harbor-container__who { color: var(--ink); font-weight: 600; font-size: 14.5px; }
-.harbor-container__rank { color: var(--ink-faint); font-size: 12px; margin-left: 6px; font-weight: 400; }
-
-/* Base: the shell's .fact-pill (task 1003307). States are hairlines, not fills. */
-.harbor-pill--active  { color: var(--ok); }
-.harbor-pill--pending { color: var(--warn); }
-.harbor-pill--blocked { color: var(--danger); }
-
-.harbor-rows { list-style: none; padding: 0; margin: 2px 0 0; }
-.harbor-rows li {
-  display: flex; justify-content: space-between; gap: 12px;
-  padding: 4px 0; border-bottom: var(--line) solid var(--rule-soft);
-  font-size: 13px;
-}
-.harbor-rows li:last-child { border-bottom: none; }
-.harbor-rows li .k { color: var(--ink-soft); }
-.harbor-rows li .v { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
-
-.harbor-blocked-note {
-  font-size: 12.5px; color: var(--danger);
-  border-left: 2px solid var(--danger); padding-left: 8px; margin: 2px 0 0;
-}
-
-.harbor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
-.harbor-btn {
-  font: inherit; font-size: 12.5px; font-weight: 500;
-  padding: 5px 12px; border: var(--line) solid var(--rule);
-  background: var(--bg-card); color: var(--ink-soft);
-  border-radius: var(--radius-sm); cursor: pointer; flex: 1;
-}
-.harbor-btn:hover:not(:disabled) { background: var(--glass); color: var(--ink); }
-.harbor-btn:disabled { opacity: 0.45; cursor: default; }
-.harbor-btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
-
-.harbor-empty, .harbor-sealed { color: var(--ink-soft); padding: 16px 0; }
-
-/* Lightweight modal for confirm / block dialogs. Viewport-fixed overlay on
-   the shell's own --z-modal layer — the bare 200 that used to be here was a
-   guess at "above the drawer", and gate.css guessed 50 for the same component
-   (task 1003307). */
-.harbor-modal-bg {
-  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent);
-  display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 20px;
-}
-.harbor-modal {
-  background: var(--bg-card); border: var(--line) solid var(--rule-soft); border-radius: var(--radius);
-  max-width: 460px; width: 100%; padding: 20px 22px;
-  box-shadow: var(--shadow-pop);
-}
-.harbor-modal h2 { color: var(--ink); margin: 0 0 8px; font-size: 16px; font-weight: 650; }
-.harbor-modal p { color: var(--ink); font-size: 13.5px; margin: 0 0 12px; }
-.harbor-modal label { display: block; font-size: 13px; color: var(--ink-soft); margin: 10px 0 4px; }
-.harbor-modal input[type=text], .harbor-modal textarea {
-  width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px;
-  padding: 7px 9px; border: var(--line) solid var(--rule); border-radius: var(--radius-sm);
-  background: var(--bg-card); color: var(--ink);
-}
-.harbor-modal__check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--ink); }
-.harbor-modal__check input { margin-top: 3px; }
-.harbor-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
+/* harbor.css — Page-local styles for the Harbor (task 1003469 rebuild).
+   The harbor is one panel of oversight rows grouped by lifecycle, over the
+   shell's glass summary strip; everything structural is oversight.css. What is
+   the harbor's own is the one line a barred builder carries. The ?v= cache-bust
+   is stamped from this file's content hash at boot (src/asset-version.js). */
+
+/* A barred builder: the reason under the row's title, in the danger ink and at
+   the body measure. Not a coloured bar — the world marks state with a pill. */
+.harbor-barred { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--danger); max-width: var(--measure); overflow-wrap: anywhere; }

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

@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/harbor.css">
 </head>
 <body data-page="harbor" data-page-title="Harbor">
@@ -19,24 +20,34 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. Harbor shipped with NO <h1> at all
-           (one-header-main-h1 measured 0 on every render), so the re-skin
-           carries the structural fix rather than porting the hole. The heading
-           is the LABEL voice, not a display line: on a working surface the
-           page's own name is the least interesting thing on it. -->
+      <!-- The board page head (task 1003307): the LABEL voice, not a display
+           line, because on a working surface the page's own name is the least
+           interesting thing on it. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Harbor</h1>
         <p class="page-head__sub" id="harbor-sub">Loading dev boxes…</p>
       </div>
 
       <main id="hall-main">
-        <p class="harbor-sealed" id="harbor-sealed" hidden>Archons only.</p>
+        <!-- task 1003469: the sealed state is a panel with a heading, not a bare
+             line on the ground. harbor.js writes the real floor into the lede
+             from the pack's rank label, so the copy cannot drift from ADR 0157. -->
+        <section class="scroll" id="harbor-sealed" aria-labelledby="harbor-sealed-h" hidden>
+          <h2 class="scroll__h" id="harbor-sealed-h">Restricted</h2>
+          <p class="scroll__lede" id="harbor-sealed-body">This page opens at a higher rank.</p>
+        </section>
 
         <section id="harbor-body" hidden>
-          <div class="harbor-summary" id="harbor-summary"></div>
-          <div class="harbor-dock" id="harbor-dock">
-            <p class="harbor-empty">Loading dev boxes…</p>
-          </div>
+          <!-- The glass summary strip (the shell's .stat-row), then ONE panel of
+               oversight rows grouped by lifecycle — the 280px card deck with a
+               coloured roof band per box is gone (task 1003469). -->
+          <div class="stat-row ov-summary" id="harbor-summary" aria-label="Fleet summary"></div>
+
+          <section class="scroll" aria-labelledby="harbor-dock-h">
+            <h2 class="scroll__h" id="harbor-dock-h">Dev boxes</h2>
+            <p class="scroll__lede">Every builder's box, running ones first. Close a box to reclaim it; block a builder to keep them from opening another.</p>
+            <div id="harbor-dock"><span class="kit-skel"></span></div>
+          </section>
         </section>
       </main>
 
@@ -52,6 +63,7 @@
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-16-harbor"></script>
-<script src="/builders/harbor.js?v=2026-06-16-harbor"></script>
+<script src="/builders/hall-kit.js"></script>
+<script src="/builders/harbor.js?v=2026-09-02-harbor-rows"></script>
 </body>
 </html>

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

@@ -1,9 +1,9 @@
 // public-builders/harbor.js — the Harbor (/builders/harbor).
 //
 // 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.
+// moved `box.fleet.manage` to the working rank). Every builder's dev box is one
+// oversight row in a panel, grouped by lifecycle (task 1003469); 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 a restricted notice below the Metic floor — DEFENCE IN DEPTH only. The data +
@@ -21,6 +21,7 @@
   // through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
   const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
   const { escapeHtml, fmtInt } = window.OTB;
+  const { emptyStateHtml } = window.OTBKit;
   const rankLabel = (rank) => window.OTB.rankLabel(rank, { empty: '' });
   const toast = (msg) => window.OTB.toast(msg);
 
@@ -69,18 +70,16 @@
     return `$${v.toFixed(2)}`;
   }
 
-  // Map a box state (+ block flag) to its card styling + pill label.
-  function stateStyle(state, blocked) {
-    if (blocked) return { mod: 'blocked', pill: 'blocked', pillMod: 'blocked' };
-    switch (state) {
-      case 'active': return { mod: 'active', pill: 'active', pillMod: 'active' };
-      case 'parked': return { mod: 'parked', pill: 'parked', pillMod: '' };
-      case 'provisioning':
-      case 'waking':
-      case 'parking': return { mod: 'pending', pill: state, pillMod: 'pending' };
-      case 'error': return { mod: 'error', pill: 'error', pillMod: '' };
-      default: return { mod: 'gone', pill: state || 'none', pillMod: '' };
-    }
+  // The lifecycle state as a hairline pill in the state's colour — the shell's
+  // .fact-pill states, never a coloured band on the row (task 1003469 retired the
+  // 4px "roof" strip each card wore).
+  function statePill(state) {
+    const s = state || 'none';
+    const mod = s === 'active' ? 'ok'
+      : (s === 'provisioning' || s === 'waking' || s === 'parking') ? 'warn'
+        : s === 'error' ? 'danger'
+          : 'quiet';
+    return `<span class="fact-pill fact-pill--${mod}">${escapeHtml(s)}</span>`;
   }
 
   // ---- modal ---------------------------------------------------------------
@@ -90,26 +89,30 @@
     if (root) root.innerHTML = '';
   }
 
-  // Build a modal. `fields` is optional extra HTML (inputs). onConfirm receives
-  // the modal element so the caller can read its inputs.
-  function openModal({ title, bodyHtml, confirmLabel, danger, onConfirm }) {
+  // Build the confirm dialog on the shell's --z-modal layer: the oversight
+  // family's .ov-modal (oversight.css). `bodyHtml` is optional extra HTML
+  // (inputs); onConfirm receives the dialog so the caller can read them.
+  function openModal({ title, bodyHtml, confirmLabel, onConfirm }) {
     const root = document.getElementById('harbor-modal-root');
     root.innerHTML = '';
     const bg = document.createElement('div');
-    bg.className = 'harbor-modal-bg';
+    bg.className = 'ov-modal-bg';
     bg.innerHTML =
-      `<div class="harbor-modal" role="dialog" aria-modal="true">
-        <h2>${escapeHtml(title)}</h2>
+      `<div class="ov-modal" role="dialog" aria-modal="true" aria-labelledby="harbor-modal-h">
+        <h2 class="scroll__h" id="harbor-modal-h">${escapeHtml(title)}</h2>
         ${bodyHtml}
-        <div class="harbor-modal__actions">
-          <button class="harbor-btn" data-act="cancel">Cancel</button>
-          <button class="harbor-btn ${danger ? 'harbor-btn--danger' : ''}" data-act="confirm">${escapeHtml(confirmLabel)}</button>
+        <div class="ov-modal__actions">
+          <button type="button" class="btn-ghost" data-act="cancel">Cancel</button>
+          <button type="button" class="btn-accent" data-act="confirm">${escapeHtml(confirmLabel)}</button>
         </div>
       </div>`;
     bg.addEventListener('click', (e) => { if (e.target === bg) closeModal(); });
+    bg.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
     bg.querySelector('[data-act=cancel]').addEventListener('click', closeModal);
     bg.querySelector('[data-act=confirm]').addEventListener('click', () => onConfirm(bg));
     root.appendChild(bg);
+    const first = bg.querySelector('textarea, input, [data-act=confirm]');
+    if (first) first.focus();
   }
 
   // ---- actions -------------------------------------------------------------
@@ -122,7 +125,6 @@
       bodyHtml: `<p>This will ${verb} <strong>${escapeHtml(who)}</strong>'s dev box (state: ${escapeHtml(box.state)}). Any uncommitted work on that box is lost. The box is destroyed; the builder can open a fresh one unless they are also blocked.</p>
          <p>A fresh box has a <strong>new SSH identity</strong>. If their Claude Desktop later says &ldquo;Host denied&rdquo; or asks for a password, tell them to fully restart Desktop (it re-pins) or press Repair — not to keep rebuilding, which only rotates the identity again.</p>`,
       confirmLabel: 'Close box',
-      danger: true,
       onConfirm: async () => {
         try {
           const r = await sendJson('POST', `/boxes/${box.builder.id}/close`, {});
@@ -146,9 +148,8 @@
         `<p>${escapeHtml(who)} will not be able to open or wake a dev box until you unblock them. A box they already have running is left alone unless you also close it below.</p>
          <label for="harbor-block-reason">Reason (shown to the builder)</label>
          <textarea id="harbor-block-reason" rows="2" placeholder="e.g. runaway cost — paused pending review"></textarea>
-         ${hasLiveBox ? `<label class="harbor-modal__check"><input type="checkbox" id="harbor-block-close"> Also close the box they have running now (state: ${escapeHtml(box.state)})</label>` : ''}`,
+         ${hasLiveBox ? `<label class="ov-modal__check"><input type="checkbox" id="harbor-block-close"> Also close the box they have running now (state: ${escapeHtml(box.state)})</label>` : ''}`,
       confirmLabel: 'Block builder',
-      danger: true,
       onConfirm: async (modal) => {
         const reason = (modal.querySelector('#harbor-block-reason') || {}).value || '';
         const closeEl = modal.querySelector('#harbor-block-close');
@@ -175,7 +176,6 @@
       title: `Lift the block on ${who}?`,
       bodyHtml: `<p>${escapeHtml(who)} will be able to open dev boxes again.</p>`,
       confirmLabel: 'Unblock',
-      danger: false,
       onConfirm: async () => {
         try {
           await sendJson('PATCH', `/boxes/${box.builder.id}/block`, { blocked: false });
@@ -192,56 +192,56 @@
 
   // ---- render --------------------------------------------------------------
 
-  function renderContainer(box, costByBuilder) {
-    const blocked = box.blocked && box.blocked.is;
-    const st = stateStyle(box.state, blocked);
-    const who = escapeHtml(box.builder.github_login || `#${box.builder.id}`);
+  // One box, one oversight row (oversight.css .ov-row): who and their rank, the
+  // state pill, then the facts a fleet operator scans for — make, address, how
+  // long it has been up, how long idle, what it has cost — the barred note when
+  // there is one, and the two actions on the right.
+  function renderRow(box, costByBuilder) {
+    const blocked = !!(box.blocked && box.blocked.is);
+    const who = escapeHtml(box.builder.display_name || box.builder.github_login || `#${box.builder.id}`);
+    const login = box.builder.github_login ? `<span class="ov-mono">@${escapeHtml(box.builder.github_login)}</span>` : '';
     const rank = rankLabel(box.builder.rank);
     const cost = costByBuilder.get(String(box.builder.id));
 
-    const rows = [];
+    const facts = [statePill(box.state)];
+    if (blocked) facts.push('<span class="fact-pill fact-pill--danger">blocked</span>');
+    if (rank) facts.push(`<span class="fact-chip">${escapeHtml(rank)}</span>`);
     if (box.region || box.size_slug) {
-      rows.push(['Make', escapeHtml([box.region, box.size_slug].filter(Boolean).join(' · '))]);
+      facts.push(`<span class="ov-fact">${escapeHtml([box.region, box.size_slug].filter(Boolean).join(' · '))}</span>`);
     }
-    if (box.ip && box.state === 'active') rows.push(['IP', escapeHtml(box.ip)]);
+    if (box.ip && box.state === 'active') facts.push(`<span class="ov-mono">${escapeHtml(box.ip)}</span>`);
     if (box.state === 'active') {
-      rows.push(['Up for', fmtAgo(box.provisioned_at)]);
-      rows.push(['Idle', `${fmtAgo(box.last_activity_at)}${box.claude_active ? ' · claude live' : ''}`]);
+      facts.push(`<span class="ov-fact">up <b>${fmtAgo(box.provisioned_at)}</b></span>`);
+      facts.push(`<span class="ov-fact">idle <b>${fmtAgo(box.last_activity_at)}</b>${box.claude_active ? ' · claude live' : ''}</span>`);
     } else if (box.state === 'parked') {
-      rows.push(['Parked', fmtAgo(box.parked_at)]);
-    } else if (CLOSEABLE.has(box.state)) {
-      rows.push(['State since', fmtAgo(box.last_activity_at || box.provisioned_at)]);
+      facts.push(`<span class="ov-fact">parked <b>${fmtAgo(box.parked_at)}</b> ago</span>`);
+    } else if (CLOSEABLE.has(box.state) || box.state === 'provisioning') {
+      facts.push(`<span class="ov-fact">in this state <b>${fmtAgo(box.last_activity_at || box.provisioned_at)}</b></span>`);
     }
-    rows.push(['Cost', cost != null ? fmtUsd(cost) : fmtUsd(box.compute_cost_usd)]);
-
-    const rowsHtml = rows.map(([k, v]) =>
-      `<li><span class="k">${escapeHtml(k)}</span><span class="v">${v}</span></li>`).join('');
+    facts.push(`<span class="ov-fact">cost <b>${cost != null ? fmtUsd(cost) : fmtUsd(box.compute_cost_usd)}</b></span>`);
 
-    const blockedNote = blocked
-      ? `<p class="harbor-blocked-note">Barred from opening boxes${box.blocked.reason ? `: ${escapeHtml(box.blocked.reason)}` : '.'}</p>`
+    const barred = blocked
+      ? `<p class="harbor-barred">Barred from opening boxes${box.blocked.reason ? `: ${escapeHtml(box.blocked.reason)}` : '.'}</p>`
       : '';
 
     const closeable = CLOSEABLE.has(box.state);
-    const closeLabel = box.state === 'parked' ? 'Destroy' : 'Close';
     const actions = [];
-    if (closeable) actions.push(`<button class="harbor-btn harbor-btn--danger" data-act="close">${closeLabel}</button>`);
+    if (closeable) {
+      actions.push(`<button type="button" class="btn-ghost btn-ghost--danger" data-act="close">${box.state === 'parked' ? 'Destroy' : 'Close'}</button>`);
+    }
     actions.push(blocked
-      ? `<button class="harbor-btn" data-act="unblock">Unblock</button>`
-      : `<button class="harbor-btn" data-act="block">Block</button>`);
+      ? '<button type="button" class="btn-ghost" data-act="unblock">Unblock</button>'
+      : '<button type="button" class="btn-ghost" data-act="block">Block</button>');
 
-    const el = document.createElement('article');
-    el.className = `harbor-container harbor-container--${st.mod}`;
+    const el = document.createElement('li');
+    el.className = 'ov-row';
     el.innerHTML =
-      `<div class="harbor-container__roof" aria-hidden="true"></div>
-       <div class="harbor-container__body">
-         <div class="harbor-container__head">
-           <span class="harbor-container__who">${who}<span class="harbor-container__rank">${escapeHtml(rank)}</span></span>
-           <span class="harbor-pill harbor-pill--${st.pillMod}">${escapeHtml(st.pill)}</span>
-         </div>
-         <ul class="harbor-rows">${rowsHtml}</ul>
-         ${blockedNote}
-         <div class="harbor-actions">${actions.join('')}</div>
-       </div>`;
+      `<div class="ov-row__main">
+         <span class="ov-row__title">${who}${login}</span>
+         <div class="ov-row__facts">${facts.join('')}</div>
+         ${barred}
+       </div>
+       <div class="ov-row__right"><div class="ov-row__actions">${actions.join('')}</div></div>`;
 
     const closeBtn = el.querySelector('[data-act=close]');
     if (closeBtn) closeBtn.addEventListener('click', () => confirmClose(box));
@@ -252,26 +252,50 @@
     return el;
   }
 
+  // The fleet reads in three runs — running, parked or in transition, no box —
+  // so the operator's eye lands on the boxes that cost money first. Within a run
+  // the API's order holds (most recently touched first). An empty run is not
+  // drawn: a head over nothing is a promise the page cannot keep.
+  const GROUPS = [
+    { name: 'Running', test: (b) => b.state === 'active' },
+    { name: 'Parked or in transition', test: (b) => CLOSEABLE.has(b.state) || b.state === 'provisioning' },
+    { name: 'No box', test: () => true },
+  ];
+
+  function renderDock(boxes, costByBuilder) {
+    const dock = document.getElementById('harbor-dock');
+    dock.innerHTML = '';
+    let left = boxes.slice();
+    for (const g of GROUPS) {
+      const mine = left.filter(g.test);
+      left = left.filter((b) => !g.test(b));
+      if (!mine.length) continue;
+      const sec = document.createElement('section');
+      sec.className = 'ov-group';
+      sec.innerHTML = `<div class="ov-group__head"><span class="ov-group__name">${escapeHtml(g.name)}</span><span class="ov-group__n">${fmtInt(mine.length)}</span></div>`;
+      const list = document.createElement('ul');
+      list.className = 'ov-rows';
+      for (const box of mine) list.appendChild(renderRow(box, costByBuilder));
+      sec.appendChild(list);
+      dock.appendChild(sec);
+    }
+  }
+
+  // The glass strip above the panel: the shell's .stat-row, each tile a figure
+  // with the one clause that makes it a fact rather than a number.
   function renderSummary(boxes, totalUsd) {
     const afloat = boxes.filter((b) => CLOSEABLE.has(b.state)).length;
     const active = boxes.filter((b) => b.state === 'active').length;
+    const live = boxes.filter((b) => b.state === 'active' && b.claude_active).length;
     const blocked = boxes.filter((b) => b.blocked && b.blocked.is).length;
-    const stats = [
-      ['Boxes live', fmtInt(afloat)],
-      ['Active now', fmtInt(active)],
-      ['Blocked builders', fmtInt(blocked)],
-      ['Total cost', fmtUsd(totalUsd)],
+    const tiles = [
+      ['Boxes live', fmtInt(afloat), `of ${fmtInt(boxes.length)} builder${boxes.length === 1 ? '' : 's'}`],
+      ['Active now', fmtInt(active), `${fmtInt(live)} with claude live`],
+      ['Blocked builders', fmtInt(blocked), blocked ? 'barred from opening a box' : 'nobody barred'],
+      ['Total cost', fmtUsd(totalUsd), 'across every box'],
     ];
-    document.getElementById('harbor-summary').innerHTML = stats.map(([label, value]) =>
-      `<div class="harbor-stat"><div class="harbor-stat__label">${escapeHtml(label)}</div><div class="harbor-stat__value">${value}</div></div>`).join('');
-  }
-
-  // Sort: live boxes first, then parked, then everything else;
-  // within a group, most-recently-touched first (the API already orders by
-  // updated_at desc, so a stable sort by group preserves that).
-  function sortBoxes(boxes) {
-    const rank = (b) => (b.state === 'active' ? 0 : CLOSEABLE.has(b.state) ? 1 : (b.blocked && b.blocked.is) ? 2 : 3);
-    return boxes.map((b, i) => [b, i]).sort((a, z) => (rank(a[0]) - rank(z[0])) || (a[1] - z[1])).map((p) => p[0]);
+    document.getElementById('harbor-summary').innerHTML = tiles.map(([label, num, sub]) =>
+      `<div class="stat-tile"><span class="stat-tile__label">${escapeHtml(label)}</span><span class="stat-tile__num">${num}</span><span class="stat-tile__sub">${escapeHtml(sub)}</span></div>`).join('');
   }
 
   async function load() {
@@ -285,7 +309,7 @@
     } catch (err) {
       if (err && err.kind === '401') return;
       if (err && err.kind === '403') { showSealed(); return; }
-      dock.innerHTML = `<p class="harbor-empty">Could not load dev boxes just now.</p>`;
+      dock.innerHTML = emptyStateHtml('Could not load dev boxes just now.');
       return;
     }
 
@@ -301,21 +325,23 @@
     renderSummary(boxes, totalUsd);
 
     if (boxes.length === 0) {
-      dock.innerHTML = `<p class="harbor-empty">No dev boxes yet — no builder has opened one.</p>`;
+      dock.innerHTML = emptyStateHtml('No dev boxes yet. No builder has opened one.');
       return;
     }
-    dock.innerHTML = '';
-    for (const box of sortBoxes(boxes)) dock.appendChild(renderContainer(box, costByBuilder));
+    renderDock(boxes, costByBuilder);
   }
 
   function showSealed() {
     document.getElementById('harbor-sealed').hidden = false;
     document.getElementById('harbor-body').hidden = true;
-    document.getElementById('harbor-sub').textContent = 'Archons only.';
+    document.getElementById('harbor-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('harbor-sealed-body');
+    if (body) body.textContent = `Available from the ${rankLabel('metic')} rank up.`;
   }
 
   async function init() {
-    // Confirm rank=archon for a friendly Archons-only notice; the server gates
+    // Confirm the viewer's rank for a friendly restricted notice; the server gates
     // the page + every endpoint regardless (this is cosmetic defence-in-depth).
     let me;
     try {

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

@@ -45,6 +45,23 @@
     },
     "out": {
       "auth": false
+    },
+    "block": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "clickIfVisible",
+          "[data-act=block]"
+        ],
+        [
+          "wait",
+          250
+        ]
+      ]
     }
   },
   "reducedMotion": {
@@ -55,5 +72,6 @@
         600
       ]
     ]
-  }
+  },
+  "_states": "task 1003469: `block` opens the confirm modal on the first row that has a Block action. clickIfVisible, because the kit's own stub carries no /boxes fixture and renders the empty dock — the modal is measured against the harness, where the fixture fleet renders."
 }