@bongos/core 1.17.3 → 1.18.0

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

@@ -1026,8 +1026,8 @@
       renderArtKeyCard(res.data);
       wireArtKeyCard();
       $('#art-key').hidden = false;
-      // Landed here from the hall's "Add your key" action / the CLI nudge link.
-      if (location.hash === '#art-key') $('#art-key').scrollIntoView({ behavior: 'smooth' });
+      // The hall's "Add your key" action / CLI nudge deep link (#art-key) is
+      // landed by load()'s final applyHash() once every section has revealed.
     } catch (err) {
       console.error('[settings] failed to load art key', err);
       $('#art-key').hidden = false;
@@ -1068,49 +1068,100 @@
     }
   }
 
-  // ---- section rail (grouped sub-nav, task 1723) -----------------------------
+  // ---- section rail (grouped sub-nav, task 1723 → kit, task 2172) -----------
   //
-  // The sections sit in six groups behind a left rail (#settings-rail). CSS on
-  // the page shows only the active group (.settings-groups[data-active]); a
-  // section's own [hidden] attribute still wins, so the per-section reveal
-  // logic above is unchanged. Deep links like #art-key activate their group
-  // first, so the existing scrollIntoView lands on a visible section.
-
-  const RAIL_GROUPS = ['account', 'devbox', 'access', 'preferences', 'sound', 'extensions'];
+  // The sections sit in six groups behind a left rail (#settings-rail), built by
+  // OTBKit.makeSectionRail in switch mode — the idiom this page originated. CSS
+  // shows only the active group (.settings-groups[data-active]); a section's own
+  // [hidden] attribute still wins, so the per-section reveal logic above is
+  // unchanged. Deep links activate their group first, so scrollIntoView lands on
+  // a visible section.
+
+  // The Dev box group (box panel, desktop app, pairing) exists only where the
+  // dev-box module runs — a vanilla instance has no boxes to manage, so the
+  // whole group (rail entry included) stays out rather than showing an empty
+  // shell. RAIL_GROUPS derives from the items so a #dev-box anchor no-ops too.
+  const RAIL_ITEMS = [
+    { id: 'account', label: 'Account' },
+    { id: 'access', label: 'Access & keys' },
+    ...(window.OTB.moduleOn('dev-box') ? [{ id: 'devbox', label: 'Dev box' }] : []),
+    { id: 'preferences', label: 'Preferences' },
+    { id: 'sound', label: 'Sound' },
+  ];
+  const RAIL_GROUPS = RAIL_ITEMS.map((i) => i.id).concat('extensions');
+  let rail = null;
+
+  // task 2172 — stable per-panel anchors (/settings#cli, /settings#dev-box, …)
+  // so skills and docs can deep-link a panel without depending on internal
+  // section ids. #art-key predates the map and IS its section id (the hall's
+  // "Add your key" action + the CLI nudge target it) — kept verbatim.
+  const PANEL_ANCHORS = {
+    'connections': 'connections-scroll',
+    'display-name': 'display-name-scroll',
+    'disciplines': 'craft-scroll',
+    'cli': 'cli-scroll',
+    'art-key': 'art-key',
+    'dev-box': 'box-scroll',
+    'dev-box-app': 'boxapp-scroll',
+    'pairing': 'pairing-scroll',
+    'wandering': 'wandering-scroll',
+    'rendering': 'render-scroll',
+    'voices': 'voices-scroll',
+    'sounds': 'sounds-scroll',
+    'event-sounds': 'event-sounds-scroll',
+  };
 
   function activateGroup(group, opts) {
     if (!RAIL_GROUPS.includes(group)) return;
     const groups = document.getElementById('settings-groups');
     if (!groups) return;
     groups.dataset.active = group;
-    document.querySelectorAll('#settings-rail .rail-link').forEach((a) => {
-      a.classList.toggle('rail-link--active', a.dataset.group === group);
-    });
+    rail?.activate(group);
     if (!opts || opts.scroll !== false) window.scrollTo({ top: 0 });
   }
 
-  // Map a #hash to its group: either a group name itself (#access), or the id
-  // of an element inside a grouped section (#art-key → access).
-  function groupForHash(hash) {
+  // Resolve a #hash to { group, el }: a group name itself (#access), a panel
+  // anchor (#cli), or the id of an element inside a grouped section (#art-key).
+  function resolveHash(hash) {
     const id = String(hash || '').replace(/^#/, '');
     if (!id) return null;
-    if (RAIL_GROUPS.includes(id)) return id;
-    const el = document.getElementById(id);
+    if (RAIL_GROUPS.includes(id)) return { group: id, el: null };
+    const el = document.getElementById(PANEL_ANCHORS[id] || id);
     const grouped = el && el.closest ? el.closest('[data-group]') : null;
-    return grouped ? grouped.getAttribute('data-group') : null;
+    return grouped ? { group: grouped.getAttribute('data-group'), el } : null;
+  }
+
+  // Activate the hash's group; for a panel anchor also scroll the panel into
+  // view (rail highlight = the group). Runs on load, after data lands (late-
+  // revealed sections), and on hashchange.
+  function applyHash(opts) {
+    const t = resolveHash(window.location.hash);
+    if (!t) return;
+    activateGroup(t.group, { scroll: false });
+    if (t.el && (!opts || opts.scroll !== false)) {
+      t.el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } else if (!t.el) {
+      window.scrollTo({ top: 0 });
+    }
   }
 
   function wireRail() {
-    const rail = document.getElementById('settings-rail');
-    if (!rail) return;
-    rail.addEventListener('click', (e) => {
-      const a = e.target.closest ? e.target.closest('.rail-link') : null;
-      if (!a || !a.dataset.group) return;
-      e.preventDefault();
-      activateGroup(a.dataset.group);
+    const mount = document.getElementById('settings-rail');
+    if (!mount || !window.OTBKit) return;
+    rail = window.OTBKit.makeSectionRail({
+      mount,
+      items: RAIL_ITEMS,
+      mode: 'switch',
+      onSwitch: (key) => {
+        activateGroup(key);
+        // Reflect the group in the URL so the view is shareable; replaceState
+        // keeps Back for leaving the page, not retracing rail clicks.
+        history.replaceState(null, '', window.location.pathname + window.location.search + `#${key}`);
+      },
     });
-    const fromHash = groupForHash(window.location.hash);
-    if (fromHash) activateGroup(fromHash, { scroll: false });
+    rail.activate('account');
+    applyHash({ scroll: false });
+    window.addEventListener('hashchange', () => applyHash());
   }
 
   // Hide the rail + groups entirely while the not-signed-in gate is showing —
@@ -1166,10 +1217,14 @@
 
     // DEV BOX — full box management (online terminal + SSH + close), #807.
     setupBox();
-    // DEV BOX APP — static download links (#904); revealed once we know the
-    // viewer is a real builder (matches the page's hidden-until-loaded pattern).
-    $('#boxapp-scroll').hidden = false;
-    loadDevboxLatestVersion(); // #924: best-effort "latest version: X" courtesy line
+    // DEV BOX APP + PAIRING — revealed once we know the viewer is a real builder,
+    // and only where the dev-box module runs (the group's rail entry is gated
+    // the same way above — task 2172).
+    if (window.OTB.moduleOn('dev-box')) {
+      $('#boxapp-scroll').hidden = false;
+      $('#pairing-scroll').hidden = false;
+      loadDevboxLatestVersion(); // #924: best-effort "latest version: X" courtesy line
+    }
     // CONNECTIONS — Discord (hidden unless the server has Discord configured).
     setupConnections(me && me.discord ? me.discord : null);
     // CLI ACCESS — re-issue a CLI bearer from this browser session.
@@ -1177,10 +1232,13 @@
     // MODULE PANELS — render any Settings panels modules contributed via the
     // seam (BV1.R42). None today; ready for dev-box/discord/art once they leave core.
     mountContributedPanels();
-    // Reveal the Extensions rail entry only when a module actually contributed.
+    // Reveal the Extensions rail entry only when a module actually contributed:
+    // the kit rail re-renders from the item list, then re-marks the active group.
     const contributed = $('#contributed-panels');
-    const railExt = document.getElementById('rail-extensions');
-    if (railExt) railExt.hidden = !(contributed && contributed.children.length > 0);
+    if (rail && contributed && contributed.children.length > 0) {
+      rail.refresh([...RAIL_ITEMS, { id: 'extensions', label: 'Extensions' }]);
+      rail.activate($('#settings-groups')?.dataset.active || 'account');
+    }
 
     // Voices loads independently — its own endpoint + its own try/catch.
     await loadVoices();
@@ -1195,6 +1253,9 @@
     // Image key (per-builder Gemini key, task 1013) — own try/catch; `me` carries
     // the `needs` art_key item that drives the covered/action-needed banner.
     await loadArtKey(me);
+    // Every section has now loaded/revealed — land any panel-anchor deep link
+    // (/settings#cli, #dev-box, …) on its visible section.
+    applyHash();
   }
 
   // #924: show the current published Dev Box app version next to the download

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

@@ -1914,3 +1914,34 @@ a.stat-tile:hover {
 .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); }
+
+/* task 2184: two-column main zone on wide screens — Home reads as a
+   dashboard, not a stack. The attention inbox (and the More row) span both
+   columns; the work + Projects cards sit side by side. Mirrors the
+   .view-zone--band grid idiom (cards drop their own margins inside a grid). */
+#zone-home-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
+#zone-home-main > .scroll { margin: 0; }
+@media (min-width: 1024px) {
+  #zone-home-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  #zone-home-main > #attention-scroll,
+  #zone-home-main > #home-more-row,
+  #zone-home-main > #zone-home-overflow { grid-column: 1 / -1; }
+}
+
+/* task 2184: the "Next up" slice in the Your-work card — the page's answer to
+   "what's my next action". Quiet rows, accented title, one foot link. */
+.next-up { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.next-up__item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+.next-up__title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
+.next-up__title:hover { color: var(--accent-text); }
+.next-up__meta { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.next-up__foot { margin: 0 0 14px; font-size: 13px; }

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

@@ -0,0 +1,184 @@
+/* watch.css — page-local styles for Watch (task 2173; extracted from
+   watch.html's old inline <style> per the hall placement rules). Built on the
+   shared design system's derived tokens; class names are load-bearing
+   (watch.js writes them). The attention row is the shared .stat-row/.stat-tile;
+   tabs/pager/empty states come from style.css's hall-kit section. */
+
+/* task 2173 — the attention row sits above the tabs; a touch tighter than the
+   Home tiles (this is a dashboard header, not a landing zone). */
+.watch-attention { margin: 0 0 14px; }
+.watch-attention .stat-tile { min-height: 76px; padding: 12px 16px; }
+.watch-attention .stat-tile__num { font-size: 23px; }
+
+/* task 2173 density pass — panels stack inside tab panes. */
+[id^="pane-"] .scroll { padding: 16px 18px; margin: 0 0 14px; }
+
+.watch-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  margin-top: 6px;
+}
+.watch-stat {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  text-align: center;
+}
+.watch-stat__num {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 650;
+  color: var(--ink);
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+}
+.watch-stat__label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ink-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-top: 4px;
+}
+
+.watch-table-wrap { overflow-x: auto; margin-top: 6px; }
+table.watch {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  color: var(--ink);
+}
+table.watch th, table.watch td {
+  padding: 6px 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+table.watch th {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-faint);
+  border-bottom: 1px solid var(--border-strong);
+  white-space: nowrap;
+}
+table.watch td.num { text-align: right; font-variant-numeric: tabular-nums; }
+table.watch td.warn { color: var(--danger); font-weight: 600; }
+table.watch tr:hover td { background: var(--surface-2); }
+/* the kit ledger (audit log) shares the same numeric-cell affordances */
+.ledger td.num { text-align: right; font-variant-numeric: tabular-nums; }
+.ledger td.num.warn { color: var(--danger); font-weight: 600; }
+.watch-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.84rem; color: var(--info); }
+.watch-empty { color: var(--ink-faint); font-size: 13px; padding: 10px 0; }
+.watch-note { color: var(--ink-faint); font-size: 12.5px; margin-top: 10px; }
+.watch-rank { font-size: 12px; color: var(--ink-faint); }
+.watch-doc {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 12px;
+  margin-top: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.watch-sub-h, .watch-subh {
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+  margin: 16px 0 4px;
+}
+.watch-sub-h:first-of-type { margin-top: 8px; }
+
+/* Severity / status badges. */
+.badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+.badge--sev-critical { background: var(--danger-weak); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
+.badge--sev-high { background: var(--warn-weak); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
+.badge--sev-medium { background: var(--info-weak); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
+.badge--sev-low { background: var(--surface-2); color: var(--ink-soft); }
+.badge--status { background: var(--surface-2); color: var(--ink-soft); }
+
+/* Row action buttons + selects. */
+.watch-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+.watch-btn {
+  font-family: var(--font-body);
+  font-size: 12.5px;
+  font-weight: 500;
+  padding: 4px 12px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--ink-soft);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.watch-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+.watch-btn:disabled { opacity: 0.45; cursor: default; }
+.watch-btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong)); }
+.watch-select {
+  font-family: var(--font-body);
+  font-size: 13px;
+  padding: 4px 6px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: var(--radius-sm);
+}
+
+.watch-req {
+  border-bottom: 1px solid var(--border);
+  padding: 10px 0;
+  display: flex; gap: 14px; flex-wrap: wrap;
+  align-items: flex-start; justify-content: space-between;
+}
+.watch-req__who { font-weight: 600; color: var(--ink); }
+.watch-req__meta { color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
+.watch-req__note { color: var(--ink); font-size: 13.5px; margin-top: 6px; max-width: 56ch; }
+
+.watch-unavailable { color: var(--ink-faint); font-size: 13px; padding: 8px 0; }
+
+.watch-trend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
+.watch-trend__row {
+  display: grid; grid-template-columns: 84px 1fr 64px;
+  gap: 10px; align-items: center;
+  font-size: 13px; color: var(--ink);
+}
+.watch-trend__bar-track {
+  background: var(--surface-2); border-radius: 3px; height: 12px; overflow: hidden;
+  border: 1px solid var(--border);
+}
+.watch-trend__bar-fill { background: var(--accent); height: 100%; display: block; }
+.watch-trend__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
+
+.watch-list { list-style: none; padding: 0; margin: 8px 0 0; }
+.watch-list li {
+  display: flex; justify-content: space-between; gap: 12px;
+  padding: 5px 0; border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+.watch-list li .k { color: var(--ink); }
+.watch-list li .v { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+
+.watch-foot-link {
+  display: inline-block; margin-top: 12px;
+  font-size: 13px; font-weight: 500;
+  color: var(--accent-text);
+}