@bongos/core 1.19.1066 → 1.19.1068

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

@@ -1,30 +1,48 @@
-// modules/hall-ui/public/studio.js — the Studio (artist mode), /builders/studio.
-// R06 of goal 1000074 (the artist's loop), task 1003117.
+// modules/hall-ui/public/studio.js — the studio, /builders/studio.
 //
-// The criterion (artist-mode): "a place an artist wants to be, not a form. A
-// focus environment on the Cloud Bongos screen — a lofi-girl-style zen garden of
-// focus and creativity — rather than another table of rows."
+// THE STUDIO HOME (task 1003971 / BV2.TW16, goal 1000095; ADR 0341 D2, D5, D8
+// and D11). The artist's lofi home in Tweak Mode, built 1:1 on the master
+// design (docs/design/mocks/tweak-mode/Main.dc.html): the night room, a
+// greeting whose words are editable where they stand, the tally top right
+// (GET /copy-desk/tally), Resume back into the page the artist holds (GET
+// /copy-desk/next's resume, into /builders/tweak-editor?page=<id>), and three
+// quick actions that open glass panels in place: the Tweak/CopyWrite Flow (GET
+// /copy-desk/next: the recommendation, take it, pick another), the Approval
+// queue (approval-queue.js, mounted below) and Artist Review Status (GET
+// /copy-desk/pages: three surface lines, "N of M tweaked"). The words and rules
+// are studio-lib.js.
 //
-// So this is NOT a queue table. It aggregates the artist's real work — the two
-// surfaces the rest of goal 1000074 built — and presents it ONE PIECE AT A TIME,
-// a stone to tend in a calm garden, with the rest waiting quietly:
-//   1. REVIEW REQUESTS (R04, cascade.js) — a copy/visual ship files a two-step
-//      artist review at `backlog`, discipline 'artist', source 'cascade'. The
-//      two steps (coach the grader, then remake/tweak) live on the task record;
-//      this room names them and opens the door.
+// THE STUDIO'S OWN WORDS are a tweak of THIS page, builders:studio (ADR 0341
+// D2), never a live edit. A first click on them offers to take the studio page
+// (the claim route, D5); once the artist holds it, the lines the studio's own
+// reading lists are typed over in place and autosaved to the round's draft
+// (PUT /copy-desk/pages/builders:studio/draft, the whole draft each time, the
+// tweak editor's rule), and the page itself keeps its words until the round is
+// submitted, applied, approved and shipped like any other. Submit is the
+// editor's: the strip under the words links there.
+//
+// THE OLDER REVIEWS (R06 of goal 1000074, task 1003117). Below the home sits
+// the garden this page used to be, behind a quiet door that shows only while
+// reviews filed before Tweak Mode still wait. It presents the artist's older
+// work ONE PIECE AT A TIME, a stone to tend, with the rest waiting quietly:
+//   1. REVIEW REQUESTS (R04, cascade.js) — RETIRED, draining. A copy/visual
+//      ship used to file a two-step artist review at `backlog`, discipline
+//      'artist', source 'cascade'. Tweak Mode removed that rule (task 1004325 /
+//      BV2.TW14, ADR 0341 D9), so no new reviews arrive; the ones already filed
+//      still show here so they can be answered (they may still hold a deploy
+//      under the strict artist gate, ADR 0241). The door goes once none wait.
 //   2. FLAGGED COPY (R02, copy-desk) — open flags over the words the product
-//      shows people. Best-effort: an instance without the copy-desk module has
-//      no queue, and the room degrades to reviews alone rather than erroring.
+//      shows people, tended beside the reviews while the door is open.
+//      Best-effort: an instance without the copy-desk module has no queue.
 //
 // It gates NOTHING (ADR 0162 / ADR 0241): nothing here holds a ship or a deploy.
 // And it writes NOTHING to any live string or asset — the goal's no-live-CMS
-// rule, unchanged. What it DOES write, since task 1003829, is the artist's own
-// VERDICT on their own queue: a review is a task in the ledger, and the three
-// weights below move that task the way triage always could. The craft itself
-// still happens on the surface that owns it (the task record, the copy desk),
-// and every change to the product still lands as a claimed, graded, shipped
-// task. The allowlist of what may be written is WRITE_ROUTES below, pinned in
-// tests/hall_studio_world.mjs.
+// rule, unchanged. What it DOES write is named in WRITE_ROUTES below, pinned in
+// tests/hall_studio_world.mjs: the artist's own VERDICT on their own older
+// reviews (since task 1003829), the Approval queue's two decisions (TW12), and
+// the page claim and draft save that make a page, the studio included, the
+// artist's to rewrite (TW16). Every change to the product still lands as a
+// claimed, graded, shipped task.
 //
 // THE PICTURE (task 1003829). A review names the shipped task it is about, and
 // that task may carry a ship-time visual. The room reads it for the card in
@@ -46,9 +64,9 @@
   let busy = false;  // a verdict is in flight — one at a time, so a double-click cannot file twice
   let tended = false; // at least one verdict landed this sitting, so an emptied garden reads as finished
 
-  // Bound the reviews read. cascade.js files a review per qualifying ship and they
-  // sit at backlog until claimed or dismissed ("dismissable rather than nagging"),
-  // so this queue grows without bound over the project's life — the unbounded-read
+  // Bound the reviews read. cascade.js USED to file a review per qualifying ship
+  // (no longer, since TW14: the queue only drains now), and they sit at backlog
+  // until claimed or dismissed, so this queue could grow without bound — the unbounded-read
   // shape modules/hall-ui/CLAUDE.md flags as a repeat bug (the Work board's backlog,
   // Home's next-up card, the Goals rollup all had it). 50 is far more than a focus
   // queue tends at once; the footer links to the copy desk and board are the
@@ -92,6 +110,14 @@
     // travels as the route's own path (the tweak editor's take.path shape).
     approve: (pageId) => `${API}/copy-desk/pages/${pageId}/approve`,
     sendBack: (pageId) => `${API}/copy-desk/pages/${pageId}/send-back`,
+    // The home's two (task 1003971 / BV2.TW16, ADR 0341 D5 and D11). claim
+    // takes a page's tweak round for the artist: "take it" in the Tweak/
+    // CopyWrite Flow, and "take the studio page" before the studio's own words
+    // are typed over. draft saves the WHOLE draft of the studio page the artist
+    // holds (the holder only; the route decides). Neither writes a live string:
+    // a round's words reach its page only as a shipped, approved tweak.
+    claim: (pageId) => `${API}/copy-desk/pages/${pageId}/claim`,
+    draft: (pageId) => `${API}/copy-desk/pages/${pageId}/draft`,
   });
 
   // The verdict floor, read off /me. Local like goals-render.js's copy — four
@@ -108,14 +134,6 @@
   // helpers
   // ---------------------------------------------------------------------------
 
-  function greeting() {
-    const h = new Date().getHours();
-    if (h < 5) return 'Still up';
-    if (h < 12) return 'Good morning';
-    if (h < 18) return 'Good afternoon';
-    return 'Good evening';
-  }
-
   // The shipped task a review is ABOUT — cascade.js stamps
   // source_ref = 'cascade-artist-review-on-ship-<taskId>'.
   function reviewShippedId(t) {
@@ -240,8 +258,8 @@
   function emptyCard(done) {
     const heading = done ? 'You have tended everything waiting' : 'Nothing waits right now';
     const body = done
-      ? 'That is the whole garden. Come back when work ships, or start again from the top.'
-      : 'A quiet moment — either good news or an unread queue. When work with copy or visuals ships, a review appears here for you.';
+      ? 'That is the whole garden. Come back when someone flags a line, or start again from the top.'
+      : 'A quiet moment. When someone flags a line of copy, it waits here for you.';
     const restart = done
       ? '<div class="studio-card__actions studio-empty__actions"><button type="button" class="btn-ghost" data-restart>Start over</button></div>'
       : '';
@@ -252,13 +270,18 @@
   // paint
   // ---------------------------------------------------------------------------
 
+  // The quiet door to the older reviews: shown only while a review filed before
+  // Tweak Mode still waits (TW14), since that is the one reason the garden stays.
   function paintHead() {
-    const name = viewer && (viewer.display_name || viewer.github_login);
-    $('#studio-greet').textContent = name ? `${greeting()}, ${name}` : greeting();
-    const n = pieces.length;
-    $('#studio-sub').textContent = n
-      ? `${n} ${n === 1 ? 'piece' : 'pieces'} of the product's voice ${n === 1 ? 'waits' : 'wait'} for you. Tend them one at a time — or let them be.`
-      : 'Nothing waits right now. Enjoy the quiet.';
+    const reviews = pieces.filter((p) => p.type === 'review').length;
+    const door = $('#st-older');
+    if (door) door.hidden = reviews === 0;
+    const label = $('#st-older-label');
+    if (label) {
+      label.textContent = reviews === 1
+        ? '1 review from before Tweak Mode still waits'
+        : `${reviews} reviews from before Tweak Mode still wait`;
+    }
   }
 
   function paint() {
@@ -555,10 +578,399 @@
     approvals.refresh();
   }
 
+  // ===========================================================================
+  // THE HOME (task 1003971 / BV2.TW16): the tally, Resume, the three quick
+  // actions and their panels, and the studio's own words. It needs a real DOM
+  // and the two pure libs; without either (the vm tests of the garden, a
+  // stale cache) it draws nothing and the garden still works.
+  // ===========================================================================
+  const lib = window.OTBStudioLib;
+  const editorLib = window.OTBTweakEditor;
+  const hasDom = typeof document.getElementById === 'function';
+  const byId = (id) => (hasDom ? document.getElementById(id) : null);
+  const STUDIO = lib ? lib.STUDIO_PAGE : 'builders:studio';
+  const SAVE_DEBOUNCE_MS = 700;
+  const editorHref = (pageId) => `/builders/tweak-editor?page=${pageId}`;
+
+  const home = {
+    next: null, nextFailed: false,
+    pages: null, pagesFailed: false,
+    pick: null, picking: false,
+    panel: null, opener: null,
+  };
+
+  // The one claim call site, for a page id the inventory's shape allows (the
+  // server validates it against the inventory again).
+  async function claimPage(pageId) {
+    if (!lib || !lib.PAGE_ID_RE.test(String(pageId || ''))) return { ok: false, data: {} };
+    return api.request('POST', WRITE_ROUTES.claim(pageId), {});
+  }
+
+  function refusalOf(res) {
+    const d = (window.OTB.errDetails && window.OTB.errDetails(res.data)) || {};
+    const code = (window.OTB.errCode && window.OTB.errCode(res.data)) || (res.data && res.data.error && res.data.error.code) || '';
+    return lib.claimWords(code, d);
+  }
+
+  function setText(id, text) { const el = byId(id); if (el) el.textContent = text; }
+
+  // ---- the tally, Resume, the details ---------------------------------------
+
+  async function loadTally() {
+    const res = await api.request('GET', `${API}/copy-desk/tally`);
+    const parts = res.ok ? lib.tallyParts(res.data) : null;
+    const pill = byId('st-tally');
+    if (!pill || !parts) return;
+    setText('st-tally-credits', parts.credits);
+    setText('st-tally-pages', parts.pages);
+    setText('st-tally-week', parts.week);
+    pill.hidden = false;
+  }
+
+  async function loadNext() {
+    const res = await api.request('GET', `${API}/copy-desk/next`);
+    if (!res.ok || !res.data) { home.nextFailed = true; return; }
+    home.next = res.data;
+    setText('st-flow-detail', lib.flowDetail(home.next));
+    const resume = home.next.resume;
+    if (!resume || !lib.PAGE_ID_RE.test(String(resume.page_id || ''))) return;
+    // One more read, for "12 of 38 lines": the editor's own counter.
+    const ed = await api.request('GET', `${API}/copy-desk/pages/${resume.page_id}/draft`);
+    const counter = ed.ok && ed.data ? ed.data.counter : null;
+    const link = byId('st-resume');
+    if (link) {
+      link.href = editorHref(resume.page_id);
+      link.hidden = false;
+    }
+    setText('st-resume-detail', lib.resumeDetail(resume, counter));
+    paintSubLine(lib.subParts(resume, counter));
+  }
+
+  // The greeting's sub-line, written here (not in studio-lib.js) so the copy
+  // registry places it at this assignment: it is one of the studio's own lines,
+  // and an in-place tweak of it names this string.
+  function paintSubLine(p) {
+    const sub = byId('studio-sub');
+    if (!sub || !p || wedit.editing) return;
+    if (p.counted) {
+      sub.textContent = `${p.title}, on the ${p.surface} page, is where you left it. ${p.changed} of its ${p.total} lines are yours so far.`;
+    } else {
+      sub.textContent = `${p.title}, on the ${p.surface} page, is where you left it.`;
+    }
+  }
+
+  async function loadPages() {
+    const res = await api.request('GET', `${API}/copy-desk/pages`);
+    if (!res.ok || !res.data) { home.pagesFailed = true; return; }
+    home.pages = res.data;
+    setText('st-status-detail', lib.statusDetail(home.pages));
+  }
+
+  // ---- the two small glass panels -------------------------------------------
+
+  const TITLES = Object.freeze({ flow: 'Tweak/CopyWrite Flow', status: 'Artist Review Status' });
+
+  function flowHtml() {
+    if (!home.next) {
+      return `<p class="st-panel__line">${home.nextFailed ? 'The next page could not be read just now. Try again in a moment.' : 'Finding the next page…'}</p>`;
+    }
+    const all = [home.next.recommended, ...(home.next.alternatives || [])].filter(Boolean);
+    const cur = (home.pick && all.find((c) => c.page_id === home.pick)) || all[0];
+    if (!cur) return '<p class="st-panel__line">Every page is taken or on its way to the site right now. Come back soon.</p>';
+    const others = all.filter((c) => c !== cur);
+    const pick = others.length
+      ? `<button type="button" class="st-pick" data-pick aria-expanded="${home.picking ? 'true' : 'false'}" aria-controls="st-picks">pick another</button>`
+      : '';
+    const chips = others.map((o) => `<button type="button" class="st-chip" data-pick-id="${escapeHtml(o.page_id)}">${escapeHtml(lib.pickLabel(o))}</button>`).join('');
+    return `
+      <div class="st-next">
+        <span class="st-next__page">${escapeHtml(lib.titleOf(cur))}</span>
+        <span class="st-next__why">${escapeHtml(cur.why_line || cur.why || '')}</span>
+      </div>
+      <div class="st-next__acts">
+        <button type="button" class="st-take" data-take="${escapeHtml(cur.page_id)}">take it</button>
+        ${pick}
+      </div>
+      <p class="st-panel__err" id="st-take-err" role="alert" hidden></p>
+      ${others.length ? `<div class="st-picks" id="st-picks"${home.picking ? '' : ' hidden'}>${chips}</div>` : ''}`;
+  }
+
+  function statusHtml() {
+    if (!home.pages) {
+      return `<p class="st-panel__line">${home.pagesFailed ? 'The pages could not be read just now. Try again in a moment.' : 'Reading the pages…'}</p>`;
+    }
+    const rows = lib.surfaceRows(home.pages, lib.landingHost(byId('hall-main') && byId('hall-main').getAttribute('data-apex'), window.location && window.location.host)).map((s) => `
+      <li class="st-surface">
+        <div class="st-surface__head">
+          <span class="st-surface__name">${escapeHtml(s.name)}</span>
+          <span class="st-surface__where">${escapeHtml(s.where)}</span>
+          <span class="st-surface__count">${escapeHtml(s.count)}</span>
+        </div>
+        <div class="st-surface__track"><div class="st-surface__fill" style="width: ${Number(s.pct)}%"></div></div>
+      </li>`).join('');
+    const asked = lib.askedLine(home.next && home.next.asked_pages);
+    return `<ul class="st-surfaces">${rows}</ul>${asked ? `<p class="st-asked">${escapeHtml(asked)}</p>` : ''}`;
+  }
+
+  function paintPanel() {
+    const body = byId('st-panel-body');
+    if (!body || !home.panel) return;
+    body.innerHTML = home.panel === 'flow' ? flowHtml() : statusHtml();
+  }
+
+  function openPanel(kind, opener) {
+    const overlay = byId('st-panel');
+    if (!overlay || !TITLES[kind]) return;
+    home.panel = kind;
+    home.opener = opener || null;
+    home.picking = false;
+    setText('st-panel-title', TITLES[kind]);
+    paintPanel();
+    overlay.hidden = false;
+    document.documentElement.classList.add('st-open');
+    const title = byId('st-panel-title');
+    if (title) title.focus();
+  }
+
+  function closePanel() {
+    const overlay = byId('st-panel');
+    if (!overlay || overlay.hidden) return;
+    overlay.hidden = true;
+    home.panel = null;
+    document.documentElement.classList.remove('st-open');
+    if (home.opener && home.opener.focus) home.opener.focus();
+  }
+
+  async function takePage(pageId, button) {
+    if (button) button.disabled = true;
+    const res = await claimPage(pageId);
+    if (res.ok) { window.location.assign(editorHref(pageId)); return; }
+    if (button) button.disabled = false;
+    const err = byId('st-take-err');
+    if (err) { err.textContent = refusalOf(res); err.hidden = false; }
+  }
+
+  // ---- the older reviews' dialog --------------------------------------------
+
+  function openReviews(opener) {
+    const box = byId('st-reviews');
+    if (!box) return;
+    home.opener = opener || null;
+    box.hidden = false;
+    document.documentElement.classList.add('st-open');
+    const title = byId('st-reviews-title');
+    if (title) title.focus();
+  }
+
+  function closeReviews() {
+    const box = byId('st-reviews');
+    if (!box || box.hidden) return;
+    box.hidden = true;
+    document.documentElement.classList.remove('st-open');
+    const door = byId('st-older');
+    const back = home.opener && !home.opener.hidden ? home.opener : (door && !door.hidden ? door : byId('st-flow'));
+    if (back && back.focus) back.focus();
+  }
+
+  // ---- the studio's own words, typed over in place ---------------------------
+
+  const wedit = {
+    editing: false, busy: false,
+    lines: [], readingHash: null, values: {}, keys: new Map(),
+    save: 'saved', timer: null, inflight: null, again: false, lastSent: null, error: '',
+  };
+
+  function wordEls() {
+    const box = byId('st-words');
+    return box ? Array.from(box.querySelectorAll('[data-words]')) : [];
+  }
+
+  function paintEditing() {
+    const strip = byId('st-editing');
+    if (!strip || !wedit.editing) return;
+    const changed = editorLib.changedCount(wedit.lines, wedit.values);
+    const counter = editorLib.counterText(changed, wedit.lines.length, wedit.save);
+    const unread = wedit.keys.size === 0;
+    strip.classList.toggle('st-editing--failed', wedit.save === 'failed');
+    strip.innerHTML = unread
+      ? `The studio page is yours, but its reading does not list these words yet. <a href="${editorHref(STUDIO)}">Rewrite it in the editor</a>`
+      : `The studio page is yours · ${escapeHtml(counter)}${wedit.error ? ` · ${escapeHtml(wedit.error)}` : ''} · <a href="${editorHref(STUDIO)}">submit it in the editor</a>`;
+    strip.hidden = false;
+  }
+
+  function enterEditing(ed, focusEl) {
+    const reading = (ed && ed.reading) || {};
+    wedit.lines = reading.lines || [];
+    wedit.readingHash = reading.reading_hash || null;
+    wedit.values = editorLib.initialValues(wedit.lines, ed && ed.draft);
+    wedit.lastSent = JSON.stringify(editorLib.draftBody(wedit.readingHash, wedit.lines, wedit.values));
+    wedit.keys = new Map();
+    for (const el of wordEls()) {
+      const line = lib.matchLine(el.textContent, wedit.lines);
+      if (!line) { el.setAttribute('data-unread', ''); continue; }
+      wedit.keys.set(el, line.key);
+      el.textContent = wedit.values[line.key];
+      el.setAttribute('contenteditable', 'true');
+      el.setAttribute('spellcheck', 'false');
+      el.setAttribute('aria-label', `The studio's words: ${line.text}`);
+    }
+    wedit.editing = true;
+    const hint = byId('st-hint');
+    if (hint) hint.hidden = true;
+    const offer = byId('st-offer');
+    if (offer) offer.hidden = true;
+    paintEditing();
+    const target = (focusEl && wedit.keys.has(focusEl)) ? focusEl : wordEls().find((el) => wedit.keys.has(el));
+    if (target) target.focus();
+  }
+
+  async function readStudio() {
+    const res = await api.request('GET', `${API}/copy-desk/pages/${STUDIO}/draft`);
+    return res.ok && res.data && res.data.reading ? res.data : null;
+  }
+
+  // A first click on the words: straight into editing when the artist already
+  // holds the studio page, the offer to take it otherwise.
+  async function beginWords(focusEl) {
+    if (wedit.editing || wedit.busy || !lib || !editorLib) return;
+    wedit.busy = true;
+    const ed = await readStudio();
+    wedit.busy = false;
+    if (ed && ed.round && ed.round.held_by_you) { enterEditing(ed, focusEl); return; }
+    wedit.focusAfter = focusEl || null;
+    const offer = byId('st-offer');
+    const err = byId('st-offer-err');
+    if (err) err.hidden = true;
+    if (offer) offer.hidden = false;
+    const take = byId('st-offer-take');
+    if (take) take.focus();
+  }
+
+  async function takeStudio() {
+    const take = byId('st-offer-take');
+    const err = byId('st-offer-err');
+    if (take) take.disabled = true;
+    const res = await claimPage(STUDIO);
+    if (!res.ok) {
+      if (take) take.disabled = false;
+      if (err) { err.textContent = refusalOf(res); err.hidden = false; }
+      return;
+    }
+    const ed = await readStudio();
+    if (take) take.disabled = false;
+    if (!ed) {
+      if (err) { err.textContent = 'The studio page is yours, but its words could not be read just now. Open it in the editor.'; err.hidden = false; }
+      return;
+    }
+    enterEditing(ed, wedit.focusAfter);
+  }
+
+  function scheduleSave() {
+    clearTimeout(wedit.timer);
+    wedit.timer = setTimeout(saveWords, SAVE_DEBOUNCE_MS);
+  }
+
+  // The WHOLE draft, every changed line of the studio page (the ones typed here
+  // and any the editor saved), one save in flight at a time.
+  async function saveWords() {
+    clearTimeout(wedit.timer);
+    if (!wedit.editing) return;
+    if (wedit.inflight) { wedit.again = true; return; }
+    const body = editorLib.draftBody(wedit.readingHash, wedit.lines, wedit.values);
+    const sent = JSON.stringify(body);
+    if (sent === wedit.lastSent) return;
+    wedit.save = 'saving';
+    wedit.error = '';
+    paintEditing();
+    wedit.inflight = api.request('PUT', WRITE_ROUTES.draft(STUDIO), body);
+    const res = await wedit.inflight;
+    wedit.inflight = null;
+    if (res.ok) {
+      wedit.lastSent = sent;
+      wedit.save = 'saved';
+    } else {
+      wedit.save = 'failed';
+      const d = (window.OTB.errDetails && window.OTB.errDetails(res.data)) || {};
+      wedit.error = d.what_this_means || errMessage(res.data) || 'the words could not be saved';
+    }
+    paintEditing();
+    if (wedit.again) { wedit.again = false; saveWords(); }
+  }
+
+  function wireHome() {
+    const flow = byId('st-flow');
+    if (flow) flow.addEventListener('click', () => openPanel('flow', flow));
+    const status = byId('st-status');
+    if (status) status.addEventListener('click', () => openPanel('status', status));
+    const older = byId('st-older');
+    if (older) older.addEventListener('click', () => openReviews(older));
+
+    const overlay = byId('st-panel');
+    if (overlay) {
+      overlay.addEventListener('click', (ev) => {
+        if (ev.target === overlay || ev.target.closest('[data-close-panel]')) { closePanel(); return; }
+        const take = ev.target.closest('[data-take]');
+        if (take) { takePage(take.getAttribute('data-take'), take); return; }
+        if (ev.target.closest('[data-pick]')) { home.picking = !home.picking; paintPanel(); const b = overlay.querySelector('[data-pick]'); if (b) b.focus(); return; }
+        const chip = ev.target.closest('[data-pick-id]');
+        if (chip) { home.pick = chip.getAttribute('data-pick-id'); home.picking = false; paintPanel(); const t = overlay.querySelector('[data-take]'); if (t) t.focus(); }
+      });
+    }
+    const reviews = byId('st-reviews');
+    if (reviews) {
+      reviews.addEventListener('click', (ev) => {
+        if (ev.target === reviews || ev.target.closest('[data-close-reviews]')) closeReviews();
+      });
+    }
+    document.addEventListener('keydown', (ev) => {
+      if (ev.key !== 'Escape') return;
+      if (home.panel) { closePanel(); return; }
+      const box = byId('st-reviews');
+      if (box && !box.hidden) closeReviews();
+    });
+
+    const hint = byId('st-hint');
+    if (hint) hint.addEventListener('click', () => beginWords(null));
+    const no = byId('st-offer-no');
+    if (no) no.addEventListener('click', () => { const o = byId('st-offer'); if (o) o.hidden = true; if (hint) hint.focus(); });
+    const take = byId('st-offer-take');
+    if (take) take.addEventListener('click', takeStudio);
+    for (const el of wordEls()) {
+      el.addEventListener('click', () => { if (!wedit.editing) beginWords(el); });
+      el.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter' && wedit.editing) { ev.preventDefault(); el.blur(); }
+      });
+      el.addEventListener('paste', (ev) => {
+        if (!wedit.editing) return;
+        ev.preventDefault();
+        const text = ((ev.clipboardData && ev.clipboardData.getData('text/plain')) || '').replace(/\s+/g, ' ');
+        document.execCommand('insertText', false, text);
+      });
+      el.addEventListener('input', () => {
+        const key = wedit.keys.get(el);
+        if (!key) return;
+        wedit.values[key] = el.textContent;
+        paintEditing();
+        scheduleSave();
+      });
+      el.addEventListener('blur', () => { if (wedit.keys.has(el)) saveWords(); });
+    }
+    window.addEventListener('pagehide', () => { if (wedit.editing) saveWords(); });
+  }
+
+  async function bootHome(signedIn) {
+    if (!hasDom || !lib) return;
+    wireHome();
+    if (!signedIn) return;
+    await Promise.all([loadTally(), loadNext(), loadPages()]);
+    if (home.panel) paintPanel();
+  }
+
   (async () => {
     mountApprovals();
     const me = await api.request('GET', `${API}/me`);
     if (me.ok) viewer = me.data.builder || me.data;
+    bootHome(me.ok);
     // Reviews first (the richer craft), then flags — each newest-first within.
     const [reviews, flags] = await Promise.all([loadReviews(), loadFlags()]);
     pieces = [...reviews, ...flags];