# Ticket 4.9 — Slash Command Autocomplete

**Phase**: 4 — Frontend UI
**Priority**: Medium
**Depends on**: 4.1

## Description

When the user types `/` in the input field, show an autocomplete menu of available commands. Commands are fetched from OpenCode's `/command` endpoint. The menu is keyboard-navigable.

## Acceptance Criteria

### AC1: Typing "/" shows command menu

```gherkin
Given the input field is focused
When the user types "/"
Then an autocomplete popup appears above the input
And it lists available commands (e.g., /compact, /clear, /model, /agent)
And each command shows a brief description
```

### AC2: Filtering by typing

```gherkin
Given the command menu is visible
When the user types "/mo"
Then the list filters to show only matching commands (e.g., /model)
And non-matching commands are hidden
```

### AC3: Keyboard navigation

```gherkin
Given the command menu is visible
When the user presses Arrow Down
Then the next command is highlighted

When the user presses Arrow Up
Then the previous command is highlighted

When the user presses Enter on a highlighted command
Then the command is inserted into the input field
And the menu closes
```

### AC4: Mouse selection

```gherkin
Given the command menu is visible
When the user clicks on a command
Then the command is inserted into the input field
And the menu closes
```

### AC5: Dismiss menu

```gherkin
Given the command menu is visible
When the user presses Escape
Then the menu closes
And the "/" remains in the input field

When the user deletes the "/"
Then the menu closes
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Command filtering logic | Unit | Filters commands by typed prefix, returns sorted matches |
| Menu trigger | E2E | Typing "/" shows autocomplete menu, other keys don't |
| Command list | E2E | Shows all commands with descriptions from API |
| Keyboard navigation | E2E | Arrow keys navigate options, Enter selects, Escape dismisses |
| Mouse selection | E2E | Clicking an option inserts it and closes menu |
| Backspace dismiss | E2E | Backspacing over "/" closes the menu |

## Reference

- Claude-relay slash commands: `../claude-relay/lib/public/app.js` (command autocomplete)
- OpenCode commands endpoint: `GET /command/`
