@heyhuynhgiabuu/pi-diff 0.6.0 → 0.6.2

package/dist/index.js

@@ -24,22 +24,22 @@ import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { extname, relative } from "node:path";
 import { codeToANSI } from "@shikijs/cli";
 import * as Diff from "diff";
-import { computeHunkBlocks, getSepStyle, parseDiff, parsePatchFiles, resolveSepStyle, sepLabelSplit, sepLabelUnified } from "./core/diff.js";
 import { configIndicatorStyle } from "./core/config.js";
+import { computeHunkBlocks, getSepStyle, parseDiff, parsePatchFiles, resolveSepStyle, sepLabelSplit, sepLabelUnified, } from "./core/diff.js";
+import { replace } from "./core/replace.js";
 import { resolveLinesFromPatch } from "./core/resolve-lines.js";
 import { registerReviewDiffCommand } from "./review/command.js";
-import { replace } from "./core/replace.js";
 import { applyDiffPalette as applySharedDiffPalette, lang as detectDiffLanguage, renderSplit as renderSharedSplit, resolveDiffColors as resolveSharedDiffColors, themeCacheKey as sharedThemeCacheKey, } from "./review/hunk-preview.js";
 const DIFF_PRESETS = {
     default: {
         name: "default",
         description: "Original pi-diff colors — tuned for dark theme bases (~#1e1e2e)",
-        bgAdd: "#162620",
-        bgDel: "#2d1919",
-        bgAddHighlight: "#234b32",
-        bgDelHighlight: "#502323",
-        bgGutterAdd: "#12201a",
-        bgGutterDel: "#261616",
+        bgAdd: "#1a3324",
+        bgDel: "#3d2020",
+        bgAddHighlight: "#2d5c3a",
+        bgDelHighlight: "#5c2d2d",
+        bgGutterAdd: "#16281e",
+        bgGutterDel: "#301c1c",
         bgEmpty: "#121212",
         fgDim: "#505050",
         fgLnum: "#646464",
@@ -50,12 +50,12 @@ const DIFF_PRESETS = {
     midnight: {
         name: "midnight",
         description: "Subtle tints for pure black (#000000) terminal backgrounds",
-        bgAdd: "#0d1a12",
-        bgDel: "#1a0d0d",
+        bgAdd: "#101e15",
+        bgDel: "#1e1010",
         bgAddHighlight: "#1a3825",
         bgDelHighlight: "#381a1a",
-        bgGutterAdd: "#091208",
-        bgGutterDel: "#120908",
+        bgGutterAdd: "#0c180c",
+        bgGutterDel: "#180c0c",
         bgEmpty: "#080808",
         fgDim: "#404040",
         fgLnum: "#505050",
@@ -66,12 +66,12 @@ const DIFF_PRESETS = {
     subtle: {
         name: "subtle",
         description: "Minimal backgrounds — barely-there tints for a clean look",
-        bgAdd: "#081008",
-        bgDel: "#100808",
+        bgAdd: "#0c160c",
+        bgDel: "#160c0c",
         bgAddHighlight: "#122818",
         bgDelHighlight: "#281212",
-        bgGutterAdd: "#060c06",
-        bgGutterDel: "#0c0606",
+        bgGutterAdd: "#080e08",
+        bgGutterDel: "#0e0808",
         bgEmpty: "#060606",
         fgDim: "#383838",
         fgLnum: "#484848",
@@ -82,12 +82,12 @@ const DIFF_PRESETS = {
     neon: {
         name: "neon",
         description: "Higher contrast backgrounds for better visibility",
-        bgAdd: "#1a3320",
-        bgDel: "#331a16",
+        bgAdd: "#1e3a28",
+        bgDel: "#3a1c18",
         bgAddHighlight: "#2d5c3a",
         bgDelHighlight: "#5c2d2d",
-        bgGutterAdd: "#142818",
-        bgGutterDel: "#28120e",
+        bgGutterAdd: "#182c1c",
+        bgGutterDel: "#2c1410",
         bgEmpty: "#141414",
         fgDim: "#606060",
         fgLnum: "#787878",
@@ -182,22 +182,22 @@ function autoDeriveBgFromTheme(theme) {
                 /* no toolErrorBg — use toolSuccessBg/black */
             }
         }
-        // Line backgrounds — subtle accent mixed into the matching tool-state base (8–10%)
-        BG_ADD = mixBg(addBase, addRgb, 0.08);
-        BG_DEL = mixBg(delBase, delRgb, 0.1);
-        // Word-level highlights — more visible (20–22%)
-        BG_ADD_W = mixBg(addBase, addRgb, 0.2);
-        BG_DEL_W = mixBg(delBase, delRgb, 0.22);
-        // Gutters — subtler than lines (5–6%)
-        BG_GUTTER_ADD = mixBg(addBase, addRgb, 0.05);
-        BG_GUTTER_DEL = mixBg(delBase, delRgb, 0.06);
+        // Line backgrounds — visible accent mixed into the matching tool-state base (15–18%)
+        BG_ADD = mixBg(addBase, addRgb, 0.15);
+        BG_DEL = mixBg(delBase, delRgb, 0.18);
+        // Word-level highlights — more prominent (30–35%)
+        BG_ADD_W = mixBg(addBase, addRgb, 0.3);
+        BG_DEL_W = mixBg(delBase, delRgb, 0.35);
+        // Gutters — slightly subtler than lines (10–12%)
+        BG_GUTTER_ADD = mixBg(addBase, addRgb, 0.1);
+        BG_GUTTER_DEL = mixBg(delBase, delRgb, 0.12);
         // Empty filler and context — match the success/context base
         BG_EMPTY = BG_BASE;
         // Update RST to re-apply base bg after every reset — prevents black
         // flashes between styled segments when toolSuccessBg is non-black
         RST = `\x1b[0m${BG_BASE}`;
         // Rebuild derived constants
-        DIVIDER = `${FG_RULE}│${RST}`;
+        DIVIDER = `${FG_RULE}${RST}`;
     }
     catch {
         // Fall back to defaults silently
@@ -205,7 +205,10 @@ function autoDeriveBgFromTheme(theme) {
 }
 /** Load diff theme config from .pi/settings.json (project-level, then global). */
 function loadDiffConfig() {
-    const paths = [`${process.cwd()}/.pi/settings.json`, `${process.env.HOME ?? ""}/.pi/settings.json`];
+    const paths = [
+        `${process.cwd()}/.pi/settings.json`,
+        `${process.env.HOME ?? ""}/.pi/settings.json`,
+    ];
     for (const p of paths) {
         try {
             if (existsSync(p)) {
@@ -304,7 +307,7 @@ function applyDiffPalette() {
     if (shiki)
         THEME = shiki;
     // --- Rebuild derived constants ---
-    DIVIDER = `${FG_RULE}│${RST}`;
+    DIVIDER = `${FG_RULE}${RST}`;
     DEFAULT_DIFF_COLORS = { fgAdd: FG_ADD, fgDel: FG_DEL, fgCtx: FG_DIM };
     // If no explicit bg config, auto-derive will run on first render
     _autoDerivePending = !_hasExplicitBgConfig;
@@ -339,10 +342,10 @@ function envBg(name, fallback) {
 // --- Split-view thresholds ---
 // Split is preferred when there's real room. At narrow widths, a clean stacked
 // (unified) view is better than a cramped split with wrapping.
-const SPLIT_MIN_WIDTH = envInt("DIFF_SPLIT_MIN_WIDTH", 150); // need ≥150 cols for split to breathe
-const SPLIT_MIN_CODE_WIDTH = envInt("DIFF_SPLIT_MIN_CODE_WIDTH", 60); // ≥60 code cols per side
-const SPLIT_MAX_WRAP_RATIO = 0.2; // if >20% lines wrap in split, fall back to stacked
-const SPLIT_MAX_WRAP_LINES = 8; // absolute cap before unified fallback
+const SPLIT_MIN_WIDTH = envInt("DIFF_SPLIT_MIN_WIDTH", 80); // allow split in normal terminals
+const SPLIT_MIN_CODE_WIDTH = envInt("DIFF_SPLIT_MIN_CODE_WIDTH", 24); // short balanced hunks can split
+const SPLIT_MAX_WRAP_RATIO = 0.35; // wrap-heavy hunks fall back to unified
+const SPLIT_MAX_WRAP_LINES = 10; // absolute cap before unified fallback
 // --- Terminal bounds ---
 const MAX_TERM_WIDTH = 210; // max for 1728px wide display (~205 cols at typical font)
 const DEFAULT_TERM_WIDTH = 200; // safe default for 1728x1117 resolution
@@ -363,16 +366,15 @@ const MAX_WRAP_ROWS_NARROW = 1; // <120 cols (truncate, no wrap)
 // ANSI
 // ---------------------------------------------------------------------------
 let RST = "\x1b[0m";
-const BOLD = "\x1b[1m";
 const DIM = "\x1b[2m";
 // Subtle diff backgrounds — muted tones to let syntax fg shine through
 // Override via env: DIFF_BG_ADD="#1a3320" etc. (hex "#RRGGBB" format)
-let BG_ADD = envBg("DIFF_BG_ADD", "\x1b[48;2;22;38;32m"); // muted teal-green
-let BG_DEL = envBg("DIFF_BG_DEL", "\x1b[48;2;45;25;25m"); // muted brown-red
-let BG_ADD_W = envBg("DIFF_BG_ADD_HL", "\x1b[48;2;35;75;50m"); // word-level emphasis
-let BG_DEL_W = envBg("DIFF_BG_DEL_HL", "\x1b[48;2;80;35;35m");
-let BG_GUTTER_ADD = envBg("DIFF_BG_GUTTER_ADD", "\x1b[48;2;18;32;26m");
-let BG_GUTTER_DEL = envBg("DIFF_BG_GUTTER_DEL", "\x1b[48;2;38;22;22m");
+let BG_ADD = envBg("DIFF_BG_ADD", "\x1b[48;2;30;52;40m"); // visible teal-green
+let BG_DEL = envBg("DIFF_BG_DEL", "\x1b[48;2;60;30;30m"); // visible brown-red
+let BG_ADD_W = envBg("DIFF_BG_ADD_HL", "\x1b[48;2;45;90;60m"); // word-level emphasis
+let BG_DEL_W = envBg("DIFF_BG_DEL_HL", "\x1b[48;2;100;45;45m");
+let BG_GUTTER_ADD = envBg("DIFF_BG_GUTTER_ADD", "\x1b[48;2;24;42;32m");
+let BG_GUTTER_DEL = envBg("DIFF_BG_GUTTER_DEL", "\x1b[48;2;48;28;28m");
 const BG_GUTTER_CTX = ""; // use terminal default bg for context gutters
 let BG_EMPTY = "\x1b[48;2;18;18;18m"; // filler rows when one side is shorter
 // Diff foregrounds — override via env: DIFF_FG_ADD="#50d264" etc.
@@ -392,7 +394,7 @@ function getBorderBar() {
 function stripes(w, _rowOffset) {
     return BG_BASE + FG_STRIPE + "╱".repeat(w) + RST;
 }
-let DIVIDER = `${FG_RULE}│${RST}`;
+let DIVIDER = `${FG_RULE}${RST}`;
 const ESC_RE = "\u001b";
 const ANSI_RE = new RegExp(`${ESC_RE}\\[[0-9;]*m`, "g");
 const ANSI_CAPTURE_RE = new RegExp(`${ESC_RE}\\[([^m]*)m`, "g");
@@ -675,13 +677,20 @@ function shouldUseSplit(diff, tw, maxRows = MAX_PREVIEW_LINES) {
     if (tw < SPLIT_MIN_WIDTH)
         return false;
     const nw = Math.max(2, String(Math.max(...diff.lines.map((l) => l.oldNum ?? l.newNum ?? 0), 0)).length);
-    const half = Math.floor((tw - 1) / 2); // -1 for center divider
-    const gw = nw + 5; // border + num + sign + sp + │ + sp
+    const half = Math.floor(tw / 2);
+    const gw = nw + 4; // border + num + spaces around sign
     const cw = Math.max(12, half - gw);
     if (cw < SPLIT_MIN_CODE_WIDTH)
         return false;
-    // Estimate how many lines would need wrapping at this code width
+    // Split view only helps balanced replacements. One-sided or heavily
+    // imbalanced hunks waste a column and should use unified rendering.
     const vis = diff.lines.slice(0, maxRows);
+    const visibleAdd = vis.filter((line) => line.type === "add").length;
+    const visibleDel = vis.filter((line) => line.type === "del").length;
+    if (visibleAdd === 0 || visibleDel === 0)
+        return false;
+    if (Math.max(visibleAdd, visibleDel) > Math.min(visibleAdd, visibleDel) * 2)
+        return false;
     let contentLines = 0;
     let wrapCandidates = 0;
     for (const l of vis) {
@@ -828,8 +837,6 @@ function wordDiffAnalysis(a, b) {
  * Uses sorted-range pointer scan instead of Set (avoids O(totalChars) Set creation).
  */
 function injectBg(ansiLine, ranges, baseBg, hlBg) {
-    if (!ranges.length)
-        return baseBg + ansiLine + RST;
     let out = baseBg;
     let vis = 0;
     let inHL = false;
@@ -898,7 +905,7 @@ async function renderUnified(diff, language, max = MAX_RENDER_LINES, dc = DEFAUL
     const vis = diff.lines.slice(0, max);
     const tw = termW();
     const nw = Math.max(2, String(Math.max(...vis.map((l) => l.oldNum ?? l.newNum ?? 0), 0)).length);
-    const gw = nw + 5; // border + num + sign + sp + │ + sp
+    const gw = nw + 4; // border + num + spaces around sign
     const cw = Math.max(20, tw - gw);
     const canHL = diff.chars <= MAX_HL_CHARS && vis.length <= MAX_RENDER_LINES;
     // Build separate old/new code blocks for highlighting
@@ -910,18 +917,20 @@ async function renderUnified(diff, language, max = MAX_RENDER_LINES, dc = DEFAUL
             newSrc.push(l.content);
     }
     const [oldHL, newHL] = canHL
-        ? await Promise.all([hlBlock(oldSrc.join("\n"), language), hlBlock(newSrc.join("\n"), language)])
+        ? await Promise.all([
+            hlBlock(oldSrc.join("\n"), language),
+            hlBlock(newSrc.join("\n"), language),
+        ])
         : [oldSrc, newSrc];
     let oI = 0, nI = 0, idx = 0;
     const out = [];
-    out.push(rule(tw));
     /** Emit a single stacked row with compact gutter + left border bar. */
     function emitRow(num, sign, gutterBg, signFg, body, bodyBg = "") {
         const borderFg = sign === "-" ? dc.fgDel : sign === "+" ? dc.fgAdd : "";
         const border = borderFg ? `${borderFg}${getBorderBar()}${RST}` : `${BG_BASE} `;
         const numFg = borderFg || FG_LNUM;
-        const gutter = `${border}${gutterBg}${lnum(num, nw, numFg)}${signFg}${sign}${RST} ${DIVIDER} `;
-        const contGutter = `${border}${gutterBg}${" ".repeat(nw + 1)}${RST} ${DIVIDER} `;
+        const gutter = `${border}${gutterBg}${lnum(num, nw, numFg)}${gutterBg} ${signFg}${sign}${gutterBg} ${RST}`;
+        const contGutter = `${border}${gutterBg}${" ".repeat(nw + 3)}${RST}`;
         const rows = wrapAnsi(tabs(body), cw, adaptiveWrapRows(), bodyBg);
         out.push(`${gutter}${rows[0]}${RST}`);
         for (let r = 1; r < rows.length; r++)
@@ -932,6 +941,10 @@ async function renderUnified(diff, language, max = MAX_RENDER_LINES, dc = DEFAUL
         // Hunk separator — collapsed context with optional function context
         if (l.type === "sep") {
             const label = sepLabelUnified(getSepStyle(), l.hunkMeta, l.newNum, l.content);
+            if (!label) {
+                idx++;
+                continue;
+            }
             const totalW = Math.min(tw, 72);
             const pad = Math.max(0, totalW - label.length - 2);
             const half1 = Math.floor(pad / 2), half2 = pad - half1;
@@ -972,27 +985,26 @@ async function renderUnified(diff, language, max = MAX_RENDER_LINES, dc = DEFAUL
         if (isPaired && wdBalanced && wd.similarity >= WORD_DIFF_MIN_SIM && canHL) {
             const delBody = injectBg(dels[0].hl, wd.oldRanges, BG_DEL, BG_DEL_W);
             const addBody = injectBg(adds[0].hl, wd.newRanges, BG_ADD, BG_ADD_W);
-            emitRow(dels[0].l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, delBody, BG_DEL);
-            emitRow(adds[0].l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, addBody, BG_ADD);
+            emitRow(dels[0].l.oldNum, "-", BG_GUTTER_DEL, dc.fgDel, delBody, BG_DEL);
+            emitRow(adds[0].l.newNum, "+", BG_GUTTER_ADD, dc.fgAdd, addBody, BG_ADD);
             continue;
         }
         if (isPaired && wdBalanced && wd.similarity >= WORD_DIFF_MIN_SIM && !canHL) {
             const pwd = plainWordDiff(dels[0].l.content, adds[0].l.content);
-            emitRow(dels[0].l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, `${BG_DEL}${pwd.old}`, BG_DEL);
-            emitRow(adds[0].l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, `${BG_ADD}${pwd.new}`, BG_ADD);
+            emitRow(dels[0].l.oldNum, "-", BG_GUTTER_DEL, dc.fgDel, `${BG_DEL}${pwd.old}`, BG_DEL);
+            emitRow(adds[0].l.newNum, "+", BG_GUTTER_ADD, dc.fgAdd, `${BG_ADD}${pwd.new}`, BG_ADD);
             continue;
         }
         // Multi-line blocks — syntax highlighted with diff bg
         for (const d of dels) {
-            const body = canHL ? `${BG_DEL}${d.hl}` : `${BG_DEL}${d.l.content}`;
-            emitRow(d.l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, body, BG_DEL);
+            const body = canHL ? injectBg(d.hl, [], BG_DEL, BG_DEL) : `${BG_DEL}${d.l.content}`;
+            emitRow(d.l.oldNum, "-", BG_GUTTER_DEL, dc.fgDel, body, BG_DEL);
         }
         for (const a of adds) {
-            const body = canHL ? `${BG_ADD}${a.hl}` : `${BG_ADD}${a.l.content}`;
-            emitRow(a.l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, body, BG_ADD);
+            const body = canHL ? injectBg(a.hl, [], BG_ADD, BG_ADD) : `${BG_ADD}${a.l.content}`;
+            emitRow(a.l.newNum, "+", BG_GUTTER_ADD, dc.fgAdd, body, BG_ADD);
         }
     }
-    out.push(rule(tw));
     if (diff.lines.length > vis.length) {
         out.push(`${BG_BASE}${FG_DIM}  … ${diff.lines.length - vis.length} more lines${RST}`);
     }
@@ -1037,9 +1049,9 @@ async function renderSplit(diff, language, max = MAX_PREVIEW_LINES, dc = DEFAULT
             rows.push({ left: dels[j] ?? null, right: adds[j] ?? null });
     }
     const vis = rows.slice(0, max);
-    const half = Math.floor((tw - 1) / 2); // -1 for center divider
     const nw = Math.max(2, String(Math.max(...diff.lines.map((l) => l.oldNum ?? l.newNum ?? 0), 0)).length);
-    const gw = nw + 5; // border + num + sign + sp + │ + sp
+    const gw = nw + 4; // border + num + spaces around sign
+    const half = Math.floor(tw / 2);
     const cw = Math.max(12, half - gw);
     const canHL = diff.chars <= MAX_HL_CHARS && vis.length * 2 <= MAX_RENDER_LINES * 2;
     // Build separate code blocks per side
@@ -1051,22 +1063,24 @@ async function renderSplit(diff, language, max = MAX_PREVIEW_LINES, dc = DEFAULT
             rightSrc.push(r.right.content);
     }
     const [leftHL, rightHL] = canHL
-        ? await Promise.all([hlBlock(leftSrc.join("\n"), language), hlBlock(rightSrc.join("\n"), language)])
+        ? await Promise.all([
+            hlBlock(leftSrc.join("\n"), language),
+            hlBlock(rightSrc.join("\n"), language),
+        ])
         : [leftSrc, rightSrc];
     let lI = 0, rI = 0;
     let stripeRow = 0; // tracks row index for diagonal stripe offset
     function half_build(line, hl, ranges, side) {
-        // Empty filler — diagonal stripes
+        // Empty filler — render nothing to avoid dead-column gaps.
         if (!line) {
-            const gw2 = nw + 2; // number + sign + space before │
-            const gPat = FG_STRIPE + "╱".repeat(gw2) + RST;
-            const g = ` ${gPat}${FG_RULE}│${RST} `;
-            return { gutter: g, contGutter: g, bodyRows: [stripes(cw, stripeRow)] };
+            return { gutter: "", contGutter: "", bodyRows: [""] };
         }
         // Hunk separator with optional function context
         if (line.type === "sep") {
             const label = sepLabelSplit(getSepStyle(), line.hunkMeta, line.newNum, line.content);
-            const g = `${BG_BASE} ${FG_DIM}${fit("", nw + 2)}${RST}${FG_RULE}│${RST} `;
+            if (!label)
+                return { gutter: "", contGutter: "", bodyRows: [""] };
+            const g = `${BG_BASE} ${FG_DIM}${fit("", nw + 3)}${RST}`;
             return { gutter: g, contGutter: g, bodyRows: [`${BG_BASE}${FG_DIM}${fit(label, cw)}${RST}`] };
         }
         const isDel = line.type === "del", isAdd = line.type === "add";
@@ -1074,7 +1088,13 @@ async function renderSplit(diff, language, max = MAX_PREVIEW_LINES, dc = DEFAULT
         const cBg = isDel ? BG_DEL : isAdd ? BG_ADD : BG_BASE;
         const sFg = isDel ? dc.fgDel : isAdd ? dc.fgAdd : dc.fgCtx;
         const sign = isDel ? "-" : isAdd ? "+" : " ";
-        const num = isDel ? line.oldNum : isAdd ? line.newNum : side === "left" ? line.oldNum : line.newNum;
+        const num = isDel
+            ? line.oldNum
+            : isAdd
+                ? line.newNum
+                : side === "left"
+                    ? line.oldNum
+                    : line.newNum;
         // Border bar + colored line numbers for changed lines
         const borderFg = isDel ? dc.fgDel : isAdd ? dc.fgAdd : "";
         const border = borderFg ? `${borderFg}${getBorderBar()}${RST}` : ` ${BG_BASE}`;
@@ -1084,13 +1104,13 @@ async function renderSplit(diff, language, max = MAX_PREVIEW_LINES, dc = DEFAULT
             body = injectBg(hl, ranges, cBg, isDel ? BG_DEL_W : BG_ADD_W);
         }
         else if (isDel || isAdd) {
-            body = `${cBg}${hl}`;
+            body = injectBg(hl, [], cBg, cBg);
         }
         else {
             body = `${BG_BASE}${DIM}${hl}`;
         }
-        const gutter = `${border}${gBg}${lnum(num, nw, numFg)}${sFg}${BOLD}${sign}${RST} ${FG_RULE}│${RST} `;
-        const contGutter = `${border}${gBg}${" ".repeat(nw + 1)}${RST} ${FG_RULE}│${RST} `;
+        const gutter = `${border}${gBg}${lnum(num, nw, numFg)}${gBg} ${sFg}${sign}${gBg} ${RST}`;
+        const contGutter = `${border}${gBg}${" ".repeat(nw + 3)}${RST}`;
         const bodyRows = wrapAnsi(tabs(body), cw, adaptiveWrapRows(), cBg);
         return { gutter, contGutter, bodyRows };
     }
@@ -1098,8 +1118,7 @@ async function renderSplit(diff, language, max = MAX_PREVIEW_LINES, dc = DEFAULT
     // Column headers — "old" / "new" positioned above line numbers
     const hdrOld = `${BG_BASE}${" ".repeat(Math.max(0, nw - 2))}${dc.fgDel}${DIM}old${RST}`;
     const hdrNew = `${BG_BASE}${" ".repeat(Math.max(0, nw - 2))}${dc.fgAdd}${DIM}new${RST}`;
-    out.push(`${BG_BASE}${hdrOld}${" ".repeat(Math.max(0, half - nw - 1))}${FG_RULE}┊${RST}${hdrNew}`);
-    out.push(`${rule(half)}${FG_RULE}┊${RST}${rule(half)}`);
+    out.push(`${BG_BASE}${hdrOld}${" ".repeat(Math.max(0, half - nw))}${hdrNew}`);
     for (const r of vis) {
         const leftLine = r.left, rightLine = r.right;
         const paired = leftLine && rightLine && leftLine.type === "del" && rightLine.type === "add";
@@ -1124,20 +1143,19 @@ async function renderSplit(diff, language, max = MAX_PREVIEW_LINES, dc = DEFAULT
             lResult = half_build(leftLine, lhl, null, "left");
             rResult = half_build(rightLine, rhl, null, "right");
         }
-        // Compose wrapped rows — pad shorter side with striped continuation rows
+        // Compose wrapped rows; missing sides render empty to avoid dead-column gaps.
         const maxRows = Math.max(lResult.bodyRows.length, rResult.bodyRows.length);
-        const leftIsEmpty = !r.left;
-        const rightIsEmpty = !r.right;
         for (let row = 0; row < maxRows; row++) {
             const lg = row === 0 ? lResult.gutter : lResult.contGutter;
             const rg = row === 0 ? rResult.gutter : rResult.contGutter;
-            const lb = lResult.bodyRows[row] ?? (leftIsEmpty ? stripes(cw, stripeRow) : `${BG_EMPTY}${" ".repeat(cw)}${RST}`);
-            const rb = rResult.bodyRows[row] ?? (rightIsEmpty ? stripes(cw, stripeRow) : `${BG_EMPTY}${" ".repeat(cw)}${RST}`);
-            out.push(`${lg}${lb}${DIVIDER}${rg}${rb}`);
+            const lb = lResult.bodyRows[row] ?? "";
+            const rb = rResult.bodyRows[row] ?? "";
+            if (!lg && !rg && !lb && !rb)
+                continue;
+            out.push(`${lg}${lb.trimEnd()}${rg}${rb.trimEnd()}`);
             stripeRow++;
         }
     }
-    out.push(`${rule(half)}${FG_RULE}┊${RST}${rule(half)}`);
     if (rows.length > vis.length) {
         out.push(`${BG_BASE}${FG_DIM}  … ${rows.length - vis.length} more lines${RST}`);
     }
@@ -1180,6 +1198,70 @@ export default async function diffRendererExtension(pi) {
     const cwd = process.cwd();
     const home = process.env.HOME ?? "";
     const sp = (p) => shortPath(cwd, home, p);
+    const TOOL_HEADER_LEFT_PAD = 2;
+    const TOOL_HEADER_TOP_PAD = 1;
+    const TOOL_PREVIEW_BOTTOM_PAD = 1;
+    const DIFF_BODY_LEFT_PAD = 1;
+    function resolvePreviewDiffColors(theme) {
+        resolveDiffColors(theme);
+        return resolveSharedDiffColors(theme);
+    }
+    function bgLine(content, width) {
+        const renderWidth = Math.max(1, width);
+        const padding = " ".repeat(Math.max(0, renderWidth - strip(content).length));
+        return injectBg(`${content}${padding}`, [], BG_BASE, BG_BASE);
+    }
+    function formatToolHeader(summary, width) {
+        const leftPad = " ".repeat(TOOL_HEADER_LEFT_PAD);
+        const meta = `${leftPad}${summary}`;
+        return bgLine(meta, width);
+    }
+    function formatToolTitle(label, filePath, theme, width, suffix = "") {
+        const leftPad = " ".repeat(TOOL_HEADER_LEFT_PAD);
+        const displayPath = filePath ? ` ${theme.fg("accent", sp(filePath))}` : "";
+        const top = Array.from({ length: TOOL_HEADER_TOP_PAD }, () => bgLine("", width));
+        return [
+            ...top,
+            bgLine(`${leftPad}${theme.fg("toolTitle", theme.bold(label))}${displayPath}${suffix}`, width),
+        ].join("\n");
+    }
+    function formatBottomPadding(width) {
+        return Array.from({ length: TOOL_PREVIEW_BOTTOM_PAD }, () => bgLine("", width)).join("\n");
+    }
+    function padDiffBody(rendered) {
+        const leftPad = `${BG_BASE}${" ".repeat(DIFF_BODY_LEFT_PAD)}${RST}`;
+        return rendered
+            .split("\n")
+            .map((line) => `${leftPad}${line}`)
+            .join("\n");
+    }
+    async function renderPaddedDiff(diff, language, maxLines, colors, width) {
+        const bodyWidth = Math.max(1, width - DIFF_BODY_LEFT_PAD);
+        return padDiffBody(await renderSharedSplit(diff, language, maxLines, colors, bodyWidth));
+    }
+    function diffLineCountLabel(diffLineCount, theme) {
+        if (typeof diffLineCount !== "number")
+            return "";
+        return ` ${theme.fg("muted", `(${diffLineCount} diff lines)`)}`;
+    }
+    function setToolHeaderText(text, meta, theme) {
+        resolvePreviewDiffColors(theme);
+        text.__piDiffTask = undefined;
+        const width = termW();
+        text.setText(`${formatToolHeader(meta, width)}\n${formatBottomPadding(width)}`);
+    }
+    function setDiffPreviewTask(text, keyPrefix, meta, diff, language, maxLines, theme, ctx) {
+        const themeKey = sharedThemeCacheKey(theme);
+        const colors = resolvePreviewDiffColors(theme);
+        const header = (width) => formatToolHeader(meta, width);
+        text.__piDiffTask = {
+            placeholder: `${header(termW())}\n${padDiffBody(theme.fg("muted", "rendering diff…"))}\n${formatBottomPadding(termW())}`,
+            fallback: `${header(termW())}\n${formatBottomPadding(termW())}`,
+            invalidate: ctx.invalidate,
+            key: (width) => `${keyPrefix}:${themeKey}:${width}:${meta}:${diff.lines.length}:${language ?? ""}`,
+            render: async (width) => `${header(width)}\n${await renderPaddedDiff(diff, language, maxLines, colors, width)}\n${formatBottomPadding(width)}`,
+        };
+    }
     /** Wrap a Text component so its render(width) kicks off async diff rendering
      *  using the real TUI width (which accounts for the sidebar). */
     function getWidthAwareText(lastComponent) {
@@ -1214,7 +1296,7 @@ export default async function diffRendererExtension(pi) {
                     });
                 }
             }
-            return text.__piDiffRender(width);
+            return text.__piDiffRender?.(width) ?? [];
         };
         return text;
     }
@@ -1263,7 +1345,11 @@ Examples:
             try {
                 const { existingCode, filePath, patchText, fileContent } = params ?? {};
                 if (!existingCode || !filePath) {
-                    return { content: [{ type: "text", text: "Error: existingCode and filePath are required" }] };
+                    return {
+                        content: [
+                            { type: "text", text: "Error: existingCode and filePath are required" },
+                        ],
+                    };
                 }
                 // Fetch git diff if patchText not provided
                 let patch = patchText;
@@ -1289,25 +1375,42 @@ Examples:
                     }
                     catch {
                         return {
-                            content: [{ type: "text", text: `Error: could not read git diff for ${filePath}` }],
+                            content: [
+                                { type: "text", text: `Error: could not read git diff for ${filePath}` },
+                            ],
                         };
                     }
                 }
                 if (!patch) {
                     return {
-                        content: [{ type: "text", text: `No diff found for ${filePath} — file may not have changes` }],
+                        content: [
+                            {
+                                type: "text",
+                                text: `No diff found for ${filePath} — file may not have changes`,
+                            },
+                        ],
                         details: { unresolved: true },
                     };
                 }
                 const result = resolveLinesFromPatch(existingCode, patch, fileContent);
                 if ("unresolved" in result) {
                     return {
-                        content: [{ type: "text", text: `Could not resolve line numbers for existing_code in ${filePath}` }],
+                        content: [
+                            {
+                                type: "text",
+                                text: `Could not resolve line numbers for existing_code in ${filePath}`,
+                            },
+                        ],
                         details: { unresolved: true },
                     };
                 }
                 return {
-                    content: [{ type: "text", text: `Resolved ${filePath}:${result.startLine}-${result.endLine}` }],
+                    content: [
+                        {
+                            type: "text",
+                            text: `Resolved ${filePath}:${result.startLine}-${result.endLine}`,
+                        },
+                    ],
                     details: { startLine: result.startLine, endLine: result.endLine },
                 };
             }
@@ -1367,11 +1470,24 @@ Examples:
                 const useFull = !!params._expandGaps;
                 const diff = parseDiff(old, content, useFull ? undefined : 3);
                 const lg = detectDiffLanguage(fp);
-                result.details = { _type: "diff", summary: summarize(diff.added, diff.removed), diff, language: lg, oldContent: old, newContent: content };
+                result.details = {
+                    _type: "diff",
+                    summary: summarize(diff.added, diff.removed),
+                    filePath: fp,
+                    diff,
+                    language: lg,
+                    oldContent: old,
+                    newContent: content,
+                };
             }
             else if (old === null) {
                 const lineCount = content ? content.split("\n").length : 0;
-                result.details = { _type: "new", lines: lineCount, content: content ?? "", filePath: fp };
+                result.details = {
+                    _type: "new",
+                    lines: lineCount,
+                    content: content ?? "",
+                    filePath: fp,
+                };
             }
             else if (old === content) {
                 result.details = { _type: "noChange" };
@@ -1431,15 +1547,7 @@ Examples:
             }
             const d = result.details;
             if (d?._type === "diff") {
-                const themeKey = sharedThemeCacheKey(theme);
-                const dc = resolveSharedDiffColors(theme);
-                text.__piDiffTask = {
-                    placeholder: `  ${d.summary}\n${theme.fg("muted", "  rendering diff…")}`,
-                    fallback: `  ${d.summary}`,
-                    invalidate: ctx.invalidate,
-                    key: (width) => `wd:${themeKey}:${width}:${d.summary}:${d.diff?.lines?.length ?? 0}:${d.language ?? ""}`,
-                    render: async (width) => `  ${d.summary}\n${await renderSharedSplit(d.diff, d.language, MAX_RENDER_LINES, dc, width)}`,
-                };
+                setDiffPreviewTask(text, "wd", d.summary, d.diff, d.language, MAX_RENDER_LINES, theme, ctx);
                 return text;
             }
             if (d?._type === "noChange") {
@@ -1486,13 +1594,29 @@ Examples:
         if (Array.isArray(input?.edits)) {
             return input.edits
                 .map((edit) => ({
-                oldText: typeof edit?.oldText === "string" ? edit.oldText : typeof edit?.old_text === "string" ? edit.old_text : "",
-                newText: typeof edit?.newText === "string" ? edit.newText : typeof edit?.new_text === "string" ? edit.new_text : "",
+                oldText: typeof edit?.oldText === "string"
+                    ? edit.oldText
+                    : typeof edit?.old_text === "string"
+                        ? edit.old_text
+                        : "",
+                newText: typeof edit?.newText === "string"
+                    ? edit.newText
+                    : typeof edit?.new_text === "string"
+                        ? edit.new_text
+                        : "",
             }))
                 .filter((edit) => edit.oldText && edit.oldText !== edit.newText);
         }
-        const oldText = typeof input?.oldText === "string" ? input.oldText : typeof input?.old_text === "string" ? input.old_text : "";
-        const newText = typeof input?.newText === "string" ? input.newText : typeof input?.new_text === "string" ? input.new_text : "";
+        const oldText = typeof input?.oldText === "string"
+            ? input.oldText
+            : typeof input?.old_text === "string"
+                ? input.old_text
+                : "";
+        const newText = typeof input?.newText === "string"
+            ? input.newText
+            : typeof input?.new_text === "string"
+                ? input.new_text
+                : "";
         return oldText && oldText !== newText ? [{ oldText, newText }] : [];
     }
     function summarizeEditOperations(operations) {
@@ -1553,6 +1677,7 @@ Examples:
                                 details: {
                                     _type: "editInfo",
                                     summary,
+                                    filePath: fp,
                                     editLine,
                                     diff: diffData,
                                     language: lg,
@@ -1565,7 +1690,16 @@ Examples:
                         // Merge all diffs into one combined view for rendering
                         const merged = {
                             lines: diffs.flatMap((diff, i) => [
-                                ...(i > 0 ? [{ type: "sep", oldNum: null, newNum: null, content: `───── Edit ${i + 1} ─────` }] : []),
+                                ...(i > 0
+                                    ? [
+                                        {
+                                            type: "sep",
+                                            oldNum: null,
+                                            newNum: null,
+                                            content: `───── Edit ${i + 1} ─────`,
+                                        },
+                                    ]
+                                    : []),
                                 ...diff.lines,
                             ]),
                             added: diffs.reduce((sum, diff) => sum + diff.added, 0),
@@ -1577,6 +1711,7 @@ Examples:
                             details: {
                                 _type: "multiEditInfo",
                                 summary,
+                                filePath: fp,
                                 editCount: operations.length,
                                 diffLineCount: merged.lines.length,
                                 diff: merged,
@@ -1615,6 +1750,7 @@ Examples:
                 result.details = {
                     _type: "editInfo",
                     summary,
+                    filePath: fp,
                     editLine,
                     diff: diffData,
                     language: lg,
@@ -1627,7 +1763,16 @@ Examples:
             const merged = {
                 lines: diffs.flatMap((diff, i) => [
                     // Add separator between multiple edits
-                    ...(i > 0 ? [{ type: "sep", oldNum: null, newNum: null, content: `───── Edit ${i + 1} ─────` }] : []),
+                    ...(i > 0
+                        ? [
+                            {
+                                type: "sep",
+                                oldNum: null,
+                                newNum: null,
+                                content: `───── Edit ${i + 1} ─────`,
+                            },
+                        ]
+                        : []),
                     ...diff.lines,
                 ]),
                 added: diffs.reduce((sum, diff) => sum + diff.added, 0),
@@ -1637,6 +1782,7 @@ Examples:
             result.details = {
                 _type: "multiEditInfo",
                 summary,
+                filePath: fp,
                 editCount: operations.length,
                 diffLineCount: merged.lines.length,
                 diff: merged,
@@ -1648,13 +1794,13 @@ Examples:
             const fp = args?.path ?? args?.file_path ?? "";
             const operations = getEditOperations(args);
             const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
-            const hdr = `${theme.fg("toolTitle", theme.bold("edit"))} ${theme.fg("accent", sp(fp))}`;
+            resolvePreviewDiffColors(theme);
             if (ctx.argsComplete && operations.length > 0) {
                 const { totalAdded, totalRemoved } = summarizeEditOperations(operations);
-                text.setText(`${hdr}  ${theme.fg("muted", summarize(totalAdded, totalRemoved))}`);
+                text.setText(formatToolTitle("edit", fp, theme, termW(), `  ${theme.fg("muted", summarize(totalAdded, totalRemoved))}`));
             }
             else {
-                text.setText(hdr);
+                text.setText(formatToolTitle("edit", fp, theme, termW()));
             }
             return text;
         },
@@ -1671,42 +1817,24 @@ Examples:
             }
             const d = result.details;
             if (d?._type === "editInfo" && d.diff) {
-                const themeKey = sharedThemeCacheKey(theme);
-                const dc = resolveSharedDiffColors(theme);
                 const loc = d.editLine > 0 ? ` ${theme.fg("muted", `at line ${d.editLine}`)}` : "";
-                text.__piDiffTask = {
-                    placeholder: `  ${d.summary}${loc}\n${theme.fg("muted", "  rendering diff…")}`,
-                    fallback: `  ${d.summary}${loc}`,
-                    invalidate: ctx.invalidate,
-                    key: (width) => `ed:${themeKey}:${width}:${d.summary}:${d.diff?.lines?.length ?? 0}:${d.language ?? ""}`,
-                    render: async (width) => `  ${d.summary}${loc}\n${await renderSharedSplit(d.diff, d.language, MAX_PREVIEW_LINES, dc, width)}`,
-                };
+                setDiffPreviewTask(text, "ed", `${d.summary}${loc}`, d.diff, d.language, MAX_PREVIEW_LINES, theme, ctx);
                 return text;
             }
             if (d?._type === "editInfo") {
                 const { summary: s, editLine } = d;
                 const loc = editLine > 0 ? ` ${theme.fg("muted", `at line ${editLine}`)}` : "";
-                text.__piDiffTask = undefined;
-                text.setText(`  ${s}${loc}`);
+                setToolHeaderText(text, `${s}${loc}`, theme);
                 return text;
             }
             if (d?._type === "multiEditInfo") {
                 const { summary: s, editCount, diffLineCount, diff, language } = d;
+                const meta = `${editCount} edits ${s}${diffLineCountLabel(diffLineCount, theme)}`;
                 if (diff) {
-                    const themeKey = sharedThemeCacheKey(theme);
-                    const dc = resolveSharedDiffColors(theme);
-                    text.__piDiffTask = {
-                        placeholder: `  ${editCount} edits ${s}
-${theme.fg("muted", "  rendering diff…")}`,
-                        fallback: `  ${editCount} edits ${s}${typeof diffLineCount === "number" ? ` ${theme.fg("muted", `(${diffLineCount} diff lines)`)}` : ""}`,
-                        invalidate: ctx.invalidate,
-                        key: (width) => `me:${themeKey}:${width}:${s}:${diff?.lines?.length ?? 0}:${language ?? ""}`,
-                        render: async (width) => `  ${editCount} edits ${s}${typeof diffLineCount === "number" ? ` ${theme.fg("muted", `(${diffLineCount} diff lines)`)}` : ""}\n${await renderSharedSplit(diff, language, MAX_PREVIEW_LINES, dc, width)}`,
-                    };
+                    setDiffPreviewTask(text, "me", meta, diff, language, MAX_PREVIEW_LINES, theme, ctx);
                     return text;
                 }
-                text.__piDiffTask = undefined;
-                text.setText(`  ${editCount} edits ${s}${typeof diffLineCount === "number" ? ` ${theme.fg("muted", `(${diffLineCount} diff lines)`)}` : ""}`);
+                setToolHeaderText(text, meta, theme);
                 return text;
             }
             text.__piDiffTask = undefined;