diffstalker 0.2.2 → 0.2.4

package/dist/state/FocusRing.js

@@ -0,0 +1,40 @@
+/**
+ * Generic ring/cycle data structure for focus zone navigation.
+ * Tab cycles forward, Shift-Tab cycles backward, wrapping at boundaries.
+ */
+export class FocusRing {
+    items;
+    index;
+    constructor(items, initialIndex = 0) {
+        this.items = items;
+        this.index = Math.min(initialIndex, Math.max(0, items.length - 1));
+    }
+    current() {
+        return this.items[this.index];
+    }
+    next() {
+        this.index = (this.index + 1) % this.items.length;
+        return this.items[this.index];
+    }
+    prev() {
+        this.index = (this.index - 1 + this.items.length) % this.items.length;
+        return this.items[this.index];
+    }
+    setCurrent(item) {
+        const idx = this.items.indexOf(item);
+        if (idx === -1)
+            return false;
+        this.index = idx;
+        return true;
+    }
+    setItems(items, defaultItem) {
+        this.items = items;
+        if (defaultItem !== undefined) {
+            const idx = items.indexOf(defaultItem);
+            this.index = idx !== -1 ? idx : 0;
+        }
+        else {
+            this.index = Math.min(this.index, Math.max(0, items.length - 1));
+        }
+    }
+}

package/dist/state/UIState.js

@@ -1,5 +1,36 @@
 import { EventEmitter } from 'node:events';
+import { FocusRing } from './FocusRing.js';
+/** Map each focus zone to its derived currentPane value. */
+export const ZONE_TO_PANE = {
+    fileList: 'files',
+    diffView: 'diff',
+    commitMessage: 'commit',
+    commitAmend: 'commit',
+    historyList: 'history',
+    historyDiff: 'diff',
+    compareList: 'compare',
+    compareDiff: 'diff',
+    explorerTree: 'explorer',
+    explorerContent: 'diff',
+};
+/** Ordered list of focus zones per tab (Tab order). */
+export const TAB_ZONES = {
+    diff: ['fileList', 'diffView'],
+    commit: ['fileList', 'commitMessage', 'commitAmend'],
+    history: ['historyList', 'historyDiff'],
+    compare: ['compareList', 'compareDiff'],
+    explorer: ['explorerTree', 'explorerContent'],
+};
+/** Default focus zone when switching to each tab. */
+export const DEFAULT_TAB_ZONE = {
+    diff: 'fileList',
+    commit: 'commitMessage',
+    history: 'historyList',
+    compare: 'compareList',
+    explorer: 'explorerTree',
+};
 const DEFAULT_STATE = {
+    focusedZone: 'fileList',
     currentPane: 'files',
     bottomTab: 'diff',
     selectedIndex: 0,
@@ -21,8 +52,6 @@ const DEFAULT_STATE = {
     hideGitignored: true,
     flatViewMode: false,
     splitRatio: 0.4,
-    activeModal: null,
-    pendingDiscard: null,
     commitInputFocused: false,
 };
 /**
@@ -31,37 +60,54 @@ const DEFAULT_STATE = {
  */
 export class UIState extends EventEmitter {
     _state;
+    focusRing;
     constructor(initialState = {}) {
         super();
         this._state = { ...DEFAULT_STATE, ...initialState };
+        const tab = this._state.bottomTab;
+        const zones = TAB_ZONES[tab];
+        this.focusRing = new FocusRing(zones);
+        if (this._state.focusedZone) {
+            this.focusRing.setCurrent(this._state.focusedZone);
+        }
+        // Ensure currentPane is in sync
+        this._state.currentPane = ZONE_TO_PANE[this._state.focusedZone];
     }
     get state() {
         return this._state;
     }
     update(partial) {
         this._state = { ...this._state, ...partial };
+        // Derive currentPane from focusedZone
+        this._state.currentPane = ZONE_TO_PANE[this._state.focusedZone];
         this.emit('change', this._state);
     }
     // Navigation
     setPane(pane) {
-        if (this._state.currentPane !== pane) {
-            this.update({ currentPane: pane });
-            this.emit('pane-change', pane);
+        // Map pane to the first matching zone for the current tab
+        const zones = TAB_ZONES[this._state.bottomTab];
+        const zone = zones.find((z) => ZONE_TO_PANE[z] === pane);
+        if (zone) {
+            this.setFocusedZone(zone);
+        }
+    }
+    setFocusedZone(zone) {
+        if (this._state.focusedZone !== zone) {
+            this.focusRing.setCurrent(zone);
+            const oldPane = this._state.currentPane;
+            this.update({ focusedZone: zone });
+            if (this._state.currentPane !== oldPane) {
+                this.emit('pane-change', this._state.currentPane);
+            }
         }
     }
     setTab(tab) {
         if (this._state.bottomTab !== tab) {
-            // Map tab to appropriate pane
-            const paneMap = {
-                diff: 'files',
-                commit: 'commit',
-                history: 'history',
-                compare: 'compare',
-                explorer: 'explorer',
-            };
+            const defaultZone = DEFAULT_TAB_ZONE[tab];
+            this.focusRing.setItems(TAB_ZONES[tab], defaultZone);
             this.update({
                 bottomTab: tab,
-                currentPane: paneMap[tab],
+                focusedZone: defaultZone,
             });
             this.emit('tab-change', tab);
         }
@@ -155,51 +201,39 @@ export class UIState extends EventEmitter {
     setSplitRatio(ratio) {
         this.update({ splitRatio: Math.min(0.85, Math.max(0.15, ratio)) });
     }
-    // Modals
-    openModal(modal) {
-        this.update({ activeModal: modal });
-        this.emit('modal-change', modal);
-    }
-    closeModal() {
-        this.update({ activeModal: null });
-        this.emit('modal-change', null);
-    }
-    toggleModal(modal) {
-        if (this._state.activeModal === modal) {
-            this.closeModal();
-        }
-        else {
-            this.openModal(modal);
-        }
-    }
-    // Discard confirmation
-    setPendingDiscard(file) {
-        this.update({ pendingDiscard: file });
-    }
     // Commit input focus
     setCommitInputFocused(focused) {
         this.update({ commitInputFocused: focused });
     }
-    // Helper for toggling between panes
-    togglePane() {
-        const { bottomTab, currentPane } = this._state;
-        if (bottomTab === 'diff' || bottomTab === 'commit') {
-            this.setPane(currentPane === 'files' ? 'diff' : 'files');
-        }
-        else if (bottomTab === 'history') {
-            this.setPane(currentPane === 'history' ? 'diff' : 'history');
+    // Focus zone cycling
+    advanceFocus() {
+        const zone = this.focusRing.next();
+        const oldPane = this._state.currentPane;
+        this.update({ focusedZone: zone });
+        if (this._state.currentPane !== oldPane) {
+            this.emit('pane-change', this._state.currentPane);
         }
-        else if (bottomTab === 'compare') {
-            this.setPane(currentPane === 'compare' ? 'diff' : 'compare');
-        }
-        else if (bottomTab === 'explorer') {
-            this.setPane(currentPane === 'explorer' ? 'diff' : 'explorer');
+    }
+    retreatFocus() {
+        const zone = this.focusRing.prev();
+        const oldPane = this._state.currentPane;
+        this.update({ focusedZone: zone });
+        if (this._state.currentPane !== oldPane) {
+            this.emit('pane-change', this._state.currentPane);
         }
     }
+    /** Backward compat alias for advanceFocus(). */
+    togglePane() {
+        this.advanceFocus();
+    }
     // Reset repo-specific state when switching repositories
     resetForNewRepo() {
+        const defaultZone = DEFAULT_TAB_ZONE[this._state.bottomTab];
+        this.focusRing.setItems(TAB_ZONES[this._state.bottomTab], defaultZone);
         this._state = {
             ...this._state,
+            focusedZone: defaultZone,
+            currentPane: ZONE_TO_PANE[defaultZone],
             selectedIndex: 0,
             fileListScrollOffset: 0,
             diffScrollOffset: 0,

package/dist/types/remote.js

@@ -0,0 +1,5 @@
+/**
+ * Shared type for remote operation state (push/fetch/pull).
+ * Lives in types/ so both ui/ and core/ can import it.
+ */
+export {};

package/dist/ui/PaneRenderers.js

@@ -4,7 +4,7 @@ import { formatHistoryView } from './widgets/HistoryView.js';
 import { formatCompareListView } from './widgets/CompareListView.js';
 import { formatExplorerView } from './widgets/ExplorerView.js';
 import { formatDiff, formatCombinedDiff, formatHistoryDiff } from './widgets/DiffView.js';
-import { formatCommitPanel } from './widgets/CommitPanel.js';
+import { formatCommitPanel, getCommitPanelTotalRows } from './widgets/CommitPanel.js';
 import { formatExplorerContent } from './widgets/ExplorerContent.js';
 /**
  * Render the top pane content for the current tab.
@@ -31,10 +31,17 @@ export function renderTopPane(state, files, historyCommits, compareDiff, compare
 /**
  * Render the bottom pane content for the current tab.
  */
-export function renderBottomPane(state, diff, historyState, compareSelectionState, explorerSelectedFile, commitFlowState, stagedCount, currentTheme, width, bottomPaneHeight, selectedHunkIndex, isFileStaged, combinedFileDiffs) {
+export function renderBottomPane(state, diff, historyState, compareSelectionState, explorerSelectedFile, commitFlowState, stagedCount, currentTheme, width, bottomPaneHeight, selectedHunkIndex, isFileStaged, combinedFileDiffs, focusedZone) {
     if (state.bottomTab === 'commit') {
-        const content = formatCommitPanel(commitFlowState, stagedCount, width);
-        return { content, totalRows: 0, hunkCount: 0, hunkBoundaries: [] };
+        const panelOpts = {
+            state: commitFlowState,
+            stagedCount,
+            width,
+            focusedZone,
+        };
+        const totalRows = getCommitPanelTotalRows(panelOpts);
+        const content = formatCommitPanel(commitFlowState, stagedCount, width, state.diffScrollOffset, bottomPaneHeight, focusedZone);
+        return { content, totalRows, hunkCount: 0, hunkBoundaries: [] };
     }
     if (state.bottomTab === 'history') {
         const selectedCommit = historyState?.selectedCommit ?? null;

package/dist/ui/modals/BaseBranchPicker.js

@@ -49,14 +49,14 @@ export class BaseBranchPicker {
         this.render();
     }
     setupKeyHandlers() {
-        this.box.key(['escape', 'q'], () => {
-            this.close();
+        this.box.key(['escape'], () => {
+            this.destroy();
             this.onCancel();
         });
         this.box.key(['enter', 'space'], () => {
             const selected = this.branches[this.selectedIndex];
             if (selected) {
-                this.close();
+                this.destroy();
                 this.onSelect(selected);
             }
         });
@@ -98,12 +98,9 @@ export class BaseBranchPicker {
         this.box.setContent(lines.join('\n'));
         this.screen.render();
     }
-    close() {
+    destroy() {
         this.box.destroy();
     }
-    /**
-     * Focus the modal.
-     */
     focus() {
         this.box.focus();
     }

package/dist/ui/modals/CommitActionConfirm.js

@@ -0,0 +1,66 @@
+import blessed from 'neo-blessed';
+/**
+ * CommitActionConfirm modal for confirming cherry-pick or revert.
+ */
+export class CommitActionConfirm {
+    box;
+    screen;
+    onConfirm;
+    onCancel;
+    constructor(screen, verb, commit, onConfirm, onCancel) {
+        this.screen = screen;
+        this.onConfirm = onConfirm;
+        this.onCancel = onCancel;
+        const width = Math.min(60, screen.width - 6);
+        const height = 8;
+        this.box = blessed.box({
+            parent: screen,
+            top: 'center',
+            left: 'center',
+            width,
+            height,
+            border: {
+                type: 'line',
+            },
+            style: {
+                border: {
+                    fg: 'yellow',
+                },
+            },
+            tags: true,
+            keys: true,
+        });
+        this.setupKeyHandlers();
+        this.renderContent(verb, commit, width);
+    }
+    setupKeyHandlers() {
+        this.box.key(['y', 'Y'], () => {
+            this.destroy();
+            this.onConfirm();
+        });
+        this.box.key(['n', 'N', 'escape'], () => {
+            this.destroy();
+            this.onCancel();
+        });
+    }
+    renderContent(verb, commit, width) {
+        const lines = [];
+        const innerWidth = width - 6;
+        lines.push(`{bold}{yellow-fg}     ${verb} commit?{/yellow-fg}{/bold}`);
+        lines.push('');
+        const msg = commit.message.length > innerWidth
+            ? commit.message.slice(0, innerWidth - 3) + '\u2026'
+            : commit.message;
+        lines.push(`{yellow-fg}${commit.shortHash}{/yellow-fg} ${msg}`);
+        lines.push('');
+        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();
+    }
+    destroy() {
+        this.box.destroy();
+    }
+    focus() {
+        this.box.focus();
+    }
+}

package/dist/ui/modals/DiscardConfirm.js

@@ -40,11 +40,11 @@ export class DiscardConfirm {
     }
     setupKeyHandlers() {
         this.box.key(['y', 'Y'], () => {
-            this.close();
+            this.destroy();
             this.onConfirm();
         });
-        this.box.key(['n', 'N', 'escape', 'q'], () => {
-            this.close();
+        this.box.key(['n', 'N', 'escape'], () => {
+            this.destroy();
             this.onCancel();
         });
     }
@@ -65,12 +65,9 @@ export class DiscardConfirm {
         this.box.setContent(lines.join('\n'));
         this.screen.render();
     }
-    close() {
+    destroy() {
         this.box.destroy();
     }
-    /**
-     * Focus the modal.
-     */
     focus() {
         this.box.focus();
     }

package/dist/ui/modals/FileFinder.js

@@ -1,8 +1,9 @@
 import blessed from 'neo-blessed';
 import { Fzf } from 'fzf';
 const MAX_RESULTS = 15;
+const DEBOUNCE_MS = 15;
 /**
- * Highlight matched characters in a display path using fzf position data.
+ * Highlight matched characters in a display path.
  * The positions set refers to indices in the original full path,
  * so we need an offset when the display path is truncated.
  */
@@ -25,19 +26,20 @@ export class FileFinder {
     box;
     textbox;
     screen;
-    fzf;
     allPaths;
     results = [];
     selectedIndex = 0;
     query = '';
     onSelect;
     onCancel;
+    debounceTimer = null;
+    fzf;
     constructor(screen, allPaths, onSelect, onCancel) {
         this.screen = screen;
         this.allPaths = allPaths;
-        this.fzf = new Fzf(allPaths, { limit: MAX_RESULTS, forward: false });
         this.onSelect = onSelect;
         this.onCancel = onCancel;
+        this.fzf = new Fzf(allPaths, { limit: MAX_RESULTS, casing: 'smart-case' });
         // Create modal box
         const width = Math.min(80, screen.width - 10);
         const height = MAX_RESULTS + 6; // results + input + header + borders + padding
@@ -73,69 +75,74 @@ export class FileFinder {
         });
         // Setup key handlers
         this.setupKeyHandlers();
-        // Initial render with all files
+        // Initial render with first N files
         this.updateResults();
-        this.render();
+        this.renderContent();
     }
     setupKeyHandlers() {
         // Handle escape to cancel
         this.textbox.key(['escape'], () => {
-            this.close();
+            this.destroy();
             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.item);
+                this.destroy();
+                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.renderContent();
         });
         this.textbox.key(['C-k', 'up'], () => {
             this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-            this.render();
+            this.renderContent();
         });
         // Handle tab for next result
         this.textbox.key(['tab'], () => {
             this.selectedIndex = (this.selectedIndex + 1) % Math.max(1, this.results.length);
-            this.render();
+            this.renderContent();
         });
         // 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();
+            this.renderContent();
         });
-        // Update results on keypress
+        // Update results on keypress with debounce
         this.textbox.on('keypress', () => {
-            // Defer to next tick to get updated value
-            setImmediate(() => {
+            if (this.debounceTimer)
+                clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => {
                 const newQuery = this.textbox.getValue() || '';
                 if (newQuery !== this.query) {
                     this.query = newQuery;
                     this.selectedIndex = 0;
                     this.updateResults();
-                    this.render();
+                    this.renderContent();
                 }
-            });
+            }, DEBOUNCE_MS);
         });
     }
     updateResults() {
         if (!this.query) {
-            // fzf returns nothing for empty query, show first N files
             this.results = this.allPaths
                 .slice(0, MAX_RESULTS)
-                .map((item) => ({ item, positions: new Set(), start: 0, end: 0, score: 0 }));
+                .map((p) => ({ path: p, positions: new Set(), score: 0 }));
             return;
         }
-        this.results = this.fzf.find(this.query);
+        const entries = this.fzf.find(this.query);
+        this.results = entries.map((entry) => ({
+            path: entry.item,
+            score: entry.score,
+            positions: entry.positions,
+        }));
     }
-    render() {
+    renderContent() {
         const lines = [];
         const width = this.box.width - 4;
         // Header
@@ -151,7 +158,7 @@ export class FileFinder {
                 const result = this.results[i];
                 const isSelected = i === this.selectedIndex;
                 // Truncate path if needed
-                const fullPath = result.item;
+                const fullPath = result.path;
                 const maxLen = width - 4;
                 let displayPath = fullPath;
                 let offset = 0;
@@ -161,7 +168,7 @@ export class FileFinder {
                     // Account for the '…' prefix: display index 0 is '…', actual content starts at 1
                     offset = offset - 1;
                 }
-                // Highlight matched characters using fzf positions
+                // Highlight matched characters
                 const highlighted = highlightMatch(displayPath, result.positions, offset);
                 if (isSelected) {
                     lines.push(`{cyan-fg}{bold}> ${highlighted}{/bold}{/cyan-fg}`);
@@ -180,13 +187,12 @@ export class FileFinder {
         this.box.setContent(lines.join('\n'));
         this.screen.render();
     }
-    close() {
+    destroy() {
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
         this.textbox.destroy();
         this.box.destroy();
     }
-    /**
-     * Focus the modal input.
-     */
     focus() {
         this.textbox.focus();
     }

package/dist/ui/modals/HotkeysModal.js

@@ -4,7 +4,8 @@ const hotkeyGroups = [
         title: 'Navigation',
         entries: [
             { key: 'j/k', description: 'Move up/down' },
-            { key: 'Tab', description: 'Toggle pane focus' },
+            { key: 'Tab', description: 'Next focus zone' },
+            { key: 'Shift+Tab', description: 'Previous focus zone' },
         ],
     },
     {
@@ -21,7 +22,7 @@ const hotkeyGroups = [
         title: 'Actions',
         entries: [
             { key: 'c', description: 'Commit panel' },
-            { key: 'r', description: 'Refresh' },
+            { key: 'r', description: 'Repo picker' },
             { key: 'q', description: 'Quit' },
         ],
     },
@@ -63,6 +64,21 @@ const hotkeyGroups = [
             { key: 'g', description: 'Show changes only' },
         ],
     },
+    {
+        title: 'Commit Panel',
+        entries: [
+            { key: 'i/Enter', description: 'Edit message' },
+            { key: 'a', description: 'Toggle amend' },
+            { key: 'Ctrl+a', description: 'Toggle amend (typing)' },
+        ],
+    },
+    {
+        title: 'History',
+        entries: [
+            { key: 'p', description: 'Cherry-pick commit' },
+            { key: 'v', description: 'Revert commit' },
+        ],
+    },
     {
         title: 'Compare',
         entries: [
@@ -87,6 +103,7 @@ export class HotkeysModal {
     box;
     screen;
     onClose;
+    screenClickHandler = null;
     constructor(screen, onClose) {
         this.screen = screen;
         this.onClose = onClose;
@@ -135,15 +152,16 @@ export class HotkeysModal {
         }
     }
     setupKeyHandlers() {
-        this.box.key(['escape', 'enter', '?', 'q'], () => {
-            this.close();
+        this.box.key(['escape', 'enter'], () => {
+            this.destroy();
             this.onClose();
         });
-        // Close on click anywhere
-        this.box.on('click', () => {
-            this.close();
+        // Close on any mouse click (screen-level catches clicks outside the modal too)
+        this.screenClickHandler = () => {
+            this.destroy();
             this.onClose();
-        });
+        };
+        this.screen.on('click', this.screenClickHandler);
     }
     /**
      * Calculate the visible width of a string (excluding blessed tags).
@@ -191,7 +209,7 @@ export class HotkeysModal {
         }
         // Footer
         lines.push('');
-        lines.push('{gray-fg}Press Esc, Enter, or ? to close{/gray-fg}');
+        lines.push('{gray-fg}Press Esc, Enter, ?, or click to close{/gray-fg}');
         this.box.setContent(lines.join('\n'));
         this.screen.render();
     }
@@ -206,12 +224,13 @@ export class HotkeysModal {
         }
         return lines;
     }
-    close() {
+    destroy() {
+        if (this.screenClickHandler) {
+            this.screen.removeListener('click', this.screenClickHandler);
+            this.screenClickHandler = null;
+        }
         this.box.destroy();
     }
-    /**
-     * Focus the modal.
-     */
     focus() {
         this.box.focus();
     }

package/dist/ui/modals/Modal.js

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