fleetcode/DIFF_VIEWER_IMPLEMENTATION.md
Anish Lakhwara e04c67133b diff viewer
2025-11-08 00:33:44 -08:00

96 lines
3.2 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Git Diff Viewer Implementation
## Overview
The Git Diff Viewer feature has been successfully implemented for FleetCode's web mode. This feature allows users to view changes in their session's worktree compared to the parent branch.
## Implementation Details
### 1. Dependencies
- **@pierre/precision-diffs**: A powerful diff rendering library
- **shiki**: Syntax highlighting for code diffs
### 2. Data Structure (types.ts)
Added `FileDiff` interface to represent file changes:
```typescript
export interface FileDiff {
path: string;
oldPath?: string;
status: 'added' | 'modified' | 'deleted' | 'renamed';
diff: string;
additions: number;
deletions: number;
}
```
### 3. Backend (server.ts)
- Added Socket.IO handler `get-session-diff` that:
- Retrieves the session's worktree path and parent branch
- Executes `git diff <parent-branch>...HEAD` using simple-git
- Parses the diff output into `FileDiff` objects
- Emits the parsed data back to the client via `session-diff-data` event
### 4. Frontend UI (index.html)
- Added full-screen diff viewer modal with:
- Header with title and close button
- Left sidebar for file list
- Right panel for displaying diffs
- Added "Diff" button to active session items in the sidebar
### 5. Frontend Styling (styles.css)
- Added comprehensive styling for:
- Diff viewer modal (full-screen, responsive)
- File list sidebar with status badges
- Diff display area
- File status indicators (added/modified/deleted/renamed)
- Addition/deletion statistics
- Mobile-responsive layouts
### 6. Frontend Logic (renderer.ts)
- Added diff viewer functionality:
- `openDiffViewer(sessionId)`: Opens modal and requests diff data
- `renderDiffFileList()`: Renders list of changed files
- `renderSelectedDiff()`: Renders the selected file's diff using Pierre.js
- Dynamic import of libraries to avoid breaking Electron mode
- Event handlers for Socket.IO events (`session-diff-data`, `session-diff-error`)
## Usage
1. Start a session and make some changes in your worktree
2. Click the "Diff" button next to an active session in the sidebar
3. A modal will appear showing all changed files
4. Click on any file to view its detailed diff
5. Click the × button or outside the modal to close
## Technical Notes
- Libraries (@pierre/precision-diffs and shiki) are loaded dynamically using `import()` to avoid conflicts with Electron's module system
- The diff is computed between the parent branch and HEAD of the worktree
- TypeScript configuration was updated to use ES2020 modules with bundler resolution for better ESM support
- The implementation is fully functional in web mode (server.ts) and does not affect Electron mode (main.ts)
## Build & Run
1. **Build the application:**
```bash
npm run build:all
```
2. **Start the server:**
```bash
npm run server
# or for development with hot reload:
npm run dev:server
```
3. **Access the application:**
Open http://localhost:3000 in your browser
## Verification
The implementation has been verified:
- ✅ Dependencies installed: `@pierre/precision-diffs` and `shiki`
- ✅ Server builds and runs successfully
- ✅ Diff handler is present in compiled server.js
- ✅ Diff libraries are bundled in renderer.web.js
- ✅ All TypeScript compiles without errors