diffstalker 0.1.6 → 0.2.0

package/dist/themes.js

@@ -1 +1,127 @@
-const i={name:"dark",displayName:"Dark",colors:{addBg:"#022800",delBg:"#3D0100",addHighlight:"#044700",delHighlight:"#5C0200",text:"white",addLineNum:"#368F35",delLineNum:"#A14040",contextLineNum:"gray",addSymbol:"greenBright",delSymbol:"redBright"}},l={name:"light",displayName:"Light",colors:{addBg:"#69db7c",delBg:"#ffa8b4",addHighlight:"#2f9d44",delHighlight:"#d1454b",text:"black",addLineNum:"#2f9d44",delLineNum:"#d1454b",contextLineNum:"#6c757d",addSymbol:"green",delSymbol:"red"}},t={name:"dark-colorblind",displayName:"Dark (colorblind)",colors:{addBg:"#004466",delBg:"#660000",addHighlight:"#0077b3",delHighlight:"#b30000",text:"white",addLineNum:"#0077b3",delLineNum:"#b30000",contextLineNum:"gray",addSymbol:"cyanBright",delSymbol:"redBright"}},r={name:"light-colorblind",displayName:"Light (colorblind)",colors:{addBg:"#99ccff",delBg:"#ffcccc",addHighlight:"#3366cc",delHighlight:"#993333",text:"black",addLineNum:"#3366cc",delLineNum:"#993333",contextLineNum:"#6c757d",addSymbol:"blue",delSymbol:"red"}},n={name:"dark-ansi",displayName:"Dark (ANSI)",colors:{addBg:"green",delBg:"red",addHighlight:"greenBright",delHighlight:"redBright",text:"white",addLineNum:"greenBright",delLineNum:"redBright",contextLineNum:"gray",addSymbol:"greenBright",delSymbol:"redBright"}},g={name:"light-ansi",displayName:"Light (ANSI)",colors:{addBg:"green",delBg:"red",addHighlight:"greenBright",delHighlight:"redBright",text:"black",addLineNum:"green",delLineNum:"red",contextLineNum:"gray",addSymbol:"green",delSymbol:"red"}};export const themes={dark:i,light:l,"dark-colorblind":t,"light-colorblind":r,"dark-ansi":n,"light-ansi":g},themeOrder=["dark","light","dark-colorblind","light-colorblind","dark-ansi","light-ansi"];export function getTheme(e){return themes[e]??themes.dark}export function getNextTheme(e){const d=(themeOrder.indexOf(e)+1)%themeOrder.length;return themeOrder[d]}
+// Theme definitions for diffstalker
+// Dark theme - sampled from Claude Code's dark mode
+const darkTheme = {
+    name: 'dark',
+    displayName: 'Dark',
+    colors: {
+        addBg: '#022800', // sampled: rgb(2,40,0)
+        delBg: '#3D0100', // sampled: rgb(61,1,0)
+        addHighlight: '#044700', // sampled: rgb(4,71,0)
+        delHighlight: '#5C0200', // sampled: rgb(92,2,0)
+        text: 'white',
+        addLineNum: '#368F35', // sampled: rgb(54,143,53)
+        delLineNum: '#A14040', // sampled: rgb(161,64,64)
+        contextLineNum: 'gray',
+        addSymbol: 'greenBright',
+        delSymbol: 'redBright',
+    },
+};
+// Light theme - matches Claude Code's light mode colors
+const lightTheme = {
+    name: 'light',
+    displayName: 'Light',
+    colors: {
+        addBg: '#69db7c', // rgb(105,219,124)
+        delBg: '#ffa8b4', // rgb(255,168,180)
+        addHighlight: '#2f9d44', // rgb(47,157,68)
+        delHighlight: '#d1454b', // rgb(209,69,75)
+        text: 'black',
+        addLineNum: '#2f9d44',
+        delLineNum: '#d1454b',
+        contextLineNum: '#6c757d',
+        addSymbol: 'green',
+        delSymbol: 'red',
+    },
+};
+// Dark colorblind theme - matches Claude Code's dark-daltonized colors
+const darkColorblindTheme = {
+    name: 'dark-colorblind',
+    displayName: 'Dark (colorblind)',
+    colors: {
+        addBg: '#004466', // rgb(0,68,102)
+        delBg: '#660000', // rgb(102,0,0)
+        addHighlight: '#0077b3', // rgb(0,119,179)
+        delHighlight: '#b30000', // rgb(179,0,0)
+        text: 'white',
+        addLineNum: '#0077b3',
+        delLineNum: '#b30000',
+        contextLineNum: 'gray',
+        addSymbol: 'cyanBright',
+        delSymbol: 'redBright',
+    },
+};
+// Light colorblind theme - matches Claude Code's light-daltonized colors
+const lightColorblindTheme = {
+    name: 'light-colorblind',
+    displayName: 'Light (colorblind)',
+    colors: {
+        addBg: '#99ccff', // rgb(153,204,255)
+        delBg: '#ffcccc', // rgb(255,204,204)
+        addHighlight: '#3366cc', // rgb(51,102,204)
+        delHighlight: '#993333', // rgb(153,51,51)
+        text: 'black',
+        addLineNum: '#3366cc',
+        delLineNum: '#993333',
+        contextLineNum: '#6c757d',
+        addSymbol: 'blue',
+        delSymbol: 'red',
+    },
+};
+// Dark ANSI theme - uses terminal's native 16 ANSI colors
+const darkAnsiTheme = {
+    name: 'dark-ansi',
+    displayName: 'Dark (ANSI)',
+    colors: {
+        addBg: 'green',
+        delBg: 'red',
+        addHighlight: 'greenBright',
+        delHighlight: 'redBright',
+        text: 'white',
+        addLineNum: 'greenBright',
+        delLineNum: 'redBright',
+        contextLineNum: 'gray',
+        addSymbol: 'greenBright',
+        delSymbol: 'redBright',
+    },
+};
+// Light ANSI theme - uses terminal's native 16 ANSI colors
+const lightAnsiTheme = {
+    name: 'light-ansi',
+    displayName: 'Light (ANSI)',
+    colors: {
+        addBg: 'green',
+        delBg: 'red',
+        addHighlight: 'greenBright',
+        delHighlight: 'redBright',
+        text: 'black',
+        addLineNum: 'green',
+        delLineNum: 'red',
+        contextLineNum: 'gray',
+        addSymbol: 'green',
+        delSymbol: 'red',
+    },
+};
+export const themes = {
+    dark: darkTheme,
+    light: lightTheme,
+    'dark-colorblind': darkColorblindTheme,
+    'light-colorblind': lightColorblindTheme,
+    'dark-ansi': darkAnsiTheme,
+    'light-ansi': lightAnsiTheme,
+};
+export const themeOrder = [
+    'dark',
+    'light',
+    'dark-colorblind',
+    'light-colorblind',
+    'dark-ansi',
+    'light-ansi',
+];
+export function getTheme(name) {
+    return themes[name] ?? themes['dark'];
+}
+export function getNextTheme(current) {
+    const currentIndex = themeOrder.indexOf(current);
+    const nextIndex = (currentIndex + 1) % themeOrder.length;
+    return themeOrder[nextIndex];
+}

package/dist/types/tabs.js

@@ -0,0 +1,4 @@
+/**
+ * Shared type definitions for tabs and panes.
+ */
+export {};

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();
+    }
+}