diff --git a/.changeset/soft-diff-highlights.md b/.changeset/soft-diff-highlights.md new file mode 100644 index 00000000000..1687eb5e886 --- /dev/null +++ b/.changeset/soft-diff-highlights.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Restore readable diff highlighting and collapsed unchanged sections in VS Code themes. diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/full-screen-diff-with-collapsed-context-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/full-screen-diff-with-collapsed-context-chromium-linux.png new file mode 100644 index 00000000000..bc87566f6c4 --- /dev/null +++ b/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 diff --git a/packages/kilo-ui/src/pierre/index.ts b/packages/kilo-ui/src/pierre/index.ts index 20b1ad7fd1c..0d2edfeea93 100644 --- a/packages/kilo-ui/src/pierre/index.ts +++ b/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(style: FileDiffOptions["diffStyle"]) { + const opts = defaults(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 diff --git a/packages/kilo-ui/src/styles/vscode-bridge.css b/packages/kilo-ui/src/styles/vscode-bridge.css index 5ad8a6a6920..2c7bb14df3b 100644 --- a/packages/kilo-ui/src/styles/vscode-bridge.css +++ b/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); diff --git a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx index e1f5d2dca22..1c1fa21f2c3 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx +++ b/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: () => ( + +
+ {}} + comments={[]} + onCommentsChange={() => {}} + onClose={() => {}} + /> +
+ + ), +} + // --------------------------------------------------------------------------- // WorktreeItem — shared mock helpers // ---------------------------------------------------------------------------