@bongos/core 1.20.48 → 1.20.49

package/modules/hall-ui/public/criterion-uat-ui.js

@@ -0,0 +1,280 @@
+// criterion-uat-ui.js — the UAT on a goal's criteria, in the hall (task 1004402,
+// piece 2 of ADR 0351; piece 1, task 1004392, is the rule and the API).
+//
+// WHY. A criterion no longer closes because its linked tasks shipped. Once they
+// have, it reads AWAITING UAT, and it closes only when someone who did not ship
+// the work tries it on the live site and signs it off with a recording (or, for a
+// criterion marked backend-only, a sign-off without one). Before this file that
+// was reachable only from a Claude session (/goal-uat); this is the same act for
+// a person in a browser.
+//
+// WHAT IT DRAWS, per criterion row (goals-render.js critListHtml asks it):
+//   - a STATE pill in the server's own words (Awaiting UAT, Satisfied (UAT), …)
+//     and a Backend-only tag — never re-derived here: `uat_state` and
+//     `backend_only` come from GET /goals/:id, and a server too old to send them
+//     falls back to the plain satisfied/open reading;
+//   - the ACTION: "Test and sign off" on an Awaiting UAT row, "See the UAT" on a
+//     row a UAT closed, and on an OPEN row in the full view the backend-only
+//     switch (the server refuses it once work has shipped, and says why).
+// Opening a row loads GET /done-when/:id/uat into a panel under it: the three
+// checks (Code, Live, UAT), the recording if there is one, and the sign-off form.
+//
+// THE SERVER IS THE WALL. Every refusal (you shipped this work, not live yet,
+// too big, wrong file type, backend-only locked) is shown in the words the server
+// sent; nothing here decides who may sign. A control shown to someone who may not
+// use it gets an honest refusal, never a silent no-op.
+//
+// Loaded before goals-render.js (goals.html); pure browser code, no build step.
+// The vocabulary helpers are exported for the page test (tests/criterion_uat_ui.mjs).
+(function () {
+  'use strict';
+
+  // The labels, identical to modules/lifecycle/criterion-uat.js stateLabel (the
+  // browser cannot require server code; tests/criterion_uat_ui.mjs holds the two
+  // equal).
+  const STATE_LABELS = {
+    open: 'Open',
+    awaiting_uat: 'Awaiting UAT',
+    satisfied_uat: 'Satisfied (UAT)',
+    satisfied_backend: 'Satisfied (backend sign-off)',
+    satisfied_override: 'Satisfied (override)',
+    closed_before_uat: 'Closed before UAT',
+  };
+  const MAX_BYTES = 100 * 1024 * 1024;
+  const TYPES = ['video/mp4', 'video/webm'];
+
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]));
+  }
+
+  // The state a row reads as. A server older than the UAT rule sends no
+  // uat_state; then satisfied/open is the whole truth and no UAT control shows.
+  function stateOf(c) {
+    if (c && c.uat_state && STATE_LABELS[c.uat_state]) return c.uat_state;
+    return c && c.satisfied ? 'legacy_satisfied' : 'open';
+  }
+  function isAwaiting(c) { return stateOf(c) === 'awaiting_uat'; }
+
+  // The pill + tag that follow the criterion text. Open rows carry no pill (the
+  // empty mark already says open), and a legacy server gets nothing new.
+  function badgesHtml(c) {
+    const s = stateOf(c);
+    const pill = (s === 'open' || s === 'legacy_satisfied') ? ''
+      : `<span class="crit-state crit-state--${esc(s)}">${esc(STATE_LABELS[s])}</span>`;
+    const tag = c && c.backend_only ? '<span class="crit-tag" title="No screen to record: this is signed off without a video">Backend-only</span>' : '';
+    return pill + tag;
+  }
+
+  // The trailing action. canReview = the viewer may sign off (Metic+; the server
+  // re-checks). full = the dedicated completion view, where the backend-only
+  // switch lives (it is an authoring act, not a glance).
+  function actionHtml(c, { canReview, full }) {
+    const id = esc(String(c.id));
+    const s = stateOf(c);
+    if (s === 'awaiting_uat') {
+      return canReview
+        ? `<button type="button" class="crit__confirm" data-uat-open="${id}" aria-expanded="false">Test and sign off</button>`
+        : '<span class="crit__flag" title="Its work has shipped; someone who did not build it needs to try it on the live site">Awaiting UAT</span>';
+    }
+    if (s === 'satisfied_uat' || s === 'satisfied_backend') {
+      return `<button type="button" class="crit__link" data-uat-open="${id}" aria-expanded="false">See the UAT</button>`;
+    }
+    if (s === 'open' && full && canReview && c.uat_state) {
+      return c.backend_only
+        ? `<button type="button" class="crit__link" data-uat-backend="${id}" data-on="0" title="It needs a recording again">Not backend-only</button>`
+        : `<button type="button" class="crit__link" data-uat-backend="${id}" data-on="1" title="For a criterion with nothing to see on screen: it will be signed off without a recording">Mark backend-only</button>`;
+    }
+    return '';
+  }
+
+  // ── the panel ──────────────────────────────────────────────────────────────
+
+  function fmtDate(v) {
+    const d = new Date(v);
+    return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+  }
+
+  function liveLine(live) {
+    if (live == null) return '';
+    if (!live.available) return 'This site cannot tell on its own. Confirm below that you tried it on the live site.';
+    if (live.live) return 'Running on the live site.';
+    const ids = (live.not_live || []).map((t) => `#${esc(t.task_id)}`).join(', ');
+    return `Shipped but not on the live site yet${ids ? ` (${ids})` : ''}. Sign off once it is deployed.`;
+  }
+
+  function checkRow(ok, label, text) {
+    return `<li class="uat-check${ok ? ' uat-check--ok' : ''}"><span class="uat-check__mark" aria-hidden="true">${ok ? '✓' : '·'}</span>`
+      + `<span class="uat-check__label">${label}</span><span class="uat-check__text">${text}</span></li>`;
+  }
+
+  function signoffText(s) {
+    if (!s) return '';
+    const who = esc(s.signed_off_by_login || `builder ${s.signed_off_by}`);
+    const kind = s.kind === 'uat' ? 'Tried on the live site' : 'Signed off (backend)';
+    return `${kind} by ${who} on ${esc(fmtDate(s.created_at))}${s.note ? ` — “${esc(s.note)}”` : ''}`;
+  }
+
+  function recordingHtml(s, apiBase) {
+    if (!s || !s.recording_file) return '';
+    const src = `${apiBase}/criterion-uats/recordings/${encodeURIComponent(s.recording_file)}`;
+    return `<video class="uat-video" controls preload="metadata" src="${esc(src)}">`
+      + `<a href="${esc(src)}">Open the recording</a></video>`;
+  }
+
+  // The panel body, from GET /done-when/:id/uat. Pure so the test can render it.
+  function panelHtml(view, { apiBase, canReview }) {
+    const c = view.checks || {};
+    const awaiting = view.uat_state === 'awaiting_uat';
+    const uatText = c.uat ? signoffText(c.uat)
+      : (c.stale_uat ? `An earlier sign-off (${signoffText(c.stale_uat)}) no longer counts: more work shipped after it.` : 'Not yet.');
+    const codeText = c.code ? 'Every linked task is done.' : 'Some linked work is still open.';
+    const checks = `<ul class="uat-checks">`
+      + checkRow(!!c.code, 'Code', esc(codeText))
+      + (awaiting ? checkRow(!!(c.live && c.live.available && c.live.live), 'Live', liveLine(c.live)) : '')
+      + checkRow(!!c.uat, view.backend_only ? 'Sign-off' : 'UAT', uatText)
+      + '</ul>';
+    const video = recordingHtml(c.uat || c.stale_uat, apiBase);
+    if (!awaiting || !canReview) return checks + video;
+
+    const id = esc(String(view.criterion.id));
+    const needsAttest = !(c.live && c.live.available);
+    const file = view.backend_only ? ''
+      : `<label class="uat-field"><span>Screen recording of you doing this on the live site (mp4 or webm, up to 100 MB)</span>`
+        + `<input type="file" accept="video/mp4,video/webm" data-uat-file="${id}"></label>`;
+    const attest = needsAttest
+      ? `<label class="uat-check-input"><input type="checkbox" data-uat-attest="${id}"> I tried this on the live site</label>` : '';
+    return checks + video + `<form class="uat-form" data-uat-form="${id}" novalidate>`
+      + (view.backend_only ? '<p class="uat-hint">Backend-only: nothing to record. Check it the way it can be checked (a log, a report, a test against the live site) and say how below.</p>' : '')
+      + file
+      + `<label class="uat-field"><span>${view.backend_only ? 'How you checked it' : 'What you checked (optional)'}</span>`
+      + `<textarea rows="2" maxlength="2000" data-uat-note="${id}"></textarea></label>`
+      + attest
+      + `<p class="uat-error" role="alert" data-uat-error="${id}" hidden></p>`
+      + `<button type="submit" class="crit__confirm">${view.backend_only ? 'Sign off' : 'Upload and sign off'}</button>`
+      + '</form>';
+  }
+
+  // The server's own sentence for a refusal, else a plain fallback. The envelope
+  // is { error: { code, message } }; the API client may also hand it back flat.
+  function refusalText(data, status) {
+    const e = data && data.error;
+    const msg = e && typeof e === 'object' ? e.message : null;
+    if (msg && msg !== (e && e.code)) return msg;
+    if (status === 413) return 'The recording is over the 100 MB cap. Record a shorter pass, or lower the resolution.';
+    if (status === 403) return 'Only a Metic or an Archon who did not ship this work can sign it off. Ask someone else on the goal to try it.';
+    return `That did not go through (${status || 'error'}). Try again.`;
+  }
+
+  // Screen a chosen file before sending 100 MB anywhere.
+  function checkFile(file) {
+    if (!file) return 'Choose the recording first.';
+    if (!TYPES.includes(file.type)) return 'A UAT recording must be an mp4 or webm video.';
+    if (file.size > MAX_BYTES) return 'The recording is over the 100 MB cap. Record a shorter pass, or lower the resolution.';
+    return null;
+  }
+
+  // wire(root, deps) — one delegated listener set on a criteria container.
+  // deps: { apiBase, getJSON, postJSON, putJSON, canReview(), toast, reload }
+  function wire(root, deps) {
+    if (!root || root.__uatWired) return;
+    root.__uatWired = true;
+
+    const showError = (id, text) => {
+      const el = root.querySelector(`[data-uat-error="${CSS.escape(id)}"]`);
+      if (el) { el.textContent = text; el.hidden = !text; }
+    };
+
+    async function openPanel(btn) {
+      const id = btn.dataset.uatOpen;
+      const row = btn.closest('.crit');
+      if (!row) return;
+      const existing = row.querySelector('.uat-panel');
+      if (existing) { existing.remove(); btn.setAttribute('aria-expanded', 'false'); return; }
+      const panel = document.createElement('div');
+      panel.className = 'uat-panel';
+      panel.textContent = 'Loading…';
+      row.appendChild(panel);
+      btn.setAttribute('aria-expanded', 'true');
+      try {
+        const view = await deps.getJSON(`${deps.apiBase}/done-when/${encodeURIComponent(id)}/uat`);
+        panel.innerHTML = panelHtml(view, { apiBase: deps.apiBase, canReview: deps.canReview() });
+      } catch (err) {
+        if (err && err.message === 'redirecting to auth') return;
+        panel.textContent = refusalText(err && err.data, err && err.status);
+      }
+    }
+
+    async function submit(form) {
+      const id = form.dataset.uatForm;
+      const btn = form.querySelector('button[type="submit"]');
+      const fileInput = form.querySelector('[data-uat-file]');
+      const note = (form.querySelector('[data-uat-note]') || {}).value || '';
+      const attestBox = form.querySelector('[data-uat-attest]');
+      showError(id, '');
+      const backend = !fileInput;
+      const file = fileInput && fileInput.files && fileInput.files[0];
+      if (!backend) { const bad = checkFile(file); if (bad) return showError(id, bad); }
+      if (backend && !note.trim()) return showError(id, 'Say how you checked it.');
+      if (attestBox && !attestBox.checked) return showError(id, 'Confirm that you tried it on the live site.');
+      const label = btn.textContent;
+      btn.disabled = true;
+      try {
+        let recording = null;
+        if (!backend) {
+          btn.textContent = 'Uploading…';
+          const res = await fetch(`${deps.apiBase}/done-when/${encodeURIComponent(id)}/uat/recording`, {
+            method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': file.type }, body: file,
+          });
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok) { showError(id, refusalText(data, res.status)); return; }
+          recording = data.recording;
+        }
+        btn.textContent = 'Signing off…';
+        const body = { kind: backend ? 'backend_signoff' : 'uat' };
+        if (recording) body.recording = recording;
+        if (note.trim()) body.note = note.trim();
+        if (attestBox && attestBox.checked) body.live_attested = true;
+        const out = await deps.postJSON(`${deps.apiBase}/done-when/${encodeURIComponent(id)}/uat`, body);
+        deps.toast(out && out.achieved_goals && out.achieved_goals.length
+          ? 'Signed off. That was the last criterion, so this goal is achieved.'
+          : (out && out.criterion_closed ? 'Signed off. The criterion is closed.' : 'Signed off.'));
+        await deps.reload();
+      } catch (err) {
+        if (err && err.message === 'redirecting to auth') return;
+        showError(id, refusalText(err && err.data, err && err.status));
+      } finally {
+        if (btn.isConnected) { btn.disabled = false; btn.textContent = label; }
+      }
+    }
+
+    async function toggleBackend(btn) {
+      const id = btn.dataset.uatBackend;
+      const on = btn.dataset.on === '1';
+      btn.disabled = true;
+      try {
+        await deps.putJSON(`${deps.apiBase}/done-when/${encodeURIComponent(id)}/backend-only`, { backend_only: on });
+        deps.toast(on ? 'Marked backend-only: it will be signed off without a recording.' : 'It needs a recording again.');
+        await deps.reload();
+      } catch (err) {
+        if (err && err.message === 'redirecting to auth') return;
+        deps.toast(refusalText(err && err.data, err && err.status));
+        btn.disabled = false;
+      }
+    }
+
+    root.addEventListener('click', (e) => {
+      const open = e.target.closest('[data-uat-open]');
+      if (open) { e.preventDefault(); openPanel(open); return; }
+      const flag = e.target.closest('[data-uat-backend]');
+      if (flag) { e.preventDefault(); toggleBackend(flag); }
+    });
+    root.addEventListener('submit', (e) => {
+      const form = e.target.closest('[data-uat-form]');
+      if (form) { e.preventDefault(); submit(form); }
+    });
+  }
+
+  const api = { STATE_LABELS, stateOf, isAwaiting, badgesHtml, actionHtml, panelHtml, refusalText, checkFile, wire };
+  if (typeof window !== 'undefined') window.OTBCriterionUat = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+})();

package/modules/hall-ui/public/goal-map.html

@@ -126,11 +126,13 @@
 </footer>
 
 <script src="/builders/idea-objects.js?v=2026-09-27-split"></script>
-<script src="/builders/sky-data.js?v=2026-09-27-split"></script>
+<!-- task 1004402: the UAT state words the rings share with the goal page. -->
+<script src="/builders/criterion-uat-ui.js?v=2026-09-30-uat1"></script>
+<script src="/builders/sky-data.js?v=2026-09-30-uat1"></script>
 <script src="/builders/sky-layout.js?v=2026-09-27-split"></script>
 <script src="/builders/sky-draw.js?v=2026-09-27-split"></script>
-<script src="/builders/sky-interaction.js?v=2026-09-27-split"></script>
-<script src="/builders/sky-panel.js?v=2026-09-27-split"></script>
+<script src="/builders/sky-interaction.js?v=2026-09-30-uat1"></script>
+<script src="/builders/sky-panel.js?v=2026-09-30-uat1"></script>
 <script src="/builders/sky-composer.js?v=2026-09-27-split"></script>
 <script src="/builders/sky-tour.js?v=2026-09-27-split"></script>
 </body>

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

@@ -450,7 +450,7 @@
   // is passed straight through; workTabs is a GETTER because it is reassigned
   // after boot and a renderer must see the current controller, not the null it
   // held here at startup. This call sits AFTER every declaration it passes.
-  const { GOAL_SORTS, WORK_SORT_HEADERS, bulk, errCode, errDetails, friendlyClaimError, goalSel, goalSelTotal, loadDetail, loadDirectory, loadGoalTasks, pagers, reflectSortHeaders, renderDetail, renderGoalBulkToolbar, renderList, renderTodoCards, renderWork } = window.OTBGoalsRender({
+  const { GOAL_SORTS, WORK_SORT_HEADERS, bulk, canConfirmCriteria, errCode, errDetails, friendlyClaimError, goalSel, goalSelTotal, loadDetail, loadDirectory, loadGoalTasks, pagers, reflectSortHeaders, renderDetail, renderGoalBulkToolbar, renderList, renderTodoCards, renderWork } = window.OTBGoalsRender({
     API, claimAction, copyText, curLabel, getJSON, patchJSON, postJSON, sameId, selfId, state,
     get workTabs() { return workTabs; },
   });
@@ -550,44 +550,26 @@
   // (withDetail=false) instead reveals detail via a per-criterion <details> expand
   // (BV1.R79) so the full text is one click away, not hover-only.
 
-  // task 1002164 — confirm a pending-review criterion straight from the hall
-  // (POST /done-when/:id/satisfy, Metic+). This is the in-hall replacement for
-  // the /goal-review LLM skill: confirming the goal's LAST open criterion flips
-  // it open→achieved server-side, which the forced detail reload then reflects.
-  const pendingConfirms = new Set();
-  async function confirmCriterion(critId, btn) {
-    if (pendingConfirms.has(critId)) return;
-    pendingConfirms.add(critId);
-    const label = btn ? btn.textContent : '';
-    if (btn) { btn.disabled = true; btn.textContent = 'Confirming…'; }
-    try {
-      const res = await postJSON(`${API}/done-when/${encodeURIComponent(critId)}/satisfy`, {});
-      toast(res && res.goal_achieved ? 'Criterion confirmed — that was the last one, so this goal is achieved.' : 'Criterion confirmed.');
-      if (state.current != null) {
-        await loadDetail(state.current, { force: true });
-        renderDetail(state.current);
-      }
-    } catch (err) {
-      if (err && err.message === 'redirecting to auth') return;
-      const code = err && err.data && err.data.error;
-      // POST /done-when/:id/satisfy gates on criterion.satisfy since BV1.R105, so the
-      // denial code is now 'permission_forbidden'; 'rank_forbidden' is kept for an
-      // instance still on a pre-R105 core (the doorway is versioned, ADR 0083).
-      const denial = code && (code.code || code);
-      // task 1004392 (ADR 0351): a criterion closes on a UAT now, and a bare
-      // confirm is refused as an override with no reason. Say that, rather than
-      // "could not confirm (400)"; the UAT controls themselves are task 1004402.
-      const reason = denial === 'override_reason_required'
-        ? 'Criteria now close on a UAT: someone who did not ship the work tests it on the live site and signs it off with /goal-uat.'
-        : (denial === 'permission_forbidden' || denial === 'rank_forbidden')
-          ? 'Confirming a criterion needs Metic rank or higher.'
-          : `Could not confirm that criterion (${(err && err.status) || 'error'}).`;
-      toast(reason);
-      if (btn) { btn.disabled = false; btn.textContent = label; }
-    } finally {
-      pendingConfirms.delete(critId);
-    }
+  // task 1004402 (ADR 0351) — the UAT on a criterion, from the hall. The old
+  // Confirm button (a bare POST /satisfy) is gone: a criterion closes on a UAT
+  // sign-off now, and /satisfy is the recorded override. criterion-uat-ui.js
+  // owns the panel, the upload and the sign-off; this page hands it its I/O.
+  async function putJSON(path, body) {
+    const res = await api.request('PUT', path, { body: body || {} });
+    const data = res.data || {};
+    if (!res.ok) { const e = new Error(`${path} → ${res.status}`); e.status = res.status; e.data = data; throw e; }
+    return data;
   }
+  const uatDeps = {
+    apiBase: API, getJSON, postJSON, putJSON, toast,
+    // The one Metic+ gate the criteria rows already use (goals-render.js).
+    canReview: () => canConfirmCriteria(),
+    reload: async () => {
+      if (state.current == null) return;
+      await loadDetail(state.current, { force: true });
+      renderDetail(state.current);
+    },
+  };
 
   /* ----- Members (band column + #/goal/N/members full view) ----- */
 
@@ -1082,13 +1064,10 @@
   });
   // task 1002425 — the goal's bulk-action toolbar.
   bulk.wire();
-  // task 1002164 — Confirm on a pending-review criterion, in both the capped
-  // band column and the dedicated #/goal/N/completion view.
+  // task 1004402 — the UAT controls, in both the capped band column and the
+  // dedicated #/goal/N/completion view.
   ['#goal-completion-body', '#goal-completion-full'].forEach((sel) => {
-    $(sel)?.addEventListener('click', (e) => {
-      const btn = e.target.closest('[data-confirm-crit]');
-      if (btn) { e.preventDefault(); confirmCriterion(btn.dataset.confirmCrit, btn); }
-    });
+    if (window.OTBCriterionUat) window.OTBCriterionUat.wire($(sel), uatDeps);
   });
   // task 1953 — Approve/Deny on the goal's own pending-requests panel.
   $('#goal-pending')?.addEventListener('click', (e) => {

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

@@ -30,6 +30,9 @@
       readinessOf, EMPTY_ROLLUP, goalRollLine, matchesTodoSearch,
       msOf, taskActivityMs, subtitleAttr, subtitleLine, applyGoalProse } = window.OTBGoalsLib;
     const forestRender = window.OTBGoalForestRender(ctx);
+    // task 1004402 — criterion-uat-ui.js. If that script failed to load, the page
+    // still draws its criteria (state by satisfied/open, no UAT controls).
+    const uatUi = window.OTBCriterionUat || { isAwaiting: () => false, badgesHtml: () => '', actionHtml: () => '' };
 
   const CONFLICT_CAP = 3;
   // task 1828 — the band's Completion / Members / Conflicts columns each cap
@@ -673,7 +676,10 @@
       </div>`;
   }
   function completionSummaryHtml(g, crit, sat, ringSize, criterionlessTaskCount, openTasks) {
+    // task 1004402: "met and ready to confirm" became Awaiting UAT (ADR 0351). A
+    // server too old to send uat_state still gets the old sentence.
     const pending = crit.filter(isPending).length;
+    const awaiting = crit.filter(uatUi.isAwaiting).length;
     // task 1002164 — an open goal used to punt confirmation to the /goal-review
     // CLI skill here; confirming now happens on this page, so the line reports
     // what is actually actionable instead of naming a command.
@@ -682,11 +688,14 @@
     // repeating the criterion sentence. Satisfied criteria plus an open goal is
     // precisely the state that reads as a bug when the page will not explain it.
     const held = openTasks && openTasks.total ? openTasks.total : 0;
-    const openLine = pending
-      ? `${fmtNum(pending)} criteri${pending === 1 ? 'on is' : 'a are'} met and ready to confirm.`
-      : (held
-        ? `Open — every criterion can be satisfied and the goal still will not close while work is unfinished.`
-        : 'Open — a criterion becomes confirmable once every task linked to it has shipped.');
+    const uatMode = crit.some((c) => c.uat_state);
+    const openLine = awaiting
+      ? `${fmtNum(awaiting)} criteri${awaiting === 1 ? 'on is' : 'a are'} awaiting UAT: the work has shipped, and someone who did not build it now tries it on the live site.`
+      : (pending && !uatMode ? `${fmtNum(pending)} criteri${pending === 1 ? 'on is' : 'a are'} met and ready to confirm.`
+        : (held
+          ? `Open — every criterion can be satisfied and the goal still will not close while work is unfinished.`
+          : (uatMode ? 'Open — a criterion is ready for its UAT once every task linked to it has shipped.'
+            : 'Open — a criterion becomes confirmable once every task linked to it has shipped.')));
     const line = g.status === 'achieved' ? 'Goal achieved — every criterion confirmed.'
       : (g.status === 'archived' ? 'Archived.' : openLine);
     const unlinked = crit.length > 0 && criterionlessTaskCount > 0
@@ -706,18 +715,18 @@
     if (!list.length) return emptyStateHtml('No done-when criteria yet.');
     return `<ul class="crit-list${withDetail ? ' crit-list--full' : ''}">${list.map((c) => {
       const parts = window.OTB.splitCriterion ? window.OTB.splitCriterion(c.criterion_md) : { label: c.criterion_md, detail: '' };
+      // task 1004402 (ADR 0351): the state pill, the tag and the UAT action are
+      // criterion-uat-ui.js's, and the badges sit WITH the label (inside the
+      // summary, never after it, where a closed <details> would hide them).
+      const badges = uatUi.badgesHtml(c);
+      const label = escapeHtml(parts.label || '') + (badges ? ` <span class="crit__badges">${badges}</span>` : '');
       const body = withDetail
-        ? `<div class="crit__col"><span class="crit__text">${escapeHtml(parts.label || '')}</span>${parts.detail ? `<span class="crit__detail">${escapeHtml(parts.detail)}</span>` : ''}</div>`
+        ? `<div class="crit__col"><span class="crit__text">${label}</span>${parts.detail ? `<span class="crit__detail">${escapeHtml(parts.detail)}</span>` : ''}</div>`
         : (parts.detail
-          ? `<details class="crit-d"><summary class="crit__text">${escapeHtml(parts.label || '')}</summary><div class="crit__detail">${escapeHtml(parts.detail)}</div></details>`
-          : `<span class="crit__text">${escapeHtml(parts.label || '')}</span>`);
+          ? `<details class="crit-d"><summary class="crit__text">${label}</summary><div class="crit__detail">${escapeHtml(parts.detail)}</div></details>`
+          : `<span class="crit__text">${label}</span>`);
       const pending = isPending(c);
-      // A Xenos sees the state but not the control — the server enforces either way.
-      const action = !pending ? ''
-        : (canConfirm
-          ? `<button type="button" class="crit__confirm" data-confirm-crit="${escapeHtml(String(c.id))}"
-               title="Every task linked to this criterion has shipped — confirm it as satisfied">Confirm</button>`
-          : '<span class="crit__flag" title="Every task linked to this criterion has shipped — a Metic can confirm it">Ready</span>');
+      const action = uatUi.actionHtml(c, { canReview: canConfirm, full: withDetail });
       const cls = c.satisfied ? ' crit--done' : (pending ? ' crit--pending' : '');
       return `<li class="crit${cls}"><span class="crit__mark">${c.satisfied ? '✓' : (pending ? '!' : '')}</span>${body}<span class="crit__act">${action}</span></li>`;
     }).join('')}</ul>`;
@@ -1476,6 +1485,6 @@
     return d;
   }
 
-    return { GOAL_SORTS, WORK_SORT_HEADERS, errCode, errDetails, friendlyClaimError, bulk, goalSel, goalSelTotal, loadDependencyForest, loadDetail, loadDirectory, loadGoalTasks, pagers, reflectSortHeaders, renderDependencyForest, renderDetail, renderGoalBulkToolbar, renderList, renderTodoCards, renderWork };
+    return { GOAL_SORTS, WORK_SORT_HEADERS, canConfirmCriteria, errCode, errDetails, friendlyClaimError, bulk, goalSel, goalSelTotal, loadDependencyForest, loadDetail, loadDirectory, loadGoalTasks, pagers, reflectSortHeaders, renderDependencyForest, renderDetail, renderGoalBulkToolbar, renderList, renderTodoCards, renderWork };
   };
 })();

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

@@ -178,6 +178,51 @@
   white-space: nowrap; padding: 2px 8px; border-radius: var(--radius-pill);
   background: var(--warn-weak); color: var(--warn); font-size: 10.5px; font-weight: 600;
 }
+/* task 1004402 (ADR 0351) — the UAT on a criterion. The state pill and the
+   Backend-only tag sit with the label; the panel spans the whole row under it.
+   Status tones reuse the hall's measured --ok / --warn pairs (DESIGN.md §Reuse):
+   awaiting reads as the warn state the "!" mark already uses, a UAT close as ok,
+   and the quieter closes (override, closed before UAT) in plain ink. */
+.crit__badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: 1px; }
+.crit-state, .crit-tag {
+  white-space: nowrap; padding: 1px 7px; border-radius: var(--radius-pill);
+  font-size: 10.5px; font-weight: 600; line-height: 1.5;
+  background: var(--rule-soft); color: var(--ink-soft);
+}
+.crit-state--awaiting_uat { background: var(--warn-weak); color: var(--warn); }
+.crit-state--satisfied_uat, .crit-state--satisfied_backend { background: var(--ok-weak); color: var(--ok); }
+.crit-tag { background: transparent; border: var(--line) solid var(--rule); }
+.crit__link {
+  cursor: pointer; white-space: nowrap; min-height: 24px; padding: 3px 6px; margin: 0 -6px;
+  border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 11.5px;
+  text-decoration: underline; text-underline-offset: 3px;
+}
+.crit__link:hover:not(:disabled) { color: var(--ink); }
+.crit__link:disabled { opacity: .6; cursor: default; }
+.uat-panel {
+  grid-column: 1 / -1; margin: 6px 0 4px 32px; padding: 12px 14px;
+  border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 5%, var(--bg-card));
+  font-size: 12.5px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 10px;
+}
+.uat-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.uat-check { display: grid; grid-template-columns: 16px 64px minmax(0,1fr); gap: 6px; align-items: baseline; }
+.uat-check__mark { color: var(--ink-faint); text-align: center; }
+.uat-check--ok .uat-check__mark { color: var(--ok); font-weight: 700; }
+.uat-check__label { font-weight: 600; color: var(--ink); }
+.uat-video { width: 100%; max-width: 560px; border-radius: var(--radius); background: var(--ink); }
+.uat-form { display: flex; flex-direction: column; gap: 8px; }
+.uat-field { display: flex; flex-direction: column; gap: 4px; }
+.uat-field input[type="file"] { min-height: 24px; font: inherit; font-size: 12px; }
+.uat-field textarea {
+  font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: var(--radius);
+  border: var(--line) solid var(--rule); background: var(--bg-card); color: var(--ink); resize: vertical;
+}
+.uat-check-input { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; }
+.uat-check-input input { width: 16px; height: 16px; margin: 0; }
+.uat-hint { margin: 0; }
+.uat-error { margin: 0; color: var(--danger, var(--warn)); font-weight: 600; }
+.uat-form .crit__confirm { align-self: flex-start; min-height: 32px; padding: 6px 14px; }
+
 /* BV1.R79: per-criterion expand in the capped band — short label, full text on
    click (matches the Roadmap page's .vbar__crit-d pattern). */
 .crit-d { min-width: 0; }

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

@@ -257,7 +257,10 @@
      began — goals-lib took the pure helpers, this takes the view painters.
      Loaded BEFORE goals-page.js, which calls window.OTBGoalsRender(ctx). -->
 <script src="/builders/bulk-toolbar.js"></script>
-<script src="/builders/goals-render.js?v=2026-09-30-bulktoolbar"></script>
-<script src="/builders/goals-page.js?v=2026-09-30-bulktoolbar"></script>
+<!-- task 1004402: the criterion UAT pills, panel and sign-off (ADR 0351). Loaded
+     BEFORE goals-render.js, which reads window.OTBCriterionUat at factory time. -->
+<script src="/builders/criterion-uat-ui.js?v=2026-09-30-uat2"></script>
+<script src="/builders/goals-render.js?v=2026-09-30-uat2"></script>
+<script src="/builders/goals-page.js?v=2026-09-30-uat2"></script>
 </body>
 </html>

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

@@ -128,6 +128,44 @@
     },
     "out": {
       "auth": false
+    },
+    "uat": {
+      "auth": true,
+      "url": "/builders/goals#/goal/1000111/completion",
+      "actions": [
+        [
+          "wait",
+          800
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#goal-completion-full"
+        ]
+      }
+    },
+    "uat-panel": {
+      "auth": true,
+      "url": "/builders/goals#/goal/1000111/completion",
+      "actions": [
+        [
+          "wait",
+          800
+        ],
+        [
+          "click",
+          "#goal-completion-full [data-uat-open=\"990001\"]"
+        ],
+        [
+          "wait",
+          500
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#goal-completion-full .uat-form"
+        ]
+      }
     }
   },
   "reducedMotion": {

package/modules/hall-ui/public/sky-data.js

@@ -60,6 +60,14 @@
   const GOLDEN = 137.50776405003785 * Math.PI / 180;
   const reduce = !!(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches);
   const NOW = Date.now();
+  // task 1004402 (ADR 0351): a ring's UAT state, in the SAME words the goal page
+  // uses — read from criterion-uat-ui.js, which both sky pages load first. An
+  // open ring carries no label (its open ring already says so), and a missing
+  // script or an older server yields none rather than a guessed word.
+  function uatLabel(state) {
+    const labels = window.OTBCriterionUat && window.OTBCriterionUat.STATE_LABELS;
+    return labels && state && state !== 'open' ? labels[state] || null : null;
+  }
   function hash(s) { let h = 2166136261; s = String(s); for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return (h >>> 0) / 4294967296; }
   function rng(seed) { let t = Math.floor(hash(seed) * 1e9) + 1; return () => { t += 0x6D2B79F5; let r = Math.imul(t ^ (t >>> 15), 1 | t); r ^= r + Math.imul(r ^ (r >>> 7), 61 | r); return ((r ^ (r >>> 14)) >>> 0) / 4294967296; }; }
   const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
@@ -138,7 +146,7 @@
     return {
       id: String(g.goal_id), title: g.title || 'A private goal', subtitle: g.subtitle || null, version: g.version_id, status: g.status,
       taskTotal: Number(g.task_total) || 0, taskDone: Number(g.task_done) || 0, createdAt: g.created_at || null,
-      crit: (g.criteria || []).map((c) => ({ id: String(c.id), text: c.criterion_md || '', satisfied: c.satisfied === true, tasks: (c.task_ids || []).map(String), pendingReview: c.pending_review === true })),
+      crit: (g.criteria || []).map((c) => ({ id: String(c.id), text: c.criterion_md || '', satisfied: c.satisfied === true, tasks: (c.task_ids || []).map(String), pendingReview: c.pending_review === true, uat: c.uat_state || null, uatLabel: uatLabel(c.uat_state), backendOnly: c.backend_only === true })),
       tasks: (g.tasks || []).map((t) => ({ id: String(t.id), title: t.title || 'a task', status: t.status, credits: t.credits_reward == null ? 0 : Number(t.credits_reward), createdAt: t.created_on || null, sourceRef: t.idea_id != null ? String(t.idea_id) : null })),
     };
   }

package/modules/hall-ui/public/sky-interaction.js

@@ -31,7 +31,7 @@
     if (!h || h.kind === 'shuttle') { card.classList.remove('on'); card.setAttribute('aria-hidden', 'true'); return; }
     const { goalById } = S; let html = '';
     if (h.kind === 'idea') { const i = h.ref; const o = OBJ[i.st] || { noun: i.st, word: i.st }; const wellG = i.well && goalById.get(i.well); const r = reach(i).length; html = `<div class="k">${glyphHtml(i)}<span class="lbl${i.st === 'star' ? ' hot' : ''}">${o.noun} · ${o.word}${i.origin === 'claude' ? ' · filed by a session' : ''}</span></div><div class="t">${esc(i.title)}</div><div class="m">${i.shaped ? `<b>${i.shaped.kind === 'goal' ? 'became this goal' : 'became a ring'}</b> · ` : ''}${wellG ? `caught by <b>${esc(short(wellG.title))}</b>` : `open space · ${Math.round(i.age)} days adrift`} · ${esc(became(i))}${i.size && i.size.credits ? ` · size <b>${i.size.credits}</b>` : ''}${i.lit < 1 ? ` · <b>${Math.round(i.lit * 100)}%</b> alive` : ''}${r ? ' · its reach is drawn' : ''}</div>`; }
-    else if (h.kind === 'ring') { const c = h.ref; const g = h.goal; html = `<div class="k"><span class="mk well" style="${c.satisfied ? 'border-style:solid;border-color:rgba(255,255,255,.7)' : ''}"></span><span class="lbl">ring ${h.index + 1} of ${g.crit.length} · ${c.satisfied ? 'closed' : 'open'}</span></div><div class="t">${esc(SKY.plain(c.text).slice(0, 180))}${SKY.plain(c.text).length > 180 ? '…' : ''}</div><div class="m">${c.tasks.length ? `<b>${c.tasks.length}</b> task${c.tasks.length === 1 ? '' : 's'} on this ring · <b>${c.credits}</b> credits` : 'no task gates it yet'}${c.pendingReview ? ' · awaiting review' : ''}${c.bornOf ? ` · <b style="color:var(--accent)">born of a thought</b>: ${esc(ideaTitle(c.bornOf))}` : ''}</div>`; }
+    else if (h.kind === 'ring') { const c = h.ref; const g = h.goal; html = `<div class="k"><span class="mk well" style="${c.satisfied ? 'border-style:solid;border-color:rgba(255,255,255,.7)' : ''}"></span><span class="lbl">ring ${h.index + 1} of ${g.crit.length} · ${c.satisfied ? 'closed' : 'open'}</span></div><div class="t">${esc(SKY.plain(c.text).slice(0, 180))}${SKY.plain(c.text).length > 180 ? '…' : ''}</div><div class="m">${c.tasks.length ? `<b>${c.tasks.length}</b> task${c.tasks.length === 1 ? '' : 's'} on this ring · <b>${c.credits}</b> credits` : 'no task gates it yet'}${c.uatLabel ? ` · ${esc(c.uatLabel)}` : (c.pendingReview && !c.uat ? ' · awaiting review' : '')}${c.backendOnly ? ' · backend-only' : ''}${c.bornOf ? ` · <b style="color:var(--accent)">born of a thought</b>: ${esc(ideaTitle(c.bornOf))}` : ''}</div>`; }
     else if (h.kind === 'goal') { const g = h.ref; if (!seen(g)) html = `<div class="k"><span class="mk unseen"></span><span class="lbl">unexplored</span></div><div class="t">Something is here.</div><div class="m">Follow a route from a goal you know to reach it — or turn explore off to see everything.</div>`; else { const met = g.crit.filter((c) => c.satisfied).length; const state = g.status === 'open' ? (g.live > 0 ? 'gravity well · alive' : 'gravity well') : g.status === 'achieved' ? 'settled system' : 'collapsed'; html = `<div class="k"><span class="mk ${g.status === 'open' ? (g.live > 0 ? 'alive' : 'well') : g.status === 'achieved' ? 'settled' : 'collapsed'}"></span><span class="lbl${g.live > 0 ? ' hot' : ''}">${state} · ${esc(g.band.label)}</span></div><div class="t">${esc(g.title)}</div><div class="m"><b>${g.taskDone}</b> of <b>${g.taskTotal}</b> tasks${g.credits ? ` · <b>${g.credits}</b> credits` : ''} · ${g.crit.length ? `<b>${met}</b> of <b>${g.crit.length}</b> rings closed` : 'no rings written'}${g.live > 0 ? ` · <b>${g.active}</b> held now, <b>${g.recent}</b> landed this week` : ''}${g.thoughts.filter(inLayer).length ? ` · <b>${g.thoughts.filter(inLayer).length}</b> of your thoughts` : ''}${g.bornOf ? ` · <b style="color:var(--accent)">born of a thought</b>` : ''}${edgesOf(g).length ? ` · <b>${edgesOf(g).length}</b> route${edgesOf(g).length === 1 ? '' : 's'}` : ''}</div>`; } }
     else if (h.kind === 'task' || h.kind === 'ltask') { const t = h.ref; const kin = t.goal && t.kin ? t.goal.tasks.filter((x) => x.kin === t.kin && x !== t).length : 0; html = `<div class="k"><span class="mk task${t.status === 'active' ? ' live' : ''}"></span><span class="lbl${t.status === 'active' ? ' hot' : ''}">task · ${esc(t.status)}</span></div><div class="t">${esc(t.title)}</div><div class="m">${t.credits != null ? `<b>${t.credits}</b> credits · ` : ''}${t.ci >= 0 ? `ring ${t.ci + 1}` : 'outer orbit'}${t.sourceRef ? ' · born of a thought' : ''}${kin ? ` · lines up with <b>${kin}</b> kin` : ''}${t.drift ? ' · in motion' : ''}</div>`; }
     else if (h.kind === 'stub') { const e = h.edge; const waits = e.a === h.goal; html = `<div class="k"><span class="mk route"></span><span class="lbl chart">route · ${waits ? 'waits on' : 'waited on by'}</span></div><div class="t">${seen(h.other) ? esc(h.other.title) : 'an unexplored goal'}</div><div class="m"><b>${e.count}</b> task dependenc${e.count === 1 ? 'y' : 'ies'} · click to chart it · double-click to chart every route from here</div>`; }