Fusion
b6bda3d692
- Add mobile viewport detection hook - Add virtual keyboard detection with fallback - Add auto-hide hook for header/keys strip - Add special keys mapping hook - Create MobileTerminalHeader, SpecialKeysStrip, SpecialKeysPanel components - Create MobileTerminalWrapper component - Update TerminalComponent with mobile support, font scaling, copy/paste, reconnection - Update AppShell to hide chrome on mobile terminal pages - Update TerminalPage to use MobileTerminalWrapper - Add comprehensive mobile terminal styles - TypeScript check passes - Build succeeds
31 lines
1.9 KiB
Markdown
31 lines
1.9 KiB
Markdown
## Why
|
|
|
|
Terminal sessions are currently desktop-optimized and become practically unusable on mobile devices due to virtual keyboard conflicts, lack of touch gestures, missing special keys, and poor screen utilization. Users occasionally need to access terminal sessions from mobile devices to check logs, run quick commands, or monitor running processes, but the current experience is frustrating.
|
|
|
|
## What Changes
|
|
|
|
- **Mobile terminal page layout**: Fullscreen terminal experience with collapsible AppShell chrome on mobile viewports
|
|
- **Special keys toolbar**: Bottom-accessible strip with Esc, Tab, Ctrl, Alt, Arrow keys, and an expandable "More" panel with Home/End/PgUp/PgDn/Ctrl+C/etc
|
|
- **Dynamic viewport handling**: Resize terminal container based on virtual keyboard presence using `visualViewport` API
|
|
- **Touch gesture support**: Disable browser zoom, intercept touch events for terminal interaction
|
|
- **Auto-hiding chrome**: Header and special keys strip auto-hide after inactivity, tap/swipe to reveal
|
|
- **Orientation handling**: Debounced resize for screen rotation
|
|
- **Font scaling**: Responsive font size based on viewport dimensions
|
|
|
|
## Capabilities
|
|
|
|
### New Capabilities
|
|
- `mobile-terminal-ux`: Mobile-optimized terminal interface with special keys, dynamic sizing, and touch-friendly interactions
|
|
|
|
### Modified Capabilities
|
|
- `tool-terminal`: Add mobile-specific requirements for terminal resize, touch handling, and virtual keyboard awareness
|
|
- `frontend-foundation`: Add mobile layout behavior for terminal pages (collapsible AppShell, fullscreen mode)
|
|
|
|
## Impact
|
|
|
|
- Frontend: New components (`MobileTerminalHeader`, `SpecialKeysStrip`, `useMobileViewport` hook), modifications to `terminal.tsx`, `terminal-page.tsx`, `app-shell.tsx`
|
|
- Styles: New mobile terminal CSS, touch-action overrides
|
|
- Dependencies: No new dependencies (uses existing xterm.js, React)
|
|
- Browser support: Requires `visualViewport` API (modern browsers)
|
|
- Breaking: None
|