diffstalker 0.2.0 → 0.2.1

package/dist/App.js

@@ -1,24 +1,25 @@
 import blessed from 'neo-blessed';
-import { LayoutManager, SPLIT_RATIO_STEP } from './ui/Layout.js';
+import { LayoutManager } from './ui/Layout.js';
+import { setupKeyBindings } from './KeyBindings.js';
+import { renderTopPane, renderBottomPane } from './ui/PaneRenderers.js';
+import { setupMouseHandlers } from './MouseHandlers.js';
+import { FollowMode } from './FollowMode.js';
 import { formatHeader } from './ui/widgets/Header.js';
 import { formatFooter } from './ui/widgets/Footer.js';
-import { formatFileList, getFileAtIndex, getFileListTotalRows, getFileIndexFromRow, getRowFromFileIndex, } from './ui/widgets/FileList.js';
-import { formatDiff, formatHistoryDiff } from './ui/widgets/DiffView.js';
-import { formatCommitPanel } from './ui/widgets/CommitPanel.js';
-import { formatHistoryView, getCommitAtIndex, } from './ui/widgets/HistoryView.js';
-import { formatCompareListView, getCompareListTotalRows, getNextCompareSelection, getRowFromCompareSelection, getCompareSelectionFromRow, } from './ui/widgets/CompareListView.js';
-import { formatExplorerView, getExplorerTotalRows, } from './ui/widgets/ExplorerView.js';
-import { formatExplorerContent, getExplorerContentTotalRows, } from './ui/widgets/ExplorerContent.js';
+import { getFileAtIndex, getRowFromFileIndex } from './ui/widgets/FileList.js';
+import { getCommitAtIndex } from './ui/widgets/HistoryView.js';
+import { getNextCompareSelection, getRowFromCompareSelection, } from './ui/widgets/CompareListView.js';
 import { ExplorerStateManager, } from './core/ExplorerStateManager.js';
 import { ThemePicker } from './ui/modals/ThemePicker.js';
 import { HotkeysModal } from './ui/modals/HotkeysModal.js';
 import { BaseBranchPicker } from './ui/modals/BaseBranchPicker.js';
 import { DiscardConfirm } from './ui/modals/DiscardConfirm.js';
+import { FileFinder } from './ui/modals/FileFinder.js';
 import { CommitFlowState } from './state/CommitFlowState.js';
 import { UIState } from './state/UIState.js';
 import { getManagerForRepo, removeManagerForRepo, } from './core/GitStateManager.js';
-import { FilePathWatcher } from './core/FilePathWatcher.js';
 import { saveConfig } from './config.js';
+import { getCategoryForIndex, getIndexForCategoryPosition, } from './utils/fileCategories.js';
 /**
  * Main application controller.
  * Coordinates between GitStateManager, UIState, and blessed widgets.
@@ -28,13 +29,12 @@ export class App {
     layout;
     uiState;
     gitManager = null;
-    fileWatcher = null;
+    followMode = null;
     explorerManager = null;
     config;
     commandServer;
     // Current state
     repoPath;
-    watcherState = { enabled: false };
     currentTheme;
     // Commit flow state
     commitFlowState;
@@ -43,6 +43,8 @@ export class App {
     activeModal = null;
     // Cached total rows for scroll bounds (single source of truth from render)
     bottomPaneTotalRows = 0;
+    // Selection anchor: remembers category + position before stage/unstage
+    pendingSelectionAnchor = null;
     constructor(options) {
         this.config = options.config;
         this.commandServer = options.commandServer ?? null;
@@ -116,12 +118,16 @@ export class App {
         // Setup keyboard handlers
         this.setupKeyboardHandlers();
         // Setup mouse handlers
-        this.setupMouseHandlers();
+        this.setupMouseEventHandlers();
         // Setup state change listeners
         this.setupStateListeners();
-        // Setup file watcher if enabled
+        // Setup follow mode if enabled
         if (this.config.watcherEnabled) {
-            this.setupFileWatcher();
+            this.followMode = new FollowMode(this.config.targetFile, () => this.repoPath, {
+                onRepoChange: (newPath, state) => this.handleFollowRepoChange(newPath, state),
+                onFileNavigate: (rawContent) => this.handleFollowFileNavigate(rawContent),
+            });
+            this.followMode.start();
         }
         // Setup IPC command handler if command server provided
         if (this.commandServer) {
@@ -133,328 +139,72 @@ export class App {
         this.render();
     }
     setupKeyboardHandlers() {
-        // Quit
-        this.screen.key(['q', 'C-c'], () => {
-            this.exit();
-        });
-        // Navigation (skip if modal is open - modal handles its own keys)
-        this.screen.key(['j', 'down'], () => {
-            if (this.activeModal)
-                return;
-            this.navigateDown();
-        });
-        this.screen.key(['k', 'up'], () => {
-            if (this.activeModal)
-                return;
-            this.navigateUp();
-        });
-        // Tab switching (skip if modal is open)
-        this.screen.key(['1'], () => {
-            if (this.activeModal)
-                return;
-            this.uiState.setTab('diff');
-        });
-        this.screen.key(['2'], () => {
-            if (this.activeModal)
-                return;
-            this.uiState.setTab('commit');
-        });
-        this.screen.key(['3'], () => {
-            if (this.activeModal)
-                return;
-            this.uiState.setTab('history');
-        });
-        this.screen.key(['4'], () => {
-            if (this.activeModal)
-                return;
-            this.uiState.setTab('compare');
-        });
-        this.screen.key(['5'], () => {
-            if (this.activeModal)
-                return;
-            this.uiState.setTab('explorer');
-        });
-        // Pane toggle (skip if modal is open)
-        this.screen.key(['tab'], () => {
-            if (this.activeModal)
-                return;
-            this.uiState.togglePane();
-        });
-        // Staging operations (skip if modal is open)
-        this.screen.key(['s'], () => {
-            if (this.activeModal)
-                return;
-            this.stageSelected();
-        });
-        this.screen.key(['S-u'], () => {
-            if (this.activeModal)
-                return;
-            this.unstageSelected();
-        });
-        this.screen.key(['S-a'], () => {
-            if (this.activeModal)
-                return;
-            this.stageAll();
-        });
-        this.screen.key(['S-z'], () => {
-            if (this.activeModal)
-                return;
-            this.unstageAll();
-        });
-        // Select/toggle (skip if modal is open)
-        this.screen.key(['enter', 'space'], () => {
-            if (this.activeModal)
-                return;
-            const state = this.uiState.state;
-            if (state.bottomTab === 'explorer' && state.currentPane === 'explorer') {
-                this.enterExplorerDirectory();
+        setupKeyBindings(this.screen, {
+            exit: () => this.exit(),
+            navigateDown: () => this.navigateDown(),
+            navigateUp: () => this.navigateUp(),
+            stageSelected: () => this.stageSelected(),
+            unstageSelected: () => this.unstageSelected(),
+            stageAll: () => this.stageAll(),
+            unstageAll: () => this.unstageAll(),
+            toggleSelected: () => this.toggleSelected(),
+            enterExplorerDirectory: () => this.enterExplorerDirectory(),
+            goExplorerUp: () => this.goExplorerUp(),
+            openFileFinder: () => this.openFileFinder(),
+            focusCommitInput: () => this.focusCommitInput(),
+            unfocusCommitInput: () => this.unfocusCommitInput(),
+            refresh: () => this.refresh(),
+            toggleMouseMode: () => this.toggleMouseMode(),
+            toggleFollow: () => this.toggleFollow(),
+            showDiscardConfirm: (file) => this.showDiscardConfirm(file),
+            render: () => this.render(),
+        }, {
+            hasActiveModal: () => this.activeModal !== null,
+            getBottomTab: () => this.uiState.state.bottomTab,
+            getCurrentPane: () => this.uiState.state.currentPane,
+            isCommitInputFocused: () => this.commitFlowState.state.inputFocused,
+            getStatusFiles: () => this.gitManager?.state.status?.files ?? [],
+            getSelectedIndex: () => this.uiState.state.selectedIndex,
+            uiState: this.uiState,
+            explorerManager: this.explorerManager,
+            commitFlowState: this.commitFlowState,
+            gitManager: this.gitManager,
+            layout: this.layout,
+        });
+    }
+    setupMouseEventHandlers() {
+        setupMouseHandlers(this.layout, {
+            selectHistoryCommitByIndex: (index) => this.selectHistoryCommitByIndex(index),
+            selectCompareItem: (selection) => this.selectCompareItem(selection),
+            selectFileByIndex: (index) => this.selectFileByIndex(index),
+            toggleFileByIndex: (index) => this.toggleFileByIndex(index),
+            toggleMouseMode: () => this.toggleMouseMode(),
+            toggleFollow: () => this.toggleFollow(),
+            render: () => this.render(),
+        }, {
+            uiState: this.uiState,
+            explorerManager: this.explorerManager,
+            getStatusFiles: () => this.gitManager?.state.status?.files ?? [],
+            getHistoryCommitCount: () => this.gitManager?.historyState.commits.length ?? 0,
+            getCompareCommits: () => this.gitManager?.compareState?.compareDiff?.commits ?? [],
+            getCompareFiles: () => this.gitManager?.compareState?.compareDiff?.files ?? [],
+            getBottomPaneTotalRows: () => this.bottomPaneTotalRows,
+            getScreenWidth: () => this.screen.width || 80,
+        });
+    }
+    async toggleFileByIndex(index) {
+        const files = this.gitManager?.state.status?.files ?? [];
+        const file = getFileAtIndex(files, index);
+        if (file) {
+            this.pendingSelectionAnchor = getCategoryForIndex(files, this.uiState.state.selectedIndex);
+            if (file.staged) {
+                await this.gitManager?.unstage(file);
             }
             else {
-                this.toggleSelected();
-            }
-        });
-        // Explorer: go up directory (skip if modal is open)
-        this.screen.key(['backspace'], () => {
-            if (this.activeModal)
-                return;
-            const state = this.uiState.state;
-            if (state.bottomTab === 'explorer' && state.currentPane === 'explorer') {
-                this.goExplorerUp();
-            }
-        });
-        // Commit (skip if modal is open)
-        this.screen.key(['c'], () => {
-            if (this.activeModal)
-                return;
-            this.uiState.setTab('commit');
-        });
-        // Commit panel specific keys (only when on commit tab)
-        this.screen.key(['i'], () => {
-            if (this.uiState.state.bottomTab === 'commit' && !this.commitFlowState.state.inputFocused) {
-                this.focusCommitInput();
-            }
-        });
-        this.screen.key(['a'], () => {
-            if (this.uiState.state.bottomTab === 'commit' && !this.commitFlowState.state.inputFocused) {
-                this.commitFlowState.toggleAmend();
-                this.render();
-            }
-        });
-        this.screen.key(['escape'], () => {
-            if (this.uiState.state.bottomTab === 'commit') {
-                if (this.commitFlowState.state.inputFocused) {
-                    this.unfocusCommitInput();
-                }
-                else {
-                    this.uiState.setTab('diff');
-                }
-            }
-        });
-        // Refresh
-        this.screen.key(['r'], () => this.refresh());
-        // Display toggles
-        this.screen.key(['w'], () => this.uiState.toggleWrapMode());
-        this.screen.key(['m'], () => this.toggleMouseMode());
-        this.screen.key(['S-t'], () => this.uiState.toggleAutoTab());
-        // Split ratio adjustments
-        this.screen.key(['-', '_'], () => {
-            this.uiState.adjustSplitRatio(-SPLIT_RATIO_STEP);
-            this.layout.setSplitRatio(this.uiState.state.splitRatio);
-            this.render();
-        });
-        this.screen.key(['=', '+'], () => {
-            this.uiState.adjustSplitRatio(SPLIT_RATIO_STEP);
-            this.layout.setSplitRatio(this.uiState.state.splitRatio);
-            this.render();
-        });
-        // Theme picker
-        this.screen.key(['t'], () => this.uiState.openModal('theme'));
-        // Hotkeys modal
-        this.screen.key(['?'], () => this.uiState.toggleModal('hotkeys'));
-        // Follow toggle
-        this.screen.key(['f'], () => this.toggleFollow());
-        // Compare view: base branch picker
-        this.screen.key(['b'], () => {
-            if (this.uiState.state.bottomTab === 'compare') {
-                this.uiState.openModal('baseBranch');
-            }
-        });
-        // Compare view: toggle uncommitted
-        this.screen.key(['u'], () => {
-            if (this.uiState.state.bottomTab === 'compare') {
-                this.uiState.toggleIncludeUncommitted();
-                const includeUncommitted = this.uiState.state.includeUncommitted;
-                this.gitManager?.refreshCompareDiff(includeUncommitted);
-            }
-        });
-        // Discard changes (with confirmation)
-        this.screen.key(['d'], () => {
-            if (this.uiState.state.bottomTab === 'diff') {
-                const files = this.gitManager?.state.status?.files ?? [];
-                const selectedIndex = this.uiState.state.selectedIndex;
-                const selectedFile = files[selectedIndex];
-                // Only allow discard for unstaged modified files
-                if (selectedFile && !selectedFile.staged && selectedFile.status !== 'untracked') {
-                    this.showDiscardConfirm(selectedFile);
-                }
-            }
-        });
-    }
-    setupMouseHandlers() {
-        const SCROLL_AMOUNT = 3;
-        // Mouse wheel on top pane
-        this.layout.topPane.on('wheeldown', () => {
-            this.handleTopPaneScroll(SCROLL_AMOUNT);
-        });
-        this.layout.topPane.on('wheelup', () => {
-            this.handleTopPaneScroll(-SCROLL_AMOUNT);
-        });
-        // Mouse wheel on bottom pane
-        this.layout.bottomPane.on('wheeldown', () => {
-            this.handleBottomPaneScroll(SCROLL_AMOUNT);
-        });
-        this.layout.bottomPane.on('wheelup', () => {
-            this.handleBottomPaneScroll(-SCROLL_AMOUNT);
-        });
-        // Click on top pane to select item
-        this.layout.topPane.on('click', (mouse) => {
-            // Convert screen Y to pane-relative row (blessed click coords are screen-relative)
-            const clickedRow = this.layout.screenYToTopPaneRow(mouse.y);
-            if (clickedRow >= 0) {
-                this.handleTopPaneClick(clickedRow);
-            }
-        });
-        // Click on footer for tabs and toggles
-        this.layout.footerBox.on('click', (mouse) => {
-            this.handleFooterClick(mouse.x);
-        });
-    }
-    handleTopPaneClick(row) {
-        const state = this.uiState.state;
-        if (state.bottomTab === 'history') {
-            const index = state.historyScrollOffset + row;
-            this.uiState.setHistorySelectedIndex(index);
-            this.selectHistoryCommitByIndex(index);
-        }
-        else if (state.bottomTab === 'compare') {
-            // For compare view, need to map row to selection
-            const compareState = this.gitManager?.compareState;
-            const commits = compareState?.compareDiff?.commits ?? [];
-            const files = compareState?.compareDiff?.files ?? [];
-            const selection = getCompareSelectionFromRow(state.compareScrollOffset + row, commits, files);
-            if (selection) {
-                this.selectCompareItem(selection);
-            }
-        }
-        else if (state.bottomTab === 'explorer') {
-            const index = state.explorerScrollOffset + row;
-            this.explorerManager?.selectIndex(index);
-            this.uiState.setExplorerSelectedIndex(index);
-        }
-        else {
-            // Diff tab - select file
-            const files = this.gitManager?.state.status?.files ?? [];
-            // Account for section headers in file list
-            const fileIndex = getFileIndexFromRow(row + state.fileListScrollOffset, files);
-            if (fileIndex !== null && fileIndex >= 0) {
-                this.uiState.setSelectedIndex(fileIndex);
-                this.selectFileByIndex(fileIndex);
+                await this.gitManager?.stage(file);
             }
         }
     }
-    handleFooterClick(x) {
-        const width = this.screen.width || 80;
-        // Footer layout: left side has toggles, right side has tabs
-        // Tabs are right-aligned, so we calculate from the right
-        // Tab format: [1]Diff [2]Commit [3]History [4]Compare [5]Explorer
-        // Approximate positions from right edge
-        const tabPositions = [
-            { tab: 'explorer', label: '[5]Explorer', width: 11 },
-            { tab: 'compare', label: '[4]Compare', width: 10 },
-            { tab: 'history', label: '[3]History', width: 10 },
-            { tab: 'commit', label: '[2]Commit', width: 9 },
-            { tab: 'diff', label: '[1]Diff', width: 7 },
-        ];
-        let rightEdge = width;
-        for (const { tab, width: tabWidth } of tabPositions) {
-            const leftEdge = rightEdge - tabWidth - 1; // -1 for space
-            if (x >= leftEdge && x < rightEdge) {
-                this.uiState.setTab(tab);
-                return;
-            }
-            rightEdge = leftEdge;
-        }
-        // Left side toggles (approximate positions)
-        // Format: ? [scroll] [auto] [wrap] [dots]
-        if (x >= 2 && x <= 9) {
-            // [scroll] or m:[select]
-            this.toggleMouseMode();
-        }
-        else if (x >= 11 && x <= 16) {
-            // [auto]
-            this.uiState.toggleAutoTab();
-        }
-        else if (x >= 18 && x <= 23) {
-            // [wrap]
-            this.uiState.toggleWrapMode();
-        }
-        else if (x >= 25 && x <= 30 && this.uiState.state.bottomTab === 'explorer') {
-            // [dots] - only visible in explorer
-            this.uiState.toggleMiddleDots();
-        }
-        else if (x === 0) {
-            // ? - open hotkeys
-            this.uiState.openModal('hotkeys');
-        }
-    }
-    handleTopPaneScroll(delta) {
-        const state = this.uiState.state;
-        const visibleHeight = this.layout.dimensions.topPaneHeight;
-        if (state.bottomTab === 'history') {
-            const totalRows = this.gitManager?.historyState.commits.length ?? 0;
-            const maxOffset = Math.max(0, totalRows - visibleHeight);
-            const newOffset = Math.min(maxOffset, Math.max(0, state.historyScrollOffset + delta));
-            this.uiState.setHistoryScrollOffset(newOffset);
-        }
-        else if (state.bottomTab === 'compare') {
-            const compareState = this.gitManager?.compareState;
-            const totalRows = getCompareListTotalRows(compareState?.compareDiff?.commits ?? [], compareState?.compareDiff?.files ?? []);
-            const maxOffset = Math.max(0, totalRows - visibleHeight);
-            const newOffset = Math.min(maxOffset, Math.max(0, state.compareScrollOffset + delta));
-            this.uiState.setCompareScrollOffset(newOffset);
-        }
-        else if (state.bottomTab === 'explorer') {
-            const totalRows = getExplorerTotalRows(this.explorerManager?.state.items ?? []);
-            const maxOffset = Math.max(0, totalRows - visibleHeight);
-            const newOffset = Math.min(maxOffset, Math.max(0, state.explorerScrollOffset + delta));
-            this.uiState.setExplorerScrollOffset(newOffset);
-        }
-        else {
-            const files = this.gitManager?.state.status?.files ?? [];
-            const totalRows = getFileListTotalRows(files);
-            const maxOffset = Math.max(0, totalRows - visibleHeight);
-            const newOffset = Math.min(maxOffset, Math.max(0, state.fileListScrollOffset + delta));
-            this.uiState.setFileListScrollOffset(newOffset);
-        }
-    }
-    handleBottomPaneScroll(delta) {
-        const state = this.uiState.state;
-        const visibleHeight = this.layout.dimensions.bottomPaneHeight;
-        const width = this.screen.width || 80;
-        if (state.bottomTab === 'explorer') {
-            const selectedFile = this.explorerManager?.state.selectedFile;
-            const totalRows = getExplorerContentTotalRows(selectedFile?.content ?? null, selectedFile?.path ?? null, selectedFile?.truncated ?? false, width, state.wrapMode);
-            const maxOffset = Math.max(0, totalRows - visibleHeight);
-            const newOffset = Math.min(maxOffset, Math.max(0, state.explorerFileScrollOffset + delta));
-            this.uiState.setExplorerFileScrollOffset(newOffset);
-        }
-        else {
-            // Use cached totalRows from last render (single source of truth)
-            const maxOffset = Math.max(0, this.bottomPaneTotalRows - visibleHeight);
-            const newOffset = Math.min(maxOffset, Math.max(0, state.diffScrollOffset + delta));
-            this.uiState.setDiffScrollOffset(newOffset);
-        }
-    }
     setupStateListeners() {
         // Update footer when UI state changes
         this.uiState.on('change', () => {
@@ -470,7 +220,7 @@ export class App {
             }
             else if (tab === 'explorer') {
                 // Explorer is already loaded on init, but refresh if needed
-                if (!this.explorerManager?.state.items.length) {
+                if (!this.explorerManager?.state.displayRows.length) {
                     this.explorerManager?.loadDirectory('');
                 }
             }
@@ -532,48 +282,47 @@ export class App {
             }, 500);
         });
     }
-    setupFileWatcher() {
-        this.fileWatcher = new FilePathWatcher(this.config.targetFile);
-        this.fileWatcher.on('path-change', (state) => {
-            if (state.path && state.path !== this.repoPath) {
-                this.repoPath = state.path;
-                this.watcherState = {
-                    enabled: true,
-                    sourceFile: state.sourceFile ?? this.config.targetFile,
-                    rawContent: state.rawContent ?? undefined,
-                    lastUpdate: state.lastUpdate ?? undefined,
-                };
-                this.initGitManager();
-                this.render();
-            }
-            // Navigate to the followed file if it's within the repo
-            if (state.rawContent) {
-                this.navigateToFile(state.rawContent);
-                this.render();
-            }
-        });
-        this.watcherState = {
-            enabled: true,
-            sourceFile: this.config.targetFile,
-        };
-        this.fileWatcher.start();
-        // Navigate to the initially followed file
-        const initialState = this.fileWatcher.state;
-        if (initialState.rawContent) {
-            this.watcherState.rawContent = initialState.rawContent;
-            this.navigateToFile(initialState.rawContent);
-        }
+    handleFollowRepoChange(newPath, _state) {
+        const oldRepoPath = this.repoPath;
+        this.repoPath = newPath;
+        this.initGitManager(oldRepoPath);
+        this.resetRepoSpecificState();
+        this.loadCurrentTabData();
+        this.render();
+    }
+    handleFollowFileNavigate(rawContent) {
+        this.navigateToFile(rawContent);
+        this.render();
     }
-    initGitManager() {
+    initGitManager(oldRepoPath) {
         // Clean up existing manager
         if (this.gitManager) {
             this.gitManager.removeAllListeners();
-            removeManagerForRepo(this.repoPath);
+            // Use oldRepoPath if provided (when switching repos), otherwise use current path
+            removeManagerForRepo(oldRepoPath ?? this.repoPath);
         }
         // Get or create manager for this repo
         this.gitManager = getManagerForRepo(this.repoPath);
         // Listen to state changes
         this.gitManager.on('state-change', () => {
+            const files = this.gitManager?.state.status?.files ?? [];
+            if (this.pendingSelectionAnchor) {
+                // Restore selection to same category + position after stage/unstage
+                const anchor = this.pendingSelectionAnchor;
+                this.pendingSelectionAnchor = null;
+                const newIndex = getIndexForCategoryPosition(files, anchor.category, anchor.categoryIndex);
+                this.uiState.setSelectedIndex(newIndex);
+                this.selectFileByIndex(newIndex);
+            }
+            else if (files.length > 0) {
+                // Default: clamp selected index to valid range
+                const maxIndex = files.length - 1;
+                if (this.uiState.state.selectedIndex > maxIndex) {
+                    this.uiState.setSelectedIndex(maxIndex);
+                }
+            }
+            // Update explorer git status when git state changes
+            this.updateExplorerGitStatus();
             this.render();
         });
         this.gitManager.on('history-state-change', (historyState) => {
@@ -607,6 +356,7 @@ export class App {
         const options = {
             hideHidden: true,
             hideGitignored: true,
+            showOnlyChanges: false,
         };
         this.explorerManager = new ExplorerStateManager(this.repoPath, options);
         // Listen to state changes
@@ -615,6 +365,58 @@ export class App {
         });
         // Load root directory
         this.explorerManager.loadDirectory('');
+        // Update git status after tree is loaded
+        this.updateExplorerGitStatus();
+    }
+    /**
+     * Build git status map and update explorer.
+     */
+    updateExplorerGitStatus() {
+        if (!this.explorerManager || !this.gitManager)
+            return;
+        const files = this.gitManager.state.status?.files ?? [];
+        const statusMap = {
+            files: new Map(),
+            directories: new Set(),
+        };
+        for (const file of files) {
+            statusMap.files.set(file.path, { status: file.status, staged: file.staged });
+            // Mark all parent directories as having changed children
+            const parts = file.path.split('/');
+            let dirPath = '';
+            for (let i = 0; i < parts.length - 1; i++) {
+                dirPath = dirPath ? `${dirPath}/${parts[i]}` : parts[i];
+                statusMap.directories.add(dirPath);
+            }
+            // Also mark root as having changes
+            statusMap.directories.add('');
+        }
+        this.explorerManager.setGitStatus(statusMap);
+    }
+    /**
+     * Reset UI state that's specific to a repository.
+     * Called when switching to a new repo via file watcher.
+     */
+    resetRepoSpecificState() {
+        // Reset compare selection (App-level state)
+        this.compareSelection = null;
+        // Reset UI state scroll offsets and selections
+        this.uiState.resetForNewRepo();
+    }
+    /**
+     * Load data for the current tab.
+     * Called after switching repos to refresh tab-specific data.
+     */
+    loadCurrentTabData() {
+        const tab = this.uiState.state.bottomTab;
+        if (tab === 'history') {
+            this.gitManager?.loadHistory();
+        }
+        else if (tab === 'compare') {
+            this.gitManager?.refreshCompareDiff(this.uiState.state.includeUncommitted);
+        }
+        // Diff tab data is loaded by gitManager.refresh() in initGitManager
+        // Explorer data is loaded by initExplorerManager()
     }
     setupCommandHandler() {
         if (!this.commandServer)
@@ -853,8 +655,8 @@ export class App {
     // Explorer navigation
     navigateExplorerUp() {
         const state = this.uiState.state;
-        const items = this.explorerManager?.state.items ?? [];
-        if (items.length === 0)
+        const rows = this.explorerManager?.state.displayRows ?? [];
+        if (rows.length === 0)
             return;
         const newScrollOffset = this.explorerManager?.navigateUp(state.explorerScrollOffset);
         if (newScrollOffset !== null && newScrollOffset !== undefined) {
@@ -864,8 +666,8 @@ export class App {
     }
     navigateExplorerDown() {
         const state = this.uiState.state;
-        const items = this.explorerManager?.state.items ?? [];
-        if (items.length === 0)
+        const rows = this.explorerManager?.state.displayRows ?? [];
+        if (rows.length === 0)
             return;
         const visibleHeight = this.layout.dimensions.topPaneHeight;
         const newScrollOffset = this.explorerManager?.navigateDown(state.explorerScrollOffset, visibleHeight);
@@ -876,15 +678,17 @@ export class App {
     }
     async enterExplorerDirectory() {
         await this.explorerManager?.enterDirectory();
-        this.uiState.setExplorerScrollOffset(0);
+        // Reset file content scroll when expanding/collapsing
         this.uiState.setExplorerFileScrollOffset(0);
-        this.uiState.setExplorerSelectedIndex(0);
+        // Sync selected index from explorer manager (it maintains selection by path)
+        this.uiState.setExplorerSelectedIndex(this.explorerManager?.state.selectedIndex ?? 0);
     }
     async goExplorerUp() {
         await this.explorerManager?.goUp();
-        this.uiState.setExplorerScrollOffset(0);
+        // Reset file content scroll when collapsing
         this.uiState.setExplorerFileScrollOffset(0);
-        this.uiState.setExplorerSelectedIndex(0);
+        // Sync selected index from explorer manager
+        this.uiState.setExplorerSelectedIndex(this.explorerManager?.state.selectedIndex ?? 0);
     }
     selectFileByIndex(index) {
         const files = this.gitManager?.state.status?.files ?? [];
@@ -921,22 +725,28 @@ export class App {
     // Git operations
     async stageSelected() {
         const files = this.gitManager?.state.status?.files ?? [];
-        const selectedFile = files[this.uiState.state.selectedIndex];
+        const index = this.uiState.state.selectedIndex;
+        const selectedFile = getFileAtIndex(files, index);
         if (selectedFile && !selectedFile.staged) {
+            this.pendingSelectionAnchor = getCategoryForIndex(files, index);
             await this.gitManager?.stage(selectedFile);
         }
     }
     async unstageSelected() {
         const files = this.gitManager?.state.status?.files ?? [];
-        const selectedFile = files[this.uiState.state.selectedIndex];
+        const index = this.uiState.state.selectedIndex;
+        const selectedFile = getFileAtIndex(files, index);
         if (selectedFile?.staged) {
+            this.pendingSelectionAnchor = getCategoryForIndex(files, index);
             await this.gitManager?.unstage(selectedFile);
         }
     }
     async toggleSelected() {
         const files = this.gitManager?.state.status?.files ?? [];
-        const selectedFile = files[this.uiState.state.selectedIndex];
+        const index = this.uiState.state.selectedIndex;
+        const selectedFile = getFileAtIndex(files, index);
         if (selectedFile) {
+            this.pendingSelectionAnchor = getCategoryForIndex(files, index);
             if (selectedFile.staged) {
                 await this.gitManager?.unstage(selectedFile);
             }
@@ -960,6 +770,26 @@ export class App {
         });
         this.activeModal.focus();
     }
+    async openFileFinder() {
+        const allPaths = (await this.explorerManager?.getAllFilePaths()) ?? [];
+        if (allPaths.length === 0)
+            return;
+        this.activeModal = new FileFinder(this.screen, allPaths, async (selectedPath) => {
+            this.activeModal = null;
+            // Navigate to the selected file in explorer
+            const success = await this.explorerManager?.navigateToPath(selectedPath);
+            if (success) {
+                // Reset scroll to show selected file
+                this.uiState.setExplorerScrollOffset(0);
+                this.uiState.setExplorerFileScrollOffset(0);
+            }
+            this.render();
+        }, () => {
+            this.activeModal = null;
+            this.render();
+        });
+        this.activeModal.focus();
+    }
     async commit(message) {
         await this.gitManager?.commit(message);
     }
@@ -979,14 +809,13 @@ export class App {
         }
     }
     toggleFollow() {
-        if (this.fileWatcher) {
-            this.fileWatcher.stop();
-            this.fileWatcher = null;
-            this.watcherState = { enabled: false };
-        }
-        else {
-            this.setupFileWatcher();
+        if (!this.followMode) {
+            this.followMode = new FollowMode(this.config.targetFile, () => this.repoPath, {
+                onRepoChange: (newPath, state) => this.handleFollowRepoChange(newPath, state),
+                onFileNavigate: (rawContent) => this.handleFollowFileNavigate(rawContent),
+            });
         }
+        this.followMode.toggle();
         this.render();
     }
     focusCommitInput() {
@@ -1019,114 +848,39 @@ export class App {
     updateHeader() {
         const gitState = this.gitManager?.state;
         const width = this.screen.width || 80;
-        const content = formatHeader(this.repoPath, gitState?.status?.branch ?? null, gitState?.isLoading ?? false, gitState?.error ?? null, this.watcherState, width);
+        const content = formatHeader(this.repoPath, gitState?.status?.branch ?? null, gitState?.isLoading ?? false, gitState?.error ?? null, width);
         this.layout.headerBox.setContent(content);
     }
     updateTopPane() {
-        const gitState = this.gitManager?.state;
-        const historyState = this.gitManager?.historyState;
-        const compareState = this.gitManager?.compareState;
-        const files = gitState?.status?.files ?? [];
         const state = this.uiState.state;
         const width = this.screen.width || 80;
-        let content;
-        if (state.bottomTab === 'history') {
-            const commits = historyState?.commits ?? [];
-            content = formatHistoryView(commits, state.historySelectedIndex, state.currentPane === 'history', width, state.historyScrollOffset, this.layout.dimensions.topPaneHeight);
-        }
-        else if (state.bottomTab === 'compare') {
-            const compareDiff = compareState?.compareDiff;
-            const commits = compareDiff?.commits ?? [];
-            const compareFiles = compareDiff?.files ?? [];
-            content = formatCompareListView(commits, compareFiles, this.compareSelection, state.currentPane === 'compare', width, state.compareScrollOffset, this.layout.dimensions.topPaneHeight);
-        }
-        else if (state.bottomTab === 'explorer') {
-            const explorerState = this.explorerManager?.state;
-            const items = explorerState?.items ?? [];
-            content = formatExplorerView(items, state.explorerSelectedIndex, state.currentPane === 'explorer', width, state.explorerScrollOffset, this.layout.dimensions.topPaneHeight, explorerState?.isLoading ?? false, explorerState?.error ?? null);
-        }
-        else {
-            content = formatFileList(files, state.selectedIndex, state.currentPane === 'files', width, state.fileListScrollOffset, this.layout.dimensions.topPaneHeight);
-        }
+        const content = renderTopPane(state, this.gitManager?.state.status?.files ?? [], this.gitManager?.historyState?.commits ?? [], this.gitManager?.compareState?.compareDiff ?? null, this.compareSelection, this.explorerManager?.state, width, this.layout.dimensions.topPaneHeight);
         this.layout.topPane.setContent(content);
     }
     updateBottomPane() {
-        const gitState = this.gitManager?.state;
-        const historyState = this.gitManager?.historyState;
-        const diff = gitState?.diff ?? null;
         const state = this.uiState.state;
         const width = this.screen.width || 80;
-        const files = gitState?.status?.files ?? [];
+        const files = this.gitManager?.state.status?.files ?? [];
         const stagedCount = files.filter((f) => f.staged).length;
         // Update staged count for commit validation
         this.commitFlowState.setStagedCount(stagedCount);
-        // Show appropriate content based on tab
-        if (state.bottomTab === 'commit') {
-            const commitContent = formatCommitPanel(this.commitFlowState.state, stagedCount, width);
-            this.layout.bottomPane.setContent(commitContent);
-            // Show/hide textarea based on focus
-            if (this.commitTextarea) {
-                if (this.commitFlowState.state.inputFocused) {
-                    this.commitTextarea.show();
-                }
-                else {
-                    this.commitTextarea.hide();
-                }
-            }
-        }
-        else if (state.bottomTab === 'history') {
-            // Hide commit textarea when not on commit tab
-            if (this.commitTextarea) {
-                this.commitTextarea.hide();
-            }
-            const selectedCommit = historyState?.selectedCommit ?? null;
-            const commitDiff = historyState?.commitDiff ?? null;
-            const { content, totalRows } = formatHistoryDiff(selectedCommit, commitDiff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
-            this.bottomPaneTotalRows = totalRows;
-            this.layout.bottomPane.setContent(content);
-        }
-        else if (state.bottomTab === 'compare') {
-            // Hide commit textarea when not on commit tab
-            if (this.commitTextarea) {
-                this.commitTextarea.hide();
-            }
-            const compareSelectionState = this.gitManager?.compareSelectionState;
-            const compareDiff = compareSelectionState?.diff ?? null;
-            if (compareDiff) {
-                const { content, totalRows } = formatDiff(compareDiff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
-                this.bottomPaneTotalRows = totalRows;
-                this.layout.bottomPane.setContent(content);
+        const { content, totalRows } = renderBottomPane(state, this.gitManager?.state.diff ?? null, this.gitManager?.historyState, this.gitManager?.compareSelectionState, this.explorerManager?.state?.selectedFile ?? null, this.commitFlowState.state, stagedCount, this.currentTheme, width, this.layout.dimensions.bottomPaneHeight);
+        this.bottomPaneTotalRows = totalRows;
+        this.layout.bottomPane.setContent(content);
+        // Manage commit textarea visibility
+        if (this.commitTextarea) {
+            if (state.bottomTab === 'commit' && this.commitFlowState.state.inputFocused) {
+                this.commitTextarea.show();
             }
             else {
-                this.bottomPaneTotalRows = 0;
-                this.layout.bottomPane.setContent('{gray-fg}Select a commit or file to view diff{/gray-fg}');
-            }
-        }
-        else if (state.bottomTab === 'explorer') {
-            // Hide commit textarea when not on commit tab
-            if (this.commitTextarea) {
-                this.commitTextarea.hide();
-            }
-            const explorerState = this.explorerManager?.state;
-            const selectedFile = explorerState?.selectedFile ?? null;
-            const content = formatExplorerContent(selectedFile?.path ?? null, selectedFile?.content ?? null, width, state.explorerFileScrollOffset, this.layout.dimensions.bottomPaneHeight, selectedFile?.truncated ?? false, state.wrapMode, state.showMiddleDots);
-            // TODO: formatExplorerContent should also return totalRows
-            this.layout.bottomPane.setContent(content);
-        }
-        else {
-            // Hide commit textarea when not on commit tab
-            if (this.commitTextarea) {
                 this.commitTextarea.hide();
             }
-            const { content, totalRows } = formatDiff(diff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
-            this.bottomPaneTotalRows = totalRows;
-            this.layout.bottomPane.setContent(content);
         }
     }
     updateFooter() {
         const state = this.uiState.state;
         const width = this.screen.width || 80;
-        const content = formatFooter(state.bottomTab, state.mouseEnabled, state.autoTabEnabled, state.wrapMode, state.showMiddleDots, width);
+        const content = formatFooter(state.bottomTab, state.mouseEnabled, state.autoTabEnabled, state.wrapMode, this.followMode?.isEnabled ?? false, this.explorerManager?.showOnlyChanges ?? false, width);
         this.layout.footerBox.setContent(content);
     }
     /**
@@ -1140,8 +894,8 @@ export class App {
         if (this.explorerManager) {
             this.explorerManager.dispose();
         }
-        if (this.fileWatcher) {
-            this.fileWatcher.stop();
+        if (this.followMode) {
+            this.followMode.stop();
         }
         if (this.commandServer) {
             this.commandServer.stop();