diffstalker 0.1.7 → 0.2.0

package/dist/ui/Layout.js

@@ -0,0 +1,252 @@
+import blessed from 'neo-blessed';
+/**
+ * Layout constants matching the React/Ink implementation.
+ */
+export const LAYOUT_OVERHEAD = 5; // Header (1-2) + 3 separators + footer (1)
+export const SPLIT_RATIO_STEP = 0.05;
+/**
+ * Calculate layout dimensions based on terminal size and split ratio.
+ */
+export function calculateLayout(terminalHeight, terminalWidth, splitRatio, headerHeight = 1) {
+    // Total overhead: header + 3 separators + footer
+    const overhead = headerHeight + 4; // 3 separators + 1 footer
+    const availableHeight = terminalHeight - overhead;
+    const topPaneHeight = Math.floor(availableHeight * splitRatio);
+    const bottomPaneHeight = availableHeight - topPaneHeight;
+    return {
+        width: terminalWidth,
+        height: terminalHeight,
+        headerHeight,
+        topPaneHeight,
+        bottomPaneHeight,
+        footerRow: terminalHeight - 1,
+    };
+}
+/**
+ * Calculate pane boundaries for mouse click detection.
+ */
+export function calculatePaneBoundaries(terminalHeight, headerHeight, topPaneHeight, bottomPaneHeight) {
+    const stagingPaneStart = headerHeight + 1; // After header + separator
+    const fileListEnd = stagingPaneStart + topPaneHeight;
+    const diffPaneStart = fileListEnd + 1; // After separator
+    const diffPaneEnd = diffPaneStart + bottomPaneHeight;
+    const footerRow = terminalHeight - 1;
+    return {
+        stagingPaneStart,
+        fileListEnd,
+        diffPaneStart,
+        diffPaneEnd,
+        footerRow,
+    };
+}
+/**
+ * LayoutManager creates and manages blessed boxes for the two-pane layout.
+ */
+export class LayoutManager {
+    screen;
+    headerBox;
+    topSeparator;
+    topPane;
+    middleSeparator;
+    bottomPane;
+    bottomSeparator;
+    footerBox;
+    _dimensions;
+    _splitRatio;
+    constructor(screen, splitRatio = 0.4) {
+        this.screen = screen;
+        this._splitRatio = splitRatio;
+        this._dimensions = this.calculateDimensions();
+        // Create all layout boxes
+        this.headerBox = this.createHeaderBox();
+        this.topSeparator = this.createSeparator(this._dimensions.headerHeight);
+        this.topPane = this.createTopPane();
+        this.middleSeparator = this.createSeparator(this._dimensions.headerHeight + 1 + this._dimensions.topPaneHeight);
+        this.bottomPane = this.createBottomPane();
+        this.bottomSeparator = this.createSeparator(this._dimensions.headerHeight +
+            2 +
+            this._dimensions.topPaneHeight +
+            this._dimensions.bottomPaneHeight);
+        this.footerBox = this.createFooterBox();
+        // Handle screen resize
+        screen.on('resize', () => this.onResize());
+    }
+    get dimensions() {
+        return this._dimensions;
+    }
+    get splitRatio() {
+        return this._splitRatio;
+    }
+    setSplitRatio(ratio) {
+        this._splitRatio = Math.min(0.85, Math.max(0.15, ratio));
+        this.updateLayout();
+    }
+    adjustSplitRatio(delta) {
+        this.setSplitRatio(this._splitRatio + delta);
+    }
+    calculateDimensions() {
+        const height = this.screen.height || 24;
+        const width = this.screen.width || 80;
+        return calculateLayout(height, width, this._splitRatio);
+    }
+    createHeaderBox() {
+        return blessed.box({
+            parent: this.screen,
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: this._dimensions.headerHeight,
+            tags: true,
+        });
+    }
+    createSeparator(top) {
+        const width = this.screen.width || 80;
+        return blessed.box({
+            parent: this.screen,
+            top,
+            left: 0,
+            width: '100%',
+            height: 1,
+            content: '\u2500'.repeat(width),
+            style: {
+                fg: 'gray',
+            },
+        });
+    }
+    createTopPane() {
+        return blessed.box({
+            parent: this.screen,
+            top: this._dimensions.headerHeight + 1,
+            left: 0,
+            width: '100%',
+            height: this._dimensions.topPaneHeight,
+            tags: true,
+            scrollable: true,
+            alwaysScroll: true,
+            wrap: false, // Disable blessed's built-in wrapping - we handle wrapping ourselves
+            scrollbar: {
+                ch: ' ',
+                track: {
+                    bg: 'gray',
+                },
+                style: {
+                    inverse: true,
+                },
+            },
+        });
+    }
+    createBottomPane() {
+        return blessed.box({
+            parent: this.screen,
+            top: this._dimensions.headerHeight + 2 + this._dimensions.topPaneHeight,
+            left: 0,
+            width: '100%',
+            height: this._dimensions.bottomPaneHeight,
+            tags: true,
+            scrollable: true,
+            alwaysScroll: true,
+            wrap: false, // Disable blessed's built-in wrapping - we handle wrapping ourselves
+            scrollbar: {
+                ch: ' ',
+                track: {
+                    bg: 'gray',
+                },
+                style: {
+                    inverse: true,
+                },
+            },
+        });
+    }
+    createFooterBox() {
+        return blessed.box({
+            parent: this.screen,
+            top: this._dimensions.footerRow,
+            left: 0,
+            width: '100%',
+            height: 1,
+            tags: true,
+        });
+    }
+    onResize() {
+        this._dimensions = this.calculateDimensions();
+        this.updateLayout();
+        // Don't call screen.render() here - App's resize handler will render
+        // with properly recalculated content
+    }
+    updateLayout() {
+        this._dimensions = this.calculateDimensions();
+        const width = this.screen.width || 80;
+        // Update header
+        this.headerBox.height = this._dimensions.headerHeight;
+        this.headerBox.width = width;
+        // Update top separator
+        this.topSeparator.top = this._dimensions.headerHeight;
+        this.topSeparator.width = width;
+        this.topSeparator.setContent('\u2500'.repeat(width));
+        // Update top pane
+        this.topPane.top = this._dimensions.headerHeight + 1;
+        this.topPane.height = this._dimensions.topPaneHeight;
+        this.topPane.width = width;
+        // Update middle separator
+        this.middleSeparator.top = this._dimensions.headerHeight + 1 + this._dimensions.topPaneHeight;
+        this.middleSeparator.width = width;
+        this.middleSeparator.setContent('\u2500'.repeat(width));
+        // Update bottom pane
+        this.bottomPane.top = this._dimensions.headerHeight + 2 + this._dimensions.topPaneHeight;
+        this.bottomPane.height = this._dimensions.bottomPaneHeight;
+        this.bottomPane.width = width;
+        // Update bottom separator
+        this.bottomSeparator.top =
+            this._dimensions.headerHeight +
+                2 +
+                this._dimensions.topPaneHeight +
+                this._dimensions.bottomPaneHeight;
+        this.bottomSeparator.width = width;
+        this.bottomSeparator.setContent('\u2500'.repeat(width));
+        // Update footer
+        this.footerBox.top = this._dimensions.footerRow;
+        this.footerBox.width = width;
+    }
+    /**
+     * Get pane boundaries for mouse click detection.
+     */
+    getPaneBoundaries() {
+        return calculatePaneBoundaries(this._dimensions.height, this._dimensions.headerHeight, this._dimensions.topPaneHeight, this._dimensions.bottomPaneHeight);
+    }
+    /**
+     * Convert screen Y coordinate to content row within the top pane.
+     * Returns the 0-based row index of the content, or -1 if outside the pane.
+     */
+    screenYToTopPaneRow(screenY) {
+        const paneTop = this._dimensions.headerHeight + 1; // header + separator
+        const paneBottom = paneTop + this._dimensions.topPaneHeight;
+        if (screenY < paneTop || screenY >= paneBottom) {
+            return -1;
+        }
+        return screenY - paneTop;
+    }
+    /**
+     * Convert screen Y coordinate to content row within the bottom pane.
+     * Returns the 0-based row index of the content, or -1 if outside the pane.
+     */
+    screenYToBottomPaneRow(screenY) {
+        const paneTop = this._dimensions.headerHeight + 2 + this._dimensions.topPaneHeight; // header + 2 separators + top pane
+        const paneBottom = paneTop + this._dimensions.bottomPaneHeight;
+        if (screenY < paneTop || screenY >= paneBottom) {
+            return -1;
+        }
+        return screenY - paneTop;
+    }
+    /**
+     * Get the top position of the top pane (for reference).
+     */
+    get topPaneTop() {
+        return this._dimensions.headerHeight + 1;
+    }
+    /**
+     * Get the top position of the bottom pane (for reference).
+     */
+    get bottomPaneTop() {
+        return this._dimensions.headerHeight + 2 + this._dimensions.topPaneHeight;
+    }
+}

package/dist/ui/modals/BaseBranchPicker.js

@@ -0,0 +1,110 @@
+import blessed from 'neo-blessed';
+/**
+ * BaseBranchPicker modal for selecting the base branch for PR comparison.
+ */
+export class BaseBranchPicker {
+    box;
+    screen;
+    branches;
+    selectedIndex;
+    currentBranch;
+    onSelect;
+    onCancel;
+    constructor(screen, branches, currentBranch, onSelect, onCancel) {
+        this.screen = screen;
+        this.branches = branches;
+        this.currentBranch = currentBranch;
+        this.onSelect = onSelect;
+        this.onCancel = onCancel;
+        // Find current branch index
+        this.selectedIndex = currentBranch ? branches.indexOf(currentBranch) : 0;
+        if (this.selectedIndex < 0)
+            this.selectedIndex = 0;
+        // Create modal box
+        const width = 50;
+        const maxVisibleBranches = Math.min(branches.length, 15);
+        const height = maxVisibleBranches + 6; // branches + header + footer + borders + padding
+        this.box = blessed.box({
+            parent: screen,
+            top: 'center',
+            left: 'center',
+            width,
+            height,
+            border: {
+                type: 'line',
+            },
+            style: {
+                border: {
+                    fg: 'cyan',
+                },
+            },
+            tags: true,
+            keys: true,
+            scrollable: true,
+            alwaysScroll: true,
+        });
+        // Setup key handlers
+        this.setupKeyHandlers();
+        // Initial render
+        this.render();
+    }
+    setupKeyHandlers() {
+        this.box.key(['escape', 'q'], () => {
+            this.close();
+            this.onCancel();
+        });
+        this.box.key(['enter', 'space'], () => {
+            const selected = this.branches[this.selectedIndex];
+            if (selected) {
+                this.close();
+                this.onSelect(selected);
+            }
+        });
+        this.box.key(['up', 'k'], () => {
+            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+            this.render();
+        });
+        this.box.key(['down', 'j'], () => {
+            this.selectedIndex = Math.min(this.branches.length - 1, this.selectedIndex + 1);
+            this.render();
+        });
+    }
+    render() {
+        const lines = [];
+        // Header
+        lines.push('{bold}{cyan-fg}     Select Base Branch{/cyan-fg}{/bold}');
+        lines.push('');
+        if (this.branches.length === 0) {
+            lines.push('{gray-fg}No branches found{/gray-fg}');
+        }
+        else {
+            // Branch list
+            for (let i = 0; i < this.branches.length; i++) {
+                const branch = this.branches[i];
+                const isSelected = i === this.selectedIndex;
+                const isCurrent = branch === this.currentBranch;
+                let line = isSelected ? '{cyan-fg}{bold}> ' : '  ';
+                line += branch;
+                if (isSelected)
+                    line += '{/bold}{/cyan-fg}';
+                if (isCurrent)
+                    line += ' {gray-fg}(current){/gray-fg}';
+                lines.push(line);
+            }
+        }
+        // Footer
+        lines.push('');
+        lines.push('{gray-fg}j/k: navigate | Enter: select | Esc: cancel{/gray-fg}');
+        this.box.setContent(lines.join('\n'));
+        this.screen.render();
+    }
+    close() {
+        this.box.destroy();
+    }
+    /**
+     * Focus the modal.
+     */
+    focus() {
+        this.box.focus();
+    }
+}

package/dist/ui/modals/DiscardConfirm.js

@@ -0,0 +1,77 @@
+import blessed from 'neo-blessed';
+/**
+ * DiscardConfirm modal for confirming discard of file changes.
+ */
+export class DiscardConfirm {
+    box;
+    screen;
+    filePath;
+    onConfirm;
+    onCancel;
+    constructor(screen, filePath, onConfirm, onCancel) {
+        this.screen = screen;
+        this.filePath = filePath;
+        this.onConfirm = onConfirm;
+        this.onCancel = onCancel;
+        // Create modal box - small confirmation dialog
+        const width = Math.min(60, Math.max(40, filePath.length + 20));
+        const height = 7;
+        this.box = blessed.box({
+            parent: screen,
+            top: 'center',
+            left: 'center',
+            width,
+            height,
+            border: {
+                type: 'line',
+            },
+            style: {
+                border: {
+                    fg: 'yellow',
+                },
+            },
+            tags: true,
+            keys: true,
+        });
+        // Setup key handlers
+        this.setupKeyHandlers();
+        // Render content
+        this.render();
+    }
+    setupKeyHandlers() {
+        this.box.key(['y', 'Y'], () => {
+            this.close();
+            this.onConfirm();
+        });
+        this.box.key(['n', 'N', 'escape', 'q'], () => {
+            this.close();
+            this.onCancel();
+        });
+    }
+    render() {
+        const lines = [];
+        // Header
+        lines.push('{bold}{yellow-fg}     Discard Changes?{/yellow-fg}{/bold}');
+        lines.push('');
+        // File path (truncate if needed)
+        const maxPathLen = this.box.width - 6;
+        const displayPath = this.filePath.length > maxPathLen
+            ? '...' + this.filePath.slice(-(maxPathLen - 3))
+            : this.filePath;
+        lines.push(`{white-fg}${displayPath}{/white-fg}`);
+        lines.push('');
+        // Prompt
+        lines.push('{gray-fg}Press {/gray-fg}{green-fg}y{/green-fg}{gray-fg} to confirm, {/gray-fg}{red-fg}n{/red-fg}{gray-fg} or Esc to cancel{/gray-fg}');
+        this.box.setContent(lines.join('\n'));
+        this.screen.render();
+    }
+    close() {
+        this.box.destroy();
+    }
+    /**
+     * Focus the modal.
+     */
+    focus() {
+        this.box.focus();
+    }
+}

package/dist/ui/modals/HotkeysModal.js

@@ -0,0 +1,209 @@
+import blessed from 'neo-blessed';
+const hotkeyGroups = [
+    {
+        title: 'Navigation',
+        entries: [
+            { key: 'j/k', description: 'Move up/down' },
+            { key: 'Tab', description: 'Toggle pane focus' },
+        ],
+    },
+    {
+        title: 'Staging',
+        entries: [
+            { key: 's', description: 'Stage file' },
+            { key: 'U', description: 'Unstage file' },
+            { key: 'A', description: 'Stage all' },
+            { key: 'Z', description: 'Unstage all' },
+            { key: 'Space', description: 'Toggle stage' },
+        ],
+    },
+    {
+        title: 'Actions',
+        entries: [
+            { key: 'c', description: 'Commit panel' },
+            { key: 'r', description: 'Refresh' },
+            { key: 'q', description: 'Quit' },
+        ],
+    },
+    {
+        title: 'Resize',
+        entries: [
+            { key: '-', description: 'Shrink top pane' },
+            { key: '+', description: 'Grow top pane' },
+        ],
+    },
+    {
+        title: 'Tabs',
+        entries: [
+            { key: '1', description: 'Diff view' },
+            { key: '2', description: 'Commit panel' },
+            { key: '3', description: 'History view' },
+            { key: '4', description: 'Compare view' },
+            { key: '5', description: 'Explorer view' },
+        ],
+    },
+    {
+        title: 'Toggles',
+        entries: [
+            { key: 'm', description: 'Mouse mode' },
+            { key: 'w', description: 'Wrap mode' },
+            { key: 'f', description: 'Follow mode' },
+            { key: 't', description: 'Theme picker' },
+            { key: '?', description: 'This help' },
+        ],
+    },
+    {
+        title: 'Explorer',
+        entries: [
+            { key: 'Enter', description: 'Enter directory' },
+            { key: 'Backspace', description: 'Go up' },
+        ],
+    },
+    {
+        title: 'Compare',
+        entries: [
+            { key: 'b', description: 'Base branch picker' },
+            { key: 'u', description: 'Toggle uncommitted' },
+        ],
+    },
+    {
+        title: 'Diff',
+        entries: [{ key: 'd', description: 'Discard changes' }],
+    },
+];
+/**
+ * HotkeysModal shows available keyboard shortcuts.
+ */
+export class HotkeysModal {
+    box;
+    screen;
+    onClose;
+    constructor(screen, onClose) {
+        this.screen = screen;
+        this.onClose = onClose;
+        // Calculate modal dimensions
+        const screenWidth = screen.width;
+        const screenHeight = screen.height;
+        // Determine layout based on screen width
+        const useTwoColumns = screenWidth >= 90;
+        const width = useTwoColumns ? Math.min(80, screenWidth - 4) : Math.min(42, screenWidth - 4);
+        const height = Math.min(this.calculateHeight(useTwoColumns), screenHeight - 4);
+        this.box = blessed.box({
+            parent: screen,
+            top: 'center',
+            left: 'center',
+            width,
+            height,
+            border: {
+                type: 'line',
+            },
+            style: {
+                border: {
+                    fg: 'cyan',
+                },
+            },
+            tags: true,
+            keys: true,
+            scrollable: true,
+            alwaysScroll: true,
+        });
+        // Setup key handlers
+        this.setupKeyHandlers();
+        // Render content
+        this.render(useTwoColumns, width);
+    }
+    calculateHeight(useTwoColumns) {
+        if (useTwoColumns) {
+            const midpoint = Math.ceil(hotkeyGroups.length / 2);
+            const leftGroups = hotkeyGroups.slice(0, midpoint);
+            const rightGroups = hotkeyGroups.slice(midpoint);
+            const leftLines = leftGroups.reduce((sum, g) => sum + g.entries.length + 2, 0);
+            const rightLines = rightGroups.reduce((sum, g) => sum + g.entries.length + 2, 0);
+            return Math.max(leftLines, rightLines) + 5;
+        }
+        else {
+            return hotkeyGroups.reduce((sum, g) => sum + g.entries.length + 2, 0) + 5;
+        }
+    }
+    setupKeyHandlers() {
+        this.box.key(['escape', 'enter', '?', 'q'], () => {
+            this.close();
+            this.onClose();
+        });
+        // Close on click anywhere
+        this.box.on('click', () => {
+            this.close();
+            this.onClose();
+        });
+    }
+    /**
+     * Calculate the visible width of a string (excluding blessed tags).
+     */
+    visibleWidth(str) {
+        return str.replace(/\{[^}]+\}/g, '').length;
+    }
+    /**
+     * Pad a string with blessed tags to a visible width.
+     */
+    padToVisible(str, targetWidth) {
+        const visible = this.visibleWidth(str);
+        const padding = Math.max(0, targetWidth - visible);
+        return str + ' '.repeat(padding);
+    }
+    render(useTwoColumns, width) {
+        const lines = [];
+        // Header
+        lines.push('{bold}{cyan-fg}     Keyboard Shortcuts{/cyan-fg}{/bold}');
+        lines.push('');
+        if (useTwoColumns) {
+            const midpoint = Math.ceil(hotkeyGroups.length / 2);
+            const leftGroups = hotkeyGroups.slice(0, midpoint);
+            const rightGroups = hotkeyGroups.slice(midpoint);
+            const colWidth = Math.floor((width - 6) / 2);
+            // Render side by side
+            const leftLines = this.renderGroups(leftGroups, colWidth);
+            const rightLines = this.renderGroups(rightGroups, colWidth);
+            const maxLines = Math.max(leftLines.length, rightLines.length);
+            for (let i = 0; i < maxLines; i++) {
+                const left = this.padToVisible(leftLines[i] || '', colWidth);
+                const right = rightLines[i] || '';
+                lines.push(left + '  ' + right);
+            }
+        }
+        else {
+            // Single column
+            for (const group of hotkeyGroups) {
+                lines.push(`{bold}{gray-fg}${group.title}{/gray-fg}{/bold}`);
+                for (const entry of group.entries) {
+                    lines.push(`  {cyan-fg}${entry.key.padEnd(10)}{/cyan-fg} ${entry.description}`);
+                }
+                lines.push('');
+            }
+        }
+        // Footer
+        lines.push('');
+        lines.push('{gray-fg}Press Esc, Enter, or ? to close{/gray-fg}');
+        this.box.setContent(lines.join('\n'));
+        this.screen.render();
+    }
+    renderGroups(groups, colWidth) {
+        const lines = [];
+        for (const group of groups) {
+            lines.push(`{bold}{gray-fg}${group.title}{/gray-fg}{/bold}`);
+            for (const entry of group.entries) {
+                lines.push(`  {cyan-fg}${entry.key.padEnd(10)}{/cyan-fg} ${entry.description}`);
+            }
+            lines.push('');
+        }
+        return lines;
+    }
+    close() {
+        this.box.destroy();
+    }
+    /**
+     * Focus the modal.
+     */
+    focus() {
+        this.box.focus();
+    }
+}