claude-code-plus-plus 0.3.0 → 0.4.0

package/dist/sidebar/app.js

@@ -47,6 +47,8 @@ const git_1 = require("../git");
 const input_1 = require("./input");
 const render_1 = require("./render");
 const constants_1 = require("../constants");
+const diff_1 = require("../diff");
+const diff_2 = require("../diff");
 const pane_orchestrator_1 = require("./pane-orchestrator");
 const sessionManager = __importStar(require("./session-manager"));
 const terminalManager = __importStar(require("./terminal-manager"));
@@ -71,6 +73,8 @@ class SidebarApp {
     state;
     worktreeManager;
     running = false;
+    fileWatcherCleanup = null;
+    diffPaneOpening = false; // Guard against double openDiffPane calls
     constructor(repoPath, sessionName, mainPaneId, sidebarPaneId) {
         this.worktreeManager = new git_1.WorktreeManager(repoPath);
         this.state = {
@@ -93,6 +97,10 @@ class SidebarApp {
             collapsed: false,
             terminalCommandMode: false,
             terminalCommandBuffer: '',
+            diffCommandMode: false,
+            diffCommandBuffer: '',
+            fileDiffMode: false,
+            fileDiffFilename: null,
         };
     }
     // ==========================================================================
@@ -174,6 +182,8 @@ class SidebarApp {
             output = (0, render_1.renderErrorModal)(this.state, dims);
         }
         else {
+            // Normal view - sidebar renders normally even in file diff mode
+            // (file diff content is shown in a separate pane)
             output = (0, render_1.renderMain)(this.state);
         }
         process.stdout.write(output);
@@ -188,11 +198,20 @@ class SidebarApp {
     handleInput(data) {
         const str = data.toString();
         debugLog('handleInput:', 'hex=' + data.toString('hex'), 'modal=' + this.state.modal);
-        // Handle terminal command mode (commands from terminal bar handler)
+        // Handle terminal command mode (commands from terminal bar, diff pane handler, or file diff header handler)
         if (this.state.terminalCommandMode) {
             if (str === '\r' || str === '\n') {
-                // Enter - execute command
-                this.executeTerminalCommand(this.state.terminalCommandBuffer);
+                // Enter - execute command based on prefix
+                const cmd = this.state.terminalCommandBuffer;
+                if (cmd.startsWith('DIFF:')) {
+                    this.executeDiffCommand(cmd);
+                }
+                else if (cmd.startsWith('FILEDIFF:')) {
+                    this.executeFileDiffCommand(cmd);
+                }
+                else {
+                    this.executeTerminalCommand(cmd);
+                }
                 this.state.terminalCommandMode = false;
                 this.state.terminalCommandBuffer = '';
                 return;
@@ -225,6 +244,11 @@ class SidebarApp {
             this.state.terminalCommandBuffer = '';
             return;
         }
+        // Handle file diff view mode
+        if (this.state.fileDiffMode) {
+            this.handleFileDiffInput(key);
+            return;
+        }
         // Route input based on modal state
         switch (this.state.modal) {
             case 'quit':
@@ -311,6 +335,7 @@ class SidebarApp {
                 },
                 toggleCollapsed: () => this.toggleCollapsed(),
                 createTerminal: () => this.createTerminal(),
+                toggleDiffPane: () => this.toggleDiffPane(),
                 render: () => this.render(),
             },
         };
@@ -599,7 +624,22 @@ class SidebarApp {
                 this.state.hiddenPaneId = null;
             }
             else if (currentSession) {
-                // Normal mode - break the current session pane
+                // Normal mode - break the current session's panes
+                // Break diff pane first (if any) to prevent duplicates
+                if (currentSession.diffPaneId) {
+                    (0, diff_1.breakDiffPane)(currentSession.diffPaneId);
+                }
+                // Break terminals if any
+                if (currentSession.terminals.length > 0) {
+                    const activeTerminal = currentSession.terminals[currentSession.activeTerminalIndex];
+                    if (activeTerminal) {
+                        tmux.breakPane(activeTerminal.paneId);
+                    }
+                    if (currentSession.terminalBarPaneId) {
+                        tmux.breakPane(currentSession.terminalBarPaneId);
+                    }
+                }
+                // Break Claude pane
                 tmux.breakPane(currentSession.paneId);
             }
             paneId = tmux.splitHorizontal(this.state.sessionName, 80, worktree.path);
@@ -615,6 +655,13 @@ class SidebarApp {
             terminals: [],
             activeTerminalIndex: 0,
             terminalBarPaneId: null,
+            // Diff pane
+            diffPaneId: null,
+            diffPaneManuallyHidden: false,
+            diffViewMode: 'whole-file',
+            // File diff view panes
+            fileDiffHeaderPaneId: null,
+            fileDiffContentPaneId: null,
         };
         this.state.sessions.push(session);
         this.state.activeSessionId = sessionId;
@@ -622,17 +669,27 @@ class SidebarApp {
         // Focus the Claude pane so user can start interacting immediately
         tmux.selectPane(paneId);
         this.render();
+        // Set up file watcher for this session's worktree
+        this.setupFileWatcher(worktree.path, session);
+        // Auto-open diff pane if there are changes in this worktree
+        this.autoOpenDiffPaneIfNeeded(session, worktree);
     }
-    switchToSession(session) {
+    async switchToSession(session) {
         if (session.id === this.state.activeSessionId) {
             // Already active - focus pane
             tmux.selectPane(session.paneId);
             return;
         }
-        // Break current session's panes (Claude pane + terminals)
+        // Clean up file watcher for current session
+        this.cleanupFileWatcher();
+        // Break current session's panes (Claude pane + terminals + diff pane)
         const currentSession = this.state.sessions.find(s => s.id === this.state.activeSessionId);
         if (currentSession) {
-            // Break active terminal first (if any)
+            // Break diff pane first (if any)
+            if (currentSession.diffPaneId) {
+                (0, diff_1.breakDiffPane)(currentSession.diffPaneId);
+            }
+            // Break active terminal (if any)
             if (currentSession.terminals.length > 0) {
                 const activeTerminal = currentSession.terminals[currentSession.activeTerminalIndex];
                 if (activeTerminal) {
@@ -648,6 +705,15 @@ class SidebarApp {
         }
         // Join new session's Claude pane
         tmux.joinPane(session.paneId, this.state.sidebarPaneId, true);
+        // Join diff pane if exists
+        if (session.diffPaneId) {
+            (0, diff_1.joinDiffPane)(session.diffPaneId, session.paneId);
+            // Set up file watcher for new session
+            const worktree = this.state.worktrees.find(w => w.id === session.worktreeId);
+            if (worktree) {
+                this.setupFileWatcher(worktree.path, session);
+            }
+        }
         // Join terminal bar and active terminal if session has terminals
         if (session.terminals.length > 0 && session.terminalBarPaneId) {
             // Join terminal bar below Claude pane
@@ -670,6 +736,23 @@ class SidebarApp {
         this.enforceSidebarWidth();
         tmux.selectPane(this.state.sidebarPaneId);
         this.render();
+        // Set up file watcher and potentially auto-open diff pane for the new session
+        const worktree = this.state.worktrees.find(w => w.id === session.worktreeId);
+        if (worktree) {
+            if (!session.diffPaneId) {
+                // Diff pane not open - check if we should auto-open
+                if (!session.diffPaneManuallyHidden) {
+                    // Auto-open will set up watcher if it opens
+                    await this.autoOpenDiffPaneIfNeeded(session, worktree);
+                }
+                // If diff pane still not open (either manually hidden or no changes),
+                // set up watcher for future auto-open
+                if (!session.diffPaneId) {
+                    this.setupFileWatcher(worktree.path, session);
+                }
+            }
+            // If diff pane exists, watcher was already set up in joinDiffPane section above
+        }
     }
     async deleteSelected() {
         const item = this.getSelectedItem();
@@ -683,6 +766,14 @@ class SidebarApp {
         }
     }
     deleteSession(session) {
+        // Clean up file watcher if this is the active session
+        if (session.id === this.state.activeSessionId) {
+            this.cleanupFileWatcher();
+        }
+        // Kill diff pane
+        if (session.diffPaneId) {
+            (0, diff_1.closeDiffPane)(session.diffPaneId);
+        }
         // Kill all terminal panes
         for (const terminal of session.terminals) {
             tmux.killPane(terminal.paneId);
@@ -708,6 +799,15 @@ class SidebarApp {
                 const nextSession = this.state.sessions[0];
                 tmux.joinPane(nextSession.paneId, this.state.sidebarPaneId, true);
                 this.state.activeSessionId = nextSession.id;
+                // Join diff pane if next session has one
+                if (nextSession.diffPaneId) {
+                    (0, diff_1.joinDiffPane)(nextSession.diffPaneId, nextSession.paneId);
+                    // Set up file watcher for the new session
+                    const worktree = this.state.worktrees.find(w => w.id === nextSession.worktreeId);
+                    if (worktree) {
+                        this.setupFileWatcher(worktree.path, nextSession);
+                    }
+                }
                 // Join terminal panes if next session has terminals
                 if (nextSession.terminals.length > 0 && nextSession.terminalBarPaneId) {
                     tmux.joinPane(nextSession.terminalBarPaneId, nextSession.paneId, false);
@@ -1071,6 +1171,395 @@ class SidebarApp {
         tmux.sendKeys(session.terminalBarPaneId, `RENDER:${renderData}`, false);
     }
     // ==========================================================================
+    // Diff Pane Management
+    // ==========================================================================
+    /**
+     * Toggle the diff pane visibility
+     */
+    async toggleDiffPane() {
+        const session = this.state.sessions.find(s => s.id === this.state.activeSessionId);
+        if (!session) {
+            debugLog('toggleDiffPane: no active session');
+            return;
+        }
+        if (session.diffPaneId) {
+            // Close the diff pane
+            this.closeDiffPane(session);
+        }
+        else {
+            // Open the diff pane
+            await this.openDiffPane(session);
+        }
+    }
+    /**
+     * Open the diff pane for a session
+     * @param manualOpen - True if user manually opened (toggle), false if auto-open
+     */
+    async openDiffPane(session, manualOpen = true) {
+        // Guard against double opening (race condition protection)
+        if (session.diffPaneId || this.diffPaneOpening)
+            return;
+        this.diffPaneOpening = true;
+        try {
+            const worktree = this.state.worktrees.find(w => w.id === session.worktreeId);
+            if (!worktree)
+                return;
+            debugLog('openDiffPane: creating diff pane for session', session.title, 'manual=' + manualOpen);
+            // Reset manually hidden flag when user opens it
+            if (manualOpen) {
+                session.diffPaneManuallyHidden = false;
+            }
+            // Get initial diff data
+            const files = await (0, diff_1.getDiffSummary)(worktree.path);
+            // Create the diff pane to the right of the Claude pane
+            const diffPaneId = (0, diff_1.createDiffPane)(this.state.sessionName, session.paneId);
+            session.diffPaneId = diffPaneId;
+            // Start the diff handler
+            (0, diff_1.startDiffHandler)(diffPaneId, this.state.sidebarPaneId, session.id, worktree.path, files);
+            // Set up file watcher for auto-refresh
+            this.setupFileWatcher(worktree.path, session);
+            // Ensure sidebar stays at fixed width
+            this.enforceSidebarWidth();
+            tmux.selectPane(this.state.sidebarPaneId);
+            this.render();
+        }
+        finally {
+            this.diffPaneOpening = false;
+        }
+    }
+    /**
+     * Auto-open diff pane if there are changes and not manually hidden
+     */
+    async autoOpenDiffPaneIfNeeded(session, worktree) {
+        // Don't auto-open if already open or manually hidden
+        if (session.diffPaneId || session.diffPaneManuallyHidden) {
+            return;
+        }
+        // Check if there are changes in this worktree
+        const files = await (0, diff_1.getDiffSummary)(worktree.path);
+        if (files.length > 0) {
+            debugLog('autoOpenDiffPaneIfNeeded: found', files.length, 'changed files, opening diff pane');
+            await this.openDiffPane(session, false); // Auto-open, not manual
+        }
+    }
+    /**
+     * Close the diff pane for a session
+     * @param manualClose - True if user manually closed (toggle), false if system close
+     */
+    closeDiffPane(session, manualClose = true) {
+        if (!session.diffPaneId)
+            return;
+        debugLog('closeDiffPane: closing diff pane for session', session.title, 'manual=' + manualClose);
+        (0, diff_1.closeDiffPane)(session.diffPaneId);
+        session.diffPaneId = null;
+        // Mark as manually hidden if user closed it (so it won't auto-reopen)
+        if (manualClose) {
+            session.diffPaneManuallyHidden = true;
+            // Also clean up file watcher when manually closed (user doesn't want auto-open)
+            this.cleanupFileWatcher();
+        }
+        // Note: Don't clean up file watcher if not manual close - it may be needed for auto-open
+        // Exit file diff mode if active
+        if (this.state.fileDiffMode) {
+            this.hideFileDiff();
+        }
+        this.enforceSidebarWidth();
+        tmux.selectPane(this.state.sidebarPaneId);
+        this.render();
+    }
+    /**
+     * Set up file watcher for auto-refresh and auto-open
+     */
+    setupFileWatcher(repoPath, session) {
+        // Clean up any existing watcher
+        this.cleanupFileWatcher();
+        this.fileWatcherCleanup = (0, diff_1.watchForChanges)(repoPath, async () => {
+            const files = await (0, diff_1.getDiffSummary)(repoPath);
+            if (session.diffPaneId) {
+                // Diff pane is open - just update it
+                (0, diff_1.updateDiffPane)(session.diffPaneId, files);
+            }
+            else if (!session.diffPaneManuallyHidden && files.length > 0) {
+                // Diff pane is closed but not manually hidden and there are changes
+                // Auto-open the diff pane
+                debugLog('setupFileWatcher: detected changes, auto-opening diff pane');
+                await this.openDiffPane(session, false); // Auto-open, not manual
+            }
+        });
+    }
+    /**
+     * Clean up file watcher
+     */
+    cleanupFileWatcher() {
+        if (this.fileWatcherCleanup) {
+            this.fileWatcherCleanup();
+            this.fileWatcherCleanup = null;
+        }
+    }
+    /**
+     * Execute a diff command received from the diff pane handler
+     * Format: "DIFF:<action>:<data>"
+     */
+    async executeDiffCommand(command) {
+        debugLog('executeDiffCommand:', command);
+        if (!command.startsWith('DIFF:'))
+            return;
+        const parts = command.slice(5).split(':');
+        const action = parts[0];
+        const data = parts.slice(1).join(':'); // Rejoin in case filename has colons
+        const session = this.state.sessions.find(s => s.id === this.state.activeSessionId);
+        switch (action) {
+            case 'close':
+                if (session) {
+                    this.closeDiffPane(session);
+                }
+                break;
+            case 'viewfile':
+                if (data && session) {
+                    await this.showFileDiff(data, session);
+                }
+                break;
+            case 'refresh':
+                if (session && session.diffPaneId) {
+                    const worktree = this.state.worktrees.find(w => w.id === session.worktreeId);
+                    if (worktree) {
+                        const files = await (0, diff_1.getDiffSummary)(worktree.path);
+                        (0, diff_1.updateDiffPane)(session.diffPaneId, files);
+                    }
+                }
+                break;
+        }
+    }
+    /**
+     * Show file diff view (replaces Claude pane + terminals with header + content panes)
+     *
+     * Architecture:
+     * - Claude pane is broken to background (process preserved)
+     * - Terminal panes are broken to background (if any)
+     * - Diff pane (file list sidebar) remains visible
+     * - Content pane shows full file with inline diffs (streaming)
+     * - 1-row header pane above content for "Back" button + filename
+     * - Content handler handles Esc key to close
+     */
+    async showFileDiff(filename, session) {
+        const worktree = this.state.worktrees.find(w => w.id === session.worktreeId);
+        if (!worktree)
+            return;
+        debugLog('showFileDiff:', filename);
+        // Get stats for header
+        const files = await (0, diff_1.getDiffSummary)(worktree.path);
+        const fileInfo = files.find(f => f.file === filename);
+        const insertions = fileInfo?.insertions || 0;
+        const deletions = fileInfo?.deletions || 0;
+        // If already viewing a file diff, just replace the content (don't break/join again)
+        if (this.state.fileDiffMode && session.fileDiffHeaderPaneId && session.fileDiffContentPaneId) {
+            debugLog('showFileDiff: replacing existing view');
+            // Break diff pane first (if exists) so we can recreate proper layout
+            const hadDiffPane = !!session.diffPaneId;
+            if (session.diffPaneId) {
+                (0, diff_1.breakDiffPane)(session.diffPaneId);
+            }
+            // Kill existing header and content panes
+            (0, diff_2.closeFileDiffHeaderPane)(session.fileDiffHeaderPaneId);
+            (0, diff_2.closeFileDiffContentPane)(session.fileDiffContentPaneId);
+            // Create new content pane (to the right of sidebar)
+            const contentPaneId = (0, diff_2.createFileDiffContentPane)(this.state.sessionName, this.state.sidebarPaneId);
+            session.fileDiffContentPaneId = contentPaneId;
+            // Rejoin diff pane FIRST (to the right of content) - BEFORE creating header
+            if (hadDiffPane && session.diffPaneId) {
+                (0, diff_1.joinDiffPane)(session.diffPaneId, contentPaneId);
+            }
+            // NOW create new header pane (1-row above content only)
+            const headerPaneId = (0, diff_2.createFileDiffHeaderPane)(this.state.sessionName, contentPaneId);
+            session.fileDiffHeaderPaneId = headerPaneId;
+            // Start header handler with new file info
+            (0, diff_2.startFileDiffHeaderHandler)(headerPaneId, this.state.sidebarPaneId, filename, insertions, deletions, session.diffViewMode);
+            // Start content handler (streams full file with inline diffs, handles Esc)
+            (0, diff_2.startFileDiffContentHandler)(contentPaneId, this.state.sidebarPaneId, worktree.path, filename, session.diffViewMode);
+            // Update state
+            this.state.fileDiffFilename = filename;
+            // Ensure sidebar width
+            this.enforceSidebarWidth();
+            // Focus the content pane
+            tmux.selectPane(contentPaneId);
+            return;
+        }
+        // First time opening - break Claude pane to background (preserve Claude CLI process)
+        tmux.breakPane(session.paneId);
+        // Also break terminals if any
+        if (session.terminals.length > 0) {
+            const activeTerminal = session.terminals[session.activeTerminalIndex];
+            if (activeTerminal) {
+                tmux.breakPane(activeTerminal.paneId);
+            }
+            if (session.terminalBarPaneId) {
+                tmux.breakPane(session.terminalBarPaneId);
+            }
+        }
+        // Break diff pane temporarily (we'll rejoin it BEFORE creating header)
+        const hadDiffPane = !!session.diffPaneId;
+        if (session.diffPaneId) {
+            (0, diff_1.breakDiffPane)(session.diffPaneId);
+        }
+        // Create content pane (fills Claude pane's space, to the right of sidebar)
+        const contentPaneId = (0, diff_2.createFileDiffContentPane)(this.state.sessionName, this.state.sidebarPaneId);
+        session.fileDiffContentPaneId = contentPaneId;
+        // Rejoin diff pane FIRST (to the right of content) - BEFORE creating header
+        // This ensures header only spans content area, not the diff sidebar
+        if (hadDiffPane && session.diffPaneId) {
+            (0, diff_1.joinDiffPane)(session.diffPaneId, contentPaneId);
+        }
+        // NOW create 1-row header pane above content pane (after diff pane is positioned)
+        const headerPaneId = (0, diff_2.createFileDiffHeaderPane)(this.state.sessionName, contentPaneId);
+        session.fileDiffHeaderPaneId = headerPaneId;
+        // Start header handler in header pane
+        (0, diff_2.startFileDiffHeaderHandler)(headerPaneId, this.state.sidebarPaneId, filename, insertions, deletions, session.diffViewMode);
+        // Start content handler (streams full file with inline diffs, handles Esc)
+        (0, diff_2.startFileDiffContentHandler)(contentPaneId, this.state.sidebarPaneId, worktree.path, filename, session.diffViewMode);
+        // Update state
+        this.state.fileDiffMode = true;
+        this.state.fileDiffFilename = filename;
+        // Ensure sidebar stays at fixed width
+        this.enforceSidebarWidth();
+        // Focus the content pane (content handler handles Esc)
+        tmux.selectPane(contentPaneId);
+        this.render();
+    }
+    /**
+     * Hide file diff view and restore Claude pane
+     *
+     * New architecture:
+     * - Kill header + content panes
+     * - Join Claude pane back from background
+     * - Restore diff pane and terminals if any
+     */
+    hideFileDiff() {
+        if (!this.state.fileDiffMode)
+            return;
+        debugLog('hideFileDiff');
+        const session = this.state.sessions.find(s => s.id === this.state.activeSessionId);
+        if (!session)
+            return;
+        // 1. Kill header pane
+        if (session.fileDiffHeaderPaneId) {
+            (0, diff_2.closeFileDiffHeaderPane)(session.fileDiffHeaderPaneId);
+            session.fileDiffHeaderPaneId = null;
+        }
+        // 2. Kill content pane
+        if (session.fileDiffContentPaneId) {
+            (0, diff_2.closeFileDiffContentPane)(session.fileDiffContentPaneId);
+            session.fileDiffContentPaneId = null;
+        }
+        // 3. Join Claude pane back (was broken to background)
+        tmux.joinPane(session.paneId, this.state.sidebarPaneId, true);
+        // 4. Restore diff pane if it exists
+        if (session.diffPaneId) {
+            (0, diff_1.joinDiffPane)(session.diffPaneId, session.paneId);
+        }
+        // 5. Restore terminals if any
+        if (session.terminals.length > 0 && session.terminalBarPaneId) {
+            tmux.joinPane(session.terminalBarPaneId, session.paneId, false);
+            const activeTerminal = session.terminals[session.activeTerminalIndex];
+            if (activeTerminal) {
+                tmux.joinPane(activeTerminal.paneId, session.terminalBarPaneId, false);
+            }
+            tmux.resizePane(session.terminalBarPaneId, undefined, constants_1.TERMINAL_BAR_HEIGHT);
+        }
+        // 6. Clear state
+        this.state.fileDiffMode = false;
+        this.state.fileDiffFilename = null;
+        this.enforceSidebarWidth();
+        tmux.selectPane(this.state.sidebarPaneId);
+        this.render();
+    }
+    /**
+     * Handle input in file diff view mode
+     * With the new architecture, scrolling is handled natively by `less`.
+     * The sidebar only handles Escape to close.
+     */
+    handleFileDiffInput(key) {
+        // Escape: close file diff view
+        if (key.key === 'escape') {
+            this.hideFileDiff();
+            return;
+        }
+        // Other keys are passed through to sidebar's normal handling
+    }
+    /**
+     * Execute a file diff command received from the file diff header handler
+     * Format: "FILEDIFF:<action>" or "FILEDIFF:mode:<mode>"
+     */
+    executeFileDiffCommand(command) {
+        debugLog('executeFileDiffCommand:', command);
+        if (!command.startsWith('FILEDIFF:'))
+            return;
+        const action = command.slice(9); // Remove "FILEDIFF:" prefix
+        switch (action) {
+            case 'close':
+                this.hideFileDiff();
+                break;
+            case 'mode:diffs-only':
+                this.setDiffViewMode('diffs-only');
+                break;
+            case 'mode:whole-file':
+                this.setDiffViewMode('whole-file');
+                break;
+        }
+    }
+    /**
+     * Set the diff view mode and recreate the file diff panes
+     */
+    async setDiffViewMode(mode) {
+        const session = this.state.sessions.find(s => s.id === this.state.activeSessionId);
+        if (!session || !this.state.fileDiffMode || !this.state.fileDiffFilename)
+            return;
+        // Already in this mode
+        if (session.diffViewMode === mode)
+            return;
+        debugLog('setDiffViewMode:', mode);
+        const worktree = this.state.worktrees.find(w => w.id === session.worktreeId);
+        if (!worktree)
+            return;
+        // Update mode in session
+        session.diffViewMode = mode;
+        // Get stats for header
+        const files = await (0, diff_1.getDiffSummary)(worktree.path);
+        const fileInfo = files.find(f => f.file === this.state.fileDiffFilename);
+        const insertions = fileInfo?.insertions || 0;
+        const deletions = fileInfo?.deletions || 0;
+        const filename = this.state.fileDiffFilename;
+        // Break diff pane first (if exists) so we can recreate proper layout
+        const hadDiffPane = !!session.diffPaneId;
+        if (session.diffPaneId) {
+            (0, diff_1.breakDiffPane)(session.diffPaneId);
+        }
+        // Kill existing header and content panes
+        if (session.fileDiffHeaderPaneId) {
+            (0, diff_2.closeFileDiffHeaderPane)(session.fileDiffHeaderPaneId);
+        }
+        if (session.fileDiffContentPaneId) {
+            (0, diff_2.closeFileDiffContentPane)(session.fileDiffContentPaneId);
+        }
+        // Create new content pane (to the right of sidebar)
+        const contentPaneId = (0, diff_2.createFileDiffContentPane)(this.state.sessionName, this.state.sidebarPaneId);
+        session.fileDiffContentPaneId = contentPaneId;
+        // Rejoin diff pane FIRST (to the right of content) - BEFORE creating header
+        if (hadDiffPane && session.diffPaneId) {
+            (0, diff_1.joinDiffPane)(session.diffPaneId, contentPaneId);
+        }
+        // NOW create new header pane (1-row above content only)
+        const headerPaneId = (0, diff_2.createFileDiffHeaderPane)(this.state.sessionName, contentPaneId);
+        session.fileDiffHeaderPaneId = headerPaneId;
+        // Start header handler with new mode
+        (0, diff_2.startFileDiffHeaderHandler)(headerPaneId, this.state.sidebarPaneId, filename, insertions, deletions, mode);
+        // Start content handler with new mode
+        (0, diff_2.startFileDiffContentHandler)(contentPaneId, this.state.sidebarPaneId, worktree.path, filename, mode);
+        // Ensure sidebar width
+        this.enforceSidebarWidth();
+        // Focus the content pane
+        tmux.selectPane(contentPaneId);
+    }
+    // ==========================================================================
     // Fullscreen Modal Management
     // ==========================================================================
     /**
@@ -1081,11 +1570,15 @@ class SidebarApp {
             return; // Already in fullscreen
         debugLog('enterFullscreenModal: hiding panes');
         if (this.state.activeSessionId) {
-            // Hide the active session's panes (Claude pane + terminals)
+            // Hide the active session's panes (Claude pane + terminals + diff pane)
             const activeSession = this.state.sessions.find(s => s.id === this.state.activeSessionId);
             if (activeSession) {
                 try {
-                    // Break active terminal first (if any)
+                    // Break diff pane first (if any)
+                    if (activeSession.diffPaneId) {
+                        (0, diff_1.breakDiffPane)(activeSession.diffPaneId);
+                    }
+                    // Break active terminal (if any)
                     if (activeSession.terminals.length > 0) {
                         const activeTerminal = activeSession.terminals[activeSession.activeTerminalIndex];
                         if (activeTerminal) {
@@ -1131,8 +1624,13 @@ class SidebarApp {
                 // Join Claude pane
                 tmux.joinPane(this.state.hiddenPaneId, this.state.sidebarPaneId, true);
                 debugLog('exitFullscreenModal: joined Claude pane');
-                // If active session has terminals, join those too
                 const activeSession = this.state.sessions.find(s => s.id === this.state.activeSessionId);
+                // Join diff pane if it exists (to the right of Claude pane)
+                if (activeSession && activeSession.diffPaneId) {
+                    (0, diff_1.joinDiffPane)(activeSession.diffPaneId, activeSession.paneId);
+                    debugLog('exitFullscreenModal: joined diff pane');
+                }
+                // If active session has terminals, join those too
                 if (activeSession && activeSession.terminals.length > 0 && activeSession.terminalBarPaneId) {
                     // Join terminal bar below Claude pane
                     tmux.joinPane(activeSession.terminalBarPaneId, activeSession.paneId, false);