@brimveyn/aimux 1.13.0 → 1.14.0

package/src/ui/components/layout/split-layout.tsx

@@ -1,5 +1,7 @@
 import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
+import { useCallback, useMemo } from 'react'
+
 import type { MeasuredPaneRect } from '../../../app-runtime/use-pane-size-report'
 import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
 import type { FocusMode, TabSession } from '../../../state/types'
@@ -68,15 +70,34 @@ export function SplitLayout({
   tabs,
 }: SplitLayoutProps) {
   const t = useTheme()
-  if (node.type === 'leaf') {
-    const tab = tabs.find((t) => t.id === node.tabId)
-    const isActive = node.tabId === activeTabId
-    const paneOrigin: TerminalContentOrigin = {
+  const paneOrigin = useMemo<TerminalContentOrigin>(
+    () => ({
       cols: Math.max(1, bounds.cols - PANE_CHROME * 2),
       rows: Math.max(1, bounds.rows - PANE_CHROME * 2),
       x: contentOrigin.x + bounds.x + PANE_CHROME,
       y: contentOrigin.y + bounds.y + PANE_CHROME,
-    }
+    }),
+    [bounds, contentOrigin]
+  )
+  const handleSeparatorMouseDown = useCallback(
+    (e: OtuiMouseEvent) => {
+      e.preventDefault()
+      if (node.type !== 'split' || !onSeparatorDragStart) return
+      const leafId = getFirstLeafId(node.first)
+      if (!(leafId != null && leafId !== '')) return
+      onSeparatorDragStart({
+        direction: node.direction,
+        screenStart:
+          node.direction === 'vertical' ? contentOrigin.x + bounds.x : contentOrigin.y + bounds.y,
+        tabId: leafId,
+        totalSize: node.direction === 'vertical' ? bounds.cols : bounds.rows,
+      })
+    },
+    [bounds, contentOrigin, node, onSeparatorDragStart]
+  )
+  if (node.type === 'leaf') {
+    const tab = tabs.find((t) => t.id === node.tabId)
+    const isActive = node.tabId === activeTabId
     logInputDebug('split.paneOrigin', {
       boundsCols: bounds.cols,
       boundsRows: bounds.rows,
@@ -157,21 +178,7 @@ export function SplitLayout({
         minWidth={node.direction === 'vertical' ? 1 : undefined}
         minHeight={node.direction === 'horizontal' ? 1 : undefined}
         backgroundColor={t.border}
-        onMouseDown={(e: OtuiMouseEvent) => {
-          e.preventDefault()
-          if (!onSeparatorDragStart) return
-          const leafId = getFirstLeafId(node.first)
-          if (!(leafId != null && leafId !== '')) return
-          onSeparatorDragStart({
-            direction: node.direction,
-            screenStart:
-              node.direction === 'vertical'
-                ? contentOrigin.x + bounds.x
-                : contentOrigin.y + bounds.y,
-            tabId: leafId,
-            totalSize: node.direction === 'vertical' ? bounds.cols : bounds.rows,
-          })
-        }}
+        onMouseDown={handleSeparatorMouseDown}
       />
       <box flexGrow={secondGrow} flexDirection="column" overflow="hidden">
         <SplitLayout

package/src/ui/components/layout/terminal-pane.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
-import { memo, type ReactNode } from 'react'
+import { memo, type ReactNode, useCallback, useMemo } from 'react'
 
 import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
 import type { FocusMode, TabSession, TerminalSnapshot, TerminalSpan } from '../../../state/types'
@@ -95,6 +95,8 @@ const TerminalViewport = memo(function TerminalViewport({
     return (
       <text fg={t.text}>
         {lines.map((line, lineIndex) => (
+          // Terminal rows are a fixed positional grid; the row index is the identity.
+          // eslint-disable-next-line react/no-array-index-key
           <span key={`line-${lineIndex}`}>
             {line.spans.map((span, spanIndex) => renderSpan(span, `s-${spanIndex}`))}
             {lineIndex < lines.length - 1 ? '\n' : ''}
@@ -132,125 +134,169 @@ export function TerminalPane({
   const paneIsActive = isActive ?? true
   const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
   const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
-  const rightClickMenu: ContextMenuItem[] | undefined =
-    tabId != null && tabId !== ''
-      ? [
-          [
-            'Split vertically',
-            () =>
-              runSideEffectGlobal({
-                direction: 'vertical',
-                sourceTabId: tabId,
-                type: 'split-pane',
-              }),
-          ],
-          [
-            'Split horizontally',
-            () =>
-              runSideEffectGlobal({
-                direction: 'horizontal',
-                sourceTabId: tabId,
-                type: 'split-pane',
-              }),
-          ],
-          [
-            'Close pane',
-            () => {
-              dispatchGlobal({ tabId, type: 'close-pane' })
-              runSideEffectGlobal({ tabId, type: 'close-tab' })
-            },
-          ],
-        ]
-      : undefined
-  const isOnPaneBorder = (event: OtuiMouseEvent) =>
-    event.x === contentOrigin.x - 1 ||
-    event.x === contentOrigin.x + contentOrigin.cols ||
-    event.y === contentOrigin.y - 1 ||
-    event.y === contentOrigin.y + contentOrigin.rows
-  const forwardMouseEvent = (event: OtuiMouseEvent) => {
-    if (event.type === 'down' && event.button === 2 && rightClickMenu) {
-      event.preventDefault()
-      event.stopPropagation()
-      openContextMenu(event.x, event.y, rightClickMenu)
-      return
-    }
-    if (
-      event.type === 'down' &&
-      event.button === 0 &&
-      onLeftEdgeMouseDown &&
-      event.x === contentOrigin.x - 1
-    ) {
-      if (onLeftEdgeMouseDown(event)) {
+  const rightClickMenu = useMemo<ContextMenuItem[] | undefined>(
+    () =>
+      tabId != null && tabId !== ''
+        ? [
+            [
+              'Split vertically',
+              () =>
+                runSideEffectGlobal({
+                  direction: 'vertical',
+                  sourceTabId: tabId,
+                  type: 'split-pane',
+                }),
+            ],
+            [
+              'Split horizontally',
+              () =>
+                runSideEffectGlobal({
+                  direction: 'horizontal',
+                  sourceTabId: tabId,
+                  type: 'split-pane',
+                }),
+            ],
+            [
+              'Close pane',
+              () => {
+                dispatchGlobal({ tabId, type: 'close-pane' })
+                runSideEffectGlobal({ tabId, type: 'close-tab' })
+              },
+            ],
+          ]
+        : undefined,
+    [tabId]
+  )
+  const isOnPaneBorder = useCallback(
+    (event: OtuiMouseEvent) =>
+      event.x === contentOrigin.x - 1 ||
+      event.x === contentOrigin.x + contentOrigin.cols ||
+      event.y === contentOrigin.y - 1 ||
+      event.y === contentOrigin.y + contentOrigin.rows,
+    [contentOrigin]
+  )
+  const forwardMouseEvent = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (event.type === 'down' && event.button === 2 && rightClickMenu) {
         event.preventDefault()
         event.stopPropagation()
+        openContextMenu(event.x, event.y, rightClickMenu)
         return
       }
-    }
-    // Absorb left-button clicks on pane borders — they should not focus the
-    // pane or be forwarded to the terminal. This keeps borders available for
-    // resize actions (split separators, sidebar edge) without conflicting
-    // with focus-on-click behavior in the content area.
-    if (event.type === 'down' && event.button === 0 && isOnPaneBorder(event)) {
-      event.preventDefault()
-      event.stopPropagation()
-      return
-    }
-    if (event.type === 'down') {
-      logInputDebug('pane.mouseDown', {
-        button: event.button,
-        canForward: canForwardMouse,
-        eventType: event.type,
-        tabId,
-        willClick: !canForwardMouse && !!tab && event.button === 0 && !!onTerminalClick,
-        x: event.x,
-        y: event.y,
-      })
-    }
-    if (event.type === 'drag') {
-      if (onTerminalDrag?.(event, contentOrigin, tabId) === true) {
-        event.preventDefault()
-        return
+      if (
+        event.type === 'down' &&
+        event.button === 0 &&
+        onLeftEdgeMouseDown &&
+        event.x === contentOrigin.x - 1
+      ) {
+        if (onLeftEdgeMouseDown(event)) {
+          event.preventDefault()
+          event.stopPropagation()
+          return
+        }
       }
-      if (onSeparatorDrag?.(event) === true) {
+      // Absorb left-button clicks on pane borders — they should not focus the
+      // pane or be forwarded to the terminal. This keeps borders available for
+      // resize actions (split separators, sidebar edge) without conflicting
+      // with focus-on-click behavior in the content area.
+      if (event.type === 'down' && event.button === 0 && isOnPaneBorder(event)) {
         event.preventDefault()
+        event.stopPropagation()
         return
       }
-    }
-    if (event.type === 'up') {
-      if (onTerminalMouseUp?.(event) === true) {
-        event.preventDefault()
+      if (event.type === 'down') {
+        logInputDebug('pane.mouseDown', {
+          button: event.button,
+          canForward: canForwardMouse,
+          eventType: event.type,
+          tabId,
+          willClick: !canForwardMouse && !!tab && event.button === 0 && !!onTerminalClick,
+          x: event.x,
+          y: event.y,
+        })
+      }
+      if (event.type === 'drag') {
+        if (onTerminalDrag?.(event, contentOrigin, tabId) === true) {
+          event.preventDefault()
+          return
+        }
+        if (onSeparatorDrag?.(event) === true) {
+          event.preventDefault()
+          return
+        }
+      }
+      if (event.type === 'up') {
+        if (onTerminalMouseUp?.(event) === true) {
+          event.preventDefault()
+        }
+        onSeparatorDragEnd?.()
       }
-      onSeparatorDragEnd?.()
-    }
-    if (tabId != null && tabId !== '' && onPaneActivate && event.type === 'down') {
-      onPaneActivate(tabId)
-    }
-    if (!canForwardMouse) {
-      if (tab && event.type === 'down' && event.button === 0 && onTerminalClick) {
-        onTerminalClick(event, contentOrigin, tabId)
+      if (tabId != null && tabId !== '' && onPaneActivate && event.type === 'down') {
+        onPaneActivate(tabId)
+      }
+      if (!canForwardMouse) {
+        if (tab && event.type === 'down' && event.button === 0 && onTerminalClick) {
+          onTerminalClick(event, contentOrigin, tabId)
+        }
+        return
       }
-      return
-    }
 
-    event.preventDefault()
-    event.stopPropagation()
-    onTerminalMouseEvent(event, contentOrigin)
-  }
-  const forwardScrollEvent = (event: OtuiMouseEvent) => {
-    if (!canForwardMouse && !canUseLocalScrollback) {
-      return
-    }
+      event.preventDefault()
+      event.stopPropagation()
+      onTerminalMouseEvent(event, contentOrigin)
+    },
+    [
+      canForwardMouse,
+      contentOrigin,
+      isOnPaneBorder,
+      onLeftEdgeMouseDown,
+      onPaneActivate,
+      onSeparatorDrag,
+      onSeparatorDragEnd,
+      onTerminalClick,
+      onTerminalDrag,
+      onTerminalMouseEvent,
+      onTerminalMouseUp,
+      rightClickMenu,
+      tab,
+      tabId,
+    ]
+  )
+  const forwardScrollEvent = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (!canForwardMouse && !canUseLocalScrollback) {
+        return
+      }
 
-    event.preventDefault()
-    event.stopPropagation()
+      event.preventDefault()
+      event.stopPropagation()
 
-    if (canForwardMouse) {
-      onTerminalMouseEvent(event, contentOrigin)
-      return
-    }
+      if (canForwardMouse) {
+        onTerminalMouseEvent(event, contentOrigin)
+        return
+      }
 
-    onTerminalScrollEvent(event)
-  }
+      onTerminalScrollEvent(event)
+    },
+    [
+      canForwardMouse,
+      canUseLocalScrollback,
+      contentOrigin,
+      onTerminalMouseEvent,
+      onTerminalScrollEvent,
+    ]
+  )
+  const handleNoTabMouseDown = useCallback((event: OtuiMouseEvent) => {
+    event.stopPropagation()
+    dispatchGlobal({ type: 'open-new-tab-modal' })
+  }, [])
+  const handleContentMouseDown = useCallback(
+    (e: OtuiMouseEvent) => {
+      e.stopPropagation()
+      forwardMouseEvent(e)
+    },
+    [forwardMouseEvent]
+  )
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
       <ContextMenuBox
@@ -282,10 +328,7 @@ export function TerminalPane({
               marginTop={1}
               paddingX={2}
               backgroundColor={t.backgroundPanel}
-              onMouseDown={(event) => {
-                event.stopPropagation()
-                dispatchGlobal({ type: 'open-new-tab-modal' })
-              }}
+              onMouseDown={handleNoTabMouseDown}
             >
               <text fg={t.text}>New assistant</text>
             </box>
@@ -297,10 +340,7 @@ export function TerminalPane({
             flexGrow={1}
             width="100%"
             overflow="hidden"
-            onMouseDown={(e) => {
-              e.stopPropagation()
-              forwardMouseEvent(e)
-            }}
+            onMouseDown={handleContentMouseDown}
             onMouseUp={forwardMouseEvent}
             onMouseDrag={forwardMouseEvent}
             onMouseScroll={forwardScrollEvent}

package/src/ui/components/modals/app/help-modal.tsx

@@ -1,6 +1,6 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 
-import { useLayoutEffect, useMemo } from 'react'
+import { useCallback, useLayoutEffect, useMemo } from 'react'
 
 import { collectHelpEntries, HELP_MODE_LABELS } from '../../../../input/keymap/help-entries'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
@@ -48,22 +48,29 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
     dispatchGlobal({ count: filtered.length, type: 'set-help-entry-count' })
   }, [filtered.length])
 
-  const items: PickerItem[] = filtered.map((entry, index) => {
-    return {
-      group: entry.modeLabel,
-      key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
-      title: (
-        <text fg={t.textMuted} wrapMode="none">
-          {entry.description ?? ''}
-        </text>
-      ),
-      trailing: (
-        <text fg={t.textMuted} wrapMode="none">
-          {entry.keysDisplay}
-        </text>
-      ),
-    }
-  })
+  const items = useMemo<PickerItem[]>(
+    () =>
+      filtered.map((entry, index) => ({
+        group: entry.modeLabel,
+        key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
+        title: (
+          <text fg={t.textMuted} wrapMode="none">
+            {entry.description ?? ''}
+          </text>
+        ),
+        trailing: (
+          <text fg={t.textMuted} wrapMode="none">
+            {entry.keysDisplay}
+          </text>
+        ),
+      })),
+    [filtered, t]
+  )
+
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
 
   return (
     <Picker
@@ -79,7 +86,7 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
           {filter != null && filter !== '' ? 'No matching bindings.' : 'No bindings registered.'}
         </text>
       }
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      onHover={handleHover}
     />
   )
 }

package/src/ui/components/modals/git/git-commit-modal.tsx

@@ -1,5 +1,7 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
 import { isAutoCommitEnabled } from '@brimveyn/aimux-config'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import type { ModeId } from '../../../../input/modes/types'
 
@@ -99,7 +101,7 @@ export function GitCommitModal({
     (s) => s.gitPanel.files.filter((f) => f.section === 'staged').length
   )
 
-  const onAutoCommitClick = (): void => {
+  const onAutoCommitClick = useCallback((): void => {
     const hasTitle = title.trim().length > 0
     if (hasTitle || !(currentSessionId != null && currentSessionId !== '')) {
       dispatchGlobal({ type: 'git-commit-enter-confirm' })
@@ -113,7 +115,16 @@ export function GitCommitModal({
     if (bgKind !== 'generating') {
       runSideEffectGlobal({ sessionId: currentSessionId, type: 'generate-auto-commit-now' })
     }
-  }
+  }, [bgKind, currentSessionId, title])
+
+  const handleAutoCommitMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onAutoCommitClick()
+    },
+    [onAutoCommitClick]
+  )
 
   const modeId = pickModeId(stage)
   const shellTitle = pickShellTitle(stage)
@@ -169,11 +180,7 @@ export function GitCommitModal({
             flexDirection="row"
             gap={1}
             alignItems="center"
-            onMouseDown={(event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              onAutoCommitClick()
-            }}
+            onMouseDown={handleAutoCommitMouseDown}
           >
             {showBgSpinner ? <text fg={t.primary}>{bgSpinnerFrame}</text> : null}
             <text fg={t.text}>

package/src/ui/components/modals/sessions/create-session-modal.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import type { DirectoryResult } from '../../../../state/types'
 
 import { abbreviatePath } from '../../../path-format'
@@ -41,15 +43,17 @@ export function CreateSessionModal({
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
 
-  const items: FormOptionItem[] = results.map((result) => {
-    return {
-      key: result.path,
-      leading: <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>,
-      title: (active) => (
-        <text fg={active ? t.text : t.textMuted}>{abbreviatePath(result.path)}</text>
-      ),
-    }
-  })
+  const items = useMemo<FormOptionItem[]>(
+    () =>
+      results.map((result) => ({
+        key: result.path,
+        leading: <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>,
+        title: (active) => (
+          <text fg={active ? t.text : t.textMuted}>{abbreviatePath(result.path)}</text>
+        ),
+      })),
+    [results, t]
+  )
 
   return (
     <Form

package/src/ui/components/modals/sessions/session-picker-modal.tsx

@@ -1,3 +1,5 @@
+import { useCallback, useMemo } from 'react'
+
 import type { SessionRecord } from '../../../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
@@ -44,41 +46,46 @@ export function SessionPickerModal({
   sessions,
 }: SessionPickerModalProps) {
   const t = useTheme()
-  const ordered = orderSessionsForDisplay(sessions)
-  const baselineOrder = ordered.map((s) => s.id)
-  const filtered = filterSessions(ordered, filter)
+  const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
+  const filtered = useMemo(() => filterSessions(ordered, filter), [filter, ordered])
   const hasFilter = !!(filter != null && filter !== '')
 
-  const sessionItems: PickerItem[] = filtered.map((session, index) => {
-    const active = index === selectedIndex
-    const displayIndex = baselineOrder.indexOf(session.id) + 1
-    return {
-      key: session.id,
+  const items = useMemo<PickerItem[]>(() => {
+    const baselineOrder = ordered.map((s) => s.id)
+    const sessionItems: PickerItem[] = filtered.map((session, index) => {
+      const active = index === selectedIndex
+      const displayIndex = baselineOrder.indexOf(session.id) + 1
+      return {
+        key: session.id,
+        onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
+        onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
+        subtitle:
+          session.projectPath != null && session.projectPath !== '' ? (
+            <text fg={t.textMuted}>{abbreviatePath(session.projectPath)}</text>
+          ) : undefined,
+        title: (
+          <text fg={active ? t.text : t.textMuted}>
+            {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
+          </text>
+        ),
+      }
+    })
+    const createNewItem: PickerItem = {
+      key: '__create-new__',
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
-      onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
-      subtitle:
-        session.projectPath != null && session.projectPath !== '' ? (
-          <text fg={t.textMuted}>{abbreviatePath(session.projectPath)}</text>
-        ) : undefined,
       title: (
-        <text fg={active ? t.text : t.textMuted}>
-          {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
+        <text fg={selectedIndex === filtered.length ? t.text : t.textMuted}>
+          Create new workspace
         </text>
       ),
     }
-  })
+    return [...sessionItems, createNewItem]
+  }, [currentSessionId, currentTabCount, filtered, ordered, selectedIndex, t])
 
-  const createNewItem: PickerItem = {
-    key: '__create-new__',
-    onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
-    title: (
-      <text fg={selectedIndex === filtered.length ? t.text : t.textMuted}>
-        Create new workspace
-      </text>
-    ),
-  }
-
-  const items = [...sessionItems, createNewItem]
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
 
   return (
     <Picker
@@ -95,7 +102,7 @@ export function SessionPickerModal({
           <text fg={t.textMuted}>{getEmptyStateMessage(hasFilter)}</text>
         ) : undefined
       }
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      onHover={handleHover}
     />
   )
 }

package/src/ui/components/modals/shared/form.tsx

@@ -147,12 +147,13 @@ export function AutoComplete({
               return (
                 <ListItem
                   key={item.key}
+                  index={optionIndex}
                   active={optionActive}
                   leading={resolveItemContent(item.leading, optionActive)}
                   title={resolveItemContent(item.title, optionActive)}
                   subtitle={resolveItemContent(item.subtitle, optionActive)}
                   trailing={resolveItemContent(item.trailing, optionActive)}
-                  onHover={onHover ? () => onHover(optionIndex) : undefined}
+                  onHoverIndex={onHover}
                   onClick={item.onClick}
                 />
               )