diffstalker 0.1.7 → 0.2.1

package/dist/App.js

@@ -1,541 +1,916 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { Box, Text, useApp, useInput } from 'ink';
-import { Header, getHeaderHeight } from './components/Header.js';
-import { getFileAtIndex, getTotalFileCount } from './components/FileList.js';
-import { getCommitIndexFromRow } from './components/HistoryView.js';
-import { Footer } from './components/Footer.js';
-import { TopPane } from './components/TopPane.js';
-import { BottomPane } from './components/BottomPane.js';
-import { useWatcher } from './hooks/useWatcher.js';
-import { useGit } from './hooks/useGit.js';
-import { useKeymap } from './hooks/useKeymap.js';
-import { useMouse } from './hooks/useMouse.js';
-import { useTerminalSize } from './hooks/useTerminalSize.js';
-import { useLayout, SPLIT_RATIO_STEP } from './hooks/useLayout.js';
-import { useHistoryState } from './hooks/useHistoryState.js';
-import { useCompareState } from './hooks/useCompareState.js';
-import { useExplorerState } from './hooks/useExplorerState.js';
-import { getClickedFileIndex, getClickedTab, getFooterLeftClick, isButtonAreaClick, isInPane, } from './utils/mouseCoordinates.js';
+import blessed from 'neo-blessed';
+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 { 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 { saveConfig } from './config.js';
-import { ThemePicker } from './components/ThemePicker.js';
-import { HotkeysModal } from './components/HotkeysModal.js';
-import { BaseBranchPicker } from './components/BaseBranchPicker.js';
-import { buildDiffDisplayRows, getDisplayRowsLineNumWidth, getWrappedRowCount, } from './utils/displayRows.js';
-import { getExplorerContentTotalRows } from './components/ExplorerContentView.js';
-import { getMaxScrollOffset } from './components/ScrollableList.js';
-export function App({ config, initialPath }) {
-    const { exit } = useApp();
-    // Terminal dimensions
-    const { rows: terminalHeight, columns: terminalWidth } = useTerminalSize();
-    // File watcher
-    const { state: watcherState, setEnabled: setWatcherEnabled } = useWatcher(config.watcherEnabled, config.targetFile, config.debug);
-    // Determine repo path
-    const repoPath = initialPath ?? watcherState.path ?? process.cwd();
-    // Git state
-    const { status, diff, selectedFile, isLoading, error, selectFile, stage, unstage, discard, stageAll, unstageAll, commit, refresh, getHeadCommitMessage, compareDiff, compareLoading, compareError, refreshCompareDiff, getCandidateBaseBranches, setCompareBaseBranch, historySelectedCommit, historyCommitDiff, selectHistoryCommit, compareSelectionDiff, selectCompareCommit, } = useGit(repoPath);
-    // File list data
-    const files = status?.files ?? [];
-    const totalFiles = getTotalFileCount(files);
-    const stagedCount = files.filter((f) => f.staged).length;
-    // UI state
-    const [currentPane, setCurrentPane] = useState('files');
-    const [bottomTab, setBottomTab] = useState('diff');
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [pendingDiscard, setPendingDiscard] = useState(null);
-    const [commitInputFocused, setCommitInputFocused] = useState(false);
-    const [currentTheme, setCurrentTheme] = useState(config.theme);
-    const [activeModal, setActiveModal] = useState(null);
-    const [autoTabEnabled, setAutoTabEnabled] = useState(false);
-    const [wrapMode, setWrapMode] = useState(false);
-    // Explorer scroll state
-    const [explorerScrollOffset, setExplorerScrollOffset] = useState(0);
-    const [explorerFileScrollOffset, setExplorerFileScrollOffset] = useState(0);
-    // Explorer display options
-    const [showMiddleDots, setShowMiddleDots] = useState(false);
-    const [hideHiddenFiles, setHideHiddenFiles] = useState(true);
-    const [hideGitignored, setHideGitignored] = useState(true);
-    // Header height calculation
-    const headerHeight = getHeaderHeight(repoPath, status?.branch ?? null, watcherState, terminalWidth, error, isLoading);
-    const extraOverhead = headerHeight - 1;
-    // Layout and scroll state
-    const { topPaneHeight, bottomPaneHeight, paneBoundaries, splitRatio, adjustSplitRatio, fileListScrollOffset, diffScrollOffset, historyScrollOffset, compareScrollOffset, setDiffScrollOffset, setHistoryScrollOffset, setCompareScrollOffset, scrollDiff, scrollFileList, scrollHistory, scrollCompare, } = useLayout(terminalHeight, terminalWidth, files, selectedIndex, diff, bottomTab, undefined, config.splitRatio, extraOverhead);
-    // Calculate display row counts for scroll calculations
-    // When wrap mode is enabled, account for wrapped lines
-    const diffTotalRows = useMemo(() => {
-        const displayRows = buildDiffDisplayRows(diff);
-        if (!wrapMode)
-            return displayRows.length;
-        const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
-        const contentWidth = terminalWidth - lineNumWidth - 5;
-        return getWrappedRowCount(displayRows, contentWidth, true);
-    }, [diff, wrapMode, terminalWidth]);
-    // History state
-    const { commits, historySelectedIndex, setHistorySelectedIndex, historyDiffTotalRows, navigateHistoryUp, navigateHistoryDown, historyTotalRows, } = useHistoryState({
-        repoPath,
-        isActive: bottomTab === 'history',
-        selectHistoryCommit,
-        historyCommitDiff,
-        historySelectedCommit,
-        topPaneHeight,
-        historyScrollOffset,
-        setHistoryScrollOffset,
-        setDiffScrollOffset,
-        status,
-        wrapMode,
-        terminalWidth,
-    });
-    // Compare state
-    const { includeUncommitted, compareListSelection, baseBranchCandidates, showBaseBranchPicker, compareTotalItems, compareDiffTotalRows, setCompareSelectedIndex, toggleIncludeUncommitted, openBaseBranchPicker, closeBaseBranchPicker, selectBaseBranch, navigateCompareUp, navigateCompareDown, markSelectionInitialized, getItemIndexFromRow, } = useCompareState({
-        repoPath,
-        isActive: bottomTab === 'compare',
-        compareDiff,
-        refreshCompareDiff,
-        getCandidateBaseBranches,
-        setCompareBaseBranch,
-        selectCompareCommit,
-        topPaneHeight,
-        compareScrollOffset,
-        setCompareScrollOffset,
-        setDiffScrollOffset,
-        status,
-        wrapMode,
-        terminalWidth,
-    });
-    // Explorer state
-    const { currentPath: explorerCurrentPath, items: explorerItems, selectedIndex: explorerSelectedIndex, setSelectedIndex: setExplorerSelectedIndex, selectedFile: explorerSelectedFile, navigateUp: navigateExplorerUp, navigateDown: navigateExplorerDown, enterDirectory: explorerEnterDirectory, goUp: explorerGoUp, isLoading: explorerIsLoading, error: explorerError, explorerTotalRows, } = useExplorerState({
-        repoPath,
-        isActive: bottomTab === 'explorer',
-        topPaneHeight,
-        explorerScrollOffset,
-        setExplorerScrollOffset,
-        fileScrollOffset: explorerFileScrollOffset,
-        setFileScrollOffset: setExplorerFileScrollOffset,
-        hideHiddenFiles,
-        hideGitignored,
-    });
-    // Calculate explorer content total rows for scroll bounds
-    const explorerContentTotalRows = useMemo(() => {
-        if (!explorerSelectedFile)
-            return 0;
-        return getExplorerContentTotalRows(explorerSelectedFile.content, explorerSelectedFile.path, explorerSelectedFile.truncated ?? false, terminalWidth, wrapMode);
-    }, [explorerSelectedFile, terminalWidth, wrapMode]);
-    // Keep a ref to paneBoundaries for use in callbacks
-    const paneBoundariesRef = useRef(paneBoundaries);
-    paneBoundariesRef.current = paneBoundaries;
-    // Save split ratio to config when it changes
-    const initialSplitRatioRef = useRef(config.splitRatio);
-    useEffect(() => {
-        if (splitRatio !== initialSplitRatioRef.current) {
-            const timer = setTimeout(() => saveConfig({ splitRatio }), 500);
-            return () => clearTimeout(timer);
-        }
-    }, [splitRatio]);
-    // Currently selected file
-    const currentFile = useMemo(() => getFileAtIndex(files, selectedIndex), [files, selectedIndex]);
-    // Auto-select when files change
-    useEffect(() => {
-        if (totalFiles > 0 && selectedIndex >= totalFiles) {
-            setSelectedIndex(Math.max(0, totalFiles - 1));
-        }
-    }, [totalFiles, selectedIndex]);
-    // Update selected file in useGit
-    useEffect(() => {
-        selectFile(currentFile);
-    }, [currentFile, selectFile]);
-    // Reset diff scroll when file selection changes
-    useEffect(() => {
-        if (bottomTab === 'diff' || bottomTab === 'commit') {
-            setDiffScrollOffset(0);
-        }
-    }, [selectedIndex, bottomTab, setDiffScrollOffset]);
-    // Reset diff scroll when wrap mode changes
-    useEffect(() => {
-        setDiffScrollOffset(0);
-    }, [wrapMode, setDiffScrollOffset]);
-    // Tab switching (defined early so handleMouseEvent can use it)
-    const handleSwitchTab = useCallback((tab) => {
-        setBottomTab(tab);
-        const paneMap = {
-            diff: 'files',
-            commit: 'commit',
-            history: 'history',
-            compare: 'compare',
-            explorer: 'explorer',
-        };
-        setCurrentPane(paneMap[tab]);
-    }, []);
-    // Ref for toggleMouse (set after useMouse, used in handleMouseEvent)
-    const toggleMouseRef = useRef(() => { });
-    // Mouse handler
-    const handleMouseEvent = useCallback((event) => {
-        const { x, y, type, button } = event;
-        const { stagingPaneStart, fileListEnd, diffPaneStart, diffPaneEnd, footerRow } = paneBoundariesRef.current;
-        if (type === 'click') {
-            // Close modals on any click
-            if (activeModal !== null) {
-                setActiveModal(null);
-                return;
-            }
-            // Footer clicks
-            if (y === footerRow && button === 'left') {
-                // Tab clicks on the right side
-                const tab = getClickedTab(x, terminalWidth);
-                if (tab) {
-                    handleSwitchTab(tab);
-                    return;
-                }
-                // Indicator clicks on the left side
-                const leftClick = getFooterLeftClick(x);
-                if (leftClick === 'hotkeys') {
-                    setActiveModal('hotkeys');
-                    return;
-                }
-                else if (leftClick === 'mouse-mode') {
-                    toggleMouseRef.current();
-                    return;
-                }
-                else if (leftClick === 'auto-tab') {
-                    setAutoTabEnabled((prev) => !prev);
-                    return;
-                }
-                else if (leftClick === 'wrap') {
-                    setWrapMode((prev) => !prev);
-                    return;
-                }
+import { getCategoryForIndex, getIndexForCategoryPosition, } from './utils/fileCategories.js';
+/**
+ * Main application controller.
+ * Coordinates between GitStateManager, UIState, and blessed widgets.
+ */
+export class App {
+    screen;
+    layout;
+    uiState;
+    gitManager = null;
+    followMode = null;
+    explorerManager = null;
+    config;
+    commandServer;
+    // Current state
+    repoPath;
+    currentTheme;
+    // Commit flow state
+    commitFlowState;
+    commitTextarea = null;
+    // Active modals
+    activeModal = null;
+    // Cached total rows for scroll bounds (single source of truth from render)
+    bottomPaneTotalRows = 0;
+    // Selection anchor: remembers category + position before stage/unstage
+    pendingSelectionAnchor = null;
+    constructor(options) {
+        this.config = options.config;
+        this.commandServer = options.commandServer ?? null;
+        this.repoPath = options.initialPath ?? process.cwd();
+        this.currentTheme = options.config.theme;
+        // Initialize UI state with config values
+        this.uiState = new UIState({
+            splitRatio: options.config.splitRatio ?? 0.4,
+        });
+        // Create blessed screen
+        this.screen = blessed.screen({
+            smartCSR: true,
+            fullUnicode: true,
+            title: 'diffstalker',
+            mouse: true,
+            terminal: 'xterm-256color',
+        });
+        // Force 256-color support (terminfo detection can be unreliable)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const screenAny = this.screen;
+        if (screenAny.tput) {
+            screenAny.tput.colors = 256;
+        }
+        if (screenAny.program?.tput) {
+            screenAny.program.tput.colors = 256;
+        }
+        // Create layout
+        this.layout = new LayoutManager(this.screen, this.uiState.state.splitRatio);
+        // Handle screen resize - re-render content
+        // Use setImmediate to ensure screen dimensions are fully updated
+        this.screen.on('resize', () => {
+            setImmediate(() => this.render());
+        });
+        // Initialize commit flow state
+        this.commitFlowState = new CommitFlowState({
+            getHeadMessage: () => this.gitManager?.getHeadCommitMessage() ?? Promise.resolve(''),
+            onCommit: async (message, amend) => {
+                await this.gitManager?.commit(message, amend);
+            },
+            onSuccess: () => {
+                this.uiState.setTab('diff');
+                this.render();
+            },
+        });
+        // Create commit textarea (hidden initially)
+        this.commitTextarea = blessed.textarea({
+            parent: this.layout.bottomPane,
+            top: 3,
+            left: 1,
+            width: '100%-4',
+            height: 1,
+            inputOnFocus: true,
+            hidden: true,
+            style: {
+                fg: 'white',
+                bg: 'default',
+            },
+        });
+        // Handle textarea submission
+        this.commitTextarea.on('submit', () => {
+            this.commitFlowState.submit();
+        });
+        // Sync textarea value with commit state
+        this.commitTextarea.on('keypress', () => {
+            // Defer to next tick to get updated value
+            setImmediate(() => {
+                const value = this.commitTextarea?.getValue() ?? '';
+                this.commitFlowState.setMessage(value);
+            });
+        });
+        // Setup keyboard handlers
+        this.setupKeyboardHandlers();
+        // Setup mouse handlers
+        this.setupMouseEventHandlers();
+        // Setup state change listeners
+        this.setupStateListeners();
+        // Setup follow mode if enabled
+        if (this.config.watcherEnabled) {
+            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) {
+            this.setupCommandHandler();
+        }
+        // Initialize git manager for current repo
+        this.initGitManager();
+        // Initial render
+        this.render();
+    }
+    setupKeyboardHandlers() {
+        setupKeyBindings(this.screen, {
+            exit: () => this.exit(),
+            navigateDown: () => this.navigateDown(),
+            navigateUp: () => this.navigateUp(),
+            stageSelected: () => this.stageSelected(),
+            unstageSelected: () => this.unstageSelected(),
+            stageAll: () => this.stageAll(),
+            unstageAll: () => this.unstageAll(),
+            toggleSelected: () => this.toggleSelected(),
+            enterExplorerDirectory: () => this.enterExplorerDirectory(),
+            goExplorerUp: () => this.goExplorerUp(),
+            openFileFinder: () => this.openFileFinder(),
+            focusCommitInput: () => this.focusCommitInput(),
+            unfocusCommitInput: () => this.unfocusCommitInput(),
+            refresh: () => this.refresh(),
+            toggleMouseMode: () => this.toggleMouseMode(),
+            toggleFollow: () => this.toggleFollow(),
+            showDiscardConfirm: (file) => this.showDiscardConfirm(file),
+            render: () => this.render(),
+        }, {
+            hasActiveModal: () => this.activeModal !== null,
+            getBottomTab: () => this.uiState.state.bottomTab,
+            getCurrentPane: () => this.uiState.state.currentPane,
+            isCommitInputFocused: () => this.commitFlowState.state.inputFocused,
+            getStatusFiles: () => this.gitManager?.state.status?.files ?? [],
+            getSelectedIndex: () => this.uiState.state.selectedIndex,
+            uiState: this.uiState,
+            explorerManager: this.explorerManager,
+            commitFlowState: this.commitFlowState,
+            gitManager: this.gitManager,
+            layout: this.layout,
+        });
+    }
+    setupMouseEventHandlers() {
+        setupMouseHandlers(this.layout, {
+            selectHistoryCommitByIndex: (index) => this.selectHistoryCommitByIndex(index),
+            selectCompareItem: (selection) => this.selectCompareItem(selection),
+            selectFileByIndex: (index) => this.selectFileByIndex(index),
+            toggleFileByIndex: (index) => this.toggleFileByIndex(index),
+            toggleMouseMode: () => this.toggleMouseMode(),
+            toggleFollow: () => this.toggleFollow(),
+            render: () => this.render(),
+        }, {
+            uiState: this.uiState,
+            explorerManager: this.explorerManager,
+            getStatusFiles: () => this.gitManager?.state.status?.files ?? [],
+            getHistoryCommitCount: () => this.gitManager?.historyState.commits.length ?? 0,
+            getCompareCommits: () => this.gitManager?.compareState?.compareDiff?.commits ?? [],
+            getCompareFiles: () => this.gitManager?.compareState?.compareDiff?.files ?? [],
+            getBottomPaneTotalRows: () => this.bottomPaneTotalRows,
+            getScreenWidth: () => this.screen.width || 80,
+        });
+    }
+    async toggleFileByIndex(index) {
+        const files = this.gitManager?.state.status?.files ?? [];
+        const file = getFileAtIndex(files, index);
+        if (file) {
+            this.pendingSelectionAnchor = getCategoryForIndex(files, this.uiState.state.selectedIndex);
+            if (file.staged) {
+                await this.gitManager?.unstage(file);
+            }
+            else {
+                await this.gitManager?.stage(file);
+            }
+        }
+    }
+    setupStateListeners() {
+        // Update footer when UI state changes
+        this.uiState.on('change', () => {
+            this.render();
+        });
+        // Load data when switching tabs
+        this.uiState.on('tab-change', (tab) => {
+            if (tab === 'history') {
+                this.gitManager?.loadHistory();
             }
-            // Top pane clicks
-            if (isInPane(y, stagingPaneStart + 1, fileListEnd)) {
-                // ScrollableList shows scroll indicators when content exceeds maxHeight.
-                // This takes 1 row at top, so we need to offset click calculations.
-                // FileList doesn't use ScrollableList, so no offset needed for diff/commit tabs.
-                const listMaxHeight = topPaneHeight - 1;
-                const getScrollIndicatorOffset = (itemCount) => itemCount > listMaxHeight ? 1 : 0;
-                if (bottomTab === 'diff' || bottomTab === 'commit') {
-                    const clickedIndex = getClickedFileIndex(y, fileListScrollOffset, files, stagingPaneStart, fileListEnd);
-                    if (clickedIndex >= 0 && clickedIndex < totalFiles) {
-                        setSelectedIndex(clickedIndex);
-                        setCurrentPane('files');
-                        const file = getFileAtIndex(files, clickedIndex);
-                        if (file) {
-                            if (button === 'right' && !file.staged && file.status !== 'untracked') {
-                                setPendingDiscard(file);
-                            }
-                            else if (button === 'left' && isButtonAreaClick(x)) {
-                                if (file.staged) {
-                                    unstage(file);
-                                }
-                                else {
-                                    stage(file);
-                                }
-                            }
-                        }
-                        return;
-                    }
+            else if (tab === 'compare') {
+                this.gitManager?.refreshCompareDiff(this.uiState.state.includeUncommitted);
+            }
+            else if (tab === 'explorer') {
+                // Explorer is already loaded on init, but refresh if needed
+                if (!this.explorerManager?.state.displayRows.length) {
+                    this.explorerManager?.loadDirectory('');
                 }
-                else if (bottomTab === 'history') {
-                    const offset = getScrollIndicatorOffset(commits.length);
-                    const visualRow = y - stagingPaneStart - 1 - offset;
-                    const clickedIndex = getCommitIndexFromRow(visualRow, commits, terminalWidth, historyScrollOffset);
-                    if (clickedIndex >= 0 && clickedIndex < commits.length) {
-                        setHistorySelectedIndex(clickedIndex);
-                        setCurrentPane('history');
-                        setDiffScrollOffset(0);
-                        return;
-                    }
+            }
+        });
+        // Handle modal opening/closing
+        this.uiState.on('modal-change', (modal) => {
+            // Close any existing modal
+            if (this.activeModal) {
+                this.activeModal = null;
+            }
+            // Open new modal if requested
+            if (modal === 'theme') {
+                this.activeModal = new ThemePicker(this.screen, this.currentTheme, (theme) => {
+                    this.currentTheme = theme;
+                    saveConfig({ theme });
+                    this.activeModal = null;
+                    this.uiState.closeModal();
+                    this.render();
+                }, () => {
+                    this.activeModal = null;
+                    this.uiState.closeModal();
+                });
+                this.activeModal.focus();
+            }
+            else if (modal === 'hotkeys') {
+                this.activeModal = new HotkeysModal(this.screen, () => {
+                    this.activeModal = null;
+                    this.uiState.closeModal();
+                });
+                this.activeModal.focus();
+            }
+            else if (modal === 'baseBranch') {
+                // Load candidate branches and show picker
+                this.gitManager?.getCandidateBaseBranches().then((branches) => {
+                    const currentBranch = this.gitManager?.compareState.compareBaseBranch ?? null;
+                    this.activeModal = new BaseBranchPicker(this.screen, branches, currentBranch, (branch) => {
+                        this.activeModal = null;
+                        this.uiState.closeModal();
+                        // Set base branch and refresh compare view
+                        const includeUncommitted = this.uiState.state.includeUncommitted;
+                        this.gitManager?.setCompareBaseBranch(branch, includeUncommitted);
+                    }, () => {
+                        this.activeModal = null;
+                        this.uiState.closeModal();
+                    });
+                    this.activeModal.focus();
+                });
+            }
+        });
+        // Save split ratio to config when it changes
+        let saveTimer = null;
+        this.uiState.on('change', (state) => {
+            if (saveTimer)
+                clearTimeout(saveTimer);
+            saveTimer = setTimeout(() => {
+                if (state.splitRatio !== this.config.splitRatio) {
+                    saveConfig({ splitRatio: state.splitRatio });
                 }
-                else if (bottomTab === 'compare' && compareDiff) {
-                    const offset = getScrollIndicatorOffset(compareTotalItems);
-                    const visualRow = y - stagingPaneStart - 1 - offset + compareScrollOffset;
-                    const itemIndex = getItemIndexFromRow(visualRow);
-                    if (itemIndex >= 0 && itemIndex < compareTotalItems) {
-                        markSelectionInitialized();
-                        setCompareSelectedIndex(itemIndex);
-                        setCurrentPane('compare');
-                        return;
-                    }
+            }, 500);
+        });
+    }
+    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(oldRepoPath) {
+        // Clean up existing manager
+        if (this.gitManager) {
+            this.gitManager.removeAllListeners();
+            // Use oldRepoPath if provided (when switching repos), otherwise use current path
+            removeManagerForRepo(oldRepoPath ?? this.repoPath);
+        }
+        // Get or create manager for this repo
+        this.gitManager = getManagerForRepo(this.repoPath);
+        // Listen to state changes
+        this.gitManager.on('state-change', () => {
+            const files = this.gitManager?.state.status?.files ?? [];
+            if (this.pendingSelectionAnchor) {
+                // Restore selection to same category + position after stage/unstage
+                const anchor = this.pendingSelectionAnchor;
+                this.pendingSelectionAnchor = null;
+                const newIndex = getIndexForCategoryPosition(files, anchor.category, anchor.categoryIndex);
+                this.uiState.setSelectedIndex(newIndex);
+                this.selectFileByIndex(newIndex);
+            }
+            else if (files.length > 0) {
+                // Default: clamp selected index to valid range
+                const maxIndex = files.length - 1;
+                if (this.uiState.state.selectedIndex > maxIndex) {
+                    this.uiState.setSelectedIndex(maxIndex);
                 }
-                else if (bottomTab === 'explorer') {
-                    const offset = getScrollIndicatorOffset(explorerItems.length);
-                    const visualRow = y - stagingPaneStart - 1 - offset + explorerScrollOffset;
-                    if (visualRow >= 0 && visualRow < explorerItems.length) {
-                        setExplorerSelectedIndex(visualRow);
-                        setCurrentPane('explorer');
-                        return;
-                    }
+            }
+            // Update explorer git status when git state changes
+            this.updateExplorerGitStatus();
+            this.render();
+        });
+        this.gitManager.on('history-state-change', (historyState) => {
+            // Auto-select first commit when history loads
+            if (historyState.commits.length > 0 && !historyState.selectedCommit) {
+                const state = this.uiState.state;
+                if (state.bottomTab === 'history') {
+                    this.selectHistoryCommitByIndex(state.historySelectedIndex);
                 }
             }
-            // Bottom pane clicks
-            if (isInPane(y, diffPaneStart, diffPaneEnd)) {
-                setCurrentPane(bottomTab);
+            this.render();
+        });
+        this.gitManager.on('compare-state-change', () => {
+            this.render();
+        });
+        this.gitManager.on('compare-selection-change', () => {
+            this.render();
+        });
+        // Start watching and do initial refresh
+        this.gitManager.startWatching();
+        this.gitManager.refresh();
+        // Initialize explorer manager
+        this.initExplorerManager();
+    }
+    initExplorerManager() {
+        // Clean up existing manager
+        if (this.explorerManager) {
+            this.explorerManager.dispose();
+        }
+        // Create new manager with options
+        const options = {
+            hideHidden: true,
+            hideGitignored: true,
+            showOnlyChanges: false,
+        };
+        this.explorerManager = new ExplorerStateManager(this.repoPath, options);
+        // Listen to state changes
+        this.explorerManager.on('state-change', () => {
+            this.render();
+        });
+        // 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)
+            return;
+        const handler = {
+            navigateUp: () => this.navigateUp(),
+            navigateDown: () => this.navigateDown(),
+            switchTab: (tab) => this.uiState.setTab(tab),
+            togglePane: () => this.uiState.togglePane(),
+            stage: async () => this.stageSelected(),
+            unstage: async () => this.unstageSelected(),
+            stageAll: async () => this.stageAll(),
+            unstageAll: async () => this.unstageAll(),
+            commit: async (message) => this.commit(message),
+            refresh: async () => this.refresh(),
+            getState: () => this.getAppState(),
+            quit: () => this.exit(),
+        };
+        this.commandServer.setHandler(handler);
+        this.commandServer.notifyReady();
+    }
+    getAppState() {
+        const state = this.uiState.state;
+        const gitState = this.gitManager?.state;
+        const historyState = this.gitManager?.historyState;
+        const files = gitState?.status?.files ?? [];
+        const commits = historyState?.commits ?? [];
+        return {
+            currentTab: state.bottomTab,
+            currentPane: state.currentPane,
+            selectedIndex: state.selectedIndex,
+            totalFiles: files.length,
+            stagedCount: files.filter((f) => f.staged).length,
+            files: files.map((f) => ({
+                path: f.path,
+                status: f.status,
+                staged: f.staged,
+            })),
+            historySelectedIndex: state.historySelectedIndex,
+            historyCommitCount: commits.length,
+            compareSelectedIndex: state.compareSelectedIndex,
+            compareTotalItems: 0,
+            includeUncommitted: state.includeUncommitted,
+            explorerPath: this.repoPath,
+            explorerSelectedIndex: state.explorerSelectedIndex,
+            explorerItemCount: 0,
+            wrapMode: state.wrapMode,
+            mouseEnabled: state.mouseEnabled,
+            autoTabEnabled: state.autoTabEnabled,
+        };
+    }
+    // Navigation methods
+    navigateUp() {
+        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;
         }
-        else if (type === 'scroll-up' || type === 'scroll-down') {
-            const direction = type === 'scroll-up' ? 'up' : 'down';
-            if (isInPane(y, stagingPaneStart, fileListEnd)) {
-                if (bottomTab === 'diff' || bottomTab === 'commit') {
-                    scrollFileList(direction);
-                }
-                else if (bottomTab === 'history') {
-                    scrollHistory(direction, historyTotalRows);
-                }
-                else if (bottomTab === 'compare') {
-                    scrollCompare(direction, compareTotalItems);
-                }
-                else if (bottomTab === 'explorer') {
-                    // Scroll explorer list (maxHeight is topPaneHeight - 1 for "EXPLORER" header)
-                    const scrollAmount = direction === 'up' ? -3 : 3;
-                    const maxOffset = getMaxScrollOffset(explorerTotalRows, topPaneHeight - 1);
-                    setExplorerScrollOffset((prev) => Math.max(0, Math.min(prev + scrollAmount, maxOffset)));
-                }
+        if (state.bottomTab === 'compare') {
+            if (state.currentPane === 'compare') {
+                this.navigateCompareUp();
             }
-            else {
-                if (bottomTab === 'explorer') {
-                    // Scroll file content with proper bounds
-                    const scrollAmount = direction === 'up' ? -3 : 3;
-                    const maxOffset = getMaxScrollOffset(explorerContentTotalRows, bottomPaneHeight - 1);
-                    setExplorerFileScrollOffset((prev) => Math.max(0, Math.min(prev + scrollAmount, maxOffset)));
-                }
-                else {
-                    let maxRows;
-                    if (bottomTab === 'compare' && compareListSelection?.type !== 'commit') {
-                        maxRows = compareDiffTotalRows;
-                    }
-                    else if (bottomTab === 'history') {
-                        maxRows = historyDiffTotalRows;
-                    }
-                    else if (bottomTab === 'diff') {
-                        maxRows = diffTotalRows;
-                    }
-                    scrollDiff(direction, 3, maxRows);
-                }
+            else if (state.currentPane === 'diff') {
+                this.uiState.setDiffScrollOffset(Math.max(0, state.diffScrollOffset - 3));
             }
+            return;
         }
-    }, [
-        terminalWidth,
-        fileListScrollOffset,
-        files,
-        totalFiles,
-        bottomTab,
-        commits,
-        compareDiff,
-        compareTotalItems,
-        stage,
-        unstage,
-        scrollDiff,
-        scrollFileList,
-        scrollHistory,
-        scrollCompare,
-        historyScrollOffset,
-        compareScrollOffset,
-        setDiffScrollOffset,
-        setHistorySelectedIndex,
-        setCompareSelectedIndex,
-        markSelectionInitialized,
-        getItemIndexFromRow,
-        compareListSelection?.type,
-        compareDiffTotalRows,
-        diffTotalRows,
-        historyDiffTotalRows,
-        historyTotalRows,
-        activeModal,
-        explorerItems,
-        explorerScrollOffset,
-        explorerTotalRows,
-        explorerContentTotalRows,
-        topPaneHeight,
-        bottomPaneHeight,
-        setExplorerSelectedIndex,
-        setExplorerScrollOffset,
-        setExplorerFileScrollOffset,
-    ]);
-    // Disable mouse when inputs are focused
-    const mouseDisabled = commitInputFocused || showBaseBranchPicker;
-    const { mouseEnabled, toggleMouse } = useMouse(handleMouseEvent, mouseDisabled);
-    toggleMouseRef.current = toggleMouse;
-    // Auto-tab mode: switch tabs based on file count transitions
-    const prevTotalFilesRef = useRef(totalFiles);
-    useEffect(() => {
-        if (!autoTabEnabled) {
-            prevTotalFilesRef.current = totalFiles;
+        if (state.bottomTab === 'explorer') {
+            if (state.currentPane === 'explorer') {
+                this.navigateExplorerUp();
+            }
+            else if (state.currentPane === 'diff') {
+                this.uiState.setExplorerFileScrollOffset(Math.max(0, state.explorerFileScrollOffset - 3));
+            }
             return;
         }
-        const prevCount = prevTotalFilesRef.current;
-        // Only trigger on transitions, not on current state
-        if (prevCount === 0 && totalFiles > 0) {
-            // Files appeared: switch to diff view
-            handleSwitchTab('diff');
-        }
-        else if (prevCount > 0 && totalFiles === 0) {
-            // Files disappeared: switch to history view and select newest commit
-            setHistorySelectedIndex(0);
-            setHistoryScrollOffset(0);
-            handleSwitchTab('history');
-        }
-        prevTotalFilesRef.current = totalFiles;
-    }, [
-        totalFiles,
-        autoTabEnabled,
-        handleSwitchTab,
-        setHistorySelectedIndex,
-        setHistoryScrollOffset,
-    ]);
-    // Navigation handlers
-    const handleNavigateUp = useCallback(() => {
-        if (currentPane === 'files') {
-            setSelectedIndex((prev) => Math.max(0, prev - 1));
-        }
-        else if (currentPane === 'diff') {
-            let maxRows;
-            if (bottomTab === 'compare' && compareListSelection?.type !== 'commit') {
-                maxRows = compareDiffTotalRows;
-            }
-            else if (bottomTab === 'diff') {
-                maxRows = diffTotalRows;
-            }
-            scrollDiff('up', 3, maxRows);
-        }
-        else if (currentPane === 'history') {
-            navigateHistoryUp();
-        }
-        else if (currentPane === 'compare') {
-            navigateCompareUp();
-        }
-        else if (currentPane === 'explorer') {
-            navigateExplorerUp();
-        }
-    }, [
-        currentPane,
-        bottomTab,
-        compareListSelection?.type,
-        compareDiffTotalRows,
-        diffTotalRows,
-        scrollDiff,
-        navigateHistoryUp,
-        navigateCompareUp,
-        navigateExplorerUp,
-    ]);
-    const handleNavigateDown = useCallback(() => {
-        if (currentPane === 'files') {
-            setSelectedIndex((prev) => Math.min(totalFiles - 1, prev + 1));
-        }
-        else if (currentPane === 'diff') {
-            let maxRows;
-            if (bottomTab === 'compare' && compareListSelection?.type !== 'commit') {
-                maxRows = compareDiffTotalRows;
-            }
-            else if (bottomTab === 'diff') {
-                maxRows = diffTotalRows;
-            }
-            scrollDiff('down', 3, maxRows);
-        }
-        else if (currentPane === 'history') {
-            navigateHistoryDown();
-        }
-        else if (currentPane === 'compare') {
-            navigateCompareDown();
-        }
-        else if (currentPane === 'explorer') {
-            navigateExplorerDown();
-        }
-    }, [
-        currentPane,
-        bottomTab,
-        compareListSelection?.type,
-        compareDiffTotalRows,
-        diffTotalRows,
-        totalFiles,
-        scrollDiff,
-        navigateHistoryDown,
-        navigateCompareDown,
-        navigateExplorerDown,
-    ]);
-    const handleTogglePane = useCallback(() => {
-        if (bottomTab === 'diff' || bottomTab === 'commit') {
-            setCurrentPane((prev) => (prev === 'files' ? 'diff' : 'files'));
-        }
-        else if (bottomTab === 'history') {
-            setCurrentPane((prev) => (prev === 'history' ? 'diff' : 'history'));
-        }
-        else if (bottomTab === 'compare') {
-            setCurrentPane((prev) => (prev === 'compare' ? 'diff' : 'compare'));
-        }
-        else if (bottomTab === 'explorer') {
-            setCurrentPane((prev) => (prev === 'explorer' ? 'diff' : 'explorer'));
-        }
-    }, [bottomTab]);
-    // File operations
-    const handleStage = useCallback(async () => {
-        if (currentFile && !currentFile.staged)
-            await stage(currentFile);
-    }, [currentFile, stage]);
-    const handleUnstage = useCallback(async () => {
-        if (currentFile?.staged)
-            await unstage(currentFile);
-    }, [currentFile, unstage]);
-    const handleSelect = useCallback(async () => {
-        if (!currentFile)
+        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 (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') {
+                this.navigateHistoryDown();
+            }
+            else if (state.currentPane === 'diff') {
+                this.uiState.setDiffScrollOffset(state.diffScrollOffset + 3);
+            }
             return;
-        if (currentFile.staged) {
-            await unstage(currentFile);
+        }
+        if (state.bottomTab === 'compare') {
+            if (state.currentPane === 'compare') {
+                this.navigateCompareDown();
+            }
+            else if (state.currentPane === 'diff') {
+                this.uiState.setDiffScrollOffset(state.diffScrollOffset + 3);
+            }
+            return;
+        }
+        if (state.bottomTab === 'explorer') {
+            if (state.currentPane === 'explorer') {
+                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 if (state.currentPane === 'diff') {
+            this.uiState.setDiffScrollOffset(state.diffScrollOffset + 3);
+        }
+    }
+    navigateHistoryUp() {
+        const state = this.uiState.state;
+        const newIndex = Math.max(0, state.historySelectedIndex - 1);
+        if (newIndex !== state.historySelectedIndex) {
+            this.uiState.setHistorySelectedIndex(newIndex);
+            // Keep selection visible
+            if (newIndex < state.historyScrollOffset) {
+                this.uiState.setHistoryScrollOffset(newIndex);
+            }
+            this.selectHistoryCommitByIndex(newIndex);
+        }
+    }
+    navigateHistoryDown() {
+        const state = this.uiState.state;
+        const commits = this.gitManager?.historyState.commits ?? [];
+        const newIndex = Math.min(commits.length - 1, state.historySelectedIndex + 1);
+        if (newIndex !== state.historySelectedIndex) {
+            this.uiState.setHistorySelectedIndex(newIndex);
+            // Keep selection visible
+            const visibleEnd = state.historyScrollOffset + this.layout.dimensions.topPaneHeight - 1;
+            if (newIndex >= visibleEnd) {
+                this.uiState.setHistoryScrollOffset(state.historyScrollOffset + 1);
+            }
+            this.selectHistoryCommitByIndex(newIndex);
+        }
+    }
+    selectHistoryCommitByIndex(index) {
+        const commits = this.gitManager?.historyState.commits ?? [];
+        const commit = getCommitAtIndex(commits, index);
+        if (commit) {
+            this.uiState.setDiffScrollOffset(0);
+            this.gitManager?.selectHistoryCommit(commit);
+        }
+    }
+    // Compare navigation
+    compareSelection = null;
+    navigateCompareUp() {
+        const compareState = this.gitManager?.compareState;
+        const commits = compareState?.compareDiff?.commits ?? [];
+        const files = compareState?.compareDiff?.files ?? [];
+        if (commits.length === 0 && files.length === 0)
+            return;
+        const next = getNextCompareSelection(this.compareSelection, commits, files, 'up');
+        if (next &&
+            (next.type !== this.compareSelection?.type || next.index !== this.compareSelection?.index)) {
+            this.selectCompareItem(next);
+            // Keep selection visible - scroll up if needed
+            const state = this.uiState.state;
+            const row = getRowFromCompareSelection(next, commits, files);
+            if (row < state.compareScrollOffset) {
+                this.uiState.setCompareScrollOffset(row);
+            }
+        }
+    }
+    navigateCompareDown() {
+        const compareState = this.gitManager?.compareState;
+        const commits = compareState?.compareDiff?.commits ?? [];
+        const files = compareState?.compareDiff?.files ?? [];
+        if (commits.length === 0 && files.length === 0)
+            return;
+        // Auto-select first item if nothing selected
+        if (!this.compareSelection) {
+            // Select first commit if available, otherwise first file
+            if (commits.length > 0) {
+                this.selectCompareItem({ type: 'commit', index: 0 });
+            }
+            else if (files.length > 0) {
+                this.selectCompareItem({ type: 'file', index: 0 });
+            }
+            return;
+        }
+        const next = getNextCompareSelection(this.compareSelection, commits, files, 'down');
+        if (next &&
+            (next.type !== this.compareSelection?.type || next.index !== this.compareSelection?.index)) {
+            this.selectCompareItem(next);
+            // Keep selection visible - scroll down if needed
+            const state = this.uiState.state;
+            const row = getRowFromCompareSelection(next, commits, files);
+            const visibleEnd = state.compareScrollOffset + this.layout.dimensions.topPaneHeight - 1;
+            if (row >= visibleEnd) {
+                this.uiState.setCompareScrollOffset(state.compareScrollOffset + (row - visibleEnd + 1));
+            }
+        }
+    }
+    selectCompareItem(selection) {
+        this.compareSelection = selection;
+        this.uiState.setDiffScrollOffset(0);
+        if (selection.type === 'commit') {
+            this.gitManager?.selectCompareCommit(selection.index);
         }
         else {
-            await stage(currentFile);
-        }
-    }, [currentFile, stage, unstage]);
-    const handleCommit = useCallback(() => handleSwitchTab('commit'), [handleSwitchTab]);
-    const handleCommitCancel = useCallback(() => {
-        setBottomTab('diff');
-        setCurrentPane('files');
-    }, []);
-    // Modal handlers
-    const handleThemeSelect = useCallback((theme) => {
-        setCurrentTheme(theme);
-        setActiveModal(null);
-        saveConfig({ theme });
-    }, []);
-    // Keymap
-    useKeymap({
-        onStage: handleStage,
-        onUnstage: handleUnstage,
-        onStageAll: stageAll,
-        onUnstageAll: unstageAll,
-        onCommit: handleCommit,
-        onQuit: exit,
-        onRefresh: refresh,
-        onNavigateUp: handleNavigateUp,
-        onNavigateDown: handleNavigateDown,
-        onTogglePane: handleTogglePane,
-        onSwitchTab: handleSwitchTab,
-        onSelect: handleSelect,
-        onToggleIncludeUncommitted: toggleIncludeUncommitted,
-        onCycleBaseBranch: openBaseBranchPicker,
-        onOpenThemePicker: () => setActiveModal('theme'),
-        onShrinkTopPane: () => adjustSplitRatio(-SPLIT_RATIO_STEP),
-        onGrowTopPane: () => adjustSplitRatio(SPLIT_RATIO_STEP),
-        onOpenHotkeysModal: () => setActiveModal('hotkeys'),
-        onToggleMouse: toggleMouse,
-        onToggleFollow: () => setWatcherEnabled((prev) => !prev),
-        onToggleAutoTab: () => setAutoTabEnabled((prev) => !prev),
-        onToggleWrap: () => setWrapMode((prev) => !prev),
-        onToggleMiddleDots: bottomTab === 'explorer' ? () => setShowMiddleDots((prev) => !prev) : undefined,
-        onToggleHideHiddenFiles: bottomTab === 'explorer' ? () => setHideHiddenFiles((prev) => !prev) : undefined,
-        onToggleHideGitignored: bottomTab === 'explorer' ? () => setHideGitignored((prev) => !prev) : undefined,
-        onExplorerEnter: bottomTab === 'explorer' ? explorerEnterDirectory : undefined,
-        onExplorerBack: bottomTab === 'explorer' ? explorerGoUp : undefined,
-    }, currentPane, commitInputFocused || activeModal !== null || showBaseBranchPicker);
-    // Discard confirmation
-    useInput((input, key) => {
-        if (!pendingDiscard)
+            this.gitManager?.selectCompareFile(selection.index);
+        }
+    }
+    // Explorer navigation
+    navigateExplorerUp() {
+        const state = this.uiState.state;
+        const rows = this.explorerManager?.state.displayRows ?? [];
+        if (rows.length === 0)
+            return;
+        const newScrollOffset = this.explorerManager?.navigateUp(state.explorerScrollOffset);
+        if (newScrollOffset !== null && newScrollOffset !== undefined) {
+            this.uiState.setExplorerScrollOffset(newScrollOffset);
+        }
+        this.uiState.setExplorerSelectedIndex(this.explorerManager?.state.selectedIndex ?? 0);
+    }
+    navigateExplorerDown() {
+        const state = this.uiState.state;
+        const rows = this.explorerManager?.state.displayRows ?? [];
+        if (rows.length === 0)
             return;
-        if (input === 'y' || input === 'Y') {
-            discard(pendingDiscard);
-            setPendingDiscard(null);
+        const visibleHeight = this.layout.dimensions.topPaneHeight;
+        const newScrollOffset = this.explorerManager?.navigateDown(state.explorerScrollOffset, visibleHeight);
+        if (newScrollOffset !== null && newScrollOffset !== undefined) {
+            this.uiState.setExplorerScrollOffset(newScrollOffset);
+        }
+        this.uiState.setExplorerSelectedIndex(this.explorerManager?.state.selectedIndex ?? 0);
+    }
+    async enterExplorerDirectory() {
+        await this.explorerManager?.enterDirectory();
+        // Reset file content scroll when expanding/collapsing
+        this.uiState.setExplorerFileScrollOffset(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();
+        // Reset file content scroll when collapsing
+        this.uiState.setExplorerFileScrollOffset(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);
+        }
+    }
+    /**
+     * Navigate to a file given its absolute path.
+     * Extracts the relative path and finds the file in the current file list.
+     */
+    navigateToFile(absolutePath) {
+        if (!absolutePath || !this.repoPath)
+            return;
+        // Check if the path is within the current repo
+        const repoPrefix = this.repoPath.endsWith('/') ? this.repoPath : this.repoPath + '/';
+        if (!absolutePath.startsWith(repoPrefix))
+            return;
+        // Extract relative path
+        const relativePath = absolutePath.slice(repoPrefix.length);
+        if (!relativePath)
+            return;
+        // Find the file in the list
+        const files = this.gitManager?.state.status?.files ?? [];
+        const fileIndex = files.findIndex((f) => f.path === relativePath);
+        if (fileIndex >= 0) {
+            this.uiState.setSelectedIndex(fileIndex);
+            this.selectFileByIndex(fileIndex);
+        }
+    }
+    // Git operations
+    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);
+        }
+    }
+    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);
+        }
+    }
+    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);
+            }
+        }
+    }
+    async stageAll() {
+        await this.gitManager?.stageAll();
+    }
+    async unstageAll() {
+        await this.gitManager?.unstageAll();
+    }
+    showDiscardConfirm(file) {
+        this.activeModal = new DiscardConfirm(this.screen, file.path, async () => {
+            this.activeModal = null;
+            await this.gitManager?.discard(file);
+        }, () => {
+            this.activeModal = null;
+        });
+        this.activeModal.focus();
+    }
+    async openFileFinder() {
+        const allPaths = (await this.explorerManager?.getAllFilePaths()) ?? [];
+        if (allPaths.length === 0)
+            return;
+        this.activeModal = new FileFinder(this.screen, allPaths, async (selectedPath) => {
+            this.activeModal = null;
+            // Navigate to the selected file in explorer
+            const success = await this.explorerManager?.navigateToPath(selectedPath);
+            if (success) {
+                // Reset scroll to show selected file
+                this.uiState.setExplorerScrollOffset(0);
+                this.uiState.setExplorerFileScrollOffset(0);
+            }
+            this.render();
+        }, () => {
+            this.activeModal = null;
+            this.render();
+        });
+        this.activeModal.focus();
+    }
+    async commit(message) {
+        await this.gitManager?.commit(message);
+    }
+    async refresh() {
+        await this.gitManager?.refresh();
+    }
+    toggleMouseMode() {
+        const willEnable = !this.uiState.state.mouseEnabled;
+        this.uiState.toggleMouse();
+        // Access program for terminal mouse control (not on screen's TS types)
+        const program = this.screen.program;
+        if (willEnable) {
+            program.enableMouse();
+        }
+        else {
+            program.disableMouse();
+        }
+    }
+    toggleFollow() {
+        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() {
+        if (this.commitTextarea) {
+            this.commitTextarea.show();
+            this.commitTextarea.focus();
+            this.commitTextarea.setValue(this.commitFlowState.state.message);
+            this.commitFlowState.setInputFocused(true);
+            this.render();
+        }
+    }
+    unfocusCommitInput() {
+        if (this.commitTextarea) {
+            const value = this.commitTextarea.getValue() ?? '';
+            this.commitFlowState.setMessage(value);
+            this.commitTextarea.hide();
+            this.commitFlowState.setInputFocused(false);
+            this.screen.focusPush(this.layout.bottomPane);
+            this.render();
+        }
+    }
+    // Render methods
+    render() {
+        this.updateHeader();
+        this.updateTopPane();
+        this.updateBottomPane();
+        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, width);
+        this.layout.headerBox.setContent(content);
+    }
+    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);
+        this.layout.topPane.setContent(content);
+    }
+    updateBottomPane() {
+        const state = this.uiState.state;
+        const width = this.screen.width || 80;
+        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);
+        const { content, totalRows } = renderBottomPane(state, this.gitManager?.state.diff ?? null, this.gitManager?.historyState, this.gitManager?.compareSelectionState, this.explorerManager?.state?.selectedFile ?? null, this.commitFlowState.state, stagedCount, this.currentTheme, width, this.layout.dimensions.bottomPaneHeight);
+        this.bottomPaneTotalRows = totalRows;
+        this.layout.bottomPane.setContent(content);
+        // Manage commit textarea visibility
+        if (this.commitTextarea) {
+            if (state.bottomTab === 'commit' && this.commitFlowState.state.inputFocused) {
+                this.commitTextarea.show();
+            }
+            else {
+                this.commitTextarea.hide();
+            }
+        }
+    }
+    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);
+        this.layout.footerBox.setContent(content);
+    }
+    /**
+     * Exit the application cleanly.
+     */
+    exit() {
+        // Clean up
+        if (this.gitManager) {
+            removeManagerForRepo(this.repoPath);
+        }
+        if (this.explorerManager) {
+            this.explorerManager.dispose();
+        }
+        if (this.followMode) {
+            this.followMode.stop();
         }
-        else if (input === 'n' || input === 'N' || key.escape) {
-            setPendingDiscard(null);
+        if (this.commandServer) {
+            this.commandServer.stop();
         }
-    }, { isActive: !!pendingDiscard });
-    const Separator = () => _jsx(Text, { dimColor: true, children: '─'.repeat(terminalWidth) });
-    return (_jsxs(Box, { flexDirection: "column", height: terminalHeight, width: terminalWidth, overflowX: "hidden", children: [_jsx(Box, { height: headerHeight, width: terminalWidth, children: _jsx(Header, { repoPath: repoPath, branch: status?.branch ?? null, isLoading: isLoading, error: error, debug: config.debug, watcherState: watcherState, width: terminalWidth }) }), _jsx(Separator, {}), _jsx(TopPane, { bottomTab: bottomTab, currentPane: currentPane, terminalWidth: terminalWidth, topPaneHeight: topPaneHeight, files: files, selectedIndex: selectedIndex, fileListScrollOffset: fileListScrollOffset, stagedCount: stagedCount, onStage: stage, onUnstage: unstage, commits: commits, historySelectedIndex: historySelectedIndex, historyScrollOffset: historyScrollOffset, onSelectHistoryCommit: (_, idx) => setHistorySelectedIndex(idx), compareDiff: compareDiff, compareListSelection: compareListSelection, compareScrollOffset: compareScrollOffset, includeUncommitted: includeUncommitted, explorerCurrentPath: explorerCurrentPath, explorerItems: explorerItems, explorerSelectedIndex: explorerSelectedIndex, explorerScrollOffset: explorerScrollOffset, explorerIsLoading: explorerIsLoading, explorerError: explorerError, hideHiddenFiles: hideHiddenFiles, hideGitignored: hideGitignored }), _jsx(Separator, {}), _jsx(BottomPane, { bottomTab: bottomTab, currentPane: currentPane, terminalWidth: terminalWidth, bottomPaneHeight: bottomPaneHeight, diffScrollOffset: diffScrollOffset, currentTheme: currentTheme, diff: diff, selectedFile: selectedFile, stagedCount: stagedCount, onCommit: commit, onCommitCancel: handleCommitCancel, getHeadCommitMessage: getHeadCommitMessage, onCommitInputFocusChange: setCommitInputFocused, historySelectedCommit: historySelectedCommit, historyCommitDiff: historyCommitDiff, compareDiff: compareDiff, compareLoading: compareLoading, compareError: compareError, compareListSelection: compareListSelection, compareSelectionDiff: compareSelectionDiff, wrapMode: wrapMode, explorerSelectedFile: explorerSelectedFile, explorerFileScrollOffset: explorerFileScrollOffset, showMiddleDots: showMiddleDots }), _jsx(Separator, {}), pendingDiscard ? (_jsxs(Box, { children: [_jsxs(Text, { color: "yellow", bold: true, children: ["Discard changes to", ' '] }), _jsx(Text, { color: "cyan", children: pendingDiscard.path }), _jsxs(Text, { color: "yellow", bold: true, children: ["?", ' '] }), _jsx(Text, { dimColor: true, children: "(y/n)" })] })) : (_jsx(Footer, { activeTab: bottomTab, mouseEnabled: mouseEnabled, autoTabEnabled: autoTabEnabled, wrapMode: wrapMode, showMiddleDots: showMiddleDots })), activeModal === 'theme' && (_jsx(Box, { position: "absolute", marginTop: 0, marginLeft: 0, children: _jsx(ThemePicker, { currentTheme: currentTheme, onSelect: handleThemeSelect, onCancel: () => setActiveModal(null), width: terminalWidth, height: terminalHeight }) })), activeModal === 'hotkeys' && (_jsx(Box, { position: "absolute", marginTop: 0, marginLeft: 0, children: _jsx(HotkeysModal, { onClose: () => setActiveModal(null), width: terminalWidth, height: terminalHeight }) })), showBaseBranchPicker && (_jsx(Box, { position: "absolute", marginTop: 0, marginLeft: 0, children: _jsx(BaseBranchPicker, { candidates: baseBranchCandidates, currentBranch: compareDiff?.baseBranch ?? null, onSelect: selectBaseBranch, onCancel: closeBaseBranchPicker, width: terminalWidth, height: terminalHeight }) }))] }));
+        // Destroy screen (this will clean up terminal)
+        this.screen.destroy();
+    }
+    /**
+     * Start the application (returns when app exits).
+     */
+    start() {
+        return new Promise((resolve) => {
+            this.screen.on('destroy', () => {
+                resolve();
+            });
+        });
+    }
 }