96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
# 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
|