@bongos/core 1.21.164 → 1.21.166

package/tests/page_notes_panel.mjs

@@ -1,10 +1,10 @@
 // tests/page_notes_panel.mjs — the hall side of the artist's page feedback doc
-// (task 1004496): the palette tool craft-mode.js puts in the top bar, and the
-// reader in page-notes.js. The server half is tests/page_notes.mjs.
+// (task 1004496): the docked review panel craft-mode.js puts at the right edge
+// in Artistry (task 1004771: no top-bar button), and the reader in page-notes.js. The server half is tests/page_notes.mjs.
 //
-// Runs the REAL craft-mode.js over a small DOM: the palette shows in Artistry
-// alone and leaves when the mode changes, pressing it loads page-notes.js once
-// (same ?v as craft-mode.js) and a ?note= link opens the doc in any mode. Then
+// Runs the REAL craft-mode.js over a small DOM: the panel docks in Artistry
+// alone and closes when the mode changes, page-notes.js loads once (same ?v as
+// craft-mode.js) and a ?note= link opens the doc in any mode. Then
 // the REAL page-notes.js reader: it escapes the doc and shows only this module's
 // own images, which is what keeps a doc from pulling a picture off another site.
 import assert from 'node:assert/strict';
@@ -63,7 +63,7 @@ function boot({ session = {}, search = '' } = {}) {
   // "Loading" page-notes.js: record the tag, then define the API it would define.
   head.onAppend = (tag) => {
     loaded.push(tag.src);
-    window.OTBPageNotes = { open: () => opened.push('open'), openNote: (id) => opened.push('note ' + id) };
+    window.OTBPageNotes = { open: () => opened.push('open'), openNote: (id) => opened.push('note ' + id), dock: () => opened.push('dock'), close: () => opened.push('close') };
     tag.onload();
   };
   const sandbox = { window, document, Promise, CustomEvent: class { constructor(t, i) { this.type = t; Object.assign(this, i); } } };
@@ -74,36 +74,31 @@ function boot({ session = {}, search = '' } = {}) {
 }
 const flush = () => new Promise((r) => setTimeout(r, 0));
 
-test('THE PALETTE: in the top bar in Artistry alone, right before the switch, and gone when the mode changes', () => {
+test('THE PANEL: docked at the edge in Artistry alone, with no top-bar button, and closed when the mode changes', async () => {
   const p = boot({ session: { 'hall-craft': 'artistry' } });
-  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-palette', 'craft-tool-paintbrush'], 'the palette, then the paintbrush (task 1004497)');
-  // Task 1004686: the palette sits in its split pill (Review + the review-mode chevron).
-  const pill = p.tools()[0].parentNode;
-  assert.equal(pill.id, 'craft-review', 'the palette rides the Review split pill');
-  assert.equal(pill.nextSibling, p.tools()[1], 'the palette comes first');
-  assert.equal(p.tools()[1].nextSibling, p.sw, 'and the pair sits right before the mode switch');
-  assert.equal(p.tools()[0].getAttribute('aria-label'), 'Artist review: write feedback on this page', 'one name with the public site\'s button (task 1004499)');
-  for (const m of ['building', 'governing']) {
-    p.craft.choose(m);
-    assert.equal(p.tools().length, 0, `no palette in ${m}`);
-  }
+  await flush();
+  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-paintbrush'], 'the top bar keeps Edit words alone (task 1004771)');
+  assert.equal(p.tools()[0].nextSibling, p.sw, 'right before the mode switch');
+  assert.deepEqual(p.opened, ['dock'], 'the review panel docks instead');
+  for (const m of ['building', 'governing']) p.craft.choose(m);
+  assert.deepEqual(p.opened, ['dock', 'close', 'close'], 'and leaves with Artistry');
   p.craft.choose('ideating');
-  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-lightbulb'], 'Ideating swaps them for its lightbulb alone (task 1004498)');
-  p.craft.choose('artistry');
+  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-lightbulb'], 'Ideating shows its lightbulb alone (task 1004498)');
   p.craft.choose('artistry');
-  assert.equal(p.tools().length, 2, 'choosing Artistry twice draws one palette and one paintbrush');
-  assert.equal(boot().tools().length, 0, 'and none with no mode at all');
+  await flush();
+  assert.equal(p.opened.filter((x) => x === 'dock').length, 2, 'back in Artistry it docks again');
+  const none = boot();
+  await flush();
+  assert.equal(none.tools().length, 0, 'no tools with no mode at all');
+  assert.deepEqual(none.loaded, [], 'and nothing loads');
 });
 
-test('pressing it loads page-notes.js once, at the same version as craft-mode.js, and opens it', async () => {
+test('the panel script loads once, at the same version as craft-mode.js', async () => {
   const p = boot({ session: { 'hall-craft': 'artistry' } });
-  assert.deepEqual(p.loaded, [], 'nothing loads until the palette is pressed');
-  p.tools()[0].click();
   await flush();
-  p.tools()[0].click();
+  p.craft.choose('artistry');
   await flush();
   assert.deepEqual(p.loaded, ['/builders/page-notes.js?v=2026-10-04-test']);
-  assert.deepEqual(p.opened, ['open', 'open']);
 });
 
 test('a ?note= link opens that doc on arrival, in any mode', async () => {
@@ -152,6 +147,145 @@ test('colours live in the sheets, and the panel and tool are styled there', () =
   // the hall pulls it in through style.css, ahead of every rule.
   const pn = fs.readFileSync(path.join(HALL, 'page-notes.css'), 'utf8');
   for (const sel of ['.pn {', '.pn__panel {', '.pn__text {', '.pn-doc__img {']) assert.ok(pn.includes(sel) && !css.includes(sel), sel);
+  // Task 1004771: the docked, scrimless look is the review panel's alone
+  // (.pn--dock). The lightbulb rides plain .pn and keeps its scrim and its
+  // scroll lock, so docking the review panel cannot quietly change it.
+  assert.match(pn, /html\.pn-open \{ overflow: hidden; \}/, 'the lightbulb keeps its scroll lock');
+  assert.match(pn, /\.pn \{[^}]*inset: 0;[^}]*background: var\(--pn-scrim\);/, 'and its scrim');
+  assert.match(pn, /\.pn\.pn--dock \{[^}]*background: none;/, 'the docked review panel drops both');
+  assert.match(NOTES, /sheet\.className = docked \? 'pn pn--dock' : 'pn';/, 'and only a docked review panel wears it');
+  const bulb = fs.readFileSync(path.join(HALL, 'lightbulb.js'), 'utf8');
+  assert.doesNotMatch(bulb, /pn--dock/, 'the lightbulb does not');
   const at = css.indexOf('@import url("page-notes.css");');
   assert.ok(at !== -1 && at < css.indexOf('{'), 'style.css imports the sheet before any rule');
 });
+
+// ---------- the docked panel, REAL page-notes.js (task 1004771) ----------
+// A small DOM that runs the real sheet: querySelector hands back one cached
+// fake per selector, so the tab, the X and the mode row are real listeners.
+function dockedPanel({ reviewing = null, opened = false } = {}) {
+  const calls = [];
+  let sheet = null;
+  const fake = (name) => {
+    const attrs = {}, listeners = {}, classes = new Set();
+    const kids = {};
+    const el = {
+      name, innerHTML: '', parentNode: null, id: '', className: '',
+      setAttribute(k, v) { attrs[k] = String(v); }, getAttribute(k) { return k in attrs ? attrs[k] : null; },
+      hasAttribute(k) { return k in attrs; }, removeAttribute(k) { delete attrs[k]; },
+      classList: { add: (c) => classes.add(c), remove: (c) => classes.delete(c), contains: (c) => classes.has(c),
+        toggle: (c, on) => { if (on === undefined) on = !classes.has(c); if (on) classes.add(c); else classes.delete(c); return on; } },
+      addEventListener(t, fn) { (listeners[t] ||= []).push(fn); },
+      fire(t, ev = {}) { (listeners[t] || []).forEach((fn) => fn({ target: el, preventDefault() {}, ...ev })); },
+      querySelector(sel) { return (kids[sel] ||= Object.assign(fake(sel), { parentNode: el })); },
+      querySelectorAll() { return []; },
+      contains(n) { for (let x = n; x; x = x.parentNode) if (x === el) return true; return false; },
+      focus() { document.activeElement = el; },
+    };
+    return el;
+  };
+  const body = fake('body');
+  body.appendChild = (c) => { c.parentNode = body; return c; };
+  body.removeChild = (c) => { c.parentNode = null; return c; };
+  body.dataset = { page: 'studio', pageTitle: 'Studio' };
+  const docKeys = [];
+  const document = {
+    body, activeElement: null, title: 'Studio — hall', documentElement: fake('html'),
+    createElement: () => (sheet = fake('div')),
+    addEventListener: (t, fn) => { if (t === 'keydown') docKeys.push(fn); },
+    removeEventListener() {},
+  };
+  const fetch = (url, opts) => {
+    calls.push(opts.method + ' ' + url);
+    return Promise.resolve({ ok: true, json: () => Promise.resolve({ note: { id: 9, status: 'draft', body_md: '' }, images: [], notes: [] }) });
+  };
+  const craft = {
+    reviewing: () => reviewing,
+    review: (id) => { reviewing = id; calls.push('review ' + id); },
+    stopReview: () => { reviewing = null; calls.push('stop'); },
+    experiences: () => [{ id: 'ideating', label: 'Ideator experience', short: 'Ideating' }, { id: 'building', label: 'Building experience', short: 'Building' }],
+    iconHtml: () => '<svg></svg>',
+  };
+  const window = { location: { pathname: '/studio' }, OTBCraftMode: craft };
+  const sandbox = { window, document, fetch, setTimeout, clearTimeout, Promise };
+  vm.createContext(sandbox);
+  vm.runInContext(NOTES, sandbox, { filename: 'page-notes.js' });
+  const api = window.OTBPageNotes;
+  if (opened) api.open(); else api.dock();
+  const press = (attr, value = '') => {
+    const btn = fake('button');
+    btn.setAttribute(attr, value);
+    sheet.fire('click', { target: { closest: () => btn } });
+  };
+  return { api, calls, document, docKeys, body, press, html: document.documentElement, get sheet() { return sheet; }, collapsed: () => sheet.classList.contains('pn--collapsed') };
+}
+
+test('DOCKED: it waits collapsed behind its tab and asks for no draft until it is first shown', async () => {
+  const p = dockedPanel();
+  await flush();
+  assert.ok(p.collapsed(), 'tucked away on arrival');
+  assert.equal(p.sheet.parentNode, p.body, 'but on the page, so its tab shows');
+  assert.deepEqual(p.calls, [], 'no request while nobody has looked');
+  p.sheet.querySelector('[data-pn-tab]').fire('pointerenter', { pointerType: 'mouse' });
+  await flush();
+  assert.ok(!p.collapsed(), 'a mouse on the tab opens it');
+  assert.ok(p.calls.some((c) => /^POST /.test(c)), 'and the draft opens the first time it is shown');
+  const drafts = p.calls.filter((c) => /^POST /.test(c)).length;
+  p.sheet.fire('pointerleave', { pointerType: 'mouse' });
+  assert.ok(p.collapsed(), 'leaving the panel for the page tucks it away');
+  p.sheet.querySelector('[data-pn-tab]').fire('pointerenter', { pointerType: 'mouse' });
+  await flush();
+  assert.equal(p.calls.filter((c) => /^POST /.test(c)).length, drafts, 'showing it again opens no second draft');
+});
+
+test('DOCKED: a touch never peeks, the tab click toggles, Escape and the X tuck it away and keep the tab', async () => {
+  const p = dockedPanel();
+  p.sheet.querySelector('[data-pn-tab]').fire('pointerenter', { pointerType: 'touch' });
+  assert.ok(p.collapsed(), 'a touch is not a hover');
+  p.press('data-pn-tab');
+  await flush();
+  assert.ok(!p.collapsed(), 'the tab click opens it (touch and keyboard)');
+  assert.equal(p.sheet.querySelector('[data-pn-tab]').getAttribute('aria-expanded'), 'true');
+  p.sheet.querySelector('[data-pn-close]').focus();
+  p.docKeys.forEach((fn) => fn({ key: 'Escape', preventDefault() {} }));
+  assert.ok(p.collapsed(), 'Escape inside the panel tucks it away');
+  assert.equal(p.sheet.querySelector('[data-pn-tab]').getAttribute('aria-expanded'), 'false');
+  p.press('data-pn-tab');
+  p.press('data-pn-close');
+  assert.ok(p.collapsed(), 'docked, the X tucks it away too');
+  assert.equal(p.sheet.parentNode, p.body, 'and leaves the tab on the page, the only way back in');
+  p.api.close();
+  assert.equal(p.sheet.parentNode, null, 'leaving Artistry (close) is what removes it');
+});
+
+test('THE MODE ROW names each mode in the mode switch word and starts a review on a press', () => {
+  const p = dockedPanel();
+  assert.match(p.sheet.innerHTML, /<span>Ideating<\/span>/, 'the switch says Ideating, so the row does');
+  assert.doesNotMatch(p.sheet.innerHTML, />Ideator</);
+  assert.doesNotMatch(p.sheet.innerHTML, /Stop reviewing/, 'no way out of a review that has not started');
+  p.press('data-pn-mode', 'building');
+  assert.ok(p.calls.includes('review building'));
+  assert.match(p.sheet.querySelector('#pn-modes').innerHTML, /data-pn-mode="building" aria-pressed="true"/, 'the row repaints with the live one pressed');
+  assert.match(p.sheet.querySelector('#pn-modes').innerHTML, /Stop reviewing/);
+  p.press('data-pn-mode', '');
+  assert.ok(p.calls.includes('stop'), 'Stop reviewing ends it');
+});
+
+test('OPENED, not docked (the public site Artist review button): the modal sheet it always was', async () => {
+  const p = dockedPanel({ opened: true });
+  await flush();
+  assert.equal(p.sheet.className, 'pn', 'no docked look: the scrim and full-viewport sheet stay');
+  assert.ok(p.html.classList.contains('pn-open'), 'the page behind is scroll-locked');
+  assert.match(p.sheet.innerHTML, /role="dialog" aria-modal="true"/);
+  assert.doesNotMatch(p.sheet.innerHTML, /data-pn-tab/, 'no tab');
+  assert.ok(p.calls.some((c) => /^POST /.test(c)), 'the draft opens straight away');
+  p.sheet.fire('pointerleave', { pointerType: 'mouse' });
+  assert.ok(!p.collapsed(), 'a pointer leaving does not tuck a modal sheet');
+  p.docKeys.forEach((fn) => fn({ key: 'Escape', preventDefault() {} }));
+  assert.equal(p.sheet.parentNode, null, 'Escape closes it');
+  assert.ok(!p.html.classList.contains('pn-open'), 'and lifts the scroll lock');
+  const q = dockedPanel({ opened: true });
+  const s = q.sheet;
+  s.fire('click', { target: s });
+  assert.equal(s.parentNode, null, 'a click on the scrim closes it');
+});

package/tests/settings_art_key_absent.mjs

@@ -0,0 +1,137 @@
+// tests/settings_art_key_absent.mjs — the image-generation key card on a project
+// with no art pipeline (task 1004786).
+//
+// The key routes (/me/art-key/*) left the core with the art-pipeline module, but
+// the Settings card and the art_key need stayed. On cloudbongos.com — which has
+// no art pipeline — every builder past Xenos was told "your free art coverage has
+// ended, add your key", and the card the nudge pointed at could never load, so
+// there was nowhere to add one. Two halves, both pinned here:
+//
+//   - builder-needs: with the art pipeline absent (ctx.artPipeline === false) the
+//     art_key need is not raised at all — nothing to nag about, nothing to add;
+//   - settings.js: a 404 from GET /me/art-key/own means the routes are not
+//     installed, so the section stays hidden instead of showing a reload error.
+//     A real failure (500) still shows the error.
+//
+// Pure vm + file-read (no DB/network) — runs in the DB-free unit gate.
+import { strict as assert } from 'node:assert';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/settings.js'), 'utf8');
+const ME = fs.readFileSync(path.join(ROOT, 'src/bongos/routes/me.js'), 'utf8');
+const needs = createRequire(import.meta.url)('../modules/builder-settings/builder-needs.js');
+
+let passed = 0, failed = 0;
+async function t(name, fn) {
+  try { await fn(); passed++; console.log(`  ok  ${name}`); }
+  catch (e) { failed++; console.error(`  FAIL ${name}\n       ${e.message}`); }
+}
+
+function makeEl() {
+  return {
+    hidden: false, textContent: '', value: '', disabled: false, href: '', className: '',
+    dataset: {}, style: {}, children: [], _html: '',
+    set innerHTML(v) { this._html = String(v); }, get innerHTML() { return this._html; },
+    addEventListener() {}, appendChild(c) { return c; },
+    append() {}, prepend() {}, remove() {}, setAttribute() {}, removeAttribute() {}, getAttribute() { return null; },
+    querySelector() { return null; }, querySelectorAll() { return []; }, closest() { return null; },
+    classList: { add() {}, remove() {}, toggle() {}, contains() { return false; } },
+    focus() {},
+  };
+}
+
+// Boot the real settings.js; GET /me/art-key/own answers with `artKeyStatus`.
+async function boot(artKeyStatus) {
+  const els = new Map();
+  const $ = (sel) => { if (!els.has(sel)) els.set(sel, makeEl()); return els.get(sel); };
+  // The markup ships both hidden (settings.html), so the stub starts them hidden.
+  $('#art-key').hidden = true;
+  $('#artkey-banner').hidden = true;
+  const builder = { id: 4, github_login: 'b4', rank: 'thetes', preferred_disciplines: ['engineer'] };
+  const me = { builder, needs: { items: [needs.artKeyNeed({ rank: 'thetes' })] } };
+  const api = {
+    async request(method, url) {
+      if (method === 'GET' && url === '/api/bongos/me') return { status: 200, ok: true, data: me };
+      if (method === 'GET' && url === '/api/bongos/me/art-key/own') {
+        return artKeyStatus === 200
+          ? { status: 200, ok: true, data: { set: false, storage_configured: true } }
+          : { status: artKeyStatus, ok: false, data: null };
+      }
+      return { status: 404, ok: false, data: null };
+    },
+  };
+  const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const document = {
+    getElementById: (id) => $(`#${id}`), createElement: () => makeEl(),
+    dispatchEvent() {}, addEventListener() {}, querySelector: () => null, querySelectorAll: () => [],
+  };
+  const window = {
+    __BRANDING__: {}, __MODULES__: { enabled: {} },
+    BongosClient: { createClient: () => api },
+    OTB: {
+      $, escapeHtml, toast() {}, disciplines: () => ['engineer'], roleLabel: (d) => d,
+      hubOrigin: () => null, settingsPanels: () => [],
+    },
+    OTBKit: { emptyStateHtml: (m) => m, makeSectionRail: () => ({ refresh() {}, activate() {} }) },
+    location: { hash: '', pathname: '/settings', search: '', assign() {} },
+    scrollTo() {}, confirm: () => false, addEventListener() {},
+  };
+  const sandbox = {
+    window, document, console: { log() {}, warn() {}, error() {}, info() {} },
+    history: { replaceState() {} }, URLSearchParams, setTimeout, clearTimeout,
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(SRC, sandbox, { filename: 'settings.js' });
+  for (let i = 0; i < 12; i++) await new Promise((r) => setImmediate(r));
+  return $;
+}
+
+console.log('\nthe art_key need without an art pipeline:');
+
+await t('artPipeline: false raises no art_key need at any rank', () => {
+  for (const rank of ['xenos', 'thetes', 'metic', 'archon']) {
+    assert.equal(needs.artKeyNeed({ rank, artPipeline: false }), null, rank);
+    const r = needs.computeNeeds({ rank, artPipeline: false });
+    assert.ok(!r.items.some((n) => n.id === 'art_key'), rank);
+  }
+});
+
+await t('with the pipeline present (or unstated) the need is unchanged', () => {
+  assert.equal(needs.artKeyNeed({ rank: 'thetes', artPipeline: true }).state, 'action_needed');
+  assert.equal(needs.artKeyNeed({ rank: 'thetes' }).state, 'action_needed');
+});
+
+await t('/me tells computeNeeds whether the art pipeline is installed', () => {
+  const call = ME.slice(ME.indexOf('settings.computeNeeds({'), ME.indexOf('isFoundingOwner'));
+  assert.match(call, /artPipeline:/);
+});
+
+console.log('\nthe Settings card:');
+
+await t('routes not installed (404) → the section stays hidden, no reload error', async () => {
+  const $ = await boot(404);
+  assert.equal($('#art-key').hidden, true);
+  assert.equal($('#artkey-banner').hidden, true);
+  assert.doesNotMatch($('#artkey-card').innerHTML, /could not be loaded/);
+});
+
+await t('a real failure (500) still shows the error', async () => {
+  const $ = await boot(500);
+  assert.equal($('#art-key').hidden, false);
+  assert.match($('#artkey-card').innerHTML, /could not be loaded/);
+});
+
+await t('routes present → the key box renders', async () => {
+  const $ = await boot(200);
+  assert.equal($('#art-key').hidden, false);
+  assert.match($('#artkey-card').innerHTML, /id="artkey-input"/);
+});
+
+console.log(`\n${passed} passed, ${failed} failed`);
+process.exit(failed ? 1 : 0);