@bongos/core 1.18.3 → 1.18.18

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

@@ -133,11 +133,31 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 .conflict__sev--medium { background: var(--warn-weak); color: var(--warn); }
 
 .crit-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
-.crit { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
+/* task 1002164 — a third trailing column holds the per-criterion Confirm action;
+   it collapses to zero width on the rows that have none. */
+.crit { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
 .crit:last-child { border-bottom: none; }
 .crit__mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-faint); }
 .crit--done .crit__mark { background: var(--ok); border-color: var(--ok); color: #fff; }
 .crit--done .crit__text { color: var(--ink-soft); }
+
+/* task 1002164 — "met, awaiting confirmation": every linked task shipped but the
+   criterion is not yet confirmed. Distinct from both done (solid ✓) and open
+   (empty circle) so the three states read apart at a glance. */
+.crit--pending .crit__mark { border-color: var(--warn); color: var(--warn); font-weight: 700; }
+.crit__act { display: flex; align-items: center; }
+.crit-list--full .crit__act { align-self: start; padding-top: 1px; }
+.crit__confirm {
+  cursor: pointer; white-space: nowrap; padding: 3px 10px; border-radius: 999px;
+  border: 1px solid var(--ok); background: transparent; color: var(--ok);
+  font: inherit; font-size: 11.5px; font-weight: 600;
+}
+.crit__confirm:hover:not(:disabled) { background: var(--ok); color: #fff; }
+.crit__confirm:disabled { opacity: .6; cursor: default; }
+.crit__flag {
+  white-space: nowrap; padding: 2px 8px; border-radius: 999px;
+  background: var(--warn-weak); color: var(--warn); font-size: 10.5px; font-weight: 600;
+}
 /* BV1.R79: per-criterion expand in the capped band — short label, full text on
    click (matches the Roadmap page's .vbar__crit-d pattern). */
 .crit-d { min-width: 0; }
@@ -181,3 +201,61 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 
 /* Filtered-count line under the kit filter bar (list view). */
 .goals-count-line { margin: -4px 0 12px; font-size: 12.5px; color: var(--ink-faint); }
+
+/* ============================================================
+   task 1002439 — Goals "what's next" rollup (grouped list view).
+   Replaces the paginated card grid: a task-readiness summary, then
+   goals grouped Active / Blocked / Achieved. Each row rolls its
+   tasks up into ready/in-progress/blocked; the task→task dependency
+   graph itself lives on the Tasks page. Uses the shared style.css tokens.
+   ============================================================ */
+/* The list container used to be an auto-fill CARD grid; the rollup renders
+   grouped full-width blocks into it, so flip it to normal block flow. */
+#goal-grid.goal-grid { display: block; gap: 0; }
+.gr-summary { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 20px; }
+.gr-sm { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-soft); }
+.gr-sm b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
+.gr-sm__dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
+
+.gr-sec { display: flex; align-items: center; gap: 9px; margin: 26px 0 8px; }
+.gr-sec b { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
+.gr-sec__n { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+
+.gr-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
+.gr-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--rule-soft); }
+.gr-row:last-child { border-bottom: 0; }
+.gr-row:hover { background: color-mix(in srgb, var(--ink) 2.5%, var(--bg-card)); }
+.gr-ringcol { flex: none; }
+.gr-crit-none { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rule); color: var(--ink-faint); font-size: 13px; }
+.gr-main { min-width: 0; }
+.gr-title { display: inline-block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.3; }
+.gr-title:hover { color: var(--accent-text); }
+.gr-meta { font-size: 12px; color: var(--ink-faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
+.gr-roll { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
+.gr-d { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.gr-d i { width: 7px; height: 7px; border-radius: 50%; }
+.gr-d b { color: var(--ink); font-weight: 600; }
+.gr-right { text-align: right; min-width: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+.gr-next { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 230px; }
+.gr-next__t { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
+.gr-claim { background: var(--accent); color: #fff; border-radius: 8px; padding: 6px 14px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
+.gr-claim:hover { background: var(--accent-deep); }
+.gr-drill { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; }
+.gr-drill:hover { color: var(--accent-text); }
+.gr-met { font-size: 12.5px; font-weight: 600; color: var(--ok); }
+.gr-quiet { font-size: 12.5px; color: var(--ink-faint); }
+
+.gr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
+.gr-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 20px; padding: 6px 13px 6px 8px; color: var(--ink-soft); font-size: 12.5px; }
+.gr-pill:hover { border-color: var(--border-strong); }
+.gr-pill b { color: var(--ink); font-weight: 600; }
+.gr-pill__ok { width: 17px; height: 17px; border-radius: 50%; background: var(--ok-weak); color: var(--ok); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
+.gr-pill__id { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.gr-pills--muted { opacity: .6; }
+
+@media (max-width: 640px) {
+  .gr-row { grid-template-columns: auto 1fr; row-gap: 11px; }
+  .gr-right { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
+  .gr-next { align-items: flex-start; }
+  .gr-next__t { max-width: 100%; }
+}

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

@@ -14,6 +14,14 @@
        block per the hall placement rules; shared pager/filter/tab/count-pill
        styles now live in style.css's hall-kit section. -->
   <link rel="stylesheet" href="/builders/goals.css">
+  <!-- task 1002425 — the goal-detail "Tasks" pane mirrors the Tasks board's
+       claimable cards + bulk toolbar, so it needs the board's page-local card /
+       .task__claim / .bulk-toolbar styling. That styling lives in work.css (the
+       shared base .task grid is already in style.css above); linking it here is
+       the no-duplication way to give both surfaces identical cards. (Follow-up:
+       promote the shared card/toolbar rules into style.css so work.css can go
+       back to being board-only — idea captured at ship.) -->
+  <link rel="stylesheet" href="/builders/work.css">
 </head>
 <body data-page="goals" data-page-title="Goals">
 
@@ -89,23 +97,25 @@
 
           <div class="scroll" style="margin-top:20px">
             <div class="goal-work__head">
-              <h2 class="scroll__h">Work</h2>
+              <h2 class="scroll__h">Tasks</h2>
               <!-- task 2171: the To do / Completed toggle is built by
                    OTBKit.makeTabs (hash:false — the #/goal/N sub-route
                    namespace stays untouched; tabs key off in-page state). -->
               <div class="goal-work__tabs" id="goal-work-tabs" aria-label="Goal tasks"></div>
             </div>
             <div id="goal-todo-pane" role="tabpanel" aria-labelledby="tab-todo">
-              <!-- task 1828 — Kind / Status / Credits headers sort the list (click
-                   cycles desc → asc → natural); a ready row carries an inline Claim. -->
-              <table class="ledger" id="goal-todo"><thead><tr>
-                <th>№</th><th>Task</th>
-                <th class="ledger__sortable" id="goal-todo-sort-kind" role="button" tabindex="0" aria-sort="none">Kind</th>
-                <th class="ledger__sortable" id="goal-todo-sort-status" role="button" tabindex="0" aria-sort="none">Status</th>
-                <th class="ledger__sortable" id="goal-todo-sort-credits" role="button" tabindex="0" aria-sort="none" data-currency-tmpl="{Label} Est." title="Estimated reward — the actual payout is set when the task ships">Credits Est.</th>
-                <th aria-label="Actions"></th>
-              </tr></thead>
-              <tbody><tr><td colspan="6" class="ledger__empty">…</td></tr></tbody></table>
+              <!-- task 1002425 — the To-do pane mirrors the Tasks board's Ready
+                   queue so a goal's tasks have the same functionality as the board:
+                   a shared filter bar → rich claimable cards → multi-select with
+                   bulk claim → per-card copy-prompt, all opening the same task
+                   overlay. Scoped to this goal, so no Version/Goal filters (they'd
+                   be redundant). Sorting moved from the old column headers onto the
+                   filter bar's Sort control (matching the board). -->
+              <div id="goal-work-filters"></div>
+              <p class="claim-count-line" id="goal-todo-count" aria-live="polite"></p>
+              <div class="task-list" id="goal-todo-list">
+                <div class="profile__placeholder">…</div>
+              </div>
               <div id="goal-todo-pager-mount"></div>
             </div>
             <div id="goal-done-pane" role="tabpanel" aria-labelledby="tab-done" hidden>
@@ -119,6 +129,21 @@
               <div id="goal-done-pager-mount"></div>
             </div>
           </div>
+
+          <!-- task 1002425 — bulk-action toolbar for the goal's task cards,
+               mirroring the Tasks board's toolbar. Hidden until 1+ ready cards are
+               selected. position:fixed (via .bulk-toolbar in work.css) so its DOM
+               location here is immaterial; it lives inside the detail view so it's
+               scoped to this route and cleared on route change. Bulk claim is the
+               headline action; bulk release + copy parallel/sequential prompts
+               stay board-only for now (noted follow-up). -->
+          <div id="goal-bulk-toolbar" class="bulk-toolbar" hidden role="region" aria-label="Bulk actions">
+            <span class="bulk-toolbar__count" id="goal-bulk-count"></span>
+            <div class="bulk-toolbar__actions">
+              <button type="button" class="bulk-toolbar__btn" id="goal-bulk-claim-btn">Bulk claim</button>
+            </div>
+            <button type="button" class="bulk-toolbar__clear" id="goal-bulk-clear-btn">Clear</button>
+          </div>
         </section>
 
         <!-- CONFLICTS full view (hash-routed: #/goal/N/conflicts) — the whole
@@ -164,6 +189,8 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell.js?v=2026-07-03-goals1"></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-14-domutils"></script>
 <!-- shared component kit (window.OTBKit) — pager, filter bar, tabs, empty/skeleton (task 2166). -->
 <script src="/builders/hall-kit.js"></script>

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

@@ -3,13 +3,21 @@
 // Every widget — core here, module-contributed from a module's own client script —
 // registers into the window.OTB hall-widget registry (dom-utils.js), and builders.js
 // mounts the registered set into the shell's view containers (task 1723 redesign):
-//   view: 'home' | 'standing' | 'achievements' | 'leaderboard'  (default 'home')
-//   zone: a finer mount target inside the Home view
-//         ('home-banner' | 'home-stats' | 'home-band' | 'home-main')
-// Both fields ride the registry entry untouched; builders.js resolves them to the
-// #zone-* containers in index.html and falls back to <main> when absent, so a
+//   view:  'home' | 'standing' | 'leaderboard'  (default 'home')
+//   zone:  a finer mount target inside the Home view
+//          ('home-banner' | 'home-stats' | 'home-band' | 'home-main')
+//   group: a finer mount target inside Standing — which rail section this card
+//          belongs to ('work' | 'karma' | 'progress' | 'achievements', task 2174).
+// All three ride the registry entry untouched; builders.js resolves them to the
+// #zone-*/#standing-* containers and falls back to <main> when absent, so a
 // module widget written before the redesign still lands (on Home).
 //
+// task 2174 — Standing is "one identity band, then rail-navigated sections grouped
+// by question": the Profile card is the band, and every other Standing widget
+// declares the `group` that answers its question. Achievements folded in from the
+// retired #achievements hash view; the security-bounty rate card moved off Standing
+// to /drachmae (a reward schedule is reference material, not personal standing).
+//
 // Each widget owns its skeleton markup. mount(host) stamps that skeleton into the
 // registry-made <section>; builders.js then wires data to the same element ids it
 // always has (#profile-body, #recent-ships, …) — the data-rendering code is
@@ -27,9 +35,13 @@
   // setHtml — stamp a widget's skeleton into its host <section>. The host element
   // already carries the section's stable id + class (builders.js creates it from the
   // registry entry), so the skeleton is just the inner content.
+  // task 2177: `core: true` marks these as the hall's OWN cards, which exempts a
+  // home-main one from the summary/collapsed rule contributeHallWidget applies to
+  // everything else. It is a statement about provenance, not a privilege to grow —
+  // the zone budgets in builders.js still bind, and CI asserts them.
   const w = (id, label, order, html, opts) =>
     reg(Object.assign({
-      id, label, order,
+      id, label, order, core: true,
       mount(host) { host.innerHTML = html; },
     }, opts || {}));
 
@@ -100,12 +112,15 @@
 
   /* ---------------- Standing ---------------- */
 
-  // 1. Profile — the identity band at the top of Standing (#726).
+  // 1. Profile — the identity band at the top of Standing (#726). No `group`:
+  // the band sits above the rail sections and is never a rail entry.
   w('profile-scroll', 'Profile', 20,
     '<h2 id="profile-h" class="sr-only">Profile</h2>' +
     '<div class="profile" id="profile-body"><div class="profile__placeholder">…</div></div>',
     { view: 'standing', sectionClass: 'scroll scroll--profile', labelledby: 'profile-h' });
 
+  /* -- Work — "what have I shipped, and how was it judged" -- */
+
   // 2. WORKS — recent ships.
   w('ships-scroll', 'Your work', 30,
     '<h2 id="ships-h" class="scroll__h">Your work</h2>' +
@@ -124,66 +139,64 @@
     '</div>' +
     '<table class="ledger" id="recent-ships"><thead><tr><th>№</th><th>Work</th><th data-currency-label="caps">Credits</th><th>Shipped</th></tr></thead>' +
     '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>' +
-    '<div class="pager" id="ships-pager" hidden>' +
-      '<button class="btn-ghost" id="ships-prev" disabled>← earlier</button>' +
-      '<span id="ships-range" class="pager__range">1–10</span>' +
-      '<button class="btn-ghost" id="ships-next">later →</button>' +
-    '</div>',
-    { view: 'standing', labelledby: 'ships-h' });
+    // task 2174: the hand-rolled prev/next bar gives way to the OTBKit pager
+    // (per-page select, page indicator, clamping) — same #ships-* id prefix.
+    window.OTBKit.pagerBarHtml('ships', { label: 'shipped work' }),
+    { view: 'standing', group: 'work', labelledby: 'ships-h' });
 
-  // 3. CURVE — the builder's development curve (V3.R72 #291, C5).
-  w('analytics-scroll', 'Progress', 40,
-    '<h2 id="curve-h" class="scroll__h">Progress</h2>' +
-    '<p class="scroll__lede">How your output has changed over time — work shipped, cost and time per work, and how reviews held up. <span id="curve-scope-note"></span></p>' +
-    '<div class="curve" id="curve-body">' +
-      '<div class="profile__placeholder" id="curve-empty" style="display:none;">Not enough shipped work yet to chart.</div>' +
-      '<div class="curve__headline" id="curve-headline"></div>' +
-      '<div class="curve__grid" id="curve-grid"></div>' +
-      '<div class="curve__kinds" id="curve-kinds"></div>' +
-    '</div>',
-    { view: 'standing', labelledby: 'curve-h', hiddenByDefault: true });
-
-  // 4. MARKS — review quality of recent output.
-  w('grades-scroll', 'Reviews', 50,
+  // 3. MARKS — review quality of recent output.
+  w('grades-scroll', 'Reviews', 32,
     '<h2 id="marks-h" class="scroll__h">Reviews</h2>' +
     '<div class="profile__placeholder" id="marks-empty" style="display:none;">No work reviewed yet.</div>' +
     '<table class="ledger" id="recent-grades"><thead><tr><th>№</th><th>Work</th><th>Score</th><th>Verdict</th><th>Reviewed</th></tr></thead>' +
     '<tbody><tr><td colspan="5" class="ledger__empty">…</td></tr></tbody></table>' +
     '<p class="ledger__note" id="grades-rolling-note" hidden></p>',
-    { view: 'standing', labelledby: 'marks-h' });
+    { view: 'standing', group: 'work', labelledby: 'marks-h' });
+
+  /* -- Karma — peer standing; one currency, one section -- */
 
-  // 5. KARMA feed — V3.R26 (#246). Hidden until /me returns karma data.
-  w('karma-scroll', 'Karma', 60,
+  // 4. KARMA feed — V3.R26 (#246). Hidden until /me returns karma data.
+  w('karma-scroll', 'Karma', 40,
     '<h2 id="karma-h" class="scroll__h">Karma</h2>' +
     '<p class="scroll__lede">Karma rewards good citizenship — ratified ideas, peer recognition, approvals. Distinct from ' + curLabel() + ', which counts work shipped.</p>' +
     '<table class="ledger" id="karma-feed"><thead><tr><th>When</th><th>Delta</th><th>Reason</th><th>Granted by</th></tr></thead>' +
     '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>',
-    { view: 'standing', labelledby: 'karma-h', hiddenByDefault: true });
+    { view: 'standing', group: 'karma', labelledby: 'karma-h', hiddenByDefault: true });
 
-  // 5b. Peer acclaim — V3.R25 (#245). Hidden until data.
-  w('acclaim-scroll', 'Peer recognition', 70,
+  // 4b. Peer acclaim — V3.R25 (#245). Hidden until data.
+  w('acclaim-scroll', 'Peer recognition', 42,
     '<h2 id="acclaim-h" class="scroll__h">Peer recognition</h2>' +
     '<p class="scroll__lede">Recognize your peers’ finished work. A vote up (+) or down (−) shapes their karma after a one-week cooling period. You can’t vote on your own work.</p>' +
     '<table class="ledger" id="acclaim-feed"><thead><tr><th>Work</th><th>By</th><th>Votes</th><th>Your vote</th></tr></thead>' +
-    '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>',
-    { view: 'standing', labelledby: 'acclaim-h', hiddenByDefault: true });
+    '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>' +
+    // task 1002446: the last unpaged list in the hall. The feed is already
+    // client-side, so the kit's pager fits without touching the endpoint.
+    window.OTBKit.pagerBarHtml('acclaim', { label: 'entries' }),
+    { view: 'standing', group: 'karma', labelledby: 'acclaim-h', hiddenByDefault: true });
+
+  /* -- Progress — how the output has changed over time -- */
 
-  // 6. BOUNTY — red-team rewards payout table (V3.R65 #284).
-  w('bounty-scroll', 'Security bounties', 80,
-    '<h2 id="bounty-h" class="scroll__h">Security bounties</h2>' +
-    '<p class="scroll__lede">Find a flaw in the system’s own walls and report it — rewards are paid in ' + curLabel() + ' by severity. The numbers below are the live reward schedule. <a href="/diagrams">See how it fits the whole.</a></p>' +
-    '<table class="ledger" id="bounty-table"><thead><tr><th>Severity</th><th data-currency-label="caps">Credits</th><th>What counts</th></tr></thead>' +
-    '<tbody><tr><td colspan="3" class="ledger__empty">…</td></tr></tbody></table>',
-    { view: 'standing', labelledby: 'bounty-h' });
+  // 5. CURVE — the builder's development curve (V3.R72 #291, C5).
+  w('analytics-scroll', 'Progress', 50,
+    '<h2 id="curve-h" class="scroll__h">Progress</h2>' +
+    '<p class="scroll__lede">How your output has changed over time — work shipped, cost and time per work, and how reviews held up. <span id="curve-scope-note"></span></p>' +
+    '<div class="curve" id="curve-body">' +
+      '<div class="profile__placeholder" id="curve-empty" style="display:none;">Not enough shipped work yet to chart.</div>' +
+      '<div class="curve__headline" id="curve-headline"></div>' +
+      '<div class="curve__grid" id="curve-grid"></div>' +
+      '<div class="curve__kinds" id="curve-kinds"></div>' +
+    '</div>',
+    { view: 'standing', group: 'progress', labelledby: 'curve-h', hiddenByDefault: true });
 
-  /* ---------------- Achievements ---------------- */
+  /* -- Achievements — long-term progression (folded in from the retired
+        #achievements hash view, task 2174) -- */
 
-  // 7. Achievements — long-term progression (#726).
-  w('honours-scroll', 'Achievements', 85,
-    '<h2 id="ach-h" class="sr-only">Achievements</h2>' +
+  // 6. Achievements (#726).
+  w('honours-scroll', 'Achievements', 60,
+    '<h2 id="ach-h" class="scroll__h">Achievements</h2>' +
     '<p class="scroll__lede">Eight achievements recognize sustained contribution. Earned ones are highlighted; the rest show what’s left to do.</p>' +
     '<div class="ach-grid" id="ach-grid"><div class="profile__placeholder">…</div></div>',
-    { view: 'achievements', sectionClass: 'scroll scroll--bare', labelledby: 'ach-h' });
+    { view: 'standing', group: 'achievements', labelledby: 'ach-h' });
 
   /* ---------------- Leaderboard ---------------- */
 
@@ -197,10 +210,7 @@
       '<th class="ledger__sortable" id="lb-sort-karma" aria-sort="none" title="Sort by karma (peer recognition + approvals)">Karma</th>' +
       '<th class="ledger__sortable" id="lb-sort-tokens" aria-sort="none" title="Sort by tokens used across recorded sessions — efficiency is tokens ÷ credits (hover a row for tokens-per-drachma)">Tokens</th>' +
     '</tr></thead><tbody><tr><td colspan="6" class="ledger__empty">…</td></tr></tbody></table>' +
-    '<div class="pager">' +
-      '<button class="btn-ghost" id="lb-prev" disabled>← earlier</button>' +
-      '<span id="lb-range" class="pager__range">1–10</span>' +
-      '<button class="btn-ghost" id="lb-next">later →</button>' +
-    '</div>',
+    // task 2174: OTBKit pager — same #lb-* id prefix as the bar it replaces.
+    window.OTBKit.pagerBarHtml('lb', { label: 'builders' }),
     { view: 'leaderboard', labelledby: 'lb-h' });
 })();

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

@@ -0,0 +1,123 @@
+/* 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: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  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: 1px solid var(--border);
+  background: var(--surface-2);
+}
+
+.harbor-container {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  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(--border-strong); }
+.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; }
+
+.harbor-pill {
+  font-size: 11px; font-weight: 600;
+  letter-spacing: 0.04em; text-transform: uppercase;
+  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
+  border: 1px solid var(--border); color: var(--ink-soft); background: var(--surface-2);
+}
+.harbor-pill--active  { background: var(--ok-weak); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
+.harbor-pill--pending { background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
+.harbor-pill--blocked { background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 30%, transparent); 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: 1px solid var(--border);
+  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: 1px solid var(--border-strong);
+  background: var(--surface); color: var(--ink-soft);
+  border-radius: var(--radius-sm); cursor: pointer; flex: 1;
+}
+.harbor-btn:hover:not(:disabled) { background: var(--surface-2); 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;
+   z-index sits above the shell's sidebar/drawer layers. */
+.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: 200; padding: 20px;
+}
+.harbor-modal {
+  background: var(--surface); border: 1px solid var(--border); 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: 1px solid var(--border-strong); border-radius: var(--radius-sm);
+  background: var(--surface); 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; }

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

@@ -10,126 +10,7 @@
   <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">
-  <style>
-    /* 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: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      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: 1px solid var(--border);
-      background: var(--surface-2);
-    }
-
-    .harbor-container {
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      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(--border-strong); }
-    .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; }
-
-    .harbor-pill {
-      font-size: 11px; font-weight: 600;
-      letter-spacing: 0.04em; text-transform: uppercase;
-      padding: 2px 9px; border-radius: 999px; white-space: nowrap;
-      border: 1px solid var(--border); color: var(--ink-soft); background: var(--surface-2);
-    }
-    .harbor-pill--active  { background: var(--ok-weak); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
-    .harbor-pill--pending { background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
-    .harbor-pill--blocked { background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 30%, transparent); 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: 1px solid var(--border);
-      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: 1px solid var(--border-strong);
-      background: var(--surface); color: var(--ink-soft);
-      border-radius: var(--radius-sm); cursor: pointer; flex: 1;
-    }
-    .harbor-btn:hover:not(:disabled) { background: var(--surface-2); 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;
-       z-index sits above the shell's sidebar/drawer layers. */
-    .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: 200; padding: 20px;
-    }
-    .harbor-modal {
-      background: var(--surface); border: 1px solid var(--border); 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: 1px solid var(--border-strong); border-radius: var(--radius-sm);
-      background: var(--surface); 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; }
-  </style>
+  <link rel="stylesheet" href="/builders/harbor.css">
 </head>
 <body data-page="harbor" data-page-title="Harbor">
 
@@ -161,6 +42,8 @@
 <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-harbor"></script>
 <script src="/builders/harbor.js?v=2026-06-16-harbor"></script>
 </body>