Add "Open in VS Code Diff" button to plan diff viewer#180
Merged
backnotprop merged 10 commits intomainfrom Feb 26, 2026
Merged
Conversation
Scoping document for a new PlanDiffViewer button that opens the plan diff in VS Code's native diff viewer via `code --diff`. https://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW
Add a button in the PlanDiffViewer toolbar that opens the current plan diff in VS Code's native side-by-side diff viewer. The server writes both versions to temp files and spawns `code --diff`. - New POST /api/plan/vscode-diff endpoint in packages/server/index.ts - VS Code button with loading/error states in PlanDiffViewer.tsx - Wire currentPlan/basePlan/baseVersion props from App.tsx https://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW
…om client The server already has the current plan in its closure and can read any version from disk via getPlanVersion(). No need to send plan text from the UI — just send baseVersion. https://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…r.ts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… writing temp files Both plan versions already exist on disk in ~/.plannotator/history/. Eliminates redundant file writes, fixes UPLOAD_DIR semantic misuse, and corrects HTTP status codes for editor errors. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…tor UI Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add a new "VS Code" button to the PlanDiffViewer toolbar that opens the current plan diff in VS Code's native side-by-side diff viewer. This gives power users access to VS Code's mature diff features like inline editing, word-level highlighting, and search.
Changes
Server endpoint (
packages/server/index.ts): AddPOST /api/plan/vscode-diffthat writes both plan versions to temp files and spawnscode --diff <old> <new>. Includes graceful error handling for when the VS Code CLI is not installed.UI button (
packages/ui/components/plan-diff/PlanDiffViewer.tsx):currentPlan,basePlan, andbaseVersionWire up props (
packages/editor/App.tsx): Pass the three new props from the parent component toPlanDiffViewerImplementation Details
Bun.spawn()to invoke the VS Code CLI—no new dependencies required/tmp/plannotator/directory, following the pattern already used for image uploadshttps://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW