Skip to content

feat(vscode): render images in diff viewer - #11258

Merged
marius-kilocode merged 5 commits into
mainfrom
utopian-approval
Jun 17, 2026
Merged

feat(vscode): render images in diff viewer#11258
marius-kilocode merged 5 commits into
mainfrom
utopian-approval

Conversation

@marius-kilocode

@marius-kilocode marius-kilocode commented Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Image changes currently appear as binary entries, so reviews cannot show what changed without leaving the diff viewer.

Render supported image formats directly in the standalone Changes viewer and Agent Manager review surfaces. Modified images show labeled Before and After previews, while added and deleted images show only the available side. Image details load lazily, use bounded payloads, and preserve cached data until the underlying image changes.

Opening an image now delegates to VS Code so its built-in image preview or another registered custom editor handles the file. Binary session snapshots remain explicitly unavailable when the backend did not retain their bytes, while text-backed SVG snapshots can still be reconstructed.

Before:
file-f060e7a214a8cfef7d378f8fdd3330b9
After:
file-a9554c4d38aadf25d21f77883a0fddc6

@kilo-code-bot

kilo-code-bot Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (46 files)
  • .changeset/render-image-diffs.md
  • packages/kilo-vscode/src/agent-manager/GitOps.ts
  • packages/kilo-vscode/src/agent-manager/local-diff.ts
  • packages/kilo-vscode/src/agent-manager/types.ts
  • packages/kilo-vscode/src/diff/shared/image.ts
  • packages/kilo-vscode/src/diff/shared/path.ts
  • packages/kilo-vscode/src/diff/sources/git-status.ts
  • packages/kilo-vscode/src/diff/sources/session.ts
  • packages/kilo-vscode/src/diff/sources/staged.ts
  • packages/kilo-vscode/src/diff/sources/unstaged.ts
  • packages/kilo-vscode/src/diff/sources/worktree.ts
  • packages/kilo-vscode/src/diff/types.ts
  • packages/kilo-vscode/src/review-utils.ts
  • packages/kilo-vscode/tests/unit/agent-manager-arch.test.ts
  • packages/kilo-vscode/tests/unit/agent-manager-diff-state.test.ts
  • packages/kilo-vscode/tests/unit/diff-image.test.ts
  • packages/kilo-vscode/tests/unit/diff-session-source.test.ts
  • packages/kilo-vscode/tests/unit/local-diff.test.ts
  • packages/kilo-vscode/tests/unit/review-utils.test.ts
  • packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx
  • packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ar.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/br.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/bs.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/da.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/de.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/en.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/es.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/fr.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/it.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ja.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ko.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/nl.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/no.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/pl.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ru.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/th.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/tr.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/uk.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/zh.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/zht.ts
  • packages/kilo-vscode/webview-ui/diff-viewer/FullScreenDiffView.tsx
  • packages/kilo-vscode/webview-ui/diff-viewer/ImageDiffView.tsx
  • packages/kilo-vscode/webview-ui/diff-viewer/diff-open-policy.ts
  • packages/kilo-vscode/webview-ui/diff-viewer/diff-state.ts
  • packages/kilo-vscode/webview-ui/src/types/messages/agent-manager.ts
Previous Review Summaries (2 snapshots, latest commit 148b324)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 148b324)

Status: No Issues Found | Recommendation: Merge

Overview

This PR adds image diff rendering to the Agent Manager's DiffPanel and the FullScreenDiffView. Image files are recognized by extension, their binary content is loaded lazily when the diff accordion is opened, and before/after panes display as side-by-side <img> elements with a checkerboard background and file size labels.

Key design decisions that are well-executed:

  • Lazy image loading: Images are never auto-opened in the accordion (initialOpenFiles excludes them), and detail is requested only when the user expands the accordion (via per-item createEffect).
  • Path traversal hardening: The new resolveInside() utility (extracted from git-status.ts to a shared module) is now consistently applied across all diff sources (local-diff, staged, unstaged).
  • Buffer-safe git exec: GitOps.execGitBuffer() returns raw Buffer instead of UTF-8 string, needed for binary image reads. The existing exec() now delegates to it.
  • SVG special case: Text-backed SVG diffs from session snapshots can be reconstructed from patches; binary images from snapshots correctly get image: {} (unavailable).
  • Size cap enforcement: MAX_IMAGE_BYTES = 5MB, checked both before reading (source.bytes) and after (data.byteLength), with explicit "too-large" and "unreadable" error states.
  • Fingerprint caching: Session diff results are cached by a fingerprint (SHA1 of patch + metadata), avoiding redundant toSessionDiffFile conversions on poll ticks.
  • VS Code image preview integration: openFileInEditor now uses vscode.open instead of openTextDocument/showTextDocument, which delegates to custom image editors.
Files Reviewed (41 files)
  • .changeset/render-image-diffs.md
  • packages/kilo-vscode/src/agent-manager/GitOps.ts
  • packages/kilo-vscode/src/agent-manager/local-diff.ts
  • packages/kilo-vscode/src/agent-manager/types.ts
  • packages/kilo-vscode/src/diff/shared/image.ts (new)
  • packages/kilo-vscode/src/diff/shared/path.ts (new)
  • packages/kilo-vscode/src/diff/sources/git-status.ts
  • packages/kilo-vscode/src/diff/sources/session.ts
  • packages/kilo-vscode/src/diff/sources/staged.ts
  • packages/kilo-vscode/src/diff/sources/unstaged.ts
  • packages/kilo-vscode/src/diff/sources/worktree.ts
  • packages/kilo-vscode/src/diff/types.ts
  • packages/kilo-vscode/src/review-utils.ts
  • packages/kilo-vscode/tests/unit/agent-manager-arch.test.ts
  • packages/kilo-vscode/tests/unit/agent-manager-diff-state.test.ts
  • packages/kilo-vscode/tests/unit/diff-image.test.ts (new)
  • packages/kilo-vscode/tests/unit/diff-session-source.test.ts
  • packages/kilo-vscode/tests/unit/local-diff.test.ts
  • packages/kilo-vscode/tests/unit/review-utils.test.ts (new)
  • packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx
  • packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ar.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/br.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/bs.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/da.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/de.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/en.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/es.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/fr.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/it.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ja.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ko.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/nl.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/no.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/pl.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/ru.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/th.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/tr.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/uk.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/zh.ts
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/zht.ts
  • packages/kilo-vscode/webview-ui/diff-viewer/FullScreenDiffView.tsx
  • packages/kilo-vscode/webview-ui/diff-viewer/ImageDiffView.tsx (new)
  • packages/kilo-vscode/webview-ui/diff-viewer/diff-open-policy.ts
  • packages/kilo-vscode/webview-ui/diff-viewer/diff-state.ts
  • packages/kilo-vscode/webview-ui/src/types/messages/agent-manager.ts

Fix these issues in Kilo Cloud

Previous review

Status: No Issues Found | Recommendation: Merge

Files Reviewed (27 files)
  • .changeset/render-image-diffs.md
  • packages/kilo-vscode/src/agent-manager/GitOps.ts
  • packages/kilo-vscode/src/agent-manager/local-diff.ts
  • packages/kilo-vscode/src/agent-manager/types.ts
  • packages/kilo-vscode/src/diff/shared/image.ts (new)
  • packages/kilo-vscode/src/diff/shared/path.ts (new)
  • packages/kilo-vscode/src/diff/sources/git-status.ts
  • packages/kilo-vscode/src/diff/sources/session.ts
  • packages/kilo-vscode/src/diff/sources/staged.ts
  • packages/kilo-vscode/src/diff/sources/unstaged.ts
  • packages/kilo-vscode/src/diff/sources/worktree.ts
  • packages/kilo-vscode/src/diff/types.ts
  • packages/kilo-vscode/src/review-utils.ts
  • packages/kilo-vscode/tests/unit/agent-manager-arch.test.ts
  • packages/kilo-vscode/tests/unit/agent-manager-diff-state.test.ts
  • packages/kilo-vscode/tests/unit/diff-image.test.ts (new)
  • packages/kilo-vscode/tests/unit/diff-session-source.test.ts
  • packages/kilo-vscode/tests/unit/local-diff.test.ts
  • packages/kilo-vscode/tests/unit/review-utils.test.ts (new)
  • packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx
  • packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
  • packages/kilo-vscode/webview-ui/agent-manager/i18n/en.ts
  • packages/kilo-vscode/webview-ui/diff-viewer/FullScreenDiffView.tsx
  • packages/kilo-vscode/webview-ui/diff-viewer/ImageDiffView.tsx (new)
  • packages/kilo-vscode/webview-ui/diff-viewer/diff-open-policy.ts
  • packages/kilo-vscode/webview-ui/diff-viewer/diff-state.ts
  • packages/kilo-vscode/webview-ui/src/types/messages/agent-manager.ts

Reviewed by deepseek-v4-pro-20260423 · 109,448 tokens

Review guidance: REVIEW.md from base branch main

@marius-kilocode
marius-kilocode merged commit 27ac18b into main Jun 17, 2026
22 checks passed
@marius-kilocode
marius-kilocode deleted the utopian-approval branch June 17, 2026 09:38
NJ-2020 pushed a commit to NJ-2020/kilocode that referenced this pull request Jul 4, 2026
…1258)

Co-authored-by: Brendan Allan <git@brendonovich.dev>
t7tran pushed a commit to t7tran/kilocode that referenced this pull request Aug 14, 2026
…1258)

Co-authored-by: Brendan Allan <git@brendonovich.dev>
t7tran pushed a commit to t7tran/kilocode that referenced this pull request Aug 14, 2026
feat(vscode): render images in diff viewer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants