272 lines
13 KiB
JavaScript
272 lines
13 KiB
JavaScript
function createHumanGates(options = {}) {
|
|
const storage = options.storage || window.localStorage;
|
|
const getLogin = options.getLogin || (() => '');
|
|
const getAccountKey = options.getAccountKey || 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;
|
|
let loadedAccountKey = '';
|
|
let loadEpoch = 0;
|
|
const decisionKeys = new Map();
|
|
let decisionFlight = null;
|
|
let openFlight = null;
|
|
let onChange = options.onChange;
|
|
|
|
const escape = value => String(value ?? '').replace(/[&<>"']/g, character => ({
|
|
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
|
|
})[character]);
|
|
const cacheKey = () => 'stackchain.human-gates.v1:' + String(getAccountKey() || '').trim().toLowerCase();
|
|
const progressKey = item => 'stackchain.human-gate-review.v1:' +
|
|
String(getAccountKey() || '').trim().toLowerCase() + ':' + item.id + ':' + item.revision;
|
|
const setText = (node, value) => { if (node) node.textContent = value; };
|
|
const setHtml = (node, value) => { if (node) node.innerHTML = value; };
|
|
const publish = state => onChange?.(JSON.parse(JSON.stringify(queue)), state);
|
|
|
|
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 restoreProgress(item) {
|
|
if (!getLogin() || !item) return null;
|
|
try {
|
|
const value = JSON.parse(storage.getItem(progressKey(item)) || 'null');
|
|
if (!value || value.gate_id !== item.id || value.revision !== item.revision) return null;
|
|
return value;
|
|
} catch (_) { return null; }
|
|
}
|
|
|
|
function saveProgress(values = {}) {
|
|
const item = current();
|
|
if (!getLogin() || !item) return false;
|
|
const checklist = values.checklist || {};
|
|
const progress = {
|
|
gate_id:item.id, revision:item.revision,
|
|
checklist:Object.fromEntries(['exact_hash', 'artifacts_reviewed', 'provenance_reviewed'].map(key => [key, checklist[key] === true])),
|
|
reason:String(values.reason || ''), override_reason:String(values.override_reason || ''),
|
|
};
|
|
try { storage.setItem(progressKey(item), JSON.stringify(progress)); return true; } catch (_) { return false; }
|
|
}
|
|
|
|
function captureProgress() {
|
|
if (!nodes.detail?.querySelectorAll) return false;
|
|
const checklist = Object.fromEntries(Array.from(nodes.detail.querySelectorAll('[data-gate-checklist]')).map(input => [input.dataset.gateChecklist, input.checked]));
|
|
return saveProgress({
|
|
checklist,
|
|
reason:nodes.detail.querySelector?.('[data-gate-reason]')?.value || '',
|
|
override_reason:nodes.detail.querySelector?.('[data-gate-override]')?.value || '',
|
|
});
|
|
}
|
|
|
|
nodes.detail?.addEventListener?.('input', captureProgress);
|
|
nodes.detail?.addEventListener?.('change', captureProgress);
|
|
|
|
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 progress = restoreProgress(item) || {checklist:{}, reason:'', override_reason:''};
|
|
const checked = key => progress.checklist?.[key] === true ? ' checked' : '';
|
|
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) + '" target="_blank" rel="noreferrer noopener">' + escape(artifact.name) + '</a></li>').join('');
|
|
const links = (item.links || []).map(link => '<li><a href="' + escape(link.url) + '" target="_blank" rel="noreferrer noopener">' + 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>Project <strong>' + escape(item.project) + '</strong></p>' +
|
|
'<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"' + checked('exact_hash') + '> Exact hash reviewed</label>' +
|
|
'<label><input type="checkbox" data-gate-checklist="artifacts_reviewed"' + checked('artifacts_reviewed') + '> Artifacts reviewed</label>' +
|
|
'<label><input type="checkbox" data-gate-checklist="provenance_reviewed"' + checked('provenance_reviewed') + '> Provenance reviewed</label>' +
|
|
'<label>Hold reason<textarea data-gate-reason>' + escape(progress.reason) + '</textarea></label>' +
|
|
'<label>Override reason<textarea data-gate-override>' + escape(progress.override_reason) + '</textarea></label>' +
|
|
'<div><button type="button" data-gate-decision="release">Release & next</button>' +
|
|
'<button type="button" data-gate-decision="hold">Hold & next</button></div></article>'
|
|
);
|
|
}
|
|
|
|
async function load() {
|
|
const epoch = ++loadEpoch;
|
|
const accountKey = String(getAccountKey() || '').trim().toLowerCase();
|
|
if (accountKey !== loadedAccountKey) {
|
|
loadedAccountKey = accountKey;
|
|
queue = { pending_count: 0, items: [] };
|
|
reviewSnapshot = [];
|
|
reviewIndex = -1;
|
|
render();
|
|
}
|
|
const cached = restore();
|
|
if (cached) {
|
|
queue = cached;
|
|
render();
|
|
publish({available:true, authoritative:false, cached:true});
|
|
}
|
|
try {
|
|
const live = validSnapshot(await fetchJson('api/v1/human-gates'));
|
|
if (epoch !== loadEpoch || accountKey !== loadedAccountKey) return queue;
|
|
if (!live) throw new Error('Human Gates response is invalid.');
|
|
queue = { pending_count: live.pending_count, items: live.items.slice() };
|
|
save(queue);
|
|
render();
|
|
publish({available:true, authoritative:true});
|
|
return queue;
|
|
} catch (error) {
|
|
if (epoch !== loadEpoch || accountKey !== loadedAccountKey) return queue;
|
|
if (!cached) {
|
|
publish({available:false, authoritative:false});
|
|
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 select(gateId) {
|
|
if (reviewIndex < 0) reviewSnapshot = queue.items.slice();
|
|
const index = reviewSnapshot.findIndex(item => item.id === gateId);
|
|
if (index < 0) throw new Error('Gate is not in the current review snapshot.');
|
|
reviewIndex = index;
|
|
return reviewNext();
|
|
}
|
|
|
|
function current() { return reviewIndex < 0 ? null : (reviewSnapshot[reviewIndex] || null); }
|
|
function idempotencyKey(item, decision, payload) {
|
|
const operation = item.id + ':' + item.revision + ':' + decision + ':' + JSON.stringify(payload);
|
|
if (decisionKeys.has(operation)) return { operation, key: decisionKeys.get(operation) };
|
|
const nonce = globalThis.crypto?.randomUUID?.() || (Date.now().toString(36) + '-' + Math.random().toString(36).slice(2));
|
|
const key = 'human-gate:' + item.id + ':' + item.revision + ':' + decision + ':' + nonce;
|
|
decisionKeys.set(operation, key);
|
|
return { operation, key };
|
|
}
|
|
|
|
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,
|
|
};
|
|
if (decisionFlight) return decisionFlight;
|
|
const operation = (async () => {
|
|
const decisionKey = idempotencyKey(item, decision, payload);
|
|
const receipt = await fetchJson('api/v1/human-gates/' + encodeURIComponent(item.id) + '/decision', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'Idempotency-Key': decisionKey.key },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
decisionKeys.delete(decisionKey.operation);
|
|
try { storage.removeItem?.(progressKey(item)); } catch (_) {}
|
|
queue.items = queue.items.filter(candidate => candidate.id !== item.id);
|
|
queue.pending_count = Math.max(0, queue.pending_count - 1);
|
|
save(queue); render();
|
|
publish({available:true, authoritative:true, decision:true});
|
|
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 };
|
|
})();
|
|
decisionFlight = operation;
|
|
try {
|
|
return await operation;
|
|
} finally {
|
|
if (decisionFlight === operation) decisionFlight = null;
|
|
}
|
|
}
|
|
|
|
function open() {
|
|
location.hash = '#/my-work/human-gates';
|
|
if (nodes.panel) nodes.panel.hidden = false;
|
|
if (openFlight) return openFlight;
|
|
const operation = (async () => {
|
|
await load();
|
|
reviewSnapshot = queue.items.slice();
|
|
reviewIndex = 0;
|
|
return reviewNext();
|
|
})();
|
|
openFlight = operation;
|
|
const clearFlight = () => {
|
|
if (openFlight === operation) openFlight = null;
|
|
};
|
|
operation.then(clearFlight, clearFlight);
|
|
return operation;
|
|
}
|
|
|
|
return {
|
|
load, open, reviewNext, select, decideAndNext, current, saveProgress,
|
|
setOnChange(callback) { onChange = callback; },
|
|
restoreCached: restore,
|
|
snapshot: () => JSON.parse(JSON.stringify(queue)),
|
|
route: () => location.hash,
|
|
};
|
|
}
|
|
|
|
if (typeof module !== 'undefined') module.exports = createHumanGates;
|
|
if (typeof window !== 'undefined') window.createHumanGates = createHumanGates;
|