@bongos/core 1.17.2 → 1.17.3

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

@@ -53,13 +53,16 @@
   // 0c. Quick stats — headline numbers for the Home dashboard (task 1723).
   // Filled by builders.js: credits + karma + rank from /me (renderProfile),
   // shipped count once the ships feed settles (renderRecentShips).
+  // task 2169: each tile is a LINK — the stat row doubles as the fastest
+  // navigation on the page (Credits → the economy doc, Shipped/Karma → the
+  // Standing sections that explain them, Rank → the ladder).
   w('home-stats', 'Overview', 15,
     '<h2 id="home-stats-h" class="sr-only">Overview</h2>' +
     '<div class="stat-row" id="home-stats-row">' +
-      '<div class="stat-tile"><span class="stat-tile__label" data-currency-label="caps">Credits</span><span class="stat-tile__num" id="stat-credits">—</span></div>' +
-      '<div class="stat-tile"><span class="stat-tile__label">Shipped</span><span class="stat-tile__num" id="stat-shipped">—</span><span class="stat-tile__sub" id="stat-shipped-sub"></span></div>' +
-      '<div class="stat-tile"><span class="stat-tile__label">Karma</span><span class="stat-tile__num" id="stat-karma">—</span><span class="stat-tile__sub" id="stat-karma-sub"></span></div>' +
-      '<div class="stat-tile"><span class="stat-tile__label">Rank</span><span class="stat-tile__num stat-tile__num--badge" id="stat-rank">—</span><span class="stat-tile__sub" id="stat-rank-sub"></span></div>' +
+      '<a class="stat-tile" href="/drachmae"><span class="stat-tile__label" data-currency-label="caps">Credits</span><span class="stat-tile__num" id="stat-credits">—</span></a>' +
+      '<a class="stat-tile" href="#standing"><span class="stat-tile__label">Shipped</span><span class="stat-tile__num" id="stat-shipped">—</span><span class="stat-tile__sub" id="stat-shipped-sub"></span></a>' +
+      '<a class="stat-tile" href="#standing"><span class="stat-tile__label">Karma</span><span class="stat-tile__num" id="stat-karma">—</span><span class="stat-tile__sub" id="stat-karma-sub"></span></a>' +
+      '<a class="stat-tile" href="/ranks"><span class="stat-tile__label">Rank</span><span class="stat-tile__num stat-tile__num--badge" id="stat-rank">—</span><span class="stat-tile__sub" id="stat-rank-sub"></span></a>' +
     '</div>',
     { view: 'home', zone: 'home-stats', sectionClass: 'scroll scroll--bare', labelledby: 'home-stats-h', hiddenByDefault: true });
 
@@ -73,17 +76,10 @@
 
   // (Goals — goals.js registers itself into the other half of the Home band.)
 
-  // 0d-triage. Idea inbox triage cue — task 1471. Surfaces the open idea_inbox
-  // (count + a few recent titles) so a triager knows when triage is due. Starts
-  // hidden; builders.js fetches /inbox and un-hides ONLY for Metic+ (triage is
-  // Metic+), so no idea data loads for anyone who can't triage. Each row deep-
-  // links to #/idea/N — the task-detail overlay opens it with the Metic+ Discard
-  // control, so triage happens in place.
-  w('triage-inbox', 'Idea inbox', 26,
-    '<h2 id="triage-inbox-h" class="scroll__h">Idea inbox<span class="count-pill" id="triage-inbox-count" hidden></span></h2>' +
-    '<p class="scroll__lede">Open ideas awaiting triage. Open one to promote it to a task or discard it.</p>' +
-    '<ul class="triage-inbox" id="triage-inbox-list"><li class="profile__placeholder">…</li></ul>',
-    { view: 'home', zone: 'home-main', labelledby: 'triage-inbox-h', hiddenByDefault: true });
+  // (task 2169: the idea-triage cue — task 1471 — no longer registers its own
+  // card; its rows render into the "Needs your attention" card that
+  // goal-inbox.js owns (#attention-ideas), the single landing place for every
+  // actionable item. builders.js still gates the /inbox fetch to Metic+.)
 
   // 0e. Recent work — compact 5-row table (task 1723). Filled by builders.js
   // renderRecentShips from the same feed as the full Your-work table.

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

@@ -148,9 +148,17 @@
     }
   }
 
+  // task 2169: this is the "Projects" card — instances state + the
+  // Start-a-project wizard merged. The wizard (an idle multi-step form, the
+  // page's worst length offender as its own card) renders ON DEMAND behind the
+  // header button, via window.OTBNewProject (new-project-wizard.js).
   const SKELETON =
-    '<h2 id="instances-h" class="scroll__h">Instances</h2>' +
-    '<p class="scroll__lede">Hosting you’ve provisioned through Cloud Bongos — each instance’s status and estimated monthly cost. Provision one with <code>bongos init</code> or the provisioning API.</p>' +
+    '<div class="proj-head">' +
+      '<h2 id="instances-h" class="scroll__h">Projects</h2>' +
+      '<button type="button" class="btn-ghost" id="new-project-toggle" aria-expanded="false" aria-controls="new-project-mount">+ Start a project</button>' +
+    '</div>' +
+    '<p class="scroll__lede">Hosting you’ve provisioned through Cloud Bongos — each instance’s status and estimated monthly cost. Provision one right here, or with <code>bongos init</code>.</p>' +
+    '<div id="new-project-mount" hidden></div>' +
     '<div id="instances-own-body"><div class="profile__placeholder">Loading your instances…</div></div>' +
     '<div id="instances-fleet" hidden>' +
       '<h3 class="scroll__h" style="font-size:1rem;margin-top:1rem">Fleet</h3>' +
@@ -161,11 +169,24 @@
   function mount(hostEl) {
     host = hostEl;
     host.innerHTML = SKELETON;
+    const toggle = host.querySelector('#new-project-toggle');
+    const wizardMount = host.querySelector('#new-project-mount');
+    let wizardRendered = false;
+    toggle?.addEventListener('click', () => {
+      if (!wizardRendered && window.OTBNewProject) {
+        window.OTBNewProject.renderInto(wizardMount);
+        wizardRendered = true;
+      }
+      const open = wizardMount.hidden;
+      wizardMount.hidden = !open;
+      toggle.setAttribute('aria-expanded', String(open));
+      toggle.textContent = open ? '− Start a project' : '+ Start a project';
+    });
     load();
   }
 
   window.OTB.contributeHallWidget({
-    id: 'instances-scroll', label: 'Instances', order: 34,
+    id: 'instances-scroll', label: 'Projects', order: 33,
     module: 'provisioning', view: 'home', zone: 'home-main',
     labelledby: 'instances-h', mount,
   });

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

@@ -180,9 +180,10 @@
     if (btn) btn.addEventListener('click', submit);
   }
 
-  window.OTB.contributeHallWidget({
-    id: 'new-project-scroll', label: 'Start a project', order: 33,
-    module: 'provisioning', view: 'home', zone: 'home-main',
-    labelledby: 'np-h', mount,
-  });
+  // task 2169: the wizard no longer registers its own always-open Home card —
+  // an idle multi-step form was the page's worst length offender. It renders
+  // on demand into the Projects card (instances-panel.js) behind its
+  // "Start a project" disclosure button. Module gating is inherited: only the
+  // provisioning-gated Projects card ever calls this.
+  window.OTBNewProject = { renderInto: mount };
 })();

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

@@ -105,6 +105,22 @@ html[data-theme="dark"] body { background: var(--bg); }
   html:not([data-theme]) body { background: var(--bg); }
 }
 
+/* ---------- table of contents (task 2166) ----------
+   Section banners in file order — grep "----------" to jump:
+     tokens + dark theme (ABOVE — the theming contract; never move/rename)
+     base · app shell · responsive shell · cards (.scroll) · stat tiles
+     Standing layout (section rail) · legacy page chrome compat
+     ledger tables · filters / pager / buttons · profile / standing
+     rank badges + tooltip · karma / acclaim · achievements · dev curve
+     onboarding checklist · welcome panel + setup selector · landing
+     goals · work-board task cards · ranks page
+     security / roster / admin leftovers (dead — removed by task 2179)
+     toast + overlays · misc shared bits · widget one-offs (wizard, triage,
+     goal inbox) · hall-kit components (END — the shared kit, task 2166).
+   New page-SPECIFIC styles belong in that page's own <page>.css (the
+   primer.css precedent), not here; new SHARED components join the kit
+   section at the end. */
+
 /* ---------- base ---------- */
 
 * { box-sizing: border-box; }
@@ -1789,3 +1805,112 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .ginbox__note { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
 .ginbox__actions { flex: 0 0 auto; display: flex; gap: 6px; }
 .ginbox__pending { font-size: 12.5px; margin: 10px 0 0; color: var(--ink-soft); }
+
+/* ---------- hall-kit components (task 2166) ----------
+   Styles for the shared kit (hall-kit.js / window.OTBKit): pager bar,
+   filter-bar disclosure + chips, tab strip, empty state, skeleton shimmer,
+   collapsible card. The kit reuses .ledger/.pager/.filters/.setup__tab/
+   .rail-link defined above; only what is new lives here. The .pager--paged
+   block is promoted VERBATIM from work.html's page-local <style> (task 1931)
+   so every page can render the standard bar — work.html's identical copy
+   retires with task 2170 (duplicate rules, no visual change meanwhile). */
+
+.pager--paged { justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
+.pager__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.pager__perpage {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 12px; color: var(--ink-faint);
+}
+.pager__perpage select { height: 30px; padding: 2px 8px; font-size: 13px; }
+.pager__page {
+  font-size: 12.5px; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: center;
+}
+.pager__nav .pager__btn:disabled { opacity: 0.4; cursor: default; }
+
+/* filter-bar disclosure ("Filters" button) + removable active-filter chips */
+.filters__more-count { margin-left: 6px; }
+.filters--overflow {
+  padding: 10px 12px;
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  margin-bottom: 14px;
+}
+.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 10px;
+  font-size: 12.5px;
+  color: var(--accent-text);
+  background: var(--accent-weak);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
+  border-radius: 999px;
+  cursor: pointer;
+}
+.chip:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); }
+
+/* tab strip — the .setup__tab idiom in the .setup__toggle frame, promoted */
+.kit-tabs {
+  display: inline-flex;
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  margin: 0 0 14px;
+}
+.kit-tabs .setup__tab { white-space: nowrap; }
+.kit-tabs .setup__tab .count-pill { margin-left: 6px; }
+
+/* empty state — one short line + at most one action link */
+.empty-state { padding: 6px 0; }
+.empty-state p { margin: 0; font-size: 13px; color: var(--ink-faint); }
+.empty-state__action { display: inline-block; margin-top: 6px; font-size: 13px; }
+
+/* skeleton shimmer — standard-height placeholder rows while data loads, so
+   cards don't jump; derives from the ink/bg tokens like everything else */
+.kit-skel {
+  display: inline-block;
+  width: 60%;
+  min-width: 80px;
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--ink) 7%, var(--bg-card)) 25%,
+    color-mix(in srgb, var(--ink) 13%, var(--bg-card)) 45%,
+    color-mix(in srgb, var(--ink) 7%, var(--bg-card)) 65%);
+  background-size: 200% 100%;
+  animation: kit-skel-shimmer 1.2s ease-in-out infinite;
+}
+.kit-skel-row td { border-bottom: 1px solid var(--rule-soft); }
+@keyframes kit-skel-shimmer {
+  from { background-position: 120% 0; }
+  to   { background-position: -80% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-skel { animation: none; }
+}
+
+/* collapsible card body — the Work-backlog <details> idiom, generalized */
+.kit-collapse__summary {
+  cursor: pointer;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.kit-collapse__summary .scroll__h { display: inline; margin: 0; }
+.kit-collapse__body { margin-top: 12px; }
+
+/* ---- Home dashboard (task 2169) ---- */
+/* Stat tiles are links now — inherit ink, reveal affordance on hover. */
+a.stat-tile { color: inherit; }
+a.stat-tile:hover {
+  text-decoration: none;
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
+  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
+}
+/* Projects card header: title left, "Start a project" disclosure right. */
+.proj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.proj-head .scroll__h { margin: 0; }
+/* The over-budget "More" row — one quiet line, not a card. */
+.home-more { margin: 0; font-size: 13px; color: var(--ink-soft); }

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

@@ -0,0 +1,194 @@
+/* work.css — page-local styles for the Work Board (task 2170; extracted from
+   work.html's old inline <style> per the hall placement rules). Only what the
+   shared kit doesn't carry lives here: in-flight actions, claimable task
+   cards (dense 2-line layout), history list, bulk toolbar. Shared pieces —
+   .pager--paged, .count-pill, .kit-tabs, .filters overflow — are in
+   style.css. Everything derives from the shared design tokens so instance
+   packs reskin this page along with the rest of the hall. */
+
+.kbd {
+  display: inline-block;
+  padding: 0 6px;
+  border: 1px solid var(--border-strong);
+  border-radius: 5px;
+  background: var(--surface-2);
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--ink-soft);
+}
+
+.wip-builder { color: var(--ink); font-weight: 600; }
+.wip-builder small { color: var(--ink-soft); font-weight: 400; }
+
+/* Filtered-count line under the filter bar. */
+.claim-count-line {
+  margin: 0 0 10px;
+  font-size: 12.5px;
+  color: var(--ink-faint);
+}
+
+/* ---- #616 / task 2170: claim/release actions + the dense task card ---- */
+
+/* task 2170 (owner call 2026-07-10): denser 2-line cards. The card keeps its
+   grid but tightens padding and type, actions go horizontal, and the touches
+   path-dump becomes a "✎ N files" chip with the full list in the tooltip. */
+.task { padding: 8px 12px; gap: 2px 12px; }
+.task__title { font-size: 13px; line-height: 1.35; }
+.task__meta { margin-top: 1px; row-gap: 2px; }
+
+.task__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+/* Claim is the primary action — filled accent so it reads above Copy. */
+.task__claim {
+  background: var(--accent);
+  border: 1px solid var(--accent-deep);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 5px 14px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 150ms, opacity 150ms;
+}
+.task__claim:hover { background: var(--accent-deep); }
+.task__claim:disabled { opacity: 0.55; cursor: default; }
+
+/* Files a claimable task is responsible for — a compact count chip in the
+   meta row; the full path list rides the tooltip (task 2170 density pass). */
+.task__touches {
+  color: var(--ink-faint);
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: help;
+}
+
+.task__tag--newcomer {
+  background: var(--ok-weak);
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
+}
+.task__tag--mine {
+  background: var(--accent-weak);
+  color: var(--accent-text);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+/* task 1498 / ADR 0084: per-task rank floor. Outlined + emphasized (not a
+   filled tag) so a gated task reads as "authority required", distinct from
+   the filled newcomer tag. */
+.task__tag--rank {
+  background: transparent;
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+/* task 1752: the open (no floor) state — muted/neutral so "Any rank" reads as
+   "open to all", not as a warning like the gated --rank tag above. */
+.task__tag--rank-open {
+  background: transparent;
+  color: var(--ink-faint);
+  border-color: var(--border);
+}
+/* task 1753: the whole card is clickable → toggles selection (task 1869). */
+.task { cursor: pointer; }
+.backlog-count { font-size: 13px; color: var(--ink-faint); margin-left: 8px; }
+#backlog-list .history__row { cursor: pointer; }
+
+/* In-flight table: release action on the viewer's own claims. */
+.wip__action { text-align: right; white-space: nowrap; }
+.wip__release {
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  color: var(--ink-soft);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 11px;
+  cursor: pointer;
+  transition: background 150ms, color 150ms, border-color 150ms;
+}
+.wip__release:hover:not(:disabled) {
+  background: var(--danger-weak);
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
+}
+.wip__release:disabled { opacity: 0.55; cursor: default; }
+.wip__mine-none { color: var(--ink-faint); }
+.wip__row--mine { background: var(--accent-weak); }
+
+/* Recently-shipped history. */
+.history { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
+.history__row {
+  display: flex; align-items: baseline; gap: 12px;
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.history__row:last-child { border-bottom: none; }
+.history__id {
+  font-weight: 600; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums; min-width: 3.2em;
+}
+.history__title { flex: 1 1 auto; color: var(--ink); min-width: 0; }
+.history__when { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
+
+@media (max-width: 640px) {
+  .task__actions { grid-column: 2; justify-self: start; }
+}
+
+/* ---- task 1759: multi-select + the bottom bulk-action toolbar ---- */
+
+.wip__select-cell { width: 1%; text-align: center; }
+.wip__select { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
+
+.bulk-toolbar {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  background: var(--ink);
+  color: var(--bg-card);
+  padding: 10px 16px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  max-width: min(92vw, 720px);
+}
+.bulk-toolbar[hidden] { display: none; }
+.bulk-toolbar__count { font-size: 13px; font-weight: 600; white-space: nowrap; }
+.bulk-toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.bulk-toolbar__btn {
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: var(--bg-card);
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 6px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 150ms, opacity 150ms;
+}
+.bulk-toolbar__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }
+.bulk-toolbar__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.bulk-toolbar__clear {
+  background: transparent;
+  border: none;
+  color: var(--bg-card);
+  opacity: 0.75;
+  font-size: 12.5px;
+  cursor: pointer;
+  padding: 4px 6px;
+}
+.bulk-toolbar__clear:hover { opacity: 1; }
+
+@media (max-width: 640px) {
+  .bulk-toolbar { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; }
+}