@bongos/core 1.20.67 → 1.20.68

package/modules/public-landing/public/account.states.json

@@ -1,15 +1,17 @@
 {
-  "_": "The account page's states for modules/ui-design/kit/render.js (task 1004259, ADR 0337 D4.3): signed out it is the sign-in door and nothing else; signed in it is the four sections, painted from the stub's one account (fixtures/me__cross-project.json — public, recruiters following the profile setting, a bio and two links). Dark only, like every apex page (ADR 0204). The private, hidden, not-yet-published account renders from account-private.states.json.",
+  "_": "The account page's states for modules/ui-design/kit/render.js (task 1004259, ADR 0337 D4.3): signed out it is the sign-in door and nothing else; signed in it is the hub's bar (task 1004455: the identity chip from GET /me, the Projects band and the profile band with Account current) over the four sections, painted from the stub's one account (fixtures/me__cross-project.json — public, recruiters following the profile setting, a bio and two links). Dark only, like every apex page (ADR 0204). The private, hidden, not-yet-published account renders from account-private.states.json.",
   "page": "/account",
   "surface": "public-landing",
   "modes": ["dark"],
   "modeQuery": false,
-  "ignoreRequests": ["/api/(gds|bongos)/me/cross-project$"],
-  "ignoreConsole": ["/api/(gds|bongos)/me/cross-project", "\\b401\\b", "Unauthorized"],
+  "ignoreRequests": ["/api/(gds|bongos)/me$", "/api/(gds|bongos)/me/cross-project$"],
+  "ignoreConsole": ["/api/(gds|bongos)/me", "\\b401\\b", "Unauthorized"],
   "ignoreControls": [".vh"],
   "states": {
-    "out": { "auth": false, "actions": [["wait", 300]], "expect": { "visible": ["#door", "#signin"], "hidden": ["#acctBody", "#aWho", "#loading"] } },
-    "in": { "auth": true, "actions": [["wait", 400]], "expect": { "visible": ["#acctBody", "#fName", "#fBio", "#fHandle", "#recWhat", "#recordLine", "#signOut"], "text": [["#whoName", "builder"], ["#recordLine", "Your record: 3 projects · 1000 credits · 19 works shipped · 10 karma."]], "hidden": ["#door", "#loading"], "value": [["#fHandle", "builder"], ["#fName", "A Builder"], ["#fLinkX", "https://x.com/builder"]] } },
+    "out": { "auth": false, "actions": [["wait", 300]], "expect": { "visible": ["#door", "#signin", "#signinTop", "#projTrig"], "hidden": ["#acctBody", "#who", "#loading"] } },
+    "in": { "auth": true, "actions": [["wait", 400]], "expect": { "visible": ["#acctBody", "#fName", "#fBio", "#fHandle", "#recWhat", "#recordLine", "#who"], "text": [["#whoLogin", "builder"], ["#recordLine", "Your record: 3 projects · 1000 credits · 19 works shipped · 10 karma."]], "hidden": ["#door", "#loading", "#signinTop", "#menuProjects", "#menuProfile"], "value": [["#fHandle", "builder"], ["#fName", "A Builder"], ["#fLinkX", "https://x.com/builder"]] } },
+    "in-projects-band": { "auth": true, "actions": [["wait", 400], ["click", "#projTrig"], ["wait", 300]], "expect": { "visible": ["#menuProjects", "#mineCell"], "hidden": ["#menuProfile"] } },
+    "in-profile-band": { "auth": true, "actions": [["wait", 400], ["click", "#who"], ["wait", 300]], "expect": { "visible": ["#menuProfile"], "hidden": ["#menuProjects"], "text": [["#bandWhoLogin", "builder"], ["#menuProfile [aria-current=\"page\"]", "Account"]] } },
     "in-privacy": { "auth": true, "actions": [["wait", 400], ["click", "#aPrivacy .aOpt:nth-child(2)"], ["wait", 150]], "expect": { "checked": "input[name=visibility][value=private]", "text": [["#recWhat", "They will see your name, your picture, your roles, and whether you have been active in the last 30 days — never your credits, works shipped, karma, or the projects you build on. This is the one thing a recruiter can see while your profile page is private. Turning this off removes you from both recruiting surfaces — the recruiting directory, and a recruiter’s look-up of one builder — straight away. · For now this follows your profile page setting."]] } }
   },
   "reducedMotion": { "auth": true, "actions": [["wait", 300]] }

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.20.67",
+  "version": "1.20.68",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.20.67",
+      "version": "1.20.68",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.20.67",
+  "version": "1.20.68",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -8531,5 +8531,11 @@
       "id": "1004487",
       "text": "The hall no longer offers a Claim button on work the system will refuse. If a task gets a new prerequisite after it was opened up for claiming, its page and its goal card now say it is waiting on that other task — and name whi"
     }
+  ],
+  "1.20.68": [
+    {
+      "id": "1004455",
+      "text": "The account page on cloudbongos.com now has the same top bar as the projects page — the Projects menu and your profile menu (My projects, Account, Sign out) — so moving between the two no longer swaps the whole header."
+    }
   ]
 }

package/src/module-api.js

@@ -75,7 +75,7 @@ const { responsibilityFor, ROLE_RESPONSIBILITIES } = require('./role-responsibil
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.20.67'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.20.68'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/hub_account_page.mjs

@@ -13,7 +13,12 @@
 //   4. the route: served on the apex only where platform-identity runs, never on
 //      the builders/status hosts, and never on a child instance;
 //   5. the hall's side: the two privacy sections are gone, one link-out row
-//      remains, and its hub origin is a bare https origin or nothing.
+//      remains, and its hub origin is a bare https origin or nothing;
+//   6. the bar (task 1004455): the hub's own bar and two bands rather than a
+//      header of its own — the same markup as projects.html, cosmos.css's rules,
+//      no map search, links into /projects, Account as the current place — and
+//      the bands EXECUTED: the chip from GET /me, open/close, Escape, the arrows,
+//      a click outside, and sign out as the POST.
 //
 // DB-free. Run:  node --test tests/hub_account_page.mjs
 
@@ -32,6 +37,8 @@ const LANDING = path.join(ROOT, 'modules', 'public-landing', 'public');
 const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
 const PAGE = fs.readFileSync(path.join(LANDING, 'account.html'), 'utf8').replace(/\r\n/g, '\n');
 const SCRIPT = PAGE.split('<script>').pop().split('</script>')[0];
+const HUB = fs.readFileSync(path.join(LANDING, 'projects.html'), 'utf8').replace(/\r\n/g, '\n');
+const COSMOS = fs.readFileSync(path.join(LANDING, 'assets', 'cosmos.css'), 'utf8');
 
 const pi = require('../modules/platform-identity/platform-identity.js');
 const { applyBrandTokens } = require('../src/bongos/serve-internal.js');
@@ -69,10 +76,64 @@ test('the script builds no markup from strings, and the controls are real markup
 test('the door returns here, and the page calls only its own-scoped routes', () => {
   assert.match(PAGE, /href="\/api\/bongos\/auth\/web\/start\?return=\/account"/, 'sign-in lands back on /account');
   const calls = [...SCRIPT.matchAll(/request\('(GET|PATCH|POST)', '([^']+)'/g)].map((m) => `${m[1]} ${m[2]}`);
-  assert.deepEqual([...new Set(calls)].sort(), ['GET /me/cross-project', 'PATCH /me/cross-project', 'PATCH /me/handle', 'PATCH /me/profile'].sort());
+  assert.deepEqual([...new Set(calls)].sort(), ['GET /me', 'GET /me/cross-project','PATCH /me/cross-project', 'PATCH /me/handle', 'PATCH /me/profile'].sort());
   assert.match(SCRIPT, /fetch\(API \+ '\/auth\/logout', \{ method: 'POST'/, 'sign out is the hub logout POST');
 });
 
+// ── 1b. the bar is the hub's (task 1004455) ──────────────────────────────────
+
+const bandOf = (html, id) => {
+  const m = html.match(new RegExp(`<div class="menuBand" id="${id}"[\\s\\S]*?\\n</div>`));
+  assert.ok(m, `#${id} is a whole band`);
+  return m[0];
+};
+const bandLinks = (band) => [...band.matchAll(/<a class="bandT[^"]*" href="([^"]+)"[^>]*>([^<]+)<\/a>/g)].map((m) => [m[2], m[1]]);
+
+test('the bar is the hub’s own: the same markup as /projects, no header of its own, no map search', () => {
+  assert.match(PAGE, /<header class="shell bar">/);
+  assert.doesNotMatch(PAGE, /<header class="top">|class="btn-space"|id="aWho"|id="signOut"/, 'the simple header and its in-page sign-out line are gone');
+  assert.doesNotMatch(PAGE, /id="(mapQ|qWrap|qToggle|onlyMine)"/, 'the search only filters the map, so it stays on the map');
+  // byte-equal pieces of projects.html: a rename on either page fails here
+  for (const piece of [
+    '<a class="barMark" id="barMark" href="/">',
+    '<ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>',
+    '<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>',
+    '<button class="trig who" type="button" id="who" data-menu="profile" aria-expanded="false" aria-controls="menuProfile" hidden>',
+    '<div class="menuBand" id="menuProjects" data-menu="projects" hidden>',
+    '<div class="menuBand" id="menuProfile" data-menu="profile" hidden>',
+    '<div class="bandIn bandProfile">',
+    '<li class="bandCell"><a class="bandT signout" href="/api/bongos/auth/logout">Sign out</a></li>',
+  ]) {
+    assert.ok(HUB.includes(piece), `projects.html no longer carries: ${piece}`);
+    assert.ok(PAGE.includes(piece), `account.html does not carry the hub's: ${piece}`);
+  }
+  assert.match(PAGE, /<a class="signinDoor" id="signinTop" hidden href="\/api\/bongos\/auth\/web\/start\?return=\/account">Sign in<\/a>/, 'signed out, the door in the chip’s slot returns here');
+  assert.match(PAGE, /<a class="skip vh" href="#acct">/);
+  assert.match(PAGE, /<main class="acct" id="acct">/, 'the skip link has its landmark');
+});
+
+test('the bands say what the hub’s say and lead into /projects; Account is the one current place', () => {
+  const clauses = (band) => [...band.matchAll(/>([^<]+)<\/a><span class="bandC">([^<]+)<\/span>/g)].map((m) => [m[1], m[2]]);
+  assert.deepEqual(clauses(bandOf(PAGE, 'menuProjects')), clauses(bandOf(HUB, 'menuProjects')), 'the Projects band’s items and clauses are the hub’s');
+  assert.deepEqual(bandLinks(bandOf(PAGE, 'menuProjects')), [
+    ['Sky', '/projects?view=map'], ['Table', '/projects?view=map&amp;sub=table'],
+    ['Your projects', '/projects?view=mine'], ['New project', '/projects?view=new'],
+  ], 'this page has no views of its own, so every item names /projects in full');
+  assert.deepEqual(bandLinks(bandOf(PAGE, 'menuProfile')), [
+    ['My projects', '/projects?view=mine'], ['Account', '/account'], ['Sign out', '/api/bongos/auth/logout'],
+  ]);
+  assert.deepEqual(PAGE.match(/<a [^>]*aria-current="page"[^>]*>[^<]+/g), ['<a class="bandT" href="/account" aria-current="page">Account']);
+});
+
+test('the bar is not restyled here: the page takes cosmos.css’s rules', () => {
+  const styles = [...PAGE.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
+  assert.doesNotMatch(styles, /\.(shell|bar|barMark|barLeft|barRight|trig|who|signinDoor|menuBand|band[A-Z]\w*)\b[^{}]*\{/, 'no bar or band rule in the page');
+  for (const rule of ['.bar{', '.barMark{', '.trig{', '.signinDoor{', '.menuBand{', '.bandCell:has([aria-current="page"])::before{']) {
+    assert.ok(COSMOS.includes(rule), `cosmos.css still carries ${rule}`);
+  }
+  assert.match(PAGE, /<link rel="stylesheet" href="\/assets\/cosmos\.css">/);
+});
+
 // ── 2. the mirrors hold ──────────────────────────────────────────────────────
 
 test('the page’s limits are the module’s own (boundary-forced copies)', () => {
@@ -105,15 +166,42 @@ const ACCOUNT = () => ({
 function boot(answer) {
   const els = new Map();
   const listeners = (o) => { o._on = {}; o.addEventListener = (t, f) => { (o._on[t] ||= []).push(f); }; return o; };
-  const el = (id, hidden) => listeners({
-    id, hidden, value: '', textContent: '', className: '', disabled: false, style: {},
+  const el = (id, hidden, attrs) => listeners({
+    id, hidden, attrs, value: '', textContent: '', className: '', disabled: false, style: {},
     appendChild(c) { this.textContent += c.textContent; return c; },
-    getAttribute() { return null; },
-    focus() { dom.focused = id; },
+    getAttribute(n) { return n in attrs ? attrs[n] : null; },
+    setAttribute(n, v) { attrs[n] = v; },
+    closest(sel) { return sel === '.trig' && /\btrig\b/.test(attrs.class || '') ? this : null; },
+    focus() { dom.focused = id; document.activeElement = this; },
   });
   for (const m of PAGE.matchAll(/<(\w+)([^>]*?)\sid="([\w-]+)"([^>]*)>/g)) {
-    els.set(m[3], el(m[3], /\shidden\b/.test(m[2] + m[4])));
+    const attrs = Object.fromEntries([...(m[2] + m[4]).matchAll(/\s([\w-]+)="([^"]*)"/g)].map((a) => [a[1], a[2]]));
+    els.set(m[3], el(m[3], /\shidden\b/.test(m[2] + m[4]), attrs));
   }
+  // The bar: the two triggers, and each band with its links in markup order. An
+  // item's cell is its <li>; only #mineCell carries an id, so only it can hide.
+  const trigs = [...els.values()].filter((e) => /\btrig\b/.test(e.attrs.class || ''));
+  const bands = [...PAGE.matchAll(/<div class="menuBand" id="(\w+)"[\s\S]*?\n<\/div>/g)].map((m) => {
+    const band = els.get(m[1]);
+    band.items = [...m[0].matchAll(/<li class="bandCell"(?: id="(\w+)")?><a class="([^"]+)" href="([^"]+)"([^>]*)>([^<]+)<\/a>/g)].map((a) => ({
+      cls: a[2], href: a[3], text: a[5], cell: els.get(a[1]) || { hidden: false },
+      focus() { document.activeElement = this; },
+      closest(sel) {
+        if (sel === 'a') return this;
+        if (sel === '[aria-current="page"]') return a[4].includes(' aria-current="page"') ? this : null;
+        if (sel === 'a.signout') return /\bsignout\b/.test(this.cls) ? this : null;
+        if (sel === '.menuBand') return band;
+        if (sel === '[hidden]') return this.cell.hidden ? this.cell : null;
+        return null;
+      },
+    }));
+    band.contains = (x) => band.items.includes(x);
+    band.querySelector = () => band.items.find((i) => !i.cell.hidden) || null;
+    band.querySelectorAll = () => band.items;
+    return band;
+  });
+  const docOn = {};
+  const event = (extra) => ({ prevented: false, preventDefault() { this.prevented = true; }, ...extra });
   const radios = [...PAGE.matchAll(/<input type="radio" name="(\w+)" value="(\w+)">/g)]
     .map((m) => listeners({ name: m[1], value: m[2], checked: false }));
   const links = [...PAGE.matchAll(/id="(fLink\w+)" data-link="(\w+)"/g)].map((m) => {
@@ -123,7 +211,17 @@ function boot(answer) {
   });
   const calls = [];
   const dom = {
-    els, radios, calls, focused: null,
+    els, radios, calls, focused: null, assigned: null,
+    active: () => document.activeElement,
+    // a click bubbles: the target's own listeners, its band's, then the document's
+    click(target, detail = 1) {
+      const band = bands.find((b) => b.items.includes(target));
+      const ev = event({ target, detail });
+      for (const f of [...(target._on ? target._on.click || [] : []), ...(band ? band._on.click || [] : []), ...(docOn.click || [])]) f(ev);
+      return ev;
+    },
+    key(key) { const ev = event({ key }); for (const f of docOn.keydown || []) f(ev); return ev; },
+    focusout(band, relatedTarget) { for (const f of band._on.focusout || []) f({ relatedTarget }); },
     pick(name, value) {
       for (const r of radios.filter((x) => x.name === name)) r.checked = r.value === value;
       for (const f of radios.find((x) => x.name === name && x.value === value)._on.change || []) f({});
@@ -132,15 +230,20 @@ function boot(answer) {
     text: (id) => els.get(id).textContent,
   };
   const document = {
-    cookie: '',
+    cookie: '', activeElement: null,
+    addEventListener: (t, f) => { (docOn[t] ||= []).push(f); },
     getElementById: (id) => els.get(id) || null,
     querySelector(sel) {
+      if (sel === '.menuBand:not([hidden])') return bands.find((b) => !b.hidden) || null;
+      if (sel === '.trig[aria-expanded="true"]') return trigs.find((t) => t.attrs['aria-expanded'] === 'true') || null;
       const m = sel.match(/^input\[name="(\w+)"\]:checked$/);
       if (!m) throw new Error(`unstubbed selector: ${sel}`);
       return radios.find((r) => r.name === m[1] && r.checked) || null;
     },
     querySelectorAll(sel) {
       if (sel === '#profileForm [data-link]') return links;
+      if (sel === '.trig') return trigs;
+      if (sel === '.menuBand') return bands;
       const names = [...sel.matchAll(/input\[name="(\w+)"\]/g)].map((m) => m[1]);
       if (!names.length) throw new Error(`unstubbed selector: ${sel}`);
       return radios.filter((r) => names.includes(r.name));
@@ -156,7 +259,7 @@ function boot(answer) {
     return Promise.resolve({ status, ok: status >= 200 && status < 300, json: () => Promise.resolve(data) });
   };
   const location = { hostname: 'cloudbongos.com', pathname: '/account' };
-  vm.runInNewContext(SCRIPT, { document, fetch, location, window: { location: { assign() {} } }, URL, Array, Object, JSON, Promise });
+  vm.runInNewContext(SCRIPT, { document, fetch, location, window: { location: { assign(p) { dom.assigned = p; } } }, URL, Array, Object, JSON, Promise });
   return dom;
 }
 const settle = async () => { for (let i = 0; i < 8; i++) await new Promise((r) => setImmediate(r)); };
@@ -166,8 +269,10 @@ test('signed out: a 401 opens the door and shows nothing else', async () => {
   await settle();
   assert.equal(dom.els.get('door').hidden, false);
   assert.equal(dom.els.get('acctBody').hidden, true);
-  assert.equal(dom.els.get('aWho').hidden, true);
   assert.equal(dom.els.get('loading').hidden, true);
+  assert.equal(dom.els.get('who').hidden, true, 'no chip without a session');
+  assert.equal(dom.els.get('signinTop').hidden, false, 'the sign-in door takes its slot');
+  assert.equal(dom.els.get('mineCell').hidden, true, 'and the Projects band offers no Your projects');
 });
 
 test('signed in: every control is painted from the server’s answer', async () => {
@@ -175,7 +280,6 @@ test('signed in: every control is painted from the server’s answer', async ()
   await settle();
   assert.equal(dom.els.get('acctBody').hidden, false);
   assert.equal(dom.els.get('door').hidden, true);
-  assert.equal(dom.text('whoName'), 'octo');
   assert.equal(dom.els.get('fName').value, 'Octo');
   assert.equal(dom.els.get('fBio').value, 'Old bio.');
   assert.equal(dom.els.get('fLinkWebsite').value, 'https://octo.example/');
@@ -315,6 +419,125 @@ test('a session that expired mid-edit reopens the door instead of failing silent
   await settle();
   assert.equal(dom.text('profileMsg'), 'Your session expired — sign in again to save.');
   assert.equal(dom.els.get('door').hidden, false);
+  assert.equal(dom.els.get('who').hidden, true, 'the bar stops naming a session that is gone');
+  assert.equal(dom.els.get('signinTop').hidden, false);
+});
+
+// ── 3b. the bar, executed (task 1004455) ─────────────────────────────────────
+
+const ME = { builder: { id: '1', github_login: 'octocat', avatar_url: 'https://avatars.example/u/1' } };
+const signedIn = (m, p) => (m !== 'GET' ? { status: 200, data: {} } : { status: 200, data: p === '/me' ? ME : ACCOUNT() });
+const item = (band, text) => band.items.find((i) => i.text === text);
+
+test('the chip is the hub’s identity read: GET /me fills the trigger and the profile band', async () => {
+  const dom = boot(signedIn);
+  await settle();
+  assert.ok(dom.calls.some((c) => c.method === 'GET' && c.path === '/me'));
+  const who = dom.els.get('who');
+  assert.equal(who.hidden, false);
+  assert.equal(dom.els.get('signinTop').hidden, true);
+  assert.equal(dom.text('whoLogin'), 'octocat', 'the GitHub login, as on /projects — not the hub handle');
+  assert.equal(dom.text('bandWhoLogin'), 'octocat');
+  assert.equal(who.getAttribute('aria-label'), 'Account, octocat');
+  for (const id of ['whoImg', 'bandWhoImg']) {
+    assert.equal(dom.els.get(id).src, 'https://avatars.example/u/1');
+    assert.equal(dom.els.get(id).hidden, false);
+  }
+  assert.equal(dom.els.get('mineCell').hidden, false);
+});
+
+test('an account with no avatar gets a chip with no picture rather than a broken one', async () => {
+  const dom = boot((m, p) => (p === '/me' ? { status: 200, data: { builder: { github_login: 'octocat' } } } : signedIn(m, p)));
+  await settle();
+  assert.equal(dom.els.get('whoImg').hidden, true);
+  assert.equal(dom.els.get('whoImg').src, undefined);
+  assert.equal(dom.text('whoLogin'), 'octocat');
+});
+
+test('a failed identity read is not a sign-out: the chip falls back to the account’s own handle', async () => {
+  const dom = boot((m, p) => (p === '/me' ? { status: 500, data: null } : signedIn(m, p)));
+  await settle();
+  assert.equal(dom.els.get('acctBody').hidden, false);
+  assert.equal(dom.els.get('who').hidden, false, 'the profile band — and Sign out in it — stays reachable');
+  assert.equal(dom.els.get('signinTop').hidden, true, 'no Sign in door over a page that is signed in');
+  assert.equal(dom.text('whoLogin'), 'octo');
+  assert.equal(dom.els.get('whoImg').hidden, true);
+});
+
+test('the bands open and close the way the hub’s do: toggle, one at a time, a click outside, Tab out', async () => {
+  const dom = boot(signedIn);
+  await settle();
+  const [projTrig, who] = [dom.els.get('projTrig'), dom.els.get('who')];
+  const [projects, profile] = [dom.els.get('menuProjects'), dom.els.get('menuProfile')];
+  const expanded = (t) => t.getAttribute('aria-expanded');
+
+  dom.click(projTrig);
+  assert.deepEqual([projects.hidden, expanded(projTrig)], [false, 'true']);
+  assert.equal(dom.active(), null, 'a pointer open leaves focus where it was');
+  dom.click(projTrig);
+  assert.deepEqual([projects.hidden, expanded(projTrig)], [true, 'false'], 'the trigger toggles');
+
+  dom.click(projTrig);
+  dom.click(who);
+  assert.deepEqual([projects.hidden, expanded(projTrig), profile.hidden, expanded(who)], [true, 'false', false, 'true'], 'opening one closes the other');
+
+  dom.click({ closest: () => null });
+  assert.deepEqual([profile.hidden, expanded(who)], [true, 'false'], 'a click outside closes');
+
+  dom.click(who);
+  const here = dom.click(item(profile, 'Account'));
+  assert.equal(profile.hidden, true, 'an item activated closes its band');
+  assert.equal(here.prevented, true, 'Account is this page — no reload, so nothing typed is thrown away');
+  assert.equal(dom.calls.some((c) => c.method === 'POST'), false, 'and it is not the sign-out');
+
+  dom.click(projTrig);
+  dom.focusout(projects, null);
+  assert.equal(projects.hidden, false, 'a null relatedTarget is left to the document click');
+  dom.focusout(projects, dom.els.get('fName'));
+  assert.equal(projects.hidden, true, 'Tab out of the band closes it');
+});
+
+test('the bands by keyboard: Enter lands on the first item, the arrows walk and wrap, Escape hands focus back', async () => {
+  const dom = boot(signedIn);
+  await settle();
+  const projTrig = dom.els.get('projTrig');
+  const projects = dom.els.get('menuProjects');
+  assert.equal(dom.key('ArrowDown').prevented, false, 'with nothing open the keys are the page’s');
+
+  dom.click(projTrig, 0);
+  assert.equal(dom.active().text, 'Sky', 'detail 0 is a keyboard activation');
+  assert.equal(dom.key('ArrowDown').prevented, true);
+  assert.equal(dom.active().text, 'Table');
+  dom.key('ArrowUp');
+  dom.key('ArrowUp');
+  assert.equal(dom.active().text, 'New project', 'ArrowUp wraps past the first item');
+  dom.key('ArrowDown');
+  assert.equal(dom.active().text, 'Sky');
+  dom.key('Escape');
+  assert.equal(projects.hidden, true);
+  assert.equal(dom.active(), projTrig, 'focus was inside the band, so it returns to the trigger');
+});
+
+test('signed out, the arrows skip the hidden Your projects item', async () => {
+  const dom = boot(() => ({ status: 401, data: null }));
+  await settle();
+  dom.click(dom.els.get('projTrig'), 0);
+  dom.key('ArrowDown');
+  dom.key('ArrowDown');
+  assert.equal(dom.active().text, 'New project', 'Sky → Table → New project');
+});
+
+test('sign out is the profile band’s plain anchor upgraded to the POST, then a reload of this page', async () => {
+  const dom = boot((m, p) => (p === '/auth/logout' ? { status: 204, data: null } : signedIn(m, p)));
+  await settle();
+  const profile = dom.els.get('menuProfile');
+  assert.equal(dom.click(item(profile, 'My projects')).prevented, false, 'every other item is a real navigation');
+  dom.click(dom.els.get('who'));
+  const ev = dom.click(item(profile, 'Sign out'));
+  assert.equal(ev.prevented, true, 'the GET the href names would 404 and leave the session live');
+  await settle();
+  assert.deepEqual(dom.calls.at(-1), { method: 'POST', path: '/auth/logout', body: undefined });
+  assert.equal(dom.assigned, '/account');
 });
 
 // ── 4. the route ─────────────────────────────────────────────────────────────