Branch graph

• The root is a labelled section. The strategy control is a radiogroup of real radio buttons with a roving tab stop; arrow keys, Home, and End pick a strategy.
• Commits form a listbox in visual order, newest first. Up and Down, Home, and End move through commits with aria-activedescendant; Escape closes the commit card. Each option is named with its message, hash, author, date, diff stats, and the branches that point to it.
• A polite live region announces the result of every strategy picked by the user, such as how many commits were replayed and that they got new hashes. Autoplay changes are not announced.
• The graph and the commit card are aria-hidden because the listbox carries the same information. Branch color is always paired with a named tag, merge commits carry an icon and a hollow dot, and additions and deletions carry + and − signs, so nothing relies on color alone.
• Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring. The keyboard commit takes the hover fill and shows its card.

• One rAF loop writes SVG path data, transforms, and opacity straight to the DOM and skips every value that did not change. React renders only when the strategy or the inspected commit changes.
• Edges are computed each frame from the live positions of their two commits, so lines stretch and bend with them. A branch bends near its parent and a merge bends near its child, like a real git client.
• The entrance draws each line up from the oldest commit at a constant pace, and every commit lands as its line reaches it.
• A rebase lifts the branch's rows into floating cards, carries them one after another along an eased arc into the base lane, and sets them down with a soft ring while their hashes rewrite in place. The old branch point retracts first and the new link to the base tip draws in after the commits land.
• A merge makes room at the top, then the merge commit lands and both lines draw into it. A squash flies the commits into one point where the squashed commit appears; undoing it replays them back out. Every transition starts from wherever things are, so picking a new strategy mid-flight never jumps.
• The loop runs only while something moves or autoplay is waiting, and stops off screen and in hidden tabs. With reduced motion the graph shows each state immediately with no entrance, flights, or autoplay.

• The graph is drawn in real pixels in an SVG beside the rows, so hairlines and dots stay crisp at any width.
• Container queries drop the date below 720px, the author below 560px, and the hash below 400px; the full details stay in the hover card and each option's accessible name. The strategy control takes a full row on phones.
• On touch, a tap on a commit pins its card and a tap elsewhere closes it.

• About sixty SVG and HTML elements are updated from one loop with a write cache, so a quiet frame touches nothing.
• Every layout is computed once per data set. Nothing is measured inside the loop.

• Use it where people choose how a pull request lands: a merge button, a code review tool, or docs that teach merge, rebase, and squash.
• Pass commits newest first with real parent ids. Keep the pull request branch to two to five commits and use two or three lanes; more lanes read as noise.
• Keep branch names short, like feat/search. The hover card holds the longer story in body.
• The merge, rebase, and squash states are previews computed from the data. Say so if the page could be read as the live state of a repository.

The full library index for assistants is at /llms.txt.