AI Agents Fancy Stable
CodeDiff
Unified diff tuned for chat width: one foldable card per file, tinted add/delete rows, and a copy-safe gutter
Preview
svelte
<script lang="ts">
import { CodeDiff } from "fancy-ui-svelte";
/** A two-hunk edit to one file: the shape an agent hands back after a fix. */
const PATCH = [
"diff --git a/src/lib/query.ts b/src/lib/query.ts",
"index 8f2a1c4..b31e097 100644",
"--- a/src/lib/query.ts",
"+++ b/src/lib/query.ts",
"@@ -12,6 +12,7 @@ export async function totalsByRegion(db: Db) {",
" const sql = compile(ast);",
"- const rows = await db.query(sql);",
"- return rows;",
"+ const rows = await db.query(sql, { timeout: 5_000 });",
"+ if (rows.length === 0) return [];",
"+ return rows.map(normalise);",
" }",
" ",
" function normalise(row: Row) {",
"@@ -41,3 +42,3 @@ function normalise(row: Row) {",
" const region = row.region ?? UNASSIGNED;",
"- return { region, total: row.total };",
"+ return { region, total: Number(row.total) };",
" }",
"",
].join("\n");
/** A move with an edit inside it, so the header has something to say. */
const RENAME = [
"diff --git a/src/lib/query.ts b/src/lib/db/totals.ts",
"similarity index 94%",
"rename from src/lib/query.ts",
"rename to src/lib/db/totals.ts",
"--- a/src/lib/query.ts",
"+++ b/src/lib/db/totals.ts",
"@@ -1,3 +1,3 @@",
'-import { compile } from "./ast";',
'+import { compile } from "../ast";',
" ",
' const UNASSIGNED = "Unassigned";',
"",
].join("\n");
</script>
<div class="flex w-full max-w-2xl flex-col gap-4">
<CodeDiff diff={PATCH} />
<CodeDiff diff={RENAME} />
</div>Installation
pnpm add fancy-ui-svelte
import { CodeDiff } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { CodeDiff } from 'fancy-ui-svelte';
</script>
<CodeDiff />Examples
Basic Usage
svelte
<script lang="ts">
import { CodeDiff } from "$lib/fancy-ui/code-diff";
/** A two-hunk edit to one file: the shape an agent hands back after a fix. */
const PATCH = [
"diff --git a/src/lib/query.ts b/src/lib/query.ts",
"index 8f2a1c4..b31e097 100644",
"--- a/src/lib/query.ts",
"+++ b/src/lib/query.ts",
"@@ -12,6 +12,7 @@ export async function totalsByRegion(db: Db) {",
" const sql = compile(ast);",
"- const rows = await db.query(sql);",
"- return rows;",
"+ const rows = await db.query(sql, { timeout: 5_000 });",
"+ if (rows.length === 0) return [];",
"+ return rows.map(normalise);",
" }",
" ",
" function normalise(row: Row) {",
"@@ -41,3 +42,3 @@ function normalise(row: Row) {",
" const region = row.region ?? UNASSIGNED;",
"- return { region, total: row.total };",
"+ return { region, total: Number(row.total) };",
" }",
"",
].join("\n");
/** A move with an edit inside it, so the header has something to say. */
const RENAME = [
"diff --git a/src/lib/query.ts b/src/lib/db/totals.ts",
"similarity index 94%",
"rename from src/lib/query.ts",
"rename to src/lib/db/totals.ts",
"--- a/src/lib/query.ts",
"+++ b/src/lib/db/totals.ts",
"@@ -1,3 +1,3 @@",
'-import { compile } from "./ast";',
'+import { compile } from "../ast";',
" ",
' const UNASSIGNED = "Unassigned";',
"",
].join("\n");
</script>
<div class="flex w-full max-w-2xl flex-col gap-4">
<CodeDiff diff={PATCH} />
<CodeDiff diff={RENAME} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
diff * | string | - | Raw unified diff text, headers and all; parsed on every change, so a patch still arriving can be handed over as it grows |
filename | string | - | Header label when the patch names no file, or names exactly one |
lineNumbers | boolean | true | Whether to show the old/new line-number gutters |
collapsed | boolean | false | Whether the bodies are folded away (bindable). Set it and the whole patch folds; a click folds one file and writes back whether anything is left open |
maxLines | number | 0 | Lines shown per file before the rest hide behind a "Show N more lines" button; 0 shows everything |
wrap | boolean | false | Whether long lines wrap instead of scrolling sideways |
Links
Related components
Ag
AgentPlan
Glanceable checklist of an agent's plan: a done/total count and completion bar over one row per step, with a status glyph, an optional detail line, and substeps indented under a rail
AI Agents Stable
Ai
AiDataTable
Compact comparison table for a model's structured answer: real table semantics, tabular numeric columns, check-or-dash booleans, and one tintable column — rendered in the order it arrived, with no sorting
AI Agents Stable
Ap
ApprovalCard
A human-in-the-loop gate before a side effect: the agent states what it is about to do, and the footer swaps its approve and deny buttons for a one-line verdict once someone decides
AI Agents Stable