components/PromptInput/ — User Input Component

Contents

Architecture

flowchart TD
  PI["PromptInput.tsx\n(Main Component)"] --> TI["TextInput\n(Ink text field)"]
  PI --> AC["SlashCommandAutocomplete\n(Suggestion overlay)"]
  PI --> MS["ModeSelector\n(Permission mode)"]
  PI --> HN["useInputHistory\n(History hook)"]
  PI --> KS["useKeybinding\n(Shortcut wiring)"]
  PI --> PH["usePasteHandler\n(Paste detection)"]
  AC --> CMD["Command Registry\n(slash commands)"]
  MS --> PM["PermissionMode\n(utils/permissions)"]
  HN --> ST["AppState.inputHistory"]

Key Classes & Functions

Data Structures

Interactions

Lifecycle Diagram

The PromptInput component follows a well-defined lifecycle from user keypress through to message dispatch. The sequence diagram below shows how the main interaction paths work together.

sequenceDiagram
  participant U as User
  participant PI as PromptInput
  participant AC as Autocomplete
  participant H as History
  participant E as Engine

  U->>PI: Types characters
  PI->>AC: getCompletions(text)
  AC-->>PI: Matching commands
  U->>PI: Presses Up arrow
  PI->>H: getPreviousEntry()
  H-->>PI: Previous prompt text
  U->>PI: Presses Enter
  PI->>PI: handleSubmit(text)
  PI->>H: pushEntry(text)
  PI->>E: onSubmit(text)
  E-->>PI: isLoading=true

Configuration

Directory Map

components/PromptInput/
├── PromptInput.tsx             ← Main component: input field, autocomplete, mode selector
├── useInputHistory.ts          ← Hook: prompt history navigation (Up/Down arrows)
├── usePasteHandler.ts          ← Hook: multi-line paste detection and confirmation
├── types.ts                    ← Type definitions for props, history entries, completions
├── constants.ts                ← Configuration defaults (thresholds, debounce)
└── index.ts                    ← Public barrel export

Deep-Dive Highlights

Core mechanisms from this sub-module have been extracted into dedicated focus pages for in-depth exploration. Each page covers one algorithm, protocol, or subsystem with diagrams, code walks, and configuration details.

Deep-Dive Pages

Performance Notes

Input Debouncing

Autocomplete filtering is debounced at 50 ms to prevent excessive re-renders during fast typing. The completion list is pre-filtered on the main thread since the command registry is small (typically <30 commands), making web worker offloading unnecessary.

History Memory

The input history is capped at 100 entries and persisted to AppState.inputHistory. Entries are deduplicated—submitting the same prompt twice moves it to the top instead of creating a duplicate. The history array is stored as a simple JSON-serializable list with no circular references.

Paste Detection

Multi-line pastes are detected by checking if the input length increases by more than one character in a single event cycle. Pastes exceeding 20 lines trigger a confirmation dialog to prevent accidental submission of large clipboard contents. The paste handler also normalizes line endings (CRLF → LF) and strips trailing whitespace from each line.

Error Handling

Keyboard Shortcuts

Code Examples

Example: Handling Submit with History Push

// Inside PromptInput — simplified submit handler
const handleSubmit = useCallback((text: string) => {
  if (!text.trim() || isLoading) return;

  // Push to history before dispatching
  inputHistory.push({ text, timestamp: Date.now() });

  // Check for slash command prefix
  if (text.startsWith('/')) {
    const cmd = commands.find(c => text.startsWith('/' + c.name));
    if (cmd) {
      cmd.run(text.slice(cmd.name.length + 2).trim());
      return;
    }
  }

  onSubmit(text);
}, [isLoading, commands, onSubmit, inputHistory]);

Example: Autocomplete Filtering

// Slash command autocomplete with fuzzy prefix matching
function getCompletions(input: string, commands: Command[]): AutocompleteItem[] {
  if (!input.startsWith('/')) return [];
  const query = input.slice(1).toLowerCase();

  return commands
    .filter(cmd => cmd.name.toLowerCase().startsWith(query))
    .slice(0, 8)
    .map(cmd => ({
      name: cmd.name,
      description: cmd.description,
      argHint: cmd.argHint ?? '',
    }));
}

Example: History Navigation Hook

// useInputHistory hook — manages Up/Down arrow history navigation
function useInputHistory(history: InputHistoryEntry[]) {
  const [historyIndex, setHistoryIndex] = useState(-1);
  const [draft, setDraft] = useState('');

  const navigateUp = useCallback(() => {
    if (historyIndex < history.length - 1) {
      if (historyIndex === -1) setDraft(currentInput);
      setHistoryIndex(prev => prev + 1);
      return history[historyIndex + 1]?.text ?? '';
    }
    return null; // At oldest entry
  }, [historyIndex, history]);

  const navigateDown = useCallback(() => {
    if (historyIndex > 0) {
      setHistoryIndex(prev => prev - 1);
      return history[historyIndex - 1]?.text ?? '';
    }
    if (historyIndex === 0) {
      setHistoryIndex(-1);
      return draft; // Restore current draft
    }
    return null; // Not in history
  }, [historyIndex, draft, history]);

  return { navigateUp, navigateDown, resetHistory };
}