difit 0.0.1

package/dist/tui/components/FileList.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+const FileList = ({ files, selectedIndex }) => {
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'A':
+                return 'green';
+            case 'M':
+                return 'yellow';
+            case 'D':
+                return 'red';
+            default:
+                return 'white';
+        }
+    };
+    const getStatusLabel = (status) => {
+        switch (status) {
+            case 'A':
+                return '[+]';
+            case 'M':
+                return '[M]';
+            case 'D':
+                return '[-]';
+            default:
+                return '[?]';
+        }
+    };
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true },
+                "Changed Files (",
+                files.length,
+                ")")),
+        files.map((file, index) => (React.createElement(Box, { key: `${file.path}-${index}` },
+            React.createElement(Text, { color: index === selectedIndex ? 'cyan' : undefined, backgroundColor: index === selectedIndex ? 'gray' : undefined },
+                index === selectedIndex ? '▶ ' : '  ',
+                React.createElement(Text, { color: getStatusColor(file.status) }, getStatusLabel(file.status)),
+                ' ',
+                file.path,
+                ' ',
+                React.createElement(Text, { dimColor: true },
+                    "(+",
+                    file.additions,
+                    " -",
+                    file.deletions,
+                    ")")))))));
+};
+export default FileList;

package/dist/tui/components/SideBySideDiffViewer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FileDiff } from '../../types/diff.js';
+interface SideBySideDiffViewerProps {
+    files: FileDiff[];
+    initialFileIndex: number;
+    onBack: () => void;
+}
+declare const SideBySideDiffViewer: React.FC<SideBySideDiffViewerProps>;
+export default SideBySideDiffViewer;

package/dist/tui/components/SideBySideDiffViewer.js

@@ -0,0 +1,237 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import { parseDiff } from '../utils/parseDiff.js';
+const SideBySideDiffViewer = ({ files, initialFileIndex, onBack, }) => {
+    const [currentFileIndex, setCurrentFileIndex] = useState(initialFileIndex);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const currentFile = files[currentFileIndex];
+    if (!currentFile || files.length === 0) {
+        return (React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+            React.createElement(Text, { color: "yellow" }, "No files to display"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Press ESC or 'b' to go back"))));
+    }
+    const parsedDiff = parseDiff(currentFile.diff);
+    // Calculate total lines for current file
+    const allLines = [];
+    parsedDiff.chunks.forEach((chunk) => {
+        // Add chunk header
+        allLines.push({
+            old: chunk.header,
+            new: chunk.header,
+            type: 'header',
+        });
+        let oldIdx = 0;
+        let newIdx = 0;
+        while (oldIdx < chunk.lines.length || newIdx < chunk.lines.length) {
+            const oldLine = chunk.lines[oldIdx];
+            const newLine = chunk.lines[newIdx];
+            if (oldLine?.type === 'remove' && newLine?.type === 'add') {
+                // Same line modified - show side by side
+                allLines.push({
+                    old: oldLine.content,
+                    new: newLine.content,
+                    oldNum: oldLine.oldLineNumber,
+                    newNum: newLine.newLineNumber,
+                    type: 'modified',
+                });
+                oldIdx++;
+                newIdx++;
+            }
+            else if (oldLine?.type === 'remove') {
+                // Line removed
+                allLines.push({
+                    old: oldLine.content,
+                    oldNum: oldLine.oldLineNumber,
+                    type: 'remove',
+                });
+                oldIdx++;
+            }
+            else if (newLine?.type === 'add') {
+                // Line added
+                allLines.push({
+                    new: newLine.content,
+                    newNum: newLine.newLineNumber,
+                    type: 'add',
+                });
+                newIdx++;
+            }
+            else if (oldLine?.type === 'context') {
+                // Unchanged line
+                allLines.push({
+                    old: oldLine.content,
+                    new: oldLine.content,
+                    oldNum: oldLine.oldLineNumber,
+                    newNum: oldLine.newLineNumber,
+                    type: 'context',
+                });
+                oldIdx++;
+                newIdx++;
+            }
+            else {
+                oldIdx++;
+                newIdx++;
+            }
+        }
+    });
+    const viewportHeight = Math.max(10, (process.stdout.rows || 24) - 10); // StatusBar(3) + file nav(3) + footer(3) + margin(1)
+    const maxScroll = Math.max(0, allLines.length - viewportHeight);
+    const { exit } = useApp();
+    useInput((input, key) => {
+        if (input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            return;
+        }
+        if (key.escape || input === 'b') {
+            onBack();
+            return;
+        }
+        // Scroll within file
+        if (key.upArrow || input === 'k') {
+            setScrollOffset((prev) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow || input === 'j') {
+            setScrollOffset((prev) => Math.min(maxScroll, prev + 1));
+        }
+        if (key.pageUp) {
+            setScrollOffset((prev) => Math.max(0, prev - viewportHeight));
+        }
+        if (key.pageDown) {
+            setScrollOffset((prev) => Math.min(maxScroll, prev + viewportHeight));
+        }
+        // Navigate between files
+        if (key.tab && !key.shift) {
+            // Next file (loop to first when at end)
+            setCurrentFileIndex((currentFileIndex + 1) % files.length);
+            setScrollOffset(0);
+        }
+        if (key.tab && key.shift) {
+            // Previous file (loop to last when at start)
+            setCurrentFileIndex((currentFileIndex - 1 + files.length) % files.length);
+            setScrollOffset(0);
+        }
+    }, { isActive: true });
+    const visibleLines = allLines.slice(scrollOffset, scrollOffset + viewportHeight);
+    const terminalWidth = process.stdout.columns || 80;
+    const columnWidth = Math.floor((terminalWidth - 6) / 2); // 6 for borders and separators
+    const getLineColor = (type) => {
+        switch (type) {
+            case 'add':
+                return 'green';
+            case 'remove':
+                return 'red';
+            case 'modified':
+                return undefined; // Will be handled separately for each side
+            case 'header':
+                return 'cyan';
+            default:
+                return undefined;
+        }
+    };
+    const truncateLine = (line, width) => {
+        if (line.length <= width)
+            return line.padEnd(width);
+        return line.substring(0, width - 1) + '…';
+    };
+    return (React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+        React.createElement(Box, { marginBottom: 1, flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Text, { bold: true },
+                    currentFile.path,
+                    " (",
+                    currentFileIndex + 1,
+                    "/",
+                    files.length,
+                    ")"),
+                React.createElement(Text, { dimColor: true },
+                    ' ',
+                    "- ",
+                    currentFile.additions,
+                    " additions, ",
+                    currentFile.deletions,
+                    " deletions")),
+            React.createElement(Box, { height: 2, overflow: "hidden", flexDirection: "column" }, (() => {
+                const terminalWidth = process.stdout.columns || 80;
+                const maxWidth = terminalWidth - 4; // Leave some margin
+                // Generate file list with current file highlighted
+                const fileItems = [];
+                // Add files before current
+                for (let i = Math.max(0, currentFileIndex - 2); i < currentFileIndex; i++) {
+                    fileItems.push({
+                        text: files[i].path,
+                        isActive: false,
+                    });
+                }
+                // Add current file
+                fileItems.push({
+                    text: `[${files[currentFileIndex].path}]`,
+                    isActive: true,
+                });
+                // Add files after current
+                for (let i = currentFileIndex + 1; i < Math.min(files.length, currentFileIndex + 3); i++) {
+                    fileItems.push({
+                        text: files[i].path,
+                        isActive: false,
+                    });
+                }
+                // Build lines (max 2 lines)
+                const lines = [[]];
+                let currentLineWidth = 0;
+                for (const item of fileItems) {
+                    const itemWidth = item.text.length + 3; // Include separator
+                    if (currentLineWidth + itemWidth > maxWidth && lines.length < 2) {
+                        lines.push([]);
+                        currentLineWidth = 0;
+                    }
+                    if (lines.length <= 2) {
+                        lines[lines.length - 1].push(item);
+                        currentLineWidth += itemWidth;
+                    }
+                }
+                return lines.map((line, lineIndex) => (React.createElement(Box, { key: lineIndex }, line.map((item, itemIndex) => (React.createElement(React.Fragment, { key: itemIndex },
+                    itemIndex > 0 && React.createElement(Text, { dimColor: true }, " | "),
+                    React.createElement(Text, { color: item.isActive ? 'cyan' : undefined, dimColor: !item.isActive }, item.text)))))));
+            })())),
+        React.createElement(Box, { borderStyle: "single", flexDirection: "column", flexGrow: 1 },
+            React.createElement(Box, { borderStyle: "single", borderTop: false, borderLeft: false, borderRight: false },
+                React.createElement(Box, { width: columnWidth },
+                    React.createElement(Text, { dimColor: true }, " \u2502 "),
+                    React.createElement(Text, { bold: true }, "Old")),
+                React.createElement(Text, { dimColor: true }, " \u2503 "),
+                React.createElement(Box, { width: columnWidth },
+                    React.createElement(Text, { dimColor: true }, " \u2502 "),
+                    React.createElement(Text, { bold: true }, "New"))),
+            React.createElement(Box, { flexDirection: "column", flexGrow: 1 }, visibleLines.map((line, index) => (React.createElement(Box, { key: `line-${scrollOffset + index}` },
+                React.createElement(Box, { width: columnWidth },
+                    React.createElement(Text, { dimColor: true }, line.oldNum ? String(line.oldNum).padStart(4) : '    '),
+                    React.createElement(Text, { dimColor: true }, " \u2502 "),
+                    React.createElement(Text, { color: line.type === 'remove' || line.type === 'modified' ? 'red' : undefined, dimColor: line.type === 'header' }, line.type === 'remove' || line.type === 'modified' ? '- ' : '  '),
+                    React.createElement(Text, { color: line.type === 'remove' || line.type === 'modified'
+                            ? 'red'
+                            : getLineColor(line.type) }, line.old
+                        ? truncateLine(line.old, columnWidth - 10)
+                        : ' '.repeat(columnWidth - 10))),
+                React.createElement(Text, { dimColor: true }, " \u2503 "),
+                React.createElement(Box, { width: columnWidth },
+                    React.createElement(Text, { dimColor: true }, line.newNum ? String(line.newNum).padStart(4) : '    '),
+                    React.createElement(Text, { dimColor: true }, " \u2502 "),
+                    React.createElement(Text, { color: line.type === 'add' || line.type === 'modified' ? 'green' : undefined, dimColor: line.type === 'header' }, line.type === 'add' || line.type === 'modified' ? '+ ' : '  '),
+                    React.createElement(Text, { color: line.type === 'add' || line.type === 'modified'
+                            ? 'green'
+                            : getLineColor(line.type) }, line.new
+                        ? truncateLine(line.new, columnWidth - 10)
+                        : ' '.repeat(columnWidth - 10)))))))),
+        React.createElement(Box, { marginTop: 1, justifyContent: "space-between" },
+            React.createElement(Text, { dimColor: true },
+                "Lines ",
+                scrollOffset + 1,
+                "-",
+                Math.min(scrollOffset + viewportHeight, allLines.length),
+                " of",
+                ' ',
+                allLines.length,
+                scrollOffset + viewportHeight < allLines.length &&
+                    ` (${allLines.length - scrollOffset - viewportHeight} more)`),
+            React.createElement(Text, { dimColor: true }, "Tab: next file | Shift+Tab: prev file | \u2191\u2193/jk: scroll | ESC/b: back"))));
+};
+export default SideBySideDiffViewer;

package/dist/tui/components/StatusBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface StatusBarProps {
+    commitish: string;
+    totalFiles: number;
+    currentMode: 'list' | 'inline' | 'side-by-side';
+}
+declare const StatusBar: React.FC<StatusBarProps>;
+export default StatusBar;

package/dist/tui/components/StatusBar.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+const StatusBar = ({ commitish, totalFiles, currentMode }) => {
+    return (React.createElement(Box, { borderStyle: "round", paddingX: 1, marginBottom: 1 },
+        React.createElement(Box, { flexGrow: 1 },
+            React.createElement(Text, { bold: true, color: "cyan" }, "\uD83D\uDCCB ReviewIt TUI"),
+            React.createElement(Text, null, " | "),
+            React.createElement(Text, { color: "yellow" }, commitish),
+            React.createElement(Text, null, " | "),
+            React.createElement(Text, null,
+                totalFiles,
+                " files changed")),
+        React.createElement(Box, null,
+            React.createElement(Text, { dimColor: true },
+                "[",
+                currentMode === 'list'
+                    ? 'File List'
+                    : currentMode === 'side-by-side'
+                        ? 'Side-by-Side'
+                        : 'Inline Diff',
+                "]"))));
+};
+export default StatusBar;

package/dist/tui/utils/parseDiff.d.ts

@@ -0,0 +1,2 @@
+import { ParsedDiff } from '../../types/diff.js';
+export declare function parseDiff(diffText: string): ParsedDiff;

package/dist/tui/utils/parseDiff.js

@@ -0,0 +1,68 @@
+export function parseDiff(diffText) {
+    const lines = diffText.split('\n');
+    const chunks = [];
+    let currentChunk = null;
+    let oldLineNumber = 0;
+    let newLineNumber = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Skip file headers
+        if (line.startsWith('diff --git') ||
+            line.startsWith('index ') ||
+            line.startsWith('---') ||
+            line.startsWith('+++')) {
+            continue;
+        }
+        // Chunk header
+        if (line.startsWith('@@')) {
+            const match = line.match(/@@ -(\d+),?(\d*) \+(\d+),?(\d*) @@/);
+            if (match) {
+                const [, oldStart, oldLinesStr, newStart, newLinesStr] = match;
+                currentChunk = {
+                    header: line,
+                    oldStart: parseInt(oldStart),
+                    oldLines: parseInt(oldLinesStr || '1'),
+                    newStart: parseInt(newStart),
+                    newLines: parseInt(newLinesStr || '1'),
+                    lines: [],
+                };
+                chunks.push(currentChunk);
+                oldLineNumber = currentChunk.oldStart - 1;
+                newLineNumber = currentChunk.newStart - 1;
+            }
+            continue;
+        }
+        // Skip if no current chunk
+        if (!currentChunk)
+            continue;
+        // Parse diff lines
+        if (line.startsWith('+')) {
+            newLineNumber++;
+            currentChunk.lines.push({
+                type: 'add',
+                content: line.substring(1),
+                newLineNumber: newLineNumber,
+            });
+        }
+        else if (line.startsWith('-')) {
+            oldLineNumber++;
+            currentChunk.lines.push({
+                type: 'remove',
+                content: line.substring(1),
+                oldLineNumber: oldLineNumber,
+            });
+        }
+        else {
+            // Context line
+            oldLineNumber++;
+            newLineNumber++;
+            currentChunk.lines.push({
+                type: 'context',
+                content: line.substring(1),
+                oldLineNumber: oldLineNumber,
+                newLineNumber: newLineNumber,
+            });
+        }
+    }
+    return { chunks };
+}

package/dist/types/diff.d.ts

@@ -0,0 +1,33 @@
+export interface DiffFile {
+    path: string;
+    oldPath?: string;
+    status: 'modified' | 'added' | 'deleted' | 'renamed';
+    additions: number;
+    deletions: number;
+    chunks: DiffChunk[];
+}
+export interface DiffChunk {
+    header: string;
+    oldStart: number;
+    oldLines: number;
+    newStart: number;
+    newLines: number;
+    lines: DiffLine[];
+}
+export interface DiffLine {
+    type: 'add' | 'delete' | 'normal' | 'hunk';
+    content: string;
+    oldLineNumber?: number;
+    newLineNumber?: number;
+}
+export interface DiffResponse {
+    commit: string;
+    files: DiffFile[];
+}
+export interface Comment {
+    id: string;
+    file: string;
+    line: number;
+    body: string;
+    timestamp: string;
+}

package/dist/types/diff.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/fileUtils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Get file extension from filename or filepath
+ * @param filename - The filename or filepath
+ * @returns The file extension in lowercase, or null if no extension
+ */
+export declare function getFileExtension(filename: string): string | null;
+/**
+ * Get filename from filepath
+ * @param filepath - The filepath
+ * @returns The filename
+ */
+export declare function getFileName(filepath: string): string;

package/dist/utils/fileUtils.js

@@ -0,0 +1,21 @@
+/**
+ * Get file extension from filename or filepath
+ * @param filename - The filename or filepath
+ * @returns The file extension in lowercase, or null if no extension
+ */
+export function getFileExtension(filename) {
+    if (!filename)
+        return null;
+    const extension = filename.split('.').pop()?.toLowerCase();
+    return extension || null;
+}
+/**
+ * Get filename from filepath
+ * @param filepath - The filepath
+ * @returns The filename
+ */
+export function getFileName(filepath) {
+    if (!filepath)
+        return '';
+    return filepath.split('/').pop() || '';
+}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "difit",
+  "version": "0.0.1",
+  "description": "A lightweight command-line tool that spins up a local web server to display Git commit difit in a GitHub-like Files changed view",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "bin": {
+    "difit": "./dist/cli/index.js"
+  },
+  "main": "./dist/cli/index.js",
+  "homepage": "https://github.com/yoshiko-pg/difit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yoshiko-pg/difit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yoshiko-pg/difit/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:cli": "tsc --project tsconfig.cli.json",
+    "start": "node dist/cli/index.js",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepare": "lefthook install",
+    "prepublishOnly": "pnpm run build && pnpm run build:cli"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "express": "^4.18.2",
+    "open": "^10.0.3",
+    "prism-react-renderer": "^2.4.1",
+    "prismjs": "^1.30.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "shiki": "^0.14.7",
+    "simple-git": "^3.20.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.10.5",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "lefthook": "^1.5.5",
+    "postcss": "^8.5.6",
+    "prettier": "^3.1.1",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "git",
+    "diff",
+    "cli",
+    "review",
+    "github",
+    "code-review",
+    "tailwind",
+    "react",
+    "diff-viewer"
+  ],
+  "author": "yoshiko-pg",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
+}