diffstalker 0.1.6 → 0.2.0

package/dist/App.js

@@ -1 +1,1162 @@
-import{jsx as l,jsxs as X}from"react/jsx-runtime";import{useState as f,useCallback as m,useMemo as Ke,useEffect as k,useRef as Y}from"react";import{Box as M,Text as W,useApp as qt,useInput as Jt}from"ink";import{Header as Vt,getHeaderHeight as Zt}from"./components/Header.js";import{getFileAtIndex as Qe,getTotalFileCount as $t}from"./components/FileList.js";import{getCommitIndexFromRow as eo}from"./components/HistoryView.js";import{Footer as to}from"./components/Footer.js";import{TopPane as oo}from"./components/TopPane.js";import{BottomPane as ro}from"./components/BottomPane.js";import{useWatcher as io}from"./hooks/useWatcher.js";import{useGit as lo}from"./hooks/useGit.js";import{useKeymap as so}from"./hooks/useKeymap.js";import{useMouse as no}from"./hooks/useMouse.js";import{useTerminalSize as ao}from"./hooks/useTerminalSize.js";import{useLayout as co,SPLIT_RATIO_STEP as Xe}from"./hooks/useLayout.js";import{useHistoryState as fo}from"./hooks/useHistoryState.js";import{useCompareState as mo}from"./hooks/useCompareState.js";import{useExplorerState as po}from"./hooks/useExplorerState.js";import{getClickedFileIndex as uo,getClickedTab as ho,getFooterLeftClick as go,isButtonAreaClick as xo,isInPane as fe}from"./utils/mouseCoordinates.js";import{saveConfig as Ye}from"./config.js";import{ThemePicker as So}from"./components/ThemePicker.js";import{HotkeysModal as yo}from"./components/HotkeysModal.js";import{BaseBranchPicker as wo}from"./components/BaseBranchPicker.js";import{buildDiffDisplayRows as Co,getDisplayRowsLineNumWidth as To,getWrappedRowCount as bo}from"./utils/displayRows.js";export function App({config:x,initialPath:qe}){const{exit:Je}=qt(),{rows:O,columns:i}=ao(),{state:q,setEnabled:Ve}=io(x.watcherEnabled,x.targetFile,x.debug),P=qe??q.path??process.cwd(),{status:H,diff:N,selectedFile:Ze,isLoading:me,error:de,selectFile:pe,stage:S,unstage:y,discard:$e,stageAll:et,unstageAll:tt,commit:ot,refresh:rt,getHeadCommitMessage:it,compareDiff:R,compareLoading:lt,compareError:st,refreshCompareDiff:nt,getCandidateBaseBranches:at,setCompareBaseBranch:ct,historySelectedCommit:ue,historyCommitDiff:he,selectHistoryCommit:ft,compareSelectionDiff:mt,selectCompareCommit:dt}=lo(P),u=H?.files??[],n=$t(u),ge=u.filter(e=>e.staged).length,[s,c]=f("files"),[t,xe]=f("diff"),[w,j]=f(0),[L,J]=f(null),[Se,pt]=f(!1),[ye,ut]=f(x.theme),[A,C]=f(null),[V,we]=f(!1),[T,Ce]=f(!1),[_,Z]=f(0),[Te,$]=f(0),be=Zt(P,H?.branch??null,q,i,de,me),ht=be-1,{topPaneHeight:v,bottomPaneHeight:gt,paneBoundaries:Ie,splitRatio:ee,adjustSplitRatio:Pe,fileListScrollOffset:te,diffScrollOffset:xt,historyScrollOffset:G,compareScrollOffset:z,setDiffScrollOffset:h,setHistoryScrollOffset:oe,setCompareScrollOffset:St,scrollDiff:D,scrollFileList:Re,scrollHistory:ve,scrollCompare:De}=co(O,i,u,w,N,t,void 0,x.splitRatio,ht),E=Ke(()=>{const e=Co(N);if(!T)return e.length;const d=To(e),p=i-d-5;return bo(e,p,!0)},[N,T,i]),{commits:K,historySelectedIndex:yt,setHistorySelectedIndex:U,historyDiffTotalRows:Ee,navigateHistoryUp:Be,navigateHistoryDown:Fe,historyTotalRows:ke}=fo({repoPath:P,isActive:t==="history",selectHistoryCommit:ft,historyCommitDiff:he,historySelectedCommit:ue,topPaneHeight:v,historyScrollOffset:G,setHistoryScrollOffset:oe,setDiffScrollOffset:h,status:H,wrapMode:T,terminalWidth:i}),{includeUncommitted:wt,compareListSelection:g,baseBranchCandidates:Ct,showBaseBranchPicker:re,compareTotalItems:ie,compareDiffTotalRows:B,setCompareSelectedIndex:Me,toggleIncludeUncommitted:Tt,openBaseBranchPicker:bt,closeBaseBranchPicker:It,selectBaseBranch:Pt,navigateCompareUp:Oe,navigateCompareDown:He,markSelectionInitialized:Le,getItemIndexFromRow:Ae}=mo({repoPath:P,isActive:t==="compare",compareDiff:R,refreshCompareDiff:nt,getCandidateBaseBranches:at,setCompareBaseBranch:ct,selectCompareCommit:dt,topPaneHeight:v,compareScrollOffset:z,setCompareScrollOffset:St,setDiffScrollOffset:h,status:H,wrapMode:T,terminalWidth:i}),{currentPath:Rt,items:le,selectedIndex:vt,setSelectedIndex:Ue,selectedFile:Dt,navigateUp:We,navigateDown:Ne,enterDirectory:Et,goUp:Bt,isLoading:Ft,error:kt,explorerTotalRows:je}=po({repoPath:P,isActive:t==="explorer",topPaneHeight:v,explorerScrollOffset:_,setExplorerScrollOffset:Z,fileScrollOffset:Te,setFileScrollOffset:$}),_e=Y(Ie);_e.current=Ie;const Mt=Y(x.splitRatio);k(()=>{if(ee!==Mt.current){const e=setTimeout(()=>Ye({splitRatio:ee}),500);return()=>clearTimeout(e)}},[ee]);const a=Ke(()=>Qe(u,w),[u,w]);k(()=>{n>0&&w>=n&&j(Math.max(0,n-1))},[n,w]),k(()=>{pe(a)},[a,pe]),k(()=>{(t==="diff"||t==="commit")&&h(0)},[w,t,h]),k(()=>{h(0)},[T,h]);const b=m(e=>{xe(e),c({diff:"files",commit:"commit",history:"history",compare:"compare",explorer:"explorer"}[e])},[]),Ge=Y(()=>{}),Ot=m(e=>{const{x:d,y:p,type:Q,button:ae}=e,{stagingPaneStart:F,fileListEnd:ce,diffPaneStart:Qt,diffPaneEnd:Xt,footerRow:Yt}=_e.current;if(Q==="click"){if(A!==null){C(null);return}if(p===Yt&&ae==="left"){const r=ho(d,i);if(r){b(r);return}const o=go(d);if(o==="hotkeys"){C("hotkeys");return}else if(o==="mouse-mode"){Ge.current();return}else if(o==="auto-tab"){we(I=>!I);return}else if(o==="wrap"){Ce(I=>!I);return}}if(fe(p,F+1,ce)){if(t==="diff"||t==="commit"){const r=uo(p,te,u,F,ce);if(r>=0&&r<n){j(r),c("files");const o=Qe(u,r);o&&(ae==="right"&&!o.staged&&o.status!=="untracked"?J(o):ae==="left"&&xo(d)&&(o.staged?y(o):S(o)));return}}else if(t==="history"){const r=p-F-1,o=eo(r,K,i,G);if(o>=0&&o<K.length){U(o),c("history"),h(0);return}}else if(t==="compare"&&R){const r=p-F-1+z,o=Ae(r);if(o>=0&&o<ie){Le(),Me(o),c("compare");return}}else if(t==="explorer"){const r=p-F-1+_;if(r>=0&&r<le.length){Ue(r),c("explorer");return}}}fe(p,Qt,Xt)&&c(t)}else if(Q==="scroll-up"||Q==="scroll-down"){const r=Q==="scroll-up"?"up":"down";if(fe(p,F,ce)){if(t==="diff"||t==="commit")Re(r);else if(t==="history")ve(r,ke);else if(t==="compare")De(r,ie);else if(t==="explorer"){const o=r==="up"?-3:3;Z(I=>Math.max(0,Math.min(I+o,Math.max(0,je-v+2))))}}else if(t==="explorer"){const o=r==="up"?-3:3;$(I=>Math.max(0,I+o))}else{let o;t==="compare"&&g?.type!=="commit"?o=B:t==="history"?o=Ee:t==="diff"&&(o=E),D(r,3,o)}}},[i,te,u,n,t,K,R,ie,S,y,D,Re,ve,De,G,z,h,U,Me,Le,Ae,g?.type,B,E,Ee,ke,A,le,_,je,v,Ue,Z,$]),Ht=Se||re,{mouseEnabled:Lt,toggleMouse:ze}=no(Ot,Ht);Ge.current=ze;const se=Y(n);k(()=>{if(!V){se.current=n;return}const e=se.current;e===0&&n>0?b("diff"):e>0&&n===0&&(U(0),oe(0),b("history")),se.current=n},[n,V,b,U,oe]);const At=m(()=>{if(s==="files")j(e=>Math.max(0,e-1));else if(s==="diff"){let e;t==="compare"&&g?.type!=="commit"?e=B:t==="diff"&&(e=E),D("up",3,e)}else s==="history"?Be():s==="compare"?Oe():s==="explorer"&&We()},[s,t,g?.type,B,E,D,Be,Oe,We]),Ut=m(()=>{if(s==="files")j(e=>Math.min(n-1,e+1));else if(s==="diff"){let e;t==="compare"&&g?.type!=="commit"?e=B:t==="diff"&&(e=E),D("down",3,e)}else s==="history"?Fe():s==="compare"?He():s==="explorer"&&Ne()},[s,t,g?.type,B,E,n,D,Fe,He,Ne]),Wt=m(()=>{t==="diff"||t==="commit"?c(e=>e==="files"?"diff":"files"):t==="history"?c(e=>e==="history"?"diff":"history"):t==="compare"?c(e=>e==="compare"?"diff":"compare"):t==="explorer"&&c(e=>e==="explorer"?"diff":"explorer")},[t]),Nt=m(async()=>{a&&!a.staged&&await S(a)},[a,S]),jt=m(async()=>{a?.staged&&await y(a)},[a,y]),_t=m(async()=>{a&&(a.staged?await y(a):await S(a))},[a,S,y]),Gt=m(()=>b("commit"),[b]),zt=m(()=>{xe("diff"),c("files")},[]),Kt=m(e=>{ut(e),C(null),Ye({theme:e})},[]);so({onStage:Nt,onUnstage:jt,onStageAll:et,onUnstageAll:tt,onCommit:Gt,onQuit:Je,onRefresh:rt,onNavigateUp:At,onNavigateDown:Ut,onTogglePane:Wt,onSwitchTab:b,onSelect:_t,onToggleIncludeUncommitted:Tt,onCycleBaseBranch:bt,onOpenThemePicker:()=>C("theme"),onShrinkTopPane:()=>Pe(-Xe),onGrowTopPane:()=>Pe(Xe),onOpenHotkeysModal:()=>C("hotkeys"),onToggleMouse:ze,onToggleFollow:()=>Ve(e=>!e),onToggleAutoTab:()=>we(e=>!e),onToggleWrap:()=>Ce(e=>!e),onExplorerEnter:t==="explorer"?Et:void 0,onExplorerBack:t==="explorer"?Bt:void 0},s,Se||A!==null||re),Jt((e,d)=>{L&&(e==="y"||e==="Y"?($e(L),J(null)):(e==="n"||e==="N"||d.escape)&&J(null))},{isActive:!!L});const ne=()=>l(W,{dimColor:!0,children:"\u2500".repeat(i)});return X(M,{flexDirection:"column",height:O,width:i,overflowX:"hidden",children:[l(M,{height:be,width:i,children:l(Vt,{repoPath:P,branch:H?.branch??null,isLoading:me,error:de,debug:x.debug,watcherState:q,width:i})}),l(ne,{}),l(oo,{bottomTab:t,currentPane:s,terminalWidth:i,topPaneHeight:v,files:u,selectedIndex:w,fileListScrollOffset:te,stagedCount:ge,onStage:S,onUnstage:y,commits:K,historySelectedIndex:yt,historyScrollOffset:G,onSelectHistoryCommit:(e,d)=>U(d),compareDiff:R,compareListSelection:g,compareScrollOffset:z,includeUncommitted:wt,explorerCurrentPath:Rt,explorerItems:le,explorerSelectedIndex:vt,explorerScrollOffset:_,explorerIsLoading:Ft,explorerError:kt}),l(ne,{}),l(ro,{bottomTab:t,currentPane:s,terminalWidth:i,bottomPaneHeight:gt,diffScrollOffset:xt,currentTheme:ye,diff:N,selectedFile:Ze,stagedCount:ge,onCommit:ot,onCommitCancel:zt,getHeadCommitMessage:it,onCommitInputFocusChange:pt,historySelectedCommit:ue,historyCommitDiff:he,compareDiff:R,compareLoading:lt,compareError:st,compareListSelection:g,compareSelectionDiff:mt,wrapMode:T,explorerSelectedFile:Dt,explorerFileScrollOffset:Te}),l(ne,{}),L?X(M,{children:[X(W,{color:"yellow",bold:!0,children:["Discard changes to"," "]}),l(W,{color:"cyan",children:L.path}),X(W,{color:"yellow",bold:!0,children:["?"," "]}),l(W,{dimColor:!0,children:"(y/n)"})]}):l(to,{activeTab:t,mouseEnabled:Lt,autoTabEnabled:V,wrapMode:T}),A==="theme"&&l(M,{position:"absolute",marginTop:0,marginLeft:0,children:l(So,{currentTheme:ye,onSelect:Kt,onCancel:()=>C(null),width:i,height:O})}),A==="hotkeys"&&l(M,{position:"absolute",marginTop:0,marginLeft:0,children:l(yo,{onClose:()=>C(null),width:i,height:O})}),re&&l(M,{position:"absolute",marginTop:0,marginLeft:0,children:l(wo,{candidates:Ct,currentBranch:R?.baseBranch??null,onSelect:Pt,onCancel:It,width:i,height:O})})]})}
+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';
+/**
+ * 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();
+            }
+            else {
+                this.toggleSelected();
+            }
+        });
+        // Explorer: go up directory (skip if modal is open)
+        this.screen.key(['backspace'], () => {
+            if (this.activeModal)
+                return;
+            const state = this.uiState.state;
+            if (state.bottomTab === 'explorer' && state.currentPane === 'explorer') {
+                this.goExplorerUp();
+            }
+        });
+        // Commit (skip if modal is open)
+        this.screen.key(['c'], () => {
+            if (this.activeModal)
+                return;
+            this.uiState.setTab('commit');
+        });
+        // Commit panel specific keys (only when on commit tab)
+        this.screen.key(['i'], () => {
+            if (this.uiState.state.bottomTab === 'commit' && !this.commitFlowState.state.inputFocused) {
+                this.focusCommitInput();
+            }
+        });
+        this.screen.key(['a'], () => {
+            if (this.uiState.state.bottomTab === 'commit' && !this.commitFlowState.state.inputFocused) {
+                this.commitFlowState.toggleAmend();
+                this.render();
+            }
+        });
+        this.screen.key(['escape'], () => {
+            if (this.uiState.state.bottomTab === 'commit') {
+                if (this.commitFlowState.state.inputFocused) {
+                    this.unfocusCommitInput();
+                }
+                else {
+                    this.uiState.setTab('diff');
+                }
+            }
+        });
+        // Refresh
+        this.screen.key(['r'], () => this.refresh());
+        // Display toggles
+        this.screen.key(['w'], () => this.uiState.toggleWrapMode());
+        this.screen.key(['m'], () => this.toggleMouseMode());
+        this.screen.key(['S-t'], () => this.uiState.toggleAutoTab());
+        // Split ratio adjustments
+        this.screen.key(['-', '_'], () => {
+            this.uiState.adjustSplitRatio(-SPLIT_RATIO_STEP);
+            this.layout.setSplitRatio(this.uiState.state.splitRatio);
+            this.render();
+        });
+        this.screen.key(['=', '+'], () => {
+            this.uiState.adjustSplitRatio(SPLIT_RATIO_STEP);
+            this.layout.setSplitRatio(this.uiState.state.splitRatio);
+            this.render();
+        });
+        // Theme picker
+        this.screen.key(['t'], () => this.uiState.openModal('theme'));
+        // Hotkeys modal
+        this.screen.key(['?'], () => this.uiState.toggleModal('hotkeys'));
+        // Follow toggle
+        this.screen.key(['f'], () => this.toggleFollow());
+        // Compare view: base branch picker
+        this.screen.key(['b'], () => {
+            if (this.uiState.state.bottomTab === 'compare') {
+                this.uiState.openModal('baseBranch');
+            }
+        });
+        // Compare view: toggle uncommitted
+        this.screen.key(['u'], () => {
+            if (this.uiState.state.bottomTab === 'compare') {
+                this.uiState.toggleIncludeUncommitted();
+                const includeUncommitted = this.uiState.state.includeUncommitted;
+                this.gitManager?.refreshCompareDiff(includeUncommitted);
+            }
+        });
+        // Discard changes (with confirmation)
+        this.screen.key(['d'], () => {
+            if (this.uiState.state.bottomTab === 'diff') {
+                const files = this.gitManager?.state.status?.files ?? [];
+                const selectedIndex = this.uiState.state.selectedIndex;
+                const selectedFile = files[selectedIndex];
+                // Only allow discard for unstaged modified files
+                if (selectedFile && !selectedFile.staged && selectedFile.status !== 'untracked') {
+                    this.showDiscardConfirm(selectedFile);
+                }
+            }
+        });
+    }
+    setupMouseHandlers() {
+        const SCROLL_AMOUNT = 3;
+        // Mouse wheel on top pane
+        this.layout.topPane.on('wheeldown', () => {
+            this.handleTopPaneScroll(SCROLL_AMOUNT);
+        });
+        this.layout.topPane.on('wheelup', () => {
+            this.handleTopPaneScroll(-SCROLL_AMOUNT);
+        });
+        // Mouse wheel on bottom pane
+        this.layout.bottomPane.on('wheeldown', () => {
+            this.handleBottomPaneScroll(SCROLL_AMOUNT);
+        });
+        this.layout.bottomPane.on('wheelup', () => {
+            this.handleBottomPaneScroll(-SCROLL_AMOUNT);
+        });
+        // Click on top pane to select item
+        this.layout.topPane.on('click', (mouse) => {
+            // Convert screen Y to pane-relative row (blessed click coords are screen-relative)
+            const clickedRow = this.layout.screenYToTopPaneRow(mouse.y);
+            if (clickedRow >= 0) {
+                this.handleTopPaneClick(clickedRow);
+            }
+        });
+        // Click on footer for tabs and toggles
+        this.layout.footerBox.on('click', (mouse) => {
+            this.handleFooterClick(mouse.x);
+        });
+    }
+    handleTopPaneClick(row) {
+        const state = this.uiState.state;
+        if (state.bottomTab === 'history') {
+            const index = state.historyScrollOffset + row;
+            this.uiState.setHistorySelectedIndex(index);
+            this.selectHistoryCommitByIndex(index);
+        }
+        else if (state.bottomTab === 'compare') {
+            // For compare view, need to map row to selection
+            const compareState = this.gitManager?.compareState;
+            const commits = compareState?.compareDiff?.commits ?? [];
+            const files = compareState?.compareDiff?.files ?? [];
+            const selection = getCompareSelectionFromRow(state.compareScrollOffset + row, commits, files);
+            if (selection) {
+                this.selectCompareItem(selection);
+            }
+        }
+        else if (state.bottomTab === 'explorer') {
+            const index = state.explorerScrollOffset + row;
+            this.explorerManager?.selectIndex(index);
+            this.uiState.setExplorerSelectedIndex(index);
+        }
+        else {
+            // Diff tab - select file
+            const files = this.gitManager?.state.status?.files ?? [];
+            // Account for section headers in file list
+            const fileIndex = getFileIndexFromRow(row + state.fileListScrollOffset, files);
+            if (fileIndex !== null && fileIndex >= 0) {
+                this.uiState.setSelectedIndex(fileIndex);
+                this.selectFileByIndex(fileIndex);
+            }
+        }
+    }
+    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('');
+                }
+            }
+        });
+        // 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 });
+                }
+            }, 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 {
+                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 {
+                    this.commitTextarea.hide();
+                }
+            }
+        }
+        else if (state.bottomTab === 'history') {
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const selectedCommit = historyState?.selectedCommit ?? null;
+            const commitDiff = historyState?.commitDiff ?? null;
+            const { content, totalRows } = formatHistoryDiff(selectedCommit, commitDiff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
+            this.bottomPaneTotalRows = totalRows;
+            this.layout.bottomPane.setContent(content);
+        }
+        else if (state.bottomTab === 'compare') {
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const compareSelectionState = this.gitManager?.compareSelectionState;
+            const compareDiff = compareSelectionState?.diff ?? null;
+            if (compareDiff) {
+                const { content, totalRows } = formatDiff(compareDiff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
+                this.bottomPaneTotalRows = totalRows;
+                this.layout.bottomPane.setContent(content);
+            }
+            else {
+                this.bottomPaneTotalRows = 0;
+                this.layout.bottomPane.setContent('{gray-fg}Select a commit or file to view diff{/gray-fg}');
+            }
+        }
+        else if (state.bottomTab === 'explorer') {
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const explorerState = this.explorerManager?.state;
+            const selectedFile = explorerState?.selectedFile ?? null;
+            const content = formatExplorerContent(selectedFile?.path ?? null, selectedFile?.content ?? null, width, state.explorerFileScrollOffset, this.layout.dimensions.bottomPaneHeight, selectedFile?.truncated ?? false, state.wrapMode, state.showMiddleDots);
+            // TODO: formatExplorerContent should also return totalRows
+            this.layout.bottomPane.setContent(content);
+        }
+        else {
+            // Hide commit textarea when not on commit tab
+            if (this.commitTextarea) {
+                this.commitTextarea.hide();
+            }
+            const { content, totalRows } = formatDiff(diff, width, state.diffScrollOffset, this.layout.dimensions.bottomPaneHeight, this.currentTheme, state.wrapMode);
+            this.bottomPaneTotalRows = totalRows;
+            this.layout.bottomPane.setContent(content);
+        }
+    }
+    updateFooter() {
+        const state = this.uiState.state;
+        const width = this.screen.width || 80;
+        const content = formatFooter(state.bottomTab, state.mouseEnabled, state.autoTabEnabled, state.wrapMode, state.showMiddleDots, width);
+        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();
+        }
+        if (this.commandServer) {
+            this.commandServer.stop();
+        }
+        // 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();
+            });
+        });
+    }
+}