feat: keep Human Gate decisions in reach on mobile (Closes #1439)
This commit is contained in:
timmy committed
1 parent
38206b90e4
commit
62f92105ec
19 files changed
+209
-56
No files matched your search
@@ -1624,5 +1624,6 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
@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}
|
||||
.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-decision-tray{display:grid;gap:10px}.human-gate-decision-state{display:grid;gap:4px}.human-gate-decision-state [data-gate-error]{color:var(--danger,#fb7185)}.human-gate-decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.human-gate-decision-actions button{min-height:44px}.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(max-width:600px){.human-gate-detail{padding-bottom:calc(124px + env(safe-area-inset-bottom))}.human-gate-decision-tray{position:sticky;bottom:calc(-1 * max(24px,env(safe-area-inset-bottom)));z-index:4;margin:0 -16px calc(-124px - env(safe-area-inset-bottom));padding:12px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--border);background:rgba(11,21,38,.97);box-shadow:0 -12px 24px rgba(0,0,0,.32);backdrop-filter:blur(10px)}}
|
||||
@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)}}
|
||||
@@ -701,13 +701,9 @@
|
||||
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.submitDecision(decision).catch(error => {
|
||||
if (!error?.targetSelector) qs('#human-gates-status').textContent = error.message;
|
||||
});
|
||||
});
|
||||
}
|
||||
if (!progressiveHumanGatesHandoff?.started) humanGates.load().catch(() => {});
|
||||
|
||||
+68
-12
@@ -61,14 +61,26 @@ function createHumanGates(options = {}) {
|
||||
try { storage.setItem(progressKey(item), JSON.stringify(progress)); return true; } catch (_) { return false; }
|
||||
}
|
||||
|
||||
function valuesFromDetail() {
|
||||
const checklist = Object.fromEntries(Array.from(nodes.detail?.querySelectorAll?.('[data-gate-checklist]') || []).map(input => [input.dataset.gateChecklist, input.checked]));
|
||||
return {
|
||||
checklist,
|
||||
reason:nodes.detail?.querySelector?.('[data-gate-reason]')?.value || '',
|
||||
override_reason:nodes.detail?.querySelector?.('[data-gate-override]')?.value || '',
|
||||
};
|
||||
}
|
||||
|
||||
function updateReadiness(values = valuesFromDetail()) {
|
||||
const completed = ['exact_hash', 'artifacts_reviewed', 'provenance_reviewed']
|
||||
.filter(key => values.checklist?.[key] === true).length;
|
||||
setText(nodes.detail?.querySelector?.('[data-gate-readiness]'), completed + ' of 3 confirmations complete');
|
||||
}
|
||||
|
||||
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 || '',
|
||||
});
|
||||
const values = valuesFromDetail();
|
||||
updateReadiness(values);
|
||||
return saveProgress(values);
|
||||
}
|
||||
|
||||
nodes.detail?.addEventListener?.('input', captureProgress);
|
||||
@@ -116,9 +128,13 @@ function createHumanGates(options = {}) {
|
||||
'<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>'
|
||||
'<div class="human-gate-decision-tray"><div class="human-gate-decision-state">' +
|
||||
'<strong data-gate-readiness>0 of 3 confirmations complete</strong>' +
|
||||
'<span data-gate-error role="alert" hidden></span></div>' +
|
||||
'<div class="human-gate-decision-actions"><button type="button" data-gate-decision="hold">Hold & next</button>' +
|
||||
'<button type="button" data-gate-decision="release">Release & next</button></div></div></article>'
|
||||
);
|
||||
updateReadiness();
|
||||
}
|
||||
|
||||
async function load() {
|
||||
@@ -194,6 +210,12 @@ function createHumanGates(options = {}) {
|
||||
return { operation, key };
|
||||
}
|
||||
|
||||
function decisionError(message, selector) {
|
||||
const error = new Error(message);
|
||||
error.targetSelector = selector;
|
||||
return error;
|
||||
}
|
||||
|
||||
async function decideAndNext(decision, values = {}) {
|
||||
const item = current();
|
||||
if (!item) throw new Error('No gate is selected.');
|
||||
@@ -201,12 +223,18 @@ function createHumanGates(options = {}) {
|
||||
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.');
|
||||
if (decision === 'release' && !complete) {
|
||||
const firstMissing = ['exact_hash', 'artifacts_reviewed', 'provenance_reviewed'].find(key => checklist[key] !== true);
|
||||
throw decisionError('Complete the release checklist before deciding.', '[data-gate-checklist="' + firstMissing + '"]');
|
||||
}
|
||||
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.');
|
||||
const names = unmet.map(check => String(check.name || 'Unnamed check')).join(', ');
|
||||
throw decisionError('An explicit override reason is required for unmet required checks: ' + names + '.', '[data-gate-override]');
|
||||
}
|
||||
if (decision === 'hold' && !String(values.reason || '').trim()) {
|
||||
throw decisionError('A hold reason is required.', '[data-gate-reason]');
|
||||
}
|
||||
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(),
|
||||
@@ -240,6 +268,34 @@ function createHumanGates(options = {}) {
|
||||
}
|
||||
}
|
||||
|
||||
async function submitDecision(decision) {
|
||||
const values = valuesFromDetail();
|
||||
updateReadiness(values);
|
||||
const errorNode = nodes.detail?.querySelector?.('[data-gate-error]');
|
||||
if (errorNode) { errorNode.textContent = ''; errorNode.hidden = true; }
|
||||
const buttons = Array.from(nodes.detail?.querySelectorAll?.('[data-gate-decision]') || []);
|
||||
buttons.forEach(button => { button.disabled = true; });
|
||||
try {
|
||||
return await decideAndNext(decision, values);
|
||||
} catch (error) {
|
||||
if (errorNode) {
|
||||
errorNode.textContent = error?.message || 'The decision could not be saved.';
|
||||
errorNode.hidden = false;
|
||||
}
|
||||
let target = error?.targetSelector && nodes.detail?.querySelector?.(error.targetSelector);
|
||||
if (!target && error?.targetSelector?.startsWith('[data-gate-checklist=')) {
|
||||
const key = error.targetSelector.match(/"([^"]+)"/)?.[1];
|
||||
target = Array.from(nodes.detail?.querySelectorAll?.('[data-gate-checklist]') || [])
|
||||
.find(input => input.dataset.gateChecklist === key);
|
||||
}
|
||||
target?.scrollIntoView?.({block:'center', behavior:'smooth'});
|
||||
target?.focus?.({preventScroll:true});
|
||||
throw error;
|
||||
} finally {
|
||||
buttons.forEach(button => { button.disabled = false; });
|
||||
}
|
||||
}
|
||||
|
||||
function open() {
|
||||
location.hash = '#/my-work/human-gates';
|
||||
if (nodes.panel) nodes.panel.hidden = false;
|
||||
@@ -259,7 +315,7 @@ function createHumanGates(options = {}) {
|
||||
}
|
||||
|
||||
return {
|
||||
load, open, reviewNext, select, decideAndNext, current, saveProgress,
|
||||
load, open, reviewNext, select, decideAndNext, submitDecision, current, saveProgress,
|
||||
setOnChange(callback) { onChange = callback; },
|
||||
restoreCached: restore,
|
||||
snapshot: () => JSON.parse(JSON.stringify(queue)),
|
||||
|
||||
@@ -50,12 +50,9 @@ function createProgressiveHumanGates(options = {}) {
|
||||
nodes.detail?.addEventListener?.('click', event => {
|
||||
const decision = event.target?.closest?.('[data-gate-decision]')?.dataset.gateDecision;
|
||||
if (!decision) return;
|
||||
const checklist = Object.fromEntries(Array.from(nodes.detail.querySelectorAll('[data-gate-checklist]')).map(input => [input.dataset.gateChecklist, input.checked]));
|
||||
controller.decideAndNext(decision, {
|
||||
checklist,
|
||||
reason:nodes.detail.querySelector?.('[data-gate-reason]')?.value || '',
|
||||
override_reason:nodes.detail.querySelector?.('[data-gate-override]')?.value || '',
|
||||
}).catch(showError);
|
||||
controller.submitDecision(decision).catch(error => {
|
||||
if (!error?.targetSelector) showError(error);
|
||||
});
|
||||
});
|
||||
|
||||
async function start(force = false) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const BASE = new URL('./', self.location.href).pathname;
|
||||
importScripts(BASE + 'static/private-data-registry.js');
|
||||
importScripts(BASE + 'static/background-issue-sync.js');
|
||||
const CACHE = 'stackchain-dashboard-shell-v146';
|
||||
const CACHE = 'stackchain-dashboard-shell-v147';
|
||||
const OFFLINE_LEASE_URL = new URL(BASE + '__offline-session-lease', self.location.origin).href;
|
||||
const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
|
||||
const NAVIGATION_TIMEOUT_MS = self.__STACKCHAIN_NAVIGATION_TIMEOUT_MS || 4000;
|
||||
|
||||
Reference in new issue
Block a user