REFERENCE
- Gallery page: https://magpui.com/en/i/agent-pull-request-card-with-commit-graph-386cb7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-pull-request-card-with-commit-graph-386cb7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-pull-request-card-with-commit-graph-386cb7/clip.mp4
- Original post: https://x.com/pitus_/status/2111519352503873866 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: A generative UI card that an AI coding agent drops into the chat when it opens a pull request. It shows the PR title, a live status, and a vertical git commit graph with branch lanes. The card builds itself step by step (Committing the last changes, Opening the pull request, Checking it merges cleanly), then shows conflicts with main (conflicting commits turn amber, a hover card lists the clashing lines per file), and finally resolves to a merged state. It should feel like a precise, quiet developer tool where the agent's progress is visible, not hidden behind a spinner.
DESIGN SYSTEM: Chat column max-width 680px on white #FFFFFF. Card: border 1px #ECECEC, radius 14px, padding 16px, no heavy shadow. Header row: title 15px weight 600 #1A1A1A + PR number in #8A8A8A, status on the right (dot + label 13px): Open #22A06B green, conflicts #E08A00 amber, Merged #7C3AED purple. Commit rows: 32px tall, message 14px #1A1A1A (dimmed commits #8A8A8A), branch chips in 12px monospace with tinted fill (purple #F3EEFF / text #7C3AED, teal #E6F7F4 / text #0F9F8A, gray #F2F2F2 / text #666), right side short hash 12px mono #9A9A9A + author and relative time 13px #6B6B6B. Graph gutter 40px on the left: 1.5px lane lines, 7px commit dots, merge commit 12px dot; lanes purple #8B5CF6, teal #2BB5A0, gray #C4C4C4. Footer row: branch icon + Merged into main, a ghost GitHub-style button (radius 999px, fill #F4F4F4). Above the card a collapsible "Thinking 4s / Worked for 5s" line 13px #8A8A8A with a chevron. Below: assistant text 15px/1.6 with inline code chips (mono 13px, fill #F2F2F2, radius 5px), a small status chip (#128 Merged), then the composer: radius 16px, border 1px #ECECEC, placeholder 15px #A0A0A0, toolbar chips (repo, Local/Cloud segmented), model level, mic, and a 32px round send button #2563EB.
MOTION:
- Card enter: opacity 0->1, translateY 8px->0, scale 0.98->1 over 320ms cubic-bezier(0.22,1,0.36,1).
- Commit rows stream in one by one: each row opacity 0->1, translateY 4px->0 over 220ms cubic-bezier(0.22,1,0.36,1), stagger 70ms; the lane line draws down to the new dot with stroke-dashoffset over 220ms.
- Step label under the graph (spinner + text) swaps with a 150ms blur-fade crossfade.
- Conflict state: conflicting rows fade their background to #FFF6E8 and dots to amber over 240ms ease-out, stagger 60ms; a footer row slides in with a warning icon, "3 conflicts with main" and a Resolve conflicts text button #2563EB.
- Hover card on the conflict count: opacity 0->1, scale 0.96->1, translateY 4px->0 over 180ms cubic-bezier(0.16,1,0.3,1), origin bottom-left; lists file name + line, then each author's conflicting line in 12px mono.
- Merged: the new merge commit dot pops in (scale 0->1.15->1 over 360ms), the branch lane curves into main, all status labels crossfade to purple over 200ms.
SECTIONS: Parts: thinking disclosure, card header with status, commit graph rows, progress step line, conflict footer + hover card, merged footer, assistant message, status chip, composer. States: creating (rows streaming, spinner), checking (spinner "Checking it merges cleanly"), conflicts (amber rows, hover card), resolving, merged (purple), error.
IMPLEMENTATION: React + Motion (framer-motion) for row stagger, AnimatePresence for step swaps and hover card; the graph as one inline SVG per row (or one absolute SVG) so lane lines can be drawn with stroke-dashoffset. Drive everything from a typed state machine (creating -> checking -> conflicts -> resolving -> merged) so the agent can stream state updates. prefers-reduced-motion: rows appear instantly, no line drawing, only 120ms opacity fades. Keyboard: the thinking disclosure is a button with aria-expanded, the conflict count opens its hover card on focus as well as hover (and closes on Esc), buttons have visible focus rings. Announce status changes with an aria-live="polite" region. Performance: cap visible commits at ~12 with a "show more" row; avoid animating height on the whole card, animate rows instead.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components (chips, buttons, popovers, composer) and fonts; map colors to the closest existing tokens for success, warning, accent and muted text. Never copy logos, brand names, avatars or illustrations from the original; use placeholder repos, branches, authors and commit messages.
SUCCESS CHECK:
- Feeding the state machine a list of commits renders a correct multi-lane graph, rows streaming in with stagger.
- Switching to the conflicts state turns only the conflicting commits amber and the hover card (by mouse or keyboard focus) lists file, line and both versions.
- The merged state shows the merge commit and purple status everywhere, and reduced motion removes all movement.
