// Approvals — the pending queue + an approve/deny flow with the confused-deputy detail function Approvals({ pending, onDecide }) { const [active, setActive] = React.useState(pending[0] ? pending[0].id : null); const [toast, setToast] = React.useState(null); React.useEffect(() => { if (!pending.find(p => p.id === active)) setActive(pending[0] ? pending[0].id : null); }, [pending, active]); const decide = (id, approved) => { onDecide(id, approved); setToast({ approved, id }); setTimeout(() => setToast(null), 2600); }; const sel = pending.find(p => p.id === active); return (
Approvals

Actions waiting on a human

Each release is bound to one exact action fingerprint and the original instruction — approve action A, an agent still can't run action B, and a "yes" is good for exactly one execution.

{pending.length === 0 ? (
Queue is clear
No actions are waiting on a human right now.
) : (
{/* queue list */}
{pending.map(p => )}
{/* detail */} {sel && }
)} {toast && (
{toast.id} {toast.approved ? 'approved' : 'denied'} · receipt signed & appended
)}
); } function ApprovalDetail({ p, onDecide }) { const rows = [ ["instruction", `“${p.instruction}”`], ["principal", p.principal], ["action", `${p.method} ${p.host}${p.path}`], ["amount", p.amount], ["destination", p.destination], ["matched rule", p.rule], ["action_fingerprint", p.fpr], ["intent_hash", p.intent], ]; return (
Review & release
{p.id} · parked under {p.rule}
{rows.map(([k,v],i) => {k} {v} )}
Your decision is bound to this exact fingerprint & instruction. A substituted action is refused; this approval releases the action once, then is consumed.
); } window.Approvals = Approvals;