From ffa9a597dc51aee47f441c346afe4280d1074f83 Mon Sep 17 00:00:00 2001
From: James Long <17031+jlongster@users.noreply.github.com>
Date: Thu, 30 Jul 2026 16:09:44 +0000
Subject: [PATCH] fix(tui): fill hunk header background

---
 packages/tui/src/component/patch-diff.tsx     | 16 +++++++-------
 packages/tui/src/mini/footer.permission.tsx   |  1 -
 packages/tui/src/mini/scrollback.writer.tsx   |  1 -
 packages/tui/src/routes/session/index.tsx     |  6 ++----
 .../tui/src/routes/session/permission.tsx     |  3 +--
 .../tui/test/component/patch-diff.test.tsx    | 21 ++++++++++++++-----
 6 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/tui/src/component/patch-diff.tsx b/packages/tui/src/component/patch-diff.tsx
index a56d118368..aa314354e9 100644
--- a/packages/tui/src/component/patch-diff.tsx
+++ b/packages/tui/src/component/patch-diff.tsx
@@ -4,14 +4,14 @@ import type { JSX } from "@opentui/solid"
 import { createMemo, For, Show, splitProps } from "solid-js"
 import { splitPatchHunks } from "../util/diff"
 
-type Props = Omit<JSX.IntrinsicElements["diff"], "diff"> & {
+type Props = Omit<JSX.IntrinsicElements["diff"], "diff" | "lineNumberBg"> & {
   diff: string
-  hunkBg: ColorInput
   hunkFg: ColorInput
+  lineNumberBg: ColorInput
 }
 
 export function PatchDiff(props: Props) {
-  const [local, diffProps] = splitProps(props, ["diff", "hunkBg", "hunkFg"])
+  const [local, diffProps] = splitProps(props, ["diff", "hunkFg", "lineNumberBg"])
   const hunks = createMemo(() => splitPatchHunks(local.diff))
 
   return (
@@ -19,11 +19,13 @@ export function PatchDiff(props: Props) {
       {(hunk, index) => (
         <>
           <Show when={index() > 0}>
-            <text width="100%" height={1} fg={local.hunkFg} bg={local.hunkBg}>
-              {hunk.header ?? ""}
-            </text>
+            <box width="100%" height={1} backgroundColor={local.lineNumberBg}>
+              <text fg={local.hunkFg} bg={local.lineNumberBg}>
+                {hunk.header ?? ""}
+              </text>
+            </box>
           </Show>
-          <diff {...diffProps} diff={hunk.patch} minHeight={hunk.rows} />
+          <diff {...diffProps} diff={hunk.patch} minHeight={hunk.rows} lineNumberBg={local.lineNumberBg} />
         </>
       )}
     </For>
diff --git a/packages/tui/src/mini/footer.permission.tsx b/packages/tui/src/mini/footer.permission.tsx
index 3e1c6c002f..4d28bbcc2c 100644
--- a/packages/tui/src/mini/footer.permission.tsx
+++ b/packages/tui/src/mini/footer.permission.tsx
@@ -408,7 +408,6 @@ export function RunPermissionBody(props: {
                   >
                     <PatchDiff
                       diff={info().diff!}
-                      hunkBg={props.block.diffContextBg}
                       hunkFg={props.block.diffLineNumber}
                       view="unified"
                       filetype={ft()}
diff --git a/packages/tui/src/mini/scrollback.writer.tsx b/packages/tui/src/mini/scrollback.writer.tsx
index ce060f900a..aec12e7e84 100644
--- a/packages/tui/src/mini/scrollback.writer.tsx
+++ b/packages/tui/src/mini/scrollback.writer.tsx
@@ -181,7 +181,6 @@ export function RunEntryContent(props: {
                 <box width="100%" paddingLeft={1}>
                   <PatchDiff
                     diff={item.diff}
-                    hunkBg={diffBg(theme().block.diffContextBg)}
                     hunkFg={theme().block.diffLineNumber}
                     view="unified"
                     filetype={toolFiletype(item.file)}
diff --git a/packages/tui/src/routes/session/index.tsx b/packages/tui/src/routes/session/index.tsx
index b83b8595bf..a3c2da2c3c 100644
--- a/packages/tui/src/routes/session/index.tsx
+++ b/packages/tui/src/routes/session/index.tsx
@@ -3030,8 +3030,7 @@ function Edit(props: ToolProps) {
             <box paddingLeft={1}>
               <PatchDiff
                 diff={item().patch}
-                hunkBg={theme.diff.background.context}
-                hunkFg={theme.diff.lineNumber.text}
+                hunkFg={theme.diff.text.hunkHeader}
                 view={view()}
                 filetype={filetype(path())}
                 syntaxStyle={syntax()}
@@ -3121,8 +3120,7 @@ function ApplyPatch(props: ToolProps) {
                   <box paddingLeft={1}>
                     <PatchDiff
                       diff={file.patch}
-                      hunkBg={theme.diff.background.context}
-                      hunkFg={theme.diff.lineNumber.text}
+                      hunkFg={theme.diff.text.hunkHeader}
                       view={view()}
                       filetype={filetype(file.relativePath)}
                       syntaxStyle={syntax()}
diff --git a/packages/tui/src/routes/session/permission.tsx b/packages/tui/src/routes/session/permission.tsx
index 3da0f5cc3b..d2a9ee10dd 100644
--- a/packages/tui/src/routes/session/permission.tsx
+++ b/packages/tui/src/routes/session/permission.tsx
@@ -53,8 +53,7 @@ function EditBody(props: { file?: string; diff?: string; patch?: string }) {
         >
           <PatchDiff
             diff={diff()}
-            hunkBg={theme.diff.background.context}
-            hunkFg={theme.diff.lineNumber.text}
+            hunkFg={theme.diff.text.hunkHeader}
             view={view()}
             filetype={ft()}
             syntaxStyle={syntax()}
diff --git a/packages/tui/test/component/patch-diff.test.tsx b/packages/tui/test/component/patch-diff.test.tsx
index c4332592da..f3e20ca8f7 100644
--- a/packages/tui/test/component/patch-diff.test.tsx
+++ b/packages/tui/test/component/patch-diff.test.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @opentui/solid */
 import { afterEach, expect, test } from "bun:test"
-import { DiffRenderable, type Renderable, SyntaxStyle } from "@opentui/core"
+import { DiffRenderable, parseColor, type Renderable, SyntaxStyle } from "@opentui/core"
 import { testRender } from "@opentui/solid"
 import { PatchDiff } from "../../src/component/patch-diff"
 
@@ -29,8 +29,8 @@ test("renders separate diff nodes with a full-width hunk row", async () => {
       <box width={120}>
         <PatchDiff
           diff={patch}
-          hunkBg="#222222"
           hunkFg="#888888"
+          lineNumberBg="#222222"
           view="split"
           filetype="typescript"
           syntaxStyle={SyntaxStyle.create()}
@@ -44,12 +44,23 @@ test("renders separate diff nodes with a full-width hunk row", async () => {
   const frame = await app.waitForFrame((value) =>
     value.includes("@@ -20,3 +20,3 @@"),
   )
-  const header = frame
-    .split("\n")
-    .find((line) => line.includes("@@ -20,3 +20,3 @@"))
+  const headerRow = frame.split("\n").findIndex((line) => line.includes("@@ -20,3 +20,3 @@"))
+  const header = frame.split("\n")[headerRow]
+  const background = parseColor("#222222")
 
   expect(header?.startsWith("@@ -20,3 +20,3 @@")).toBe(true)
   expect(header?.trimEnd()).toBe("@@ -20,3 +20,3 @@")
+  expect(
+    app
+      .captureSpans()
+      .lines[headerRow].spans.every(
+        (span) =>
+          span.bg.r === background.r &&
+          span.bg.g === background.g &&
+          span.bg.b === background.b &&
+          span.bg.a === background.a,
+      ),
+  ).toBe(true)
   expect(findDiffs(app.renderer.root)).toHaveLength(2)
 })