/* eagle-agent.jsx — AI Agent · "mission control". A live investigation graph:
Triage → Enrichment → Response agents on a spine with animated A2A edges,
MCP tool nodes branching off enrichment, action nodes off response, a gantt
timeline, and the assembled incident report. Theme-aware. */
const _AG = [
{ id: "triage", name: "Triage", icon: "Crosshair", role: "assess + categorise" },
{ id: "enrich", name: "Enrichment", icon: "Network", role: "MCP tool calls" },
{ id: "response", name: "Response", icon: "Zap", role: "real-world actions" },
];
function AgentNode({ def, status }) {
const E = useE(); const c = E.agent;
const active = status === "active", done = status === "done", on = active || done;
return (
{active && }
{done && }
{def.name}
{def.role}
);
}
function A2AEdge({ msg }) {
const E = useE(); const c = E.a2a;
// "Message packet in transit": a faint dashed track between the agent icons,
// with a little message chip that slides along it when a hand-off fires.
// Height matches the 56px (h-14) icon box so the track centres on the icons.
return (
{msg && (
)}
);
}
function McpNode({ ev }) {
const E = useE(); const [open, setOpen] = React.useState(false); const fn = ev.tool.split(".");
return (
{open &&
{ev.result}
}
);
}
function ActionNode({ a }) {
const E = useE(); const done = a.status === "done";
return (
{done ? : }
{a.label}
{a.tool.split(".")[1]}()
{done ? {a.chip} : pending}
);
}
function GraphCanvas({ state, alert }) {
const E = useE();
const ag = state.agents;
const branch = (on) => ({ width: 2, height: 18, background: on ? E.agent + "88" : E.border, margin: "0 auto" });
return (