diffstalker 0.1.7 → 0.2.0

package/dist/App.js

@@ -1,541 +1,1162 @@
-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, SPLIT_RATIO_STEP } from './ui/Layout.js';
+import { formatHeader } from './ui/widgets/Header.js';
+import { formatFooter } from './ui/widgets/Footer.js';
+import { formatFileList, getFileAtIndex, getFileListTotalRows, getFileIndexFromRow, getRowFromFileIndex, } from './ui/widgets/FileList.js';
+import { formatDiff, formatHistoryDiff } from './ui/widgets/DiffView.js';
+import { formatCommitPanel } from './ui/widgets/CommitPanel.js';
+import { formatHistoryView, getCommitAtIndex, } from './ui/widgets/HistoryView.js';
+import { formatCompareListView, getCompareListTotalRows, getNextCompareSelection, getRowFromCompareSelection, getCompareSelectionFromRow, } from './ui/widgets/CompareListView.js';
+import { formatExplorerView, getExplorerTotalRows, } from './ui/widgets/ExplorerView.js';
+import { formatExplorerContent, getExplorerContentTotalRows, } from './ui/widgets/ExplorerContent.js';
+import { 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 { CommitFlowState } from './state/CommitFlowState.js';
+import { UIState } from './state/UIState.js';
+import { getManagerForRepo, removeManagerForRepo, } from './core/GitStateManager.js';
+import { FilePathWatcher } from './core/FilePathWatcher.js';
 import { saveConfig } from './config.js';
-import { 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);
+/**
+ * Main application controller.
+ * Coordinates between GitStateManager, UIState, and blessed widgets.
+ */
+export class App {
+    screen;
+    layout;
+    uiState;
+    gitManager = null;
+    fileWatcher = null;
+    explorerManager = null;
+    config;
+    commandServer;
+    // Current state
+    repoPath;
+    watcherState = { enabled: false };
+    currentTheme;
+    // Commit flow state
+    commitFlowState;
+    commitTextarea = null;
+    // Active modals
+    activeModal = null;
+    // Cached total rows for scroll bounds (single source of truth from render)
+    bottomPaneTotalRows = 0;
+    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.setupMouseHandlers();
+        // Setup state change listeners
+        this.setupStateListeners();
+        // Setup file watcher if enabled
+        if (this.config.watcherEnabled) {
+            this.setupFileWatcher();
+        }
+        // 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() {
+        // Quit
+        this.screen.key(['q', 'C-c'], () => {
+            this.exit();
+        });
+        // Navigation (skip if modal is open - modal handles its own keys)
+        this.screen.key(['j', 'down'], () => {
+            if (this.activeModal)
+                return;
+            this.navigateDown();
+        });
+        this.screen.key(['k', 'up'], () => {
+            if (this.activeModal)
+                return;
+            this.navigateUp();
+        });
+        // Tab switching (skip if modal is open)
+        this.screen.key(['1'], () => {
+            if (this.activeModal)
+                return;
+            this.uiState.setTab('diff');
+        });
+        this.screen.key(['2'], () => {
+            if (this.activeModal)
+                return;
+            this.uiState.setTab('commit');
+        });
+        this.screen.key(['3'], () => {
+            if (this.activeModal)
+                return;
+            this.uiState.setTab('history');
+        });
+        this.screen.key(['4'], () => {
+            if (this.activeModal)
+                return;
+            this.uiState.setTab('compare');
+        });
+        this.screen.key(['5'], () => {
+            if (this.activeModal)
                 return;
+            this.uiState.setTab('explorer');
+        });
+        // Pane toggle (skip if modal is open)
+        this.screen.key(['tab'], () => {
+            if (this.activeModal)
+                return;
+            this.uiState.togglePane();
+        });
+        // Staging operations (skip if modal is open)
+        this.screen.key(['s'], () => {
+            if (this.activeModal)
+                return;
+            this.stageSelected();
+        });
+        this.screen.key(['S-u'], () => {
+            if (this.activeModal)
+                return;
+            this.unstageSelected();
+        });
+        this.screen.key(['S-a'], () => {
+            if (this.activeModal)
+                return;
+            this.stageAll();
+        });
+        this.screen.key(['S-z'], () => {
+            if (this.activeModal)
+                return;
+            this.unstageAll();
+        });
+        // Select/toggle (skip if modal is open)
+        this.screen.key(['enter', 'space'], () => {
+            if (this.activeModal)
+                return;
+            const state = this.uiState.state;
+            if (state.bottomTab === 'explorer' && state.currentPane === 'explorer') {
+                this.enterExplorerDirectory();
             }
-            // 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;
-                }
+            else {
+                this.toggleSelected();
             }
-            // 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 (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;
-                    }
+        });
+        // Explorer: go up directory (skip if modal is open)
+        this.screen.key(['backspace'], () => {
+            if (this.activeModal)
+                return;
+            const state = this.uiState.state;
+            if (state.bottomTab === 'explorer' && state.currentPane === 'explorer') {
+                this.goExplorerUp();
+            }
+        });
+        // Commit (skip if modal is open)
+        this.screen.key(['c'], () => {
+            if (this.activeModal)
+                return;
+            this.uiState.setTab('commit');
+        });
+        // Commit panel specific keys (only when on commit tab)
+        this.screen.key(['i'], () => {
+            if (this.uiState.state.bottomTab === 'commit' && !this.commitFlowState.state.inputFocused) {
+                this.focusCommitInput();
+            }
+        });
+        this.screen.key(['a'], () => {
+            if (this.uiState.state.bottomTab === 'commit' && !this.commitFlowState.state.inputFocused) {
+                this.commitFlowState.toggleAmend();
+                this.render();
+            }
+        });
+        this.screen.key(['escape'], () => {
+            if (this.uiState.state.bottomTab === 'commit') {
+                if (this.commitFlowState.state.inputFocused) {
+                    this.unfocusCommitInput();
                 }
-                else 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;
-                    }
+                else {
+                    this.uiState.setTab('diff');
                 }
-                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;
-                    }
+            }
+        });
+        // Refresh
+        this.screen.key(['r'], () => this.refresh());
+        // Display toggles
+        this.screen.key(['w'], () => this.uiState.toggleWrapMode());
+        this.screen.key(['m'], () => this.toggleMouseMode());
+        this.screen.key(['S-t'], () => this.uiState.toggleAutoTab());
+        // Split ratio adjustments
+        this.screen.key(['-', '_'], () => {
+            this.uiState.adjustSplitRatio(-SPLIT_RATIO_STEP);
+            this.layout.setSplitRatio(this.uiState.state.splitRatio);
+            this.render();
+        });
+        this.screen.key(['=', '+'], () => {
+            this.uiState.adjustSplitRatio(SPLIT_RATIO_STEP);
+            this.layout.setSplitRatio(this.uiState.state.splitRatio);
+            this.render();
+        });
+        // Theme picker
+        this.screen.key(['t'], () => this.uiState.openModal('theme'));
+        // Hotkeys modal
+        this.screen.key(['?'], () => this.uiState.toggleModal('hotkeys'));
+        // Follow toggle
+        this.screen.key(['f'], () => this.toggleFollow());
+        // Compare view: base branch picker
+        this.screen.key(['b'], () => {
+            if (this.uiState.state.bottomTab === 'compare') {
+                this.uiState.openModal('baseBranch');
+            }
+        });
+        // Compare view: toggle uncommitted
+        this.screen.key(['u'], () => {
+            if (this.uiState.state.bottomTab === 'compare') {
+                this.uiState.toggleIncludeUncommitted();
+                const includeUncommitted = this.uiState.state.includeUncommitted;
+                this.gitManager?.refreshCompareDiff(includeUncommitted);
+            }
+        });
+        // Discard changes (with confirmation)
+        this.screen.key(['d'], () => {
+            if (this.uiState.state.bottomTab === 'diff') {
+                const files = this.gitManager?.state.status?.files ?? [];
+                const selectedIndex = this.uiState.state.selectedIndex;
+                const selectedFile = files[selectedIndex];
+                // Only allow discard for unstaged modified files
+                if (selectedFile && !selectedFile.staged && selectedFile.status !== 'untracked') {
+                    this.showDiscardConfirm(selectedFile);
                 }
             }
-            // Bottom pane clicks
-            if (isInPane(y, diffPaneStart, diffPaneEnd)) {
-                setCurrentPane(bottomTab);
+        });
+    }
+    setupMouseHandlers() {
+        const SCROLL_AMOUNT = 3;
+        // Mouse wheel on top pane
+        this.layout.topPane.on('wheeldown', () => {
+            this.handleTopPaneScroll(SCROLL_AMOUNT);
+        });
+        this.layout.topPane.on('wheelup', () => {
+            this.handleTopPaneScroll(-SCROLL_AMOUNT);
+        });
+        // Mouse wheel on bottom pane
+        this.layout.bottomPane.on('wheeldown', () => {
+            this.handleBottomPaneScroll(SCROLL_AMOUNT);
+        });
+        this.layout.bottomPane.on('wheelup', () => {
+            this.handleBottomPaneScroll(-SCROLL_AMOUNT);
+        });
+        // Click on top pane to select item
+        this.layout.topPane.on('click', (mouse) => {
+            // Convert screen Y to pane-relative row (blessed click coords are screen-relative)
+            const clickedRow = this.layout.screenYToTopPaneRow(mouse.y);
+            if (clickedRow >= 0) {
+                this.handleTopPaneClick(clickedRow);
             }
+        });
+        // Click on footer for tabs and toggles
+        this.layout.footerBox.on('click', (mouse) => {
+            this.handleFooterClick(mouse.x);
+        });
+    }
+    handleTopPaneClick(row) {
+        const state = this.uiState.state;
+        if (state.bottomTab === 'history') {
+            const index = state.historyScrollOffset + row;
+            this.uiState.setHistorySelectedIndex(index);
+            this.selectHistoryCommitByIndex(index);
         }
-        else if (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 (state.bottomTab === 'compare') {
+            // For compare view, need to map row to selection
+            const compareState = this.gitManager?.compareState;
+            const commits = compareState?.compareDiff?.commits ?? [];
+            const files = compareState?.compareDiff?.files ?? [];
+            const selection = getCompareSelectionFromRow(state.compareScrollOffset + row, commits, files);
+            if (selection) {
+                this.selectCompareItem(selection);
+            }
+        }
+        else if (state.bottomTab === 'explorer') {
+            const index = state.explorerScrollOffset + row;
+            this.explorerManager?.selectIndex(index);
+            this.uiState.setExplorerSelectedIndex(index);
+        }
+        else {
+            // Diff tab - select file
+            const files = this.gitManager?.state.status?.files ?? [];
+            // Account for section headers in file list
+            const fileIndex = getFileIndexFromRow(row + state.fileListScrollOffset, files);
+            if (fileIndex !== null && fileIndex >= 0) {
+                this.uiState.setSelectedIndex(fileIndex);
+                this.selectFileByIndex(fileIndex);
+            }
+        }
+    }
+    handleFooterClick(x) {
+        const width = this.screen.width || 80;
+        // Footer layout: left side has toggles, right side has tabs
+        // Tabs are right-aligned, so we calculate from the right
+        // Tab format: [1]Diff [2]Commit [3]History [4]Compare [5]Explorer
+        // Approximate positions from right edge
+        const tabPositions = [
+            { tab: 'explorer', label: '[5]Explorer', width: 11 },
+            { tab: 'compare', label: '[4]Compare', width: 10 },
+            { tab: 'history', label: '[3]History', width: 10 },
+            { tab: 'commit', label: '[2]Commit', width: 9 },
+            { tab: 'diff', label: '[1]Diff', width: 7 },
+        ];
+        let rightEdge = width;
+        for (const { tab, width: tabWidth } of tabPositions) {
+            const leftEdge = rightEdge - tabWidth - 1; // -1 for space
+            if (x >= leftEdge && x < rightEdge) {
+                this.uiState.setTab(tab);
+                return;
+            }
+            rightEdge = leftEdge;
+        }
+        // Left side toggles (approximate positions)
+        // Format: ? [scroll] [auto] [wrap] [dots]
+        if (x >= 2 && x <= 9) {
+            // [scroll] or m:[select]
+            this.toggleMouseMode();
+        }
+        else if (x >= 11 && x <= 16) {
+            // [auto]
+            this.uiState.toggleAutoTab();
+        }
+        else if (x >= 18 && x <= 23) {
+            // [wrap]
+            this.uiState.toggleWrapMode();
+        }
+        else if (x >= 25 && x <= 30 && this.uiState.state.bottomTab === 'explorer') {
+            // [dots] - only visible in explorer
+            this.uiState.toggleMiddleDots();
+        }
+        else if (x === 0) {
+            // ? - open hotkeys
+            this.uiState.openModal('hotkeys');
+        }
+    }
+    handleTopPaneScroll(delta) {
+        const state = this.uiState.state;
+        const visibleHeight = this.layout.dimensions.topPaneHeight;
+        if (state.bottomTab === 'history') {
+            const totalRows = this.gitManager?.historyState.commits.length ?? 0;
+            const maxOffset = Math.max(0, totalRows - visibleHeight);
+            const newOffset = Math.min(maxOffset, Math.max(0, state.historyScrollOffset + delta));
+            this.uiState.setHistoryScrollOffset(newOffset);
+        }
+        else if (state.bottomTab === 'compare') {
+            const compareState = this.gitManager?.compareState;
+            const totalRows = getCompareListTotalRows(compareState?.compareDiff?.commits ?? [], compareState?.compareDiff?.files ?? []);
+            const maxOffset = Math.max(0, totalRows - visibleHeight);
+            const newOffset = Math.min(maxOffset, Math.max(0, state.compareScrollOffset + delta));
+            this.uiState.setCompareScrollOffset(newOffset);
+        }
+        else if (state.bottomTab === 'explorer') {
+            const totalRows = getExplorerTotalRows(this.explorerManager?.state.items ?? []);
+            const maxOffset = Math.max(0, totalRows - visibleHeight);
+            const newOffset = Math.min(maxOffset, Math.max(0, state.explorerScrollOffset + delta));
+            this.uiState.setExplorerScrollOffset(newOffset);
+        }
+        else {
+            const files = this.gitManager?.state.status?.files ?? [];
+            const totalRows = getFileListTotalRows(files);
+            const maxOffset = Math.max(0, totalRows - visibleHeight);
+            const newOffset = Math.min(maxOffset, Math.max(0, state.fileListScrollOffset + delta));
+            this.uiState.setFileListScrollOffset(newOffset);
+        }
+    }
+    handleBottomPaneScroll(delta) {
+        const state = this.uiState.state;
+        const visibleHeight = this.layout.dimensions.bottomPaneHeight;
+        const width = this.screen.width || 80;
+        if (state.bottomTab === 'explorer') {
+            const selectedFile = this.explorerManager?.state.selectedFile;
+            const totalRows = getExplorerContentTotalRows(selectedFile?.content ?? null, selectedFile?.path ?? null, selectedFile?.truncated ?? false, width, state.wrapMode);
+            const maxOffset = Math.max(0, totalRows - visibleHeight);
+            const newOffset = Math.min(maxOffset, Math.max(0, state.explorerFileScrollOffset + delta));
+            this.uiState.setExplorerFileScrollOffset(newOffset);
+        }
+        else {
+            // Use cached totalRows from last render (single source of truth)
+            const maxOffset = Math.max(0, this.bottomPaneTotalRows - visibleHeight);
+            const newOffset = Math.min(maxOffset, Math.max(0, state.diffScrollOffset + delta));
+            this.uiState.setDiffScrollOffset(newOffset);
+        }
+    }
+    setupStateListeners() {
+        // Update footer when UI state changes
+        this.uiState.on('change', () => {
+            this.render();
+        });
+        // Load data when switching tabs
+        this.uiState.on('tab-change', (tab) => {
+            if (tab === 'history') {
+                this.gitManager?.loadHistory();
+            }
+            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.items.length) {
+                    this.explorerManager?.loadDirectory('');
                 }
-                else if (bottomTab === 'compare') {
-                    scrollCompare(direction, compareTotalItems);
+            }
+        });
+        // 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 === '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)));
+            }, 500);
+        });
+    }
+    setupFileWatcher() {
+        this.fileWatcher = new FilePathWatcher(this.config.targetFile);
+        this.fileWatcher.on('path-change', (state) => {
+            if (state.path && state.path !== this.repoPath) {
+                this.repoPath = state.path;
+                this.watcherState = {
+                    enabled: true,
+                    sourceFile: state.sourceFile ?? this.config.targetFile,
+                    rawContent: state.rawContent ?? undefined,
+                    lastUpdate: state.lastUpdate ?? undefined,
+                };
+                this.initGitManager();
+                this.render();
+            }
+            // Navigate to the followed file if it's within the repo
+            if (state.rawContent) {
+                this.navigateToFile(state.rawContent);
+                this.render();
+            }
+        });
+        this.watcherState = {
+            enabled: true,
+            sourceFile: this.config.targetFile,
+        };
+        this.fileWatcher.start();
+        // Navigate to the initially followed file
+        const initialState = this.fileWatcher.state;
+        if (initialState.rawContent) {
+            this.watcherState.rawContent = initialState.rawContent;
+            this.navigateToFile(initialState.rawContent);
+        }
+    }
+    initGitManager() {
+        // Clean up existing manager
+        if (this.gitManager) {
+            this.gitManager.removeAllListeners();
+            removeManagerForRepo(this.repoPath);
+        }
+        // Get or create manager for this repo
+        this.gitManager = getManagerForRepo(this.repoPath);
+        // Listen to state changes
+        this.gitManager.on('state-change', () => {
+            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);
                 }
             }
+            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,
+        };
+        this.explorerManager = new ExplorerStateManager(this.repoPath, options);
+        // Listen to state changes
+        this.explorerManager.on('state-change', () => {
+            this.render();
+        });
+        // Load root directory
+        this.explorerManager.loadDirectory('');
+    }
+    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;
+        }
+        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;
+        }
+        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;
+        }
+        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 (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 {
+            this.gitManager?.selectCompareFile(selection.index);
+        }
+    }
+    // Explorer navigation
+    navigateExplorerUp() {
+        const state = this.uiState.state;
+        const items = this.explorerManager?.state.items ?? [];
+        if (items.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 items = this.explorerManager?.state.items ?? [];
+        if (items.length === 0)
+            return;
+        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();
+        this.uiState.setExplorerScrollOffset(0);
+        this.uiState.setExplorerFileScrollOffset(0);
+        this.uiState.setExplorerSelectedIndex(0);
+    }
+    async goExplorerUp() {
+        await this.explorerManager?.goUp();
+        this.uiState.setExplorerScrollOffset(0);
+        this.uiState.setExplorerFileScrollOffset(0);
+        this.uiState.setExplorerSelectedIndex(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 selectedFile = files[this.uiState.state.selectedIndex];
+        if (selectedFile && !selectedFile.staged) {
+            await this.gitManager?.stage(selectedFile);
+        }
+    }
+    async unstageSelected() {
+        const files = this.gitManager?.state.status?.files ?? [];
+        const selectedFile = files[this.uiState.state.selectedIndex];
+        if (selectedFile?.staged) {
+            await this.gitManager?.unstage(selectedFile);
+        }
+    }
+    async toggleSelected() {
+        const files = this.gitManager?.state.status?.files ?? [];
+        const selectedFile = files[this.uiState.state.selectedIndex];
+        if (selectedFile) {
+            if (selectedFile.staged) {
+                await this.gitManager?.unstage(selectedFile);
+            }
             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)));
+                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 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.fileWatcher) {
+            this.fileWatcher.stop();
+            this.fileWatcher = null;
+            this.watcherState = { enabled: false };
+        }
+        else {
+            this.setupFileWatcher();
+        }
+        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, this.watcherState, width);
+        this.layout.headerBox.setContent(content);
+    }
+    updateTopPane() {
+        const gitState = this.gitManager?.state;
+        const historyState = this.gitManager?.historyState;
+        const compareState = this.gitManager?.compareState;
+        const files = gitState?.status?.files ?? [];
+        const state = this.uiState.state;
+        const width = this.screen.width || 80;
+        let content;
+        if (state.bottomTab === 'history') {
+            const commits = historyState?.commits ?? [];
+            content = formatHistoryView(commits, state.historySelectedIndex, state.currentPane === 'history', width, state.historyScrollOffset, this.layout.dimensions.topPaneHeight);
+        }
+        else if (state.bottomTab === 'compare') {
+            const compareDiff = compareState?.compareDiff;
+            const commits = compareDiff?.commits ?? [];
+            const compareFiles = compareDiff?.files ?? [];
+            content = formatCompareListView(commits, compareFiles, this.compareSelection, state.currentPane === 'compare', width, state.compareScrollOffset, this.layout.dimensions.topPaneHeight);
+        }
+        else if (state.bottomTab === 'explorer') {
+            const explorerState = this.explorerManager?.state;
+            const items = explorerState?.items ?? [];
+            content = formatExplorerView(items, state.explorerSelectedIndex, state.currentPane === 'explorer', width, state.explorerScrollOffset, this.layout.dimensions.topPaneHeight, explorerState?.isLoading ?? false, explorerState?.error ?? null);
+        }
+        else {
+            content = formatFileList(files, state.selectedIndex, state.currentPane === 'files', width, state.fileListScrollOffset, this.layout.dimensions.topPaneHeight);
+        }
+        this.layout.topPane.setContent(content);
+    }
+    updateBottomPane() {
+        const gitState = this.gitManager?.state;
+        const historyState = this.gitManager?.historyState;
+        const diff = gitState?.diff ?? null;
+        const state = this.uiState.state;
+        const width = this.screen.width || 80;
+        const files = gitState?.status?.files ?? [];
+        const stagedCount = files.filter((f) => f.staged).length;
+        // Update staged count for commit validation
+        this.commitFlowState.setStagedCount(stagedCount);
+        // Show appropriate content based on tab
+        if (state.bottomTab === 'commit') {
+            const commitContent = formatCommitPanel(this.commitFlowState.state, stagedCount, width);
+            this.layout.bottomPane.setContent(commitContent);
+            // Show/hide textarea based on focus
+            if (this.commitTextarea) {
+                if (this.commitFlowState.state.inputFocused) {
+                    this.commitTextarea.show();
                 }
                 else {
-                    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);
+                    this.commitTextarea.hide();
                 }
             }
         }
-    }, [
-        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;
-            return;
+        else if (state.bottomTab === 'history') {
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const selectedCommit = historyState?.selectedCommit ?? null;
+            const commitDiff = historyState?.commitDiff ?? null;
+            const { content, totalRows } = formatHistoryDiff(selectedCommit, commitDiff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
+            this.bottomPaneTotalRows = totalRows;
+            this.layout.bottomPane.setContent(content);
         }
-        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)
-            return;
-        if (currentFile.staged) {
-            await unstage(currentFile);
+        else if (state.bottomTab === 'compare') {
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const compareSelectionState = this.gitManager?.compareSelectionState;
+            const compareDiff = compareSelectionState?.diff ?? null;
+            if (compareDiff) {
+                const { content, totalRows } = formatDiff(compareDiff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
+                this.bottomPaneTotalRows = totalRows;
+                this.layout.bottomPane.setContent(content);
+            }
+            else {
+                this.bottomPaneTotalRows = 0;
+                this.layout.bottomPane.setContent('{gray-fg}Select a commit or file to view diff{/gray-fg}');
+            }
+        }
+        else if (state.bottomTab === 'explorer') {
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const explorerState = this.explorerManager?.state;
+            const selectedFile = explorerState?.selectedFile ?? null;
+            const content = formatExplorerContent(selectedFile?.path ?? null, selectedFile?.content ?? null, width, state.explorerFileScrollOffset, this.layout.dimensions.bottomPaneHeight, selectedFile?.truncated ?? false, state.wrapMode, state.showMiddleDots);
+            // TODO: formatExplorerContent should also return totalRows
+            this.layout.bottomPane.setContent(content);
         }
         else {
-            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)
-            return;
-        if (input === 'y' || input === 'Y') {
-            discard(pendingDiscard);
-            setPendingDiscard(null);
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const { content, totalRows } = formatDiff(diff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
+            this.bottomPaneTotalRows = totalRows;
+            this.layout.bottomPane.setContent(content);
+        }
+    }
+    updateFooter() {
+        const state = this.uiState.state;
+        const width = this.screen.width || 80;
+        const content = formatFooter(state.bottomTab, state.mouseEnabled, state.autoTabEnabled, state.wrapMode, state.showMiddleDots, width);
+        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.fileWatcher) {
+            this.fileWatcher.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();
+            });
+        });
+    }
 }