// AGENTS view — terminal-style live ops feed. const { useState: useStateA, useEffect: useEffectA } = React; function Agents({ data }) { const [tick, setTick] = useStateA(0); const [filter, setFilter] = useStateA("all"); // Live approval queue from the orchestrator manager. Hardcoded mock data // was previously used here — buttons looked clickable but did nothing, // which is why the user reported "APPROVE button not working". Now we // poll /api/admin/manager/pending and wire the buttons to the real // /api/admin/manager/decide endpoint. const [pending, setPending] = useStateA([]); const [pendingState, setPendingState] = useStateA('loading'); // loading | empty | ready | error const [busyId, setBusyId] = useStateA(null); // the approval id mid-decision const [errMsg, setErrMsg] = useStateA(null); // Live event-bus tail. Was a 13-line hardcoded fake (stripe.com / probe.gemini / // cited:7,n:8 etc) — same class of bug as the now-killed status-tag mocks. // Now fetched from /api/admin/orchestrator/bus and re-rendered every 5s. const [events, setEvents] = useStateA([]); const [eventsState, setEventsState] = useStateA('loading'); const fetchEvents = React.useCallback(async () => { try { const r = await fetch('/api/admin/orchestrator/bus?limit=30'); const j = await r.json(); if (!j?.ok) throw new Error(j?.error || 'fetch failed'); const items = Array.isArray(j.events) ? j.events : []; setEvents(items); setEventsState(items.length ? 'ready' : 'empty'); } catch (e) { setEventsState('error'); } }, []); const fetchPending = React.useCallback(async () => { try { const r = await fetch('/api/admin/manager/pending'); const j = await r.json(); if (!j?.ok) throw new Error(j?.error || 'fetch failed'); const items = Array.isArray(j.pending) ? j.pending : []; setPending(items); setPendingState(items.length ? 'ready' : 'empty'); setErrMsg(null); } catch (e) { setPendingState('error'); setErrMsg(String(e?.message || e)); } }, []); const decide = React.useCallback(async (id, decision) => { setBusyId(id); try { const r = await fetch('/api/admin/manager/decide', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id, decision, by: 'admin-ui' }) }); const j = await r.json(); if (!j?.ok) throw new Error(j?.error || 'decide failed'); // Optimistically remove from the local list, then refresh from server. setPending(p => p.filter(x => x.id !== id)); fetchPending(); } catch (e) { setErrMsg(`${decision} failed: ${String(e?.message || e)}`); } finally { setBusyId(null); } }, [fetchPending]); useEffectA(() => { fetchPending(); const poll = setInterval(fetchPending, 30000); return () => clearInterval(poll); }, [fetchPending]); useEffectA(() => { fetchEvents(); const poll = setInterval(fetchEvents, 5000); // fast poll — bus changes often return () => clearInterval(poll); }, [fetchEvents]); useEffectA(() => { const id = setInterval(() => setTick(t => t + 1), 2000); return () => clearInterval(id); }, []); const agents = [ { id: "spider.retrieval", icon: "▣", name: "Spider · Retrieval", interval: "6h", score: 0.82 }, { id: "spider.citation", icon: "❝", name: "Spider · Citation", interval: "12h", score: 0.71 }, { id: "spider.intent", icon: "◎", name: "Spider · Intent", interval: "12h", score: 0.69 }, { id: "spider.entity", icon: "✦", name: "Spider · Entity", interval: "24h", score: 0.94 }, { id: "spider.trust", icon: "△", name: "Spider · Trust", interval: "24h", score: 0.88 }, { id: "spider.freshness", icon: "↻", name: "Spider · Freshness", interval: "1h", score: 0.42 }, { id: "spider.actionability", icon: "▶", name: "Spider · Actionability", interval: "12h", score: 0.86 }, { id: "spider.multimodal", icon: "▤", name: "Spider · Multimodal", interval: "24h", score: 0.55 }, { id: "probe.chatgpt", icon: "◐", name: "Probe · ChatGPT", interval: "6h", score: 0.84 }, { id: "probe.claude", icon: "◑", name: "Probe · Claude", interval: "6h", score: 0.76 }, { id: "probe.gemini", icon: "◒", name: "Probe · Gemini", interval: "6h", score: 0.61 }, { id: "probe.perplexity", icon: "◓", name: "Probe · Perplexity", interval: "6h", score: 0.91 }, { id: "meta.learner", icon: "Σ", name: "Meta · Learner", interval: "1d", score: 0.78 }, { id: "guard.hard-filter", icon: "✕", name: "Guard · Hard Filter", interval: "on-scan", score: 1.00 }, ]; const filteredFeed = data.feed.filter(f => filter === "all" || f.sev === filter); return (
{/* status strip */}
● LIVE AGENT OPS SESSION: {String(tick).padStart(4,"0")} UPTIME: 14d 06h 22m QUEUE: 7 PENDING APPROVALS: 2
REFRESH 2s · MANAGER: ONLINE · BUS: ONLINE
{/* KPIs */}
AGENTS
{agents.length}online
ENROLLED
{data.enrolledDomains.length}domains
FINDINGS · 24H
347
CRITICAL · 24H
03
{/* enrolled domains strip */}
ENROLLED ▸ {data.enrolledDomains.map((d) => ( ● {d} ))} + add domain
{/* main grid */}
{/* live feed */}
// LIVE FINDING FEED

tail -f /var/log/answena/findings

{["all", "info", "warn", "crit"].map(s => ( ))}
{filteredFeed.map((f, i) => (
{f.ts} {f.agent} {f.msg} {f.domain}
))}
{new Date().toTimeString().slice(0,8)} awaiting next event
{/* agents grid */}
// AGENT REGISTRY

14 workers · health & schedule

{agents.map((a) => (
{a.icon}
{a.name}
every {a.interval} · last run {Math.floor(Math.random() * 60) + 1}m ago
{(a.score * 100).toFixed(0)}
))}
{/* manager + bus */}
// PENDING HUMAN APPROVALS

Manager queue · {String(pending.length).padStart(2, "0")} awaiting

{errMsg && (
{errMsg}
)} {pendingState === 'loading' && (
Loading approval queue…
)} {pendingState === 'empty' && (
No pending approvals.
Background agents queue items here when they hit a decision gate the auto-rules can't resolve.
)} {pendingState === 'error' && (
Could not load queue. Click [refresh] to retry.
)} {pendingState === 'ready' && pending.map((p) => (
{p.kind} by {p.requestedBy || p.by || 'unknown'}{p.domain ? ` · ${p.domain}` : ''} 
                  {typeof p.payload === 'string' ? p.payload : JSON.stringify(p.payload || {}, null, 2)}
))}
// EVENT BUS

orchestrator broadcast · last 30

{eventsState === 'loading' && (
Loading event bus…
)} {eventsState === 'empty' && (
Event bus empty — no orchestrator activity yet.
Run a scan or trigger a background agent to populate.
)} {eventsState === 'error' && (
Could not reach /api/admin/orchestrator/bus.
)} {eventsState === 'ready' && events.map((e, i) => { const ts = e.at ? new Date(e.at).toTimeString().slice(0, 8) : '—'; const payloadStr = e.payload == null ? '' : (typeof e.payload === 'string' ? e.payload : JSON.stringify(e.payload)); return (
{ts} {e.topic} {payloadStr}
); })}
{/* spider memory chart */}
// SPIDER SWARM · LEARNING TIMELINE

Percentile memory rebuilds every 10 scans.

corpus: 2,847 · rebuilds recorded: 284 · top predictor: claim-evidence (r=0.71)
); } function SwarmChart() { const W = 1200, H = 260, PL = 50, PR = 20, PT = 16, PB = 32; const plotW = W - PL - PR, plotH = H - PT - PB; const N = 60; const spiders = [ { id: "retrieval", color: "#5cd1ff", base: 0.65, drift: 0.18 }, { id: "citation", color: "#5cff9d", base: 0.55, drift: 0.16 }, { id: "intent", color: "#ffb454", base: 0.60, drift: 0.10 }, { id: "entity", color: "#b388ff", base: 0.78, drift: 0.06 }, { id: "trust", color: "#ff7ad9", base: 0.70, drift: 0.12 }, { id: "freshness", color: "#ffd54a", base: 0.42, drift: 0.20 }, { id: "actionability", color: "#ff9f40", base: 0.72, drift: 0.08 }, { id: "multimodal", color: "#aaffe0", base: 0.45, drift: 0.14 }, ]; // deterministic pseudo-noise const noise = (s, i) => Math.sin(i * 0.23 + s) * 0.5 + Math.cos(i * 0.41 + s * 1.7) * 0.3; const xAt = (i) => PL + (i / (N - 1)) * plotW; const yAt = (v) => PT + plotH - Math.max(0, Math.min(1, v)) * plotH; return (
{/* gridlines */} {[0.25, 0.5, 0.75].map(g => ( {(g*100).toFixed(0)}% ))} {/* x axis ticks */} {[0, 0.25, 0.5, 0.75, 1].map(t => { const x = PL + t * plotW; return T-{Math.round((1-t) * 60)}d; })} {/* lines */} {spiders.map((s, si) => { const pts = Array.from({ length: N }, (_, i) => { const v = s.base + s.drift * (i / N) + noise(si, i) * 0.04; return `${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}`; }).join(" "); return ; })}
{spiders.map(s => ( {s.id} ))}
); } window.Agents = Agents;