Diff Viewer | Zyeon UI

Preview in your theme

Default: view=unified, wordDiff, contextLines=3. Old/new gutters, +/- markers, changed words tinted a step darker.

lib/get-user.ts+6 -5

Diff of lib/get-user.ts — unified view — 6 lines added, 5 lines removed
1-	Removed line 1: export async function getUser(id: string) {
2-	Removed line 2: const res = await fetch(`/api/users/${id}`)
1+	Added line 1: export async function getUser(id: string, signal?: AbortSignal) {
2+	Added line 2: const res = await fetch(`/api/users/${id}`, { signal })
33	Line 3: if (!res.ok) {
4-	Removed line 4: throw new Error("request failed")
4+	Added line 4: throw new Error(`request failed: ${res.status}`)
55	Line 5: }
6-	Removed line 6: const data = await res.json()
7-	Removed line 7: return data
6+	Added line 6: if (signal?.aborted) throw new Error("aborted")
7+	Added line 7: const data: unknown = await res.json()
8+	Added line 8: return userSchema.parse(data)
89	Line 9: }

defaultView="split" with defaultWrap so both narrow columns reflow. Replaced lines pair up by offset; the inserted line has nothing on the old side, so that cell is a muted filler.

lib/get-user.ts+6 -5

Diff of lib/get-user.ts — split view — 6 lines added, 5 lines removed
Original		Modified
1-	Removed line 1: export async function getUser(id: string) {	1+	Added line 1: export async function getUser(id: string, signal?: AbortSignal) {
2-	Removed line 2: const res = await fetch(`/api/users/${id}`)	2+	Added line 2: const res = await fetch(`/api/users/${id}`, { signal })
3	Line 3: if (!res.ok) {	3	Line 3: if (!res.ok) {
4-	Removed line 4: throw new Error("request failed")	4+	Added line 4: throw new Error(`request failed: ${res.status}`)
5	Line 5: }	5	Line 5: }
6-	Removed line 6: const data = await res.json()	6+	Added line 6: if (signal?.aborted) throw new Error("aborted")
7-	Removed line 7: return data	7+	Added line 7: const data: unknown = await res.json()
		8+	Added line 8: return userSchema.parse(data)
8	Line 9: }	9	Line 9: }

The same defaultView="split" inside a 380px box: the container is measured, so it degrades to unified (and says so) instead of overflowing. Not a media query — the page around it is still wide.

lib/get-user.ts+6 -5

Diff of lib/get-user.ts — split view — 6 lines added, 5 lines removed
Original		Modified
1-	Removed line 1: export async function getUser(id: string) {	1+	Added line 1: export async function getUser(id: string, signal?: AbortSignal) {
2-	Removed line 2: const res = await fetch(`/api/users/${id}`)	2+	Added line 2: const res = await fetch(`/api/users/${id}`, { signal })
3	Line 3: if (!res.ok) {	3	Line 3: if (!res.ok) {
4-	Removed line 4: throw new Error("request failed")	4+	Added line 4: throw new Error(`request failed: ${res.status}`)
5	Line 5: }	5	Line 5: }
6-	Removed line 6: const data = await res.json()	6+	Added line 6: if (signal?.aborted) throw new Error("aborted")
7-	Removed line 7: return data	7+	Added line 7: const data: unknown = await res.json()
		8+	Added line 8: return userSchema.parse(data)
8	Line 9: }	9	Line 9: }

A new file (oldText="") and a deleted file (newText=""): every line is one-sided, so the old / new gutter column is blank for those rows.

migrations/0007-paid-at.ts+9 -0

Diff of migrations/0007-paid-at.ts — unified view — 9 lines added, 0 lines removed
1+	Added line 1: import { sql } from "@/lib/db"
2+	Added line 2:
3+	Added line 3: export async function up() {
4+	Added line 4: await sql`alter table invoices add column paid_at timestamptz`
5+	Added line 5: }
6+	Added line 6:
7+	Added line 7: export async function down() {
8+	Added line 8: await sql`alter table invoices drop column paid_at`
9+	Added line 9: }

migrations/0006-legacy.ts+0 -9

Diff of migrations/0006-legacy.ts — unified view — 0 lines added, 9 lines removed
1-	Removed line 1: import { sql } from "@/lib/db"
2-	Removed line 2:
3-	Removed line 3: export async function up() {
4-	Removed line 4: await sql`alter table invoices add column paid_at timestamptz`
5-	Removed line 5: }
6-	Removed line 6:
7-	Removed line 7: export async function down() {
8-	Removed line 8: await sql`alter table invoices drop column paid_at`
9-	Removed line 9: }

A single character changed (3 → 5), wordDiff=true. With it on only the changed token is tinted a step darker; with it off the whole pair of lines is tinted.

config/retry.ts+1 -1

Diff of config/retry.ts — unified view — 1 line added, 1 line removed
1-	Removed line 1: export const RETRY_LIMIT = 3
1+	Added line 1: export const RETRY_LIMIT = 5
22	Line 2: export const RETRY_BACKOFF_MS = 250
33	Line 3: export const REQUEST_TIMEOUT_MS = 8000

Long lines. wrap=false scrolls the panel horizontally and the line-number gutter stays pinned; wrap=true reflows instead. The button below and the toolbar button drive the same controlled state.

components/toolbar.tsx+2 -2

Diff of components/toolbar.tsx — unified view — 2 lines added, 2 lines removed
1-	Removed line 1: export function Toolbar({ dense }: ToolbarProps) {
2-	Removed line 2: return <div className="flex w-full items-center justify-between gap-2 rounded-lg border bg-card px-3 py-2 text-sm text-muted-foreground shadow-sm transition-colors hover:bg-muted">{null}</div>
1+	Added line 1: export function Toolbar({ dense, sticky }: ToolbarProps) {
2+	Added line 2: return <div className="flex w-full items-center justify-between gap-3 rounded-xl border bg-card px-4 py-2 text-sm text-foreground shadow-sm transition-colors hover:bg-muted/60 focus-within:ring-2 focus-within:ring-ring">{null}</div>
33	Line 3: }

A 94-line config with two edits ~60 lines apart: contextLines=2 folds every long unchanged run into a real “Expand N lines” toggle (aria-expanded), and maxHeight={340} caps the panel height.

.eslintrc.json+1 -2

Diff of .eslintrc.json — unified view — 1 line added, 2 lines removed

88	Line 8: "rule-06": "warn",
99	Line 9: "rule-07": "warn",
10-	Removed line 10: "rule-08": "warn",
10+	Added line 10: "rule-08": "error",
1111	Line 11: "rule-09": "warn",
1212	Line 12: "rule-10": "warn",

7171	Line 71: "rule-69": "warn",
7272	Line 72: "rule-70": "warn",
73-	Removed line 73: "rule-71": "warn",
7473	Line 73: "rule-72": "warn",
7574	Line 74: "rule-73": "warn",

The same input with maxLines={12}: rendering stops after 12 lines and the banner says how many were dropped. The +/- counts describe the whole diff, not just the visible part.

.eslintrc.json+1 -2

Diff cut at 12 lines — 83 lines not shown.

Diff of .eslintrc.json — unified view — 1 line added, 2 lines removed

99	Line 9: "rule-07": "warn",
10-	Removed line 10: "rule-08": "warn",
10+	Added line 10: "rule-08": "error",
1111	Line 11: "rule-09": "warn",

Pre-computed hunks instead of full texts: line numbers come from oldStart/newStart, and the gap between hunks is an inert note — the skipped text was never sent, so there is nothing to expand.

components/row-count.tsx+2 -1

Diff of components/row-count.tsx — unified view — 2 lines added, 1 line removed
11 unchanged lines not included in this patch
1212	Line 12: const [rows, setRows] = useState<Row[]>([])
13-	Removed line 13: const total = rows.length
13+	Added line 13: const total = rows.filter(row => row.visible).length
1414	Line 14:
33 unchanged lines not included in this patch
4848	Line 48: return (
49+	Added line 49: <output className="tabular-nums">{total}</output>
4950	Line 50: )

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro

export async function getUser(id: string) {

const res = await fetch(`/api/users/${id}`)

export async function getUser(id: string, signal?: AbortSignal) {

const res = await fetch(`/api/users/${id}`, { signal })

if (!res.ok) {

throw new Error("request failed")

throw new Error(`request failed: ${res.status}`)

}

const data = await res.json()

return data

if (signal?.aborted) throw new Error("aborted")

const data: unknown = await res.json()

return userSchema.parse(data)

}

Original

Modified

export async function getUser(id: string) {

export async function getUser(id: string, signal?: AbortSignal) {

const res = await fetch(`/api/users/${id}`)

const res = await fetch(`/api/users/${id}`, { signal })

if (!res.ok) {

throw new Error("request failed")

throw new Error(`request failed: ${res.status}`)

}

const data = await res.json()

if (signal?.aborted) throw new Error("aborted")

return data

const data: unknown = await res.json()

return userSchema.parse(data)

}

Original

Modified

export async function getUser(id: string) {

export async function getUser(id: string, signal?: AbortSignal) {

const res = await fetch(`/api/users/${id}`)

const res = await fetch(`/api/users/${id}`, { signal })

if (!res.ok) {

throw new Error("request failed")

throw new Error(`request failed: ${res.status}`)

}

const data = await res.json()

if (signal?.aborted) throw new Error("aborted")

return data

const data: unknown = await res.json()

return userSchema.parse(data)

}

import { sql } from "@/lib/db"

export async function up() {

await sql`alter table invoices add column paid_at timestamptz`

}

export async function down() {

await sql`alter table invoices drop column paid_at`

}

import { sql } from "@/lib/db"

export async function up() {

await sql`alter table invoices add column paid_at timestamptz`

}

export async function down() {

await sql`alter table invoices drop column paid_at`

}

export const RETRY_LIMIT = 3

export const RETRY_LIMIT = 5

export const RETRY_BACKOFF_MS = 250

export const REQUEST_TIMEOUT_MS = 8000

export function Toolbar({ dense }: ToolbarProps) {

return <div className="flex w-full items-center justify-between gap-2 rounded-lg border bg-card px-3 py-2 text-sm text-muted-foreground shadow-sm transition-colors hover:bg-muted">{null}</div>

export function Toolbar({ dense, sticky }: ToolbarProps) {

return <div className="flex w-full items-center justify-between gap-3 rounded-xl border bg-card px-4 py-2 text-sm text-foreground shadow-sm transition-colors hover:bg-muted/60 focus-within:ring-2 focus-within:ring-ring">{null}</div>

}

Diff of .eslintrc.json — unified view — 1 line added, 2 lines removed

88	Line 8: "rule-06": "warn",
99	Line 9: "rule-07": "warn",
10-	Removed line 10: "rule-08": "warn",
10+	Added line 10: "rule-08": "error",
1111	Line 11: "rule-09": "warn",
1212	Line 12: "rule-10": "warn",

7171	Line 71: "rule-69": "warn",
7272	Line 72: "rule-70": "warn",
73-	Removed line 73: "rule-71": "warn",
7473	Line 73: "rule-72": "warn",
7574	Line 74: "rule-73": "warn",

"rule-06": "warn",

"rule-07": "warn",

"rule-08": "warn",

"rule-08": "error",

"rule-09": "warn",

"rule-10": "warn",

"rule-69": "warn",

"rule-70": "warn",

"rule-71": "warn",

"rule-72": "warn",

"rule-73": "warn",

Diff of .eslintrc.json — unified view — 1 line added, 2 lines removed

99	Line 9: "rule-07": "warn",
10-	Removed line 10: "rule-08": "warn",
10+	Added line 10: "rule-08": "error",
1111	Line 11: "rule-09": "warn",

"rule-07": "warn",

"rule-08": "warn",

"rule-08": "error",

"rule-09": "warn",

Diff of components/row-count.tsx — unified view — 2 lines added, 1 line removed
11 unchanged lines not included in this patch
1212	Line 12: const [rows, setRows] = useState<Row[]>([])
13-	Removed line 13: const total = rows.length
13+	Added line 13: const total = rows.filter(row => row.visible).length
1414	Line 14:
33 unchanged lines not included in this patch
4848	Line 48: return (
49+	Added line 49: <output className="tabular-nums">{total}</output>
4950	Line 50: )

11 unchanged lines not included in this patch

const [rows, setRows] = useState<Row[]>([])

const total = rows.length

const total = rows.filter(row => row.visible).length

33 unchanged lines not included in this patch

return (

<output className="tabular-nums">{total}</output>

)