DiffView

Inline or side-by-side diff for AI edits. Takes the flat line array a model already emits and derives the numbering itself; split mode pairs each run of removals against the additions that follow.

Examples

Inline and split

src/greet.ts +2 −2

@@ -12,7 +12,9 @@ export function greet(name) {

export function greet(name) {

Removed if (!name) return "hi there";

Removed return "hi " + name;

Added const who = name?.trim() || "there";

Added return `hi ${who}`;

}

<DiffView filename="src/greet.ts" mode="inline" lines={[
  {type: 'meta', text: '@@ -12,7 +12,9 @@'},
  {type: 'context', text: 'export function greet(name) {'},
  {type: 'remove', text: '  return "hi " + name;'},
  {type: 'add', text: '  return `hi ${who}`;'},
  {type: 'context', text: '}'},
]} />

Uneven hunk, no line numbers

One removal becomes two additions — split mode pads the short side.

+2 −1

const timeout = 5000;

Removed const retries = 1;

Added const retries = 3;

Added const backoff = "exponential";

<DiffView mode="split" lineNumbers={false} lines={[
  {type: 'context', text: 'const timeout = 5000;'},
  {type: 'remove', text: 'const retries = 1;'},
  {type: 'add', text: 'const retries = 3;'},
  {type: 'add', text: 'const backoff = "exponential";'},
]} />

Props

Prop	Type	Default	Description
`lines`	`{type: 'add'\|'remove'\|'context'\|'meta', text: string}[]`	`—`	The diff. Line numbers are derived, not supplied.
`mode`	`'inline' \| 'split'`	`'inline'`	One column with a gutter sign, or paired side-by-side columns.
`filename`	`string`	`—`	Header path.
`oldStart`	`number`	`1`	First line number on the old side.
`newStart`	`number`	`1`	First line number on the new side.
`lineNumbers`	`boolean`	`true`	Show the number gutter.

Install

CLI

npx @a3tai/mittsu add diff-view