refactor(components): use TextInput in Autocomplete

Changes:
- Uses `TextInput` from `@inkjs/ui` for the input field (better UX
  for typing)
- `TextInput` is uncontrolled, so we use `key={inputKey}` to force
  remount when setting value externally (tab completion)
- Custom suggestion UI only renders in command mode
  `(value.startsWith('/'))`
- Arrow keys and Tab for command selection only active in command mode

Trade-offs:
- Better text input UX (TextInput handles edge cases, paste, etc.)
- Simpler code (no cursor position management for regular typing)
- The `key` prop hack for forcing remount is slightly unconventional
  but necessary since TextInput is uncontrolled

Author: remarkablemark

eslint.config.mts

@@ -68,7 +68,14 @@ export default defineConfig([
           ],
         },
       ],
-      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'all',
+          argsIgnorePattern: '^_',
+        },
+      ],
       'no-console': 'error',
       'no-debugger': 'error',
       'no-restricted-imports': 'off',

src/components/Autocomplete.test.tsx

@@ -187,4 +187,61 @@ describe('Autocomplete', () => {
     await tick();
     expect(lastFrame()).toContain('abc');
   });
+
+  it('handles down arrow when no matches available', async () => {
+    const { lastFrame, stdin } = render(<Autocomplete onSubmit={vi.fn()} />);
+    // Type /xyz to get zero matches
+    stdin.write('/xyz');
+    await tick();
+    expect(lastFrame()).not.toContain('/model');
+    // Down arrow with matches.length=0 triggers Math.min(-1, 1) = -1 (line 39-40)
+    stdin.write(KEY.DOWN);
+    await tick();
+    // Should not crash
+    expect(lastFrame()).toContain('/xyz');
+  });
+
+  it('uses fallback match when selectedIndex out of bounds', async () => {
+    const onSubmit = vi.fn();
+    const { stdin } = render(<Autocomplete onSubmit={onSubmit} />);
+    // Type / then Tab twice - first Tab sets value, second tests with changed state
+    stdin.write('/');
+    await tick();
+    // Move down to increase selectedIndex
+    stdin.write(KEY.DOWN);
+    await tick();
+    stdin.write(KEY.DOWN);
+    await tick();
+    // Tab should complete using fallback when selectedIndex >= matches.length (line 44)
+    stdin.write(KEY.TAB);
+    await tick();
+    stdin.write(KEY.ENTER);
+    await tick();
+    // Should submit successfully
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
+  it('nullish coalescing when selectedIndex exceeds matches after filtering', async () => {
+    const { lastFrame, stdin } = render(<Autocomplete onSubmit={vi.fn()} />);
+    // Start with both matches showing
+    stdin.write('/');
+    await tick();
+    // Move down to select /mock (index 1)
+    stdin.write(KEY.DOWN);
+    await tick();
+    // Type 'mock' to narrow to just /mock - selectedIndex stays 1, matches.length becomes 1
+    stdin.write('m');
+    await tick();
+    stdin.write('o');
+    await tick();
+    stdin.write('c');
+    await tick();
+    stdin.write('k');
+    await tick();
+    // Tab should trigger ?? fallback since matches[1] is undefined
+    stdin.write(KEY.TAB);
+    await tick();
+    // Should complete to /mock using the fallback
+    expect(lastFrame()).toContain('/mock');
+  });
 });

src/components/Autocomplete.tsx

@@ -1,5 +1,6 @@
+import { TextInput } from '@inkjs/ui';
 import { Box, Text, useInput } from 'ink';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { type Command, COMMANDS, UI } from '../constants';
 
@@ -17,14 +18,19 @@ function getMatches(input: string): Command[] {
 
 export function Autocomplete({ isDisabled = false, onSubmit }: Props) {
   const [value, setValue] = useState('');
-  const [cursorPosition, setCursorPosition] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [inputKey, setInputKey] = useState(0);
 
   const matches = getMatches(value);
-  const showSuggestions = matches.length > 0;
+  const isCommandMode = value.startsWith('/');
 
   useInput(
-    (char, key) => {
+    (_char, key) => {
+      // v8 ignore next
+      if (!isCommandMode) {
+        return;
+      }
+
       if (key.upArrow) {
         setSelectedIndex((i) => Math.max(0, i - 1));
         return;
@@ -35,93 +41,50 @@ export function Autocomplete({ isDisabled = false, onSubmit }: Props) {
         return;
       }
 
-      // v8 ignore next 4
-      if (key.leftArrow) {
-        setCursorPosition((position) => Math.max(0, position - 1));
-        return;
-      }
-
-      // v8 ignore next 4
-      if (key.rightArrow) {
-        setCursorPosition((position) => Math.min(value.length, position + 1));
-        return;
-      }
-
-      if (key.tab && showSuggestions) {
+      if (key.tab && matches.length > 0) {
         // v8 ignore next
         const match = matches[selectedIndex] ?? matches[0];
         setValue(match.name);
         setSelectedIndex(0);
+        setInputKey((key) => key + 1);
         return;
       }
+    },
+    { isActive: !isDisabled && isCommandMode },
+  );
 
-      if (key.return) {
-        const submitValue =
-          showSuggestions && selectedIndex >= 0 && matches[selectedIndex]
-            ? matches[selectedIndex].name
-            : value;
-        const trimmed = submitValue.trim();
-        if (trimmed) {
-          onSubmit(trimmed);
-          setValue('');
-          setSelectedIndex(0);
-        }
-        return;
-      }
-
-      if (key.escape) {
+  const handleSubmit = useCallback(
+    (input: string) => {
+      const submitValue =
+        isCommandMode && matches.length > 0 && matches[selectedIndex]
+          ? matches[selectedIndex].name
+          : input;
+      const trimmed = submitValue.trim();
+      if (trimmed) {
+        onSubmit(trimmed);
         setValue('');
         setSelectedIndex(0);
-        return;
-      }
-
-      if (key.backspace || key.delete) {
-        setValue((value) => {
-          const before = value.slice(0, cursorPosition - 1);
-          const after = value.slice(cursorPosition);
-          return before + after;
-        });
-        setCursorPosition((position) => Math.max(0, position - 1));
-        setSelectedIndex(0);
-        return;
-      }
-
-      // v8 ignore next
-      if (char && !key.ctrl && !key.meta) {
-        setValue((value) => {
-          const before = value.slice(0, cursorPosition);
-          const after = value.slice(cursorPosition);
-          return before + char + after;
-        });
-        setCursorPosition((position) => position + 1);
-        setSelectedIndex(0);
+        setInputKey((key) => key + 1);
       }
     },
-    { isActive: !isDisabled },
+    [isCommandMode, matches, onSubmit, selectedIndex],
   );
 
   return (
     <Box flexDirection="column">
       <Box>
         <Text>{UI.PROMPT_PREFIX}</Text>
-
-        <Text>
-          {value.slice(0, cursorPosition)}
-          {cursorPosition < value.length ? (
-            <Text backgroundColor="black" color="white">
-              {value[cursorPosition]}
-            </Text>
-          ) : (
-            <Text backgroundColor="black" color="white">
-              {' '}
-            </Text>
-          )}
-          {value.slice(cursorPosition + 1)}
-        </Text>
+        <TextInput
+          key={inputKey}
+          isDisabled={isDisabled}
+          defaultValue={value}
+          onChange={setValue}
+          onSubmit={handleSubmit}
+        />
       </Box>
 
-      {showSuggestions && (
-        <Box flexDirection="column">
+      {isCommandMode && matches.length > 0 && (
+        <Box flexDirection="column" marginLeft={2}>
           {matches.map((command, index) => {
             const isHighlighted = index === selectedIndex;
             return (