feat: significant performance optimizations

Author: justin-schroeder

src/DmuxApp.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { Box, Text, useApp, useStdout } from "ink"
+import { Box, Text, useApp, useStdout, useInput } from "ink"
 import { createRequire } from "module"
 import { TmuxService } from "./services/TmuxService.js"
 
@@ -60,6 +60,8 @@ import LoadingIndicator from "./components/indicators/LoadingIndicator.js"
 import RunningIndicator from "./components/indicators/RunningIndicator.js"
 import UpdatingIndicator from "./components/indicators/UpdatingIndicator.js"
 import FooterHelp from "./components/ui/FooterHelp.js"
+import TmuxHooksPromptDialog from "./components/dialogs/TmuxHooksPromptDialog.js"
+import { PaneEventService } from "./services/PaneEventService.js"
 
 const DmuxApp: React.FC<DmuxAppProps> = ({
   panesFile,
@@ -153,6 +155,12 @@ const DmuxApp: React.FC<DmuxAppProps> = ({
   const [toastQueueLength, setToastQueueLength] = useState(0)
   const [toastQueuePosition, setToastQueuePosition] = useState<number | null>(null)
 
+  // Tmux hooks prompt state
+  const [showHooksPrompt, setShowHooksPrompt] = useState(false)
+  const [hooksPromptIndex, setHooksPromptIndex] = useState(0)
+  // undefined = not yet determined, true = use hooks, false = use polling
+  const [useHooks, setUseHooks] = useState<boolean | undefined>(undefined)
+
   // Subscribe to StateManager for unread error/warning count and toast updates
   useEffect(() => {
     const stateManager = StateManager.getInstance()
@@ -178,11 +186,46 @@ const DmuxApp: React.FC<DmuxAppProps> = ({
   }, [])
 
   // Panes state and persistence (skipLoading will be updated after actionSystem is initialized)
-  const { panes, setPanes, isLoading, loadPanes, savePanes } = usePanes(
+  const { panes, setPanes, isLoading, loadPanes, savePanes, eventMode } = usePanes(
     panesFile,
-    false
+    false,
+    sessionName,
+    controlPaneId,
+    useHooks
   )
 
+  // Check for tmux hooks preference on startup
+  useEffect(() => {
+    const checkHooksPreference = async () => {
+      // Check if user already has a preference
+      const settings = settingsManager.getSettings()
+
+      if (settings.useTmuxHooks !== undefined) {
+        // User has already decided
+        setUseHooks(settings.useTmuxHooks)
+        return
+      }
+
+      // Check if hooks are already installed (from previous session)
+      const paneEventService = PaneEventService.getInstance()
+      paneEventService.initialize({ sessionName, controlPaneId })
+
+      const hooksInstalled = await paneEventService.canUseHooks()
+
+      if (hooksInstalled) {
+        // Hooks already installed, use them automatically
+        setUseHooks(true)
+        // Save the preference
+        settingsManager.updateSetting('useTmuxHooks', true, 'global')
+      } else {
+        // Need to ask user - show prompt
+        setShowHooksPrompt(true)
+      }
+    }
+
+    checkHooksPreference()
+  }, [sessionName, controlPaneId, settingsManager])
+
   // Pane lifecycle manager - handles locking to prevent race conditions
   // Replaces the old timeout-based intentionallyClosedPanes Set
   const lifecycleManager = React.useMemo(() => PaneLifecycleManager.getInstance(), [])
@@ -725,6 +768,36 @@ const DmuxApp: React.FC<DmuxAppProps> = ({
     }, 100)
   }
 
+  // Handle tmux hooks prompt input
+  useInput(
+    (input, key) => {
+      if (!showHooksPrompt) return
+
+      if (key.upArrow || input === 'k') {
+        setHooksPromptIndex(Math.max(0, hooksPromptIndex - 1))
+      } else if (key.downArrow || input === 'j') {
+        setHooksPromptIndex(Math.min(1, hooksPromptIndex + 1))
+      } else if (input === 'y') {
+        // Yes - install hooks
+        setShowHooksPrompt(false)
+        setUseHooks(true)
+        settingsManager.updateSetting('useTmuxHooks', true, 'global')
+      } else if (input === 'n') {
+        // No - use polling
+        setShowHooksPrompt(false)
+        setUseHooks(false)
+        settingsManager.updateSetting('useTmuxHooks', false, 'global')
+      } else if (key.return) {
+        // Select current option
+        setShowHooksPrompt(false)
+        const selected = hooksPromptIndex === 0
+        setUseHooks(selected)
+        settingsManager.updateSetting('useTmuxHooks', selected, 'global')
+      }
+    },
+    { isActive: showHooksPrompt }
+  )
+
   // Input handling - extracted to dedicated hook
   useInputHandling({
     panes,
@@ -735,7 +808,7 @@ const DmuxApp: React.FC<DmuxAppProps> = ({
     runningCommand,
     isUpdating,
     isLoading,
-    ignoreInput,
+    ignoreInput: ignoreInput || showHooksPrompt, // Block other input when hooks prompt is shown
     quitConfirmMode,
     setQuitConfirmMode,
     showCommandPrompt,
@@ -854,6 +927,11 @@ const DmuxApp: React.FC<DmuxAppProps> = ({
         {runningCommand && <RunningIndicator />}
 
         {isUpdating && <UpdatingIndicator />}
+
+        {/* Tmux hooks prompt - shown on first startup */}
+        {showHooksPrompt && (
+          <TmuxHooksPromptDialog selectedIndex={hooksPromptIndex} />
+        )}
       </Box>
 
       {/* Status messages - only render when present */}

src/components/dialogs/TmuxHooksPromptDialog.tsx

@@ -0,0 +1,73 @@
+/**
+ * Tmux Hooks Prompt Dialog
+ *
+ * Shown on first startup to ask user if they want to install tmux hooks
+ * for event-driven pane updates (lower CPU) vs polling fallback.
+ */
+
+import React, { memo } from 'react';
+import { Box, Text } from 'ink';
+
+interface TmuxHooksPromptDialogProps {
+  selectedIndex: number;
+}
+
+const TmuxHooksPromptDialog: React.FC<TmuxHooksPromptDialogProps> = memo(({
+  selectedIndex
+}) => {
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={1}
+      marginTop={1}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="cyan">Performance Optimization</Text>
+      </Box>
+
+      <Box marginBottom={1} flexDirection="column">
+        <Text>dmux can install tmux hooks to detect pane changes instantly.</Text>
+        <Text>This uses less CPU than polling and improves responsiveness.</Text>
+        <Text dimColor>
+          {'\n'}The hooks send signals to dmux when panes are created, closed, or resized.
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {/* Yes option - install hooks */}
+        <Box>
+          {selectedIndex === 0 ? (
+            <Text color="green" bold inverse>
+              {'► '}Yes, install hooks (recommended){' '}
+            </Text>
+          ) : (
+            <Text>
+              {'  '}Yes, install hooks (recommended)
+            </Text>
+          )}
+        </Box>
+
+        {/* No option - use polling */}
+        <Box>
+          {selectedIndex === 1 ? (
+            <Text color="yellow" bold inverse>
+              {'► '}No, use polling instead{' '}
+            </Text>
+          ) : (
+            <Text>
+              {'  '}No, use polling instead
+            </Text>
+          )}
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text dimColor>↑/↓ to navigate • Enter to select • y/n shortcuts</Text>
+      </Box>
+    </Box>
+  );
+});
+
+export default TmuxHooksPromptDialog;

src/components/panes/PaneCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Box, Text } from 'ink';
 import type { DmuxPane } from '../../types.js';
 import { COLORS } from '../../theme/colors.js';
@@ -11,7 +11,7 @@ interface PaneCardProps {
   isNextSelected: boolean;
 }
 
-const PaneCard: React.FC<PaneCardProps> = ({ pane, selected, isFirstPane, isLastPane, isNextSelected }) => {
+const PaneCard: React.FC<PaneCardProps> = memo(({ pane, selected, isFirstPane, isLastPane, isNextSelected }) => {
   // Get status indicator
   const getStatusIcon = () => {
     if (pane.agentStatus === 'working') return { icon: '✻', color: COLORS.working };
@@ -64,6 +64,23 @@ const PaneCard: React.FC<PaneCardProps> = ({ pane, selected, isFirstPane, isLast
       </Box>
     </Box>
   );
-};
+}, (prevProps, nextProps) => {
+  // Custom comparison for memoization - only re-render if relevant props changed
+  return (
+    prevProps.pane.id === nextProps.pane.id &&
+    prevProps.pane.slug === nextProps.pane.slug &&
+    prevProps.pane.agentStatus === nextProps.pane.agentStatus &&
+    prevProps.pane.testStatus === nextProps.pane.testStatus &&
+    prevProps.pane.devStatus === nextProps.pane.devStatus &&
+    prevProps.pane.autopilot === nextProps.pane.autopilot &&
+    prevProps.pane.type === nextProps.pane.type &&
+    prevProps.pane.shellType === nextProps.pane.shellType &&
+    prevProps.pane.agent === nextProps.pane.agent &&
+    prevProps.selected === nextProps.selected &&
+    prevProps.isFirstPane === nextProps.isFirstPane &&
+    prevProps.isLastPane === nextProps.isLastPane &&
+    prevProps.isNextSelected === nextProps.isNextSelected
+  );
+});
 
 export default PaneCard;

src/components/panes/PanesGrid.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { memo, useMemo } from "react"
 import { Box, Text } from "ink"
 import type { DmuxPane } from "../../types.js"
 import type { AgentStatusMap } from "../../hooks/useAgentStatus.js"
@@ -12,7 +12,7 @@ interface PanesGridProps {
   agentStatuses?: AgentStatusMap
 }
 
-const PanesGrid: React.FC<PanesGridProps> = ({
+const PanesGrid: React.FC<PanesGridProps> = memo(({
   panes,
   selectedIndex,
   isLoading,
@@ -109,6 +109,6 @@ const PanesGrid: React.FC<PanesGridProps> = ({
       )}
     </Box>
   )
-}
+})
 
 export default PanesGrid

src/components/ui/FooterHelp.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Box, Text } from 'ink';
 import type { Toast } from '../../services/ToastService.js';
 import ToastNotification from './ToastNotification.js';
@@ -22,7 +22,7 @@ interface FooterHelpProps {
   toastQueuePosition?: number | null;
 }
 
-const FooterHelp: React.FC<FooterHelpProps> = ({
+const FooterHelp: React.FC<FooterHelpProps> = memo(({
   show,
   gridInfo,
   showRemoteKey = false,
@@ -190,6 +190,6 @@ const FooterHelp: React.FC<FooterHelpProps> = ({
       )}
     </Box>
   );
-};
+});
 
 export default FooterHelp;