@bongos/core 1.23.22 → 1.24.1

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

@@ -0,0 +1,146 @@
+// modules/hall-ui/public/notes-panel.js — the Notes panel on a task or goal page
+// (task 1004745, goal 1000095).
+//
+// Notes are information that helps scope a task or goal or helps finish it. They are
+// shown GROUPED BY PURPOSE (scope, decisions, open questions, risks, progress, links)
+// with the newest few open in each group and the rest folded behind "Show more", so a
+// long history stays scannable instead of becoming one endless list. The grouping is
+// the server's (GET /notes); this file only draws it and posts new notes.
+//
+//   OTBNotes.mount(element, { task_id: 12 })   // or { goal_id: 3 }
+//
+// Dependency-free apart from window.BongosClient and window.OTB.escapeHtml, so both
+// the task page and the goals page can load it.
+
+(function () {
+  'use strict';
+
+  const API = '/api/bongos';
+  const esc = (s) => window.OTB.escapeHtml(s == null ? '' : String(s));
+  const client = () => window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+
+  // A builder's words are quoted data: a long dash inside them is normalised the way the
+  // public feed does (cleanTitle, goal-inbox.js), then escaped.
+  const clean = (raw) => esc(String(raw == null ? '' : raw).replace(/\s*[—–]\s*/g, ', ').replace(/,\s*,/g, ',').trim());
+
+  function rel(iso) {
+    if (!iso) return '';
+    const sec = (Date.now() - new Date(iso).getTime()) / 1000;
+    if (sec < 3600) return Math.max(1, Math.floor(sec / 60)) + 'm ago';
+    if (sec < 86400) return Math.floor(sec / 3600) + 'h ago';
+    return Math.floor(sec / 86400) + 'd ago';
+  }
+
+  function noteHtml(n, kinds) {
+    const who = n.author_name || n.author_login || 'Someone';
+    const moves = kinds
+      .filter((k) => k.key !== n.kind)
+      .map((k) => `<option value="${esc(k.key)}">${esc(k.label)}</option>`).join('');
+    return `
+      <li class="np-note" data-note="${esc(n.id)}">
+        <p class="np-note__body">${clean(n.body)}</p>
+        <p class="np-note__meta">
+          <span>${esc(who)} · ${esc(rel(n.created_at))}${n.kind_source === 'auto' ? ' · sorted automatically' : ''}</span>
+          <label class="np-move">Move to
+            <select data-move="${esc(n.id)}" aria-label="Move this note to another group"><option value="">…</option>${moves}</select>
+          </label>
+          <button type="button" class="np-link" data-del="${esc(n.id)}">Delete</button>
+        </p>
+      </li>`;
+  }
+
+  function groupHtml(g, kinds, expanded) {
+    const shown = expanded.has(g.kind) ? g.open.concat(g.folded) : g.open;
+    const more = expanded.has(g.kind) || !g.folded.length
+      ? ''
+      : `<button type="button" class="np-link" data-more="${esc(g.kind)}">Show ${esc(g.folded.length)} more</button>`;
+    return `
+      <section class="np-group" data-kind="${esc(g.kind)}">
+        <h3 class="np-group__h">${esc(g.label)} <span class="np-count">${esc(g.count)}</span>
+          <span class="np-group__hint">${esc(g.hint)}</span></h3>
+        <ul class="np-list">${shown.map((n) => noteHtml(n, kinds)).join('')}</ul>
+        ${more}
+      </section>`;
+  }
+
+  function formHtml(kinds) {
+    const opts = kinds.map((k) => `<option value="${esc(k.key)}">${esc(k.label)}</option>`).join('');
+    return `
+      <form class="np-form" autocomplete="off">
+        <label class="np-field"><span>What would help someone scope this or finish it?</span>
+          <textarea name="body" rows="3" maxlength="4000" required
+            placeholder="The mobile layout can wait until the desktop one ships."></textarea>
+        </label>
+        <div class="np-actions">
+          <label class="np-field np-field--inline"><span>Group</span>
+            <select name="kind"><option value="">Sort it for me</option>${opts}</select>
+          </label>
+          <button type="submit" class="td-btn">Add note</button>
+        </div>
+      </form>`;
+  }
+
+  async function mount(el, subject) {
+    if (!el || !subject) return;
+    const qs = subject.task_id != null ? `task_id=${encodeURIComponent(subject.task_id)}` : `goal_id=${encodeURIComponent(subject.goal_id)}`;
+    // Mounting again on the same element (the goals page reuses one slot across goals)
+    // must not stack a second set of listeners: the previous set is dropped first.
+    if (el.npAbort) el.npAbort.abort();
+    const ctl = new AbortController();
+    el.npAbort = ctl;
+    const on = (type, fn) => el.addEventListener(type, fn, { signal: ctl.signal });
+    const expanded = new Set();
+    let data = null;
+
+    async function load() {
+      const res = await client().request('GET', `${API}/notes?${qs}`);
+      data = res.ok ? res.data : null;
+    }
+
+    function draw() {
+      if (!data) { el.innerHTML = '<p class="np-empty">Notes could not be loaded.</p>'; return; }
+      const body = data.groups.length
+        ? data.groups.map((g) => groupHtml(g, data.kinds, expanded)).join('')
+        : '<p class="np-empty">No notes yet. Add what helps scope this or get it done.</p>';
+      el.innerHTML = `<div class="np">${body}${formHtml(data.kinds)}</div>`;
+    }
+
+    // A read that lands after the panel was re-mounted for another task or goal is
+    // dropped, so one subject's notes never paint over the next one's.
+    async function refresh() { await load(); if (!ctl.signal.aborted) draw(); }
+
+    on('click', async (ev) => {
+      const t = ev.target;
+      if (!(t instanceof Element)) return;
+      if (t.dataset.more) { expanded.add(t.dataset.more); draw(); return; }
+      if (t.dataset.del) {
+        const res = await client().request('DELETE', `${API}/notes/${encodeURIComponent(t.dataset.del)}`);
+        if (res.status === 403) window.OTB.toast('Only the author or a Metic+ can delete that note.');
+        await refresh();
+      }
+    });
+    on('change', async (ev) => {
+      const t = ev.target;
+      if (!(t instanceof HTMLSelectElement) || !t.dataset.move || !t.value) return;
+      const res = await client().request('PATCH', `${API}/notes/${encodeURIComponent(t.dataset.move)}`, { body: { kind: t.value } });
+      if (res.status === 403) window.OTB.toast('Only the author or a Metic+ can move that note.');
+      await refresh();
+    });
+    on('submit', async (ev) => {
+      ev.preventDefault();
+      const form = ev.target;
+      if (!(form instanceof HTMLFormElement)) return;
+      const text = form.elements.body.value.trim();
+      if (!text) return;
+      const body = Object.assign({ body: text }, subject);
+      if (form.elements.kind.value) body.kind = form.elements.kind.value;
+      const res = await client().request('POST', `${API}/notes`, { body });
+      if (!res.ok) { window.OTB.toast('That note could not be added.'); return; }
+      await refresh();
+    });
+
+    await refresh();
+  }
+
+  window.OTBNotes = { mount };
+})();

package/modules/hall-ui/public/project-settings.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Project settings — {{worldName}}</title>
-  <meta name="description" content="The fundamentals of this project in one place — how tasks ship, the stale timer, the category set, how credits are calculated, whether equity is real, and what share of upmarket revenue is paid on credits.">
+  <meta name="description" content="The fundamentals of this project in one place — how tasks ship, the stale timer, the category set, how credits are calculated, why credits are not equity, and whether a credit-weighted pool can pay out.">
   <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

package/modules/hall-ui/public/project-settings.js

@@ -3,8 +3,8 @@
 //
 // WHAT THIS PAGE IS FOR. Goal 1000072's thesis: the project is legible to Claude and
 // illegible to a person. Answering "how long before work is called stale", "what
-// categories do we use", "how is a credit calculated", "is equity real" or "what
-// share of upmarket is paid on credits" each meant reading source. This page is the
+// categories do we use", "how is a credit calculated", "are credits equity" or "can
+// a credit-weighted pool pay out" each meant reading source. This page is the
 // translation layer — it invents no value and stores nothing of its own.
 //
 // THE RULE THAT SHAPES EVERY ROW: the SERVER decides what each row says and where it
@@ -14,9 +14,10 @@
 // describes, one release later and on the screen the owner trusts most.
 //
 // A ROW THE READER CANNOT TYPE INTO MUST LOOK UNWRITABLE AND SAY WHY. Three of the
-// five are read-only, and two of those are read-only for different reasons — equity
-// is a settled owner decision that it is not real, upmarket is a knob that does not
-// exist yet. Both render as themselves rather than as a plausible zero.
+// five are read-only, and two of those are read-only for different reasons — credits
+// are a settled owner decision that they are not equity (ADR 0387), and the
+// credit-weighted pool is a pay type gated shut (ADR 0385). Both render as themselves
+// rather than as a plausible zero.
 (() => {
   'use strict';
 
@@ -69,6 +70,7 @@
     'read-only': ['ps-pill--readonly', 'committed config'],
     'not-yet-real': ['ps-pill--readonly', 'not yet real'],
     absent: ['ps-pill--absent', 'not configured'],
+    gated: ['ps-pill--absent', 'not available (gated)'],
     unavailable: ['ps-pill--absent', 'unavailable'],
   };
 

package/modules/hall-ui/public/settings-ai-keys.js

@@ -0,0 +1,124 @@
+// modules/hall-ui/public/settings-ai-keys.js — the "Your AI keys" panel on
+// /builders/settings (task 1004919, goal 1000136, ADR 0392). A builder links
+// their own OpenRouter or Gemini key here so AI studio generations run on their
+// account and cost them nothing with us. The ONLY place a key is ever typed.
+//
+// Write-only: save, replace, remove. The server never sends a key back, only
+// its last four characters, so once saved the full key is gone from the page.
+// The panel stays hidden when the AI studio is not switched on (the read 404s).
+(() => {
+  'use strict';
+
+  const API = '/api/bongos';
+  const { escapeHtml, $, fmtDate } = window.OTB;
+  const toast = (msg) => window.OTB.toast(msg);
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const toAuth = () => window.location.assign(`${API}/auth/web/start`);
+
+  let storageConfigured = true;
+
+  function entryHtml(k) {
+    return `<div class="artkey-entry-row">
+      <input type="password" class="artkey-input aikeys-input" autocomplete="off" spellcheck="false"
+        aria-label="Your ${escapeHtml(k.label)} key" placeholder="Paste your ${escapeHtml(k.label)} key">
+      <button type="button" class="settings-btn craft-save aikeys-save">Save key</button>
+    </div>`;
+  }
+
+  function rowHtml(k) {
+    const get = `<a href="${escapeHtml(k.learn_more_url)}" target="_blank" rel="noopener">Get a key ↗</a>`;
+    const head = `<strong>${escapeHtml(k.label)}</strong>`;
+    if (!storageConfigured) {
+      return `<div class="aikeys-row">${head}<p class="settings-card__hint">Key storage is not set up on this project yet.</p></div>`;
+    }
+    if (k.set) {
+      const added = k.set_at ? ` · added ${escapeHtml(fmtDate(k.set_at))}` : '';
+      return `<div class="aikeys-row" data-provider="${escapeHtml(k.provider)}">${head}
+        <p class="settings-card__ok">Key on file ending …${escapeHtml(k.last4 || '????')}${added}. Your generations run on it and we charge nothing.</p>
+        <div class="artkey-actions">
+          <button type="button" class="settings-btn aikeys-replace">Replace</button>
+          <button type="button" class="settings-btn settings-btn--quiet aikeys-remove">Remove</button>
+        </div>
+        <div class="aikeys-entry" hidden></div>
+      </div>`;
+    }
+    return `<div class="aikeys-row" data-provider="${escapeHtml(k.provider)}">${head}
+      ${entryHtml(k)}
+      <p class="settings-card__hint">${get} · Optional. Without one, generations run on ours and are charged to your balance.</p>
+    </div>`;
+  }
+
+  function wire(keys) {
+    for (const row of document.querySelectorAll('#aikeys-list .aikeys-row[data-provider]')) {
+      const provider = row.getAttribute('data-provider');
+      const k = keys.find((x) => x.provider === provider);
+      const bindEntry = (scope) => {
+        const input = scope.querySelector('.aikeys-input');
+        const save = scope.querySelector('.aikeys-save');
+        if (!input || !save) return;
+        save.addEventListener('click', () => saveKey(provider, input, save));
+        input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); saveKey(provider, input, save); } });
+      };
+      bindEntry(row);
+      const replace = row.querySelector('.aikeys-replace');
+      if (replace) replace.addEventListener('click', () => {
+        const entry = row.querySelector('.aikeys-entry');
+        entry.innerHTML = entryHtml(k);
+        entry.hidden = false;
+        bindEntry(entry);
+        const i = entry.querySelector('.aikeys-input'); if (i) i.focus();
+      });
+      const remove = row.querySelector('.aikeys-remove');
+      if (remove) remove.addEventListener('click', () => removeKey(provider, k.label));
+    }
+  }
+
+  async function saveKey(provider, input, btn) {
+    const key = (input.value || '').trim();
+    if (!key) { toast('Paste your key first.'); return; }
+    btn.disabled = true;
+    try {
+      const res = await api.request('PUT', `${API}/ai-studio/keys/${encodeURIComponent(provider)}`, { body: { key } });
+      input.value = '';
+      if (res.status === 401) { toAuth(); return; }
+      if (!res.ok) { toast((res.data && res.data.message) || `Could not save (HTTP ${res.status}).`); btn.disabled = false; return; }
+      toast('Key saved.');
+      await render();
+    } catch (err) {
+      toast('Could not save your key. Try again.');
+      btn.disabled = false;
+    }
+  }
+
+  async function removeKey(provider, label) {
+    if (!window.confirm(`Remove your ${label} key? Generations will run on ours and be charged to your balance.`)) return;
+    const res = await api.request('DELETE', `${API}/ai-studio/keys/${encodeURIComponent(provider)}`);
+    if (res.status === 401) { toAuth(); return; }
+    if (!res.ok) { toast('Could not remove your key. Try again.'); return; }
+    toast('Key removed.');
+    await render();
+  }
+
+  async function render() {
+    const res = await api.request('GET', `${API}/ai-studio/keys`);
+    if (res.status === 401) { toAuth(); return false; }
+    if (res.status === 404) return false; // the AI studio is not switched on here
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    storageConfigured = res.data.storage_configured !== false;
+    const keys = res.data.keys || [];
+    $('#aikeys-list').innerHTML = keys.map(rowHtml).join('');
+    wire(keys);
+    return true;
+  }
+
+  async function setup() {
+    try {
+      if (await render()) $('#ai-keys').hidden = false;
+    } catch (err) {
+      $('#ai-keys').hidden = false;
+      $('#aikeys-list').innerHTML = '<p class="voices-empty">Your AI keys could not be loaded. Reload the page to try again.</p>';
+    }
+  }
+
+  setup();
+})();

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

@@ -226,6 +226,20 @@
               <p class="section-note">Stored encrypted; never shown again after saving — only its last four digits.</p>
             </section>
 
+            <!-- YOUR AI KEYS — your own OpenRouter / Gemini keys for the AI studio
+                 (task 1004919, ADR 0392). Rendered by settings-ai-keys.js against
+                 /api/bongos/ai-studio/keys. Write-only: a key is never sent back,
+                 only its last four characters. Hidden where the AI studio is off. -->
+            <section class="scroll" id="ai-keys" aria-labelledby="aikeys-h" data-group="access" hidden>
+              <h2 id="aikeys-h" class="scroll__h">Your AI keys</h2>
+              <p class="scroll__lede">
+                Link your own AI account so studio generations run on it and we charge
+                you nothing. Without a key, generations run on ours and come out of your balance.
+              </p>
+              <div class="settings-card" id="aikeys-list" aria-live="polite"></div>
+              <p class="section-note">Stored encrypted; never shown again after saving, only its last four characters.</p>
+            </section>
+
             <!-- ============ group: preferences ============ -->
 
             <!-- INTERACTION PROFILE — how replies are pitched for you (task 2010,
@@ -487,6 +501,7 @@
      settings.js, which sits close to the 1500-line size ratchet. -->
 <script src="/builders/settings-sessions.js?v=2026-08-29-sessions"></script>
 <script src="/builders/settings-passkeys.js?v=2026-10-15-passkeys"></script>
+<script src="/builders/settings-ai-keys.js?v=2026-10-28-ai-keys"></script>
 <!-- task 1002514: the interaction-profile panel ("How Claude talks to you"), on
      the same precedent and for the same reason — settings.js is against the
      1500-line ratchet, and this panel shares nothing with the rest of the page. -->

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

@@ -123,12 +123,21 @@
   // ---------- one card ----------
   // A seat the server routed (task 1004705, `waits_on.real`) is named; an ask
   // the docket did not route waits on you, or on others, unnamed.
+  // Who sits in the seat, by name (task 1004999): "Lars, the owner", "Ana and Ben, the
+  // board". Falls back to the seat alone when the server named nobody.
+  function whoWords(w) {
+    const label = str(w && w.label) || 'others';
+    const names = (Array.isArray(w && w.people) ? w.people : []).map((p) => str(p && (p.name || p.login))).filter(Boolean);
+    if (!names.length) return label;
+    const who = names.length === 1 ? names[0] : names.length === 2 ? names[0] + ' and ' + names[1] : names[0] + ' and ' + (names.length - 1) + ' others';
+    return who + ', ' + label;
+  }
   function seatWords(ask) {
     const w = ask.waits_on || {};
     if (!w.real) return ask.needs_you ? 'waits on you' : 'waits on others';
     const label = str(w.label) || 'someone';
     if (ask.needs_you) return label === 'you' || label === 'the owner' || /^the .* Lead$/.test(label) ? 'waits on you' : 'waits on you · ' + label;
-    return 'waits on ' + label;
+    return 'waits on ' + whoWords(w);
   }
   // ---------- the words, in the asker's own voice (task 1004702) ----------
   // The owner's pick (2026-10-13): a card speaks as "I", the agent that asked.
@@ -159,7 +168,7 @@
       else if (/^(board|committee):/.test(seat) && w.real && str(w.label)) you = upperFirst(w.label) + ' answers ' + (ask.batch ? 'these' : 'this') + ', and you sit in it.';
       else you = 'Only you can answer ' + (ask.batch ? 'these' : 'this') + '.';
     } else if (ask) {
-      rest = 'It waits on ' + (str(w.label) || 'others') + '.';
+      rest = 'It waits on ' + (w.real ? whoWords(w) : (str(w.label) || 'others')) + '.';
     }
     const left = str(silent).trim() ? 'Left alone, ' + lowerFirst(stop(silent)) : '';
     return { you: you, rest: [rest, left].filter(Boolean).join(' ') };
@@ -363,7 +372,7 @@
 
   const model = {
     actFor: actFor, optionPlan: optionPlan, cardView: cardView, queueOf: queueOf, scopesOf: scopesOf, likesOf: likesOf, sessionCounts: sessionCounts,
-    batchAsk: batchAsk, seatsFor: seatsFor, deckModel: deckModel, saidOf: saidOf, footOf: footOf, holdWords: holdWords, waitWords: waitWords,
+    batchAsk: batchAsk, seatsFor: seatsFor, deckModel: deckModel, saidOf: saidOf, footOf: footOf, whoWords: whoWords, holdWords: holdWords, waitWords: waitWords,
     BATCH: BATCH, ALIAS: ALIAS,
   };
 

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

@@ -30,6 +30,7 @@
    1003117), which still answers the reviews filed before Tweak Mode (TW14) in
    its own quiet dialog, in the hall's own tokens as it always was. */
 
+body[data-page="ai-studio"],
 body[data-page="studio"] {
   --st-room: #07080d;
   --st-frame: #14151b;
@@ -85,6 +86,7 @@ body[data-page="studio"] {
    inks are set darker than the mockup's so they hold AA on the glass over a
    light wall (records/studio.md): the link, and the credits figure and focus
    ring, which by night are the accent. */
+body[data-page="ai-studio"][data-sky="day"],
 body[data-page="studio"][data-sky="day"] {
   --st-room: #efe7dc;
   --st-frame: #d6c9b7;
@@ -136,6 +138,7 @@ body[data-page="studio"][data-sky="day"] .st-overlay {
   --st-scrim: rgba(239, 231, 220, .9);
   color-scheme: light;
 }
+body[data-page="ai-studio"][data-sky="day"] .studio,
 body[data-page="studio"][data-sky="day"] .studio { color-scheme: light; }
 /* The Approval queue (approval-queue.css) is night glass on its own root; over
    the day room it wears the same day glass as the studio's own panels. Its
@@ -163,7 +166,9 @@ body[data-page="studio"][data-sky="day"] .aq-overlay :focus-visible { outline-co
 
 /* The stage fills the content box: the hall's content column is a reading
    width, and the artboard is the whole window. */
+body[data-page="ai-studio"] .app-content,
 body[data-page="studio"] .app-content { max-width: none; padding: 0; }
+body[data-page="ai-studio"] .app-foot,
 body[data-page="studio"] .app-foot { display: none; }
 
 .studio {
@@ -184,6 +189,7 @@ html[data-fullscreen="on"] .studio { min-height: 100vh; }
 
 /* In full screen the shell's one button floats over the night room in either
    theme, so on this page it wears the room's glass, not the hall's ink. */
+html[data-fullscreen="on"] body[data-page="ai-studio"] .fullscreen-toggle,
 html[data-fullscreen="on"] body[data-page="studio"] .fullscreen-toggle {
   color: var(--st-ink);
   background: var(--st-glass);
@@ -451,36 +457,112 @@ body[data-sky="day"] .st-sunpatch { opacity: .7; }
   flex-direction: column;
   gap: 12px;
 }
+/* The things to do (Resume and the two doors): the accent tint and an arrow, so
+   they read as buttons to press. The overview below (.st-glance) stays quiet. */
 .st-resume,
 .st-action {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 3px;
   min-height: 72px;
-  padding: 10px 24px;
+  padding: 10px 52px 10px 24px;
   box-sizing: border-box;
   border-radius: 22px;
   text-align: left;
+  background: var(--st-resume);
+  border: 1px solid var(--st-resume-edge);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
-.st-resume {
-  text-decoration: none;
-  background: var(--st-resume);
-  border: 1px solid var(--st-resume-edge);
+.st-resume::after,
+.st-action::after {
+  content: "\2192";
+  position: absolute;
+  right: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 20px;
+  color: var(--st-link);
 }
+.st-resume { text-decoration: none; }
 .st-resume[hidden] { display: none; }
+/* The AI door (task 1004921) is a link, not a button: same row, no underline. */
+a.st-action { text-decoration: none; }
+a.st-action[hidden], a.st-glance__row[hidden] { display: none; }
+a.st-glance__row { text-decoration: none; }
 .st-action {
   cursor: pointer;
-  background: var(--st-glass);
-  border: 1px solid var(--st-glass-edge);
   color: var(--st-ink);
 }
-.st-action:hover { border-color: var(--st-rule); background: var(--st-close); }
+.st-resume:hover,
+.st-action:hover { border-color: var(--st-focus); background: var(--st-close); }
 .st-resume__label,
 .st-action__label { font-size: 17px; color: var(--st-ink); }
+
+/* The full-page reader: in place of the room, never over it. */
+html.st-reading .st-words,
+html.st-reading .st-actions,
+html.st-reading .st-glance { display: none; }
+.st-doc { position: relative; z-index: 1; width: min(720px, 100%); margin-top: 32px; }
+.st-doc[hidden] { display: none; }
+.st-doc__back { display: inline-block; min-height: 24px; font-size: 14px; color: var(--st-link); }
+.st-doc__title { margin: 16px 0 8px; font-size: 28px; font-weight: 400; color: var(--st-ink); }
+.st-doc__meta { margin: 0 0 20px; font-size: 13px; color: var(--st-ink-faint); }
+.st-doc__text { font-size: 17px; line-height: 1.65; color: var(--st-ink); }
+.st-doc__text h3, .st-doc__h { margin: 28px 0 8px; font-size: 19px; font-weight: 500; color: var(--st-ink); }
+.st-doc__text p, .st-doc__text ul { margin: 0 0 14px; }
+.st-doc__text ul, .st-doc__ideas { padding-left: 22px; }
+.st-doc__ideas a { color: var(--st-link); }
+.st-doc__img { display: block; max-width: 100%; margin: 12px 0; border-radius: 12px; }
+.st-doc-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
+.st-doc-list__row {
+  display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 18px;
+  background: var(--st-glass); border: 1px solid var(--st-glass-edge); text-decoration: none; color: var(--st-ink);
+}
+.st-doc-list__row:hover { border-color: var(--st-rule); }
+.st-doc-list__page { font-size: 17px; }
+.st-doc-list__meta { font-size: 12px; color: var(--st-ink-faint); }
+.st-doc-list__text { font-size: 14px; color: var(--st-ink-faint); }
+.st-doc__back:focus-visible, .st-doc-list__row:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 3px; }
+
+/* Overview: small text rows, no glass, set apart under the actions. */
+.st-glance {
+  margin-top: 40px;
+  width: min(420px, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 16px;
+  border-top: 1px solid var(--st-glass-edge);
+}
+.st-glance__head {
+  font-family: var(--st-mono);
+  font-size: 11px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--st-ink-faint);
+  margin-bottom: 4px;
+}
+.st-glance__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 12px;
+  min-height: 32px;
+  padding: 4px 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+.st-glance__label { font-size: 14px; color: var(--st-ink-faint); text-decoration: underline; text-underline-offset: 3px; }
+.st-glance__detail { font-size: 12px; color: var(--st-ink-faint); }
+.st-glance__row:hover .st-glance__label { color: var(--st-ink); }
+.st-glance__row:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 3px; }
 .st-resume__detail { font-size: 13px; color: var(--st-link); }
 .st-action__detail { font-size: 13px; color: var(--st-ink-faint); }
 .st-resume:focus-visible,

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

@@ -127,16 +127,13 @@
             <span class="st-action__label">Approve and confirm tweaks</span>
             <span class="st-action__detail" id="studio-approvals-detail">tweaks waiting for your sign-off</span>
           </button>
-          <button type="button" class="st-action" id="st-status" aria-haspopup="dialog">
-            <span class="st-action__label">Needs to be reviewed</span>
-            <span class="st-action__detail" id="st-status-detail">pages waiting on you, and 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>
+          <!-- Task 1004921 (goal 1000136): the door to the studio's AI pages,
+               shown only where the ai-studio module is on. Its line points at
+               the newest request while it is being made or just finished. -->
+          <a class="st-action" id="st-ai" href="/builders/ai-studio" hidden>
+            <span class="st-action__label">Make something with AI</span>
+            <span class="st-action__detail" id="st-ai-detail">sketches in, ideas and pictures out</span>
+          </a>
           <!-- 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>
@@ -144,6 +141,37 @@
           </button>
         </div>
 
+        <!-- Overview, not actions: where things stand. Quiet text rows under the
+             actions so the three above read as the things to do. -->
+        <div class="st-glance" role="group" aria-label="Overview">
+          <span class="st-glance__head">Overview</span>
+          <button type="button" class="st-glance__row" id="st-status" aria-haspopup="dialog">
+            <span class="st-glance__label">Needs to be reviewed</span>
+            <span class="st-glance__detail" id="st-status-detail">pages waiting on you, and 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-glance__row" id="st-site" aria-haspopup="dialog">
+            <span class="st-glance__label">From the live site</span>
+            <span class="st-glance__detail" id="st-site-detail">reviews written on the live site</span>
+          </button>
+          <!-- Task 1004921: what is left of the AI balance, where paying from a
+               balance is set up. -->
+          <a class="st-glance__row" id="st-ai-balance" href="/builders/ai-studio?view=balance" hidden>
+            <span class="st-glance__label">AI balance</span>
+            <span class="st-glance__detail" id="st-ai-balance-detail"></span>
+          </a>
+        </div>
+
+        <!-- The full-page reader (not a dialog): the live site's reviews as a list
+             (?view=site) or one doc (?note=N). Shown in place of the room's
+             greeting and doors while html.st-reading is set. -->
+        <section class="st-doc" id="st-doc" aria-labelledby="st-doc-title" hidden>
+          <a class="st-doc__back" href="/builders/studio">← Back to the studio</a>
+          <h2 class="st-doc__title" id="st-doc-title" tabindex="-1">Review</h2>
+          <div class="st-doc__body" id="st-doc-body"></div>
+        </section>
+
         <!-- The two small glass panels: the Tweak/CopyWrite Flow and Artist
              Review Status. The Approval queue is its own component
              (approval-queue.js), mounted by studio.js. -->
@@ -206,6 +234,7 @@
      the studio's own. -->
 <script src="/builders/tweak-editor-lib.js?v=2026-09-28-tw23"></script>
 <script src="/builders/studio-lib.js?v=2026-10-09-day"></script>
+<script src="/builders/ai-studio-lib.js?v=2026-10-29-ais1"></script>
 <script src="/builders/studio.js?v=2026-10-09-day"></script>
 </body>
 </html>