## 1. Mobile Detection and Hooks

- [x] 1.1 Create `useMobileViewport` hook for detecting mobile viewport (< 768px)
- [x] 1.2 Create `useVirtualKeyboard` hook using Visual Viewport API with fallback
- [x] 1.3 Create `useAutoHide` hook for managing auto-hide visibility with tap/swipe detection
- [x] 1.4 Create `useSpecialKeys` hook for mapping special keys to escape sequences

## 2. Mobile Terminal Components

- [x] 2.1 Create `MobileTerminalHeader` component with back button, menu toggle, instance name, close button
- [x] 2.2 Create `SpecialKeysStrip` component with primary keys (Esc, Tab, Ctrl, Alt, Arrows)
- [x] 2.3 Create `SpecialKeysPanel` expanded component with Home/End/PgUp/PgDn/Ctrl combos/F-keys
- [x] 2.4 Create `MobileTerminalWrapper` component that composes header, terminal, and keys strip
- [x] 2.5 Add hidden input element for maintaining virtual keyboard focus

## 3. Terminal Component Modifications

- [x] 3.1 Update `TerminalComponent` to accept mobile mode prop and adjust font size
- [x] 3.2 Add dynamic font scaling based on viewport width (16px min, 24px max)
- [x] 3.3 Add localStorage persistence for font size preference
- [x] 3.4 Implement debounced resize handler (250ms) for orientation changes
- [x] 3.5 Add touch-action: none and disable browser zoom on mobile
- [x] 3.6 Add copy/paste buttons to terminal header for mobile

## 4. AppShell and Page Integration

- [x] 4.1 Update `AppShell` to detect terminal routes and render minimal header on mobile
- [x] 4.2 Update `TerminalPage` to use `MobileTerminalWrapper` when on mobile viewport
- [x] 4.3 Add CSS transitions for header show/hide animations
- [x] 4.4 Ensure desktop terminal experience is unchanged

## 5. WebSocket and Reconnection

- [x] 5.1 Implement WebSocket reconnection with exponential backoff (max 3 attempts)
- [x] 5.2 Add "Reconnecting..." status indicator in terminal header
- [x] 5.3 Add manual reconnect button on connection failure
- [x] 5.4 Use Visibility API to reconnect when app returns from background

## 6. Styling

- [x] 6.1 Add mobile terminal CSS variables and layout styles
- [x] 6.2 Style special keys strip with touch-friendly targets (min 44px height)
- [x] 6.3 Style expanded keys panel as bottom sheet
- [x] 6.4 Add dark theme support for mobile terminal chrome
- [x] 6.5 Ensure proper z-index layering (terminal content above keys strip above keyboard)

## 7. Testing and Verification

- [x] 7.1 Run `npm run typecheck` and fix errors
- [x] 7.2 Run `npm run lint` and fix warnings
- [x] 7.3 Run `npm run build` successfully
- [ ] 7.4 Test on actual mobile device (iOS Safari)
- [ ] 7.5 Test on actual mobile device (Android Chrome)
- [x] 7.6 Verify desktop terminal is unchanged
- [ ] 7.7 Test screen rotation handling
- [ ] 7.8 Test virtual keyboard appearance/disappearance
- [ ] 7.9 Verify copy/paste functionality