REFERENCE
- Gallery page: https://magpui.com/en/i/agent-fleet-tree-with-sub-agents-af6c71
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-fleet-tree-with-sub-agents-af6c71/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-fleet-tree-with-sub-agents-af6c71/clip.mp4
- Original post: https://x.com/flohoeller/status/2117239965352427754 by @flohoeller
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: A fleet overview component for AI agents. A left column lists lead agents as compact cards (name, model, task, cost, elapsed time, status). Hovering or selecting a lead dims the others and draws thin connector lines out to a second column with its sub-agents, and a sub-agent can branch once more to its own child. When a sub-agent needs a decision it shows a Needs you badge and an Answer button that opens an inline panel with the question, Reject and Approve buttons and a short task checklist. A header strip sums the fleet. It should feel calm, dense and precise, like a good developer tool, with a matching dark theme.
DESIGN SYSTEM: Canvas #F7F7F7 (dark: #121212). Header row 32px: small sparkle mark plus 'Fleet' 13px/600 #111111 at left; at right a summary in 11px #8A8A8A ('4 agents / 14 sub-agents 7 running 1 needs you') and a running total cost 12px tabular #111111. Lead column 260px wide, cards 64px tall with 8px gaps; sub-agent column 240px, offset 24px to the right of the connectors; a third level indents another 24px. Card: white #FFFFFF (dark #1B1B1B), radius 8px, 1px border #ECECEC (dark #2A2A2A), shadow 0 1px 2px rgba(0,0,0,0.04), padding 8px 10px. Row 1: 14px agent icon, name 12px/600 #111111, model line 10px #9A9A9A under it, status pill at right (Running: bg #EAF1FE text #2F6FE4 with a spinning 8px ring; Done: bg #E8F6EC text #2E9B55 with a check; Needs you: bg #FDF1E3 text #C46A12; Queued: bg #F1F1F1 text #8A8A8A). Row 2: 11px task text #555555 truncated with ellipsis, a stack of three 12px source avatars before it. Row 3: 10px meta #9A9A9A ('2/4 running', '3 tasks'), cost and elapsed time right aligned in tabular numbers. Connectors: 1px #C9D7F2 lines (dark #3A4A66) with 6px rounded elbows from the selected card's right edge to each child's left edge. Dimmed cards: opacity 0.45. Answer panel: 300px white card, radius 10px, shadow 0 8px 24px rgba(0,0,0,0.10), title 12px/600, body 11px #555555, buttons 24px tall (Reject ghost #F4F4F5, Approve solid #111111 with white text), then a 'Tasks 2/3 done' list with 28px rows and a 'Needs you' tag on the open one.
MOTION: Selecting a lead: other leads fade to 0.45 over 180ms cubic-bezier(0.4,0,0.2,1); connectors draw from the parent outward with stroke-dashoffset over 260ms cubic-bezier(0.22,1,0.36,1); child cards slide in 8px from the left and fade in, stagger 40ms. Switching to another lead crossfades the child column in 200ms. Running cost and elapsed time tick live once per second with a 120ms number roll. Status changes morph the pill width over 200ms. Answer panel opens below its card with scale 0.96 to 1 and fade over 180ms cubic-bezier(0.2,0.8,0.2,1), and closes in 120ms. Theme switch crossfades all colors over 240ms.
SECTIONS: Parts: header summary, lead agent column, sub-agent column, optional third-level child, connector layer, answer panel. States per card: idle, hover (border #D6D6D6), selected (border #2F6FE4 at 40%), dimmed, running, done, needs you, queued. Panel states: closed, open, approved (card turns to Running), rejected.
IMPLEMENTATION: React with Motion (framer-motion) for layout and presence animations; an absolutely positioned SVG layer for the connectors, with paths computed from card bounding boxes via ResizeObserver so lines stay attached while content changes. Keep the data as a tree (lead > sub-agents > children) with status, cost and timestamps. Keyboard: arrow keys move between leads, Enter or Right selects and moves focus into the sub-agent column, Escape closes the panel; visible 2px focus ring #2F6FE4. Announce status changes with an aria-live polite region. prefers-reduced-motion: no line drawing or slides, just instant state changes with short opacity fades. Update live counters with a single shared interval, not one timer per card.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map the colors above to the closest existing tokens. Never copy logos, brand names or provider icons from the original: use neutral placeholder icons and sample agent names and tasks.
SUCCESS CHECK:
- Selecting a different lead agent dims the others and redraws connectors to its own sub-agents.
- A sub-agent in the Needs you state opens an inline panel, and Approve switches it to Running.
- The header totals (agents, running, needs you, cost) match the tree data and update live.
