Components / agents

File Diff

The change an agent made to one file, as a unified diff: header with the file name, a status badge (Modified, Added, Deleted) and the added and removed counts, then the lines.

import { FileDiff } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { FileDiff } from '@basiiik/ui';

<FileDiff filename="src/Save.tsx" diff={'@@ -1,2 +1,2 @@\n const a = 1;\n-const b = 2;\n+const b = 3;'} />

• Example values were filled in for the required props filename, diff: replace them with your own.
• Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
• No interactive states; the lines scroll in a keyboard-focusable region.
• Compose with: badge.
• Storybook: Agents/File diff.

Props

States. No interactive states; the lines scroll in a keyboard-focusable region.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• The change an agent made or proposes to one file
• Review before approving a plan or after a run

Do not use it when

• Showing code that is not a change (use Code Block)
• A list of changed files (use List or Table with a link to each diff)

Rules for agents

• Pass the diff text as diff and the path as filename
• Set change to added for a new file and deleted for a removed one
• Use lineNumbers when the answer refers to lines
• Show one FileDiff per file, each under the Tool Call or message that made the change
• Keep a few unchanged lines around each change, as git does, so the change has context

Avoid

• Colouring lines without the + and − marks
• A diff pasted into a CodeBlock
• Hand-building a diff with divs
• Showing a whole file when only a few lines changed

Writing the content

• File name: the path from the project root

Keyboard

• Tab moves into the diff region
• Arrow keys scroll the lines once the region has focus

Accessibility

• The lines sit in a region named "Changes to <file>" that can take focus
• A visually hidden table header names the columns (Change, Code, and the line numbers when shown)
• Each changed line carries a + or − and a hidden word ("Added", "Removed", "Unchanged"); colour is never the only signal
• The counts are read as "3 lines added, 1 line removed"; the + and − in the header are decoration
• Line numbers are aria-hidden and cannot be selected

Colour tokens it reads

Related

• Code Block
• Plan Card
• Tool Call
• Badge

agents 6 Figma variants Try it in the live demo