diffstalker 0.2.1 → 0.2.2

package/dist/App.js

@@ -20,6 +20,8 @@ import { UIState } from './state/UIState.js';
 import { getManagerForRepo, removeManagerForRepo, } from './core/GitStateManager.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.
@@ -41,10 +43,17 @@ export class App {
     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;
@@ -158,6 +167,9 @@ export class App {
             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,
@@ -166,10 +178,11 @@ export class App {
             getStatusFiles: () => this.gitManager?.state.status?.files ?? [],
             getSelectedIndex: () => this.uiState.state.selectedIndex,
             uiState: this.uiState,
-            explorerManager: this.explorerManager,
+            getExplorerManager: () => this.explorerManager,
             commitFlowState: this.commitFlowState,
-            gitManager: this.gitManager,
+            getGitManager: () => this.gitManager,
             layout: this.layout,
+            getCachedFlatFiles: () => this.cachedFlatFiles,
         });
     }
     setupMouseEventHandlers() {
@@ -178,30 +191,54 @@ export class App {
             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,
-            explorerManager: this.explorerManager,
+            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,
         });
     }
+    /**
+     * 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 {
+            if (entry.unstagedEntry)
+                await this.gitManager?.stage(entry.unstagedEntry);
+        }
+    }
     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 {
-                await this.gitManager?.stage(file);
+        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 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);
+                }
             }
         }
     }
@@ -212,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();
             }
@@ -305,23 +346,11 @@ export class App {
         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);
+            // 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();
             }
-            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();
         });
@@ -347,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) {
@@ -469,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() {
@@ -691,12 +770,26 @@ export class App {
         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);
+            }
         }
     }
     /**
@@ -726,32 +819,64 @@ export class App {
     async stageSelected() {
         const files = this.gitManager?.state.status?.files ?? [];
         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);
+        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 index = this.uiState.state.selectedIndex;
-        const selectedFile = getFileAtIndex(files, index);
-        if (selectedFile?.staged) {
-            this.pendingSelectionAnchor = getCategoryForIndex(files, index);
-            await this.gitManager?.unstage(selectedFile);
+        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);
+            }
+        }
+        else {
+            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 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);
-            }
-            else {
-                await this.gitManager?.stage(selectedFile);
+        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);
+                }
             }
         }
     }
@@ -770,18 +895,120 @@ 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) {
-                // Reset scroll to show selected file
-                this.uiState.setExplorerScrollOffset(0);
+                // 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();
         }, () => {
@@ -800,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();
@@ -842,6 +1070,13 @@ 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();
     }
@@ -854,7 +1089,12 @@ export class App {
     updateTopPane() {
         const state = this.uiState.state;
         const width = this.screen.width || 80;
-        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);
+        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() {
@@ -864,8 +1104,17 @@ export class App {
         const stagedCount = files.filter((f) => f.staged).length;
         // Update staged count for commit validation
         this.commitFlowState.setStagedCount(stagedCount);
-        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);
+        // 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) {
@@ -880,7 +1129,7 @@ export class App {
     updateFooter() {
         const state = this.uiState.state;
         const width = this.screen.width || 80;
-        const content = formatFooter(state.bottomTab, state.mouseEnabled, state.autoTabEnabled, state.wrapMode, this.followMode?.isEnabled ?? false, this.explorerManager?.showOnlyChanges ?? false, 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);
     }
     /**