REFERENCE
- Gallery page: https://magpui.com/en/i/agent-trace-with-expanding-branches-9868b4
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-trace-with-expanding-branches-9868b4/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-trace-with-expanding-branches-9868b4/clip.mp4
- Original post: https://x.com/pitus_/status/2115019751646974021 by @pitus_
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: Build a compact dark coding-agent conversation widget that expands from a composer into a branching task trace and inline code-conflict viewer. Keep the focus on the widget, not a full dashboard. DESIGN SYSTEM: Use a near-black #101110 background and #1b1c1b cards about 480px wide, 10px corners, 16px padding, subtle #30322f borders. Use neutral sans-serif labels at 12-14px and monospace code at 11-12px. Muted gray secondary text, blue #3973ff send button, teal branch lines and yellow conflict markers. MOTION: Suggested timings: on submission reveal the task card with height expansion and opacity over 320ms cubic-bezier(0.22,1,0.36,1); stagger task rows by 70ms over 220ms. Draw thin branching SVG connectors over 450ms. Progress from thinking to completed status with a 180ms crossfade. Expand a conflicting file into inline code over 280ms using the same easing, keeping surrounding content anchored. SECTIONS: Idle composer with model and context controls; thinking label; task title; stacked execution rows with branch connectors, right-aligned elapsed times and status labels; completion message; conflict count and resolve control; expanded monospace diff with yellow gutter indicators. IMPLEMENTATION: Use React and Motion for layout transitions and SVG paths for the branch diagram. Drive the demo from explicit idle, working, completed and conflict states. Keep text readable while animating, avoid per-frame React updates, and restrict transforms to the widget. Respect prefers-reduced-motion with instant expansion and static connectors. Provide keyboard-operable disclosure buttons, visible focus rings and aria-expanded states; announce completion politely. ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholder tasks and code. SUCCESS CHECK:
- Submitting expands the composer into an ordered trace without layout jumps.
- Branch connectors remain aligned to rows at narrow widths.
- Conflict details work with keyboard and reduced motion.
