|  | 
|  | 1 | +# Frontend Diff Comparison Improvements | 
|  | 2 | + | 
|  | 3 | +## Summary | 
|  | 4 | + | 
|  | 5 | +Fixed the Next.js frontend to properly leverage the Rust backend's advanced AST-based function matching algorithm, and created a new function-centric view that sorts functions by change magnitude instead of grouping by file. | 
|  | 6 | + | 
|  | 7 | +## Problems Identified | 
|  | 8 | + | 
|  | 9 | +1. **Not leveraging the Rust backend properly**: The frontend was calling `/api/comparison/analyze` which used a simplified regex-based function extraction instead of the advanced AST parser | 
|  | 10 | +2. **MCP layer was unnecessary**: The MCP endpoints were just wrappers that added complexity without benefit for the web UI | 
|  | 11 | +3. **File-centric organization**: Functions were grouped by file, making it hard to see the most changed functions across the entire codebase | 
|  | 12 | +4. **Confusing change detection**: Functions that were moved AND modified appeared in multiple categories | 
|  | 13 | + | 
|  | 14 | +## Solutions Implemented | 
|  | 15 | + | 
|  | 16 | +### 1. Enhanced Rust Backend (`crates/web-ui/src/handlers.rs`) | 
|  | 17 | + | 
|  | 18 | +**Changed**: `analyze_function_changes()` function | 
|  | 19 | + | 
|  | 20 | +**Before**: Used regex patterns to extract functions | 
|  | 21 | +```rust | 
|  | 22 | +// Simple function extraction using regex patterns | 
|  | 23 | +let functions = extract_functions_simple(&file.content, language_str, &file.relative_path); | 
|  | 24 | +``` | 
|  | 25 | + | 
|  | 26 | +**After**: Uses proper AST parsing with Hungarian algorithm matching | 
|  | 27 | +```rust | 
|  | 28 | +// Parse files using TreeSitter AST parser | 
|  | 29 | +let parser = TreeSitterParser::new(language); | 
|  | 30 | +let parse_result = parser.parse(&file.content, Some(&file.path)); | 
|  | 31 | +source_functions_ast.extend(parse_result.functions); | 
|  | 32 | + | 
|  | 33 | +// Use advanced FunctionMatcher with Hungarian algorithm | 
|  | 34 | +let function_matcher = FunctionMatcher::new(similarity_threshold); | 
|  | 35 | +let match_result = function_matcher.match_functions(&source_functions_ast, &target_functions_ast); | 
|  | 36 | +``` | 
|  | 37 | + | 
|  | 38 | +**Benefits**: | 
|  | 39 | +- Accurate function extraction across all languages | 
|  | 40 | +- Optimal matching using Hungarian algorithm | 
|  | 41 | +- Proper similarity scoring based on AST structure | 
|  | 42 | +- Correct change type detection (moved, renamed, modified) | 
|  | 43 | + | 
|  | 44 | +### 2. Improved Change Type Detection (`crates/diff-engine/src/changes.rs`) | 
|  | 45 | + | 
|  | 46 | +**Updated**: `determine_primary_change_type()` function | 
|  | 47 | + | 
|  | 48 | +**Key improvement**: Clear priority order for change types: | 
|  | 49 | +1. Cross-file move (whether modified or not - similarity score indicates modification level) | 
|  | 50 | +2. Rename (only if high similarity) | 
|  | 51 | +3. Move within file (only if high similarity) | 
|  | 52 | +4. Modification (default) | 
|  | 53 | + | 
|  | 54 | +**Result**: A function that is moved AND modified is correctly categorized as "moved" with a low similarity score, rather than appearing in both "moved" and "modified" categories. | 
|  | 55 | + | 
|  | 56 | +### 3. Better Change Summaries (`crates/mcp-server/src/comparison/manager.rs`) | 
|  | 57 | + | 
|  | 58 | +**Enhanced**: Diff summaries now clearly indicate combined changes: | 
|  | 59 | +- "Function moved from X to Y and modified (75% similar)" | 
|  | 60 | +- "Function renamed from 'foo' to 'bar' and modified (80% similar)" | 
|  | 61 | +- "Function moved from X to Y (unchanged)" | 
|  | 62 | + | 
|  | 63 | +### 4. New Function-Centric View Component | 
|  | 64 | + | 
|  | 65 | +**Created**: `nextjs-frontend/src/components/diff/FunctionCentricDiffView.tsx` | 
|  | 66 | + | 
|  | 67 | +**Features**: | 
|  | 68 | +- **Sorted by change magnitude**: Most changed functions appear first (regardless of file) | 
|  | 69 | +- **File path as indicator**: Shows source/target file paths as small labels per function | 
|  | 70 | +- **Visual change metrics**: Color-coded change magnitude and similarity percentages | 
|  | 71 | +- **Flexible filtering**: Filter by change type (modified, added, deleted, moved, renamed) | 
|  | 72 | +- **Multiple sort options**: By magnitude, similarity, or name | 
|  | 73 | +- **Search**: Find functions by name or file path | 
|  | 74 | + | 
|  | 75 | +**UI Layout**: | 
|  | 76 | +``` | 
|  | 77 | +┌─────────────────────────────────────────────────────┐ | 
|  | 78 | +│ [Search] [Filter: Modified ▼] [Sort: Magnitude ▼]  │ | 
|  | 79 | +├─────────────────────────────────────────────────────┤ | 
|  | 80 | +│ ┌─────────────────────────────────────────────────┐ │ | 
|  | 81 | +│ │ functionName()                    [modified]    │ │ | 
|  | 82 | +│ │ 📄 src/old.rs → src/new.rs                      │ │ | 
|  | 83 | +│ │ Source: L10-50  Target: L15-55                  │ │ | 
|  | 84 | +│ │                                   85% changed   │ │ | 
|  | 85 | +│ │                                   15% similar   │ │ | 
|  | 86 | +│ └─────────────────────────────────────────────────┘ │ | 
|  | 87 | +│ ┌─────────────────────────────────────────────────┐ │ | 
|  | 88 | +│ │ anotherFunction()                 [moved]       │ │ | 
|  | 89 | +│ │ 📄 src/utils.rs → src/helpers.rs                │ │ | 
|  | 90 | +│ │ Source: L100-120  Target: L200-220              │ │ | 
|  | 91 | +│ │                                   5% changed    │ │ | 
|  | 92 | +│ │                                   95% similar   │ │ | 
|  | 93 | +│ └─────────────────────────────────────────────────┘ │ | 
|  | 94 | +└─────────────────────────────────────────────────────┘ | 
|  | 95 | +``` | 
|  | 96 | + | 
|  | 97 | +### 5. Enhanced Comparison Component | 
|  | 98 | + | 
|  | 99 | +**Created**: `nextjs-frontend/src/components/diff/EnhancedDiffComparison.tsx` | 
|  | 100 | + | 
|  | 101 | +**Features**: | 
|  | 102 | +- Toggle between function-centric and file-centric views | 
|  | 103 | +- Summary statistics (total, added, deleted, modified, renamed, moved) | 
|  | 104 | +- Direct integration with Rust backend (no MCP middleman) | 
|  | 105 | +- Better error handling and loading states | 
|  | 106 | + | 
|  | 107 | +**New page**: `/enhanced-diff` - Try it out! | 
|  | 108 | + | 
|  | 109 | +### 6. Updated ComparisonService | 
|  | 110 | + | 
|  | 111 | +**Removed**: MCP-specific methods (`analyzeDirectoriesWithMCP`, `getChangedFunctionsFromMCP`) | 
|  | 112 | + | 
|  | 113 | +**Enhanced**: `analyzeDirectories()` now: | 
|  | 114 | +- Calls Rust backend's improved `/api/comparison/analyze` endpoint | 
|  | 115 | +- Calculates `changeMagnitude` for each function (0.0 = no change, 1.0 = complete change) | 
|  | 116 | +- Properly transforms AST-based results to frontend format | 
|  | 117 | + | 
|  | 118 | +## Architecture Clarification | 
|  | 119 | + | 
|  | 120 | +### Why NOT use MCP endpoints? | 
|  | 121 | + | 
|  | 122 | +**MCP (Model Context Protocol)** is designed for AI agents to interact with code, not for web UIs: | 
|  | 123 | +- MCP returns text-based responses that need parsing | 
|  | 124 | +- Adds unnecessary complexity (Next.js API → MCP Server → Rust Backend) | 
|  | 125 | +- Web UI can call Rust backend directly with structured JSON | 
|  | 126 | + | 
|  | 127 | +**Better architecture**: | 
|  | 128 | +``` | 
|  | 129 | +Next.js Frontend → Rust Backend (with AST matching) | 
|  | 130 | +                    ↓ | 
|  | 131 | +                    Advanced diff-engine | 
|  | 132 | +                    - TreeSitter AST parsing | 
|  | 133 | +                    - Hungarian algorithm matching | 
|  | 134 | +                    - Tree edit distance | 
|  | 135 | +                    - Similarity scoring | 
|  | 136 | +``` | 
|  | 137 | + | 
|  | 138 | +**MCP is still useful for**: | 
|  | 139 | +- AI agents analyzing code changes | 
|  | 140 | +- Claude/GPT integrations | 
|  | 141 | +- Command-line tools | 
|  | 142 | +- Automated code review workflows | 
|  | 143 | + | 
|  | 144 | +## Files Changed | 
|  | 145 | + | 
|  | 146 | +### Rust Backend | 
|  | 147 | +- `crates/web-ui/src/handlers.rs` - Use AST-based function matching | 
|  | 148 | +- `crates/diff-engine/src/changes.rs` - Improved change type detection | 
|  | 149 | +- `crates/mcp-server/src/comparison/manager.rs` - Better diff summaries | 
|  | 150 | + | 
|  | 151 | +### Next.js Frontend | 
|  | 152 | +- `nextjs-frontend/src/services/comparisonService.ts` - Removed MCP methods, enhanced analyzeDirectories | 
|  | 153 | +- `nextjs-frontend/src/components/diff/FunctionCentricDiffView.tsx` - NEW: Function-centric view | 
|  | 154 | +- `nextjs-frontend/src/components/diff/EnhancedDiffComparison.tsx` - NEW: Enhanced comparison UI | 
|  | 155 | +- `nextjs-frontend/src/app/enhanced-diff/page.tsx` - NEW: Page for enhanced diff | 
|  | 156 | + | 
|  | 157 | +### Files to Remove (Optional) | 
|  | 158 | +- `nextjs-frontend/src/app/api/mcp/compare-locations/route.ts` - Not needed for web UI | 
|  | 159 | +- `nextjs-frontend/src/app/api/mcp/list-changed-functions/route.ts` - Not needed for web UI | 
|  | 160 | + | 
|  | 161 | +## Testing | 
|  | 162 | + | 
|  | 163 | +1. **Start the Rust backend**: | 
|  | 164 | +   ```bash | 
|  | 165 | +   cd crates/web-ui | 
|  | 166 | +   cargo run --release | 
|  | 167 | +   ``` | 
|  | 168 | + | 
|  | 169 | +2. **Start the Next.js frontend**: | 
|  | 170 | +   ```bash | 
|  | 171 | +   cd nextjs-frontend | 
|  | 172 | +   npm run dev | 
|  | 173 | +   ``` | 
|  | 174 | + | 
|  | 175 | +3. **Navigate to**: http://localhost:3000/enhanced-diff | 
|  | 176 | + | 
|  | 177 | +4. **Test with two directories**: | 
|  | 178 | +   - Select source and target directories | 
|  | 179 | +   - Click "Start Comparison" | 
|  | 180 | +   - Toggle between function-centric and file-centric views | 
|  | 181 | +   - Try filtering by change type | 
|  | 182 | +   - Sort by different criteria | 
|  | 183 | + | 
|  | 184 | +## Key Improvements | 
|  | 185 | + | 
|  | 186 | +✅ **Accurate function detection** - AST parsing instead of regex   | 
|  | 187 | +✅ **Optimal matching** - Hungarian algorithm finds best matches   | 
|  | 188 | +✅ **Clear categorization** - Functions appear in one category with detailed info   | 
|  | 189 | +✅ **Change magnitude sorting** - See most changed functions first   | 
|  | 190 | +✅ **File-agnostic view** - Functions sorted by impact, not file organization   | 
|  | 191 | +✅ **Simpler architecture** - Direct Rust backend calls, no MCP middleman   | 
|  | 192 | +✅ **Better UX** - Visual indicators, search, filtering, multiple views   | 
|  | 193 | + | 
|  | 194 | +## Next Steps (Optional) | 
|  | 195 | + | 
|  | 196 | +1. **Add detailed diff view**: Click a function to see line-by-line AST diff | 
|  | 197 | +2. **Persist comparisons**: Save comparison results for later review | 
|  | 198 | +3. **Export reports**: Generate markdown/HTML reports of changes | 
|  | 199 | +4. **Batch comparisons**: Compare multiple directory pairs | 
|  | 200 | +5. **Integration tests**: Add tests for the new matching algorithm | 
|  | 201 | + | 
0 commit comments