Git graphPro
Commit history with its graph: one lane per branch in a steady color, curved merges, the checked out commit ringed, and agent commits drawn as squares with an Agent label.
On this page
ProA payouts service with an agent branch, a person's feature branch and two merges. A few seconds in, an agent pushes a review fix.
Installation
Usage
import { GitGraph } from "@/components/ui/chatcn/pro/git-graph"
<GitGraph commits={log} title="harbor-ledger" />Pass commits newest first in topological order, as git log --topo-order gives them, with parent shas. A branch keeps its lane and color from tip to base; first parents stay straight and merges curve in. Mark agent commits with authorKind: "agent". New commits listed in fresh fade in at the top.
Examples
States
ProAgent commits only, long subjects and branch names, loading, no commits, and an error with the fix.
Props
| Prop | Type | Notes |
|---|---|---|
commits | GitCommit[] | sha, parents, subject, body, author, authorKind, date, dateTitle, refs, files |
value, defaultValue, onValueChange | string | Selected sha |
expanded, defaultExpanded, onExpandedChange | string[] | Commits opened to their message and files |
agentOnly, defaultAgentOnly, onAgentOnlyChange | boolean | Quiets everything but agent commits |
title, actions | ReactNode | Header; title={null} hides it |
loading, error, onRetry, empty | ||
fresh | string[] | Shas that just arrived |
height, variant | variant is card or plain |
Keyboard
| Key | Action |
|---|---|
ArrowDown ArrowUp (J K) | Next and previous commit |
Home End | Newest and oldest |
Enter Space ArrowRight ArrowLeft | Open and close the commit |
Accessibility
- The list is a listbox; each commit reads its subject, author (agent or person), time, short sha and refs. The graph is decorative.
- Agent commits differ by shape (square nodes), label and icon, not only by color. Lane colors come from the chart palette, which is color blind aware.
Motion
A pushed commit fades up into the top row over 220 ms; under reduced motion it only fades. Opening a commit is instant.