Code Mode: Diff Viewer for File Changes

[TechNickAI]

Overview

When Claude edits files, show a visual diff so users can review changes before they're applied.

Why This Matters

Currently when Claude uses the Edit or Write tool, users see the raw tool output but can't easily understand what changed. A proper diff view lets users:

• Review proposed changes at a glance
• Catch errors before they hit the filesystem
• Understand the scope of modifications
• Build trust in the AI's work

What Competitors Have

claudecodeui (CodeEditor.jsx, 703 lines):

• CodeMirror 6 with diff/merge view
• Side-by-side or unified display
• Minimap with colored overlays for changes
• Chunk navigation (prev/next change buttons)
• Character-level highlighting within changed lines
• Auto-scroll to first diff chunk
• "X of Y changes" counter

opcode (EditWidget, MultiEditWidget):

• Before/after display
• Syntax highlighting
• Collapsible by default for large changes

claude-code-webui:

• Structured patch display
• Auto-expand if ≤20 lines changed
• Line count indicator for larger changes

Proposed Implementation

Phase 1: Basic Diff Display

• When Edit/Write tool completes, show unified diff
• Use react-diff-viewer or similar library
• Syntax highlighting for the language
• Collapsible for long diffs (>30 lines)

Phase 2: Navigation & Polish

• Chunk navigation (prev/next change)
• Line numbers
• Copy button for new content
• Expand/collapse individual hunks

Phase 3: Accept/Reject UI (Future)

• "Accept" / "Reject" buttons per change
• Partial acceptance (per-hunk)
• Undo recent changes

Technical Approach

Option A: react-diff-viewer-continued

• Popular, maintained fork
• Supports unified and split view
• Syntax highlighting via Prism
• ~15KB gzipped

Option B: Monaco Diff Editor

• Same as VS Code
• Heavier (~500KB) but feature-rich
• Native diff computation
• Already familiar to developers

Option C: Custom with diff library

• Use diff npm package for computation
• Custom rendering with our design system
• Full control over styling
• More work but lighter weight

Recommendation: Start with react-diff-viewer for speed, consider Monaco if we build full file editor later.

Integration Points

1. Edit tool widget (components/tools/code/diff-viewer.tsx exists but may need enhancement)
2. Write tool widget - Show diff against previous version if file existed
3. Multi-edit results - Tab or accordion for multiple file changes

Design Considerations

• Match holographic aesthetic (glass morphism, purple accents)
• Dark theme optimized (most code mode users)
• Mobile: horizontal scroll for wide diffs
• Accessible: keyboard navigation, screen reader support for change summary

Success Criteria

• Edit tool results show clear before/after diff
• Write tool shows diff if file existed previously
• Can navigate between changes in multi-hunk diffs
• Syntax highlighting matches file type
• Performs well on large diffs (1000+ lines)
• Collapsible by default for large changes

References

• Existing diff component: components/tools/code/diff-viewer.tsx
• Competitive analysis: knowledge/components/code-mode-frontend-gaps.md
• Tool display patterns: knowledge/code-mode/tool-display.md