dmux 3.1.0 → 3.2.0

package/dist/DmuxApp.js

@@ -1,142 +1,184 @@
-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, useInput, useApp, useStdout } from "ink";
+import { execSync } from "child_process";
+import fs from "fs/promises";
+import path from "path";
+import { createRequire } from "module";
 // 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";
 // 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 { enforceControlPaneSize } from "./utils/tmux.js";
+import { SIDEBAR_WIDTH } from "./utils/layoutManager.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 { supportsPopups, launchNodePopupNonBlocking, POPUP_POSITIONING, } from "./utils/popup.js";
+import { StateManager } from "./shared/StateManager.js";
+import { LogService } from "./services/LogService.js";
+import { getStatusDetector, } from "./services/StatusDetector.js";
+import { PaneAction, getAvailableActions, } from "./actions/index.js";
+import { SettingsManager, SETTING_DEFINITIONS, } from "./utils/settingsManager.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/PanesGrid.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 FooterHelp from "./components/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] = useState("");
     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 [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('');
+    const [debugMessage, setDebugMessage] = useState("");
+    // Current git branch state (for dev builds)
+    const [currentBranch, setCurrentBranch] = useState(null);
     // Update state handled by hook
-    const { updateInfo, showUpdateDialog, isUpdating, performUpdate, skipUpdate, dismissUpdate, updateAvailable } = useAutoUpdater(autoUpdater, setStatusMessage);
+    const { updateInfo, showUpdateDialog, isUpdating, performUpdate, skipUpdate, dismissUpdate, 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);
+    // Tunnel state
+    const [tunnelUrl, setTunnelUrl] = useState(null);
+    const [tunnelCreating, setTunnelCreating] = useState(false);
+    const [tunnelSpinnerFrame, setTunnelSpinnerFrame] = useState(0);
+    const [localIp, setLocalIp] = useState("127.0.0.1");
+    const [tunnelCopied, setTunnelCopied] = useState(false);
+    // 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 runner
-    const { copyNonGitFiles, runCommandInternal, monitorTestOutput, monitorDevOutput, attachBackgroundWindow } = usePaneRunner({
+    const { copyNonGitFiles, runCommandInternal, monitorTestOutput, monitorDevOutput, attachBackgroundWindow, } = usePaneRunner({
         panes,
         savePanes,
         projectSettings,
         setStatusMessage,
         setRunningCommand,
     });
-    // Force repaint helper
-    const forceRepaint = () => setForceRepaintTrigger(prev => prev + 1);
+    // Force repaint helper - shows spinner for a few frames to force full re-render
+    const forceRepaint = () => {
+        setForceRepaintTrigger((prev) => prev + 1);
+        setShowRepaintSpinner(true);
+        // Hide spinner after a few frames (enough to trigger multiple renders)
+        setTimeout(() => setShowRepaintSpinner(false), 100);
+    };
     // Force repaint effect - ensures Ink re-renders when trigger changes
     useEffect(() => {
         if (forceRepaintTrigger > 0) {
             // Small delay to ensure terminal is ready
             const timer = setTimeout(() => {
                 try {
-                    execSync('tmux refresh-client', { stdio: 'pipe' });
+                    execSync("tmux refresh-client", { stdio: "pipe" });
                 }
                 catch { }
             }, 50);
             return () => clearTimeout(timer);
         }
     }, [forceRepaintTrigger]);
+    // Get local network IP on mount
+    useEffect(() => {
+        try {
+            // Get local IP address (not 127.0.0.1)
+            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");
+        }
+    }, []);
+    // Spinner animation for tunnel creation
+    useEffect(() => {
+        if (!tunnelCreating)
+            return;
+        const spinnerInterval = setInterval(() => {
+            setTunnelSpinnerFrame((prev) => (prev + 1) % 10);
+        }, 80); // Update every 80ms
+        return () => clearInterval(spinnerInterval);
+    }, [tunnelCreating]);
+    // Get current git branch on mount (only for dev builds)
+    useEffect(() => {
+        const isDev = process.env.DMUX_DEV === "true" || __dirname.includes("dist") === false;
+        if (isDev) {
+            try {
+                const branch = execSync("git rev-parse --abbrev-ref HEAD", {
+                    encoding: "utf-8",
+                    stdio: "pipe",
+                    cwd: projectRoot,
+                }).trim();
+                setCurrentBranch(branch);
+            }
+            catch {
+                // Not in a git repo or git not available
+                setCurrentBranch(null);
+            }
+        }
+    }, [projectRoot]);
     // Pane creation
     const { createNewPane: createNewPaneHook } = usePaneCreation({
         panes,
@@ -144,7 +186,6 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         projectName,
         setIsCreatingPane,
         setStatusMessage,
-        setNewPanePrompt,
         loadPanes,
         panesFile,
         availableAgents,
@@ -154,8 +195,8 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     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,
@@ -179,22 +220,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;
                             }
                         }
@@ -203,15 +245,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.
@@ -236,50 +278,936 @@ 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]);
+    // 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
+    const { getCardGridPosition, findCardInDirection } = useNavigation(terminalWidth, panes.length, isLoading);
+    // findCardInDirection provided by useNavigation
+    // savePanes moved to usePanes
+    // applySmartLayout moved to utils/tmux
+    const launchNewPanePopup = async () => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        try {
+            // Resolve the popup script path from the project root
+            // This handles both dev (tsx running from src) and prod (compiled to dist)
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "newPanePopup.js");
+            // Calculate popup height as 80% of terminal height to allow room for file list
+            const popupHeight = Math.floor(terminalHeight * 0.8);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [], {
+                ...POPUP_POSITIONING.centeredWithSidebar(SIDEBAR_WIDTH),
+                width: 90,
+                height: popupHeight,
+                title: "  ✨ dmux - Create New Pane  ",
+            });
+            LogService.getInstance().debug(`Popup created - PID: ${popupHandle.pid}, bounds: ${JSON.stringify(popupHandle.bounds)}`, "PopupTracking");
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            LogService.getInstance().debug("Popup closed, clearing tracking", "PopupTracking");
+            // Ignore input briefly after popup closes to prevent buffered keys
+            setIgnoreInput(true);
+            setTimeout(() => setIgnoreInput(false), 100);
+            if (result.success && result.data) {
+                // User entered a prompt - now decide which agent to use
+                const promptValue = result.data;
+                const agents = availableAgents;
+                if (agents.length === 0) {
+                    await createNewPaneHook(promptValue);
+                }
+                else if (agents.length === 1) {
+                    await createNewPaneHook(promptValue, agents[0]);
+                }
+                else {
+                    // Multiple agents available - check for default agent setting first
+                    const settings = settingsManager.getSettings();
+                    if (settings.defaultAgent && agents.includes(settings.defaultAgent)) {
+                        // Use the default agent from settings
+                        await createNewPaneHook(promptValue, settings.defaultAgent);
+                    }
+                    else {
+                        // No default agent configured or default not available - show agent choice popup
+                        const selectedAgent = await launchAgentChoicePopup(promptValue);
+                        if (selectedAgent) {
+                            await createNewPaneHook(promptValue, selectedAgent);
+                        }
+                    }
+                }
+            }
+            else if (result.cancelled) {
+                // User pressed ESC - do nothing
+                return;
+            }
+            else if (result.error) {
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchKebabMenuPopup = async (paneIndex) => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        const selectedPane = panes[paneIndex];
+        if (!selectedPane) {
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "kebabMenuPopup.js");
+            // Get available actions for this pane
+            const actions = getAvailableActions(selectedPane, projectSettings);
+            const actionsJson = JSON.stringify(actions);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [selectedPane.slug, actionsJson], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 60,
+                height: Math.min(20, actions.length + 5),
+                title: `Menu: ${selectedPane.slug}`,
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Log the entire result for debugging
+            LogService.getInstance().debug(`Kebab menu result: ${JSON.stringify(result)}`, "KebabMenu");
+            if (result.success && result.data) {
+                // User selected an action
+                const actionId = result.data;
+                LogService.getInstance().debug(`Action selected: ${actionId}`, "KebabMenu");
+                // Handle merge action with dedicated popup
+                if (actionId === PaneAction.MERGE) {
+                    LogService.getInstance().debug(`Merge action selected for pane: ${selectedPane.slug}`, "MergeAction");
+                    try {
+                        await launchMergePopup(selectedPane);
+                        LogService.getInstance().debug("Merge popup completed", "MergeAction");
+                    }
+                    catch (error) {
+                        LogService.getInstance().error("Merge popup error", "MergeAction", selectedPane.id, error instanceof Error ? error : undefined);
+                        setStatusMessage(`Merge popup failed: ${error}`);
+                        setTimeout(() => setStatusMessage(""), 3000);
+                    }
+                }
+                else {
+                    // Execute other actions through action system
+                    await actionSystem.executeAction(actionId, selectedPane, {
+                        mainBranch: getMainBranch(),
+                    });
+                }
+            }
+            else if (result.cancelled) {
+                // User pressed ESC - do nothing
+                LogService.getInstance().debug("Kebab menu cancelled", "KebabMenu");
+                return;
+            }
+            else if (result.error) {
+                LogService.getInstance().error(`Kebab menu error: ${result.error}`, "KebabMenu");
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+            }
+            else {
+                LogService.getInstance().warn(`Unexpected kebab menu result: ${JSON.stringify(result)}`, "KebabMenu");
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchConfirmPopup = async (title, message, yesLabel, noLabel) => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return false;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "confirmPopup.js");
+            // Write data to temp file to avoid shell escaping issues
+            const dataFile = `/tmp/dmux-confirm-${Date.now()}.json`;
+            const dataJson = JSON.stringify({ title, message, yesLabel, noLabel });
+            await fs.writeFile(dataFile, dataJson);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 60,
+                height: 12,
+                title: title || "Confirm",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Clean up temp file
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch { }
+            if (result.success && result.data !== undefined) {
+                return result.data;
+            }
+            else if (result.cancelled) {
+                return false;
+            }
+            else if (result.error) {
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+                return false;
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+        return false;
+    };
+    const launchAgentChoicePopup = async (prompt) => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return null;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "agentChoicePopup.js");
+            const agentsJson = JSON.stringify(availableAgents);
+            const defaultAgentArg = agentChoice || availableAgents[0] || "claude";
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [agentsJson, defaultAgentArg], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 50,
+                height: 10,
+                title: "Select Agent",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            if (result.success && result.data) {
+                return result.data;
+            }
+            else if (result.cancelled) {
+                return null;
+            }
+            else if (result.error) {
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+                return null;
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+        return null;
+    };
+    const launchHooksPopup = async () => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "hooksPopup.js");
+            // Get hooks data
+            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),
+            }));
+            const hooksJson = JSON.stringify(hooks);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [hooksJson], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 70,
+                height: 24,
+                title: "🪝 Manage Hooks",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            if (result.success && result.data?.action === "edit") {
+                // Edit hooks using an agent
+                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";
+                // Choose agent
+                const agents = availableAgents;
+                if (agents.length === 0) {
+                    await createNewPaneHook(prompt);
+                }
+                else if (agents.length === 1) {
+                    await createNewPaneHook(prompt, agents[0]);
+                }
+                else {
+                    // Multiple agents available - check for default agent setting first
+                    const settings = settingsManager.getSettings();
+                    if (settings.defaultAgent && agents.includes(settings.defaultAgent)) {
+                        // Use the default agent from settings
+                        await createNewPaneHook(prompt, settings.defaultAgent);
+                    }
+                    else {
+                        // No default agent configured or default not available - show agent choice popup
+                        const selectedAgent = await launchAgentChoicePopup(prompt);
+                        if (selectedAgent) {
+                            await createNewPaneHook(prompt, selectedAgent);
+                        }
+                    }
+                }
+            }
+            else if (result.success && result.data?.action === "view") {
+                // View hooks file in editor - could implement this later
+                setStatusMessage("View in editor not yet implemented");
+                setTimeout(() => setStatusMessage(""), 2000);
+            }
+            else if (result.cancelled) {
+                // User pressed ESC - do nothing
+                return;
+            }
+            else if (result.error) {
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchLogsPopup = async () => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "logsPopup.js");
+            // Get logs from StateManager and write to temp file
+            const stateManager = StateManager.getInstance();
+            const allLogs = stateManager.getLogs();
+            const stats = stateManager.getLogStats();
+            const logsData = { logs: allLogs, stats };
+            // Write data to temp file to avoid shell escaping issues with complex JSON
+            const dataFile = `/tmp/dmux-logs-${Date.now()}.json`;
+            const dataJson = JSON.stringify(logsData);
+            await fs.writeFile(dataFile, dataJson);
+            // Launch the popup with large positioning
+            // Get tmux client dimensions (not process.stdout which is just the sidebar)
+            const tmuxDims = execSync('tmux display-message -p "#{client_width},#{client_height}"', { encoding: "utf-8" }).trim();
+            const [termWidth, termHeight] = tmuxDims.split(",").map(Number);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.large(SIDEBAR_WIDTH, termWidth, termHeight),
+                title: "🪵 dmux Logs",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Clean up temp file
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch (err) {
+                // Ignore cleanup errors
+            }
+            // Popup closed - mark all logs as read
+            if (result.success) {
+                stateManager.markAllLogsAsRead();
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchShortcutsPopup = async () => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "shortcutsPopup.js");
+            // Prepare data for shortcuts popup
+            const shortcutsData = {
+                hasSidebarLayout: !!controlPaneId,
+                showRemoteKey: !!server,
+            };
+            // Write data to temp file
+            const dataFile = `/tmp/dmux-shortcuts-${Date.now()}.json`;
+            const dataJson = JSON.stringify(shortcutsData);
+            await fs.writeFile(dataFile, dataJson);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 50,
+                height: 20,
+                title: "⌨️  Keyboard Shortcuts",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Clean up temp file
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch (err) {
+                // Ignore cleanup errors
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchRemotePopup = async () => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        // Check if server is available and tunnel URL exists
+        if (!server || !serverPort || !tunnelUrl) {
+            setStatusMessage("Tunnel not ready");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "remotePopup.js");
+            // Prepare status file with existing tunnel URL
+            const tunnelStatusFile = `/tmp/dmux-tunnel-status-${Date.now()}.json`;
+            await fs.writeFile(tunnelStatusFile, JSON.stringify({ url: tunnelUrl }));
+            // Prepare data for remote popup
+            const remoteData = {
+                loading: false,
+                serverPort: serverPort,
+                statusFile: tunnelStatusFile,
+            };
+            // Write data to temp file
+            const dataFile = `/tmp/dmux-remote-${Date.now()}.json`;
+            await fs.writeFile(dataFile, JSON.stringify(remoteData));
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.centeredWithSidebar(SIDEBAR_WIDTH),
+                width: 60,
+                height: 30,
+                title: "🌐 Remote Access",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Show "Copied!" message if URL was copied
+            // Note: result is the parsed JSON directly, not wrapped in PopupResult.data
+            if (result && result.copied) {
+                setTunnelCopied(true);
+                setTimeout(() => setTunnelCopied(false), 2000);
+            }
+            // Clean up temp files
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch (err) {
+                // Ignore cleanup errors
+            }
+            try {
+                await fs.unlink(tunnelStatusFile);
+            }
+            catch (err) {
+                // Ignore cleanup errors (file might not exist yet)
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchSettingsPopup = async () => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "settingsPopup.js");
+            // Prepare settings data for popup
+            const settingsData = {
+                settingDefinitions: SETTING_DEFINITIONS,
+                settings: settingsManager.getSettings(),
+                globalSettings: settingsManager.getGlobalSettings(),
+                projectSettings: settingsManager.getProjectSettings(),
+            };
+            const settingsJson = JSON.stringify(settingsData);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [settingsJson], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 70,
+                height: Math.min(25, SETTING_DEFINITIONS.length + 8),
+                title: "⚙️  Settings",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            if (result.success) {
+                // Check if this is an action result (action field at top level)
+                if (result.action) {
+                    // Action type setting (like 'hooks')
+                    if (result.action === "hooks") {
+                        // Launch hooks popup
+                        await launchHooksPopup();
+                    }
+                }
+                else if (result.data) {
+                    // Regular setting change (result.data contains the setting)
+                    const { key, value, scope } = result.data;
+                    settingsManager.updateSetting(key, value, scope);
+                    setStatusMessage(`Setting saved (${scope})`);
+                    setTimeout(() => setStatusMessage(""), 2000);
+                }
+            }
+            else if (result.cancelled) {
+                // User pressed ESC - do nothing
+                return;
+            }
+            else if (result.error) {
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchMergePopup = async (pane) => {
+        LogService.getInstance().debug(`launchMergePopup called for pane: ${pane.slug}`, "MergePopup");
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            LogService.getInstance().warn("Popups not supported", "MergePopup");
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        if (!pane.worktreePath) {
+            LogService.getInstance().warn("No worktree path for pane", "MergePopup", pane.id);
+            setStatusMessage("This pane has no worktree to merge");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "mergePopup.js");
+            LogService.getInstance().debug(`Popup script path: ${popupScriptPath}`, "MergePopup");
+            // Check if popup script exists
+            try {
+                await fs.access(popupScriptPath);
+                LogService.getInstance().debug("Popup script exists", "MergePopup");
+            }
+            catch {
+                LogService.getInstance().error(`Popup script NOT found at: ${popupScriptPath}`, "MergePopup");
+                setStatusMessage(`Merge popup script not found: ${popupScriptPath}`);
+                setTimeout(() => setStatusMessage(""), 5000);
+                return;
+            }
+            // Prepare merge data
+            const mainRepoPath = pane.worktreePath.replace(/\/\.dmux\/worktrees\/[^/]+$/, "");
+            const mergeData = {
+                paneSlug: pane.slug,
+                worktreePath: pane.worktreePath,
+                mainRepoPath,
+                mainBranch: getMainBranch(),
+            };
+            // Write data to temp file
+            const dataFile = `/tmp/dmux-merge-${Date.now()}.json`;
+            await fs.writeFile(dataFile, JSON.stringify(mergeData));
+            LogService.getInstance().debug(`Merge data written to: ${dataFile}`, "MergePopup");
+            LogService.getInstance().debug(`Merge data: ${JSON.stringify(mergeData)}`, "MergePopup");
+            // Launch the popup non-blocking and track it
+            LogService.getInstance().debug("Launching merge popup...", "MergePopup");
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.large(SIDEBAR_WIDTH, terminalWidth, terminalHeight),
+                width: 80,
+                height: 30,
+                title: `🔀 Merge: ${pane.slug}`,
+            });
+            LogService.getInstance().debug(`Popup launched, PID: ${popupHandle.pid}`, "MergePopup");
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Clean up temp file
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch { }
+            if (result.success && result.data?.merged) {
+                if (result.data.closedPane) {
+                    // Pane was closed during merge, refresh pane list
+                    await loadPanes();
+                    setStatusMessage("Merge complete, pane closed");
+                }
+                else {
+                    setStatusMessage("Merge complete");
+                }
+                setTimeout(() => setStatusMessage(""), 3000);
+            }
+            else if (result.cancelled) {
+                // User cancelled
+                return;
+            }
+            else if (result.error) {
+                setStatusMessage(`Merge error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch merge popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    const launchChoicePopup = async (title, message, options) => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return null;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "choicePopup.js");
+            // Write data to temp file to avoid shell escaping issues
+            const dataFile = `/tmp/dmux-choice-${Date.now()}.json`;
+            const dataJson = JSON.stringify({ title, message, options });
+            await fs.writeFile(dataFile, dataJson);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 70,
+                height: Math.min(25, options.length * 3 + 8),
+                title: title || "Choose Option",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Clean up temp file
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch { }
+            if (result.success && result.data) {
+                return result.data;
+            }
+            else if (result.cancelled) {
+                return null;
+            }
+            else if (result.error) {
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+                return null;
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+        return null;
+    };
+    const launchInputPopup = async (title, message, placeholder, defaultValue) => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return null;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "inputPopup.js");
+            // Write data to temp file to avoid shell escaping issues
+            const dataFile = `/tmp/dmux-input-${Date.now()}.json`;
+            const dataJson = JSON.stringify({
+                title,
+                message,
+                placeholder,
+                defaultValue,
+            });
+            await fs.writeFile(dataFile, dataJson);
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 70,
+                height: 15,
+                title: title || "Input",
+            });
+            // Wait for the popup to close
+            const result = await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Clean up temp file
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch { }
+            if (result.success && result.data !== undefined) {
+                return result.data;
+            }
+            else if (result.cancelled) {
+                return null;
+            }
+            else if (result.error) {
+                setStatusMessage(`Popup error: ${result.error}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+                return null;
+            }
+        }
+        catch (error) {
+            setStatusMessage(`Failed to launch popup: ${error.message}`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+        return null;
+    };
+    const launchProgressPopup = async (message, type = "info", timeout = 2000) => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage(message);
+            setTimeout(() => setStatusMessage(""), timeout);
+            return;
+        }
+        try {
+            // Resolve the popup script path
+            const projectRootForPopup = __dirname.includes("/dist")
+                ? path.resolve(__dirname, "..") // If in dist/, go up one level
+                : path.resolve(__dirname, ".."); // If in src/, go up one level
+            const popupScriptPath = path.join(projectRootForPopup, "dist", "popups", "progressPopup.js");
+            // Write data to temp file to avoid shell escaping issues
+            const dataFile = `/tmp/dmux-progress-${Date.now()}.json`;
+            const dataJson = JSON.stringify({ message, type, timeout });
+            await fs.writeFile(dataFile, dataJson);
+            // Launch the popup - position at top, 1 char right of sidebar
+            // Height depends on message length
+            const lines = Math.ceil(message.length / 60) + 3; // Estimate lines needed
+            const titleText = type === "success"
+                ? "✓ Success"
+                : type === "error"
+                    ? "✗ Error"
+                    : type === "info"
+                        ? "ℹ Info"
+                        : "Progress";
+            // Launch the popup non-blocking and track it
+            const popupHandle = launchNodePopupNonBlocking(popupScriptPath, [dataFile], {
+                ...POPUP_POSITIONING.standard(SIDEBAR_WIDTH),
+                width: 70,
+                height: Math.min(15, lines + 4),
+                title: titleText,
+            });
+            // Wait for the popup to close
+            await popupHandle.resultPromise;
+            // Clear active popup tracking
+            // Clean up temp file
+            try {
+                await fs.unlink(dataFile);
+            }
+            catch { }
+        }
+        catch (error) {
+            // Fallback to inline message
+            setStatusMessage(message);
+            setTimeout(() => setStatusMessage(""), timeout);
+        }
+    };
+    // Action system - initialized after popup launchers are defined
+    const actionSystem = useActionSystem({
+        panes,
+        savePanes,
+        sessionName,
+        projectName,
+        onPaneRemove: (paneId) => {
+            // Mark the pane as intentionally closed to prevent race condition with worker
+            intentionallyClosedPanes.current.add(paneId);
+            // Remove from panes list
+            const updatedPanes = panes.filter((p) => p.paneId !== paneId);
+            savePanes(updatedPanes);
+            // Clean up after a delay
+            setTimeout(() => {
+                intentionallyClosedPanes.current.delete(paneId);
+            }, 5000);
+        },
+        forceRepaint,
+        popupLaunchers: popupsSupported
+            ? {
+                launchConfirmPopup,
+                launchChoicePopup,
+                launchInputPopup,
+                launchProgressPopup,
+            }
+            : 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)
+    useEffect(() => {
+        if (!controlPaneId) {
+            return; // No sidebar layout configured
+        }
+        // Enforce sidebar width immediately on mount
+        enforceControlPaneSize(controlPaneId, SIDEBAR_WIDTH);
+        // Debounce resize handler to prevent infinite loops
+        let resizeTimeout = null;
+        let isApplyingLayout = false;
+        const handleResize = () => {
+            // Skip if we're already applying a layout (prevents loops)
+            if (isApplyingLayout) {
+                return;
+            }
+            // Clear any pending resize
+            if (resizeTimeout) {
+                clearTimeout(resizeTimeout);
+            }
+            // Debounce: wait 500ms after last resize event (prevents excessive recalculations)
+            resizeTimeout = setTimeout(() => {
+                // Only enforce if not showing dialogs (to avoid interference)
+                const hasActiveDialog = actionSystem.actionState.showConfirmDialog ||
+                    actionSystem.actionState.showChoiceDialog ||
+                    actionSystem.actionState.showInputDialog ||
+                    actionSystem.actionState.showProgressDialog ||
+                    !!showCommandPrompt ||
+                    showFileCopyPrompt ||
+                    isCreatingPane ||
+                    runningCommand ||
+                    isUpdating;
+                if (!hasActiveDialog) {
+                    isApplyingLayout = true;
+                    // Only enforce sidebar width when terminal resizes
+                    enforceControlPaneSize(controlPaneId, SIDEBAR_WIDTH);
+                    // Force Ink to repaint after resize to prevent blank dmux pane
+                    forceRepaint();
+                    // Reset flag after a brief delay
+                    setTimeout(() => {
+                        isApplyingLayout = false;
+                    }, 100);
+                }
+            }, 500);
+        };
+        // Listen to stdout resize events
+        process.stdout.on("resize", handleResize);
+        // Also listen for SIGWINCH and SIGUSR1 (tmux hook sends USR1)
+        process.on("SIGWINCH", handleResize);
+        process.on("SIGUSR1", handleResize);
+        return () => {
+            process.stdout.off("resize", handleResize);
+            process.off("SIGWINCH", handleResize);
+            process.off("SIGUSR1", handleResize);
+            if (resizeTimeout) {
+                clearTimeout(resizeTimeout);
+            }
+        };
+    }, [
+        controlPaneId,
+        actionSystem.actionState.showConfirmDialog,
+        actionSystem.actionState.showChoiceDialog,
+        actionSystem.actionState.showInputDialog,
+        actionSystem.actionState.showProgressDialog,
+        showCommandPrompt,
+        showFileCopyPrompt,
+        isCreatingPane,
+        runningCommand,
+        isUpdating,
+    ]);
     // 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,
+        suspend: 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
@@ -288,28 +1216,21 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             }
             // Pane was removed unexpectedly (e.g., user killed tmux pane manually)
             // Remove it from our tracking
-            const updatedPanes = panes.filter(p => p.id !== paneId);
+            const updatedPanes = panes.filter((p) => p.id !== paneId);
             savePanes(updatedPanes);
         },
     });
-    // loadPanes moved to usePanes
-    // getPanePositions moved to utils/tmux
-    // Navigation logic moved to hook
-    const { getCardGridPosition, findCardInDirection } = useNavigation(terminalWidth, panes.length, isLoading);
-    // findCardInDirection provided by useNavigation
-    // savePanes moved to usePanes
-    // applySmartLayout moved to utils/tmux
     const createNewPane = async (prompt, agent) => {
         setIsCreatingPane(true);
-        setStatusMessage('Generating slug...');
+        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'
+            projectRoot = execSync("git rev-parse --show-toplevel", {
+                encoding: "utf-8",
+                stdio: "pipe",
             }).trim();
         }
         catch {
@@ -317,83 +1238,83 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             projectRoot = process.cwd();
         }
         // Create worktree path inside .dmux/worktrees directory
-        const worktreePath = path.join(projectRoot, '.dmux', 'worktrees', slug);
+        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' });
-        }
-        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' });
-        }
-        catch { }
+        const originalPaneId = execSync('tmux display-message -p "#{pane_id}"', {
+            encoding: "utf-8",
+        }).trim();
+        // Minimal clearing to avoid layout shifts
+        process.stdout.write("\x1b[2J\x1b[H");
         // Get current pane count to determine layout
-        const paneCount = parseInt(execSync('tmux list-panes | wc -l', { encoding: 'utf-8' }).trim());
+        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' });
+            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();
+        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));
+        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' });
+            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);
+        // Don't apply global layouts - let content panes arrange naturally
+        // Only enforce sidebar width
+        try {
+            const controlPaneId = execSync('tmux display-message -p "#{pane_id}"', {
+                encoding: "utf-8",
+            }).trim();
+            enforceControlPaneSize(controlPaneId, SIDEBAR_WIDTH);
+        }
+        catch { }
         // 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' });
+            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.');
+            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));
+            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') {
+        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, '\\`')
-                    .replace(/\$/g, '\\$');
+                    .replace(/`/g, "\\`")
+                    .replace(/\$/g, "\\$");
                 claudeCmd = `claude "${escapedPrompt}" --permission-mode=acceptEdits`;
             }
             else {
@@ -401,34 +1322,42 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             }
             // 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' });
+            execSync(`tmux send-keys -t '${paneInfo}' '${escapedCmd}'`, {
+                stdio: "pipe",
+            });
+            execSync(`tmux send-keys -t '${paneInfo}' Enter`, { stdio: "pipe" });
         }
-        else if (agent === 'opencode') {
+        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' });
+            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));
+                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' });
+                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" });
             }
         }
-        if (agent === 'claude') {
+        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));
+                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 lastContent = "";
                 let stableContentCount = 0;
                 let promptHandled = false;
                 // More comprehensive trust prompt patterns
@@ -457,14 +1386,15 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                     /❯\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
+                    /2\.\s*No,\s*exit/i, // No exit option
                 ];
                 for (let i = 0; i < maxChecks; i++) {
-                    await new Promise(resolve => setTimeout(resolve, checkInterval));
+                    await new Promise((resolve) => setTimeout(resolve, checkInterval));
                     try {
                         // Capture the pane content
                         const paneContent = capturePaneContent(paneInfo, 30);
-                        if (i % 10 === 0) { // Log every 10 checks (every second)
+                        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) {
@@ -475,14 +1405,15 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                             lastContent = paneContent;
                         }
                         // Look for trust prompt in the current content
-                        const hasTrustPrompt = trustPromptPatterns.some(pattern => pattern.test(paneContent));
+                        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) {
+                        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
@@ -490,44 +1421,57 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                                     /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' });
+                                    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' });
+                                    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' });
+                                    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));
+                                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));
+                                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' });
+                                    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'))) {
+                        if (!hasTrustPrompt &&
+                            !hasClaudePermissionPrompt &&
+                            (paneContent.includes("Claude") ||
+                                paneContent.includes("Assistant"))) {
                             break;
                         }
                     }
@@ -537,37 +1481,35 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                 }
             };
             // Start monitoring for trust prompt in background
-            autoApproveTrust().catch(err => {
-            });
+            autoApproveTrust().catch((err) => { });
         }
         // Keep focus on the new pane
-        execSync(`tmux select-pane -t '${paneInfo}'`, { stdio: 'pipe' });
+        execSync(`tmux select-pane -t '${paneInfo}'`, { stdio: "pipe" });
         // Save pane info
         const newPane = {
             id: `dmux-${Date.now()}`,
             slug,
-            prompt: prompt || 'No initial prompt',
+            prompt: prompt || "No initial prompt",
             paneId: paneInfo,
             worktreePath,
-            agent
+            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' });
+        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' });
+            execSync(`tmux select-pane -t '${originalPaneId}' -T "dmux v${packageJson.version} - ${projectName}"`, { stdio: "pipe" });
         }
         catch {
             // Ignore if setting title fails
         }
         // Clear the screen and redraw the UI
-        process.stdout.write('\x1b[2J\x1b[H');
+        process.stdout.write("\x1b[2J\x1b[H");
         // Reset the creating pane flag and refresh
         setIsCreatingPane(false);
-        setStatusMessage('');
-        setNewPanePrompt('');
+        setStatusMessage("");
         // Force a reload of panes to ensure UI is up to date
         await loadPanes();
     };
@@ -575,28 +1517,32 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         try {
             // Enable pane borders to show titles (if not already enabled)
             try {
-                execSync(`tmux set-option -g pane-border-status top`, { stdio: 'pipe' });
+                execSync(`tmux set-option -g pane-border-status top`, { stdio: "pipe" });
             }
             catch {
                 // Ignore if already set or fails
             }
-            execSync(`tmux select-pane -t '${paneId}'`, { stdio: 'pipe' });
-            setStatusMessage('Jumped to pane');
-            setTimeout(() => setStatusMessage(''), 2000);
+            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);
+            setStatusMessage("Failed to jump - pane may be closed");
+            setTimeout(() => setStatusMessage(""), 2000);
         }
     };
     const runCommand = async (type, pane) => {
         if (!pane.worktreePath) {
-            setStatusMessage('No worktree path for this pane');
-            setTimeout(() => setStatusMessage(''), 2000);
+            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;
+        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);
@@ -615,35 +1561,37 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             setRunningCommand(true);
             setStatusMessage(`Starting ${type} in background window...`);
             // Kill existing window if present
-            const existingWindowId = type === 'test' ? pane.testWindowId : pane.devWindowId;
+            const existingWindowId = type === "test" ? pane.testWindowId : pane.devWindowId;
             if (existingWindowId) {
                 try {
-                    execSync(`tmux kill-window -t '${existingWindowId}'`, { stdio: 'pipe' });
+                    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();
+            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'
+            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' });
+            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'
+                [type === "test" ? "testWindowId" : "devWindowId"]: windowId,
+                [type === "test" ? "testStatus" : "devStatus"]: "running",
             };
-            const updatedPanes = panes.map(p => p.id === pane.id ? updatedPane : p);
+            const updatedPanes = panes.map((p) => p.id === pane.id ? updatedPane : p);
             await savePanes(updatedPanes);
             // Start monitoring the output
-            if (type === 'test') {
+            if (type === "test") {
                 // For tests, monitor for completion
                 setTimeout(() => monitorTestOutput(pane.id, logFile), 2000);
             }
@@ -652,13 +1600,13 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                 setTimeout(() => monitorDevOutput(pane.id, logFile), 2000);
             }
             setRunningCommand(false);
-            setStatusMessage(`${type === 'test' ? 'Test' : 'Dev server'} started in background`);
-            setTimeout(() => setStatusMessage(''), 3000);
+            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);
+            setTimeout(() => setStatusMessage(""), 3000);
         }
     };
     // Update handling moved to useAutoUpdater
@@ -666,50 +1614,58 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     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);
+        setForceRepaintTrigger((prev) => prev + 1);
         // Multiple clearing strategies to prevent artifacts
         // 1. Clear screen with ANSI codes
-        process.stdout.write('\x1b[2J\x1b[H');
+        process.stdout.write("\x1b[2J\x1b[H");
         // 2. Clear tmux history
         try {
-            execSync('tmux clear-history', { stdio: 'pipe' });
+            execSync("tmux clear-history", { stdio: "pipe" });
         }
         catch { }
         // 3. Force tmux to refresh the display
         try {
-            execSync('tmux refresh-client', { stdio: 'pipe' });
+            execSync("tmux refresh-client", { stdio: "pipe" });
         }
         catch { }
     };
     // 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(() => {
             // 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' });
+                execSync("tmux clear-history", { stdio: "pipe" });
+                execSync("tmux send-keys C-l", { stdio: "pipe" });
             }
             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) => {
+        const logService = LogService.getInstance();
+        // Log all input for debugging (only first 50 chars to avoid spam)
+        const inputPreview = input.length > 50 ? input.substring(0, 50) + "..." : input;
+        logService.debug(`Input: "${inputPreview}"`, "InputDebug");
+        // Ignore input temporarily after popup operations (prevents buffered keys from being processed)
+        if (ignoreInput) {
+            return;
+        }
         // Handle Ctrl+C for quit confirmation (must be first, before any other checks)
-        if (key.ctrl && input === 'c') {
+        if (key.ctrl && input === "c") {
             if (quitConfirmMode) {
                 // Second Ctrl+C - actually quit
                 cleanExit();
@@ -724,45 +1680,10 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             }
             return;
         }
-        if (isCreatingPane || runningCommand || isUpdating || isLoading || isCreatingTunnel) {
+        if (isCreatingPane || runningCommand || isUpdating || isLoading) {
             // 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) {
@@ -771,288 +1692,8 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             }
             // 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') {
+            if (input === "y" || input === "Y") {
                 setShowFileCopyPrompt(false);
                 const selectedPane = panes[selectedIndex];
                 if (selectedPane && selectedPane.worktreePath && currentCommandType) {
@@ -1060,7 +1701,7 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                     // Mark as not first run and continue with command
                     const newSettings = {
                         ...projectSettings,
-                        [currentCommandType === 'test' ? 'firstTestRun' : 'firstDevRun']: true
+                        [currentCommandType === "test" ? "firstTestRun" : "firstDevRun"]: true,
                     };
                     await saveSettings(newSettings);
                     // Now run the actual command
@@ -1068,14 +1709,14 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                 }
                 setCurrentCommandType(null);
             }
-            else if (input === 'n' || input === 'N' || key.escape) {
+            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
+                        [currentCommandType === "test" ? "firstTestRun" : "firstDevRun"]: true,
                     };
                     await saveSettings(newSettings);
                     // Now run the actual command
@@ -1085,36 +1726,13 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             }
             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('');
+                setCommandInput("");
             }
             else if (key.return) {
-                if (commandInput.trim() === '') {
+                if (commandInput.trim() === "") {
                     // If empty, suggest a default command based on package manager
                     const suggested = await suggestCommand(showCommandPrompt);
                     if (suggested) {
@@ -1125,13 +1743,15 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                     // User provided manual command
                     const newSettings = {
                         ...projectSettings,
-                        [showCommandPrompt === 'test' ? 'testCommand' : 'devCommand']: commandInput.trim()
+                        [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;
+                        const isFirstRun = showCommandPrompt === "test"
+                            ? !projectSettings.firstTestRun
+                            : !projectSettings.firstDevRun;
                         if (isFirstRun) {
                             setCurrentCommandType(showCommandPrompt);
                             setShowCommandPrompt(null);
@@ -1140,171 +1760,210 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                         else {
                             await runCommandInternal(showCommandPrompt, selectedPane);
                             setShowCommandPrompt(null);
-                            setCommandInput('');
+                            setCommandInput("");
                         }
                     }
                     else {
                         setShowCommandPrompt(null);
-                        setCommandInput('');
+                        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');
+                targetIndex = findCardInDirection(selectedIndex, "up");
             }
             else if (key.downArrow) {
-                targetIndex = findCardInDirection(selectedIndex, 'down');
+                targetIndex = findCardInDirection(selectedIndex, "down");
             }
             else if (key.leftArrow) {
-                targetIndex = findCardInDirection(selectedIndex, 'left');
+                targetIndex = findCardInDirection(selectedIndex, "left");
             }
             else if (key.rightArrow) {
-                targetIndex = findCardInDirection(selectedIndex, 'right');
+                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') {
+        if (input === "m" && selectedIndex < panes.length) {
+            // Open kebab menu popup for selected pane
+            await launchKebabMenuPopup(selectedIndex);
+        }
+        else if (input === "s") {
+            // Open settings popup
+            await launchSettingsPopup();
+        }
+        else if (input === "l") {
+            // Open logs popup
+            await launchLogsPopup();
+        }
+        else if (input === "?") {
+            // Open keyboard shortcuts popup
+            await launchShortcutsPopup();
+        }
+        else if (input === "L" && controlPaneId) {
+            // Reset layout to sidebar configuration (Shift+L)
+            enforceControlPaneSize(controlPaneId, SIDEBAR_WIDTH);
+            setStatusMessage("Layout reset");
+            setTimeout(() => setStatusMessage(""), 2000);
+        }
+        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 if (input === "r" && server) {
+            // Handle remote tunnel
+            if (tunnelUrl) {
+                // Tunnel exists - open popup with QR code
+                await launchRemotePopup();
             }
-            else {
-                // Tunnel already exists, just show the QR code
-                setShowQRCode(true);
+            else if (!tunnelCreating) {
+                // Start tunnel creation
+                setTunnelCreating(true);
+                (async () => {
+                    try {
+                        const url = await server.startTunnel();
+                        setTunnelUrl(url);
+                    }
+                    catch (error) {
+                        setStatusMessage(`Failed to create tunnel: ${error.message}`);
+                        setTimeout(() => setStatusMessage(""), 3000);
+                    }
+                    finally {
+                        setTunnelCreating(false);
+                    }
+                })();
             }
+            // If tunnelCreating is true, do nothing (already creating)
+            return;
+        }
+        else if (!isLoading &&
+            (input === "n" || (key.return && selectedIndex === panes.length))) {
+            // Launch popup modal for new pane
+            await launchNewPanePopup();
+            return;
         }
-        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
+        else if (!isLoading &&
+            (input === "t" || (key.return && selectedIndex === panes.length + 1))) {
+            // Create a new terminal pane without an agent
+            try {
+                setIsCreatingPane(true);
+                setStatusMessage("Creating terminal pane...");
+                // Create a simple tmux pane split
+                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, 300));
+                // The shell pane will be automatically detected by the shell pane detection system
+                // No need to manually add it to the panes array
+                setIsCreatingPane(false);
+                setStatusMessage("Terminal pane created");
+                setTimeout(() => setStatusMessage(""), 2000);
+                // Force a reload to pick up the new shell pane
+                await loadPanes();
+            }
+            catch (error) {
+                setIsCreatingPane(false);
+                setStatusMessage(`Failed to create terminal pane: ${error.message}`);
+                setTimeout(() => setStatusMessage(""), 3000);
+            }
+            return;
         }
-        else if (input === 'j' && selectedIndex < panes.length) {
+        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);
+            setTimeout(() => StateManager.getInstance().setDebugMessage(""), 2000);
             actionSystem.executeAction(PaneAction.VIEW, panes[selectedIndex]);
         }
-        else if (input === 'x' && selectedIndex < panes.length) {
+        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);
+            setTimeout(() => StateManager.getInstance().setDebugMessage(""), 2000);
             actionSystem.executeAction(PaneAction.CLOSE, panes[selectedIndex]);
         }
         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);
+            setTimeout(() => StateManager.getInstance().setDebugMessage(""), 2000);
             actionSystem.executeAction(PaneAction.VIEW, panes[selectedIndex]);
         }
     });
-    // 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"))));
+    // 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;
     }
-    return (React.createElement(Box, { flexDirection: "column" },
-        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 },
+    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;
+        }
+        // Add debug info
+        if (process.env.DEBUG_DMUX) {
+            footerLines += 1;
+        }
+        // Add status line
+        if (updateAvailable || currentBranch || debugMessage) {
+            footerLines += 1;
+        }
+        // Add line for each active status message
+        if (statusMessage) {
+            footerLines += 1;
+        }
+        if (actionSystem.actionState.statusMessage) {
+            footerLines += 1;
+        }
+    }
+    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(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: (() => {
+                const spinnerFrames = [
+                    "⠋",
+                    "⠙",
+                    "⠹",
+                    "⠸",
+                    "⠼",
+                    "⠴",
+                    "⠦",
+                    "⠧",
+                    "⠇",
+                    "⠏",
+                ];
+                return spinnerFrames[tunnelSpinnerFrame];
+            })(), gridInfo: (() => {
                 if (!process.env.DEBUG_DMUX)
                     return undefined;
                 const cols = Math.max(1, Math.floor(terminalWidth / 37));
@@ -1312,16 +1971,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)))));
 };