From 3a070a83ddaecb997133642c73e946035585c933 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 14 May 2026 20:11:30 +0700
Subject: [PATCH] fix(site/src/pages/AgentsPage): theme diff changed-line
 backgrounds (#25179)

## Summary

- Update AgentsPage diff viewer CSS so changed lines use theme-aware git
added and deleted surfaces.
- Add unit coverage for the changed-line CSS variables and line-type
selectors.

## Dependencies

- None. This is independent of the theme mode API and dropdown stack.

## Validation

- `pnpm -C site exec vitest run --project=unit
src/pages/AgentsPage/components/ChatElements/tools/utils.test.ts`
- Pre-commit hook passed on the branch commit.
---
 .../ChatElements/tools/utils.test.ts          | 11 +++++++++
 .../components/ChatElements/tools/utils.ts    | 23 ++++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/utils.test.ts b/site/src/pages/AgentsPage/components/ChatElements/tools/utils.test.ts
index e046f14bcf..2f462e255d 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/utils.test.ts
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/utils.test.ts
@@ -855,6 +855,17 @@ describe("constants", () => {
 	it("diffViewerCSS includes border-left style", () => {
 		expect(diffViewerCSS).toContain("border-left");
 	});
+
+	it("diffViewerCSS uses theme-aware changed line backgrounds", () => {
+		expect(diffViewerCSS).toContain("--diffs-addition-color-override");
+		expect(diffViewerCSS).toContain("--diffs-deletion-color-override");
+		expect(diffViewerCSS).toContain("--diffs-bg-addition-override");
+		expect(diffViewerCSS).toContain("--diffs-bg-deletion-override");
+		expect(diffViewerCSS).toContain("var(--surface-git-added)");
+		expect(diffViewerCSS).toContain("var(--surface-git-deleted)");
+		expect(diffViewerCSS).toContain("[data-line-type='change-addition']");
+		expect(diffViewerCSS).toContain("[data-line-type='change-deletion']");
+	});
 });
 
 describe("parseServerEditResults", () => {
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts b/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts
index 5e5074a7f9..467a7387bd 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts
@@ -332,11 +332,27 @@ const DIFF_HEADER_CSS = [
 	"}",
 ].join(" ");
 
+const CHANGE_LINE_CSS = [
+	":host {",
+	"  --diffs-addition-color-override: hsl(var(--git-added));",
+	"  --diffs-deletion-color-override: hsl(var(--git-deleted));",
+	"  --diffs-bg-addition-override: hsl(var(--surface-git-added));",
+	"  --diffs-bg-deletion-override: hsl(var(--surface-git-deleted));",
+	"  --diffs-bg-addition-number-override: hsl(var(--surface-git-added));",
+	"  --diffs-bg-deletion-number-override: hsl(var(--surface-git-deleted));",
+	"}",
+	"[data-line-type='change-addition']:not([data-selected-line]) {",
+	"  background-color: hsl(var(--surface-git-added)) !important;",
+	"}",
+	"[data-line-type='change-deletion']:not([data-selected-line]) {",
+	"  background-color: hsl(var(--surface-git-deleted)) !important;",
+	"}",
+].join(" ");
+
 export const diffViewerCSS = [
 	// 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.
+	// while changed lines use the same theme-aware git surfaces as
+	// the file headers and stats.
 	"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); }",
 	// The library reserves a 6 px horizontal scrollbar track on
@@ -345,6 +361,7 @@ export const diffViewerCSS = [
 	"[data-code] { scrollbar-width: none !important; }",
 	"[data-code]::-webkit-scrollbar { height: 0 !important; }",
 	DIFF_HEADER_CSS,
+	CHANGE_LINE_CSS,
 	SELECTION_OVERRIDE_CSS,
 	SEPARATOR_CSS,
 ].join(" ");