# Ticket 5.5 — Question / Ask-User UI

**Phase**: 5 — OpenCode-Specific Features
**Priority**: High
**Depends on**: 1.6, 4.1

## Description

Frontend UI for the question flow. When the agent asks a question with multiple-choice options (and optional free-text), the UI displays it as an interactive card in the chat. This is SEPARATE from the permission approval UI.

Note: OpenCode uses `multiple` (not `multiSelect`) and has a `custom` boolean controlling whether free-text "Other" is available (default true). The question bridge (ticket 1.6) maps `multiple` → `multiSelect` for frontend compatibility. Answers are sent as `Array<Array<string>>` to OpenCode (mapped from the frontend's `{ [idx]: "label" }` format by the bridge).

## Acceptance Criteria

### AC1: Displays question with options

```gherkin
Given the agent asks "Which library should we use for date formatting?"
With options: ["date-fns (Recommended)", "moment.js", "dayjs"]
When the ask_user message arrives
Then a question card appears in the chat showing:
  - The question header (short label)
  - The full question text
  - Radio buttons for each option with label and description
  - A "Submit" button
```

### AC2: Multi-select questions

```gherkin
Given a question with multiSelect: true
When the question card renders
Then it shows checkboxes instead of radio buttons
And the user can select multiple options
And the Submit button sends all selected values
```

### AC3: Free-text "Other" option

```gherkin
Given a question with predefined options
When the card renders
Then an "Other" option is always available at the bottom
And selecting "Other" reveals a text input field
And the user can type a custom answer
```

### AC4: Submit sends answer

```gherkin
Given the user selects "date-fns"
When they click "Submit"
Then the browser sends { type: "ask_user_response", toolId, answers: {...} }
And the question card updates to show the selected answer
And the Submit button is replaced with the answer text
```

### AC5: Question with descriptions

```gherkin
Given an option with a description
When the question card renders
Then the option label is prominent
And the description appears below it in smaller text
```

### AC6: Pending question on reconnect

```gherkin
Given a question is pending
When a new browser connects
Then it receives the pending question
And the question card is displayed immediately
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Answer format conversion | Unit | Frontend answer format converts to Array<Array<string>> |
| Question card rendering | E2E | Question text, header, and options displayed correctly |
| Single-select | E2E | Radio buttons, only one option selectable at a time |
| Multi-select | E2E | Checkboxes, multiple options selectable |
| "Other" text input | E2E | Selecting "Other" shows text field, custom text submittable |
| Submit flow | E2E | Submit sends correct answer, card updates to resolved |
| Option descriptions | E2E | Labels prominent, descriptions shown below in smaller text |
| Reconnection replay | Fixture | Pending question replayed to newly connected client |

## Reference

- Claude-relay ask-user: `../claude-relay/lib/public/modules/tools.js` (ask user section)
- OpenCode question tool: `../opencode/packages/opencode/src/tool/question.ts`
- Question bridge: ticket 1.6
