@bongos/core 1.21.75 → 1.21.76

package/modules/hall-ui/public/craft-mode.js

@@ -206,7 +206,9 @@
   // routes behind a tool hold its walls (ADR 0016).
   var TOOLS = {
     artistry: [
-      { id: 'palette', icon: 'artistry', short: 'Feedback', label: 'Write feedback on this page', script: 'page-notes.js', api: 'OTBPageNotes' },
+      // Named "Artist review" since task 1004499: the public site's button
+      // (public-landing assets/artist-review.js) opens this same panel.
+      { id: 'palette', icon: 'artistry', short: 'Review', label: 'Artist review: write feedback on this page', script: 'page-notes.js', api: 'OTBPageNotes' },
       // Task 1004497: this page's words, edited where they stand as a proposed wording change.
       { id: 'paintbrush', icon: 'brush', short: 'Edit words', label: 'Edit this page\'s words', script: 'paintbrush.js', api: 'OTBPaintbrush' },
     ],

package/modules/hall-ui/public/page-notes.css

@@ -0,0 +1,150 @@
+/* page-notes.css — the page feedback doc's sheet (task 1004496), moved out of
+   style.css by task 1004499 so the PUBLIC site's Artist review button can wear
+   the same panel: style.css imports it for the hall, and the public pages'
+   artist-review.js links it at /modules/hall-ui/public/page-notes.css. Every
+   token the public sheets may lack carries its fallback in place. The
+   lightbulb (lightbulb.js) rides these classes too. */
+
+/* The fallbacks live as custom properties, never in a declaration value, so
+   the hall's colour-literal guard (tests/hall_audit.mjs) still holds: in the
+   hall each one resolves to its token, on the public site to its fallback. */
+.pn, .arv-btn {
+  --pn-scrim: var(--scrim, rgba(0, 0, 0, .55));
+  --pn-shadow-pop: var(--shadow-pop, 0 24px 60px rgba(0, 0, 0, .35));
+  --pn-danger: var(--danger, #e5484d);
+  --pn-accent-on: var(--accent-on, #1a0b04);
+  --pn-glass: var(--glass, rgba(255, 255, 255, .08));
+}
+
+/* The page feedback doc: a sheet from the right over a scrim. */
+html.pn-open { overflow: hidden; }
+.pn {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal, 1000);
+  display: flex;
+  justify-content: flex-end;
+  background: var(--pn-scrim);
+}
+.pn__panel {
+  position: relative;
+  width: min(560px, 100%);
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-card);
+  color: var(--ink);
+  box-shadow: 0 0 0 1px var(--glass-edge), var(--pn-shadow-pop);
+}
+.pn__head { position: relative; padding: 22px 64px 14px 24px; border-bottom: 1px solid var(--rule-soft); }
+.pn__eyebrow {
+  margin: 0 0 6px;
+  font-family: var(--label-face);
+  font-size: 11px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--craft, var(--ink-faint));
+}
+.pn__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
+.pn__close {
+  position: absolute; top: 14px; right: 14px;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill);
+  background: none; color: var(--ink-soft); cursor: pointer;
+}
+.pn__close svg { width: 18px; height: 18px; }
+.pn__close:hover { color: var(--ink); background: var(--glass); }
+.pn__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
+.pn__label { font-size: 13px; color: var(--ink-soft); }
+.pn__text {
+  width: 100%;
+  min-height: 260px;
+  box-sizing: border-box;
+  padding: 14px 16px;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  font-size: 15px;
+  line-height: 1.55;
+  resize: vertical;
+}
+.pn__text:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
+.pn__add {
+  position: relative;
+  display: inline-flex; align-items: center;
+  min-height: 34px; padding: 0 14px;
+  border-radius: var(--radius-pill);
+  box-shadow: inset 0 0 0 1px var(--rule);
+  font-size: 13.5px; color: var(--ink); cursor: pointer;
+}
+.pn__add:hover { background: var(--glass); }
+.pn__add:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
+.pn__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
+.pn__quiet { margin: 0; font-size: 13px; color: var(--ink-faint); }
+.pn__saved { margin-left: auto; }
+.pn__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
+.pn__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--bg-deep); }
+.pn__error { margin: 0; font-size: 13.5px; color: var(--pn-danger); }
+.pn__error:empty { display: none; }
+.pn__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 4px; }
+.pn__hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
+.pn__foot .pn__hint { flex: 1 1 240px; }
+.pn__submit {
+  min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
+  background: var(--accent); color: var(--pn-accent-on); font: inherit; font-weight: 500; cursor: pointer;
+}
+.pn__submit:hover { background: var(--accent-lift, var(--accent)); }
+.pn__submit:disabled { opacity: .55; cursor: default; }
+.pn__submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.pn__list { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
+.pn__list-h {
+  margin: 0 0 8px;
+  font-family: var(--label-face); font-size: var(--label-size, 11.5px); letter-spacing: var(--label-space, .1em);
+  text-transform: var(--label-case, uppercase); color: var(--ink-faint); font-weight: 400;
+}
+.pn__rows, .pn__ideas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.pn__row {
+  display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
+  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
+}
+a.pn__row { text-decoration: none; } /* the lightbulb's page ideas are links */
+.pn__row:hover { background: var(--glass); }
+.pn__row:focus-visible, .pn__back:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__row-meta { font-size: 12px; color: var(--ink-faint); }
+.pn__row-text { font-size: 14px; color: var(--ink-soft); }
+.pn__ideas a { display: inline-block; padding: 6px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
+.pn__back {
+  align-self: flex-start; min-height: 32px; padding: 0 12px; margin-left: -12px; border: 0;
+  border-radius: var(--radius-pill); background: none; color: var(--ink-soft); font: inherit; font-size: 13.5px; cursor: pointer;
+}
+.pn__back:hover { color: var(--ink); background: var(--glass); }
+.pn__done { margin: 0; font-size: 16px; }
+.pn-doc { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
+.pn-doc p, .pn-doc ul { margin: 0 0 12px; }
+.pn-doc__h { margin: 16px 0 6px; font-size: 16px; font-weight: 500; }
+.pn-doc__img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
+@media (max-width: 640px) {
+  .pn__head { padding: 18px 60px 12px 16px; }
+  .pn__body { padding: 14px 16px 24px; }
+}
+
+/* The public site's Artist review button (task 1004499, artist-review.js): a
+   pill in the hub bar, beside the identity chip. */
+.arv-btn {
+  display: inline-flex; align-items: center; gap: 7px;
+  min-height: 36px; padding: 0 14px 0 11px;
+  border: 0; border-radius: var(--radius-pill, 999px);
+  background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
+  box-shadow: inset 0 0 0 1px var(--rule);
+}
+.arv-btn svg { width: 17px; height: 17px; flex: none; }
+.arv-btn:hover { background: var(--pn-glass); }
+.arv-btn:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
+@media (max-width: 640px) {
+  .arv-btn { width: 36px; padding: 0; justify-content: center; }
+  .arv-btn__label { display: none; }
+}

package/modules/hall-ui/public/page-notes.js

@@ -26,12 +26,35 @@
       return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
     });
   }
+  // Where the panel is open. The hall needs no setting; the public site's
+  // Artist review button (task 1004499, artist-review.js) calls
+  // configure({ surface: 'site', hall: <the hall's origin> }) before it opens.
+  var HALL_ORIGIN_RE = /^https?:\/\/[A-Za-z0-9.:-]+$/;
+  var cfg = { surface: 'builders', hall: '' };
+  function configure(o) {
+    o = o || {};
+    cfg.surface = o.surface === 'site' ? 'site' : 'builders';
+    cfg.hall = HALL_ORIGIN_RE.test(String(o.hall || '')) ? String(o.hall).replace(/\/+$/, '') : '';
+  }
+  function onSite() { return cfg.surface === 'site'; }
+  // The page a doc is about. In the hall, the page inventory id builders:<data-page>.
+  // On the public site, site:<first path segment>, so / is site:home and
+  // /projects is site:projects. Those docs are read in the Studio.
   function page() {
     var b = document.body || { dataset: {} };
-    var slug = String((b.dataset && b.dataset.page) || 'home').toLowerCase().replace(/[^a-z0-9_-]/g, '-').slice(0, 64) || 'home';
-    var title = (b.dataset && b.dataset.pageTitle) || String(document.title || '').split(/\s[—-]\s/)[0] || slug;
     var path = String((window.location && window.location.pathname) || '/').replace(/[^A-Za-z0-9/_.-]/g, '').slice(0, 200) || '/';
-    return { id: 'builders:' + slug, path: path, title: title.slice(0, 120) };
+    var raw = onSite() ? (path.split('/')[1] || 'home').replace(/\.html$/, '') : ((b.dataset && b.dataset.page) || 'home');
+    var slug = String(raw).toLowerCase().replace(/[^a-z0-9_-]/g, '-').replace(/^[^a-z0-9]+/, '').slice(0, 64) || 'home';
+    // A public page's title leads with the product name ("Cloud Bongos — projects"),
+    // so it is named by its path instead: Home, Projects, Account.
+    var title = onSite() ? slug.charAt(0).toUpperCase() + slug.slice(1).replace(/[-_]+/g, ' ')
+      : (b.dataset && b.dataset.pageTitle) || String(document.title || '').split(/\s[—·|-]\s/)[0] || slug;
+    return { id: (onSite() ? 'site:' : 'builders:') + slug, path: path, title: title.slice(0, 120) };
+  }
+  // An idea's own page. The hall reads it at /#/idea/N; from the public site the
+  // hall is another host on the hub, the origin configure() was given.
+  function ideaHref(id) {
+    return onSite() ? cfg.hall + '/builders/idea/' + id : '/#/idea/' + id;
   }
   function api(method, path, body) {
     var opts = { method: method, credentials: 'same-origin', headers: {} };
@@ -81,7 +104,7 @@
   function shellHtml(p) {
     return '<div class="pn__panel" role="dialog" aria-modal="true" aria-labelledby="pn-title">' +
       '<div class="pn__head">' +
-        '<p class="pn__eyebrow">Page feedback · ' + esc(p.title) + '</p>' +
+        '<p class="pn__eyebrow">Artist review · ' + esc(p.title) + '</p>' +
         '<h2 class="pn__title" id="pn-title">What should this page be?</h2>' +
         '<button class="pn__close" type="button" data-pn-close aria-label="Close">' +
           '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M5 5l8 8M13 5l-8 8"/></svg></button>' +
@@ -123,7 +146,7 @@
   function ideasHtml(ideas) {
     if (!ideas || !ideas.length) return '';
     return '<ul class="pn__ideas">' + ideas.map(function (i) {
-      return '<li><a href="/#/idea/' + esc(i.id) + '">' + esc(i.title) + '</a></li>';
+      return '<li><a href="' + esc(ideaHref(i.id)) + '">' + esc(i.title) + '</a></li>';
     }).join('') + '</ul>';
   }
   function readHtml(doc) {
@@ -314,6 +337,8 @@
     open: function () { if (mountSheet()) openDraft(); },
     openNote: function (id) { if (mountSheet()) refreshList().then(function () { return showNote(id); }); },
     close: close,
+    configure: configure,
+    ideaHref: ideaHref,
     renderBody: renderBody,
     page: page,
   };

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

@@ -501,6 +501,21 @@ html.st-open { overflow: hidden; }
 .st-surface__fill { height: 4px; border-radius: 999px; background: var(--st-accent); }
 .st-asked { margin: 0; font-size: 14px; line-height: 1.5; color: var(--st-ink-faint); }
 
+/* From the live site (task 1004499): one row per review, the page then who and
+   when, then its opening words. Each row opens the doc in the palette's panel. */
+.st-sites { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.st-site {
+  display: flex; flex-direction: column; gap: 4px;
+  margin: 0 -12px; padding: 10px 12px; border-radius: 12px;
+  color: var(--st-ink); text-decoration: none;
+}
+.st-site:hover { background: var(--st-glass); }
+.st-site:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 1px; }
+.st-site__head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
+.st-site__page { font-size: 17px; font-weight: 300; }
+.st-site__meta { font-size: 13px; color: var(--st-ink-dim); }
+.st-site__text { font-size: 14px; line-height: 1.45; color: var(--st-ink-soft); overflow-wrap: anywhere; }
+
 /* ---------------------------------------------------------------------------
    The phone. The room keeps its night: the window shrinks to the top right
    (scaled whole, so its moon and lights keep their places), the desk sits on a

package/modules/hall-ui/public/studio.html

@@ -125,6 +125,12 @@
             <span class="st-action__label">Artist Review Status</span>
             <span class="st-action__detail" id="st-status-detail">how far each surface has come</span>
           </button>
+          <!-- Task 1004499: the reviews builders wrote on the public site with
+               its Artist review button. Each opens here, in the palette's panel. -->
+          <button type="button" class="st-action" id="st-site" aria-haspopup="dialog">
+            <span class="st-action__label">From the live site</span>
+            <span class="st-action__detail" id="st-site-detail">reviews written on the live site</span>
+          </button>
           <!-- The retired review queue (task 1004325 / TW14), a quiet door that
                shows only while reviews filed before Tweak Mode still wait. -->
           <button type="button" class="st-older" id="st-older" aria-haspopup="dialog" hidden>

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

@@ -666,9 +666,20 @@
     setText('st-status-detail', lib.statusDetail(home.pages));
   }
 
-  // ---- the two small glass panels -------------------------------------------
+  // The public site's reviews (task 1004499): docs written with its Artist
+  // review button, newest first. Each row is the doc's own link, which opens it
+  // in the palette's panel right here (craft-mode.js reads ?note=).
+  async function loadSite() {
+    const res = await api.request('GET', `${API}/page-notes/site`);
+    if (!res.ok || !res.data) { home.siteFailed = true; return; }
+    home.site = res.data.notes || [];
+    const n = home.site.length;
+    setText('st-site-detail', n ? `${n === 20 ? 'the newest 20' : n} ${n === 1 ? 'review' : 'reviews'} from the live site` : 'no reviews from the live site yet');
+  }
+
+  // ---- the small glass panels -----------------------------------------------
 
-  const TITLES = Object.freeze({ flow: 'Tweak/CopyWrite Flow', status: 'Artist Review Status' });
+  const TITLES = Object.freeze({ flow: 'Tweak/CopyWrite Flow', status: 'Artist Review Status', site: 'From the live site' });
 
   function flowHtml() {
     if (!home.next) {
@@ -712,10 +723,31 @@
     return `<ul class="st-surfaces">${rows}</ul>${asked ? `<p class="st-asked">${escapeHtml(asked)}</p>` : ''}`;
   }
 
+  function siteHtml() {
+    if (!home.site) {
+      return `<p class="st-panel__line">${home.siteFailed ? 'The reviews could not be read just now. Try again in a moment.' : 'Reading the reviews…'}</p>`;
+    }
+    if (!home.site.length) {
+      return '<p class="st-panel__line">None yet. A signed-in builder on the live site sees a Review button in its top bar; what they write lands here.</p>';
+    }
+    const day = (iso) => { const d = iso ? new Date(iso) : null; return d && !isNaN(d) ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : ''; };
+    const rows = home.site.map((r) => {
+      const ideas = r.status === 'filed' ? `${r.idea_count} ${r.idea_count === 1 ? 'idea' : 'ideas'}` : 'splitting';
+      const whole = String(r.excerpt || '').replace(/!\[[^\]\n]*\]\([^)\n]*\)/g, '[image]').replace(/\s+/g, ' ').trim();
+      const text = whole.length > 140 ? `${whole.slice(0, 139).replace(/\s+\S*$/, '')}…` : whole;
+      return `
+      <li><a class="st-site" href="${escapeHtml(r.link)}">
+        <span class="st-site__head"><span class="st-site__page">${escapeHtml(r.page_title || r.page_path || r.page_id)}</span><span class="st-site__meta">${escapeHtml(r.author_name)} · ${escapeHtml(day(r.submitted_at))} · ${escapeHtml(ideas)}</span></span>
+        <span class="st-site__text">${escapeHtml(text)}</span>
+      </a></li>`;
+    }).join('');
+    return `<ul class="st-sites">${rows}</ul>`;
+  }
+
   function paintPanel() {
     const body = byId('st-panel-body');
     if (!body || !home.panel) return;
-    body.innerHTML = home.panel === 'flow' ? flowHtml() : statusHtml();
+    body.innerHTML = home.panel === 'flow' ? flowHtml() : home.panel === 'site' ? siteHtml() : statusHtml();
   }
 
   function openPanel(kind, opener) {
@@ -902,6 +934,8 @@
     if (flow) flow.addEventListener('click', () => openPanel('flow', flow));
     const status = byId('st-status');
     if (status) status.addEventListener('click', () => openPanel('status', status));
+    const site = byId('st-site');
+    if (site) site.addEventListener('click', () => openPanel('site', site));
     const older = byId('st-older');
     if (older) older.addEventListener('click', () => openReviews(older));
 
@@ -962,7 +996,7 @@
     if (!hasDom || !lib) return;
     wireHome();
     if (!signedIn) return;
-    await Promise.all([loadTally(), loadNext(), loadPages()]);
+    await Promise.all([loadTally(), loadNext(), loadPages(), loadSite()]);
     if (home.panel) paintPanel();
   }
 

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

@@ -56,6 +56,7 @@
    here. It lives on the shell rules below and on a page's own body, because a
    body declaration beats an inherited :root value at every width and a token
    tier that carries a breakpoint silently defeats its own media query. */
+@import url("page-notes.css");
 
 :root {
   color-scheme: light;
@@ -1569,122 +1570,6 @@ html[data-theme="light"][data-craft="ideating"] .app-sidebar {
   .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 }
 
-/* The page feedback doc: a sheet from the right over a scrim. */
-html.pn-open { overflow: hidden; }
-.pn {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  display: flex;
-  justify-content: flex-end;
-  background: var(--scrim);
-}
-.pn__panel {
-  position: relative;
-  width: min(560px, 100%);
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-card);
-  color: var(--ink);
-  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-pop);
-}
-.pn__head { position: relative; padding: 22px 64px 14px 24px; border-bottom: 1px solid var(--rule-soft); }
-.pn__eyebrow {
-  margin: 0 0 6px;
-  font-family: var(--label-face);
-  font-size: 11px;
-  letter-spacing: .12em;
-  text-transform: uppercase;
-  color: var(--craft, var(--ink-faint));
-}
-.pn__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
-.pn__close {
-  position: absolute; top: 14px; right: 14px;
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill);
-  background: none; color: var(--ink-soft); cursor: pointer;
-}
-.pn__close svg { width: 18px; height: 18px; }
-.pn__close:hover { color: var(--ink); background: var(--glass); }
-.pn__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
-.pn__label { font-size: 13px; color: var(--ink-soft); }
-.pn__text {
-  width: 100%;
-  min-height: 260px;
-  box-sizing: border-box;
-  padding: 14px 16px;
-  border: 1px solid var(--rule);
-  border-radius: var(--radius-sm);
-  background: var(--bg);
-  color: var(--ink);
-  font: inherit;
-  font-size: 15px;
-  line-height: 1.55;
-  resize: vertical;
-}
-.pn__text:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
-.pn__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
-.pn__add {
-  position: relative;
-  display: inline-flex; align-items: center;
-  min-height: 34px; padding: 0 14px;
-  border-radius: var(--radius-pill);
-  box-shadow: inset 0 0 0 1px var(--rule);
-  font-size: 13.5px; color: var(--ink); cursor: pointer;
-}
-.pn__add:hover { background: var(--glass); }
-.pn__add:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
-.pn__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
-.pn__quiet { margin: 0; font-size: 13px; color: var(--ink-faint); }
-.pn__saved { margin-left: auto; }
-.pn__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
-.pn__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--bg-deep); }
-.pn__error { margin: 0; font-size: 13.5px; color: var(--danger); }
-.pn__error:empty { display: none; }
-.pn__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 4px; }
-.pn__hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
-.pn__foot .pn__hint { flex: 1 1 240px; }
-.pn__submit {
-  min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
-  background: var(--accent); color: var(--accent-on); font: inherit; font-weight: 500; cursor: pointer;
-}
-.pn__submit:hover { background: var(--accent-lift); }
-.pn__submit:disabled { opacity: .55; cursor: default; }
-.pn__submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
-.pn__list { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
-.pn__list-h {
-  margin: 0 0 8px;
-  font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space);
-  text-transform: var(--label-case); color: var(--ink-faint); font-weight: 400;
-}
-.pn__rows, .pn__ideas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
-.pn__row {
-  display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
-  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
-}
-a.pn__row { text-decoration: none; } /* the lightbulb's page ideas are links */
-.pn__row:hover { background: var(--glass); }
-.pn__row:focus-visible, .pn__back:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
-.pn__row-meta { font-size: 12px; color: var(--ink-faint); }
-.pn__row-text { font-size: 14px; color: var(--ink-soft); }
-.pn__ideas a { display: inline-block; padding: 6px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
-.pn__back {
-  align-self: flex-start; min-height: 32px; padding: 0 12px; margin-left: -12px; border: 0;
-  border-radius: var(--radius-pill); background: none; color: var(--ink-soft); font: inherit; font-size: 13.5px; cursor: pointer;
-}
-.pn__back:hover { color: var(--ink); background: var(--glass); }
-.pn__done { margin: 0; font-size: 16px; }
-.pn-doc { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
-.pn-doc p, .pn-doc ul { margin: 0 0 12px; }
-.pn-doc__h { margin: 16px 0 6px; font-size: 16px; font-weight: 500; }
-.pn-doc__img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
-@media (max-width: 640px) {
-  .pn__head { padding: 18px 60px 12px 16px; }
-  .pn__body { padding: 14px 16px 24px; }
-}
-
 /* THE PAINTBRUSH (task 1004497, paintbrush.js): the page's own words, edited
    where they stand. Not modal: the page stays live under it, so the bar docks
    at the foot and the words carry the mode's colour as a dashed underline. A

package/modules/page-notes/db.js

@@ -52,6 +52,24 @@ async function listForPage(pageId, { limit = 20 } = {}, executor) {
   return r.rows;
 }
 
+// Every submitted doc on one surface, newest first (task 1004499: the Studio's
+// list of the public site's reviews). The surface is a fixed literal from
+// notes.js, never request input; LIKE's own wildcards cannot appear in it.
+async function listForSurface(surface, { limit = 20 } = {}, executor) {
+  const q = exec(executor);
+  const r = await q(
+    `SELECT n.id, n.page_id, n.page_path, n.page_title, n.status, n.submitted_at, n.idea_ids,
+            left(n.body_md, 400) AS excerpt,
+            COALESCE(NULLIF(b.display_name, ''), b.github_login) AS author_name
+       FROM page_notes_docs n JOIN builders b ON b.id = n.author_id
+      WHERE n.page_id LIKE $1 AND n.status <> 'draft'
+      ORDER BY n.submitted_at DESC NULLS LAST, n.id DESC
+      LIMIT $2`,
+    [`${surface}:%`, limit],
+  );
+  return r.rows;
+}
+
 async function saveBody(id, authorId, bodyMd, executor) {
   const q = exec(executor);
   const r = await q(
@@ -170,6 +188,7 @@ module.exports = {
   openDraft,
   getNote,
   listForPage,
+  listForSurface,
   saveBody,
   countImages,
   addImage,

package/modules/page-notes/migrations/page_notes_002_surface_index.sql

@@ -0,0 +1,12 @@
+-- page_notes_002_surface_index.sql — the Studio's list of the public site's
+-- reviews (task 1004499) reads every submitted doc on ONE surface, newest first:
+-- `page_id LIKE 'site:%'`. page_notes_by_page (001) is ordered by the database's
+-- collation, which a prefix LIKE cannot seek on; text_pattern_ops orders by
+-- bytes, so the prefix is an index range and the list stays a seek as the table
+-- grows. Partial on submitted docs, like page_notes_by_page: drafts are never
+-- listed.
+CREATE INDEX IF NOT EXISTS page_notes_by_surface
+  ON page_notes_docs (page_id text_pattern_ops, submitted_at DESC) WHERE status <> 'draft';
+
+INSERT INTO schema_migrations (version) VALUES ('page_notes_002_surface_index')
+  ON CONFLICT DO NOTHING;

package/modules/page-notes/notes.js

@@ -148,12 +148,31 @@ function wholeDocIdea({ pageTitle, pageId, bodyMd }) {
   return { title, body: str(bodyMd).replace(IMAGE_REF_RE, (_m, alt) => `[image${alt ? ': ' + alt : ''}]`).trim().slice(0, MAX_IDEA_BODY) };
 }
 
-// Where a doc is read: its page, opened on the doc.
+// The public site's pages (task 1004499, the Artist review button): their docs
+// are page ids on the 'site:' surface. Their page_path is a path on the PUBLIC
+// host, which a link inside the hall cannot reach (the hall is its own host on
+// the hub), so a site doc is read in the Studio, which lists them.
+const SITE_SURFACE = 'site';
+const STUDIO_PATH = '/builders/studio';
+function isSiteNote(note) { return str(note && note.page_id).startsWith(`${SITE_SURFACE}:`); }
+
+// Where a doc is read: its page, opened on the doc (a site doc: the Studio).
 function noteLink(note) {
-  const path = str(note.page_path) || '/';
+  const path = isSiteNote(note) ? STUDIO_PATH : (str(note.page_path) || '/');
   return `${path}${path.includes('?') ? '&' : '?'}note=${note.id}`;
 }
 
+// One row of the Studio's "From the live site" list (GET /page-notes/site),
+// from a listForSurface row. The one mapper, so the Studio's test renders what
+// the route answers.
+function siteListItem(r) {
+  return {
+    id: String(r.id), page_id: r.page_id, page_path: r.page_path, page_title: r.page_title, status: r.status,
+    submitted_at: r.submitted_at, idea_count: (r.idea_ids || []).length, author_name: r.author_name,
+    excerpt: r.excerpt, link: noteLink(r),
+  };
+}
+
 // The idea body: the split's words, then the way back to the full doc.
 function ideaBody(idea, note, authorName) {
   const who = str(authorName) || 'An artist';
@@ -216,5 +235,9 @@ module.exports = {
   parseSplitReply,
   wholeDocIdea,
   noteLink,
+  SITE_SURFACE,
+  STUDIO_PATH,
+  isSiteNote,
+  siteListItem,
   ideaBody,
 };

package/modules/page-notes/routes/page-notes.js

@@ -3,6 +3,7 @@
 //
 //   POST  /page-notes                     open (or resume) my draft for a page
 //   GET   /page-notes?page_id=            my draft for the page + the page's reference docs
+//   GET   /page-notes/site                the public site's reviews, for the Studio (task 1004499)
 //   GET   /page-notes/:id                 one doc, its images and the ideas it became
 //   PATCH /page-notes/:id                 save my draft's text
 //   POST  /page-notes/:id/images          add a reference image to my draft (base64 JSON)
@@ -156,6 +157,14 @@ module.exports = function buildPageNotesRouter() {
     });
   }));
 
+  // The public site's reviews (task 1004499), for the Studio's list. Mounted
+  // before /page-notes/:id so 'site' is never read as a doc id.
+  router.get('/page-notes/site', api.requireBuilder, api.asyncHandler('GET /page-notes/site', async (req, res) => {
+    const rows = await db.listForSurface(N.SITE_SURFACE, { limit: 20 });
+    res.set('Cache-Control', 'no-store');
+    res.json({ notes: rows.map(N.siteListItem) });
+  }));
+
   router.get('/page-notes/images/:id', api.requireBuilder, api.asyncHandler('GET /page-notes/images/:id', async (req, res) => {
     const id = String(req.params.id || '');
     if (!ID_RE.test(id)) return res.fail('invalid_image_id', 400);

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

@@ -624,5 +624,7 @@
   });
 })();
 </script>
+<!-- the Artist review button: signed-in builders only (task 1004499) -->
+<script src="/assets/artist-review.js" data-hall="{{buildersOrigin}}"></script>
 </body>
 </html>