Changed files

The files an agent changed, with status letters, dimmed directories, +/- counts and a five-cell bar. Selecting a file opens its diff.

Markdown

On this page

Status letters, dimmed directories, counts and the five-cell bar, with one file reviewed.

Installation

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

Usage

tsx

import { ChangedFiles } from "@/components/ui/chatcn/changed-files"

<ChangedFiles files={files} value={path} onValueChange={setPath} />

A DiffFile from chatcn-diff fits as is. Any object with path, status, additions and deletions works too. Pass reviewed with the paths whose hunks all have a decision, and they trade the bar for a check.

Examples

States

Loading skeleton, nothing changed, and long paths with large counts.

Props

Prop	Type	Notes
`files`	`ChangedFile[]`	`{ path, oldPath?, status, additions, deletions }`
`value`, `defaultValue`, `onValueChange`	`string`	The selected path. Defaults to the first file
`title`	`ReactNode`	Defaults to "Review changes". `null` hides the header
`actions`	`ReactNode`	Controls at the end of the header
`reviewed`	`string[]`	Paths that are done
`loading`	`boolean`	Skeleton rows in the final layout
`variant`	`"plain" \| "card"`	Defaults to `plain`

Status letters

Letter	Meaning	Badge
`A`	Added	Green tint
`M`	Modified	Amber tint
`R`	Renamed	Blue tint, the old path in the tooltip
`D`	Deleted	Red tint, and the path steps back

Keyboard

Key	Action
`ArrowDown`, `J`	Next file
`ArrowUp`, `K`	Previous file
`Home`, `End`	First or last file
`Enter`, `Space`	Select the focused file

Accessibility

A listbox of options with roving focus. Selection follows focus, like tabs, so the diff beside it updates as you move.
Status letters carry a hidden word (Added, Deleted) and counts read as 12 added, 3 removed. The bar is decorative.
Rows are 44 px tall on touch screens.

Motion

Hover and selection change background color in 150 ms. Keyboard moves are instant.