feat(ui): hatch empty split diff cells

Author: benvinegar

.changeset/split-empty-hatch.md

@@ -0,0 +1,5 @@
+---
+"hunkdiff": patch
+---
+
+In split view, render the side with no equivalent code as a dim diagonal hatch (`╲`) over a faint wash instead of a flat grey filler block, so absent regions read as faded-out without a heavy background.

src/ui/diff/renderRows.tsx

@@ -11,6 +11,9 @@ import type { DiffRow, RenderSpan, SplitLineCell, StackLineCell } from "./pierre
 import {
   diffRailMarker,
   dimRailColor,
+  EMPTY_CELL_HATCH_GLYPH,
+  emptyHatchBg,
+  emptyHatchColor,
   neutralRailColor,
   selectionHighlightBg,
   splitCellPalette,
@@ -849,6 +852,23 @@ function applySelectionPrefix<P extends { bg: string }>(prefix: P, theme: AppThe
   };
 }
 
+/**
+ * Render the diagonal-hatch content for a split cell that has no line on this side.
+ *
+ * Returns a single fixed-width span of {@link EMPTY_CELL_HATCH_GLYPH} so an absent region reads as
+ * "nothing here" without painting a flat filler background.
+ */
+function renderEmptyHatch(width: number, theme: AppTheme, keyPrefix: string) {
+  if (width <= 0) {
+    return null;
+  }
+  return (
+    <span key={`${keyPrefix}:hatch`} fg={emptyHatchColor(theme)} bg={emptyHatchBg(theme)}>
+      {EMPTY_CELL_HATCH_GLYPH.repeat(width)}
+    </span>
+  );
+}
+
 /** Render one split-view cell as prefix + gutter + content spans. */
 function renderSplitCell(
   cell: SplitLineCell,
@@ -902,16 +922,18 @@ function renderSplitCell(
       <span key={`${keyPrefix}:gutter`} fg={palette.numberColor} bg={palette.gutterBg}>
         {gutterText}
       </span>
-      {renderInlineSpans(
-        cell.spans,
-        contentWidth,
-        theme.syntaxColors.default,
-        palette.contentBg,
-        `${keyPrefix}:content`,
-        contentOffset,
-        selected ? theme : undefined,
-        localColRange,
-      )}
+      {cell.kind === "empty"
+        ? renderEmptyHatch(contentWidth, theme, `${keyPrefix}:content`)
+        : renderInlineSpans(
+            cell.spans,
+            contentWidth,
+            theme.syntaxColors.default,
+            palette.contentBg,
+            `${keyPrefix}:content`,
+            contentOffset,
+            selected ? theme : undefined,
+            localColRange,
+          )}
     </>
   );
 }
@@ -996,6 +1018,7 @@ function renderWrappedSplitCellLine(
   selected = false,
   selectionColRange?: CopySelectedRowRange,
   paneOffset = 0,
+  isEmptyCell = false,
 ) {
   const resolvedPalette = selected ? applySelectionPalette(palette, theme) : palette;
   const resolvedPrefix = selected ? applySelectionPrefix(prefix, theme) : prefix;
@@ -1026,16 +1049,18 @@ function renderWrappedSplitCellLine(
       >
         {line.gutterText}
       </span>
-      {renderInlineSpans(
-        line.spans,
-        contentWidth,
-        theme.syntaxColors.default,
-        resolvedPalette.contentBg,
-        `${keyPrefix}:content`,
-        0,
-        selected ? theme : undefined,
-        localColRange,
-      )}
+      {isEmptyCell
+        ? renderEmptyHatch(contentWidth, theme, `${keyPrefix}:content`)
+        : renderInlineSpans(
+            line.spans,
+            contentWidth,
+            theme.syntaxColors.default,
+            resolvedPalette.contentBg,
+            `${keyPrefix}:content`,
+            0,
+            selected ? theme : undefined,
+            localColRange,
+          )}
     </>
   );
 }
@@ -1549,6 +1574,7 @@ function renderRow(
                       hasLeftSelection,
                       hasLeftSelection ? copySelectedRowRange : undefined,
                       0,
+                      row.left.kind === "empty",
                     )}
                     {renderWrappedSplitCellLine(
                       rightLine,
@@ -1560,6 +1586,7 @@ function renderRow(
                       hasRightSelection,
                       hasRightSelection ? copySelectedRowRange : undefined,
                       leftWidth,
+                      row.right.kind === "empty",
                     )}
                     {guideOnNewSide ? (
                       <span key={`${row.key}:note-guide:${index}`} fg={theme.noteBorder}>

src/ui/diff/rowStyle.ts

@@ -10,6 +10,32 @@ export function diffRailMarker() {
   return "▌";
 }
 
+/**
+ * Glyph tiled across a split-view cell that has no equivalent line on this side.
+ *
+ * The light diagonal (U+2572, upper-left to lower-right) tiles into continuous diagonal lines,
+ * reading as a "nothing here" hatch rather than as code. We use this direction over U+2571 so a
+ * row of hatch does not resemble a leading `//` comment. Rendered instead of a flat filler block so
+ * absent regions stay legible without a heavy grey background.
+ */
+export const EMPTY_CELL_HATCH_GLYPH = "╲";
+
+/** Dim foreground for the empty-cell diagonal hatch, kept subtle against the panel background. */
+export function emptyHatchColor(theme: AppTheme) {
+  return blendHex(theme.lineNumberFg, theme.background, 0.55);
+}
+
+/**
+ * Faint background tint behind the empty-cell hatch.
+ *
+ * A subtle muted wash under the diagonal lines reads as a faded/disabled region without the heavy
+ * grey filler block. Kept lighter than {@link AppTheme.panelAlt} so the hatch, not the fill, carries
+ * the "absent" cue.
+ */
+export function emptyHatchBg(theme: AppTheme) {
+  return blendHex(theme.lineNumberFg, theme.background, 0.1);
+}
+
 /**
  * Blend a base cell background toward the selection highlight color.
  *
@@ -91,9 +117,11 @@ export function splitCellPalette(
   }
 
   if (kind === "empty") {
+    // The cell renders a diagonal hatch over a faint muted wash (not a flat grey filler block),
+    // so the gutter and content share the subtle "faded/disabled" background.
     return {
-      gutterBg: theme.lineNumberBg,
-      contentBg: theme.panelAlt,
+      gutterBg: emptyHatchBg(theme),
+      contentBg: emptyHatchBg(theme),
       signColor: theme.muted,
       numberColor: theme.lineNumberFg,
     };

src/ui/staticDiffPager.test.ts

@@ -79,6 +79,26 @@ describe("static diff pager", () => {
     expect(plain).not.toContain("▌  1 +  const value = 2;");
   });
 
+  test("hatches the empty side of a split row instead of a flat filler block", async () => {
+    const patchText =
+      "diff --git a/a.ts b/a.ts\n--- a/a.ts\n+++ b/a.ts\n@@ -1 +1,2 @@\n const keep = 1;\n+const added = 2;\n";
+
+    const plain = stripAnsi(
+      await renderStaticDiffPager(
+        patchText,
+        { mode: "split" },
+        { terminalColumns: 80, stderr: { write: () => true } },
+      ),
+    );
+    const addedRow = plain.split("\n").find((line) => line.includes("const added"));
+
+    expect(addedRow).toBeDefined();
+    // The new line lands on the right; the absent left side is hatched, not left blank or filled.
+    expect(addedRow).toContain("╲");
+    expect(addedRow).toContain("+ const added = 2;");
+    expect(addedRow!.indexOf("╲")).toBeLessThan(addedRow!.indexOf("const added"));
+  });
+
   test("keeps auto mode stacked in static pager output", async () => {
     const patchText =
       "diff --git a/a.ts b/a.ts\n--- a/a.ts\n+++ b/a.ts\n@@ -1 +1 @@\n-const value = 1;\n+const value = 2;\n";

src/ui/staticDiffPager.ts

@@ -27,6 +27,9 @@ import {
 import { resolveSplitPaneWidths, resolveSplitCellGeometry } from "./diff/codeColumns";
 import {
   diffRailMarker,
+  EMPTY_CELL_HATCH_GLYPH,
+  emptyHatchBg,
+  emptyHatchColor,
   neutralRailColor,
   splitCellPalette,
   splitGutterText,
@@ -184,11 +187,22 @@ function renderStaticSplitCell(
     gutterWidth,
   );
 
+  // Absent side: tile a diagonal hatch over the neutral surface instead of a flat filler block,
+  // matching the interactive renderer's "nothing here" cue.
+  const content =
+    cell.kind === "empty"
+      ? colorText(
+          EMPTY_CELL_HATCH_GLYPH.repeat(Math.max(0, contentWidth)),
+          emptyHatchColor(theme),
+          emptyHatchBg(theme),
+        )
+      : serializeSpansFixedWidth(cell.spans, palette.contentBg, contentWidth);
+
   return `${colorText(marker(), railColor, theme.panel)}${colorText(
     gutterText,
     palette.numberColor,
     palette.gutterBg,
-  )}${serializeSpansFixedWidth(cell.spans, palette.contentBg, contentWidth)}`;
+  )}${content}`;
 }
 
 /** Render one non-interactive split diff row as ANSI text. */