dmux 4.1.0 → 5.0.0

package/dist/server/embedded-assets.js

@@ -4,9 +4,8 @@
  */
 export const embeddedAssets = {
     'DmuxApp.js': {
-        content: `import React, { useState, useEffect } from "react";
+        content: `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";
@@ -23,13 +22,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";
@@ -37,10 +35,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";
@@ -50,26 +48,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
@@ -101,11 +93,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();
@@ -116,7 +108,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 () => {
@@ -162,77 +154,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({
@@ -244,81 +177,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.
@@ -366,63 +300,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}\`);
@@ -487,9 +438,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
@@ -521,7 +470,6 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
             await lifecycleManager.completeClose(paneId);
         },
         onActionResult: handleActionResult,
-        forceRepaint,
         popupLaunchers: popupsSupported
             ? {
                 launchConfirmPopup: popupManager.launchConfirmPopup.bind(popupManager),
@@ -544,7 +492,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({
@@ -651,23 +598,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)
@@ -676,7 +619,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
@@ -698,10 +640,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;
@@ -720,10 +658,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),
@@ -738,11 +674,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\`;
             })() }),
@@ -760,7 +696,7 @@ const DmuxApp = ({ panesFile, projectName, sessionName, settingsFile, projectRoo
 export default DmuxApp;
 //# sourceMappingURL=DmuxApp.js.map`,
         mimeType: 'application/javascript',
-        size: 35428
+        size: 33093
     },
     'chunks/styles.css_vue_type_style_index_0_src_true_lang-pW5mq51o.js': {
         content: `(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))n(r);new MutationObserver(r=>{for(const i of r)if(i.type==="childList")for(const o of i.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(r){const i={};return r.integrity&&(i.integrity=r.integrity),r.referrerPolicy&&(i.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?i.credentials="include":r.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function n(r){if(r.ep)return;r.ep=!0;const i=s(r);fetch(r.href,i)}})();/**
@@ -813,6 +749,7 @@ export default DmuxApp;
     'index.js': {
         content: `#!/usr/bin/env node
 import { execSync, spawnSync } from 'child_process';
+import chalk from 'chalk';
 import fs from 'fs/promises';
 import * as fsSync from 'fs';
 import path from 'path';
@@ -821,9 +758,9 @@ import { render } from 'ink';
 import React from 'react';
 import { createHash } from 'crypto';
 import { createRequire } from 'module';
+import { createInterface } from 'node:readline/promises';
 import DmuxApp from './DmuxApp.js';
 import { AutoUpdater } from './services/AutoUpdater.js';
-import { DmuxServer } from './server/index.js';
 import { StateManager } from './shared/StateManager.js';
 import { LogService } from './services/LogService.js';
 import { TmuxService } from './services/TmuxService.js';
@@ -832,6 +769,11 @@ import { TMUX_COLORS } from './theme/colors.js';
 import { SIDEBAR_WIDTH } from './utils/layoutManager.js';
 import { validateSystemRequirements, printValidationResults } from './utils/systemCheck.js';
 import { getUntrackedPanes } from './utils/shellPaneDetection.js';
+import { runTmuxConfigOnboardingIfNeeded } from './utils/tmuxConfigOnboarding.js';
+import { getAvailableAgents } from './utils/agentDetection.js';
+import { createPane } from './utils/paneCreation.js';
+import { SettingsManager } from './utils/settingsManager.js';
+import { atomicWriteJson } from './utils/atomicWrite.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 const packageJson = require('../package.json');
@@ -842,7 +784,6 @@ class Dmux {
     sessionName;
     projectRoot;
     autoUpdater;
-    server;
     stateManager;
     constructor() {
         // Get git root directory to determine project scope
@@ -850,14 +791,8 @@ class Dmux {
         this.projectRoot = this.getProjectRoot();
         // Get project name from git root directory
         this.projectName = path.basename(this.projectRoot);
-        // Create a unique identifier for this project based on its full path
-        // This ensures different projects with the same folder name are kept separate
-        const projectHash = createHash('md5').update(this.projectRoot).digest('hex').substring(0, 8);
-        const projectIdentifier = \`\${this.projectName}-\${projectHash}\`;
-        // Create unique session name for this project (sanitize for tmux compatibility)
-        // tmux converts dots to underscores, so we do it explicitly to avoid mismatches
-        const sanitizedProjectIdentifier = projectIdentifier.replace(/\\./g, '-');
-        this.sessionName = \`dmux-\${sanitizedProjectIdentifier}\`;
+        // Create a stable, collision-safe session name for this project root
+        this.sessionName = this.buildSessionNameForRoot(this.projectRoot);
         // Store config in .dmux directory inside project root
         const dmuxDir = path.join(this.projectRoot, '.dmux');
         const configFile = path.join(dmuxDir, 'dmux.config.json');
@@ -866,22 +801,18 @@ class Dmux {
         this.settingsFile = configFile; // Same file for all config
         // Initialize auto-updater with config file
         this.autoUpdater = new AutoUpdater(configFile);
-        // Initialize server and state manager
-        this.server = new DmuxServer();
+        // Initialize state manager
         this.stateManager = StateManager.getInstance();
     }
     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
         await this.migrateOldConfig();
+        // First-run global onboarding for tmux config presets
+        await runTmuxConfigOnboardingIfNeeded();
         // Initialize config file if it doesn't exist
         if (!await this.fileExists(this.panesFile)) {
             const initialConfig = {
@@ -895,10 +826,33 @@ class Dmux {
             };
             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';
+        const currentTmuxSessionName = inTmux
+            ? this.getCurrentTmuxSessionName()
+            : null;
+        const sessionNameForCurrentTmux = currentTmuxSessionName || this.sessionName;
+        // Running dmux from another project while already inside a dmux session:
+        // offer to attach this project to the current sidebar/session instead.
+        if (inTmux &&
+            currentTmuxSessionName &&
+            currentTmuxSessionName.startsWith('dmux-') &&
+            currentTmuxSessionName !== this.sessionName) {
+            const shouldAttachToCurrent = await this.promptYesNo(\`Detected active dmux session '\${currentTmuxSessionName}'. Add project '\${this.projectName}' to this session?\`, true);
+            if (shouldAttachToCurrent) {
+                const attached = await this.attachProjectToExistingSession(currentTmuxSessionName);
+                if (attached) {
+                    return;
+                }
+            }
+        }
+        // Check for updates in background if needed
+        this.checkForUpdatesBackground();
+        // Set up hooks for this session (if in tmux)
+        if (inTmux) {
+            this.setupResizeHook(sessionNameForCurrentTmux);
+            this.setupPaneSplitHook(sessionNameForCurrentTmux);
+        }
         if (!inTmux) {
             // Check if project-specific session already exists
             try {
@@ -1019,7 +973,7 @@ class Dmux {
             }
             // Check for untracked panes (terminal panes created outside dmux tracking)
             const trackedPaneIds = config.panes?.map((p) => p.paneId) ?? [];
-            const untrackedPanes = await getUntrackedPanes(this.sessionName, trackedPaneIds, controlPaneId, config.welcomePaneId);
+            const untrackedPanes = await getUntrackedPanes(sessionNameForCurrentTmux, trackedPaneIds, controlPaneId, config.welcomePaneId);
             // Only show welcome pane if there are no tracked AND no untracked panes
             const hasAnyPanes = (config.panes?.length ?? 0) > 0 || untrackedPanes.length > 0;
             if (controlPaneId && !hasAnyPanes) {
@@ -1056,20 +1010,13 @@ class Dmux {
             // 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);
         }
+        const metadataSessionName = currentTmuxSessionName || this.getCurrentTmuxSessionName() || this.sessionName;
+        const shouldPublishMetadata = !metadataSessionName.startsWith('dmux-') || metadataSessionName === this.sessionName;
+        if (shouldPublishMetadata) {
+            this.publishSessionMetadata(metadataSessionName);
+        }
         // Update state manager with project info
         this.stateManager.updateProjectInfo(this.projectName, this.sessionName, this.projectRoot, this.panesFile);
-        // Start the HTTP server
-        let serverInfo = { port: 0, url: '' };
-        try {
-            serverInfo = await this.server.start();
-            // Update StateManager with server info
-            this.stateManager.updateServerInfo(serverInfo.port, serverInfo.url);
-            // Don't log the local URL - tunnel will be created on demand when "r" is pressed
-        }
-        catch (err) {
-            LogService.getInstance().error('Failed to start HTTP server', 'Setup', undefined, err instanceof Error ? err : undefined);
-            // Continue without server - not critical for main functionality
-        }
         // Logging system is ready (removed debug logs to reduce clutter)
         // Suppress console output from LogService to prevent interference with Ink UI
         LogService.getInstance().setSuppressConsole(true);
@@ -1078,8 +1025,6 @@ class Dmux {
         process.stdout.write('\\x1b[2J\\x1b[H'); // Clear screen and move cursor to home
         // 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 appProps = {
             panesFile: this.panesFile,
@@ -1088,23 +1033,223 @@ class Dmux {
             sessionName: this.sessionName,
             projectRoot: this.projectRoot,
             autoUpdater: this.autoUpdater,
-            serverPort: serverInfo.port,
-            server: this.server,
             controlPaneId,
-            // Pass rerender function as a ref that will be set after first render
-            rerenderRef: { current: null }
         };
         const app = render(React.createElement(DmuxApp, appProps), {
             exitOnCtrlC: false // Disable automatic exit on Ctrl+C
         });
-        // Set the rerender function so DmuxApp can use it
-        appProps.rerenderRef.current = app.rerender;
         // Clean shutdown on app exit
         app.waitUntilExit().then(async () => {
-            await this.server.stop();
             process.exit(0);
         });
     }
+    buildSessionNameForRoot(projectRoot) {
+        const projectName = path.basename(projectRoot);
+        const projectHash = createHash('md5').update(projectRoot).digest('hex').substring(0, 8);
+        const projectIdentifier = \`\${projectName}-\${projectHash}\`;
+        const sanitizedProjectIdentifier = projectIdentifier.replace(/\\./g, '-');
+        return \`dmux-\${sanitizedProjectIdentifier}\`;
+    }
+    getCurrentTmuxSessionName() {
+        try {
+            const result = spawnSync('tmux', ['display-message', '-p', '#S'], {
+                encoding: 'utf-8',
+                stdio: 'pipe',
+            });
+            if (result.status !== 0)
+                return null;
+            const sessionName = (result.stdout || '').trim();
+            return sessionName || null;
+        }
+        catch {
+            return null;
+        }
+    }
+    getTmuxOptionValue(sessionName, optionName) {
+        try {
+            const result = spawnSync('tmux', ['show-options', '-v', '-t', sessionName, optionName], {
+                encoding: 'utf-8',
+                stdio: 'pipe',
+            });
+            if (result.status !== 0)
+                return null;
+            const value = (result.stdout || '').trim();
+            return value || null;
+        }
+        catch {
+            return null;
+        }
+    }
+    publishSessionMetadata(sessionName) {
+        try {
+            spawnSync('tmux', ['set-option', '-t', sessionName, '@dmux_project_root', this.projectRoot], { stdio: 'pipe' });
+            spawnSync('tmux', ['set-option', '-t', sessionName, '@dmux_project_name', this.projectName], { stdio: 'pipe' });
+            spawnSync('tmux', ['set-option', '-t', sessionName, '@dmux_config_path', this.panesFile], { stdio: 'pipe' });
+        }
+        catch {
+            // Metadata is best-effort only
+        }
+    }
+    async promptYesNo(question, defaultYes = true) {
+        if (!process.stdin.isTTY || !process.stdout.isTTY) {
+            return false;
+        }
+        const suffix = defaultYes ? '[Y/n]' : '[y/N]';
+        const rl = createInterface({ input: process.stdin, output: process.stdout });
+        try {
+            const answer = (await rl.question(\`\${question} \${suffix} \`)).trim().toLowerCase();
+            if (!answer)
+                return defaultYes;
+            if (answer === 'y' || answer === 'yes')
+                return true;
+            if (answer === 'n' || answer === 'no')
+                return false;
+            return defaultYes;
+        }
+        finally {
+            rl.close();
+        }
+    }
+    getAncestorPaths(startPath) {
+        const ancestors = [];
+        let cursor = path.resolve(startPath);
+        while (true) {
+            ancestors.push(cursor);
+            const parent = path.dirname(cursor);
+            if (parent === cursor)
+                break;
+            cursor = parent;
+        }
+        return ancestors;
+    }
+    inferSessionContextFromPanePaths(sessionName) {
+        try {
+            const listResult = spawnSync('tmux', ['list-panes', '-t', sessionName, '-F', '#{pane_current_path}'], {
+                encoding: 'utf-8',
+                stdio: 'pipe',
+            });
+            if (listResult.status !== 0) {
+                return null;
+            }
+            const panePaths = (listResult.stdout || '')
+                .split('\\n')
+                .map((line) => line.trim())
+                .filter(Boolean);
+            const seenRoots = new Set();
+            for (const panePath of panePaths) {
+                for (const candidateRoot of this.getAncestorPaths(panePath)) {
+                    if (seenRoots.has(candidateRoot))
+                        continue;
+                    seenRoots.add(candidateRoot);
+                    const configPath = path.join(candidateRoot, '.dmux', 'dmux.config.json');
+                    if (!fsSync.existsSync(configPath)) {
+                        continue;
+                    }
+                    if (this.buildSessionNameForRoot(candidateRoot) !== sessionName) {
+                        continue;
+                    }
+                    return {
+                        sessionName,
+                        sessionProjectRoot: candidateRoot,
+                        sessionProjectName: path.basename(candidateRoot),
+                        sessionConfigPath: configPath,
+                    };
+                }
+            }
+        }
+        catch {
+            // Fall through to null
+        }
+        return null;
+    }
+    getExistingSessionContext(sessionName) {
+        const optionProjectRoot = this.getTmuxOptionValue(sessionName, '@dmux_project_root');
+        const optionProjectName = this.getTmuxOptionValue(sessionName, '@dmux_project_name');
+        const optionConfigPath = this.getTmuxOptionValue(sessionName, '@dmux_config_path');
+        const sessionProjectRoot = optionProjectRoot
+            || (optionConfigPath ? path.dirname(path.dirname(optionConfigPath)) : undefined);
+        const sessionConfigPath = optionConfigPath
+            || (sessionProjectRoot ? path.join(sessionProjectRoot, '.dmux', 'dmux.config.json') : undefined);
+        if (sessionProjectRoot &&
+            sessionConfigPath &&
+            fsSync.existsSync(sessionConfigPath)) {
+            return {
+                sessionName,
+                sessionProjectRoot,
+                sessionProjectName: optionProjectName || path.basename(sessionProjectRoot),
+                sessionConfigPath,
+            };
+        }
+        return this.inferSessionContextFromPanePaths(sessionName);
+    }
+    getPreferredAttachAgent(availableAgents) {
+        if (availableAgents.length === 0) {
+            return undefined;
+        }
+        const settings = new SettingsManager(this.projectRoot).getSettings();
+        if (settings.defaultAgent && availableAgents.includes(settings.defaultAgent)) {
+            return settings.defaultAgent;
+        }
+        return availableAgents[0];
+    }
+    async attachProjectToExistingSession(sessionName) {
+        const context = this.getExistingSessionContext(sessionName);
+        if (!context) {
+            console.log(chalk.yellow(\`Unable to locate config for session '\${sessionName}'. Run dmux inside that project once, then try again.\`));
+            return false;
+        }
+        if (path.resolve(context.sessionProjectRoot) === path.resolve(this.projectRoot)) {
+            return false;
+        }
+        try {
+            const configRaw = await fs.readFile(context.sessionConfigPath, 'utf-8');
+            const config = JSON.parse(configRaw);
+            const existingPanes = Array.isArray(config.panes) ? config.panes : [];
+            const availableAgents = await getAvailableAgents();
+            let selectedAgent = this.getPreferredAttachAgent(availableAgents);
+            const prompt = \`Explore \${this.projectName} and ask what to work on first.\`;
+            let creation = await createPane({
+                prompt,
+                agent: selectedAgent,
+                projectName: context.sessionProjectName,
+                existingPanes,
+                projectRoot: this.projectRoot,
+                sessionConfigPath: context.sessionConfigPath,
+                sessionProjectRoot: context.sessionProjectRoot,
+            }, availableAgents);
+            if (creation.needsAgentChoice) {
+                selectedAgent = availableAgents[0];
+                if (!selectedAgent) {
+                    throw new Error('No supported agent CLI found (claude, opencode, codex)');
+                }
+                creation = await createPane({
+                    prompt,
+                    agent: selectedAgent,
+                    projectName: context.sessionProjectName,
+                    existingPanes,
+                    projectRoot: this.projectRoot,
+                    sessionConfigPath: context.sessionConfigPath,
+                    sessionProjectRoot: context.sessionProjectRoot,
+                }, availableAgents);
+            }
+            const latestConfigRaw = await fs.readFile(context.sessionConfigPath, 'utf-8');
+            const latestConfig = JSON.parse(latestConfigRaw);
+            const latestPanes = Array.isArray(latestConfig.panes) ? latestConfig.panes : [];
+            const alreadyPersisted = latestPanes.some((pane) => pane.id === creation.pane.id || pane.paneId === creation.pane.paneId);
+            if (!alreadyPersisted) {
+                latestConfig.panes = [...latestPanes, creation.pane];
+                latestConfig.lastUpdated = new Date().toISOString();
+                await atomicWriteJson(context.sessionConfigPath, latestConfig);
+            }
+            console.log(chalk.green(\`Added project '\${this.projectName}' to session '\${sessionName}'.\`));
+            return true;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            console.error(chalk.red(\`Failed to add project '\${this.projectName}': \${message}\`));
+            return false;
+        }
+    }
     async fileExists(path) {
         try {
             await fs.access(path);
@@ -1336,48 +1481,48 @@ class Dmux {
     getAutoUpdater() {
         return this.autoUpdater;
     }
-    setupResizeHook() {
+    setupResizeHook(sessionName = this.sessionName) {
         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' });
+            execSync(\`tmux set-hook -t '\${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().warn('Failed to set up resize hook', 'Setup');
         }
     }
-    setupPaneSplitHook() {
+    setupPaneSplitHook(sessionName = this.sessionName) {
         try {
             // Set up hooks that send SIGUSR2 to dmux process for pane events
             // This allows immediate detection of pane changes
             const pid = process.pid;
             // Detect manually created panes via Ctrl+b %
-            execSync(\`tmux set-hook -t '\${this.sessionName}' after-split-window 'run-shell "kill -USR2 \${pid} 2>/dev/null || true"'\`, { stdio: 'pipe' });
+            execSync(\`tmux set-hook -t '\${sessionName}' after-split-window 'run-shell "kill -USR2 \${pid} 2>/dev/null || true"'\`, { stdio: 'pipe' });
             // Detect pane closures via Ctrl+b x or process exit
-            execSync(\`tmux set-hook -t '\${this.sessionName}' pane-exited 'run-shell "kill -USR2 \${pid} 2>/dev/null || true"'\`, { stdio: 'pipe' });
+            execSync(\`tmux set-hook -t '\${sessionName}' pane-exited 'run-shell "kill -USR2 \${pid} 2>/dev/null || true"'\`, { stdio: 'pipe' });
             // LogService.getInstance().debug(\`Set up pane detection hooks for session \${this.sessionName}\`, 'Setup');
         }
         catch (error) {
             LogService.getInstance().warn('Failed to set up pane hooks', 'Setup');
         }
     }
-    cleanupResizeHook() {
+    cleanupResizeHook(sessionName = this.getCurrentTmuxSessionName() || this.sessionName) {
         try {
             // Remove session-specific hook
-            execSync(\`tmux set-hook -u -t '\${this.sessionName}' client-resized\`, { stdio: 'pipe' });
+            execSync(\`tmux set-hook -u -t '\${sessionName}' client-resized\`, { stdio: 'pipe' });
             LogService.getInstance().debug('Cleaned up resize hook', 'Setup');
         }
         catch {
             // Ignore cleanup errors
         }
     }
-    cleanupPaneSplitHook() {
+    cleanupPaneSplitHook(sessionName = this.getCurrentTmuxSessionName() || this.sessionName) {
         try {
             // Remove pane hooks
-            execSync(\`tmux set-hook -u -t '\${this.sessionName}' after-split-window\`, { stdio: 'pipe' });
-            execSync(\`tmux set-hook -u -t '\${this.sessionName}' pane-exited\`, { stdio: 'pipe' });
+            execSync(\`tmux set-hook -u -t '\${sessionName}' after-split-window\`, { stdio: 'pipe' });
+            execSync(\`tmux set-hook -u -t '\${sessionName}' pane-exited\`, { stdio: 'pipe' });
             LogService.getInstance().debug('Cleaned up pane hooks', 'Setup');
         }
         catch {
@@ -1447,7 +1592,7 @@ class Dmux {
 })();
 //# sourceMappingURL=index.js.map`,
         mimeType: 'application/javascript',
-        size: 30903
+        size: 40231
     },
     'styles.css': {
         content: `*{margin:0;padding:0;box-sizing:border-box}:root{--bg-gradient-start: #0f0f23;--bg-gradient-mid: #1a1a2e;--bg-gradient-end: #16213e;--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--text-tertiary: #808080;--text-dim: #606060;--text-dimmer: #666;--text-bright: #fff;--border-color: rgba(255, 255, 255, .1);--border-accent: rgba(255, 140, 0, .3);--card-bg: rgba(255, 255, 255, .05);--card-border: rgba(255, 255, 255, .1);--header-bg: rgba(255, 255, 255, .05);--input-bg: rgba(255, 255, 255, .05);--input-border: rgba(255, 255, 255, .12);--input-focus-border: rgba(255, 140, 0, .5);--input-focus-bg: rgba(255, 255, 255, .08);--input-focus-shadow: rgba(255, 140, 0, .1);--button-bg: rgba(200, 210, 230, .15);--button-border: rgba(255, 255, 255, .08);--button-hover-bg: rgba(200, 210, 230, .25);--button-hover-border: rgba(255, 255, 255, .15);--tooltip-bg: rgba(20, 20, 30, .98);--tooltip-border: rgba(255, 255, 255, .15);--hint-bg: rgba(255, 255, 255, .05);--agent-bg: rgba(255, 255, 255, .08);--agent-border: rgba(255, 255, 255, .15);--idle-badge-bg: rgba(255, 255, 255, .08);--idle-badge-border: rgba(255, 255, 255, .1)}[data-theme=light]{--bg-gradient-start: #f0f4f8;--bg-gradient-mid: #e6eef5;--bg-gradient-end: #dce7f0;--text-primary: #1a1a2e;--text-secondary: #4a5568;--text-tertiary: #718096;--text-dim: #a0aec0;--text-dimmer: #cbd5e0;--text-bright: #000;--border-color: rgba(0, 0, 0, .1);--border-accent: rgba(255, 140, 0, .4);--card-bg: rgba(255, 255, 255, .8);--card-border: rgba(0, 0, 0, .08);--header-bg: rgba(255, 255, 255, .9);--input-bg: rgba(255, 255, 255, .6);--input-border: rgba(0, 0, 0, .15);--input-focus-border: rgba(255, 140, 0, .6);--input-focus-bg: rgba(255, 255, 255, .9);--input-focus-shadow: rgba(255, 140, 0, .15);--button-bg: rgba(0, 0, 0, .05);--button-border: rgba(0, 0, 0, .1);--button-hover-bg: rgba(0, 0, 0, .1);--button-hover-border: rgba(0, 0, 0, .2);--tooltip-bg: rgba(255, 255, 255, .98);--tooltip-border: rgba(0, 0, 0, .15);--hint-bg: rgba(0, 0, 0, .03);--agent-bg: rgba(0, 0, 0, .05);--agent-border: rgba(0, 0, 0, .12);--idle-badge-bg: rgba(0, 0, 0, .05);--idle-badge-border: rgba(0, 0, 0, .1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-start) 0%,var(--bg-gradient-mid) 50%,var(--bg-gradient-end) 100%);background-attachment:fixed;color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s ease,color .3s ease}.container{max-width:1400px;margin:0 auto;padding:40px 20px;width:100%;flex:1;display:flex;flex-direction:column;animation:fadeIn .5s ease-out}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;margin-bottom:0;background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--border-accent);animation:slideInFromTop .6s ease-out;gap:16px}.logo{height:24px;width:auto;flex-shrink:0}h1{font-size:18px;font-weight:600;letter-spacing:-.5px;color:var(--text-primary);flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:500px;margin:0 auto}.session-info{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--text-secondary);flex-shrink:0}.theme-toggle{background:transparent;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);flex-shrink:0;width:24px;height:24px}.theme-toggle:hover{color:var(--text-primary);transform:scale(1.1)}.theme-toggle svg{width:20px;height:20px;fill:currentColor}.session-info span{display:flex;align-items:center;gap:6px}.status-indicator{color:#4ade80;font-size:16px;animation:pulse 2s ease-in-out infinite}main{flex:1;padding-top:40px;min-height:0}.panes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:24px;margin-bottom:40px}.pane-card{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:12px;padding:12px;position:relative;animation:fadeIn .5s ease-out backwards;color:inherit;display:block;min-width:0;overflow:hidden}.pane-card:nth-child(1){animation-delay:.1s}.pane-card:nth-child(2){animation-delay:.15s}.pane-card:nth-child(3){animation-delay:.2s}.pane-card:nth-child(4){animation-delay:.25s}.pane-card:nth-child(5){animation-delay:.3s}.pane-card:nth-child(6){animation-delay:.35s}.pane-header{margin-bottom:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative}.pane-header-content{flex:1;display:flex;flex-direction:column;gap:6px}.action-menu-btn{background:transparent;border:none;color:var(--text-tertiary);font-size:20px;padding:4px 8px;cursor:pointer;transition:all .2s ease;line-height:1;flex-shrink:0}.action-menu-btn:hover{color:var(--text-primary);background:var(--button-hover-bg);border-radius:4px}.action-menu-dropdown{position:absolute;top:32px;right:0;background:var(--tooltip-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--tooltip-border);border-radius:8px;padding:4px;z-index:100;min-width:180px;box-shadow:0 8px 24px #0000004d;animation:fadeIn .2s ease-out}.action-menu-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:none;border-radius:4px;color:var(--text-primary);font-size:13px;cursor:pointer;transition:all .15s ease;text-align:left}.action-menu-item:hover:not(:disabled){background:var(--button-hover-bg)}.action-menu-item:disabled{opacity:.5;cursor:not-allowed}.action-icon{font-size:14px;width:16px;text-align:center}.action-label{flex:1}.pane-title-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;width:fit-content}.pane-title-link:hover .pane-title{text-decoration:underline}.pane-title{font-size:20px;font-weight:600;color:var(--text-bright);letter-spacing:-.3px}.pane-arrow{font-size:16px;color:var(--text-secondary);transition:all .2s ease;opacity:.6}.pane-title-link:hover .pane-arrow{color:#ff8c00;transform:translate(2px);opacity:1}.pane-meta{display:flex;align-items:center;gap:12px}.pane-agent{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;background:var(--agent-bg);border:1px solid var(--agent-border);color:var(--text-tertiary);white-space:nowrap}.pane-agent.claude{background:#d9775726;border-color:#d977574d;color:#d97757}.pane-agent.opencode{background:#667eea26;border-color:#667eea4d;color:#667eea}.pane-prompt-section{margin-bottom:12px}.prompt-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);transition:color .2s ease}.pane-prompt-preview{display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:all .2s ease}.pane-prompt-preview:hover .prompt-text{color:var(--text-primary)}.pane-prompt-preview:hover .prompt-label{color:var(--text-secondary)}.prompt-header{display:flex;align-items:center;gap:6px}.prompt-text{color:var(--text-secondary);font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s ease}.pane-prompt-preview.expanded .prompt-text{white-space:normal;display:none}.expand-icon{font-size:10px;color:var(--text-tertiary);transition:transform .2s ease;flex-shrink:0}.pane-prompt-full{color:var(--text-secondary);font-size:13px;margin-top:4px;line-height:1.6;font-family:SF Mono,Monaco,Courier New,monospace;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;max-width:100%}.agent-summary{color:var(--text-secondary);font-size:13px;margin-bottom:12px;padding:10px 12px;line-height:1.5;background:#60a5fa14;border:1px solid rgba(96,165,250,.2);border-radius:6px;font-style:italic}.analyzer-error{color:#ef4444;font-size:13px;margin-bottom:12px;padding:10px 12px;line-height:1.5;background:#ef444414;border:1px solid rgba(239,68,68,.2);border-radius:6px;font-weight:500}.tooltip{position:absolute;background:var(--tooltip-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--tooltip-border);padding:16px;border-radius:12px;z-index:1000;white-space:pre-wrap;max-width:400px;max-height:200px;overflow-y:auto;box-shadow:0 20px 60px #0000004d,0 0 0 1px var(--border-color);font-size:13px;color:var(--text-primary);pointer-events:none;animation:fadeIn .2s ease-out}.pane-status{display:flex;flex-direction:column;gap:10px}.status-item{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:8px 0}.status-label{color:var(--text-tertiary);font-weight:500}.status-value{display:flex;align-items:center;gap:6px}.status-badge{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;transition:all .2s ease}.status-badge.working{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;box-shadow:0 2px 8px #fbbf2466}.status-badge.waiting{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#000;box-shadow:0 2px 8px #60a5fa66}.status-badge.idle{background:var(--idle-badge-bg);color:var(--text-tertiary);border:1px solid var(--idle-badge-border)}.status-badge.running,.status-badge.passed{background:linear-gradient(135deg,#4ade80,#22c55e);color:#000;box-shadow:0 2px 8px #4ade8066}.status-badge.failed{background:linear-gradient(135deg,#f87171,#ef4444);color:#000;box-shadow:0 2px 8px #f8717166}.status-badge.analyzing{background:linear-gradient(135deg,#a78bfa,#8b5cf6);color:#000;box-shadow:0 2px 8px #a78bfa66;animation:pulse 2s ease-in-out infinite}.pane-id{font-family:SF Mono,Monaco,monospace;font-size:10px;color:var(--text-dimmer);font-weight:500;letter-spacing:.2px}.pane-interactive{margin-top:12px}.options-dialog{display:flex;flex-direction:column;gap:12px}.options-question{font-size:14px;font-weight:500;color:var(--text-primary);line-height:1.4}.options-warning{padding:8px 12px;background:#f871711a;border:1px solid rgba(248,113,113,.3);border-radius:6px;color:#fca5a5;font-size:12px;display:flex;align-items:center;gap:6px}.options-buttons{display:flex;flex-wrap:wrap;gap:8px}.option-button{padding:8px 16px;background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#000;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #60a5fa4d}.option-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #60a5fa66}.option-button:active{transform:translateY(0)}.option-button-danger{background:linear-gradient(135deg,#f87171,#ef4444);box-shadow:0 2px 8px #f871714d}.option-button-danger:hover{box-shadow:0 4px 12px #f8717166}.analyzing-state{display:flex;align-items:center;gap:12px;padding:8px 0;color:#a78bfa;font-size:14px;font-weight:500}.loader-spinner{width:20px;height:20px;border:3px solid rgba(167,139,250,.2);border-top-color:#a78bfa;border-radius:50%;animation:spin 1s linear infinite}.prompt-input-wrapper{display:flex;align-items:flex-start;gap:8px;padding:8px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;transition:all .2s ease}.prompt-input-wrapper:focus-within{border-color:var(--input-focus-border);background:var(--input-focus-bg);box-shadow:0 0 0 3px var(--input-focus-shadow)}.queued-message{margin-top:8px;padding:6px 10px;background:#4ade801a;border:1px solid rgba(74,222,128,.3);border-radius:6px;color:#4ade80;font-size:12px;animation:fadeIn .3s ease-out}.prompt-textarea{flex:1;min-height:20px;max-height:150px;padding:0;background:transparent;border:none;color:var(--text-primary);font-family:SF Mono,Monaco,Courier New,monospace;font-size:13px;line-height:1.4;resize:none;overflow-y:auto}.prompt-textarea:focus{outline:none}.prompt-textarea:disabled{opacity:.5;cursor:not-allowed}.prompt-textarea::placeholder{color:var(--text-dimmer)}.send-button{flex-shrink:0;width:28px;height:28px;padding:6px;background:var(--button-bg);color:var(--text-secondary);border:1px solid var(--button-border);border-radius:50%;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.send-button:hover:not(:disabled){background:var(--button-hover-bg);border-color:var(--button-hover-border)}.send-button:active:not(:disabled){transform:scale(.92)}.send-button:disabled{opacity:.3;cursor:not-allowed}.send-button svg{width:100%;height:100%;fill:currentColor}.button-loader{width:14px;height:14px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite}.dev-server-status{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;font-size:12px}.dev-link{color:#ff8c00;text-decoration:none;font-weight:600;transition:color .2s ease}.dev-link:hover{color:orange}.no-panes{text-align:center;padding:100px 20px;color:var(--text-tertiary);animation:fadeIn .6s ease-out}.no-panes p{margin-bottom:16px;font-size:18px;font-weight:500}.hint{font-size:14px;color:var(--text-dim);background:var(--hint-bg);padding:12px 24px;border-radius:12px;display:inline-block;margin-top:8px}footer{padding:12px 0;margin-top:auto;animation:fadeIn .8s ease-out}.footer-info{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);padding:0}.footer-info span{display:flex;align-items:center;gap:8px}@media (max-width: 768px){.container{padding:0 16px 24px}header{padding:12px 18px;gap:8px}.logo{height:20px}h1{font-size:14px;max-width:none}.session-info{font-size:11px;gap:8px}.session-info span:not(.status-indicator){display:none}main{padding-top:24px}.panes-grid{grid-template-columns:1fr;gap:16px}.footer-info{flex-direction:column;gap:6px;font-size:10px}}.term-fg-black{color:#000}.term-fg-red{color:#cd3131}.term-fg-green{color:#0dbc79}.term-fg-yellow{color:#e5e510}.term-fg-blue{color:#2472c8}.term-fg-magenta{color:#bc3fbc}.term-fg-cyan{color:#11a8cd}.term-fg-white{color:#e5e5e5}.term-fg-bright-black{color:#666}.term-fg-bright-red{color:#f14c4c}.term-fg-bright-green{color:#23d18b}.term-fg-bright-yellow{color:#f5f543}.term-fg-bright-blue{color:#3b8eea}.term-fg-bright-magenta{color:#d670d6}.term-fg-bright-cyan{color:#29b8db}.term-fg-bright-white{color:#fff}.term-bg-black{background-color:#000}.term-bg-red{background-color:#cd3131}.term-bg-green{background-color:#0dbc79}.term-bg-yellow{background-color:#e5e510}.term-bg-blue{background-color:#2472c8}.term-bg-magenta{background-color:#bc3fbc}.term-bg-cyan{background-color:#11a8cd}.term-bg-white{background-color:#e5e5e5}.term-bold{font-weight:700}.term-dim{opacity:.7}.term-italic{font-style:italic}.term-underline{text-decoration:underline}.term-strikethrough{text-decoration:line-through}.action-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.action-dialog{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:16px;padding:32px;max-width:540px;width:90%;box-shadow:0 20px 60px #0006;animation:slideInFromTop .3s ease-out}.action-dialog h3{margin:0 0 20px;font-size:24px;font-weight:600;color:var(--text-bright);letter-spacing:-.5px}.action-dialog p,.action-dialog .dialog-message{margin:0 0 20px;color:var(--text-secondary);font-size:14px;line-height:1.5;white-space:pre-wrap;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}.action-dialog label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:10px;letter-spacing:-.2px}.action-dialog textarea{width:100%;padding:14px 16px;background:var(--input-bg);border:2px solid var(--input-border);border-radius:10px;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5;resize:vertical;transition:all .2s ease;margin-bottom:20px}.action-dialog textarea:focus{outline:none;border-color:var(--input-focus-border);background:var(--input-focus-bg);box-shadow:0 0 0 4px var(--input-focus-shadow)}.action-dialog textarea::placeholder{color:var(--text-dim);font-style:italic}.dialog-hint{font-size:13px;color:var(--text-tertiary);margin-bottom:16px;display:flex;align-items:center;gap:6px}.dialog-hint kbd{background:var(--button-bg);border:1px solid var(--button-border);border-radius:4px;padding:2px 6px;font-family:SF Mono,Monaco,monospace;font-size:11px;font-weight:600;color:var(--text-primary);box-shadow:0 1px 2px #0000001a}.dialog-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;color:var(--text-secondary);font-size:15px;font-weight:500}.dialog-loading .loader-spinner{width:24px;height:24px;border:3px solid rgba(96,165,250,.2);border-top-color:#60a5fa;border-radius:50%;animation:spin .8s linear infinite}.dialog-input{width:100%;padding:14px 16px;background:var(--input-bg);border:2px solid var(--input-border);border-radius:10px;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5;transition:all .2s ease;margin-bottom:20px}.dialog-input:focus{outline:none;border-color:var(--input-focus-border);background:var(--input-focus-bg);box-shadow:0 0 0 4px var(--input-focus-shadow)}.dialog-input::placeholder{color:var(--text-dim);font-style:italic}.dialog-buttons{display:flex;gap:12px;justify-content:flex-end}.dialog-btn{padding:12px 24px;border:2px solid var(--button-border);border-radius:10px;background:var(--button-bg);color:var(--text-primary);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}.dialog-btn:hover{background:var(--button-hover-bg);border-color:var(--button-hover-border);transform:translateY(-1px)}.dialog-btn:active{transform:translateY(0)}.dialog-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.dialog-btn-primary{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#000;border-color:transparent;box-shadow:0 2px 8px #60a5fa4d}.dialog-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #60a5fa80}.dialog-btn-primary:active{transform:translateY(-1px);box-shadow:0 4px 12px #60a5fa66}.dialog-btn-primary:disabled{opacity:.6;transform:none;box-shadow:0 2px 8px #60a5fa33}.choice-options{display:flex;flex-direction:column;gap:8px}.choice-option-btn{width:100%;padding:12px 16px;background:var(--button-bg);border:1px solid var(--button-border);border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:4px}.choice-option-btn:hover{background:var(--button-hover-bg);border-color:var(--button-hover-border);transform:translate(4px)}.choice-option-btn.danger{border-color:#f871714d;background:#f871711a}.choice-option-btn.danger:hover{border-color:#f8717180;background:#f8717133}.agent-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}.agent-choice-button{padding:16px 20px;background:var(--button-bg);border:2px solid var(--button-border);border-radius:12px;color:var(--text-primary);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:center;text-transform:capitalize;position:relative;overflow:hidden}.agent-choice-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#60a5fa1a,#3b82f61a);opacity:0;transition:opacity .2s ease}.agent-choice-button:hover{background:var(--button-hover-bg);border-color:var(--input-focus-border);transform:translateY(-2px);box-shadow:0 4px 12px #60a5fa33}.agent-choice-button:hover:before{opacity:1}.agent-choice-button:active{transform:translateY(0)}.agent-choice-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.option-description{font-size:12px;color:var(--text-tertiary);font-weight:400}.terminal-page{display:flex;flex-direction:column;height:100vh;background:#000}.back-button{color:#e0e0e0;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s;white-space:nowrap;flex-shrink:0}.back-button:hover{color:#fff}.terminal-content{flex:1;overflow:auto;padding:10px}.terminal-page .terminal-output{font-family:JetBrains Mono,SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace;line-height:1.2;color:#f0f0f0;margin:0;min-height:100%}.terminal-row{white-space:pre;margin:0;padding:0;line-height:1.2}.mobile-toolbar{display:flex;gap:6px;padding:8px;background:#1a1a1a;border-bottom:1px solid #333;overflow-x:auto;flex-wrap:nowrap}.toolbar-key{background:#2d2d2d;border:1px solid #444;border-radius:4px;color:#e0e0e0;padding:8px 12px;font-size:13px;font-family:SF Mono,Monaco,monospace;cursor:pointer;flex-shrink:0;min-width:44px;transition:all .15s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.toolbar-key:active{background:#3d3d3d;transform:scale(.95)}.toolbar-key.active{background:#667eea;border-color:#667eea;color:#fff}.mobile-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:.01;pointer-events:none}.actions-bar{display:flex;justify-content:flex-end;margin-bottom:20px;padding:0 4px}.create-pane-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#000;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #60a5fa4d}.create-pane-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #60a5fa66}.create-pane-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.create-pane-button svg{width:16px;height:16px;fill:none;stroke-width:2.5}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-out}.modal-dialog{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:16px;width:90%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0006;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-color)}.modal-header h2{font-size:20px;font-weight:600;color:var(--text-primary);margin:0}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:32px;line-height:1;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.modal-close:hover{background:var(--button-hover-bg);color:var(--text-primary)}.modal-body{padding:24px;overflow-y:auto;flex:1}.form-group{margin-bottom:20px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.modal-textarea{width:100%;padding:12px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text-primary);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;resize:vertical;min-height:100px;transition:all .2s ease}.modal-textarea:focus{outline:none;border-color:var(--input-focus-border);background:var(--input-focus-bg);box-shadow:0 0 0 3px var(--input-focus-shadow)}.modal-textarea:disabled{opacity:.5;cursor:not-allowed}.input-hint{font-size:12px;color:var(--text-tertiary);margin-top:6px}.agent-selector{display:flex;gap:12px}.agent-option{flex:1;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--button-bg);border:2px solid var(--button-border);border-radius:8px;color:var(--text-primary);font-size:14px;font-weight:600;text-transform:capitalize;cursor:pointer;transition:all .2s ease}.agent-logo{width:40px;height:40px;flex-shrink:0}.agent-option:hover:not(:disabled){background:var(--button-hover-bg);border-color:var(--button-hover-border)}.agent-option.selected{background:var(--input-focus-bg);border-color:var(--input-focus-border);color:var(--text-bright)}.agent-option:disabled{opacity:.5;cursor:not-allowed}.modal-footer{display:flex;gap:12px;padding:20px 24px;border-top:1px solid var(--border-color);justify-content:flex-end}.modal-button{padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;display:flex;align-items:center;gap:8px}.modal-button-secondary{background:var(--button-bg);color:var(--text-primary);border:1px solid var(--button-border)}.modal-button-secondary:hover:not(:disabled){background:var(--button-hover-bg);border-color:var(--button-hover-border)}.modal-button-primary{background:var(--input-focus-bg);color:var(--text-bright);border:1px solid var(--input-focus-border)}.modal-button-primary:hover:not(:disabled){background:var(--button-hover-bg);border-color:var(--button-hover-border)}.modal-button:disabled{opacity:.5;cursor:not-allowed}.button-loader{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.settings-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--button-bg);color:var(--text-primary);border:1px solid var(--button-border);border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:12px}.settings-button:hover:not(:disabled){background:var(--button-hover-bg);border-color:var(--button-hover-border);transform:translateY(-1px)}.settings-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.settings-button svg{width:16px;height:16px;fill:currentColor}.settings-dialog{max-width:700px}.settings-list{display:flex;flex-direction:column;gap:24px;margin-bottom:24px;max-height:500px;overflow-y:auto}.setting-item{border-bottom:1px solid var(--border-color);padding-bottom:20px}.setting-item:last-child{border-bottom:none;padding-bottom:0}.setting-header{margin-bottom:12px}.setting-info{display:flex;flex-direction:column;gap:4px}.setting-label{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px}.setting-description{font-size:13px;color:var(--text-secondary);line-height:1.5}.setting-control{display:flex;flex-direction:column;gap:12px}.setting-value{font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.setting-value strong{color:var(--text-bright);font-weight:600}.setting-scope{font-size:11px;color:var(--text-tertiary);padding:2px 6px;background:var(--agent-bg);border:1px solid var(--agent-border);border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}.setting-buttons{display:flex;flex-wrap:wrap;gap:8px}.setting-btn{padding:8px 16px;background:var(--button-bg);color:var(--text-primary);border:1px solid var(--button-border);border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.setting-btn:hover:not(:disabled){background:var(--button-hover-bg);border-color:var(--button-hover-border);transform:translateY(-1px)}.setting-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.setting-select-group{padding-left:16px;border-left:2px solid var(--border-color);display:flex;flex-direction:column;gap:8px}.setting-option-label{font-size:13px;color:var(--text-secondary);font-weight:500}.setting-btn-action{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#000;border-color:transparent;box-shadow:0 2px 8px #60a5fa4d}.setting-btn-action:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #60a5fa66}.hooks-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color)}.hooks-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.hooks-header h4{font-size:18px;font-weight:600;color:var(--text-primary);margin:0;flex:1}.back-btn{background:transparent;border:none;color:var(--text-secondary);font-size:14px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;gap:4px}.back-btn:hover{background:var(--button-hover-bg);color:var(--text-primary)}.hooks-list{display:flex;flex-direction:column;gap:12px}.hook-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;transition:all .2s ease}.hook-item:hover{background:var(--input-focus-bg);border-color:var(--input-focus-border)}.hook-name{font-family:SF Mono,Monaco,Courier New,monospace;font-size:13px;color:var(--text-primary);font-weight:500}.hook-status{font-size:12px;font-weight:600;color:var(--text-tertiary);padding:4px 10px;background:var(--idle-badge-bg);border:1px solid var(--idle-badge-border);border-radius:6px;text-transform:uppercase;letter-spacing:.3px}.hook-status.hook-active{background:#4ade801a;border-color:#4ade804d;color:#4ade80}.hooks-actions{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-color);display:flex;justify-content:center}