dmux 4.1.1 → 5.1.0

package/README.md

@@ -4,7 +4,7 @@
 
 # dmux - AI-Powered tmux Development Sessions
 
-Tools for running agents in parallel are too complex. `dmux` makes running parallel development agents like Claude Code or opencode very simple. It's a simple tool that creates a new tmux pane, a new git worktree, and launches your chosen agent (Claude Code or opencode) in that worktree, with AI powered branch naming and commit messages.
+Tools for running agents in parallel are too complex. `dmux` makes running parallel development agents like Claude Code, Codex, or opencode very simple. It's a simple tool that creates a new tmux pane, a new git worktree, and launches your chosen agent in that worktree, with AI powered branch naming and commit messages.
 
 `dmux` lets you merge the open panes back into your main branch easily, close failed experiments, and spin up more agents quickly.
 
@@ -15,7 +15,8 @@ Tools for running agents in parallel are too complex. `dmux` makes running paral
 - **🚀 Parallel Development**: Work on multiple features simultaneously in separate panes
 - **🌳 Git Worktree Integration**: Each pane operates in its own isolated git worktree
 - **🤖 AI-Powered**: Automatic branch naming and commit message generation
-- **🎯 Agent Integration**: Launch Claude Code or opencode with prompts (Claude auto-accepts edits)
+- **🎯 Agent Integration**: Launch Claude Code, Codex, or OpenCode with prompts
+- **🧪 A/B Agent Launches**: Start two agents at once from the same prompt for side-by-side experimentation
 - **📦 Project Isolation**: Each project gets its own tmux session
 - **🔄 Smart Merging**: One-command merge workflow with automatic cleanup
 
@@ -24,7 +25,7 @@ Tools for running agents in parallel are too complex. `dmux` makes running paral
 - **tmux** 3.0 or higher
 - **Node.js** 18 or higher  
 - **Git** 2.20 or higher (with worktree support)
-- **Agent CLI**: Claude Code (`claude`) or opencode (`opencode`)
+- **Agent CLI**: Claude Code (`claude`), Codex (`codex`), or OpenCode (`opencode`)
 - **OpenRouter API Key** (optional but recommended for AI features)
 
 ## Installation
@@ -37,7 +38,11 @@ npm install -g dmux
 
 ### 2. Enable AI Features
 
-For AI-powered branch naming and commit messages:
+On first run, dmux onboarding can:
+- suggest/install a recommended tmux config preset if you do not have one
+- prompt for your OpenRouter API key and save it to your shell config automatically
+
+You can also set it manually for AI-powered branch naming and commit messages:
 
 ```bash
 # Add to your ~/.bashrc or ~/.zshrc
@@ -55,11 +60,13 @@ Get your API key from [OpenRouter](https://openrouter.ai/).
    cd /path/to/your/project
    dmux
    ```
+   If you run `dmux` from a different repo while already inside a `dmux-*` tmux session, dmux will prompt to add that repo into the current session.
 
 2. **Create a new development pane**
    - Press `n` or select "+ New dmux pane"
-- Enter an optional prompt like "fix authentication bug"
-- Your selected agent launches in a new pane with your prompt
+   - Enter an optional prompt like "fix authentication bug"
+   - Choose one agent, or an A/B pair (for example Claude Code + Codex)
+   - dmux launches one pane per selected agent, each with its own worktree
 
 3. **Navigate between panes**
    - Use `↑/↓` arrows to select panes
@@ -76,7 +83,10 @@ Get your API key from [OpenRouter](https://openrouter.ai/).
 |-----|--------|
 | `↑/↓` | Navigate pane list |
 | `Enter` or `j` | Jump to selected pane |
-| `n` | Create new dmux pane |
+| `n` | Create new dmux pane (main project) |
+| `t` | Create terminal pane (main project) |
+| `p` | Create pane in another project |
+| `N` | Create pane in another project (legacy) |
 | `m` | Merge worktree to main |
 | `x` | Close selected pane |
 | `q` | Quit dmux interface |

package/dist/DmuxApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DmuxApp.d.ts","sourceRoot":"","sources":["../src/DmuxApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAmDlD,OAAO,KAAK,EAEV,YAAY,EACb,MAAM,YAAY,CAAA;AAWnB,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAy6BnC,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"DmuxApp.d.ts","sourceRoot":"","sources":["../src/DmuxApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAiD3D,OAAO,KAAK,EAEV,YAAY,EACb,MAAM,YAAY,CAAA;AAenB,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA41BnC,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/DmuxApp.js

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Box, Text, useApp, useStdout, useInput } from "ink";
-import { createRequire } from "module";
 import { TmuxService } from "./services/TmuxService.js";
 // Hooks
 import usePanes from "./hooks/usePanes.js";
@@ -17,13 +16,12 @@ import { useStatusMessages } from "./hooks/useStatusMessages.js";
 import { useLayoutManagement } from "./hooks/useLayoutManagement.js";
 import { useInputHandling } from "./hooks/useInputHandling.js";
 import { useDialogState } from "./hooks/useDialogState.js";
-import { useTunnelManagement } from "./hooks/useTunnelManagement.js";
 import { useDebugInfo } from "./hooks/useDebugInfo.js";
 // Utils
 import { SIDEBAR_WIDTH } from "./utils/layoutManager.js";
 import { supportsPopups } from "./utils/popup.js";
 import { StateManager } from "./shared/StateManager.js";
-import { REPAINT_SPINNER_DURATION, STATUS_MESSAGE_DURATION_SHORT, } from "./constants/timing.js";
+import { STATUS_MESSAGE_DURATION_SHORT, } from "./constants/timing.js";
 import { getStatusDetector, } from "./services/StatusDetector.js";
 import { SettingsManager } from "./utils/settingsManager.js";
 import { useServices } from "./hooks/useServices.js";
@@ -31,10 +29,10 @@ import { PaneLifecycleManager } from "./services/PaneLifecycleManager.js";
 import { reopenWorktree } from "./utils/reopenWorktree.js";
 import { fileURLToPath } from "url";
 import { dirname } from "path";
+import { getAgentSlugSuffix, } from "./utils/agentLaunch.js";
+import { generateSlug } from "./utils/slug.js";
 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/panes/PanesGrid.js";
 import CommandPromptDialog from "./components/dialogs/CommandPromptDialog.js";
 import FileCopyPrompt from "./components/ui/FileCopyPrompt.js";
@@ -44,26 +42,20 @@ import UpdatingIndicator from "./components/indicators/UpdatingIndicator.js";
 import FooterHelp from "./components/ui/FooterHelp.js";
 import TmuxHooksPromptDialog from "./components/dialogs/TmuxHooksPromptDialog.js";
 import { PaneEventService } from "./services/PaneEventService.js";
-const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoot, autoUpdater, serverPort, server, controlPaneId, rerenderRef, }) => {
+import { buildProjectActionLayout, buildVisualNavigationRows, } from "./utils/projectActions.js";
+const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoot, autoUpdater, controlPaneId, }) => {
     const { stdout } = useStdout();
     const terminalHeight = stdout?.rows || 40;
     /* panes state moved to usePanes */
     const [selectedIndex, setSelectedIndex] = useState(0);
-    const { statusMessage, setStatusMessage, showStatus, clearStatus } = useStatusMessages();
+    const { statusMessage, setStatusMessage } = useStatusMessages();
     const [isCreatingPane, setIsCreatingPane] = useState(false);
     // Settings state
     const [settingsManager] = useState(() => new SettingsManager(projectRoot));
-    // 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);
     // Dialog state management
     const dialogState = useDialogState();
     const { showCommandPrompt, setShowCommandPrompt, commandInput, setCommandInput, showFileCopyPrompt, setShowFileCopyPrompt, currentCommandType, setCurrentCommandType, runningCommand, setRunningCommand, quitConfirmMode, setQuitConfirmMode, } = dialogState;
-    // Tunnel/network state management
-    const tunnelState = useTunnelManagement();
-    const { tunnelUrl, setTunnelUrl, tunnelCreating, setTunnelCreating, tunnelCopied, setTunnelCopied, localIp, setLocalIp, } = tunnelState;
     // Debug/development info
     const { debugMessage, setDebugMessage, currentBranch } = useDebugInfo(__dirname);
     // Update state handled by hook
@@ -95,11 +87,11 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         const stateManager = StateManager.getInstance();
         const updateState = () => {
             const state = stateManager.getState();
-            setUnreadErrorCount(state.unreadErrorCount);
-            setUnreadWarningCount(state.unreadWarningCount);
-            setCurrentToast(state.currentToast);
-            setToastQueueLength(state.toastQueueLength);
-            setToastQueuePosition(state.toastQueuePosition);
+            setUnreadErrorCount((prev) => prev === state.unreadErrorCount ? prev : state.unreadErrorCount);
+            setUnreadWarningCount((prev) => prev === state.unreadWarningCount ? prev : state.unreadWarningCount);
+            setCurrentToast((prev) => prev === state.currentToast ? prev : state.currentToast);
+            setToastQueueLength((prev) => prev === state.toastQueueLength ? prev : state.toastQueueLength);
+            setToastQueuePosition((prev) => prev === state.toastQueuePosition ? prev : state.toastQueuePosition);
         };
         // Initial state
         updateState();
@@ -110,7 +102,7 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         };
     }, []);
     // Panes state and persistence (skipLoading will be updated after actionSystem is initialized)
-    const { panes, setPanes, isLoading, loadPanes, savePanes, eventMode } = usePanes(panesFile, false, sessionName, controlPaneId, useHooks);
+    const { panes, setPanes, isLoading, loadPanes, savePanes } = usePanes(panesFile, false, sessionName, controlPaneId, useHooks);
     // Check for tmux hooks preference on startup
     useEffect(() => {
         const checkHooksPreference = async () => {
@@ -156,77 +148,18 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         setStatusMessage,
         setRunningCommand,
     });
-    // Force repaint helper - shows spinner for a few frames to force full re-render
-    const forceRepaint = () => {
-        setForceRepaintTrigger((prev) => prev + 1);
-        setShowRepaintSpinner(true);
-        // CRITICAL: Use Ink's official rerender method to force complete redraw
-        // When tmux clears the pane via selectLayout, Ink's output is lost
-        // Calling rerender forces Ink to redraw the entire component tree
-        if (rerenderRef?.current) {
-            rerenderRef.current(React.createElement(DmuxApp, {
-                panesFile,
-                projectName,
-                sessionName,
-                settingsFile,
-                projectRoot,
-                autoUpdater,
-                serverPort,
-                server,
-                controlPaneId,
-                rerenderRef,
-            }));
-        }
-        // Hide spinner after a few frames (enough to trigger multiple renders)
-        setTimeout(() => setShowRepaintSpinner(false), REPAINT_SPINNER_DURATION);
-    };
-    // Force repaint effect - ensures Ink re-renders when trigger changes
-    useEffect(() => {
-        if (forceRepaintTrigger > 0) {
-            // Small delay to ensure terminal is ready
-            const timer = setTimeout(async () => {
-                try {
-                    const tmuxService = TmuxService.getInstance();
-                    await tmuxService.refreshClient();
-                }
-                catch { }
-            }, 50);
-            return () => clearTimeout(timer);
-        }
-    }, [forceRepaintTrigger]);
-    // Get local network IP on mount
-    useEffect(() => {
-        const getLocalIp = async () => {
-            try {
-                // Get local IP address (not 127.0.0.1)
-                const { execSync } = await import("child_process");
-                const result = execSync(`hostname -I 2>/dev/null || ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}' | head -1`, {
-                    encoding: "utf-8",
-                    stdio: "pipe",
-                }).trim();
-                if (result) {
-                    setLocalIp(result.split(" ")[0]); // Take first IP if multiple
-                }
-            }
-            catch {
-                // Fallback to 127.0.0.1
-                setLocalIp("127.0.0.1");
-            }
-        };
-        getLocalIp();
-    }, []);
     // Spinner animation and branch detection now handled in hooks
     // Pane creation
     const { createNewPane: createNewPaneHook } = usePaneCreation({
         panes,
         savePanes,
         projectName,
+        sessionProjectRoot: projectRoot || process.cwd(),
+        panesFile,
         setIsCreatingPane,
         setStatusMessage,
         loadPanes,
-        panesFile,
         availableAgents,
-        forceRepaint,
     });
     // Initialize services
     const { popupManager } = useServices({
@@ -238,81 +171,82 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         terminalHeight,
         availableAgents,
         agentChoice,
-        serverPort,
-        server,
         settingsManager,
         projectSettings,
         // Callbacks
         setStatusMessage,
         setIgnoreInput,
-        savePanes,
-        loadPanes,
     });
     // Listen for status updates with analysis data and merge into panes
     useEffect(() => {
         const statusDetector = getStatusDetector();
         const handleStatusUpdate = (event) => {
             setPanes((prevPanes) => {
-                const updatedPanes = prevPanes.map((pane) => {
-                    if (pane.id === event.paneId) {
-                        const updated = {
-                            ...pane,
-                            agentStatus: event.status,
-                        };
-                        // Only update analysis fields if they're present in the event (not undefined)
-                        // This prevents simple status changes from overwriting PaneAnalyzer results
-                        if (event.optionsQuestion !== undefined) {
-                            updated.optionsQuestion = event.optionsQuestion;
-                        }
-                        if (event.options !== undefined) {
-                            updated.options = event.options;
-                        }
-                        if (event.potentialHarm !== undefined) {
-                            updated.potentialHarm = event.potentialHarm;
-                        }
-                        if (event.summary !== undefined) {
-                            updated.agentSummary = event.summary;
-                        }
-                        if (event.analyzerError !== undefined) {
-                            updated.analyzerError = event.analyzerError;
-                        }
-                        // Clear option dialog data when transitioning away from 'waiting' state
-                        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") {
-                            updated.agentSummary = undefined;
-                        }
-                        // Clear analyzer error when successfully getting a new analysis
-                        // or when transitioning to 'working' status
-                        if (event.status === "working") {
-                            updated.analyzerError = undefined;
-                        }
-                        else if (event.status === "waiting" || event.status === "idle") {
-                            if (event.analyzerError === undefined &&
-                                (event.optionsQuestion || event.summary)) {
-                                updated.analyzerError = undefined;
-                            }
-                        }
-                        return updated;
+                const paneIndex = prevPanes.findIndex((pane) => pane.id === event.paneId);
+                if (paneIndex === -1)
+                    return prevPanes;
+                const pane = prevPanes[paneIndex];
+                const updated = {
+                    ...pane,
+                    agentStatus: event.status,
+                };
+                // Only update analysis fields if they're present in the event (not undefined)
+                // This prevents simple status changes from overwriting PaneAnalyzer results
+                if (event.optionsQuestion !== undefined) {
+                    updated.optionsQuestion = event.optionsQuestion;
+                }
+                if (event.options !== undefined) {
+                    updated.options = event.options;
+                }
+                if (event.potentialHarm !== undefined) {
+                    updated.potentialHarm = event.potentialHarm;
+                }
+                if (event.summary !== undefined) {
+                    updated.agentSummary = event.summary;
+                }
+                if (event.analyzerError !== undefined) {
+                    updated.analyzerError = event.analyzerError;
+                }
+                // Clear option dialog data when transitioning away from 'waiting' state
+                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") {
+                    updated.agentSummary = undefined;
+                }
+                // Clear analyzer error when successfully getting a new analysis
+                // or when transitioning to 'working' status
+                if (event.status === "working") {
+                    updated.analyzerError = undefined;
+                }
+                else if (event.status === "waiting" || event.status === "idle") {
+                    if (event.analyzerError === undefined &&
+                        (event.optionsQuestion || event.summary)) {
+                        updated.analyzerError = undefined;
                     }
-                    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);
-                });
-                return updatedPanes;
+                }
+                const unchanged = pane.agentStatus === updated.agentStatus &&
+                    pane.optionsQuestion === updated.optionsQuestion &&
+                    pane.options === updated.options &&
+                    pane.potentialHarm === updated.potentialHarm &&
+                    pane.agentSummary === updated.agentSummary &&
+                    pane.analyzerError === updated.analyzerError;
+                if (unchanged) {
+                    return prevPanes;
+                }
+                const next = prevPanes.slice();
+                next[paneIndex] = updated;
+                return next;
             });
         };
         statusDetector.on("status-updated", handleStatusUpdate);
         return () => {
             statusDetector.off("status-updated", handleStatusUpdate);
         };
-    }, [setPanes, savePanes]);
+    }, [setPanes]);
     // Note: No need to sync panes with StateManager here.
     // The ConfigWatcher automatically updates StateManager when the config file changes.
     // This prevents unnecessary SSE broadcasts on every local state update.
@@ -360,63 +294,80 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     // No polling needed!
     // loadPanes moved to usePanes
     // getPanePositions moved to utils/tmux
+    const sessionProjectRoot = projectRoot || process.cwd();
+    const projectActionLayout = useMemo(() => buildProjectActionLayout(panes, sessionProjectRoot, projectName), [panes, sessionProjectRoot, projectName]);
+    const navigationRows = useMemo(() => isLoading
+        ? projectActionLayout.groups.flatMap((group) => group.panes.map((entry) => [entry.index]))
+        : buildVisualNavigationRows(projectActionLayout), [isLoading, projectActionLayout]);
     // Navigation logic moved to hook
-    const { getCardGridPosition, findCardInDirection } = useNavigation(terminalWidth, panes.length, isLoading);
+    const { getCardGridPosition, findCardInDirection } = useNavigation(navigationRows);
     // findCardInDirection provided by useNavigation
     // savePanes moved to usePanes
     // applySmartLayout moved to utils/tmux
     // Helper function to handle agent choice and pane creation
-    const handlePaneCreationWithAgent = async (prompt) => {
+    const handlePaneCreationWithAgent = async (prompt, targetProjectRoot) => {
         const agents = availableAgents;
+        const createPanesForAgents = async (selectedAgents) => {
+            const dedupedAgents = selectedAgents.filter((agent, index) => selectedAgents.indexOf(agent) === index);
+            let panesForCreation = panes;
+            const isMultiLaunch = dedupedAgents.length > 1;
+            const slugBase = isMultiLaunch ? await generateSlug(prompt) : undefined;
+            for (const selectedAgent of dedupedAgents) {
+                const pane = await createNewPaneHook(prompt, selectedAgent, {
+                    existingPanes: panesForCreation,
+                    slugSuffix: isMultiLaunch
+                        ? getAgentSlugSuffix(selectedAgent)
+                        : undefined,
+                    slugBase,
+                    targetProjectRoot,
+                });
+                if (!pane) {
+                    return;
+                }
+                panesForCreation = [...panesForCreation, pane];
+            }
+        };
         if (agents.length === 0) {
-            await createNewPaneHook(prompt);
+            await createNewPaneHook(prompt, undefined, { targetProjectRoot });
         }
         else if (agents.length === 1) {
-            await createNewPaneHook(prompt, agents[0]);
+            await createPanesForAgents([agents[0]]);
         }
         else {
             // Multiple agents available - check for default agent setting first
             const settings = settingsManager.getSettings();
             if (settings.defaultAgent && agents.includes(settings.defaultAgent)) {
-                await createNewPaneHook(prompt, settings.defaultAgent);
+                await createPanesForAgents([settings.defaultAgent]);
             }
             else {
                 // Show agent choice popup
-                const selectedAgent = await popupManager.launchAgentChoicePopup();
-                if (selectedAgent) {
-                    await createNewPaneHook(prompt, selectedAgent);
+                const selectedAgents = await popupManager.launchAgentChoicePopup();
+                if (selectedAgents && selectedAgents.length > 0) {
+                    await createPanesForAgents(selectedAgents);
                 }
             }
         }
     };
     // Helper function to reopen a closed worktree
-    const handleReopenWorktree = async (slug, worktreePath) => {
-        // Force repaint first
-        forceRepaint();
-        // Minimal clearing
-        process.stdout.write('\x1b[2J\x1b[H');
+    const handleReopenWorktree = async (slug, worktreePath, targetProjectRoot) => {
         try {
             setIsCreatingPane(true);
             setStatusMessage(`Reopening ${slug}...`);
+            const reopenProjectRoot = targetProjectRoot || projectRoot || process.cwd();
             const result = await reopenWorktree({
                 slug,
                 worktreePath,
-                projectRoot: projectRoot || process.cwd(),
+                projectRoot: reopenProjectRoot,
+                sessionProjectRoot: projectRoot || process.cwd(),
+                sessionConfigPath: panesFile,
                 existingPanes: panes,
             });
             // Save the pane
             const updatedPanes = [...panes, result.pane];
             await savePanes(updatedPanes);
-            // Force repaint and refresh
-            forceRepaint();
-            process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
-            const tmuxService = TmuxService.getInstance();
-            tmuxService.clearHistorySync();
-            tmuxService.refreshClientSync();
             await loadPanes();
             setStatusMessage(`Reopened ${slug}`);
             setTimeout(() => setStatusMessage(""), STATUS_MESSAGE_DURATION_SHORT);
-            forceRepaint();
         }
         catch (error) {
             setStatusMessage(`Failed to reopen: ${error.message}`);
@@ -481,9 +432,7 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                     try {
                         TmuxService.getInstance().selectPane(targetPane.paneId);
                     }
-                    catch (error) {
-                        console.error('[onActionResult] Failed to navigate to pane:', error);
-                    }
+                    catch { }
                 }
             }
             // Show message if dismissable
@@ -515,7 +464,6 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             await lifecycleManager.completeClose(paneId);
         },
         onActionResult: handleActionResult,
-        forceRepaint,
         popupLaunchers: popupsSupported
             ? {
                 launchConfirmPopup: popupManager.launchConfirmPopup.bind(popupManager),
@@ -538,7 +486,6 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             isCreatingPane ||
             runningCommand ||
             isUpdating,
-        onForceRepaint: forceRepaint,
     });
     // Monitor agent status across panes (returns a map of pane ID to status)
     const agentStatuses = useAgentStatus({
@@ -645,23 +592,19 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
         projectSettings,
         saveSettings,
         settingsManager,
-        tunnelUrl,
-        setTunnelUrl,
-        tunnelCreating,
-        setTunnelCreating,
-        setTunnelCopied,
         popupManager,
         actionSystem,
-        server,
         controlPaneId,
         setStatusMessage,
         copyNonGitFiles,
         runCommandInternal,
         handlePaneCreationWithAgent,
         handleReopenWorktree,
+        savePanes,
         loadPanes,
         cleanExit,
-        projectRoot: projectRoot || process.cwd(),
+        projectRoot: sessionProjectRoot,
+        projectActionItems: projectActionLayout.actionItems,
         findCardInDirection,
     });
     // Calculate available height for content (terminal height - footer lines - active status messages)
@@ -670,7 +613,6 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     // - Normal mode calculation:
     //   - Base: 4 lines (marginTop + logs divider + logs line + keyboard shortcuts)
     //   - Toast: +2 lines (toast message + marginBottom) if currentToast exists
-    //   - 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
@@ -692,10 +634,6 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             const wrappedLines = Math.ceil(toastTextLength / availableWidth);
             footerLines += wrappedLines + 1 + 1; // wrapped lines + header line + marginBottom
         }
-        // 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;
@@ -714,10 +652,8 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
     }
     const contentHeight = Math.max(terminalHeight - footerLines, 10);
     return (React.createElement(Box, { flexDirection: "column", height: terminalHeight },
-        showRepaintSpinner && (React.createElement(Box, { marginTop: -10, marginLeft: -100 },
-            React.createElement(Text, null, "\u27F3"))),
         React.createElement(Box, { flexDirection: "column", height: contentHeight, overflow: "hidden" },
-            React.createElement(PanesGrid, { panes: panes, selectedIndex: selectedIndex, isLoading: isLoading, agentStatuses: agentStatuses }),
+            React.createElement(PanesGrid, { panes: panes, selectedIndex: selectedIndex, isLoading: isLoading, agentStatuses: agentStatuses, fallbackProjectRoot: projectRoot || process.cwd(), fallbackProjectName: projectName }),
             isLoading && React.createElement(LoadingIndicator, null),
             showCommandPrompt && (React.createElement(CommandPromptDialog, { type: showCommandPrompt, value: commandInput, onChange: setCommandInput })),
             showFileCopyPrompt && React.createElement(FileCopyPrompt, null),
@@ -732,11 +668,11 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
                     : 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, currentToast: currentToast, toastQueueLength: toastQueueLength, toastQueuePosition: toastQueuePosition, localIp: localIp, tunnelUrl: tunnelUrl, tunnelCreating: tunnelCreating, tunnelCopied: tunnelCopied, tunnelSpinner: tunnelState.getSpinnerChar(), gridInfo: (() => {
+        React.createElement(FooterHelp, { show: !showCommandPrompt, quitConfirmMode: quitConfirmMode, unreadErrorCount: unreadErrorCount, unreadWarningCount: unreadWarningCount, currentToast: currentToast, toastQueueLength: toastQueueLength, toastQueuePosition: toastQueuePosition, gridInfo: (() => {
                 if (!process.env.DEBUG_DMUX)
                     return undefined;
-                const cols = Math.max(1, Math.floor(terminalWidth / 37));
-                const rows = Math.ceil((panes.length + 1) / cols);
+                const rows = navigationRows.length;
+                const cols = Math.max(1, ...navigationRows.map((row) => row.length));
                 const pos = getCardGridPosition(selectedIndex);
                 return `Grid: ${cols} cols × ${rows} rows | Selected: row ${pos.row}, col ${pos.col} | Terminal: ${terminalWidth}w`;
             })() }),