affectUI › Components › Agents

Diff Timeline

What an agent changed in a pull request, edit by edit – lines added and removed as two lines laid over each other, each file with its own diff bar as the agent reaches it, and every edit's diff on hover.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/diff-timeline.json · Import from @/components/ui/diff-timeline

When to use

Showing what a coding agent did to a pull request – live while it works, or as a replay afterwards
Review screens where people want to see when the big changes happened and which files they touched

When not to use

Hundreds of edits or files – the rows get too thin; group them by folder first
Comparing more than one agent – this shows one run

Usage

import { DiffTimeline } from "@/components/ui/diff-timeline";

export function PullRequestRun({ edits, elapsed, running }) {
  return (
    <DiffTimeline
      agent={{ id: "frontend", name: "Frontend agent" }}
      context="PR #214"
      edits={edits}       // [{ at: 30, file: "components/hero.tsx", added: 44, removed: 0, diff: [...] }]
      elapsed={elapsed}   // seconds since the run started
      live={running}
    />
  );
}

Props

Name	Type	Default	Description
`agent`	`{ id: string; name: string }`		The agent – its id gives it its own pixel mark
`context`	`string`		Quiet text after the name, e.g. the pull request
`edits`	`DiffEdit[]`		Every edit: at (seconds), file, added, removed and optional diff lines. The scales come from all of them, so nothing rescales while the run plays
`elapsed`	`number`	`the last edit`	Seconds since the run started – later edits stay hidden
`live`	`boolean`	`false`	Still writing: the mark twinkles, the line ends glow and the status names the file
`duration`	`number`	`the run, rounded up to a minute`	Length of the time axis in seconds
`maxRows`	`number`	`7`	File rows shown before the list scrolls – the card keeps one height however many files the run touches
`className`	`string`		Extra class on the card

Keyboard

Tab: Focus the chart
← / →: Step to the previous or next edit
Home / End: First or last edit
Esc: Close the edit

Accessibility

The chart is one focusable group, readable edit by edit with the arrow keys
Hovering a file row marks its edits on the chart's baseline
The open edit is a polite live region: file, time, totals and the changed lines are read out
The status line is live too, so the file the agent is on is announced while it works

Responsive

A gray tray with two white panels – the chart on top, the files below – and the legend on the tray; fills its container, line widths stay crisp
Below 440px the totals move under the name, folders hide and counts shorten (4.8k)
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Inline Diff – AI edits to prose shown inline – struck and added words you accept or reject one by one, with keys, a popover and undo
Change Summary – What moved since last time – one metric per row with a colored trend
Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent