diff --git a/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize.go b/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize.go
index 5b2005d9db..0b8473c903 100644
--- a/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize.go
+++ b/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize.go
@@ -224,13 +224,12 @@ func (n *Normalizer) normalizeEdit(args map[string]any) *streams.NormalizedPaylo
 		})
 	} else {
 		// str_replace operation
+		// Only include the diff (not old/new content) to reduce payload size
 		oldStr, _ := rawInput["old_str_1"].(string)
 		newStr, _ := rawInput["new_str_1"].(string)
 
 		mutation := streams.FileMutation{
-			Type:       streams.MutationPatch,
-			OldContent: oldStr,
-			NewContent: newStr,
+			Type: streams.MutationPatch,
 		}
 
 		// Add line numbers if available
@@ -241,8 +240,8 @@ func (n *Normalizer) normalizeEdit(args map[string]any) *streams.NormalizedPaylo
 			mutation.EndLine = int(endLine)
 		}
 
-		// Generate unified diff
-		if oldStr != "" && newStr != "" {
+		// Generate unified diff when at least one string is provided
+		if oldStr != "" || newStr != "" {
 			mutation.Diff = shared.GenerateUnifiedDiff(oldStr, newStr, path, mutation.StartLine)
 		}
 
diff --git a/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize_test.go b/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize_test.go
index 6b3762659f..74646aefe1 100644
--- a/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize_test.go
+++ b/apps/backend/internal/agentctl/server/adapter/transport/acp/normalize_test.go
@@ -204,17 +204,37 @@ func TestDetectLanguage(t *testing.T) {
 
 // TestGenerateUnifiedDiff tests the unified diff generation.
 func TestGenerateUnifiedDiff(t *testing.T) {
-	t.Run("returns empty when old is empty", func(t *testing.T) {
-		result := shared.GenerateUnifiedDiff("", "new content", "file.ts", 1)
+	t.Run("returns empty when both are empty", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("", "", "file.ts", 1)
 		if result != "" {
-			t.Errorf("expected empty string for empty old string, got %q", result)
+			t.Errorf("expected empty string when both old and new are empty, got %q", result)
 		}
 	})
 
-	t.Run("returns empty when new is empty", func(t *testing.T) {
-		result := shared.GenerateUnifiedDiff("old content", "", "file.ts", 1)
+	t.Run("returns empty when old equals new", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("same content", "same content", "file.ts", 1)
 		if result != "" {
-			t.Errorf("expected empty string for empty new string, got %q", result)
+			t.Errorf("expected empty string when old equals new, got %q", result)
+		}
+	})
+
+	t.Run("generates all-additions diff when old is empty", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("", "new content", "file.ts", 1)
+		if result == "" {
+			t.Fatal("expected non-empty diff for create operation")
+		}
+		if !strings.Contains(result, "+new content") {
+			t.Error("expected added line in diff")
+		}
+	})
+
+	t.Run("generates all-deletions diff when new is empty", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("old content", "", "file.ts", 1)
+		if result == "" {
+			t.Fatal("expected non-empty diff for delete operation")
+		}
+		if !strings.Contains(result, "-old content") {
+			t.Error("expected removed line in diff")
 		}
 	})
 
@@ -284,11 +304,9 @@ func TestNormalizerEdit(t *testing.T) {
 			t.Fatalf("expected 1 mutation, got %d", len(result.ModifyFile().Mutations))
 		}
 		mutation := result.ModifyFile().Mutations[0]
-		if mutation.OldContent != "old code" {
-			t.Errorf("expected OldContent 'old code', got %q", mutation.OldContent)
-		}
-		if mutation.NewContent != "new code" {
-			t.Errorf("expected NewContent 'new code', got %q", mutation.NewContent)
+		// OldContent and NewContent are no longer set (only Diff is generated)
+		if mutation.Diff == "" {
+			t.Error("expected Diff to be generated")
 		}
 		if mutation.StartLine != 10 {
 			t.Errorf("expected StartLine 10, got %d", mutation.StartLine)
diff --git a/apps/backend/internal/agentctl/server/adapter/transport/shared/normalize_helpers.go b/apps/backend/internal/agentctl/server/adapter/transport/shared/normalize_helpers.go
index 99bf5775e9..d3d563468c 100644
--- a/apps/backend/internal/agentctl/server/adapter/transport/shared/normalize_helpers.go
+++ b/apps/backend/internal/agentctl/server/adapter/transport/shared/normalize_helpers.go
@@ -9,7 +9,11 @@ import (
 
 // GenerateUnifiedDiff creates a unified diff string from old and new content.
 func GenerateUnifiedDiff(oldStr, newStr, path string, startLine int) string {
-	if oldStr == "" || newStr == "" {
+	// If both empty or identical, no diff needed
+	if oldStr == "" && newStr == "" {
+		return ""
+	}
+	if oldStr == newStr {
 		return ""
 	}
 
diff --git a/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize.go b/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize.go
index c3a1a82115..d713f71945 100644
--- a/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize.go
+++ b/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize.go
@@ -106,14 +106,13 @@ func (n *Normalizer) normalizeEdit(toolName string, args map[string]any) *stream
 		})
 	} else {
 		// Edit is a patch operation
+		// Only include the diff (not old/new content) to reduce payload size
 		mutation := streams.FileMutation{
-			Type:       streams.MutationPatch,
-			OldContent: oldString,
-			NewContent: newString,
+			Type: streams.MutationPatch,
 		}
 
-		// Generate unified diff
-		if oldString != "" && newString != "" {
+		// Generate unified diff when at least one string is provided
+		if oldString != "" || newString != "" {
 			mutation.Diff = shared.GenerateUnifiedDiff(oldString, newString, filePath, 0)
 		}
 
diff --git a/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize_test.go b/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize_test.go
index 6ca553e5f9..95450c7389 100644
--- a/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize_test.go
+++ b/apps/backend/internal/agentctl/server/adapter/transport/streamjson/normalize_test.go
@@ -122,17 +122,37 @@ func TestDetectLanguage(t *testing.T) {
 
 // TestGenerateUnifiedDiff tests the unified diff generation.
 func TestGenerateUnifiedDiff(t *testing.T) {
-	t.Run("returns empty when old is empty", func(t *testing.T) {
-		result := shared.GenerateUnifiedDiff("", "new content", "file.ts", 1)
+	t.Run("returns empty when both are empty", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("", "", "file.ts", 1)
 		if result != "" {
-			t.Errorf("expected empty string for empty old string, got %q", result)
+			t.Errorf("expected empty string when both old and new are empty, got %q", result)
 		}
 	})
 
-	t.Run("returns empty when new is empty", func(t *testing.T) {
-		result := shared.GenerateUnifiedDiff("old content", "", "file.ts", 1)
+	t.Run("returns empty when old equals new", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("same content", "same content", "file.ts", 1)
 		if result != "" {
-			t.Errorf("expected empty string for empty new string, got %q", result)
+			t.Errorf("expected empty string when old equals new, got %q", result)
+		}
+	})
+
+	t.Run("generates all-additions diff when old is empty", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("", "new content", "file.ts", 1)
+		if result == "" {
+			t.Fatal("expected non-empty diff for create operation")
+		}
+		if !strings.Contains(result, "+new content") {
+			t.Error("expected added line in diff")
+		}
+	})
+
+	t.Run("generates all-deletions diff when new is empty", func(t *testing.T) {
+		result := shared.GenerateUnifiedDiff("old content", "", "file.ts", 1)
+		if result == "" {
+			t.Fatal("expected non-empty diff for delete operation")
+		}
+		if !strings.Contains(result, "-old content") {
+			t.Error("expected removed line in diff")
 		}
 	})
 
@@ -196,11 +216,9 @@ func TestNormalizerEdit(t *testing.T) {
 			t.Fatalf("expected 1 mutation, got %d", len(result.ModifyFile().Mutations))
 		}
 		mutation := result.ModifyFile().Mutations[0]
-		if mutation.OldContent != "const x = 1;" {
-			t.Errorf("expected OldContent 'const x = 1;', got %q", mutation.OldContent)
-		}
-		if mutation.NewContent != "const x = 2;" {
-			t.Errorf("expected NewContent 'const x = 2;', got %q", mutation.NewContent)
+		// OldContent and NewContent are no longer set (only Diff is generated)
+		if mutation.Diff == "" {
+			t.Error("expected Diff to be generated")
 		}
 	})
 
@@ -219,7 +237,7 @@ func TestNormalizerEdit(t *testing.T) {
 		}
 	})
 
-	t.Run("no diff when old_string is empty", func(t *testing.T) {
+	t.Run("generates diff when old_string is empty", func(t *testing.T) {
 		args := map[string]any{
 			"file_path":  "/workspace/new.ts",
 			"old_string": "",
@@ -229,8 +247,8 @@ func TestNormalizerEdit(t *testing.T) {
 		if result.ModifyFile() == nil || len(result.ModifyFile().Mutations) == 0 {
 			t.Fatal("expected mutation")
 		}
-		if result.ModifyFile().Mutations[0].Diff != "" {
-			t.Error("expected no diff when old_string is empty")
+		if result.ModifyFile().Mutations[0].Diff == "" {
+			t.Error("expected diff to be generated when old_string is empty")
 		}
 	})
 
diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml
index 37c5c38c62..85d0707d40 100644
--- a/apps/pnpm-lock.yaml
+++ b/apps/pnpm-lock.yaml
@@ -100,7 +100,7 @@ importers:
         version: 9.39.2(jiti@2.6.1)
       eslint-config-next:
         specifier: 16.1.1
-        version: 16.1.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 16.1.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       tailwindcss:
         specifier: ^4.0.0
         version: 4.1.18
@@ -285,12 +285,6 @@ importers:
       '@dnd-kit/utilities':
         specifier: ^3.2.2
         version: 3.2.2(react@19.2.3)
-      '@git-diff-view/file':
-        specifier: ^0.0.36
-        version: 0.0.36
-      '@git-diff-view/react':
-        specifier: ^0.0.36
-        version: 0.0.36(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@kandev/theme':
         specifier: workspace:*
         version: link:../packages/theme
@@ -330,6 +324,9 @@ importers:
       '@milkdown/utils':
         specifier: ^7.18.0
         version: 7.18.0
+      '@pierre/diffs':
+        specifier: ^1.0.10
+        version: 1.0.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tabler/icons-react':
         specifier: ^3.36.1
         version: 3.36.1(react@19.2.3)
@@ -453,7 +450,7 @@ importers:
         version: 9.39.2(jiti@2.6.1)
       eslint-config-next:
         specifier: 16.1.1
-        version: 16.1.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 16.1.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       happy-dom:
         specifier: ^20.1.0
         version: 20.1.0
@@ -1136,21 +1133,6 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
-  '@git-diff-view/core@0.0.36':
-    resolution: {integrity: sha512-A3mN21C/ZdIJz0J9/PSZvLR1dLBu8BG13tVE+w4A9v8dLS5omkoQVjHM9K5GaoJideMhK/11y6V7CMbMXCPQoQ==}
-
-  '@git-diff-view/file@0.0.36':
-    resolution: {integrity: sha512-3I5GMpZzdTwSurzbz8ZT9HL2xo74W5/o/SgWhUpEWjn2Z6pCZrHLAEzWeYyqewv30YM25PuK/JMODT4S5zhvzw==}
-
-  '@git-diff-view/lowlight@0.0.36':
-    resolution: {integrity: sha512-8H3fUfnW+jw8EEbhEOr0vq5jXxZfbhNgvf9ruY6GljQdymj8j2R69k83gwMB/GltWEMt5o5624d8MxD21vqsZA==}
-
-  '@git-diff-view/react@0.0.36':
-    resolution: {integrity: sha512-RqM4vkU2uoiav8di5LavR8UDkSP+fNDftlNOfAMQmcuLDFpDnLhtqcgot4+Q5rflkwK04UlYL6G72ps9XSGgDw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   '@hono/node-server@1.19.8':
     resolution: {integrity: sha512-0/g2lIOPzX8f3vzW1ggQgvG5mjtFBDBHFAzI5SFAi2DzSqS9luJwqg9T6O/gKYLi+inS7eNxBeIFkkghIPvrMA==}
     engines: {node: '>=18.14.1'}
@@ -1632,6 +1614,12 @@ packages:
   '@open-draft/until@2.1.0':
     resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
 
+  '@pierre/diffs@1.0.10':
+    resolution: {integrity: sha512-ahkpfS30NfaB+PBxnf0/Mc20ySBRTQmM28a7Ojpd0UZixmTyhGhJfBFjvmhX8dSzR22lB3h3OIMMxpB4yYTIOQ==}
+    peerDependencies:
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+
   '@radix-ui/number@1.1.1':
     resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
 
@@ -2501,6 +2489,30 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
+  '@shikijs/core@3.22.0':
+    resolution: {integrity: sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA==}
+
+  '@shikijs/engine-javascript@3.22.0':
+    resolution: {integrity: sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw==}
+
+  '@shikijs/engine-oniguruma@3.22.0':
+    resolution: {integrity: sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==}
+
+  '@shikijs/langs@3.22.0':
+    resolution: {integrity: sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==}
+
+  '@shikijs/themes@3.22.0':
+    resolution: {integrity: sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==}
+
+  '@shikijs/transformers@3.22.0':
+    resolution: {integrity: sha512-E7eRV7mwDBjueLF6852n2oYeJYxBq3NSsDk+uyruYAXONv4U8holGmIrT+mPRJQ1J1SNOH6L8G19KRzmBawrFw==}
+
+  '@shikijs/types@3.22.0':
+    resolution: {integrity: sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
@@ -3016,9 +3028,6 @@ packages:
   '@vue/compiler-ssr@3.5.27':
     resolution: {integrity: sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==}
 
-  '@vue/reactivity@3.5.26':
-    resolution: {integrity: sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==}
-
   '@vue/reactivity@3.5.27':
     resolution: {integrity: sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==}
 
@@ -3033,9 +3042,6 @@ packages:
     peerDependencies:
       vue: 3.5.27
 
-  '@vue/shared@3.5.26':
-    resolution: {integrity: sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==}
-
   '@vue/shared@3.5.27':
     resolution: {integrity: sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==}
 
@@ -4017,9 +4023,6 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-diff@1.3.0:
-    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
-
   fast-equals@5.4.0:
     resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
     engines: {node: '>=6.0.0'}
@@ -4251,6 +4254,9 @@ packages:
   hast-util-to-estree@3.1.3:
     resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
   hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
@@ -4266,10 +4272,6 @@ packages:
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
-  highlight.js@11.11.1:
-    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
-    engines: {node: '>=12.0.0'}
-
   hono@4.11.3:
     resolution: {integrity: sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w==}
     engines: {node: '>=16.9.0'}
@@ -4277,6 +4279,9 @@ packages:
   html-url-attributes@3.0.1:
     resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -4761,12 +4766,12 @@ packages:
   loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
 
-  lowlight@3.3.0:
-    resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
-
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lru_map@0.4.1:
+    resolution: {integrity: sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==}
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -5161,6 +5166,12 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.4:
+    resolution: {integrity: sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==}
+
   open@11.0.0:
     resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
     engines: {node: '>=20'}
@@ -5489,11 +5500,6 @@ packages:
     resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
-  reactivity-store@0.3.12:
-    resolution: {integrity: sha512-Idz9EL4dFUtQbHySZQzckWOTUfqjdYpUtNW0iOysC32mG7IjiUGB77QrsyR5eAWBkRiS9JscF6A3fuQAIy+LrQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   recast@0.23.11:
     resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
     engines: {node: '>= 4'}
@@ -5526,6 +5532,15 @@ packages:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -5696,6 +5711,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shiki@3.22.0:
+    resolution: {integrity: sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g==}
+
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -7161,39 +7179,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
-  '@git-diff-view/core@0.0.36':
-    dependencies:
-      '@git-diff-view/lowlight': 0.0.36
-      fast-diff: 1.3.0
-      highlight.js: 11.11.1
-      lowlight: 3.3.0
-
-  '@git-diff-view/file@0.0.36':
-    dependencies:
-      '@git-diff-view/core': 0.0.36
-      diff: 8.0.3
-      fast-diff: 1.3.0
-      highlight.js: 11.11.1
-      lowlight: 3.3.0
-
-  '@git-diff-view/lowlight@0.0.36':
-    dependencies:
-      '@types/hast': 3.0.4
-      highlight.js: 11.11.1
-      lowlight: 3.3.0
-
-  '@git-diff-view/react@0.0.36(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@git-diff-view/core': 0.0.36
-      '@types/hast': 3.0.4
-      fast-diff: 1.3.0
-      highlight.js: 11.11.1
-      lowlight: 3.3.0
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      reactivity-store: 0.3.12(react@19.2.3)
-      use-sync-external-store: 1.6.0(react@19.2.3)
-
   '@hono/node-server@1.19.8(hono@4.11.3)':
     dependencies:
       hono: 4.11.3
@@ -7890,6 +7875,18 @@ snapshots:
 
   '@open-draft/until@2.1.0': {}
 
+  '@pierre/diffs@1.0.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@shikijs/core': 3.22.0
+      '@shikijs/engine-javascript': 3.22.0
+      '@shikijs/transformers': 3.22.0
+      diff: 8.0.3
+      hast-util-to-html: 9.0.5
+      lru_map: 0.4.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      shiki: 3.22.0
+
   '@radix-ui/number@1.1.1': {}
 
   '@radix-ui/primitive@1.1.3': {}
@@ -8750,6 +8747,44 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
+  '@shikijs/core@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.4
+
+  '@shikijs/engine-oniguruma@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+
+  '@shikijs/themes@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+
+  '@shikijs/transformers@3.22.0':
+    dependencies:
+      '@shikijs/core': 3.22.0
+      '@shikijs/types': 3.22.0
+
+  '@shikijs/types@3.22.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@sinclair/typebox@0.27.8': {}
 
   '@sindresorhus/merge-streams@4.0.0': {}
@@ -9299,10 +9334,6 @@ snapshots:
       '@vue/compiler-dom': 3.5.27
       '@vue/shared': 3.5.27
 
-  '@vue/reactivity@3.5.26':
-    dependencies:
-      '@vue/shared': 3.5.26
-
   '@vue/reactivity@3.5.27':
     dependencies:
       '@vue/shared': 3.5.27
@@ -9325,8 +9356,6 @@ snapshots:
       '@vue/shared': 3.5.27
       vue: 3.5.27(typescript@5.9.3)
 
-  '@vue/shared@3.5.26': {}
-
   '@vue/shared@3.5.27': {}
 
   '@xterm/addon-attach@0.12.0': {}
@@ -10617,8 +10646,6 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-diff@1.3.0: {}
-
   fast-equals@5.4.0: {}
 
   fast-glob@3.3.1:
@@ -10866,6 +10893,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
   hast-util-to-jsx-runtime@2.3.6:
     dependencies:
       '@types/estree': 1.0.8
@@ -10898,12 +10939,12 @@ snapshots:
     dependencies:
       hermes-estree: 0.25.1
 
-  highlight.js@11.11.1: {}
-
   hono@4.11.3: {}
 
   html-url-attributes@3.0.1: {}
 
+  html-void-elements@3.0.0: {}
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -11317,16 +11358,12 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
-  lowlight@3.3.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      devlop: 1.1.0
-      highlight.js: 11.11.1
-
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
 
+  lru_map@0.4.1: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -12036,6 +12073,14 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.4:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   open@11.0.0:
     dependencies:
       default-browser: 5.4.0
@@ -12466,13 +12511,6 @@ snapshots:
 
   react@19.2.3: {}
 
-  reactivity-store@0.3.12(react@19.2.3):
-    dependencies:
-      '@vue/reactivity': 3.5.26
-      '@vue/shared': 3.5.26
-      react: 19.2.3
-      use-sync-external-store: 1.6.0(react@19.2.3)
-
   recast@0.23.11:
     dependencies:
       ast-types: 0.16.1
@@ -12538,6 +12576,16 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -12880,6 +12928,17 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shiki@3.22.0:
+    dependencies:
+      '@shikijs/core': 3.22.0
+      '@shikijs/engine-javascript': 3.22.0
+      '@shikijs/engine-oniguruma': 3.22.0
+      '@shikijs/langs': 3.22.0
+      '@shikijs/themes': 3.22.0
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
diff --git a/apps/web/app/demo/git-diff-view/demo-client.tsx b/apps/web/app/demo/git-diff-view/demo-client.tsx
deleted file mode 100644
index c2659324ac..0000000000
--- a/apps/web/app/demo/git-diff-view/demo-client.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { ThemeProvider } from 'next-themes';
-import { TooltipProvider } from '@kandev/ui/tooltip';
-import { Button } from '@kandev/ui/button';
-import { GitDiffViewer } from '@/components/git-diff-view';
-
-// Sample diffs for demo
-const BUTTON_DIFF_OLD = `import React from 'react';
-
-interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-}
-
-export function Button({ children, onClick, disabled }: ButtonProps) {
-  return (
-    <button onClick={onClick} disabled={disabled}>
-      {children}
-    </button>
-  );
-}`;
-
-const BUTTON_DIFF_NEW = `import React from 'react';
-import { cn } from '../lib/utils';
-
-interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: (event: React.MouseEvent) => void;
-  variant?: 'primary' | 'secondary';
-  disabled?: boolean;
-}
-
-export function Button({
-  children,
-  onClick,
-  variant = 'primary',
-  disabled
-}: ButtonProps) {
-  return (
-    <button className={cn('btn', \`btn-\${variant}\`)} onClick={onClick} disabled={disabled}>
-      {children}
-    </button>
-  );
-}`;
-
-const FORMAT_DIFF_OLD = '';
-const FORMAT_DIFF_NEW = `export function formatDate(date: Date): string {
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
-}
-
-export function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(amount);
-}`;
-
-type DiffExample = 'button' | 'newfile';
-
-const DIFFS: Record<
-  DiffExample,
-  { label: string; oldContent: string; newContent: string; path: string; description: string }
-> = {
-  button: {
-    label: 'Button Component',
-    oldContent: BUTTON_DIFF_OLD,
-    newContent: BUTTON_DIFF_NEW,
-    path: 'src/Button.tsx',
-    description: 'Standard diff with additions and deletions',
-  },
-  newfile: {
-    label: 'New File',
-    oldContent: FORMAT_DIFF_OLD,
-    newContent: FORMAT_DIFF_NEW,
-    path: 'src/utils/format.ts',
-    description: 'Shows a newly created file (all additions)',
-  },
-};
-
-function GitDiffViewDemoContent() {
-  const [selectedDiff, setSelectedDiff] = useState<DiffExample>('button');
-  const currentDiff = DIFFS[selectedDiff];
-
-  return (
-    <div className="min-h-screen bg-background p-6">
-      <div className="max-w-6xl mx-auto space-y-6">
-        {/* Header */}
-        <div className="space-y-2">
-          <h1 className="text-2xl font-bold">GitDiffViewer Demo</h1>
-          <p className="text-muted-foreground">
-            Diff viewer with inline comments and multi-line selection.
-          </p>
-        </div>
-
-        {/* Diff selector */}
-        <div className="flex flex-wrap gap-2">
-          {Object.entries(DIFFS).map(([key, { label }]) => (
-            <Button
-              key={key}
-              variant={selectedDiff === key ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setSelectedDiff(key as DiffExample)}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-
-        {/* Description */}
-        <div className="text-sm text-muted-foreground bg-muted/50 px-3 py-2 rounded">
-          {currentDiff.description}
-        </div>
-
-        {/* Instructions */}
-        <div className="text-xs text-muted-foreground bg-primary/5 border border-primary/20 px-3 py-2 rounded space-y-1">
-          <p>
-            <strong>Single line:</strong> Click the{' '}
-            <span className="font-mono bg-muted px-1 rounded">+</span> button on any line to add a
-            comment.
-          </p>
-          <p>
-            <strong>Multi-line:</strong> Click and drag from one line to another to select a range,
-            then add your comment.
-          </p>
-        </div>
-
-        {/* Diff viewer */}
-        <GitDiffViewer
-          oldContent={currentDiff.oldContent}
-          newContent={currentDiff.newContent}
-          filePath={currentDiff.path}
-          language="tsx"
-          defaultViewMode="split"
-          enableComments
-        />
-
-        {/* Features list */}
-        <div className="p-4 bg-muted rounded-lg space-y-3 text-sm">
-          <h3 className="font-medium">Features:</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <h4 className="font-medium text-muted-foreground mb-1">Built-in Features</h4>
-              <ul className="list-disc list-inside space-y-0.5 text-muted-foreground">
-                <li>Syntax highlighting</li>
-                <li>Split and unified view modes</li>
-                <li>Light and dark theme support</li>
-                <li>Add widget (+) buttons on hover</li>
-              </ul>
-            </div>
-            <div>
-              <h4 className="font-medium text-muted-foreground mb-1">Comments</h4>
-              <ul className="list-disc list-inside space-y-0.5 text-muted-foreground">
-                <li>Click + to open inline comment widget</li>
-                <li>Click and drag to select multiple lines</li>
-                <li>Visual overlay shows selected range</li>
-                <li>Comments persisted to localStorage</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function GitDiffViewDemo() {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <TooltipProvider>
-        <GitDiffViewDemoContent />
-      </TooltipProvider>
-    </ThemeProvider>
-  );
-}
diff --git a/apps/web/app/demo/git-diff-view/page.tsx b/apps/web/app/demo/git-diff-view/page.tsx
deleted file mode 100644
index 08be150161..0000000000
--- a/apps/web/app/demo/git-diff-view/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { GitDiffViewDemo } from './demo-client';
-
-export const metadata = {
-  title: 'GitDiffViewer Demo',
-};
-
-export default function GitDiffViewDemoPage() {
-  return <GitDiffViewDemo />;
-}
diff --git a/apps/web/components/diff/comment-display.tsx b/apps/web/components/diff/comment-display.tsx
new file mode 100644
index 0000000000..fb541ee00d
--- /dev/null
+++ b/apps/web/components/diff/comment-display.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { Button } from '@kandev/ui/button';
+import { IconTrash, IconEdit, IconMessage } from '@tabler/icons-react';
+import type { DiffComment } from '@/lib/diff/types';
+import { formatLineRange } from '@/lib/diff';
+
+interface CommentDisplayProps {
+  /** The comment to display */
+  comment: DiffComment;
+  /** Callback to delete the comment */
+  onDelete?: () => void;
+  /** Callback to edit the comment */
+  onEdit?: () => void;
+  /** Whether to show the code content */
+  showCode?: boolean;
+  /** Compact mode for inline display */
+  compact?: boolean;
+}
+
+export function CommentDisplay({
+  comment,
+  onDelete,
+  onEdit,
+  showCode = false,
+  compact = false,
+}: CommentDisplayProps) {
+  const lineRange = formatLineRange(comment.startLine, comment.endLine);
+
+  if (compact) {
+    return (
+      <div className="group flex items-start gap-2 rounded border border-border bg-muted/50 px-2 py-1.5 text-xs">
+        <IconMessage className="mt-0.5 h-3 w-3 shrink-0 text-muted-foreground" />
+        <div className="min-w-0 flex-1">
+          <span className="text-muted-foreground">{lineRange}</span>
+          <span className="mx-1 text-muted-foreground">·</span>
+          <span className="break-words">{comment.annotation}</span>
+        </div>
+        {onDelete && (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onDelete}
+            className="h-4 w-4 shrink-0 cursor-pointer p-0 opacity-0 hover:text-destructive group-hover:opacity-100"
+          >
+            <IconTrash className="h-3 w-3" />
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="group rounded-md border border-border bg-card p-2 shadow-sm">
+      {/* Header */}
+      <div className="mb-1.5 flex items-center justify-between">
+        <div className="flex items-center gap-1.5 text-xs">
+          <IconMessage className="h-3.5 w-3.5 text-blue-500" />
+          <span className="font-medium">
+            {lineRange}
+          </span>
+          <span className="text-muted-foreground">
+            ({comment.side === 'additions' ? 'new' : 'old'})
+          </span>
+        </div>
+        <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+          {onEdit && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onEdit}
+              className="h-5 w-5 cursor-pointer p-0"
+            >
+              <IconEdit className="h-3 w-3" />
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onDelete}
+              className="h-5 w-5 cursor-pointer p-0 hover:text-destructive"
+            >
+              <IconTrash className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Code preview */}
+      {showCode && comment.codeContent && (
+        <pre className="mb-2 overflow-x-auto rounded bg-muted p-1.5 text-[10px] leading-tight">
+          <code>{comment.codeContent}</code>
+        </pre>
+      )}
+
+      {/* Comment text */}
+      <p className="whitespace-pre-wrap text-xs leading-relaxed text-foreground">
+        {comment.annotation}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/components/diff/comment-form.tsx b/apps/web/components/diff/comment-form.tsx
new file mode 100644
index 0000000000..67978c4d18
--- /dev/null
+++ b/apps/web/components/diff/comment-form.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '@kandev/ui/button';
+import { Textarea } from '@kandev/ui/textarea';
+import { IconSend, IconX } from '@tabler/icons-react';
+
+interface CommentFormProps {
+  /** Initial content for editing */
+  initialContent?: string;
+  /** Callback when comment is submitted */
+  onSubmit: (content: string) => void;
+  /** Callback when form is cancelled */
+  onCancel: () => void;
+  /** Whether the form is in editing mode */
+  isEditing?: boolean;
+  /** Auto focus the textarea */
+  autoFocus?: boolean;
+}
+
+export function CommentForm({
+  initialContent = '',
+  onSubmit,
+  onCancel,
+  isEditing = false,
+  autoFocus = true,
+}: CommentFormProps) {
+  const [content, setContent] = useState(initialContent);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (autoFocus && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  const handleSubmit = () => {
+    const trimmed = content.trim();
+    if (trimmed) {
+      onSubmit(trimmed);
+      setContent('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 rounded-md border border-border bg-card p-2 shadow-md">
+      <Textarea
+        ref={textareaRef}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Add a comment..."
+        className="min-h-[60px] resize-none text-xs"
+        rows={2}
+      />
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[10px] text-muted-foreground">
+          {typeof navigator !== 'undefined' && navigator.platform?.includes('Mac') ? '⌘' : 'Ctrl'}+Enter to submit
+        </span>
+        <div className="flex gap-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onCancel}
+            className="h-6 cursor-pointer px-2 text-xs"
+          >
+            <IconX className="mr-1 h-3 w-3" />
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleSubmit}
+            disabled={!content.trim()}
+            className="h-6 cursor-pointer px-2 text-xs"
+          >
+            <IconSend className="mr-1 h-3 w-3" />
+            {isEditing ? 'Update' : 'Add'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/diff/diff-view-inline.tsx b/apps/web/components/diff/diff-view-inline.tsx
new file mode 100644
index 0000000000..4e9414708b
--- /dev/null
+++ b/apps/web/components/diff/diff-view-inline.tsx
@@ -0,0 +1,4 @@
+'use client';
+
+// Re-export from the unified diff-viewer component
+export { DiffViewInline } from './diff-viewer';
diff --git a/apps/web/components/diff/diff-viewer.tsx b/apps/web/components/diff/diff-viewer.tsx
new file mode 100644
index 0000000000..6ff82c4d9f
--- /dev/null
+++ b/apps/web/components/diff/diff-viewer.tsx
@@ -0,0 +1,507 @@
+'use client';
+
+import { useState, useCallback, useMemo, memo, useSyncExternalStore, type ReactNode } from 'react';
+import { useTheme } from 'next-themes';
+import { FileDiff } from '@pierre/diffs/react';
+import { parsePatchFiles, parseDiffFromFile } from '@pierre/diffs';
+import type { FileDiffOptions, FileDiffMetadata, DiffLineAnnotation, RenderHeaderMetadataProps, AnnotationSide, SelectedLineRange } from '@pierre/diffs';
+import { cn } from '@kandev/ui/lib/utils';
+import { Button } from '@kandev/ui/button';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@kandev/ui/tooltip';
+import { IconCopy, IconTextWrap, IconLayoutRows, IconLayoutColumns, IconExternalLink, IconPlus, IconArrowBackUp } from '@tabler/icons-react';
+import type { FileDiffData, DiffComment } from '@/lib/diff/types';
+import { useDiffComments } from './use-diff-comments';
+import { CommentForm } from './comment-form';
+import { CommentDisplay } from './comment-display';
+
+// Local storage key for global diff view mode
+const DIFF_VIEW_MODE_KEY = 'diff-view-mode';
+const DEFAULT_VIEW_MODE = 'unified' as const;
+
+// Custom event for syncing view mode across components
+const VIEW_MODE_CHANGE_EVENT = 'diff-view-mode-change';
+
+type ViewMode = 'split' | 'unified';
+
+// Helper to get view mode from localStorage
+function getStoredViewMode(): ViewMode {
+  if (typeof window === 'undefined') return DEFAULT_VIEW_MODE;
+  const stored = localStorage.getItem(DIFF_VIEW_MODE_KEY);
+  return stored === 'split' || stored === 'unified' ? stored : DEFAULT_VIEW_MODE;
+}
+
+// Helper to set view mode in localStorage and dispatch event
+function setStoredViewMode(mode: ViewMode): void {
+  localStorage.setItem(DIFF_VIEW_MODE_KEY, mode);
+  window.dispatchEvent(new CustomEvent(VIEW_MODE_CHANGE_EVENT, { detail: mode }));
+}
+
+// Hook to subscribe to global view mode changes
+function useGlobalViewMode(): [ViewMode, (mode: ViewMode) => void] {
+  const subscribe = useCallback((callback: () => void) => {
+    window.addEventListener(VIEW_MODE_CHANGE_EVENT, callback);
+    window.addEventListener('storage', callback);
+    return () => {
+      window.removeEventListener(VIEW_MODE_CHANGE_EVENT, callback);
+      window.removeEventListener('storage', callback);
+    };
+  }, []);
+
+  const getSnapshot = useCallback(() => getStoredViewMode(), []);
+  const getServerSnapshot = useCallback(() => DEFAULT_VIEW_MODE, []);
+
+  const viewMode = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  return [viewMode, setStoredViewMode];
+}
+
+interface DiffViewerProps {
+  /** Diff data to display */
+  data: FileDiffData;
+  /** Enable line selection for comments */
+  enableComments?: boolean;
+  /** Session ID for comment storage */
+  sessionId?: string;
+  /** Callback when comment is added */
+  onCommentAdd?: (comment: DiffComment) => void;
+  /** Callback when comment is deleted */
+  onCommentDelete?: (commentId: string) => void;
+  /** External comments (controlled mode) */
+  comments?: DiffComment[];
+  /** Additional class name */
+  className?: string;
+  /** Whether to show in compact mode (smaller text, no header) */
+  compact?: boolean;
+  /** Whether to hide the file header and toolbar */
+  hideHeader?: boolean;
+  /** Callback to open file in editor */
+  onOpenFile?: (filePath: string) => void;
+}
+
+type AnnotationMetadata = {
+  type: 'comment' | 'new-comment-form';
+  comment?: DiffComment;
+  isEditing?: boolean;
+};
+
+// Custom comparison for memo - only re-render if actual content changes
+function arePropsEqual(prevProps: DiffViewerProps, nextProps: DiffViewerProps): boolean {
+  // Compare data by content, not reference
+  if (prevProps.data.filePath !== nextProps.data.filePath) return false;
+  if (prevProps.data.diff !== nextProps.data.diff) return false;
+  if (prevProps.data.oldContent !== nextProps.data.oldContent) return false;
+  if (prevProps.data.newContent !== nextProps.data.newContent) return false;
+
+  // Compare other props
+  if (prevProps.enableComments !== nextProps.enableComments) return false;
+  if (prevProps.sessionId !== nextProps.sessionId) return false;
+  if (prevProps.compact !== nextProps.compact) return false;
+  if (prevProps.hideHeader !== nextProps.hideHeader) return false;
+  if (prevProps.className !== nextProps.className) return false;
+  if (prevProps.onOpenFile !== nextProps.onOpenFile) return false;
+
+  // Comments array - compare by length and IDs
+  const prevComments = prevProps.comments;
+  const nextComments = nextProps.comments;
+  if (prevComments !== nextComments) {
+    if (!prevComments || !nextComments) return false;
+    if (prevComments.length !== nextComments.length) return false;
+    for (let i = 0; i < prevComments.length; i++) {
+      if (prevComments[i].id !== nextComments[i].id) return false;
+      if (prevComments[i].annotation !== nextComments[i].annotation) return false;
+    }
+  }
+
+  return true;
+}
+
+export const DiffViewer = memo(function DiffViewer({
+  data,
+  enableComments = false,
+  sessionId,
+  onCommentAdd,
+  onCommentDelete,
+  comments: externalComments,
+  className,
+  compact = false,
+  hideHeader = false,
+  onOpenFile,
+}: DiffViewerProps) {
+  const { resolvedTheme } = useTheme();
+  const [selectedLines, setSelectedLines] = useState<SelectedLineRange | null>(null);
+  const [showCommentForm, setShowCommentForm] = useState(false);
+
+  // Global view mode (synced via localStorage)
+  const [globalViewMode, setGlobalViewMode] = useGlobalViewMode();
+
+  // Local state for word wrap (per-diff)
+  const [wordWrap, setWordWrap] = useState(false);
+
+  // Use internal comment management if sessionId provided
+  const {
+    comments: internalComments,
+    addComment,
+    removeComment,
+    updateComment,
+    editingCommentId,
+    setEditingComment,
+  } = useDiffComments({
+    sessionId: sessionId || '',
+    filePath: data.filePath,
+    diff: data.diff,
+    newContent: data.newContent,
+    oldContent: data.oldContent,
+  });
+
+  const comments = externalComments || internalComments;
+
+  // Create annotations from comments + new comment form
+  const annotations = useMemo<DiffLineAnnotation<AnnotationMetadata>[]>(() => {
+    const result: DiffLineAnnotation<AnnotationMetadata>[] = comments.map((comment) => ({
+      side: comment.side,
+      lineNumber: comment.endLine,
+      metadata: {
+        type: 'comment' as const,
+        comment,
+        isEditing: editingCommentId === comment.id,
+      },
+    }));
+
+    // Add new comment form annotation at the selected line
+    if (showCommentForm && selectedLines) {
+      result.push({
+        side: (selectedLines.side || 'additions') as AnnotationSide,
+        lineNumber: Math.max(selectedLines.start, selectedLines.end),
+        metadata: {
+          type: 'new-comment-form' as const,
+        },
+      });
+    }
+
+    return result;
+  }, [comments, editingCommentId, showCommentForm, selectedLines]);
+
+  // Stable handler for line selection - only fires when selection is complete
+  const handleLineSelectionEnd = useCallback(
+    (range: SelectedLineRange | null) => {
+      setSelectedLines(range);
+      if (range && enableComments) {
+        setShowCommentForm(true);
+      }
+    },
+    [enableComments]
+  );
+
+  // Handler for comment submission
+  const handleCommentSubmit = useCallback(
+    (content: string) => {
+      if (!selectedLines) return;
+
+      if (onCommentAdd && externalComments !== undefined) {
+        const comment: DiffComment = {
+          id: `${data.filePath}-${Date.now()}`,
+          sessionId: sessionId || '',
+          filePath: data.filePath,
+          startLine: Math.min(selectedLines.start, selectedLines.end),
+          endLine: Math.max(selectedLines.start, selectedLines.end),
+          side: (selectedLines.side || 'additions') as DiffComment['side'],
+          codeContent: '',
+          annotation: content,
+          createdAt: new Date().toISOString(),
+          status: 'pending',
+        };
+        onCommentAdd(comment);
+      } else if (sessionId) {
+        addComment(selectedLines, content);
+      }
+
+      setShowCommentForm(false);
+      setSelectedLines(null);
+    },
+    [selectedLines, sessionId, data.filePath, addComment, onCommentAdd, externalComments]
+  );
+
+  // Handler for comment deletion
+  const handleCommentDelete = useCallback(
+    (commentId: string) => {
+      if (onCommentDelete && externalComments !== undefined) {
+        onCommentDelete(commentId);
+      } else {
+        removeComment(commentId);
+      }
+    },
+    [removeComment, onCommentDelete, externalComments]
+  );
+
+  // Handle comment update
+  const handleCommentUpdate = useCallback(
+    (commentId: string, content: string) => {
+      updateComment(commentId, { annotation: content });
+      setEditingComment(null);
+    },
+    [updateComment, setEditingComment]
+  );
+
+  // Render annotation callback
+  const renderAnnotation = useCallback(
+    (annotation: DiffLineAnnotation<AnnotationMetadata>): ReactNode => {
+      const { type, comment, isEditing } = annotation.metadata;
+
+      if (type === 'new-comment-form') {
+        return (
+          <div className="my-1 px-2">
+            <CommentForm
+              onSubmit={handleCommentSubmit}
+              onCancel={() => {
+                setShowCommentForm(false);
+                setSelectedLines(null);
+              }}
+            />
+          </div>
+        );
+      }
+
+      if (isEditing && comment) {
+        return (
+          <div className="my-1 px-2">
+            <CommentForm
+              initialContent={comment.annotation}
+              onSubmit={(content) => handleCommentUpdate(comment.id, content)}
+              onCancel={() => setEditingComment(null)}
+              isEditing
+            />
+          </div>
+        );
+      }
+
+      if (comment) {
+        return (
+          <div className="my-1 px-2">
+            <CommentDisplay
+              comment={comment}
+              onDelete={() => handleCommentDelete(comment.id)}
+              onEdit={() => setEditingComment(comment.id)}
+              showCode={false}
+            />
+          </div>
+        );
+      }
+
+      return null;
+    },
+    [setEditingComment, handleCommentDelete, handleCommentUpdate, handleCommentSubmit]
+  );
+
+  // Render header metadata toolbar for each diff file
+  const renderHeaderMetadata = useCallback(
+    (props: RenderHeaderMetadataProps): ReactNode => {
+      const filePath = props.fileDiff?.name || data.filePath;
+
+      return (
+        <div className="flex items-center gap-1">
+          {/* Copy diff button */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 cursor-pointer opacity-60 hover:opacity-100"
+                onClick={() => navigator.clipboard.writeText(data.diff || '')}
+              >
+                <IconCopy className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Copy diff</TooltipContent>
+          </Tooltip>
+
+          {/* Revert button (non-functional placeholder) */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 cursor-pointer opacity-60 hover:opacity-100"
+                onClick={() => {
+                  // TODO: Implement revert functionality
+                }}
+              >
+                <IconArrowBackUp className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Revert changes</TooltipContent>
+          </Tooltip>
+
+          {/* Word wrap toggle */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  'h-6 w-6 p-0 cursor-pointer opacity-60 hover:opacity-100',
+                  wordWrap && 'opacity-100 bg-muted'
+                )}
+                onClick={() => setWordWrap(!wordWrap)}
+              >
+                <IconTextWrap className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Toggle word wrap</TooltipContent>
+          </Tooltip>
+
+          {/* Split/Unified toggle (global) */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 cursor-pointer opacity-60 hover:opacity-100"
+                onClick={() => setGlobalViewMode(globalViewMode === 'split' ? 'unified' : 'split')}
+              >
+                {globalViewMode === 'split' ? (
+                  <IconLayoutRows className="h-3.5 w-3.5" />
+                ) : (
+                  <IconLayoutColumns className="h-3.5 w-3.5" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {globalViewMode === 'split' ? 'Switch to unified view' : 'Switch to split view'}
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Open in editor button */}
+          {onOpenFile && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 cursor-pointer opacity-60 hover:opacity-100"
+                  onClick={() => onOpenFile(filePath)}
+                >
+                  <IconExternalLink className="h-3.5 w-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Open in editor</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      );
+    },
+    [data.filePath, data.diff, wordWrap, globalViewMode, setGlobalViewMode, onOpenFile]
+  );
+
+  // Render hover utility (+) icon for adding comments
+  const renderHoverUtility = useCallback(
+    (): ReactNode => {
+      // Only show when comments are enabled
+      if (!enableComments) return null;
+
+      return (
+        <div
+          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground"
+          title="Add comment"
+        >
+          <IconPlus className="h-3 w-3" />
+        </div>
+      );
+    },
+    [enableComments]
+  );
+
+  // Determine if header/toolbar should be shown
+  const showHeader = !hideHeader && !compact;
+
+  // Stable options - only include values that truly need to change the diff render
+  const options = useMemo<FileDiffOptions<AnnotationMetadata>>(
+    () => ({
+      diffStyle: globalViewMode,
+      themeType: resolvedTheme === 'dark' ? 'dark' : 'light',
+      theme: {
+        dark: 'github-dark-high-contrast',
+        light: 'github-light',
+      },
+      enableLineSelection: enableComments,
+      enableHoverUtility: enableComments,
+      diffIndicators: 'none',
+      onLineSelectionEnd: handleLineSelectionEnd,
+      disableFileHeader: !showHeader,
+      lineDiffType: 'word',
+      overflow: wordWrap ? 'wrap' : 'scroll',
+    }),
+    [globalViewMode, resolvedTheme, enableComments, showHeader, handleLineSelectionEnd, wordWrap]
+  );
+
+  // Compute FileDiffMetadata from either diff string or content
+  const fileDiffMetadata = useMemo<FileDiffMetadata | null>(() => {
+    if (data.diff) {
+      // Has diff string - parse it
+      const parsed = parsePatchFiles(data.diff);
+      return parsed[0]?.files[0] ?? null;
+    } else if (data.oldContent || data.newContent) {
+      // Has content - generate diff using library
+      return parseDiffFromFile(
+        { name: data.filePath, contents: data.oldContent },
+        { name: data.filePath, contents: data.newContent }
+      );
+    }
+    return null;
+  }, [data.diff, data.oldContent, data.newContent, data.filePath]);
+
+  // Only pass selectedLines when we have a completed selection (form shown)
+  // During drag, let FileDiff manage its own internal state
+  const controlledSelection = showCommentForm ? selectedLines : null;
+
+  if (!fileDiffMetadata) {
+    return (
+      <div className={cn(
+        'rounded-md border border-border/50 bg-muted/20 p-4 text-muted-foreground',
+        compact ? 'text-xs' : 'text-sm',
+        className
+      )}>
+        No diff available
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('diff-viewer relative', className)}>
+      <FileDiff
+        fileDiff={fileDiffMetadata}
+        options={options}
+        selectedLines={controlledSelection}
+        lineAnnotations={annotations}
+        renderAnnotation={renderAnnotation}
+        renderHeaderMetadata={showHeader ? renderHeaderMetadata : undefined}
+        renderHoverUtility={renderHoverUtility}
+        className={cn(
+          'rounded-md border border-border/50',
+          compact && 'text-xs'
+        )}
+      />
+    </div>
+  );
+}, arePropsEqual);
+
+/**
+ * Compact inline diff viewer for chat messages.
+ * This is a convenience wrapper around DiffViewer with compact defaults.
+ * @deprecated Use DiffViewer with compact={true} instead
+ */
+export function DiffViewInline({
+  data,
+  className,
+}: {
+  data: FileDiffData;
+  className?: string;
+}) {
+  return (
+    <DiffViewer
+      data={data}
+      compact
+      hideHeader
+      className={className}
+    />
+  );
+}
diff --git a/apps/web/components/diff/file-diff-viewer.tsx b/apps/web/components/diff/file-diff-viewer.tsx
new file mode 100644
index 0000000000..193da2032c
--- /dev/null
+++ b/apps/web/components/diff/file-diff-viewer.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { memo, useMemo } from 'react';
+import { DiffViewer } from './diff-viewer';
+import { transformGitDiff } from '@/lib/diff';
+import type { DiffComment } from '@/lib/diff/types';
+
+interface FileDiffViewerProps {
+  /** File path */
+  filePath: string;
+  /** Raw diff content */
+  diff: string;
+  /** File status (M, A, D, etc.) */
+  status?: string;
+  /** Enable line selection for comments */
+  enableComments?: boolean;
+  /** Session ID for comment storage */
+  sessionId?: string;
+  /** Callback when comment is added */
+  onCommentAdd?: (comment: DiffComment) => void;
+  /** Callback when comment is deleted */
+  onCommentDelete?: (commentId: string) => void;
+  /** External comments (controlled mode) */
+  comments?: DiffComment[];
+  /** Additional class name */
+  className?: string;
+  /** Whether to show in compact mode */
+  compact?: boolean;
+  /** Whether to hide the file header */
+  hideHeader?: boolean;
+  /** Callback to open file in editor */
+  onOpenFile?: (filePath: string) => void;
+}
+
+/**
+ * Wrapper around DiffViewer that handles data transformation with memoization.
+ *
+ * Use this component when you have raw diff data (filePath, diff, status).
+ * The transformation to FileDiffData is memoized internally, preventing
+ * unnecessary re-renders when parent components update.
+ *
+ * This is the recommended component to use for rendering git diffs.
+ */
+export const FileDiffViewer = memo(function FileDiffViewer({
+  filePath,
+  diff,
+  status = 'M',
+  enableComments,
+  sessionId,
+  onCommentAdd,
+  onCommentDelete,
+  comments,
+  className,
+  compact,
+  hideHeader,
+  onOpenFile,
+}: FileDiffViewerProps) {
+  // Memoize the transformation - only recalculates when raw data changes
+  const data = useMemo(
+    () => transformGitDiff(filePath, diff, status),
+    [filePath, diff, status]
+  );
+
+  return (
+    <DiffViewer
+      data={data}
+      enableComments={enableComments}
+      sessionId={sessionId}
+      onCommentAdd={onCommentAdd}
+      onCommentDelete={onCommentDelete}
+      comments={comments}
+      className={className}
+      compact={compact}
+      hideHeader={hideHeader}
+      onOpenFile={onOpenFile}
+    />
+  );
+});
diff --git a/apps/web/components/diff/index.ts b/apps/web/components/diff/index.ts
new file mode 100644
index 0000000000..a0f46f911d
--- /dev/null
+++ b/apps/web/components/diff/index.ts
@@ -0,0 +1,9 @@
+// Main components
+export { DiffViewer } from './diff-viewer';
+export { FileDiffViewer } from './file-diff-viewer';
+export { DiffViewInline } from './diff-view-inline';
+export { CommentForm } from './comment-form';
+export { CommentDisplay } from './comment-display';
+
+// Hooks
+export { useDiffComments } from './use-diff-comments';
diff --git a/apps/web/components/diff/use-diff-comments.ts b/apps/web/components/diff/use-diff-comments.ts
new file mode 100644
index 0000000000..6d93678bc8
--- /dev/null
+++ b/apps/web/components/diff/use-diff-comments.ts
@@ -0,0 +1,141 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { toast } from 'sonner';
+import type { SelectedLineRange } from '@pierre/diffs';
+import {
+  useDiffCommentsStore,
+  useFileComments,
+} from '@/lib/state/slices/diff-comments';
+import {
+  commentsToAnnotations,
+  extractCodeFromDiff,
+  extractCodeFromContent,
+} from '@/lib/diff';
+import type { DiffComment, AnnotationSide, CommentAnnotation } from '@/lib/diff/types';
+
+interface UseDiffCommentsOptions {
+  sessionId: string;
+  filePath: string;
+  /** Diff string for extracting code from line selection */
+  diff?: string;
+  /** New content for extracting code from line selection */
+  newContent?: string;
+  /** Old content for extracting code from line selection */
+  oldContent?: string;
+}
+
+interface UseDiffCommentsReturn {
+  /** Comments for this file */
+  comments: DiffComment[];
+  /** Annotations formatted for @pierre/diffs */
+  annotations: CommentAnnotation[];
+  /** Add a new comment */
+  addComment: (
+    range: SelectedLineRange,
+    annotation: string
+  ) => void;
+  /** Remove a comment */
+  removeComment: (commentId: string) => void;
+  /** Update a comment */
+  updateComment: (commentId: string, updates: Partial<DiffComment>) => void;
+  /** Currently editing comment ID */
+  editingCommentId: string | null;
+  /** Set the editing comment ID */
+  setEditingComment: (commentId: string | null) => void;
+}
+
+/**
+ * Hook to manage comments for a specific file's diff
+ */
+export function useDiffComments({
+  sessionId,
+  filePath,
+  diff,
+  newContent,
+  oldContent,
+}: UseDiffCommentsOptions): UseDiffCommentsReturn {
+  const comments = useFileComments(sessionId, filePath);
+  const editingCommentId = useDiffCommentsStore(
+    (state) => state.editingCommentId
+  );
+  const storeAddComment = useDiffCommentsStore((state) => state.addComment);
+  const storeRemoveComment = useDiffCommentsStore((state) => state.removeComment);
+  const storeUpdateComment = useDiffCommentsStore((state) => state.updateComment);
+  const storeSetEditingComment = useDiffCommentsStore((state) => state.setEditingComment);
+
+  const annotations = useMemo(
+    () => commentsToAnnotations(comments),
+    [comments]
+  );
+
+  const addComment = useCallback(
+    (range: SelectedLineRange, annotation: string) => {
+      const side = (range.side || 'additions') as AnnotationSide;
+      const startLine = Math.min(range.start, range.end);
+      const endLine = Math.max(range.start, range.end);
+
+      // Extract the code content from the selected lines
+      let codeContent = '';
+      if (diff) {
+        codeContent = extractCodeFromDiff(diff, startLine, endLine, side);
+      } else {
+        const content = side === 'additions' ? newContent : oldContent;
+        if (content) {
+          codeContent = extractCodeFromContent(content, startLine, endLine);
+        }
+      }
+
+      const comment: DiffComment = {
+        id: `${filePath}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        sessionId,
+        filePath,
+        startLine,
+        endLine,
+        side,
+        codeContent,
+        annotation,
+        createdAt: new Date().toISOString(),
+        status: 'pending',
+      };
+
+      storeAddComment(comment);
+      toast.success('Comment added', {
+        description: 'Your comment will be sent with your next message.',
+        duration: 2000,
+      });
+    },
+    [sessionId, filePath, diff, newContent, oldContent, storeAddComment]
+  );
+
+  const removeComment = useCallback(
+    (commentId: string) => {
+      storeRemoveComment(sessionId, filePath, commentId);
+    },
+    [sessionId, filePath, storeRemoveComment]
+  );
+
+  const updateComment = useCallback(
+    (commentId: string, updates: Partial<DiffComment>) => {
+      storeUpdateComment(commentId, updates);
+    },
+    [storeUpdateComment]
+  );
+
+  const setEditingComment = useCallback(
+    (commentId: string | null) => {
+      storeSetEditingComment(commentId);
+    },
+    [storeSetEditingComment]
+  );
+
+  return {
+    comments,
+    annotations,
+    addComment,
+    removeComment,
+    updateComment,
+    editingCommentId,
+    setEditingComment,
+  };
+}
diff --git a/apps/web/components/git-diff-view/comment-indicator.tsx b/apps/web/components/git-diff-view/comment-indicator.tsx
deleted file mode 100644
index c551abbdd7..0000000000
--- a/apps/web/components/git-diff-view/comment-indicator.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { SplitSide } from '@git-diff-view/react';
-import { findRowsInRangeWithLineNumbers, groupByConsecutiveRowIndices } from './dom-utils';
-import type { DiffComment } from './types';
-
-interface CommentRangeIndicatorProps {
-  comment: DiffComment;
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-  viewMode: 'split' | 'unified';
-}
-
-interface IndicatorRect {
-  top: number;
-  height: number;
-  left: number | string;
-  width: string;
-}
-
-export function CommentRangeIndicator({
-  comment,
-  wrapperRef,
-  viewMode,
-}: CommentRangeIndicatorProps) {
-  const [indicators, setIndicators] = useState<IndicatorRect[]>([]);
-
-  useEffect(() => {
-    const updatePosition = () => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-
-      const rowsWithNumbers = findRowsInRangeWithLineNumbers(wrapper, viewMode, comment.side, comment.startLine, comment.endLine);
-
-      if (rowsWithNumbers.length === 0) {
-        setIndicators([]);
-        return;
-      }
-
-      const wrapperRect = wrapper.getBoundingClientRect();
-      const left = viewMode === 'split' && comment.side === SplitSide.old ? 0 : viewMode === 'split' ? '50%' : 0;
-      const width = viewMode === 'split' ? '50%' : '100%';
-
-      // Group rows by consecutive row indices (split view) or all together (unified view)
-      const groups = viewMode === 'split'
-        ? groupByConsecutiveRowIndices(rowsWithNumbers)
-        : [rowsWithNumbers.map(r => r.row)];
-
-      const newIndicators: IndicatorRect[] = groups.map((group) => {
-        const firstRect = group[0].getBoundingClientRect();
-        const lastRect = group[group.length - 1].getBoundingClientRect();
-
-        return {
-          top: firstRect.top - wrapperRect.top + wrapper.scrollTop,
-          height: lastRect.bottom - firstRect.top,
-          left,
-          width,
-        };
-      });
-
-      setIndicators(newIndicators);
-    };
-
-    updatePosition();
-    const wrapper = wrapperRef.current;
-    wrapper?.addEventListener('scroll', updatePosition);
-    window.addEventListener('resize', updatePosition);
-    return () => {
-      wrapper?.removeEventListener('scroll', updatePosition);
-      window.removeEventListener('resize', updatePosition);
-    };
-  }, [comment, wrapperRef, viewMode]);
-
-  if (indicators.length === 0) return null;
-
-  return (
-    <>
-      {indicators.map((indicator, index) => (
-        <div
-          key={index}
-          style={{
-            display: 'block',
-            position: 'absolute',
-            top: indicator.top,
-            height: indicator.height,
-            left: indicator.left,
-            width: indicator.width,
-            backgroundColor: 'oklch(0.75 0.12 80 / 15%)',
-            borderRight: '3px solid oklch(0.7 0.15 80)',
-            pointerEvents: 'none',
-            zIndex: 5,
-          }}
-        />
-      ))}
-    </>
-  );
-}
diff --git a/apps/web/components/git-diff-view/comment-renderer.tsx b/apps/web/components/git-diff-view/comment-renderer.tsx
deleted file mode 100644
index a050e39773..0000000000
--- a/apps/web/components/git-diff-view/comment-renderer.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import { SplitSide } from '@git-diff-view/react';
-import { Button } from '@kandev/ui/button';
-import { Badge } from '@kandev/ui/badge';
-import { IconTrash } from '@tabler/icons-react';
-import type { DiffComment } from './types';
-
-interface CommentRendererProps {
-  comment: DiffComment;
-  onDelete: (id: string) => void;
-}
-
-export function CommentRenderer({ comment, onDelete }: CommentRendererProps) {
-  const isSingleLine = comment.startLine === comment.endLine;
-
-  return (
-    <div className="p-3 bg-amber-50 dark:bg-amber-950/30 border-t border-amber-200 dark:border-amber-800">
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex-1 min-w-0">
-          <div className="text-xs text-muted-foreground mb-1">
-            {isSingleLine
-              ? `Line ${comment.startLine}`
-              : `Lines ${comment.startLine}-${comment.endLine}`}
-            <Badge variant="outline" className="ml-2 text-xs">
-              {comment.side === SplitSide.old ? 'old' : 'new'}
-            </Badge>
-          </div>
-          <div className="text-sm whitespace-pre-wrap">{comment.content}</div>
-        </div>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => onDelete(comment.id)}
-          className="h-6 w-6 p-0 text-destructive hover:text-destructive shrink-0"
-        >
-          <IconTrash className="h-3.5 w-3.5" />
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/components/git-diff-view/comment-widget.tsx b/apps/web/components/git-diff-view/comment-widget.tsx
deleted file mode 100644
index b7de90b4d1..0000000000
--- a/apps/web/components/git-diff-view/comment-widget.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { SplitSide, type DiffFile } from '@git-diff-view/react';
-import { Button } from '@kandev/ui/button';
-import { Badge } from '@kandev/ui/badge';
-import { Textarea } from '@kandev/ui/textarea';
-import type { DiffComment } from './types';
-
-interface InlineCommentWidgetProps {
-  lineNumber: number;
-  side: SplitSide;
-  startLine: number;
-  diffFile: DiffFile;
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-  viewMode: 'split' | 'unified';
-  filePath: string;
-  onSave: (comment: DiffComment) => void;
-  onCancel: () => void;
-  onStartLineChange: (startLine: number) => void;
-}
-
-export function InlineCommentWidget({
-  lineNumber,
-  side,
-  startLine,
-  diffFile,
-  wrapperRef,
-  viewMode,
-  filePath,
-  onSave,
-  onCancel,
-  onStartLineChange,
-}: InlineCommentWidgetProps) {
-  const [content, setContent] = useState('');
-  const coverRef = useRef<HTMLDivElement | null>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const endLine = lineNumber;
-  const rangeStart = Math.min(startLine, endLine);
-  const rangeEnd = Math.max(startLine, endLine);
-  const isSingleLine = rangeStart === rangeEnd;
-
-  // Auto-focus textarea
-  useEffect(() => {
-    setTimeout(() => textareaRef.current?.focus(), 50);
-  }, []);
-
-  // Create visual overlay for selected lines (multi-line selection effect)
-  useEffect(() => {
-    if (!wrapperRef.current || isSingleLine) return;
-
-    let coverItem = coverRef.current;
-    if (!coverItem) {
-      coverItem = document.createElement('div');
-      coverRef.current = coverItem;
-      coverItem.className = 'diff-multiline-selection-overlay';
-    }
-
-    const updateCover = () => {
-      const id = diffFile.getId();
-      const wrapper = document.querySelector(`#diff-root${id}`);
-      if (!wrapper || !coverItem) return;
-
-      const items: HTMLElement[] = [];
-
-      for (let i = rangeStart; i <= rangeEnd; i++) {
-        const lineIndex =
-          viewMode === 'split'
-            ? diffFile.getSplitLineIndexByLineNumber(i, side)
-            : diffFile.getUnifiedLineIndexByLineNumber(i, side);
-
-        if (lineIndex === undefined) continue;
-
-        const lineDom = wrapper.querySelector(`[data-line="${lineIndex + 1}"]`) as HTMLElement;
-        if (lineDom) {
-          items.push(lineDom);
-        }
-      }
-
-      if (items.length === 0) {
-        coverItem.style.display = 'none';
-        return;
-      }
-
-      const firstItem = items[0];
-      const lastItem = items[items.length - 1];
-      const wrapperEl = wrapperRef.current;
-      if (!wrapperEl) return;
-
-      const wrapperRect = wrapperEl.getBoundingClientRect();
-      const firstRect = firstItem.getBoundingClientRect();
-      const lastRect = lastItem.getBoundingClientRect();
-
-      coverItem.style.display = 'block';
-      coverItem.style.top = `${firstRect.top - wrapperRect.top + wrapperEl.scrollTop}px`;
-      coverItem.style.height = `${lastRect.bottom - firstRect.top}px`;
-
-      if (viewMode === 'split') {
-        coverItem.style.left = side === SplitSide.old ? '0' : '50%';
-        coverItem.style.width = '50%';
-      } else {
-        coverItem.style.left = '0';
-        coverItem.style.width = '100%';
-      }
-
-      if (!wrapperEl.contains(coverItem)) {
-        wrapperEl.appendChild(coverItem);
-      }
-    };
-
-    updateCover();
-    const unsubscribe = diffFile.subscribe(() => setTimeout(updateCover, 0));
-
-    return () => {
-      coverItem?.remove();
-      coverRef.current = null;
-      unsubscribe();
-    };
-  }, [rangeStart, rangeEnd, side, diffFile, wrapperRef, viewMode, isSingleLine]);
-
-  const handleSubmit = () => {
-    if (content.trim()) {
-      const comment: DiffComment = {
-        id: `${filePath}-${Date.now()}`,
-        startLine: rangeStart,
-        endLine: rangeEnd,
-        side,
-        content: content.trim(),
-        createdAt: new Date().toISOString(),
-      };
-      onSave(comment);
-    }
-  };
-
-  return (
-    <div className="p-3 bg-card border-t border-border">
-      <div className="space-y-3">
-        <div className="flex items-center gap-2 text-sm">
-          <span className="text-muted-foreground">Comment on</span>
-          {isSingleLine ? (
-            <span className="font-medium">line {rangeStart}</span>
-          ) : (
-            <>
-              <span className="text-muted-foreground">lines</span>
-              <input
-                type="number"
-                min={1}
-                max={endLine}
-                value={startLine}
-                onChange={(e) =>
-                  onStartLineChange(Math.max(1, Math.min(endLine, Number(e.target.value))))
-                }
-                className="w-16 px-2 py-0.5 text-center border border-border rounded text-sm bg-background"
-              />
-              <span className="text-muted-foreground">to</span>
-              <span className="font-medium">{endLine}</span>
-            </>
-          )}
-          <Badge variant="outline" className="text-xs">
-            {side === SplitSide.old ? 'old' : 'new'}
-          </Badge>
-        </div>
-
-        <Textarea
-          ref={textareaRef}
-          value={content}
-          onChange={(e) => setContent(e.target.value)}
-          placeholder="Add a comment..."
-          className="min-h-[80px] text-sm resize-none"
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-              handleSubmit();
-            }
-            if (e.key === 'Escape') {
-              onCancel();
-            }
-          }}
-        />
-
-        <div className="flex justify-end gap-2">
-          <Button variant="outline" size="sm" onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button size="sm" onClick={handleSubmit} disabled={!content.trim()}>
-            Add Comment
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/components/git-diff-view/dom-utils.ts b/apps/web/components/git-diff-view/dom-utils.ts
deleted file mode 100644
index 24a544358a..0000000000
--- a/apps/web/components/git-diff-view/dom-utils.ts
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * DOM utilities for @git-diff-view/react library integration.
- *
- * This module uses the library's stable data attributes for DOM queries:
- * - data-line: line number on <tr> elements
- * - data-side: "old" | "new" on rows (split view only)
- * - data-state: "diff" | "plain" | "hunk" | "widget" | "extend"
- *
- * These data attributes are more stable than CSS class names across library versions.
- *
- * Fallback to class-based selectors is provided for unified view where
- * data-side is not present.
- */
-
-import { SplitSide } from '@git-diff-view/react';
-
-// Stable data attribute selectors
-export const SELECTORS = {
-  // Row with line number
-  ROW_WITH_LINE: 'tr[data-line]',
-
-  // Split view specific
-  ROW_OLD_SIDE: 'tr[data-side="old"]',
-  ROW_NEW_SIDE: 'tr[data-side="new"]',
-
-  // Fallback class selectors for unified view
-  CELL_LINE_NUM: 'td.diff-line-num',
-  CELL_OLD_NUM: 'td.diff-line-old-num',
-  CELL_NEW_NUM: 'td.diff-line-new-num',
-  CELL_OLD_CONTENT: 'td.diff-line-old-content',
-  CELL_NEW_CONTENT: 'td.diff-line-new-content',
-} as const;
-
-// Span indices in unified view line number cell
-const UNIFIED_SPAN_OLD_INDEX = 0;
-const UNIFIED_SPAN_NEW_INDEX = 2;
-
-export interface LineInfo {
-  lineNumber: number;
-  side: SplitSide;
-}
-
-/**
- * Parse line number from data attribute or text content
- */
-function parseLineNumber(value: string | null): number | null {
-  if (!value) return null;
-  const match = value.trim().match(/^[+-]?(\d+)$/);
-  return match ? parseInt(match[1], 10) : null;
-}
-
-/**
- * Get line info from a row using data attributes (preferred) or class-based fallback
- */
-function getLineInfoFromRow(
-  row: Element,
-  clickedElement: HTMLElement,
-  viewMode: 'split' | 'unified'
-): LineInfo | null {
-  if (viewMode === 'split') {
-    // Check if clicked on a placeholder cell (empty cell on one side) - return null
-    const isOldPlaceholder = clickedElement.closest('td.diff-line-old-placeholder');
-    const isNewPlaceholder = clickedElement.closest('td.diff-line-new-placeholder');
-    if (isOldPlaceholder || isNewPlaceholder) {
-      return null;
-    }
-
-    // Split view: determine which side was clicked and check if it has a line number
-    const oldNumCell = row.querySelector(SELECTORS.CELL_OLD_NUM);
-    const newNumCell = row.querySelector(SELECTORS.CELL_NEW_NUM);
-    const oldContent = row.querySelector(SELECTORS.CELL_OLD_CONTENT);
-    const newContent = row.querySelector(SELECTORS.CELL_NEW_CONTENT);
-
-    // Check if clicked on old side
-    if (oldNumCell && (oldNumCell.contains(clickedElement) || oldContent?.contains(clickedElement))) {
-      const num = parseLineNumber(oldNumCell.textContent);
-      // Only return if there's actually a line number (not an empty cell)
-      if (num !== null) return { lineNumber: num, side: SplitSide.old };
-      // Empty cell on old side - return null to skip
-      return null;
-    }
-
-    // Check if clicked on new side
-    if (newNumCell && (newNumCell.contains(clickedElement) || newContent?.contains(clickedElement))) {
-      const num = parseLineNumber(newNumCell.textContent);
-      // Only return if there's actually a line number (not an empty cell)
-      if (num !== null) return { lineNumber: num, side: SplitSide.new };
-      // Empty cell on new side - return null to skip
-      return null;
-    }
-
-    // Fallback: try data attributes
-    const dataLine = row.getAttribute('data-line');
-    const dataSide = row.getAttribute('data-side');
-    const lineNumber = parseLineNumber(dataLine);
-    if (lineNumber !== null && dataSide) {
-      return {
-        lineNumber,
-        side: dataSide === 'old' ? SplitSide.old : SplitSide.new,
-      };
-    }
-  } else {
-    // Unified view: no data-side, need to parse line number cell
-    const lineNumCell = row.querySelector(SELECTORS.CELL_LINE_NUM);
-    if (!lineNumCell) return null;
-
-    const spans = lineNumCell.querySelectorAll('span');
-
-    // Unified view span layout: [old number] [separator] [new number]
-    let oldNum: number | null = null;
-    let newNum: number | null = null;
-
-    if (spans[UNIFIED_SPAN_OLD_INDEX]) {
-      oldNum = parseLineNumber(spans[UNIFIED_SPAN_OLD_INDEX].textContent);
-    }
-    if (spans[UNIFIED_SPAN_NEW_INDEX]) {
-      newNum = parseLineNumber(spans[UNIFIED_SPAN_NEW_INDEX].textContent);
-    }
-
-    // Prefer new side if available (additions show on new side)
-    if (newNum !== null) {
-      return { lineNumber: newNum, side: SplitSide.new };
-    }
-    if (oldNum !== null) {
-      return { lineNumber: oldNum, side: SplitSide.old };
-    }
-
-    // Final fallback: parse all text
-    const text = lineNumCell.textContent?.trim() || '';
-    const numbers = text.match(/\d+/g);
-    if (numbers && numbers.length > 0) {
-      const num = parseInt(numbers[numbers.length - 1], 10);
-      return {
-        lineNumber: num,
-        side: numbers.length > 1 ? SplitSide.new : SplitSide.old,
-      };
-    }
-  }
-
-  return null;
-}
-
-/**
- * Extract line number and side from a DOM element within the diff viewer
- */
-export function getLineInfoFromElement(
-  element: HTMLElement,
-  wrapper: HTMLElement | null,
-  viewMode: 'split' | 'unified'
-): LineInfo | null {
-  let current: HTMLElement | null = element;
-
-  while (current && current !== wrapper) {
-    const row = current.closest('tr');
-    if (row) {
-      const info = getLineInfoFromRow(row, element, viewMode);
-      if (info) return info;
-    }
-    current = current.parentElement;
-  }
-
-  return null;
-}
-
-export interface RowWithLineNumber {
-  row: HTMLElement;
-  lineNumber: number;
-  rowIndex: number; // Index in DOM for detecting visual gaps
-}
-
-/**
- * Find all rows in a line number range for overlay positioning
- */
-export function findRowsInRange(
-  wrapper: HTMLElement,
-  viewMode: 'split' | 'unified',
-  side: SplitSide,
-  startLine: number,
-  endLine: number
-): HTMLElement[] {
-  return findRowsInRangeWithLineNumbers(wrapper, viewMode, side, startLine, endLine).map(r => r.row);
-}
-
-/**
- * Find all rows in a line number range, returning both row and line number
- * This allows grouping by consecutive line numbers for split view
- */
-export function findRowsInRangeWithLineNumbers(
-  wrapper: HTMLElement,
-  viewMode: 'split' | 'unified',
-  side: SplitSide,
-  startLine: number,
-  endLine: number
-): RowWithLineNumber[] {
-  const items: RowWithLineNumber[] = [];
-
-  if (viewMode === 'split') {
-    // Get all rows to track row indices
-    const allRows = Array.from(wrapper.querySelectorAll('tr'));
-    const rowIndexMap = new Map<HTMLElement, number>();
-    allRows.forEach((row, idx) => rowIndexMap.set(row as HTMLElement, idx));
-
-    // Split view: use class-based selectors to get line numbers from cells
-    const sideClass = side === SplitSide.old ? SELECTORS.CELL_OLD_NUM : SELECTORS.CELL_NEW_NUM;
-    const lineNumCells = wrapper.querySelectorAll(sideClass);
-
-    lineNumCells.forEach((cell) => {
-      const num = parseLineNumber(cell.textContent);
-      if (num !== null && num >= startLine && num <= endLine) {
-        const row = cell.closest('tr') as HTMLElement;
-        if (row) {
-          const rowIndex = rowIndexMap.get(row) ?? -1;
-          items.push({ row, lineNumber: num, rowIndex });
-        }
-      }
-    });
-
-    // Sort by row index to ensure DOM order
-    items.sort((a, b) => a.rowIndex - b.rowIndex);
-  } else {
-    // Unified view: iterate through all line rows
-    const allRows = Array.from(wrapper.querySelectorAll('tr'));
-    const rowIndexMap = new Map<Element, number>();
-    allRows.forEach((row, idx) => rowIndexMap.set(row, idx));
-
-    const rows = wrapper.querySelectorAll(SELECTORS.ROW_WITH_LINE);
-
-    rows.forEach((row) => {
-      const lineNumCell = row.querySelector(SELECTORS.CELL_LINE_NUM);
-      if (!lineNumCell) return;
-
-      const spans = lineNumCell.querySelectorAll('span');
-      let targetNum: number | null = null;
-
-      // Check the appropriate span based on side - NO fallback to avoid matching wrong side
-      const spanIndex = side === SplitSide.old ? UNIFIED_SPAN_OLD_INDEX : UNIFIED_SPAN_NEW_INDEX;
-      if (spans[spanIndex]) {
-        targetNum = parseLineNumber(spans[spanIndex].textContent);
-      }
-
-      // Only use fallback if there are no spans (old library version)
-      if (targetNum === null && spans.length === 0) {
-        const text = lineNumCell.textContent?.trim() || '';
-        const numbers = text.match(/\d+/g);
-        if (numbers && numbers.length > 0) {
-          const idx = side === SplitSide.old ? 0 : numbers.length - 1;
-          targetNum = parseInt(numbers[idx], 10);
-        }
-      }
-
-      if (targetNum !== null && targetNum >= startLine && targetNum <= endLine) {
-        const rowIndex = rowIndexMap.get(row) ?? -1;
-        items.push({ row: row as HTMLElement, lineNumber: targetNum, rowIndex });
-      }
-    });
-
-    // Sort by row index
-    items.sort((a, b) => a.rowIndex - b.rowIndex);
-  }
-
-  // Remove duplicates based on row
-  const seen = new Set<HTMLElement>();
-  return items.filter(item => {
-    if (seen.has(item.row)) return false;
-    seen.add(item.row);
-    return true;
-  });
-}
-
-/**
- * Find a specific row by line number for widget positioning
- */
-export function findRowByLineNumber(
-  wrapper: HTMLElement,
-  viewMode: 'split' | 'unified',
-  side: SplitSide,
-  lineNumber: number
-): HTMLElement | null {
-  const rows = findRowsInRange(wrapper, viewMode, side, lineNumber, lineNumber);
-  return rows[0] || null;
-}
-
-/**
- * Group rows into contiguous ranges based on consecutive ROW INDICES.
- * This detects visual gaps caused by rows with empty cells on the selected side.
- * Used for split view to show separate overlays for non-adjacent rows.
- */
-export function groupByConsecutiveRowIndices(items: RowWithLineNumber[]): HTMLElement[][] {
-  if (items.length === 0) return [];
-
-  const groups: HTMLElement[][] = [];
-  let currentGroup: HTMLElement[] = [items[0].row];
-  let lastRowIndex = items[0].rowIndex;
-
-  for (let i = 1; i < items.length; i++) {
-    const { row, rowIndex } = items[i];
-
-    if (rowIndex === lastRowIndex + 1) {
-      currentGroup.push(row);
-    } else {
-      groups.push(currentGroup);
-      currentGroup = [row];
-    }
-    lastRowIndex = rowIndex;
-  }
-
-  groups.push(currentGroup);
-  return groups;
-}
diff --git a/apps/web/components/git-diff-view/git-diff-viewer.css b/apps/web/components/git-diff-view/git-diff-viewer.css
deleted file mode 100644
index a36200f70b..0000000000
--- a/apps/web/components/git-diff-view/git-diff-viewer.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/* Custom styles for @git-diff-view/react demo */
-
-/* CSS Custom Properties */
-:root {
-  --diff-selection-bg: oklch(0.85 0.08 260 / 30%);
-  --diff-selection-border: oklch(0.6 0.15 260);
-}
-
-.dark {
-  --diff-selection-bg: oklch(0.35 0.08 260 / 40%);
-  --diff-selection-border: oklch(0.65 0.15 260);
-}
-
-/* Multi-line selection overlay */
-.diff-multiline-selection-overlay {
-  position: absolute;
-  background-color: var(--diff-selection-bg);
-  border: 2px solid var(--diff-selection-border);
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 10;
-}
-
-/* Ensure proper reset for color in widget/extend wrappers */
-.diff-line-extend-wrapper,
-.diff-line-widget-wrapper {
-  color: inherit;
-}
-
-.diff-line-extend-wrapper *,
-.diff-line-widget-wrapper * {
-  color: inherit;
-}
diff --git a/apps/web/components/git-diff-view/git-diff-viewer.tsx b/apps/web/components/git-diff-view/git-diff-viewer.tsx
deleted file mode 100644
index 11663ac84c..0000000000
--- a/apps/web/components/git-diff-view/git-diff-viewer.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-'use client';
-
-import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { DiffView, DiffModeEnum, SplitSide } from '@git-diff-view/react';
-import { generateDiffFile } from '@git-diff-view/file';
-import { useTheme } from 'next-themes';
-import { Button } from '@kandev/ui/button';
-import { Badge } from '@kandev/ui/badge';
-import { IconLayoutColumns, IconLayoutRows } from '@tabler/icons-react';
-import { cn } from '@/lib/utils';
-
-import { useDiffComments } from './use-diff-comments';
-import { InlineCommentWidget } from './comment-widget';
-import { CommentRenderer } from './comment-renderer';
-import { DragSelectionOverlay } from './selection-overlay';
-import { CommentRangeIndicator } from './comment-indicator';
-import { PositionedCommentWidget } from './multi-line-comment';
-import { getLineInfoFromElement } from './dom-utils';
-import type { GitDiffViewerProps, ExtendLineData, DragSelectionState } from './types';
-
-import '@git-diff-view/react/styles/diff-view.css';
-import './git-diff-viewer.css';
-
-export function GitDiffViewer({
-  oldContent,
-  newContent,
-  filePath,
-  language = 'typescript',
-  defaultViewMode = 'split',
-  showToolbar = true,
-  enableComments = true,
-  comments: externalComments,
-  onCommentAdd,
-  onCommentDelete,
-  className,
-}: GitDiffViewerProps) {
-  const { resolvedTheme } = useTheme();
-  const [viewMode, setViewMode] = useState<'split' | 'unified'>(defaultViewMode);
-  const [widgetStartLines, setWidgetStartLines] = useState<Record<string, number>>({});
-  const widgetStartLinesRef = useRef(widgetStartLines);
-
-  useEffect(() => {
-    widgetStartLinesRef.current = widgetStartLines;
-  }, [widgetStartLines]);
-
-  // Drag selection state for multi-line comments
-  const [dragSelection, setDragSelection] = useState<DragSelectionState | null>(null);
-  const [showDragWidget, setShowDragWidget] = useState(false);
-  const justCompletedMultiLineRef = useRef(false);
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  // Comment management
-  const { comments, addComment, deleteComment } = useDiffComments({
-    filePath,
-    externalComments,
-    onCommentAdd,
-    onCommentDelete,
-  });
-
-  const diffModeEnum = viewMode === 'split' ? DiffModeEnum.Split : DiffModeEnum.Unified;
-  const diffTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
-
-  // Generate diff file
-  const diffFile = useMemo(() => {
-    try {
-      const file = generateDiffFile(filePath, oldContent, filePath, newContent, language, language);
-      file.initRaw();
-      return file;
-    } catch (e) {
-      console.error('Failed to generate diff:', e);
-      return null;
-    }
-  }, [filePath, oldContent, newContent, language]);
-
-  // Build extendData for displaying existing comments
-  const extendData = useMemo(() => {
-    const oldFileData: Record<string, { data: ExtendLineData }> = {};
-    const newFileData: Record<string, { data: ExtendLineData }> = {};
-
-    comments.forEach((comment) => {
-      const lineKey = String(comment.endLine);
-      const entry: ExtendLineData = { type: 'comment', comment };
-
-      if (comment.side === SplitSide.old) {
-        oldFileData[lineKey] = { data: entry };
-      } else {
-        newFileData[lineKey] = { data: entry };
-      }
-    });
-
-    return { oldFile: oldFileData, newFile: newFileData };
-  }, [comments]);
-
-  // Mouse handlers for drag selection
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (!enableComments || e.button !== 0) return;
-
-      const target = e.target as HTMLElement;
-      const lineInfo = getLineInfoFromElement(target, wrapperRef.current, viewMode);
-
-      if (lineInfo) {
-        setDragSelection({
-          startLine: lineInfo.lineNumber,
-          endLine: lineInfo.lineNumber,
-          side: lineInfo.side,
-          isActive: true,
-        });
-        setShowDragWidget(false);
-        justCompletedMultiLineRef.current = false;
-      }
-    },
-    [enableComments, viewMode]
-  );
-
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent) => {
-      if (!dragSelection?.isActive) return;
-
-      const target = e.target as HTMLElement;
-      const lineInfo = getLineInfoFromElement(target, wrapperRef.current, viewMode);
-
-      if (lineInfo && lineInfo.side === dragSelection.side && lineInfo.lineNumber !== dragSelection.endLine) {
-        setDragSelection((prev) => (prev ? { ...prev, endLine: lineInfo.lineNumber } : null));
-      }
-    },
-    [dragSelection, viewMode]
-  );
-
-  const handleMouseUp = useCallback(() => {
-    if (!dragSelection?.isActive) return;
-
-    const { startLine, endLine, side } = dragSelection;
-    const rangeStart = Math.min(startLine, endLine);
-    const rangeEnd = Math.max(startLine, endLine);
-
-    if (rangeStart !== rangeEnd) {
-      setDragSelection({ startLine: rangeStart, endLine: rangeEnd, side, isActive: false });
-      setShowDragWidget(true);
-      justCompletedMultiLineRef.current = true;
-    } else {
-      setDragSelection(null);
-    }
-  }, [dragSelection]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (dragSelection?.isActive) {
-      setDragSelection(null);
-    }
-  }, [dragSelection]);
-
-  // Prevent library's single-line widget after multi-line selection
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    if (justCompletedMultiLineRef.current) {
-      e.stopPropagation();
-      e.preventDefault();
-      justCompletedMultiLineRef.current = false;
-    }
-  }, []);
-
-  // Handle widget line rendering for single-line comments
-  const renderWidgetLine = useCallback(
-    (props: { side: SplitSide; lineNumber: number; onClose: () => void }) => {
-      if (!diffFile || !enableComments) return null;
-
-      const widgetKey = `${filePath}-${props.side}-${props.lineNumber}`;
-      const startLine = widgetStartLinesRef.current[widgetKey] ?? props.lineNumber;
-
-      return (
-        <InlineCommentWidget
-          key={widgetKey}
-          lineNumber={props.lineNumber}
-          side={props.side}
-          startLine={startLine}
-          diffFile={diffFile}
-          wrapperRef={wrapperRef}
-          viewMode={viewMode}
-          filePath={filePath}
-          onSave={(comment) => {
-            addComment(comment.startLine, comment.endLine, comment.side, comment.content);
-            setWidgetStartLines((prev) => {
-              const next = { ...prev };
-              delete next[widgetKey];
-              return next;
-            });
-            props.onClose();
-          }}
-          onCancel={() => {
-            setWidgetStartLines((prev) => {
-              const next = { ...prev };
-              delete next[widgetKey];
-              return next;
-            });
-            props.onClose();
-          }}
-          onStartLineChange={(newStartLine) => {
-            setWidgetStartLines((prev) => ({ ...prev, [widgetKey]: newStartLine }));
-          }}
-        />
-      );
-    },
-    [filePath, diffFile, viewMode, enableComments, addComment]
-  );
-
-  // Render existing comments inline
-  const renderExtendLine = useCallback(
-    (lineData: { data: ExtendLineData }) => {
-      if (!lineData.data) return null;
-      return <CommentRenderer comment={lineData.data.comment} onDelete={(id) => deleteComment(id)} />;
-    },
-    [deleteComment]
-  );
-
-  if (!diffFile) {
-    return (
-      <div className={cn('flex items-center justify-center p-6', className)}>
-        <div className="text-muted-foreground">Failed to generate diff</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      {showToolbar && (
-        <div className="flex items-center justify-between">
-          <Badge variant="secondary" className="rounded-full text-xs">
-            {filePath}
-          </Badge>
-          <div className="inline-flex rounded-md border border-border overflow-hidden">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className={cn('h-7 px-2 text-xs rounded-none cursor-pointer', viewMode === 'unified' && 'bg-muted')}
-              onClick={() => setViewMode('unified')}
-            >
-              <IconLayoutRows className="h-3.5 w-3.5" />
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className={cn('h-7 px-2 text-xs rounded-none cursor-pointer', viewMode === 'split' && 'bg-muted')}
-              onClick={() => setViewMode('split')}
-            >
-              <IconLayoutColumns className="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {/* Outer container for positioning widget outside overflow */}
-      <div className="relative">
-        <div
-          ref={wrapperRef}
-          className="relative border border-border rounded-lg overflow-x-auto select-none"
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseLeave}
-          onClickCapture={handleClick}
-        >
-          {/* Comment range indicators */}
-          {enableComments &&
-            comments.map((comment) => (
-              <CommentRangeIndicator key={comment.id} comment={comment} wrapperRef={wrapperRef} viewMode={viewMode} />
-            ))}
-
-          {/* Drag selection overlay */}
-          {enableComments && dragSelection && diffFile && (
-            <DragSelectionOverlay selection={dragSelection} wrapperRef={wrapperRef} viewMode={viewMode} />
-          )}
-
-          <DiffView
-            diffFile={diffFile}
-            diffViewWrap={false}
-            diffViewTheme={diffTheme}
-            diffViewHighlight
-            diffViewMode={diffModeEnum}
-            diffViewFontSize={12}
-            diffViewAddWidget={enableComments}
-            onAddWidgetClick={() => {}}
-            renderWidgetLine={renderWidgetLine}
-            extendData={extendData}
-            renderExtendLine={renderExtendLine}
-          />
-        </div>
-
-        {/* Multi-line comment widget - outside overflow container */}
-        {enableComments && showDragWidget && dragSelection && !dragSelection.isActive && diffFile && (
-          <PositionedCommentWidget
-            selection={dragSelection}
-            diffFile={diffFile}
-            wrapperRef={wrapperRef}
-            viewMode={viewMode}
-            onSave={(content) => {
-              addComment(dragSelection.startLine, dragSelection.endLine, dragSelection.side, content);
-              setDragSelection(null);
-              setShowDragWidget(false);
-            }}
-            onCancel={() => {
-              setDragSelection(null);
-              setShowDragWidget(false);
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/components/git-diff-view/index.ts b/apps/web/components/git-diff-view/index.ts
deleted file mode 100644
index 5b05d97b32..0000000000
--- a/apps/web/components/git-diff-view/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export { GitDiffViewer } from './git-diff-viewer';
-export { useDiffComments } from './use-diff-comments';
-export type {
-  DiffComment,
-  GitDiffViewerProps,
-  DragSelectionState,
-  ExtendLineData,
-  CommentWidgetProps,
-  SplitSide,
-} from './types';
diff --git a/apps/web/components/git-diff-view/multi-line-comment.tsx b/apps/web/components/git-diff-view/multi-line-comment.tsx
deleted file mode 100644
index 19e9eb583f..0000000000
--- a/apps/web/components/git-diff-view/multi-line-comment.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { SplitSide, type DiffFile } from '@git-diff-view/react';
-import { Button } from '@kandev/ui/button';
-import { Badge } from '@kandev/ui/badge';
-import { Textarea } from '@kandev/ui/textarea';
-import { findRowByLineNumber } from './dom-utils';
-import type { DragSelectionState } from './types';
-
-interface MultiLineCommentInputProps {
-  startLine: number;
-  endLine: number;
-  side: SplitSide;
-  onSave: (content: string) => void;
-  onCancel: () => void;
-}
-
-export function MultiLineCommentInput({
-  startLine,
-  endLine,
-  side,
-  onSave,
-  onCancel,
-}: MultiLineCommentInputProps) {
-  const [content, setContent] = useState('');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    textareaRef.current?.focus();
-  }, []);
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-2 text-sm">
-        <span className="text-muted-foreground">Comment on lines</span>
-        <span className="font-medium">{startLine}</span>
-        <span className="text-muted-foreground">to</span>
-        <span className="font-medium">{endLine}</span>
-        <Badge variant="outline" className="text-xs">
-          {side === SplitSide.old ? 'old' : 'new'}
-        </Badge>
-      </div>
-
-      <Textarea
-        ref={textareaRef}
-        value={content}
-        onChange={(e) => setContent(e.target.value)}
-        placeholder="Add a comment..."
-        className="min-h-[80px] text-sm resize-none"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-            if (content.trim()) onSave(content.trim());
-          }
-          if (e.key === 'Escape') {
-            onCancel();
-          }
-        }}
-      />
-
-      <div className="flex justify-end gap-2">
-        <Button variant="outline" size="sm" onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button size="sm" onClick={() => content.trim() && onSave(content.trim())} disabled={!content.trim()}>
-          Add Comment
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-interface PositionedCommentWidgetProps {
-  selection: DragSelectionState;
-  diffFile: DiffFile;
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-  viewMode: 'split' | 'unified';
-  onSave: (content: string) => void;
-  onCancel: () => void;
-}
-
-export function PositionedCommentWidget({
-  selection,
-  diffFile,
-  wrapperRef,
-  viewMode,
-  onSave,
-  onCancel,
-}: PositionedCommentWidgetProps) {
-  const [position, setPosition] = useState<{ top: number; left: number | string; width: string } | null>(null);
-
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-
-    const endRow = findRowByLineNumber(wrapper, viewMode, selection.side, selection.endLine);
-
-    if (endRow) {
-      const wrapperRect = wrapper.getBoundingClientRect();
-      const rowRect = endRow.getBoundingClientRect();
-
-      setPosition({
-        top: rowRect.bottom - wrapperRect.top + wrapper.scrollTop,
-        left: viewMode === 'split' && selection.side === SplitSide.old ? 0 : viewMode === 'split' ? '50%' : 0,
-        width: viewMode === 'split' ? '50%' : '100%',
-      });
-    }
-  }, [selection, diffFile, wrapperRef, viewMode]);
-
-  if (!position) return null;
-
-  return (
-    <div
-      className="absolute z-30 bg-card border border-border rounded shadow-lg p-3"
-      style={{ top: position.top, left: position.left, width: position.width }}
-    >
-      <MultiLineCommentInput
-        startLine={selection.startLine}
-        endLine={selection.endLine}
-        side={selection.side}
-        onSave={onSave}
-        onCancel={onCancel}
-      />
-    </div>
-  );
-}
diff --git a/apps/web/components/git-diff-view/selection-overlay.tsx b/apps/web/components/git-diff-view/selection-overlay.tsx
deleted file mode 100644
index c2b333183c..0000000000
--- a/apps/web/components/git-diff-view/selection-overlay.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { SplitSide } from '@git-diff-view/react';
-import { findRowsInRangeWithLineNumbers, groupByConsecutiveRowIndices } from './dom-utils';
-import type { DragSelectionState } from './types';
-
-interface DragSelectionOverlayProps {
-  selection: DragSelectionState;
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-  viewMode: 'split' | 'unified';
-}
-
-interface OverlayRect {
-  top: number;
-  height: number;
-  left: number | string;
-  width: string;
-}
-
-export function DragSelectionOverlay({
-  selection,
-  wrapperRef,
-  viewMode,
-}: DragSelectionOverlayProps) {
-  const [overlays, setOverlays] = useState<OverlayRect[]>([]);
-
-  useEffect(() => {
-    const updatePosition = () => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-
-      const rangeStart = Math.min(selection.startLine, selection.endLine);
-      const rangeEnd = Math.max(selection.startLine, selection.endLine);
-
-      const rowsWithNumbers = findRowsInRangeWithLineNumbers(wrapper, viewMode, selection.side, rangeStart, rangeEnd);
-
-      if (rowsWithNumbers.length === 0) {
-        setOverlays([]);
-        return;
-      }
-
-      const wrapperRect = wrapper.getBoundingClientRect();
-      const left = viewMode === 'split' && selection.side === SplitSide.old ? 0 : viewMode === 'split' ? '50%' : 0;
-      const width = viewMode === 'split' ? '50%' : '100%';
-
-      // Group rows by consecutive row indices (split view) or all together (unified view)
-      const groups = viewMode === 'split'
-        ? groupByConsecutiveRowIndices(rowsWithNumbers)
-        : [rowsWithNumbers.map(r => r.row)];
-
-      const newOverlays: OverlayRect[] = groups.map((group) => {
-        const firstRect = group[0].getBoundingClientRect();
-        const lastRect = group[group.length - 1].getBoundingClientRect();
-
-        return {
-          top: firstRect.top - wrapperRect.top + wrapper.scrollTop,
-          height: lastRect.bottom - firstRect.top,
-          left,
-          width,
-        };
-      });
-
-      setOverlays(newOverlays);
-    };
-
-    updatePosition();
-    const wrapper = wrapperRef.current;
-    wrapper?.addEventListener('scroll', updatePosition);
-    return () => wrapper?.removeEventListener('scroll', updatePosition);
-  }, [selection, wrapperRef, viewMode]);
-
-  if (overlays.length === 0) return null;
-
-  return (
-    <>
-      {overlays.map((overlay, index) => (
-        <div
-          key={index}
-          className="diff-multiline-selection-overlay"
-          style={{
-            display: 'block',
-            position: 'absolute',
-            top: overlay.top,
-            height: overlay.height,
-            left: overlay.left,
-            width: overlay.width,
-            backgroundColor: 'oklch(0.35 0.08 260 / 40%)',
-            border: '2px solid oklch(0.65 0.15 260)',
-            borderRadius: 2,
-            pointerEvents: 'none',
-            zIndex: 10,
-          }}
-        />
-      ))}
-    </>
-  );
-}
diff --git a/apps/web/components/git-diff-view/types.ts b/apps/web/components/git-diff-view/types.ts
deleted file mode 100644
index 2c96730206..0000000000
--- a/apps/web/components/git-diff-view/types.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { SplitSide, DiffFile } from '@git-diff-view/react';
-
-/**
- * Comment attached to a line range in a diff
- */
-export interface DiffComment {
-  id: string;
-  startLine: number;
-  endLine: number;
-  side: SplitSide;
-  content: string;
-  createdAt: string;
-}
-
-/**
- * Extended line data for the library's extendData prop
- */
-export interface ExtendLineData {
-  type: 'comment';
-  comment: DiffComment;
-}
-
-/**
- * Props for the main GitDiffViewer component
- */
-export interface GitDiffViewerProps {
-  /** Old file content */
-  oldContent: string;
-  /** New file content */
-  newContent: string;
-  /** File path (used for comment storage key) */
-  filePath: string;
-  /** File language for syntax highlighting (e.g., 'tsx', 'typescript') */
-  language?: string;
-  /** Initial view mode */
-  defaultViewMode?: 'split' | 'unified';
-  /** Whether to show the toolbar */
-  showToolbar?: boolean;
-  /** Whether to enable comments */
-  enableComments?: boolean;
-  /** External comments (if managing state externally) */
-  comments?: DiffComment[];
-  /** Callback when a comment is added */
-  onCommentAdd?: (comment: DiffComment) => void;
-  /** Callback when a comment is deleted */
-  onCommentDelete?: (commentId: string) => void;
-  /** Additional class name for the container */
-  className?: string;
-}
-
-/**
- * Selection state during drag
- */
-export interface DragSelectionState {
-  startLine: number;
-  endLine: number;
-  side: SplitSide;
-  isActive: boolean;
-}
-
-/**
- * Props for comment widget components
- */
-export interface CommentWidgetProps {
-  lineNumber: number;
-  side: SplitSide;
-  startLine: number;
-  diffFile: DiffFile;
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-  viewMode: 'split' | 'unified';
-  filePath: string;
-  onSave: (comment: DiffComment) => void;
-  onCancel: () => void;
-  onStartLineChange: (startLine: number) => void;
-}
-
-export { SplitSide };
diff --git a/apps/web/components/git-diff-view/use-diff-comments.ts b/apps/web/components/git-diff-view/use-diff-comments.ts
deleted file mode 100644
index ae518ea700..0000000000
--- a/apps/web/components/git-diff-view/use-diff-comments.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import type { DiffComment } from './types';
-import { SplitSide } from '@git-diff-view/react';
-
-const STORAGE_KEY_PREFIX = 'git-diff-comments';
-
-function getStorageKey(filePath: string): string {
-  return `${STORAGE_KEY_PREFIX}:${filePath}`;
-}
-
-function loadComments(filePath: string): DiffComment[] {
-  if (typeof window === 'undefined') return [];
-  try {
-    const raw = window.localStorage.getItem(getStorageKey(filePath));
-    if (!raw) return [];
-    return JSON.parse(raw) as DiffComment[];
-  } catch {
-    return [];
-  }
-}
-
-function saveComments(filePath: string, comments: DiffComment[]): void {
-  if (typeof window === 'undefined') return;
-  try {
-    window.localStorage.setItem(getStorageKey(filePath), JSON.stringify(comments));
-  } catch {
-    // Ignore write failures
-  }
-}
-
-export interface UseDiffCommentsOptions {
-  /** File path for localStorage key */
-  filePath: string;
-  /** External comments (controlled mode) */
-  externalComments?: DiffComment[];
-  /** Callback when comment is added (controlled mode) */
-  onCommentAdd?: (comment: DiffComment) => void;
-  /** Callback when comment is deleted (controlled mode) */
-  onCommentDelete?: (commentId: string) => void;
-}
-
-export interface UseDiffCommentsReturn {
-  comments: DiffComment[];
-  addComment: (startLine: number, endLine: number, side: SplitSide, content: string) => void;
-  deleteComment: (commentId: string) => void;
-}
-
-export function useDiffComments({
-  filePath,
-  externalComments,
-  onCommentAdd,
-  onCommentDelete,
-}: UseDiffCommentsOptions): UseDiffCommentsReturn {
-  const isControlled = externalComments !== undefined;
-
-  const [internalComments, setInternalComments] = useState<DiffComment[]>(() => {
-    if (isControlled) return [];
-    return loadComments(filePath);
-  });
-
-  // Persist internal comments to localStorage
-  useEffect(() => {
-    if (!isControlled) {
-      saveComments(filePath, internalComments);
-    }
-  }, [filePath, internalComments, isControlled]);
-
-  const comments = isControlled ? externalComments : internalComments;
-
-  const addComment = useCallback(
-    (startLine: number, endLine: number, side: SplitSide, content: string) => {
-      const newComment: DiffComment = {
-        id: `${filePath}-${Date.now()}`,
-        startLine,
-        endLine,
-        side,
-        content,
-        createdAt: new Date().toISOString(),
-      };
-
-      if (isControlled && onCommentAdd) {
-        onCommentAdd(newComment);
-      } else {
-        setInternalComments((prev) => [...prev, newComment]);
-      }
-    },
-    [filePath, isControlled, onCommentAdd]
-  );
-
-  const deleteComment = useCallback(
-    (commentId: string) => {
-      if (isControlled && onCommentDelete) {
-        onCommentDelete(commentId);
-      } else {
-        setInternalComments((prev) => prev.filter((c) => c.id !== commentId));
-      }
-    },
-    [isControlled, onCommentDelete]
-  );
-
-  return { comments, addComment, deleteComment };
-}
diff --git a/apps/web/components/task/chat/chat-input-container.tsx b/apps/web/components/task/chat/chat-input-container.tsx
index 89315fd049..8bf7871cf2 100644
--- a/apps/web/components/task/chat/chat-input-container.tsx
+++ b/apps/web/components/task/chat/chat-input-container.tsx
@@ -26,9 +26,11 @@ import { RichTextInput, type RichTextInputHandle } from './rich-text-input';
 import { MentionMenu } from './mention-menu';
 import { SlashCommandMenu } from './slash-command-menu';
 import { ClarificationInputOverlay } from './clarification-input-overlay';
+import { CommentBlocksContainer } from './comment-block';
 import { useInlineMention } from '@/hooks/use-inline-mention';
 import { useInlineSlash } from '@/hooks/use-inline-slash';
 import type { Message } from '@/lib/types/http';
+import type { DiffComment } from '@/lib/diff/types';
 
 // Memoized toolbar to prevent re-renders on input value changes
 type ChatInputToolbarProps = {
@@ -163,7 +165,7 @@ const ChatInputToolbar = memo(function ChatInputToolbar({
 });
 
 type ChatInputContainerProps = {
-  onSubmit: (message: string) => void;
+  onSubmit: (message: string, reviewComments?: DiffComment[]) => void;
   sessionId: string | null;
   taskId: string | null;
   taskTitle?: string;
@@ -179,6 +181,14 @@ type ChatInputContainerProps = {
   onClarificationResolved?: () => void;
   showRequestChangesTooltip?: boolean;
   onRequestChangesTooltipDismiss?: () => void;
+  /** Pending review comments grouped by file */
+  pendingCommentsByFile?: Record<string, DiffComment[]>;
+  /** Callback to remove comments for a file */
+  onRemoveCommentFile?: (filePath: string) => void;
+  /** Callback to remove a specific comment */
+  onRemoveComment?: (sessionId: string, filePath: string, commentId: string) => void;
+  /** Callback when a comment is clicked (for jump-to-line) */
+  onCommentClick?: (comment: DiffComment) => void;
 };
 
 export function ChatInputContainer({
@@ -197,6 +207,11 @@ export function ChatInputContainer({
   pendingClarification,
   onClarificationResolved,
   showRequestChangesTooltip = false,
+  onRequestChangesTooltipDismiss,
+  pendingCommentsByFile,
+  onRemoveCommentFile,
+  onRemoveComment,
+  onCommentClick,
 }: ChatInputContainerProps) {
   // Keep input state local to avoid re-rendering parent on every keystroke
   const [value, setValue] = useState('');
@@ -238,13 +253,23 @@ export function ChatInputContainer({
     menuStateRef.current = { mentionOpen: mention.isOpen, slashOpen: slash.isOpen };
   }, [mention.isOpen, slash.isOpen]);
 
+  // Ref for pending comments
+  const pendingCommentsRef = useRef(pendingCommentsByFile);
+  useEffect(() => {
+    pendingCommentsRef.current = pendingCommentsByFile;
+  }, [pendingCommentsByFile]);
+
   // Combined change handler
   const handleChange = useCallback(
     (newValue: string) => {
       mention.handleChange(newValue);
       slash.handleChange(newValue);
+      // Dismiss the request changes tooltip when user starts typing
+      if (showRequestChangesTooltip && onRequestChangesTooltipDismiss) {
+        onRequestChangesTooltipDismiss();
+      }
     },
-    [mention, slash]
+    [mention, slash, showRequestChangesTooltip, onRequestChangesTooltipDismiss]
   );
 
   // Combined keydown handler
@@ -267,14 +292,28 @@ export function ChatInputContainer({
   const handleSubmit = useCallback(() => {
     // Don't submit if a menu is open
     if (menuStateRef.current.mentionOpen || menuStateRef.current.slashOpen) return;
+
     const trimmed = valueRef.current.trim();
-    if (!trimmed) return;
-    onSubmit(trimmed);
+    const comments = pendingCommentsRef.current;
+
+    // Collect all pending comments
+    const allComments: DiffComment[] = [];
+    if (comments) {
+      for (const filePath of Object.keys(comments)) {
+        allComments.push(...comments[filePath]);
+      }
+    }
+
+    // Allow submission if there's text OR comments
+    if (!trimmed && allComments.length === 0) return;
+
+    onSubmit(trimmed, allComments.length > 0 ? allComments : undefined);
     setValue('');
   }, [onSubmit]);
 
   const isDisabled = isStarting || isSending;
   const hasPendingClarification = pendingClarification && onClarificationResolved;
+  const hasPendingComments = pendingCommentsByFile && Object.keys(pendingCommentsByFile).length > 0;
 
   return (
     <div
@@ -282,7 +321,8 @@ export function ChatInputContainer({
         'rounded-2xl border border-border bg-background shadow-md overflow-hidden',
         planModeEnabled && 'border-primary border-dashed',
         hasPendingClarification && 'border-blue-500/50',
-        showRequestChangesTooltip && 'animate-pulse border-orange-500'
+        showRequestChangesTooltip && 'animate-pulse border-orange-500',
+        hasPendingComments && 'border-amber-500/50'
       )}
     >
       {/* Popup menus */}
@@ -307,6 +347,19 @@ export function ChatInputContainer({
         setSelectedIndex={slash.setSelectedIndex}
       />
 
+      {/* Pending comment blocks */}
+      {hasPendingComments && sessionId && onRemoveCommentFile && onRemoveComment && (
+        <div className="px-3 pt-3">
+          <CommentBlocksContainer
+            commentsByFile={pendingCommentsByFile}
+            sessionId={sessionId}
+            onRemoveFile={onRemoveCommentFile}
+            onRemoveComment={onRemoveComment}
+            onCommentClick={onCommentClick}
+          />
+        </div>
+      )}
+
       {/* Clarification inline (replaces input area when pending) */}
       {hasPendingClarification ? (
         <div style={{ overflow: 'auto' }}>
diff --git a/apps/web/components/task/chat/comment-block.tsx b/apps/web/components/task/chat/comment-block.tsx
new file mode 100644
index 0000000000..efdee1458c
--- /dev/null
+++ b/apps/web/components/task/chat/comment-block.tsx
@@ -0,0 +1,177 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@kandev/ui/button';
+import { Badge } from '@kandev/ui/badge';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@kandev/ui/collapsible';
+import { IconChevronDown, IconChevronRight, IconX, IconMessage } from '@tabler/icons-react';
+import { cn } from '@kandev/ui/lib/utils';
+import type { DiffComment } from '@/lib/diff/types';
+import { CommentDisplay } from '@/components/diff/comment-display';
+
+interface CommentBlockProps {
+  /** File path for the comments */
+  filePath: string;
+  /** Comments for this file */
+  comments: DiffComment[];
+  /** Callback to remove all comments for this file */
+  onRemove: () => void;
+  /** Callback to remove a specific comment */
+  onRemoveComment: (commentId: string) => void;
+  /** Callback when a comment is clicked (for jump-to-line) */
+  onCommentClick?: (comment: DiffComment) => void;
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * Rich block component for embedding review comments in chat input.
+ * Shows file name with comment count badge, expandable to see details.
+ */
+export function CommentBlock({
+  filePath,
+  comments,
+  onRemove,
+  onRemoveComment,
+  onCommentClick,
+  className,
+}: CommentBlockProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Get just the filename for display
+  const fileName = filePath.split('/').pop() || filePath;
+
+  if (comments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <div
+        className={cn(
+          'rounded-lg border border-border bg-muted/30',
+          className
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center gap-2 px-2 py-1.5">
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-5 w-5 cursor-pointer p-0"
+            >
+              {isOpen ? (
+                <IconChevronDown className="h-3.5 w-3.5" />
+              ) : (
+                <IconChevronRight className="h-3.5 w-3.5" />
+              )}
+            </Button>
+          </CollapsibleTrigger>
+
+          <IconMessage className="h-3.5 w-3.5 text-blue-500" />
+
+          <span
+            className="min-w-0 flex-1 truncate text-xs font-medium"
+            title={filePath}
+          >
+            {fileName}
+          </span>
+
+          <Badge
+            variant="secondary"
+            className="h-5 px-1.5 text-[10px]"
+          >
+            {comments.length}
+          </Badge>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+            className="h-5 w-5 cursor-pointer p-0 hover:text-destructive"
+          >
+            <IconX className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {/* Expanded content */}
+        <CollapsibleContent>
+          <div className="space-y-1.5 border-t border-border/50 px-2 py-2">
+            {comments.map((comment) => (
+              <div
+                key={comment.id}
+                onClick={() => onCommentClick?.(comment)}
+                className={cn(
+                  'rounded transition-colors',
+                  onCommentClick && 'cursor-pointer hover:bg-muted/50'
+                )}
+              >
+                <CommentDisplay
+                  comment={comment}
+                  compact
+                  onDelete={() => onRemoveComment(comment.id)}
+                />
+              </div>
+            ))}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+interface CommentBlocksContainerProps {
+  /** Comments grouped by file path */
+  commentsByFile: Record<string, DiffComment[]>;
+  /** Session ID for removing comments */
+  sessionId: string;
+  /** Callback to remove comments for a file */
+  onRemoveFile: (filePath: string) => void;
+  /** Callback to remove a specific comment */
+  onRemoveComment: (sessionId: string, filePath: string, commentId: string) => void;
+  /** Callback when a comment is clicked (for jump-to-line) */
+  onCommentClick?: (comment: DiffComment) => void;
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * Container for multiple CommentBlock components
+ */
+export function CommentBlocksContainer({
+  commentsByFile,
+  sessionId,
+  onRemoveFile,
+  onRemoveComment,
+  onCommentClick,
+  className,
+}: CommentBlocksContainerProps) {
+  const files = Object.keys(commentsByFile);
+
+  if (files.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {files.map((filePath) => (
+        <CommentBlock
+          key={filePath}
+          filePath={filePath}
+          comments={commentsByFile[filePath]}
+          onRemove={() => onRemoveFile(filePath)}
+          onRemoveComment={(commentId) => onRemoveComment(sessionId, filePath, commentId)}
+          onCommentClick={onCommentClick}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/components/task/chat/messages/diff-view-block.tsx b/apps/web/components/task/chat/messages/diff-view-block.tsx
index 5ae342acd5..9d6acd54d2 100644
--- a/apps/web/components/task/chat/messages/diff-view-block.tsx
+++ b/apps/web/components/task/chat/messages/diff-view-block.tsx
@@ -1,27 +1,27 @@
 'use client';
 
-import { DiffModeEnum, DiffView } from '@git-diff-view/react';
-import { useTheme } from 'next-themes';
 import { IconCode } from '@tabler/icons-react';
 import { cn } from '@/lib/utils';
-import type { DiffPayload } from '@/components/task/chat/types';
+import { DiffViewInline } from '@/components/diff';
+import type { FileDiffData } from '@/lib/diff/types';
 
 type DiffViewBlockProps = {
-  diff: DiffPayload;
+  /** Diff data in the new format */
+  data: FileDiffData;
+  /** Title to display */
   title?: string;
+  /** Whether to show the title */
   showTitle?: boolean;
+  /** Additional class name */
   className?: string;
 };
 
 export function DiffViewBlock({
-  diff,
+  data,
   title = 'Diff',
   showTitle = true,
   className
 }: DiffViewBlockProps) {
-  const { resolvedTheme } = useTheme();
-  const diffTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
-
   return (
     <div className={cn("mt-3 rounded-md border border-border/50 bg-background/60 px-3 py-2 text-xs", className)}>
       {showTitle && (
@@ -30,15 +30,7 @@ export function DiffViewBlock({
           <span>{title}</span>
         </div>
       )}
-      <DiffView
-        data={{
-          hunks: diff.hunks,
-          oldFile: diff.oldFile ?? { fileName: 'before', fileLang: 'plaintext' },
-          newFile: diff.newFile ?? { fileName: 'after', fileLang: 'plaintext' },
-        }}
-        diffViewMode={DiffModeEnum.Unified}
-        diffViewTheme={diffTheme}
-      />
+      <DiffViewInline data={data} />
     </div>
   );
 }
diff --git a/apps/web/components/task/chat/messages/review-comments-attachment.tsx b/apps/web/components/task/chat/messages/review-comments-attachment.tsx
new file mode 100644
index 0000000000..608afd3de1
--- /dev/null
+++ b/apps/web/components/task/chat/messages/review-comments-attachment.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@kandev/ui/button';
+import { Badge } from '@kandev/ui/badge';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@kandev/ui/collapsible';
+import { IconChevronDown, IconChevronRight, IconMessage } from '@tabler/icons-react';
+import { cn } from '@kandev/ui/lib/utils';
+import type { DiffComment } from '@/lib/diff/types';
+import { formatLineRange } from '@/lib/diff';
+
+interface ReviewCommentsAttachmentProps {
+  /** Review comments from the message */
+  comments: DiffComment[];
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * Renders review comments attached to a sent user message.
+ * Shows a compact summary that expands to show full comment details.
+ */
+export function ReviewCommentsAttachment({
+  comments,
+  className,
+}: ReviewCommentsAttachmentProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!comments || comments.length === 0) {
+    return null;
+  }
+
+  // Group comments by file
+  const byFile: Record<string, DiffComment[]> = {};
+  for (const comment of comments) {
+    if (!byFile[comment.filePath]) {
+      byFile[comment.filePath] = [];
+    }
+    byFile[comment.filePath].push(comment);
+  }
+
+  const fileCount = Object.keys(byFile).length;
+  const totalComments = comments.length;
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <div
+        className={cn(
+          'mt-2 rounded-lg border border-border bg-muted/30',
+          className
+        )}
+      >
+        {/* Header */}
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            className="flex w-full items-center justify-start gap-2 px-3 py-2"
+          >
+            {isOpen ? (
+              <IconChevronDown className="h-4 w-4 shrink-0" />
+            ) : (
+              <IconChevronRight className="h-4 w-4 shrink-0" />
+            )}
+
+            <IconMessage className="h-4 w-4 shrink-0 text-blue-500" />
+
+            <span className="text-sm font-medium">
+              Review Comments
+            </span>
+
+            <Badge
+              variant="secondary"
+              className="ml-auto text-xs"
+            >
+              {totalComments} comment{totalComments !== 1 ? 's' : ''} on {fileCount} file{fileCount !== 1 ? 's' : ''}
+            </Badge>
+          </Button>
+        </CollapsibleTrigger>
+
+        {/* Expanded content */}
+        <CollapsibleContent>
+          <div className="border-t border-border/50 px-3 py-2">
+            {Object.entries(byFile).map(([filePath, fileComments]) => (
+              <div key={filePath} className="mb-3 last:mb-0">
+                {/* File header */}
+                <div className="mb-1.5 flex items-center gap-1.5 text-xs">
+                  <span className="font-medium text-muted-foreground">
+                    {filePath.split('/').pop()}
+                  </span>
+                  <span className="text-muted-foreground/60">
+                    ({fileComments.length})
+                  </span>
+                </div>
+
+                {/* Comments */}
+                <div className="space-y-2">
+                  {fileComments.map((comment) => (
+                    <div
+                      key={comment.id}
+                      className="rounded-md border border-border/50 bg-card p-2"
+                    >
+                      {/* Line info */}
+                      <div className="mb-1 flex items-center gap-1.5 text-[10px] text-muted-foreground">
+                        <span className="font-medium">
+                          {formatLineRange(comment.startLine, comment.endLine)}
+                        </span>
+                        <span>({comment.side === 'additions' ? 'new' : 'old'})</span>
+                      </div>
+
+                      {/* Code preview */}
+                      {comment.codeContent && (
+                        <pre className="mb-1.5 overflow-x-auto rounded bg-muted p-1.5 text-[10px] leading-tight">
+                          <code>{comment.codeContent}</code>
+                        </pre>
+                      )}
+
+                      {/* Comment text */}
+                      <p className="whitespace-pre-wrap text-xs leading-relaxed">
+                        {comment.annotation}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+/**
+ * Format review comments as human-readable markdown for sending to agent.
+ * This format is both agent-friendly and displays nicely in the chat UI.
+ */
+export function formatReviewCommentsAsMarkdown(comments: DiffComment[]): string {
+  if (!comments || comments.length === 0) {
+    return '';
+  }
+
+  const lines: string[] = ['### Review Comments', ''];
+
+  // Group comments by file
+  const byFile = new Map<string, DiffComment[]>();
+  for (const comment of comments) {
+    const existing = byFile.get(comment.filePath) || [];
+    existing.push(comment);
+    byFile.set(comment.filePath, existing);
+  }
+
+  for (const [filePath, fileComments] of byFile) {
+    for (const comment of fileComments) {
+      const lineRange = comment.startLine === comment.endLine
+        ? `${comment.startLine}`
+        : `${comment.startLine}-${comment.endLine}`;
+
+      lines.push(`**${filePath}:${lineRange}**`);
+      lines.push('```');
+      lines.push(comment.codeContent);
+      lines.push('```');
+      lines.push(`> ${comment.annotation}`);
+      lines.push('');
+    }
+  }
+
+  lines.push('---');
+  lines.push('');
+  return lines.join('\n');
+}
diff --git a/apps/web/components/task/chat/messages/rich-blocks.tsx b/apps/web/components/task/chat/messages/rich-blocks.tsx
index 00d2c70dd4..e95862e83c 100644
--- a/apps/web/components/task/chat/messages/rich-blocks.tsx
+++ b/apps/web/components/task/chat/messages/rich-blocks.tsx
@@ -3,27 +3,65 @@
 import { IconBrain, IconCode, IconListCheck } from '@tabler/icons-react';
 import { cn } from '@/lib/utils';
 import type { Message } from '@/lib/types/http';
-import type { DiffPayload, RichMetadata } from '@/components/task/chat/types';
+import type { RichMetadata } from '@/components/task/chat/types';
 import { DiffViewBlock } from '@/components/task/chat/messages/diff-view-block';
+import { normalizeDiffString } from '@/lib/diff';
+import type { FileDiffData } from '@/lib/diff/types';
 
-function resolveDiffPayload(diff: unknown): DiffPayload | null {
+/**
+ * Resolve old diff payload format to new FileDiffData format
+ */
+function resolveDiffPayload(diff: unknown): FileDiffData | null {
   if (!diff) return null;
+
+  // Handle string diff
   if (typeof diff === 'string') {
-    return null;
+    const normalized = normalizeDiffString(diff, 'file');
+    if (!normalized) return null;
+    return {
+      filePath: 'file',
+      oldContent: '',
+      newContent: '',
+      diff: normalized,
+      additions: 0,
+      deletions: 0,
+    };
   }
+
+  // Handle array of hunks (legacy format)
   if (Array.isArray(diff)) {
-    return { hunks: diff.map((hunk) => String(hunk)) };
+    const hunkStrings = diff.map((hunk) => String(hunk)).join('\n');
+    const normalized = normalizeDiffString(hunkStrings, 'file');
+    if (!normalized) return null;
+    return {
+      filePath: 'file',
+      oldContent: '',
+      newContent: '',
+      diff: normalized,
+      additions: 0,
+      deletions: 0,
+    };
   }
+
+  // Handle object with hunks array (legacy format)
   if (typeof diff === 'object' && diff !== null) {
-    const candidate = diff as Partial<DiffPayload>;
+    const candidate = diff as { hunks?: unknown[]; oldFile?: { fileName?: string }; newFile?: { fileName?: string } };
     if (Array.isArray(candidate.hunks)) {
+      const hunkStrings = candidate.hunks.map((hunk) => String(hunk)).join('\n');
+      const filePath = candidate.newFile?.fileName || candidate.oldFile?.fileName || 'file';
+      const normalized = normalizeDiffString(hunkStrings, filePath);
+      if (!normalized) return null;
       return {
-        hunks: candidate.hunks.map((hunk) => String(hunk)),
-        oldFile: candidate.oldFile,
-        newFile: candidate.newFile,
+        filePath,
+        oldContent: '',
+        newContent: '',
+        diff: normalized,
+        additions: 0,
+        deletions: 0,
       };
     }
   }
+
   return null;
 }
 
@@ -35,7 +73,7 @@ export function RichBlocks({ comment }: { comment: Message }) {
   const todoItems = todos
     .map((item) => (typeof item === 'string' ? { text: item, done: false } : item))
     .filter((item) => item.text);
-  const diffPayload = resolveDiffPayload(metadata.diff);
+  const diffData = resolveDiffPayload(metadata.diff);
   const diffText = typeof metadata.diff === 'string' ? metadata.diff : null;
 
   return (
@@ -72,10 +110,10 @@ export function RichBlocks({ comment }: { comment: Message }) {
           </div>
         </div>
       )}
-      {diffPayload && (
-        <DiffViewBlock diff={diffPayload} />
+      {diffData && (
+        <DiffViewBlock data={diffData} />
       )}
-      {!diffPayload && diffText && (
+      {!diffData && diffText && (
         <div className="mt-3 rounded-md border border-border/50 bg-background/60 px-3 py-2 text-xs">
           <div className="flex items-center gap-2 text-muted-foreground mb-1 uppercase tracking-wide">
             <IconCode className="h-3.5 w-3.5" />
diff --git a/apps/web/components/task/chat/messages/tool-edit-message.tsx b/apps/web/components/task/chat/messages/tool-edit-message.tsx
index 81aca73745..d9dfdc692f 100644
--- a/apps/web/components/task/chat/messages/tool-edit-message.tsx
+++ b/apps/web/components/task/chat/messages/tool-edit-message.tsx
@@ -8,14 +8,7 @@ import { FilePathButton } from './file-path-button';
 import type { Message } from '@/lib/types/http';
 import { DiffViewBlock } from './diff-view-block';
 import { ExpandableRow } from './expandable-row';
-
-type FileMutation = {
-  type?: string;
-  content?: string;
-  old_content?: string;
-  new_content?: string;
-  diff?: string;
-};
+import { transformFileMutation, type FileMutation } from '@/lib/diff';
 
 type ModifyFilePayload = {
   file_path?: string;
@@ -33,14 +26,6 @@ type ToolEditMetadata = {
   normalized?: NormalizedPayload;
 };
 
-// Parse unified diff string into hunks array for DiffViewBlock
-function parseDiffToHunks(diffString: string): string[] {
-  if (!diffString) return [];
-  // Split on hunk headers (@@ ... @@) but keep them
-  const hunks = diffString.split(/(?=^@@)/m).filter(h => h.trim());
-  return hunks;
-}
-
 type ToolEditMessageProps = {
   comment: Message;
   worktreePath?: string;
@@ -56,17 +41,15 @@ export const ToolEditMessage = memo(function ToolEditMessage({ comment, worktree
   const normalized = metadata?.normalized;
   const filePath = normalized?.modify_file?.file_path;
   const mutation = normalized?.modify_file?.mutations?.[0];
-  const diffString = mutation?.diff;
   const writeContent = mutation?.content; // For Write tool (create operations)
   const isWriteOperation = mutation?.type === 'create';
 
-  const diff = diffString ? {
-    hunks: parseDiffToHunks(diffString),
-    oldFile: { fileName: filePath },
-    newFile: { fileName: filePath },
-  } : undefined;
+  // Transform mutation to FileDiffData using the new adapter
+  const diffData = filePath && mutation
+    ? transformFileMutation(filePath, mutation)
+    : null;
 
-  const hasExpandableContent = !!(diff || writeContent);
+  const hasExpandableContent = !!(diffData?.diff || writeContent);
   const isSuccess = status === 'complete';
   const Icon = isWriteOperation ? IconFilePlus : IconEdit;
 
@@ -132,8 +115,8 @@ export const ToolEditMessage = memo(function ToolEditMessage({ comment, worktree
       isExpanded={isExpanded}
       onToggle={handleToggle}
     >
-      {diff ? (
-        <DiffViewBlock diff={diff} showTitle={false} className="mt-0 border-0 px-0" />
+      {diffData?.diff ? (
+        <DiffViewBlock data={diffData} showTitle={false} className="mt-0 border-0 px-0" />
       ) : writeContent ? (
         <div className="pl-4 border-l-2 border-border/30">
           <pre className="text-xs bg-muted/30 rounded p-2 overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap">
diff --git a/apps/web/components/task/task-center-panel.tsx b/apps/web/components/task/task-center-panel.tsx
index d4855794d8..168ece2dac 100644
--- a/apps/web/components/task/task-center-panel.tsx
+++ b/apps/web/components/task/task-center-panel.tsx
@@ -308,6 +308,7 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
           <TaskChangesPanel
             selectedDiff={selectedDiff}
             onClearSelected={() => setSelectedDiff(null)}
+            onOpenFile={handleOpenFileFromChat}
           />
         </TabsContent>
 
@@ -323,6 +324,10 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
                 onOpenFile={handleOpenFileFromChat}
                 showRequestChangesTooltip={showRequestChangesTooltip}
                 onRequestChangesTooltipDismiss={() => setShowRequestChangesTooltip(false)}
+                onSelectDiff={(path) => {
+                  setSelectedDiff({ path });
+                  setLeftTab('changes');
+                }}
               />
             )
           ) : (
diff --git a/apps/web/components/task/task-changes-panel.tsx b/apps/web/components/task/task-changes-panel.tsx
index 0b09a00222..8dbfdaaf11 100644
--- a/apps/web/components/task/task-changes-panel.tsx
+++ b/apps/web/components/task/task-changes-panel.tsx
@@ -1,14 +1,7 @@
 'use client';
 
 import { memo, useMemo, useState } from 'react';
-import { DiffModeEnum, DiffView } from '@git-diff-view/react';
-import {
-  IconArrowBackUp,
-  IconCopy,
-  IconLayoutColumns,
-  IconLayoutRows,
-} from '@tabler/icons-react';
-import { useTheme } from 'next-themes';
+import { IconArrowBackUp } from '@tabler/icons-react';
 import { Badge } from '@kandev/ui/badge';
 import { Button } from '@kandev/ui/button';
 import { SessionPanelContent } from '@kandev/ui/pannel-session';
@@ -23,71 +16,52 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@kandev/ui/alert-dialog';
-import { cn } from '@/lib/utils';
 import { useToast } from '@/components/toast-provider';
-import { getLanguageFromPath } from '@/lib/languages';
-import { getLocalStorage, setLocalStorage } from '@/lib/local-storage';
 import { useAppStore } from '@/components/state-provider';
 import { useSessionGitStatus } from '@/hooks/domains/session/use-session-git-status';
 import { useCumulativeDiff } from '@/hooks/domains/session/use-cumulative-diff';
 import { useGitOperations } from '@/hooks/use-git-operations';
+import { FileDiffViewer } from '@/components/diff';
 import type { FileInfo } from '@/lib/state/slices';
 import type { SelectedDiff } from './task-layout';
 
 type TaskChangesPanelProps = {
   selectedDiff: SelectedDiff | null;
   onClearSelected: () => void;
+  /** Callback to open file in editor */
+  onOpenFile?: (filePath: string) => void;
 };
 
-const DEFAULT_DIFF_MODE: 'unified' | 'split' = 'unified';
-
 /**
- * Normalize diff content for the @git-diff-view/react library.
+ * Normalize diff content by handling edge cases from the backend.
  *
- * Handles two edge cases from the backend:
+ * Handles:
  * 1. Multiple diffs concatenated with "--- Staged changes ---" separator
- *    (we take the staged diff as it's what matters for the commit)
- * 2. Diffs missing the "diff --git" header line (for untracked files)
- *
- * The library expects each hunk to be a complete diff string with headers.
+ * 2. Diffs missing headers
  */
-function parseDiffIntoHunks(diffContent: string, filePath?: string): string[] {
-  if (!diffContent || typeof diffContent !== 'string') return [];
+function normalizeDiffContent(diffContent: string): string {
+  if (!diffContent || typeof diffContent !== 'string') return '';
 
   let trimmed = diffContent.trim();
-  if (!trimmed) return [];
+  if (!trimmed) return '';
 
   // Handle concatenated diffs with "--- Staged changes ---" separator
-  // Take the staged diff (after the separator) as it's the authoritative one
   const stagedSeparator = '--- Staged changes ---';
   if (trimmed.includes(stagedSeparator)) {
     const parts = trimmed.split(stagedSeparator);
-    // Use the staged diff (second part) if available
     trimmed = (parts[1] || parts[0]).trim();
   }
 
-  // If diff is missing the "diff --git" header, add it
-  // This happens for untracked files where backend generates incomplete diff
-  if (!trimmed.startsWith('diff --git') && trimmed.includes('@@')) {
-    const path = filePath || 'file';
-    const header = `diff --git a/${path} b/${path}\nnew file mode 100644\nindex 0000000..0000000\n`;
-    trimmed = header + trimmed;
-  }
-
-  // Return as single hunk - the library handles parsing internally
-  return [trimmed];
+  return trimmed;
 }
 
 const TaskChangesPanel = memo(function TaskChangesPanel({
   selectedDiff,
   onClearSelected,
+  onOpenFile,
 }: TaskChangesPanelProps) {
-  const [diffViewMode, setDiffViewMode] = useState<'unified' | 'split'>(() =>
-    getLocalStorage('task-diff-view-mode', DEFAULT_DIFF_MODE)
-  );
   const [showDiscardDialog, setShowDiscardDialog] = useState(false);
 
-  const { resolvedTheme } = useTheme();
   const { toast } = useToast();
   const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
   const gitStatus = useSessionGitStatus(activeSessionId);
@@ -124,8 +98,6 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
       }));
   }, [cumulativeDiff]);
 
-  const diffModeEnum = diffViewMode === 'split' ? DiffModeEnum.Split : DiffModeEnum.Unified;
-  const diffTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
   const selectedFile = selectedDiffPath && gitStatus?.files ? gitStatus.files[selectedDiffPath] : null;
   // Use provided content if available, otherwise fall back to git status
   const selectedDiffContent = selectedDiff?.content ?? selectedFile?.diff ?? '';
@@ -138,20 +110,16 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
   const hasAnyChanges = hasUncommitted || hasCommitted;
 
   const handleDiscardClick = () => {
-    console.log('Discard button clicked', { selectedDiffPath, canDiscard });
     setShowDiscardDialog(true);
   };
 
   const handleDiscardConfirm = async () => {
     if (!selectedDiffPath) {
-      console.error('No selectedDiffPath');
       return;
     }
 
-    console.log('Discarding changes for:', selectedDiffPath);
     try {
       const result = await discard([selectedDiffPath]);
-      console.log('Discard result:', result);
       if (result.success) {
         toast({
           title: 'Changes discarded',
@@ -167,7 +135,6 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
         });
       }
     } catch (error) {
-      console.error('Discard error:', error);
       toast({
         title: 'Failed to discard changes',
         description: error instanceof Error ? error.message : 'An unknown error occurred',
@@ -180,91 +147,23 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
 
   return (
     <div className="flex flex-col gap-2 h-full">
-      {/* Header toolbar */}
+      {/* Header */}
       <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <Badge variant="secondary" className="rounded-full text-xs">
-            {selectedDiffPath ?? 'All files'}
-          </Badge>
-        </div>
-        <div className="flex items-center gap-1.5">
-          {selectedDiffPath && (
+        {selectedDiffPath && (
+          <>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   type="button"
                   variant="ghost"
                   size="sm"
-                  className="h-7 px-2 text-xs cursor-pointer"
+                  className="h-7 px-2 text-xs cursor-pointer ml-auto"
                   onClick={onClearSelected}
                 >
                   Clear
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Show all uncommitted changes</TooltipContent>
-            </Tooltip>
-          )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 px-2 text-xs cursor-pointer"
-                  disabled={!isSingleDiffSelected}
-                  onClick={async () => {
-                    if (!isSingleDiffSelected) return;
-                    await navigator.clipboard.writeText(selectedDiffContent);
-                  }}
-                >
-                  <IconCopy className="h-3.5 w-3.5" />
-                </Button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Copy diff</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 px-2 text-xs cursor-pointer"
-                  disabled={!canDiscard || isDiscarding}
-                  onClick={handleDiscardClick}
-                >
-                  <IconArrowBackUp className="h-3.5 w-3.5" />
-                </Button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              {canDiscard ? 'Discard changes' : hasProvidedContent ? 'Cannot discard committed changes' : 'Select an uncommitted file'}
-            </TooltipContent>
-          </Tooltip>
-          <div className="inline-flex rounded-md border border-border overflow-hidden">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className={cn(
-                      'h-7 px-2 text-xs rounded-none cursor-pointer',
-                      diffViewMode === 'unified' && 'bg-muted'
-                    )}
-                    onClick={() => {
-                      setDiffViewMode('unified');
-                      setLocalStorage('task-diff-view-mode', 'unified');
-                    }}
-                  >
-                    <IconLayoutRows className="h-3.5 w-3.5" />
-                  </Button>
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>Unified view</TooltipContent>
+              <TooltipContent>Show all changes</TooltipContent>
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
@@ -273,39 +172,34 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className={cn(
-                      'h-7 px-2 text-xs rounded-none cursor-pointer',
-                      diffViewMode === 'split' && 'bg-muted'
-                    )}
-                    onClick={() => {
-                      setDiffViewMode('split');
-                      setLocalStorage('task-diff-view-mode', 'split');
-                    }}
+                    className="h-7 px-2 text-xs cursor-pointer"
+                    disabled={!canDiscard || isDiscarding}
+                    onClick={handleDiscardClick}
                   >
-                    <IconLayoutColumns className="h-3.5 w-3.5" />
+                    <IconArrowBackUp className="h-3.5 w-3.5" />
                   </Button>
                 </span>
               </TooltipTrigger>
-              <TooltipContent>Split view</TooltipContent>
+              <TooltipContent>
+                {canDiscard ? 'Discard changes' : hasProvidedContent ? 'Cannot discard committed changes' : 'Select an uncommitted file'}
+              </TooltipContent>
             </Tooltip>
-          </div>
-        </div>
+          </>
+        )}
       </div>
 
       {/* Diff content */}
       <SessionPanelContent>
         {isSingleDiffSelected && selectedDiffContent ? (
           // Render single file diff (from commit, snapshot, or uncommitted)
-          // Key includes content length to force re-render when diff updates
           <div key={`selected-${selectedDiffPath}-${selectedDiffContent.length}`} className="space-y-4">
-            <DiffView
-              data={{
-                hunks: parseDiffIntoHunks(selectedDiffContent, selectedDiffPath!),
-                oldFile: { fileName: selectedDiffPath!, fileLang: getLanguageFromPath(selectedDiffPath!) },
-                newFile: { fileName: selectedDiffPath!, fileLang: getLanguageFromPath(selectedDiffPath!) },
-              }}
-              diffViewMode={diffModeEnum}
-              diffViewTheme={diffTheme}
+            <FileDiffViewer
+              filePath={selectedDiffPath!}
+              diff={normalizeDiffContent(selectedDiffContent)}
+              status="M"
+              enableComments={!!activeSessionId}
+              sessionId={activeSessionId ?? undefined}
+              onOpenFile={onOpenFile}
             />
           </div>
         ) : cumulativeLoading ? (
@@ -326,29 +220,17 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
                 </div>
                 {uncommittedFiles.map((file) => {
                   if (!file.diff) return null;
-                  const fileLang = getLanguageFromPath(file.path);
-                  // Include diff length in key to force re-render when content changes
-                  const diffKey = `uncommitted-${file.path}-${file.diff.length}`;
+                  const normalizedDiff = normalizeDiffContent(file.diff);
+                  const diffKey = `uncommitted-${file.path}-${normalizedDiff.length}`;
                   return (
                     <div key={diffKey} className="space-y-2">
-                      <div className="flex items-center justify-between">
-                        <Badge variant="secondary" className="rounded-full text-xs">
-                          {file.path}
-                        </Badge>
-                        <span className="text-xs text-muted-foreground">
-                          <span className="text-emerald-500">+{file.additions}</span>
-                          {' / '}
-                          <span className="text-rose-500">-{file.deletions}</span>
-                        </span>
-                      </div>
-                      <DiffView
-                        data={{
-                          hunks: parseDiffIntoHunks(file.diff, file.path),
-                          oldFile: { fileName: file.path, fileLang },
-                          newFile: { fileName: file.path, fileLang },
-                        }}
-                        diffViewMode={diffModeEnum}
-                        diffViewTheme={diffTheme}
+                      <FileDiffViewer
+                        filePath={file.path}
+                        diff={normalizedDiff}
+                        status={file.status}
+                        enableComments={!!activeSessionId}
+                        sessionId={activeSessionId ?? undefined}
+                        onOpenFile={onOpenFile}
                       />
                     </div>
                   );
@@ -364,9 +246,8 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
                 </div>
                 {committedFiles.map((file) => {
                   if (!file.diff) return null;
-                  const fileLang = getLanguageFromPath(file.path);
-                  // Include diff length in key to force re-render when content changes
-                  const diffKey = `committed-${file.path}-${file.diff.length}`;
+                  const normalizedDiff = normalizeDiffContent(file.diff);
+                  const diffKey = `committed-${file.path}-${normalizedDiff.length}`;
                   return (
                     <div key={diffKey} className="space-y-2">
                       <div className="flex items-center justify-between">
@@ -379,14 +260,13 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
                           <span className="text-rose-500">-{file.deletions}</span>
                         </span>
                       </div>
-                      <DiffView
-                        data={{
-                          hunks: parseDiffIntoHunks(file.diff, file.path),
-                          oldFile: { fileName: file.path, fileLang },
-                          newFile: { fileName: file.path, fileLang },
-                        }}
-                        diffViewMode={diffModeEnum}
-                        diffViewTheme={diffTheme}
+                      <FileDiffViewer
+                        filePath={file.path}
+                        diff={normalizedDiff}
+                        status="M"
+                        enableComments={!!activeSessionId}
+                        sessionId={activeSessionId ?? undefined}
+                        onOpenFile={onOpenFile}
                       />
                     </div>
                   );
diff --git a/apps/web/components/task/task-chat-panel.tsx b/apps/web/components/task/task-chat-panel.tsx
index a39896f5d5..0ab4efa540 100644
--- a/apps/web/components/task/task-chat-panel.tsx
+++ b/apps/web/components/task/task-chat-panel.tsx
@@ -11,6 +11,12 @@ import { useMessageHandler } from '@/hooks/use-message-handler';
 import { TodoSummary } from '@/components/task/chat/todo-summary';
 import { VirtualizedMessageList } from '@/components/task/chat/virtualized-message-list';
 import { ChatInputContainer } from '@/components/task/chat/chat-input-container';
+import { formatReviewCommentsAsMarkdown } from '@/components/task/chat/messages/review-comments-attachment';
+import {
+  useDiffCommentsStore,
+  usePendingCommentsByFile,
+} from '@/lib/state/slices/diff-comments';
+import type { DiffComment } from '@/lib/diff/types';
 
 type TaskChatPanelProps = {
   onSend?: (message: string) => void;
@@ -18,6 +24,8 @@ type TaskChatPanelProps = {
   onOpenFile?: (path: string) => void;
   showRequestChangesTooltip?: boolean;
   onRequestChangesTooltipDismiss?: () => void;
+  /** Callback to select a file in the changes panel (for jump-to-line) */
+  onSelectDiff?: (path: string) => void;
 };
 
 export const TaskChatPanel = memo(function TaskChatPanel({
@@ -26,6 +34,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
   onOpenFile,
   showRequestChangesTooltip = false,
   onRequestChangesTooltipDismiss,
+  onSelectDiff,
 }: TaskChatPanelProps) {
   const [planModeEnabled, setPlanModeEnabled] = useState(false);
   const [isSending, setIsSending] = useState(false);
@@ -79,6 +88,31 @@ export const TaskChatPanel = memo(function TaskChatPanel({
     planModeEnabled
   );
 
+  // Diff comments management
+  const pendingCommentsByFile = usePendingCommentsByFile();
+  const markCommentsSent = useDiffCommentsStore((state) => state.markCommentsSent);
+  const removeComment = useDiffCommentsStore((state) => state.removeComment);
+
+  // Handle removing all comments for a file
+  const handleRemoveCommentFile = useCallback(
+    (filePath: string) => {
+      if (!resolvedSessionId) return;
+      const comments = pendingCommentsByFile[filePath] || [];
+      for (const comment of comments) {
+        removeComment(resolvedSessionId, filePath, comment.id);
+      }
+    },
+    [resolvedSessionId, pendingCommentsByFile, removeComment]
+  );
+
+  // Handle removing a single comment
+  const handleRemoveComment = useCallback(
+    (sessionId: string, filePath: string, commentId: string) => {
+      removeComment(sessionId, filePath, commentId);
+    },
+    [removeComment]
+  );
+
   // Clear awaiting state when a new agent message arrives
   useEffect(() => {
     lastAgentMessageCountRef.current = agentMessageCount;
@@ -98,15 +132,28 @@ export const TaskChatPanel = memo(function TaskChatPanel({
     }
   }, [resolvedSessionId]);
 
-  const handleSubmit = useCallback(async (message: string) => {
+  const handleSubmit = useCallback(async (message: string, reviewComments?: DiffComment[]) => {
     if (isSending) return;
     setIsSending(true);
     try {
-      if (onSend) {
-        await onSend(message);
-      } else {
-        await handleSendMessage(message);
+      // Build final message with review comments
+      let finalMessage = message;
+      if (reviewComments && reviewComments.length > 0) {
+        const reviewMarkdown = formatReviewCommentsAsMarkdown(reviewComments);
+        finalMessage = reviewMarkdown + (message ? message : '');
       }
+
+      if (onSend) {
+        await onSend(finalMessage);
+      } else {
+        await handleSendMessage(finalMessage);
+      }
+
+      // Mark comments as sent and clear pending
+      if (reviewComments && reviewComments.length > 0) {
+        markCommentsSent(reviewComments.map((c) => c.id));
+      }
+
       // Reset plan mode after sending - it's a per-message instruction
       if (planModeEnabled) {
         setPlanModeEnabled(false);
@@ -114,7 +161,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
     } finally {
       setIsSending(false);
     }
-  }, [isSending, planModeEnabled, onSend, handleSendMessage]);
+  }, [isSending, planModeEnabled, onSend, handleSendMessage, markCommentsSent]);
 
 
   return (
@@ -157,6 +204,10 @@ export const TaskChatPanel = memo(function TaskChatPanel({
           onClarificationResolved={handleClarificationResolved}
           showRequestChangesTooltip={showRequestChangesTooltip}
           onRequestChangesTooltipDismiss={onRequestChangesTooltipDismiss}
+          pendingCommentsByFile={pendingCommentsByFile}
+          onRemoveCommentFile={handleRemoveCommentFile}
+          onRemoveComment={handleRemoveComment}
+          onCommentClick={onSelectDiff ? (comment) => onSelectDiff(comment.filePath) : undefined}
         />
       </div>
     </>
diff --git a/apps/web/components/task/task-page-content.tsx b/apps/web/components/task/task-page-content.tsx
index 50c03489f8..732e50b5ff 100644
--- a/apps/web/components/task/task-page-content.tsx
+++ b/apps/web/components/task/task-page-content.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
-import '@git-diff-view/react/styles/diff-view.css';
 import { TaskTopBar } from '@/components/task/task-top-bar';
 import { TaskLayout } from '@/components/task/task-layout';
 import { DebugOverlay } from '@/components/debug-overlay';
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index c21d3d8034..f703dc8542 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -37,6 +37,7 @@ export function DataTable<TData, TValue>({
   isLoading = false,
   onRowClick,
 }: DataTableProps<TData, TValue>) {
+  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's API is designed this way
   const table = useReactTable({
     data,
     columns,
diff --git a/apps/web/lib/diff/adapter.ts b/apps/web/lib/diff/adapter.ts
new file mode 100644
index 0000000000..3b6ead11c4
--- /dev/null
+++ b/apps/web/lib/diff/adapter.ts
@@ -0,0 +1,176 @@
+import type { FileDiffData, DiffComment, AnnotationSide, CommentAnnotation } from './types';
+
+/**
+ * Format line range for display (e.g., "L10" or "L10-15")
+ */
+export function formatLineRange(startLine: number, endLine: number): string {
+  return startLine === endLine ? `L${startLine}` : `L${startLine}-${endLine}`;
+}
+
+/**
+ * Frontend types that mirror backend FileMutation
+ */
+export interface FileMutation {
+  type: 'create' | 'replace' | 'patch' | 'delete' | 'rename';
+  content?: string;
+  old_content?: string;
+  new_content?: string;
+  diff?: string;
+  new_path?: string;
+  start_line?: number;
+  end_line?: number;
+}
+
+export interface ModifyFilePayload {
+  file_path: string;
+  mutations: FileMutation[];
+}
+
+/**
+ * Normalize a diff string by ensuring it has proper headers.
+ * Required because backend diffs may not include full git headers.
+ */
+export function normalizeDiffString(diff: string, filePath: string): string {
+  if (!diff) return '';
+
+  const trimmed = diff.trim();
+
+  // Check if the diff already has headers
+  if (trimmed.startsWith('diff --git')) {
+    return trimmed;
+  }
+
+  // Check if it has file headers but not diff header
+  const hasFileHeaders = trimmed.includes('---') && trimmed.includes('+++');
+
+  if (hasFileHeaders) {
+    // Add just the diff header
+    return `diff --git a/${filePath} b/${filePath}\n${trimmed}`;
+  }
+
+  // Add minimal headers
+  const headers = [
+    `diff --git a/${filePath} b/${filePath}`,
+    `--- a/${filePath}`,
+    `+++ b/${filePath}`,
+  ];
+  return headers.join('\n') + '\n' + trimmed;
+}
+
+/**
+ * Transform a backend FileMutation to FileDiffData for @pierre/diffs.
+ * The DiffViewer component handles diff generation from content using the library.
+ */
+export function transformFileMutation(
+  filePath: string,
+  mutation: FileMutation
+): FileDiffData {
+  return {
+    filePath: mutation.new_path || filePath,
+    oldContent: mutation.old_content || '',
+    newContent: mutation.new_content || mutation.content || '',
+    diff: mutation.diff ? normalizeDiffString(mutation.diff, filePath) : undefined,
+    additions: 0,
+    deletions: 0,
+  };
+}
+
+/**
+ * Transform a git status diff string to FileDiffData.
+ * Language detection is handled automatically by the library.
+ */
+export function transformGitDiff(
+  filePath: string,
+  diff: string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _status: 'A' | 'M' | 'D' | '??' | string
+): FileDiffData {
+  return {
+    filePath,
+    oldContent: '',
+    newContent: '',
+    diff: normalizeDiffString(diff, filePath),
+    additions: 0,
+    deletions: 0,
+  };
+}
+
+/**
+ * Convert DiffComment[] to @pierre/diffs DiffLineAnnotation[]
+ */
+export function commentsToAnnotations(
+  comments: DiffComment[]
+): CommentAnnotation[] {
+  return comments.map((comment) => ({
+    side: comment.side,
+    lineNumber: comment.endLine, // Anchor at the end of the range
+    metadata: {
+      comment,
+      isEditing: false,
+    },
+  }));
+}
+
+/**
+ * Extract code content from diff for a line range
+ */
+export function extractCodeFromDiff(
+  diff: string,
+  startLine: number,
+  endLine: number,
+  side: AnnotationSide
+): string {
+  const lines = diff.split('\n');
+  const resultLines: string[] = [];
+  let currentNewLine = 0;
+  let currentOldLine = 0;
+
+  for (const line of lines) {
+    // Parse hunk header
+    const hunkMatch = line.match(/^@@\s*-(\d+)(?:,\d+)?\s*\+(\d+)(?:,\d+)?\s*@@/);
+    if (hunkMatch) {
+      currentOldLine = parseInt(hunkMatch[1], 10);
+      currentNewLine = parseInt(hunkMatch[2], 10);
+      continue;
+    }
+
+    // Skip file headers
+    if (line.startsWith('diff --git') || line.startsWith('---') || line.startsWith('+++')) {
+      continue;
+    }
+
+    if (line.startsWith('+') && !line.startsWith('+++')) {
+      if (side === 'additions' && currentNewLine >= startLine && currentNewLine <= endLine) {
+        resultLines.push(line.substring(1));
+      }
+      currentNewLine++;
+    } else if (line.startsWith('-') && !line.startsWith('---')) {
+      if (side === 'deletions' && currentOldLine >= startLine && currentOldLine <= endLine) {
+        resultLines.push(line.substring(1));
+      }
+      currentOldLine++;
+    } else if (line.startsWith(' ') || (!line.startsWith('@') && line !== '')) {
+      const content = line.startsWith(' ') ? line.substring(1) : line;
+      const lineNum = side === 'additions' ? currentNewLine : currentOldLine;
+      if (lineNum >= startLine && lineNum <= endLine) {
+        resultLines.push(content);
+      }
+      currentOldLine++;
+      currentNewLine++;
+    }
+  }
+
+  return resultLines.join('\n');
+}
+
+/**
+ * Extract code content from full file content for a line range
+ */
+export function extractCodeFromContent(
+  content: string,
+  startLine: number,
+  endLine: number
+): string {
+  const lines = content.split('\n');
+  return lines.slice(startLine - 1, endLine).join('\n');
+}
diff --git a/apps/web/lib/diff/index.ts b/apps/web/lib/diff/index.ts
new file mode 100644
index 0000000000..bd2af6304e
--- /dev/null
+++ b/apps/web/lib/diff/index.ts
@@ -0,0 +1,26 @@
+// Types
+export type {
+  AnnotationSide,
+  DiffComment,
+  FileDiffData,
+  CommentAnnotation,
+  DiffCommentsState,
+  DiffCommentsActions,
+  DiffCommentsSlice,
+  CommentBlockData,
+  DiffViewerProps,
+  DiffViewInlineProps,
+} from './types';
+
+// Adapter functions
+export {
+  formatLineRange,
+  transformFileMutation,
+  transformGitDiff,
+  commentsToAnnotations,
+  normalizeDiffString,
+  extractCodeFromDiff,
+  extractCodeFromContent,
+  type FileMutation,
+  type ModifyFilePayload,
+} from './adapter';
diff --git a/apps/web/lib/diff/types.ts b/apps/web/lib/diff/types.ts
new file mode 100644
index 0000000000..b20198811a
--- /dev/null
+++ b/apps/web/lib/diff/types.ts
@@ -0,0 +1,124 @@
+import type { DiffLineAnnotation } from '@pierre/diffs';
+
+/**
+ * Annotation side - matches @pierre/diffs AnnotationSide
+ */
+export type AnnotationSide = 'additions' | 'deletions';
+
+/**
+ * Comment attached to a line range in a diff
+ */
+export interface DiffComment {
+  id: string;
+  sessionId: string;
+  filePath: string;
+  startLine: number;
+  endLine: number;
+  side: AnnotationSide;
+  codeContent: string; // The actual code lines the user selected
+  annotation: string; // User's comment text
+  createdAt: string;
+  status: 'pending' | 'sent';
+}
+
+/**
+ * File diff data in a unified format for @pierre/diffs.
+ * Language is auto-detected by the library from file extension.
+ */
+export interface FileDiffData {
+  filePath: string;
+  oldContent: string;
+  newContent: string;
+  diff?: string; // Unified diff string (for patch mode)
+  additions: number;
+  deletions: number;
+}
+
+/**
+ * @pierre/diffs annotation type with our comment metadata
+ */
+export type CommentAnnotation = DiffLineAnnotation<{
+  comment: DiffComment;
+  isEditing: boolean;
+}>;
+
+/**
+ * Store state for diff comments
+ */
+export interface DiffCommentsState {
+  // Comments by session and file: sessionId -> filePath -> comments
+  bySession: Record<string, Record<string, DiffComment[]>>;
+  // Comments queued for next chat message (referenced by id)
+  pendingForChat: string[];
+  // Currently editing comment (null if none)
+  editingCommentId: string | null;
+}
+
+/**
+ * Actions for the diff comments store
+ */
+export interface DiffCommentsActions {
+  addComment: (comment: DiffComment) => void;
+  updateComment: (commentId: string, updates: Partial<DiffComment>) => void;
+  removeComment: (sessionId: string, filePath: string, commentId: string) => void;
+  addToPending: (commentId: string) => void;
+  removeFromPending: (commentId: string) => void;
+  clearPending: () => void;
+  setEditingComment: (commentId: string | null) => void;
+  markCommentsSent: (commentIds: string[]) => void;
+  getCommentsForFile: (sessionId: string, filePath: string) => DiffComment[];
+  getPendingComments: () => DiffComment[];
+  clearSessionComments: (sessionId: string) => void;
+}
+
+/**
+ * Combined state and actions
+ */
+export type DiffCommentsSlice = DiffCommentsState & DiffCommentsActions;
+
+/**
+ * Rich text input block type for comment blocks
+ */
+export interface CommentBlockData {
+  type: 'comment-block';
+  filePath: string;
+  commentIds: string[];
+}
+
+/**
+ * Props for DiffViewer component
+ */
+export interface DiffViewerProps {
+  /** Diff data to display */
+  data: FileDiffData;
+  /** View mode: split or unified */
+  viewMode?: 'split' | 'unified';
+  /** Enable line selection for comments */
+  enableComments?: boolean;
+  /** Session ID for comment storage */
+  sessionId?: string;
+  /** Callback when comment is added */
+  onCommentAdd?: (comment: DiffComment) => void;
+  /** Callback when comment is deleted */
+  onCommentDelete?: (commentId: string) => void;
+  /** External comments (controlled mode) */
+  comments?: DiffComment[];
+  /** Additional class name */
+  className?: string;
+  /** Whether to show in compact mode (for chat) */
+  compact?: boolean;
+}
+
+/**
+ * Props for inline diff view in chat messages
+ */
+export interface DiffViewInlineProps {
+  /** Diff data to display */
+  data: FileDiffData;
+  /** Session ID for comment storage */
+  sessionId?: string;
+  /** Enable comments */
+  enableComments?: boolean;
+  /** Additional class name */
+  className?: string;
+}
diff --git a/apps/web/lib/state/slices/diff-comments/diff-comments-slice.ts b/apps/web/lib/state/slices/diff-comments/diff-comments-slice.ts
new file mode 100644
index 0000000000..18a5cbc259
--- /dev/null
+++ b/apps/web/lib/state/slices/diff-comments/diff-comments-slice.ts
@@ -0,0 +1,252 @@
+import { useMemo } from 'react';
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import type {
+  DiffCommentsState,
+  DiffCommentsSlice,
+  DiffComment,
+} from '@/lib/diff/types';
+
+const STORAGE_KEY = 'kandev-diff-comments';
+
+// Stable empty references to avoid creating new objects on every render
+const EMPTY_COMMENTS: DiffComment[] = [];
+const EMPTY_COMMENTS_BY_FILE: Record<string, DiffComment[]> = {};
+
+const defaultState: DiffCommentsState = {
+  bySession: {},
+  pendingForChat: [],
+  editingCommentId: null,
+};
+
+/**
+ * Standalone Zustand store for diff comments with localStorage persistence.
+ * Comments are organized by sessionId and filePath.
+ */
+export const useDiffCommentsStore = create<DiffCommentsSlice>()(
+  persist(
+    immer<DiffCommentsSlice>((set, get) => ({
+      ...defaultState,
+
+      addComment: (comment: DiffComment) =>
+        set((state) => {
+          const { sessionId, filePath } = comment;
+          if (!state.bySession[sessionId]) {
+            state.bySession[sessionId] = {};
+          }
+          if (!state.bySession[sessionId][filePath]) {
+            state.bySession[sessionId][filePath] = [];
+          }
+          state.bySession[sessionId][filePath].push(comment);
+
+          // Auto-add to pending for chat
+          if (comment.status === 'pending') {
+            state.pendingForChat.push(comment.id);
+          }
+        }),
+
+      updateComment: (commentId: string, updates: Partial<DiffComment>) =>
+        set((state) => {
+          // Find and update the comment
+          for (const sessionId of Object.keys(state.bySession)) {
+            for (const filePath of Object.keys(state.bySession[sessionId])) {
+              const comments = state.bySession[sessionId][filePath];
+              const index = comments.findIndex((c) => c.id === commentId);
+              if (index !== -1) {
+                state.bySession[sessionId][filePath][index] = {
+                  ...comments[index],
+                  ...updates,
+                };
+                return;
+              }
+            }
+          }
+        }),
+
+      removeComment: (sessionId: string, filePath: string, commentId: string) =>
+        set((state) => {
+          if (!state.bySession[sessionId]?.[filePath]) return;
+          state.bySession[sessionId][filePath] = state.bySession[sessionId][
+            filePath
+          ].filter((c) => c.id !== commentId);
+
+          // Remove from pending if present
+          state.pendingForChat = state.pendingForChat.filter(
+            (id) => id !== commentId
+          );
+
+          // Clear editing if this was the editing comment
+          if (state.editingCommentId === commentId) {
+            state.editingCommentId = null;
+          }
+        }),
+
+      addToPending: (commentId: string) =>
+        set((state) => {
+          if (!state.pendingForChat.includes(commentId)) {
+            state.pendingForChat.push(commentId);
+          }
+        }),
+
+      removeFromPending: (commentId: string) =>
+        set((state) => {
+          state.pendingForChat = state.pendingForChat.filter(
+            (id) => id !== commentId
+          );
+        }),
+
+      clearPending: () =>
+        set((state) => {
+          state.pendingForChat = [];
+        }),
+
+      setEditingComment: (commentId: string | null) =>
+        set((state) => {
+          state.editingCommentId = commentId;
+        }),
+
+      markCommentsSent: (commentIds: string[]) =>
+        set((state) => {
+          const idsToRemove = new Set(commentIds);
+
+          // Remove the sent comments entirely from storage
+          for (const sessionId of Object.keys(state.bySession)) {
+            for (const filePath of Object.keys(state.bySession[sessionId])) {
+              state.bySession[sessionId][filePath] = state.bySession[sessionId][
+                filePath
+              ].filter((comment) => !idsToRemove.has(comment.id));
+
+              // Clean up empty file entries
+              if (state.bySession[sessionId][filePath].length === 0) {
+                delete state.bySession[sessionId][filePath];
+              }
+            }
+
+            // Clean up empty session entries
+            if (Object.keys(state.bySession[sessionId]).length === 0) {
+              delete state.bySession[sessionId];
+            }
+          }
+
+          // Remove from pending
+          state.pendingForChat = state.pendingForChat.filter(
+            (id) => !idsToRemove.has(id)
+          );
+
+          // Clear editing if deleted
+          if (state.editingCommentId && idsToRemove.has(state.editingCommentId)) {
+            state.editingCommentId = null;
+          }
+        }),
+
+      getCommentsForFile: (sessionId: string, filePath: string): DiffComment[] => {
+        const state = get();
+        return state.bySession[sessionId]?.[filePath] ?? EMPTY_COMMENTS;
+      },
+
+      getPendingComments: (): DiffComment[] => {
+        const state = get();
+        const pending: DiffComment[] = [];
+        for (const sessionId of Object.keys(state.bySession)) {
+          for (const filePath of Object.keys(state.bySession[sessionId])) {
+            for (const comment of state.bySession[sessionId][filePath]) {
+              if (state.pendingForChat.includes(comment.id)) {
+                pending.push(comment);
+              }
+            }
+          }
+        }
+        return pending;
+      },
+
+      clearSessionComments: (sessionId: string) =>
+        set((state) => {
+          // Collect comment IDs BEFORE deleting the session
+          const sessionCommentIds = new Set<string>();
+          if (state.bySession[sessionId]) {
+            for (const filePath of Object.keys(state.bySession[sessionId])) {
+              for (const comment of state.bySession[sessionId][filePath]) {
+                sessionCommentIds.add(comment.id);
+              }
+            }
+          }
+          // Now delete the session and filter pending
+          delete state.bySession[sessionId];
+          state.pendingForChat = state.pendingForChat.filter(
+            (id) => !sessionCommentIds.has(id)
+          );
+        }),
+    })),
+    {
+      name: STORAGE_KEY,
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({
+        bySession: state.bySession,
+        // Don't persist pendingForChat or editingCommentId
+      }),
+    }
+  )
+);
+
+/**
+ * Hook to get comments for a specific file.
+ * Returns stable reference from store (or stable empty array).
+ */
+export function useFileComments(sessionId: string, filePath: string) {
+  const fileComments = useDiffCommentsStore((state) =>
+    state.bySession[sessionId]?.[filePath]
+  );
+  return fileComments ?? EMPTY_COMMENTS;
+}
+
+/**
+ * Hook to get pending comments for chat.
+ * Uses useMemo with stable store subscriptions to prevent infinite re-renders.
+ */
+export function usePendingComments() {
+  const bySession = useDiffCommentsStore((state) => state.bySession);
+  const pendingForChat = useDiffCommentsStore((state) => state.pendingForChat);
+
+  return useMemo(() => {
+    if (pendingForChat.length === 0) return EMPTY_COMMENTS;
+    const pending: DiffComment[] = [];
+    for (const sessionId of Object.keys(bySession)) {
+      for (const filePath of Object.keys(bySession[sessionId])) {
+        for (const comment of bySession[sessionId][filePath]) {
+          if (pendingForChat.includes(comment.id)) {
+            pending.push(comment);
+          }
+        }
+      }
+    }
+    return pending;
+  }, [bySession, pendingForChat]);
+}
+
+/**
+ * Hook to get pending comments grouped by file.
+ * Uses useMemo with stable store subscriptions to prevent infinite re-renders.
+ */
+export function usePendingCommentsByFile() {
+  const bySession = useDiffCommentsStore((state) => state.bySession);
+  const pendingForChat = useDiffCommentsStore((state) => state.pendingForChat);
+
+  return useMemo(() => {
+    if (pendingForChat.length === 0) return EMPTY_COMMENTS_BY_FILE;
+    const byFile: Record<string, DiffComment[]> = {};
+    for (const sessionId of Object.keys(bySession)) {
+      for (const filePath of Object.keys(bySession[sessionId])) {
+        for (const comment of bySession[sessionId][filePath]) {
+          if (pendingForChat.includes(comment.id)) {
+            if (!byFile[filePath]) {
+              byFile[filePath] = [];
+            }
+            byFile[filePath].push(comment);
+          }
+        }
+      }
+    }
+    return byFile;
+  }, [bySession, pendingForChat]);
+}
diff --git a/apps/web/lib/state/slices/diff-comments/index.ts b/apps/web/lib/state/slices/diff-comments/index.ts
new file mode 100644
index 0000000000..23cbee613b
--- /dev/null
+++ b/apps/web/lib/state/slices/diff-comments/index.ts
@@ -0,0 +1,6 @@
+export {
+  useDiffCommentsStore,
+  useFileComments,
+  usePendingComments,
+  usePendingCommentsByFile,
+} from './diff-comments-slice';
diff --git a/apps/web/lib/state/slices/session-runtime/session-runtime-slice.ts b/apps/web/lib/state/slices/session-runtime/session-runtime-slice.ts
index 2286f76af2..367ac78d26 100644
--- a/apps/web/lib/state/slices/session-runtime/session-runtime-slice.ts
+++ b/apps/web/lib/state/slices/session-runtime/session-runtime-slice.ts
@@ -3,6 +3,17 @@ import type { SessionRuntimeSlice, SessionRuntimeSliceState } from './types';
 
 const maxProcessOutputBytes = 2 * 1024 * 1024;
 
+/** Helper to compare two string arrays for equality */
+function arraysEqual(a: string[] | undefined, b: string[] | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
 function trimProcessOutput(value: string) {
   if (value.length <= maxProcessOutputBytes) {
     return value;
@@ -83,6 +94,23 @@ export const createSessionRuntimeSlice: StateCreator<
     }),
   setGitStatus: (sessionId, gitStatus) =>
     set((draft) => {
+      const existing = draft.gitStatus.bySessionId[sessionId];
+      // Skip update if git status content hasn't meaningfully changed
+      // Compare branch, file counts, and modified/added/deleted arrays
+      if (existing) {
+        const sameContent =
+          existing.branch === gitStatus.branch &&
+          existing.ahead === gitStatus.ahead &&
+          existing.behind === gitStatus.behind &&
+          arraysEqual(existing.modified, gitStatus.modified) &&
+          arraysEqual(existing.added, gitStatus.added) &&
+          arraysEqual(existing.deleted, gitStatus.deleted) &&
+          arraysEqual(existing.untracked, gitStatus.untracked) &&
+          arraysEqual(existing.renamed, gitStatus.renamed);
+        if (sameContent) {
+          return; // Skip update - no meaningful changes
+        }
+      }
       draft.gitStatus.bySessionId[sessionId] = gitStatus;
     }),
   clearGitStatus: (sessionId) =>
diff --git a/apps/web/package.json b/apps/web/package.json
index 2f04dc92b3..51b00a53d3 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -29,8 +29,6 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@git-diff-view/file": "^0.0.36",
-    "@git-diff-view/react": "^0.0.36",
     "@kandev/theme": "workspace:*",
     "@kandev/types": "workspace:*",
     "@kandev/ui": "workspace:*",
@@ -44,6 +42,7 @@
     "@milkdown/react": "^7.18.0",
     "@milkdown/theme-nord": "^7.18.0",
     "@milkdown/utils": "^7.18.0",
+    "@pierre/diffs": "^1.0.10",
     "@tabler/icons-react": "^3.36.1",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.18",