@brimveyn/aimux 1.12.6 → 1.13.2

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,40 +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 hasFilter = !!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 ? (
-        <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
@@ -94,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

@@ -1,6 +1,5 @@
 import type { ModeId } from '@brimveyn/aimux-config'
-
-import { type ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 import { useTheme } from '../../../theme'
 import { InputField } from '../../primitives/input-field'
@@ -84,8 +83,8 @@ export function FieldLabel({ active = false, children, description }: FieldLabel
   const t = useTheme()
   return (
     <box flexDirection="column">
-      {children ? <text fg={active ? t.text : t.textMuted}>{children}</text> : null}
-      {description ? <text fg={t.textMuted}>{description}</text> : null}
+      {children != null ? <text fg={active ? t.text : t.textMuted}>{children}</text> : null}
+      {description != null ? <text fg={t.textMuted}>{description}</text> : null}
     </box>
   )
 }
@@ -100,7 +99,7 @@ export function TextField({
 }: TextFieldProps) {
   return (
     <box flexDirection="column">
-      {label || description ? (
+      {label != null || description != null ? (
         <FieldLabel active={active} description={description}>
           {label}
         </FieldLabel>
@@ -148,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}
                 />
               )

package/src/ui/components/modals/shared/modal-shell.tsx

@@ -1,7 +1,7 @@
 import type { ModeId } from '@brimveyn/aimux-config'
+import type { ReactNode } from 'react'
 
 import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
-import { type ReactNode } from 'react'
 
 import { useTheme, useTransparent } from '../../../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
@@ -81,10 +81,10 @@ export function ModalShell({
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
             <text fg={t.text}>{title}</text>
-            {subtitle ? <text fg={t.textMuted}>{subtitle}</text> : null}
+            {subtitle != null && subtitle !== '' ? <text fg={t.textMuted}>{subtitle}</text> : null}
           </box>
           {children}
-          {footer ? <box>{footer}</box> : null}
+          {footer != null ? <box>{footer}</box> : null}
         </box>
       </box>
       {keybindsModeId ? <ModalKeybindsOverlay modeId={keybindsModeId} /> : null}

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'
@@ -18,6 +18,7 @@ export interface PickerItem {
   onClick?: () => void
   onEdit?: () => void
   onDelete?: () => void
+  onWorktree?: () => void
 }
 
 interface PickerProps {
@@ -38,27 +39,51 @@ interface PickerProps {
 const VIEWPORT_HEIGHT_RATIO = 0.6
 const MODAL_CHROME_ROWS = 6
 
-function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?: () => void }) {
+function PickerItemCtas({
+  onDelete,
+  onEdit,
+  onWorktree,
+}: {
+  onEdit?: () => void
+  onDelete?: () => void
+  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={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}
@@ -90,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
@@ -105,11 +146,11 @@ export function Picker({
       return
     }
     const target = items[selectedIndex]?.key
-    if (!target) return
+    if (!(target != null && target !== '')) return
     isScrollingRef.current = true
     scrollboxRef.current.scrollChildIntoView(target)
     resetScrollTimer()
-  }, [selectedIndex, items])
+  }, [selectedIndex, items, resetScrollTimer])
 
   return (
     <ModalShell
@@ -125,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
@@ -137,7 +175,7 @@ export function Picker({
           for (let index = 0; index < items.length; index++) {
             const item = items[index]
             if (!item) continue
-            if (item.group && item.group !== prevGroup) {
+            if (item.group != null && item.group !== '' && item.group !== prevGroup) {
               nodes.push(
                 <box key={`group::${item.group}`} paddingLeft={1} paddingTop={index === 0 ? 0 : 1}>
                   <text fg={t.textMuted} wrapMode="none">
@@ -151,22 +189,23 @@ export function Picker({
             const capturedIndex = index
             const trailing =
               item.trailing ??
-              (active && (item.onEdit || item.onDelete) ? (
-                <PickerItemCtas onEdit={item.onEdit} onDelete={item.onDelete} />
+              (active && (item.onEdit || item.onDelete || item.onWorktree) ? (
+                <PickerItemCtas
+                  onEdit={item.onEdit}
+                  onDelete={item.onDelete}
+                  onWorktree={item.onWorktree}
+                />
               ) : null)
             nodes.push(
               <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,33 +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: 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 ? <text fg={t.textMuted}>{` :${snippet.trigger}`}</text> : null}
-          {fromConfig ? <text fg={t.textMuted}>{' [config]'}</text> : null}
-        </box>
-      ),
-    }
-  })
+  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 handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
 
   return (
     <Picker
@@ -71,11 +86,17 @@ export function SnippetPickerModal({
       selectedIndex={selectedIndex}
       emptyState={
         <text fg={t.textMuted}>
-          {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
+          {filter != null && filter !== ''
+            ? 'No matching snippets.'
+            : 'No snippets yet. Press n to create one.'}
         </text>
       }
-      footer={actionMessage ? <text fg={t.error}>{actionMessage}</text> : undefined}
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      footer={
+        actionMessage != null && actionMessage !== '' ? (
+          <text fg={t.error}>{actionMessage}</text>
+        ) : undefined
+      }
+      onHover={handleHover}
     />
   )
 }