Skip to content

Show reconnecting overlay and block terminal input while disconnected #61

@guysmoilov

Description

@guysmoilov

Problem\nWhen the browser tab loses its connection to tmux-mobile, the UI can still appear interactive. Users can keep trying to type/tap in terminals even though those interactions cannot succeed, which is confusing and feels broken.\n\n## Proposal\nAdd a prominent "Connecting…" overlay whenever the client is disconnected from the backend/control+terminal websocket(s), and prevent futile interaction until connectivity is restored.\n\n## Requirements\n- Detect disconnected state for terminal/control connectivity in the frontend.\n- Show a clear blocking overlay (for example: "Connecting…") above the terminal UI while disconnected.\n- Disable/ignore terminal interactions while disconnected (typing, taps/clicks that trigger terminal actions, compose sends, etc. as appropriate).\n- Implement active reconnection logic (retry with backoff/jitter) rather than waiting for manual reload.\n- Remove overlay and restore interactivity automatically once reconnected and authenticated/synced.\n\n## Acceptance criteria\n- Turning off backend connectivity (or dropping websocket connections) causes the overlay to appear quickly and reliably.\n- During disconnection, user input no longer appears to "work" locally in a misleading way.\n- Client attempts reconnection automatically and repeatedly until success (within sane retry limits/backoff behavior).\n- On successful reconnect, terminal state returns to usable without full page refresh.\n- Add/update tests to cover disconnected -> reconnect flow and interaction blocking behavior.\n\n## Notes\nGiven App.tsx currently owns websocket/session UI state, this likely touches connection state management there and related integration/e2e tests.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:frontendFrontend/UI codearea:networkConnections and client networkingarea:uxUser experience and interaction designenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions