Smart Slash Command Filtering with Input Hints

[ryaneggz]

Feature Request: Smart Slash Command Filtering with Input Hints

Replace the current menu-based navigation system with an intelligent command discovery interface that provides real-time filtering and helpful hints for slash commands and other input patterns.

Current System Analysis

The current implementation relies on:

• Manual command entry: Users must type complete slash commands without assistance
• Static help view: /help command shows all available commands but requires navigation away from input
• No input hints: No visual indicators of available commands or syntax
• Error-prone: Unknown commands result in error messages with generic help suggestion

Proposed Smart Command Interface

1. Smart Slash Command Filtering

When user types "/" in the input field:

• Display a filtered dropdown/overlay showing available slash commands
• Commands should appear in order of relevance/frequency
• Show command descriptions alongside command names
• Support partial matching (e.g., "/mo" shows "/models")

2. Real-time Command Filtering

As user continues typing after "/":

• Dynamically filter the command list based on input
• Highlight matching characters in command names
• Show only relevant commands, hiding non-matches
• Support fuzzy matching for better UX

3. Input Hints System

Add persistent hint display underneath the input field showing:

• Available "/" commands when input is empty
• Available "@" commands for future agent/tool targeting
• Context-sensitive hints based on current view
• Keyboard shortcuts (ESC, Ctrl+C, etc.)

4. Enhanced Input UX

• Arrow key navigation: Navigate through filtered command suggestions
• Tab completion: Auto-complete partial command matches
• Quick dismissal: ESC to close suggestions without clearing input
• Smart selection: Enter to execute highlighted command

User Stories

As a new user

• I want to see available commands when I type "/" so I can discover functionality
• I want command descriptions to understand what each command does
• I want hints about input patterns so I know how to interact with the system

As an experienced user

• I want fast command filtering so I can quickly find commands
• I want tab completion so I can efficiently enter commands
• I want the interface to stay out of my way when I know what I'm doing

As a developer

• I want the command system to be extensible for adding new commands
• I want consistent input handling across all views
• I want the filtering system to be performant with many commands

Technical Implementation

Affected Files and Components

Primary Files to Modify:

• /source/providers/AppProvider/index.tsx (lines 433-481) - Input handling logic
• /source/components/InteractiveApp.tsx (lines 83-88) - Input display component
• /source/views/HelpView.tsx - Command documentation reference

Current Input Handling Analysis

// Current input handling (AppProvider/index.tsx:433-481)
useInput((input, key) => {
    // Basic character accumulation and command execution
    // No filtering, hints, or autocomplete functionality
});

Proposed Architecture

1. Command Registry System

interface CommandDefinition {
    command: string;
    description: string;
    category: 'navigation' | 'configuration' | 'agent' | 'utility';
    aliases?: string[];
    handler: (args?: string[]) => void;
}

const COMMAND_REGISTRY: CommandDefinition[] = [
    { command: '/help', description: 'Show available commands', category: 'utility' },
    { command: '/chat', description: 'Start AI conversation', category: 'agent' },
    { command: '/models', description: 'Select AI model', category: 'configuration' },
    // ... other commands
];

2. Filtering Logic

interface FilterState {
    showSuggestions: boolean;
    filteredCommands: CommandDefinition[];
    selectedIndex: number;
    inputPrefix: string;
}

const filterCommands = (input: string): CommandDefinition[] => {
    if (\!input.startsWith('/')) return [];
    const query = input.slice(1).toLowerCase();
    return COMMAND_REGISTRY.filter(cmd => 
        cmd.command.slice(1).toLowerCase().includes(query) ||
        cmd.description.toLowerCase().includes(query)
    );
};

3. Enhanced Input Component

// New component structure for InteractiveApp.tsx
<Box borderStyle="round" borderColor="cyan" paddingX={1} marginY={1}>
    <Text color="cyan">$ </Text>
    <Text>{state.input}</Text>
    <Text color="gray">_</Text>
    
    {/* Command Suggestions Overlay */}
    {state.showCommandSuggestions && (
        <CommandSuggestionsOverlay 
            commands={state.filteredCommands}
            selectedIndex={state.selectedCommandIndex}
        />
    )}
</Box>

{/* Input Hints */}
<Box marginTop={1}>
    <Text color="gray" dimColor>
        {getInputHints(state.input, state.currentView)}
    </Text>
</Box>

4. Enhanced Input Handler

useInput((input, key) => {
    // Handle suggestion navigation
    if (state.showCommandSuggestions) {
        if (key.upArrow || key.downArrow) {
            // Navigate suggestions
            return;
        }
        if (key.tab) {
            // Tab complete selected command
            return;
        }
        if (key.escape) {
            // Close suggestions without clearing input
            return;
        }
    }
    
    // Handle slash command triggering
    if (input === '/' && state.input === '') {
        // Show all commands
        setState(prev => ({ 
            ...prev, 
            showCommandSuggestions: true,
            filteredCommands: COMMAND_REGISTRY
        }));
        return;
    }
    
    // Handle filtering as user types
    if (state.input.startsWith('/')) {
        const filtered = filterCommands(state.input + input);
        setState(prev => ({
            ...prev,
            filteredCommands: filtered,
            selectedCommandIndex: 0
        }));
    }
    
    // ... existing input handling
});

Acceptance Criteria

Core Functionality

• Typing "/" shows all available slash commands in an overlay
• Commands filter in real-time as user continues typing
• Each command displays its description alongside the command name
• Arrow keys navigate through filtered command suggestions
• Tab key completes the currently highlighted command
• ESC key closes suggestions without clearing input

Input Hints

• Persistent hint text below input showing available command patterns
• Hints update based on current view context
• Hints show keyboard shortcuts (ESC, Ctrl+C, etc.)
• Hints indicate "/" for commands and "@" for future agent targeting

UX Requirements

• Suggestions appear/disappear smoothly without jarring UI changes
• Filtering is case-insensitive and supports partial matches
• Command descriptions are concise but informative
• Interface remains responsive during filtering operations
• All existing command functionality remains unchanged

Technical Requirements

• No breaking changes to existing command handlers
• Filtering logic is efficient and doesn't block input
• Command registry is easily extensible for new commands
• Input handling remains consistent across all views
• Memory usage remains reasonable with large command lists

UI Mockup Description

$ /mo                              <- User input with cursor
┌─────────────────────────────────┐
│ /models - Select AI model       │ <- Highlighted suggestion
│ /home - Return to home screen   │
└─────────────────────────────────┘

Type "/" for commands, "@" for agents • ESC to go home • Ctrl+C to exit

Testing Scenarios

Basic Filtering

1. Type "/" - verify all commands appear
2. Type "/h" - verify only "/help" and "/home" appear
3. Type "/mod" - verify "/models" is highlighted
4. Press Tab - verify "/models" completes in input

Navigation

1. Type "/" then use arrow keys - verify highlight moves
2. Type "/" then ESC - verify suggestions close, input remains
3. Type "/help" then Enter - verify help view opens

Edge Cases

1. Type "/unknown" - verify no suggestions appear
2. Type "text/" - verify no suggestions (slash not at start)
3. Rapid typing - verify filtering keeps up without lag

Implementation Priority

High - This significantly improves user experience and command discoverability, replacing a core interaction pattern with a more intuitive system.

Dependencies

• React state management for filtering logic
• Ink.js text rendering for suggestion overlay
• No external libraries required

Future Enhancements

• Fuzzy matching algorithm for better command discovery
• Command usage analytics to improve suggestion ordering
• "@" prefix support for agent/tool targeting
• Command aliases and shortcuts
• Customizable command categories and groupings

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

[ryaneggz]

Done for most part.