Add durable Human Gates inbox

frontend/dashboard.css

@@ -1612,3 +1612,7 @@ textarea { resize: vertical; min-height: 120px; }
 .create-pull-mode label{display:flex;align-items:center;gap:7px}
 .create-pull-panel button,.create-pull-panel select,.create-pull-panel input{min-height:44px}
 @media(max-width:600px){.create-pull-sheet{padding:0}.create-pull-panel{width:100%;max-height:100dvh;border-radius:18px 18px 0 0}.create-pull-branches{grid-template-columns:1fr}}
+
+.human-gates{position:fixed;inset:0;z-index:72;background:var(--bg);overflow:auto;padding:18px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
+.human-gates[hidden]{display:none}.human-gates-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;max-width:760px;margin:0 auto 14px}.human-gates-header h3{margin:0}.human-gates-list,.human-gate-detail-host{display:grid;gap:10px;max-width:760px;margin:0 auto 14px}.human-gate-card{display:grid;grid-template-columns:1fr auto;text-align:left;gap:6px 12px;min-height:58px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}.human-gate-card span{grid-column:1/-1;color:var(--muted)}.human-gate-detail{display:grid;gap:12px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.human-gate-detail h3,.human-gate-detail h4,.human-gate-detail p{margin:0}.human-gate-detail label{display:grid;gap:6px}.human-gate-detail label:has(input[type=checkbox]){grid-template-columns:auto 1fr;align-items:center}.human-gate-detail textarea{min-height:78px}.human-gate-detail>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.human-gates-zero{display:grid;gap:6px;text-align:center;padding:32px 16px;border:1px dashed var(--border);border-radius:16px}.human-gates-launcher span{display:inline-grid;place-items:center;min-width:22px;border-radius:999px;background:var(--accent);color:#06101f}
+@media(min-width:761px){.human-gates{inset:8% max(8%,80px);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.4)}}

frontend/dashboard.js

@@ -634,6 +634,44 @@
     return payload;
   }
 
+  const humanGates = createHumanGates({
+    storage:localStorage,
+    getLogin:()=>planningOwnerLogin,
+    isOnline:()=>navigator.onLine,
+    location:window.location,
+    fetchJson:fetchReviewJson,
+    nodes:{
+      count:qs('#human-gates-count'), list:qs('#human-gates-list'),
+      status:qs('#human-gates-status'), panel:qs('#human-gates'),
+      detail:qs('#human-gate-detail'),
+    },
+  });
+  const openHumanGates = () => humanGates.open().catch(error => {
+    qs('#human-gates-status').textContent = error.message || 'Human Gates are unavailable.';
+  });
+  qs('#open-human-gates').addEventListener('click', openHumanGates);
+  qs('#close-human-gates').addEventListener('click', () => {
+    qs('#human-gates').hidden = true;
+    if (window.location.hash === '#/my-work/human-gates') window.history.replaceState({}, '', '#/my-work');
+  });
+  qs('#human-gates-list').addEventListener('click', event => {
+    if (!event.target.closest('[data-human-gate-id]')) return;
+    humanGates.reviewNext();
+  });
+  qs('#human-gate-detail').addEventListener('click', event => {
+    const decision = event.target.closest('[data-gate-decision]')?.dataset.gateDecision;
+    if (!decision) return;
+    const detail = qs('#human-gate-detail');
+    const checklist = Object.fromEntries(Array.from(detail.querySelectorAll('[data-gate-checklist]')).map(input => [input.dataset.gateChecklist, input.checked]));
+    humanGates.decideAndNext(decision, {
+      checklist,
+      reason:detail.querySelector('[data-gate-reason]')?.value || '',
+      override_reason:detail.querySelector('[data-gate-override]')?.value || '',
+    }).catch(error => { qs('#human-gates-status').textContent = error.message; });
+  });
+  humanGates.load().catch(() => {});
+  if (window.location.hash === '#/my-work/human-gates') openHumanGates();
+
   function syncCompletedFiledReviews() {
     if (!planningOwnerLogin) return Promise.resolve(false);
     if (completedFiledSyncFlight) return completedFiledSyncFlight;

frontend/human-gates.js

@@ -0,0 +1,166 @@
+function createHumanGates(options = {}) {
+  const storage = options.storage || window.localStorage;
+  const getLogin = options.getLogin || (() => '');
+  const isOnline = options.isOnline || (() => navigator.onLine);
+  const location = options.location || window.location;
+  const fetchJson = options.fetchJson;
+  const nodes = options.nodes || {};
+  let queue = { pending_count: 0, items: [] };
+  let reviewSnapshot = [];
+  let reviewIndex = -1;
+
+  const escape = value => String(value ?? '').replace(/[&<>"']/g, character => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  })[character]);
+  const cacheKey = () => 'stackchain.human-gates.v1:' + String(getLogin() || '').trim().toLowerCase();
+  const setText = (node, value) => { if (node) node.textContent = value; };
+  const setHtml = (node, value) => { if (node) node.innerHTML = value; };
+
+  function validSnapshot(value) {
+    return value && Number.isInteger(value.pending_count) && Array.isArray(value.items) ? value : null;
+  }
+
+  function restore() {
+    if (!getLogin()) return null;
+    try { return validSnapshot(JSON.parse(storage.getItem(cacheKey()) || 'null')); } catch (_) { return null; }
+  }
+
+  function save(value) {
+    if (!getLogin()) return;
+    try { storage.setItem(cacheKey(), JSON.stringify(value)); } catch (_) {}
+  }
+
+  function render() {
+    setText(nodes.count, String(queue.pending_count));
+    if (!queue.pending_count) {
+      setHtml(nodes.list, '<div class="human-gates-zero"><strong>Inbox zero</strong><span>No release candidates need your decision.</span></div>');
+      setText(nodes.status, 'Human Gates inbox zero.');
+      return;
+    }
+    setText(nodes.status, queue.pending_count + (queue.pending_count === 1 ? ' gate pending.' : ' gates pending.'));
+    setHtml(nodes.list, queue.items.map(item =>
+      '<button class="human-gate-card" type="button" data-human-gate-id="' + escape(item.id) + '">' +
+      '<strong>' + escape(item.title) + '</strong><code>' + escape(item.candidate_hash) + '</code>' +
+      '<span>Priority ' + escape(item.priority ?? 0) + '</span></button>'
+    ).join(''));
+  }
+
+  function renderDetail(item) {
+    if (!item) {
+      setHtml(nodes.detail, '<div class="human-gates-zero"><strong>Inbox zero</strong><span>Fixed review snapshot complete.</span></div>');
+      return;
+    }
+    const checks = (item.checks || []).map(check =>
+      '<li class="gate-check gate-check-' + escape(check.state) + '"><strong>' + escape(check.name) + '</strong> · ' + escape(check.state) + (check.required ? ' · required' : '') + '</li>'
+    ).join('');
+    const artifacts = (item.artifacts || []).map(artifact => '<li><a href="' + escape(artifact.url) + '" rel="noreferrer">' + escape(artifact.name) + '</a></li>').join('');
+    const links = (item.links || []).map(link => '<li><a href="' + escape(link.url) + '" rel="noreferrer">' + escape(link.label) + '</a></li>').join('');
+    const provenance = Object.entries(item.provenance || {}).map(([key, value]) => '<li><strong>' + escape(key) + '</strong> · ' + escape(value) + '</li>').join('');
+    const history = (item.history || []).map(event => '<li><strong>' + escape(event.action) + '</strong> · ' + escape(event.at) + '</li>').join('');
+    setHtml(nodes.detail,
+      '<article class="human-gate-detail"><h3>' + escape(item.title) + '</h3>' +
+      '<p>Exact candidate <code>' + escape(item.candidate_hash) + '</code></p>' +
+      '<p>Score ' + escape(item.score?.value ?? 'not supplied') + ' · ' + escape(item.score?.provenance || '') + '</p>' +
+      '<h4>Artifacts</h4><ul>' + artifacts + '</ul><h4>Links</h4><ul>' + links + '</ul>' +
+      '<h4>Checks</h4><ul>' + checks + '</ul><h4>Provenance</h4><ul>' + provenance + '</ul>' +
+      '<h4>History</h4><ul>' + history + '</ul>' +
+      '<label><input type="checkbox" data-gate-checklist="exact_hash"> Exact hash reviewed</label>' +
+      '<label><input type="checkbox" data-gate-checklist="artifacts_reviewed"> Artifacts reviewed</label>' +
+      '<label><input type="checkbox" data-gate-checklist="provenance_reviewed"> Provenance reviewed</label>' +
+      '<label>Hold reason<textarea data-gate-reason></textarea></label>' +
+      '<label>Override reason<textarea data-gate-override></textarea></label>' +
+      '<div><button type="button" data-gate-decision="release">Release &amp; next</button>' +
+      '<button type="button" data-gate-decision="hold">Hold &amp; next</button></div></article>'
+    );
+  }
+
+  async function load() {
+    const cached = restore();
+    if (cached) { queue = cached; render(); }
+    try {
+      const live = validSnapshot(await fetchJson('api/v1/human-gates'));
+      if (!live) throw new Error('Human Gates response is invalid.');
+      queue = { pending_count: live.pending_count, items: live.items.slice() };
+      save(queue);
+      render();
+      return queue;
+    } catch (error) {
+      if (!cached) throw error;
+      setText(nodes.status, 'Offline cached gate list · reconnect before deciding.');
+      return queue;
+    }
+  }
+
+  function reviewNext() {
+    if (reviewIndex < 0) {
+      reviewSnapshot = queue.items.slice();
+      reviewIndex = 0;
+    }
+    const item = reviewSnapshot[reviewIndex] || null;
+    renderDetail(item);
+    if (item) {
+      const index = reviewIndex;
+      fetchJson('api/v1/human-gates/' + encodeURIComponent(item.id)).then(detail => {
+        if (!detail || detail.id !== item.id) throw new Error('Gate detail is invalid.');
+        if (reviewIndex !== index || reviewSnapshot[index]?.id !== item.id) return;
+        reviewSnapshot[index] = detail;
+        renderDetail(detail);
+      }).catch(() => { setText(nodes.status, 'Gate detail is unavailable. Retry while online.'); });
+    }
+    return item;
+  }
+
+  function current() { return reviewIndex < 0 ? null : (reviewSnapshot[reviewIndex] || null); }
+  function idempotencyKey(item, decision) {
+    const nonce = globalThis.crypto?.randomUUID?.() || (Date.now().toString(36) + '-' + Math.random().toString(36).slice(2));
+    return 'human-gate:' + item.id + ':' + item.revision + ':' + decision + ':' + nonce;
+  }
+
+  async function decideAndNext(decision, values = {}) {
+    const item = current();
+    if (!item) throw new Error('No gate is selected.');
+    if (!isOnline()) throw new Error('Human Gate decisions require an online connection.');
+    if (!String(getLogin() || '').trim()) throw new Error('Authenticated account identity is required.');
+    const checklist = values.checklist || {};
+    const complete = ['exact_hash', 'artifacts_reviewed', 'provenance_reviewed'].every(key => checklist[key] === true);
+    if (decision === 'release' && !complete) throw new Error('Complete the release checklist before deciding.');
+    const unmet = (item.checks || []).filter(check => check.required && check.state !== 'success');
+    if (decision === 'release' && unmet.length && !String(values.override_reason || '').trim()) {
+      throw new Error('An explicit override reason is required for unmet required checks.');
+    }
+    if (decision === 'hold' && !String(values.reason || '').trim()) throw new Error('A hold reason is required.');
+    const payload = {
+      expected_revision: item.revision, decision,
+      reason: String(values.reason || '').trim(),
+      override_reason: String(values.override_reason || '').trim(), checklist,
+    };
+    const receipt = await fetchJson('api/v1/human-gates/' + encodeURIComponent(item.id) + '/decision', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Idempotency-Key': idempotencyKey(item, decision) },
+      body: JSON.stringify(payload),
+    });
+    queue.items = queue.items.filter(candidate => candidate.id !== item.id);
+    queue.pending_count = Math.max(0, queue.pending_count - 1);
+    save(queue); render();
+    reviewIndex += 1;
+    const next = current();
+    if (next) reviewNext(); else renderDetail(null);
+    setText(nodes.status, next ? (decision === 'release' ? 'Released. Reviewing next gate.' : 'Held. Reviewing next gate.') : 'Decision saved. Human Gates review snapshot complete.');
+    return { receipt, next };
+  }
+
+  function open() {
+    location.hash = '#/my-work/human-gates';
+    if (nodes.panel) nodes.panel.hidden = false;
+    return load().then(() => reviewNext());
+  }
+
+  return {
+    load, open, reviewNext, decideAndNext, current,
+    snapshot: () => JSON.parse(JSON.stringify(queue)),
+    route: () => location.hash,
+  };
+}
+
+if (typeof module !== 'undefined') module.exports = createHumanGates;
+if (typeof window !== 'undefined') window.createHumanGates = createHumanGates;

frontend/index.html

@@ -187,7 +187,16 @@
         <button class="end-today-session" id="end-today-session" type="button" hidden>End session</button>
         <button class="find-work-action" id="find-work" type="button">Find work</button>
         <button class="new-issue" id="new-issue" type="button">New issue</button>
+        <button class="human-gates-launcher" id="open-human-gates" type="button">Human Gates <span id="human-gates-count">0</span></button>
       </div>
+      <section id="human-gates" class="human-gates" aria-labelledby="human-gates-heading" hidden>
+        <div class="human-gates-header">
+          <div><h3 id="human-gates-heading">Human Gates</h3><p id="human-gates-status" class="small" role="status" aria-live="polite"></p></div>
+          <button id="close-human-gates" type="button">Close</button>
+        </div>
+        <div id="human-gates-list" class="human-gates-list"></div>
+        <div id="human-gate-detail" class="human-gate-detail-host"></div>
+      </section>
       <details class="work-settings">
         <summary id="work-settings-toggle">Queue &amp; settings · <span id="active-work-queue">All</span></summary>
         <div class="work-settings-panel">
@@ -2401,6 +2410,7 @@
 <script src="static/mobile-plan-today-nav.js"></script>
 <script src="static/mobile-find-work-nav.js"></script>
 <script src="static/workspace-bootstrap.js"></script>
+<script src="static/human-gates.js"></script>
 <script src="static/dashboard.js"></script>
 </body>
 </html>

frontend/service-worker.js

@@ -151,6 +151,7 @@ const SHELL = [
   BASE + 'manifest.webmanifest',
   BASE + 'static/dashboard.css',
   BASE + 'static/dashboard.js',
+  BASE + 'static/human-gates.js',
   BASE + 'static/icons/stackchain-192.png',
   BASE + 'static/icons/stackchain-512.png',
   BASE + 'static/session.js',