# Merge graph card > An agent’s pull request card that draws its commit graph as it works, runs into conflicts, resolves them and merges. A chat turn answering “Create PR”. The card is a commit graph of the branch: lanes of dots joined by curves, a row per commit with its message, a tinted branch pill, its short hash and who made it when. Rows decode into place as the agent commits, pushes, opens the pull request and fetches main, where a colleague’s new commits conflict. Resolve them and the base merges in conflict by conflict, the tests run and the card turns green; merge it and the branch turns purple. A React component by Bruno Delorence: https://brunodelorence.com/components/merge-graph-card. MIT License, Copyright (c) 2026 Bruno Delorence. Category: AI. ## Anatomy 1. **Request**: The person’s message, right-aligned in a grey bubble: “Create PR”, or what they typed. 2. **Disclosure**: Thinking, with a shimmer and a seconds count, while the agent works; then Worked for Ns. It opens the log of what it did. 3. **Card**: The pull request: its title and number, an Open or Merged pill, the commit graph, the checks once green, and a footer. 4. **Commit row**: One commit: its band of the lanes, the message decoding into place, a branch pill or a conflict count, and its hash with who and when. 5. **Footer**: What is happening or left to do, and the one button that settles it: Resolve conflicts, Merge, or Open PR once merged. 6. **Answer**: The agent’s words, streamed one at a time, with the number in bold and file and branch names as code. 7. **Status chip**: Over the composer: Create PR before the turn, then the number and where it stands. The diff stat beside it lists the changed files. 8. **Composer**: A message line and its toolbar: attach, the repository, local or cloud, effort, dictate and send. Send asks for a new pull request. ## When to use - An agent that opens a pull request for the person and has to show where it stands: open, conflicting, green, merged. - Branch work where the shape of the history matters: what the branch adds, what moved on the base, where they meet. - A turn that needs the person to settle one thing (resolve the conflicts, then merge) with a single button on the card. - Chat or side-panel agents in a code tool, where the card sits in the thread above the composer. ## When not to use - A list of many pull requests to triage. Use a table with status columns, one row each. - A full review: diffs line by line and comments. Link to the code host or a diff viewer instead. - Histories with more than three lanes or dozens of commits: the row-by-row graph is drawn for a short branch. - Telling the person a merge already happened somewhere else. A one-line message with a link says it. ## Installation Install it with the shadcn CLI, into components/merge-graph-card of any React project: ```sh npx shadcn@latest add https://brunodelorence.com/r/merge-graph-card.json ``` Or add the registry to components.json once, as a namespace that coding agents and the shadcn MCP server search by name: ```json { "registries": { "@brunodelorence": "https://brunodelorence.com/r/{name}.json" } } ``` ```sh npx shadcn@latest add @brunodelorence/merge-graph-card ``` Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite). It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light. ## Usage ```tsx import { MergeGraphCard } from './merge-graph-card'; export function ReviewTurn() { return ( console.log('merged')} /> ); } ``` ## States - **Before the request**: Only the Create PR chip and the composer: tapping either starts the turn. - **Conflicts**: The base moved on: two of its commits carry amber counts, the footer offers Resolve conflicts. - **Ready to merge**: The base is merged in, the conflict marks are gone and four checks line up green over Merge. - **Merged**: The top node and the pill turn purple, the diff stat leaves, and the button becomes Open PR. - **Dark**: Every colour is a light-dark() token: `colorScheme="dark"`, or the page’s scheme without it. - **Narrow**: Under 500 px of room the branch pills and hashes step aside and the composer keeps its icons; under 420 px the folder, dictate and diff blocks go too. ## How it works - The whole turn is one model, and the agent’s work is a script of small patches to it, each after a pause: commit, push, open, fetch, check. Resolve and Merge play two more scripts. The rows and edges of the graph are worked out from the model, so any stage draws the same whether it is reached step by step or at once (defaultStage). - The graph is drawn row by row: every edge is one path in the coordinates of the whole list, and each row has an SVG whose viewBox is its own 30 px band of it. A row that arrives later opens up between two others with the lanes running through it; nothing is laid over the list. - Edges change lanes over at most two rows, next to the newer commit (a merge’s second parent) or the older one (where a branch leaves the base), with vertical tangents so they land on the dots. The link from the pending merge to the branch is dashed in the colour of its state, and draws itself in solid as it merges. - New rows decode: the line grows from random letters to its length while the real words take over from the left, written straight to the text from a frame loop. Work in progress shimmers (a moving gradient clipped to the words), the conflict node pulses, and the answer streams in word by word with a short blur. - Once merged, the branch’s dots, lines and pill turn purple row after row, with a tint sweeping down its commits; the checks fold away (a grid row from 1fr to 0fr). - The script’s clock only runs while the card is on screen and the tab is visible. While untouched, a demo pointer plays the reader’s part, hovers the conflicts and the checks, resolves, merges, and starts over. - Every colour is a light-dark() token on the root, so the card follows the page’s color-scheme, or the colorScheme prop. ## API reference - **title** (`string`, default `'Refresh sessions in the auth middleware'`): The pull request’s title, on the card. - **number** (`number`, default `128`): Its number. - **branch** (`string`, default `'feat/session-refresh'`): The branch the agent works on. - **base** (`string`, default `'main'`): The branch it merges into. - **sideBranch** (`string`, default `'feat/checkout-analytics'`): A colleague’s branch off the base, drawn in its own lane. - **repository** (`string`, default `'harbor-web'`): The folder chip in the composer. - **defaultStage** (`'idle' | 'conflicts' | 'ready' | 'merged'`, default `'idle'`): Where the turn starts, already drawn: before Create PR, at the conflicts, green, or merged. - **openLabel** (`string`, default `'Open PR'`): The button of a merged card. - **prHref** (`string`): Where that button leads; without it, it is a plain button. - **onMerge** (`() => void`): Called once the pull request is merged. - **autoplay** (`boolean`, default `true`): While on screen and untouched, a demo pointer plays the reader’s part: creates, resolves, reads the checks, merges, and starts over. - **colorScheme** (`'light' | 'dark' | 'system'`): Its colours: light, dark, or the reader’s system setting. Without it the component follows the page’s color-scheme, which is light unless the page sets one. - **className** (`string`): Extra class for the root. ## Accessibility - The card is a section named by its title; the commits are an ordered list, each row read as its message, branch, hash and author. The graph is decorative (aria-hidden), and the decoding words have a hidden copy of the real text. - Create PR, Resolve conflicts, Merge and Open PR are real buttons; the work under way shows as a disabled button. Where the pull request stands is announced in a polite live region. - The conflicts link is a button (aria-expanded) that opens the conflicting lines on hover, focus or click; the checks are buttons whose tooltips are their descriptions. Escape closes what is open. - The disclosure over the card is a button that lists the steps the agent took; the diff stat lists the changed files. - Under reduced motion nothing decodes, spins, pulses or streams, and the demo never plays. ## Source ### merge-graph-card/merge-graph-card.tsx ```tsx // Copyright (c) 2026 Bruno Delorence. MIT License. 'use client'; import { Fragment, useCallback, useEffect, useEffectEvent, useId, useMemo, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent, } from 'react'; import { DemoPointer, runDemo, type Point } from './demo-pointer'; import { pathsOf, Slice } from './graph'; import { Bars, Icon, Spinner } from './icons'; import { apply, CREATE, graphOf, INITIAL, MERGE, RESOLVE, snapshot, TESTS, type Model, type Row, type StartStage, type Step, } from './model'; import { Scramble } from './scramble'; import { useAutoplay } from './use-autoplay'; import styles from './merge-graph-card.module.css'; /* * Merge graph card: an agent's chat turn that answers "Create PR" with a card it builds as it * works. The card is a commit graph of the branch: lanes of dots joined by curves (the branch, * a colleague's branch and the base), one row per commit with its message, a tinted branch pill, * its short hash and who made it when. * * - The agent's work is a script of small changes to one model (model.ts): commit the last * changes, push, open the pull request, fetch the base, find that it moved on and conflicts. * Each change is a row that decodes into place, a node that changes mark, a line under the * card that says what is happening. The reader settles it: Resolve conflicts merges the base * in, conflict by conflict, runs the tests and turns the card green; Merge turns it purple. * - The graph is drawn row by row (graph.tsx): each row's SVG shows its band of the whole graph, * so a row that arrives opens up with the lanes running through it. * - The script's clock only runs while the card is on screen and the tab is visible. * - While on screen and untouched, a demo pointer plays the reader's part: it creates the pull * request, looks at the conflicts, resolves them, reads the checks and merges; then it starts * over. Any real input hands the card to the reader. * - Light or dark: every colour is a light-dark() token in the CSS, so the scheme is the page's * color-scheme, or the one the colorScheme prop sets. */ /** Who changed the same lines on the base, and what each side wrote. */ const AUTHOR = 'Lena Marsh'; const CONFLICTS = [ { file: 'middleware.ts', line: 18, theirs: 'const session = await readSession(req, keys)', ours: 'if (nearExpiry(session)) await refresh(session)', }, { file: 'auth.ts', line: 42, theirs: 'return verify(token, keys.current)', ours: 'return refreshIfNear(token, 5 * MINUTE)', }, { file: 'auth.ts', line: 57, theirs: 'const ttl = keys.current.ttl', ours: 'const ttl = session.expiresAt - Date.now()', }, ]; /** The checks of a green branch, and what each one's tip says. */ const CHECKS = [ { id: 'tests', name: 'Tests', result: `${TESTS} passed`, tip: `unit · ${TESTS} passed, 0 failed`, took: '38s', }, { id: 'lint', name: 'Lint', result: 'passed', tip: 'lint · no problems', took: '9s' }, { id: 'types', name: 'Types', result: 'passed', tip: 'typecheck · no errors', took: '21s' }, { id: 'preview', name: 'Preview', result: 'ready', tip: '', took: '1m 4s' }, ] as const; /** The changed files, behind the diff stat. */ const FILES = [ { name: 'middleware.ts', added: 214, removed: 21 }, { name: 'auth.ts', added: 161, removed: 12 }, { name: 'session.test.ts', added: 98, removed: 0 }, { name: 'session.ts', added: 9, removed: 4 }, ]; const ADDED = FILES.reduce((sum, file) => sum + file.added, 0); const REMOVED = FILES.reduce((sum, file) => sum + file.removed, 0); const EFFORTS = ['Low', 'Medium', 'High', 'Max']; /** A stopped script's pending pause rejects with this. */ class Halt extends Error {} /** Polite announcements of where the pull request stands. */ const says = (stage: Model['stage'], number: number, base: string) => ({ idle: '', sent: 'Creating the pull request.', working: 'Creating the pull request.', conflicts: `Pull request #${number} is open, with 3 conflicts with ${base}.`, resolving: 'Resolving the conflicts.', ready: 'All checks passed. Ready to merge.', merging: 'Merging.', merged: `Merged into ${base}.`, })[stage]; export function MergeGraphCard({ title = 'Refresh sessions in the auth middleware', number = 128, branch = 'feat/session-refresh', base = 'main', sideBranch = 'feat/checkout-analytics', repository = 'harbor-web', defaultStage = 'idle', openLabel = 'Open PR', prHref, onMerge, autoplay = true, colorScheme, className = '', }: { /** The pull request's title, on the card. */ title?: string; /** Its number. */ number?: number; /** The branch the agent works on, and the base it merges into. */ branch?: string; base?: string; /** A colleague's branch, off the base, that runs alongside. */ sideBranch?: string; /** The folder chip in the composer. */ repository?: string; /** Where the turn starts, already drawn: before "Create PR", at the conflicts, green, or merged. */ defaultStage?: StartStage; /** The button of a merged card. */ openLabel?: string; /** Where that button leads; without it, it is a button that does nothing more. */ prHref?: string; /** Called once the pull request is merged. */ onMerge?: () => void; /** While on screen and untouched, a demo pointer plays the reader's part, over and over. */ autoplay?: boolean; /** Light or dark colours, or the reader's ('system'); without it, the page's color-scheme. */ colorScheme?: 'light' | 'dark' | 'system'; className?: string; }) { const { ref: root, playing, take, visible } = useAutoplay(6000); const start = useMemo(() => snapshot(defaultStage), [defaultStage]); const [model, setModel] = useState(start); const current = useRef(model); /** A turn drawn at once doesn't play its entrances. */ const [still, setStill] = useState(defaultStage !== 'idle'); const [request, setRequest] = useState('Create PR'); const [draft, setDraft] = useState(''); const [fading, setFading] = useState(false); /** What the reader points at or focuses (a popover or a tip shows), and what the demo does. */ const [peek, setPeek] = useState(null); const [demoPeek, setDemoPeek] = useState(null); const [pinned, setPinned] = useState(false); const [logOpen, setLogOpen] = useState(false); const [filesOpen, setFilesOpen] = useState(false); const [place, setPlace] = useState<'local' | 'cloud'>('local'); const [effort, setEffort] = useState(1); const pointer = useRef(null); const ids = useId(); /* The script's clock: a pause counts down only while the card is on screen. */ const generation = useRef(0); const awake = useRef(true); awake.current = visible; const sleep = useCallback((ms: number) => { const mine = generation.current; return new Promise((resolve, reject) => { let left = ms; const timer = window.setInterval(() => { if (generation.current !== mine) { window.clearInterval(timer); reject(new Halt()); return; } if (awake.current) left -= 50; if (left <= 0) { window.clearInterval(timer); resolve(); } }, 50); }); }, []); useEffect( () => () => { generation.current += 1; }, [], ); const commit = useCallback((patch: Partial) => { current.current = apply(current.current, patch); setModel(current.current); }, []); /** Plays steps; true once all have played, false if a reset stopped them. */ const play = useCallback( async (steps: Step[]) => { try { for (const [pause, patch] of steps) { if (pause) await sleep(pause); commit(patch); if (patch.thinking) { // The disclosure counts the seconds while the agent thinks. void (async () => { try { while (current.current.thinking) { await sleep(1000); if (current.current.thinking) commit({ seconds: current.current.seconds + 1 }); } } catch {} })(); } } return true; } catch (error) { if (error instanceof Halt) return false; throw error; } }, [commit, sleep], ); const reset = useCallback(() => { generation.current += 1; current.current = INITIAL; setModel(INITIAL); setPinned(false); setLogOpen(false); setFading(false); }, []); const create = useCallback( (text?: string) => { const stage = current.current.stage; if (stage !== 'idle' && stage !== 'merged') return; if (stage === 'merged') reset(); setStill(false); setRequest(text?.trim() || 'Create PR'); void play(CREATE); }, [play, reset], ); const resolve = useCallback(() => { if (current.current.stage !== 'conflicts') return; setStill(false); setPinned(false); setPeek(null); void play(RESOLVE); }, [play]); const onMerged = useRef(onMerge); useEffect(() => { onMerged.current = onMerge; }); const merge = useCallback(() => { if (current.current.stage !== 'ready') return; setStill(false); setPeek(null); void play(MERGE).then((done) => done && onMerged.current?.()); }, [play]); // Says where the pull request stands, politely. const message = says(model.stage, number, base); /* The demo: the pointer plays the reader's part. */ const demo = autoplay && playing; const act = useEffectEvent((what: 'create' | 'resolve' | 'merge' | 'restart') => { if (what === 'create') create(); else if (what === 'resolve') resolve(); else if (what === 'merge') merge(); else { setFading(true); window.setTimeout(reset, 380); } }); useEffect(() => { const stage = root.current; const arrow = pointer.current; if (!demo || !stage || !arrow) return; const stop = runDemo(stage, arrow, async ({ wait, glide, glyph }) => { const find = (selector: string) => stage.querySelector(selector); /** A point of an element, in the stage's own px, as shares of its box. */ const spot = (element: HTMLElement, dx = 0.5, dy = 0.5): Point => { const frame = stage.getBoundingClientRect(); const scale = frame.width / stage.offsetWidth || 1; const rect = element.getBoundingClientRect(); return { x: (rect.left + rect.width * dx - frame.left) / scale, y: (rect.top + rect.height * dy - frame.top) / scale, }; }; const press = async (selector: string, what: Parameters[0]) => { const element = find(selector); if (!element) return; glyph('arrow'); await glide(spot(element, 0.55, 0.6), 700); glyph('hand'); await wait(260); element.dataset.pressed = 'true'; await wait(140); delete element.dataset.pressed; act(what); await wait(320); glyph('arrow'); }; /** Moves out of the way, to the left of the card. */ const aside = async () => { const card = find('[data-part="card"]') ?? find('[data-part="composer"]'); if (card) await glide(spot(card, -0.04, 0.72), 900); }; for (;;) { const now = current.current; if (now.stage === 'idle') { await wait(700); await press('[data-part="create-chip"]', 'create'); await aside(); } else if (now.stage === 'conflicts' && now.paragraph) { await wait(1700); const link = find('[data-part="conflicts-link"]'); if (link) { await glide(spot(link, 0.45, 0.7), 800); setDemoPeek('conflicts'); await wait(2300); setDemoPeek(null); } await press('[data-part="action"]', 'resolve'); await wait(200); } else if (now.stage === 'ready') { await wait(600); for (const check of CHECKS) { const chip = find(`[data-part="check"][data-check="${check.id}"]`); if (!chip) continue; await glide(spot(chip, 0.4, 0.7), 520); setDemoPeek(check.id); await wait(950); setDemoPeek(null); } await press('[data-part="action"]', 'merge'); await wait(400); await aside(); } else if (now.stage === 'merged') { await wait(4200); act('restart'); await wait(900); } else await wait(150); } }); return () => { stop(); setDemoPeek(null); }; }, [demo, root]); const names = { branch, base, side: sideBranch }; /** The script's lines name the base "main": they take the base's own name. */ const named = (text: string) => (base === 'main' ? text : text.replace(/\bmain\b/g, base)); const { rows, edges } = graphOf(model, names); const paths = pathsOf(rows, edges); const shown = demoPeek ?? peek; const conflictsShown = model.stage === 'conflicts' && (pinned || shown === 'conflicts'); const total = model.left[0] + model.left[1]; const hover = (id: string) => ({ onPointerEnter: (event: ReactPointerEvent) => { if (event.pointerType !== 'touch') setPeek(id); }, onPointerLeave: () => setPeek((now) => (now === id ? null : now)), onFocus: () => setPeek(id), onBlur: () => setPeek((now) => (now === id ? null : now)), }); // Escape closes what is open: the conflicts, a tip, the files. const open = pinned || peek !== null || filesOpen; useEffect(() => { if (!open) return; const close = (event: KeyboardEvent) => { if (event.key !== 'Escape') return; setPinned(false); setPeek(null); setFilesOpen(false); }; document.addEventListener('keydown', close); return () => document.removeEventListener('keydown', close); }, [open]); const submit = () => { const stage = current.current.stage; if (stage !== 'idle' && stage !== 'merged') return; create(draft || 'Create PR'); setDraft(''); }; const canSend = model.stage === 'idle' || model.stage === 'merged'; return (
{ if (event.pointerType !== 'touch') take(); }} >
{model.bubble && (

{request}

)} {model.card && (

{title} {model.opened && #{number}}

{model.opened && ( {model.merge === 'merged' ? 'Merged' : 'Open'} )}
    {rows.map((row, index) => ( ))}
    {CHECKS.map((check, index) => { const tip = `${ids}-tip-${check.id}`; return (
  • {check.tip || `Deployed to ${branch.split('/').pop()}.preview.example.com`} {check.took}
    • ); })}
{model.footer && (

{model.footer.kind === 'busy' && ( <> {named(model.footer.text)} )} {model.footer.kind === 'conflicts' && ( <> {`\u00a0${named(model.footer.text)}`} )} {model.footer.kind === 'ready' && ( <> {named(model.footer.text)} )} {model.footer.kind === 'merged' && ( <> {named(model.footer.text)} )}

{model.footer.action && ( )} {model.stage === 'conflicts' && (

{AUTHOR} changed the same lines on {base}

{CONFLICTS.map((conflict, index) => (

{conflict.file} line {conflict.line}

{AUTHOR.split(' ')[0]} {conflict.theirs}

You {conflict.ours}

))}
)}
)}
)} {model.paragraph && (

)}
create()} /> {model.chip !== 'merged' && (
)}
{ event.preventDefault(); submit(); }} >