@brimveyn/aimux 1.13.0 → 1.13.2

package/src/ui/components/overlays/context-menu/context-menu-overlay.tsx

@@ -1,5 +1,7 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
 import { useKeyboard } from '@opentui/react'
-import { useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 
 import { useAppStore } from '../../../../state/app-store'
 import {
@@ -9,6 +11,50 @@ import {
 } from '../../../context-menu/controller'
 import { useTheme } from '../../../theme'
 
+const MenuItem = memo(function MenuItem({
+  active,
+  index,
+  label,
+  onHover,
+  onSelect,
+  width,
+}: {
+  active: boolean
+  index: number
+  label: string
+  onHover: (index: number) => void
+  onSelect: () => void
+  width: number
+}) {
+  const t = useTheme()
+  const handleMouseOver = useCallback(() => onHover(index), [index, onHover])
+  const handleMouseDown = useCallback(
+    (e: OtuiMouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (e.button !== 0) return
+      closeContextMenu()
+      onSelect()
+    },
+    [onSelect]
+  )
+  return (
+    <box
+      width={width - 2}
+      flexShrink={0}
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={active ? t.backgroundElement : undefined}
+      onMouseOver={handleMouseOver}
+      onMouseDown={handleMouseDown}
+    >
+      <text fg={active ? t.text : t.textMuted} selectable={false}>
+        {label}
+      </text>
+    </box>
+  )
+})
+
 export function ContextMenuOverlay() {
   const [menu, setMenu] = useState<ContextMenuState | null>(null)
   const [selected, setSelected] = useState(0)
@@ -48,6 +94,15 @@ export function ContextMenuOverlay() {
     }
   })
 
+  const handleBackdropMouseDown = useCallback((e: OtuiMouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    closeContextMenu()
+  }, [])
+  const handleMenuMouseDown = useCallback((e: OtuiMouseEvent) => {
+    e.stopPropagation()
+  }, [])
+
   if (!menu) return null
 
   const maxLabel = Math.max(...menu.items.map(([label]) => label.length))
@@ -66,11 +121,7 @@ export function ContextMenuOverlay() {
         left={0}
         width="100%"
         height="100%"
-        onMouseDown={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          closeContextMenu()
-        }}
+        onMouseDown={handleBackdropMouseDown}
       />
       <box
         position="absolute"
@@ -81,35 +132,19 @@ export function ContextMenuOverlay() {
         border
         borderColor={t.border}
         backgroundColor={t.backgroundPanel}
-        onMouseDown={(e) => {
-          e.stopPropagation()
-        }}
+        onMouseDown={handleMenuMouseDown}
       >
-        {menu.items.map(([label, onSelect], index) => {
-          const active = index === selected
-          return (
-            <box
-              key={`${label}-${index}`}
-              width={width - 2}
-              flexShrink={0}
-              paddingLeft={1}
-              paddingRight={1}
-              backgroundColor={active ? t.backgroundElement : undefined}
-              onMouseOver={() => setSelected(index)}
-              onMouseDown={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                if (e.button !== 0) return
-                closeContextMenu()
-                onSelect()
-              }}
-            >
-              <text fg={active ? t.text : t.textMuted} selectable={false}>
-                {label}
-              </text>
-            </box>
-          )
-        })}
+        {menu.items.map(([label, onSelect], index) => (
+          <MenuItem
+            key={label}
+            index={index}
+            label={label}
+            onHover={setSelected}
+            onSelect={onSelect}
+            active={index === selected}
+            width={width}
+          />
+        ))}
       </box>
     </box>
   )

package/src/ui/components/primitives/list-item.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { memo, type ReactNode, useMemo } from 'react'
 
 import { useTheme } from '../../theme'
 import { Surface } from './surface'
@@ -9,27 +9,43 @@ interface ListItemProps {
   active: boolean
   direction?: ListItemDirection
   id?: string
+  index?: number
   leading?: ReactNode
   subtitle?: ReactNode
   title: ReactNode
   trailing?: ReactNode
   onHover?: () => void
   onClick?: () => void
+  onHoverIndex?: (index: number) => void
+  onClickIndex?: (index: number) => void
 }
 
-export function ListItem({
+export const ListItem = memo(function ListItem({
   active,
   direction = 'column',
   id,
+  index,
   leading,
   onClick,
+  onClickIndex,
   onHover,
+  onHoverIndex,
   subtitle,
   title,
   trailing,
 }: ListItemProps) {
   const t = useTheme()
   const isRow = direction === 'row'
+  // Build per-item handlers from the stable index-based callbacks so callers can
+  // avoid creating fresh closures inside their list `.map()`.
+  const handleHover = useMemo<(() => void) | undefined>(() => {
+    if (onHoverIndex && index !== undefined) return () => onHoverIndex(index)
+    return onHover
+  }, [index, onHover, onHoverIndex])
+  const handleClick = useMemo<(() => void) | undefined>(() => {
+    if (onClickIndex && index !== undefined) return () => onClickIndex(index)
+    return onClick
+  }, [index, onClick, onClickIndex])
   const inner = (
     <box flexDirection="column">
       <box flexDirection="row">
@@ -48,7 +64,7 @@ export function ListItem({
     </box>
   )
   return (
-    <box id={id} onMouseOver={onHover} onMouseDown={onClick}>
+    <box id={id} onMouseOver={handleHover} onMouseDown={handleClick}>
       {active ? (
         <Surface tone="selected" paddingLeft={isRow ? 2 : 1} paddingRight={isRow ? 2 : 1}>
           {inner}
@@ -60,4 +76,4 @@ export function ListItem({
       )}
     </box>
   )
-}
+})

package/src/ui/root.tsx

@@ -1,8 +1,16 @@
 import type { MouseEvent } 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, ModalState, SessionRecord, SnippetRecord } from '../state/types'
+import type {
+  FocusMode,
+  ModalState,
+  SessionRecord,
+  SnippetRecord,
+  WorktreeRecord,
+} from '../state/types'
 import type { ThemeId } from './themes'
 
 import { useAppStore } from '../state/app-store'
@@ -35,6 +43,8 @@ import { PendingChordOverlay } from './components/overlays/pending-chord-overlay
 import { ToastViewport } from './components/overlays/toast/toast-viewport'
 import { useTheme } from './theme'
 
+const EMPTY_WORKTREES: WorktreeRecord[] = []
+
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
     return { directoryQuery: '', sessionName: '' }
@@ -106,8 +116,8 @@ function renderModal(
           worktrees={
             options.currentSessionId != null && options.currentSessionId !== ''
               ? (options.sessions.find((session) => session.id === options.currentSessionId)
-                  ?.worktrees ?? [])
-              : []
+                  ?.worktrees ?? EMPTY_WORKTREES)
+              : EMPTY_WORKTREES
           }
           worktreeName={modal.type === 'new-tab' ? modal.worktreeName : ''}
         />
@@ -189,21 +199,13 @@ function renderModal(
         options.currentSessionId != null && options.currentSessionId !== ''
           ? options.sessions.find((entry) => entry.id === options.currentSessionId)
           : undefined
-      const worktrees = session?.worktrees ?? []
-      const sourceId = modal.sourceWorktreeId
-      const source = worktrees.find((w) => w.id === sourceId)
-      const targets = worktrees.filter((w) => w.id !== sourceId)
-      const sourceLabel =
-        source?.branch != null && source.branch !== ''
-          ? source.branch
-          : (source?.name ?? 'worktree')
       return (
         <WorktreeMoveModal
           deleteSource={modal.type === 'worktree-move' ? modal.deleteSource : false}
           divergence={options.worktreeDivergence}
           selectedIndex={modal.selectedIndex}
-          sourceLabel={sourceLabel}
-          targets={targets}
+          sourceWorktreeId={modal.sourceWorktreeId}
+          worktrees={session?.worktrees ?? EMPTY_WORKTREES}
         />
       )
     }
@@ -322,14 +324,59 @@ export function RootView({
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
 
   const gitPaneInPaneOnLeft = gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left'
+  const splitChrome = PANE_BORDER * 2
+
+  const handleSidebarEdgeResize = useCallback(
+    (event: MouseEvent): boolean => {
+      onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
+      return true
+    },
+    [onSidebarResizeStart, sidebarWidth]
+  )
   const handleTerminalLeftEdgeMouseDown =
     sidebarVisible && !gitPaneInPaneOnLeft && onSidebarResizeStart
-      ? (event: MouseEvent) => {
-          onSidebarResizeStart({ initialWidth: sidebarWidth, screenStart: event.x })
-          return true
-        }
+      ? handleSidebarEdgeResize
       : undefined
 
+  const handleRootMouseDrag = useCallback(
+    (event: MouseEvent) => {
+      if (onSeparatorDrag?.(event) === true) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+    [onSeparatorDrag]
+  )
+  const handleRootMouseUp = useCallback(
+    (event: MouseEvent) => {
+      // Catch releases that land outside any TerminalPane (sidebar, gap,
+      // status bar, …) so an in-flight multi-click drag — and its
+      // auto-scroll interval — is always finalised.
+      onTerminalMouseUp?.(event)
+      onSeparatorDragEnd?.()
+    },
+    [onSeparatorDragEnd, onTerminalMouseUp]
+  )
+
+  const splitContentOrigin = useMemo(
+    () => ({
+      cols: terminalCols + splitChrome,
+      rows: terminalRows + splitChrome,
+      x: contentOrigin.x - PANE_BORDER,
+      y: contentOrigin.y - PANE_BORDER,
+    }),
+    [contentOrigin, splitChrome, terminalCols, terminalRows]
+  )
+  const splitBounds = useMemo(
+    () => ({
+      cols: terminalCols + splitChrome,
+      rows: terminalRows + splitChrome,
+      x: 0,
+      y: 0,
+    }),
+    [splitChrome, terminalCols, terminalRows]
+  )
+
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeTree =
     activeTabId != null && activeTabId !== ''
@@ -337,7 +384,6 @@ export function RootView({
       : null
   const createSessionFields = getCreateSessionFields(modal)
   const snippetEditorFields = getSnippetEditorFields(modal)
-  const splitChrome = PANE_BORDER * 2
 
   const inGitMode = focusMode === 'git' || modal.type === 'git-commit'
   if (inGitMode) {
@@ -373,19 +419,8 @@ export function RootView({
       width="100%"
       height="100%"
       backgroundColor={editorBg}
-      onMouseDrag={(event) => {
-        if (onSeparatorDrag?.(event) === true) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-      }}
-      onMouseUp={(event) => {
-        // Catch releases that land outside any TerminalPane (sidebar, gap,
-        // status bar, …) so an in-flight multi-click drag — and its
-        // auto-scroll interval — is always finalised.
-        onTerminalMouseUp?.(event)
-        onSeparatorDragEnd?.()
-      }}
+      onMouseDrag={handleRootMouseDrag}
+      onMouseUp={handleRootMouseUp}
     >
       {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
@@ -408,12 +443,7 @@ export function RootView({
             tabs={tabs}
             activeTabId={activeTabId}
             focusMode={focusMode}
-            contentOrigin={{
-              cols: terminalCols + splitChrome,
-              rows: terminalRows + splitChrome,
-              x: contentOrigin.x - PANE_BORDER,
-              y: contentOrigin.y - PANE_BORDER,
-            }}
+            contentOrigin={splitContentOrigin}
             mouseForwardingEnabled={mouseForwardingEnabled}
             localScrollbackEnabled={localScrollbackEnabled}
             onTerminalMouseEvent={onTerminalMouseEvent}
@@ -428,12 +458,7 @@ export function RootView({
             onSeparatorDragEnd={onSeparatorDragEnd}
             onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
             onMeasure={onMeasure}
-            bounds={{
-              cols: terminalCols + splitChrome,
-              rows: terminalRows + splitChrome,
-              x: 0,
-              y: 0,
-            }}
+            bounds={splitBounds}
           />
         ) : (
           <TerminalPane
@@ -509,16 +534,20 @@ function GitPaneInPaneMode({
       dispatchGlobal({ position: nextPosition, type: 'set-git-pane-position' })
     }
   )
+  const handleResizeMouseDown = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onGitPaneResizeStart?.({ initialWidth: width, screenStart: event.x, side: position })
+    },
+    [onGitPaneResizeStart, position, width]
+  )
   const handle = (
     <box
       width={1}
       flexShrink={0}
       backgroundColor={tokens.border}
-      onMouseDown={(event) => {
-        event.preventDefault()
-        event.stopPropagation()
-        onGitPaneResizeStart?.({ initialWidth: width, screenStart: event.x, side: position })
-      }}
+      onMouseDown={handleResizeMouseDown}
     />
   )
   return (