Add Granular Diff Controls with Algorithmic Diff Detection

[BurhanCantCode]

Add Granular Diff Controls with Algorithmic Diff Detection

Overview

Replace naive line-by-line diff comparison with proper Myers algorithm and add granular block-level accept/reject controls for better code review workflow.

Problem

• Massive diffs for small changes: Adding single line <p>Hi Burhan!</p> created 20+ line diffs showing entire sections as removed/added
• All-or-nothing apply: Users could only accept or reject entire diffs, no granular control over specific chunks
• Poor diff detection: Manual line comparison created false diff blocks instead of detecting actual changes

Solution

Proper Diff Algorithm

Replaced naive diff with industry-standard Myers algorithm:

// Before: Naive line comparison
const originalLines = originalCode.split('\n')
const mergedLines = mergedCode.split('\n')
// Manual comparison → massive false diffs

// After: Myers algorithm
const changes = diffLines(originalCode, mergedCode, { ignoreWhitespace: false })
// Proper change detection → minimal accurate diffs

Granular Block Controls

• Individual chunk accept/reject: Users can accept/reject specific diff blocks instead of all-or-nothing
• Floating widgets: Numbered buttons (1, 2, 3...) positioned next to each diff chunk in Monaco editor
• Auto-save: Automatically saves file when accepting/rejecting individual blocks
• Smart cleanup: Removes highlights and widgets after processing blocks
• Real-time rebuilding: Editor content rebuilds based on accepted/rejected changes

Technical Implementation

Core Diff Processing

• Uses diffLines from 'diff' npm library (Myers algorithm)
• Creates DiffBlock objects for each change chunk
• Tracks LineChange objects within each block
• Maintains GranularDiffState for editor model

Visual Controls

• Monaco editor addContentWidget API for floating buttons
• CSS-styled widgets matching design system
• Event handlers for accept/reject actions
• Dynamic positioning next to diff chunks

State Management

• Block-level tracking with unique IDs
• Real-time content rebuilding via rebuildEditorFromBlockState
• Integration with existing save system
• Proper cleanup of widgets and decorations

Files Changed

• components/editor/index.tsx - Main diff algorithm and granular controls
• Added import: import { diffLines } from 'diff'
• Enhanced handleApplyCode function with proper diff detection
• Added handleBlockAction, addBlockControlWidgets, rebuildEditorFromBlockState

Result

• Minimal diffs: Single line additions now show as single green lines
• Granular control: Users can accept/reject individual chunks
• Better UX: Auto-save, visual feedback, and clean widget management
• Industry standard: Uses same diff algorithm as Git, VS Code, GitHub

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2025 8:01pm

[jamesmurdza]

Nice!

1. Applying changes shouldn't save the file automatically. It should only save when the user saves it.
2. The toast notifications are not necessary.

[BurhanCantCode]

Nice!

1. Applying changes shouldn't save the file automatically. It should only save when the user saves it.
2. The toast notifications are not necessary.

done!

[jamesmurdza]

Applying the first change removes all the red/green highlighting:

Untitled.mov

[akhileshrangani4]

looks great so far @BurhanCantCode , couple of more bugs:

• when you cancel an inline change, it duplicates the line below it.
• if you cancel all the changes one by one and then re-apply again, it duplicates again.
• I also feel that there should be some kind of UI feedback on the code snippet so that a user knows that this snippet with was applied to the code at some point.

To recreate this bug:

• apply a change, and then cancel the changes one by one.
• cancel all the changes one by one and then re-apply.

[akhileshrangani4]

one more bug:

• after applying the changes the in-line diff widgets stays in the editor.
• and the apply button applied the changes to other open file as well.

[BurhanCantCode]

thanks for the feedback @jamesmurdza and @akhileshrangani4, ill get to it the earliest i can