fix(tui): highlight diff preview rows

.changeset/clear-diff-previews.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Add background highlighting to terminal diff previews.

apps/kimi-code/src/tui/components/media/diff-preview.ts

@@ -12,8 +12,8 @@ import { currentTheme } from '#/tui/theme';
 export type DiffLineKind = 'context' | 'add' | 'delete';
 
 interface DiffStyles {
-  add: (s: string) => string;
-  del: (s: string) => string;
+  addLine: (s: string) => string;
+  delLine: (s: string) => string;
   addBold: (s: string) => string;
   delBold: (s: string) => string;
   gutter: (s: string) => string;
@@ -23,8 +23,8 @@ interface DiffStyles {
 function makeDiffStyles(): DiffStyles {
   const palette = currentTheme.palette;
   return {
-    add: (s) => chalk.hex(palette.diffAdded)(s),
-    del: (s) => chalk.hex(palette.diffRemoved)(s),
+    addLine: (s) => chalk.hex(palette.diffAdded).bgHex(palette.diffAddedBg)(s),
+    delLine: (s) => chalk.hex(palette.diffRemoved).bgHex(palette.diffRemovedBg)(s),
     addBold: (s) => chalk.bold.hex(palette.diffAddedStrong)(s),
     delBold: (s) => chalk.bold.hex(palette.diffRemovedStrong)(s),
     gutter: (s) => chalk.hex(palette.diffGutter)(s),
@@ -134,9 +134,7 @@ export function renderDiffLines(
       : changedLines;
 
   for (const line of shown) {
-    const marker = line.kind === 'add' ? '+' : '-';
-    const color = line.kind === 'add' ? s.add : s.del;
-    output.push(s.gutter(String(line.lineNum).padStart(4) + ' ') + color(marker + ' ' + line.code));
+    output.push(formatDiffRow(line, s));
   }
 
   const hidden = changedLines.length - shown.length;
@@ -217,9 +215,9 @@ function buildClusters(
 }
 
 function formatDiffRow(line: DiffLine, s: DiffStyles): string {
-  const gutter = s.gutter(String(line.lineNum).padStart(4) + ' ');
-  if (line.kind === 'add') return gutter + s.add('+ ' + line.code);
-  if (line.kind === 'delete') return gutter + s.del('- ' + line.code);
+  const gutter = s.gutter(String(line.lineNum).padStart(4) + ' │ ');
+  if (line.kind === 'add') return gutter + s.addLine('+ ' + line.code);
+  if (line.kind === 'delete') return gutter + s.delLine('- ' + line.code);
   return gutter + '  ' + line.code;
 }
 

apps/kimi-code/src/tui/theme/colors.ts

@@ -56,8 +56,12 @@ export interface ColorPalette {
   // ── Diff (all consumed by components/media/diff-preview.ts) ──
   /** Added lines. */
   diffAdded: string;
+  /** Added line background. */
+  diffAddedBg: string;
   /** Removed lines. */
   diffRemoved: string;
+  /** Removed line background. */
+  diffRemovedBg: string;
   /** Added lines — intra-line changed words (bold). */
   diffAddedStrong: string;
   /** Removed lines — intra-line changed words (bold). */
@@ -96,7 +100,9 @@ export const darkColors: ColorPalette = {
   error: '#E85454',
 
   diffAdded: '#4EC87E',
+  diffAddedBg: '#173326',
   diffRemoved: '#E85454',
+  diffRemovedBg: '#32181D',
   diffAddedStrong: '#7AD99B',
   diffRemovedStrong: '#F08585',
   diffGutter: '#6B6B6B',
@@ -123,7 +129,9 @@ export const lightColors: ColorPalette = {
   error: '#B91C1C',
 
   diffAdded: '#0E7A38',
+  diffAddedBg: '#E8F5EE',
   diffRemoved: '#B91C1C',
+  diffRemovedBg: '#FDECEC',
   diffAddedStrong: '#0E7A38',
   diffRemovedStrong: '#B91C1C',
   diffGutter: '#737373',

apps/kimi-code/src/tui/theme/theme-schema.json

@@ -40,7 +40,9 @@
         "warning": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Warning state color" },
         "error": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Error state color" },
         "diffAdded": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Diff added lines" },
+        "diffAddedBg": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Diff added line background" },
         "diffRemoved": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Diff removed lines" },
+        "diffRemovedBg": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Diff removed line background" },
         "diffAddedStrong": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Diff added lines (strong)" },
         "diffRemovedStrong": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Diff removed lines (strong)" },
         "diffGutter": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$", "description": "Diff gutter color" },

apps/kimi-code/test/tui/components/media/diff-preview.test.ts

@@ -165,10 +165,16 @@ describe('renderDiffLinesClustered', () => {
     );
     // Context lines keep the new (post-edit) line numbers from newStart;
     // deleted lines use oldStart; added lines use newStart.
-    expect(text).toContain('  20   A');
-    expect(text).toContain('  11 - B');
-    expect(text).toContain('  21 + X');
-    expect(text).toContain('  22   C');
+    expect(text).toContain('  20 │   A');
+    expect(text).toContain('  11 │ - B');
+    expect(text).toContain('  21 │ + X');
+    expect(text).toContain('  22 │   C');
+  });
+
+  it('renders a clear sign column between the gutter and code', () => {
+    const text = stripAnsi(renderDiffLinesClustered('old', 'new', 'f.ts').join('\n'));
+    expect(text).toContain('   1 │ - old');
+    expect(text).toContain('   1 │ + new');
   });
 
   it('truncates at cluster boundary and appends the ctrl+o footer when maxLines is set', () => {

docs/en/customization/themes.md

@@ -20,7 +20,9 @@ Custom themes can override the tokens below. The `dark` and `light` columns show
 | `warning` | `#E8A838` | `#92660A` | Warning state. auto/yolo badges, stale markers, Plan mode hint |
 | `error` | `#E85454` | `#B91C1C` | Error state. Error messages, failed tool output |
 | `diffAdded` | `#4EC87E` | `#0E7A38` | Diff added lines |
+| `diffAddedBg` | `#173326` | `#E8F5EE` | Diff added line background |
 | `diffRemoved` | `#E85454` | `#B91C1C` | Diff removed lines |
+| `diffRemovedBg` | `#32181D` | `#FDECEC` | Diff removed line background |
 | `diffAddedStrong` | `#7AD99B` | `#0E7A38` | Diff intra-line changed words, added and bold |
 | `diffRemovedStrong` | `#F08585` | `#B91C1C` | Diff intra-line changed words, removed and bold |
 | `diffGutter` | `#6B6B6B` | `#737373` | Diff line-number gutter |

docs/zh/customization/themes.md

@@ -20,7 +20,9 @@ Kimi Code CLI 可以使用内置配色，也可以使用自定义 JSON 主题文
 | `warning` | `#E8A838` | `#92660A` | 警告态。auto/yolo 徽章、过期标记、Plan 模式提示 |
 | `error` | `#E85454` | `#B91C1C` | 错误态。错误信息、失败的工具输出 |
 | `diffAdded` | `#4EC87E` | `#0E7A38` | diff 新增行 |
+| `diffAddedBg` | `#173326` | `#E8F5EE` | diff 新增行背景 |
 | `diffRemoved` | `#E85454` | `#B91C1C` | diff 删除行 |
+| `diffRemovedBg` | `#32181D` | `#FDECEC` | diff 删除行背景 |
 | `diffAddedStrong` | `#7AD99B` | `#0E7A38` | diff 行内改动的新增词（加粗高亮） |
 | `diffRemovedStrong` | `#F08585` | `#B91C1C` | diff 行内改动的删除词（加粗高亮） |
 | `diffGutter` | `#6B6B6B` | `#737373` | diff 行号槽 |

packages/agent-core/src/skill/builtin/custom-theme.md

@@ -73,7 +73,9 @@ Only set tokens from this set — unknown keys are silently ignored at load. If
 | `warning` | Warning state: auto/yolo badges, stale markers, plan-mode hint |
 | `error` | Error state: error messages, failed tool output |
 | `diffAdded` | Diff added lines |
+| `diffAddedBg` | Diff added line background |
 | `diffRemoved` | Diff removed lines |
+| `diffRemovedBg` | Diff removed line background |
 | `diffAddedStrong` | Diff intra-line changed words, added (bold) |
 | `diffRemovedStrong` | Diff intra-line changed words, removed (bold) |
 | `diffGutter` | Diff line-number gutter |

packages/agent-core/test/skill/builtin-custom-theme.test.ts

@@ -34,7 +34,9 @@ describe('builtin skill: custom-theme', () => {
       'warning',
       'error',
       'diffAdded',
+      'diffAddedBg',
       'diffRemoved',
+      'diffRemovedBg',
       'diffAddedStrong',
       'diffRemovedStrong',
       'diffGutter',