diff --git a/Cargo.lock b/Cargo.lock
index 1d566a6..5186b44 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -735,9 +735,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.1.31"
+version = "1.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c2e7962b54006dcfcc61cb72735f4d89bb97061dd6a7ed882ec6b8ee53714c6f"
+checksum = "27f657647bcff5394bf56c7317665bbf790a137a50eaaa5c6bfbb9e27a518f2d"
 dependencies = [
  "jobserver",
  "libc",
@@ -4140,6 +4140,21 @@ dependencies = [
  "serde_json",
  "tempfile",
  "thiserror",
+ "tree-sitter-bash",
+ "tree-sitter-c",
+ "tree-sitter-css",
+ "tree-sitter-go",
+ "tree-sitter-highlight",
+ "tree-sitter-html",
+ "tree-sitter-javascript",
+ "tree-sitter-json",
+ "tree-sitter-md",
+ "tree-sitter-python",
+ "tree-sitter-ruby",
+ "tree-sitter-rust",
+ "tree-sitter-svelte-ng",
+ "tree-sitter-toml-ng",
+ "tree-sitter-typescript",
  "ts-rs",
 ]
 
@@ -5087,6 +5102,12 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
 
+[[package]]
+name = "streaming-iterator"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b2231b7c3057d5e4ad0156fb3dc807d900806020c5ffa3ee6ff2c8c76fb8520"
+
 [[package]]
 name = "string_cache"
 version = "0.8.7"
@@ -6044,6 +6065,178 @@ dependencies = [
  "windows-sys 0.59.0",
 ]
 
+[[package]]
+name = "tree-sitter"
+version = "0.24.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b67baf55e7e1b6806063b1e51041069c90afff16afcbbccd278d899f9d84bca4"
+dependencies = [
+ "cc",
+ "regex",
+ "regex-syntax",
+ "streaming-iterator",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-bash"
+version = "0.23.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "329a4d48623ac337d42b1df84e81a1c9dbb2946907c102ca72db158c1964a52e"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-c"
+version = "0.23.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db56fadd8c3c6bc880dffcf1177c9d1c54a71a5207716db8660189082e63b587"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-css"
+version = "0.23.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "25435a275adb3226b6fddab891bbc50d1a500774a44ceb97022a39666ccda75d"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-go"
+version = "0.23.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b13d476345220dbe600147dd444165c5791bf85ef53e28acbedd46112ee18431"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-highlight"
+version = "0.24.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f0f856de10d70a6d14d66db3648f7410c131cd49e989a863f15dda9acae6044"
+dependencies = [
+ "lazy_static",
+ "regex",
+ "streaming-iterator",
+ "thiserror",
+ "tree-sitter",
+]
+
+[[package]]
+name = "tree-sitter-html"
+version = "0.23.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "261b708e5d92061ede329babaaa427b819329a9d427a1d710abb0f67bbef63ee"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-javascript"
+version = "0.23.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf40bf599e0416c16c125c3cec10ee5ddc7d1bb8b0c60fa5c4de249ad34dc1b1"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-json"
+version = "0.24.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4d727acca406c0020cffc6cf35516764f36c8e3dc4408e5ebe2cb35a947ec471"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-language"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e8ddffe35a0e5eeeadf13ff7350af564c6e73993a24db62caee1822b185c2600"
+
+[[package]]
+name = "tree-sitter-md"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "17f968c22a01010b83fc960455ae729db08dbeb6388617d9113897cb9204b030"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-python"
+version = "0.23.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70beaa47e19e1529e8787fc0a80ebbae5a9fdaefc5fcc8972c885c9abf6ab0f0"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-ruby"
+version = "0.23.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be0484ea4ef6bb9c575b4fdabde7e31340a8d2dbc7d52b321ac83da703249f95"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-rust"
+version = "0.23.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4d64d449ca63e683c562c7743946a646671ca23947b9c925c0cfbe65051a4af"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-svelte-ng"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef0a71f9cf5e94373cc86c64893630c8a29bb25d3390a248268d08af2165fa37"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-toml-ng"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e9adc2c898ae49730e857d75be403da3f92bb81d8e37a2f918a08dd10de5ebb1"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
+[[package]]
+name = "tree-sitter-typescript"
+version = "0.23.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c5f76ed8d947a75cc446d5fccd8b602ebf0cde64ccf2ffa434d873d7a575eff"
+dependencies = [
+ "cc",
+ "tree-sitter-language",
+]
+
 [[package]]
 name = "triomphe"
 version = "0.1.13"
diff --git a/crates/radicle-tauri/src/commands/diff.rs b/crates/radicle-tauri/src/commands/diff.rs
index 6028cc1..6e4c344 100644
--- a/crates/radicle-tauri/src/commands/diff.rs
+++ b/crates/radicle-tauri/src/commands/diff.rs
@@ -1,6 +1,5 @@
-use radicle_surf as surf;
-
 use radicle::identity;
+use radicle_types as types;
 use radicle_types::error::Error;
 use radicle_types::traits::repo::Repo;
 
@@ -11,6 +10,6 @@ pub async fn get_diff(
     ctx: tauri::State<'_, AppState>,
     rid: identity::RepoId,
     options: radicle_types::cobs::diff::Options,
-) -> Result<surf::diff::Diff, Error> {
+) -> Result<types::diff::Diff, Error> {
     ctx.get_diff(rid, options)
 }
diff --git a/crates/radicle-types/Cargo.toml b/crates/radicle-types/Cargo.toml
index 32c9d6d..b5223df 100644
--- a/crates/radicle-types/Cargo.toml
+++ b/crates/radicle-types/Cargo.toml
@@ -15,3 +15,18 @@ thiserror = { version = "1.0.65" }
 ts-rs = { version = "10.0.0", features = ["serde-json-impl", "no-serde-warnings", "format"] }
 localtime = { version = "1.3.1" }
 tempfile = { version = "3.14.0" }
+tree-sitter-bash = { version = "0.23.3" }
+tree-sitter-c = { version = "0.23.2" }
+tree-sitter-css = { version = "0.23.1" }
+tree-sitter-go = { version = "0.23.4" }
+tree-sitter-highlight = { version = "0.24.4" }
+tree-sitter-html = { version = "0.23.2" }
+tree-sitter-javascript = { version = "0.23.1" }
+tree-sitter-json = { version = "0.24.8" }
+tree-sitter-md = { version = "0.3.2" }
+tree-sitter-python = { version = "0.23.4" }
+tree-sitter-ruby = { version = "0.23.1" }
+tree-sitter-rust = { version = "0.23.2" }
+tree-sitter-svelte-ng = { version = "1.0.2" }
+tree-sitter-toml-ng = { version = "0.7.0" }
+tree-sitter-typescript = { version = "0.23.2" }
diff --git a/crates/radicle-types/bindings/diff/Added.ts b/crates/radicle-types/bindings/diff/Added.ts
new file mode 100644
index 0000000..82dc536
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Added.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DiffContent } from "./DiffContent";
+import type { DiffFile } from "./DiffFile";
+
+export type Added = { path: string; diff: DiffContent; new: DiffFile };
diff --git a/crates/radicle-types/bindings/diff/Addition.ts b/crates/radicle-types/bindings/diff/Addition.ts
new file mode 100644
index 0000000..98bfe1e
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Addition.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Line } from "../syntax/Line";
+
+export type Addition = { line: string; lineNo: number; highlight: Line | null };
diff --git a/crates/radicle-types/bindings/diff/Copied.ts b/crates/radicle-types/bindings/diff/Copied.ts
new file mode 100644
index 0000000..d69dc7e
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Copied.ts
@@ -0,0 +1,11 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DiffContent } from "./DiffContent";
+import type { DiffFile } from "./DiffFile";
+
+export type Copied = {
+  oldPath: string;
+  newPath: string;
+  old: DiffFile;
+  new: DiffFile;
+  diff: DiffContent;
+};
diff --git a/crates/radicle-types/bindings/diff/Deleted.ts b/crates/radicle-types/bindings/diff/Deleted.ts
new file mode 100644
index 0000000..052ba33
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Deleted.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DiffContent } from "./DiffContent";
+import type { DiffFile } from "./DiffFile";
+
+export type Deleted = { path: string; diff: DiffContent; old: DiffFile };
diff --git a/crates/radicle-types/bindings/diff/Deletion.ts b/crates/radicle-types/bindings/diff/Deletion.ts
new file mode 100644
index 0000000..90ef5df
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Deletion.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Line } from "../syntax/Line";
+
+export type Deletion = { line: string; lineNo: number; highlight: Line | null };
diff --git a/crates/radicle-types/bindings/diff/Diff.ts b/crates/radicle-types/bindings/diff/Diff.ts
new file mode 100644
index 0000000..6744e8e
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Diff.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FileDiff } from "./FileDiff";
+import type { Stats } from "./Stats";
+
+export type Diff = { files: Array<FileDiff>; stats: Stats };
diff --git a/crates/radicle-types/bindings/diff/DiffContent.ts b/crates/radicle-types/bindings/diff/DiffContent.ts
new file mode 100644
index 0000000..6a470f4
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/DiffContent.ts
@@ -0,0 +1,11 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { EofNewLine } from "./EofNewLine";
+import type { FileStats } from "./FileStats";
+import type { Hunks } from "./Hunks";
+
+export type DiffContent = { "type": "binary" } | {
+  "type": "plain";
+  hunks: Hunks;
+  stats: FileStats;
+  eof: EofNewLine;
+} | { "type": "empty" };
diff --git a/crates/radicle-types/bindings/diff/DiffFile.ts b/crates/radicle-types/bindings/diff/DiffFile.ts
new file mode 100644
index 0000000..2a1d63e
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/DiffFile.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FileMode } from "./FileMode";
+
+export type DiffFile = { oid: string; mode: FileMode };
diff --git a/crates/radicle-types/bindings/diff/EofNewLine.ts b/crates/radicle-types/bindings/diff/EofNewLine.ts
new file mode 100644
index 0000000..38b8064
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/EofNewLine.ts
@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type EofNewLine =
+  | "oldMissing"
+  | "newMissing"
+  | "bothMissing"
+  | "noneMissing";
diff --git a/crates/radicle-types/bindings/diff/FileDiff.ts b/crates/radicle-types/bindings/diff/FileDiff.ts
new file mode 100644
index 0000000..db94592
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/FileDiff.ts
@@ -0,0 +1,13 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Added } from "./Added";
+import type { Copied } from "./Copied";
+import type { Deleted } from "./Deleted";
+import type { Modified } from "./Modified";
+import type { Moved } from "./Moved";
+
+export type FileDiff =
+  | { "status": "added" } & Added
+  | { "status": "deleted" } & Deleted
+  | { "status": "modified" } & Modified
+  | { "status": "moved" } & Moved
+  | { "status": "copied" } & Copied;
diff --git a/crates/radicle-types/bindings/diff/FileMode.ts b/crates/radicle-types/bindings/diff/FileMode.ts
new file mode 100644
index 0000000..12d5442
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/FileMode.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type FileMode = "blob" | "blobExecutable" | "tree" | "link" | "commit";
diff --git a/crates/radicle-types/bindings/diff/FileStats.ts b/crates/radicle-types/bindings/diff/FileStats.ts
new file mode 100644
index 0000000..5892c45
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/FileStats.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type FileStats = { additions: number; deletions: number };
diff --git a/crates/radicle-types/bindings/diff/Hunk.ts b/crates/radicle-types/bindings/diff/Hunk.ts
new file mode 100644
index 0000000..363f52f
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Hunk.ts
@@ -0,0 +1,9 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Modification } from "./Modification";
+
+export type Hunk = {
+  header: string;
+  lines: Array<Modification>;
+  old: { start: number; end: number };
+  new: { start: number; end: number };
+};
diff --git a/crates/radicle-types/bindings/diff/Hunks.ts b/crates/radicle-types/bindings/diff/Hunks.ts
new file mode 100644
index 0000000..ebcfbb1
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Hunks.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Hunk } from "./Hunk";
+
+export type Hunks = Array<Hunk>;
diff --git a/crates/radicle-types/bindings/diff/Line.ts b/crates/radicle-types/bindings/diff/Line.ts
new file mode 100644
index 0000000..07d22d8
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Line.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Line = Array<number>;
diff --git a/crates/radicle-types/bindings/diff/Modification.ts b/crates/radicle-types/bindings/diff/Modification.ts
new file mode 100644
index 0000000..878d590
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Modification.ts
@@ -0,0 +1,15 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Addition } from "./Addition";
+import type { Deletion } from "./Deletion";
+import type { Line } from "../syntax/Line";
+
+export type Modification =
+  | { "type": "addition" } & Addition
+  | { "type": "deletion" } & Deletion
+  | {
+    "type": "context";
+    line: string;
+    lineNoOld: number;
+    lineNoNew: number;
+    highlight: Line | null;
+  };
diff --git a/crates/radicle-types/bindings/diff/Modified.ts b/crates/radicle-types/bindings/diff/Modified.ts
new file mode 100644
index 0000000..ba5743e
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Modified.ts
@@ -0,0 +1,10 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DiffContent } from "./DiffContent";
+import type { DiffFile } from "./DiffFile";
+
+export type Modified = {
+  path: string;
+  diff: DiffContent;
+  old: DiffFile;
+  new: DiffFile;
+};
diff --git a/crates/radicle-types/bindings/diff/Moved.ts b/crates/radicle-types/bindings/diff/Moved.ts
new file mode 100644
index 0000000..637d18b
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Moved.ts
@@ -0,0 +1,11 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DiffContent } from "./DiffContent";
+import type { DiffFile } from "./DiffFile";
+
+export type Moved = {
+  oldPath: string;
+  old: DiffFile;
+  newPath: string;
+  new: DiffFile;
+  diff: DiffContent;
+};
diff --git a/crates/radicle-types/bindings/diff/Stats.ts b/crates/radicle-types/bindings/diff/Stats.ts
new file mode 100644
index 0000000..2612086
--- /dev/null
+++ b/crates/radicle-types/bindings/diff/Stats.ts
@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Stats = {
+  filesChanged: number;
+  insertions: number;
+  deletions: number;
+};
diff --git a/crates/radicle-types/bindings/syntax/Label.ts b/crates/radicle-types/bindings/syntax/Label.ts
new file mode 100644
index 0000000..9cc1fdd
--- /dev/null
+++ b/crates/radicle-types/bindings/syntax/Label.ts
@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Paint } from "./Paint";
+
+/**
+ * A styled string that does not contain any `'\n'`.
+ */
+export type Label = Paint;
diff --git a/crates/radicle-types/bindings/syntax/Line.ts b/crates/radicle-types/bindings/syntax/Line.ts
new file mode 100644
index 0000000..9c955d3
--- /dev/null
+++ b/crates/radicle-types/bindings/syntax/Line.ts
@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Label } from "./Label";
+
+/**
+ * A line of text that has styling and can be displayed.
+ */
+export type Line = { items: Array<Label> };
diff --git a/crates/radicle-types/bindings/syntax/Paint.ts b/crates/radicle-types/bindings/syntax/Paint.ts
new file mode 100644
index 0000000..e641002
--- /dev/null
+++ b/crates/radicle-types/bindings/syntax/Paint.ts
@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * A structure encapsulating an item and styling.
+ */
+export type Paint = { item: string; style: string | null };
diff --git a/crates/radicle-types/src/cobs/diff.rs b/crates/radicle-types/src/cobs/diff.rs
index b3e51e7..f137cd5 100644
--- a/crates/radicle-types/src/cobs/diff.rs
+++ b/crates/radicle-types/src/cobs/diff.rs
@@ -5,5 +5,6 @@ use serde::{Deserialize, Serialize};
 pub struct Options {
     pub base: git::Oid,
     pub head: git::Oid,
-    pub unified: u32,
+    pub unified: Option<u32>,
+    pub highlight: Option<bool>,
 }
diff --git a/crates/radicle-types/src/diff.rs b/crates/radicle-types/src/diff.rs
new file mode 100644
index 0000000..d0ca734
--- /dev/null
+++ b/crates/radicle-types/src/diff.rs
@@ -0,0 +1,415 @@
+use std::{ops::Range, path::PathBuf};
+
+use radicle_surf as surf;
+use serde::Serialize;
+use ts_rs::TS;
+
+use radicle::git;
+
+#[derive(Serialize, TS)]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Diff {
+    pub files: Vec<FileDiff>,
+    pub stats: Stats,
+}
+
+impl From<surf::diff::Diff> for Diff {
+    fn from(value: surf::diff::Diff) -> Self {
+        Self {
+            files: value.files().cloned().map(Into::into).collect::<Vec<_>>(),
+            stats: (*value.stats()).into(),
+        }
+    }
+}
+
+#[derive(Serialize, TS)]
+#[serde(
+    tag = "status",
+    rename_all_fields = "camelCase",
+    rename_all = "camelCase"
+)]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub enum FileDiff {
+    Added(Added),
+    Deleted(Deleted),
+    Modified(Modified),
+    Moved(Moved),
+    Copied(Copied),
+}
+
+impl From<surf::diff::FileDiff> for FileDiff {
+    fn from(value: surf::diff::FileDiff) -> Self {
+        match value {
+            surf::diff::FileDiff::Added(surf::diff::Added { path, diff, new }) => {
+                Self::Added(Added {
+                    path,
+                    diff: diff.into(),
+                    new: new.into(),
+                })
+            }
+            surf::diff::FileDiff::Deleted(surf::diff::Deleted { path, diff, old }) => {
+                Self::Deleted(Deleted {
+                    path,
+                    diff: diff.into(),
+                    old: old.into(),
+                })
+            }
+            surf::diff::FileDiff::Modified(surf::diff::Modified {
+                path,
+                diff,
+                old,
+                new,
+            }) => Self::Modified(Modified {
+                path,
+                diff: diff.into(),
+                old: old.into(),
+                new: new.into(),
+            }),
+            surf::diff::FileDiff::Moved(surf::diff::Moved {
+                old_path,
+                old,
+                new_path,
+                new,
+                diff,
+            }) => Self::Moved(Moved {
+                old_path,
+                old: old.into(),
+                new_path,
+                new: new.into(),
+                diff: diff.into(),
+            }),
+            surf::diff::FileDiff::Copied(surf::diff::Copied {
+                old_path,
+                new_path,
+                old,
+                new,
+                diff,
+            }) => Self::Copied(Copied {
+                old_path,
+                new_path,
+                old: old.into(),
+                new: new.into(),
+                diff: diff.into(),
+            }),
+        }
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(
+    tag = "type",
+    rename_all_fields = "camelCase",
+    rename_all = "camelCase"
+)]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub enum DiffContent {
+    Binary,
+    Plain {
+        hunks: Hunks,
+        stats: FileStats,
+        eof: EofNewLine,
+    },
+    Empty,
+}
+
+impl From<surf::diff::DiffContent> for DiffContent {
+    fn from(value: surf::diff::DiffContent) -> Self {
+        match value {
+            surf::diff::DiffContent::Plain { hunks, stats, eof } => Self::Plain {
+                hunks: hunks.into(),
+                stats: stats.into(),
+                eof: eof.into(),
+            },
+            surf::diff::DiffContent::Binary => Self::Binary,
+            surf::diff::DiffContent::Empty => Self::Empty,
+        }
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct DiffFile {
+    #[ts(as = "String")]
+    pub oid: git::Oid,
+    pub mode: FileMode,
+}
+
+impl From<surf::diff::DiffFile> for DiffFile {
+    fn from(value: surf::diff::DiffFile) -> Self {
+        Self {
+            oid: value.oid,
+            mode: value.mode.into(),
+        }
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Added {
+    pub path: PathBuf,
+    pub diff: DiffContent,
+    pub new: DiffFile,
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Deleted {
+    pub path: PathBuf,
+    pub diff: DiffContent,
+    pub old: DiffFile,
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Moved {
+    pub old_path: PathBuf,
+    pub old: DiffFile,
+    pub new_path: PathBuf,
+    pub new: DiffFile,
+    pub diff: DiffContent,
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Copied {
+    pub old_path: PathBuf,
+    pub new_path: PathBuf,
+    pub old: DiffFile,
+    pub new: DiffFile,
+    pub diff: DiffContent,
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Modified {
+    pub path: PathBuf,
+    pub diff: DiffContent,
+    pub old: DiffFile,
+    pub new: DiffFile,
+}
+
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Stats {
+    pub files_changed: usize,
+    pub insertions: usize,
+    pub deletions: usize,
+}
+
+impl From<surf::diff::Stats> for Stats {
+    fn from(value: surf::diff::Stats) -> Self {
+        Self {
+            files_changed: value.files_changed,
+            insertions: value.insertions,
+            deletions: value.deletions,
+        }
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all_fields = "camelCase", rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub enum FileMode {
+    Blob,
+    BlobExecutable,
+    Tree,
+    Link,
+    Commit,
+}
+
+impl From<surf::diff::FileMode> for FileMode {
+    fn from(value: surf::diff::FileMode) -> Self {
+        match value {
+            surf::diff::FileMode::Blob => Self::Blob,
+            surf::diff::FileMode::BlobExecutable => Self::BlobExecutable,
+            surf::diff::FileMode::Tree => Self::Tree,
+            surf::diff::FileMode::Link => Self::Link,
+            surf::diff::FileMode::Commit => Self::Commit,
+        }
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all_fields = "camelCase", rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub enum EofNewLine {
+    OldMissing,
+    NewMissing,
+    BothMissing,
+    NoneMissing,
+}
+
+impl From<surf::diff::EofNewLine> for EofNewLine {
+    fn from(value: surf::diff::EofNewLine) -> Self {
+        match value {
+            surf::diff::EofNewLine::OldMissing => Self::OldMissing,
+            surf::diff::EofNewLine::NewMissing => Self::NewMissing,
+            surf::diff::EofNewLine::BothMissing => Self::BothMissing,
+            surf::diff::EofNewLine::NoneMissing => Self::NoneMissing,
+        }
+    }
+}
+
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct FileStats {
+    pub additions: usize,
+    pub deletions: usize,
+}
+
+impl From<surf::diff::FileStats> for FileStats {
+    fn from(value: surf::diff::FileStats) -> Self {
+        Self {
+            additions: value.additions,
+            deletions: value.deletions,
+        }
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(
+    tag = "type",
+    rename_all_fields = "camelCase",
+    rename_all = "camelCase"
+)]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub enum Modification {
+    Addition(Addition),
+    Deletion(Deletion),
+    Context {
+        line: String,
+        line_no_old: u32,
+        line_no_new: u32,
+        highlight: Option<crate::syntax::Line>,
+    },
+}
+
+impl From<surf::diff::Modification> for Modification {
+    fn from(value: surf::diff::Modification) -> Self {
+        match value {
+            surf::diff::Modification::Addition(surf::diff::Addition { line, line_no }) => {
+                Modification::Addition(Addition {
+                    line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                    line_no,
+                    highlight: None,
+                })
+            }
+            surf::diff::Modification::Deletion(surf::diff::Deletion { line, line_no }) => {
+                Modification::Deletion(Deletion {
+                    line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                    line_no,
+                    highlight: None,
+                })
+            }
+            surf::diff::Modification::Context {
+                line,
+                line_no_old,
+                line_no_new,
+            } => Modification::Context {
+                line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                line_no_old,
+                line_no_new,
+                highlight: None,
+            },
+        }
+    }
+}
+
+#[derive(Serialize, Clone, Debug, PartialEq, Eq, TS)]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Hunks(pub Vec<Hunk>);
+
+impl From<Vec<Hunk>> for Hunks {
+    fn from(hunks: Vec<Hunk>) -> Self {
+        Self(hunks)
+    }
+}
+
+impl From<surf::diff::Hunks<surf::diff::Modification>> for Hunks {
+    fn from(value: surf::diff::Hunks<surf::diff::Modification>) -> Self {
+        Self(value.0.into_iter().map(Into::into).collect::<Vec<_>>())
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Hunk {
+    pub header: String,
+    pub lines: Vec<Modification>,
+    pub old: Range<u32>,
+    pub new: Range<u32>,
+}
+
+impl From<surf::diff::Hunk<surf::diff::Modification>> for Hunk {
+    fn from(value: surf::diff::Hunk<surf::diff::Modification>) -> Self {
+        Self {
+            header: String::from_utf8_lossy(value.header.as_bytes()).to_string(),
+            lines: value.lines.into_iter().map(Into::into).collect::<Vec<_>>(),
+            old: value.old,
+            new: value.new,
+        }
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Line(pub(crate) Vec<u8>);
+
+impl Line {
+    /// Create a new line.
+    pub fn new(item: Vec<u8>) -> Self {
+        Self(item)
+    }
+}
+
+impl From<surf::diff::Line> for Line {
+    fn from(value: surf::diff::Line) -> Self {
+        Self(value.as_bytes().to_vec())
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Addition {
+    pub line: String,
+    pub line_no: u32,
+    pub highlight: Option<crate::syntax::Line>,
+}
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export)]
+#[ts(export_to = "diff/")]
+pub struct Deletion {
+    pub line: String,
+    pub line_no: u32,
+    pub highlight: Option<crate::syntax::Line>,
+}
diff --git a/crates/radicle-types/src/lib.rs b/crates/radicle-types/src/lib.rs
index 77763c1..ba42a24 100644
--- a/crates/radicle-types/src/lib.rs
+++ b/crates/radicle-types/src/lib.rs
@@ -8,9 +8,11 @@ use traits::Profile;
 
 pub mod cobs;
 pub mod config;
+pub mod diff;
 pub mod error;
 pub mod repo;
 pub mod test;
+pub mod syntax;
 pub mod traits;
 
 pub struct AppState {
diff --git a/crates/radicle-types/src/syntax.rs b/crates/radicle-types/src/syntax.rs
new file mode 100644
index 0000000..3024728
--- /dev/null
+++ b/crates/radicle-types/src/syntax.rs
@@ -0,0 +1,825 @@
+use std::collections::HashMap;
+use std::fs;
+use std::path::{Path, PathBuf};
+
+use serde::Serialize;
+use tree_sitter_highlight as ts;
+use ts_rs::TS;
+
+use radicle::git;
+use radicle_surf as surf;
+
+use crate as types;
+
+/// Highlight groups enabled.
+const HIGHLIGHTS: &[&str] = &[
+    "attribute",
+    "constant",
+    "constant.builtin",
+    "comment",
+    "constructor",
+    "declare",
+    "export",
+    "function.builtin",
+    "function",
+    "identifier",
+    "integer_literal",
+    "float.literal",
+    "keyword",
+    "label",
+    "module",
+    "number",
+    "operator",
+    "property",
+    "punctuation",
+    "punctuation.bracket",
+    "punctuation.delimiter",
+    "punctuation.special",
+    "shorthand_property_identifier",
+    "string",
+    "string.special",
+    "statement",
+    "tag",
+    "type",
+    "type.builtin",
+    "type_annotation",
+    "variable",
+    "variable.builtin",
+    "variable.parameter",
+    "text",
+    "text.literal",
+    "text.title",
+];
+
+/// A structure encapsulating an item and styling.
+#[derive(Clone, TS, Debug, Serialize, Eq, PartialEq)]
+#[ts(export)]
+#[ts(export_to = "syntax/")]
+pub struct Paint {
+    pub item: String,
+    pub style: Option<String>,
+}
+
+impl Paint {
+    /// Constructs a new `Paint` structure encapsulating `item` with no set styling.
+    pub fn new(item: String) -> Paint {
+        Paint { item, style: None }
+    }
+
+    /// Sets the style of `self` to `style`.
+    pub fn with_style(mut self, style: String) -> Paint {
+        self.style = Some(style);
+        self
+    }
+}
+
+/// A styled string that does not contain any `'\n'`.
+#[derive(Clone, Debug, Serialize, Eq, PartialEq, TS)]
+#[ts(export)]
+#[ts(export_to = "syntax/")]
+pub struct Label(Paint);
+
+impl Label {
+    /// Create a new label.
+    pub fn new(s: &str) -> Self {
+        Self(Paint::new(cleanup(s)))
+    }
+
+    /// Style a label.
+    pub fn style(self, style: String) -> Self {
+        Self(self.0.with_style(style))
+    }
+}
+
+impl From<String> for Label {
+    fn from(value: String) -> Self {
+        Self::new(value.as_str())
+    }
+}
+
+impl From<&str> for Label {
+    fn from(value: &str) -> Self {
+        Self::new(value)
+    }
+}
+
+/// A line of text that has styling and can be displayed.
+#[derive(Clone, Debug, Serialize, Default, PartialEq, TS, Eq)]
+#[ts(export)]
+#[ts(export_to = "syntax/")]
+pub struct Line {
+    items: Vec<Label>,
+}
+
+impl Line {
+    /// Create a new line.
+    pub fn new(item: impl Into<Label>) -> Self {
+        Self {
+            items: vec![item.into()],
+        }
+    }
+}
+
+impl IntoIterator for Line {
+    type Item = Label;
+    type IntoIter = Box<dyn Iterator<Item = Label>>;
+
+    fn into_iter(self) -> Self::IntoIter {
+        Box::new(self.items.into_iter())
+    }
+}
+
+impl<T: Into<Label>> From<T> for Line {
+    fn from(value: T) -> Self {
+        Self::new(value)
+    }
+}
+
+impl From<Vec<Label>> for Line {
+    fn from(items: Vec<Label>) -> Self {
+        Self { items }
+    }
+}
+
+/// Cleanup the input string for display as a label.
+fn cleanup(input: &str) -> String {
+    input.chars().filter(|c| *c != '\n' && *c != '\r').collect()
+}
+
+/// Syntax highlighted file builder.
+#[derive(Default)]
+struct Builder {
+    /// Output lines.
+    lines: Vec<Line>,
+    /// Current output line.
+    line: Vec<Label>,
+    /// Current label.
+    label: Vec<u8>,
+    /// Current stack of styles.
+    styles: Vec<String>,
+}
+
+impl Builder {
+    /// Run the builder to completion.
+    fn run(
+        mut self,
+        highlights: impl Iterator<Item = Result<ts::HighlightEvent, ts::Error>>,
+        code: &[u8],
+    ) -> Result<Vec<Line>, ts::Error> {
+        for event in highlights {
+            match event? {
+                ts::HighlightEvent::Source { start, end } => {
+                    for (i, byte) in code.iter().enumerate().skip(start).take(end - start) {
+                        if *byte == b'\n' {
+                            self.advance();
+                            // Start on new line.
+                            self.lines.push(Line::from(self.line.clone()));
+                            self.line.clear();
+                        } else if i == code.len() - 1 {
+                            // File has no `\n` at the end.
+                            self.label.push(*byte);
+                            self.advance();
+                            self.lines.push(Line::from(self.line.clone()));
+                        } else {
+                            // Add to existing label.
+                            self.label.push(*byte);
+                        }
+                    }
+                }
+                ts::HighlightEvent::HighlightStart(h) => {
+                    let name = HIGHLIGHTS[h.0];
+
+                    self.advance();
+                    self.styles.push(name.to_string());
+                }
+                ts::HighlightEvent::HighlightEnd => {
+                    self.advance();
+                    self.styles.pop();
+                }
+            }
+        }
+        Ok(self.lines)
+    }
+
+    /// Advance the state by pushing the current label onto the current line,
+    /// using the current styling.
+    fn advance(&mut self) {
+        if !self.label.is_empty() {
+            // Take the top-level style when there are more than one.
+            let style = self.styles.first().cloned().unwrap_or_default();
+            self.line
+                .push(Label::new(String::from_utf8_lossy(&self.label).as_ref()).style(style));
+            self.label.clear();
+        }
+    }
+}
+
+/// Syntax highlighter based on `tree-sitter`.
+#[derive(Default)]
+pub struct Highlighter {
+    configs: HashMap<&'static str, ts::HighlightConfiguration>,
+}
+
+impl Highlighter {
+    /// Highlight a source code file.
+    pub fn highlight(&mut self, path: &Path, code: &[u8]) -> Result<Vec<Line>, ts::Error> {
+        let mut highlighter = ts::Highlighter::new();
+        let Some(config) = self.detect(path, code) else {
+            let Ok(code) = std::str::from_utf8(code) else {
+                return Err(ts::Error::Unknown);
+            };
+            return Ok(code.lines().map(Line::new).collect());
+        };
+        config.configure(HIGHLIGHTS);
+
+        let highlights = highlighter.highlight(config, code, None, |_| {
+            // Language injection callback.
+            None
+        })?;
+
+        Builder::default().run(highlights, code)
+    }
+
+    /// Detect language.
+    fn detect(&mut self, path: &Path, _code: &[u8]) -> Option<&mut ts::HighlightConfiguration> {
+        match path.extension().and_then(|e| e.to_str()) {
+            Some("rs") => self.config("rust"),
+            Some("svelte") => self.config("svelte"),
+            Some("ts" | "js") => self.config("typescript"),
+            Some("json") => self.config("json"),
+            Some("sh" | "bash") => self.config("shell"),
+            Some("md" | "markdown") => self.config("markdown"),
+            Some("go") => self.config("go"),
+            Some("c") => self.config("c"),
+            Some("py") => self.config("python"),
+            Some("rb") => self.config("ruby"),
+            Some("tsx") => self.config("tsx"),
+            Some("html") | Some("htm") | Some("xml") => self.config("html"),
+            Some("css") => self.config("css"),
+            Some("toml") => self.config("toml"),
+            _ => None,
+        }
+    }
+
+    /// Get a language configuration.
+    fn config(&mut self, language: &'static str) -> Option<&mut ts::HighlightConfiguration> {
+        match language {
+            "rust" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_rust::LANGUAGE.into(),
+                    language,
+                    tree_sitter_rust::HIGHLIGHTS_QUERY,
+                    tree_sitter_rust::INJECTIONS_QUERY,
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "json" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_json::LANGUAGE.into(),
+                    language,
+                    tree_sitter_json::HIGHLIGHTS_QUERY,
+                    "",
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "typescript" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_typescript::LANGUAGE_TYPESCRIPT.into(),
+                    language,
+                    &format!(
+                        "{}\n{}",
+                        tree_sitter_javascript::HIGHLIGHT_QUERY,
+                        tree_sitter_typescript::HIGHLIGHTS_QUERY
+                    ),
+                    tree_sitter_javascript::INJECTIONS_QUERY,
+                    &format!(
+                        "{}\n{}",
+                        tree_sitter_javascript::LOCALS_QUERY,
+                        tree_sitter_typescript::LOCALS_QUERY
+                    ),
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "markdown" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_md::LANGUAGE.into(),
+                    language,
+                    tree_sitter_md::HIGHLIGHT_QUERY_BLOCK,
+                    tree_sitter_md::INJECTION_QUERY_BLOCK,
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "css" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_css::LANGUAGE.into(),
+                    language,
+                    tree_sitter_css::HIGHLIGHTS_QUERY,
+                    "",
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "go" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_go::LANGUAGE.into(),
+                    language,
+                    tree_sitter_go::HIGHLIGHTS_QUERY,
+                    "",
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "shell" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_bash::LANGUAGE.into(),
+                    language,
+                    tree_sitter_bash::HIGHLIGHT_QUERY,
+                    "",
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "c" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_c::LANGUAGE.into(),
+                    language,
+                    tree_sitter_c::HIGHLIGHT_QUERY,
+                    "",
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "python" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_python::LANGUAGE.into(),
+                    language,
+                    tree_sitter_python::HIGHLIGHTS_QUERY,
+                    "",
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "svelte" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_svelte_ng::LANGUAGE.into(),
+                    language,
+                    &format!(
+                        "{}\n{}\n{}",
+                        tree_sitter_javascript::HIGHLIGHT_QUERY,
+                        tree_sitter_typescript::HIGHLIGHTS_QUERY,
+                        tree_sitter_svelte_ng::HIGHLIGHTS_QUERY
+                    ),
+                    &format!(
+                        "{}\n{}",
+                        tree_sitter_javascript::INJECTIONS_QUERY,
+                        tree_sitter_svelte_ng::INJECTIONS_QUERY,
+                    ),
+                    &format!(
+                        "{}\n{}",
+                        tree_sitter_typescript::LOCALS_QUERY,
+                        tree_sitter_svelte_ng::LOCALS_QUERY,
+                    ),
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "ruby" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_ruby::LANGUAGE.into(),
+                    language,
+                    tree_sitter_ruby::HIGHLIGHTS_QUERY,
+                    "",
+                    tree_sitter_ruby::LOCALS_QUERY,
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "tsx" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_typescript::LANGUAGE_TSX.into(),
+                    language,
+                    &format!(
+                        "{}\n{}",
+                        tree_sitter_javascript::HIGHLIGHT_QUERY,
+                        tree_sitter_typescript::HIGHLIGHTS_QUERY
+                    ),
+                    tree_sitter_javascript::INJECTIONS_QUERY,
+                    &format!(
+                        "{}\n{}",
+                        tree_sitter_javascript::LOCALS_QUERY,
+                        tree_sitter_typescript::LOCALS_QUERY
+                    ),
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "html" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_html::LANGUAGE.into(),
+                    language,
+                    tree_sitter_html::HIGHLIGHTS_QUERY,
+                    tree_sitter_html::INJECTIONS_QUERY,
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            "toml" => Some(self.configs.entry(language).or_insert_with(|| {
+                ts::HighlightConfiguration::new(
+                    tree_sitter_toml_ng::LANGUAGE.into(),
+                    language,
+                    tree_sitter_toml_ng::HIGHLIGHTS_QUERY,
+                    "",
+                    "",
+                )
+                .expect("Highlighter::config: highlight configuration must be valid")
+            })),
+            _ => None,
+        }
+    }
+}
+
+/// Blob returned by the [`Repo`] trait.
+#[derive(PartialEq, Eq, Debug)]
+pub enum Blob {
+    Binary,
+    Empty,
+    Plain(Vec<u8>),
+}
+
+/// A repository of Git blobs.
+pub trait Repo {
+    /// Lookup a blob from the repo.
+    fn blob(&self, oid: git::Oid) -> Result<Blob, git::raw::Error>;
+    /// Lookup a file in the workdir.
+    fn file(&self, path: &Path) -> Option<Blob>;
+}
+
+impl Repo for git::raw::Repository {
+    fn blob(&self, oid: git::Oid) -> Result<Blob, git::raw::Error> {
+        let blob = self.find_blob(*oid)?;
+
+        if blob.is_binary() {
+            Ok(Blob::Binary)
+        } else {
+            let content = blob.content();
+
+            if content.is_empty() {
+                Ok(Blob::Empty)
+            } else {
+                Ok(Blob::Plain(blob.content().to_vec()))
+            }
+        }
+    }
+
+    fn file(&self, path: &Path) -> Option<Blob> {
+        self.workdir()
+            .and_then(|dir| fs::read(dir.join(path)).ok())
+            .map(|content| {
+                // A file is considered binary if there is a zero byte in the first 8 kilobytes
+                // of the file. This is the same heuristic Git uses.
+                let binary = content.iter().take(8192).any(|b| *b == 0);
+                if binary {
+                    Blob::Binary
+                } else {
+                    Blob::Plain(content)
+                }
+            })
+    }
+}
+
+/// Blobs passed down to the hunk renderer.
+#[derive(Debug)]
+pub struct Blobs<T> {
+    pub old: Option<T>,
+    pub new: Option<T>,
+}
+
+impl<T> Blobs<T> {
+    pub fn new(old: Option<T>, new: Option<T>) -> Self {
+        Self { old, new }
+    }
+}
+
+impl Blobs<(PathBuf, Blob)> {
+    pub fn highlight(&self, hi: &mut Highlighter) -> Blobs<Vec<Line>> {
+        let mut blobs = Blobs::default();
+        if let Some((path, Blob::Plain(content))) = &self.old {
+            blobs.old = hi.highlight(path, content).ok();
+        }
+        if let Some((path, Blob::Plain(content))) = &self.new {
+            blobs.new = hi.highlight(path, content).ok();
+        }
+        blobs
+    }
+
+    pub fn from_paths<R: Repo>(
+        old: Option<(&Path, git::Oid)>,
+        new: Option<(&Path, git::Oid)>,
+        repo: &R,
+    ) -> Blobs<(PathBuf, Blob)> {
+        Blobs::new(
+            old.and_then(|(path, oid)| {
+                repo.blob(oid)
+                    .ok()
+                    .or_else(|| repo.file(path))
+                    .map(|blob| (path.to_path_buf(), blob))
+            }),
+            new.and_then(|(path, oid)| {
+                repo.blob(oid)
+                    .ok()
+                    .or_else(|| repo.file(path))
+                    .map(|blob| (path.to_path_buf(), blob))
+            }),
+        )
+    }
+}
+
+impl<T> Default for Blobs<T> {
+    fn default() -> Self {
+        Self {
+            old: None,
+            new: None,
+        }
+    }
+}
+
+pub trait ToPretty {
+    /// The output of the render process.
+    type Output: Serialize;
+    /// Context that can be passed down from parent objects during rendering.
+    type Context;
+
+    /// Render to pretty diff output.
+    fn pretty<R: Repo>(
+        &self,
+        hi: &mut Highlighter,
+        context: &Self::Context,
+        repo: &R,
+    ) -> Self::Output;
+}
+
+impl ToPretty for surf::diff::Diff {
+    type Output = types::diff::Diff;
+    type Context = ();
+
+    fn pretty<R: Repo>(
+        &self,
+        hi: &mut Highlighter,
+        context: &Self::Context,
+        repo: &R,
+    ) -> Self::Output {
+        let files = self
+            .files()
+            .map(|f| f.pretty(hi, context, repo))
+            .collect::<Vec<_>>();
+
+        types::diff::Diff {
+            files,
+            stats: (*self.stats()).into(),
+        }
+    }
+}
+
+impl ToPretty for surf::diff::FileDiff {
+    type Output = types::diff::FileDiff;
+    type Context = ();
+
+    fn pretty<R: Repo>(
+        &self,
+        hi: &mut Highlighter,
+        _context: &Self::Context,
+        repo: &R,
+    ) -> Self::Output {
+        match self {
+            surf::diff::FileDiff::Added(f) => types::diff::FileDiff::Added(f.pretty(hi, &(), repo)),
+            surf::diff::FileDiff::Deleted(f) => {
+                types::diff::FileDiff::Deleted(f.pretty(hi, &(), repo))
+            }
+            surf::diff::FileDiff::Modified(f) => {
+                types::diff::FileDiff::Modified(f.pretty(hi, &(), repo))
+            }
+            surf::diff::FileDiff::Moved(f) => types::diff::FileDiff::Moved(f.pretty(hi, &(), repo)),
+            surf::diff::FileDiff::Copied(f) => {
+                types::diff::FileDiff::Copied(f.pretty(hi, &(), repo))
+            }
+        }
+    }
+}
+
+impl ToPretty for surf::diff::DiffContent {
+    type Output = types::diff::DiffContent;
+    type Context = Blobs<(PathBuf, Blob)>;
+
+    fn pretty<R: Repo>(
+        &self,
+        hi: &mut Highlighter,
+        blobs: &Self::Context,
+        repo: &R,
+    ) -> Self::Output {
+        match self {
+            surf::diff::DiffContent::Plain {
+                hunks: surf::diff::Hunks(hunks),
+                eof,
+                stats,
+            } => {
+                let blobs = blobs.highlight(hi);
+
+                let hunks = hunks
+                    .iter()
+                    .map(|h| h.pretty(hi, &blobs, repo))
+                    .collect::<Vec<_>>();
+
+                types::diff::DiffContent::Plain {
+                    hunks: hunks.into(),
+                    stats: (*stats).into(),
+                    eof: (*eof).clone().into(),
+                }
+            }
+            surf::diff::DiffContent::Binary => types::diff::DiffContent::Binary,
+            surf::diff::DiffContent::Empty => types::diff::DiffContent::Empty,
+        }
+    }
+}
+
+impl ToPretty for surf::diff::Moved {
+    type Output = types::diff::Moved;
+    type Context = ();
+
+    fn pretty<R: Repo>(&self, hi: &mut Highlighter, _: &Self::Context, repo: &R) -> Self::Output {
+        let old = Some((self.old_path.as_path(), self.old.oid));
+        let new = Some((self.new_path.as_path(), self.new.oid));
+        let blobs = Blobs::from_paths(old, new, repo);
+
+        types::diff::Moved {
+            old_path: self.old_path.clone(),
+            old: self.old.clone().into(),
+            new_path: self.new_path.clone(),
+            new: self.new.clone().into(),
+            diff: self.diff.pretty(hi, &blobs, repo),
+        }
+    }
+}
+
+impl ToPretty for surf::diff::Added {
+    type Output = types::diff::Added;
+    type Context = ();
+
+    fn pretty<R: Repo>(&self, hi: &mut Highlighter, _: &Self::Context, repo: &R) -> Self::Output {
+        let old = None;
+        let new = Some((self.path.as_path(), self.new.oid));
+        let blobs = Blobs::from_paths(old, new, repo);
+
+        types::diff::Added {
+            path: self.path.clone(),
+            diff: self.diff.pretty(hi, &blobs, repo),
+            new: self.new.clone().into(),
+        }
+    }
+}
+
+impl ToPretty for surf::diff::Deleted {
+    type Output = types::diff::Deleted;
+    type Context = ();
+
+    fn pretty<R: Repo>(&self, hi: &mut Highlighter, _: &Self::Context, repo: &R) -> Self::Output {
+        let old = Some((self.path.as_path(), self.old.oid));
+        let new = None;
+        let blobs = Blobs::from_paths(old, new, repo);
+
+        types::diff::Deleted {
+            path: self.path.clone(),
+            diff: self.diff.pretty(hi, &blobs, repo),
+            old: self.old.clone().into(),
+        }
+    }
+}
+
+impl ToPretty for surf::diff::Modified {
+    type Output = types::diff::Modified;
+    type Context = ();
+
+    fn pretty<R: Repo>(&self, hi: &mut Highlighter, _: &Self::Context, repo: &R) -> Self::Output {
+        let old = Some((self.path.as_path(), self.old.oid));
+        let new = Some((self.path.as_path(), self.new.oid));
+        let blobs = Blobs::from_paths(old, new, repo);
+
+        types::diff::Modified {
+            path: self.path.clone(),
+            diff: self.diff.pretty(hi, &blobs, repo),
+            new: self.new.clone().into(),
+            old: self.old.clone().into(),
+        }
+    }
+}
+
+impl ToPretty for surf::diff::Copied {
+    type Output = types::diff::Copied;
+    type Context = ();
+
+    fn pretty<R: Repo>(&self, hi: &mut Highlighter, _: &Self::Context, repo: &R) -> Self::Output {
+        let old = Some((self.old_path.as_path(), self.old.oid));
+        let new = Some((self.new_path.as_path(), self.new.oid));
+        let blobs = Blobs::from_paths(old, new, repo);
+
+        types::diff::Copied {
+            old_path: self.old_path.clone(),
+            new_path: self.new_path.clone(),
+            diff: self.diff.pretty(hi, &blobs, repo),
+            new: self.new.clone().into(),
+            old: self.old.clone().into(),
+        }
+    }
+}
+
+impl ToPretty for surf::diff::Hunk<surf::diff::Modification> {
+    type Output = types::diff::Hunk;
+    type Context = Blobs<Vec<Line>>;
+
+    fn pretty<R: Repo>(
+        &self,
+        hi: &mut Highlighter,
+        blobs: &Self::Context,
+        repo: &R,
+    ) -> Self::Output {
+        let lines = self
+            .lines
+            .clone()
+            .into_iter()
+            .map(|l| l.pretty(hi, blobs, repo))
+            .collect::<Vec<_>>();
+
+        types::diff::Hunk {
+            header: String::from_utf8_lossy(self.header.as_bytes()).to_string(),
+            new: self.new.clone(),
+            old: self.old.clone(),
+            lines,
+        }
+    }
+}
+
+impl ToPretty for surf::diff::Modification {
+    type Output = types::diff::Modification;
+    type Context = Blobs<Vec<Line>>;
+
+    fn pretty<R: Repo>(
+        &self,
+        _hi: &mut Highlighter,
+        blobs: &<radicle_surf::diff::Modification as ToPretty>::Context,
+        _repo: &R,
+    ) -> Self::Output {
+        match self {
+            surf::diff::Modification::Deletion(surf::diff::Deletion { line, line_no }) => {
+                if let Some(lines) = &blobs.old.as_ref() {
+                    types::diff::Modification::Deletion(types::diff::Deletion {
+                        line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                        highlight: Some(lines[*line_no as usize - 1].clone()),
+                        line_no: *line_no,
+                    })
+                } else {
+                    types::diff::Modification::Deletion(types::diff::Deletion {
+                        line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                        line_no: *line_no,
+                        highlight: None,
+                    })
+                }
+            }
+            surf::diff::Modification::Addition(surf::diff::Addition { line, line_no }) => {
+                if let Some(lines) = &blobs.new.as_ref() {
+                    types::diff::Modification::Addition(types::diff::Addition {
+                        line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                        line_no: *line_no,
+                        highlight: Some(lines[*line_no as usize - 1].clone()),
+                    })
+                } else {
+                    types::diff::Modification::Addition(types::diff::Addition {
+                        line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                        line_no: *line_no,
+                        highlight: None,
+                    })
+                }
+            }
+            surf::diff::Modification::Context {
+                line,
+                line_no_new,
+                line_no_old,
+            } => {
+                // Nb. we can check in the old or the new blob, we choose the new.
+                if let Some(lines) = &blobs.new.as_ref() {
+                    types::diff::Modification::Context {
+                        line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                        line_no_new: *line_no_new,
+                        line_no_old: *line_no_old,
+                        highlight: Some(lines[*line_no_new as usize - 1].clone()),
+                    }
+                } else {
+                    types::diff::Modification::Context {
+                        line: String::from_utf8_lossy(line.as_bytes()).to_string(),
+                        line_no_new: *line_no_new,
+                        line_no_old: *line_no_old,
+                        highlight: None,
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/crates/radicle-types/src/traits/repo.rs b/crates/radicle-types/src/traits/repo.rs
index 61a76f2..ac41053 100644
--- a/crates/radicle-types/src/traits/repo.rs
+++ b/crates/radicle-types/src/traits/repo.rs
@@ -10,8 +10,10 @@ use radicle::storage::{ReadRepository, ReadStorage, RepositoryInfo};
 use radicle::{git, identity};
 
 use crate::cobs;
+use crate::diff::Diff;
 use crate::error::Error;
 use crate::repo;
+use crate::syntax::{Highlighter, ToPretty};
 use crate::traits::Profile;
 
 #[derive(Serialize, Deserialize, PartialEq)]
@@ -129,20 +131,16 @@ pub trait Repo: Profile {
         })
     }
 
-    fn get_diff(
-        &self,
-        rid: identity::RepoId,
-        options: cobs::diff::Options,
-    ) -> Result<surf::diff::Diff, Error> {
+    fn get_diff(&self, rid: identity::RepoId, options: cobs::diff::Options) -> Result<Diff, Error> {
+        let unified = options.unified.unwrap_or(5);
+        let highlight = options.highlight.unwrap_or(true);
         let profile = self.profile();
         let repo = profile.storage.repository(rid)?.backend;
         let base = repo.find_commit(*options.base)?;
         let head = repo.find_commit(*options.head)?;
 
         let mut opts = git::raw::DiffOptions::new();
-        opts.patience(true)
-            .minimal(true)
-            .context_lines(options.unified);
+        opts.patience(true).minimal(true).context_lines(unified);
 
         let mut find_opts = git::raw::DiffFindOptions::new();
         find_opts.exact_match_only(true);
@@ -155,7 +153,13 @@ pub trait Repo: Profile {
         diff.find_similar(Some(&mut find_opts))?;
         let diff = surf::diff::Diff::try_from(diff)?;
 
-        Ok::<_, Error>(diff)
+        if highlight {
+            let mut hi = Highlighter::default();
+
+            return Ok::<_, Error>(diff.pretty(&mut hi, &(), &repo));
+        }
+
+        Ok::<_, Error>(diff.into())
     }
 
     fn list_commits(
diff --git a/index.html b/index.html
index 7583629..89e6b13 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
     <link rel="stylesheet" type="text/css" href="/typography.css" />
     <link rel="stylesheet" type="text/css" href="/prettylights.css" />
     <link rel="stylesheet" type="text/css" href="/colors.css" />
+    <link rel="stylesheet" type="text/css" href="/syntax.css" />
     <script type="module">
       // Make global 'Buffer' available to legacy modules.
       import { Buffer } from "buffer";
diff --git a/public/syntax.css b/public/syntax.css
new file mode 100644
index 0000000..0305995
--- /dev/null
+++ b/public/syntax.css
@@ -0,0 +1,60 @@
+.syntax.operator,
+.syntax.keyword {
+  color: var(--color-prettylights-syntax-keyword);
+}
+.syntax.type {
+  color: var(--color-prettylights-syntax-entity);
+}
+.syntax.property,
+.syntax.variable\.parameter {
+  color: var(--color-prettylights-syntax-variable);
+}
+.syntax.punctuation\.delimiter {
+}
+.syntax.punctuation\.bracket {
+}
+.syntax.attribute {
+}
+.syntax.number,
+.syntax.constant,
+.syntax.type\.builtin,
+.syntax.constant\.builtin,
+.syntax.variable\.builtin,
+.syntax.function {
+  color: var(--color-prettylights-syntax-constant);
+}
+.syntax.comment {
+  color: var(--color-prettylights-syntax-comment);
+}
+.syntax.string {
+  color: var(--color-prettylights-syntax-string);
+}
+.syntax.string.special {
+}
+.syntax.function {
+}
+.syntax.type.builtin {
+}
+.syntax.punctuation.bracket {
+}
+.syntax.punctuation.delimiter {
+}
+.syntax.punctuation.special {
+}
+.syntax.text.literal {
+}
+.syntax.text.title {
+}
+.syntax.variable {
+  color: var(--color-prettylights-syntax-storage-modifier-import);
+}
+.syntax.attribute {
+}
+.syntax.label {
+}
+.syntax.type {
+}
+.syntax.variable.parameter {
+}
+.syntax.constructor {
+}
diff --git a/src/components/Changeset.svelte b/src/components/Changeset.svelte
new file mode 100644
index 0000000..5e6f483
--- /dev/null
+++ b/src/components/Changeset.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Diff } from "@bindings/diff/Diff";
+
+  import FileDiff from "./Changeset/FileDiff.svelte";
+
+  interface Props {
+    diff: Diff;
+    repoId: string;
+  }
+
+  const { diff }: Props = $props();
+</script>
+
+<style>
+  .diff-list {
+    display: flex;
+    flex-direction: column;
+  }
+</style>
+
+<div class="diff-list">
+  {#each diff.files as file}
+    <FileDiff
+      filePath={"path" in file ? file.path : file.newPath}
+      oldFilePath={"oldPath" in file ? file.oldPath : undefined}
+      fileDiff={file.diff}
+      headerBadgeCaption={file.status} />
+  {/each}
+</div>
diff --git a/src/components/Changeset/FileDiff.svelte b/src/components/Changeset/FileDiff.svelte
new file mode 100644
index 0000000..a16b505
--- /dev/null
+++ b/src/components/Changeset/FileDiff.svelte
@@ -0,0 +1,288 @@
+<script lang="ts">
+  import type { DiffContent } from "@bindings/diff/DiffContent";
+  import type { FileDiff } from "@bindings/diff/FileDiff";
+  import type { Modification } from "@bindings/diff/Modification";
+
+  import File from "@app/components/File.svelte";
+
+  interface Props {
+    filePath: string;
+    oldFilePath?: string | undefined;
+    fileDiff: DiffContent;
+    headerBadgeCaption: FileDiff["status"];
+  }
+
+  const {
+    filePath,
+    oldFilePath = undefined,
+    fileDiff,
+    headerBadgeCaption,
+  }: Props = $props();
+
+  function lineNumberR(line: Modification): string | number {
+    switch (line.type) {
+      case "addition": {
+        return line.lineNo;
+      }
+      case "context": {
+        return line.lineNoNew;
+      }
+      case "deletion": {
+        return " ";
+      }
+    }
+  }
+
+  function lineNumberL(line: Modification): string | number {
+    switch (line.type) {
+      case "addition": {
+        return " ";
+      }
+      case "context": {
+        return line.lineNoOld;
+      }
+      case "deletion": {
+        return line.lineNo;
+      }
+    }
+  }
+
+  function lineSign(line: Modification): string {
+    switch (line.type) {
+      case "addition": {
+        return "+";
+      }
+      case "context": {
+        return " ";
+      }
+      case "deletion": {
+        return "-";
+      }
+    }
+  }
+</script>
+
+<style>
+  .container {
+    font-size: var(--font-size-small);
+    background: var(--color-background-float);
+    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
+    overflow-x: auto;
+  }
+  .actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+  .browse {
+    margin-left: auto;
+  }
+  .expand-button {
+    cursor: pointer;
+    user-select: none;
+    margin-right: 0.5rem;
+  }
+  .diff {
+    font-family: var(--font-family-monospace);
+    table-layout: fixed;
+    border-collapse: collapse;
+    margin: 0.5rem 0;
+  }
+  .diff-line {
+    vertical-align: top;
+  }
+  .diff-line.type-addition > * {
+    background-color: var(--color-fill-diff-green-light);
+  }
+  .diff-line.type-deletion > * {
+    background-color: var(--color-fill-diff-red-light);
+  }
+
+  .diff-line.selected > * {
+    background-color: var(--color-fill-float-hover);
+  }
+  .diff-line.selected.type-addition > * {
+    background-color: var(--color-fill-diff-green);
+  }
+  .diff-line.selected.type-deletion > * {
+    background-color: var(--color-fill-diff-red);
+  }
+
+  .type-addition > .diff-line-number,
+  .type-addition > .diff-line-type {
+    color: var(--color-foreground-success);
+  }
+  .type-deletion > .diff-line-number,
+  .type-deletion > .diff-line-type {
+    color: var(--color-foreground-red);
+  }
+
+  .diff-line.selected .selection-indicator-left {
+    background-color: var(--color-fill-secondary);
+  }
+  .type-addition.diff-line.selected .selection-indicator-left {
+    background-color: var(--color-fill-secondary);
+  }
+  .type-deletion.diff-line.selected .selection-indicator-left {
+    background-color: var(--color-fill-secondary);
+  }
+
+  .diff-line.selected .selection-indicator-right {
+    background-color: var(--color-fill-secondary);
+  }
+  .type-addition.diff-line.selected .selection-indicator-right {
+    background-color: var(--color-fill-secondary);
+  }
+  .type-deletion.diff-line.selected .selection-indicator-right {
+    background-color: var(--color-fill-secondary);
+  }
+
+  .selection-start {
+    box-shadow: 0 -1px 0 0 var(--color-fill-secondary);
+    z-index: 1;
+  }
+  .selection-end {
+    box-shadow: 0 1px 0 0 var(--color-fill-secondary);
+    z-index: 1;
+  }
+
+  .selection-start.selection-end {
+    box-shadow: 0 0 0 1px var(--color-fill-secondary);
+    z-index: 1;
+  }
+
+  .diff-line-number {
+    font-family: var(--font-family-monospace);
+    text-align: right;
+    user-select: none;
+    line-height: 1.5rem;
+    min-width: 3rem;
+    cursor: pointer;
+    color: var(--color-foreground-disabled);
+  }
+  .diff-line-number.left {
+    position: relative;
+    padding: 0 0.5rem 0 0.75rem;
+  }
+  .selection-indicator-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+  }
+  .selection-indicator-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+  }
+  .diff-line-number.right {
+    padding: 0 0.75rem 0 0.5rem;
+  }
+  .diff-line-content {
+    color: unset !important;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    width: 100%;
+    padding-right: 0.5rem;
+  }
+  .diff-line-type {
+    text-align: center;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    user-select: none;
+  }
+  .diff-expand-header {
+    padding-left: 0.5rem;
+    color: var(--color-foreground-dim);
+  }
+</style>
+
+<File>
+  {#snippet leftHeader()}
+    {#if (headerBadgeCaption === "moved" || headerBadgeCaption === "copied") && oldFilePath}
+      <span style="display: flex; align-items: center; flex-wrap: wrap;">
+        {oldFilePath}
+        <span style:padding="0 0.5rem">→</span>
+        {filePath}
+      </span>
+    {:else}
+      {filePath}
+    {/if}
+
+    {#if headerBadgeCaption === "added"}
+      added
+    {:else if headerBadgeCaption === "deleted"}
+      deleted
+    {:else if headerBadgeCaption === "moved"}
+      moved
+    {:else if headerBadgeCaption === "copied"}
+      copied
+    {/if}
+  {/snippet}
+
+  {#snippet children()}
+    <div class="container">
+      {#if fileDiff.type === "plain"}
+        {#if fileDiff.hunks.length > 0}
+          <table class="diff" data-file-diff-select>
+            {#each fileDiff.hunks as hunk, hunkIdx}
+              <!-- svelte-ignore node_invalid_placement_ssr -->
+              <tr class="diff-line hunk-header">
+                <td colspan={2} style:position="relative">
+                  <div class="selection-indicator-left"></div>
+                </td>
+                <td
+                  colspan={6}
+                  class="diff-expand-header"
+                  style:position="relative">
+                  {hunk.header}
+                  <div class="selection-indicator-right"></div>
+                </td>
+              </tr>
+              {#each hunk.lines as line, lineIdx}
+                <!-- svelte-ignore node_invalid_placement_ssr -->
+                <tr
+                  style="position: relative;"
+                  class={`diff-line type-${line.type}`}>
+                  <td
+                    id={[filePath, "H" + hunkIdx, "L" + lineIdx].join("-")}
+                    class="diff-line-number left">
+                    <div class="selection-indicator-left"></div>
+                    {lineNumberL(line)}
+                  </td>
+                  <td class="diff-line-number right">
+                    {lineNumberR(line)}
+                  </td>
+                  <td class="diff-line-type" data-line-type={line.type}>
+                    {lineSign(line)}
+                  </td>
+                  <td class="diff-line-content">
+                    {#if line.highlight}
+                      {@html line.highlight.items
+                        .map(
+                          s =>
+                            `<span class="syntax ${s.style}">${s.item}</span>`,
+                        )
+                        .join("")}
+                    {:else}
+                      {line.line}
+                    {/if}
+                  </td>
+                  <td class="selection-indicator-right"></td>
+                </tr>
+              {/each}
+            {/each}
+          </table>
+        {:else}
+          <div style:margin="1rem 0">Empty file</div>
+        {/if}
+      {:else}
+        <div style:margin="1rem 0">Empty file</div>
+      {/if}
+    </div>
+  {/snippet}
+</File>
diff --git a/src/components/File.svelte b/src/components/File.svelte
new file mode 100644
index 0000000..684c912
--- /dev/null
+++ b/src/components/File.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    sticky?: boolean;
+    leftHeader: Snippet;
+    children: Snippet;
+  }
+
+  const { sticky = true, leftHeader, children }: Props = $props();
+</script>
+
+<style>
+  .header {
+    display: flex;
+    height: 3rem;
+    align-items: center;
+    padding: 0 0.5rem 0 1rem;
+    border: 1px solid var(--color-border-hint);
+    border-top-left-radius: var(--border-radius-small);
+    border-top-right-radius: var(--border-radius-small);
+    background-color: var(--color-background-default);
+    z-index: 2;
+  }
+
+  .sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  .left {
+    display: flex;
+    gap: 0.5rem;
+    margin-right: 1rem;
+    align-items: center;
+  }
+
+  .container {
+    position: relative;
+    overflow-x: auto;
+    border: 1px solid var(--color-border-hint);
+    border-top: 0;
+    background: var(--color-background-float);
+    border-bottom-left-radius: var(--border-radius-small);
+    border-bottom-right-radius: var(--border-radius-small);
+  }
+  @media (max-width: 719.98px) {
+    .header {
+      border-radius: 0;
+      border-left: 0;
+      border-right: 0;
+      padding: 0 1rem 0 1rem;
+    }
+    .container {
+      border-radius: 0;
+      border-left: 0;
+      border-right: 0;
+    }
+  }
+</style>
+
+<div class="header" class:sticky>
+  <div class="left">
+    {@render leftHeader()}
+  </div>
+</div>
+
+<div class="container">
+  {@render children()}
+</div>
diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
index 877c9cb..d18599c 100644
--- a/src/views/repo/Patch.svelte
+++ b/src/views/repo/Patch.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Diff } from "@bindings/diff/Diff";
   import type { Config } from "@bindings/config/Config";
   import type { PaginatedQuery } from "@bindings/cob/PaginatedQuery";
   import type { Patch } from "@bindings/cob/patch/Patch";
@@ -17,6 +18,7 @@
   import NodeId from "@app/components/NodeId.svelte";
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
   import Sidebar from "@app/components/Sidebar.svelte";
+  import Changeset from "@app/components/Changeset.svelte";
 
   interface Props {
     repo: RepoInfo;
@@ -40,6 +42,18 @@
     more = patches.more;
   });
 
+  async function loadHighlightedDiff(rid: string, base: string, head: string) {
+    return invoke<Diff>("get_diff", {
+      rid,
+      options: {
+        base,
+        head,
+        unified: 5,
+        highlight: true,
+      },
+    });
+  }
+
   async function loadPatch(rid: string, patchId: string) {
     patch = await invoke<Patch>("patch_by_id", {
       rid: rid,
@@ -177,6 +191,9 @@
     <div class="txt-small" style:margin-top="1rem">Revisions</div>
     {#each revisions as revision}
       <div><Id id={revision.id} variant="oid" /></div>
+      {#await loadHighlightedDiff(repo.rid, revision.base, revision.head) then diff}
+        <Changeset {diff} repoId={repo.rid} />
+      {/await}
     {/each}
   </div>
 </Layout>