@bongos/core 1.23.13 → 1.23.15

package/modules/copy-desk/page-status.js

@@ -306,7 +306,7 @@ function orderedSurfaces(inventory) {
 // last update), and whether it has sat there too long. Waiting for review is
 // the artist's own move and a draft is theirs to finish; a draft is never stuck,
 // and a review is stuck only after 3 days (task 1004777, so its artist is told);
-// a state the reads cannot name always needs a look.
+// a state the reads cannot name always needs to be reviewed.
 // ---------------------------------------------------------------------------
 
 const DAY_MS = 24 * 60 * 60 * 1000;
@@ -318,7 +318,7 @@ const IN_FLIGHT = Object.freeze({
   // task 1004777: a review left 3 days is stuck too, so its artist is told on Home.
   waiting_for_artist: { word: 'Waiting for your review', stuck_after: 3 * DAY_MS },
   landing: { word: 'Approved, going live', stuck_after: DAY_MS },
-  unknown: { word: 'Needs a look', stuck_after: 0 },
+  unknown: { word: 'Needs to be reviewed', stuck_after: 0 },
 });
 const IN_FLIGHT_ORDER = ['unknown', 'landing', 'applying', 'submitted', 'waiting_for_artist', 'writing', 'draft'];
 

package/modules/copy-desk/tests/copy_page_status.mjs

@@ -259,7 +259,7 @@ await test('in_flight: every open round, its plain state, how long, and stuck wh
   ];
   const out = status.composePages({ inventory, readings: null, tasks, now: NOW });
   assert.deepEqual(out.in_flight.map((f) => [f.page_id, f.state, f.state_word, f.stuck]), [
-    ['builders:f', 'unknown', 'Needs a look', true],
+    ['builders:f', 'unknown', 'Needs to be reviewed', true],
     ['landing:c', 'landing', 'Approved, going live', true],
     ['status:h', 'applying', 'Being applied', true],
     ['landing:a', 'submitted', 'Submitted, waiting to be applied', true],

package/modules/hall-ui/public/approval-queue-lib.js

@@ -90,7 +90,7 @@
 
   // What the studio's quick action says under "Approval queue".
   function doorDetail(count) {
-    if (count == null) return 'the pages /tweak has applied';
+    if (count == null) return 'tweaks waiting for your sign-off';
     if (count === 0) return 'nothing waiting for you';
     return `${plural(count, 'page', 'pages')} applied, waiting for you`;
   }

package/modules/hall-ui/public/approval-queue.css

@@ -150,12 +150,16 @@ html.aq-open { overflow: hidden; }
 }
 
 /* The page, and the words beside it. */
+/* The words changed lead and the page is a look-if-you-want beneath them, so the
+   body is one column that scrolls as a whole. */
 .aq-body {
   flex-grow: 1;
   min-height: 0;
   min-width: 0;
   display: flex;
-  gap: 16px;
+  flex-direction: column;
+  gap: 18px;
+  overflow-y: auto;
 }
 .aq-frame {
   flex-grow: 1;
@@ -183,16 +187,15 @@ html.aq-open { overflow: hidden; }
   color: var(--aq-paper-ink);
 }
 .aq-lines {
-  /* 300px, the artboard's, until the page beside it has shrunk; then down to 240. */
-  width: clamp(240px, 32%, 300px);
   flex: none;
   min-width: 0;
-  min-height: 0;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
+.aq-peek { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: none; }
+.aq-peek__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.aq-peek .aq-frame { flex-grow: 0; max-height: min(520px, 60vh); }
 .aq-views { display: flex; flex-wrap: wrap; gap: 8px; }
 .aq-lines__list {
   list-style: none;
@@ -202,7 +205,16 @@ html.aq-open { overflow: hidden; }
   flex-direction: column;
   gap: 14px;
 }
-.aq-line { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--aq-rule); }
+/* One changed line: what it was on the left, what it is now on the right. */
+.aq-line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 6px 24px;
+  padding-top: 14px;
+  border-top: 1px solid var(--aq-rule);
+}
+.aq-line__section, .aq-line__pinned { grid-column: 1 / -1; }
+.aq-line__aside { grid-column: 1; grid-row: 2; }
 .aq-line__section {
   font-family: var(--aq-mono);
   font-size: 11px;
@@ -210,7 +222,7 @@ html.aq-open { overflow: hidden; }
   text-transform: uppercase;
   color: var(--aq-ink-faint);
 }
-.aq-line__text { font-size: 15px; line-height: 1.5; color: var(--aq-ink); overflow-wrap: anywhere; }
+.aq-line__text { grid-column: 2; grid-row: 2; font-size: 17px; line-height: 1.5; color: var(--aq-ink); overflow-wrap: anywhere; }
 .aq-mark { background: var(--aq-mark); color: var(--aq-ink); border-radius: 4px; padding: 0 3px; }
 /* A brand hole ({{productName}}) shown as the name it stands for: a fixed name
    the artist did not write and cannot rewrite, so a quiet chip (task 1004381). */
@@ -224,7 +236,7 @@ html.aq-open { overflow: hidden; }
   line-height: 1.35;
   white-space: nowrap;
 }
-.aq-line__aside { font-size: 13px; line-height: 1.45; color: var(--aq-ink-faint); overflow-wrap: anywhere; }
+.aq-line__aside { font-size: 15px; line-height: 1.5; color: var(--aq-ink-faint); overflow-wrap: anywhere; }
 .aq-line--refused .aq-line__aside { color: var(--aq-link); }
 /* task 1004775: a test that still checks the old words. */
 .aq-line__pinned { font-size: 13px; line-height: 1.45; color: var(--aq-link); overflow-wrap: anywhere; }
@@ -248,8 +260,9 @@ html.aq-open { overflow: hidden; }
   min-height: 48px;
 }
 .aq-accent {
-  height: 48px;
-  padding: 0 26px;
+  height: 52px;
+  padding: 0 34px;
+  font-weight: 600;
   border-radius: 999px;
   cursor: pointer;
   border: 0;
@@ -312,10 +325,11 @@ html.aq-open { overflow: hidden; }
   .aq-title { order: 3; flex: 1 1 100%; }
   .aq-head__gap { display: none; }
   .aq-head .aq-flips { order: 4; }
-  .aq-body { flex-direction: column; flex-grow: 0; }
+  .aq-body { flex-grow: 0; overflow: visible; }
+  .aq-line { grid-template-columns: minmax(0, 1fr); }
+  .aq-line__aside, .aq-line__text { grid-column: 1; grid-row: auto; }
   .aq-frame { flex: none; max-height: 70vh; }
   .aq-frame__note { padding: 40px 20px; }
-  .aq-lines { width: auto; overflow: visible; }
   .aq-foot { flex-wrap: wrap; }
   .aq-note { flex: 1 1 100%; }
   .aq-hint { margin-left: 0; flex: 1 1 100%; white-space: normal; }

package/modules/hall-ui/public/approval-queue.js

@@ -72,6 +72,7 @@
       renders: new Map(),   // task id -> render index, or 'loading' / 'failed'
       outcome: new Map(),   // task id -> { kind: 'approved'|'sent', line }
       noteOpen: false,
+      peek: false,          // the rendered page is a look-if-you-want, never the card
       busy: false,
       error: null,
       opener: null,
@@ -133,7 +134,7 @@
       if (!pick) {
         return L.hasAnyRender(r)
           ? `<p class="aq-frame__note">No ${esc(state.view.phase)} render is attached to this page.</p>`
-          : '<p class="aq-frame__note">No render is attached to this page yet. /tweak attaches them when it applies a page; until then there is nothing to approve from, so send it back or wait.</p>';
+          : '<p class="aq-frame__note">No render is attached to this page yet. The words above are what changed.</p>';
       }
       const name = L.displayTitle(item);
       const alt = `${name}, ${state.view.phase}, ${pick.device}, ${pick.mode}`;
@@ -145,8 +146,9 @@
       return H ? H.holesHtml(text, { cls: 'aq-hole' }) : esc(text);
     }
 
+    // The card IS the words: each changed line, what it was beside what it is now.
     function linesHtml(item) {
-      const rows = (item.lines || []).map((l) => L.lineRow(l, state.view.phase));
+      const rows = (item.lines || []).map((l) => L.lineRow(l, 'after'));
       if (!rows.length) return '<p class="aq-lines__none">This round changed no lines.</p>';
       return `<ol class="aq-lines__list">${rows.map((r) => `
         <li class="aq-line${r.refused ? ' aq-line--refused' : ''}">
@@ -170,20 +172,35 @@
       if (!item.can_decide) {
         return '<div class="aq-foot"><p class="aq-sealed">Only the artist who wrote this page, or another artist, can approve it or send it back.</p><span class="aq-hint">highlighted: the words you changed</span></div>';
       }
-      const r = state.renders.get(item.task_id);
-      const noPicture = r && r !== 'loading' && r !== 'failed' && !L.hasAnyRender(r);
-      const approve = `<button type="button" class="aq-accent" data-approve${state.busy || noPicture ? ' disabled' : ''}>approve and ship</button>`;
+      const approve = `<button type="button" class="aq-accent" data-approve${state.busy ? ' disabled' : ''}>Approve and ship</button>`;
       const note = state.noteOpen
         ? `<div class="aq-note">
             <label for="aq-note" class="aq-sr">What needs changing</label>
             <input id="aq-note" class="aq-note__input" type="text" maxlength="${L.MAX_NOTE}" placeholder="The hero line is too long on a phone." autocomplete="off">
             <button type="button" class="aq-ghost aq-ghost--send" data-send${state.busy ? ' disabled' : ''}>send</button>
           </div>`
-        : `<button type="button" class="aq-ghost" data-open-note${state.busy ? ' disabled' : ''}>send it back</button>`;
+        : `<button type="button" class="aq-ghost" data-open-note${state.busy ? ' disabled' : ''}>Send it back</button>`;
       const err = state.error ? `<p class="aq-error" role="alert">${esc(state.error)}</p>` : '';
       return `<div class="aq-foot">${approve}${note}<span class="aq-hint">highlighted: the words you changed</span></div>${err}`;
     }
 
+    // The page as the artist would see it: closed until asked for, because a
+    // picture that may not exist is no way to open a decision.
+    function peekHtml(item) {
+      if (!state.peek) {
+        return '<div class="aq-peek"><button type="button" class="aq-ghost aq-ghost--small" data-peek aria-expanded="false">See it on the page</button></div>';
+      }
+      return `<div class="aq-peek aq-peek--open">
+          <div class="aq-peek__bar">
+            <button type="button" class="aq-ghost aq-ghost--small" data-peek aria-expanded="true">Hide the page</button>
+            ${pills('phase', L.PHASES, state.view.phase, 'Before or after')}
+            ${pills('device', L.DEVICES, state.view.device, 'Desktop or phone')}
+            ${pills('mode', L.MODES, state.view.mode, 'Light or dark')}
+          </div>
+          <div class="aq-frame" tabindex="0" aria-label="The page, rendered">${frameHtml(item)}</div>
+        </div>`;
+    }
+
     // task 1004765: submitted rounds nobody has applied, below the reviewable
     // pages. The server lists them apart; the panel only words them, and gives
     // them no approve or send-back verb.
@@ -204,28 +221,26 @@
       const item = current();
       const close = '<button type="button" class="aq-close" data-close>close</button>';
       if (!item) {
-        const words = state.loadError || (state.loaded ? 'Nothing is waiting for you. A page appears here once /tweak has applied it and its grade has passed.' : 'Opening the Approval queue…');
+        const words = state.loadError || (state.loaded ? 'Nothing is waiting for you. A page shows up here once its tweaks have been applied and checked.' : 'Opening the Approval queue…');
         dialog.innerHTML = `
           <div class="aq-head"><span class="aq-eyebrow">approval queue</span><h2 class="aq-title" id="aq-title">${state.loaded ? 'Nothing waiting' : 'Approval queue'}</h2><span class="aq-head__gap"></span>${close}</div>
           <div class="aq-body aq-body--empty"><div class="aq-frame"><p class="aq-frame__note">${esc(words)}</p></div></div>
           ${notAppliedHtml()}`;
         return;
       }
-      loadRenders(item);
+      if (state.peek) loadRenders(item);
       dialog.innerHTML = `
         <div class="aq-head">
           <span class="aq-eyebrow">${esc(L.eyebrow(item))}</span>
           <h2 class="aq-title" id="aq-title">${esc(L.displayTitle(item))} <span class="aq-title__sub">${esc(L.subLine(item))}</span></h2>
           <span class="aq-head__gap"></span>
-          ${pills('phase', L.PHASES, state.view.phase, 'Before or after')}
           ${close}
         </div>
         <div class="aq-body">
-          <div class="aq-frame" tabindex="0" aria-label="The page, rendered">${frameHtml(item)}</div>
-          <aside class="aq-lines" aria-label="The words you changed">
-            <div class="aq-views">${pills('device', L.DEVICES, state.view.device, 'Desktop or phone')}${pills('mode', L.MODES, state.view.mode, 'Light or dark')}</div>
+          <section class="aq-lines" aria-label="The words you changed">
             ${linesHtml(item)}
-          </aside>
+          </section>
+          ${peekHtml(item)}
         </div>
         ${footHtml(item)}
         ${notAppliedHtml()}`;
@@ -276,7 +291,9 @@
 
     // ---- open / close ----------------------------------------------------------
 
-    async function open() {
+    // `pageId` (optional) lands on that page's card when it is in the queue, so a
+    // row elsewhere that says "needs to be reviewed" opens its own card.
+    async function open(pageId, { reload = true } = {}) {
       state.opener = document.activeElement;
       state.open = true;
       state.error = null;
@@ -285,9 +302,14 @@
       document.documentElement.classList.add('aq-open');
       paint();
       dialog.focus();
-      await loadQueue();
+      if (reload || !state.loaded) await loadQueue();
+      if (typeof pageId === 'string') {
+        const at = state.queue.findIndex((q) => q.page_id === pageId);
+        if (at !== -1) state.idx = at;
+        else if (state.queue.length) state.error = 'That page is not waiting for your sign-off right now.';
+      }
       paint();
-      const first = dialog.querySelector('[data-phase][aria-pressed="true"]') || dialog.querySelector('[data-close]');
+      const first = dialog.querySelector('[data-approve]:not([disabled])') || dialog.querySelector('[data-close]');
       if (first) first.focus();
     }
 
@@ -322,6 +344,7 @@
       if (t.dataset.device) return flip('device', t.dataset.device);
       if (t.dataset.mode) return flip('mode', t.dataset.mode);
       if (('approve' in t.dataset)) return decide('approved');
+      if (('peek' in t.dataset)) { state.peek = !state.peek; paint(); return undefined; }
       if (('openNote' in t.dataset)) { state.noteOpen = true; paint(); return focusNote(); }
       if (('send' in t.dataset)) return decide('sent');
       if (t.dataset.next != null) { state.idx = Number(t.dataset.next); state.noteOpen = false; state.error = null; paint(); return undefined; }
@@ -354,6 +377,7 @@
       close,
       async refresh() { await loadQueue(); paint(); return countNow(); },
       count: countNow,
+      notAppliedCount: () => (state.notApplied || []).length,
     };
   }
 

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

@@ -164,9 +164,11 @@
         page_id: p.page_id,
         title: titleOf(p),
         surface: surfaceWord(p.surface),
-        state: p.state_word || 'Needs a look',
+        state: p.state_word || 'Needs to be reviewed',
         age,
         stuck: !!p.stuck,
+        // A page waiting on a sign-off opens its approval card.
+        review: p.state === 'waiting_for_artist',
         // A round the reads cannot name has no action of its own: the row offers
         // a release (task 1004837). task_id pins the round the viewer looked at.
         release: p.state === 'unknown',
@@ -191,8 +193,8 @@
     const v = num(n);
     if (v <= 0) return '';
     return v === 1
-      ? '1 page has been asked for. It comes up first in the Tweak/CopyWrite Flow.'
-      : `${v} pages have been asked for. They come up first in the Tweak/CopyWrite Flow.`;
+      ? '1 page has been asked for. It comes up first in Work through tweaks.'
+      : `${v} pages have been asked for. They come up first in Work through tweaks.`;
   }
 
   // A "pick another" chip names the page and its surface (the artboard's label).

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

@@ -99,7 +99,7 @@
              shell's top bar is the page's one <header>. -->
         <div class="st-words" id="st-words">
           <h1 class="st-greet" id="studio-greet" data-words>Good evening.</h1>
-          <p class="st-sub" id="studio-sub" data-words>Nothing is on your desk yet. The Tweak/CopyWrite Flow has a page ready for you.</p>
+          <p class="st-sub" id="studio-sub" data-words>Nothing is on your desk yet. Work through tweaks has a page ready for you.</p>
           <button type="button" class="st-hint" id="st-hint" aria-controls="st-offer">click any words here to rewrite them</button>
           <p class="st-editing" id="st-editing" aria-live="polite" hidden></p>
           <div class="st-offer" id="st-offer" hidden>
@@ -120,16 +120,16 @@
             <span class="st-resume__detail" id="st-resume-detail"></span>
           </a>
           <button type="button" class="st-action" id="st-flow" aria-haspopup="dialog">
-            <span class="st-action__label">Tweak/CopyWrite Flow</span>
+            <span class="st-action__label">Work through tweaks</span>
             <span class="st-action__detail" id="st-flow-detail">the next page to tweak</span>
           </button>
-          <button type="button" class="st-action" id="studio-approvals" data-approvals aria-haspopup="dialog">
-            <span class="st-action__label">Copy-write Approval queue</span>
-            <span class="st-action__detail" id="studio-approvals-detail">the pages /tweak has applied</span>
+          <button type="button" class="st-action" id="studio-approvals" data-approvals aria-haspopup="dialog" hidden>
+            <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">Artist Review Status</span>
-            <span class="st-action__detail" id="st-status-detail">how far each surface has come</span>
+            <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. -->
@@ -150,7 +150,7 @@
         <div class="st-overlay" id="st-panel" hidden>
           <div class="st-dialog" role="dialog" aria-modal="true" aria-labelledby="st-panel-title">
             <div class="st-dialog__head">
-              <h2 class="st-dialog__title" id="st-panel-title" tabindex="-1">Tweak/CopyWrite Flow</h2>
+              <h2 class="st-dialog__title" id="st-panel-title" tabindex="-1">Work through tweaks</h2>
               <button type="button" class="st-close" data-close-panel>close</button>
             </div>
             <div class="st-dialog__body" id="st-panel-body"></div>

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

@@ -128,6 +128,8 @@
   const RANK_ORDER = { archon: 4, metic: 3, thetes: 2, xenos: 1 };
   const MAX_WORDS = 2000;  // the abandon/merge `reason` cap the routes apply anyway
 
+  // Also the floor for the approve door: a studio viewer who cannot pass a tweak
+  // is not shown the door (cosmetic; the approve and send-back routes decide).
   function canVerdict() {
     const rank = String((viewer && viewer.rank) || '').toLowerCase();
     return (RANK_ORDER[rank] ?? 0) >= RANK_ORDER.metic;
@@ -570,15 +572,31 @@
     const door = $('#studio-approvals');
     const Q = window.OTBApprovalQueue;
     const lib = window.OTBApprovalQueueLib;
-    if (!door || !Q || !lib) return;
+    if (!door || !Q || !lib) return false;
     approvals = Q.mount({
       api,
       apiBase: API,
       writes: { approve: WRITE_ROUTES.approve, sendBack: WRITE_ROUTES.sendBack },
       onCount: (n) => { const d = $('#studio-approvals-detail'); if (d) d.textContent = lib.doorDetail(n); },
     });
-    door.addEventListener('click', () => approvals.open());
+    // Nothing to approve means no dialog: the door's own detail line already
+    // says so, and a click on it just confirms it.
+    door.addEventListener('click', async () => {
+      const n = await approvals.refresh();
+      // Submitted-but-not-applied rounds still show in the dialog, so they count as something to see.
+      if (n === 0 && !approvals.notAppliedCount()) { toast('Nothing is waiting for your sign-off right now.'); return; }
+      approvals.open(undefined, { reload: false });
+    });
     approvals.refresh();
+    return true;
+  }
+
+  // The approve door is for artists who can pass a tweak (metic and up). Below
+  // that rank it never shows; the routes still decide who may (ADR 0016).
+  function showApprovals() {
+    const door = $('#studio-approvals');
+    if (!door || !canVerdict()) return;
+    if (mountApprovals()) door.hidden = false;
   }
 
   // ===========================================================================
@@ -682,7 +700,7 @@
 
   // ---- the small glass panels -----------------------------------------------
 
-  const TITLES = Object.freeze({ flow: 'Tweak/CopyWrite Flow', status: 'Artist Review Status', site: 'From the live site' });
+  const TITLES = Object.freeze({ flow: 'Work through tweaks', status: 'Needs to be reviewed', site: 'From the live site' });
 
   function flowHtml() {
     if (!home.next) {
@@ -725,7 +743,7 @@
     const asked = lib.askedLine(home.next && home.next.asked_pages);
     const flight = lib.inFlightRows(home.pages, new Date()).map((f) => `
       <li class="st-flight${f.stuck ? ' st-flight--stuck' : ''}">
-        <a class="st-flight__page" href="${escapeHtml(editorHref(f.page_id))}">${escapeHtml(f.title)}</a>
+        ${f.review && approvals ? `<a class="st-flight__page" href="#review" data-review-page="${escapeHtml(f.page_id)}">${escapeHtml(f.title)}</a>` : `<a class="st-flight__page" href="${escapeHtml(editorHref(f.page_id))}">${escapeHtml(f.title)}</a>`}
         <span class="st-flight__where">${escapeHtml(f.surface)}</span>
         <span class="st-flight__state">${escapeHtml(f.state)}${f.age ? ` · ${escapeHtml(f.age)}` : ''}${f.stuck ? ' · stuck' : ''}</span>
         ${f.release && canVerdict() ? `<button type="button" class="st-release" data-release-page="${escapeHtml(f.page_id)}" data-release-task="${escapeHtml(f.task_id || '')}">release</button>` : ''}
@@ -1021,6 +1039,8 @@
     if (overlay) {
       overlay.addEventListener('click', (ev) => {
         if (ev.target === overlay || ev.target.closest('[data-close-panel]')) { closePanel(); return; }
+        const review = ev.target.closest('[data-review-page]');
+        if (review && approvals) { ev.preventDefault(); const id = review.getAttribute('data-review-page'); closePanel(); approvals.open(id); return; }
         const rel = ev.target.closest('[data-release-page]');
         if (rel) { releasePage(rel.getAttribute('data-release-page'), rel.getAttribute('data-release-task'), rel); return; }
         const take = ev.target.closest('[data-take]');
@@ -1082,9 +1102,9 @@
 
   (async () => {
     startSky();
-    mountApprovals();
     const me = await api.request('GET', `${API}/me`);
     if (me.ok) viewer = me.data.builder || me.data;
+    showApprovals();
     bootHome(me.ok);
     // Reviews first (the richer craft), then flags — each newest-first within.
     const [reviews, flags] = await Promise.all([loadReviews(), loadFlags()]);

package/modules/hall-ui/public/studio.states.json

@@ -278,7 +278,7 @@
     },
     "approvals": {
       "auth": true,
-      "_": "The Approval queue (task 1004323): the studio's quick action opens the glass panel, 1 of 2, on the AFTER render of the applied page with the changed lines beside it. Against the kit's own stub it opens on its could-not-read line; populated, run it against the hall-preview harness (fixtures copy-desk__approvals.json, tasks__visuals.json and the two CANNED_WRITES). HALL_PREVIEW_VISUALS=<dir> serves real renders by the fixture's names.",
+      "_": "The Approval queue (task 1004323): the studio's quick action opens the glass panel, 1 of 2. The card is the changed lines, what each was beside what it is now, with Approve and ship and Send it back under them. Against the kit's own stub it opens on its could-not-read line; populated, run it against the hall-preview harness (fixtures copy-desk__approvals.json, tasks__visuals.json and the two CANNED_WRITES).",
       "actions": [
         [
           "wait",
@@ -297,13 +297,14 @@
         "visible": [
           ".aq-dialog",
           ".aq-eyebrow",
-          ".aq-render"
+          ".aq-line",
+          "[data-approve]"
         ]
       }
     },
     "approvals-before": {
       "auth": true,
-      "_": "The before/after switch on before: the page as it was, nothing marked.",
+      "_": "See it on the page, switched to before: the page as it was.",
       "actions": [
         [
           "wait",
@@ -317,6 +318,14 @@
           "wait",
           1200
         ],
+        [
+          "click",
+          "[data-peek]"
+        ],
+        [
+          "wait",
+          500
+        ],
         [
           "click",
           "[data-phase=\"before\"]"
@@ -336,7 +345,7 @@
     },
     "approvals-phone": {
       "auth": true,
-      "_": "The phone render (the view switch beside the lines).",
+      "_": "See it on the page, on the phone render.",
       "actions": [
         [
           "wait",
@@ -350,6 +359,14 @@
           "wait",
           1200
         ],
+        [
+          "click",
+          "[data-peek]"
+        ],
+        [
+          "wait",
+          500
+        ],
         [
           "click",
           "[data-device=\"phone\"]"
@@ -473,6 +490,39 @@
           ".aq-outcome--sent"
         ]
       }
+    },
+    "approvals-page": {
+      "auth": true,
+      "_": "See it on the page: the optional rendered page opens under the words, on the AFTER render.",
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "click",
+          "#studio-approvals"
+        ],
+        [
+          "wait",
+          1200
+        ],
+        [
+          "click",
+          "[data-peek]"
+        ],
+        [
+          "wait",
+          700
+        ]
+      ],
+      "expect": {
+        "visible": [
+          ".aq-dialog",
+          ".aq-line",
+          ".aq-render"
+        ]
+      }
     }
   },
   "reducedMotion": {