From eca2257c26ab6c6f304b28ec388735414af0c78f Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Mon, 23 Mar 2026 10:30:38 +0000
Subject: [PATCH] fix(site): enable word-level inline diff highlighting in
 DiffViewer (#23423)

---
 site/src/components/ai-elements/tool/utils.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/site/src/components/ai-elements/tool/utils.ts b/site/src/components/ai-elements/tool/utils.ts
index c57365846e..a461502c55 100644
--- a/site/src/components/ai-elements/tool/utils.ts
+++ b/site/src/components/ai-elements/tool/utils.ts
@@ -230,7 +230,11 @@ const SEPARATOR_CSS = [
 ].join(" ");
 
 export const diffViewerCSS = [
-	"pre, [data-line]:not([data-selected-line]), [data-diffs-header] { background-color: transparent !important; }",
+	// Make context lines transparent so they blend with the page,
+	// but preserve the library's colored backgrounds on changed
+	// lines (change-addition / change-deletion) so the line-level
+	// tint and word-level emphasis highlights remain visible.
+	"pre, [data-line]:not([data-selected-line]):not([data-line-type='change-addition']):not([data-line-type='change-deletion']), [data-diffs-header] { background-color: transparent !important; }",
 	"[data-diffs-header] { border-left: 1px solid var(--border); }",
 	SELECTION_OVERRIDE_CSS,
 	SEPARATOR_CSS,