feat(cli): TUI autocomplete sidebar + fuzzy match + arg hints + input history (P8-017) (#184)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

packages/cli/src/tui/components/command-autocomplete.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { CommandDef, CommandArgDef } from '@mosaic/types';
+
+interface CommandAutocompleteProps {
+  commands: CommandDef[];
+  selectedIndex: number;
+  inputValue: string; // the current input after '/'
+}
+
+export function CommandAutocomplete({
+  commands,
+  selectedIndex,
+  inputValue,
+}: CommandAutocompleteProps) {
+  if (commands.length === 0) return null;
+
+  // Filter by inputValue prefix/fuzzy match
+  const query = inputValue.startsWith('/') ? inputValue.slice(1) : inputValue;
+  const filtered = filterCommands(commands, query);
+
+  if (filtered.length === 0) return null;
+
+  const clampedIndex = Math.min(selectedIndex, filtered.length - 1);
+  const selected = filtered[clampedIndex];
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
+      {filtered.slice(0, 8).map((cmd, i) => (
+        <Box key={cmd.name}>
+          <Text color={i === clampedIndex ? 'cyan' : 'white'} bold={i === clampedIndex}>
+            {i === clampedIndex ? '▶ ' : '  '}/{cmd.name}
+          </Text>
+          {cmd.aliases.length > 0 && (
+            <Text color="gray"> ({cmd.aliases.map((a) => `/${a}`).join(', ')})</Text>
+          )}
+          <Text color="gray"> — {cmd.description}</Text>
+        </Box>
+      ))}
+      {selected && selected.args && selected.args.length > 0 && (
+        <Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
+          <Text color="yellow">
+            /{selected.name} {getArgHint(selected.args)}
+          </Text>
+          <Text color="gray"> — {selected.description}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function filterCommands(commands: CommandDef[], query: string): CommandDef[] {
+  if (!query) return commands;
+  const q = query.toLowerCase();
+  return commands.filter(
+    (c) =>
+      c.name.includes(q) ||
+      c.aliases.some((a) => a.includes(q)) ||
+      c.description.toLowerCase().includes(q),
+  );
+}
+
+function getArgHint(args: CommandArgDef[]): string {
+  if (!args || args.length === 0) return '';
+  return args.map((a) => (a.optional ? `[${a.name}]` : `<${a.name}>`)).join(' ');
+}

packages/cli/src/tui/components/input-bar.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useCallback } from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
-import type { ParsedCommand } from '@mosaic/types';
+import type { ParsedCommand, CommandDef } from '@mosaic/types';
 import { parseSlashCommand, commandRegistry } from '../commands/index.js';
+import { CommandAutocomplete } from './command-autocomplete.js';
+import { useInputHistory } from '../hooks/use-input-history.js';
 
 export interface InputBarProps {
   onSubmit: (value: string) => void;
@@ -12,6 +14,7 @@ export interface InputBarProps {
   isStreaming: boolean;
   connected: boolean;
   placeholder?: string;
+  allCommands?: CommandDef[];
 }
 
 export function InputBar({
@@ -22,8 +25,26 @@ export function InputBar({
   isStreaming,
   connected,
   placeholder: placeholderOverride,
+  allCommands,
 }: InputBarProps) {
   const [input, setInput] = useState('');
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
+  const [autocompleteIndex, setAutocompleteIndex] = useState(0);
+
+  const { addToHistory, navigateUp, navigateDown } = useInputHistory();
+
+  // Determine which commands to show in autocomplete
+  const availableCommands = allCommands ?? commandRegistry.getAll();
+
+  const handleChange = useCallback((value: string) => {
+    setInput(value);
+    if (value.startsWith('/')) {
+      setShowAutocomplete(true);
+      setAutocompleteIndex(0);
+    } else {
+      setShowAutocomplete(false);
+    }
+  }, []);
 
   const handleSubmit = useCallback(
     (value: string) => {
@@ -31,6 +52,10 @@ export function InputBar({
 
       const trimmed = value.trim();
 
+      addToHistory(trimmed);
+      setShowAutocomplete(false);
+      setAutocompleteIndex(0);
+
       if (trimmed.startsWith('/')) {
         const parsed = parseSlashCommand(trimmed);
         if (!parsed) {
@@ -60,9 +85,108 @@ export function InputBar({
       onSubmit(value);
       setInput('');
     },
-    [onSubmit, onSystemMessage, onLocalCommand, onGatewayCommand, isStreaming, connected],
+    [
+      onSubmit,
+      onSystemMessage,
+      onLocalCommand,
+      onGatewayCommand,
+      isStreaming,
+      connected,
+      addToHistory,
+    ],
   );
 
+  // Handle Tab: fill in selected autocomplete command
+  const fillAutocompleteSelection = useCallback(() => {
+    if (!showAutocomplete) return false;
+    const query = input.startsWith('/') ? input.slice(1) : input;
+    const filtered = availableCommands.filter(
+      (c) =>
+        !query ||
+        c.name.includes(query.toLowerCase()) ||
+        c.aliases.some((a) => a.includes(query.toLowerCase())) ||
+        c.description.toLowerCase().includes(query.toLowerCase()),
+    );
+    if (filtered.length === 0) return false;
+    const idx = Math.min(autocompleteIndex, filtered.length - 1);
+    const selected = filtered[idx];
+    if (selected) {
+      setInput(`/${selected.name} `);
+      setShowAutocomplete(false);
+      setAutocompleteIndex(0);
+      return true;
+    }
+    return false;
+  }, [showAutocomplete, input, availableCommands, autocompleteIndex]);
+
+  useInput((ch, key) => {
+    // Escape: hide autocomplete
+    if (key.escape && showAutocomplete) {
+      setShowAutocomplete(false);
+      setAutocompleteIndex(0);
+      return;
+    }
+
+    // Tab: fill autocomplete selection
+    if (key.tab) {
+      fillAutocompleteSelection();
+      return;
+    }
+
+    // Up arrow
+    if (key.upArrow) {
+      if (showAutocomplete) {
+        // Navigate autocomplete list up
+        setAutocompleteIndex((prev) => Math.max(0, prev - 1));
+      } else {
+        // Navigate input history
+        const prev = navigateUp(input);
+        if (prev !== null) {
+          setInput(prev);
+          if (prev.startsWith('/')) {
+            setShowAutocomplete(true);
+          }
+        }
+      }
+      return;
+    }
+
+    // Down arrow
+    if (key.downArrow) {
+      if (showAutocomplete) {
+        // Navigate autocomplete list down — compute filtered length
+        const query = input.startsWith('/') ? input.slice(1) : input;
+        const filteredLen = availableCommands.filter(
+          (c) =>
+            !query ||
+            c.name.includes(query.toLowerCase()) ||
+            c.aliases.some((a) => a.includes(query.toLowerCase())) ||
+            c.description.toLowerCase().includes(query.toLowerCase()),
+        ).length;
+        const maxVisible = Math.min(filteredLen, 8);
+        setAutocompleteIndex((prev) => Math.min(prev + 1, maxVisible - 1));
+      } else {
+        // Navigate input history downward
+        const next = navigateDown();
+        if (next !== null) {
+          setInput(next);
+          if (next.startsWith('/')) {
+            setShowAutocomplete(true);
+          } else {
+            setShowAutocomplete(false);
+          }
+        }
+      }
+      return;
+    }
+
+    // Return/Enter on autocomplete: fill selected command
+    if (key.return && showAutocomplete) {
+      fillAutocompleteSelection();
+      return;
+    }
+  });
+
   const placeholder =
     placeholderOverride ??
     (!connected
@@ -72,16 +196,25 @@ export function InputBar({
         : 'message mosaic…');
 
   return (
-    <Box paddingX={1} borderStyle="single" borderColor="gray">
-      <Text bold color="green">
-        {'❯ '}
-      </Text>
-      <TextInput
-        value={input}
-        onChange={setInput}
-        onSubmit={handleSubmit}
-        placeholder={placeholder}
-      />
+    <Box flexDirection="column">
+      {showAutocomplete && (
+        <CommandAutocomplete
+          commands={availableCommands}
+          selectedIndex={autocompleteIndex}
+          inputValue={input}
+        />
+      )}
+      <Box paddingX={1} borderStyle="single" borderColor="gray">
+        <Text bold color="green">
+          {'❯ '}
+        </Text>
+        <TextInput
+          value={input}
+          onChange={handleChange}
+          onSubmit={handleSubmit}
+          placeholder={placeholder}
+        />
+      </Box>
     </Box>
   );
 }