// Corridor — "Simulate a runaway agent" (the centerpiece interaction). // Purely client-side against synthetic data; never writes real state. // A synthetic agent fires a burst of calls, spend races toward the // $25/day budget cap, then the budget policy DENIES the rest before // any of it executes. Honors prefers-reduced-motion (jumps to the // resolved end-state). Reset replays. const NS_sim = window.CorridorDesignSystem_8d69e0; const D_sim = window.CorridorDemo; function RunawaySimulation({ onStateChange }) { const cfg = D_sim.sim; const { Button, Badge } = NS_sim; const [phase, setPhase] = React.useState("idle"); // idle | running | done const [fired, setFired] = React.useState([]); // [{i, kind, spend}] const timers = React.useRef([]); const listRef = React.useRef(null); const spend = fired.length ? fired[fired.length - 1].spend : 0; const capturedCount = fired.filter((f) => f.kind === "captured").length; const deniedCount = fired.filter((f) => f.kind === "denied").length; const reduced = window.reduceMotion ? window.reduceMotion() : false; React.useEffect(() => () => timers.current.forEach(clearTimeout), []); React.useEffect(() => { if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight; }, [fired]); React.useEffect(() => { onStateChange && onStateChange({ phase, done: phase === "done", denied: deniedCount }); }, [phase, deniedCount]); function buildSequence() { const seq = []; let s = 0; for (let i = 0; i < cfg.burst; i++) { const captured = i < cfg.captured; if (captured) s += cfg.callCents; seq.push({ i: i + 1, kind: captured ? "captured" : "denied", spend: s }); } return seq; } function run() { timers.current.forEach(clearTimeout); timers.current = []; const seq = buildSequence(); if (reduced) { setFired(seq); setPhase("done"); return; } setFired([]); setPhase("running"); seq.forEach((ev, idx) => { const t = setTimeout(() => { setFired((prev) => [...prev, ev]); if (idx === seq.length - 1) setPhase("done"); }, 130 * (idx + 1)); timers.current.push(t); }); } function reset() { timers.current.forEach(clearTimeout); timers.current = []; setFired([]); setPhase("idle"); } const pct = Math.min((spend / cfg.capCents) * 100, 100); const atCap = spend >= cfg.capCents; // live spend sparkline const spark = (() => { const W = 100, H = 30; if (fired.length < 2) return null; const max = cfg.capCents; const pts = fired.map((f, i) => { const x = (i / (cfg.burst - 1)) * W; const y = H - (f.spend / max) * (H - 3) - 1.5; return [x, y]; }); const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" "); return ( ); })(); return (
Simulate a runaway agent
{cfg.agent} fires a burst against your budget policy. Guardrails at machine speed — watch.
{phase === "done" ? : }
{/* budget meter */}
budget policy · prl_demo_budget_daily {D_sim.fmtUSD(spend)} / {D_sim.fmtUSD(cfg.capCents)}
{/* live event stream */}
live calls {capturedCount} captured · {deniedCount} denied
{fired.length === 0 ? (
Idle — press Simulate to fire a burst.
) : fired.map((f) => (
#{f.i} {cfg.meter} {D_sim.fmtUSD(cfg.callCents)} {f.kind === "captured" ? captured : DENY}
))}
{/* spend sparkline + result */}
spend vs. cap
{spark ||
}
{phase === "done" ? (
Budget policy blocked {deniedCount} calls before execution — $0.00 over cap.
) : (
{phase === "running" ? "Spend racing toward the cap…" : "The line flattens the instant the policy denies."}
)}
); } Object.assign(window, { RunawaySimulation });