dmux 3.1.1 → 3.3.0

package/dist/DmuxApp.js

@@ -1,123 +1,112 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Text, useInput, useApp } from 'ink';
-import { execSync } from 'child_process';
-import path from 'path';
-import { createRequire } from 'module';
+import React, { useState, useEffect } from "react";
+import { Box, Text, useApp, useStdout } from "ink";
+import { createRequire } from "module";
+import { TmuxService } from "./services/TmuxService.js";
 // Hooks
-import usePanes from './hooks/usePanes.js';
-import useProjectSettings from './hooks/useProjectSettings.js';
-import useTerminalWidth from './hooks/useTerminalWidth.js';
-import useNavigation from './hooks/useNavigation.js';
-import useAutoUpdater from './hooks/useAutoUpdater.js';
-import useAgentDetection from './hooks/useAgentDetection.js';
-import useAgentStatus from './hooks/useAgentStatus.js';
-import usePaneRunner from './hooks/usePaneRunner.js';
-import usePaneCreation from './hooks/usePaneCreation.js';
-import useActionSystem from './hooks/useActionSystem.js';
+import usePanes from "./hooks/usePanes.js";
+import useProjectSettings from "./hooks/useProjectSettings.js";
+import useTerminalWidth from "./hooks/useTerminalWidth.js";
+import useNavigation from "./hooks/useNavigation.js";
+import useAutoUpdater from "./hooks/useAutoUpdater.js";
+import useAgentDetection from "./hooks/useAgentDetection.js";
+import useAgentStatus from "./hooks/useAgentStatus.js";
+import usePaneRunner from "./hooks/usePaneRunner.js";
+import usePaneCreation from "./hooks/usePaneCreation.js";
+import useActionSystem from "./hooks/useActionSystem.js";
+import { useStatusMessages } from "./hooks/useStatusMessages.js";
+import { useLayoutManagement } from "./hooks/useLayoutManagement.js";
+import { useInputHandling } from "./hooks/useInputHandling.js";
+import { useDialogState } from "./hooks/useDialogState.js";
+import { useTunnelManagement } from "./hooks/useTunnelManagement.js";
+import { useDebugInfo } from "./hooks/useDebugInfo.js";
 // Utils
-import { applySmartLayout } from './utils/tmux.js';
-import { suggestCommand } from './utils/commands.js';
-import { generateSlug } from './utils/slug.js';
-import { getMainBranch } from './utils/git.js';
-import { capturePaneContent } from './utils/paneCapture.js';
-import { StateManager } from './shared/StateManager.js';
-import { getStatusDetector } from './services/StatusDetector.js';
-import { PaneAction, getAvailableActions } from './actions/index.js';
-import { SettingsManager, SETTING_DEFINITIONS } from './utils/settingsManager.js';
+import { SIDEBAR_WIDTH } from "./utils/layoutManager.js";
+import { supportsPopups } from "./utils/popup.js";
+import { StateManager } from "./shared/StateManager.js";
+import { REPAINT_SPINNER_DURATION, } from "./constants/timing.js";
+import { getStatusDetector, } from "./services/StatusDetector.js";
+import { SettingsManager } from "./utils/settingsManager.js";
+import { useServices } from "./hooks/useServices.js";
+import { PaneLifecycleManager } from "./services/PaneLifecycleManager.js";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const require = createRequire(import.meta.url);
-const packageJson = require('../package.json');
-import PanesGrid from './components/PanesGrid.js';
-import NewPaneDialog from './components/NewPaneDialog.js';
-import AgentChoiceDialog from './components/AgentChoiceDialog.js';
-import CommandPromptDialog from './components/CommandPromptDialog.js';
-import FileCopyPrompt from './components/FileCopyPrompt.js';
-import LoadingIndicator from './components/LoadingIndicator.js';
-import RunningIndicator from './components/RunningIndicator.js';
-import UpdatingIndicator from './components/UpdatingIndicator.js';
-import CreatingIndicator from './components/CreatingIndicator.js';
-import FooterHelp from './components/FooterHelp.js';
-import QRCode from './components/QRCode.js';
-import KebabMenu from './components/KebabMenu.js';
-import ActionChoiceDialog from './components/ActionChoiceDialog.js';
-import ActionConfirmDialog from './components/ActionConfirmDialog.js';
-import ActionInputDialog from './components/ActionInputDialog.js';
-import ActionProgressDialog from './components/ActionProgressDialog.js';
-import SettingsDialog from './components/SettingsDialog.js';
-import HooksDialog from './components/HooksDialog.js';
-const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoot, autoUpdater, serverPort, server }) => {
+const packageJson = require("../package.json");
+import PanesGrid from "./components/panes/PanesGrid.js";
+import CommandPromptDialog from "./components/dialogs/CommandPromptDialog.js";
+import FileCopyPrompt from "./components/ui/FileCopyPrompt.js";
+import LoadingIndicator from "./components/indicators/LoadingIndicator.js";
+import RunningIndicator from "./components/indicators/RunningIndicator.js";
+import UpdatingIndicator from "./components/indicators/UpdatingIndicator.js";
+import FooterHelp from "./components/ui/FooterHelp.js";
+const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoot, autoUpdater, serverPort, server, controlPaneId, }) => {
+    const { stdout } = useStdout();
+    const terminalHeight = stdout?.rows || 40;
     /* panes state moved to usePanes */
     const [selectedIndex, setSelectedIndex] = useState(0);
-    const [showNewPaneDialog, setShowNewPaneDialog] = useState(false);
-    const [newPanePrompt, setNewPanePrompt] = useState('');
-    const [statusMessage, setStatusMessage] = useState('');
+    const { statusMessage, setStatusMessage, showStatus, clearStatus } = useStatusMessages();
     const [isCreatingPane, setIsCreatingPane] = useState(false);
-    const [showQRCode, setShowQRCode] = useState(false);
-    const [tunnelUrl, setTunnelUrl] = useState(null);
-    const [isCreatingTunnel, setIsCreatingTunnel] = useState(false);
     // Settings state
     const [settingsManager] = useState(() => new SettingsManager(projectRoot));
-    const [showSettingsDialog, setShowSettingsDialog] = useState(false);
-    const [settingsMode, setSettingsMode] = useState('list');
-    const [settingsSelectedIndex, setSettingsSelectedIndex] = useState(0);
-    const [settingsEditingKey, setSettingsEditingKey] = useState();
-    const [settingsEditingValueIndex, setSettingsEditingValueIndex] = useState(0);
-    const [settingsScopeIndex, setSettingsScopeIndex] = useState(0);
     // Force repaint trigger - incrementing this causes Ink to re-render
     const [forceRepaintTrigger, setForceRepaintTrigger] = useState(0);
     // Spinner state - shows for a few frames to force render
     const [showRepaintSpinner, setShowRepaintSpinner] = useState(false);
     const { projectSettings, saveSettings } = useProjectSettings(settingsFile);
-    // Hooks management state
-    const [showHooksDialog, setShowHooksDialog] = useState(false);
-    const [hooksSelectedIndex, setHooksSelectedIndex] = useState(0);
-    const [hooksData, setHooksData] = useState([]);
-    const [showCommandPrompt, setShowCommandPrompt] = useState(null);
-    const [commandInput, setCommandInput] = useState('');
-    const [showFileCopyPrompt, setShowFileCopyPrompt] = useState(false);
-    const [currentCommandType, setCurrentCommandType] = useState(null);
-    const [runningCommand, setRunningCommand] = useState(false);
-    const [quitConfirmMode, setQuitConfirmMode] = useState(false);
-    const [showKebabMenu, setShowKebabMenu] = useState(false);
-    const [kebabMenuPaneIndex, setKebabMenuPaneIndex] = useState(null);
-    const [kebabMenuOption, setKebabMenuOption] = useState(0);
-    const [kebabMenuActions, setKebabMenuActions] = useState([]);
-    // Debug message state - for temporary logging messages
-    const [debugMessage, setDebugMessage] = useState('');
+    // Dialog state management
+    const dialogState = useDialogState();
+    const { showCommandPrompt, setShowCommandPrompt, commandInput, setCommandInput, showFileCopyPrompt, setShowFileCopyPrompt, currentCommandType, setCurrentCommandType, runningCommand, setRunningCommand, quitConfirmMode, setQuitConfirmMode, } = dialogState;
+    // Tunnel/network state management
+    const tunnelState = useTunnelManagement();
+    const { tunnelUrl, setTunnelUrl, tunnelCreating, setTunnelCreating, tunnelCopied, setTunnelCopied, localIp, setLocalIp, } = tunnelState;
+    // Debug/development info
+    const { debugMessage, setDebugMessage, currentBranch } = useDebugInfo(__dirname);
     // Update state handled by hook
-    const { updateInfo, showUpdateDialog, isUpdating, performUpdate, skipUpdate, dismissUpdate, updateAvailable } = useAutoUpdater(autoUpdater, setStatusMessage);
+    const { updateInfo, isUpdating, updateAvailable, } = useAutoUpdater(autoUpdater, setStatusMessage);
     const { exit } = useApp();
+    // Flag to ignore input temporarily after popup closes (prevents buffered keys)
+    const [ignoreInput, setIgnoreInput] = useState(false);
     // Agent selection state
     const { availableAgents } = useAgentDetection();
-    const [showAgentChoiceDialog, setShowAgentChoiceDialog] = useState(false);
     const [agentChoice, setAgentChoice] = useState(null);
-    const [pendingPrompt, setPendingPrompt] = useState('');
+    // Popup support detection
+    const [popupsSupported, setPopupsSupported] = useState(false);
     // Track terminal dimensions for responsive layout
     const terminalWidth = useTerminalWidth();
+    // Track unread error and warning counts for logs badge
+    const [unreadErrorCount, setUnreadErrorCount] = useState(0);
+    const [unreadWarningCount, setUnreadWarningCount] = useState(0);
+    // Subscribe to StateManager for unread error/warning count updates
+    useEffect(() => {
+        const stateManager = StateManager.getInstance();
+        const updateCounts = () => {
+            setUnreadErrorCount(stateManager.getUnreadErrorCount());
+            setUnreadWarningCount(stateManager.getUnreadWarningCount());
+        };
+        // Initial count
+        updateCounts();
+        // Subscribe to changes
+        const unsubscribe = stateManager.subscribe(updateCounts);
+        return () => {
+            unsubscribe();
+        };
+    }, []);
     // Panes state and persistence (skipLoading will be updated after actionSystem is initialized)
     const { panes, setPanes, isLoading, loadPanes, savePanes } = usePanes(panesFile, false);
-    // Track intentionally closed panes to prevent race condition
-    // When a user closes a pane, we add it to this set. If the worker detects
-    // the pane is gone (which it will), we check this set first before re-saving.
-    const intentionallyClosedPanes = React.useRef(new Set());
-    // Action system
-    const actionSystem = useActionSystem({
-        panes,
-        savePanes,
-        sessionName,
-        projectName,
-        onPaneRemove: (paneId) => {
-            // Mark this pane as intentionally closed
-            intentionallyClosedPanes.current.add(paneId);
-            const updated = panes.filter(p => p.id !== paneId);
-            setPanes(updated);
-            // Clean up the tracking after a delay (in case of race conditions)
-            setTimeout(() => {
-                intentionallyClosedPanes.current.delete(paneId);
-            }, 5000);
-        },
-    });
+    // Pane lifecycle manager - handles locking to prevent race conditions
+    // Replaces the old timeout-based intentionallyClosedPanes Set
+    const lifecycleManager = React.useMemo(() => PaneLifecycleManager.getInstance(), []);
+    // Clean up stale lifecycle operations periodically
+    useEffect(() => {
+        const cleanupInterval = setInterval(() => {
+            lifecycleManager.cleanupStaleOperations();
+        }, 60000); // Every 60 seconds
+        return () => clearInterval(cleanupInterval);
+    }, [lifecycleManager]);
     // Pane runner
-    const { copyNonGitFiles, runCommandInternal, monitorTestOutput, monitorDevOutput, attachBackgroundWindow } = usePaneRunner({
+    const { copyNonGitFiles, runCommandInternal, } = usePaneRunner({
         panes,
         savePanes,
         projectSettings,
@@ -126,24 +115,47 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     });
     // Force repaint helper - shows spinner for a few frames to force full re-render
     const forceRepaint = () => {
-        setForceRepaintTrigger(prev => prev + 1);
+        setForceRepaintTrigger((prev) => prev + 1);
         setShowRepaintSpinner(true);
         // Hide spinner after a few frames (enough to trigger multiple renders)
-        setTimeout(() => setShowRepaintSpinner(false), 100);
+        setTimeout(() => setShowRepaintSpinner(false), REPAINT_SPINNER_DURATION);
     };
     // Force repaint effect - ensures Ink re-renders when trigger changes
     useEffect(() => {
         if (forceRepaintTrigger > 0) {
             // Small delay to ensure terminal is ready
-            const timer = setTimeout(() => {
+            const timer = setTimeout(async () => {
                 try {
-                    execSync('tmux refresh-client', { stdio: 'pipe' });
+                    const tmuxService = TmuxService.getInstance();
+                    await tmuxService.refreshClient();
                 }
                 catch { }
             }, 50);
             return () => clearTimeout(timer);
         }
     }, [forceRepaintTrigger]);
+    // Get local network IP on mount
+    useEffect(() => {
+        const getLocalIp = async () => {
+            try {
+                // Get local IP address (not 127.0.0.1)
+                const { execSync } = await import("child_process");
+                const result = execSync(`hostname -I 2>/dev/null || ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}' | head -1`, {
+                    encoding: "utf-8",
+                    stdio: "pipe",
+                }).trim();
+                if (result) {
+                    setLocalIp(result.split(" ")[0]); // Take first IP if multiple
+                }
+            }
+            catch {
+                // Fallback to 127.0.0.1
+                setLocalIp("127.0.0.1");
+            }
+        };
+        getLocalIp();
+    }, []);
+    // Spinner animation and branch detection now handled in hooks
     // Pane creation
     const { createNewPane: createNewPaneHook } = usePaneCreation({
         panes,
@@ -151,18 +163,37 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         projectName,
         setIsCreatingPane,
         setStatusMessage,
-        setNewPanePrompt,
         loadPanes,
         panesFile,
         availableAgents,
         forceRepaint,
     });
+    // Initialize services
+    const { popupManager } = useServices({
+        // PopupManager config
+        sidebarWidth: SIDEBAR_WIDTH,
+        projectRoot: projectRoot || process.cwd(),
+        popupsSupported,
+        terminalWidth,
+        terminalHeight,
+        availableAgents,
+        agentChoice,
+        serverPort,
+        server,
+        settingsManager,
+        projectSettings,
+        // Callbacks
+        setStatusMessage,
+        setIgnoreInput,
+        savePanes,
+        loadPanes,
+    });
     // Listen for status updates with analysis data and merge into panes
     useEffect(() => {
         const statusDetector = getStatusDetector();
         const handleStatusUpdate = (event) => {
-            setPanes(prevPanes => {
-                const updatedPanes = prevPanes.map(pane => {
+            setPanes((prevPanes) => {
+                const updatedPanes = prevPanes.map((pane) => {
                     if (pane.id === event.paneId) {
                         const updated = {
                             ...pane,
@@ -186,22 +217,23 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                             updated.analyzerError = event.analyzerError;
                         }
                         // Clear option dialog data when transitioning away from 'waiting' state
-                        if (event.status !== 'waiting' && pane.agentStatus === 'waiting') {
+                        if (event.status !== "waiting" && pane.agentStatus === "waiting") {
                             updated.optionsQuestion = undefined;
                             updated.options = undefined;
                             updated.potentialHarm = undefined;
                         }
                         // Clear summary when transitioning away from 'idle' state
-                        if (event.status !== 'idle' && pane.agentStatus === 'idle') {
+                        if (event.status !== "idle" && pane.agentStatus === "idle") {
                             updated.agentSummary = undefined;
                         }
                         // Clear analyzer error when successfully getting a new analysis
                         // or when transitioning to 'working' status
-                        if (event.status === 'working') {
+                        if (event.status === "working") {
                             updated.analyzerError = undefined;
                         }
-                        else if (event.status === 'waiting' || event.status === 'idle') {
-                            if (event.analyzerError === undefined && (event.optionsQuestion || event.summary)) {
+                        else if (event.status === "waiting" || event.status === "idle") {
+                            if (event.analyzerError === undefined &&
+                                (event.optionsQuestion || event.summary)) {
                                 updated.analyzerError = undefined;
                             }
                         }
@@ -210,15 +242,15 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                     return pane;
                 });
                 // Persist to disk - ConfigWatcher will handle syncing to StateManager
-                savePanes(updatedPanes).catch(err => {
-                    console.error('Failed to save panes after status update:', err);
+                savePanes(updatedPanes).catch((err) => {
+                    console.error("Failed to save panes after status update:", err);
                 });
                 return updatedPanes;
             });
         };
-        statusDetector.on('status-updated', handleStatusUpdate);
+        statusDetector.on("status-updated", handleStatusUpdate);
         return () => {
-            statusDetector.off('status-updated', handleStatusUpdate);
+            statusDetector.off("status-updated", handleStatusUpdate);
         };
     }, [setPanes, savePanes]);
     // Note: No need to sync panes with StateManager here.
@@ -243,62 +275,29 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         const handleTermination = () => {
             cleanExit();
         };
-        process.on('SIGTERM', handleTermination);
-        // Test debug message on mount
-        StateManager.getInstance().setDebugMessage('Debug logging initialized - watching for AI activity...');
-        setTimeout(() => {
-            StateManager.getInstance().setDebugMessage('');
-        }, 3000);
+        process.on("SIGTERM", handleTermination);
+        // Check if tmux supports popups (3.2+) and enable mouse mode for click-outside-to-close
+        const popupSupport = supportsPopups();
+        setPopupsSupported(popupSupport);
+        if (popupSupport) {
+            // Enable mouse mode only for this dmux session (not global)
+        }
         return () => {
-            process.removeListener('SIGTERM', handleTermination);
+            process.removeListener("SIGTERM", handleTermination);
         };
     }, []);
-    // Auto-show new pane dialog when starting with no panes
-    useEffect(() => {
-        // Only show the dialog if:
-        // 1. Initial load is complete (!isLoading)
-        // 2. We have no panes
-        // 3. We're not already showing the dialog
-        // 4. We're not showing any other dialogs or prompts
-        if (!isLoading &&
-            panes.length === 0 &&
-            !showNewPaneDialog &&
-            !actionSystem.actionState.showConfirmDialog &&
-            !actionSystem.actionState.showChoiceDialog &&
-            !actionSystem.actionState.showInputDialog &&
-            !actionSystem.actionState.showProgressDialog &&
-            !showCommandPrompt &&
-            !showFileCopyPrompt &&
-            !showAgentChoiceDialog &&
-            !isCreatingPane &&
-            !runningCommand &&
-            !isUpdating) {
-            setShowNewPaneDialog(true);
-        }
-    }, [isLoading, panes.length, showNewPaneDialog, actionSystem.actionState.showConfirmDialog, actionSystem.actionState.showChoiceDialog, actionSystem.actionState.showInputDialog, actionSystem.actionState.showProgressDialog, showCommandPrompt, showFileCopyPrompt, showAgentChoiceDialog, isCreatingPane, runningCommand, isUpdating]);
     // Update checking moved to useAutoUpdater
     // Set default agent choice when detection completes
     useEffect(() => {
         if (agentChoice == null && availableAgents.length > 0) {
-            setAgentChoice(availableAgents[0] || 'claude');
+            setAgentChoice(availableAgents[0] || "claude");
         }
     }, [availableAgents]);
-    // Monitor agent status across panes (returns a map of pane ID to status)
-    const agentStatuses = useAgentStatus({
-        panes,
-        suspend: showNewPaneDialog || actionSystem.actionState.showConfirmDialog || actionSystem.actionState.showChoiceDialog || actionSystem.actionState.showInputDialog || actionSystem.actionState.showProgressDialog || !!showCommandPrompt || showFileCopyPrompt,
-        onPaneRemoved: (paneId) => {
-            // Check if this pane was intentionally closed
-            // If so, don't re-save - the close action already handled it
-            if (intentionallyClosedPanes.current.has(paneId)) {
-                return;
-            }
-            // Pane was removed unexpectedly (e.g., user killed tmux pane manually)
-            // Remove it from our tracking
-            const updatedPanes = panes.filter(p => p.id !== paneId);
-            savePanes(updatedPanes);
-        },
-    });
+    // Welcome pane is now fully event-based:
+    // - Created at startup (in src/index.ts)
+    // - Destroyed when first pane is created (in paneCreation.ts)
+    // - Recreated when last pane is closed (in paneActions.ts)
+    // No polling needed!
     // loadPanes moved to usePanes
     // getPanePositions moved to utils/tmux
     // Navigation logic moved to hook
@@ -306,1016 +305,290 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     // findCardInDirection provided by useNavigation
     // savePanes moved to usePanes
     // applySmartLayout moved to utils/tmux
-    const createNewPane = async (prompt, agent) => {
-        setIsCreatingPane(true);
-        setStatusMessage('Generating slug...');
-        const slug = await generateSlug(prompt);
-        setStatusMessage(`Creating worktree: ${slug}...`);
-        // Get git root directory for consistent worktree placement
-        let projectRoot;
-        try {
-            projectRoot = execSync('git rev-parse --show-toplevel', {
-                encoding: 'utf-8',
-                stdio: 'pipe'
-            }).trim();
-        }
-        catch {
-            // Fallback to current directory if not in a git repo
-            projectRoot = process.cwd();
-        }
-        // Create worktree path inside .dmux/worktrees directory
-        const worktreePath = path.join(projectRoot, '.dmux', 'worktrees', slug);
-        // Get the original pane ID (where dmux is running) before clearing
-        const originalPaneId = execSync('tmux display-message -p "#{pane_id}"', { encoding: 'utf-8' }).trim();
-        // Multiple clearing strategies to prevent artifacts
-        // 1. Clear screen with ANSI codes
-        process.stdout.write('\x1b[2J\x1b[H');
-        // 2. Fill with blank lines to push content off screen
-        process.stdout.write('\n'.repeat(100));
-        // 3. Clear tmux history and send clear command
-        try {
-            execSync('tmux clear-history', { stdio: 'pipe' });
-            execSync('tmux send-keys C-l', { stdio: 'pipe' });
+    // Helper function to handle agent choice and pane creation
+    const handlePaneCreationWithAgent = async (prompt) => {
+        const agents = availableAgents;
+        if (agents.length === 0) {
+            await createNewPaneHook(prompt);
         }
-        catch { }
-        // Wait a bit for clearing to settle
-        await new Promise(resolve => setTimeout(resolve, 100));
-        // 4. Force tmux to refresh the display
-        try {
-            execSync('tmux refresh-client', { stdio: 'pipe' });
+        else if (agents.length === 1) {
+            await createNewPaneHook(prompt, agents[0]);
         }
-        catch { }
-        // Get current pane count to determine layout
-        const paneCount = parseInt(execSync('tmux list-panes | wc -l', { encoding: 'utf-8' }).trim());
-        // Enable pane borders to show titles
-        try {
-            execSync(`tmux set-option -g pane-border-status top`, { stdio: 'pipe' });
-        }
-        catch {
-            // Ignore if already set or fails
-        }
-        // Create new pane
-        const paneInfo = execSync(`tmux split-window -h -P -F '#{pane_id}'`, { encoding: 'utf-8' }).trim();
-        // Wait for pane creation to settle
-        await new Promise(resolve => setTimeout(resolve, 500));
-        // Set pane title to match the slug
-        try {
-            execSync(`tmux select-pane -t '${paneInfo}' -T "${slug}"`, { stdio: 'pipe' });
-        }
-        catch {
-            // Ignore if setting title fails
-        }
-        // Apply smart layout based on pane count
-        const newPaneCount = paneCount + 1;
-        applySmartLayout(newPaneCount);
-        // Create git worktree and cd into it
-        // This MUST happen before launching Claude to ensure we're in the right directory
-        try {
-            // First, create the worktree and cd into it as a single command
-            // Use ; instead of && to ensure cd runs even if worktree already exists
-            const worktreeCmd = `git worktree add "${worktreePath}" -b ${slug} 2>/dev/null ; cd "${worktreePath}"`;
-            execSync(`tmux send-keys -t '${paneInfo}' '${worktreeCmd}' Enter`, { stdio: 'pipe' });
-            // Wait longer for worktree creation and cd to complete
-            // This is critical - if we don't wait long enough, Claude will start in the wrong directory
-            await new Promise(resolve => setTimeout(resolve, 2500));
-            // Verify we're in the worktree directory by sending pwd command  
-            execSync(`tmux send-keys -t '${paneInfo}' 'echo "Worktree created at:" && pwd' Enter`, { stdio: 'pipe' });
-            await new Promise(resolve => setTimeout(resolve, 500));
-            setStatusMessage(agent ? `Worktree created, launching ${agent === 'opencode' ? 'opencode' : 'Claude'}...` : 'Worktree created.');
-        }
-        catch (error) {
-            // Log error but continue - worktree creation is essential
-            setStatusMessage(`Warning: Worktree issue: ${error}`);
-            // Even if worktree creation failed, try to cd to the directory in case it exists
-            execSync(`tmux send-keys -t '${paneInfo}' 'cd "${worktreePath}" 2>/dev/null || (echo "ERROR: Failed to create/enter worktree ${slug}" && pwd)' Enter`, { stdio: 'pipe' });
-            await new Promise(resolve => setTimeout(resolve, 1000));
-        }
-        // Prepare and send the agent command
-        let escapedCmd = '';
-        if (agent === 'claude') {
-            // Claude should always be launched AFTER we're in the worktree directory
-            let claudeCmd;
-            if (prompt && prompt.trim()) {
-                const escapedPrompt = prompt
-                    .replace(/\\/g, '\\\\')
-                    .replace(/"/g, '\\"')
-                    .replace(/`/g, '\\`')
-                    .replace(/\$/g, '\\$');
-                claudeCmd = `claude "${escapedPrompt}" --permission-mode=acceptEdits`;
+        else {
+            // Multiple agents available - check for default agent setting first
+            const settings = settingsManager.getSettings();
+            if (settings.defaultAgent && agents.includes(settings.defaultAgent)) {
+                await createNewPaneHook(prompt, settings.defaultAgent);
             }
             else {
-                claudeCmd = `claude --permission-mode=acceptEdits`;
+                // Show agent choice popup
+                const selectedAgent = await popupManager.launchAgentChoicePopup();
+                if (selectedAgent) {
+                    await createNewPaneHook(prompt, selectedAgent);
+                }
             }
-            // Send Claude command to new pane
-            escapedCmd = claudeCmd.replace(/'/g, "'\\''");
-            execSync(`tmux send-keys -t '${paneInfo}' '${escapedCmd}'`, { stdio: 'pipe' });
-            execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: 'pipe' });
         }
-        else if (agent === 'opencode') {
-            // opencode: start the TUI, then paste the prompt and submit
-            const openCoderCmd = `opencode`;
-            const escapedOpenCmd = openCoderCmd.replace(/'/g, "'\\''");
-            execSync(`tmux send-keys -t '${paneInfo}' '${escapedOpenCmd}'`, { stdio: 'pipe' });
-            execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: 'pipe' });
-            if (prompt && prompt.trim()) {
-                await new Promise(resolve => setTimeout(resolve, 1500));
-                const bufName = `dmux_prompt_${Date.now()}`;
-                const promptEsc = prompt.replace(/\\/g, '\\\\').replace(/'/g, "'\\''");
-                execSync(`tmux set-buffer -b '${bufName}' -- '${promptEsc}'`, { stdio: 'pipe' });
-                execSync(`tmux paste-buffer -b '${bufName}' -t '${paneInfo}'`, { stdio: 'pipe' });
-                await new Promise(resolve => setTimeout(resolve, 200));
-                execSync(`tmux delete-buffer -b '${bufName}'`, { stdio: 'pipe' });
-                execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: 'pipe' });
+    };
+    // Helper function to handle action results recursively
+    const handleActionResult = async (result) => {
+        // Handle ActionResults from background callbacks (e.g., conflict resolution completion)
+        // This allows showing dialogs even when not in the normal action flow
+        if (!popupsSupported)
+            return;
+        // Handle the result type and show appropriate dialog
+        if (result.type === "confirm") {
+            const confirmed = await popupManager.launchConfirmPopup(result.title || "Confirm", result.message, result.confirmLabel, result.cancelLabel);
+            if (confirmed && result.onConfirm) {
+                const nextResult = await result.onConfirm();
+                // Recursively handle nested results
+                if (nextResult) {
+                    await handleActionResult(nextResult);
+                }
+            }
+            else if (!confirmed && result.onCancel) {
+                const nextResult = await result.onCancel();
+                if (nextResult) {
+                    await handleActionResult(nextResult);
+                }
             }
         }
-        if (agent === 'claude') {
-            // Monitor for Claude Code trust prompt and auto-respond
-            const autoApproveTrust = async () => {
-                // Wait for Claude to start up before checking for prompts
-                await new Promise(resolve => setTimeout(resolve, 800));
-                const maxChecks = 100; // 100 checks * 100ms = 10 seconds total
-                const checkInterval = 100; // Check every 100ms
-                let lastContent = '';
-                let stableContentCount = 0;
-                let promptHandled = false;
-                // More comprehensive trust prompt patterns
-                const trustPromptPatterns = [
-                    /Do you trust the files in this folder\?/i,
-                    /Trust the files in this workspace\?/i,
-                    /Do you trust the authors of the files/i,
-                    /Do you want to trust this workspace\?/i,
-                    /trust.*files.*folder/i,
-                    /trust.*workspace/i,
-                    /Do you trust/i,
-                    /Trust this folder/i,
-                    /trust.*directory/i,
-                    /permission.*grant/i,
-                    /allow.*access/i,
-                    /workspace.*trust/i,
-                    /accept.*edits/i, // Claude's accept edits prompt
-                    /permission.*mode/i, // Permission mode prompt
-                    /allow.*claude/i, // Allow Claude prompt
-                    /\[y\/n\]/i, // Common yes/no prompt pattern
-                    /\(y\/n\)/i,
-                    /Yes\/No/i,
-                    /\[Y\/n\]/i, // Default yes pattern
-                    /press.*enter.*accept/i, // Press enter to accept
-                    /press.*enter.*continue/i, // Press enter to continue
-                    /❯\s*1\.\s*Yes,\s*proceed/i, // New Claude numbered menu format
-                    /Enter to confirm.*Esc to exit/i, // New Claude confirmation format
-                    /1\.\s*Yes,\s*proceed/i, // Yes proceed option
-                    /2\.\s*No,\s*exit/i // No exit option
-                ];
-                for (let i = 0; i < maxChecks; i++) {
-                    await new Promise(resolve => setTimeout(resolve, checkInterval));
+        else if (result.type === "choice") {
+            if (!result.options || !result.onSelect)
+                return;
+            const selectedId = await popupManager.launchChoicePopup(result.title || "Choose Option", result.message, result.options);
+            if (selectedId) {
+                const nextResult = await result.onSelect(selectedId);
+                // Recursively handle nested results
+                if (nextResult) {
+                    await handleActionResult(nextResult);
+                }
+            }
+        }
+        else if (result.type === "input") {
+            if (!result.onSubmit)
+                return;
+            const inputValue = await popupManager.launchInputPopup(result.title || "Input", result.message, result.placeholder, result.defaultValue);
+            if (inputValue !== null) {
+                const nextResult = await result.onSubmit(inputValue);
+                // Recursively handle nested results
+                if (nextResult) {
+                    await handleActionResult(nextResult);
+                }
+            }
+        }
+        else if (result.type === "navigation") {
+            // Navigate to target pane if specified
+            if (result.targetPaneId) {
+                const targetPane = panes.find(p => p.id === result.targetPaneId);
+                if (targetPane) {
                     try {
-                        // Capture the pane content
-                        const paneContent = capturePaneContent(paneInfo, 30);
-                        if (i % 10 === 0) { // Log every 10 checks (every second)
-                        }
-                        // Check if content has stabilized (same for 3 checks = prompt is waiting)
-                        if (paneContent === lastContent) {
-                            stableContentCount++;
-                        }
-                        else {
-                            stableContentCount = 0;
-                            lastContent = paneContent;
-                        }
-                        // Look for trust prompt in the current content
-                        const hasTrustPrompt = trustPromptPatterns.some(pattern => pattern.test(paneContent));
-                        // Also check if we see specific Claude permission text
-                        const hasClaudePermissionPrompt = paneContent.includes('Do you trust') ||
-                            paneContent.includes('trust the files') ||
-                            paneContent.includes('permission') ||
-                            paneContent.includes('allow') ||
-                            (paneContent.includes('folder') && paneContent.includes('?'));
-                        if ((hasTrustPrompt || hasClaudePermissionPrompt) && !promptHandled) {
-                            // Content is stable and we found a prompt
-                            if (stableContentCount >= 2) {
-                                // Check if this is the new Claude numbered menu format
-                                const isNewClaudeFormat = /❯\s*1\.\s*Yes,\s*proceed/i.test(paneContent) ||
-                                    /Enter to confirm.*Esc to exit/i.test(paneContent);
-                                if (isNewClaudeFormat) {
-                                    // For new Claude format, just press Enter to confirm default "Yes, proceed"
-                                    execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: 'pipe' });
-                                }
-                                else {
-                                    // Try multiple response methods for older formats
-                                    // Method 1: Send 'y' followed by Enter (most explicit)
-                                    execSync(`tmux send-keys -t '${paneInfo}' 'y'`, { stdio: 'pipe' });
-                                    await new Promise(resolve => setTimeout(resolve, 50));
-                                    execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: 'pipe' });
-                                    // Method 2: Just Enter (if it's a yes/no with default yes)
-                                    await new Promise(resolve => setTimeout(resolve, 100));
-                                    execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: 'pipe' });
-                                }
-                                // Mark as handled to avoid duplicate responses
-                                promptHandled = true;
-                                // Wait and check if prompt is gone
-                                await new Promise(resolve => setTimeout(resolve, 500));
-                                // Verify the prompt is gone
-                                const updatedContent = capturePaneContent(paneInfo, 10);
-                                // If trust prompt is gone, check if we need to resend the Claude command
-                                const promptGone = !trustPromptPatterns.some(p => p.test(updatedContent));
-                                if (promptGone) {
-                                    // Check if Claude is running or if we need to restart it
-                                    const claudeRunning = updatedContent.includes('Claude') ||
-                                        updatedContent.includes('claude') ||
-                                        updatedContent.includes('Assistant') ||
-                                        (prompt && updatedContent.includes(prompt.substring(0, Math.min(20, prompt.length))));
-                                    if (!claudeRunning && !updatedContent.includes('$')) {
-                                        await new Promise(resolve => setTimeout(resolve, 300));
-                                        execSync(`tmux send-keys -t '${paneInfo}' '${escapedCmd}'`, { stdio: 'pipe' });
-                                        execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: 'pipe' });
-                                    }
-                                    break;
-                                }
-                            }
-                        }
-                        // If we see Claude is already running without prompts, we're done
-                        if (!hasTrustPrompt && !hasClaudePermissionPrompt &&
-                            (paneContent.includes('Claude') || paneContent.includes('Assistant'))) {
-                            break;
-                        }
+                        TmuxService.getInstance().selectPane(targetPane.paneId);
                     }
                     catch (error) {
-                        // Continue checking, errors are non-fatal
+                        console.error('[onActionResult] Failed to navigate to pane:', error);
                     }
                 }
-            };
-            // Start monitoring for trust prompt in background
-            autoApproveTrust().catch(err => {
-            });
-        }
-        // Keep focus on the new pane
-        execSync(`tmux select-pane -t '${paneInfo}'`, { stdio: 'pipe' });
-        // Save pane info
-        const newPane = {
-            id: `dmux-${Date.now()}`,
-            slug,
-            prompt: prompt || 'No initial prompt',
-            paneId: paneInfo,
-            worktreePath,
-            agent
-        };
-        const updatedPanes = [...panes, newPane];
-        await savePanes(updatedPanes);
-        // Switch back to the original pane (where dmux is running)
-        execSync(`tmux select-pane -t '${originalPaneId}'`, { stdio: 'pipe' });
-        // Re-set the title for the dmux pane
-        try {
-            execSync(`tmux select-pane -t '${originalPaneId}' -T "dmux-${projectName}"`, { stdio: 'pipe' });
-        }
-        catch {
-            // Ignore if setting title fails
-        }
-        // Clear the screen and redraw the UI
-        process.stdout.write('\x1b[2J\x1b[H');
-        // Reset the creating pane flag and refresh
-        setIsCreatingPane(false);
-        setStatusMessage('');
-        setNewPanePrompt('');
-        // Force a reload of panes to ensure UI is up to date
-        await loadPanes();
-    };
-    const jumpToPane = (paneId) => {
-        try {
-            // Enable pane borders to show titles (if not already enabled)
-            try {
-                execSync(`tmux set-option -g pane-border-status top`, { stdio: 'pipe' });
             }
-            catch {
-                // Ignore if already set or fails
+            // Show message if dismissable
+            if (result.message && result.dismissable) {
+                await popupManager.launchProgressPopup(result.message, "info", 3000);
             }
-            execSync(`tmux select-pane -t '${paneId}'`, { stdio: 'pipe' });
-            // Clear screen after jump to remove artifacts
-            clearScreen();
-            setStatusMessage('Jumped to pane');
-            setTimeout(() => setStatusMessage(''), 2000);
         }
-        catch {
-            setStatusMessage('Failed to jump - pane may be closed');
-            setTimeout(() => setStatusMessage(''), 2000);
+        else if (result.type === "info" ||
+            result.type === "success" ||
+            result.type === "error") {
+            await popupManager.launchProgressPopup(result.message, result.type, 3000);
         }
     };
-    const runCommand = async (type, pane) => {
-        if (!pane.worktreePath) {
-            setStatusMessage('No worktree path for this pane');
-            setTimeout(() => setStatusMessage(''), 2000);
-            return;
-        }
-        const command = type === 'test' ? projectSettings.testCommand : projectSettings.devCommand;
-        const isFirstRun = type === 'test' ? !projectSettings.firstTestRun : !projectSettings.firstDevRun;
-        if (!command) {
-            // No command configured, prompt user
-            setShowCommandPrompt(type);
-            return;
-        }
-        // Check if this is the first run and offer to copy non-git files
-        if (isFirstRun) {
-            // Show file copy prompt and wait for response
-            setShowFileCopyPrompt(true);
-            setCurrentCommandType(type);
-            setStatusMessage(`First time running ${type} command...`);
-            // Return here - the actual command will be run after user responds to prompt
-            return;
-        }
-        try {
-            setRunningCommand(true);
-            setStatusMessage(`Starting ${type} in background window...`);
-            // Kill existing window if present
-            const existingWindowId = type === 'test' ? pane.testWindowId : pane.devWindowId;
-            if (existingWindowId) {
-                try {
-                    execSync(`tmux kill-window -t '${existingWindowId}'`, { stdio: 'pipe' });
-                }
-                catch { }
-            }
-            // Create a new background window for the command
-            const windowName = `${pane.slug}-${type}`;
-            const windowId = execSync(`tmux new-window -d -n '${windowName}' -P -F '#{window_id}'`, { encoding: 'utf-8', stdio: 'pipe' }).trim();
-            // Create a log file to capture output
-            const logFile = `/tmp/dmux-${pane.id}-${type}.log`;
-            // Build the command with output capture
-            const fullCommand = type === 'test'
-                ? `cd "${pane.worktreePath}" && ${command} 2>&1 | tee ${logFile}`
-                : `cd "${pane.worktreePath}" && ${command} 2>&1 | tee ${logFile}`;
-            // Send the command to the new window
-            execSync(`tmux send-keys -t '${windowId}' '${fullCommand.replace(/'/g, "'\\''")}'`, { stdio: 'pipe' });
-            execSync(`tmux send-keys -t '${windowId}' Enter`, { stdio: 'pipe' });
-            // Update pane with window info
-            const updatedPane = {
-                ...pane,
-                [type === 'test' ? 'testWindowId' : 'devWindowId']: windowId,
-                [type === 'test' ? 'testStatus' : 'devStatus']: 'running'
-            };
-            const updatedPanes = panes.map(p => p.id === pane.id ? updatedPane : p);
-            await savePanes(updatedPanes);
-            // Start monitoring the output
-            if (type === 'test') {
-                // For tests, monitor for completion
-                setTimeout(() => monitorTestOutput(pane.id, logFile), 2000);
-            }
-            else {
-                // For dev, monitor for server URL
-                setTimeout(() => monitorDevOutput(pane.id, logFile), 2000);
+    // Action system - initialized after services are defined
+    const actionSystem = useActionSystem({
+        panes,
+        savePanes,
+        sessionName,
+        projectName,
+        onPaneRemove: async (paneId) => {
+            // Mark pane as closing to prevent race condition with worker
+            await lifecycleManager.beginClose(paneId, 'user requested');
+            // Remove from panes list
+            const updatedPanes = panes.filter((p) => p.paneId !== paneId);
+            savePanes(updatedPanes);
+            // Mark close as completed (no more lock needed)
+            await lifecycleManager.completeClose(paneId);
+        },
+        onActionResult: handleActionResult,
+        forceRepaint,
+        popupLaunchers: popupsSupported
+            ? {
+                launchConfirmPopup: popupManager.launchConfirmPopup.bind(popupManager),
+                launchChoicePopup: popupManager.launchChoicePopup.bind(popupManager),
+                launchInputPopup: popupManager.launchInputPopup.bind(popupManager),
+                launchProgressPopup: popupManager.launchProgressPopup.bind(popupManager),
+            }
+            : undefined,
+    });
+    // Auto-show new pane dialog removed - users can press 'n' to create panes via popup
+    // Periodic enforcement of control pane size and content pane rebalancing (left sidebar at 40 chars)
+    useLayoutManagement({
+        controlPaneId,
+        hasActiveDialog: actionSystem.actionState.showConfirmDialog ||
+            actionSystem.actionState.showChoiceDialog ||
+            actionSystem.actionState.showInputDialog ||
+            actionSystem.actionState.showProgressDialog ||
+            !!showCommandPrompt ||
+            showFileCopyPrompt ||
+            isCreatingPane ||
+            runningCommand ||
+            isUpdating,
+        onForceRepaint: forceRepaint,
+    });
+    // Monitor agent status across panes (returns a map of pane ID to status)
+    const agentStatuses = useAgentStatus({
+        panes,
+        suspend: actionSystem.actionState.showConfirmDialog ||
+            actionSystem.actionState.showChoiceDialog ||
+            actionSystem.actionState.showInputDialog ||
+            actionSystem.actionState.showProgressDialog ||
+            !!showCommandPrompt ||
+            showFileCopyPrompt,
+        onPaneRemoved: (paneId) => {
+            // Check if this pane is being closed intentionally or is locked
+            // If so, don't re-save - the close action already handled it
+            if (lifecycleManager.isClosing(paneId) || lifecycleManager.isLocked(paneId)) {
+                return;
             }
-            setRunningCommand(false);
-            setStatusMessage(`${type === 'test' ? 'Test' : 'Dev server'} started in background`);
-            setTimeout(() => setStatusMessage(''), 3000);
-        }
-        catch (error) {
-            setRunningCommand(false);
-            setStatusMessage(`Failed to run ${type} command`);
-            setTimeout(() => setStatusMessage(''), 3000);
-        }
-    };
+            // Pane was removed unexpectedly (e.g., user killed tmux pane manually)
+            // Remove it from our tracking
+            const updatedPanes = panes.filter((p) => p.id !== paneId);
+            savePanes(updatedPanes);
+        },
+    });
+    // jumpToPane and runCommand functions removed - now handled by action system and pane runner
     // Update handling moved to useAutoUpdater
-    // Helper function to clear screen artifacts
-    const clearScreen = () => {
-        // CRITICAL: Force Ink to re-render FIRST, before clearing
-        // This prevents blank screen by ensuring React starts rendering immediately
-        setForceRepaintTrigger(prev => prev + 1);
-        // Multiple clearing strategies to prevent artifacts
-        // 1. Clear screen with ANSI codes
-        process.stdout.write('\x1b[2J\x1b[H');
-        // 2. Clear tmux history
-        try {
-            execSync('tmux clear-history', { stdio: 'pipe' });
-        }
-        catch { }
-        // 3. Force tmux to refresh the display
-        try {
-            execSync('tmux refresh-client', { stdio: 'pipe' });
-        }
-        catch { }
-    };
+    // clearScreen function removed - no longer used (was only used by removed jumpToPane function)
     // Cleanup function for exit
     const cleanExit = () => {
         // Clear screen before exiting Ink
-        process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
+        process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
         // Exit the Ink app (this cleans up the React tree)
         exit();
         // Give Ink a moment to clean up its rendering, then do final cleanup
-        setTimeout(() => {
+        setTimeout(async () => {
             // Multiple aggressive clearing strategies
-            process.stdout.write('\x1b[2J\x1b[H'); // Clear screen and move cursor to home
-            process.stdout.write('\x1b[3J'); // Clear scrollback buffer
-            process.stdout.write('\x1b[0m'); // Reset all attributes
+            process.stdout.write("\x1b[2J\x1b[H"); // Clear screen and move cursor to home
+            process.stdout.write("\x1b[3J"); // Clear scrollback buffer
+            process.stdout.write("\x1b[0m"); // Reset all attributes
             // Clear tmux history and pane
             try {
-                execSync('tmux clear-history', { stdio: 'pipe' });
-                execSync('tmux send-keys C-l', { stdio: 'pipe' });
+                const tmuxService = TmuxService.getInstance();
+                tmuxService.clearHistorySync();
+                await tmuxService.sendKeys("", "C-l");
             }
             catch { }
             // One more final clear
-            process.stdout.write('\x1b[2J\x1b[H');
+            process.stdout.write("\x1b[2J\x1b[H");
             // Show clean goodbye message
-            process.stdout.write('\n  Run dmux again to resume. Goodbye 👋\n\n');
+            process.stdout.write("\n  Run dmux again to resume. Goodbye 👋\n\n");
             // Exit process
             process.exit(0);
         }, 100);
     };
-    useInput(async (input, key) => {
-        // Handle Ctrl+C for quit confirmation (must be first, before any other checks)
-        if (key.ctrl && input === 'c') {
-            if (quitConfirmMode) {
-                // Second Ctrl+C - actually quit
-                cleanExit();
-            }
-            else {
-                // First Ctrl+C - show confirmation
-                setQuitConfirmMode(true);
-                // Reset after 3 seconds if user doesn't press Ctrl+C again
-                setTimeout(() => {
-                    setQuitConfirmMode(false);
-                }, 3000);
-            }
-            return;
-        }
-        if (isCreatingPane || runningCommand || isUpdating || isLoading || isCreatingTunnel) {
-            // Disable input while performing operations or loading
-            return;
-        }
-        // Handle kebab menu navigation
-        if (showKebabMenu && kebabMenuPaneIndex !== null) {
-            const currentPane = panes[kebabMenuPaneIndex];
-            const availableActions = kebabMenuActions;
-            if (key.escape) {
-                setShowKebabMenu(false);
-                setKebabMenuPaneIndex(null);
-                setKebabMenuOption(0);
-                setKebabMenuActions([]);
-                return;
-            }
-            else if (key.upArrow) {
-                setKebabMenuOption(Math.max(0, kebabMenuOption - 1));
-                return;
-            }
-            else if (key.downArrow) {
-                setKebabMenuOption(Math.min(availableActions.length - 1, kebabMenuOption + 1));
-                return;
-            }
-            else if (key.return) {
-                // Execute the selected menu action
-                setShowKebabMenu(false);
-                const selectedAction = availableActions[kebabMenuOption];
-                if (selectedAction) {
-                    // Use the action system to execute
-                    actionSystem.executeAction(selectedAction.id, currentPane, { mainBranch: getMainBranch() });
-                }
-                setKebabMenuPaneIndex(null);
-                setKebabMenuOption(0);
-                setKebabMenuActions([]);
-                return;
-            }
-            // Don't process other inputs while menu is open
-            return;
-        }
-        // Handle quit confirm mode - ESC cancels it
-        if (quitConfirmMode) {
-            if (key.escape) {
-                setQuitConfirmMode(false);
-                return;
-            }
-            // Allow other inputs to continue (don't return early)
-        }
-        // Handle QR code view
-        if (showQRCode) {
-            if (key.escape) {
-                setShowQRCode(false);
-            }
-            return;
-        }
-        // Handle hooks dialog
-        if (showHooksDialog) {
-            if (key.escape) {
-                setShowHooksDialog(false);
-                setHooksSelectedIndex(0);
-                // Go back to settings dialog
-                setShowSettingsDialog(true);
-                setSettingsMode('list');
-                return;
-            }
-            else if (key.upArrow) {
-                setHooksSelectedIndex(Math.max(0, hooksSelectedIndex - 1));
-                return;
-            }
-            else if (key.downArrow) {
-                setHooksSelectedIndex(Math.min(hooksData.length - 1, hooksSelectedIndex + 1));
-                return;
-            }
-            else if (input === 'e') {
-                // Edit hooks using an agent
-                setShowHooksDialog(false);
-                setHooksSelectedIndex(0);
-                const prompt = "I would like to edit my dmux hooks in .dmux-hooks, please read the instructions in there and ask me what I want to edit";
-                setPendingPrompt(prompt);
-                setNewPanePrompt(prompt);
-                // Choose agent
-                const agents = availableAgents;
-                if (agents.length === 0) {
-                    createNewPaneHook(prompt);
-                }
-                else if (agents.length === 1) {
-                    createNewPaneHook(prompt, agents[0]);
-                }
-                else {
-                    setShowAgentChoiceDialog(true);
-                    setAgentChoice(agentChoice || 'claude');
-                }
-                return;
-            }
-            return;
-        }
-        // Handle settings dialog
-        if (showSettingsDialog) {
-            if (key.escape) {
-                if (settingsMode === 'list') {
-                    // Close settings dialog
-                    setShowSettingsDialog(false);
-                    setSettingsMode('list');
-                    setSettingsSelectedIndex(0);
-                    setSettingsEditingKey(undefined);
-                }
-                else {
-                    // Go back to list
-                    setSettingsMode('list');
-                    setSettingsEditingKey(undefined);
-                    setSettingsEditingValueIndex(0);
-                    setSettingsScopeIndex(0);
-                }
-                return;
-            }
-            else if (key.upArrow) {
-                if (settingsMode === 'list') {
-                    setSettingsSelectedIndex(Math.max(0, settingsSelectedIndex - 1));
-                }
-                else if (settingsMode === 'edit') {
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    const maxIndex = currentDef.type === 'boolean' ? 1 : (currentDef.options?.length || 1) - 1;
-                    setSettingsEditingValueIndex(Math.max(0, settingsEditingValueIndex - 1));
-                }
-                else if (settingsMode === 'scope') {
-                    setSettingsScopeIndex(Math.max(0, settingsScopeIndex - 1));
-                }
-                return;
-            }
-            else if (key.downArrow) {
-                if (settingsMode === 'list') {
-                    setSettingsSelectedIndex(Math.min(SETTING_DEFINITIONS.length - 1, settingsSelectedIndex + 1));
-                }
-                else if (settingsMode === 'edit') {
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    const maxIndex = currentDef.type === 'boolean' ? 1 : (currentDef.options?.length || 1) - 1;
-                    setSettingsEditingValueIndex(Math.min(maxIndex, settingsEditingValueIndex + 1));
-                }
-                else if (settingsMode === 'scope') {
-                    setSettingsScopeIndex(Math.min(1, settingsScopeIndex + 1));
-                }
-                return;
-            }
-            else if (key.return) {
-                if (settingsMode === 'list') {
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    // Handle action type - trigger the action instead of editing
-                    if (currentDef.type === 'action') {
-                        if (currentDef.key === 'hooks') {
-                            // Show hooks dialog
-                            setShowSettingsDialog(false);
-                            const { hasHook } = await import('./utils/hooks.js');
-                            const allHookTypes = [
-                                'before_pane_create',
-                                'pane_created',
-                                'worktree_created',
-                                'before_pane_close',
-                                'pane_closed',
-                                'before_worktree_remove',
-                                'worktree_removed',
-                                'pre_merge',
-                                'post_merge',
-                                'run_test',
-                                'run_dev',
-                            ];
-                            const hooks = allHookTypes.map(hookName => ({
-                                name: hookName,
-                                active: hasHook(projectRoot || process.cwd(), hookName)
-                            }));
-                            setHooksData(hooks);
-                            setShowHooksDialog(true);
-                            setHooksSelectedIndex(0);
-                        }
-                        return;
-                    }
-                    // Enter edit mode for regular settings
-                    setSettingsEditingKey(currentDef.key);
-                    setSettingsMode('edit');
-                    // Set initial value index based on current setting
-                    const currentValue = settingsManager.getSetting(currentDef.key);
-                    if (currentDef.type === 'boolean') {
-                        setSettingsEditingValueIndex(currentValue ? 0 : 1);
-                    }
-                    else if (currentDef.type === 'select' && currentDef.options) {
-                        const optIndex = currentDef.options.findIndex(o => o.value === currentValue);
-                        setSettingsEditingValueIndex(Math.max(0, optIndex));
-                    }
-                }
-                else if (settingsMode === 'edit') {
-                    // Go to scope selection
-                    setSettingsMode('scope');
-                    setSettingsScopeIndex(0);
-                }
-                else if (settingsMode === 'scope') {
-                    // Save the setting
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    const scope = settingsScopeIndex === 0 ? 'global' : 'project';
-                    // Only save if this is not an action type (actions don't have values)
-                    if (currentDef.type !== 'action') {
-                        // Calculate the new value
-                        let newValue;
-                        if (currentDef.type === 'boolean') {
-                            newValue = settingsEditingValueIndex === 0;
-                        }
-                        else if (currentDef.type === 'select' && currentDef.options) {
-                            newValue = currentDef.options[settingsEditingValueIndex]?.value || '';
-                        }
-                        // Update the setting - cast key to proper type since we know it's not an action
-                        settingsManager.updateSetting(currentDef.key, newValue, scope);
-                    }
-                    // Reset to list view
-                    setSettingsMode('list');
-                    setSettingsEditingKey(undefined);
-                    setSettingsEditingValueIndex(0);
-                    setSettingsScopeIndex(0);
-                    setStatusMessage(`Setting saved (${scope})`);
-                    setTimeout(() => setStatusMessage(''), 2000);
-                }
-                return;
-            }
-            return;
-        }
-        // Handle action system confirm dialog
-        if (actionSystem.actionState.showConfirmDialog) {
-            if (key.escape) {
-                if (actionSystem.actionState.onConfirmNo) {
-                    actionSystem.executeCallback(actionSystem.actionState.onConfirmNo);
-                }
-                else {
-                    actionSystem.setActionState(prev => ({ ...prev, showConfirmDialog: false }));
-                }
-                return;
-            }
-            else if (key.upArrow) {
-                actionSystem.setActionState(prev => ({
-                    ...prev,
-                    confirmSelectedIndex: Math.max(0, prev.confirmSelectedIndex - 1)
-                }));
-                return;
-            }
-            else if (key.downArrow) {
-                actionSystem.setActionState(prev => ({
-                    ...prev,
-                    confirmSelectedIndex: Math.min(1, prev.confirmSelectedIndex + 1)
-                }));
-                return;
-            }
-            else if (key.return) {
-                // Execute based on selected index
-                if (actionSystem.actionState.confirmSelectedIndex === 0) {
-                    if (actionSystem.actionState.onConfirmYes) {
-                        actionSystem.executeCallback(actionSystem.actionState.onConfirmYes);
-                    }
-                }
-                else {
-                    if (actionSystem.actionState.onConfirmNo) {
-                        actionSystem.executeCallback(actionSystem.actionState.onConfirmNo);
-                    }
-                    else {
-                        actionSystem.setActionState(prev => ({ ...prev, showConfirmDialog: false }));
-                    }
-                }
-                return;
-            }
-            else if (input === 'y' || input === 'Y') {
-                // Shortcut: yes
-                if (actionSystem.actionState.onConfirmYes) {
-                    actionSystem.executeCallback(actionSystem.actionState.onConfirmYes);
-                }
-                return;
-            }
-            else if (input === 'n' || input === 'N') {
-                // Shortcut: no
-                if (actionSystem.actionState.onConfirmNo) {
-                    actionSystem.executeCallback(actionSystem.actionState.onConfirmNo);
-                }
-                else {
-                    actionSystem.setActionState(prev => ({ ...prev, showConfirmDialog: false }));
-                }
-                return;
-            }
-            return;
-        }
-        // Handle action system input dialog
-        if (actionSystem.actionState.showInputDialog) {
-            if (key.escape) {
-                actionSystem.setActionState(prev => ({ ...prev, showInputDialog: false }));
-                return;
-            }
-            else if (key.return) {
-                if (actionSystem.actionState.onInputSubmit) {
-                    actionSystem.executeCallback(async () => actionSystem.actionState.onInputSubmit(actionSystem.actionState.inputValue));
-                }
-                return;
-            }
-            // Let CleanTextInput handle all other key events
-            return;
-        }
-        // Handle action system choice dialog
-        if (actionSystem.actionState.showChoiceDialog) {
-            if (key.escape) {
-                actionSystem.setActionState(prev => ({ ...prev, showChoiceDialog: false }));
-                return;
-            }
-            else if (key.upArrow) {
-                actionSystem.setActionState(prev => ({
-                    ...prev,
-                    choiceSelectedIndex: Math.max(0, prev.choiceSelectedIndex - 1)
-                }));
-                return;
-            }
-            else if (key.downArrow) {
-                const maxIndex = actionSystem.actionState.choiceOptions.length - 1;
-                actionSystem.setActionState(prev => ({
-                    ...prev,
-                    choiceSelectedIndex: Math.min(maxIndex, prev.choiceSelectedIndex + 1)
-                }));
-                return;
-            }
-            else if (key.return) {
-                const selectedOption = actionSystem.actionState.choiceOptions[actionSystem.actionState.choiceSelectedIndex];
-                if (selectedOption && actionSystem.actionState.onChoiceSelect) {
-                    actionSystem.executeCallback(async () => actionSystem.actionState.onChoiceSelect(selectedOption.id));
-                }
-                return;
-            }
-            return;
-        }
-        if (showFileCopyPrompt) {
-            if (input === 'y' || input === 'Y') {
-                setShowFileCopyPrompt(false);
-                const selectedPane = panes[selectedIndex];
-                if (selectedPane && selectedPane.worktreePath && currentCommandType) {
-                    await copyNonGitFiles(selectedPane.worktreePath);
-                    // Mark as not first run and continue with command
-                    const newSettings = {
-                        ...projectSettings,
-                        [currentCommandType === 'test' ? 'firstTestRun' : 'firstDevRun']: true
-                    };
-                    await saveSettings(newSettings);
-                    // Now run the actual command
-                    await runCommandInternal(currentCommandType, selectedPane);
-                }
-                setCurrentCommandType(null);
-            }
-            else if (input === 'n' || input === 'N' || key.escape) {
-                setShowFileCopyPrompt(false);
-                const selectedPane = panes[selectedIndex];
-                if (selectedPane && currentCommandType) {
-                    // Mark as not first run and continue without copying
-                    const newSettings = {
-                        ...projectSettings,
-                        [currentCommandType === 'test' ? 'firstTestRun' : 'firstDevRun']: true
-                    };
-                    await saveSettings(newSettings);
-                    // Now run the actual command
-                    await runCommandInternal(currentCommandType, selectedPane);
-                }
-                setCurrentCommandType(null);
-            }
-            return;
-        }
-        if (showAgentChoiceDialog) {
-            if (key.escape) {
-                setShowAgentChoiceDialog(false);
-                setShowNewPaneDialog(true);
-                setNewPanePrompt(pendingPrompt);
-                setPendingPrompt('');
-            }
-            else if (key.leftArrow || input === '1' || (input && input.toLowerCase() === 'c')) {
-                setAgentChoice('claude');
-            }
-            else if (key.rightArrow || input === '2' || (input && input.toLowerCase() === 'o')) {
-                setAgentChoice('opencode');
-            }
-            else if (key.return) {
-                const chosen = agentChoice || (availableAgents[0] || 'claude');
-                const promptValue = pendingPrompt;
-                setShowAgentChoiceDialog(false);
-                setPendingPrompt('');
-                await createNewPaneHook(promptValue, chosen);
-                setNewPanePrompt('');
-            }
-            return;
-        }
-        if (showCommandPrompt) {
-            if (key.escape) {
-                setShowCommandPrompt(null);
-                setCommandInput('');
-            }
-            else if (key.return) {
-                if (commandInput.trim() === '') {
-                    // If empty, suggest a default command based on package manager
-                    const suggested = await suggestCommand(showCommandPrompt);
-                    if (suggested) {
-                        setCommandInput(suggested);
-                    }
-                }
-                else {
-                    // User provided manual command
-                    const newSettings = {
-                        ...projectSettings,
-                        [showCommandPrompt === 'test' ? 'testCommand' : 'devCommand']: commandInput.trim()
-                    };
-                    await saveSettings(newSettings);
-                    const selectedPane = panes[selectedIndex];
-                    if (selectedPane) {
-                        // Check if first run
-                        const isFirstRun = showCommandPrompt === 'test' ? !projectSettings.firstTestRun : !projectSettings.firstDevRun;
-                        if (isFirstRun) {
-                            setCurrentCommandType(showCommandPrompt);
-                            setShowCommandPrompt(null);
-                            setShowFileCopyPrompt(true);
-                        }
-                        else {
-                            await runCommandInternal(showCommandPrompt, selectedPane);
-                            setShowCommandPrompt(null);
-                            setCommandInput('');
-                        }
-                    }
-                    else {
-                        setShowCommandPrompt(null);
-                        setCommandInput('');
-                    }
-                }
-            }
-            return;
-        }
-        if (showNewPaneDialog) {
-            if (key.escape) {
-                setShowNewPaneDialog(false);
-                setNewPanePrompt('');
-            }
-            // TextInput handles other input events
-            return;
-        }
-        // Handle directional navigation with spatial awareness based on card grid layout
-        if (key.upArrow || key.downArrow || key.leftArrow || key.rightArrow) {
-            let targetIndex = null;
-            if (key.upArrow) {
-                targetIndex = findCardInDirection(selectedIndex, 'up');
-            }
-            else if (key.downArrow) {
-                targetIndex = findCardInDirection(selectedIndex, 'down');
-            }
-            else if (key.leftArrow) {
-                targetIndex = findCardInDirection(selectedIndex, 'left');
-            }
-            else if (key.rightArrow) {
-                targetIndex = findCardInDirection(selectedIndex, 'right');
-            }
-            if (targetIndex !== null) {
-                setSelectedIndex(targetIndex);
-            }
-            return;
-        }
-        if ((input === 'm' || key.return) && selectedIndex < panes.length) {
-            // Open kebab menu for selected pane
-            const selectedPane = panes[selectedIndex];
-            const actions = getAvailableActions(selectedPane, projectSettings);
-            setKebabMenuActions(actions);
-            setShowKebabMenu(true);
-            setKebabMenuPaneIndex(selectedIndex);
-            setKebabMenuOption(0);
-        }
-        else if (input === 's') {
-            // Open settings dialog
-            setShowSettingsDialog(true);
-            setSettingsMode('list');
-            setSettingsSelectedIndex(0);
-        }
-        else if (input === 'q') {
-            cleanExit();
-        }
-        else if (input === 'r' && server) {
-            // Create tunnel if not already created, then show QR code
-            if (!tunnelUrl) {
-                setIsCreatingTunnel(true);
-                setStatusMessage('Creating tunnel...');
-                try {
-                    const url = await server.startTunnel();
-                    setTunnelUrl(url);
-                    setStatusMessage('');
-                    setShowQRCode(true);
-                }
-                catch (error) {
-                    setStatusMessage('Failed to create tunnel');
-                    setTimeout(() => setStatusMessage(''), 3000);
-                }
-                finally {
-                    setIsCreatingTunnel(false);
-                }
-            }
-            else {
-                // Tunnel already exists, just show the QR code
-                setShowQRCode(true);
-            }
+    // Input handling - extracted to dedicated hook
+    useInputHandling({
+        panes,
+        selectedIndex,
+        setSelectedIndex,
+        isCreatingPane,
+        setIsCreatingPane,
+        runningCommand,
+        isUpdating,
+        isLoading,
+        ignoreInput,
+        quitConfirmMode,
+        setQuitConfirmMode,
+        showCommandPrompt,
+        setShowCommandPrompt,
+        commandInput,
+        setCommandInput,
+        showFileCopyPrompt,
+        setShowFileCopyPrompt,
+        currentCommandType,
+        setCurrentCommandType,
+        projectSettings,
+        saveSettings,
+        settingsManager,
+        tunnelUrl,
+        setTunnelUrl,
+        tunnelCreating,
+        setTunnelCreating,
+        setTunnelCopied,
+        popupManager,
+        actionSystem,
+        server,
+        controlPaneId,
+        setStatusMessage,
+        copyNonGitFiles,
+        runCommandInternal,
+        handlePaneCreationWithAgent,
+        loadPanes,
+        cleanExit,
+        findCardInDirection,
+    });
+    // Calculate available height for content (terminal height - footer lines - active status messages)
+    // Footer height varies based on state:
+    // - Quit confirm mode: 2 lines (marginTop + 1 text line)
+    // - Normal mode calculation:
+    //   - Base: 4 lines (marginTop + logs divider + logs line + keyboard shortcuts)
+    //   - Network section: +4 lines (divider, local IP, remote tunnel, divider) if serverPort exists
+    //   - Debug info: +1 line if DEBUG_DMUX
+    //   - Status line: +1 line if updateAvailable/currentBranch/debugMessage
+    //   - Status messages: +1 line per active message
+    let footerLines = 2;
+    if (quitConfirmMode) {
+        footerLines = 2;
+    }
+    else {
+        // Base footer (logs divider + logs + shortcuts - always shown)
+        footerLines = 4; // marginTop + logs divider + logs + shortcuts
+        // Add network section (now 2 lines for local IP + remote tunnel, plus 2 dividers)
+        if (serverPort && serverPort > 0) {
+            footerLines += 4;
         }
-        else if (!isLoading && (input === 'n' || (key.return && selectedIndex === panes.length))) {
-            // Clear the prompt and show dialog in next tick to prevent 'n' bleeding through
-            setNewPanePrompt('');
-            setShowNewPaneDialog(true);
-            return; // Consume the 'n' keystroke so it doesn't propagate
+        // Add debug info
+        if (process.env.DEBUG_DMUX) {
+            footerLines += 1;
         }
-        else if (input === 'j' && selectedIndex < panes.length) {
-            // Jump to pane (NEW: using action system)
-            StateManager.getInstance().setDebugMessage(`Jumping to pane: ${panes[selectedIndex].slug}`);
-            setTimeout(() => StateManager.getInstance().setDebugMessage(''), 2000);
-            actionSystem.executeAction(PaneAction.VIEW, panes[selectedIndex]);
+        // Add status line
+        if (updateAvailable || currentBranch || debugMessage) {
+            footerLines += 1;
         }
-        else if (input === 'x' && selectedIndex < panes.length) {
-            // Close pane (NEW: using action system)
-            StateManager.getInstance().setDebugMessage(`Closing pane: ${panes[selectedIndex].slug}`);
-            setTimeout(() => StateManager.getInstance().setDebugMessage(''), 2000);
-            actionSystem.executeAction(PaneAction.CLOSE, panes[selectedIndex]);
+        // Add line for each active status message
+        if (statusMessage) {
+            footerLines += 1;
         }
-        else if (key.return && selectedIndex < panes.length) {
-            // Jump to pane (NEW: using action system)
-            StateManager.getInstance().setDebugMessage(`Jumping to pane: ${panes[selectedIndex].slug}`);
-            setTimeout(() => StateManager.getInstance().setDebugMessage(''), 2000);
-            actionSystem.executeAction(PaneAction.VIEW, panes[selectedIndex]);
+        if (actionSystem.actionState.statusMessage) {
+            footerLines += 1;
         }
-    });
-    // If showing QR code, render only that
-    if (showQRCode && tunnelUrl) {
-        return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { bold: true, color: "cyan" }, "dmux - Remote Access")),
-            React.createElement(QRCode, { url: tunnelUrl }),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { dimColor: true }, "Press ESC to return to pane list"))));
     }
-    return (React.createElement(Box, { flexDirection: "column" },
+    const contentHeight = Math.max(terminalHeight - footerLines, 10);
+    return (React.createElement(Box, { flexDirection: "column", height: terminalHeight },
         showRepaintSpinner && (React.createElement(Box, { marginTop: -10, marginLeft: -100 },
             React.createElement(Text, null, "\u27F3"))),
-        React.createElement(PanesGrid, { panes: panes, selectedIndex: selectedIndex, isLoading: isLoading, showNewPaneDialog: showNewPaneDialog, agentStatuses: agentStatuses, kebabMenuPaneIndex: kebabMenuPaneIndex ?? undefined }),
-        isLoading && (React.createElement(LoadingIndicator, null)),
-        showNewPaneDialog && !showAgentChoiceDialog && (React.createElement(NewPaneDialog, { value: newPanePrompt, onChange: setNewPanePrompt, onSubmit: (value) => {
-                const promptValue = value;
-                const agents = availableAgents;
-                if (agents.length === 0) {
-                    setShowNewPaneDialog(false);
-                    setNewPanePrompt('');
-                    createNewPaneHook(promptValue);
-                }
-                else if (agents.length === 1) {
-                    setShowNewPaneDialog(false);
-                    setNewPanePrompt('');
-                    createNewPaneHook(promptValue, agents[0]);
-                }
-                else {
-                    setPendingPrompt(promptValue);
-                    setShowNewPaneDialog(false);
-                    setNewPanePrompt('');
-                    setShowAgentChoiceDialog(true);
-                    setAgentChoice(agentChoice || 'claude');
-                }
-            } })),
-        showAgentChoiceDialog && (React.createElement(AgentChoiceDialog, { agentChoice: agentChoice })),
-        isCreatingPane && (React.createElement(CreatingIndicator, { message: statusMessage })),
-        showCommandPrompt && (React.createElement(CommandPromptDialog, { type: showCommandPrompt, value: commandInput, onChange: setCommandInput })),
-        showFileCopyPrompt && (React.createElement(FileCopyPrompt, null)),
-        showKebabMenu && kebabMenuPaneIndex !== null && panes[kebabMenuPaneIndex] && (React.createElement(KebabMenu, { selectedOption: kebabMenuOption, actions: kebabMenuActions, paneName: panes[kebabMenuPaneIndex].slug })),
-        showSettingsDialog && (React.createElement(SettingsDialog, { settings: settingsManager.getSettings(), globalSettings: settingsManager.getGlobalSettings(), projectSettings: settingsManager.getProjectSettings(), settingDefinitions: SETTING_DEFINITIONS, selectedIndex: settingsSelectedIndex, mode: settingsMode, editingKey: settingsEditingKey, editingValueIndex: settingsEditingValueIndex, scopeIndex: settingsScopeIndex })),
-        showHooksDialog && (React.createElement(HooksDialog, { hooks: hooksData, selectedIndex: hooksSelectedIndex })),
-        actionSystem.actionState.showConfirmDialog && (React.createElement(ActionConfirmDialog, { key: "confirm-dialog", title: actionSystem.actionState.confirmTitle, message: actionSystem.actionState.confirmMessage, yesLabel: actionSystem.actionState.confirmYesLabel, noLabel: actionSystem.actionState.confirmNoLabel, selectedIndex: actionSystem.actionState.confirmSelectedIndex })),
-        actionSystem.actionState.showChoiceDialog && (React.createElement(ActionChoiceDialog, { key: "choice-dialog", title: actionSystem.actionState.choiceTitle, message: actionSystem.actionState.choiceMessage, options: actionSystem.actionState.choiceOptions, selectedIndex: actionSystem.actionState.choiceSelectedIndex })),
-        actionSystem.actionState.showInputDialog && (React.createElement(ActionInputDialog, { key: "input-dialog", title: actionSystem.actionState.inputTitle, message: actionSystem.actionState.inputMessage, placeholder: actionSystem.actionState.inputPlaceholder, value: actionSystem.actionState.inputValue, onValueChange: (value) => {
-                actionSystem.setActionState(prev => ({ ...prev, inputValue: value }));
-            } })),
-        actionSystem.actionState.showProgressDialog && (React.createElement(ActionProgressDialog, { key: "progress-dialog", message: actionSystem.actionState.progressMessage, percent: actionSystem.actionState.progressPercent })),
-        runningCommand && (React.createElement(RunningIndicator, null)),
-        isUpdating && (React.createElement(UpdatingIndicator, null)),
-        isCreatingTunnel && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", padding: 1, marginTop: 1 },
-            React.createElement(Text, { bold: true, color: "cyan" }, "Creating tunnel..."),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { dimColor: true }, "This may take a few moments...")))),
-        statusMessage && (React.createElement(Box, { marginTop: 1 },
+        React.createElement(Box, { flexDirection: "column", height: contentHeight, overflow: "hidden" },
+            React.createElement(PanesGrid, { panes: panes, selectedIndex: selectedIndex, isLoading: isLoading, agentStatuses: agentStatuses }),
+            isLoading && React.createElement(LoadingIndicator, null),
+            showCommandPrompt && (React.createElement(CommandPromptDialog, { type: showCommandPrompt, value: commandInput, onChange: setCommandInput })),
+            showFileCopyPrompt && React.createElement(FileCopyPrompt, null),
+            runningCommand && React.createElement(RunningIndicator, null),
+            isUpdating && React.createElement(UpdatingIndicator, null)),
+        statusMessage && (React.createElement(Box, null,
             React.createElement(Text, { color: "green" }, statusMessage))),
-        actionSystem.actionState.statusMessage && (React.createElement(Box, { marginTop: 1 },
-            React.createElement(Text, { color: actionSystem.actionState.statusType === 'error' ? 'red' :
-                    actionSystem.actionState.statusType === 'success' ? 'green' :
-                        'cyan' }, actionSystem.actionState.statusMessage))),
-        React.createElement(FooterHelp, { show: !showNewPaneDialog && !showCommandPrompt, showRemoteKey: !!server, quitConfirmMode: quitConfirmMode, gridInfo: (() => {
+        actionSystem.actionState.statusMessage && (React.createElement(Box, null,
+            React.createElement(Text, { color: actionSystem.actionState.statusType === "error"
+                    ? "red"
+                    : actionSystem.actionState.statusType === "success"
+                        ? "green"
+                        : "cyan" }, actionSystem.actionState.statusMessage))),
+        React.createElement(FooterHelp, { show: !showCommandPrompt, showRemoteKey: !!server, quitConfirmMode: quitConfirmMode, hasSidebarLayout: !!controlPaneId, serverPort: serverPort, unreadErrorCount: unreadErrorCount, unreadWarningCount: unreadWarningCount, localIp: localIp, tunnelUrl: tunnelUrl, tunnelCreating: tunnelCreating, tunnelCopied: tunnelCopied, tunnelSpinner: tunnelState.getSpinnerChar(), gridInfo: (() => {
                 if (!process.env.DEBUG_DMUX)
                     return undefined;
                 const cols = Math.max(1, Math.floor(terminalWidth / 37));
@@ -1323,16 +596,14 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                 const pos = getCardGridPosition(selectedIndex);
                 return `Grid: ${cols} cols × ${rows} rows | Selected: row ${pos.row}, col ${pos.col} | Terminal: ${terminalWidth}w`;
             })() }),
-        React.createElement(Text, { dimColor: true },
-            updateAvailable && updateInfo && (React.createElement(Text, { color: "red", bold: true }, "Update available: npm i -g dmux@latest ")),
-            "v",
-            packageJson.version,
-            serverPort && serverPort > 0 && (React.createElement(Text, { dimColor: true },
-                " \u2022 ",
-                React.createElement(Text, { color: "cyan" },
-                    "http://127.0.0.1:",
-                    serverPort))),
-            debugMessage && (React.createElement(Text, { dimColor: true },
+        (updateAvailable || currentBranch || debugMessage) && (React.createElement(Text, { dimColor: true },
+            updateAvailable && updateInfo && (React.createElement(Text, { color: "red", bold: true },
+                "Update available: npm i -g dmux@latest",
+                " ")),
+            currentBranch && (React.createElement(Text, { color: "magenta", bold: true },
+                "branch: ",
+                currentBranch)),
+            debugMessage && React.createElement(Text, { dimColor: true },
                 " \u2022 ",
                 debugMessage)))));
 };