Edited Files Card

Edited 3 files+7−4

Installation

pnpm dlx shadcn@latest add @paneui/edited-files-card

Usage

import { EditedFilesCard } from "@/components/ui/edited-files-card"

<EditedFilesCard
  files={[{ path: "src/app.tsx", oldText: before, newText: after }]}
  onUndo={revert}
  onReview={openReview}
/>

Examples

Unified Diff

Collapsed

Narrow widths

Below 20rem of card width (phones, split panes), Undo shows only its glyph (its accessible name stays “Undo”) and the summary clips instead of running under the buttons.

Counts

Totals come from each file's diff rows, or a line comparison of oldText and newText (oldText: null is a new file). Rows expand to a FileDiff in its row variant, which loads the highlighter lazily.

ACP

Fed directly from ACP diff tool-call content (path, oldText, newText), which is how the agent workspace template builds it at the end of each turn.

API Reference

EditedFilesCard

Also accepts every prop of div.

files*: EditedFile[]; { path, diff?, oldText?, newText?, additions?, deletions? } per file.
onUndo: () => void; Shows Undo.
onReview: () => void; Shows Review.
onRevealFile: (path: string) => void; Adds a reveal-in-folder button to each row.
defaultOpen= true: boolean; Start with the file list open.
title: ReactNode; Replace “Edited N files”.

Prop	Type	Default	Description
files*	EditedFile[]	—	`{ path, diff?, oldText?, newText?, additions?, deletions? }` per file.
onUndo	() => void	—	Shows Undo.
onReview	() => void	—	Shows Review.
onRevealFile	(path: string) => void	—	Adds a reveal-in-folder button to each row.
defaultOpen	boolean	true	Start with the file list open.
title	ReactNode	—	Replace “Edited N files”.

data-open: Present while the file list is open.

Data attribute	Description
data-open	Present while the file list is open.