perf: optimize agent tool picker

Author: im10furry

apps/cli/src/commands/agent/agents/ui/EditAgent.tsx

@@ -139,7 +139,7 @@ export function EditAgent(props: {
             </Box>
           ) : null}
         </Panel>
-        <Instructions instructions="Press Enter to toggle selection - Up/Down Navigate - Esc to go back" />
+        <Instructions instructions="Enter activate - c continue - a all/none - Up/Down or j/k navigate - Esc back" />
       </>
     )
   }

apps/cli/src/commands/agent/agents/ui/wizard/ToolPicker.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  __getFocusableToolPickerIndexForTests,
+  __getToolPickerMaxVisibleItemsForTests,
+} from './ToolPicker'
+
+describe('ToolPicker viewport sizing', () => {
+  test('keeps a useful minimum in small terminals', () => {
+    expect(__getToolPickerMaxVisibleItemsForTests(10)).toBe(5)
+  })
+
+  test('caps rendered rows in large terminals', () => {
+    expect(__getToolPickerMaxVisibleItemsForTests(80)).toBe(14)
+  })
+
+  test('uses available space between the min and max', () => {
+    expect(__getToolPickerMaxVisibleItemsForTests(22)).toBe(12)
+  })
+})
+
+describe('ToolPicker focus movement', () => {
+  const items = [{}, { isHeader: true }, {}, {}, { isHeader: true }, {}]
+
+  test('skips headers while moving down', () => {
+    expect(__getFocusableToolPickerIndexForTests(items, 1, 1)).toBe(2)
+  })
+
+  test('skips headers while moving up', () => {
+    expect(__getFocusableToolPickerIndexForTests(items, 4, -1)).toBe(3)
+  })
+
+  test('falls back when the target edge is a header', () => {
+    expect(
+      __getFocusableToolPickerIndexForTests([{ isHeader: true }, {}], 0, -1),
+    ).toBe(1)
+  })
+})

apps/cli/src/commands/agent/agents/ui/wizard/ToolPicker.tsx

@@ -1,39 +1,100 @@
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Box, Text } from 'ink'
 import figures from 'figures'
 import type { Tool } from '../../tooling'
 import { themeColor } from '../colors'
 import { parseMcpToolName } from '../utils'
 import { useKeypress } from '#ui-ink/hooks/useKeypress'
+import { useTerminalSize } from '#ui-ink/hooks/useTerminalSize'
+import { getWindowedList } from '#ui-ink/primitives/list/windowedList'
+
+const MIN_VISIBLE_TOOL_ITEMS = 5
+const MAX_VISIBLE_TOOL_ITEMS = 14
+const TOOL_PICKER_RESERVED_ROWS = 10
+
+type ToolPickerItem = {
+  id: string
+  label: string
+  isHeader?: boolean
+  isToggle?: boolean
+  action: () => void
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+function getToolPickerMaxVisibleItems(rows: number): number {
+  return clamp(
+    rows - TOOL_PICKER_RESERVED_ROWS,
+    MIN_VISIBLE_TOOL_ITEMS,
+    MAX_VISIBLE_TOOL_ITEMS,
+  )
+}
+
+function getFocusableToolPickerIndex(
+  items: ReadonlyArray<{ isHeader?: boolean }>,
+  targetIndex: number,
+  direction: -1 | 1,
+): number {
+  if (items.length === 0) return 0
+
+  const clampedTarget = clamp(targetIndex, 0, items.length - 1)
+  if (!items[clampedTarget]?.isHeader) return clampedTarget
+
+  for (
+    let index = clampedTarget + direction;
+    index >= 0 && index < items.length;
+    index += direction
+  ) {
+    if (!items[index]?.isHeader) return index
+  }
+
+  for (
+    let index = clampedTarget - direction;
+    index >= 0 && index < items.length;
+    index -= direction
+  ) {
+    if (!items[index]?.isHeader) return index
+  }
+
+  return 0
+}
+
+export const __getToolPickerMaxVisibleItemsForTests =
+  getToolPickerMaxVisibleItems
+export const __getFocusableToolPickerIndexForTests = getFocusableToolPickerIndex
 
 export function ToolPicker(props: {
   tools: Tool[]
   initialTools: string[] | undefined
   onComplete: (tools: string[] | undefined) => void
   onCancel: () => void
 }) {
+  const { tools, initialTools, onComplete, onCancel } = props
+  const terminalSize = useTerminalSize()
   const normalizedTools = useMemo(() => {
     const unique = new Map<string, Tool>()
-    for (const tool of props.tools) {
+    for (const tool of tools) {
       if (!tool?.name) continue
       unique.set(tool.name, tool)
     }
     return Array.from(unique.values()).sort((a, b) =>
       a.name.localeCompare(b.name),
     )
-  }, [props.tools])
+  }, [tools])
 
   const allToolNames = useMemo(
     () => normalizedTools.map(t => t.name),
     [normalizedTools],
   )
 
   const initialSelectedNames = useMemo(() => {
-    if (!props.initialTools) return allToolNames
-    if (props.initialTools.includes('*')) return allToolNames
+    if (!initialTools) return allToolNames
+    if (initialTools.includes('*')) return allToolNames
     const available = new Set(allToolNames)
-    return props.initialTools.filter(t => available.has(t))
-  }, [props.initialTools, allToolNames])
+    return initialTools.filter(t => available.has(t))
+  }, [initialTools, allToolNames])
 
   const [selected, setSelected] = useState<string[]>(initialSelectedNames)
   const [cursorIndex, setCursorIndex] = useState(0)
@@ -43,30 +104,30 @@ export function ToolPicker(props: {
   const isAllSelected =
     selected.length === allToolNames.length && allToolNames.length > 0
 
-  const toggleOne = (name: string) => {
+  const toggleOne = useCallback((name: string) => {
     setSelected(prev =>
       prev.includes(name) ? prev.filter(x => x !== name) : [...prev, name],
     )
-  }
+  }, [])
 
-  const toggleMany = (names: string[], enable: boolean) => {
+  const toggleMany = useCallback((names: string[], enable: boolean) => {
     setSelected(prev => {
       if (enable) {
         const missing = names.filter(n => !prev.includes(n))
         return [...prev, ...missing]
       }
       return prev.filter(n => !names.includes(n))
     })
-  }
+  }, [])
 
-  const complete = () => {
+  const complete = useCallback(() => {
     const next =
       selected.length === allToolNames.length &&
       allToolNames.every(n => selected.includes(n))
         ? undefined
         : selected
-    props.onComplete(next)
-  }
+    onComplete(next)
+  }, [allToolNames, onComplete, selected])
 
   const categorized = useMemo(() => {
     const readOnly = new Set(['Read', 'LS', 'Glob', 'Grep'])
@@ -104,16 +165,8 @@ export function ToolPicker(props: {
       .sort((a, b) => a.serverName.localeCompare(b.serverName))
   }, [categorized.mcp])
 
-  type Item = {
-    id: string
-    label: string
-    isHeader?: boolean
-    isToggle?: boolean
-    action: () => void
-  }
-
-  const items: Item[] = useMemo(() => {
-    const out: Item[] = []
+  const items: ToolPickerItem[] = useMemo(() => {
+    const out: ToolPickerItem[] = []
 
     out.push({ id: 'continue', label: '[ Continue ]', action: complete })
     out.push({
@@ -204,11 +257,47 @@ export function ToolPicker(props: {
     mcpServers,
     selectedSet,
     showAdvanced,
+    toggleMany,
+    toggleOne,
   ])
 
-  useKeypress((_input, key) => {
+  useEffect(() => {
+    setCursorIndex(prev =>
+      getFocusableToolPickerIndex(items, Math.min(prev, items.length - 1), -1),
+    )
+  }, [items])
+
+  const maxVisibleItems = getToolPickerMaxVisibleItems(terminalSize.rows)
+  const window = useMemo(
+    () =>
+      getWindowedList({
+        itemCount: items.length,
+        focusIndex: cursorIndex,
+        maxVisible: maxVisibleItems,
+        indicatorRows: 2,
+      }),
+    [cursorIndex, items.length, maxVisibleItems],
+  )
+  const visibleItems = useMemo(
+    () => items.slice(window.start, window.end),
+    [items, window.end, window.start],
+  )
+
+  useKeypress((input, key) => {
+    const inputChar = input.length === 1 ? input : ''
+
     if (key.escape) {
-      props.onCancel()
+      onCancel()
+      return true
+    }
+
+    if (inputChar === 'c') {
+      complete()
+      return true
+    }
+
+    if (inputChar === 'a') {
+      toggleMany(allToolNames, !isAllSelected)
       return true
     }
 
@@ -218,32 +307,57 @@ export function ToolPicker(props: {
       return true
     }
 
-    if (key.upArrow) {
-      let next = cursorIndex - 1
-      while (next > 0 && items[next]?.isHeader) next--
-      setCursorIndex(Math.max(0, next))
+    if (key.upArrow || inputChar === 'k') {
+      setCursorIndex(prev => getFocusableToolPickerIndex(items, prev - 1, -1))
+      return true
+    }
+
+    if (key.downArrow || inputChar === 'j') {
+      setCursorIndex(prev => getFocusableToolPickerIndex(items, prev + 1, 1))
       return true
     }
 
-    if (key.downArrow) {
-      let next = cursorIndex + 1
-      while (next < items.length - 1 && items[next]?.isHeader) next++
-      setCursorIndex(Math.min(items.length - 1, next))
+    if (key.pageUp) {
+      setCursorIndex(prev =>
+        getFocusableToolPickerIndex(items, prev - window.visibleCount, -1),
+      )
+      return true
+    }
+
+    if (key.pageDown) {
+      setCursorIndex(prev =>
+        getFocusableToolPickerIndex(items, prev + window.visibleCount, 1),
+      )
+      return true
+    }
+
+    if (key.home || inputChar === 'g') {
+      setCursorIndex(getFocusableToolPickerIndex(items, 0, 1))
+      return true
+    }
+
+    if (key.end || inputChar === 'G') {
+      setCursorIndex(getFocusableToolPickerIndex(items, items.length - 1, -1))
       return true
     }
   })
 
+  const topIndicator = window.showUpIndicator
+    ? `More above (${window.start})`
+    : ' '
+  const bottomIndicator = window.showDownIndicator
+    ? `More below (${items.length - window.end})`
+    : ' '
+  const rangeSummary =
+    items.length > maxVisibleItems
+      ? `Showing ${window.start + 1}-${window.end} of ${items.length}`
+      : null
+
   return (
     <Box flexDirection="column" marginTop={1}>
-      <Text
-        color={cursorIndex === 0 ? themeColor('suggestion') : undefined}
-        bold={cursorIndex === 0}
-      >
-        {cursorIndex === 0 ? `${figures.pointer} ` : '  '}[ Continue ]
-      </Text>
-      <Text dimColor>{'-'.repeat(40)}</Text>
-      {items.slice(1).map((item, idx) => {
-        const index = idx + 1
+      <Text dimColor>{topIndicator}</Text>
+      {visibleItems.map((item, idx) => {
+        const index = window.start + idx
         const focused = index === cursorIndex
         const prefix = item.isHeader
           ? ''
@@ -267,12 +381,17 @@ export function ToolPicker(props: {
           </React.Fragment>
         )
       })}
+      <Text dimColor>{bottomIndicator}</Text>
       <Box marginTop={1} flexDirection="column">
         <Text dimColor>
           {isAllSelected
             ? 'All tools selected'
             : `${selectedSet.size} of ${allToolNames.length} tools selected`}
         </Text>
+        {rangeSummary ? <Text dimColor>{rangeSummary}</Text> : null}
+        <Text dimColor>
+          c continue - a all/none - j/k or arrows - PgUp/PgDn - Home/End
+        </Text>
       </Box>
     </Box>
   )

apps/cli/src/commands/agent/agents/ui/wizard/steps/StepSelectTools.tsx

@@ -33,7 +33,7 @@ export function StepSelectTools(props: {
           />
         </Box>
       </Panel>
-      <Instructions instructions="Press Enter to activate - Up/Down to navigate - Esc to go back" />
+      <Instructions instructions="Enter activate - c continue - a all/none - Up/Down or j/k navigate - Esc back" />
     </>
   )
 }

apps/cli/src/ui/components/CustomSelect/use-select-state.ts

@@ -202,7 +202,7 @@ export const useSelectState = ({
   onFocus,
   focusValue,
 }: UseSelectStateProps) => {
-  const flatOptions = flattenOptions(options)
+  const flatOptions = useMemo(() => flattenOptions(options), [options])
 
   const [state, dispatch] = useReducer(
     reducer,