dmux 3.1.1 → 3.2.0

package/dist/server/embedded-assets.js

@@ -427,13 +427,29 @@ export default BetterTextInput;
     'CleanTextInput.js': {
         content: `import React, { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput, useFocus, useStdout } from 'ink';
-const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '' }) => {
-    const { isFocused } = useFocus({ autoFocus: true });
+import fs from 'fs';
+import path from 'path';
+// Debug logging to file
+const DEBUG_LOG = path.join(process.cwd(), '.dmux', 'file-picker-debug.log');
+function debugLog(message, data) {
+    const timestamp = new Date().toISOString();
+    const logLine = \`[\${timestamp}] \${message} \${data !== undefined ? JSON.stringify(data, null, 2) : ''}\\n\`;
+    try {
+        fs.appendFileSync(DEBUG_LOG, logLine);
+    }
+    catch (e) {
+        // Ignore write errors
+    }
+}
+const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '', maxWidth: propMaxWidth, maxVisibleLines: propMaxVisibleLines, cursorPosition, disableArrowKeys = false, disableUpDownArrows = false, onCursorChange, disableEscape = false, ignoreFocus = false, onCancel }) => {
+    // Use id to maintain focus even when other components mount/unmount
+    const { isFocused } = useFocus({ autoFocus: true, id: 'clean-text-input' });
     const [cursor, setCursor] = useState(value.length);
     const { stdout } = useStdout();
     const [pastedItems, setPastedItems] = useState(new Map());
     const [nextPasteId, setNextPasteId] = useState(1);
     const [isProcessingPaste, setIsProcessingPaste] = useState(false);
+    const [topVisibleLine, setTopVisibleLine] = useState(0);
     // Only ignore first input in production (not in tests)
     // Check for common test environment indicators
     const isTestEnvironment = process.env.NODE_ENV === 'test' ||
@@ -449,9 +465,10 @@ const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '' }) => {
     // Subtract 2 for borders, 2 for padding, 2 for "> " prompt = 6 total
     // The prompt is always rendered separately, so we need to account for it
     // Use process.stdout.columns as fallback since useStdout might not update
+    // Allow override via prop for popup usage
     const terminalWidth = process.stdout.columns || (stdout ? stdout.columns : 80);
     // Reduce by 1 more to prevent edge case where text exactly fills width
-    const maxWidth = Math.max(20, terminalWidth - 7);
+    const maxWidth = propMaxWidth || Math.max(20, terminalWidth - 7);
     // Keep cursor in bounds
     useEffect(() => {
         if (cursor > value.length) {
@@ -461,6 +478,17 @@ const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '' }) => {
             setCursor(0);
         }
     }, [value.length, cursor]);
+    // Update cursor when cursorPosition prop changes
+    useEffect(() => {
+        if (cursorPosition !== undefined) {
+            const boundedPosition = Math.max(0, Math.min(cursorPosition, value.length));
+            setCursor(boundedPosition);
+        }
+    }, [cursorPosition, value.length]);
+    // Notify parent when cursor changes
+    useEffect(() => {
+        onCursorChange?.(cursor);
+    }, [cursor, onCursorChange]);
     // Enable bracketed paste mode with small delay to avoid blocking UI
     useEffect(() => {
         let bracketedPasteTimer = null;
@@ -596,13 +624,35 @@ const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '' }) => {
         setInBracketedPaste(false);
     };
     useInput((input, key) => {
-        if (!isFocused)
+        debugLog('[CleanTextInput] useInput called', {
+            isFocused,
+            ignoreFocus,
+            input: input?.substring(0, 10),
+            keyPressed: Object.keys(key).filter(k => key[k]).join(','),
+            disableEscape,
+            disableArrowKeys
+        });
+        if (!isFocused && !ignoreFocus) {
+            debugLog('[CleanTextInput] Not focused and not ignoring focus, ignoring input');
             return;
-        // Escape clears
+        }
+        if (!isFocused && ignoreFocus) {
+            debugLog('[CleanTextInput] Not focused but ignoring focus check, processing input');
+        }
+        // Note: Ctrl+C (SIGINT) is handled at the process level in newPanePopup, not here
+        // This is because SIGINT bypasses Ink's input system
+        // Escape clears (unless disabled by external control)
         if (key.escape) {
-            onChange('');
-            setCursor(0);
-            return;
+            debugLog('[CleanTextInput] ESC pressed', { disableEscape, value: value.substring(0, 50) });
+            if (!disableEscape) {
+                debugLog('[CleanTextInput] Clearing input');
+                onChange('');
+                setCursor(0);
+                return;
+            }
+            else {
+                debugLog('[CleanTextInput] ESC disabled, ignoring');
+            }
         }
         // Shift+Enter adds newline
         if (key.return && key.shift) {
@@ -685,17 +735,17 @@ const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '' }) => {
             return;
         }
         // Left arrow
-        if (key.leftArrow) {
+        if (key.leftArrow && !disableArrowKeys) {
             setCursor(Math.max(0, cursor - 1));
             return;
         }
         // Right arrow
-        if (key.rightArrow) {
+        if (key.rightArrow && !disableArrowKeys) {
             setCursor(Math.min(value.length, cursor + 1));
             return;
         }
         // Up/Down arrows for navigation (works with both hard and soft wrapped lines)
-        if (key.upArrow || key.downArrow) {
+        if ((key.upArrow || key.downArrow) && !disableArrowKeys && !disableUpDownArrows) {
             // Get wrapped lines to understand visual layout
             const wrapped = wrapText(value, maxWidth);
             const currentPos = findCursorInWrappedLines(wrapped, cursor);
@@ -1023,6 +1073,28 @@ const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '' }) => {
     // Memoize wrapped text to avoid recalculating on every render
     const wrappedLines = useMemo(() => wrapText(value, maxWidth), [value, maxWidth]);
     const hasMultipleLines = wrappedLines.length > 1;
+    // Default to showing all lines if maxVisibleLines not specified
+    const maxVisibleLines = propMaxVisibleLines || wrappedLines.length;
+    // Find cursor position in wrapped lines
+    const cursorPos = findCursorInWrappedLines(wrappedLines, cursor);
+    // Update visible window when cursor moves outside it
+    useEffect(() => {
+        if (!propMaxVisibleLines)
+            return; // No scrolling if maxVisibleLines not set
+        const cursorLine = cursorPos.line;
+        // If cursor is above the visible window, scroll up
+        if (cursorLine < topVisibleLine) {
+            setTopVisibleLine(cursorLine);
+        }
+        // If cursor is below the visible window, scroll down
+        else if (cursorLine >= topVisibleLine + maxVisibleLines) {
+            setTopVisibleLine(cursorLine - maxVisibleLines + 1);
+        }
+    }, [cursorPos.line, topVisibleLine, maxVisibleLines, propMaxVisibleLines]);
+    // Calculate which lines to render (visible window)
+    const visibleLines = wrappedLines.slice(topVisibleLine, topVisibleLine + maxVisibleLines);
+    const hasMoreAbove = topVisibleLine > 0;
+    const hasMoreBelow = topVisibleLine + maxVisibleLines < wrappedLines.length;
     if (value === '') {
         // Show cursor for empty input (no placeholder)
         return (React.createElement(Box, null,
@@ -1031,176 +1103,175 @@ const CleanTextInput = ({ value, onChange, onSubmit, placeholder = '' }) => {
             React.createElement(Box, null,
                 React.createElement(Text, { inverse: true }, ' '))));
     }
-    // Find cursor position in wrapped lines
-    const cursorPos = findCursorInWrappedLines(wrappedLines, cursor);
     // Render wrapped lines
-    return (React.createElement(Box, { flexDirection: "column" }, wrappedLines.map((wrappedLine, idx) => {
-        const isFirst = idx === 0;
-        const hasCursor = idx === cursorPos.line;
-        const line = wrappedLine.line;
-        if (hasCursor) {
-            // Ensure cursor position is valid
-            const actualCol = Math.min(cursorPos.col, line.length);
-            const before = line.slice(0, actualCol);
-            const at = line[actualCol] || ' ';
-            const after = line.slice(actualCol + 1);
-            // Check if cursor is within a paste tag
-            const tagPattern = /\\[#\\d+ Pasted, \\d+ lines?\\]/g;
-            let match;
-            let cursorInTag = false;
-            while ((match = tagPattern.exec(line)) !== null) {
-                if (actualCol >= match.index && actualCol < match.index + match[0].length) {
-                    cursorInTag = true;
-                    break;
+    return (React.createElement(Box, { flexDirection: "column" },
+        hasMoreAbove && (React.createElement(Box, null,
+            React.createElement(Box, { width: 2 },
+                React.createElement(Text, { dimColor: true }, "\\u22EE ")),
+            React.createElement(Text, { dimColor: true, italic: true }, "(scroll up for more)"))),
+        visibleLines.map((wrappedLine, visibleIdx) => {
+            const idx = visibleIdx + topVisibleLine; // Actual index in wrappedLines
+            const isFirst = idx === 0;
+            const hasCursor = idx === cursorPos.line;
+            const line = wrappedLine.line;
+            if (hasCursor) {
+                // Ensure cursor position is valid
+                const actualCol = Math.min(cursorPos.col, line.length);
+                const before = line.slice(0, actualCol);
+                const at = line[actualCol] || ' ';
+                const after = line.slice(actualCol + 1);
+                // Check if cursor is within a paste tag
+                const tagPattern = /\\[#\\d+ Pasted, \\d+ lines?\\]/g;
+                let match;
+                let cursorInTag = false;
+                while ((match = tagPattern.exec(line)) !== null) {
+                    if (actualCol >= match.index && actualCol < match.index + match[0].length) {
+                        cursorInTag = true;
+                        break;
+                    }
                 }
+                return (React.createElement(Box, { key: idx },
+                    React.createElement(Box, { width: 2 },
+                        React.createElement(Text, null, isFirst ? '> ' : '  ')),
+                    React.createElement(Box, null, cursorInTag ? (
+                    // Cursor is within a paste tag - render specially
+                    React.createElement(React.Fragment, null,
+                        renderTextWithTags(before),
+                        React.createElement(Text, { inverse: true, color: "cyan" }, at),
+                        renderTextWithTags(after))) : (
+                    // Normal rendering with tag highlighting
+                    React.createElement(React.Fragment, null,
+                        renderTextWithTags(before),
+                        React.createElement(Text, { inverse: true }, at),
+                        renderTextWithTags(after))))));
             }
             return (React.createElement(Box, { key: idx },
                 React.createElement(Box, { width: 2 },
                     React.createElement(Text, null, isFirst ? '> ' : '  ')),
-                React.createElement(Box, null, cursorInTag ? (
-                // Cursor is within a paste tag - render specially
-                React.createElement(React.Fragment, null,
-                    renderTextWithTags(before),
-                    React.createElement(Text, { inverse: true, color: "cyan" }, at),
-                    renderTextWithTags(after))) : (
-                // Normal rendering with tag highlighting
-                React.createElement(React.Fragment, null,
-                    renderTextWithTags(before),
-                    React.createElement(Text, { inverse: true }, at),
-                    renderTextWithTags(after))))));
-        }
-        return (React.createElement(Box, { key: idx },
+                React.createElement(Box, null, line ? renderTextWithTags(line) : React.createElement(Text, null, ' '))));
+        }),
+        hasMoreBelow && (React.createElement(Box, null,
             React.createElement(Box, { width: 2 },
-                React.createElement(Text, null, isFirst ? '> ' : '  ')),
-            React.createElement(Box, null, line ? renderTextWithTags(line) : React.createElement(Text, null, ' '))));
-    })));
+                React.createElement(Text, { dimColor: true }, "\\u22EE ")),
+            React.createElement(Text, { dimColor: true, italic: true }, "(scroll down for more)")))));
 };
 export default CleanTextInput;
 //# sourceMappingURL=CleanTextInput.js.map`,
         mimeType: 'application/javascript',
-        size: 29918
+        size: 34293
     },
     'DmuxApp.js': {
-        content: `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';
+        content: `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,
@@ -1209,7 +1280,7 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     });
     // Force repaint helper - shows spinner for a few frames to force full re-render
     const forceRepaint = () => {
-        setForceRepaintTrigger(prev => prev + 1);
+        setForceRepaintTrigger((prev) => prev + 1);
         setShowRepaintSpinner(true);
         // Hide spinner after a few frames (enough to trigger multiple renders)
         setTimeout(() => setShowRepaintSpinner(false), 100);
@@ -1220,13 +1291,57 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             // 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,
@@ -1234,7 +1349,6 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         projectName,
         setIsCreatingPane,
         setStatusMessage,
-        setNewPanePrompt,
         loadPanes,
         panesFile,
         availableAgents,
@@ -1244,8 +1358,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,
@@ -1269,22 +1383,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;
                             }
                         }
@@ -1293,15 +1408,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.
@@ -1326,62 +1441,29 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         const handleTermination = () => {
             cleanExit();
         };
-        process.on('SIGTERM', handleTermination);
-        // Test debug message on mount
-        StateManager.getInstance().setDebugMessage('Debug logging initialized - watching for AI activity...');
-        setTimeout(() => {
-            StateManager.getInstance().setDebugMessage('');
-        }, 3000);
+        process.on("SIGTERM", handleTermination);
+        // Check if tmux supports popups (3.2+) and enable mouse mode for click-outside-to-close
+        const popupSupport = supportsPopups();
+        setPopupsSupported(popupSupport);
+        if (popupSupport) {
+            // Enable mouse mode only for this dmux session (not global)
+        }
         return () => {
-            process.removeListener('SIGTERM', handleTermination);
+            process.removeListener("SIGTERM", handleTermination);
         };
     }, []);
-    // Auto-show new pane dialog when starting with no panes
-    useEffect(() => {
-        // Only show the dialog if:
-        // 1. Initial load is complete (!isLoading)
-        // 2. We have no panes
-        // 3. We're not already showing the dialog
-        // 4. We're not showing any other dialogs or prompts
-        if (!isLoading &&
-            panes.length === 0 &&
-            !showNewPaneDialog &&
-            !actionSystem.actionState.showConfirmDialog &&
-            !actionSystem.actionState.showChoiceDialog &&
-            !actionSystem.actionState.showInputDialog &&
-            !actionSystem.actionState.showProgressDialog &&
-            !showCommandPrompt &&
-            !showFileCopyPrompt &&
-            !showAgentChoiceDialog &&
-            !isCreatingPane &&
-            !runningCommand &&
-            !isUpdating) {
-            setShowNewPaneDialog(true);
-        }
-    }, [isLoading, panes.length, showNewPaneDialog, actionSystem.actionState.showConfirmDialog, actionSystem.actionState.showChoiceDialog, actionSystem.actionState.showInputDialog, actionSystem.actionState.showProgressDialog, showCommandPrompt, showFileCopyPrompt, showAgentChoiceDialog, isCreatingPane, runningCommand, isUpdating]);
     // Update checking moved to useAutoUpdater
     // Set default agent choice when detection completes
     useEffect(() => {
         if (agentChoice == null && availableAgents.length > 0) {
-            setAgentChoice(availableAgents[0] || 'claude');
+            setAgentChoice(availableAgents[0] || "claude");
         }
     }, [availableAgents]);
-    // Monitor agent status across panes (returns a map of pane ID to status)
-    const agentStatuses = useAgentStatus({
-        panes,
-        suspend: showNewPaneDialog || actionSystem.actionState.showConfirmDialog || actionSystem.actionState.showChoiceDialog || actionSystem.actionState.showInputDialog || actionSystem.actionState.showProgressDialog || !!showCommandPrompt || showFileCopyPrompt,
-        onPaneRemoved: (paneId) => {
-            // Check if this pane was intentionally closed
-            // If so, don't re-save - the close action already handled it
-            if (intentionallyClosedPanes.current.has(paneId)) {
-                return;
-            }
-            // Pane was removed unexpectedly (e.g., user killed tmux pane manually)
-            // Remove it from our tracking
-            const updatedPanes = panes.filter(p => p.id !== paneId);
-            savePanes(updatedPanes);
-        },
-    });
+    // Welcome pane is now fully event-based:
+    // - Created at startup (in src/index.ts)
+    // - Destroyed when first pane is created (in paneCreation.ts)
+    // - Recreated when last pane is closed (in paneActions.ts)
+    // No polling needed!
     // loadPanes moved to usePanes
     // getPanePositions moved to utils/tmux
     // Navigation logic moved to hook
@@ -1389,137 +1471,1057 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     // findCardInDirection provided by useNavigation
     // savePanes moved to usePanes
     // applySmartLayout moved to utils/tmux
-    const createNewPane = async (prompt, agent) => {
-        setIsCreatingPane(true);
-        setStatusMessage('Generating slug...');
-        const slug = await generateSlug(prompt);
-        setStatusMessage(\`Creating worktree: \${slug}...\`);
-        // Get git root directory for consistent worktree placement
-        let projectRoot;
+    const launchNewPanePopup = async () => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
+        }
         try {
-            projectRoot = execSync('git rev-parse --show-toplevel', {
-                encoding: 'utf-8',
-                stdio: 'pipe'
-            }).trim();
+            // 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 {
-            // Fallback to current directory if not in a git repo
-            projectRoot = process.cwd();
+        catch (error) {
+            setStatusMessage(\`Failed to launch popup: \${error.message}\`);
+            setTimeout(() => setStatusMessage(""), 3000);
         }
-        // Create worktree path inside .dmux/worktrees directory
-        const worktreePath = path.join(projectRoot, '.dmux', 'worktrees', slug);
-        // Get the original pane ID (where dmux is running) before clearing
-        const originalPaneId = execSync('tmux display-message -p "#{pane_id}"', { encoding: 'utf-8' }).trim();
-        // Multiple clearing strategies to prevent artifacts
-        // 1. Clear screen with ANSI codes
-        process.stdout.write('\\x1b[2J\\x1b[H');
-        // 2. Fill with blank lines to push content off screen
-        process.stdout.write('\\n'.repeat(100));
-        // 3. Clear tmux history and send clear command
-        try {
-            execSync('tmux clear-history', { stdio: 'pipe' });
-            execSync('tmux send-keys C-l', { stdio: 'pipe' });
+    };
+    const launchKebabMenuPopup = async (paneIndex) => {
+        // Only launch popup if tmux supports it
+        if (!popupsSupported) {
+            setStatusMessage("Popups require tmux 3.2+");
+            setTimeout(() => setStatusMessage(""), 3000);
+            return;
         }
-        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' });
+        const selectedPane = panes[paneIndex];
+        if (!selectedPane) {
+            return;
         }
-        catch { }
-        // Get current pane count to determine layout
-        const paneCount = parseInt(execSync('tmux list-panes | wc -l', { encoding: 'utf-8' }).trim());
-        // Enable pane borders to show titles
         try {
-            execSync(\`tmux set-option -g pane-border-status top\`, { stdio: 'pipe' });
+            // 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 {
-            // Ignore if already set or fails
+        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;
         }
-        // Create new pane
-        const paneInfo = execSync(\`tmux split-window -h -P -F '#{pane_id}'\`, { encoding: 'utf-8' }).trim();
-        // Wait for pane creation to settle
-        await new Promise(resolve => setTimeout(resolve, 500));
-        // Set pane title to match the slug
         try {
-            execSync(\`tmux select-pane -t '\${paneInfo}' -T "\${slug}"\`, { stdio: 'pipe' });
+            // 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 {
-            // Ignore if setting title fails
+        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;
         }
-        // Apply smart layout based on pane count
-        const newPaneCount = paneCount + 1;
-        applySmartLayout(newPaneCount);
-        // Create git worktree and cd into it
-        // This MUST happen before launching Claude to ensure we're in the right directory
         try {
-            // First, create the worktree and cd into it as a single command
-            // Use ; instead of && to ensure cd runs even if worktree already exists
-            const worktreeCmd = \`git worktree add "\${worktreePath}" -b \${slug} 2>/dev/null ; cd "\${worktreePath}"\`;
-            execSync(\`tmux send-keys -t '\${paneInfo}' '\${worktreeCmd}' Enter\`, { stdio: 'pipe' });
-            // Wait longer for worktree creation and cd to complete
-            // This is critical - if we don't wait long enough, Claude will start in the wrong directory
-            await new Promise(resolve => setTimeout(resolve, 2500));
-            // Verify we're in the worktree directory by sending pwd command  
-            execSync(\`tmux send-keys -t '\${paneInfo}' 'echo "Worktree created at:" && pwd' Enter\`, { stdio: 'pipe' });
-            await new Promise(resolve => setTimeout(resolve, 500));
-            setStatusMessage(agent ? \`Worktree created, launching \${agent === 'opencode' ? 'opencode' : 'Claude'}...\` : 'Worktree created.');
+            // 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) {
-            // 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));
+            setStatusMessage(\`Failed to launch popup: \${error.message}\`);
+            setTimeout(() => setStatusMessage(""), 3000);
         }
-        // Prepare and send the agent command
-        let escapedCmd = '';
-        if (agent === 'claude') {
-            // Claude should always be launched AFTER we're in the worktree directory
-            let claudeCmd;
-            if (prompt && prompt.trim()) {
-                const escapedPrompt = prompt
-                    .replace(/\\\\/g, '\\\\\\\\')
-                    .replace(/"/g, '\\\\"')
-                    .replace(/\`/g, '\\\\\`')
-                    .replace(/\\$/g, '\\\\$');
-                claudeCmd = \`claude "\${escapedPrompt}" --permission-mode=acceptEdits\`;
+        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 {
-                claudeCmd = \`claude --permission-mode=acceptEdits\`;
+            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);
             }
-            // Send Claude command to new pane
-            escapedCmd = claudeCmd.replace(/'/g, "'\\\\''");
-            execSync(\`tmux send-keys -t '\${paneInfo}' '\${escapedCmd}'\`, { stdio: 'pipe' });
-            execSync(\`tmux send-keys -t '\${paneInfo}' Enter\`, { stdio: 'pipe' });
         }
-        else if (agent === 'opencode') {
-            // opencode: start the TUI, then paste the prompt and submit
-            const openCoderCmd = \`opencode\`;
-            const escapedOpenCmd = openCoderCmd.replace(/'/g, "'\\\\''");
-            execSync(\`tmux send-keys -t '\${paneInfo}' '\${escapedOpenCmd}'\`, { stdio: 'pipe' });
-            execSync(\`tmux send-keys -t '\${paneInfo}' Enter\`, { stdio: 'pipe' });
-            if (prompt && prompt.trim()) {
-                await new Promise(resolve => setTimeout(resolve, 1500));
-                const bufName = \`dmux_prompt_\${Date.now()}\`;
-                const promptEsc = prompt.replace(/\\\\/g, '\\\\\\\\').replace(/'/g, "'\\\\''");
-                execSync(\`tmux set-buffer -b '\${bufName}' -- '\${promptEsc}'\`, { stdio: 'pipe' });
-                execSync(\`tmux paste-buffer -b '\${bufName}' -t '\${paneInfo}'\`, { stdio: 'pipe' });
-                await new Promise(resolve => setTimeout(resolve, 200));
-                execSync(\`tmux delete-buffer -b '\${bufName}'\`, { stdio: 'pipe' });
-                execSync(\`tmux send-keys -t '\${paneInfo}' Enter\`, { stdio: 'pipe' });
+        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();
             }
         }
-        if (agent === 'claude') {
-            // Monitor for Claude Code trust prompt and auto-respond
-            const autoApproveTrust = async () => {
-                // Wait for Claude to start up before checking for prompts
-                await new Promise(resolve => setTimeout(resolve, 800));
-                const maxChecks = 100; // 100 checks * 100ms = 10 seconds total
-                const checkInterval = 100; // Check every 100ms
-                let lastContent = '';
-                let stableContentCount = 0;
+        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: actionSystem.actionState.showConfirmDialog ||
+            actionSystem.actionState.showChoiceDialog ||
+            actionSystem.actionState.showInputDialog ||
+            actionSystem.actionState.showProgressDialog ||
+            !!showCommandPrompt ||
+            showFileCopyPrompt,
+        onPaneRemoved: (paneId) => {
+            // Check if this pane was intentionally closed
+            // If so, don't re-save - the close action already handled it
+            if (intentionallyClosedPanes.current.has(paneId)) {
+                return;
+            }
+            // Pane was removed unexpectedly (e.g., user killed tmux pane manually)
+            // Remove it from our tracking
+            const updatedPanes = panes.filter((p) => p.id !== paneId);
+            savePanes(updatedPanes);
+        },
+    });
+    const createNewPane = async (prompt, agent) => {
+        setIsCreatingPane(true);
+        setStatusMessage("Generating slug...");
+        const slug = await generateSlug(prompt);
+        setStatusMessage(\`Creating worktree: \${slug}...\`);
+        // Get git root directory for consistent worktree placement
+        let projectRoot;
+        try {
+            projectRoot = execSync("git rev-parse --show-toplevel", {
+                encoding: "utf-8",
+                stdio: "pipe",
+            }).trim();
+        }
+        catch {
+            // Fallback to current directory if not in a git repo
+            projectRoot = process.cwd();
+        }
+        // Create worktree path inside .dmux/worktrees directory
+        const worktreePath = path.join(projectRoot, ".dmux", "worktrees", slug);
+        // Get the original pane ID (where dmux is running) before clearing
+        const originalPaneId = execSync('tmux display-message -p "#{pane_id}"', {
+            encoding: "utf-8",
+        }).trim();
+        // 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());
+        // Enable pane borders to show titles
+        try {
+            execSync(\`tmux set-option -g pane-border-status top\`, { stdio: "pipe" });
+        }
+        catch {
+            // Ignore if already set or fails
+        }
+        // Create new pane
+        const paneInfo = execSync(\`tmux split-window -h -P -F '#{pane_id}'\`, {
+            encoding: "utf-8",
+        }).trim();
+        // Wait for pane creation to settle
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        // Set pane title to match the slug
+        try {
+            execSync(\`tmux select-pane -t '\${paneInfo}' -T "\${slug}"\`, {
+                stdio: "pipe",
+            });
+        }
+        catch {
+            // Ignore if setting title fails
+        }
+        // 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",
+            });
+            // Wait longer for worktree creation and cd to complete
+            // This is critical - if we don't wait long enough, Claude will start in the wrong directory
+            await new Promise((resolve) => setTimeout(resolve, 2500));
+            // Verify we're in the worktree directory by sending pwd command
+            execSync(\`tmux send-keys -t '\${paneInfo}' 'echo "Worktree created at:" && pwd' Enter\`, { stdio: "pipe" });
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            setStatusMessage(agent
+                ? \`Worktree created, launching \${agent === "opencode" ? "opencode" : "Claude"}...\`
+                : "Worktree created.");
+        }
+        catch (error) {
+            // Log error but continue - worktree creation is essential
+            setStatusMessage(\`Warning: Worktree issue: \${error}\`);
+            // Even if worktree creation failed, try to cd to the directory in case it exists
+            execSync(\`tmux send-keys -t '\${paneInfo}' 'cd "\${worktreePath}" 2>/dev/null || (echo "ERROR: Failed to create/enter worktree \${slug}" && pwd)' Enter\`, { stdio: "pipe" });
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+        // Prepare and send the agent command
+        let escapedCmd = "";
+        if (agent === "claude") {
+            // Claude should always be launched AFTER we're in the worktree directory
+            let claudeCmd;
+            if (prompt && prompt.trim()) {
+                const escapedPrompt = prompt
+                    .replace(/\\\\/g, "\\\\\\\\")
+                    .replace(/"/g, '\\\\"')
+                    .replace(/\`/g, "\\\\\`")
+                    .replace(/\\$/g, "\\\\$");
+                claudeCmd = \`claude "\${escapedPrompt}" --permission-mode=acceptEdits\`;
+            }
+            else {
+                claudeCmd = \`claude --permission-mode=acceptEdits\`;
+            }
+            // Send Claude command to new pane
+            escapedCmd = claudeCmd.replace(/'/g, "'\\\\''");
+            execSync(\`tmux send-keys -t '\${paneInfo}' '\${escapedCmd}'\`, {
+                stdio: "pipe",
+            });
+            execSync(\`tmux send-keys -t '\${paneInfo}' Enter\`, { stdio: "pipe" });
+        }
+        else if (agent === "opencode") {
+            // opencode: start the TUI, then paste the prompt and submit
+            const openCoderCmd = \`opencode\`;
+            const escapedOpenCmd = openCoderCmd.replace(/'/g, "'\\\\''");
+            execSync(\`tmux send-keys -t '\${paneInfo}' '\${escapedOpenCmd}'\`, {
+                stdio: "pipe",
+            });
+            execSync(\`tmux send-keys -t '\${paneInfo}' Enter\`, { stdio: "pipe" });
+            if (prompt && prompt.trim()) {
+                await new Promise((resolve) => setTimeout(resolve, 1500));
+                const bufName = \`dmux_prompt_\${Date.now()}\`;
+                const promptEsc = prompt.replace(/\\\\/g, "\\\\\\\\").replace(/'/g, "'\\\\''");
+                execSync(\`tmux set-buffer -b '\${bufName}' -- '\${promptEsc}'\`, {
+                    stdio: "pipe",
+                });
+                execSync(\`tmux paste-buffer -b '\${bufName}' -t '\${paneInfo}'\`, {
+                    stdio: "pipe",
+                });
+                await new Promise((resolve) => setTimeout(resolve, 200));
+                execSync(\`tmux delete-buffer -b '\${bufName}'\`, { stdio: "pipe" });
+                execSync(\`tmux send-keys -t '\${paneInfo}' Enter\`, { stdio: "pipe" });
+            }
+        }
+        if (agent === "claude") {
+            // Monitor for Claude Code trust prompt and auto-respond
+            const autoApproveTrust = async () => {
+                // Wait for Claude to start up before checking for prompts
+                await new Promise((resolve) => setTimeout(resolve, 800));
+                const maxChecks = 100; // 100 checks * 100ms = 10 seconds total
+                const checkInterval = 100; // Check every 100ms
+                let lastContent = "";
+                let stableContentCount = 0;
                 let promptHandled = false;
                 // More comprehensive trust prompt patterns
                 const trustPromptPatterns = [
@@ -1547,14 +2549,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) {
@@ -1565,14 +2568,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
@@ -1580,44 +2584,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;
                         }
                     }
@@ -1627,37 +2644,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();
     };
@@ -1665,30 +2680,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' });
+            execSync(\`tmux select-pane -t '\${paneId}'\`, { stdio: "pipe" });
             // Clear screen after jump to remove artifacts
             clearScreen();
-            setStatusMessage('Jumped to pane');
-            setTimeout(() => setStatusMessage(''), 2000);
+            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);
@@ -1707,444 +2724,139 @@ 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' });
-                }
-                catch { }
-            }
-            // Create a new background window for the command
-            const windowName = \`\${pane.slug}-\${type}\`;
-            const windowId = execSync(\`tmux new-window -d -n '\${windowName}' -P -F '#{window_id}'\`, { encoding: 'utf-8', stdio: 'pipe' }).trim();
-            // Create a log file to capture output
-            const logFile = \`/tmp/dmux-\${pane.id}-\${type}.log\`;
-            // Build the command with output capture
-            const fullCommand = type === 'test'
-                ? \`cd "\${pane.worktreePath}" && \${command} 2>&1 | tee \${logFile}\`
-                : \`cd "\${pane.worktreePath}" && \${command} 2>&1 | tee \${logFile}\`;
-            // Send the command to the new window
-            execSync(\`tmux send-keys -t '\${windowId}' '\${fullCommand.replace(/'/g, "'\\\\''")}'\`, { stdio: 'pipe' });
-            execSync(\`tmux send-keys -t '\${windowId}' Enter\`, { stdio: 'pipe' });
-            // Update pane with window info
-            const updatedPane = {
-                ...pane,
-                [type === 'test' ? 'testWindowId' : 'devWindowId']: windowId,
-                [type === 'test' ? 'testStatus' : 'devStatus']: 'running'
-            };
-            const updatedPanes = panes.map(p => p.id === pane.id ? updatedPane : p);
-            await savePanes(updatedPanes);
-            // Start monitoring the output
-            if (type === 'test') {
-                // For tests, monitor for completion
-                setTimeout(() => monitorTestOutput(pane.id, logFile), 2000);
-            }
-            else {
-                // For dev, monitor for server URL
-                setTimeout(() => monitorDevOutput(pane.id, logFile), 2000);
-            }
-            setRunningCommand(false);
-            setStatusMessage(\`\${type === 'test' ? 'Test' : 'Dev server'} started in background\`);
-            setTimeout(() => setStatusMessage(''), 3000);
-        }
-        catch (error) {
-            setRunningCommand(false);
-            setStatusMessage(\`Failed to run \${type} command\`);
-            setTimeout(() => setStatusMessage(''), 3000);
-        }
-    };
-    // Update handling moved to useAutoUpdater
-    // Helper function to clear screen artifacts
-    const clearScreen = () => {
-        // CRITICAL: Force Ink to re-render FIRST, before clearing
-        // This prevents blank screen by ensuring React starts rendering immediately
-        setForceRepaintTrigger(prev => prev + 1);
-        // Multiple clearing strategies to prevent artifacts
-        // 1. Clear screen with ANSI codes
-        process.stdout.write('\\x1b[2J\\x1b[H');
-        // 2. Clear tmux history
-        try {
-            execSync('tmux clear-history', { stdio: 'pipe' });
-        }
-        catch { }
-        // 3. Force tmux to refresh the display
-        try {
-            execSync('tmux refresh-client', { stdio: 'pipe' });
-        }
-        catch { }
-    };
-    // Cleanup function for exit
-    const cleanExit = () => {
-        // Clear screen before exiting Ink
-        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
-            // Clear tmux history and pane
-            try {
-                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');
-            // Show clean goodbye message
-            process.stdout.write('\\n  Run dmux again to resume. Goodbye 👋\\n\\n');
-            // Exit process
-            process.exit(0);
-        }, 100);
-    };
-    useInput(async (input, key) => {
-        // Handle Ctrl+C for quit confirmation (must be first, before any other checks)
-        if (key.ctrl && input === 'c') {
-            if (quitConfirmMode) {
-                // Second Ctrl+C - actually quit
-                cleanExit();
-            }
-            else {
-                // First Ctrl+C - show confirmation
-                setQuitConfirmMode(true);
-                // Reset after 3 seconds if user doesn't press Ctrl+C again
-                setTimeout(() => {
-                    setQuitConfirmMode(false);
-                }, 3000);
-            }
-            return;
-        }
-        if (isCreatingPane || runningCommand || isUpdating || isLoading || isCreatingTunnel) {
-            // Disable input while performing operations or loading
-            return;
-        }
-        // Handle kebab menu navigation
-        if (showKebabMenu && kebabMenuPaneIndex !== null) {
-            const currentPane = panes[kebabMenuPaneIndex];
-            const availableActions = kebabMenuActions;
-            if (key.escape) {
-                setShowKebabMenu(false);
-                setKebabMenuPaneIndex(null);
-                setKebabMenuOption(0);
-                setKebabMenuActions([]);
-                return;
-            }
-            else if (key.upArrow) {
-                setKebabMenuOption(Math.max(0, kebabMenuOption - 1));
-                return;
-            }
-            else if (key.downArrow) {
-                setKebabMenuOption(Math.min(availableActions.length - 1, kebabMenuOption + 1));
-                return;
-            }
-            else if (key.return) {
-                // Execute the selected menu action
-                setShowKebabMenu(false);
-                const selectedAction = availableActions[kebabMenuOption];
-                if (selectedAction) {
-                    // Use the action system to execute
-                    actionSystem.executeAction(selectedAction.id, currentPane, { mainBranch: getMainBranch() });
-                }
-                setKebabMenuPaneIndex(null);
-                setKebabMenuOption(0);
-                setKebabMenuActions([]);
-                return;
-            }
-            // Don't process other inputs while menu is open
-            return;
-        }
-        // Handle quit confirm mode - ESC cancels it
-        if (quitConfirmMode) {
-            if (key.escape) {
-                setQuitConfirmMode(false);
-                return;
-            }
-            // Allow other inputs to continue (don't return early)
-        }
-        // Handle QR code view
-        if (showQRCode) {
-            if (key.escape) {
-                setShowQRCode(false);
-            }
-            return;
-        }
-        // Handle hooks dialog
-        if (showHooksDialog) {
-            if (key.escape) {
-                setShowHooksDialog(false);
-                setHooksSelectedIndex(0);
-                // Go back to settings dialog
-                setShowSettingsDialog(true);
-                setSettingsMode('list');
-                return;
-            }
-            else if (key.upArrow) {
-                setHooksSelectedIndex(Math.max(0, hooksSelectedIndex - 1));
-                return;
-            }
-            else if (key.downArrow) {
-                setHooksSelectedIndex(Math.min(hooksData.length - 1, hooksSelectedIndex + 1));
-                return;
-            }
-            else if (input === 'e') {
-                // Edit hooks using an agent
-                setShowHooksDialog(false);
-                setHooksSelectedIndex(0);
-                const prompt = "I would like to edit my dmux hooks in .dmux-hooks, please read the instructions in there and ask me what I want to edit";
-                setPendingPrompt(prompt);
-                setNewPanePrompt(prompt);
-                // Choose agent
-                const agents = availableAgents;
-                if (agents.length === 0) {
-                    createNewPaneHook(prompt);
-                }
-                else if (agents.length === 1) {
-                    createNewPaneHook(prompt, agents[0]);
-                }
-                else {
-                    setShowAgentChoiceDialog(true);
-                    setAgentChoice(agentChoice || 'claude');
-                }
-                return;
-            }
-            return;
-        }
-        // Handle settings dialog
-        if (showSettingsDialog) {
-            if (key.escape) {
-                if (settingsMode === 'list') {
-                    // Close settings dialog
-                    setShowSettingsDialog(false);
-                    setSettingsMode('list');
-                    setSettingsSelectedIndex(0);
-                    setSettingsEditingKey(undefined);
-                }
-                else {
-                    // Go back to list
-                    setSettingsMode('list');
-                    setSettingsEditingKey(undefined);
-                    setSettingsEditingValueIndex(0);
-                    setSettingsScopeIndex(0);
-                }
-                return;
-            }
-            else if (key.upArrow) {
-                if (settingsMode === 'list') {
-                    setSettingsSelectedIndex(Math.max(0, settingsSelectedIndex - 1));
-                }
-                else if (settingsMode === 'edit') {
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    const maxIndex = currentDef.type === 'boolean' ? 1 : (currentDef.options?.length || 1) - 1;
-                    setSettingsEditingValueIndex(Math.max(0, settingsEditingValueIndex - 1));
-                }
-                else if (settingsMode === 'scope') {
-                    setSettingsScopeIndex(Math.max(0, settingsScopeIndex - 1));
-                }
-                return;
-            }
-            else if (key.downArrow) {
-                if (settingsMode === 'list') {
-                    setSettingsSelectedIndex(Math.min(SETTING_DEFINITIONS.length - 1, settingsSelectedIndex + 1));
-                }
-                else if (settingsMode === 'edit') {
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    const maxIndex = currentDef.type === 'boolean' ? 1 : (currentDef.options?.length || 1) - 1;
-                    setSettingsEditingValueIndex(Math.min(maxIndex, settingsEditingValueIndex + 1));
-                }
-                else if (settingsMode === 'scope') {
-                    setSettingsScopeIndex(Math.min(1, settingsScopeIndex + 1));
-                }
-                return;
-            }
-            else if (key.return) {
-                if (settingsMode === 'list') {
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    // Handle action type - trigger the action instead of editing
-                    if (currentDef.type === 'action') {
-                        if (currentDef.key === 'hooks') {
-                            // Show hooks dialog
-                            setShowSettingsDialog(false);
-                            const { hasHook } = await import('./utils/hooks.js');
-                            const allHookTypes = [
-                                'before_pane_create',
-                                'pane_created',
-                                'worktree_created',
-                                'before_pane_close',
-                                'pane_closed',
-                                'before_worktree_remove',
-                                'worktree_removed',
-                                'pre_merge',
-                                'post_merge',
-                                'run_test',
-                                'run_dev',
-                            ];
-                            const hooks = allHookTypes.map(hookName => ({
-                                name: hookName,
-                                active: hasHook(projectRoot || process.cwd(), hookName)
-                            }));
-                            setHooksData(hooks);
-                            setShowHooksDialog(true);
-                            setHooksSelectedIndex(0);
-                        }
-                        return;
-                    }
-                    // Enter edit mode for regular settings
-                    setSettingsEditingKey(currentDef.key);
-                    setSettingsMode('edit');
-                    // Set initial value index based on current setting
-                    const currentValue = settingsManager.getSetting(currentDef.key);
-                    if (currentDef.type === 'boolean') {
-                        setSettingsEditingValueIndex(currentValue ? 0 : 1);
-                    }
-                    else if (currentDef.type === 'select' && currentDef.options) {
-                        const optIndex = currentDef.options.findIndex(o => o.value === currentValue);
-                        setSettingsEditingValueIndex(Math.max(0, optIndex));
-                    }
-                }
-                else if (settingsMode === 'edit') {
-                    // Go to scope selection
-                    setSettingsMode('scope');
-                    setSettingsScopeIndex(0);
-                }
-                else if (settingsMode === 'scope') {
-                    // Save the setting
-                    const currentDef = SETTING_DEFINITIONS[settingsSelectedIndex];
-                    const scope = settingsScopeIndex === 0 ? 'global' : 'project';
-                    // Only save if this is not an action type (actions don't have values)
-                    if (currentDef.type !== 'action') {
-                        // Calculate the new value
-                        let newValue;
-                        if (currentDef.type === 'boolean') {
-                            newValue = settingsEditingValueIndex === 0;
-                        }
-                        else if (currentDef.type === 'select' && currentDef.options) {
-                            newValue = currentDef.options[settingsEditingValueIndex]?.value || '';
-                        }
-                        // Update the setting - cast key to proper type since we know it's not an action
-                        settingsManager.updateSetting(currentDef.key, newValue, scope);
-                    }
-                    // Reset to list view
-                    setSettingsMode('list');
-                    setSettingsEditingKey(undefined);
-                    setSettingsEditingValueIndex(0);
-                    setSettingsScopeIndex(0);
-                    setStatusMessage(\`Setting saved (\${scope})\`);
-                    setTimeout(() => setStatusMessage(''), 2000);
-                }
-                return;
-            }
-            return;
-        }
-        // Handle action system confirm dialog
-        if (actionSystem.actionState.showConfirmDialog) {
-            if (key.escape) {
-                if (actionSystem.actionState.onConfirmNo) {
-                    actionSystem.executeCallback(actionSystem.actionState.onConfirmNo);
-                }
-                else {
-                    actionSystem.setActionState(prev => ({ ...prev, showConfirmDialog: false }));
-                }
-                return;
-            }
-            else if (key.upArrow) {
-                actionSystem.setActionState(prev => ({
-                    ...prev,
-                    confirmSelectedIndex: Math.max(0, prev.confirmSelectedIndex - 1)
-                }));
-                return;
-            }
-            else if (key.downArrow) {
-                actionSystem.setActionState(prev => ({
-                    ...prev,
-                    confirmSelectedIndex: Math.min(1, prev.confirmSelectedIndex + 1)
-                }));
-                return;
-            }
-            else if (key.return) {
-                // Execute based on selected index
-                if (actionSystem.actionState.confirmSelectedIndex === 0) {
-                    if (actionSystem.actionState.onConfirmYes) {
-                        actionSystem.executeCallback(actionSystem.actionState.onConfirmYes);
-                    }
-                }
-                else {
-                    if (actionSystem.actionState.onConfirmNo) {
-                        actionSystem.executeCallback(actionSystem.actionState.onConfirmNo);
-                    }
-                    else {
-                        actionSystem.setActionState(prev => ({ ...prev, showConfirmDialog: false }));
-                    }
-                }
-                return;
-            }
-            else if (input === 'y' || input === 'Y') {
-                // Shortcut: yes
-                if (actionSystem.actionState.onConfirmYes) {
-                    actionSystem.executeCallback(actionSystem.actionState.onConfirmYes);
+                    execSync(\`tmux kill-window -t '\${existingWindowId}'\`, {
+                        stdio: "pipe",
+                    });
                 }
-                return;
+                catch { }
             }
-            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;
+            // Create a new background window for the command
+            const windowName = \`\${pane.slug}-\${type}\`;
+            const windowId = execSync(\`tmux new-window -d -n '\${windowName}' -P -F '#{window_id}'\`, { encoding: "utf-8", stdio: "pipe" }).trim();
+            // Create a log file to capture output
+            const logFile = \`/tmp/dmux-\${pane.id}-\${type}.log\`;
+            // Build the command with output capture
+            const fullCommand = type === "test"
+                ? \`cd "\${pane.worktreePath}" && \${command} 2>&1 | tee \${logFile}\`
+                : \`cd "\${pane.worktreePath}" && \${command} 2>&1 | tee \${logFile}\`;
+            // Send the command to the new window
+            execSync(\`tmux send-keys -t '\${windowId}' '\${fullCommand.replace(/'/g, "'\\\\''")}'\`, { stdio: "pipe" });
+            execSync(\`tmux send-keys -t '\${windowId}' Enter\`, { stdio: "pipe" });
+            // Update pane with window info
+            const updatedPane = {
+                ...pane,
+                [type === "test" ? "testWindowId" : "devWindowId"]: windowId,
+                [type === "test" ? "testStatus" : "devStatus"]: "running",
+            };
+            const updatedPanes = panes.map((p) => p.id === pane.id ? updatedPane : p);
+            await savePanes(updatedPanes);
+            // Start monitoring the output
+            if (type === "test") {
+                // For tests, monitor for completion
+                setTimeout(() => monitorTestOutput(pane.id, logFile), 2000);
+            }
+            else {
+                // For dev, monitor for server URL
+                setTimeout(() => monitorDevOutput(pane.id, logFile), 2000);
+            }
+            setRunningCommand(false);
+            setStatusMessage(\`\${type === "test" ? "Test" : "Dev server"} started in background\`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+        catch (error) {
+            setRunningCommand(false);
+            setStatusMessage(\`Failed to run \${type} command\`);
+            setTimeout(() => setStatusMessage(""), 3000);
+        }
+    };
+    // Update handling moved to useAutoUpdater
+    // Helper function to clear screen artifacts
+    const clearScreen = () => {
+        // CRITICAL: Force Ink to re-render FIRST, before clearing
+        // This prevents blank screen by ensuring React starts rendering immediately
+        setForceRepaintTrigger((prev) => prev + 1);
+        // Multiple clearing strategies to prevent artifacts
+        // 1. Clear screen with ANSI codes
+        process.stdout.write("\\x1b[2J\\x1b[H");
+        // 2. Clear tmux history
+        try {
+            execSync("tmux clear-history", { stdio: "pipe" });
+        }
+        catch { }
+        // 3. Force tmux to refresh the display
+        try {
+            execSync("tmux refresh-client", { stdio: "pipe" });
+        }
+        catch { }
+    };
+    // Cleanup function for exit
+    const cleanExit = () => {
+        // Clear screen before exiting Ink
+        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
+            // Clear tmux history and pane
+            try {
+                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");
+            // Show clean goodbye message
+            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 action system input dialog
-        if (actionSystem.actionState.showInputDialog) {
-            if (key.escape) {
-                actionSystem.setActionState(prev => ({ ...prev, showInputDialog: false }));
-                return;
+        // Handle Ctrl+C for quit confirmation (must be first, before any other checks)
+        if (key.ctrl && input === "c") {
+            if (quitConfirmMode) {
+                // Second Ctrl+C - actually quit
+                cleanExit();
             }
-            else if (key.return) {
-                if (actionSystem.actionState.onInputSubmit) {
-                    actionSystem.executeCallback(async () => actionSystem.actionState.onInputSubmit(actionSystem.actionState.inputValue));
-                }
-                return;
+            else {
+                // First Ctrl+C - show confirmation
+                setQuitConfirmMode(true);
+                // Reset after 3 seconds if user doesn't press Ctrl+C again
+                setTimeout(() => {
+                    setQuitConfirmMode(false);
+                }, 3000);
             }
-            // Let CleanTextInput handle all other key events
             return;
         }
-        // Handle action system choice dialog
-        if (actionSystem.actionState.showChoiceDialog) {
+        if (isCreatingPane || runningCommand || isUpdating || isLoading) {
+            // Disable input while performing operations or loading
+            return;
+        }
+        // Handle quit confirm mode - ESC cancels it
+        if (quitConfirmMode) {
             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));
-                }
+                setQuitConfirmMode(false);
                 return;
             }
-            return;
+            // Allow other inputs to continue (don't return early)
         }
         if (showFileCopyPrompt) {
-            if (input === 'y' || input === 'Y') {
+            if (input === "y" || input === "Y") {
                 setShowFileCopyPrompt(false);
                 const selectedPane = panes[selectedIndex];
                 if (selectedPane && selectedPane.worktreePath && currentCommandType) {
@@ -2152,7 +2864,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
@@ -2160,14 +2872,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
@@ -2177,36 +2889,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) {
@@ -2217,13 +2906,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);
@@ -2232,173 +2923,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))) {
-            // 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 === "n" || (key.return && selectedIndex === panes.length))) {
+            // Launch popup modal for new pane
+            await launchNewPanePopup();
+            return;
+        }
+        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" },
+    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(PanesGrid, { panes: panes, selectedIndex: selectedIndex, isLoading: isLoading, showNewPaneDialog: showNewPaneDialog, agentStatuses: agentStatuses, kebabMenuPaneIndex: kebabMenuPaneIndex ?? undefined }),
-        isLoading && (React.createElement(LoadingIndicator, null)),
-        showNewPaneDialog && !showAgentChoiceDialog && (React.createElement(NewPaneDialog, { value: newPanePrompt, onChange: setNewPanePrompt, onSubmit: (value) => {
-                const promptValue = value;
-                const agents = availableAgents;
-                if (agents.length === 0) {
-                    setShowNewPaneDialog(false);
-                    setNewPanePrompt('');
-                    createNewPaneHook(promptValue);
-                }
-                else if (agents.length === 1) {
-                    setShowNewPaneDialog(false);
-                    setNewPanePrompt('');
-                    createNewPaneHook(promptValue, agents[0]);
-                }
-                else {
-                    setPendingPrompt(promptValue);
-                    setShowNewPaneDialog(false);
-                    setNewPanePrompt('');
-                    setShowAgentChoiceDialog(true);
-                    setAgentChoice(agentChoice || 'claude');
-                }
-            } })),
-        showAgentChoiceDialog && (React.createElement(AgentChoiceDialog, { agentChoice: agentChoice })),
-        isCreatingPane && (React.createElement(CreatingIndicator, { message: statusMessage })),
-        showCommandPrompt && (React.createElement(CommandPromptDialog, { type: showCommandPrompt, value: commandInput, onChange: setCommandInput })),
-        showFileCopyPrompt && (React.createElement(FileCopyPrompt, null)),
-        showKebabMenu && kebabMenuPaneIndex !== null && panes[kebabMenuPaneIndex] && (React.createElement(KebabMenu, { selectedOption: kebabMenuOption, actions: kebabMenuActions, paneName: panes[kebabMenuPaneIndex].slug })),
-        showSettingsDialog && (React.createElement(SettingsDialog, { settings: settingsManager.getSettings(), globalSettings: settingsManager.getGlobalSettings(), projectSettings: settingsManager.getProjectSettings(), settingDefinitions: SETTING_DEFINITIONS, selectedIndex: settingsSelectedIndex, mode: settingsMode, editingKey: settingsEditingKey, editingValueIndex: settingsEditingValueIndex, scopeIndex: settingsScopeIndex })),
-        showHooksDialog && (React.createElement(HooksDialog, { hooks: hooksData, selectedIndex: hooksSelectedIndex })),
-        actionSystem.actionState.showConfirmDialog && (React.createElement(ActionConfirmDialog, { key: "confirm-dialog", title: actionSystem.actionState.confirmTitle, message: actionSystem.actionState.confirmMessage, yesLabel: actionSystem.actionState.confirmYesLabel, noLabel: actionSystem.actionState.confirmNoLabel, selectedIndex: actionSystem.actionState.confirmSelectedIndex })),
-        actionSystem.actionState.showChoiceDialog && (React.createElement(ActionChoiceDialog, { key: "choice-dialog", title: actionSystem.actionState.choiceTitle, message: actionSystem.actionState.choiceMessage, options: actionSystem.actionState.choiceOptions, selectedIndex: actionSystem.actionState.choiceSelectedIndex })),
-        actionSystem.actionState.showInputDialog && (React.createElement(ActionInputDialog, { key: "input-dialog", title: actionSystem.actionState.inputTitle, message: actionSystem.actionState.inputMessage, placeholder: actionSystem.actionState.inputPlaceholder, value: actionSystem.actionState.inputValue, onValueChange: (value) => {
-                actionSystem.setActionState(prev => ({ ...prev, inputValue: value }));
-            } })),
-        actionSystem.actionState.showProgressDialog && (React.createElement(ActionProgressDialog, { key: "progress-dialog", message: actionSystem.actionState.progressMessage, percent: actionSystem.actionState.progressPercent })),
-        runningCommand && (React.createElement(RunningIndicator, null)),
-        isUpdating && (React.createElement(UpdatingIndicator, null)),
-        isCreatingTunnel && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", padding: 1, marginTop: 1 },
-            React.createElement(Text, { bold: true, color: "cyan" }, "Creating tunnel..."),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { dimColor: true }, "This may take a few moments...")))),
-        statusMessage && (React.createElement(Box, { marginTop: 1 },
+        React.createElement(Box, { flexDirection: "column", height: contentHeight, overflow: "hidden" },
+            React.createElement(PanesGrid, { panes: panes, selectedIndex: selectedIndex, isLoading: isLoading, agentStatuses: agentStatuses }),
+            isLoading && React.createElement(LoadingIndicator, null),
+            showCommandPrompt && (React.createElement(CommandPromptDialog, { type: showCommandPrompt, value: commandInput, onChange: setCommandInput })),
+            showFileCopyPrompt && React.createElement(FileCopyPrompt, null),
+            runningCommand && React.createElement(RunningIndicator, null),
+            isUpdating && React.createElement(UpdatingIndicator, null)),
+        statusMessage && (React.createElement(Box, null,
             React.createElement(Text, { color: "green" }, statusMessage))),
-        actionSystem.actionState.statusMessage && (React.createElement(Box, { marginTop: 1 },
-            React.createElement(Text, { color: actionSystem.actionState.statusType === 'error' ? 'red' :
-                    actionSystem.actionState.statusType === 'success' ? 'green' :
-                        'cyan' }, actionSystem.actionState.statusMessage))),
-        React.createElement(FooterHelp, { show: !showNewPaneDialog && !showCommandPrompt, showRemoteKey: !!server, quitConfirmMode: quitConfirmMode, gridInfo: (() => {
+        actionSystem.actionState.statusMessage && (React.createElement(Box, null,
+            React.createElement(Text, { color: actionSystem.actionState.statusType === "error"
+                    ? "red"
+                    : actionSystem.actionState.statusType === "success"
+                        ? "green"
+                        : "cyan" }, actionSystem.actionState.statusMessage))),
+        React.createElement(FooterHelp, { show: !showCommandPrompt, showRemoteKey: !!server, quitConfirmMode: quitConfirmMode, hasSidebarLayout: !!controlPaneId, serverPort: serverPort, unreadErrorCount: unreadErrorCount, unreadWarningCount: unreadWarningCount, localIp: localIp, tunnelUrl: tunnelUrl, tunnelCreating: tunnelCreating, tunnelCopied: tunnelCopied, tunnelSpinner: (() => {
+                const spinnerFrames = [
+                    "⠋",
+                    "⠙",
+                    "⠹",
+                    "⠸",
+                    "⠼",
+                    "⠴",
+                    "⠦",
+                    "⠧",
+                    "⠇",
+                    "⠏",
+                ];
+                return spinnerFrames[tunnelSpinnerFrame];
+            })(), gridInfo: (() => {
                 if (!process.env.DEBUG_DMUX)
                     return undefined;
                 const cols = Math.max(1, Math.floor(terminalWidth / 37));
@@ -2406,23 +3134,21 @@ 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)))));
 };
 export default DmuxApp;
 //# sourceMappingURL=DmuxApp.js.map`,
         mimeType: 'application/javascript',
-        size: 68389
+        size: 94288
     },
     'EnhancedTextInput.js': {
         content: `import React, { useState, useEffect } from 'react';
@@ -4787,26 +5513,174 @@ Expected function or array of functions, received type \${typeof e}.\`),ne)}func
     },
     'dashboard.js': {
         content: `import{d as Mt,r as u,o as zt,a as Nt,n as I,_ as Ht,c as n,b as t,t as g,e as r,f as Ot,g as P,F as y,h as w,w as M,i as at,v as it,j as lt,k as a,l as z,m as Ft}from"./chunks/_plugin-vue_export-helper-Cvoq67hi.js";const Et=Mt({__name:"Dashboard",setup(vt,{expose:i}){i();const U=u("Loading..."),e=u(""),O=u(!1),F=u([]),o=u(null),p=u("Never"),h=u({}),f=u(new Set),J=u({}),x=u(localStorage.getItem("dmux-theme")||"dark"),A=u(new Set),b=u(new Set),K=u(!1),T=u(""),C=u(null),Q=u(!1),E=u([]),L=u(!1),j=u("prompt"),pt=u([]),W=u({}),S=u(null),k=u(null),R=u(!1),D=u(!1),Z=u(!1),V=u(null),G=u([]),N=u(!1),H=u(!1),q=u([]),X=u(!1);let _=null;const Y=()=>{_&&clearInterval(_),ot(),_=setInterval(()=>{ot()},2e3)},$=()=>{_&&(clearInterval(_),_=null)},ht=()=>{x.value=x.value==="dark"?"light":"dark",localStorage.setItem("dmux-theme",x.value),document.documentElement.setAttribute("data-theme",x.value)},mt=s=>{A.value.has(s)?A.value.delete(s):A.value.add(s),A.value=new Set(A.value)},yt=()=>{K.value=!0,T.value="",C.value=null,E.value=[],L.value=!1,j.value="prompt",I(()=>{const l=document.getElementById("pane-prompt");l&&l.focus()});const s=l=>{l.key==="Escape"&&(tt(),document.removeEventListener("keydown",s))};document.addEventListener("keydown",s)},tt=()=>{K.value=!1,T.value="",C.value=null,E.value=[],L.value=!1,j.value="prompt"},et=async()=>{if(!(j.value==="prompt"&&!T.value.trim())&&!(j.value==="agent"&&!C.value))try{Q.value=!0;const s={prompt:T.value.trim()};C.value&&(s.agent=C.value);const d=await(await fetch("/api/panes",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)})).json();d.needsAgentChoice?(L.value=!0,E.value=d.availableAgents,j.value="agent"):tt()}catch(s){console.error("Failed to create pane:",s),alert("Failed to create pane")}finally{Q.value=!1}},kt=s=>{C.value=s,et()},ct=s=>{U.value=s.projectName||"dmux",e.value=s.sessionName||"",O.value=!0,F.value=s.panes||[],o.value=new Date,p.value="Just now";for(const l of F.value)W.value[l.id]||dt(l.id)},ot=async()=>{try{const l=await(await fetch("/api/panes")).json();ct(l)}catch(s){console.error("Failed to fetch panes:",s),O.value=!1}},dt=async s=>{try{const d=await(await fetch(\`/api/panes/\${s}/actions\`)).json();W.value[s]=d.actions||[]}catch(l){console.error(\`Failed to fetch actions for pane \${s}:\`,l)}},ft=s=>{S.value===s?S.value=null:S.value=s},bt=async(s,l)=>{var d;try{R.value=!0,S.value=null;const v=await(await fetch(\`/api/panes/\${s.id}/actions/\${l.id}\`,{method:"POST"})).json();if(v.requiresInteraction){let m={};v.interactionType==="confirm"?m={type:"confirm",title:v.title||"Confirm",message:v.message,...v.confirmData}:v.interactionType==="choice"?m={type:"choice",title:v.title||"Choose",message:v.message,...v.choiceData}:v.interactionType==="input"&&(m={type:"input",title:v.title||"Input",message:v.message,...v.inputData,inputValue:((d=v.inputData)==null?void 0:d.defaultValue)||""},I(()=>{const nt=document.querySelector(".dialog-input");nt&&(nt.focus(),nt.select())})),m.paneId=s.id,k.value=m}}catch(c){console.error("Failed to execute action:",c),alert("Failed to execute action")}finally{R.value=!1}},B=()=>{k.value=null},_t=async s=>{var l;if(k.value)try{D.value=!0;const c=await(await fetch(\`/api/callbacks/confirm/\${k.value.callbackId}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({confirmed:s})})).json();if(c.requiresInteraction){let v={};c.interactionType==="confirm"?v={type:"confirm",title:c.title||"Confirm",message:c.message,...c.confirmData}:c.interactionType==="choice"?v={type:"choice",title:c.title||"Choose",message:c.message,...c.choiceData}:c.interactionType==="input"&&(v={type:"input",title:c.title||"Input",message:c.message,...c.inputData,inputValue:((l=c.inputData)==null?void 0:l.defaultValue)||""},I(()=>{const m=document.querySelector(".dialog-input");m&&(m.focus(),m.select())})),k.value=v}else B()}catch(d){console.error("Failed to confirm action:",d),alert("Failed to complete action")}finally{D.value=!1}},wt=async s=>{var l;if(k.value)try{D.value=!0;const c=await(await fetch(\`/api/callbacks/choice/\${k.value.callbackId}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({optionId:s})})).json();if(c.requiresInteraction){let v={};c.interactionType==="confirm"?v={type:"confirm",title:c.title||"Confirm",message:c.message,...c.confirmData}:c.interactionType==="choice"?v={type:"choice",title:c.title||"Choose",message:c.message,...c.choiceData}:c.interactionType==="input"&&(v={type:"input",title:c.title||"Input",message:c.message,...c.inputData,inputValue:((l=c.inputData)==null?void 0:l.defaultValue)||""},I(()=>{const m=document.querySelector(".dialog-input");m&&(m.focus(),m.select())})),k.value=v}else B()}catch(d){console.error("Failed to select choice:",d),alert("Failed to complete action")}finally{D.value=!1}},Ct=s=>s.split(\`
-\`).map(l=>{if(l.includes("|")){const d=l.split("|");if(d.length===2){const c=d[0],m=d[1].replace(/\\+/g,'<span style="color: #4ade80;">+</span>').replace(/-/g,'<span style="color: #f87171;">-</span>');return c+'<span style="opacity: 0.6;">|</span>'+m}}return l}).join("<br>"),St=async()=>{var s;if(k.value)try{D.value=!0;const d=await(await fetch(\`/api/callbacks/input/\${k.value.callbackId}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({value:k.value.inputValue})})).json();if(d.requiresInteraction){let c={};d.interactionType==="confirm"?c={type:"confirm",title:d.title||"Confirm",message:d.message,...d.confirmData}:d.interactionType==="choice"?c={type:"choice",title:d.title||"Choose",message:d.message,...d.choiceData}:d.interactionType==="input"&&(c={type:"input",title:d.title||"Input",message:d.message,...d.inputData,inputValue:((s=d.inputData)==null?void 0:s.defaultValue)||""},I(()=>{const v=document.querySelector(".dialog-input");v&&(v.focus(),v.select())})),k.value=c}else B()}catch(l){console.error("Failed to submit input:",l),alert("Failed to complete action")}finally{D.value=!1}},Dt=async(s,l)=>{try{b.value.add(s.id),b.value=new Set(b.value);const d=l.keys||[l.action];for(const c of d)await fetch(\`/api/keys/\${s.id}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:c})});setTimeout(()=>{b.value.delete(s.id),b.value=new Set(b.value)},1500)}catch(d){console.error("Failed to select option:",d),b.value.delete(s.id),b.value=new Set(b.value)}},Pt=async s=>{const l=h.value[s.id];if(!(!l||!l.trim()))try{f.value.add(s.id),f.value=new Set(f.value);for(const d of l)await fetch(\`/api/keys/\${s.id}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:d})});await fetch(\`/api/keys/\${s.id}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:"Enter"})}),J.value[s.id]=l.substring(0,50)+(l.length>50?"...":""),h.value[s.id]="",setTimeout(()=>{delete J.value[s.id],f.value.delete(s.id),f.value=new Set(f.value)},3e3)}catch(d){console.error("Failed to send prompt:",d),f.value.delete(s.id),f.value=new Set(f.value)}},xt=s=>{const l=s.target;l.style.height="auto",l.style.height=l.scrollHeight+"px"},At=async()=>{try{N.value=!0;const l=await(await fetch("/api/settings")).json();V.value=l.settings,G.value=l.definitions,Z.value=!0,H.value=!1}catch(s){console.error("Failed to load settings:",s),alert("Failed to load settings")}finally{N.value=!1}},rt=()=>{Z.value=!1,V.value=null,G.value=[],H.value=!1,q.value=[]},Tt=async(s,l,d)=>{try{N.value=!0,await fetch("/api/settings",{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:s,value:l,scope:d})});const v=await(await fetch("/api/settings")).json();V.value=v.settings}catch(c){console.error("Failed to update setting:",c),alert("Failed to update setting")}finally{N.value=!1}},jt=async()=>{try{X.value=!0;const l=await(await fetch("/api/hooks")).json();q.value=l.hooks||[],H.value=!0}catch(s){console.error("Failed to load hooks:",s),alert("Failed to load hooks")}finally{X.value=!1}},gt=()=>{H.value=!1,q.value=[]},It=async()=>{const s="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";gt(),rt(),T.value=s,await I(),await et()},st=s=>{const l=s.target;S.value&&!l.closest(".action-menu-btn")&&!l.closest(".action-menu-dropdown")&&(S.value=null)};zt(()=>{document.documentElement.setAttribute("data-theme",x.value),Y(),document.addEventListener("click",st),document.addEventListener("visibilitychange",()=>{document.hidden?$():Y()})}),Nt(()=>{$(),document.removeEventListener("click",st)});const ut={projectName:U,sessionName:e,connected:O,panes:F,lastUpdate:o,timeSinceUpdate:p,promptInputs:h,sendingPrompts:f,queuedMessages:J,theme:x,expandedPrompts:A,loadingOptions:b,showCreateDialog:K,newPanePrompt:T,newPaneAgent:C,creatingPane:Q,availableAgents:E,needsAgentChoice:L,createStep:j,actions:pt,paneActions:W,showActionMenu:S,actionDialog:k,executingAction:R,actionDialogLoading:D,showSettingsDialog:Z,settingsData:V,settingDefinitions:G,loadingSettings:N,showHooksSection:H,hooksData:q,loadingHooks:X,get pollingInterval(){return _},set pollingInterval(s){_=s},startPolling:Y,stopPolling:$,toggleTheme:ht,togglePrompt:mt,openCreateDialog:yt,closeCreateDialog:tt,createPane:et,selectAgent:kt,updatePanesFromData:ct,fetchPanes:ot,fetchPaneActions:dt,toggleActionMenu:ft,executeAction:bt,closeActionDialog:B,confirmAction:_t,selectChoice:wt,colorizeDiffStat:Ct,submitInput:St,selectOption:Dt,sendPrompt:Pt,autoExpand:xt,openSettingsDialog:At,closeSettingsDialog:rt,updateSetting:Tt,openHooksSection:jt,closeHooksSection:gt,editHooksWithAgent:It,handleClickOutside:st};return Object.defineProperty(ut,"__isScriptSetup",{enumerable:!1,value:!0}),ut}}),Lt={class:"session-info"},Vt=["title"],qt={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Bt={key:1,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ut={key:0},Jt={class:"container"},Kt={class:"actions-bar"},Qt=["disabled"],Wt=["disabled"],Rt={key:0,class:"no-panes"},Zt={key:1,class:"panes-grid"},Gt={class:"pane-header"},Xt={class:"pane-header-content"},Yt=["href"],$t={class:"pane-title"},te={class:"pane-meta"},ee={key:0,class:"pane-autopilot",title:"Autopilot enabled"},oe={class:"pane-id"},se=["onClick"],ne={key:0,class:"action-menu-dropdown"},ae=["onClick","disabled"],ie={class:"action-icon"},le={class:"action-label"},ce={class:"pane-prompt-section"},de=["onClick"],re={class:"prompt-header"},ge={class:"expand-icon"},ue={class:"prompt-text"},ve={key:0,class:"pane-prompt-full"},pe={key:1,class:"agent-summary"},he={key:2,class:"analyzer-error"},me={key:0,class:"options-dialog"},ye={class:"options-question"},ke={key:0,class:"options-warning"},fe={key:1,class:"analyzing-state"},be={key:2,class:"options-buttons"},_e=["onClick","disabled"],we={class:"prompt-input-wrapper"},Ce=["onUpdate:modelValue","placeholder","disabled"],Se=["onClick","disabled","title"],De={key:0,class:"button-loader"},Pe={key:1,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 988.44 1200.05"},xe={key:0,class:"queued-message"},Ae={key:3,class:"dev-server-status"},Te=["href"],je={class:"action-dialog"},Ie={key:0},Me=["onKeydown"],ze={class:"dialog-buttons"},Ne=["disabled"],He={key:1},Oe={class:"agent-choices"},Fe=["onClick","disabled"],Ee={key:0,class:"action-dialog"},Le={key:0,class:"dialog-loading"},Ve={key:1,class:"dialog-buttons"},qe=["disabled"],Be=["disabled"],Ue={class:"action-dialog"},Je={key:0},Ke={key:1,class:"dialog-loading"},Qe={key:2},We={class:"choice-options"},Re=["onClick","disabled"],Ze={class:"choice-label"},Ge={key:0,class:"choice-description"},Xe={class:"dialog-buttons"},Ye=["disabled"],$e={class:"action-dialog"},to=["innerHTML"],eo={key:1,class:"dialog-loading"},oo={key:2},so=["placeholder"],no={class:"dialog-buttons"},ao=["disabled"],io=["disabled"],lo={class:"action-dialog settings-dialog"},co={key:0,class:"dialog-loading"},ro={key:1,class:"settings-list"},go={class:"setting-header"},uo={class:"setting-info"},vo={class:"setting-label"},po={class:"setting-description"},ho={key:0,class:"setting-control"},mo={class:"setting-value"},yo={key:0,class:"setting-scope"},ko={key:1,class:"setting-scope"},fo={class:"setting-buttons"},bo=["onClick","disabled"],_o=["onClick","disabled"],wo=["onClick","disabled"],Co=["onClick","disabled"],So={class:"setting-control"},Do={class:"setting-value"},Po={key:0,class:"setting-scope"},xo={key:1,class:"setting-scope"},Ao={class:"setting-option-label"},To={class:"setting-buttons"},jo=["onClick","disabled"],Io=["onClick","disabled"],Mo={class:"setting-control"},zo={class:"setting-buttons"},No=["disabled"],Ho={key:2,class:"hooks-section"},Oo={key:0,class:"dialog-loading"},Fo={key:1,class:"hooks-list"},Eo={class:"hook-name"};function Lo(vt,i,U,e,O,F){return a(),n(y,null,[t("header",null,[i[7]||(i[7]=t("img",{src:"https://cdn.formk.it/dmux/dmux.png",alt:"dmux",class:"logo"},null,-1)),t("h1",null,g(e.projectName),1),t("div",Lt,[t("button",{onClick:e.toggleTheme,class:"theme-toggle",title:e.theme==="dark"?"Switch to light mode":"Switch to dark mode"},[e.theme==="dark"?(a(),n("svg",qt,[...i[5]||(i[5]=[t("path",{d:"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"},null,-1)])])):(a(),n("svg",Bt,[...i[6]||(i[6]=[t("path",{d:"M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6.5a9 9 0 009 9 8.97 8.97 0 003.963-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"},null,-1)])]))],8,Vt),e.sessionName?(a(),n("span",Ut,g(e.sessionName),1)):r("v-if",!0),t("span",{class:"status-indicator",style:Ot({color:e.connected?"#4ade80":"#f87171"})},"●",4)])]),t("div",Jt,[t("main",null,[t("div",Kt,[t("button",{onClick:e.openCreateDialog,class:"create-pane-button",disabled:e.creatingPane},[...i[8]||(i[8]=[t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},[t("path",{d:"M12 4.5v15m7.5-7.5h-15",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1),P(" Create New Pane ",-1)])],8,Qt),t("button",{onClick:e.openSettingsDialog,class:"settings-button",disabled:e.loadingSettings,title:"Settings"},[...i[9]||(i[9]=[t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},[t("path",{d:"M10.5 1.875a1.125 1.125 0 012.25 0v.563c0 1.018.84 1.843 1.854 1.839a.75.75 0 01.585.217l.4.4a.75.75 0 01.216.585c-.004 1.014.821 1.854 1.839 1.854h.563a1.125 1.125 0 010 2.25h-.563c-1.018 0-1.843.84-1.839 1.854a.75.75 0 01-.217.585l-.4.4a.75.75 0 01-.585.216c-1.014-.004-1.854.821-1.854 1.839v.563a1.125 1.125 0 01-2.25 0v-.563c0-1.018-.84-1.843-1.854-1.839a.75.75 0 01-.585-.217l-.4-.4a.75.75 0 01-.216-.585c.004-1.014-.821-1.854-1.839-1.854H3.75a1.125 1.125 0 010-2.25h.563c1.018 0 1.843-.84 1.839-1.854a.75.75 0 01.217-.585l.4-.4a.75.75 0 01.585-.216c1.014.004 1.854-.821 1.854-1.839V1.875zM12 15a3 3 0 100-6 3 3 0 000 6z"})],-1),P(" Settings ",-1)])],8,Wt)]),e.panes.length===0?(a(),n("div",Rt,[...i[10]||(i[10]=[t("p",null,"No dmux panes active",-1),t("p",{class:"hint"},\`Click "Create New Pane" above or press 'n' in dmux\`,-1)])])):(a(),n("div",Zt,[(a(!0),n(y,null,w(e.panes,o=>(a(),n("div",{key:o.id,class:"pane-card"},[t("div",Gt,[t("div",Xt,[t("a",{href:"/panes/"+o.id,class:"pane-title-link"},[t("span",$t,g(o.slug),1),i[11]||(i[11]=t("span",{class:"pane-arrow"},"→",-1))],8,Yt),t("div",te,[o.autopilot?(a(),n("span",ee,"🤖")):r("v-if",!0),t("span",{class:z(["pane-agent",o.agent||""])},g(o.agent||"unknown"),3),t("span",oe,g(o.paneId),1)])]),t("button",{onClick:p=>e.toggleActionMenu(o.id),class:"action-menu-btn",title:"Actions"},[...i[12]||(i[12]=[t("span",null,"⋮",-1)])],8,se)]),r(" Action Menu Dropdown "),e.showActionMenu===o.id&&e.paneActions[o.id]?(a(),n("div",ne,[(a(!0),n(y,null,w(e.paneActions[o.id],p=>(a(),n("button",{key:p.id,onClick:h=>e.executeAction(o,p),class:"action-menu-item",disabled:e.executingAction},[t("span",ie,g(p.icon||"•"),1),t("span",le,g(p.label),1)],8,ae))),128))])):r("v-if",!0),t("div",ce,[t("div",{class:z(["pane-prompt-preview",{expanded:e.expandedPrompts.has(o.id)}]),onClick:p=>e.togglePrompt(o.id)},[t("div",re,[i[13]||(i[13]=t("span",{class:"prompt-label"},"Initial Prompt",-1)),t("span",ge,g(e.expandedPrompts.has(o.id)?"▼":"▶"),1)]),t("span",ue,g(o.prompt||"No prompt"),1)],10,de),e.expandedPrompts.has(o.id)?(a(),n("div",ve,g(o.prompt||"No prompt"),1)):r("v-if",!0)]),r(" Show agent summary when idle "),o.agentStatus==="idle"&&o.agentSummary?(a(),n("div",pe,g(o.agentSummary),1)):r("v-if",!0),r(" Show analyzer error if present "),o.analyzerError?(a(),n("div",he," ⚠ "+g(o.analyzerError),1)):r("v-if",!0),t("div",{class:"pane-interactive",onClick:i[0]||(i[0]=M(()=>{},["prevent"]))},[r(" Options Dialog (when waiting with options) "),o.agentStatus==="waiting"&&o.options&&o.options.length>0?(a(),n("div",me,[t("div",ye,g(o.optionsQuestion||"Choose an option:"),1),o.potentialHarm&&o.potentialHarm.hasRisk?(a(),n("div",ke," ⚠️ "+g(o.potentialHarm.description),1)):r("v-if",!0),e.loadingOptions.has(o.id)?(a(),n("div",fe,[...i[14]||(i[14]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing selection...",-1)])])):(a(),n("div",be,[(a(!0),n(y,null,w(o.options,p=>(a(),n("button",{key:p.action,onClick:h=>e.selectOption(o,p),class:z(["option-button",{"option-button-danger":o.potentialHarm&&o.potentialHarm.hasRisk}]),disabled:e.loadingOptions.has(o.id)},g(p.action),11,_e))),128))]))])):o.agentStatus==="analyzing"?(a(),n(y,{key:1},[r(" Analyzing (show loader) "),i[15]||(i[15]=t("div",{class:"analyzing-state"},[t("div",{class:"loader-spinner"}),t("span",null,"Analyzing...")],-1))],2112)):(a(),n(y,{key:2},[r(" Working/Idle (show prompt input) "),t("div",null,[t("div",we,[at(t("textarea",{"onUpdate:modelValue":p=>e.promptInputs[o.id]=p,onInput:e.autoExpand,placeholder:o.agentStatus==="working"?"Queue a prompt...":"Send a prompt...",disabled:e.sendingPrompts.has(o.id),class:"prompt-textarea",rows:"1"},null,40,Ce),[[it,e.promptInputs[o.id]]]),t("button",{onClick:p=>e.sendPrompt(o),disabled:!e.promptInputs[o.id]||e.sendingPrompts.has(o.id),class:"send-button",title:o.agentStatus==="working"?"Queue prompt":"Send prompt"},[e.sendingPrompts.has(o.id)?(a(),n("span",De)):(a(),n("svg",Pe,[...i[16]||(i[16]=[t("path",{d:"M425.13,28.37L30.09,423.41C11.19,441.37.34,466.2,0,492.27c-.34,26.07,9.86,51.17,28.29,69.61,18.43,18.45,43.52,28.67,69.59,28.35,26.07-.31,50.91-11.14,68.88-30.02l233.16-233.52v776.64c0,34.56,18.43,66.48,48.36,83.76,29.93,17.28,66.8,17.28,96.72,0,29.93-17.28,48.36-49.21,48.36-83.76V328.85l231.72,231.36c24.63,23.41,59.74,32.18,92.48,23.09,32.74-9.08,58.32-34.68,67.38-67.43,9.05-32.75.25-67.85-23.18-92.46L566.73,28.37C548.63,10.16,524-.04,498.33.05c-.8-.06-1.6-.06-2.4,0-.8-.06-1.6-.06-2.4,0-25.65,0-50.25,10.19-68.4,28.32h0Z"},null,-1)])]))],8,Se)]),e.queuedMessages[o.id]?(a(),n("div",xe," ✓ "+g(e.queuedMessages[o.id]),1)):r("v-if",!0)])],2112))]),o.devStatus&&o.devStatus!=="stopped"?(a(),n("div",Ae,[i[17]||(i[17]=t("span",{class:"status-label"},"Dev Server:",-1)),t("span",{class:z(["status-badge",o.devStatus])},g(o.devStatus),3),o.devUrl?(a(),n("a",{key:0,href:o.devUrl,target:"_blank",class:"dev-link"},"↗",8,Te)):r("v-if",!0)])):r("v-if",!0)]))),128))]))]),r(" Create Pane Dialog "),e.showCreateDialog?(a(),n("div",{key:0,class:"action-dialog-overlay",onClick:M(e.closeCreateDialog,["self"])},[t("div",je,[i[21]||(i[21]=t("h3",null,"Create New Pane",-1)),e.createStep==="prompt"?(a(),n("div",Ie,[i[18]||(i[18]=t("label",{for:"pane-prompt"},"Provide an initial prompt for your agent",-1)),at(t("textarea",{id:"pane-prompt","onUpdate:modelValue":i[1]||(i[1]=o=>e.newPanePrompt=o),placeholder:"E.g., Fix the authentication bug, Add dark mode, etc.",rows:"4",onKeydown:[lt(M(e.createPane,["meta"]),["enter"]),lt(M(e.createPane,["ctrl"]),["enter"])]},null,40,Me),[[it,e.newPanePrompt]]),i[19]||(i[19]=t("div",{class:"dialog-hint"},[P(" 💡 Press "),t("kbd",null,"⌘ Enter"),P(" or "),t("kbd",null,"Ctrl Enter"),P(" to create ")],-1)),t("div",ze,[t("button",{onClick:e.closeCreateDialog,class:"dialog-btn"},"Cancel"),t("button",{onClick:e.createPane,disabled:!e.newPanePrompt.trim()||e.creatingPane,class:"dialog-btn dialog-btn-primary"},g(e.creatingPane?"Creating...":"Create Pane"),9,Ne)])])):e.createStep==="agent"?(a(),n("div",He,[i[20]||(i[20]=t("p",null,"Multiple agents available. Choose one:",-1)),t("div",Oe,[(a(!0),n(y,null,w(e.availableAgents,o=>(a(),n("button",{key:o,onClick:p=>e.selectAgent(o),class:"agent-choice-button",disabled:e.creatingPane},g(o),9,Fe))),128))]),t("div",{class:"dialog-buttons"},[t("button",{onClick:e.closeCreateDialog,class:"dialog-btn"},"Cancel")])])):r("v-if",!0)])])):r("v-if",!0),r(" Action Dialogs "),e.actionDialog?(a(),n("div",{key:1,class:"action-dialog-overlay",onClick:M(e.closeActionDialog,["self"])},[r(" Confirm Dialog "),e.actionDialog.type==="confirm"?(a(),n("div",Ee,[t("h3",null,g(e.actionDialog.title),1),t("p",null,g(e.actionDialog.message),1),e.actionDialogLoading?(a(),n("div",Le,[...i[22]||(i[22]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing...",-1)])])):(a(),n("div",Ve,[t("button",{onClick:i[2]||(i[2]=o=>e.confirmAction(!1)),class:"dialog-btn",disabled:e.actionDialogLoading},"Cancel",8,qe),t("button",{onClick:i[3]||(i[3]=o=>e.confirmAction(!0)),class:"dialog-btn dialog-btn-primary",disabled:e.actionDialogLoading},"Confirm",8,Be)]))])):e.actionDialog.type==="choice"?(a(),n(y,{key:1},[r(" Choice Dialog "),t("div",Ue,[t("h3",null,g(e.actionDialog.title),1),e.actionDialog.message?(a(),n("p",Je,g(e.actionDialog.message),1)):r("v-if",!0),e.actionDialogLoading?(a(),n("div",Ke,[...i[23]||(i[23]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing...",-1)])])):(a(),n("div",Qe,[t("div",We,[(a(!0),n(y,null,w(e.actionDialog.options,o=>(a(),n("button",{key:o.id,onClick:p=>e.selectChoice(o.id),class:z(["choice-option-btn",{danger:o.danger}]),disabled:e.actionDialogLoading},[t("div",Ze,g(o.label),1),o.description?(a(),n("div",Ge,g(o.description),1)):r("v-if",!0)],10,Re))),128))]),t("div",Xe,[t("button",{onClick:e.closeActionDialog,class:"dialog-btn",disabled:e.actionDialogLoading},"Cancel",8,Ye)])]))])],2112)):e.actionDialog.type==="input"?(a(),n(y,{key:2},[r(" Input Dialog "),t("div",$e,[t("h3",null,g(e.actionDialog.title),1),e.actionDialog.message?(a(),n("div",{key:0,class:"dialog-message",innerHTML:e.colorizeDiffStat(e.actionDialog.message)},null,8,to)):r("v-if",!0),e.actionDialogLoading?(a(),n("div",eo,[...i[24]||(i[24]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing...",-1)])])):(a(),n("div",oo,[at(t("input",{type:"text","onUpdate:modelValue":i[4]||(i[4]=o=>e.actionDialog.inputValue=o),placeholder:e.actionDialog.placeholder,class:"dialog-input",onKeydown:lt(e.submitInput,["enter"])},null,40,so),[[it,e.actionDialog.inputValue]]),t("div",no,[t("button",{onClick:e.closeActionDialog,class:"dialog-btn",disabled:e.actionDialogLoading},"Cancel",8,ao),t("button",{onClick:e.submitInput,class:"dialog-btn dialog-btn-primary",disabled:e.actionDialogLoading},"Submit",8,io)])]))])],2112)):r("v-if",!0)])):r("v-if",!0),r(" Settings Dialog "),e.showSettingsDialog&&e.settingsData?(a(),n("div",{key:2,class:"action-dialog-overlay",onClick:M(e.closeSettingsDialog,["self"])},[t("div",lo,[i[30]||(i[30]=t("h3",null,"Settings",-1)),e.loadingSettings?(a(),n("div",co,[...i[25]||(i[25]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Loading...",-1)])])):(a(),n("div",ro,[(a(!0),n(y,null,w(e.settingDefinitions,o=>{var p;return a(),n("div",{key:o.key,class:"setting-item"},[t("div",go,[t("div",uo,[t("div",vo,g(o.label),1),t("div",po,g(o.description),1)])]),r(" Boolean setting "),o.type==="boolean"?(a(),n("div",ho,[t("div",mo,[i[26]||(i[26]=P(" Current: ",-1)),t("strong",null,g(e.settingsData.merged[o.key]?"Enabled":"Disabled"),1),o.key in e.settingsData.project?(a(),n("span",yo,"(project)")):o.key in e.settingsData.global?(a(),n("span",ko,"(global)")):r("v-if",!0)]),t("div",fo,[t("button",{onClick:h=>e.updateSetting(o.key,!0,"global"),class:"setting-btn",disabled:e.loadingSettings}," Enable (global) ",8,bo),t("button",{onClick:h=>e.updateSetting(o.key,!1,"global"),class:"setting-btn",disabled:e.loadingSettings}," Disable (global) ",8,_o),t("button",{onClick:h=>e.updateSetting(o.key,!0,"project"),class:"setting-btn",disabled:e.loadingSettings}," Enable (project) ",8,wo),t("button",{onClick:h=>e.updateSetting(o.key,!1,"project"),class:"setting-btn",disabled:e.loadingSettings}," Disable (project) ",8,Co)])])):o.type==="select"?(a(),n(y,{key:1},[r(" Select setting "),t("div",So,[t("div",Do,[i[27]||(i[27]=P(" Current: ",-1)),t("strong",null,g(((p=o.options.find(h=>h.value===e.settingsData.merged[o.key]))==null?void 0:p.label)||"Not set"),1),o.key in e.settingsData.project?(a(),n("span",Po,"(project)")):o.key in e.settingsData.global?(a(),n("span",xo,"(global)")):r("v-if",!0)]),(a(!0),n(y,null,w(o.options,h=>(a(),n("div",{class:"setting-select-group",key:h.value},[t("div",Ao,g(h.label),1),t("div",To,[t("button",{onClick:f=>e.updateSetting(o.key,h.value,"global"),class:"setting-btn",disabled:e.loadingSettings}," Set global ",8,jo),t("button",{onClick:f=>e.updateSetting(o.key,h.value,"project"),class:"setting-btn",disabled:e.loadingSettings}," Set project ",8,Io)])]))),128))])],2112)):o.type==="action"?(a(),n(y,{key:2},[r(" Action setting "),t("div",Mo,[t("div",zo,[t("button",{onClick:e.openHooksSection,class:"setting-btn setting-btn-action",disabled:e.loadingSettings}," Open ",8,No)])])],2112)):r("v-if",!0)])}),128))])),r(" Hooks Section (shown when hooks action is triggered) "),e.showHooksSection?(a(),n("div",Ho,[t("div",{class:"hooks-header"},[t("button",{onClick:e.closeHooksSection,class:"back-btn",title:"Back to settings"},"← Back"),i[28]||(i[28]=t("h4",null,"Hooks Management",-1))]),e.loadingHooks?(a(),n("div",Oo,[...i[29]||(i[29]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Loading hooks...",-1)])])):(a(),n("div",Fo,[(a(!0),n(y,null,w(e.hooksData,o=>(a(),n("div",{key:o.name,class:"hook-item"},[t("div",Eo,g(o.name),1),t("div",{class:z(["hook-status",{"hook-active":o.active}])},g(o.active?"✓ Active":"Inactive"),3)]))),128)),t("div",{class:"hooks-actions"},[t("button",{onClick:e.editHooksWithAgent,class:"dialog-btn dialog-btn-primary"}," Edit Hooks with Agent ")])]))])):r("v-if",!0),t("div",{class:"dialog-buttons"},[t("button",{onClick:e.closeSettingsDialog,class:"dialog-btn dialog-btn-primary"},"Close")])])])):r("v-if",!0)])],64)}const Vo=Ht(Et,[["render",Lo],["__file","/Users/justinschroeder/Projects/dmux/frontend/src/components/Dashboard.vue"]]),qo=Ft(Vo);qo.mount("#app");
+\`).map(l=>{if(l.includes("|")){const d=l.split("|");if(d.length===2){const c=d[0],m=d[1].replace(/\\+/g,'<span style="color: #4ade80;">+</span>').replace(/-/g,'<span style="color: #f87171;">-</span>');return c+'<span style="opacity: 0.6;">|</span>'+m}}return l}).join("<br>"),St=async()=>{var s;if(k.value)try{D.value=!0;const d=await(await fetch(\`/api/callbacks/input/\${k.value.callbackId}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({value:k.value.inputValue})})).json();if(d.requiresInteraction){let c={};d.interactionType==="confirm"?c={type:"confirm",title:d.title||"Confirm",message:d.message,...d.confirmData}:d.interactionType==="choice"?c={type:"choice",title:d.title||"Choose",message:d.message,...d.choiceData}:d.interactionType==="input"&&(c={type:"input",title:d.title||"Input",message:d.message,...d.inputData,inputValue:((s=d.inputData)==null?void 0:s.defaultValue)||""},I(()=>{const v=document.querySelector(".dialog-input");v&&(v.focus(),v.select())})),k.value=c}else B()}catch(l){console.error("Failed to submit input:",l),alert("Failed to complete action")}finally{D.value=!1}},Dt=async(s,l)=>{try{b.value.add(s.id),b.value=new Set(b.value);const d=l.keys||[l.action];for(const c of d)await fetch(\`/api/keys/\${s.id}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:c})});setTimeout(()=>{b.value.delete(s.id),b.value=new Set(b.value)},1500)}catch(d){console.error("Failed to select option:",d),b.value.delete(s.id),b.value=new Set(b.value)}},Pt=async s=>{const l=h.value[s.id];if(!(!l||!l.trim()))try{f.value.add(s.id),f.value=new Set(f.value);for(const d of l)await fetch(\`/api/keys/\${s.id}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:d})});await fetch(\`/api/keys/\${s.id}\`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:"Enter"})}),J.value[s.id]=l.substring(0,50)+(l.length>50?"...":""),h.value[s.id]="",setTimeout(()=>{delete J.value[s.id],f.value.delete(s.id),f.value=new Set(f.value)},3e3)}catch(d){console.error("Failed to send prompt:",d),f.value.delete(s.id),f.value=new Set(f.value)}},xt=s=>{const l=s.target;l.style.height="auto",l.style.height=l.scrollHeight+"px"},At=async()=>{try{N.value=!0;const l=await(await fetch("/api/settings")).json();V.value=l.settings,G.value=l.definitions,Z.value=!0,H.value=!1}catch(s){console.error("Failed to load settings:",s),alert("Failed to load settings")}finally{N.value=!1}},rt=()=>{Z.value=!1,V.value=null,G.value=[],H.value=!1,q.value=[]},Tt=async(s,l,d)=>{try{N.value=!0,await fetch("/api/settings",{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:s,value:l,scope:d})});const v=await(await fetch("/api/settings")).json();V.value=v.settings}catch(c){console.error("Failed to update setting:",c),alert("Failed to update setting")}finally{N.value=!1}},jt=async()=>{try{X.value=!0;const l=await(await fetch("/api/hooks")).json();q.value=l.hooks||[],H.value=!0}catch(s){console.error("Failed to load hooks:",s),alert("Failed to load hooks")}finally{X.value=!1}},gt=()=>{H.value=!1,q.value=[]},It=async()=>{const s="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";gt(),rt(),T.value=s,await I(),await et()},st=s=>{const l=s.target;S.value&&!l.closest(".action-menu-btn")&&!l.closest(".action-menu-dropdown")&&(S.value=null)};zt(()=>{document.documentElement.setAttribute("data-theme",x.value),Y(),document.addEventListener("click",st),document.addEventListener("visibilitychange",()=>{document.hidden?$():Y()})}),Nt(()=>{$(),document.removeEventListener("click",st)});const ut={projectName:U,sessionName:e,connected:O,panes:F,lastUpdate:o,timeSinceUpdate:p,promptInputs:h,sendingPrompts:f,queuedMessages:J,theme:x,expandedPrompts:A,loadingOptions:b,showCreateDialog:K,newPanePrompt:T,newPaneAgent:C,creatingPane:Q,availableAgents:E,needsAgentChoice:L,createStep:j,actions:pt,paneActions:W,showActionMenu:S,actionDialog:k,executingAction:R,actionDialogLoading:D,showSettingsDialog:Z,settingsData:V,settingDefinitions:G,loadingSettings:N,showHooksSection:H,hooksData:q,loadingHooks:X,get pollingInterval(){return _},set pollingInterval(s){_=s},startPolling:Y,stopPolling:$,toggleTheme:ht,togglePrompt:mt,openCreateDialog:yt,closeCreateDialog:tt,createPane:et,selectAgent:kt,updatePanesFromData:ct,fetchPanes:ot,fetchPaneActions:dt,toggleActionMenu:ft,executeAction:bt,closeActionDialog:B,confirmAction:_t,selectChoice:wt,colorizeDiffStat:Ct,submitInput:St,selectOption:Dt,sendPrompt:Pt,autoExpand:xt,openSettingsDialog:At,closeSettingsDialog:rt,updateSetting:Tt,openHooksSection:jt,closeHooksSection:gt,editHooksWithAgent:It,handleClickOutside:st};return Object.defineProperty(ut,"__isScriptSetup",{enumerable:!1,value:!0}),ut}}),Lt={class:"session-info"},Vt=["title"],qt={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Bt={key:1,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ut={key:0},Jt={class:"container"},Kt={class:"actions-bar"},Qt=["disabled"],Wt=["disabled"],Rt={key:0,class:"no-panes"},Zt={key:1,class:"panes-grid"},Gt={class:"pane-header"},Xt={class:"pane-header-content"},Yt=["href"],$t={class:"pane-title"},te={class:"pane-meta"},ee={key:0,class:"pane-autopilot",title:"Autopilot enabled"},oe={key:1,class:"pane-agent shell",title:"Shell pane"},se={class:"pane-id"},ne=["onClick"],ae={key:0,class:"action-menu-dropdown"},ie=["onClick","disabled"],le={class:"action-icon"},ce={class:"action-label"},de={class:"pane-prompt-section"},re=["onClick"],ge={class:"prompt-header"},ue={class:"expand-icon"},ve={class:"prompt-text"},pe={key:0,class:"pane-prompt-full"},he={key:1,class:"agent-summary"},me={key:2,class:"analyzer-error"},ye={key:0,class:"options-dialog"},ke={class:"options-question"},fe={key:0,class:"options-warning"},be={key:1,class:"analyzing-state"},_e={key:2,class:"options-buttons"},we=["onClick","disabled"],Ce={class:"prompt-input-wrapper"},Se=["onUpdate:modelValue","placeholder","disabled"],De=["onClick","disabled","title"],Pe={key:0,class:"button-loader"},xe={key:1,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 988.44 1200.05"},Ae={key:0,class:"queued-message"},Te={key:3,class:"dev-server-status"},je=["href"],Ie={class:"action-dialog"},Me={key:0},ze=["onKeydown"],Ne={class:"dialog-buttons"},He=["disabled"],Oe={key:1},Fe={class:"agent-choices"},Ee=["onClick","disabled"],Le={key:0,class:"action-dialog"},Ve={key:0,class:"dialog-loading"},qe={key:1,class:"dialog-buttons"},Be=["disabled"],Ue=["disabled"],Je={class:"action-dialog"},Ke={key:0},Qe={key:1,class:"dialog-loading"},We={key:2},Re={class:"choice-options"},Ze=["onClick","disabled"],Ge={class:"choice-label"},Xe={key:0,class:"choice-description"},Ye={class:"dialog-buttons"},$e=["disabled"],to={class:"action-dialog"},eo=["innerHTML"],oo={key:1,class:"dialog-loading"},so={key:2},no=["placeholder"],ao={class:"dialog-buttons"},io=["disabled"],lo=["disabled"],co={class:"action-dialog settings-dialog"},ro={key:0,class:"dialog-loading"},go={key:1,class:"settings-list"},uo={class:"setting-header"},vo={class:"setting-info"},po={class:"setting-label"},ho={class:"setting-description"},mo={key:0,class:"setting-control"},yo={class:"setting-value"},ko={key:0,class:"setting-scope"},fo={key:1,class:"setting-scope"},bo={class:"setting-buttons"},_o=["onClick","disabled"],wo=["onClick","disabled"],Co=["onClick","disabled"],So=["onClick","disabled"],Do={class:"setting-control"},Po={class:"setting-value"},xo={key:0,class:"setting-scope"},Ao={key:1,class:"setting-scope"},To={class:"setting-option-label"},jo={class:"setting-buttons"},Io=["onClick","disabled"],Mo=["onClick","disabled"],zo={class:"setting-control"},No={class:"setting-buttons"},Ho=["disabled"],Oo={key:2,class:"hooks-section"},Fo={key:0,class:"dialog-loading"},Eo={key:1,class:"hooks-list"},Lo={class:"hook-name"};function Vo(vt,i,U,e,O,F){return a(),n(y,null,[t("header",null,[i[7]||(i[7]=t("img",{src:"https://cdn.formk.it/dmux/dmux.png",alt:"dmux",class:"logo"},null,-1)),t("h1",null,g(e.projectName),1),t("div",Lt,[t("button",{onClick:e.toggleTheme,class:"theme-toggle",title:e.theme==="dark"?"Switch to light mode":"Switch to dark mode"},[e.theme==="dark"?(a(),n("svg",qt,[...i[5]||(i[5]=[t("path",{d:"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"},null,-1)])])):(a(),n("svg",Bt,[...i[6]||(i[6]=[t("path",{d:"M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6.5a9 9 0 009 9 8.97 8.97 0 003.963-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"},null,-1)])]))],8,Vt),e.sessionName?(a(),n("span",Ut,g(e.sessionName),1)):r("v-if",!0),t("span",{class:"status-indicator",style:Ot({color:e.connected?"#4ade80":"#f87171"})},"●",4)])]),t("div",Jt,[t("main",null,[t("div",Kt,[t("button",{onClick:e.openCreateDialog,class:"create-pane-button",disabled:e.creatingPane},[...i[8]||(i[8]=[t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},[t("path",{d:"M12 4.5v15m7.5-7.5h-15",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1),P(" Create New Pane ",-1)])],8,Qt),t("button",{onClick:e.openSettingsDialog,class:"settings-button",disabled:e.loadingSettings,title:"Settings"},[...i[9]||(i[9]=[t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},[t("path",{d:"M10.5 1.875a1.125 1.125 0 012.25 0v.563c0 1.018.84 1.843 1.854 1.839a.75.75 0 01.585.217l.4.4a.75.75 0 01.216.585c-.004 1.014.821 1.854 1.839 1.854h.563a1.125 1.125 0 010 2.25h-.563c-1.018 0-1.843.84-1.839 1.854a.75.75 0 01-.217.585l-.4.4a.75.75 0 01-.585.216c-1.014-.004-1.854.821-1.854 1.839v.563a1.125 1.125 0 01-2.25 0v-.563c0-1.018-.84-1.843-1.854-1.839a.75.75 0 01-.585-.217l-.4-.4a.75.75 0 01-.216-.585c.004-1.014-.821-1.854-1.839-1.854H3.75a1.125 1.125 0 010-2.25h.563c1.018 0 1.843-.84 1.839-1.854a.75.75 0 01.217-.585l.4-.4a.75.75 0 01.585-.216c1.014.004 1.854-.821 1.854-1.839V1.875zM12 15a3 3 0 100-6 3 3 0 000 6z"})],-1),P(" Settings ",-1)])],8,Wt)]),e.panes.length===0?(a(),n("div",Rt,[...i[10]||(i[10]=[t("p",null,"No dmux panes active",-1),t("p",{class:"hint"},\`Click "Create New Pane" above or press 'n' in dmux\`,-1)])])):(a(),n("div",Zt,[(a(!0),n(y,null,w(e.panes,o=>(a(),n("div",{key:o.id,class:"pane-card"},[t("div",Gt,[t("div",Xt,[t("a",{href:"/panes/"+o.id,class:"pane-title-link"},[t("span",$t,g(o.slug),1),i[11]||(i[11]=t("span",{class:"pane-arrow"},"→",-1))],8,Yt),t("div",te,[o.autopilot?(a(),n("span",ee,"🤖")):r("v-if",!0),o.type==="shell"?(a(),n("span",oe,g(o.shellType||"shell"),1)):(a(),n("span",{key:2,class:z(["pane-agent",o.agent||""])},g(o.agent||"unknown"),3)),t("span",se,g(o.paneId),1)])]),t("button",{onClick:p=>e.toggleActionMenu(o.id),class:"action-menu-btn",title:"Actions"},[...i[12]||(i[12]=[t("span",null,"⋮",-1)])],8,ne)]),r(" Action Menu Dropdown "),e.showActionMenu===o.id&&e.paneActions[o.id]?(a(),n("div",ae,[(a(!0),n(y,null,w(e.paneActions[o.id],p=>(a(),n("button",{key:p.id,onClick:h=>e.executeAction(o,p),class:"action-menu-item",disabled:e.executingAction},[t("span",le,g(p.icon||"•"),1),t("span",ce,g(p.label),1)],8,ie))),128))])):r("v-if",!0),t("div",de,[t("div",{class:z(["pane-prompt-preview",{expanded:e.expandedPrompts.has(o.id)}]),onClick:p=>e.togglePrompt(o.id)},[t("div",ge,[i[13]||(i[13]=t("span",{class:"prompt-label"},"Initial Prompt",-1)),t("span",ue,g(e.expandedPrompts.has(o.id)?"▼":"▶"),1)]),t("span",ve,g(o.prompt||"No prompt"),1)],10,re),e.expandedPrompts.has(o.id)?(a(),n("div",pe,g(o.prompt||"No prompt"),1)):r("v-if",!0)]),r(" Show agent summary when idle "),o.agentStatus==="idle"&&o.agentSummary?(a(),n("div",he,g(o.agentSummary),1)):r("v-if",!0),r(" Show analyzer error if present "),o.analyzerError?(a(),n("div",me," ⚠ "+g(o.analyzerError),1)):r("v-if",!0),t("div",{class:"pane-interactive",onClick:i[0]||(i[0]=M(()=>{},["prevent"]))},[r(" Options Dialog (when waiting with options) "),o.agentStatus==="waiting"&&o.options&&o.options.length>0?(a(),n("div",ye,[t("div",ke,g(o.optionsQuestion||"Choose an option:"),1),o.potentialHarm&&o.potentialHarm.hasRisk?(a(),n("div",fe," ⚠️ "+g(o.potentialHarm.description),1)):r("v-if",!0),e.loadingOptions.has(o.id)?(a(),n("div",be,[...i[14]||(i[14]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing selection...",-1)])])):(a(),n("div",_e,[(a(!0),n(y,null,w(o.options,p=>(a(),n("button",{key:p.action,onClick:h=>e.selectOption(o,p),class:z(["option-button",{"option-button-danger":o.potentialHarm&&o.potentialHarm.hasRisk}]),disabled:e.loadingOptions.has(o.id)},g(p.action),11,we))),128))]))])):o.agentStatus==="analyzing"?(a(),n(y,{key:1},[r(" Analyzing (show loader) "),i[15]||(i[15]=t("div",{class:"analyzing-state"},[t("div",{class:"loader-spinner"}),t("span",null,"Analyzing...")],-1))],2112)):(a(),n(y,{key:2},[r(" Working/Idle (show prompt input) "),t("div",null,[t("div",Ce,[at(t("textarea",{"onUpdate:modelValue":p=>e.promptInputs[o.id]=p,onInput:e.autoExpand,placeholder:o.agentStatus==="working"?"Queue a prompt...":"Send a prompt...",disabled:e.sendingPrompts.has(o.id),class:"prompt-textarea",rows:"1"},null,40,Se),[[it,e.promptInputs[o.id]]]),t("button",{onClick:p=>e.sendPrompt(o),disabled:!e.promptInputs[o.id]||e.sendingPrompts.has(o.id),class:"send-button",title:o.agentStatus==="working"?"Queue prompt":"Send prompt"},[e.sendingPrompts.has(o.id)?(a(),n("span",Pe)):(a(),n("svg",xe,[...i[16]||(i[16]=[t("path",{d:"M425.13,28.37L30.09,423.41C11.19,441.37.34,466.2,0,492.27c-.34,26.07,9.86,51.17,28.29,69.61,18.43,18.45,43.52,28.67,69.59,28.35,26.07-.31,50.91-11.14,68.88-30.02l233.16-233.52v776.64c0,34.56,18.43,66.48,48.36,83.76,29.93,17.28,66.8,17.28,96.72,0,29.93-17.28,48.36-49.21,48.36-83.76V328.85l231.72,231.36c24.63,23.41,59.74,32.18,92.48,23.09,32.74-9.08,58.32-34.68,67.38-67.43,9.05-32.75.25-67.85-23.18-92.46L566.73,28.37C548.63,10.16,524-.04,498.33.05c-.8-.06-1.6-.06-2.4,0-.8-.06-1.6-.06-2.4,0-25.65,0-50.25,10.19-68.4,28.32h0Z"},null,-1)])]))],8,De)]),e.queuedMessages[o.id]?(a(),n("div",Ae," ✓ "+g(e.queuedMessages[o.id]),1)):r("v-if",!0)])],2112))]),o.devStatus&&o.devStatus!=="stopped"?(a(),n("div",Te,[i[17]||(i[17]=t("span",{class:"status-label"},"Dev Server:",-1)),t("span",{class:z(["status-badge",o.devStatus])},g(o.devStatus),3),o.devUrl?(a(),n("a",{key:0,href:o.devUrl,target:"_blank",class:"dev-link"},"↗",8,je)):r("v-if",!0)])):r("v-if",!0)]))),128))]))]),r(" Create Pane Dialog "),e.showCreateDialog?(a(),n("div",{key:0,class:"action-dialog-overlay",onClick:M(e.closeCreateDialog,["self"])},[t("div",Ie,[i[21]||(i[21]=t("h3",null,"Create New Pane",-1)),e.createStep==="prompt"?(a(),n("div",Me,[i[18]||(i[18]=t("label",{for:"pane-prompt"},"Provide an initial prompt for your agent",-1)),at(t("textarea",{id:"pane-prompt","onUpdate:modelValue":i[1]||(i[1]=o=>e.newPanePrompt=o),placeholder:"E.g., Fix the authentication bug, Add dark mode, etc.",rows:"4",onKeydown:[lt(M(e.createPane,["meta"]),["enter"]),lt(M(e.createPane,["ctrl"]),["enter"])]},null,40,ze),[[it,e.newPanePrompt]]),i[19]||(i[19]=t("div",{class:"dialog-hint"},[P(" 💡 Press "),t("kbd",null,"⌘ Enter"),P(" or "),t("kbd",null,"Ctrl Enter"),P(" to create ")],-1)),t("div",Ne,[t("button",{onClick:e.closeCreateDialog,class:"dialog-btn"},"Cancel"),t("button",{onClick:e.createPane,disabled:!e.newPanePrompt.trim()||e.creatingPane,class:"dialog-btn dialog-btn-primary"},g(e.creatingPane?"Creating...":"Create Pane"),9,He)])])):e.createStep==="agent"?(a(),n("div",Oe,[i[20]||(i[20]=t("p",null,"Multiple agents available. Choose one:",-1)),t("div",Fe,[(a(!0),n(y,null,w(e.availableAgents,o=>(a(),n("button",{key:o,onClick:p=>e.selectAgent(o),class:"agent-choice-button",disabled:e.creatingPane},g(o),9,Ee))),128))]),t("div",{class:"dialog-buttons"},[t("button",{onClick:e.closeCreateDialog,class:"dialog-btn"},"Cancel")])])):r("v-if",!0)])])):r("v-if",!0),r(" Action Dialogs "),e.actionDialog?(a(),n("div",{key:1,class:"action-dialog-overlay",onClick:M(e.closeActionDialog,["self"])},[r(" Confirm Dialog "),e.actionDialog.type==="confirm"?(a(),n("div",Le,[t("h3",null,g(e.actionDialog.title),1),t("p",null,g(e.actionDialog.message),1),e.actionDialogLoading?(a(),n("div",Ve,[...i[22]||(i[22]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing...",-1)])])):(a(),n("div",qe,[t("button",{onClick:i[2]||(i[2]=o=>e.confirmAction(!1)),class:"dialog-btn",disabled:e.actionDialogLoading},"Cancel",8,Be),t("button",{onClick:i[3]||(i[3]=o=>e.confirmAction(!0)),class:"dialog-btn dialog-btn-primary",disabled:e.actionDialogLoading},"Confirm",8,Ue)]))])):e.actionDialog.type==="choice"?(a(),n(y,{key:1},[r(" Choice Dialog "),t("div",Je,[t("h3",null,g(e.actionDialog.title),1),e.actionDialog.message?(a(),n("p",Ke,g(e.actionDialog.message),1)):r("v-if",!0),e.actionDialogLoading?(a(),n("div",Qe,[...i[23]||(i[23]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing...",-1)])])):(a(),n("div",We,[t("div",Re,[(a(!0),n(y,null,w(e.actionDialog.options,o=>(a(),n("button",{key:o.id,onClick:p=>e.selectChoice(o.id),class:z(["choice-option-btn",{danger:o.danger}]),disabled:e.actionDialogLoading},[t("div",Ge,g(o.label),1),o.description?(a(),n("div",Xe,g(o.description),1)):r("v-if",!0)],10,Ze))),128))]),t("div",Ye,[t("button",{onClick:e.closeActionDialog,class:"dialog-btn",disabled:e.actionDialogLoading},"Cancel",8,$e)])]))])],2112)):e.actionDialog.type==="input"?(a(),n(y,{key:2},[r(" Input Dialog "),t("div",to,[t("h3",null,g(e.actionDialog.title),1),e.actionDialog.message?(a(),n("div",{key:0,class:"dialog-message",innerHTML:e.colorizeDiffStat(e.actionDialog.message)},null,8,eo)):r("v-if",!0),e.actionDialogLoading?(a(),n("div",oo,[...i[24]||(i[24]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Processing...",-1)])])):(a(),n("div",so,[at(t("input",{type:"text","onUpdate:modelValue":i[4]||(i[4]=o=>e.actionDialog.inputValue=o),placeholder:e.actionDialog.placeholder,class:"dialog-input",onKeydown:lt(e.submitInput,["enter"])},null,40,no),[[it,e.actionDialog.inputValue]]),t("div",ao,[t("button",{onClick:e.closeActionDialog,class:"dialog-btn",disabled:e.actionDialogLoading},"Cancel",8,io),t("button",{onClick:e.submitInput,class:"dialog-btn dialog-btn-primary",disabled:e.actionDialogLoading},"Submit",8,lo)])]))])],2112)):r("v-if",!0)])):r("v-if",!0),r(" Settings Dialog "),e.showSettingsDialog&&e.settingsData?(a(),n("div",{key:2,class:"action-dialog-overlay",onClick:M(e.closeSettingsDialog,["self"])},[t("div",co,[i[30]||(i[30]=t("h3",null,"Settings",-1)),e.loadingSettings?(a(),n("div",ro,[...i[25]||(i[25]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Loading...",-1)])])):(a(),n("div",go,[(a(!0),n(y,null,w(e.settingDefinitions,o=>{var p;return a(),n("div",{key:o.key,class:"setting-item"},[t("div",uo,[t("div",vo,[t("div",po,g(o.label),1),t("div",ho,g(o.description),1)])]),r(" Boolean setting "),o.type==="boolean"?(a(),n("div",mo,[t("div",yo,[i[26]||(i[26]=P(" Current: ",-1)),t("strong",null,g(e.settingsData.merged[o.key]?"Enabled":"Disabled"),1),o.key in e.settingsData.project?(a(),n("span",ko,"(project)")):o.key in e.settingsData.global?(a(),n("span",fo,"(global)")):r("v-if",!0)]),t("div",bo,[t("button",{onClick:h=>e.updateSetting(o.key,!0,"global"),class:"setting-btn",disabled:e.loadingSettings}," Enable (global) ",8,_o),t("button",{onClick:h=>e.updateSetting(o.key,!1,"global"),class:"setting-btn",disabled:e.loadingSettings}," Disable (global) ",8,wo),t("button",{onClick:h=>e.updateSetting(o.key,!0,"project"),class:"setting-btn",disabled:e.loadingSettings}," Enable (project) ",8,Co),t("button",{onClick:h=>e.updateSetting(o.key,!1,"project"),class:"setting-btn",disabled:e.loadingSettings}," Disable (project) ",8,So)])])):o.type==="select"?(a(),n(y,{key:1},[r(" Select setting "),t("div",Do,[t("div",Po,[i[27]||(i[27]=P(" Current: ",-1)),t("strong",null,g(((p=o.options.find(h=>h.value===e.settingsData.merged[o.key]))==null?void 0:p.label)||"Not set"),1),o.key in e.settingsData.project?(a(),n("span",xo,"(project)")):o.key in e.settingsData.global?(a(),n("span",Ao,"(global)")):r("v-if",!0)]),(a(!0),n(y,null,w(o.options,h=>(a(),n("div",{class:"setting-select-group",key:h.value},[t("div",To,g(h.label),1),t("div",jo,[t("button",{onClick:f=>e.updateSetting(o.key,h.value,"global"),class:"setting-btn",disabled:e.loadingSettings}," Set global ",8,Io),t("button",{onClick:f=>e.updateSetting(o.key,h.value,"project"),class:"setting-btn",disabled:e.loadingSettings}," Set project ",8,Mo)])]))),128))])],2112)):o.type==="action"?(a(),n(y,{key:2},[r(" Action setting "),t("div",zo,[t("div",No,[t("button",{onClick:e.openHooksSection,class:"setting-btn setting-btn-action",disabled:e.loadingSettings}," Open ",8,Ho)])])],2112)):r("v-if",!0)])}),128))])),r(" Hooks Section (shown when hooks action is triggered) "),e.showHooksSection?(a(),n("div",Oo,[t("div",{class:"hooks-header"},[t("button",{onClick:e.closeHooksSection,class:"back-btn",title:"Back to settings"},"← Back"),i[28]||(i[28]=t("h4",null,"Hooks Management",-1))]),e.loadingHooks?(a(),n("div",Fo,[...i[29]||(i[29]=[t("div",{class:"loader-spinner"},null,-1),t("span",null,"Loading hooks...",-1)])])):(a(),n("div",Eo,[(a(!0),n(y,null,w(e.hooksData,o=>(a(),n("div",{key:o.name,class:"hook-item"},[t("div",Lo,g(o.name),1),t("div",{class:z(["hook-status",{"hook-active":o.active}])},g(o.active?"✓ Active":"Inactive"),3)]))),128)),t("div",{class:"hooks-actions"},[t("button",{onClick:e.editHooksWithAgent,class:"dialog-btn dialog-btn-primary"}," Edit Hooks with Agent ")])]))])):r("v-if",!0),t("div",{class:"dialog-buttons"},[t("button",{onClick:e.closeSettingsDialog,class:"dialog-btn dialog-btn-primary"},"Close")])])])):r("v-if",!0)])],64)}const qo=Ht(Et,[["render",Vo],["__file","/Users/justinschroeder/Projects/dmux/frontend/src/components/Dashboard.vue"]]),Bo=Ft(qo);Bo.mount("#app");
 `,
         mimeType: 'application/javascript',
-        size: 27228
+        size: 27357
+    },
+    'decorative-pane.js': {
+        content: `#!/usr/bin/env node
+// Decorative pane renderer - displays ASCII art with animated falling binary characters
+// This runs continuously without showing a command prompt
+import { ASCII_ART as ASCII_ART_EXPORTS } from "./utils/asciiArt.js";
+// Parse the ASCII art string into an array of lines
+const ASCII_ART = ASCII_ART_EXPORTS.dmuxWelcome.trim().split("\\n");
+const FILL_CHAR = "·";
+const ORANGE = "\\x1b[38;5;208m"; // ANSI 256-color orange
+const DIM_GRAY = "\\x1b[38;5;238m"; // Dim gray for fill dots
+const RESET = "\\x1b[0m"; // Reset color
+// Static drop settings
+const TAIL_LENGTH = 8; // Length of the fading tail
+const NUM_STATIC_DROPS = 150; // Number of drops to render in static view
+// Shades from bright to dim for the tail effect (orange)
+const SHADES = [
+    "\\x1b[38;5;214m", // Bright orange
+    "\\x1b[38;5;208m", // Orange
+    "\\x1b[38;5;202m", // Darker orange
+    "\\x1b[38;5;166m", // Even darker
+    "\\x1b[38;5;130m", // Very dark orange
+    "\\x1b[38;5;94m", // Brown-orange
+    "\\x1b[38;5;58m", // Dark brown
+    "\\x1b[38;5;236m", // Almost black
+];
+/**
+ * Generate random static drops that look like a paused animation
+ */
+function generateStaticDrops(width, height) {
+    const drops = [];
+    for (let i = 0; i < NUM_STATIC_DROPS; i++) {
+        // Random column
+        const column = Math.floor(Math.random() * width);
+        // Random position in the screen (can be anywhere including partially visible)
+        const y = Math.floor(Math.random() * (height + TAIL_LENGTH));
+        // Random binary characters
+        const chars = Array.from({ length: TAIL_LENGTH }, () => Math.random() > 0.5 ? "1" : "0");
+        drops.push({ column, y, chars });
+    }
+    return drops;
+}
+/**
+ * Render static drops to a grid
+ */
+function renderStaticDrops(drops, grid, height) {
+    for (const drop of drops) {
+        for (let i = 0; i < drop.chars.length; i++) {
+            const row = Math.floor(drop.y - i);
+            if (row >= 0 &&
+                row < height &&
+                drop.column >= 0 &&
+                drop.column < grid[row].length) {
+                const shadeIndex = Math.min(i, SHADES.length - 1);
+                grid[row][drop.column] = {
+                    char: drop.chars[i],
+                    color: SHADES[shadeIndex],
+                };
+            }
+        }
+    }
+}
+function render(width, height) {
+    // Generate random static drops for this render
+    const drops = generateStaticDrops(width, height);
+    // Create a grid for the background layer (falling characters)
+    const backgroundGrid = Array.from({ length: height }, () => Array.from({ length: width }, () => null));
+    // Render all drops to the background grid
+    renderStaticDrops(drops, backgroundGrid, height);
+    const artHeight = ASCII_ART.length;
+    const artWidth = Math.max(...ASCII_ART.map((line) => line.length));
+    // Calculate vertical centering for ASCII art
+    const topPadding = Math.floor((height - artHeight) / 2);
+    const lines = [];
+    // Build each line by combining background and foreground
+    for (let row = 0; row < height; row++) {
+        const isArtRow = row >= topPadding && row < topPadding + artHeight;
+        const artLine = isArtRow ? ASCII_ART[row - topPadding] : null;
+        let line = "";
+        for (let col = 0; col < width; col++) {
+            if (isArtRow && artLine) {
+                const trimmedArt = artLine.trimEnd();
+                const leftPadding = Math.max(0, Math.floor((width - trimmedArt.length) / 2));
+                const artCol = col - leftPadding;
+                // If we're in the art region and the art has a character here
+                if (artCol >= 0 && artCol < trimmedArt.length) {
+                    const artChar = trimmedArt[artCol];
+                    // ASCII art takes precedence - render in orange
+                    line += ORANGE + artChar + RESET;
+                }
+                else {
+                    // Outside art region - show background or fill char
+                    const bg = backgroundGrid[row][col];
+                    if (bg) {
+                        line += bg.color + bg.char + RESET;
+                    }
+                    else {
+                        line += DIM_GRAY + FILL_CHAR + RESET;
+                    }
+                }
+            }
+            else {
+                // Not an art row - show background or fill char
+                const bg = backgroundGrid[row][col];
+                if (bg) {
+                    line += bg.color + bg.char + RESET;
+                }
+                else {
+                    line += DIM_GRAY + FILL_CHAR + RESET;
+                }
+            }
+        }
+        lines.push(line);
+    }
+    // Clear screen and render
+    process.stdout.write("\\x1b[2J\\x1b[H"); // Clear screen and home cursor
+    process.stdout.write(lines.join("\\n"));
+}
+// Initial render
+const initialWidth = process.stdout.columns || 80;
+const initialHeight = process.stdout.rows || 24;
+render(initialWidth, initialHeight);
+// Re-render only on terminal resize (static, no animation)
+process.stdout.on("resize", () => {
+    const width = process.stdout.columns || 80;
+    const height = process.stdout.rows || 24;
+    render(width, height);
+});
+// Keep the process running
+process.stdin.resume();
+// Handle Ctrl+C gracefully (though this pane will be killed by tmux)
+process.on("SIGINT", () => {
+    process.exit(0);
+});
+process.on("SIGTERM", () => {
+    process.exit(0);
+});
+//# sourceMappingURL=decorative-pane.js.map`,
+        mimeType: 'application/javascript',
+        size: 5486
     },
     'index.js': {
         content: `#!/usr/bin/env node
 import { execSync } from 'child_process';
 import fs from 'fs/promises';
+import * as fsSync from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { render } from 'ink';
 import React from 'react';
 import { createHash } from 'crypto';
+import { createRequire } from 'module';
 import DmuxApp from './DmuxApp.js';
 import { AutoUpdater } from './AutoUpdater.js';
 import readline from 'readline';
 import { DmuxServer } from './server/index.js';
 import { StateManager } from './shared/StateManager.js';
+import { LogService } from './services/LogService.js';
+import { createWelcomePane } from './utils/welcomePane.js';
+import { TMUX_COLORS } from './theme/colors.js';
+import { SIDEBAR_WIDTH } from './utils/layoutManager.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const packageJson = require('../package.json');
 class Dmux {
     panesFile;
     settingsFile;
@@ -4845,6 +5719,11 @@ class Dmux {
     async init() {
         // Set up global signal handlers for clean exit
         this.setupGlobalSignalHandlers();
+        // Set up hooks for this session (if in tmux)
+        if (process.env.TMUX) {
+            this.setupResizeHook();
+            this.setupPaneSplitHook();
+        }
         // Ensure .dmux directory exists and is in .gitignore
         await this.ensureDmuxDirectory();
         // Check for migration from old config location
@@ -4856,13 +5735,16 @@ class Dmux {
                 projectRoot: this.projectRoot,
                 panes: [],
                 settings: {},
-                lastUpdated: new Date().toISOString()
+                lastUpdated: new Date().toISOString(),
+                controlPaneId: undefined,
+                controlPaneSize: 40 // Sidebar width
             };
             await fs.writeFile(this.panesFile, JSON.stringify(initialConfig, null, 2));
         }
         // Check for updates in background if needed
         this.checkForUpdatesBackground();
         const inTmux = process.env.TMUX !== undefined;
+        const isDev = process.env.DMUX_DEV === 'true';
         if (!inTmux) {
             // Check if project-specific session already exists
             try {
@@ -4875,27 +5757,116 @@ class Dmux {
                 execSync(\`tmux new-session -d -s \${this.sessionName}\`, { stdio: 'inherit' });
                 // Enable pane borders to show titles
                 execSync(\`tmux set-option -t \${this.sessionName} pane-border-status top\`, { stdio: 'inherit' });
+                // Set border colors (foreground only - respects user's terminal background)
+                execSync(\`tmux set-option -t \${this.sessionName} pane-active-border-style "fg=colour\${TMUX_COLORS.activeBorder}"\`, { stdio: 'inherit' });
+                execSync(\`tmux set-option -t \${this.sessionName} pane-border-style "fg=colour\${TMUX_COLORS.inactiveBorder}"\`, { stdio: 'inherit' });
+                // Set pane border format
+                execSync(\`tmux set-option -t \${this.sessionName} pane-border-format " #{pane_title} "\`, { stdio: 'inherit' });
                 // Set pane title for the main dmux pane
-                execSync(\`tmux select-pane -t \${this.sessionName} -T "dmux-\${this.projectName}"\`, { stdio: 'inherit' });
-                // Send dmux command to the new session
-                execSync(\`tmux send-keys -t \${this.sessionName} "dmux" Enter\`, { stdio: 'inherit' });
+                execSync(\`tmux select-pane -t \${this.sessionName} -T "dmux v\${packageJson.version} - \${this.projectName}"\`, { stdio: 'inherit' });
+                // Send dmux command to the new session (use dev command if in dev mode)
+                // In dev mode, use current directory if we're in a worktree, otherwise use projectRoot
+                let devDirectory = this.projectRoot;
+                if (isDev && this.isWorktree()) {
+                    devDirectory = process.cwd();
+                }
+                // Determine the dmux command to use
+                let dmuxCommand;
+                if (isDev) {
+                    dmuxCommand = \`cd "\${devDirectory}" && pnpm dev:watch\`;
+                }
+                else {
+                    // Check if we're running from a local installation
+                    // __dirname is 'dist' when compiled, so '../dmux' points to the wrapper
+                    const localDmuxPath = path.join(__dirname, '..', 'dmux');
+                    if (fsSync.existsSync(localDmuxPath)) {
+                        // Use absolute path to local dmux (works for both local builds and global installs)
+                        dmuxCommand = \`"\${localDmuxPath}"\`;
+                    }
+                    else {
+                        // Fallback to global dmux command
+                        dmuxCommand = 'dmux';
+                    }
+                }
+                execSync(\`tmux send-keys -t \${this.sessionName} "\${dmuxCommand}" Enter\`, { stdio: 'inherit' });
             }
             execSync(\`tmux attach-session -t \${this.sessionName}\`, { stdio: 'inherit' });
             return;
         }
         // Enable pane borders to show titles
-        try {
-            execSync(\`tmux set-option pane-border-status top\`, { stdio: 'pipe' });
-        }
-        catch {
-            // Ignore if it fails
-        }
+        // NOTE: Temporarily disabled to test if border updates cause UI shifts
+        // try {
+        //   execSync(\`tmux set-option pane-border-status top\`, { stdio: 'pipe' });
+        // } catch {
+        //   // Ignore if it fails
+        // }
         // Set pane title for the current pane running dmux
+        // NOTE: Temporarily disabled to test if title updates cause UI shifts
+        // try {
+        //   execSync(\`tmux select-pane -T "dmux v\${packageJson.version} - \${this.projectName}"\`, { stdio: 'pipe' });
+        // } catch {
+        //   // Ignore if it fails (might not have permission or tmux version doesn't support it)
+        // }
+        // Get current pane ID (control pane for left sidebar)
+        let controlPaneId;
         try {
-            execSync(\`tmux select-pane -T "dmux-\${this.projectName}"\`, { stdio: 'pipe' });
+            // Get current pane ID
+            controlPaneId = execSync('tmux display-message -p "#{pane_id}"', {
+                encoding: 'utf-8',
+                stdio: 'pipe',
+            }).trim();
+            // Load existing config
+            const configContent = await fs.readFile(this.panesFile, 'utf-8');
+            const config = JSON.parse(configContent);
+            // Ensure panes array exists
+            if (!config.panes) {
+                config.panes = [];
+            }
+            // ALWAYS update controlPaneId with current pane (it changes on restart)
+            // This ensures layout manager always has the correct control pane ID
+            const needsUpdate = config.controlPaneId !== controlPaneId;
+            config.controlPaneId = controlPaneId;
+            config.controlPaneSize = SIDEBAR_WIDTH;
+            // If this is initial load or control pane changed, resize the sidebar
+            if (needsUpdate) {
+                // Resize control pane to sidebar width
+                execSync(\`tmux resize-pane -t '\${controlPaneId}' -x \${SIDEBAR_WIDTH}\`, { stdio: 'pipe' });
+                // Refresh client
+                execSync('tmux refresh-client', { stdio: 'pipe' });
+                // Save updated config
+                config.lastUpdated = new Date().toISOString();
+                await fs.writeFile(this.panesFile, JSON.stringify(config, null, 2));
+            }
+            // Create welcome pane if there are no dmux panes and no existing welcome pane
+            // Check if welcome pane actually exists, not just if it's in config (handles tmux restarts)
+            const { welcomePaneExists } = await import('./utils/welcomePane.js');
+            const hasValidWelcomePane = config.welcomePaneId && welcomePaneExists(config.welcomePaneId);
+            if (controlPaneId && config.panes && config.panes.length === 0) {
+                if (!hasValidWelcomePane) {
+                    // Create new welcome pane
+                    const welcomePaneId = await createWelcomePane(controlPaneId);
+                    if (welcomePaneId) {
+                        config.welcomePaneId = welcomePaneId;
+                        config.lastUpdated = new Date().toISOString();
+                        await fs.writeFile(this.panesFile, JSON.stringify(config, null, 2));
+                        LogService.getInstance().debug(\`Created welcome pane: \${welcomePaneId}\`, 'Setup');
+                    }
+                }
+                else {
+                    // Welcome pane exists from previous session - fix the layout
+                    LogService.getInstance().debug('Welcome pane exists, applying correct layout', 'Setup');
+                    // Apply correct layout: sidebar (40) | welcome pane (rest)
+                    // Use "latest" mode so window auto-follows terminal size
+                    execSync(\`tmux set-window-option window-size latest\`, { stdio: 'pipe' });
+                    execSync(\`tmux set-window-option main-pane-width \${SIDEBAR_WIDTH}\`, { stdio: 'pipe' });
+                    execSync(\`tmux select-layout main-vertical\`, { stdio: 'pipe' });
+                    execSync(\`tmux refresh-client\`, { stdio: 'pipe' });
+                }
+            }
         }
-        catch {
-            // Ignore if it fails (might not have permission or tmux version doesn't support it)
+        catch (error) {
+            // Ignore errors in sidebar setup - will work without it
+            LogService.getInstance().error('Failed to set up sidebar layout', 'Setup', undefined, error instanceof Error ? error : undefined);
         }
         // Update state manager with project info
         this.stateManager.updateProjectInfo(this.projectName, this.sessionName, this.projectRoot, this.panesFile);
@@ -4908,24 +5879,29 @@ class Dmux {
             // Don't log the local URL - tunnel will be created on demand when "r" is pressed
         }
         catch (err) {
-            console.error('Failed to start HTTP server:', err);
+            LogService.getInstance().error('Failed to start HTTP server', 'Setup', undefined, err instanceof Error ? err : undefined);
             // Continue without server - not critical for main functionality
         }
-        // Clear screen before launching Ink to prevent artifacts
+        // Add test logs to verify logging system functionality
+        const logService = LogService.getInstance();
+        logService.debug(\`dmux started for project: \${this.projectName}\`, 'startup');
+        logService.debug(\`Project root: \${this.projectRoot}\`, 'startup');
+        logService.debug(\`HTTP server running on port \${serverInfo.port}\`, 'startup');
+        logService.debug('Debug log: System initialized successfully', 'startup');
+        // Add a sample warning and error for testing
+        if (process.env.DMUX_DEV === 'true') {
+            logService.debug('Development mode enabled - this is a test warning', 'startup');
+            logService.debug('Press [l] to view logs, [L] to reset layout', 'startup');
+        }
+        // Suppress console output from LogService to prevent interference with Ink UI
+        LogService.getInstance().setSuppressConsole(true);
+        // Clear screen before launching Ink - minimal clearing to avoid artifacts
+        // Don't use \\x1b[3J as it can cause layout shifts
         process.stdout.write('\\x1b[2J\\x1b[H'); // Clear screen and move cursor to home
-        process.stdout.write('\\x1b[3J'); // Clear scrollback buffer
-        // Clear tmux history
-        try {
-            execSync('tmux clear-history', { stdio: 'pipe' });
-        }
-        catch { }
-        // Force tmux to refresh before Ink renders
-        try {
-            execSync('tmux refresh-client', { stdio: 'pipe' });
-        }
-        catch { }
-        // Small delay to let the clear take effect before Ink renders
-        await new Promise(resolve => setTimeout(resolve, 100));
+        // Ensure cursor is truly at home position and scrollback is clear
+        process.stdout.write('\\x1b[1;1H'); // Force cursor to row 1, column 1
+        // Small delay to let terminal settle
+        await new Promise(resolve => setTimeout(resolve, 50));
         // Launch the Ink app
         const app = render(React.createElement(DmuxApp, {
             panesFile: this.panesFile,
@@ -4935,7 +5911,8 @@ class Dmux {
             projectRoot: this.projectRoot,
             autoUpdater: this.autoUpdater,
             serverPort: serverInfo.port,
-            server: this.server
+            server: this.server,
+            controlPaneId
         }), {
             exitOnCtrlC: false // Disable automatic exit on Ctrl+C
         });
@@ -4954,6 +5931,26 @@ class Dmux {
             return false;
         }
     }
+    isWorktree() {
+        try {
+            // Check if current directory is different from project root
+            const cwd = process.cwd();
+            if (cwd === this.projectRoot) {
+                return false;
+            }
+            // Check if we're in a git worktree by checking if .git is a file (not a directory)
+            const gitPath = path.join(cwd, '.git');
+            if (fsSync.existsSync(gitPath)) {
+                const stats = fsSync.statSync(gitPath);
+                // In a worktree, .git is a file, not a directory
+                return stats.isFile();
+            }
+            return false;
+        }
+        catch {
+            return false;
+        }
+    }
     getProjectRoot() {
         // Return cached value if available
         if (Dmux.cachedProjectRoot) {
@@ -5155,8 +6152,57 @@ class Dmux {
     getAutoUpdater() {
         return this.autoUpdater;
     }
+    setupResizeHook() {
+        try {
+            // Set up session-specific hook that sends SIGUSR1 to dmux process on resize
+            // This works inside tmux where normal SIGWINCH may not propagate
+            const pid = process.pid;
+            execSync(\`tmux set-hook -t '\${this.sessionName}' client-resized 'run-shell "kill -USR1 \${pid} 2>/dev/null || true"'\`, { stdio: 'pipe' });
+            LogService.getInstance().debug(\`Set up resize hook for session \${this.sessionName}\`, 'Setup');
+        }
+        catch (error) {
+            LogService.getInstance().debug('Failed to set up resize hook', 'Setup');
+        }
+    }
+    setupPaneSplitHook() {
+        try {
+            // Set up hook that sends SIGUSR2 to dmux process when a pane is split
+            // This allows us to detect manually created panes via Ctrl+b %
+            const pid = process.pid;
+            execSync(\`tmux set-hook -t '\${this.sessionName}' after-split-window 'run-shell "kill -USR2 \${pid} 2>/dev/null || true"'\`, { stdio: 'pipe' });
+            LogService.getInstance().debug(\`Set up pane split detection hook for session \${this.sessionName}\`, 'Setup');
+        }
+        catch (error) {
+            LogService.getInstance().debug('Failed to set up pane split hook', 'Setup');
+        }
+    }
+    cleanupResizeHook() {
+        try {
+            // Remove session-specific hook
+            execSync(\`tmux set-hook -u -t '\${this.sessionName}' client-resized\`, { stdio: 'pipe' });
+            LogService.getInstance().debug('Cleaned up resize hook', 'Setup');
+        }
+        catch {
+            // Ignore cleanup errors
+        }
+    }
+    cleanupPaneSplitHook() {
+        try {
+            // Remove pane split hook
+            execSync(\`tmux set-hook -u -t '\${this.sessionName}' after-split-window\`, { stdio: 'pipe' });
+            LogService.getInstance().debug('Cleaned up pane split hook', 'Setup');
+        }
+        catch {
+            // Ignore cleanup errors
+        }
+    }
     setupGlobalSignalHandlers() {
         const cleanTerminalExit = () => {
+            // Clean up hooks
+            if (process.env.TMUX) {
+                this.cleanupResizeHook();
+                this.cleanupPaneSplitHook();
+            }
             // Clear screen multiple times to ensure no artifacts
             process.stdout.write('\\x1b[2J\\x1b[H'); // Clear screen and move to home
             process.stdout.write('\\x1b[3J'); // Clear scrollback buffer
@@ -5179,6 +6225,14 @@ class Dmux {
         // Handle Ctrl+C and SIGTERM
         process.on('SIGINT', cleanTerminalExit);
         process.on('SIGTERM', cleanTerminalExit);
+        // Handle SIGUSR2 for pane split detection
+        // This signal is sent by tmux hook when a new pane is created
+        process.on('SIGUSR2', () => {
+            // Log that a pane split was detected
+            LogService.getInstance().debug('Pane split detected via SIGUSR2, triggering immediate detection', 'shellDetection');
+            // Emit a custom event to trigger immediate shell pane detection
+            process.emit('pane-split-detected');
+        });
         // Handle uncaught exceptions and unhandled rejections
         process.on('uncaughtException', (error) => {
             console.error('Uncaught exception:', error);
@@ -5194,7 +6248,51 @@ const dmux = new Dmux();
 dmux.init().catch(() => process.exit(1));
 //# sourceMappingURL=index.js.map`,
         mimeType: 'application/javascript',
-        size: 17447
+        size: 27883
+    },
+    'spacer-pane.js': {
+        content: `#!/usr/bin/env node
+"use strict";
+// Spacer pane - displays only gray dots, no ASCII art
+// Used to fill empty space in layouts
+const DIM_GRAY = "\\x1b[38;5;238m"; // Same gray as decorative-pane
+const RESET = "\\x1b[0m";
+const FILL_CHAR = "·";
+function render(width, height) {
+    const lines = [];
+    for (let row = 0; row < height; row++) {
+        let line = "";
+        for (let col = 0; col < width; col++) {
+            line += DIM_GRAY + FILL_CHAR + RESET;
+        }
+        lines.push(line);
+    }
+    // Clear screen and render
+    process.stdout.write("\\x1b[2J\\x1b[H"); // Clear screen and home cursor
+    process.stdout.write(lines.join("\\n"));
+}
+// Initial render
+const initialWidth = process.stdout.columns || 80;
+const initialHeight = process.stdout.rows || 24;
+render(initialWidth, initialHeight);
+// Re-render on terminal resize
+process.stdout.on("resize", () => {
+    const width = process.stdout.columns || 80;
+    const height = process.stdout.rows || 24;
+    render(width, height);
+});
+// Keep the process running
+process.stdin.resume();
+// Handle Ctrl+C gracefully
+process.on("SIGINT", () => {
+    process.exit(0);
+});
+process.on("SIGTERM", () => {
+    process.exit(0);
+});
+//# sourceMappingURL=spacer-pane.js.map`,
+        mimeType: 'application/javascript',
+        size: 1234
     },
     'terminal.html': {
         content: `<!DOCTYPE html>