diffwatch 2.0.3 → 2.0.5

package/src/components/DiffViewer.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { useKeyboard } from '@opentui/react';
+import { getRawDiff } from '../utils/git';
+import * as Diff2Html from 'diff2html';
+import * as fsPromises from 'fs/promises';
+import * as path from 'path';
+import { POLLING_INTERVAL } from '../constants';
+import { isBinaryFile } from 'isbinaryfile';
+
+interface DiffViewerProps {
+    filename?: string;
+    focused: boolean;
+    searchQuery?: string;
+    status?: 'modified' | 'new' | 'deleted' | 'renamed' | 'unknown' | 'unstaged' | 'unchanged' | 'ignored';
+    repoPath?: string;
+}
+
+export function DiffViewer({ filename, focused, searchQuery, status, repoPath }: DiffViewerProps) {
+    const [rawDiff, setRawDiff] = useState('');
+    const [fileContent, setFileContent] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [isBinary, setIsBinary] = useState(false);
+    const scrollRef = useRef<any>(null);
+    const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+    const loadContent = async (showLoading = true) => {
+        if (!filename) {
+            setRawDiff('');
+            setFileContent('');
+            setIsBinary(false);
+            return;
+        }
+
+        if (showLoading) setLoading(true);
+
+        if (status === 'new' || status === 'unchanged') {
+            try {
+                const absPath = path.isAbsolute(filename) ? filename : path.join(repoPath || process.cwd(), filename);
+                const content = await fsPromises.readFile(absPath, 'utf-8');
+                const binary = await isBinaryFile(absPath);
+                if (binary) {
+                    setFileContent('');
+                    setRawDiff('');
+                    setIsBinary(true);
+                } else {
+                    setFileContent(content);
+                    setRawDiff('');
+                    setIsBinary(false);
+                }
+            } catch (e) {
+                setFileContent('');
+                setIsBinary(false);
+            }
+            if (showLoading) setLoading(false);
+        } else {
+            const diff = await getRawDiff(filename);
+            setRawDiff(diff);
+            setFileContent('');
+            setIsBinary(false);
+            if (showLoading) setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadContent(true);
+    }, [filename, status, repoPath]);
+
+    useEffect(() => {
+        if (!filename) return;
+
+        // Clear any existing interval to prevent duplicates
+        if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+        }
+
+        pollingIntervalRef.current = setInterval(async () => {
+            await loadContent(false);
+        }, POLLING_INTERVAL);
+
+        // Cleanup function
+        return () => {
+            if (pollingIntervalRef.current) {
+                clearInterval(pollingIntervalRef.current);
+                pollingIntervalRef.current = null;
+            }
+        };
+    }, [filename, status, repoPath]);
+
+const diffData = useMemo(() => {
+        if (!rawDiff) return null;
+        const parsed = Diff2Html.parse(rawDiff, {
+            matching: 'lines'
+        });
+        return parsed[0] || null;
+    }, [rawDiff]);
+
+    useKeyboard((key) => {
+        if (!focused || !scrollRef.current) return;
+
+        if (key.name === 'up') {
+            scrollRef.current.scrollTop = Math.max(0, scrollRef.current.scrollTop - 1);
+        } else if (key.name === 'down') {
+            scrollRef.current.scrollTop = scrollRef.current.scrollTop + 1;
+        } else if (key.name === 'pageup') {
+            scrollRef.current.scrollTop = Math.max(0, scrollRef.current.scrollTop - 10);
+        } else if (key.name === 'pagedown') {
+            scrollRef.current.scrollTop = scrollRef.current.scrollTop + 10;
+        }
+    });
+
+    const hasChanges = diffData && diffData.blocks.length > 0;
+    const isNewFile = status === 'new';
+    const contentLines = useMemo(() => {
+        if (!fileContent) return [];
+        return fileContent.split('\n');
+    }, [fileContent]);
+
+    // Soft wrap lines at approximately 80 characters
+    const MAX_LINE_WIDTH = 80;
+
+    const wrapLine = (text: string, maxLength: number): string[] => {
+        if (text.length <= maxLength) return [text];
+
+        const lines: string[] = [];
+        let remaining = text;
+
+        while (remaining.length > 0) {
+            if (remaining.length <= maxLength) {
+                lines.push(remaining);
+                break;
+            }
+
+            // Find best break point (prefer spaces)
+            let breakIndex = maxLength;
+            const lastSpace = remaining.lastIndexOf(' ', maxLength);
+
+            if (lastSpace > maxLength * 0.5) {
+                breakIndex = lastSpace + 1;
+            }
+
+            lines.push(remaining.substring(0, breakIndex));
+            remaining = remaining.substring(breakIndex);
+        }
+
+        return lines;
+    };
+
+    return (
+        <box
+            border
+            title={` Diff (${filename || 'None'}) `}
+            width="70%"
+            borderColor={focused ? 'yellow' : 'grey'}
+            flexDirection="column"
+        >
+            {loading ? (
+                <text>Loading diff...</text>
+            ) : !filename ? (
+                <text>Select a file to view changes.</text>
+            ) : isBinary ? (
+                <text fg="gray">Binary file - content not displayed.</text>
+            ) : isNewFile ? (
+                <scrollbox flexGrow={1} ref={scrollRef}>
+                    {contentLines.flatMap((line, i) => {
+                        const wrappedLines = wrapLine(line, MAX_LINE_WIDTH);
+
+                        return wrappedLines.map((wrappedLine, wrapIdx) => {
+                            const isFirstLine = wrapIdx === 0;
+                            let renderedParts: React.ReactNode = wrappedLine;
+
+                            if (searchQuery && line.toLowerCase().includes(searchQuery.toLowerCase())) {
+                                // Sanitize search query for regex to prevent ReDoS attacks
+                                const sanitizedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                                const parts = wrappedLine.split(new RegExp(`(${sanitizedQuery})`, 'gi'));
+                                renderedParts = parts.map((part, idx) =>
+                                    part.toLowerCase() === searchQuery.toLowerCase()
+                                        ? <span key={idx} fg="black" bg="yellow">{part}</span>
+                                        : part
+                                );
+                            }
+
+                            return (
+                                <box key={`${i}-${wrapIdx}`} flexDirection="row" height={1}>
+                                    {isFirstLine ? (
+                                        <text fg="gray" width={6}>{`${String(i + 1).padStart(4)}: `}</text>
+                                    ) : (
+                                        <text fg="gray" width={6}>      </text>
+                                    )}
+                                    <text fg="green" flexGrow={1}>
+                                        {renderedParts}
+                                    </text>
+                                </box>
+                            );
+                        });
+                    })}
+                </scrollbox>
+            ) : !hasChanges ? (
+                <text fg="gray">No changes detected.</text>
+            ) : (
+                <scrollbox flexGrow={1} ref={scrollRef}>
+                    {diffData.blocks.map((block, bIdx) => (
+                        <box key={bIdx} flexDirection="column" marginBottom={1}>
+                            <text fg="cyan">{`      ${block.header}`}</text>
+                            <text fg="cyan">{` ${block.header}`}</text>
+                            {block.lines.map((line, lIdx) => {
+                                let fg = 'white';
+                                let prefix = ' ';
+                                if (line.type === 'insert') { fg = 'green'; prefix = '+'; }
+                                else if (line.type === 'delete') { fg = 'brightRed'; prefix = '-'; }
+
+                                const ln = line.type === 'insert' ? line.newNumber : line.oldNumber;
+                                const content = line.content.substring(1);
+
+                                const lnText = ln ? `${String(ln).padStart(4)}: ` : '      ';
+
+                                // Wrap content if it's too long
+                                const wrappedContent = wrapLine(content, MAX_LINE_WIDTH);
+
+                                return (
+                                    <>
+                                        {wrappedContent.map((wrappedLine, wrapIdx) => {
+                                            const isFirstLine = wrapIdx === 0;
+
+                                            let renderedParts: React.ReactNode;
+                                            if (searchQuery && content.toLowerCase().includes(searchQuery.toLowerCase())) {
+                                                // Sanitize search query for regex to prevent ReDoS attacks
+                                                const sanitizedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                                                const parts = wrappedLine.split(new RegExp(`(${sanitizedQuery})`, 'gi'));
+                                                renderedParts = parts.map((part, i) =>
+                                                    part.toLowerCase() === searchQuery.toLowerCase()
+                                                        ? <span key={i} fg="black" bg="yellow">{part}</span>
+                                                        : part
+                                                );
+                                            } else {
+                                                renderedParts = wrappedLine;
+                                            }
+
+                                            return (
+                                                <box key={`${bIdx}-${lIdx}-${wrapIdx}`} flexDirection="row" height={1}>
+                                                    <text fg="gray" width={lnText.length}>
+                                                        {isFirstLine ? lnText : '      '}
+                                                    </text>
+                                                    <text fg={fg} flexGrow={1}>
+                                                        {isFirstLine ? `${prefix}${renderedParts}` : ` ${renderedParts}`}
+                                                    </text>
+                                                </box>
+                                            );
+                                        })}
+                                    </>
+                                );
+                            })}
+                        </box>
+                    ))}
+                </scrollbox>
+            )}
+        </box>
+    );
+}

package/src/components/FileList.tsx

@@ -0,0 +1,95 @@
+import { useRef, useEffect } from 'react';
+import { type FileStatus } from '../utils/git';
+
+interface FileListProps {
+    files: FileStatus[];
+    selectedIndex: number;
+    focused: boolean;
+    searchQuery?: string;
+    onSelect?: (index: number) => void;
+    onScroll?: (delta: number) => void;
+}
+
+export function FileList({ files, selectedIndex, focused, searchQuery, onSelect, onScroll }: FileListProps) {
+    const scrollRef = useRef<any>(null);
+
+    useEffect(() => {
+        if (scrollRef.current) {
+            const viewportHeight = scrollRef.current.viewport?.height || 10;
+            const scrollTop = scrollRef.current.scrollTop;
+
+            if (selectedIndex < scrollTop) {
+                scrollRef.current.scrollTop = selectedIndex;
+            } else if (selectedIndex >= scrollTop + viewportHeight) {
+                scrollRef.current.scrollTop = selectedIndex - viewportHeight + 1;
+            }
+        }
+    }, [selectedIndex]);
+
+    const title = searchQuery
+        ? ` Files (${files.length}) - "${searchQuery}" `
+        : ` Files (${files.length}) `;
+
+    return (
+        <box
+            border
+            title={title}
+            width="30%"
+            height="100%"
+            borderColor={focused ? 'yellow' : 'grey'}
+            flexDirection="column"
+        >
+            <scrollbox
+                flexGrow={1}
+                ref={scrollRef}
+                onMouseScroll={(e: any) => {
+                    // OpenTUI MouseButton: WHEEL_UP = 4, WHEEL_DOWN = 5
+                    const delta = e.button === 4 ? -1 : (e.button === 5 ? 1 : 0);
+                    if (delta !== 0) onScroll?.(delta);
+                }}
+            >
+                {files.map((file, i) => {
+                    const isSelected = i === selectedIndex;
+                    const colorMap: Record<string, string> = {
+                        modified: 'yellow',
+                        new: 'green',
+                        deleted: 'brightRed',
+                        renamed: 'blue',
+                        unstaged: 'cyan',
+                        unmerged: 'magenta',
+                        ignored: 'grey',
+                        unknown: 'white'
+                    };
+
+                    const color = colorMap[file.status] || 'white';
+                    const symbolMap: Record<string, string> = {
+                        modified: 'M',
+                        new: 'A',
+                        deleted: 'D',
+                        renamed: 'R',
+                        unstaged: 'M',
+                        unmerged: 'U',
+                        ignored: '!',
+                        unknown: '?'
+                    };
+                    const symbol = symbolMap[file.status] || '?';
+
+                    return (
+                        <box
+                            key={file.path}
+                            height={1}
+                            backgroundColor={isSelected ? 'white' : undefined}
+                            onMouseDown={() => onSelect?.(i)}
+                        >
+                            <text
+                                fg={isSelected ? 'black' : color}
+                            >
+                                {` ${symbol} ${file.path}`}
+                            </text>
+                        </box>
+                    );
+                })}
+            </scrollbox>
+        </box>
+    );
+}

package/src/components/HistoryViewer.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useRef, useState } from 'react';
+import { useKeyboard } from '@opentui/react';
+import type { CommitInfo, ChangedFile } from '../utils/git';
+import { getFilesInCommit } from '../utils/git';
+
+interface HistoryViewerProps {
+    commits: CommitInfo[];
+    onClose: () => void;
+}
+
+export function HistoryViewer({ commits, onClose }: HistoryViewerProps) {
+    const [selectedRow, setSelectedRow] = useState(0);
+    const [showFileDialog, setShowFileDialog] = useState(false);
+    const [fileDialogFiles, setFileDialogFiles] = useState<ChangedFile[]>([]);
+    const [loadingFiles, setLoadingFiles] = useState(false);
+
+    const scrollRef = useRef<any>(null);
+
+    useKeyboard((key) => {
+        if (key.name === 'escape') {
+            if (showFileDialog) {
+                // Close file dialog if open
+                setShowFileDialog(false);
+            } else {
+                onClose();
+            }
+        } else if (key.name === 'space' && commits.length > 0) {
+            // Show file dialog for selected commit (Space)
+            const commit = commits[selectedRow];
+            if (commit) {
+                setLoadingFiles(true);
+                getFilesInCommit(commit.hash).then(files => {
+                    setFileDialogFiles(files);
+                    setShowFileDialog(true);
+                    setLoadingFiles(false);
+                });
+            }
+        } else if (scrollRef.current) {
+            if (key.name === 'up') {
+                if (showFileDialog) return; // Don't navigate rows when dialog is open
+                setSelectedRow(prev => Math.max(0, prev - 1));
+                scrollRef.current.scrollTop = Math.max(0, scrollRef.current.scrollTop - 1);
+            } else if (key.name === 'down') {
+                if (showFileDialog) return; // Don't navigate rows when dialog is open
+                setSelectedRow(prev => Math.min(commits.length - 1, prev + 1));
+                scrollRef.current.scrollTop = scrollRef.current.scrollTop + 1;
+            } else if (key.name === 'pageup') {
+                if (showFileDialog) return; // Don't navigate rows when dialog is open
+                const newRow = Math.max(0, selectedRow - 10);
+                setSelectedRow(newRow);
+                scrollRef.current.scrollTop = Math.max(0, scrollRef.current.scrollTop - 10);
+            } else if (key.name === 'pagedown') {
+                if (showFileDialog) return; // Don't navigate rows when dialog is open
+                const newRow = Math.min(commits.length - 1, selectedRow + 10);
+                setSelectedRow(newRow);
+                scrollRef.current.scrollTop = scrollRef.current.scrollTop + 10;
+            }
+        }
+    });
+
+    const formatMessage = (message: string, maxLength: number = 60): string => {
+        if (message.length <= maxLength) {
+            return message;
+        }
+        return message.substring(0, maxLength - 3) + '...';
+    };
+
+    const getStatusSymbol = (status: ChangedFile['status']): string => {
+        // Return the first character of the Git status code directly
+        return status.charAt(0) || '~';
+    };
+
+    return (
+        <box
+            position="absolute"
+            top={0}
+            left={0}
+            width="100%"
+            height="100%"
+            backgroundColor="black"
+            flexDirection="column"
+        >
+            <box height={1} backgroundColor="gray" flexDirection="row">
+                <text width={10} fg="white"><strong>  Hash</strong></text>
+                <text width={25} fg="white"><strong>Author</strong></text>
+                <text width={20} fg="white"><strong>Date</strong></text>
+                <text fg="white" flexGrow={1}><strong>Message</strong></text>
+            </box>
+            <scrollbox flexGrow={1} ref={scrollRef}>
+                {commits.length === 0 ? (
+                    <text fg="gray">No commit history found.</text>
+                ) : (
+                    commits.map((commit, index) => (
+                        <box
+                            key={`${commit.hash}-${index}`}
+                            flexDirection="row"
+                            height={1}
+                            backgroundColor={index === selectedRow ? "blue" : "black"}
+                            onMouseDown={() => {
+                                // If file dialog is open, close it first
+                                if (showFileDialog) {
+                                    setShowFileDialog(false);
+                                } else {
+                                    // Otherwise, select the row
+                                    setSelectedRow(index);
+                                }
+                            }}
+                        >
+                            <text width={10} fg="cyan">  {commit.hash}</text>
+                            <text width={25} fg={index === selectedRow ? "white" : "green"}>{commit.author.substring(0, 24)}</text>
+                            <text width={20} fg={index === selectedRow ? "white" : "yellow"}>{commit.date.substring(0, 19)}</text>
+                            <text fg={index === selectedRow ? "white" : "white"} flexGrow={1}>{formatMessage(commit.message)}</text>
+                        </box>
+                    ))
+                )}
+            </scrollbox>
+            <box height={1} backgroundColor="gray" flexDirection="row" justifyContent="center">
+                <text fg="yellow">
+                    <strong>↑↓</strong> Navigate | <strong>PgUp/PgDn</strong> Page | <strong>Space</strong> Show Files | <strong>Esc</strong> Close
+                </text>
+            </box>
+
+            {/* File Dialog */}
+            {showFileDialog && (
+                <box
+                    position="absolute"
+                    top="20%"
+                    left="20%"
+                    width="60%"
+                    height="60%"
+                    backgroundColor="black"
+                    border
+                    flexDirection="column"
+                    title={` Files Changed in ${commits[selectedRow]?.hash || ''} `}
+                >
+                    {loadingFiles ? (
+                        <text>Loading files...</text>
+                    ) : fileDialogFiles.length === 0 ? (
+                        <text>No files changed in this commit.</text>
+                    ) : (
+                        <>
+                            <scrollbox flexGrow={1}>
+                                {fileDialogFiles.map((file, index) => (
+                                    <box key={index} flexDirection="row" height={1}>
+                                        <text width={8} fg={
+                                            file.status.charAt(0) === 'A' ? 'green' :  // Added
+                                            file.status.charAt(0) === 'D' ? 'red' :    // Deleted
+                                            file.status.charAt(0) === 'R' ? 'yellow' : // Renamed
+                                            file.status.charAt(0) === 'C' ? 'blue' :   // Copied
+                                            file.status.charAt(0) === 'T' ? 'magenta' : // Type change
+                                            'cyan' // Modified or other
+                                        }>
+                                            {'  '}{file.status.charAt(0)}  {/* Show 2 spaces padding before the raw Git status code */}
+                                        </text>
+                                        <text fg="white" flexGrow={1}>  {file.path}</text>
+                                    </box>
+                                ))}
+                            </scrollbox>
+                            <box height={1} backgroundColor="gray" flexDirection="row" justifyContent="center">
+                                <text fg="yellow">
+                                    <strong>Esc</strong> Close
+                                </text>
+                            </box>
+                        </>
+                    )}
+                </box>
+            )}
+        </box>
+    );
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,27 @@
+interface StatusBarProps {
+    branch: string;
+    branchCount: number;
+    fileCount: number;
+    searchActive?: boolean;
+}
+
+export function StatusBar({ branch, branchCount, fileCount, searchActive = false }: StatusBarProps) {
+    // Show file-related options if either there are files OR search is active
+    const showFileOptions = fileCount > 0 || searchActive;
+    return (
+        <box height={1} flexDirection="row" justifyContent="space-between">
+            <text>
+                <span fg="green">←→</span> Switch
+                {showFileOptions && (
+                    <>
+                        {' '}| <span fg="green">⏎</span> Open | <span fg="green">S</span> Search | <span fg="green">R</span> Revert | <span fg="green">D</span> Delete
+                    </>
+                )}
+                {' '}| <span fg="green">H</span> History | <span fg="green">Q</span> Quit
+            </text>
+            <text>
+                <span fg="cyan">Branch:</span> <span fg="yellow">{branch}</span> <span fg="gray">({branchCount})</span>
+            </text>
+        </box>
+    );
+}

package/src/constants.ts

@@ -0,0 +1 @@
+export const POLLING_INTERVAL = 2000;

package/src/index.tsx

@@ -0,0 +1,106 @@
+import { createCliRenderer } from '@opentui/core';
+import { createRoot } from '@opentui/react';
+import App from './App';
+import { isGitRepository } from './utils/git';
+import { BUILD_VERSION } from './version';
+
+function getVersion(): string {
+    return BUILD_VERSION || 'unknown';
+}
+
+function showHelp(): void {
+    const version = getVersion();
+    console.log(`DiffWatch v${version}\n`);
+    console.log('A TUI app for watching git repository file changes with diffs.\n');
+    console.log('USAGE:');
+    console.log('  diffwatch [OPTIONS]\n');
+    console.log('OPTIONS:');
+    console.log('  --path <path>    Specify git repository path to watch');
+    console.log('  -p <path>        Same as --path');
+    console.log('  --help, -h       Show this help message');
+    console.log('  --version, -v    Show version number\n');
+    console.log('KEYBOARD SHORTCUTS:');
+    console.log('  ↑/↓              Navigate file list');
+    console.log('  Tab/←/→          Switch between file list and diff view');
+    console.log('  Enter            Open selected file in default editor');
+    console.log('  D                Delete selected file');
+    console.log('  R                Revert changes to selected file');
+    console.log('  S                Enter search mode');
+    console.log('  H                View commit history');
+    console.log('  Q                Quit application\n');
+    console.log('For more information, visit https://github.com/sarfraznawaz2005/diffwatch');
+    process.exit(0);
+}
+
+function showVersion(): void {
+    const version = getVersion();
+    console.log(`DiffWatch v${version}`);
+    process.exit(0);
+}
+
+function parseArgs(): { path?: string } {
+    const args = process.argv.slice(2);
+    const result: { path?: string } = {};
+
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+
+        if (arg === '--help' || arg === '-h') {
+            showHelp();
+        } else if (arg === '--version' || arg === '-v') {
+            showVersion();
+        } else if (arg === '--path' || arg === '-p') {
+            if (i + 1 < args.length) {
+                result.path = args[i + 1];
+                i++;
+            } else {
+                console.error('Error: --path requires a path argument');
+                process.exit(1);
+            }
+        } else {
+            console.error(`Error: Unknown option '${arg}'`);
+            console.error('Use --help for usage information');
+            process.exit(1);
+        }
+    }
+
+    return result;
+}
+
+async function main() {
+    const { path: customPath } = parseArgs();
+
+    if (customPath) {
+        try {
+            process.chdir(customPath);
+        } catch (error) {
+            console.error(`Error: Invalid path '${customPath}'`);
+            console.error('The specified directory does not exist.');
+            process.exit(1);
+        }
+    }
+
+    // Check if current directory is a git repository BEFORE creating renderer
+    const isGitRepo = await isGitRepository();
+
+    if (!isGitRepo) {
+        const pathInfo = customPath ? `\nSpecified path: ${customPath}` : '';
+        const errorMessage = [
+            'Error: Not a git repository',
+            '',
+            'Please run this application from within a git repository.',
+            pathInfo
+        ].filter(Boolean).join('\n') + '\n';
+
+        console.error(errorMessage);
+        process.exit(1);
+    }
+
+    const renderer = await createCliRenderer();
+    const root = createRoot(renderer);
+
+    root.render(<App />);
+}
+
+main().catch(console.error);
+