onNodeClick && onNodeClick(node)} > {/* Indent guide: vertical line from this depth down to children */} {depth > 0 && (

)} {/* Expand/collapse chevron */} {hasChildren ? ( ) : ( )} {/* Status icon */} {/* Node label */} {node.label} {/* Status badge */} {statusLabel(node.status)} {/* Description (only when running or with description) */} {node.description && (isRunning || node.status === 'proposed') && ( {node.description} )}

); } // ─── Tree node with children (recursive) ───────────────────────────────────── function TreeNode({ node, depth, tok, expandedIds, onToggle, onNodeClick, density, newNodeIds }) { const hasChildren = node.children && node.children.length > 0; const expanded = !!expandedIds[node.id]; const isNew = !!newNodeIds[node.id]; return (

{/* Horizontal connector line */} {depth > 0 && (

)} {/* Children: animate height open/close */} {hasChildren && (

{node.children.map(child => ( ))}

)}

); } // ─── PlanVisualizer (controlled) ───────────────────────────────────────────── function PlanVisualizer({ plan = null, theme = 'light', defaultExpanded = false, onNodeClick, density = 'compact', } = {}) { injectPVStyles(); const [resolvedTheme, setResolvedTheme] = useState(resolveTheme(theme)); useEffect(() => { if (theme !== 'auto') { setResolvedTheme(theme); return; } const mq = window.matchMedia('(prefers-color-scheme: dark)'); const handler = e => setResolvedTheme(e.matches ? 'dark' : 'light'); mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, [theme]); const tok = TOKENS[resolvedTheme] || TOKENS.light; // Expanded IDs tracking const [expandedIds, setExpandedIds] = useState(() => { const ids = {}; if (!plan) return ids; if (defaultExpanded === true) return ids; // all collapsed initially if (typeof defaultExpanded === 'number') { // BFS: expand up to `defaultExpanded` depth const queue = [{ node: plan, d: 0 }]; while (queue.length) { const { node, d } = queue.shift(); if (d < defaultExpanded && node.children?.length) { ids[node.id] = true; node.children.forEach(c => queue.push({ node: c, d: d + 1 })); } } } return ids; }); // Track newly added nodes for slide-in animation const [newNodeIds, setNewNodeIds] = useState({}); // Seed expandedIds when plan changes (new plan = reset) useEffect(() => { setExpandedIds(prev => { if (Object.keys(prev).length === 0 && defaultExpanded === true) { const ids = {}; const expandAll = n => { if (n.children?.length) { ids[n.id] = true; n.children.forEach(expandAll); } }; expandAll(plan); return ids; } return prev; }); }, [plan]); const handleToggle = useCallback((nodeId) => { setExpandedIds(prev => ({ ...prev, [nodeId]: !prev[nodeId] })); }, []); // Keyboard navigation const handleKeyDown = useCallback((e) => { const focused = document.activeElement; if (!focused || focused.getAttribute('role') !== 'treeitem') return; const nodeId = focused.getAttribute('data-node-id'); if (!nodeId) return; function findNode(n, id) { if (n.id === id) return n; for (const c of (n.children || [])) { const f = findNode(c, id); if (f) return f; } return null; } if (!plan) return; const node = findNode(plan, nodeId); if (!node) return; if (e.key === 'ArrowRight') { // Expand or go to first child if (node.children?.length) { if (!expandedIds[nodeId]) { setExpandedIds(prev => ({ ...prev, [nodeId]: true })); } else if (node.children.length) { const el = document.querySelector(`[data-node-id="${node.children[0].id}"]`); el?.focus(); } } e.preventDefault(); } else if (e.key === 'ArrowLeft') { // Collapse or go to parent if (node.children?.length && expandedIds[nodeId]) { setExpandedIds(prev => ({ ...prev, [nodeId]: false })); } else { // Find parent in tree — use depth attribute const parent = focused.closest('[role="group"]')?.previousElementSibling; if (parent) parent.focus(); } e.preventDefault(); } else if (e.key === 'ArrowDown') { // Go to next sibling e.preventDefault(); } else if (e.key === 'Enter' || e.key === ' ') { if (node.children?.length) { setExpandedIds(prev => ({ ...prev, [nodeId]: !prev[nodeId] })); } e.preventDefault(); } }, [plan, expandedIds]); useEffect(() => { document.addEventListener('keydown', handleKeyDown); return () => document.removeEventListener('keydown', handleKeyDown); }, [handleKeyDown]); if (!plan) { return (

No plan yet — waiting for agent to propose steps.

); } const dense = density === 'compact'; return (

{/* Plan header */}

Agent Plan

{countNodes(plan)} steps

{/* Tree body */}

); } // Count total nodes in tree (for display) function countNodes(node) { if (!node.children?.length) return 1; return 1 + node.children.reduce((acc, c) => acc + countNodes(c), 0); } // ─── PlanVisualizerContainer (AG-UI auto-wiring) ────────────────────────────── /** * Subscribes to AG-UI plan events and maintains the plan tree. * Handles streaming insertions (PLAN_NODE_ADDED) with slide-in animation. * * Props: * eventSource: EventTarget | EventEmitter * initialPlan?: PlanNode * theme, defaultExpanded, density, onNodeClick — passed through */ function PlanVisualizerContainer({ eventSource, initialPlan = null, theme = 'light', defaultExpanded = false, density = 'compact', onNodeClick, } = {}) { const [plan, setPlan] = useState(initialPlan); const [newIds, setNewIds] = useState({}); // Mark node as "new" for slide-in animation, then clear after animation const markNew = useCallback((nodeId) => { setNewIds(prev => ({ ...prev, [nodeId]: true })); setTimeout(() => { setNewIds(prev => { const next = { ...prev }; delete next[nodeId]; return next; }); }, 600); }, []); // Insert a node into the tree (by parentId) const insertNode = useCallback((parentId, newNode) => { function insert(children) { if (!children) return children; return children.map(child => { if (child.id === parentId) { return { ...child, children: [...(child.children || []), newNode], }; } if (child.children) { return { ...child, children: insert(child.children) }; } return child; }); } setPlan(prev => prev ? { ...prev, children: insert(prev.children) } : prev); markNew(newNode.id); }, [markNew]); // Update a node's fields const updateNode = useCallback((nodeId, patch) => { function update(node) { if (node.id === nodeId) return { ...node, ...patch }; if (node.children) return { ...node, children: node.children.map(update) }; return node; } setPlan(prev => prev ? update(prev) : prev); }, []); useEffect(() => { if (!eventSource) return; function onProposed(e) { const d = e.detail || e; setPlan(d.plan || null); setNewIds({}); } function onNodeAdded(e) { const d = e.detail || e; if (d.parentId) { insertNode(d.parentId, d.node); } else if (d.node && plan) { // Root-level addition setPlan(prev => prev ? { ...prev, children: [...(prev.children || []), d.node], } : prev); markNew(d.node.id); } } function onNodeUpdated(e) { const d = e.detail || e; if (d.nodeId && d.patch) updateNode(d.nodeId, d.patch); } function onCompleted(e) { const d = e.detail || e; if (d.nodeId) updateNode(d.nodeId, { status: 'completed' }); } function onFailed(e) { const d = e.detail || e; if (d.nodeId) updateNode(d.nodeId, { status: 'failed' }); } if (typeof eventSource.addEventListener === 'function') { eventSource.addEventListener('PLAN_PROPOSED', onProposed); eventSource.addEventListener('PLAN_NODE_ADDED', onNodeAdded); eventSource.addEventListener('PLAN_NODE_UPDATED', onNodeUpdated); eventSource.addEventListener('PLAN_NODE_COMPLETED', onCompleted); eventSource.addEventListener('PLAN_NODE_FAILED', onFailed); return () => { eventSource.removeEventListener('PLAN_PROPOSED', onProposed); eventSource.removeEventListener('PLAN_NODE_ADDED', onNodeAdded); eventSource.removeEventListener('PLAN_NODE_UPDATED', onNodeUpdated); eventSource.removeEventListener('PLAN_NODE_COMPLETED', onCompleted); eventSource.removeEventListener('PLAN_NODE_FAILED', onFailed); }; } if (typeof eventSource.on === 'function') { eventSource.on('PLAN_PROPOSED', onProposed); eventSource.on('PLAN_NODE_ADDED', onNodeAdded); eventSource.on('PLAN_NODE_UPDATED', onNodeUpdated); eventSource.on('PLAN_NODE_COMPLETED', onCompleted); eventSource.on('PLAN_NODE_FAILED', onFailed); return () => { eventSource.off('PLAN_PROPOSED', onProposed); eventSource.off('PLAN_NODE_ADDED', onNodeAdded); eventSource.off('PLAN_NODE_UPDATED', onNodeUpdated); eventSource.off('PLAN_NODE_COMPLETED', onCompleted); eventSource.off('PLAN_NODE_FAILED', onFailed); }; } }, [eventSource, insertNode, updateNode, plan, markNew]); return ( ); } // ─── Exports ─────────────────────────────────────────────────────────────────── if (typeof module !== 'undefined') { module.exports = { PlanVisualizer, PlanVisualizerContainer }; }