/* eagle-demo.jsx — run engine + Model ("the black box") and Application ("the pipeline") screens. Each consumes the runX(alert, emit, shouldStop) seam and renders a visually distinct experience. */ function _initRun() { return { events: [], response: "", responseStarted: false, responseDone: false, forgotten: false, nav: { tokIn: 0, tokOut: 0, cost: 0, latency: 0, tps: 0 }, stages: {}, ragDocs: [], ctx: null, agents: {}, agentFind: {}, mcp: [], mcpPending: null, actions: [], a2a: [], report: null, summary: null, }; } function _apply(s, ev, t0) { const ts = (performance.now() - t0) / 1000; switch (ev.t) { case "nav": return { ...s, nav: { tokIn: ev.tokIn, tokOut: ev.tokOut, cost: ev.cost, latency: ev.latency, tps: ev.tps } }; case "telem": return { ...s, events: [...s.events, { ...ev, _id: window.eagleEid(), ts }] }; case "token": return { ...s, response: s.response + ev.text }; case "respStart": return { ...s, responseStarted: true, responseDone: false }; case "respDone": return { ...s, responseDone: true }; case "forgotten": return { ...s, forgotten: true }; case "stage": return { ...s, stages: { ...s.stages, [ev.id]: ev.status } }; case "ragdoc": return { ...s, ragDocs: [...s.ragDocs, ev.doc] }; case "ctx": return { ...s, ctx: ev.parts }; case "agent": return { ...s, agents: { ...s.agents, [ev.id]: ev.status } }; case "agentfind": return { ...s, agentFind: { ...s.agentFind, [ev.id]: { sev: ev.sev, cat: ev.cat } } }; case "mcpstart": return { ...s, mcpPending: ev.tool }; case "mcp": return { ...s, mcp: [...s.mcp, { ...ev, _id: window.eagleEid() }], mcpPending: null }; case "action": { const i = s.actions.findIndex((a) => a.id === ev.id); if (i >= 0) { const n = [...s.actions]; n[i] = { ...ev }; return { ...s, actions: n }; } return { ...s, actions: [...s.actions, { ...ev }] }; } case "a2a": return { ...s, a2a: [...s.a2a, { ...ev, _id: window.eagleEid() }] }; case "report": return { ...s, report: ev }; case "summary": return { ...s, summary: ev }; default: return s; } } function useEagleRun(runner) { const [state, setState] = React.useState(_initRun); const [running, setRunning] = React.useState(false); const idRef = React.useRef(0); const t0Ref = React.useRef(0); function clearTelem() { setState((s) => ({ ...s, events: [] })); } function reset() { idRef.current++; setRunning(false); setState(_initRun()); } async function run(alert) { const myId = ++idRef.current; const shouldStop = () => idRef.current !== myId; t0Ref.current = performance.now(); setState(_initRun()); setRunning(true); const emit = (ev) => { if (!shouldStop()) setState((s) => _apply(s, ev, t0Ref.current)); }; try { await runner(alert, emit, shouldStop); } catch (e) { console.error("eagle run", e); } if (!shouldStop()) setRunning(false); } return { state, running, run, reset, clearTelem }; } function fmtMeters(nav, extra = 0) { const tot = nav.tokIn + nav.tokOut; return { tokens: tot ? nav.tokIn.toLocaleString() + " / " + nav.tokOut : "0", cost: window.eagleFmtCost(nav.cost + extra), latency: nav.latency ? (nav.latency >= 1000 ? (nav.latency / 1000).toFixed(2) + "s" : nav.latency + "ms") : "—" }; } // cmd+enter to run, scoped to the *visible* screen (all live screens stay mounted) function useRunHotkey(onRun, running, active = true) { React.useEffect(() => { if (!active) return; const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); if (!running) onRun(); } }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [onRun, running, active]); } /* ---- streaming response block ------------------------------- */ function ResponseBlock({ state, layerKey, emptyHint }) { const E = useE(); const lc = E[layerKey]; const showCursor = state.responseStarted && !state.responseDone; if (!state.responseStarted && !state.response) { return

{emptyHint}

; } return (
Response {state.responseDone && } {state.responseDone && state.response} />}
{showCursor && }
); } /* ---- run summary strip -------------------------------------- */ function RunSummary({ s, layerKey }) { const E = useE(); const lc = E[layerKey]; const items = []; if (s.steps != null) items.push(["Steps", s.steps]); if (s.tools != null) items.push(["Tools", s.tools]); if (s.mcp != null) items.push(["MCP calls", s.mcp]); if (s.a2a != null) items.push(["A2A msgs", s.a2a]); if (s.actions != null) items.push(["Actions", s.actions]); if (s.calls != null) items.push(["API calls", s.calls]); items.push(["Tokens", s.tokens.toLocaleString()], ["Cost", s.cost], ["Time", s.time]); return (
{items.map(([k, v], i) =>
{k}
{v}
)}
); } /* ============================================================ MODEL — "the black box" ============================================================ */ function BlackBox({ phase, lc }) { const E = useE(); const thinking = phase === "thinking"; return (
{thinking && }
Raw model
{thinking ? "thinking…" : "stateless"}
); } const MODEL_LACKS = [ ["Memory", "Brain", "stateless — forgets every request"], ["Tools / MCP", "Wrench", "cannot call any tool or system"], ["RAG retrieval", "Database", "no access to runbooks or history"], ["Guardrails", "ShieldCheck", "input & output are unfiltered"], ["Gateway policy", "RouteOff", "no routing, limits or logging"], ["Agent identity", "Fingerprint", "unauthenticated, no scoped creds"], ]; function CapabilitiesPanel() { const E = useE(); return (
Capabilities
what a raw model lacks — the contrast is the point
{MODEL_LACKS.map(([label, icon, note]) => (
{label}
{note}
))}
); } function ModelScreen({ alert, onBack, onPickAlert, mode, onToggleTheme, onGo, active }) { const E = useE(); const L = window.LAYERS.model; const lc = E.model; const { state, running, run, reset, clearTelem } = useEagleRun(window.runModel); const started = running || state.responseStarted || state.forgotten; const phase = running && !state.responseStarted ? "thinking" : "idle"; const meters = fmtMeters(state.nav); const doRun = React.useCallback(() => run(alert), [alert]); useRunHotkey(doRun, running, active); React.useEffect(() => { reset(); }, [alert.id]); return (
No memory} />
{/* main column */}
{alert.code} · alert in →
one-shot answer ↓
{state.forgotten && (
No memory. The answer above is all you get — the model keeps no state, so the next request starts cold with zero recollection of this one.
)}
{state.summary && }
{/* rail: capabilities (the lacks) + sparse telemetry */}
Under the hood {state.events.length} events
{state.events.length === 0 ?

No telemetry until you run — and there won't be much.

: state.events.map((ev) => )} {(state.summary || state.forgotten) &&
That's all there is — one API call, no retrieval, no tools, no memory. The emptiness is the point.
}
); } // compact telem row for the model rail function ModelTelemRow({ ev }) { const E = useE(); const c = E[ev.ck] || E.muted; return (
+{ev.ts.toFixed(2)}s {ev.label} {ev.value && {ev.value}} {ev.ok && }
); } /* ============================================================ APPLICATION — "the pipeline" ============================================================ */ const APP_NODES = [ { id: "guard_in", label: "Input Guardrails", icon: "ShieldCheck", ck: "guard" }, { id: "rag", label: "RAG Retrieval", icon: "Database", ck: "rag" }, { id: "ctx", label: "Context Assembly", icon: "Layers", ck: "app" }, { id: "model", label: "Model", icon: "Box", ck: "model" }, { id: "guard_out", label: "Output Guardrails", icon: "ShieldCheck", ck: "guard" }, ]; function PipelineStrip({ stages }) { const E = useE(); return (
{APP_NODES.map((n, i) => { const st = stages[n.id]; const c = E[n.ck]; const on = st === "active" || st === "done"; return (
{st === "active" && } {st === "done" && }
{n.label}
{i < APP_NODES.length - 1 &&
} ); })}
); } function ContextBar({ ctx }) { const E = useE(); if (!ctx) return null; const segs = [["system", "system", E.gateway], ["history", "history", E.cost], ["rag", "RAG docs", E.rag], ["alert", "alert", E.high]]; const total = ctx.system + ctx.history + ctx.rag + ctx.alert; return (
Context composition {total.toLocaleString()} input tok
{segs.map(([k, , c]) =>
)}
{segs.map(([k, label, c]) => {label} {ctx[k]})}
); } function RagDocCard({ doc }) { const E = useE(); const [open, setOpen] = React.useState(false); return (
{open &&
{doc.snippet}
}
); } function GuardrailChips({ stages }) { const E = useE(); const checks = [["Input validation", "guard_in"], ["Injection scan", "guard_in"], ["PII detection", "guard_in"], ["IP-range check", "guard_out"], ["Destructive-action", "guard_out"], ["Confidence ≥ 0.9", "guard_out"]]; const stat = (s) => stages[s] === "done" ? "pass" : stages[s] === "active" ? "run" : "idle"; return (
Guardrails
{checks.map(([label, s]) => { const st = stat(s); const c = st === "pass" ? E.success : st === "run" ? E.guard : E.muted; return ( {st === "pass" ? : st === "run" ? : } {label} ); })}
); } function ConversationHistory({ turns }) { const E = useE(); const [open, setOpen] = React.useState(false); const past = [ { q: "Summarise tonight's open Finance-department alerts.", a: "3 open · 2 HIGH (Tor exit, priv-esc on workstation-043), 1 MEDIUM. workstation-043 is the common host." }, { q: "What changed on workstation-043 in the last hour?", a: "New admin account svc_helpdesk2, outbound to a Tor exit node, and 2.3 MB egress." }, ]; const shown = past.slice(0, Math.max(1, turns - 1)); return (
{open &&
{shown.map((t, i) => (
You{t.q}
App{t.a}
))}
}
); } function EvidenceRail({ state, alert, clearTelem }) { const E = useE(); const docs = state.ragDocs.length ? state.ragDocs : null; return (
{/* retrieved knowledge / corpus preview */}
{docs ? "Retrieved knowledge · " + docs.length : "Knowledge base"} {!docs && available}
{docs ? docs.map((d, i) => ) : alert.rag.map((d, i) => (
{d.title} indexed
))}
{state.ctx ? : (
Context window assembles at run time — system + history + RAG + alert.
)}
); } function AppScreen({ alert, onBack, onPickAlert, mode, onToggleTheme, onGo, active }) { const E = useE(); const L = window.LAYERS.app; const lc = E.app; const [turns, setTurns] = React.useState(1); const [priorCost, setPriorCost] = React.useState(0.0072); const { state, running, run, reset, clearTelem } = useEagleRun(window.runApp); const started = running || state.responseStarted || state.summary; const meters = fmtMeters(state.nav, priorCost); const doRun = React.useCallback(() => { setPriorCost((c) => c + state.nav.cost); run(alert); }, [alert, state.nav.cost]); useRunHotkey(doRun, running, active); const wasDone = React.useRef(false); React.useEffect(() => { reset(); wasDone.current = false; }, [alert.id]); React.useEffect(() => { if (state.responseDone && state.summary && !wasDone.current) { wasDone.current = true; setTurns((t) => t + 1); } if (!state.responseDone) wasDone.current = false; }, [state.responseDone, state.summary]); return (
Session · {turns} turns} />
{/* left: history + response */}
{state.summary && }
{/* right: evidence rail */}
); } Object.assign(window, { useEagleRun, fmtMeters, useRunHotkey, ResponseBlock, RunSummary, ModelScreen, AppScreen });