@brimveyn/aimux 1.12.6 → 1.13.2

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

@@ -1,9 +1,9 @@
 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 { TabSession, TerminalSnapshot, TerminalSpan } from '../../../state/types'
+import type { FocusMode, TabSession, TerminalSnapshot, TerminalSpan } from '../../../state/types'
 
 import { type MeasuredPaneRect, usePaneSizeReport } from '../../../app-runtime/use-pane-size-report'
 import { logInputDebug } from '../../../debug/input-log'
@@ -15,7 +15,7 @@ import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 interface TerminalPaneProps {
   tab?: TabSession
   tabId?: string
-  focusMode: import('../../../state/types').FocusMode
+  focusMode: FocusMode
   isActive?: boolean
   contentOrigin: TerminalContentOrigin
   mouseForwardingEnabled: boolean
@@ -61,15 +61,15 @@ function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMo
 function renderSpan(span: TerminalSpan, key: string): ReactNode {
   let node: ReactNode = span.text
 
-  if (span.underline) {
+  if (span.underline === true) {
     node = <u>{node}</u>
   }
 
-  if (span.italic) {
+  if (span.italic === true) {
     node = <em>{node}</em>
   }
 
-  if (span.bold) {
+  if (span.bold === true) {
     node = <strong>{node}</strong>
   }
 
@@ -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,124 +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
-    ? [
-        [
-          '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)) {
-        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)) {
+      // 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)) {
-        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?.()
+      }
+      if (tabId != null && tabId !== '' && onPaneActivate && event.type === 'down') {
+        onPaneActivate(tabId)
       }
-      onSeparatorDragEnd?.()
-    }
-    if (tabId && onPaneActivate && event.type === 'down') {
-      onPaneActivate(tabId)
-    }
-    if (!canForwardMouse) {
-      if (tab && event.type === 'down' && event.button === 0 && onTerminalClick) {
-        onTerminalClick(event, contentOrigin, 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
@@ -281,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>
@@ -296,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}
@@ -308,7 +349,7 @@ export function TerminalPane({
           </box>
         )}
       </ContextMenuBox>
-      {tab?.status === 'disconnected' || tab?.errorMessage ? (
+      {tab?.status === 'disconnected' || (tab?.errorMessage != null && tab.errorMessage !== '') ? (
         // Absolutely positioned so it overlays the bordered box instead of
         // consuming a flex row. If it took a row, the rendered terminal area
         // would be one line shorter than the size sent to the PTY/xterm,
@@ -317,7 +358,9 @@ export function TerminalPane({
           {tab?.status === 'disconnected' ? (
             <text fg={t.warning}>Restored snapshot. Press Ctrl+r to restart this workspace.</text>
           ) : null}
-          {tab?.errorMessage ? <text fg={t.error}>{tab.errorMessage}</text> : null}
+          {tab?.errorMessage != null && tab?.errorMessage !== '' ? (
+            <text fg={t.error}>{tab.errorMessage}</text>
+          ) : null}
         </box>
       ) : null}
     </box>

package/src/ui/components/modals/app/ai-usage-modal.tsx

@@ -93,7 +93,7 @@ interface ToolSectionProps {
 
 function ToolSection({ snap, tool }: ToolSectionProps) {
   const t = useTheme()
-  const isHardError = Boolean(snap.error) && !snap.stale
+  const isHardError = Boolean(snap.error) && !(snap.stale === true)
   const relative = formatRelative(snap.lastUpdated)
 
   let body: ReactNode
@@ -119,7 +119,7 @@ function ToolSection({ snap, tool }: ToolSectionProps) {
         <text fg={t.text} selectable={false}>
           {TOOL_TITLE[tool]}
         </text>
-        {snap.planTier ? (
+        {snap.planTier != null && snap.planTier !== '' ? (
           <text fg={t.textMuted} selectable={false}>
             {snap.planTier}
           </text>
@@ -145,7 +145,10 @@ function WindowRow({ window }: { window: UsageWindow }) {
   }
 
   const pctText = percent === null ? '—' : `${Math.round(percent)}% used`
-  const resetText = window.timeRemaining ? `Resets in ${window.timeRemaining}` : null
+  const resetText =
+    window.timeRemaining != null && window.timeRemaining !== ''
+      ? `Resets in ${window.timeRemaining}`
+      : null
 
   return (
     <box flexDirection="column" paddingTop={1}>
@@ -164,7 +167,7 @@ function WindowRow({ window }: { window: UsageWindow }) {
         <text fg={t.textMuted} selectable={false}>
           {pctText}
         </text>
-        {resetText ? (
+        {resetText != null && resetText !== '' ? (
           <text fg={t.textMuted} selectable={false}>
             {resetText}
           </text>
@@ -181,7 +184,7 @@ function PaceLine({ pace }: { pace: NonNullable<UsageWindow['pace']> }) {
   if (paceStageIsBehind(pace.stage)) color = t.warning
   else if (paceStageIsAhead(pace.stage)) color = t.success
 
-  const suffix = pace.rightText ? ` · ${pace.rightText}` : ''
+  const suffix = pace.rightText != null && pace.rightText !== '' ? ` · ${pace.rightText}` : ''
   return (
     <text fg={color} selectable={false}>
       {`Pace: ${pace.label}${suffix}`}

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'
@@ -19,7 +19,7 @@ interface HelpModalProps {
 function matchesFilter(needle: string, ...fields: (string | undefined)[]): boolean {
   if (!needle) return true
   const lower = needle.toLowerCase()
-  return fields.some((f) => f?.toLowerCase().includes(lower))
+  return fields.some((f) => f?.toLowerCase().includes(lower) === true)
 }
 
 export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModalProps) {
@@ -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
@@ -75,9 +82,11 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
       items={items}
       selectedIndex={selectedIndex}
       emptyState={
-        <text fg={t.textMuted}>{filter ? 'No matching bindings.' : 'No bindings registered.'}</text>
+        <text fg={t.textMuted}>
+          {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'
 
@@ -90,7 +92,7 @@ export function GitCommitModal({
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const bgKind = useAppStore((s) => {
     const id = s.currentSessionId
-    return id ? s.autoCommit.bySession[id]?.kind : undefined
+    return id != null && id !== '' ? s.autoCommit.bySession[id]?.kind : undefined
   })
   const isBgGenerating = bgKind === 'generating'
   const showBgSpinner = isBgGenerating && !isConfirm && !isGenerating
@@ -99,9 +101,9 @@ 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) {
+    if (hasTitle || !(currentSessionId != null && currentSessionId !== '')) {
       dispatchGlobal({ type: 'git-commit-enter-confirm' })
       return
     }
@@ -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
@@ -62,7 +66,11 @@ export function CreateSessionModal({
         label="Search projects"
         placeholder="Type a project name..."
         value={directoryQuery}
-        displayValue={pendingProjectPath ? abbreviatePath(pendingProjectPath) : directoryQuery}
+        displayValue={
+          pendingProjectPath != null && pendingProjectPath !== ''
+            ? abbreviatePath(pendingProjectPath)
+            : directoryQuery
+        }
         items={items}
         selectedIndex={selectedIndex}
         maxVisibleRows={VISIBLE_ROWS}