Merge pull request #10642 from Kilo-Org/tangy-planarian

fix(vscode): restore readable diff highlighting

.changeset/soft-diff-highlights.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Restore readable diff highlighting and collapsed unchanged sections in VS Code themes.

packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/full-screen-diff-with-collapsed-context-chromium-linux.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f5e9dd9a8b232e960fbc1925a2447a7634b2db241f6fe9b9ba8527665a5ca4c4
+size 14248

packages/kilo-ui/src/pierre/index.ts

@@ -6,8 +6,38 @@ import {
   type SelectedLineRange,
 } from "@pierre/diffs"
 import { ComponentProps } from "solid-js"
+import { createDefaultOptions as defaults, styleVariables } from "@opencode-ai/ui/pierre"
 
-export { createDefaultOptions, styleVariables } from "@opencode-ai/ui/pierre"
+export { styleVariables }
+
+// Pierre 1.1 treats its changed-line override properties as tint targets. Apply
+// Kilo semantic surfaces at the computed row level so host diff colors stay final.
+const css = `
+[data-diff][data-background] [data-line][data-line-type='change-addition'] {
+  --diffs-computed-diff-line-bg: var(--surface-diff-add-base, var(--diffs-bg-addition));
+  --diffs-computed-selected-line-bg: var(--surface-diff-add-base, var(--diffs-bg-addition));
+}
+[data-diff][data-background] [data-column-number][data-line-type='change-addition'] {
+  --diffs-computed-diff-line-bg: var(--surface-diff-add-weaker, var(--diffs-bg-addition-number));
+  --diffs-computed-selected-line-bg: var(--surface-diff-add-weaker, var(--diffs-bg-addition-number));
+}
+[data-diff][data-background] [data-line][data-line-type='change-deletion'] {
+  --diffs-computed-diff-line-bg: var(--surface-diff-delete-base, var(--diffs-bg-deletion));
+  --diffs-computed-selected-line-bg: var(--surface-diff-delete-base, var(--diffs-bg-deletion));
+}
+[data-diff][data-background] [data-column-number][data-line-type='change-deletion'] {
+  --diffs-computed-diff-line-bg: var(--surface-diff-delete-weaker, var(--diffs-bg-deletion-number));
+  --diffs-computed-selected-line-bg: var(--surface-diff-delete-weaker, var(--diffs-bg-deletion-number));
+}
+`
+
+export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
+  const opts = defaults<T>(style)
+  return {
+    ...opts,
+    unsafeCSS: `${opts.unsafeCSS}\n${css}`,
+  }
+}
 
 // Extends upstream DiffProps with a `fileDiff` variant so Pierre can render
 // a precomputed FileDiffMetadata directly. The pair (before/after) variant

packages/kilo-ui/src/styles/vscode-bridge.css

@@ -76,13 +76,22 @@ html[data-theme="kilo-vscode"] {
 
   /* Diff surfaces */
   --surface-diff-unchanged-base: var(--vscode-editor-background);
-  --surface-diff-skip-base: var(--vscode-diffEditor-unchangedCodeBackground);
+  --surface-diff-skip-base: var(
+    --vscode-diffEditor-unchangedRegionBackground,
+    var(--vscode-diffEditor-unchangedCodeBackground, var(--vscode-editor-background))
+  );
   --surface-diff-add-base: var(--vscode-diffEditor-insertedLineBackground);
   --surface-diff-add-weak: var(--vscode-diffEditor-insertedTextBackground);
-  --surface-diff-add-weaker: var(--vscode-diffEditor-insertedLineBackground);
+  --surface-diff-add-weaker: var(
+    --vscode-diffEditorGutter-insertedLineBackground,
+    var(--vscode-diffEditor-insertedLineBackground)
+  );
   --surface-diff-delete-base: var(--vscode-diffEditor-removedLineBackground);
   --surface-diff-delete-weak: var(--vscode-diffEditor-removedTextBackground);
-  --surface-diff-delete-weaker: var(--vscode-diffEditor-removedLineBackground);
+  --surface-diff-delete-weaker: var(
+    --vscode-diffEditorGutter-removedLineBackground,
+    var(--vscode-diffEditor-removedLineBackground)
+  );
 
   /* ===== Inputs ===== */
   --input-base: var(--vscode-input-background);
@@ -280,21 +289,15 @@ html[data-theme="kilo-vscode"] {
   --syntax-diff-unknown: var(--vscode-charts-red);
 
   /* ===== Pierre diff engine (theme its CSS vars to VS Code editor colors) ===== */
-  --diffs-light-bg: var(--background-stronger);
-  --diffs-dark-bg: var(--background-stronger);
-
-  /* Pierre 1.1 mixes line and gutter tints from the diff color.
-     Only word emphasis uses a final background override. */
-  --diffs-bg-addition-emphasis-override: color-mix(
-    in lab,
-    var(--background-stronger) 60%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-deletion-emphasis-override: color-mix(
-    in lab,
-    var(--background-stronger) 60%,
-    var(--syntax-diff-delete, #da3319)
+  --diffs-light-bg: var(--vscode-editor-background, #1e1e1e);
+  --diffs-dark-bg: var(--vscode-editor-background, #1e1e1e);
+  --diffs-bg-separator-override: var(--surface-diff-skip-base);
+  --diffs-fg-number-override: var(
+    --vscode-diffEditor-unchangedRegionForeground,
+    var(--vscode-editorLineNumber-foreground, var(--vscode-descriptionForeground))
   );
+  --diffs-bg-addition-emphasis-override: var(--surface-diff-add-weak);
+  --diffs-bg-deletion-emphasis-override: var(--surface-diff-delete-weak);
 
   /* ===== Markdown ===== */
   --markdown-heading: var(--vscode-textLink-foreground);

packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx

@@ -51,6 +51,18 @@ const mockDiffs: WorktreeFileDiff[] = [
   },
 ]
 
+const context = Array.from({ length: 36 }, (_, i) => `  const item${i} = values[${i}]\n`).join("")
+const foldedDiffs: WorktreeFileDiff[] = [
+  {
+    file: "src/components/chat/LongReview.ts",
+    status: "modified",
+    additions: 2,
+    deletions: 2,
+    before: `export function review(values: string[]) {\n  const title = "Draft"\n${context}  return title\n}\n`,
+    after: `export function review(values: string[]) {\n  const title = "Ready"\n${context}  return title.toUpperCase()\n}\n`,
+  },
+]
+
 // ---------------------------------------------------------------------------
 // Meta
 // ---------------------------------------------------------------------------
@@ -204,6 +216,25 @@ export const FullScreenDiffWithChanges: Story = {
   ),
 }
 
+export const FullScreenDiffWithCollapsedContext: Story = {
+  name: "FullScreenDiffView - collapsed unchanged context",
+  render: () => (
+    <StoryProviders>
+      <div style={{ width: "420px", height: "700px", display: "flex" }}>
+        <FullScreenDiffView
+          diffs={foldedDiffs}
+          loading={false}
+          diffStyle="unified"
+          onDiffStyleChange={() => {}}
+          comments={[]}
+          onCommentsChange={() => {}}
+          onClose={() => {}}
+        />
+      </div>
+    </StoryProviders>
+  ),
+}
+
 // ---------------------------------------------------------------------------
 // WorktreeItem — shared mock helpers
 // ---------------------------------------------------------------------------