// ConceptE_Workflow — Beat 2. A clean horizontal left→right chain of 4 nodes.
// Agent 1 (Extract) is the same card from Beat 1 (rendered by AgentScene).
// We overlay a role chip under it so it reads as the first node in the chain.
//
// Layout (world coords):
// N1 Extract (300, 470) <-- AgentScene draws this one
// N2 Classify (480, 470) agent node (compact card w/ sparkle)
// N3 Review (660, 470) human node (circular avatar w/ initials)
// N4 Approve (840, 470) agent node (final)
//
// Nodes appear in sequence with a small lift+fade; connectors reveal with a
// shrinking dash, then a looping packet travels each edge.
const WF_NODES = [
{ id: "n1", kind: "agent", role: "Extract", x: 410, y: 410, delay: 0 },
{ id: "n2", kind: "agent", role: "Classify", x: 590, y: 410, delay: 300 },
{ id: "n3", kind: "human", role: "Review", x: 770, y: 410, delay: 600, initials: "JM" },
{ id: "n4", kind: "agent", role: "Approve", x: 950, y: 410, delay: 900 },
];
const WF_EDGES = [
{ from: "n1", to: "n2", delay: 200 },
{ from: "n2", to: "n3", delay: 500 },
{ from: "n3", to: "n4", delay: 800 },
];
function WorkflowGraph({ t }) {
if (t < CE.T12[0]) return null;
const byId = Object.fromEntries(WF_NODES.map(n => [n.id, n]));
const nodeP = (n) => {
const t0 = n.id === "n1" ? CE.T12[0] : CE.B2[0] + n.delay;
return localE(t, [t0, t0 + 500], easeOut);
};
return (
{/* Connectors (behind nodes) */}
{WF_EDGES.map((e, i) => {
const from = byId[e.from], to = byId[e.to];
const edgeStart = CE.B2[0] + e.delay;
const revealP = localE(t, [edgeStart, edgeStart + 400], easeOut);
if (revealP <= 0) return null;
// inset the line so it doesn't poke into node bodies
const PAD = 42;
const sx = from.x + PAD, sy = from.y;
const ex = to.x - PAD, ey = to.y;
const midx = sx + (ex - sx) * revealP;
// packet — loops after reveal
const packetLoop = 1600;
const pp = ((t - (edgeStart + 500)) % packetLoop) / packetLoop;
const showPacket = t > edgeStart + 500 && revealP >= 1;
const px = sx + (ex - sx) * pp;
return (
{/* rail */}
{/* lit segment */}
{/* arrow head at destination */}
{revealP > 0.95 && (
)}
{/* packet */}
{showPacket && (
)}
);
})}
{/* Nodes */}
{WF_NODES.map((n) => {
const p = nodeP(n);
if (p <= 0) return null;
// lift + fade in
const ty = lerp(10, 0, p);
// n1 is drawn by AgentScene; just render the role chip here
if (n.id === "n1") {
return (
);
}
return (
{n.kind === "agent"
?
: }
);
})}
);
}
// --- Compact agent node: mini version of the extraction card (~60x48) ---
function CompactAgentNode() {
const W = 72, H = 54;
return (
{/* header strip */}
{/* sparkle */}
{/* body content lines */}
{/* status dot */}
);
}
// --- Human avatar: circle with initials, soft purple ---
function HumanAvatarNode({ initials = "JM" }) {
return (
{/* drop shadow */}
{/* avatar */}
{initials}
{/* "person" indicator badge — head + shoulders glyph, corner-mounted */}
{/* head */}
{/* shoulders */}
);
}
// --- Role chip ---
// Sized for legibility at the B2 camera frame (~810px wide). Previously
// the chip used 9px text which rendered ~6-7px on screen and was barely
// readable in the white card. Bumped to 13px/26h with proportionally
// larger horizontal padding.
function RoleChip({ label, kind }) {
const bg = kind === "agent" ? "#dfeaff" : "#e6dfff";
const color = kind === "agent" ? "#397ae7" : "#6d49e0";
const w = label.length * 9 + 26;
return (
{label}
);
}
Object.assign(window, { WorkflowGraph });