diffstalker 0.2.0 → 0.2.2

package/dist/App.js

@@ -1,24 +1,27 @@
 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';
+import { buildFlatFileList, getFlatFileAtIndex, getFlatFileIndexByPath, } from './utils/flatFileList.js';
+import { extractHunkPatch } from './git/diff.js';
 /**
  * Main application controller.
  * Coordinates between GitStateManager, UIState, and blessed widgets.
@@ -28,21 +31,29 @@ 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;
     commitTextarea = null;
     // Active modals
     activeModal = null;
-    // Cached total rows for scroll bounds (single source of truth from render)
+    // Cached total rows and hunk info for scroll bounds (single source of truth from render)
     bottomPaneTotalRows = 0;
+    bottomPaneHunkCount = 0;
+    bottomPaneHunkBoundaries = [];
+    // Selection anchor: remembers category + position before stage/unstage
+    pendingSelectionAnchor = null;
+    // Flat view mode state
+    cachedFlatFiles = [];
+    pendingFlatSelectionPath = null;
+    pendingHunkIndex = null;
+    combinedHunkMapping = [];
     constructor(options) {
         this.config = options.config;
         this.commandServer = options.commandServer ?? null;
@@ -116,12 +127,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,326 +148,98 @@ 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();
-            }
-            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);
-                }
-            }
+        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(),
+            toggleCurrentHunk: () => this.toggleCurrentHunk(),
+            navigateNextHunk: () => this.navigateNextHunk(),
+            navigatePrevHunk: () => this.navigatePrevHunk(),
+        }, {
+            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,
+            getExplorerManager: () => this.explorerManager,
+            commitFlowState: this.commitFlowState,
+            getGitManager: () => this.gitManager,
+            layout: this.layout,
+            getCachedFlatFiles: () => this.cachedFlatFiles,
         });
     }
-    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);
+    setupMouseEventHandlers() {
+        setupMouseHandlers(this.layout, {
+            selectHistoryCommitByIndex: (index) => this.selectHistoryCommitByIndex(index),
+            selectCompareItem: (selection) => this.selectCompareItem(selection),
+            selectFileByIndex: (index) => this.selectFileByIndex(index),
+            toggleFileByIndex: (index) => this.toggleFileByIndex(index),
+            enterExplorerDirectory: () => this.enterExplorerDirectory(),
+            toggleMouseMode: () => this.toggleMouseMode(),
+            toggleFollow: () => this.toggleFollow(),
+            selectHunkAtRow: (row) => this.selectHunkAtRow(row),
+            render: () => this.render(),
+        }, {
+            uiState: this.uiState,
+            getExplorerManager: () => 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,
+            getCachedFlatFiles: () => this.cachedFlatFiles,
         });
     }
-    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);
+    /**
+     * Toggle staging for a flat file entry (stage if unstaged/partial, unstage if fully staged).
+     */
+    async toggleFlatEntry(entry) {
+        this.pendingFlatSelectionPath = entry.path;
+        if (entry.stagingState === 'staged') {
+            if (entry.stagedEntry)
+                await this.gitManager?.unstage(entry.stagedEntry);
         }
         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);
-            }
-        }
-    }
-    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');
+            if (entry.unstagedEntry)
+                await this.gitManager?.stage(entry.unstagedEntry);
         }
     }
-    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);
+    async toggleFileByIndex(index) {
+        if (this.uiState.state.flatViewMode) {
+            const flatEntry = getFlatFileAtIndex(this.cachedFlatFiles, index);
+            if (flatEntry)
+                await this.toggleFlatEntry(flatEntry);
         }
         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);
+            const file = getFileAtIndex(files, index);
+            if (file) {
+                this.pendingSelectionAnchor = getCategoryForIndex(files, this.uiState.state.selectedIndex);
+                if (file.staged) {
+                    await this.gitManager?.unstage(file);
+                }
+                else {
+                    await this.gitManager?.stage(file);
+                }
+            }
         }
     }
     setupStateListeners() {
@@ -462,6 +249,10 @@ export class App {
         });
         // Load data when switching tabs
         this.uiState.on('tab-change', (tab) => {
+            // Reset hunk selection when leaving diff tab
+            if (tab !== 'diff') {
+                this.uiState.setSelectedHunkIndex(0);
+            }
             if (tab === 'history') {
                 this.gitManager?.loadHistory();
             }
@@ -470,7 +261,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 +323,35 @@ 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', () => {
+            // Skip reconciliation while loading — the pending anchor must wait
+            // for the new status to arrive before being consumed
+            if (!this.gitManager?.state.isLoading) {
+                this.reconcileSelectionAfterStateChange();
+            }
+            this.updateExplorerGitStatus();
             this.render();
         });
         this.gitManager.on('history-state-change', (historyState) => {
@@ -598,6 +376,51 @@ export class App {
         // Initialize explorer manager
         this.initExplorerManager();
     }
+    /**
+     * After git state changes, reconcile the selected file index.
+     * Handles both flat mode (path-based anchoring) and categorized mode (category-based anchoring).
+     */
+    reconcileSelectionAfterStateChange() {
+        const files = this.gitManager?.state.status?.files ?? [];
+        if (this.uiState.state.flatViewMode && this.pendingFlatSelectionPath) {
+            const flatFiles = buildFlatFileList(files, this.gitManager?.state.hunkCounts ?? null);
+            const targetPath = this.pendingFlatSelectionPath;
+            this.pendingFlatSelectionPath = null;
+            const newIndex = getFlatFileIndexByPath(flatFiles, targetPath);
+            if (newIndex >= 0) {
+                this.uiState.setSelectedIndex(newIndex);
+                this.selectFileByIndex(newIndex);
+            }
+            else if (flatFiles.length > 0) {
+                const clamped = Math.min(this.uiState.state.selectedIndex, flatFiles.length - 1);
+                this.uiState.setSelectedIndex(clamped);
+                this.selectFileByIndex(clamped);
+            }
+            return;
+        }
+        if (this.pendingSelectionAnchor) {
+            const anchor = this.pendingSelectionAnchor;
+            this.pendingSelectionAnchor = null;
+            const newIndex = getIndexForCategoryPosition(files, anchor.category, anchor.categoryIndex);
+            this.uiState.setSelectedIndex(newIndex);
+            this.selectFileByIndex(newIndex);
+            return;
+        }
+        // No pending anchor — just clamp to valid range
+        if (this.uiState.state.flatViewMode) {
+            const flatFiles = buildFlatFileList(files, this.gitManager?.state.hunkCounts ?? null);
+            const maxIndex = flatFiles.length - 1;
+            if (maxIndex >= 0 && this.uiState.state.selectedIndex > maxIndex) {
+                this.uiState.setSelectedIndex(maxIndex);
+            }
+        }
+        else if (files.length > 0) {
+            const maxIndex = files.length - 1;
+            if (this.uiState.state.selectedIndex > maxIndex) {
+                this.uiState.setSelectedIndex(maxIndex);
+            }
+        }
+    }
     initExplorerManager() {
         // Clean up existing manager
         if (this.explorerManager) {
@@ -607,6 +430,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 +439,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)
@@ -667,93 +543,98 @@ export class App {
         };
     }
     // Navigation methods
-    navigateUp() {
+    /**
+     * Scroll the content pane (diff or explorer file content) by delta lines.
+     */
+    scrollActiveDiffPane(delta) {
         const state = this.uiState.state;
-        if (state.bottomTab === 'history') {
-            if (state.currentPane === 'history') {
-                this.navigateHistoryUp();
-            }
-            else if (state.currentPane === 'diff') {
-                this.uiState.setDiffScrollOffset(Math.max(0, state.diffScrollOffset - 3));
-            }
-            return;
+        if (state.bottomTab === 'explorer') {
+            const newOffset = Math.max(0, state.explorerFileScrollOffset + delta);
+            this.uiState.setExplorerFileScrollOffset(newOffset);
         }
-        if (state.bottomTab === 'compare') {
-            if (state.currentPane === 'compare') {
-                this.navigateCompareUp();
-            }
-            else if (state.currentPane === 'diff') {
-                this.uiState.setDiffScrollOffset(Math.max(0, state.diffScrollOffset - 3));
-            }
-            return;
+        else {
+            const newOffset = Math.max(0, state.diffScrollOffset + delta);
+            this.uiState.setDiffScrollOffset(newOffset);
         }
-        if (state.bottomTab === 'explorer') {
-            if (state.currentPane === 'explorer') {
-                this.navigateExplorerUp();
-            }
-            else if (state.currentPane === 'diff') {
-                this.uiState.setExplorerFileScrollOffset(Math.max(0, state.explorerFileScrollOffset - 3));
-            }
+    }
+    /**
+     * Navigate the file list by one item and keep selection visible.
+     */
+    navigateFileList(direction) {
+        const state = this.uiState.state;
+        const files = this.gitManager?.state.status?.files ?? [];
+        // Determine max index based on view mode
+        const maxIndex = state.flatViewMode ? this.cachedFlatFiles.length - 1 : files.length - 1;
+        if (maxIndex < 0)
             return;
+        const newIndex = direction === -1
+            ? Math.max(0, state.selectedIndex - 1)
+            : Math.min(maxIndex, state.selectedIndex + 1);
+        this.uiState.setSelectedIndex(newIndex);
+        this.selectFileByIndex(newIndex);
+        // In flat mode row === index + 1 (header row); in categorized mode account for headers/spacers
+        const row = state.flatViewMode ? newIndex + 1 : getRowFromFileIndex(newIndex, files);
+        this.scrollToKeepRowVisible(row, direction, state.fileListScrollOffset);
+    }
+    /**
+     * Scroll the file list to keep a given row visible.
+     */
+    scrollToKeepRowVisible(row, direction, currentOffset) {
+        if (direction === -1 && row < currentOffset) {
+            this.uiState.setFileListScrollOffset(row);
         }
-        if (state.currentPane === 'files') {
-            const files = this.gitManager?.state.status?.files ?? [];
-            const newIndex = Math.max(0, state.selectedIndex - 1);
-            this.uiState.setSelectedIndex(newIndex);
-            this.selectFileByIndex(newIndex);
-            // Keep selection visible - scroll up if needed
-            const row = getRowFromFileIndex(newIndex, files);
-            if (row < state.fileListScrollOffset) {
-                this.uiState.setFileListScrollOffset(row);
+        else if (direction === 1) {
+            const visibleEnd = currentOffset + this.layout.dimensions.topPaneHeight - 1;
+            if (row >= visibleEnd) {
+                this.uiState.setFileListScrollOffset(currentOffset + (row - visibleEnd + 1));
             }
         }
-        else if (state.currentPane === 'diff') {
-            this.uiState.setDiffScrollOffset(Math.max(0, state.diffScrollOffset - 3));
-        }
     }
-    navigateDown() {
-        const state = this.uiState.state;
-        const files = this.gitManager?.state.status?.files ?? [];
-        if (state.bottomTab === 'history') {
-            if (state.currentPane === 'history') {
+    /**
+     * Navigate the active list pane by one item in the given direction.
+     */
+    navigateActiveList(direction) {
+        const tab = this.uiState.state.bottomTab;
+        if (tab === 'history') {
+            if (direction === -1)
+                this.navigateHistoryUp();
+            else
                 this.navigateHistoryDown();
-            }
-            else if (state.currentPane === 'diff') {
-                this.uiState.setDiffScrollOffset(state.diffScrollOffset + 3);
-            }
-            return;
         }
-        if (state.bottomTab === 'compare') {
-            if (state.currentPane === 'compare') {
+        else if (tab === 'compare') {
+            if (direction === -1)
+                this.navigateCompareUp();
+            else
                 this.navigateCompareDown();
-            }
-            else if (state.currentPane === 'diff') {
-                this.uiState.setDiffScrollOffset(state.diffScrollOffset + 3);
-            }
-            return;
         }
-        if (state.bottomTab === 'explorer') {
-            if (state.currentPane === 'explorer') {
+        else if (tab === 'explorer') {
+            if (direction === -1)
+                this.navigateExplorerUp();
+            else
                 this.navigateExplorerDown();
-            }
-            else if (state.currentPane === 'diff') {
-                this.uiState.setExplorerFileScrollOffset(state.explorerFileScrollOffset + 3);
-            }
-            return;
         }
-        if (state.currentPane === 'files') {
-            const newIndex = Math.min(files.length - 1, state.selectedIndex + 1);
-            this.uiState.setSelectedIndex(newIndex);
-            this.selectFileByIndex(newIndex);
-            // Keep selection visible - scroll down if needed
-            const row = getRowFromFileIndex(newIndex, files);
-            const visibleEnd = state.fileListScrollOffset + this.layout.dimensions.topPaneHeight - 1;
-            if (row >= visibleEnd) {
-                this.uiState.setFileListScrollOffset(state.fileListScrollOffset + (row - visibleEnd + 1));
-            }
+        else {
+            this.navigateFileList(direction);
         }
-        else if (state.currentPane === 'diff') {
-            this.uiState.setDiffScrollOffset(state.diffScrollOffset + 3);
+    }
+    navigateUp() {
+        const state = this.uiState.state;
+        const isListPane = state.currentPane !== 'diff';
+        if (isListPane) {
+            this.navigateActiveList(-1);
+        }
+        else {
+            this.scrollActiveDiffPane(-3);
+        }
+    }
+    navigateDown() {
+        const state = this.uiState.state;
+        const isListPane = state.currentPane !== 'diff';
+        if (isListPane) {
+            this.navigateActiveList(1);
+        }
+        else {
+            this.scrollActiveDiffPane(3);
         }
     }
     navigateHistoryUp() {
@@ -853,8 +734,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 +745,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,23 +757,39 @@ 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 ?? [];
-        const file = getFileAtIndex(files, index);
-        if (file) {
-            // Reset diff scroll when changing files
-            this.uiState.setDiffScrollOffset(0);
-            this.gitManager?.selectFile(file);
+        if (this.uiState.state.flatViewMode) {
+            const flatEntry = getFlatFileAtIndex(this.cachedFlatFiles, index);
+            if (flatEntry) {
+                // Prefer unstaged entry (shows unstaged diff for partial files), fallback to staged
+                const file = flatEntry.unstagedEntry ?? flatEntry.stagedEntry;
+                if (file) {
+                    this.uiState.setDiffScrollOffset(0);
+                    this.uiState.setSelectedHunkIndex(0);
+                    this.gitManager?.selectFile(file);
+                }
+            }
+        }
+        else {
+            const files = this.gitManager?.state.status?.files ?? [];
+            const file = getFileAtIndex(files, index);
+            if (file) {
+                this.uiState.setDiffScrollOffset(0);
+                this.uiState.setSelectedHunkIndex(0);
+                this.gitManager?.selectFile(file);
+            }
         }
     }
     /**
@@ -921,27 +818,65 @@ export class App {
     // Git operations
     async stageSelected() {
         const files = this.gitManager?.state.status?.files ?? [];
-        const selectedFile = files[this.uiState.state.selectedIndex];
-        if (selectedFile && !selectedFile.staged) {
-            await this.gitManager?.stage(selectedFile);
+        const index = this.uiState.state.selectedIndex;
+        if (this.uiState.state.flatViewMode) {
+            const flatEntry = getFlatFileAtIndex(this.cachedFlatFiles, index);
+            if (!flatEntry)
+                return;
+            // Stage: operate on the unstaged entry if available
+            const file = flatEntry.unstagedEntry;
+            if (file) {
+                this.pendingFlatSelectionPath = flatEntry.path;
+                await this.gitManager?.stage(file);
+            }
+        }
+        else {
+            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];
-        if (selectedFile?.staged) {
-            await this.gitManager?.unstage(selectedFile);
+        const index = this.uiState.state.selectedIndex;
+        if (this.uiState.state.flatViewMode) {
+            const flatEntry = getFlatFileAtIndex(this.cachedFlatFiles, index);
+            if (!flatEntry)
+                return;
+            const file = flatEntry.stagedEntry;
+            if (file) {
+                this.pendingFlatSelectionPath = flatEntry.path;
+                await this.gitManager?.unstage(file);
+            }
         }
-    }
-    async toggleSelected() {
-        const files = this.gitManager?.state.status?.files ?? [];
-        const selectedFile = files[this.uiState.state.selectedIndex];
-        if (selectedFile) {
-            if (selectedFile.staged) {
+        else {
+            const selectedFile = getFileAtIndex(files, index);
+            if (selectedFile?.staged) {
+                this.pendingSelectionAnchor = getCategoryForIndex(files, index);
                 await this.gitManager?.unstage(selectedFile);
             }
-            else {
-                await this.gitManager?.stage(selectedFile);
+        }
+    }
+    async toggleSelected() {
+        const index = this.uiState.state.selectedIndex;
+        if (this.uiState.state.flatViewMode) {
+            const flatEntry = getFlatFileAtIndex(this.cachedFlatFiles, index);
+            if (flatEntry)
+                await this.toggleFlatEntry(flatEntry);
+        }
+        else {
+            const files = this.gitManager?.state.status?.files ?? [];
+            const selectedFile = getFileAtIndex(files, index);
+            if (selectedFile) {
+                this.pendingSelectionAnchor = getCategoryForIndex(files, index);
+                if (selectedFile.staged) {
+                    await this.gitManager?.unstage(selectedFile);
+                }
+                else {
+                    await this.gitManager?.stage(selectedFile);
+                }
             }
         }
     }
@@ -960,6 +895,128 @@ export class App {
         });
         this.activeModal.focus();
     }
+    // Hunk navigation and staging
+    navigateNextHunk() {
+        const current = this.uiState.state.selectedHunkIndex;
+        if (this.bottomPaneHunkCount > 0 && current < this.bottomPaneHunkCount - 1) {
+            this.uiState.setSelectedHunkIndex(current + 1);
+            this.scrollHunkIntoView(current + 1);
+        }
+    }
+    navigatePrevHunk() {
+        const current = this.uiState.state.selectedHunkIndex;
+        if (current > 0) {
+            this.uiState.setSelectedHunkIndex(current - 1);
+            this.scrollHunkIntoView(current - 1);
+        }
+    }
+    scrollHunkIntoView(hunkIndex) {
+        const boundary = this.bottomPaneHunkBoundaries[hunkIndex];
+        if (!boundary)
+            return;
+        const scrollOffset = this.uiState.state.diffScrollOffset;
+        const visibleHeight = this.layout.dimensions.bottomPaneHeight;
+        // If hunk header is outside the visible area, scroll so it's at top
+        if (boundary.startRow < scrollOffset || boundary.startRow >= scrollOffset + visibleHeight) {
+            this.uiState.setDiffScrollOffset(boundary.startRow);
+        }
+    }
+    selectHunkAtRow(visualRow) {
+        if (this.uiState.state.bottomTab !== 'diff')
+            return;
+        if (this.bottomPaneHunkBoundaries.length === 0)
+            return;
+        // Focus the diff pane so the hunk gutter appears
+        this.uiState.setPane('diff');
+        const absoluteRow = this.uiState.state.diffScrollOffset + visualRow;
+        for (let i = 0; i < this.bottomPaneHunkBoundaries.length; i++) {
+            const b = this.bottomPaneHunkBoundaries[i];
+            if (absoluteRow >= b.startRow && absoluteRow < b.endRow) {
+                this.uiState.setSelectedHunkIndex(i);
+                return;
+            }
+        }
+    }
+    async toggleCurrentHunk() {
+        const selectedFile = this.gitManager?.state.selectedFile;
+        if (!selectedFile || selectedFile.status === 'untracked')
+            return;
+        if (this.uiState.state.flatViewMode) {
+            await this.toggleCurrentHunkFlat();
+        }
+        else {
+            await this.toggleCurrentHunkCategorized(selectedFile);
+        }
+    }
+    async toggleCurrentHunkFlat() {
+        const mapping = this.combinedHunkMapping[this.uiState.state.selectedHunkIndex];
+        if (!mapping)
+            return;
+        const combined = this.gitManager?.state.combinedFileDiffs;
+        if (!combined)
+            return;
+        const rawDiff = mapping.source === 'unstaged' ? combined.unstaged.raw : combined.staged.raw;
+        const patch = extractHunkPatch(rawDiff, mapping.hunkIndex);
+        if (!patch)
+            return;
+        // Preserve hunk index across refresh — file stays selected via path-only fallback
+        this.pendingHunkIndex = this.uiState.state.selectedHunkIndex;
+        if (mapping.source === 'staged') {
+            await this.gitManager?.unstageHunk(patch);
+        }
+        else {
+            await this.gitManager?.stageHunk(patch);
+        }
+    }
+    async toggleCurrentHunkCategorized(selectedFile) {
+        const rawDiff = this.gitManager?.state.diff?.raw;
+        if (!rawDiff)
+            return;
+        const patch = extractHunkPatch(rawDiff, this.uiState.state.selectedHunkIndex);
+        if (!patch)
+            return;
+        const files = this.gitManager?.state.status?.files ?? [];
+        this.pendingSelectionAnchor = getCategoryForIndex(files, this.uiState.state.selectedIndex);
+        if (selectedFile.staged) {
+            await this.gitManager?.unstageHunk(patch);
+        }
+        else {
+            await this.gitManager?.stageHunk(patch);
+        }
+    }
+    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;
+            // Switch to explorer tab if not already there
+            if (this.uiState.state.bottomTab !== 'explorer') {
+                this.uiState.setTab('explorer');
+            }
+            // Navigate to the selected file in explorer
+            const success = await this.explorerManager?.navigateToPath(selectedPath);
+            if (success) {
+                // Sync selected index from explorer manager
+                const selectedIndex = this.explorerManager?.state.selectedIndex ?? 0;
+                this.uiState.setExplorerSelectedIndex(selectedIndex);
+                this.uiState.setExplorerFileScrollOffset(0);
+                // Scroll to make selected file visible
+                const visibleHeight = this.layout.dimensions.topPaneHeight;
+                if (selectedIndex >= visibleHeight) {
+                    this.uiState.setExplorerScrollOffset(selectedIndex - Math.floor(visibleHeight / 2));
+                }
+                else {
+                    this.uiState.setExplorerScrollOffset(0);
+                }
+            }
+            this.render();
+        }, () => {
+            this.activeModal = null;
+            this.render();
+        });
+        this.activeModal.focus();
+    }
     async commit(message) {
         await this.gitManager?.commit(message);
     }
@@ -970,6 +1027,7 @@ export class App {
         const willEnable = !this.uiState.state.mouseEnabled;
         this.uiState.toggleMouse();
         // Access program for terminal mouse control (not on screen's TS types)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const program = this.screen.program;
         if (willEnable) {
             program.enableMouse();
@@ -979,14 +1037,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() {
@@ -1013,120 +1070,66 @@ export class App {
         this.updateHeader();
         this.updateTopPane();
         this.updateBottomPane();
+        // Restore hunk index after diff refresh (e.g. after hunk toggle in flat mode)
+        if (this.pendingHunkIndex !== null && this.bottomPaneHunkCount > 0) {
+            const restored = Math.min(this.pendingHunkIndex, this.bottomPaneHunkCount - 1);
+            this.pendingHunkIndex = null;
+            this.uiState.setSelectedHunkIndex(restored);
+            this.updateBottomPane(); // Re-render with correct hunk selection
+        }
         this.updateFooter();
         this.screen.render();
     }
     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 files = this.gitManager?.state.status?.files ?? [];
+        // Build and cache flat file list when in flat mode
+        if (state.flatViewMode) {
+            this.cachedFlatFiles = buildFlatFileList(files, this.gitManager?.state.hunkCounts ?? null);
         }
+        const content = renderTopPane(state, files, this.gitManager?.historyState?.commits ?? [], this.gitManager?.compareState?.compareDiff ?? null, this.compareSelection, this.explorerManager?.state, width, this.layout.dimensions.topPaneHeight, this.gitManager?.state.hunkCounts, state.flatViewMode ? this.cachedFlatFiles : undefined);
         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);
+        // Pass selectedHunkIndex and staged status only when diff pane is focused on diff tab
+        const diffPaneFocused = state.bottomTab === 'diff' && state.currentPane === 'diff';
+        const hunkIndex = diffPaneFocused ? state.selectedHunkIndex : undefined;
+        const isFileStaged = diffPaneFocused ? this.gitManager?.state.selectedFile?.staged : undefined;
+        const { content, totalRows, hunkCount, hunkBoundaries, hunkMapping } = 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, hunkIndex, isFileStaged, state.flatViewMode ? this.gitManager?.state.combinedFileDiffs : undefined);
+        this.bottomPaneTotalRows = totalRows;
+        this.bottomPaneHunkCount = hunkCount;
+        this.bottomPaneHunkBoundaries = hunkBoundaries;
+        this.combinedHunkMapping = hunkMapping ?? [];
+        // Silently clamp hunk index to actual count (handles async refresh after hunk staging)
+        this.uiState.clampSelectedHunkIndex(hunkCount);
+        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, state.currentPane);
         this.layout.footerBox.setContent(content);
     }
     /**
@@ -1140,8 +1143,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();