A workflow canvas where an inbound ticket is classified by an agent, then branches to paging on-call (urgent) or drafting and sending a reply (routine). Nodes spring in, edges draw themselves as the run advances, status chips move idle → running → success, and a shared ring slides to whichever node you select. Run it twice to see both branches. Built on React Flow (@xyflow/react), so nodes drag and the canvas pans and zooms; sample copy is fictional. A floating toolbar adds select/pan modes, zoom, undo/redo and a canvas lock; it needs components/flow-controls.tsx and lib/flow-interaction.ts alongside this file.

Props

An editable agent flow for a support-ticket pipeline. Add step opens a dialog where you pick a step type, name it and choose what it connects after (needs components/add-step-dialog.tsx); the new step springs in wired to it; select a step for a toolbar to duplicate or delete it, drag handles to connect steps yourself, and press Run flow to watch edges draw through whatever graph you built. Built on React Flow; sample copy is fictional. A floating toolbar adds select/pan modes, zoom, undo/redo and a canvas lock; it needs components/flow-controls.tsx and lib/flow-interaction.ts alongside this file.

Props