@bongos/core 1.21.163 → 1.21.165

package/modules/hall-ui/public/goal-inbox.js

@@ -482,7 +482,7 @@
     }
     const shown = rows.slice(0, MAX_ROT_ROWS);
     const more = rows.length > shown.length
-      ? `<p class="ginbox__pending">…${rows.length - shown.length} more going quiet.</p>`
+      ? `<p class="ginbox__pending">…${rows.length - shown.length} more not moving.</p>`
       : '';
     // The heading names the TIMER, not just the count. A reader who disagrees with
     // the line ("30 days is too short for a backlog") needs to know which number
@@ -493,7 +493,7 @@
     const timerNote = t.invalid
       ? `<span class="ginbox__sub"> — ${escapeHtml(String(t.describe || ''))}</span>`
       : `<span class="ginbox__sub"> — untouched ${escapeHtml(String(t.rot_days ?? '?'))}+ days</span>`;
-    box.innerHTML = '<h3 class="ginbox__sec-h">Going quiet '
+    box.innerHTML = '<h3 class="ginbox__sec-h">Things not moving '
       + `<span class="count-pill">${rows.length}</span>${timerNote}</h3>`
       + `<ul class="ginbox">${shown.map(rotRowHtml).join('')}</ul>${more}`;
     window.OTBAttention?.refresh();
@@ -511,7 +511,7 @@
         // this handler swallowed it into an empty section that looked like "nothing
         // is rotting". A silent catch on the ONLY caller of a route is indistin-
         // guishable from a healthy empty state — which is the whole failure.
-        console.warn('[hall] rot feed unavailable — the "Going quiet" section is empty '
+        console.warn('[hall] rot feed unavailable — the "Things not moving" section is empty '
           + 'because the request failed, NOT because nothing is rotting:', err);
       });
   }
@@ -560,7 +560,7 @@
     const more = total > rows.length
       ? `<p class="ginbox__pending">…${total - rows.length} more — <a href="/blockers">open the queue</a>.</p>`
       : '';
-    box.innerHTML = '<h3 class="ginbox__sec-h">Stuck on the owner '
+    box.innerHTML = '<h3 class="ginbox__sec-h">Requires project owner fix '
       + `<span class="count-pill">${total}</span></h3>`
       + `<ul class="ginbox">${rows.map(blockerRowHtml).join('')}</ul>${more}`;
     window.OTBAttention?.refresh();
@@ -579,7 +579,7 @@
         if (box) box.innerHTML = '';
         window.OTBAttention?.refresh();
         if (err.code !== 'auth-needed' && err.code !== 'not-found') {
-          console.warn('[hall] blockers feed unavailable — the "Stuck on the owner" section is empty '
+          console.warn('[hall] blockers feed unavailable — the "Requires project owner fix" section is empty '
             + 'because the request failed, NOT because nothing is open:', err);
         }
       });
@@ -595,6 +595,17 @@
     host.hidden = true; // stays hidden until a slice finds something actionable
     host.innerHTML =
       '<h2 id="attention-h" class="scroll__h">Needs your attention<span class="count-pill" id="attention-count" hidden></span></h2>' +
+      // task 1004774: every slice is a CARD showing its total, and a click opens the
+      // slice itself in a window, so its buttons work exactly as they do inline.
+      // The slices still render into their divs below (kept off-screen in
+      // #attention-slices), and refresh() rebuilds the cards from what they hold.
+      '<div class="attn-cards" id="attention-cards"></div>' +
+      '<dialog class="attn-dialog" id="attention-dialog" aria-labelledby="attention-dialog-h">' +
+        '<div class="attn-dialog__head"><h3 class="attn-dialog__h" id="attention-dialog-h"></h3>' +
+        '<button type="button" class="attn-dialog__x" id="attention-dialog-x" aria-label="Close">×</button></div>' +
+        '<div class="attn-dialog__body" id="attention-dialog-body"></div>' +
+      '</dialog>' +
+      '<div id="attention-slices" hidden>' +
       // task 1003464: the system's own notices — rebase owed, an input the
       // system needs, the monthly budget — used to stack as banners INSIDE the
       // Standing card. They are lines here now (rendered by hall-render.js
@@ -639,8 +650,10 @@
       // the card on purpose: every slice above is somebody waiting on YOU right
       // now, while rot is a standing question that has already waited weeks and
       // can wait until they are read.
-      '<div id="attention-rot"></div>';
+      '<div id="attention-rot"></div>' +
+      '</div>';
     host.addEventListener('click', onClick);
+    wireCards();
     load();
     loadNodQueue();
     loadRemovals();
@@ -651,6 +664,83 @@
     window.OTBProfileNudge?.load();
   }
 
+  // ---- the cards + the window (task 1004774) --------------------------------
+  //
+  // Each slice div is one card. The card reads its title from the slice's own
+  // heading and its total from the heading's count pill (the server total, which
+  // can exceed the rows shown) or, failing that, the rows. Opening a card MOVES
+  // the slice div into the dialog — the dialog sits inside `host`, so the
+  // delegated click handler above still sees every button — and closing moves it
+  // back to where it came from.
+  const ITEM_SEL = '.ginbox__item, .triage-inbox__item';
+  let openSlice = null;
+
+  function sliceFacts(div) {
+    const h = div.querySelector('h3, .ginbox__sec-h, h4');
+    let title = '';
+    if (h) {
+      const copy = h.cloneNode(true);
+      copy.querySelectorAll('.count-pill, .ginbox__sub').forEach((n) => n.remove());
+      title = copy.textContent.replace(/\s+/g, ' ').trim();
+    }
+    const pill = h && h.querySelector('.count-pill');
+    const pillN = pill ? parseInt(pill.textContent, 10) : NaN;
+    const rows = div.querySelectorAll(ITEM_SEL).length;
+    const total = Number.isFinite(pillN) ? pillN : rows;
+    const sub = h && h.querySelector('.ginbox__sub');
+    return { title: title || 'Needs attention', total, rows, note: sub ? sub.textContent.replace(/^\s*—\s*/, '').trim() : '' };
+  }
+
+  function renderCards() {
+    const cards = host && host.querySelector('#attention-cards');
+    const slices = host && host.querySelector('#attention-slices');
+    if (!cards || !slices) return;
+    const html = [];
+    for (const div of slices.children) {
+      if (!div.id || !div.innerHTML.trim()) continue;
+      const f = sliceFacts(div);
+      if (!f.rows && !div.querySelector('.ginbox__pending')) continue;
+      html.push(`<button type="button" class="attn-card" data-attn-open="${escapeHtml(div.id)}">`
+        + `<span class="attn-card__n">${escapeHtml(String(f.total))}</span>`
+        + `<span class="attn-card__t">${escapeHtml(f.title)}</span>`
+        + (f.note ? `<span class="attn-card__s">${escapeHtml(f.note)}</span>` : '')
+        + '</button>');
+    }
+    cards.innerHTML = html.join('');
+  }
+
+  function openCard(id) {
+    const dlg = host.querySelector('#attention-dialog');
+    const div = host.querySelector(`#attention-slices > #${CSS.escape(id)}`);
+    if (!dlg || !div) return;
+    host.querySelector('#attention-dialog-h').textContent = sliceFacts(div).title;
+    host.querySelector('#attention-dialog-body').appendChild(div);
+    openSlice = div;
+    if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open', '');
+  }
+
+  function closeCard() {
+    const dlg = host && host.querySelector('#attention-dialog');
+    if (openSlice) {
+      host.querySelector('#attention-slices').appendChild(openSlice);
+      openSlice = null;
+    }
+    if (dlg && dlg.open && typeof dlg.close === 'function') dlg.close();
+    renderCards();
+  }
+
+  function wireCards() {
+    host.addEventListener('click', (e) => {
+      const card = e.target.closest('[data-attn-open]');
+      if (card) { openCard(card.getAttribute('data-attn-open')); return; }
+      if (e.target.closest('#attention-dialog-x')) { closeCard(); return; }
+      // a click on the backdrop lands on the <dialog> itself
+      if (e.target.id === 'attention-dialog') closeCard();
+    });
+    const dlg = host.querySelector('#attention-dialog');
+    if (dlg) dlg.addEventListener('close', () => { if (openSlice) closeCard(); });
+  }
+
   // The card's shared visibility contract: any slice renderer calls refresh()
   // after painting; the card shows iff any slice has actionable rows, and the
   // headline pill is the cross-slice total.
@@ -658,11 +748,14 @@
     refresh() {
       const sec = document.getElementById('attention-scroll');
       if (!sec) return;
-      const n = sec.querySelectorAll('.ginbox__item, .triage-inbox__item').length;
+      const n = sec.querySelectorAll(ITEM_SEL).length;
       const pending = sec.querySelector('.ginbox__pending');
       const pill = document.getElementById('attention-count');
       if (pill) { pill.hidden = !n; pill.textContent = String(n); }
       sec.hidden = n === 0 && !pending;
+      // An open window keeps its slice; the card behind it is redrawn on close.
+      if (!openSlice) renderCards();
+      else if (!openSlice.querySelector(ITEM_SEL)) closeCard();
     },
   };
 

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

@@ -92,7 +92,7 @@
   }
 
   // task 2184 (Home rule: a summary card never lists more than 5 rows): cap the
-  // joined-goals list; the overflow count rides the "All goals" foot link.
+  // joined-goals list. The foot is one "Browse goals" link (owner, task 1004774).
   const MAX_HOME_ROWS = 5;
   function render(joined, counts) {
     const body = host.querySelector('#goals-body');
@@ -101,14 +101,12 @@
       return;
     }
     const shown = joined.slice(0, MAX_HOME_ROWS);
-    const more = joined.length - shown.length;
     body.innerHTML = `<ul class="goal-mine-list">${shown.map((d) => row(d, counts)).join('')}</ul>` +
-      `<p class="goal-mine__foot card-foot"><a href="/goals">${more > 0 ? `All ${joined.length} goals →` : 'All goals →'}</a></p>`;
+      `<p class="goal-mine__foot card-foot"><a href="/goals">Browse goals →</a></p>`;
   }
 
   const SKELETON =
     '<h2 id="goals-h" class="scroll__h">Goals</h2>' +
-    '<p class="scroll__lede">The open goals you’ve joined, and the work you can claim in each. Browse, join, and leave goals — and read their criteria — on the <a href="/goals">Goals page</a>.</p>' +
     '<div id="goals-body"><div class="profile__placeholder">Loading your goals…</div></div>';
 
   async function load() {

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

@@ -638,15 +638,25 @@
           </div>
           <span class="home-who__rank">${builder.rank ? renderRankBadge(normalizeRank(builder.rank), { tip: false }) : ''}</span>
         </div>
-        <dl class="home-facts">
-          <div><dt>${escapeHtml(curLabel(true))}</dt><dd>${fmtNum(builder.total_credits)}</dd></div>
-          <div><dt>On the board</dt><dd>${place}</dd></div>
-          <div><dt>Preferred work</dt><dd>${prefs.length ? escapeHtml(prefs.join(', ')) : PREFS_EMPTY}</dd></div>
-        </dl>
+        <div class="hall-standing__more">
+          <dl class="home-facts home-facts--grid">
+            <div><dt>${escapeHtml(curLabel(true))}</dt><dd>${fmtNum(builder.total_credits)}</dd></div>
+            <div><dt>Karma</dt><dd>${fmtNum(karmaTotal)}</dd></div>
+            <div><dt>Shipped</dt><dd id="standing-shipped">${escapeHtml((document.getElementById('stat-shipped') || {}).textContent || '—')}</dd></div>
+            <div><dt>Leaderboard place</dt><dd>${place}</dd></div>
+          </dl>
+          <dl class="home-facts">
+            <div><dt>Preferred work</dt><dd>${prefs.length ? escapeHtml(prefs.join(', ')) : PREFS_EMPTY}</dd></div>
+          </dl>
+          ${builder.id != null ? `<p class="card-foot"><a href="/profile?id=${encodeURIComponent(builder.id)}">View full profile →</a></p>` : ''}
+        </div>
       `;
     }
-    const homeStandingSection = document.getElementById('home-standing');
-    if (homeStandingSection && !ctx.newcomerGated) homeStandingSection.hidden = false;
+    // task 1004774: Standing is the page-head chip now, not a Home card. The
+    // who-line above IS the chip: at rest it shows the avatar and rank, and on
+    // hover it widens left to show the name while .hall-standing__more drops down.
+    const standingChip = document.getElementById('hall-standing');
+    if (standingChip && !ctx.newcomerGated) standingChip.hidden = false;
     renderSystemNotices({ rebaseTasks, need, actionNeeds, cost });
   }
 
@@ -724,6 +734,22 @@
     return rows.filter((r) => r && r.status === 'building')
       .sort((a, b) => (Number(b.total_count) || 0) - (Number(a.total_count) || 0))[0] || null;
   }
+  // task 1004774: the version tab under the Home banner — the same version the
+  // sub-line names, drawn as a bar. Hidden while no version is being built.
+  function renderVersionTab(v) {
+    const tab = document.getElementById('home-version');
+    if (!tab) return;
+    if (!v) { tab.hidden = true; return; }
+    const pct = Math.max(0, Math.min(100, Math.round(Number(v.percent_complete) || 0)));
+    const name = document.getElementById('home-version-name');
+    const fill = document.getElementById('home-version-fill');
+    const pctEl = document.getElementById('home-version-pct');
+    if (name) name.textContent = v.version_id;
+    if (fill) fill.style.width = `${pct}%`;
+    if (pctEl) pctEl.textContent = `${pct}% complete`;
+    tab.setAttribute('aria-label', `${v.version_id} is ${pct} percent complete`);
+    tab.hidden = false;
+  }
   function renderGreeting() {
     const h1 = document.getElementById('hall-h1');
     const sub = document.getElementById('hall-sub');
@@ -731,10 +757,11 @@
     if (h1 && builder) {
       h1.textContent = `${greetingWord(new Date().getHours())}, ${builder.display_name || builder.github_login || 'builder'}`;
     }
+    const v = currentVersion(ctx.lastProgressState);
+    renderVersionTab(v);
     if (!sub) return;
     const parts = [];
-    const v = currentVersion(ctx.lastProgressState);
-    if (v) parts.push(`${v.version_id} is ${Math.round(Number(v.percent_complete) || 0)} percent shipped.`);
+    if (v) parts.push(`${v.version_id} is ${Math.round(Number(v.percent_complete) || 0)} percent complete.`);
     const n = ctx.lastClaimableCount;
     if (typeof n === 'number') {
       if (n === 0) parts.push('Nothing is claimable right now.');
@@ -1036,6 +1063,9 @@
     // 5-row recent-work table are fed from the same feed. Guarded writes.
     const statShipped = document.getElementById('stat-shipped');
     if (statShipped) statShipped.textContent = fmtNum(shipState.all.length);
+    // task 1004774: the Standing hover card carries the same count.
+    const standingShipped = document.getElementById('standing-shipped');
+    if (standingShipped) standingShipped.textContent = fmtNum(shipState.all.length);
     const homeRecent = document.querySelector('#home-recent-table tbody');
     if (homeRecent) {
       const latest = sortShips(shipState.all, 'recent').slice(0, 5);

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

@@ -75,16 +75,20 @@
       '<a class="stat-tile" href="#standing"><span class="stat-tile__label">Shipped</span><span class="stat-tile__num" id="stat-shipped">—</span><span class="stat-tile__sub" id="stat-shipped-sub"></span></a>' +
       '<a class="stat-tile" href="#standing"><span class="stat-tile__label">Karma</span><span class="stat-tile__num" id="stat-karma">—</span><span class="stat-tile__sub" id="stat-karma-sub"></span></a>' +
       '<a class="stat-tile" href="/ranks"><span class="stat-tile__label">Rank</span><span class="stat-tile__num stat-tile__num--badge" id="stat-rank">—</span><span class="stat-tile__sub" id="stat-rank-sub"></span></a>' +
-    '</div>',
+    '</div>' +
+    // task 1004774: the version tab under the banner — how far the version being
+    // built has come. hall-render.js renderGreeting fills it from the same
+    // progress read as the greeting's sub-line; hidden until there is a version.
+    '<a class="version-tab" id="home-version" href="/roadmap" hidden>' +
+      '<span class="version-tab__name" id="home-version-name"></span>' +
+      '<span class="version-tab__bar" aria-hidden="true"><span class="version-tab__fill" id="home-version-fill"></span></span>' +
+      '<span class="version-tab__pct" id="home-version-pct"></span>' +
+    '</a>',
     { view: 'home', zone: 'home-stats', sectionClass: 'scroll scroll--bare', labelledby: 'home-stats-h', hiddenByDefault: true });
 
-  // 0d. Standing summary card — left half of the Home band (task 1723). Filled by
-  // builders.js renderProfile from the same /me payload as the full Standing view.
-  w('home-standing', 'Standing', 18,
-    '<h2 id="home-standing-h" class="scroll__h">Standing</h2>' +
-    '<div id="home-standing-body"><div class="profile__placeholder">…</div></div>' +
-    '<p class="card-foot"><a href="#standing">See your Full Account. →</a></p>',
-    { view: 'home', zone: 'home-band', labelledby: 'home-standing-h', hiddenByDefault: true });
+  // (task 1004774: the Standing summary is no longer a Home card. It is the
+  // chip at the top right of the page head — index.html #hall-standing — whose
+  // hover card holds #home-standing-body, filled by hall-render.js renderProfile.)
 
   // (Goals — goals.js registers itself into the other half of the Home band.)
 
@@ -99,15 +103,21 @@
   // gated or empty), then the 5-row recent-ships table below it.
   w('home-recent', 'Your work', 28,
     '<h2 id="home-recent-h" class="scroll__h">Your work</h2>' +
-    '<div id="home-next" hidden>' +
+    // task 1004774: Next up and Recently shipped sit side by side (stacking
+    // again on a phone); when Next up is hidden, shipped takes the full width.
+    '<div class="home-split">' +
+    '<div class="home-split__col" id="home-next" hidden>' +
       '<h3 class="ginbox__sec-h">Next up — ready to claim</h3>' +
       '<ul class="next-up" id="home-next-list"></ul>' +
       '<p class="next-up__foot"><a href="/work" id="home-next-foot">See all ready work →</a></p>' +
     '</div>' +
+    '<div class="home-split__col">' +
     '<h3 class="ginbox__sec-h" id="home-recent-subh" hidden>Recently shipped</h3>' +
     '<table class="ledger" id="home-recent-table"><thead><tr><th>№</th><th>Work</th><th data-currency-label="caps">Credits</th><th>Shipped</th></tr></thead>' +
     '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>' +
-    '<p class="card-foot"><a href="#standing">All your work →</a></p>',
+    '<p class="card-foot"><a href="#standing">All your work →</a></p>' +
+    '</div>' +
+    '</div>',
     { view: 'home', zone: 'home-main', labelledby: 'home-recent-h', hiddenByDefault: true });
 
   // 0f. The founding wall (task 1004424) — everyone who joined while the project was

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

@@ -48,6 +48,13 @@
       <div class="page-head page-head--board page-head--hall">
         <h1 id="hall-h1" class="page-head__h">Builders' Hall</h1>
         <p id="hall-sub" class="page-head__sub" hidden></p>
+        <!-- task 1004774: Standing left the Home band for this chip. At rest it
+             shows the avatar and rank. On hover or keyboard focus the chip itself
+             widens to the left into the top of the card, and only the facts below
+             drop down (#home-standing-body, filled by hall-render.js renderProfile). -->
+        <div class="hall-standing" id="hall-standing" hidden tabindex="0" aria-label="Your standing">
+          <div class="hall-standing__card" id="home-standing-body"></div>
+        </div>
       </div>
 
       <!-- BV1.R75 (ADR 0062 §4): hall widgets are NOT hardcoded here. Every widget

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

@@ -16,7 +16,9 @@
   --pn-glass: var(--glass, rgba(255, 255, 255, .08));
 }
 
-/* The page feedback doc: a sheet from the right over a scrim. */
+/* A sheet from the right over a scrim: the lightbulb's panel (lightbulb.js), and
+   the feedback doc wherever it is OPENED rather than docked (the public site's
+   Artist review button, artist-review.js). */
 html.pn-open { overflow: hidden; }
 .pn {
   position: fixed;
@@ -26,6 +28,67 @@ html.pn-open { overflow: hidden; }
   justify-content: flex-end;
   background: var(--pn-scrim);
 }
+/* The page feedback doc (.pn--dock, task 1004771): docked on the right with no
+   scrim and no scroll lock, so the reviewer keeps scrolling the page while
+   writing about it. A small tab on its left edge slides it away and back
+   (.pn--collapsed). */
+.pn.pn--dock {
+  inset: 0 0 0 auto;
+  display: block;
+  width: min(560px, calc(100% - 36px));
+  background: none;
+  transition: transform .25s ease;
+}
+.pn--collapsed { transform: translateX(100%); }
+/* Tucked away, the panel's controls leave the tab order once it has slid out. */
+.pn--collapsed .pn__panel { visibility: hidden; transition: visibility 0s .25s; }
+@media (prefers-reduced-motion: reduce) { .pn.pn--dock { transition: none; } }
+.pn__tab {
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-direction: column; gap: 10px;
+  width: 36px; height: 96px; padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
+  background: var(--bg-card);
+  color: var(--craft, var(--ink));
+  box-shadow: 0 0 0 1px var(--craft, var(--rule)), var(--pn-shadow-pop);
+  cursor: pointer;
+}
+.pn__tab:hover { background: var(--pn-glass); }
+.pn__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__tab-icon { width: 18px; height: 18px; }
+.pn__tab-chev { width: 12px; height: 12px; transition: transform .25s ease; }
+.pn--collapsed .pn__tab-chev { transform: rotate(180deg); }
+@media (prefers-reduced-motion: reduce) { .pn__tab-chev { transition: none; } }
+/* The Review mode row: which experience the hall wears while reviewed. */
+.pn__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
+.pn__modes-h {
+  width: 100%;
+  font-family: var(--label-face);
+  font-size: 11px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.pn__mode {
+  display: inline-flex; align-items: center; gap: 6px;
+  min-height: 30px; padding: 0 12px;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-pill);
+  background: none;
+  color: var(--ink-soft);
+  font: inherit; font-size: 13px;
+  cursor: pointer;
+}
+.pn__mode:hover { color: var(--ink); background: var(--pn-glass); }
+.pn__mode[aria-pressed="true"] { color: var(--ink); border-color: var(--craft, var(--ink)); background: var(--pn-glass); }
+.pn__mode:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__mode-icon { width: 14px; height: 14px; }
+.pn__mode--stop { border-style: dashed; }
 .pn__panel {
   position: relative;
   width: min(560px, 100%);

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

@@ -19,7 +19,7 @@
   var MAX_IMAGES = 8;
   var TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
 
-  var sheet = null, returnFocus = null, state = null, saveTimer = null, pollTimer = null;
+  var sheet = null, returnFocus = null, state = null, saveTimer = null, pollTimer = null, docked = false;
 
   function esc(s) {
     return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
@@ -101,11 +101,45 @@
   }
 
   // ---------- the sheet ----------
+  // The tab wears the Review button's own palette glyph (craft-mode.js ICONS
+  // artistry), drawn here too because the public site has no craft-mode.js.
+  var PALETTE_SVG = '<svg class="pn__tab-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M8 2a6 6 0 1 0 0 12c.9 0 1.4-.6 1.4-1.3 0-.8-.6-1-.6-1.7 0-.6.5-1 1.2-1h1.6A2.4 2.4 0 0 0 14 7.6C14 4.5 11.3 2 8 2Z"/><path d="M5 6.2h.01M7.6 4.6h.01M10.4 5.2h.01M4.6 9h.01" stroke-width="2.2"/></svg>';
+  // The Review mode row: which experience the hall wears while the artist
+  // reviews it (craft-mode.js review mode). Hall only: the public site has no
+  // modes, so it draws nothing there.
+  function craft() { var c = window.OTBCraftMode; return c && c.experiences && c.review ? c : null; }
+  function modesHtml() {
+    var c = craft();
+    if (!c) return '';
+    var on = c.reviewing();
+    return '<div class="pn__modes" role="group" aria-label="Review mode">' +
+      '<span class="pn__modes-h">Review mode</span>' +
+      c.experiences().map(function (x) {
+        return '<button class="pn__mode" type="button" data-pn-mode="' + esc(x.id) + '" aria-pressed="' + (on === x.id ? 'true' : 'false') + '">' +
+          c.iconHtml(x.id, 'pn__mode-icon') + '<span>' + esc(x.short) + '</span></button>';
+      }).join('') +
+      (on ? '<button class="pn__mode pn__mode--stop" type="button" data-pn-mode="">Stop reviewing</button>' : '') +
+    '</div>';
+  }
+  function paintModes() {
+    var row = sheet && sheet.querySelector('#pn-modes');
+    if (row) row.innerHTML = modesHtml();
+  }
+  // Two shapes. Docked (dock(), the hall's artist mode, task 1004771): a
+  // non-modal region at the right edge behind a tab. Opened (open(), e.g. the
+  // public site's Artist review button): the modal sheet over a scrim it was.
   function shellHtml(p) {
-    return '<div class="pn__panel" role="dialog" aria-modal="true" aria-labelledby="pn-title">' +
+    return (docked
+      ? '<button class="pn__tab" type="button" data-pn-tab aria-expanded="true" aria-controls="pn-panel" aria-label="Hide the review panel">' +
+          PALETTE_SVG +
+          '<svg class="pn__tab-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg></button>' +
+        '<div class="pn__panel" id="pn-panel" role="region" aria-labelledby="pn-title">'
+      : '<div class="pn__panel" role="dialog" aria-modal="true" aria-labelledby="pn-title">') +
       '<div class="pn__head">' +
         '<p class="pn__eyebrow">Artist review · ' + esc(p.title) + '</p>' +
         '<h2 class="pn__title" id="pn-title">What should this page be?</h2>' +
+        '<div id="pn-modes">' + modesHtml() + '</div>' +
         '<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>' +
       '</div>' +
@@ -285,10 +319,18 @@
   }
 
   function onClick(e) {
-    if (e.target === sheet) { close(); return; }
+    if (!docked && e.target === sheet) { close(); return; }
     var btn = e.target.closest && e.target.closest('button');
     if (!btn) return;
-    if (btn.hasAttribute('data-pn-close')) close();
+    if (btn.hasAttribute('data-pn-tab')) toggle();
+    else if (btn.hasAttribute('data-pn-mode')) {
+      var c = craft(), id = btn.getAttribute('data-pn-mode');
+      if (c) { if (id) c.review(id); else c.stopReview(); }
+      paintModes();
+    }
+    // Docked, the X tucks the panel away like Escape: removing it would take
+    // the tab, the reviewer's only way back in, with it.
+    else if (btn.hasAttribute('data-pn-close')) { if (docked) toggle(true); else close(); }
     else if (btn.hasAttribute('data-pn-submit')) submit();
     else if (btn.hasAttribute('data-pn-note')) showNote(btn.getAttribute('data-pn-note'));
     else if (btn.hasAttribute('data-pn-back') || btn.hasAttribute('data-pn-new')) {
@@ -298,6 +340,13 @@
   }
   function onKey(e) {
     if (!sheet) return;
+    // Docked, the panel is not modal: the page behind it stays scrollable and
+    // reachable, and Escape inside it tucks it away behind its tab, draft kept.
+    if (docked) {
+      if (e.key === 'Escape' && sheet.contains(document.activeElement)) { e.preventDefault(); toggle(true); }
+      return;
+    }
+    // Opened, it is the modal sheet: Escape closes it, Tab stays inside it.
     if (e.key === 'Escape') { e.preventDefault(); close(); return; }
     if (e.key !== 'Tab') return;
     var f = Array.prototype.slice.call(sheet.querySelectorAll('button, textarea, input, a[href]')).filter(function (x) { return !x.disabled; });
@@ -305,20 +354,46 @@
     if (e.shiftKey && document.activeElement === f[0]) { e.preventDefault(); f[f.length - 1].focus(); }
     else if (!e.shiftKey && document.activeElement === f[f.length - 1]) { e.preventDefault(); f[0].focus(); }
   }
-  function mountSheet() {
+  // Slide the panel off the right edge, leaving only its tab, or bring it back.
+  // `quiet` (docking) moves no focus. A docked panel opens its draft only
+  // the first time it is shown, so artist mode costs no request until then.
+  function toggle(collapse, quiet) {
+    if (!sheet) return;
+    var on = typeof collapse === 'boolean' ? collapse : !sheet.classList.contains('pn--collapsed');
+    sheet.classList.toggle('pn--collapsed', on);
+    var tab = sheet.querySelector('[data-pn-tab]');
+    if (tab) {
+      tab.setAttribute('aria-expanded', on ? 'false' : 'true');
+      tab.setAttribute('aria-label', on ? 'Show the review panel' : 'Hide the review panel');
+      if (on && !quiet) tab.focus();
+    }
+    if (on) save();
+    else if (state.pending) { state.pending = false; openDraft(); }
+  }
+  // `dock` mounts the docked shape quietly (no focus moved); otherwise the modal sheet.
+  function mountSheet(dock) {
     if (sheet) return false;
-    returnFocus = document.activeElement;
+    docked = !!dock;
+    returnFocus = docked ? null : document.activeElement;
     state = { note: null, images: [], list: [] };
     sheet = document.createElement('div');
-    sheet.className = 'pn';
+    sheet.className = docked ? 'pn pn--dock' : 'pn';
     sheet.id = 'page-notes';
     sheet.innerHTML = shellHtml(page());
     sheet.addEventListener('click', onClick);
+    if (docked) {
+      // A mouse peeks (owner, 2026-10-23): over the tab the panel opens, and the
+      // moment the pointer leaves the panel it tucks away again, draft kept.
+      // Touch and keyboard keep the tab's click, which a hover cannot replace.
+      sheet.querySelector('[data-pn-tab]').addEventListener('pointerenter', function (e) { if (e.pointerType === 'mouse') toggle(false, true); });
+      sheet.addEventListener('pointerleave', function (e) { if (e.pointerType === 'mouse') toggle(true, true); });
+    } else {
+      document.documentElement.classList.add('pn-open');
+    }
     document.addEventListener('keydown', onKey, true);
     document.body.appendChild(sheet);
-    document.documentElement.classList.add('pn-open');
     var c = sheet.querySelector('[data-pn-close]');
-    if (c) c.focus();
+    if (c && !docked) c.focus();
     return true;
   }
   function close() {
@@ -328,14 +403,24 @@
     document.removeEventListener('keydown', onKey, true);
     if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
     sheet = null;
+    docked = false;
     document.documentElement.classList.remove('pn-open');
     if (returnFocus && returnFocus.focus) { try { returnFocus.focus(); } catch (_) { /* gone */ } }
     returnFocus = null;
   }
 
   window.OTBPageNotes = {
-    open: function () { if (mountSheet()) openDraft(); },
-    openNote: function (id) { if (mountSheet()) refreshList().then(function () { return showNote(id); }); },
+    open: function () { if (mountSheet()) openDraft(); else if (docked) toggle(false); },
+    // Artist mode (craft-mode.js, task 1004771): the panel waits at the right
+    // edge, tucked behind its tab; already there, it repaints its mode row.
+    dock: function () {
+      if (mountSheet(true)) { state.pending = true; toggle(true, true); }
+      else paintModes();
+    },
+    openNote: function (id) {
+      if (!mountSheet() && docked) { state.pending = false; toggle(false); }
+      refreshList().then(function () { return showNote(id); });
+    },
     close: close,
     configure: configure,
     ideaHref: ideaHref,