diffstalker 0.1.7 → 0.2.1

package/dist/ui/modals/FileFinder.js

@@ -0,0 +1,232 @@
+import blessed from 'neo-blessed';
+const MAX_RESULTS = 15;
+/**
+ * Simple fuzzy match scoring.
+ * Returns -1 if no match, otherwise a score (higher is better).
+ */
+function fuzzyScore(query, target) {
+    const lowerQuery = query.toLowerCase();
+    const lowerTarget = target.toLowerCase();
+    // Must contain all query characters in order
+    let queryIndex = 0;
+    let score = 0;
+    let lastMatchIndex = -1;
+    for (let i = 0; i < lowerTarget.length && queryIndex < lowerQuery.length; i++) {
+        if (lowerTarget[i] === lowerQuery[queryIndex]) {
+            // Bonus for consecutive matches
+            if (lastMatchIndex === i - 1) {
+                score += 10;
+            }
+            // Bonus for matching at start of word
+            if (i === 0 || lowerTarget[i - 1] === '/' || lowerTarget[i - 1] === '.') {
+                score += 5;
+            }
+            score += 1;
+            lastMatchIndex = i;
+            queryIndex++;
+        }
+    }
+    // All query characters must match
+    if (queryIndex < lowerQuery.length) {
+        return -1;
+    }
+    // Bonus for shorter paths (more specific)
+    score += Math.max(0, 50 - target.length);
+    return score;
+}
+/**
+ * Highlight matched characters in path.
+ */
+function highlightMatch(query, path) {
+    if (!query)
+        return path;
+    const lowerQuery = query.toLowerCase();
+    const lowerPath = path.toLowerCase();
+    let result = '';
+    let queryIndex = 0;
+    for (let i = 0; i < path.length; i++) {
+        if (queryIndex < lowerQuery.length && lowerPath[i] === lowerQuery[queryIndex]) {
+            result += `{yellow-fg}${path[i]}{/yellow-fg}`;
+            queryIndex++;
+        }
+        else {
+            result += path[i];
+        }
+    }
+    return result;
+}
+/**
+ * FileFinder modal for fuzzy file search.
+ */
+export class FileFinder {
+    box;
+    textbox;
+    screen;
+    allPaths;
+    results = [];
+    selectedIndex = 0;
+    query = '';
+    onSelect;
+    onCancel;
+    constructor(screen, allPaths, onSelect, onCancel) {
+        this.screen = screen;
+        this.allPaths = allPaths;
+        this.onSelect = onSelect;
+        this.onCancel = onCancel;
+        // Create modal box
+        const width = Math.min(80, screen.width - 10);
+        const height = MAX_RESULTS + 6; // results + input + header + borders + padding
+        this.box = blessed.box({
+            parent: screen,
+            top: 'center',
+            left: 'center',
+            width,
+            height,
+            border: {
+                type: 'line',
+            },
+            style: {
+                border: {
+                    fg: 'cyan',
+                },
+            },
+            tags: true,
+            keys: false, // We'll handle keys ourselves
+        });
+        // Create text input
+        this.textbox = blessed.textarea({
+            parent: this.box,
+            top: 1,
+            left: 1,
+            width: width - 4,
+            height: 1,
+            inputOnFocus: true,
+            style: {
+                fg: 'white',
+                bg: 'default',
+            },
+        });
+        // Setup key handlers
+        this.setupKeyHandlers();
+        // Initial render with all files
+        this.updateResults();
+        this.render();
+    }
+    setupKeyHandlers() {
+        // Handle escape to cancel
+        this.textbox.key(['escape'], () => {
+            this.close();
+            this.onCancel();
+        });
+        // Handle enter to select
+        this.textbox.key(['enter'], () => {
+            if (this.results.length > 0) {
+                const selected = this.results[this.selectedIndex];
+                this.close();
+                this.onSelect(selected.path);
+            }
+        });
+        // Handle up/down for navigation (Ctrl+j/k since j/k are for typing)
+        this.textbox.key(['C-j', 'down'], () => {
+            this.selectedIndex = Math.min(this.results.length - 1, this.selectedIndex + 1);
+            this.render();
+        });
+        this.textbox.key(['C-k', 'up'], () => {
+            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+            this.render();
+        });
+        // Handle tab for next result
+        this.textbox.key(['tab'], () => {
+            this.selectedIndex = (this.selectedIndex + 1) % Math.max(1, this.results.length);
+            this.render();
+        });
+        // Handle shift-tab for previous result
+        this.textbox.key(['S-tab'], () => {
+            this.selectedIndex =
+                (this.selectedIndex - 1 + this.results.length) % Math.max(1, this.results.length);
+            this.render();
+        });
+        // Update results on keypress
+        this.textbox.on('keypress', () => {
+            // Defer to next tick to get updated value
+            setImmediate(() => {
+                const newQuery = this.textbox.getValue() || '';
+                if (newQuery !== this.query) {
+                    this.query = newQuery;
+                    this.selectedIndex = 0;
+                    this.updateResults();
+                    this.render();
+                }
+            });
+        });
+    }
+    updateResults() {
+        if (!this.query) {
+            // Show first N files when no query
+            this.results = this.allPaths.slice(0, MAX_RESULTS).map((path) => ({ path, score: 0 }));
+            return;
+        }
+        // Fuzzy match all paths
+        const scored = [];
+        for (const path of this.allPaths) {
+            const score = fuzzyScore(this.query, path);
+            if (score >= 0) {
+                scored.push({ path, score });
+            }
+        }
+        // Sort by score (descending)
+        scored.sort((a, b) => b.score - a.score);
+        // Take top results
+        this.results = scored.slice(0, MAX_RESULTS);
+    }
+    render() {
+        const lines = [];
+        const width = this.box.width - 4;
+        // Header
+        lines.push('{bold}{cyan-fg}Find File{/cyan-fg}{/bold}');
+        lines.push(''); // Space for input
+        lines.push('');
+        // Results
+        if (this.results.length === 0 && this.query) {
+            lines.push('{gray-fg}No matches{/gray-fg}');
+        }
+        else {
+            for (let i = 0; i < this.results.length; i++) {
+                const result = this.results[i];
+                const isSelected = i === this.selectedIndex;
+                // Truncate path if needed
+                let displayPath = result.path;
+                const maxLen = width - 4;
+                if (displayPath.length > maxLen) {
+                    displayPath = '…' + displayPath.slice(-(maxLen - 1));
+                }
+                // Highlight matched characters
+                const highlighted = highlightMatch(this.query, displayPath);
+                if (isSelected) {
+                    lines.push(`{cyan-fg}{bold}> ${highlighted}{/bold}{/cyan-fg}`);
+                }
+                else {
+                    lines.push(`  ${highlighted}`);
+                }
+            }
+        }
+        // Pad to fill space
+        while (lines.length < MAX_RESULTS + 3) {
+            lines.push('');
+        }
+        // Footer
+        lines.push('{gray-fg}Enter: select | Esc: cancel | Ctrl+j/k or ↑↓: navigate{/gray-fg}');
+        this.box.setContent(lines.join('\n'));
+        this.screen.render();
+    }
+    close() {
+        this.textbox.destroy();
+        this.box.destroy();
+    }
+    /**
+     * Focus the modal input.
+     */
+    focus() {
+        this.textbox.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();
+    }
+}

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}";
+}