@bongos/core 1.19.1063 → 1.19.1065

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

@@ -0,0 +1,338 @@
+// modules/hall-ui/public/approval-queue.js — the Approval queue panel (task
+// 1004323 / BV2.TW12, goal 1000095; ADR 0341 D7 and D11).
+//
+// THE PIXEL CONTRACT. The wide glass dialog of docs/design/mocks/tweak-mode/
+// Main.dc.html: the queue position ("approval queue · 1 of 2"), the page name
+// and "· landing · 2 lines rewritten, applied", the before/after switch, close,
+// the applied page itself, then "approve and ship", "send it back" (which opens
+// a one-line note and "send"), "highlighted: the words you changed", and the
+// approved and sent-back lines. Its styles are approval-queue.css.
+//
+// THE PAGE IS A PICTURE OF THE APPLIED BRANCH. The panel shows the renders
+// /tweak attached to the round (GET /tasks/:id/visuals: before and after,
+// desktop and phone, light and dark), never a page rebuilt from the batch
+// (ADR 0341 builder pick 9, which keeps ADR 0233's "nothing renders a task
+// description as product copy" true). A word cannot be highlighted inside an
+// image, so the changed lines stand beside the render (under it on a phone),
+// each marked the artboard's way; a line the applier refused says so.
+//
+// A COMPONENT, NOT A PAGE. The studio opens it from a quick action today, and
+// the lofi studio home (task 1003971 / TW16) places the same panel without
+// rebuilding it: `OTBApprovalQueue.mount({ api, apiBase, writes, onCount })`
+// returns { open, close, refresh, count }. It writes ONLY through `writes`,
+// which the host passes from its own allowlist (studio.js WRITE_ROUTES
+// approve and sendBack), so the host's no-live-CMS test still sees every write
+// the room can make. Nothing here writes a string, a file or an asset.
+
+(() => {
+  'use strict';
+
+  const L = window.OTBApprovalQueueLib;
+
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  }
+
+  function errWords(data, fallback) {
+    const e = data && data.error;
+    const d = e && e.details;
+    return (d && d.what_this_means) || (e && e.message && e.message !== e.code ? e.message : null) || fallback;
+  }
+
+  function hallMode() {
+    const t = document.documentElement.getAttribute('data-theme');
+    if (t === 'dark' || t === 'light') return t;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  // On a phone the phone render is the one that reads; the switch still offers both.
+  function narrow() {
+    return !!(window.matchMedia && window.matchMedia('(max-width: 760px)').matches);
+  }
+
+  // A page id is <surface>:<page> (docs/page-inventory.json). The host's write
+  // routes put it in a path, so anything else is refused before a request.
+  const PAGE_ID_RE = /^[a-z0-9-]+:[a-z0-9-]+$/;
+
+  function mount({ api, apiBase = '/api/bongos', writes, onCount = null, root = document.body } = {}) {
+    if (!api || !writes || typeof writes.approve !== 'function' || typeof writes.sendBack !== 'function') {
+      throw new Error('OTBApprovalQueue.mount needs { api, writes: { approve, sendBack } }');
+    }
+
+    const state = {
+      open: false,
+      loaded: false,
+      loadError: null,
+      queue: [],
+      idx: 0,
+      view: { phase: 'after', device: narrow() ? 'phone' : 'desktop', mode: hallMode() },
+      renders: new Map(),   // task id -> render index, or 'loading' / 'failed'
+      outcome: new Map(),   // task id -> { kind: 'approved'|'sent', line }
+      noteOpen: false,
+      busy: false,
+      error: null,
+      opener: null,
+    };
+
+    const scrim = document.createElement('div');
+    scrim.className = 'aq-overlay';
+    scrim.hidden = true;
+    scrim.innerHTML = '<div class="aq-dialog" role="dialog" aria-modal="true" aria-labelledby="aq-title" tabindex="-1"></div>';
+    root.appendChild(scrim);
+    const dialog = scrim.querySelector('.aq-dialog');
+
+    const current = () => state.queue[state.idx] || null;
+
+    function countNow() {
+      return state.loaded ? state.queue.filter((q) => !state.outcome.has(q.task_id)).length : null;
+    }
+    function tellCount() {
+      if (typeof onCount === 'function') onCount(countNow());
+    }
+
+    // ---- reads ---------------------------------------------------------------
+
+    async function loadQueue() {
+      const res = await api.request('GET', `${apiBase}/copy-desk/approvals`);
+      if (!res.ok) {
+        state.loadError = errWords(res.data, 'The Approval queue could not be read just now.');
+        state.loaded = false;
+        return;
+      }
+      state.loadError = null;
+      state.loaded = true;
+      state.queue = (res.data && res.data.queue) || [];
+      if (state.idx >= state.queue.length) state.idx = 0;
+      tellCount();
+    }
+
+    async function loadRenders(item) {
+      if (!item || state.renders.has(item.task_id)) return;
+      state.renders.set(item.task_id, 'loading');
+      const res = await api.request('GET', `${apiBase}/tasks/${encodeURIComponent(item.task_id)}/visuals`);
+      state.renders.set(item.task_id, res.ok ? L.renderIndex(res.data && res.data.slots) : 'failed');
+      if (current() === item) paint();
+    }
+
+    // ---- paint ---------------------------------------------------------------
+
+    function pills(group, options, value, label) {
+      return `<div class="aq-flips" role="group" aria-label="${esc(label)}">${options.map((o) =>
+        `<button type="button" class="aq-flip" data-${group}="${esc(o)}" aria-pressed="${o === value ? 'true' : 'false'}">${esc(o)}</button>`).join('')}</div>`;
+    }
+
+    function frameHtml(item) {
+      const r = state.renders.get(item.task_id);
+      if (r === undefined || r === 'loading') return '<p class="aq-frame__note">Opening the rendered page…</p>';
+      if (r === 'failed') return '<p class="aq-frame__note">The renders could not be read just now. Close the queue and open it again.</p>';
+      const pick = L.pickRender(r, state.view);
+      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>';
+      }
+      const name = L.displayTitle(item);
+      const alt = `${name}, ${state.view.phase}, ${pick.device}, ${pick.mode}`;
+      const moved = pick.exact ? '' : `<p class="aq-frame__swap">No ${esc(state.view.device)} ${esc(state.view.mode)} render; showing ${esc(pick.device)} ${esc(pick.mode)}.</p>`;
+      return `${moved}<img class="aq-render aq-render--${esc(pick.device)}" src="${esc(pick.url)}" alt="${esc(alt)}">`;
+    }
+
+    function linesHtml(item) {
+      const rows = (item.lines || []).map((l) => L.lineRow(l, state.view.phase));
+      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' : ''}">
+          ${r.section ? `<span class="aq-line__section">${esc(r.section)}</span>` : ''}
+          <span class="aq-line__text">${r.marked ? `<mark class="aq-mark">${esc(r.text)}</mark>` : esc(r.text)}</span>
+          <span class="aq-line__aside">${esc(r.aside)}</span>
+        </li>`).join('')}</ol>`;
+    }
+
+    function footHtml(item) {
+      const done = state.outcome.get(item.task_id);
+      if (done) {
+        const next = state.queue.findIndex((q) => !state.outcome.has(q.task_id));
+        const nextBtn = next !== -1
+          ? `<button type="button" class="aq-ghost aq-ghost--small" data-next="${next}">open ${esc(L.displayTitle(state.queue[next]))}</button>`
+          : '';
+        return `<div class="aq-foot aq-foot--done"><p class="aq-outcome aq-outcome--${esc(done.kind)}" role="status">${esc(done.line)}</p>${nextBtn}</div>`;
+      }
+      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 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>`;
+      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}`;
+    }
+
+    function paint() {
+      if (!state.open) return;
+      const keepNote = document.getElementById('aq-note');
+      const noteValue = keepNote ? keepNote.value : '';
+      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…');
+        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>`;
+        return;
+      }
+      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>
+            ${linesHtml(item)}
+          </aside>
+        </div>
+        ${footHtml(item)}`;
+      const note = document.getElementById('aq-note');
+      if (note) { note.value = noteValue; }
+    }
+
+    // ---- writes (only through the host's allowlist) --------------------------
+
+    async function decide(kind) {
+      const item = current();
+      if (!item || state.busy || state.outcome.has(item.task_id) || !PAGE_ID_RE.test(String(item.page_id))) return;
+      let body = { task_id: String(item.task_id) };
+      if (kind === 'sent') {
+        const el = document.getElementById('aq-note');
+        const note = el ? el.value : '';
+        const problem = L.noteProblem(note);
+        if (problem) { state.error = problem; paint(); focusNote(); return; }
+        body = { ...body, note: note.replace(/\s+/g, ' ').trim() };
+      }
+      state.busy = true;
+      state.error = null;
+      paint();
+      try {
+        const url = kind === 'approved' ? writes.approve(item.page_id) : writes.sendBack(item.page_id);
+        const res = await api.request('POST', url, body);
+        if (!res.ok) {
+          state.error = errWords(res.data, 'That could not be recorded. Nothing changed.');
+          return;
+        }
+        state.outcome.set(item.task_id, { kind, line: kind === 'approved' ? L.approvedLine(item, res.data) : L.sentBackLine() });
+        state.noteOpen = false;
+        tellCount();
+      } catch (_) {
+        state.error = 'That could not be recorded. Nothing changed.';
+      } finally {
+        state.busy = false;
+        paint();
+        const status = dialog.querySelector('.aq-outcome') || dialog.querySelector('.aq-error');
+        if (status && status.focus) { status.setAttribute('tabindex', '-1'); status.focus(); }
+      }
+    }
+
+    function focusNote() {
+      const el = document.getElementById('aq-note');
+      if (el) el.focus();
+    }
+
+    // ---- open / close ----------------------------------------------------------
+
+    async function open() {
+      state.opener = document.activeElement;
+      state.open = true;
+      state.error = null;
+      state.noteOpen = false;
+      scrim.hidden = false;
+      document.documentElement.classList.add('aq-open');
+      paint();
+      dialog.focus();
+      await loadQueue();
+      paint();
+      const first = dialog.querySelector('[data-phase][aria-pressed="true"]') || dialog.querySelector('[data-close]');
+      if (first) first.focus();
+    }
+
+    function close() {
+      state.open = false;
+      scrim.hidden = true;
+      document.documentElement.classList.remove('aq-open');
+      // A decided page leaves the queue for good; the next open starts fresh.
+      if (state.outcome.size) {
+        state.queue = state.queue.filter((q) => !state.outcome.has(q.task_id));
+        state.outcome.clear();
+        state.idx = 0;
+      }
+      if (state.opener && state.opener.focus) state.opener.focus();
+    }
+
+    // A switch repaints the dialog, so the pressed pill is focused again: a
+    // keyboard reader stays where they were instead of falling to the page.
+    function flip(group, value) {
+      state.view[group] = value;
+      paint();
+      const again = dialog.querySelector(`[data-${group}="${value}"]`);
+      if (again && again.focus) again.focus();
+    }
+
+    scrim.addEventListener('click', (ev) => {
+      if (ev.target === scrim) return close();
+      const t = ev.target.closest('button');
+      if (!t || t.disabled) return undefined;
+      if (('close' in t.dataset)) return close();
+      if (t.dataset.phase) return flip('phase', t.dataset.phase);
+      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 (('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; }
+      return undefined;
+    });
+
+    scrim.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Escape') { ev.preventDefault(); close(); return; }
+      if (ev.key === 'Enter' && ev.target && ev.target.id === 'aq-note') { ev.preventDefault(); decide('sent'); return; }
+      if (ev.key !== 'Tab') return;
+      // Keep focus inside the dialog while it is open (aria-modal).
+      const f = [...dialog.querySelectorAll('button:not([disabled]), input, [tabindex="0"]')];
+      if (!f.length) return;
+      const first = f[0];
+      const last = f[f.length - 1];
+      if (ev.shiftKey && document.activeElement === first) { ev.preventDefault(); last.focus(); }
+      else if (!ev.shiftKey && document.activeElement === last) { ev.preventDefault(); first.focus(); }
+    });
+
+    scrim.addEventListener('input', (ev) => {
+      if (ev.target && ev.target.id === 'aq-note' && state.error) {
+        state.error = null;
+        const e = dialog.querySelector('.aq-error');
+        if (e) e.remove();
+      }
+    });
+
+    return {
+      open,
+      close,
+      async refresh() { await loadQueue(); paint(); return countNow(); },
+      count: countNow,
+    };
+  }
+
+  const exported = { mount };
+  if (typeof window !== 'undefined') window.OTBApprovalQueue = exported;
+  if (typeof module !== 'undefined' && module.exports) module.exports = exported;
+})();

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

@@ -73,9 +73,42 @@
 
 /* Everything the reader acts on sits above the lamp. */
 .studio-head,
+.studio-doors,
 .studio-focus,
 .studio-rest { position: relative; z-index: 1; }
 
+/* The quick actions (task 1004323 / TW12): the master design's 72px glass rows
+   (docs/design/mocks/tweak-mode/Main.dc.html), in the hall's own tokens so they
+   read in both modes. One today, the Approval queue; the lofi home (TW16)
+   brings the rest and the night room around them. */
+.studio-doors {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: min(420px, 100%);
+  margin-bottom: clamp(22px, 4vh, 40px);
+}
+.studio-door {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 3px;
+  min-height: 72px;
+  padding: 0 24px;
+  box-sizing: border-box;
+  border-radius: 22px;
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--font-body);
+  background: var(--glass);
+  border: 1px solid var(--rule-soft);
+  color: var(--ink);
+}
+.studio-door:hover { border-color: var(--ink-faint); }
+.studio-door__label { font-size: 17px; color: var(--ink); }
+.studio-door__detail { font-size: 13px; color: var(--ink-soft); }
+
 /* The head: a mono eyebrow naming the mode, then the greeting as the display
    voice (Manrope light, tight), then the live count as a quiet sub-line. */
 .studio-head { margin-bottom: clamp(22px, 4vh, 40px); max-width: var(--measure); }

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

@@ -14,6 +14,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
   <link rel="stylesheet" href="/builders/studio.css">
+  <link rel="stylesheet" href="/builders/approval-queue.css">
 </head>
 <!-- data-fullscreen-switch opts into the shell's full-screen switch (task
      1004327): the studio in the hall chrome by default, and one button in the top
@@ -44,6 +45,18 @@
           <p class="studio-sub" id="studio-sub">A quiet place to tend the words and art the project shows people.</p>
         </div>
 
+        <!-- The quick actions. One today: the Approval queue (task 1004323 / TW12),
+             the pages /tweak has applied, waiting for the artist to approve or
+             send back. It opens the glass panel in place (approval-queue.js);
+             the lofi studio home (task 1003971 / TW16) moves this door into its
+             own quick actions and keeps the panel as it is. -->
+        <div class="studio-doors">
+          <button type="button" class="studio-door" id="studio-approvals" data-approvals aria-haspopup="dialog">
+            <span class="studio-door__label">Approval queue</span>
+            <span class="studio-door__detail" id="studio-approvals-detail">the pages /tweak has applied</span>
+          </button>
+        </div>
+
         <!-- The one thing to tend now. Rendered by studio.js; the markup here is
              the loading state (and the no-JS fallback), never an empty panel. -->
         <section class="studio-focus" id="studio-focus" aria-live="polite">
@@ -80,6 +93,10 @@
      and a fourth hand-rolled <figure> is what the kit exists to stop. -->
 <script src="/builders/hall-visual.js?v=2026-09-16-visual1"></script>
 <script src="/builders/hall-kit.js"></script>
-<script src="/builders/studio.js?v=2026-09-10-studio2"></script>
+<!-- The Approval queue panel (task 1004323): its pure rules, then the panel.
+     studio.js mounts it with its own WRITE_ROUTES. -->
+<script src="/builders/approval-queue-lib.js"></script>
+<script src="/builders/approval-queue.js"></script>
+<script src="/builders/studio.js?v=2026-09-28-approvals"></script>
 </body>
 </html>

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

@@ -81,6 +81,17 @@
     patch: (reviewId) => `${API}/tasks/${reviewId}`,
     create: () => `${API}/tasks`,
     merge: (reviewId) => `${API}/tasks/${reviewId}/merge`,
+    // The Approval queue's two decisions (task 1004323 / BV2.TW12, ADR 0341
+    // D7), handed to the panel (approval-queue.js), which writes through
+    // nothing else. Both move the page's TWEAK ROUND through the lifecycle
+    // port: approve lets the applied branch land the ordinary way, send-back
+    // returns it to /tweak with the artist's note. Neither writes a live
+    // string: the words reach the page only through that shipped branch.
+    // The route decides who may (the author or an artist), not the rank. The
+    // page id is the inventory's <surface>:<page>, which the panel checks, and
+    // 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 verdict floor, read off /me. Local like goals-render.js's copy — four
@@ -526,7 +537,26 @@
     if (ev.target && ev.target.id === 'studio-words') verdictError('');
   });
 
+  // The Approval queue (task 1004323): the panel is a component, mounted here
+  // with the two decisions above, and its door says how many pages wait.
+  let approvals = null;
+  function mountApprovals() {
+    const door = $('#studio-approvals');
+    const Q = window.OTBApprovalQueue;
+    const lib = window.OTBApprovalQueueLib;
+    if (!door || !Q || !lib) return;
+    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());
+    approvals.refresh();
+  }
+
   (async () => {
+    mountApprovals();
     const me = await api.request('GET', `${API}/me`);
     if (me.ok) viewer = me.data.builder || me.data;
     // Reviews first (the richer craft), then flags — each newest-first within.

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

@@ -115,6 +115,204 @@
           ]
         ]
       }
+    },
+    "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.",
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "click",
+          "#studio-approvals"
+        ],
+        [
+          "wait",
+          1200
+        ]
+      ],
+      "expect": {
+        "visible": [
+          ".aq-dialog",
+          ".aq-eyebrow",
+          ".aq-render"
+        ]
+      }
+    },
+    "approvals-before": {
+      "auth": true,
+      "_": "The before/after switch on before: the page as it was, nothing marked.",
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "click",
+          "#studio-approvals"
+        ],
+        [
+          "wait",
+          1200
+        ],
+        [
+          "click",
+          "[data-phase=\"before\"]"
+        ],
+        [
+          "wait",
+          700
+        ]
+      ],
+      "expect": {
+        "visible": [
+          ".aq-dialog",
+          ".aq-eyebrow",
+          ".aq-render"
+        ]
+      }
+    },
+    "approvals-phone": {
+      "auth": true,
+      "_": "The phone render (the view switch beside the lines).",
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "click",
+          "#studio-approvals"
+        ],
+        [
+          "wait",
+          1200
+        ],
+        [
+          "click",
+          "[data-device=\"phone\"]"
+        ],
+        [
+          "wait",
+          700
+        ]
+      ],
+      "expect": {
+        "visible": [
+          ".aq-dialog",
+          ".aq-eyebrow",
+          ".aq-render"
+        ]
+      }
+    },
+    "approvals-note": {
+      "auth": true,
+      "_": "Send it back: the one-line note opens in place.",
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "click",
+          "#studio-approvals"
+        ],
+        [
+          "wait",
+          1200
+        ],
+        [
+          "click",
+          "[data-open-note]"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#aq-note",
+          "[data-send]"
+        ]
+      }
+    },
+    "approved": {
+      "auth": true,
+      "_": "Approve and ship: the artboard's approved line, and the next page named.",
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "click",
+          "#studio-approvals"
+        ],
+        [
+          "wait",
+          1200
+        ],
+        [
+          "click",
+          "[data-approve]"
+        ],
+        [
+          "wait",
+          600
+        ]
+      ],
+      "expect": {
+        "visible": [
+          ".aq-outcome--approved"
+        ]
+      }
+    },
+    "sent-back": {
+      "auth": true,
+      "_": "Sent back with a note.",
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "click",
+          "#studio-approvals"
+        ],
+        [
+          "wait",
+          1200
+        ],
+        [
+          "click",
+          "[data-open-note]"
+        ],
+        [
+          "wait",
+          200
+        ],
+        [
+          "fill",
+          "#aq-note",
+          "The hero line is too long on a phone."
+        ],
+        [
+          "click",
+          "[data-send]"
+        ],
+        [
+          "wait",
+          600
+        ]
+      ],
+      "expect": {
+        "visible": [
+          ".aq-outcome--sent"
+        ]
+      }
     }
   },
   "reducedMotion": {