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
124 lines
4.5 KiB
Markdown
124 lines
4.5 KiB
Markdown
## MODIFIED Requirements
|
|
|
|
### Requirement: Terminal Resize
|
|
|
|
The system SHALL support terminal resize events.
|
|
|
|
#### Scenario: Resize terminal
|
|
- **GIVEN** an active terminal session
|
|
- **WHEN** the browser window is resized
|
|
- **THEN** the terminal dimensions (COLS, ROWS) are updated
|
|
- **AND** the shell receives the new size
|
|
- **AND** on mobile devices, the resize is debounced by 250ms
|
|
|
|
#### Scenario: Mobile keyboard resize
|
|
- **GIVEN** an active terminal session on a mobile device
|
|
- **WHEN** the virtual keyboard appears or disappears
|
|
- **THEN** the terminal container height adjusts to fit the visible viewport
|
|
- **AND** the terminal is refitted with new dimensions
|
|
|
|
### Requirement: WebSocket Terminal
|
|
|
|
The system SHALL provide terminal sessions via WebSocket.
|
|
|
|
#### Scenario: Mobile reconnection
|
|
- **GIVEN** a terminal session on a mobile device
|
|
- **WHEN** the WebSocket disconnects due to network change or backgrounding
|
|
- **THEN** the terminal shows a "Reconnecting..." status
|
|
- **AND** attempts to reconnect automatically
|
|
- **AND** if reconnection fails after 3 attempts, shows an error with a manual reconnect option
|
|
|
|
## ADDED Requirements
|
|
|
|
### Requirement: Mobile Terminal Layout
|
|
|
|
The system SHALL provide a fullscreen terminal experience on mobile devices.
|
|
|
|
#### Scenario: Mobile terminal page
|
|
- **WHEN** a user navigates to an instance terminal page on a mobile device (viewport width < 768px)
|
|
- **THEN** the AppShell chrome is collapsed to a minimal header
|
|
- **AND** the terminal occupies the full viewport below the header
|
|
- **AND** the header auto-hides after 3 seconds of inactivity
|
|
- **AND** tapping the terminal area toggles header visibility
|
|
|
|
#### Scenario: Collapsed AppShell header
|
|
- **WHEN** the terminal is in mobile mode
|
|
- **THEN** the header displays:
|
|
- A back button
|
|
- A hamburger menu toggle (reveals navigation)
|
|
- The instance name
|
|
- A close button
|
|
- **AND** the sidebar navigation is hidden by default
|
|
|
|
### Requirement: Special Keys Toolbar
|
|
|
|
The system SHALL provide access to special terminal keys on mobile devices.
|
|
|
|
#### Scenario: Special keys strip
|
|
- **WHEN** a user is on a mobile terminal
|
|
- **THEN** a strip of special keys is available at the bottom of the screen
|
|
- **AND** the strip contains: Esc, Tab, Ctrl, Alt, Up, Down, Left, Right
|
|
- **AND** the strip auto-hides after 3 seconds of inactivity
|
|
- **AND** swiping up from the bottom reveals the strip
|
|
- **AND** tapping the terminal area hides the strip
|
|
|
|
#### Scenario: Expanded special keys panel
|
|
- **WHEN** a user taps the "More" button on the special keys strip
|
|
- **THEN** an expanded panel appears with additional keys:
|
|
- Home, End, Page Up, Page Down
|
|
- Ctrl+C, Ctrl+D, Ctrl+Z
|
|
- F1 through F12
|
|
- **AND** tapping outside the panel closes it
|
|
|
|
#### Scenario: Sending special keys
|
|
- **WHEN** a user taps a special key
|
|
- **THEN** the corresponding escape sequence is sent via WebSocket
|
|
- **AND** the key press is visually acknowledged (brief highlight)
|
|
|
|
### Requirement: Touch Gestures
|
|
|
|
The system SHALL support touch interactions in the terminal.
|
|
|
|
#### Scenario: Disable browser zoom
|
|
- **WHEN** a user is on a mobile terminal page
|
|
- **THEN** browser zoom is disabled via `meta viewport` tag with `user-scalable=no`
|
|
- **AND** pinch gestures do not zoom the page
|
|
|
|
#### Scenario: Terminal scroll
|
|
- **WHEN** a user performs a two-finger swipe in the terminal
|
|
- **THEN** the terminal scrollback buffer scrolls
|
|
- **AND** the browser page does not scroll
|
|
|
|
#### Scenario: Text selection
|
|
- **WHEN** a user long-presses in the terminal
|
|
- **THEN** xterm.js native selection behavior is used
|
|
- **AND** browser native text selection UI is suppressed
|
|
|
|
### Requirement: Copy and Paste
|
|
|
|
The system SHALL provide copy and paste functionality on mobile devices.
|
|
|
|
#### Scenario: Copy button
|
|
- **WHEN** a user selects text in the terminal
|
|
- **THEN** a "Copy" button appears in the header
|
|
- **AND** tapping it copies the selection to clipboard
|
|
|
|
#### Scenario: Paste button
|
|
- **WHEN** a user taps a "Paste" button in the header or special keys panel
|
|
- **THEN** the system attempts to read from the clipboard
|
|
- **AND** pastes the content into the terminal
|
|
|
|
### Requirement: Font Scaling
|
|
|
|
The system SHALL provide readable font sizes on mobile devices.
|
|
|
|
#### Scenario: Mobile font size
|
|
- **WHEN** the terminal is displayed on a mobile device
|
|
- **THEN** the font size is at least 16px
|
|
- **AND** the font size scales proportionally with viewport width (min 16px, max 24px)
|
|
|
|
#### Scenario: Font size preference
|
|
- **WHEN** a user changes the font size
|
|
- **THEN** the preference is persisted in localStorage
|
|
- **AND** applied on subsequent terminal sessions
|