@brimveyn/aimux 1.13.0 → 1.14.0

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

@@ -1,8 +1,8 @@
 import type { ModeId } from '@brimveyn/aimux-config'
-import type { ScrollBoxRenderable } from '@opentui/core'
+import type { MouseEvent as OtuiMouseEvent, ScrollBoxRenderable } from '@opentui/core'
 
 import { useTerminalDimensions } from '@opentui/react'
-import { type ReactNode, useLayoutEffect, useRef } from 'react'
+import { type ReactNode, useCallback, useLayoutEffect, useMemo, useRef } from 'react'
 
 import { useTheme } from '../../../theme'
 import { BareInput } from '../../primitives/bare-input'
@@ -49,35 +49,41 @@ function PickerItemCtas({
   onWorktree?: () => void
 }) {
   const t = useTheme()
+  const handleEdit = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.stopPropagation()
+      onEdit?.()
+    },
+    [onEdit]
+  )
+  const handleWorktree = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.stopPropagation()
+      onWorktree?.()
+    },
+    [onWorktree]
+  )
+  const handleDelete = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.stopPropagation()
+      onDelete?.()
+    },
+    [onDelete]
+  )
   return (
     <box flexDirection="row" gap={1}>
       {onEdit ? (
-        <box
-          onMouseDown={(event) => {
-            event.stopPropagation()
-            onEdit()
-          }}
-        >
+        <box onMouseDown={handleEdit}>
           <text fg={t.primary}>[edit]</text>
         </box>
       ) : null}
       {onWorktree ? (
-        <box
-          onMouseDown={(event) => {
-            event.stopPropagation()
-            onWorktree()
-          }}
-        >
+        <box onMouseDown={handleWorktree}>
           <text fg={t.warning}>[WT]</text>
         </box>
       ) : null}
       {onDelete ? (
-        <box
-          onMouseDown={(event) => {
-            event.stopPropagation()
-            onDelete()
-          }}
-        >
+        <box onMouseDown={handleDelete}>
           <text fg={t.error}>[del]</text>
         </box>
       ) : null}
@@ -109,13 +115,29 @@ export function Picker({
   const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const skipNextScrollRef = useRef(false)
 
-  const resetScrollTimer = () => {
+  const resetScrollTimer = useCallback(() => {
     if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current)
     scrollTimerRef.current = setTimeout(() => {
       isScrollingRef.current = false
       scrollTimerRef.current = null
     }, 10)
-  }
+  }, [])
+
+  const handleScrollboxScroll = useCallback(() => {
+    isScrollingRef.current = true
+    resetScrollTimer()
+  }, [resetScrollTimer])
+
+  const handleItemHover = useCallback(
+    (index: number) => {
+      if (isScrollingRef.current) return
+      skipNextScrollRef.current = true
+      onHover(index)
+    },
+    [onHover]
+  )
+
+  const listContentOptions = useMemo(() => ({ flexDirection: 'column' as const, gap }), [gap])
 
   useLayoutEffect(() => {
     if (!scrollboxRef.current) return
@@ -128,7 +150,7 @@ export function Picker({
     isScrollingRef.current = true
     scrollboxRef.current.scrollChildIntoView(target)
     resetScrollTimer()
-  }, [selectedIndex, items])
+  }, [selectedIndex, items, resetScrollTimer])
 
   return (
     <ModalShell
@@ -144,11 +166,8 @@ export function Picker({
         ref={scrollboxRef}
         scrollY
         height={items.length === 0 ? 0 : listHeight}
-        contentOptions={{ flexDirection: 'column', gap }}
-        onMouseScroll={() => {
-          isScrollingRef.current = true
-          resetScrollTimer()
-        }}
+        contentOptions={listContentOptions}
+        onMouseScroll={handleScrollboxScroll}
       >
         {(() => {
           let prevGroup: string | undefined
@@ -181,15 +200,12 @@ export function Picker({
               <ListItem
                 key={item.key}
                 id={item.key}
+                index={capturedIndex}
                 active={active}
                 title={item.title}
                 subtitle={item.subtitle}
                 trailing={trailing}
-                onHover={() => {
-                  if (isScrollingRef.current) return
-                  skipNextScrollRef.current = true
-                  onHover(capturedIndex)
-                }}
+                onHoverIndex={handleItemHover}
                 onClick={item.onClick}
               />
             )

package/src/ui/components/modals/snippets/snippet-picker-modal.tsx

@@ -1,3 +1,5 @@
+import { useCallback, useMemo } from 'react'
+
 import type { SnippetRecord } from '../../../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
@@ -31,35 +33,46 @@ export function SnippetPickerModal({
   snippets,
 }: SnippetPickerModalProps) {
   const t = useTheme()
-  const filtered = filterSnippets(snippets, filter)
+  const filtered = useMemo(() => filterSnippets(snippets, filter), [filter, snippets])
+
+  const items = useMemo<PickerItem[]>(
+    () =>
+      filtered.map((snippet, index) => {
+        const active = index === selectedIndex
+        const fromConfig = isConfigSnippetId(snippet.id)
+        return {
+          key: snippet.id,
+          onClick: () => {
+            dispatchGlobal({ type: 'close-modal' })
+            runSideEffectGlobal({ type: 'paste-selected-snippet' })
+          },
+          onDelete: fromConfig
+            ? undefined
+            : () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
+          onEdit: fromConfig
+            ? undefined
+            : () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
+          subtitle: <text fg={t.textMuted}>{truncateContent(snippet.content)}</text>,
+          title: (
+            <box flexDirection="row">
+              <text fg={active ? t.text : t.textMuted}>
+                <strong>{snippet.name}</strong>
+              </text>
+              {snippet.trigger != null && snippet.trigger !== '' ? (
+                <text fg={t.textMuted}>{` :${snippet.trigger}`}</text>
+              ) : null}
+              {fromConfig ? <text fg={t.textMuted}>{' [config]'}</text> : null}
+            </box>
+          ),
+        }
+      }),
+    [filtered, selectedIndex, t]
+  )
 
-  const items: PickerItem[] = filtered.map((snippet, index) => {
-    const active = index === selectedIndex
-    const fromConfig = isConfigSnippetId(snippet.id)
-    return {
-      key: snippet.id,
-      onClick: () => {
-        dispatchGlobal({ type: 'close-modal' })
-        runSideEffectGlobal({ type: 'paste-selected-snippet' })
-      },
-      onDelete: fromConfig
-        ? undefined
-        : () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
-      onEdit: fromConfig ? undefined : () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
-      subtitle: <text fg={t.textMuted}>{truncateContent(snippet.content)}</text>,
-      title: (
-        <box flexDirection="row">
-          <text fg={active ? t.text : t.textMuted}>
-            <strong>{snippet.name}</strong>
-          </text>
-          {snippet.trigger != null && snippet.trigger !== '' ? (
-            <text fg={t.textMuted}>{` :${snippet.trigger}`}</text>
-          ) : null}
-          {fromConfig ? <text fg={t.textMuted}>{' [config]'}</text> : null}
-        </box>
-      ),
-    }
-  })
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
 
   return (
     <Picker
@@ -83,7 +96,7 @@ export function SnippetPickerModal({
           <text fg={t.error}>{actionMessage}</text>
         ) : undefined
       }
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      onHover={handleHover}
     />
   )
 }

package/src/ui/components/modals/tabs/new-tab-modal.tsx

@@ -1,3 +1,5 @@
+import { useCallback, useMemo } from 'react'
+
 import type { AssistantId, WorktreeRecord } from '../../../../state/types'
 
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
@@ -68,11 +70,86 @@ export function NewTabModal({
   worktrees,
 }: NewTabModalProps) {
   const t = useTheme()
+  const options = useMemo(() => getAllAssistantOptions(customCommands), [customCommands])
+  const filtered = useMemo(() => filterAssistants(options, filter), [filter, options])
+
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
+
+  const worktreeItems = useMemo<PickerItem[]>(
+    () => [
+      ...worktrees.map((worktree, index) => {
+        const active = index === selectedIndex
+        const label = worktree.branch ?? worktree.name
+        const blockedReason = getDeleteBlockedReason({ currentSessionId, worktree, worktrees })
+        const canDelete = blockedReason == null || blockedReason === ''
+        return {
+          key: worktree.id,
+          onClick: () => {
+            dispatchGlobal({ index, type: 'set-modal-selection-index' })
+            runSideEffectGlobal({ type: 'launch-selected-assistant' })
+          },
+          onDelete:
+            active && canDelete && currentSessionId != null && currentSessionId !== ''
+              ? () => {
+                  dispatchGlobal({ index, type: 'set-modal-selection-index' })
+                  dispatchGlobal({ message: null, type: 'set-new-tab-worktree-delete-state' })
+                  runSideEffectGlobal({
+                    force: worktreeDeleteConfirmId === worktree.id,
+                    sessionId: currentSessionId,
+                    type: 'delete-worktree',
+                    worktreeId: worktree.id,
+                  })
+                }
+              : undefined,
+          subtitle: (
+            <box flexDirection="column">
+              <text fg={t.textMuted}>{worktree.path}</text>
+              <text fg={t.textMuted}>{worktree.source}</text>
+            </box>
+          ),
+          title: <text fg={active ? t.text : t.textMuted}>{label}</text>,
+        }
+      }),
+      {
+        key: '__create-worktree__',
+        onClick: () => dispatchGlobal({ type: 'enter-new-tab-worktree-create' }),
+        subtitle: <text fg={t.textMuted}>Create an Aimux temp worktree</text>,
+        title: <text fg={createWorktree ? t.text : t.textMuted}>Create new worktree</text>,
+      },
+    ],
+    [createWorktree, currentSessionId, selectedIndex, t, worktreeDeleteConfirmId, worktrees]
+  )
+
+  const items = useMemo<PickerItem[]>(
+    () =>
+      filtered.map((option, index) => {
+        const active = index === selectedIndex
+        const customCmd = customCommands[option.id]
+        return {
+          key: option.id,
+          onClick: () =>
+            dispatchGlobal({ assistantId: option.id, type: 'select-new-tab-assistant' }),
+          onEdit: () =>
+            dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
+          subtitle: (
+            <box flexDirection="column">
+              <text fg={t.textMuted}>{option.description}</text>
+              {customCmd != null && customCmd !== '' ? (
+                <text fg={t.primary}>{customCmd}</text>
+              ) : null}
+            </box>
+          ),
+          title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+        }
+      }),
+    [customCommands, filtered, selectedIndex, t]
+  )
 
   if (editingCommand !== null) {
-    const option =
-      getAllAssistantOptions(customCommands).find((o) => o.id === editingCommand) ??
-      getAssistantOption(0)
+    const option = options.find((o) => o.id === editingCommand) ?? getAssistantOption(0)
     return (
       <Form
         title={`Edit command — ${option.label}`}
@@ -90,9 +167,6 @@ export function NewTabModal({
     )
   }
 
-  const options = getAllAssistantOptions(customCommands)
-  const filtered = filterAssistants(options, filter)
-
   if (step === 'worktree-create') {
     const selectedAssistant =
       options.find((option) => option.id === selectedAssistantId) ?? options[0]
@@ -139,47 +213,6 @@ export function NewTabModal({
       worktree: selectedWorktree,
       worktrees,
     })
-    const worktreeItems: PickerItem[] = [
-      ...worktrees.map((worktree, index) => {
-        const active = index === selectedIndex
-        const label = worktree.branch ?? worktree.name
-        const blockedReason = getDeleteBlockedReason({ currentSessionId, worktree, worktrees })
-        const canDelete = blockedReason == null || blockedReason === ''
-        return {
-          key: worktree.id,
-          onClick: () => {
-            dispatchGlobal({ index, type: 'set-modal-selection-index' })
-            runSideEffectGlobal({ type: 'launch-selected-assistant' })
-          },
-          onDelete:
-            active && canDelete && currentSessionId != null && currentSessionId !== ''
-              ? () => {
-                  dispatchGlobal({ index, type: 'set-modal-selection-index' })
-                  dispatchGlobal({ message: null, type: 'set-new-tab-worktree-delete-state' })
-                  runSideEffectGlobal({
-                    force: worktreeDeleteConfirmId === worktree.id,
-                    sessionId: currentSessionId,
-                    type: 'delete-worktree',
-                    worktreeId: worktree.id,
-                  })
-                }
-              : undefined,
-          subtitle: (
-            <box flexDirection="column">
-              <text fg={t.textMuted}>{worktree.path}</text>
-              <text fg={t.textMuted}>{worktree.source}</text>
-            </box>
-          ),
-          title: <text fg={active ? t.text : t.textMuted}>{label}</text>,
-        }
-      }),
-      {
-        key: '__create-worktree__',
-        onClick: () => dispatchGlobal({ type: 'enter-new-tab-worktree-create' }),
-        subtitle: <text fg={t.textMuted}>Create an Aimux temp worktree</text>,
-        title: <text fg={createWorktree ? t.text : t.textMuted}>Create new worktree</text>,
-      },
-    ]
     return (
       <Picker
         title={`New assistant: ${selectedAssistant?.label ?? 'assistant'}`}
@@ -190,7 +223,7 @@ export function NewTabModal({
         items={worktreeItems}
         selectedIndex={selectedIndex}
         emptyState={<text fg={t.textMuted}>No worktrees.</text>}
-        onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+        onHover={handleHover}
         footer={
           <box flexDirection="column">
             {(worktreeDeleteMessage != null && worktreeDeleteMessage !== '') ||
@@ -213,23 +246,6 @@ export function NewTabModal({
     )
   }
 
-  const items: PickerItem[] = filtered.map((option, index) => {
-    const active = index === selectedIndex
-    const customCmd = customCommands[option.id]
-    return {
-      key: option.id,
-      onClick: () => dispatchGlobal({ assistantId: option.id, type: 'select-new-tab-assistant' }),
-      onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
-      subtitle: (
-        <box flexDirection="column">
-          <text fg={t.textMuted}>{option.description}</text>
-          {customCmd != null && customCmd !== '' ? <text fg={t.primary}>{customCmd}</text> : null}
-        </box>
-      ),
-      title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
-    }
-  })
-
   return (
     <Picker
       title="New assistant: choose assistant"
@@ -241,7 +257,7 @@ export function NewTabModal({
       items={items}
       selectedIndex={selectedIndex}
       emptyState={<text fg={t.textMuted}>No matching assistants.</text>}
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      onHover={handleHover}
       footer={
         <box flexDirection="column">
           <text fg={t.textMuted}>Step 1/2: choose assistant</text>

package/src/ui/components/modals/themes/theme-picker-modal.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo } from 'react'
+import { useCallback, useLayoutEffect, useMemo } from 'react'
 
 import type { ThemeId } from '../../../themes'
 
@@ -37,19 +37,28 @@ export function ThemePickerModal({
 
   const effectiveIndex = clampSelection(selectedIndex, filtered.length)
 
-  const items: PickerItem[] = filtered.map((id, rowIndex) => {
-    const active = rowIndex === effectiveIndex
-    const isCurrent = id === currentThemeId
-    return {
-      key: id,
-      onClick: () => {
-        dispatchGlobal({ type: 'close-modal' })
-        runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
-      },
-      title: <text fg={active ? t.text : t.textMuted}>{themeDisplayName(id)}</text>,
-      trailing: isCurrent ? <text fg={t.primary}>current</text> : undefined,
-    }
-  })
+  const items = useMemo<PickerItem[]>(
+    () =>
+      filtered.map((id, rowIndex) => {
+        const active = rowIndex === effectiveIndex
+        const isCurrent = id === currentThemeId
+        return {
+          key: id,
+          onClick: () => {
+            dispatchGlobal({ type: 'close-modal' })
+            runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
+          },
+          title: <text fg={active ? t.text : t.textMuted}>{themeDisplayName(id)}</text>,
+          trailing: isCurrent ? <text fg={t.primary}>current</text> : undefined,
+        }
+      }),
+    [currentThemeId, effectiveIndex, filtered, t]
+  )
+
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
 
   return (
     <Picker
@@ -70,7 +79,7 @@ export function ThemePickerModal({
       items={items}
       selectedIndex={effectiveIndex}
       emptyState={<text fg={t.textMuted}>No themes available.</text>}
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      onHover={handleHover}
     />
   )
 }

package/src/ui/components/modals/worktree/worktree-move-modal.tsx

@@ -1,3 +1,5 @@
+import { useCallback, useMemo } from 'react'
+
 import type { WorktreeRecord } from '../../../../state/types'
 
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
@@ -10,8 +12,8 @@ interface WorktreeMoveModalProps {
   deleteSource: boolean
   divergence: Record<string, { ahead: number; behind: number }>
   selectedIndex: number
-  sourceLabel: string
-  targets: WorktreeRecord[]
+  sourceWorktreeId: string
+  worktrees: WorktreeRecord[]
 }
 
 const MOVE_HINTS: [key: string, label: string][] = [
@@ -33,10 +35,24 @@ export function WorktreeMoveModal({
   deleteSource,
   divergence,
   selectedIndex,
-  sourceLabel,
-  targets,
+  sourceWorktreeId,
+  worktrees,
 }: WorktreeMoveModalProps) {
   const t = useTheme()
+  const source = useMemo(
+    () => worktrees.find((w) => w.id === sourceWorktreeId),
+    [sourceWorktreeId, worktrees]
+  )
+  const targets = useMemo(
+    () => worktrees.filter((w) => w.id !== sourceWorktreeId),
+    [sourceWorktreeId, worktrees]
+  )
+  const sourceLabel =
+    source?.branch != null && source.branch !== '' ? source.branch : (source?.name ?? 'worktree')
+  const handleSelectIndex = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
   return (
     <ModalShell
       title={`Move ${sourceLabel} →`}
@@ -74,9 +90,10 @@ export function WorktreeMoveModal({
               <ListItem
                 key={worktree.id}
                 id={worktree.id}
+                index={index}
                 active={active}
-                onHover={() => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
-                onClick={() => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+                onHoverIndex={handleSelectIndex}
+                onClickIndex={handleSelectIndex}
                 title={
                   <text fg={active ? t.text : t.textMuted} wrapMode="none">
                     {label}

package/src/ui/components/overlays/ai-usage/ai-usage-indicator.tsx

@@ -1,5 +1,7 @@
 import type { AIUsageTool } from '@brimveyn/aimux-config'
 
+import { useCallback } from 'react'
+
 import { useAIUsageStore } from '../../../../state/ai-usage-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { useTheme } from '../../../theme'
@@ -52,6 +54,15 @@ export function AIUsageIndicator() {
   const enabled = useAIUsageStore((s) => s.enabled)
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
+  const openModal = useCallback(
+    (e: { preventDefault: () => void; stopPropagation: () => void }) => {
+      e.preventDefault()
+      e.stopPropagation()
+      dispatchGlobal({ type: 'open-ai-usage-modal' })
+    },
+    []
+  )
+
   if (!enabled) return null
 
   const ordered: AIUsageTool[] = ['claude', 'codex']
@@ -59,12 +70,6 @@ export function AIUsageIndicator() {
     .map((tool) => ({ snap: snapshots[tool], tool }))
     .filter((entry) => entry.snap !== undefined)
 
-  const openModal = (e: { preventDefault: () => void; stopPropagation: () => void }) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dispatchGlobal({ type: 'open-ai-usage-modal' })
-  }
-
   if (entries.length === 0) {
     return (
       <box

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

@@ -1,21 +1,30 @@
 import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 import type { BoxProps } from '@opentui/react'
 
+import { memo, useCallback } from 'react'
+
 import { type ContextMenuItem, openContextMenu } from '../../../context-menu/controller'
 
 interface ContextMenuBoxProps extends BoxProps {
   rightClickMenu?: ContextMenuItem[]
 }
 
-export function ContextMenuBox({ onMouseDown, rightClickMenu, ...boxProps }: ContextMenuBoxProps) {
-  function handleMouseDown(this: BoxRenderable, event: OtuiMouseEvent): void {
-    if (event.button === 2 && rightClickMenu && rightClickMenu.length > 0) {
-      event.preventDefault()
-      event.stopPropagation()
-      openContextMenu(event.x, event.y, rightClickMenu)
-      return
-    }
-    onMouseDown?.call(this, event)
-  }
+export const ContextMenuBox = memo(function ContextMenuBox({
+  onMouseDown,
+  rightClickMenu,
+  ...boxProps
+}: ContextMenuBoxProps) {
+  const handleMouseDown = useCallback(
+    function (this: BoxRenderable, event: OtuiMouseEvent): void {
+      if (event.button === 2 && rightClickMenu && rightClickMenu.length > 0) {
+        event.preventDefault()
+        event.stopPropagation()
+        openContextMenu(event.x, event.y, rightClickMenu)
+        return
+      }
+      onMouseDown?.call(this, event)
+    },
+    [onMouseDown, rightClickMenu]
+  )
   return <box {...boxProps} onMouseDown={handleMouseDown} />
-}
+})