Agent commitsPro

Commits an agent made in a session, with files, line counts and a revert per commit.

Markdown

On this page

ProSix commits from one session; reverting one that others build on lights them up first.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/agent-commits

Usage

tsx

import { AgentCommits } from "@/components/ui/chatcn/pro/agent-commits"

<AgentCommits
  commits={commits}
  branch="agent/invoice-cents"
  base="main"
  onRevert={(shas) => git.revert(shas)}
/>

Pass commits oldest first; they show newest on top on a rail. The header is the net diff of the session, so reverted commits drop out of it. A later commit that touches a file this one changed builds on it (or say so with dependents): pointing at Revert lights those commits on the rail, and the confirm offers to revert them together, newest first, or this one alone.

Examples

States

ProStill committing, a conflicting revert, already reverted, loading and empty.

Props

Prop	Type	Notes
`commits`	`{ sha, message, time?, files, dependents?, revertedBy? }[]`	Oldest first
`onRevert`	`(shas) => Promise<string \| void>`	Resolve with the revert sha; reject with how to fix it
`branch`, `base`	`string`	Shown in the header
`status`	`"idle" \| "loading" \| "committing"`	Committing shows the next commit being written
`defaultExpanded`	`string[]`	Commits whose files start open
`title`	`ReactNode`	Default Commits this session

Keyboard

Key	Action
Enter or Space	Show or hide a commit's files; revert
Tab	From the commit to its Revert, then the confirm

Accessibility

Commits are an ordered list; each subject is a button with aria-expanded.
The dependency warning is an alertdialog with the count and the shared file in words; focus moves to its first action.
File status letters (A, M, D, R) carry their word for screen readers, and line counts are read as added and removed.

Motion

Rail dots and the dependent rows change color in 150 ms. The confirm and file lists fade in over 180 ms. Reduced motion keeps the fades only.