@bongos/core 1.21.50 → 1.21.52

package/modules/government/docket.js

@@ -338,7 +338,9 @@ function countStates(matters) {
 function homeLine(counts) {
   if (!counts.needs && !counts.moving) return 'nothing waits on you.';
   const parts = [];
-  if (counts.needs) parts.push(`${counts.needs} ${counts.needs === 1 ? 'matter waits' : 'matters wait'} on you`);
+  // with nothing on you but work still moving, the design says so first
+  // ("nothing waits on you · 2 moving"), task 1004531
+  parts.push(counts.needs ? `${counts.needs} ${counts.needs === 1 ? 'matter waits' : 'matters wait'} on you` : 'nothing waits on you');
   if (counts.moving) parts.push(`${counts.moving} moving`);
   return parts.join(' · ');
 }

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

@@ -272,7 +272,12 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 .inside-draft { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 4px; border-top: 1px solid var(--street-rule); }
 .inside-draft[hidden] { display: none; }
 .inside-draft__change { gap: 6px; }
-.inside-draft__picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.inside-draft__picks { display: grid; grid-template-columns: 1fr; gap: 12px; }
+/* who and how are one-tap chips (task 1004531); a long choice wraps inside its
+   chip. Scoped under .inside-draft so they outrank the desk chip rules below. */
+.inside-draft__chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.inside-draft .inside-draft__chip { height: auto; min-height: 30px; padding: 5px 14px; white-space: normal; text-align: left; line-height: 1.3; }
+.inside-draft .inside-draft__chip--on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
 .inside-draft__fixed { font-size: 14px; line-height: 1.45; color: var(--ink-soft); min-height: 36px; display: flex; align-items: center; }
 .inside-meter { display: flex; flex-direction: column; gap: 6px; }
 .inside-meter__track { height: 6px; border-radius: 999px; background: var(--street-wash); overflow: hidden; }
@@ -382,7 +387,6 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 
 /* narrow: the drawing in its own sideways strip, the panel below it */
 @media (max-width: 899px) {
-  .inside-draft__picks { grid-template-columns: 1fr; }
   .inside { display: block; overflow-x: hidden; overflow-y: auto; }
   .inside-sizer { width: auto !important; height: auto !important; margin: 0; overflow: visible; }
   .inside-board { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; gap: 16px; padding: 8px 16px 24px; }

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

@@ -90,6 +90,7 @@
   var desk = { done: {}, mine: {}, cleared: {}, order: {}, open: null, ask: null, busy: false, roomAsked: false, model: null };
   var TODAY_KEY = 'gov-desk-today';
   var today = { day: '', n: 0 };
+  var todayDrawn = null; // the count the meter's pips last drew: they are rebuilt only when it moves
 
   // ---------- light / dark ----------
   var chosen = null;
@@ -811,9 +812,13 @@
     var D = window.GovDesk, pipsEl = $('streetTodayPips');
     if (!D || !pipsEl) return;
     var t = D.todayPips(today.n);
+    setText('streetTodayN', t.text);
+    // the pips are rebuilt only when the count moves, so the newest pops once
+    // and a redraw neither replays nor cuts its pop short (task 1004531)
+    if (todayDrawn === today.n && pipsEl.children && pipsEl.children.length) return;
+    todayDrawn = today.n;
     clear(pipsEl);
     t.pips.forEach(function (p) { pipsEl.appendChild(node('span', 'street-today__pip' + (p.on ? ' street-today__pip--on' : '') + (p.fresh ? ' desk-pop' : ''))); });
-    setText('streetTodayN', t.text);
   }
 
   function pickFloor(i) {
@@ -850,8 +855,7 @@
       dr.d = A ? A.draftFor(st.key, c && c.board ? c : null) : { ok: false, reason: 'unread' };
       dr.rev++;
       drawDraft(true);
-      var who = $('insideDraftWho');
-      if (who && who.focus) who.focus();
+      focusDraft('insideDraftWho');
       return !!(dr.d && dr.d.ok);
     });
   }
@@ -868,26 +872,42 @@
     if (!dr) return;
     dr.rev++;
     drawDraft(true);
+    focusDraft(focusId);
+  }
+  // Focus one control of the draft; a group of chips takes it on its picked chip.
+  function focusDraft(focusId) {
     var el = focusId ? $(focusId) : null;
+    if (el && el.getAttribute && el.getAttribute('role') === 'radiogroup') {
+      var kids = el.children || [], pick = kids[0] || null;
+      for (var i = 0; i < kids.length; i++) if (kids[i].getAttribute('aria-checked') === 'true') { pick = kids[i]; break; }
+      el = pick;
+    }
     if (el && el.focus) el.focus();
   }
-  function draftSelect(id, list, value, onPick) {
-    var sel = node('select', 'mcard-form__select');
-    sel.setAttribute('id', id);
+  // A draft choice is one tap (the owner's line rule: choices are one-tap
+  // chips, task 1004531): a radio group of chips, the picked one filled.
+  function draftChips(id, list, value, onPick) {
+    var g = node('div', 'inside-draft__chips');
+    g.setAttribute('id', id);
+    g.setAttribute('role', 'radiogroup');
+    g.setAttribute('aria-labelledby', id + 'Label');
     list.forEach(function (o) {
-      var op = node('option', '', o.words);
-      op.setAttribute('value', o.value);
-      if (o.value === value) op.setAttribute('selected', '');
-      sel.appendChild(op);
+      var on = o.value === value;
+      var b = node('button', 'desk-chip desk-chip--choice inside-draft__chip' + (on ? ' inside-draft__chip--on' : ''), o.words);
+      b.setAttribute('type', 'button');
+      b.setAttribute('role', 'radio');
+      b.setAttribute('aria-checked', on ? 'true' : 'false');
+      b.setAttribute('data-value', o.value);
+      b.addEventListener('click', function () { if (!on) onPick(o.value); });
+      g.appendChild(b);
     });
-    sel.value = value == null ? '' : value;
-    sel.addEventListener('change', function () { onPick(sel.value); });
-    return sel;
+    return g;
   }
-  function draftField(labelText, forId, control) {
+  function draftField(labelText, forId, control, group) {
     var f = node('div', 'mcard-form');
-    var l = node(forId ? 'label' : 'span', 'mcard-form__label', labelText);
-    if (forId) l.setAttribute('for', forId);
+    var l = node(forId && !group ? 'label' : 'span', 'mcard-form__label', labelText);
+    if (forId && !group) l.setAttribute('for', forId);
+    if (group) l.setAttribute('id', forId + 'Label');
     f.appendChild(l);
     f.appendChild(control);
     return f;
@@ -925,13 +945,13 @@
     } else ch.appendChild(node('p', 'inside-note', 'This is how it works today. Pick who decides, or how, to change it.'));
     box.appendChild(ch);
     var picks = node('div', 'inside-draft__picks');
-    picks.appendChild(draftField('who decides', 'insideDraftWho', draftSelect('insideDraftWho', d.whoOptions, d.decided_by, function (v) {
+    picks.appendChild(draftField('who decides', 'insideDraftWho', draftChips('insideDraftWho', d.whoOptions, d.decided_by, function (v) {
       dr.d = A.pick(dr.d, 'who', v); dr.error = ''; bumpDraft('insideDraftWho');
-    })));
+    }), true));
     if (d.ruleOptions.length) {
-      picks.appendChild(draftField('how they decide', 'insideDraftRule', draftSelect('insideDraftRule', d.ruleOptions, d.rule, function (v) {
+      picks.appendChild(draftField('how they decide', 'insideDraftRule', draftChips('insideDraftRule', d.ruleOptions, d.rule, function (v) {
         dr.d = A.pick(dr.d, 'rule', v); dr.error = ''; bumpDraft('insideDraftRule');
-      })));
+      }), true));
     } else {
       picks.appendChild(draftField('how they decide', null, node('span', 'inside-draft__fixed', d.decided_by === 'nobody' ? 'nothing is decided until someone holds it' : 'decides alone, as today')));
     }
@@ -1210,6 +1230,8 @@
     card.pick = null;
     card.fresh = key === 'for' || key === 'object' ? 'you' : null;
     if (a.building && a.kind) card.answer = { building: a.building, matter: cv.key, kind: a.kind, at: Date.now() };
+    // a decision from a card is a decision today, as one from a desk row is (task 1004531)
+    if (recorded) { bumpToday(); drawToday(); }
     if (a.close) closeCard(true);
     else if (view.open) { fillCard(); var c = $('streetCardClose'); if (c && c.focus) c.focus(); }
     if (!recorded) return true;

package/modules/hall-ui/records/governor-street.md

@@ -47,3 +47,24 @@ Every building and every floor desk was walked in light, dark and at phone width
 - **The desk's toast is the board's**: an ink pill with the orange dot, low over the desk. The street's own toast is centred again (its enter animation had undone the centring).
 
 Left as found, on purpose: the six readings stay under a building (task 1004526 marks the building's own reading), the old month drawers stay under the desk, and the recording sign-off still goes to its page (an open owner choice).
+
+## The whole city, walked against the prototype (task 1004531)
+
+The UAT walkthrough of goal 1000125: open the home city, start governing, find what needs you, enter every building and district, decide a vote from its card and watch the city change, and draft an amendment from a building, in light and dark at 1440 and at phone width (390 px), side by side with `Street.dc.html` (the prototype), `Desks.dc.html` and `Ground.dc.html`, judged by the owner's line rule. The live site is behind its password gate, so the walk ran on the real pages in the hall preview harness (`--fixture-me`). **The real-vote step was done in the harness only**: the vote went to the harness's canned answer for `POST /government/board/items/:id/votes`, and the docket read after it was stubbed in the page to show what the server would now say; no vote was cast on the live site. The amendment was filed the same way (the page's `POST /government/board/decision-rules` answered in the page, the harness refuses writes). The district interior was walked over twelve stand-in tasks answered in the page, since the harness serves one task list for every goal. Screenshots stay out of the repo: they are in the session scratchpad, `walk-1004531/` (53 shots).
+
+What it found and fixed:
+
+- **The preview fixtures disagreed with themselves.** The docket fixture's counts, home line, per-building counts and fairness reading had been written for the first seven matters and never re-derived as later tasks added more, so the city said "3 matters wait on you", the street header 4, its pins 13, and Disputes read "0 open" under two matters that need you. `buildDocket` derives all four from the matters, so live they cannot disagree; the fixture now holds the same derivation, and `tests/hall_preview_governor_fixtures.mjs` holds it to it.
+- **Change how this works could not be walked.** The constitution fixture had no `decision_rules` block, so the drafter said it could not read how a building decides. It now carries the block the route serves (every building as today), and the same test drafts every building from it. The fixture scrubber had read a building's decided_by (gate, board, nobody) as a login; it keeps those words now.
+- **The drafter's choices were dropdowns.** Who decides and how they decide are one-tap chips now (the line rule: choices are one-tap chips): a labelled radio group each, the picked chip filled in ink, a long choice wrapping inside its chip, stacked one under the other so the chips have the panel's width. Focus lands on the picked chip after each pick.
+- **A vote from a street card did not count today.** The today meter only took a pip for an act on a desk row; a decision from a card is a decision today too, so a recorded card act now fills a pip (an act that records nothing, or is refused, does not).
+- **The meter's newest pip popped on every redraw** (any pick, the card closing, the docket read after an act), and the read after an act cut the pop short. The pips are drawn again only when the count moves, so the newest pops once, as on the board.
+- **The home line with nothing on you.** With nothing waiting on you but work still moving, the server said "2 moving"; the prototype says "nothing waits on you · 2 moving", and now so does the server (`homeLine`).
+
+Walked and matching, left as found: the city (pins, the one button, its line), the street (the order, the group brackets, one pin per building in its tier, the crates and the tester count pin, the six readings), every building's section, lift and panel, the card (its pager, the change, the seats and tally, counsel, the yes/no acts under the desk's words from task 1004566), the toast, and a district's road of work.
+
+Left on purpose, not counted as differences:
+
+- **The city sits inside the hall's shell** (sidebar and top bar). The prototype's home page carries only the wordmark, the switch, one button and one line; standalone hall pages were retired by task 1002868, and the city page adopted the shell after its record was written.
+- **The home line never says "pieces of work stuck at Review".** The prototype adds it while Review is a vacant lot; the city draws Review as held in this project (the header of `city-draw.js`), so the clause has nothing to stand on.
+- **Open owner choices met on the walk, untouched:** the "1" on a single-item pin, the light-mode legend hint wording, the recording sign-off going to its page, failed passed-vote actions on the record, a Discord update on withdraw, and the Work categories link.

package/modules/public-landing/public/account.html

@@ -84,7 +84,8 @@
 <!-- THE BAR and its two bands are the hub's own (projects.html, task 1004455):
      same markup, same cosmos.css rules, so /projects → /account keeps the chrome.
      No map search (it only filters the map), and the band links name /projects
-     in full because this page has no views of its own. -->
+     in full because this page has no views of its own. assets/hub-bar.js runs it,
+     shared with the three footer doors (task 1004489). -->
 <a class="skip vh" href="#acct">Skip to content</a>
 <header class="shell bar">
   <div class="barLeft">
@@ -101,7 +102,7 @@
   </div>
   <div class="barRight">
     <button class="trig" type="button" id="projTrig" data-menu="projects" aria-expanded="false" aria-controls="menuProjects">Projects<svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg></button>
-    <!-- the identity chip IS the profile trigger; paintBar fills it from GET /me.
+    <!-- the identity chip IS the profile trigger; assets/hub-bar.js fills it from GET /me.
          Signed out it stays hidden and the sign-in door takes its slot. -->
     <button class="trig who" type="button" id="who" data-menu="profile" aria-expanded="false" aria-controls="menuProfile" hidden><img id="whoImg" alt="" hidden><span class="whoName" id="whoLogin"></span><svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg></button>
     <a class="signinDoor" id="signinTop" hidden href="/api/bongos/auth/web/start?return=/account&amp;repos=1">Sign in</a>
@@ -249,11 +250,17 @@
 
 <footer class="foot"><!--apex-only:start--><span>A non-profit, capture-resistant commons. </span><!--apex-only:end-->Built by agents, on Cloud&nbsp;Bongos. <a href="https://www.npmjs.com/package/@bongos/core" target="_blank" rel="noopener">Open source</a> (<a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener">AGPL-3.0</a>).<nav class="footNav" aria-label="Site"><a href="/privacy">Privacy</a><a href="/terms">Terms</a><a href="/contact">Contact</a><a data-link-hall href="{{buildersOrigin}}">Builders' hall</a></nav></footer>
 
+<script src="/assets/hub-bar.js"></script>
 <script>
 (function () {
   'use strict';
   var API = '/api/bongos';
   function $(id) { return document.getElementById(id); }
+  // The bar's chip, bands and sign out are assets/hub-bar.js (task 1004489), loaded
+  // just above. This page only repaints the chip: signed out when its own read
+  // 401s, and named from the account when GET /me failed. Without the asset the
+  // page still works; it just has no chip to repaint.
+  var bar = window.HubBar || { paint: function () {}, ready: Promise.resolve(null) };
 
   // The server's own view of the account — the last GET /me/cross-project
   // answer. Every save re-renders from it, never from what was typed.
@@ -298,7 +305,7 @@
   function showDoor() {
     $('loading').hidden = true;
     $('acctBody').hidden = true;
-    paintBar(null);
+    bar.paint(null);
     $('door').hidden = false;
   }
   function showAlert(text) {
@@ -523,106 +530,10 @@
       : 'Cross-project record shown on your public profile.');
   });
 
-  // ---- the bar: who is signed in, from the hub's own identity read. Signed
-  // out there is no chip and no Your-projects item; the sign-in door takes the slot ----
-  function paintBar(me) {
-    var login = me ? (me.github_login || 'signed in') : '';
-    var avatar = me && me.avatar_url;
-    $('who').hidden = !me;
-    $('signinTop').hidden = !!me;
-    $('mineCell').hidden = !me;
-    [['whoImg', 'whoLogin'], ['bandWhoImg', 'bandWhoLogin']].forEach(function (ids) {
-      $(ids[0]).hidden = !avatar;
-      if (avatar) $(ids[0]).src = avatar;
-      $(ids[1]).textContent = login;
-    });
-    if (me) $('who').setAttribute('aria-label', 'Account, ' + login);
-    else closeMenus();
-  }
-
-  // ---- the bands: the hub's disclosure (projects.html "THE BANDS") without
-  // the map search. Escape closes and returns focus to the trigger, a click
-  // outside closes, the arrows walk the items, opening one closes the other ----
-  function openBand() { return document.querySelector('.menuBand:not([hidden])'); }
-  function closeMenus() {
-    var open = openBand();
-    if (!open) return;
-    var trig = document.querySelector('.trig[aria-expanded="true"]');
-    var inside = open.contains(document.activeElement);
-    open.hidden = true;
-    if (trig) trig.setAttribute('aria-expanded', 'false');
-    if (inside && trig) trig.focus();
-  }
-  function openMenu(trig, byKeyboard) {
-    closeMenus();
-    trig.setAttribute('aria-expanded', 'true');
-    var band = $(trig.getAttribute('aria-controls'));
-    band.hidden = false;
-    // Enter/Space on the trigger lands on the first item; a pointer stays put
-    if (byKeyboard) { var first = band.querySelector('.bandCell:not([hidden]) a'); if (first) first.focus(); }
-  }
-  document.querySelectorAll('.trig').forEach(function (t) {
-    t.addEventListener('click', function (ev) {
-      if (t.getAttribute('aria-expanded') === 'true') closeMenus();
-      else openMenu(t, ev.detail === 0);
-    });
-  });
-  document.addEventListener('click', function (ev) {
-    if (!openBand()) return;
-    if (ev.target.closest && (ev.target.closest('.menuBand') || ev.target.closest('.trig'))) return;
-    closeMenus();
-  });
-  document.addEventListener('keydown', function (ev) {
-    var open = openBand();
-    if (!open) return;
-    if (ev.key === 'Escape') { closeMenus(); return; }
-    if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp') return;
-    var items = Array.prototype.filter.call(open.querySelectorAll('a'), function (a) { return !a.closest('[hidden]'); });
-    if (!items.length) return;
-    var at = items.indexOf(document.activeElement);
-    ev.preventDefault();
-    items[(at + (ev.key === 'ArrowDown' ? 1 : items.length - 1) + items.length) % items.length].focus();
-  });
-  document.querySelectorAll('.menuBand').forEach(function (b) {
-    b.addEventListener('click', function (ev) {
-      if (ev.target.closest && ev.target.closest('a')) closeMenus();
-    });
-    // Tab out of the band closes it; a null relatedTarget is the window losing
-    // focus or a click on nothing, which the document click covers
-    b.addEventListener('focusout', function (ev) {
-      var to = ev.relatedTarget;
-      if (!to || b.contains(to) || (to.closest && to.closest('.trig'))) return;
-      closeMenus();
-    });
-  });
-
-  // ---- sign out: the hub's own logout (projects.html doLogout), delegated on
-  // the profile band's plain anchor ----
-  $('menuProfile').addEventListener('click', function (ev) {
-    if (!ev.target.closest) return;
-    // Account is this page: a reload would only throw away what was typed
-    if (ev.target.closest('[aria-current="page"]')) { ev.preventDefault(); return; }
-    if (!ev.target.closest('a.signout')) return;
-    ev.preventDefault();
-    var finish = function () {
-      var apex = location.hostname.split('.').slice(-2).join('.');
-      ['bongos_session', 'gds_session', 'pms_session'].forEach(function (name) {
-        document.cookie = name + '=; Max-Age=0; path=/';
-        document.cookie = name + '=; Max-Age=0; path=/; Domain=.' + apex;
-      });
-      window.location.assign(location.pathname);
-    };
-    fetch(API + '/auth/logout', { method: 'POST', credentials: 'same-origin' }).then(finish, finish);
-  });
-
-  var whoRead = request('GET', '/me').then(function (res) {
-    var d = res.ok && res.data;
-    paintBar(d ? (d.builder || d.me || d) : null);
-  }, function () { paintBar(null); });
   // The identity read failing is not a sign-out. If the account itself was
   // read, the chip names it from that answer, so the way out is never lost.
-  load().then(function () { return whoRead; }).then(function () {
-    if (acct && $('who').hidden) paintBar({ github_login: acct.handle || acct.display_name });
+  load().then(function () { return bar.ready; }).then(function () {
+    if (acct && $('who').hidden) bar.paint({ github_login: acct.handle || acct.display_name });
   });
 })();
 </script>

package/modules/public-landing/public/assets/hub-bar.js

@@ -0,0 +1,127 @@
+/* assets/hub-bar.js — THE HUB'S BAR on the pages that have no views of their own
+   (task 1004489, after task 1004455).
+
+   /projects draws the bar and its two bands — the Projects band and the profile
+   band behind the identity chip. The apex pages a person reaches from it wear the
+   same bar so the chrome does not swap under them: the account page (/account) and
+   the three footer doors (/privacy, /terms, /contact). Each page keeps the bar's
+   MARKUP (real markup, pinned byte-equal to the hub's); this file is the one copy
+   of what makes it work there:
+     - the chip, filled from GET /me — signed out there is no chip and no
+       Your-projects item, and the sign-in door takes the chip's slot;
+     - the bands' disclosure: a trigger toggles its band, opening one closes the
+       other, Escape closes and returns focus to the trigger, a click outside or
+       Tab out closes, the arrows walk the items, an item activated closes it;
+     - sign out: the profile band's plain anchor upgraded to the hub's logout POST.
+
+   projects.html keeps its own copy (its bands also fold the map search and switch
+   views), so a change to the disclosure is made there AND here.
+   tests/hub_account_page.mjs and tests/landing_legal_pages.mjs execute this file.
+
+   A page that knows more about who is signed in than GET /me says paints the chip
+   itself through window.HubBar.paint(me); window.HubBar.ready settles with what
+   GET /me answered (null when nobody is signed in or the read failed). */
+(function () {
+  'use strict';
+  var API = '/api/bongos';
+  function $(id) { return document.getElementById(id); }
+
+  // ---- the chip: who is signed in (null = nobody) ----
+  function paint(me) {
+    var login = me ? (me.github_login || 'signed in') : '';
+    var avatar = me && me.avatar_url;
+    $('who').hidden = !me;
+    $('signinTop').hidden = !!me;
+    $('mineCell').hidden = !me;
+    [['whoImg', 'whoLogin'], ['bandWhoImg', 'bandWhoLogin']].forEach(function (ids) {
+      $(ids[0]).hidden = !avatar;
+      if (avatar) $(ids[0]).src = avatar;
+      $(ids[1]).textContent = login;
+    });
+    if (me) $('who').setAttribute('aria-label', 'Account, ' + login);
+    else closeMenus();
+  }
+
+  // ---- the bands: the hub's disclosure (projects.html "THE BANDS") without the map search ----
+  function openBand() { return document.querySelector('.menuBand:not([hidden])'); }
+  function closeMenus() {
+    var open = openBand();
+    if (!open) return;
+    var trig = document.querySelector('.trig[aria-expanded="true"]');
+    var inside = open.contains(document.activeElement);
+    open.hidden = true;
+    if (trig) trig.setAttribute('aria-expanded', 'false');
+    if (inside && trig) trig.focus();
+  }
+  function openMenu(trig, byKeyboard) {
+    closeMenus();
+    trig.setAttribute('aria-expanded', 'true');
+    var band = $(trig.getAttribute('aria-controls'));
+    band.hidden = false;
+    // Enter/Space on the trigger lands on the first item; a pointer stays put
+    if (byKeyboard) { var first = band.querySelector('.bandCell:not([hidden]) a'); if (first) first.focus(); }
+  }
+  document.querySelectorAll('.trig').forEach(function (t) {
+    t.addEventListener('click', function (ev) {
+      if (t.getAttribute('aria-expanded') === 'true') closeMenus();
+      else openMenu(t, ev.detail === 0);
+    });
+  });
+  document.addEventListener('click', function (ev) {
+    if (!openBand()) return;
+    if (ev.target.closest && (ev.target.closest('.menuBand') || ev.target.closest('.trig'))) return;
+    closeMenus();
+  });
+  document.addEventListener('keydown', function (ev) {
+    var open = openBand();
+    if (!open) return;
+    if (ev.key === 'Escape') { closeMenus(); return; }
+    if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp') return;
+    var items = Array.prototype.filter.call(open.querySelectorAll('a'), function (a) { return !a.closest('[hidden]'); });
+    if (!items.length) return;
+    var at = items.indexOf(document.activeElement);
+    ev.preventDefault();
+    items[(at + (ev.key === 'ArrowDown' ? 1 : items.length - 1) + items.length) % items.length].focus();
+  });
+  document.querySelectorAll('.menuBand').forEach(function (b) {
+    b.addEventListener('click', function (ev) {
+      if (ev.target.closest && ev.target.closest('a')) closeMenus();
+    });
+    // Tab out of the band closes it; a null relatedTarget is the window losing
+    // focus or a click on nothing, which the document click covers
+    b.addEventListener('focusout', function (ev) {
+      var to = ev.relatedTarget;
+      if (!to || b.contains(to) || (to.closest && to.closest('.trig'))) return;
+      closeMenus();
+    });
+  });
+
+  // ---- the profile band: the current place, and sign out (projects.html doLogout) ----
+  $('menuProfile').addEventListener('click', function (ev) {
+    if (!ev.target.closest) return;
+    // an item marked as this page: a reload would only throw away what was typed
+    if (ev.target.closest('[aria-current="page"]')) { ev.preventDefault(); return; }
+    if (!ev.target.closest('a.signout')) return;
+    ev.preventDefault();
+    var finish = function () {
+      var apex = location.hostname.split('.').slice(-2).join('.');
+      ['bongos_session', 'gds_session', 'pms_session'].forEach(function (name) {
+        document.cookie = name + '=; Max-Age=0; path=/';
+        document.cookie = name + '=; Max-Age=0; path=/; Domain=.' + apex;
+      });
+      window.location.assign(location.pathname);
+    };
+    fetch(API + '/auth/logout', { method: 'POST', credentials: 'same-origin' }).then(finish, finish);
+  });
+
+  // ---- the identity read: the hub's own GET /me ----
+  var ready = fetch(API + '/me', { method: 'GET', credentials: 'same-origin', headers: { Accept: 'application/json' } })
+    .then(function (res) { return res.ok ? res.json().catch(function () { return null; }) : null; })
+    .then(function (d) {
+      var me = d ? (d.builder || d.me || d) : null;
+      paint(me);
+      return me;
+    }, function () { paint(null); return null; });
+
+  window.HubBar = { paint: paint, ready: ready };
+})();

package/modules/public-landing/public/contact.html

@@ -20,9 +20,14 @@
 <!-- Dark only, like every apex page (task 1003336, ADR 0204): data-mode="dark" is fixed on <html>. -->
 <style>
 /* The reading column only. No :root block — the pack's injected theme owns the
-   tokens (landing direction C1); everything below reads them. */
+   tokens (landing direction C1); everything below reads them. The bar and the
+   bands are cosmos.css's own rules, not restyled here. */
+/* the skip link un-hides itself on focus, reversing everything .vh sets (the hub's rule) */
+.skip:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;
+  font-size:14px;font-weight:800;text-decoration:none;color:var(--ink);background:var(--bg-card);
+  border:2px solid var(--ctl-line);border-radius:12px;padding:10px 16px;}
 .legal{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:clamp(6px,1.5vw,18px) clamp(16px,4vw,40px) 48px;}
-.legal h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.8vw,36px);letter-spacing:-0.5px;color:var(--chrome-ink);text-shadow:var(--chrome-glow);margin-bottom:6px;}
+.legal h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.8vw,36px);letter-spacing:-0.5px;color:var(--chrome-ink);text-shadow:var(--chrome-glow);margin:18px 0 6px;}
 .legal .lede{color:var(--hero-lede);text-shadow:var(--chrome-glow);margin-bottom:18px;}
 .legal h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);letter-spacing:-0.3px;line-height:1.25;margin:22px 0 8px;}
 .legal .card h2:first-child{margin-top:0;}
@@ -34,15 +39,60 @@
 </style>
 </head>
 <body>
-<header class="top">
-  <a class="mark" href="/">{{productName}}</a>
-  <div class="top-right">
-    <a class="btn-space" href="/projects">Projects</a>
-    <a class="btn-space" data-link-hall href="{{buildersOrigin}}">Hall</a>
+<!-- THE BAR and its two bands are the hub's own (projects.html; task 1004489,
+     after the account page's task 1004455): same markup, same cosmos.css rules,
+     so following a footer link from /projects or /account keeps the chrome. No
+     map search (it only filters the map), the band links name /projects in full
+     because this page has no views of its own, and no item is the current place.
+     assets/hub-bar.js fills the chip from GET /me and runs the bands. -->
+<a class="skip vh" href="#legal">Skip to content</a>
+<header class="shell bar">
+  <div class="barLeft">
+    <a class="barMark" id="barMark" href="/">
+      <svg viewBox="0 0 26 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4"
+           stroke-linecap="round" stroke-linejoin="round">
+        <ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>
+        <path d="M1.8 5.6v6.6a6.6 2.9 0 0 0 13.2 0V5.6"/>
+        <ellipse cx="19.6" cy="8.4" rx="4.7" ry="2.1"/>
+        <path d="M14.9 8.4v4.6a4.7 2.1 0 0 0 9.4 0V8.4"/>
+      </svg>
+      <span>{{productName}}</span>
+    </a>
+  </div>
+  <div class="barRight">
+    <button class="trig" type="button" id="projTrig" data-menu="projects" aria-expanded="false" aria-controls="menuProjects">Projects<svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg></button>
+    <!-- the identity chip IS the profile trigger; assets/hub-bar.js fills it from
+         GET /me. Signed out it stays hidden and the sign-in door takes its slot. -->
+    <button class="trig who" type="button" id="who" data-menu="profile" aria-expanded="false" aria-controls="menuProfile" hidden><img id="whoImg" alt="" hidden><span class="whoName" id="whoLogin"></span><svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg></button>
+    <a class="signinDoor" id="signinTop" hidden href="/api/bongos/auth/web/start?return=/contact&amp;repos=1">Sign in</a>
   </div>
 </header>
 
-<main class="legal">
+<div class="menuBand" id="menuProjects" data-menu="projects" hidden>
+  <div class="bandIn">
+    <ul class="bandRow">
+      <li class="bandCell"><a class="bandT" href="/projects?view=map">Sky</a><span class="bandC">the sky of every project</span></li>
+      <li class="bandCell"><a class="bandT" href="/projects?view=map&amp;sub=table">Table</a><span class="bandC">the same projects as rows</span></li>
+      <li class="bandCell" id="mineCell"><a class="bandT" href="/projects?view=mine">Your projects</a><span class="bandC">the ones you own or build on</span></li>
+      <li class="bandCell"><a class="bandT" href="/projects?view=new">New project</a><span class="bandC">five questions and a home</span></li>
+    </ul>
+  </div>
+</div>
+<div class="menuBand" id="menuProfile" data-menu="profile" hidden>
+  <div class="bandIn bandProfile">
+    <p class="bandWho" id="bandWho"><img id="bandWhoImg" alt="" hidden><span class="whoName" id="bandWhoLogin"></span></p>
+    <ul class="bandRow">
+      <li class="bandCell"><a class="bandT" href="/projects?view=mine">My projects</a></li>
+      <!-- apex-only because /account is: it is served only where platform-identity
+           runs, so a child instance loses the item whole (as on projects.html) -->
+      <!--apex-only:start--><li class="bandCell"><a class="bandT" href="/account">Account</a></li><!--apex-only:end-->
+      <!-- the honest hover target; assets/hub-bar.js upgrades the click to the POST -->
+      <li class="bandCell"><a class="bandT signout" href="/api/bongos/auth/logout">Sign out</a></li>
+    </ul>
+  </div>
+</div>
+
+<main class="legal" id="legal">
   <h1>Contact</h1>
   <p class="lede">Two doors. Both are public, and both are how {{productName}} itself works day to day.</p>
 
@@ -68,6 +118,7 @@
   </section>
 </main>
 
-<footer class="foot"><!--apex-only:start--><span>A non-profit, capture-resistant commons. </span><!--apex-only:end-->Built by agents, on Cloud&nbsp;Bongos. <a href="https://www.npmjs.com/package/@bongos/core" target="_blank" rel="noopener">Open source</a> (<a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener">AGPL-3.0</a>).<nav class="footNav" aria-label="Site"><a href="/privacy">Privacy</a><a href="/terms">Terms</a><a href="/contact" aria-current="page">Contact</a></nav></footer>
+<footer class="foot"><!--apex-only:start--><span>A non-profit, capture-resistant commons. </span><!--apex-only:end-->Built by agents, on Cloud&nbsp;Bongos. <a href="https://www.npmjs.com/package/@bongos/core" target="_blank" rel="noopener">Open source</a> (<a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener">AGPL-3.0</a>).<nav class="footNav" aria-label="Site"><a href="/privacy">Privacy</a><a href="/terms">Terms</a><a href="/contact" aria-current="page">Contact</a><a data-link-hall href="{{buildersOrigin}}">Builders' hall</a></nav></footer>
+<script src="/assets/hub-bar.js"></script>
 </body>
 </html>