# Ticket 11.3 — Terminal Mobile Touch Toolbar

**Phase**: 11 — UI/UX Polish
**Priority**: Medium
**Depends on**: None

## Description

The CSS for a terminal mobile touch toolbar exists in style.css (`.term-touch-toolbar`, lines 493-523) but no Svelte component actually renders it. On mobile devices, interacting with the terminal is difficult because virtual keyboards lack Tab, Ctrl, Escape, and arrow keys.

claude-relay implements a mobile-only toolbar bar below the terminal with virtual keys: Tab, Ctrl (toggle), Esc, Left Arrow, Right Arrow, Up Arrow, Down Arrow. The Ctrl key acts as a toggle (sticky) — pressing Ctrl then C sends Ctrl+C.

The xterm-adapter already exists (`xterm-adapter.ts`) but the mobile toolbar was not ported during the Svelte migration.

## Acceptance Criteria

### AC1: Toolbar visible on mobile
```gherkin
Given the user is on a mobile device with a viewport width less than 768px
When the terminal panel is open
Then a touch toolbar is displayed below the terminal
And the toolbar contains buttons for Tab, Ctrl, Esc, ←, →, ↑, ↓
```

### AC2: Tab key sends tab character
```gherkin
Given the terminal touch toolbar is visible
When the user taps the Tab button
Then a tab character (\t) is sent to the PTY via the xterm adapter
```

### AC3: Ctrl sticky toggle
```gherkin
Given the terminal touch toolbar is visible
When the user taps the Ctrl button
Then the Ctrl button is highlighted to indicate it is active
And the Ctrl button remains in the active state until another key is pressed
```

### AC4: Ctrl+key combo
```gherkin
Given the Ctrl button is in the active (toggled) state
When the user taps the C key on the virtual keyboard
Then the character \x03 (Ctrl+C) is sent to the PTY
And the Ctrl button is deactivated (returns to normal state)
```

### AC5: Escape sends escape sequence
```gherkin
Given the terminal touch toolbar is visible
When the user taps the Esc button
Then the escape character (\x1b) is sent to the PTY via the xterm adapter
```

### AC6: Arrow keys send ANSI sequences
```gherkin
Given the terminal touch toolbar is visible
When the user taps the ↑ button
Then the ANSI escape sequence \x1b[A is sent to the PTY
When the user taps the ↓ button
Then the ANSI escape sequence \x1b[B is sent to the PTY
When the user taps the → button
Then the ANSI escape sequence \x1b[C is sent to the PTY
When the user taps the ← button
Then the ANSI escape sequence \x1b[D is sent to the PTY
```

### AC7: Toolbar hidden on desktop
```gherkin
Given the user is on a device with a viewport width of 768px or greater
When the terminal panel is open
Then the touch toolbar is not displayed
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Touch toolbar rendering on mobile | E2E (mobile viewport) | Toolbar element exists and is visible at viewport < 768px |
| Tab key sends \t to PTY | Unit | Tapping Tab calls xterm adapter write with `\t` |
| Ctrl toggle state management | Unit | Ctrl button toggles `active` class; state resets after next key |
| Ctrl+C sends \x03 | Unit | With Ctrl active, pressing C sends `\x03` to PTY |
| Arrow keys send correct ANSI sequences | Unit | Each arrow button sends the correct `\x1b[A/B/C/D` sequence |
| Toolbar hidden on desktop | E2E (desktop viewport) | Toolbar element is not rendered or has `display: none` at viewport >= 768px |
| Esc key sends \x1b | Unit | Tapping Esc calls xterm adapter write with `\x1b` |

## Reference

- Existing CSS (unused): `conduit/src/lib/public/style.css` (lines 493-523, `.term-touch-toolbar`)
- claude-relay touch toolbar: `../claude-relay/lib/public/modules/terminal.js` (mobile special-key toolbar)
- xterm adapter: `conduit/src/lib/public/utils/xterm-adapter.ts`
- Terminal component: `conduit/src/lib/public/components/features/TerminalPanel.svelte`
