Repo mapPro
The repository as a treemap by lines of code or by churn, with every file the agent changed outlined and lettered A, M, D or R, and files it only read dashed.
On this page
ProA payouts service after an agent run, sized by lines of code. Changed files are outlined and lettered A, M or D, files the agent only read are dashed. Big folders open in place.
Installation
Usage
import { RepoMap } from "@/components/ui/chatcn/pro/repo-map"
<RepoMap root={tree} onSelect={openFile} />Give files a size (lines), a churn (commits in your window) and a touched state. Folders sum their files. The layout is squarified, so tiles stay close to square and names fit; folders open in place while they have room, and clicking one zooms in.
Examples
States
ProSized by churn, zoomed into a folder, loading, no files, and an error with the fix.
Props
| Prop | Type | Notes |
|---|---|---|
root | RepoNode | name, children, size, churn, touched (added, modified, deleted, renamed, read) |
metric, defaultMetric, onMetricChange | "size" | "churn" | Default size |
path, defaultPath, onPathChange | string[] | The folder shown |
onSelect | (path) => void | A file was opened |
churnLabel | string | Default "commits in 90 days" |
height | number | string | Default 420 |
loading, error, onRetry |
Keyboard
| Key | Action |
|---|---|
| Arrow keys | Move to the nearest tile in that direction |
Enter Space | Open a folder or select a file |
Backspace Escape | Back to the parent folder |
Accessibility
- One tile takes focus at a time. Every tile names its full path, its size or churn, and what the agent did, in words.
- Changes are letters and line styles as well as color: A, M and D badges, a struck name for deletions, dashes for files only read.
- The footer announces the hovered or focused tile.
Motion
Switching metric or folder fades the map in over 180 ms (120 ms under reduced motion). Tiles never animate their size.