Commit card

A commit or pull request the agent made. The message streams in while drafting, then the short sha, branch, files changed, link and push land in place.

Markdown

On this page

The message streams in, the commit lands with its sha, then pushes.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/commit-card.json

Usage

tsx

import { CommitCard } from "@/components/ui/chatcn/commit-card"

<CommitCard
  state="created"
  message={message}
  sha="8f3c2a91d4be07c5a2e6f13b9d0c7e44a1b5f290"
  branch="feat/runs-pagination"
  files={files}
  href={commitUrl}
  onPush={push}
/>

The first line of message is the subject and the rest is the body. While drafting, pass the message as it streams and the caret follows it. The header never changes height, so the sha appearing does not move anything.

Examples

States

Drafting, created, an opened pull request and a rejected push.

States

State	Shows
`drafting`	Spinner, the shimmer label and the message streaming in
`created`	Commit glyph, the short sha with copy, and Push when `onPush` is set
`pushing`	Spinner and Pushing to origin
`pushed`	Check and Pushed to origin, or the pull request number
`failed`	Red cross, the git error and Retry

Props

Prop	Type	Notes
`state`	`CommitCardState`	One of the five states above
`kind`	`"commit" \| "pull-request"`	Defaults to `commit`
`message`	`string`	Subject, blank line, body
`sha`	`string`	Shown as seven characters, copied in full
`branch`, `baseBranch`	`string`	A pull request shows head into base
`remote`	`string`	Defaults to `origin`
`number`	`number`	Pull request number
`files`, `maxFiles`	`ChangedFile[]`, `number`	Files beyond `maxFiles` (4) sit behind Show more
`href`, `linkLabel`	`string`	View commit or View pull request
`errorText`	`ReactNode`	Shown when `failed`. Say how to fix it
`onPush`, `onRetry`	`() => void`	Footer actions
`actions`	`ReactNode`	Extra footer controls

Accessibility

The state label is a polite live region, so screen readers hear Committed and Pushed to origin without hearing the message stream.
Failure pairs the red cross with words, never color alone.
Copy announces Copied. Footer buttons are 44 px on touch screens.

Motion

The state glyph swaps with a 150 ms blur crossfade, so drafting to pushed reads as one object changing.
The message appends without per-word effects. Under reduced motion the caret stops blinking.