diffstalker 0.1.6 → 0.2.0

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

package/dist/ui/modals/ThemePicker.js

@@ -0,0 +1,107 @@
+import blessed from 'neo-blessed';
+import { themes, themeOrder, getTheme } from '../../themes.js';
+/**
+ * ThemePicker modal for selecting diff themes.
+ */
+export class ThemePicker {
+    box;
+    screen;
+    selectedIndex;
+    currentTheme;
+    onSelect;
+    onCancel;
+    constructor(screen, currentTheme, onSelect, onCancel) {
+        this.screen = screen;
+        this.currentTheme = currentTheme;
+        this.onSelect = onSelect;
+        this.onCancel = onCancel;
+        // Find current theme index
+        this.selectedIndex = themeOrder.indexOf(currentTheme);
+        if (this.selectedIndex < 0)
+            this.selectedIndex = 0;
+        // Create modal box
+        const width = 50;
+        const height = themeOrder.length + 12; // themes + header + preview + 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,
+        });
+        // 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 = themeOrder[this.selectedIndex];
+            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(themeOrder.length - 1, this.selectedIndex + 1);
+            this.render();
+        });
+    }
+    render() {
+        const lines = [];
+        // Header
+        lines.push('{bold}{cyan-fg}       Select Theme{/cyan-fg}{/bold}');
+        lines.push('');
+        // Theme list
+        for (let i = 0; i < themeOrder.length; i++) {
+            const themeName = themeOrder[i];
+            const theme = themes[themeName];
+            const isSelected = i === this.selectedIndex;
+            const isCurrent = themeName === this.currentTheme;
+            let line = isSelected ? '{cyan-fg}{bold}> ' : '  ';
+            line += theme.displayName;
+            if (isSelected)
+                line += '{/bold}{/cyan-fg}';
+            if (isCurrent)
+                line += ' {gray-fg}(current){/gray-fg}';
+            lines.push(line);
+        }
+        // Preview section
+        lines.push('');
+        lines.push('{gray-fg}Preview:{/gray-fg}');
+        const previewTheme = getTheme(themeOrder[this.selectedIndex]);
+        // Simple preview - just show add/del colors
+        lines.push(`  {green-fg}+ added line{/green-fg}`);
+        lines.push(`  {red-fg}- deleted line{/red-fg}`);
+        // 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/widgets/CommitPanel.js

@@ -0,0 +1,58 @@
+/**
+ * Format the commit panel as blessed-compatible tagged string.
+ */
+export function formatCommitPanel(state, stagedCount, width) {
+    const lines = [];
+    // Title
+    let title = '{bold}Commit Message{/bold}';
+    if (state.amend) {
+        title += ' {yellow-fg}(amending){/yellow-fg}';
+    }
+    lines.push(title);
+    lines.push('');
+    // Message input area
+    const borderChar = state.inputFocused ? '\u2502' : '\u2502';
+    const borderColor = state.inputFocused ? 'cyan' : 'gray';
+    // Top border
+    const innerWidth = Math.max(20, width - 6);
+    lines.push(`{${borderColor}-fg}\u250c${'─'.repeat(innerWidth + 2)}\u2510{/${borderColor}-fg}`);
+    // Message content (or placeholder)
+    const displayMessage = state.message || (state.inputFocused ? '' : 'Press i or Enter to edit...');
+    const messageColor = state.message ? '' : '{gray-fg}';
+    const messageEnd = state.message ? '' : '{/gray-fg}';
+    // Truncate message if needed
+    const truncatedMessage = displayMessage.length > innerWidth
+        ? displayMessage.slice(0, innerWidth - 1) + '\u2026'
+        : displayMessage.padEnd(innerWidth);
+    lines.push(`{${borderColor}-fg}${borderChar}{/${borderColor}-fg} ${messageColor}${truncatedMessage}${messageEnd} {${borderColor}-fg}${borderChar}{/${borderColor}-fg}`);
+    // Bottom border
+    lines.push(`{${borderColor}-fg}\u2514${'─'.repeat(innerWidth + 2)}\u2518{/${borderColor}-fg}`);
+    lines.push('');
+    // Amend checkbox
+    const checkbox = state.amend ? '[x]' : '[ ]';
+    const checkboxColor = state.amend ? 'green' : 'gray';
+    lines.push(`{${checkboxColor}-fg}${checkbox}{/${checkboxColor}-fg} Amend {gray-fg}(a){/gray-fg}`);
+    // Error message
+    if (state.error) {
+        lines.push('');
+        lines.push(`{red-fg}${state.error}{/red-fg}`);
+    }
+    // Committing status
+    if (state.isCommitting) {
+        lines.push('');
+        lines.push('{yellow-fg}Committing...{/yellow-fg}');
+    }
+    lines.push('');
+    // Help text
+    const helpText = state.inputFocused
+        ? 'Enter: commit | Esc: unfocus'
+        : 'i/Enter: edit | Esc: cancel | a: toggle amend';
+    lines.push(`{gray-fg}Staged: ${stagedCount} file(s) | ${helpText}{/gray-fg}`);
+    return lines.join('\n');
+}
+/**
+ * Format inactive commit panel.
+ */
+export function formatCommitPanelInactive() {
+    return "{gray-fg}Press '2' or 'c' to open commit panel{/gray-fg}";
+}

package/dist/ui/widgets/CompareListView.js

@@ -0,0 +1,216 @@
+import { formatDate } from '../../utils/formatDate.js';
+import { formatCommitDisplay } from '../../utils/commitFormat.js';
+import { shortenPath } from '../../utils/formatPath.js';
+/**
+ * Build the list of row items for the compare list view.
+ */
+export function buildCompareListRows(commits, files, commitsExpanded = true, filesExpanded = true) {
+    const result = [];
+    // Commits section
+    if (commits.length > 0) {
+        result.push({ type: 'section-header', sectionType: 'commits' });
+        if (commitsExpanded) {
+            commits.forEach((commit, i) => {
+                result.push({ type: 'commit', commitIndex: i, commit });
+            });
+        }
+    }
+    // Files section
+    if (files.length > 0) {
+        if (commits.length > 0) {
+            result.push({ type: 'spacer' });
+        }
+        result.push({ type: 'section-header', sectionType: 'files' });
+        if (filesExpanded) {
+            files.forEach((file, i) => {
+                result.push({ type: 'file', fileIndex: i, file });
+            });
+        }
+    }
+    return result;
+}
+/**
+ * Escape blessed tags in content.
+ */
+function escapeContent(content) {
+    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
+}
+/**
+ * Format a commit row.
+ */
+function formatCommitRow(commit, isSelected, isFocused, width) {
+    const isHighlighted = isSelected && isFocused;
+    const dateStr = formatDate(commit.date);
+    // Fixed parts: indent(2) + hash(7) + spaces(4) + date + parens(2)
+    const baseWidth = 2 + 7 + 4 + dateStr.length + 2;
+    const remainingWidth = Math.max(10, width - baseWidth);
+    const { displayMessage, displayRefs } = formatCommitDisplay(commit.message, commit.refs, remainingWidth);
+    let line = ' ';
+    line += `{yellow-fg}${commit.shortHash}{/yellow-fg} `;
+    if (isHighlighted) {
+        line += `{cyan-fg}{inverse}${escapeContent(displayMessage)}{/inverse}{/cyan-fg}`;
+    }
+    else {
+        line += escapeContent(displayMessage);
+    }
+    line += ` {gray-fg}(${dateStr}){/gray-fg}`;
+    if (displayRefs) {
+        line += ` {green-fg}${escapeContent(displayRefs)}{/green-fg}`;
+    }
+    return line;
+}
+/**
+ * Format a file row.
+ */
+function formatFileRow(file, isSelected, isFocused, maxPathLength) {
+    const isHighlighted = isSelected && isFocused;
+    const isUncommitted = file.isUncommitted ?? false;
+    const statusColors = {
+        added: 'green',
+        modified: 'yellow',
+        deleted: 'red',
+        renamed: 'blue',
+    };
+    const statusChars = {
+        added: 'A',
+        modified: 'M',
+        deleted: 'D',
+        renamed: 'R',
+    };
+    // Account for stats: " (+123 -456)" and possible "*" for uncommitted
+    const statsLength = 5 + String(file.additions).length + String(file.deletions).length;
+    const uncommittedLength = isUncommitted ? 14 : 0;
+    const availableForPath = Math.max(10, maxPathLength - statsLength - uncommittedLength);
+    let line = ' ';
+    if (isUncommitted) {
+        line += '{magenta-fg}{bold}*{/bold}{/magenta-fg}';
+    }
+    const statusColor = isUncommitted ? 'magenta' : statusColors[file.status];
+    line += `{${statusColor}-fg}{bold}${statusChars[file.status]}{/bold}{/${statusColor}-fg} `;
+    const displayPath = shortenPath(file.path, availableForPath);
+    if (isHighlighted) {
+        line += `{cyan-fg}{inverse}${escapeContent(displayPath)}{/inverse}{/cyan-fg}`;
+    }
+    else if (isUncommitted) {
+        line += `{magenta-fg}${escapeContent(displayPath)}{/magenta-fg}`;
+    }
+    else {
+        line += escapeContent(displayPath);
+    }
+    line += ` {gray-fg}({/gray-fg}{green-fg}+${file.additions}{/green-fg} {red-fg}-${file.deletions}{/red-fg}{gray-fg}){/gray-fg}`;
+    if (isUncommitted) {
+        line += ' {magenta-fg}[uncommitted]{/magenta-fg}';
+    }
+    return line;
+}
+/**
+ * Format the compare list view as blessed-compatible tagged string.
+ */
+export function formatCompareListView(commits, files, selectedItem, isFocused, width, scrollOffset = 0, maxHeight) {
+    if (commits.length === 0 && files.length === 0) {
+        return '{gray-fg}No changes compared to base branch{/gray-fg}';
+    }
+    const rows = buildCompareListRows(commits, files);
+    // Apply scroll offset and max height
+    const visibleRows = maxHeight
+        ? rows.slice(scrollOffset, scrollOffset + maxHeight)
+        : rows.slice(scrollOffset);
+    const lines = [];
+    for (const row of visibleRows) {
+        if (row.type === 'section-header') {
+            const isCommits = row.sectionType === 'commits';
+            const count = isCommits ? commits.length : files.length;
+            const label = isCommits ? 'Commits' : 'Files';
+            lines.push(`{cyan-fg}{bold}▼ ${label}{/bold}{/cyan-fg} {gray-fg}(${count}){/gray-fg}`);
+        }
+        else if (row.type === 'spacer') {
+            lines.push('');
+        }
+        else if (row.type === 'commit' && row.commit && row.commitIndex !== undefined) {
+            const isSelected = selectedItem?.type === 'commit' && selectedItem.index === row.commitIndex;
+            lines.push(formatCommitRow(row.commit, isSelected, isFocused, width));
+        }
+        else if (row.type === 'file' && row.file && row.fileIndex !== undefined) {
+            const isSelected = selectedItem?.type === 'file' && selectedItem.index === row.fileIndex;
+            lines.push(formatFileRow(row.file, isSelected, isFocused, width - 5));
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Get the total number of rows in the compare list view (for scroll calculation).
+ */
+export function getCompareListTotalRows(commits, files, commitsExpanded = true, filesExpanded = true) {
+    let count = 0;
+    if (commits.length > 0) {
+        count += 1; // header
+        if (commitsExpanded)
+            count += commits.length;
+    }
+    if (files.length > 0) {
+        if (commits.length > 0)
+            count += 1; // spacer
+        count += 1; // header
+        if (filesExpanded)
+            count += files.length;
+    }
+    return count;
+}
+/**
+ * Map a row index to a selection.
+ * Returns null if the row is a header or spacer.
+ */
+export function getCompareSelectionFromRow(rowIndex, commits, files, commitsExpanded = true, filesExpanded = true) {
+    const rows = buildCompareListRows(commits, files, commitsExpanded, filesExpanded);
+    const row = rows[rowIndex];
+    if (!row)
+        return null;
+    if (row.type === 'commit' && row.commitIndex !== undefined) {
+        return { type: 'commit', index: row.commitIndex };
+    }
+    if (row.type === 'file' && row.fileIndex !== undefined) {
+        return { type: 'file', index: row.fileIndex };
+    }
+    return null;
+}
+/**
+ * Find the row index for a given selection.
+ */
+export function getRowFromCompareSelection(selection, commits, files, commitsExpanded = true, filesExpanded = true) {
+    const rows = buildCompareListRows(commits, files, commitsExpanded, filesExpanded);
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        if (selection.type === 'commit' &&
+            row.type === 'commit' &&
+            row.commitIndex === selection.index) {
+            return i;
+        }
+        if (selection.type === 'file' && row.type === 'file' && row.fileIndex === selection.index) {
+            return i;
+        }
+    }
+    return 0;
+}
+/**
+ * Navigate to next selectable item.
+ */
+export function getNextCompareSelection(current, commits, files, direction) {
+    const rows = buildCompareListRows(commits, files);
+    // Find current row index
+    let currentRowIndex = 0;
+    if (current) {
+        currentRowIndex = getRowFromCompareSelection(current, commits, files);
+    }
+    // Find next selectable row
+    const delta = direction === 'down' ? 1 : -1;
+    let nextRowIndex = currentRowIndex + delta;
+    while (nextRowIndex >= 0 && nextRowIndex < rows.length) {
+        const selection = getCompareSelectionFromRow(nextRowIndex, commits, files);
+        if (selection) {
+            return selection;
+        }
+        nextRowIndex += delta;
+    }
+    // Stay at current if no valid next selection
+    return current;
+}