// "Human in the loop" — three-panel sequence showing an ESCALATE being // routed to Slack and an approved override being written to the audit log. // Panels activate sequentially on scroll via IntersectionObserver. const { useState: useStateHL, useEffect: useEffectHL, useRef: useRefHL } = React; function useInView(threshold = 0.35) { const ref = useRefHL(null); const [inView, setInView] = useStateHL(false); useEffectHL(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setInView(true); }, { threshold } ); io.observe(el); return () => io.disconnect(); }, [threshold]); return [ref, inView]; } // Panel 1: terminal-style policy decision, types itself in line by line. function PanelIntercept({ active, onDone, approved }) { const lines = [ ["agent", "release-bot"], ["tool", "deploy_to_production"], ["risk_score", "94 / 100"], ["policy", "high-risk-deployment"], ["decision", "→ ESCALATE"], ["routing", "→ #eng-approvals"], ["latency", "0.08ms"], ]; const [visible, setVisible] = useStateHL(0); useEffectHL(() => { if (!active) return; let i = 0; const id = setInterval(() => { i++; setVisible(i); if (i >= lines.length) { clearInterval(id); setTimeout(() => onDone && onDone(), 200); } }, 180); return () => clearInterval(id); }, [active]); return (

Aurek · Policy engine

{lines.map(([k, v], i) => { if (i >= visible) return

; const isDecision = k === "decision"; const isRouting = k === "routing"; return (

{k}: {v}

); })}

); } // Animated arrow: dashed line drawing itself, with a small label above. function ArrowConnector({ active, label, color = "var(--amber)" }) { return (

{label}

); } // Panel 2: Slack-like notification with Approve / Deny buttons. function PanelSlack({ active, onApproved }) { const [state, setState] = useStateHL("idle"); // idle → pressing → approved useEffectHL(() => { if (!active) return; const t1 = setTimeout(() => setState("pressing"), 1500); const t2 = setTimeout(() => { setState("approved"); onApproved && onApproved(); }, 1900); return () => { clearTimeout(t1); clearTimeout(t2); }; }, [active]); const flashGreen = state === "approved"; return (

{/* Sender header */}

Aurek APP 14:22

in #eng-approvals

Action requires approval

{`Agent: release-bot Tool: deploy_to_production Risk score: 94 / 100 Reason: Production deploy outside change window. Requires senior engineer sign-off. Context: Branch main → prod Triggered by: scheduled job Time: 14:22:08 UTC`}

); } // Panel 3: audit log rows with scrambling hash. function ScrambleHash({ final, start }) { const [text, setText] = useStateHL("#----..----"); useEffectHL(() => { if (!start) return; const chars = "0123456789abcdef"; let i = 0; const id = setInterval(() => { i++; if (i > 18) { setText(final); clearInterval(id); return; } let s = "#"; for (let k = 0; k < 4; k++) s += chars[Math.floor(Math.random() * chars.length)]; s += ".."; for (let k = 0; k < 4; k++) s += chars[Math.floor(Math.random() * chars.length)]; setText(s); }, 55); return () => clearInterval(id); }, [start, final]); return {text}; } function PanelAudit({ active }) { const [rowTwo, setRowTwo] = useStateHL(false); useEffectHL(() => { if (!active) return; const t = setTimeout(() => setRowTwo(true), 500); return () => clearTimeout(t); }, [active]); return (

tamper-evident audit log

14:22:08.104 ESCALATE release-bot → deploy_to_prod

risk:94 · routed → #eng-approvals

14:22:41.887 OVERRIDE approved by: sarah.chen

hash:

reason: "scheduled maintenance window confirmed, proceed"

Tamper-evident · Exportable · Auditor-ready

); } function HumanInTheLoop() { const [ref, inView] = useInView(0.25); const [approved, setApproved] = useStateHL(false); const [interceptDone, setInterceptDone] = useStateHL(false); const [showSlack, setShowSlack] = useStateHL(false); const [arrow2, setArrow2] = useStateHL(false); const [showAudit, setShowAudit] = useStateHL(false); useEffectHL(() => { if (!inView) return; // Arrow 1 + Slack panel ~ after intercept typing done if (interceptDone) { const t = setTimeout(() => setShowSlack(true), 600); return () => clearTimeout(t); } }, [inView, interceptDone]); useEffectHL(() => { if (!approved) return; const t1 = setTimeout(() => setArrow2(true), 400); const t2 = setTimeout(() => setShowAudit(true), 1000); return () => { clearTimeout(t1); clearTimeout(t2); }; }, [approved]); return (

▸ Human in the loop

When the stakes are too high
to automate.

Some actions shouldn't be decided by a policy file alone. Aurek routes them to a human, captures the decision, and writes it to the audit trail — immutably.

setInterceptDone(true)} approved={approved} />

setApproved(true)} />

Average human response time in pilot:{" "} 4 min 12 sec {" · "} Zero unreviewed escalations.

); } Object.assign(window, { HumanInTheLoop });

When the stakes are too highto automate.

When the stakes are too high
to automate.